/* ==========================================================================
   nuernberg-shk-bernhardt — design language „farbblock-duo · Zinne“ (LIGHT). Spec: DESIGN-LANGUAGE.md · gate: tools/contrast.php
   Two strong LIGHT colour blocks alternate full-bleed — Band A „Aqua-Dunst“ (--c1, cool) and Band B „Rotsandstein-Rosé“ (--c2, warm) — with white and warm-paper reading bands between. Both blocks carry INK.
   The brand colour (--teal, --teal-dark) is DARK and carries WHITE: the fill of the phone button, the logo tile, number / icon plates (<= 56 px), thin rules and the focus ring — never a band, bar, header, drawer or footer.
   --teal-dark is also the link / kicker TEXT colour on white, paper and the pale tints; on the colour blocks links and kickers are INK. Ink (--ink) is text, hairlines and icon strokes. Nothing on this site is dark.
   SIGNATURE: the ZINNE (battlement) family .nbg-zinne* — square merlons, flat tops, hard 90 degree steps: the band seam, the stepped Zinnenecke of cards / frames / plates, the merlon row.
   ========================================================================== */

:root{
  /* THE DUO — strong light-value colour blocks, ink on both */
  --c1:#86CDC9;--c2:#E6AFA2;--on-c1:#0F1C22;--on-c2:#0F1C22;
  /* pale reading tints of the two blocks */
  --tint-a:#EAF6F8;--tint-b:#FBEDE8;
  /* TEAL — locked from the favicon; carries WHITE (5.85 : 1 / 8.63 : 1) */
  --teal:#0A6E86;--teal-dark:#065365;
  --ink:#0F1C22;--ink-soft:#355059;--ink-2:#24373F;
  --white:#FFFFFF;--paper:#FAF6F0;
  --line-strong:#587480;
  --danger:#B3261E;--danger-bg:#FBEDEB;
  /* hairlines (ink at 14 / 22 %), soft shadows (only on parts that are not cut by a Zinne clip) */
  --hair:rgba(15,28,34,.14);--hair-2:rgba(15,28,34,.22);
  --sh-sm:0 1px 2px rgba(15,28,34,.06),0 6px 18px rgba(15,28,34,.07);
  --sh:0 20px 44px -16px rgba(15,28,34,.26);
  --sh-btn:0 10px 22px -10px rgba(10,110,134,.62);
  /* shape — ZINNE: --zn is ONE step of the stepped corner (set per component group), --zr the hard 2 px corner of everything that is not stepped; buttons keep --rd */
  --zr:2px;--zn:7px;--rd:8px;
  /* the merlon profile of every Zinne edge: 3 merlons (28 px) with 20 px crenels, then a 64 px gap — repeats every 188 px */
  --zin-teeth:linear-gradient(90deg,#000 0 28px,transparent 28px 48px,#000 48px 76px,transparent 76px 96px,#000 96px 124px,transparent 124px 188px);
  --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; Band A (aqua) and Band B (rose) are the colour blocks.
   --plate = the fill of icon / number plates, --alt = the OTHER block colour (hero base, phone band half). 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(--teal-dark);--kick:var(--teal-dark);--plate:var(--tint-a);--alt:var(--c2)}
.band--paper{--bg-band:var(--paper);--plate:var(--tint-a);--alt:var(--c1)}
.band--rose{--bg-band:var(--c2);--fg:var(--on-c2);--muted:var(--ink-2);--link:var(--ink);--kick:var(--ink);--plate:var(--white);--alt:var(--c1)}
.band--aqua{--bg-band:var(--c1);--fg:var(--on-c1);--muted:var(--ink-2);--link:var(--ink);--kick:var(--ink);--plate:var(--white);--alt:var(--c2)}
.card,.tile,.promise,.step,.notice,.factsheet,.phonebox,.callrow,.cta__dial,.hero__dial,.phoneband__copy,.compare__col,.foot__phone,.sub,.drawer__p,.hero__tag,.gal figcaption,.fig--box figcaption,.trustbar li{--fg:var(--ink);--muted:var(--ink-soft);--link:var(--teal-dark);--kick:var(--teal-dark);--plate:var(--tint-a)}

/* ------------------------------------------------------------------ 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-color:currentColor;text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
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 #065365 ring with a white gap on white / paper and on the phone button; INK on the colour blocks */
:focus-visible{outline:3px solid var(--teal-dark);outline-offset:3px;border-radius:var(--zr);box-shadow:0 0 0 6px var(--white)}
.band--rose :focus-visible,.band--aqua :focus-visible{outline-color:var(--ink)}
.skip{position:fixed;left:12px;top:-90px;z-index:400;background:var(--white);color:var(--teal-dark);padding:12px 18px;border:3px solid var(--teal-dark);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}
.nbg-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 60%,var(--plate) 60% 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 three-merlon mark (teal) 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{content:"";display:inline-block;flex:none;width:21px;height:9px;background:var(--teal);clip-path:polygon(0 0,5px 0,5px 3px,8px 3px,8px 0,13px 0,13px 3px,16px 3px,16px 0,21px 0,21px 9px,0 9px)}

/* 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(--zr);background:var(--teal-dark);color:var(--white);display:grid;place-items:center;flex:none;transition:transform .2s var(--ease),background-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, aqua and rose: TEAL fill, WHITE label, 2 px #065365 border, soft shadow; hover = #065365 */
.btn--call{padding:8px 26px 8px 8px;background:var(--teal);color:var(--white);border-color:var(--teal-dark);box-shadow:var(--sh-btn);white-space:nowrap}
.btn--call:hover{background:var(--teal-dark);color:var(--white)}
.btn--call:hover .btn__ic{background:var(--teal)}
.btn--lg.btn--call{padding:9px 30px 9px 9px}
.btn--call:focus-visible{outline:3px solid var(--teal-dark);outline-offset:3px;box-shadow:0 0 0 6px var(--white)}
.band--rose .btn--call:focus-visible,.band--aqua .btn--call:focus-visible{outline-color:var(--ink)}
.btn--accent:not(.btn--call){background:var(--white);color:var(--teal-dark);border-color:var(--teal-dark)}
.btn--accent:not(.btn--call):hover{background:var(--teal-dark);color:var(--white)}
/* secondary actions: ink ghost, white tile, text link — never teal-filled (the teal 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-underline-offset:.22em}
.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:1px solid var(--hair-2);--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:21px;height:9px;background:var(--teal);clip-path:polygon(0 0,5px 0,5px 3px,8px 3px,8px 0,13px 0,13px 3px,16px 3px,16px 0,21px 0,21px 9px,0 9px);flex:none}
.topbar__short,.topbar__x{display:none}
.topbar a{color:var(--ink);font-weight:800;text-decoration:underline;text-underline-offset:.2em;display:inline-flex;align-items:center;min-height:var(--topbar-h);white-space:nowrap}
.topbar a:hover{text-decoration-thickness:2px}
.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(15,28,34,.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 (teal tile, #065365 second tone, the white double wrench) + a bold wordmark 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(--zr);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(--teal-dark)}
.brand__s{display:flex;align-items:center;gap:7px;font:800 .64rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;margin-top:4px}
.brand__s::before{content:"";flex:none;width:15px;height:7px;background:var(--teal);clip-path:polygon(0 0,4px 0,4px 2px,6px 2px,6px 0,9px 0,9px 2px,11px 2px,11px 0,15px 0,15px 7px,0 7px)}
.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:14px;right:14px;bottom:5px;height:3px;border-radius:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}
.menu>li>a:hover::after,.menu>li.is-current>a::after,.menu>li:focus-within>a::after{transform:scaleX(1)}
.menu>li.is-current>a{color:var(--teal-dark);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(--zr);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(--zr);background:var(--plate);color:var(--teal-dark)}
.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(--teal-dark);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(--zr);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(250,246,240,.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(--zr);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(--zr);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(--tint-b);border-left-color:var(--teal);color:var(--teal-dark)}
.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(--tint-b);color:var(--teal-dark)}
.drawer__sub .ic{width:30px;height:30px;padding:6px;border-radius:var(--zr);background:var(--plate);color:var(--teal-dark)}
.drawer__call{margin-top:auto;padding:16px;border-radius:var(--zr);background:var(--c1);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--rose+.band--rose.band--flush-top,.band--aqua+.band--aqua.band--flush-top{--padt:0px}
.band--rule{border-top:1px solid var(--hair-2)}
.band--seam,.band--closing{--padt:calc(clamp(58px,7.4vw,98px) + 10px)}
/* THE SEAM (nbg-zinne-seam): the band's own colour rises into the band above as a row of square merlons — at most once per page transition (nbg_band seam => true, the closing band always) */
.band--seam::before,.band--closing::before{content:"";position:absolute;z-index:2;left:0;right:0;bottom:calc(100% - 1px);height:15px;background:var(--bg-band);-webkit-mask:var(--zin-teeth) 0 0/188px 100% repeat-x;mask:var(--zin-teeth) 0 0/188px 100% repeat-x;pointer-events:none}
.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}

/* MERLON ROW (nbg_orn): five merlons on a base — the short divider ornament (decorative, aria-hidden) */
.orn,.nbg-zinne-row{display:block;width:60px;height:14px;margin:0 0 20px;background:var(--teal);clip-path:polygon(0 0,8px 0,8px 5px,13px 5px,13px 0,21px 0,21px 5px,26px 5px,26px 0,34px 0,34px 5px,39px 5px,39px 0,47px 0,47px 5px,52px 5px,52px 0,60px 0,60px 14px,0 14px)}
.orn--center,:is(.hero--column,.head--center,.statement,.pull--center,.center) .orn{margin-inline:auto}

/* ================================================================== HERO */
/* the hero zone is a COLOUR BLOCK: rose (Band B) on most pages, aqua (Band A) 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(--teal-dark);border-radius:var(--zr);flex:none}
.hq__ic .ic{width:17px;height:17px}
/* BLOCK hero (variants rose / aqua): copy left, the art right (.hero--rev mirrors it). On wide screens the art BLEEDS to the viewport edge like a wall section: a row of merlons in the OTHER block colour
   crowns it, its inner bottom corner is a 3-step Zinnenecke, the claim plate overlaps the gap between copy and art. */
.hero--block{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);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;margin-top:14px}
.hero--rev .hero__card{grid-column:2}.hero--rev .hero__media{grid-column:1}
.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__media::after{content:"";position:absolute;z-index:-1;left:0;right:0;top:-14px;height:16px;background:var(--alt);-webkit-mask:var(--zin-teeth) 0 0/188px 100% repeat-x;mask:var(--zin-teeth) 0 0/188px 100% repeat-x}
.hero--rev .hero__media::after{-webkit-mask-position:100% 0;mask-position:100% 0}
@media (min-width:1061px){
  .hero--block .hero__media{margin-right:calc(-1 * (max(0px,(100vw - var(--wrap)) / 2) + var(--gut)))}
  .hero--block.hero--rev .hero__media{margin-right:0;margin-left:calc(-1 * (max(0px,(100vw - var(--wrap)) / 2) + var(--gut)))}
}
.hero__frame{position:relative;z-index:1;overflow:hidden;background:var(--tint-a)}
.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: icon plates in a running bond (staggered courses, no grid) stand in */
.plates{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:1fr;gap:8px;width:100%;background:var(--white);padding:8px}
.plates>span{display:grid;place-items:center;background:var(--tint-b);color:var(--teal-dark);min-height:0}
.plates>span:nth-child(1){grid-column:1 / 4}.plates>span:nth-child(2){grid-column:4 / 6;background:var(--tint-a)}
.plates>span:nth-child(3){grid-column:1 / 3;background:var(--tint-a)}.plates>span:nth-child(4){grid-column:3 / 6}
.plates .ic{width:clamp(40px,6vw,72px);height:clamp(40px,6vw,72px);stroke-width:1.8}
.hero__pic.plates{display:grid}
/* the claim sits half on the art as a white plate (one TRUE statement) */
.hero__tag{position:absolute;z-index:4;left:-26px;bottom:28px;max-width:min(300px,78%);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(--zr)}
.hero--rev .hero__tag{left:auto;right:-26px}
.hero__tag-ic{width:36px;height:36px;display:grid;place-items:center;background:var(--teal);color:var(--white);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 — rose with the copy, aqua with the art (rev: art left) */
.band--herosplit{background:linear-gradient(90deg,var(--c2) 50%,var(--c1) 50%);--padb:0;--padt:0}
.band--herosplit.band--herosplit-rev{background:linear-gradient(90deg,var(--c1) 50%,var(--c2) 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{overflow:hidden;background:var(--tint-b);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(--teal)}
.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;background:var(--tint-b);aspect-ratio:16/9;display:flex}
.hero__strip-pic img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.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 / span 2}
.hero__dial{grid-column:2;grid-row:1;background:var(--white);border:2px solid var(--ink);border-radius:var(--zr);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:2;grid-row:2}
.hero--emergency .hq{grid-column:1 / -1;margin-top:0}
.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:38px;height:38px;display:grid;place-items:center;background:var(--teal);color:var(--white);font:800 1.1rem var(--head);border-radius:var(--zr);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 three-step stair */
.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:9px;height:9px;margin:0 10px 0 6px;background:var(--teal);clip-path:polygon(0 100%,0 55%,33% 55%,33% 22%,66% 22%,66% 0,100% 0,100% 100%)}
.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 as a row of white cells (stepped corner) on the aqua tint */
.trustbar{background:var(--tint-a);padding:clamp(20px,2.6vw,30px) 0;position:relative}
.trustbar ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;list-style:none}
.trustbar li{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--white);border:1px solid var(--hair-2);font-weight:700;font-size:.95rem;line-height:1.3;color:var(--ink)}
.trustbar__ic{width:42px;height:42px;display:grid;place-items:center;flex:none;background:var(--tint-b);color:var(--teal-dark)}
.trustbar li:nth-child(even) .trustbar__ic{background:var(--tint-a)}
.trustbar__ic .ic{width:20px;height:20px}

/* 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(--teal);color:var(--white);border-radius:var(--zr);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;border-bottom-right-radius:22px}.telbig--xl .telbig__n{font-size:clamp(2.1rem,5vw,3.4rem)}

/* ================================================================== BRICKS */
/* portrait: a ROUND ILLUSTRATION / ICON PLATE (never a person) on a white edge, a second round plate in the OTHER block colour offset behind it and a stepped teal phone badge */
.portrait{position:relative;max-width:380px;margin-inline:auto;isolation:isolate}
.portrait::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:50%;background:var(--alt);transform:translate(14px,12px)}
.portrait__ring{background:var(--white);padding:8px;border-radius:50%;overflow:hidden}
.portrait__ring img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--tint-b);border-radius:50%}
.portrait__ring.plates{aspect-ratio:1;display:grid}
.portrait__badge{position:absolute;left:2px;bottom:2px;width:60px;height:60px;display:grid;place-items:center;background:var(--teal);color:var(--white)}
.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(--teal-dark);border-radius:var(--zr)}
.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(--zr);padding:24px 24px 26px;box-shadow:var(--sh-sm);border:1px solid var(--hair-2);transition:transform .25s var(--ease),box-shadow .25s}
.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:50px;height:50px;display:grid;place-items:center;background:var(--plate);color:var(--teal-dark);border-radius:var(--zr)}
.promise__n{font:800 2.3rem/1 var(--head);color:var(--teal-dark);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(--teal-dark)!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. 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(--zr);overflow:hidden;background:var(--white);box-shadow:var(--sh)}
.phoneband--solo{grid-template-columns:minmax(0,1fr)}
.phoneband__copy{background:var(--white);padding:clamp(24px,3.4vw,44px)}
.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);--fg:var(--ink);--muted:var(--ink-2);--kick:var(--ink);--link: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(--teal-dark);border-radius:var(--zr)}
.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:32px;height:32px;display:grid;place-items:center;background:var(--teal);color:var(--white);font:800 .95rem var(--head);border-radius:var(--zr);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 three-merlon 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:10px;height:10px;background:var(--teal);border-radius:var(--zr)}
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 tile */
.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}
.pull{position:relative;margin:0;padding:26px 28px 26px 34px;background:var(--white);color:var(--ink);border-radius:var(--zr);box-shadow:var(--sh-sm);border:1px solid var(--hair-2);border-left:8px solid var(--teal)}
.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:1px;border-top:8px solid var(--teal)}
.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 tile ROWS: number tile · 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:hover{background:rgba(255,255,255,.55)}
.row__n{width:58px;height:58px;display:grid;place-items:center;background:var(--plate);color:var(--ink);border-radius:var(--zr);font:800 1.2rem var(--head);transition:background-color .25s,color .25s}
.row:hover .row__n{background:var(--teal);color:var(--white)}
.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(--zr);overflow:hidden;border:4px solid var(--white);background:var(--tint-b);aspect-ratio:4/3;box-shadow:var(--sh-sm)}
.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 tiles, alternating stepped corner (top-right / bottom-left), 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(--zr);border:4px solid var(--white);background:var(--tint-b);box-shadow:var(--sh-sm)}
.gal figure:nth-child(even){border-radius:var(--zr)}
.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 tile: keep the roofline, let the caption tile cover the ground */
.gal__tag{position:absolute;left:10px;top:10px;z-index:2;padding:5px 11px;border-radius:var(--zr);background:var(--white);color:var(--ink);font:800 .68rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--hair-2)}
.gal figcaption{position:absolute;left:8px;right:8px;bottom:8px;z-index:2;background:var(--white);border-radius:var(--zr);padding:10px 14px;border:1px solid var(--hair-2);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 in an ink frame with a stepped top-left corner, the number + the phone button */
.callrow{position:relative;background:var(--white);color:var(--ink);border:2px solid var(--ink);border-radius:var(--zr);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 stepped Zinnenecke, a crown of merlons in the other block colour behind its top edge */
.fig{margin:0;position:relative;isolation:isolate}
.fig__in::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:-12px;height:14px;background:var(--alt);-webkit-mask:var(--zin-teeth) 0 0/188px 100% repeat-x;mask:var(--zin-teeth) 0 0/188px 100% repeat-x}
.fig__in{position:relative;background:var(--tint-b);margin-top:12px}
.fig__in img{width:100%;height:auto}
.fig figcaption{margin-top:16px;font-size:.9rem;font-weight:600;color:var(--muted);padding-left:14px;border-left:4px solid var(--teal)}
.fig--tilt .fig__in{transform:rotate(-1.2deg)}
.fig--tilt .fig__in::before{display:none}.fig--tilt .fig__in{margin-top:0}
.fig--round .fig__in{outline:3px solid var(--ink);outline-offset:-3px}
.fig--flat .fig__in::before{display:none}.fig--flat .fig__in{margin-top:0}
.fig--box{border:2px solid var(--ink);border-radius:var(--zr);overflow:hidden;background:var(--white)}
.fig--box .fig__in::before{display:none}
.fig--box .fig__in{margin-top:0}
.fig--box figcaption{margin:0;padding:12px 16px;border:0;border-top:2px solid var(--ink);background:var(--white);color:var(--ink-soft)}

/* cards: white cards with a stepped top-right corner, a picture on top, a teal 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:1px solid var(--hair-2);border-radius:var(--zr);overflow:hidden;box-shadow:var(--sh-sm);transition:transform .25s var(--ease),box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.card__media{aspect-ratio:4/3;overflow:hidden;background:var(--tint-b)}
.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(--tint-b)}
.card:nth-child(even) .card__media--ic{background:var(--tint-a)}
.card__bigic{width:78px;height:78px;display:grid;place-items:center;background:var(--white);color:var(--teal-dark);border-radius:var(--zr)}
.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:-26px;width:52px;height:52px;display:grid;place-items:center;background:var(--teal);color:var(--white);border-radius:var(--zr);border:3px solid var(--white)}
.card__bk .ic{width:23px;height:23px}
.card__ic{width:50px;height:50px;display:grid;place-items:center;background:var(--plate);color:var(--teal-dark);border-radius:var(--zr);margin-bottom:14px}
.card__num{display:block;font:800 2.4rem/1 var(--head);color:var(--teal-dark);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:4px;margin-top:10px;background:var(--teal);border-radius:2px;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(--teal-dark)}
.card__more .ic{transition:transform .2s var(--ease)}
.card:hover .card__more .ic{transform:translateX(4px)}
.cards--line .card{border-top:5px solid var(--teal)}
.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:hover{transform:none;box-shadow:none}
.cards--plain .card__body{padding-inline:0}

/* process: white step cells with a stepped Zinnenecke; the NUMBER PLATE (teal, white numeral, stepped top-left corner) sits inside the cell with a hairline rail running on to the cell's edge */
.steps{display:grid;gap:18px clamp(16px,2.2vw,28px);list-style:none}
.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;background:var(--white);color:var(--ink);border:1px solid var(--hair-2);padding:22px 22px 24px}
.step::before{content:"";position:absolute;left:78px;right:0;top:46px;height:3px;background:var(--hair-2)}
.step__n{position:relative;display:grid;place-items:center;width:56px;height:56px;margin-bottom:16px;background:var(--teal);color:var(--white);font:800 1.5rem/1 var(--head)}
.step__t{font-size:1.2rem;margin-bottom:8px;color:var(--ink)}
.step__b p{color:var(--ink-soft);font-size:.98rem;margin:0}
.steps--boxes .step{border-top:6px solid var(--teal)}
.steps--boxes .step::before{top:52px}
.steps--vertical,.steps--line{grid-template-columns:minmax(0,1fr)}

/* FAQ: heavy ink rules, bold questions, a stepped 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(--teal-dark);border-radius:var(--zr);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(--teal);color:var(--white)}
.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 in an ink frame with a stepped top-left corner; 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(--zr);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(--teal-dark);border-radius:var(--zr);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:var(--zr);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(--teal-dark);border-radius:var(--zr);transition:background-color .25s,color .25s}
.factor:hover .factor__ic{background:var(--teal);color:var(--white)}
.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(--zr);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(--teal-dark);border-radius:var(--zr);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(--zr);padding:24px 26px;box-shadow:var(--sh-sm)}
.compare__col--yes{border-top:6px solid var(--teal)}.compare__col--no{border-top:6px solid 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(--teal-dark)}
.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:12px;height:12px;margin-top:.5em;background:var(--teal);border-radius:var(--zr)}
.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(--teal);border:3px solid var(--white);border-radius:var(--zr)}
.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 tiles) */
.factsheet{background:var(--white);color:var(--ink);border:2px solid var(--ink);border-radius:var(--zr);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(--zr);box-shadow:var(--sh);overflow:hidden}
.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(--tint-a);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(--teal-dark)}
.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 (aqua or rose) with ink text and the Zinne seam on its top edge; the white dial plate carries the teal 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(--zr);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) */
/* phone-first: ONE stepped seam on the top edge (paper merlons rising into the closing band), then a full-width PHONE BAR on the rose tint, then brand · Leistungen · Service columns, the legal strip last */
.foot{background:var(--paper);color:var(--ink);position:relative;--link:var(--teal-dark);--kick:var(--teal-dark)}
.foot::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:14px;background:var(--tint-b);-webkit-mask:var(--zin-teeth) 0 0/188px 100% repeat-x;mask:var(--zin-teeth) 0 0/188px 100% repeat-x;pointer-events:none}
.foot__phone{background:var(--tint-b);border-bottom:1px solid var(--hair-2)}
.foot__phone-in{display:grid;grid-template-columns:minmax(0,1.25fr) auto auto;gap:14px clamp(20px,3.4vw,48px);align-items:center;padding-block:clamp(24px,3.2vw,38px)}
.foot__phone-t{min-width:0}
.foot__dial-k{display:flex;align-items:center;gap:12px;margin:0 0 6px;font:800 .74rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--kick)}
.foot__note{margin:0;color:var(--ink-soft);font-size:.97rem;max-width:46ch}
.foot__tel{display:inline-flex;align-items:center;gap:14px;font:800 clamp(1.6rem,3vw,2.3rem)/1.05 var(--head);letter-spacing:-.02em;color:var(--ink);text-decoration:none;white-space:nowrap}
.foot__tel:hover{text-decoration:none;color:var(--teal-dark)}
.foot__telic{width:48px;height:48px;display:grid;place-items:center;background:var(--teal);color:var(--white);transition:transform .2s var(--ease)}
.foot__tel:hover .foot__telic{transform:translateY(-2px) scale(1.05)}
.foot__call{justify-content:center}
.foot__main{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.4fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:start;padding-top:clamp(34px,4.6vw,56px);padding-bottom:clamp(26px,3.6vw,42px)}
.foot__lead{min-width:0}
.foot__lead>p{margin:16px 0 0;max-width:44ch;color:var(--ink-soft)}
.foot__col h2{font:800 .74rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--kick);margin:0 0 12px}
.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__more{display:grid;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{color:var(--teal-dark);text-decoration:underline;text-decoration-thickness:2px}
.foot__strip{background:var(--white);border-top:1px solid var(--hair-2);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 teal 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(15,28,34,.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(--teal-dark);border:2px solid var(--ink);border-radius:var(--zr);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(--zr);overflow:hidden;box-shadow:var(--sh);border:5px solid var(--white);background:var(--tint-b);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:var(--zr);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:48px}   /* clear of the stepped top-right corner of the stage */
.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:46px}.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:var(--zr);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:var(--zr);background:var(--teal);color:var(--white);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(--zr);overflow:hidden}
.ba:not(.is-live) .ba__sym,.ba:not(.is-live) .ba__hint{display:none}
.ba-a{fill:var(--c2)}.ba-b{fill:var(--tint-a)}.ba-c{fill:var(--paper)}.ba-d{fill:var(--c1)}.ba-e{fill:var(--teal)}.ba-f{fill:var(--white)}.ba-g{fill:var(--white)}.ba-h{fill:var(--line-strong)}.ba-i{fill:var(--teal-dark)}.ba-k{fill:var(--danger)}
.ba-s{fill:none;stroke:var(--teal-dark);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.ba-n{fill:none;stroke:var(--teal);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(--teal-dark)}
.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(--teal)}
.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(--zr);padding:18px 22px;margin:0 0 1.6em;border:1px solid var(--hair-2);border-left:6px solid var(--teal)}
.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(--zr);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)}


/* ================================================================== ZINNE — the signature family .nbg-zinne* (square merlons, flat tops, hard 90 degree steps)
   (1) nbg-zinne-seam   the band seam: .band--seam / .band--closing / .foot rise into the band above as a row of merlons (see BANDS, FOOTER)
   (2) nbg-zinne-corner the stepped Zinnenecke: ONE corner of a surface is cut in 2 (cards, plates) or 3 (art frames, phone band) hard steps via clip-path — one --zn per group, the corner varies per family:
       cards / promises / tiles / steps cut TOP-RIGHT · number plates TOP-LEFT · badges BOTTOM-LEFT · art frames 3 steps · the ink-framed phone surfaces (dial, call row, phone band, notice) TOP-LEFT
   (3) nbg-zinne-row    the merlon row: .orn / nbg_orn(), the kicker marks, chip and list bullets.   Cut surfaces carry no soft shadow (clip-path would cut it): flat, hairline edge, an inset teal edge on hover. */
.hq__ic,.trustbar__ic,.telbig__ic,.card__bigic,.ci__ic,.promise__ic,.card__ic,.tile__ic,.factor__ic,.qa__ic,.notice__ic,.hero__tag-ic,.phoneband__ic,.foot__telic,.btn__ic,.sub__grid a .ic,.drawer__sub .ic{--zn:4px;clip-path:polygon(0 0,calc(100% - var(--zn) * 2) 0,calc(100% - var(--zn) * 2) var(--zn),calc(100% - var(--zn)) var(--zn),calc(100% - var(--zn)) calc(var(--zn) * 2),100% calc(var(--zn) * 2),100% 100%,0 100%)}
.step__n,.row__n,.asks__n,.ersteps__n,.hazard__steps li::before,.timeline li::before{--zn:5px;clip-path:polygon(100% 0,100% 100%,0 100%,0 calc(var(--zn) * 2),var(--zn) calc(var(--zn) * 2),var(--zn) var(--zn),calc(var(--zn) * 2) var(--zn),calc(var(--zn) * 2) 0)}
.card__bk,.portrait__badge,.ba__knob,.gal__tag{--zn:5px;clip-path:polygon(0 0,100% 0,100% 100%,calc(var(--zn) * 2) 100%,calc(var(--zn) * 2) calc(100% - var(--zn)),var(--zn) calc(100% - var(--zn)),var(--zn) calc(100% - var(--zn) * 2),0 calc(100% - var(--zn) * 2))}
.brand__mk{--zn:6px;clip-path:polygon(0 0,calc(100% - var(--zn) * 2) 0,calc(100% - var(--zn) * 2) var(--zn),calc(100% - var(--zn)) var(--zn),calc(100% - var(--zn)) calc(var(--zn) * 2),100% calc(var(--zn) * 2),100% 100%,0 100%)}
.card,.promise,.tile,.step,.compare__col,.pull,.legal-toc,.legal-note,.row__shot,.gal figure:nth-child(odd),.trustbar li{--zn:9px;clip-path:polygon(0 0,calc(100% - var(--zn) * 2) 0,calc(100% - var(--zn) * 2) var(--zn),calc(100% - var(--zn)) var(--zn),calc(100% - var(--zn)) calc(var(--zn) * 2),100% calc(var(--zn) * 2),100% 100%,0 100%)}
.gal figure:nth-child(even){--zn:9px;clip-path:polygon(0 0,100% 0,100% 100%,calc(var(--zn) * 2) 100%,calc(var(--zn) * 2) calc(100% - var(--zn)),var(--zn) calc(100% - var(--zn)),var(--zn) calc(100% - var(--zn) * 2),0 calc(100% - var(--zn) * 2))}
.hero__frame{--zn:14px;clip-path:polygon(0 0,100% 0,100% 100%,calc(var(--zn) * 3) 100%,calc(var(--zn) * 3) calc(100% - var(--zn)),calc(var(--zn) * 2) calc(100% - var(--zn)),calc(var(--zn) * 2) calc(100% - var(--zn) * 2),var(--zn) calc(100% - var(--zn) * 2),var(--zn) calc(100% - var(--zn) * 3),0 calc(100% - var(--zn) * 3))}
.hero--rev .hero__frame{--zn:14px;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--zn) * 3),calc(100% - var(--zn)) calc(100% - var(--zn) * 3),calc(100% - var(--zn)) calc(100% - var(--zn) * 2),calc(100% - var(--zn) * 2) calc(100% - var(--zn) * 2),calc(100% - var(--zn) * 2) calc(100% - var(--zn)),calc(100% - var(--zn) * 3) calc(100% - var(--zn)),calc(100% - var(--zn) * 3) 100%,0 100%)}
.hero__fig-in,.hero__strip-pic,.fig__in img,.ba__stage{--zn:14px;clip-path:polygon(0 0,calc(100% - var(--zn) * 3) 0,calc(100% - var(--zn) * 3) var(--zn),calc(100% - var(--zn) * 2) var(--zn),calc(100% - var(--zn) * 2) calc(var(--zn) * 2),calc(100% - var(--zn)) calc(var(--zn) * 2),calc(100% - var(--zn)) calc(var(--zn) * 3),100% calc(var(--zn) * 3),100% 100%,0 100%)}
.hero--rev .hero__fig-in{--zn:14px;clip-path:polygon(100% 0,100% 100%,0 100%,0 calc(var(--zn) * 3),var(--zn) calc(var(--zn) * 3),var(--zn) calc(var(--zn) * 2),calc(var(--zn) * 2) calc(var(--zn) * 2),calc(var(--zn) * 2) var(--zn),calc(var(--zn) * 3) var(--zn),calc(var(--zn) * 3) 0)}
/* the ink-framed phone surfaces: an ink ground, the white surface inset by the 2 px edge — both carry the SAME stepped corner, so the edge steps with it */
.callrow,.cta__dial,.hero__dial,.phonebox,.factsheet,.notice,.phoneband{--fr:var(--ink);--fb:var(--white);--zn:10px;isolation:isolate;background:var(--fr);border-color:transparent;box-shadow:none;clip-path:polygon(100% 0,100% 100%,0 100%,0 calc(var(--zn) * 2),var(--zn) calc(var(--zn) * 2),var(--zn) var(--zn),calc(var(--zn) * 2) var(--zn),calc(var(--zn) * 2) 0)}
.phoneband{--zn:14px;clip-path:polygon(100% 0,100% 100%,0 100%,0 calc(var(--zn) * 3),var(--zn) calc(var(--zn) * 3),var(--zn) calc(var(--zn) * 2),calc(var(--zn) * 2) calc(var(--zn) * 2),calc(var(--zn) * 2) var(--zn),calc(var(--zn) * 3) var(--zn),calc(var(--zn) * 3) 0)}
.phonebox,.factsheet,.notice,.phoneband{position:relative}
.callrow::before,.cta__dial::before,.hero__dial::before,.phonebox::before,.factsheet::before,.notice::before,.phoneband::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fb);clip-path:polygon(100% 0,100% 100%,0 100%,0 calc(var(--zn) * 2),var(--zn) calc(var(--zn) * 2),var(--zn) var(--zn),calc(var(--zn) * 2) var(--zn),calc(var(--zn) * 2) 0)}
.phoneband::before{clip-path:polygon(100% 0,100% 100%,0 100%,0 calc(var(--zn) * 3),var(--zn) calc(var(--zn) * 3),var(--zn) calc(var(--zn) * 2),calc(var(--zn) * 2) calc(var(--zn) * 2),calc(var(--zn) * 2) var(--zn),calc(var(--zn) * 3) var(--zn),calc(var(--zn) * 3) 0)}
.notice--danger{--fr:var(--danger);--fb:var(--danger-bg)}
.hero__tag{box-shadow:none}
.card,.promise,.tile,.step,.compare__col,.pull,.row__shot,.gal figure,.hero__fig-in,.hero__strip-pic,.ba__stage,.portrait__ring{box-shadow:none}
.hero__fig-in,.hero__strip-pic,.ba__stage{border:0}
.card:hover,.promise:hover,.tile:hover{box-shadow:inset 0 -5px 0 var(--teal)}
.fig__in{background:none}
:is(a.chip,.chip--static)::before{width:13px;height:9px;border-radius:0;clip-path:polygon(0 0,3px 0,3px 3px,5px 3px,5px 0,8px 0,8px 3px,10px 3px,10px 0,13px 0,13px 9px,0 9px)}
.ticks li::before,.compare li::before{width:15px;height:10px;margin-top:.62em;border-radius:0;clip-path:polygon(0 0,4px 0,4px 3px,6px 3px,6px 0,9px 0,9px 3px,11px 3px,11px 0,15px 0,15px 10px,0 10px)}
.timeline li::before{border:0}
/* zinne-edge:start */
/* the stair hairline of the top-right Zinnenecke: clip-path cuts the 1 px border, four hairline strips on the cut redraw it (nbg-zinne-edge) */
.tile,.compare__col,.trustbar li{position:relative}
.card::after,.promise::after,.tile::after,.step::after,.compare__col::after,.pull::after,.trustbar li::after{content:"";position:absolute;z-index:2;top:0;right:0;width:calc(var(--zn) * 2 + 1px);height:calc(var(--zn) * 2 + 1px);pointer-events:none;background:linear-gradient(var(--hair-2),var(--hair-2)) 0 0/1px var(--zn) no-repeat,linear-gradient(var(--hair-2),var(--hair-2)) 0 var(--zn)/calc(var(--zn) + 1px) 1px no-repeat,linear-gradient(var(--hair-2),var(--hair-2)) var(--zn) var(--zn)/1px calc(var(--zn) + 1px) no-repeat,linear-gradient(var(--hair-2),var(--hair-2)) var(--zn) calc(var(--zn) * 2)/calc(var(--zn) + 1px) 1px no-repeat}
/* zinne-edge:end */
/* ================================================================== END ZINNE ====== */

/* ================================================================== 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{grid-template-columns:minmax(0,1fr)}
  .hero__tag,.hero--rev .hero__tag{left:12px;right:auto;bottom:12px}
  .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:760px;width:100%}
  .hero--rev .hero__media{justify-self:start}
  .hero--panel,.hero--emergency{grid-template-columns:minmax(0,1fr)}
  .trustbar ul{grid-template-columns:repeat(2,minmax(0,1fr))}.trustbar li:last-child:nth-child(odd){grid-column:1 / -1}
  .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 aqua panel below it */
  .band--herosplit,.band--herosplit.band--herosplit-rev{background:var(--c2)}
  .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(--c1)}
  .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__main{grid-template-columns:repeat(2,minmax(0,1fr))}.foot__lead{grid-column:1 / -1}.foot__phone-in{grid-template-columns:minmax(0,1fr)}.foot__phone-in .foot__tel,.foot__phone-in .foot__call{justify-self:start}
  .lede__cols{columns:1}
}
@media (max-width:900px){
  .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)}
  .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{padding:6px 12px 6px 6px}.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%}
}
@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__main{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,.step,.tile,.phoneband,.pull{border:2px solid CanvasText}
  .btn--call{forced-color-adjust:none;background:ButtonFace;color:ButtonText;border-color:ButtonText}
  .hero__media::after,.orn,.portrait::before,.fig__in::before,.foot::before,.band--seam::before,.band--closing::before{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;background:CanvasText}
  :focus-visible{outline:3px solid Highlight}
}
@media print{
  :root{--c2:#ffffff;--c1:#ffffff;--tint-b:#ffffff;--tint-a:#ffffff;--paper:#ffffff}
  .topbar,.masthead,.drawer,.callbar,.totop,.hero__media,.hero__fig,.hero__strip,.phonestrip,.trustbar,.orn,.foot__phone,.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;clip-path:none}
}

/* gallery: hole-proof grid — nbg_gallery() widens the last single-row tile when the dense packing would leave an empty cell */
@media (min-width:1061px){.gal--f1-2{grid-column:span 2}.gal--f1-3{grid-column:span 3}.gal--f1-4{grid-column:span 4}}
@media (min-width:761px) and (max-width:1060px){.gal--f2-2{grid-column:span 2}.gal--f2-3{grid-column:span 3}}
@media (min-width:561px) and (max-width:760px){.gal--f3-2{grid-column:span 2}}
.gal figure[class*="gal--f"] .gal__pic img{object-position:50% 24%}   /* a widened 4:3 drawing: keep the roofline like .gal--wide */