/* =============================================================================
   charlottenburg-schloss24.de — the ONE shared design language
   "lokal-klassik · Graphit, Stahl und Signalorange"
   Graphite + slate-steel chrome, warm paper and pale-steel grounds, serif headings over a
   sans body, hairline plates with 6/10/14 px radii — and ONE reserved signal orange (the
   favicon tile) that only ever fills a CALL action, always with the ink label. Every page links
   this file UNEDITED; per-page <style> is layout only. Tokens = theme.json palette
   (tools/wcag.php measures every pairing). Sections:
    0 tokens · 1 base · 2 layout · 3 buttons + phone · 4 chrome · 5 bands + heads · 6 hero ·
    7 call band / call row / phone box / closing band · 8 trust · 9 cards · 10 icon lists + checks ·
    11 steps · 12 faq · 13 hinweis · 14 compare · 15 split + frames · 16 chips · 17 Klingelschild ·
    18 crumbs · 19 factor table · 20 prose + key facts · 21 motion · responsive · 22 print
   ========================================================================== */

/* ── 0 · tokens ──────────────────────────────────────────────────────────── */
:root{
  /* colour — identical to theme.json + tools/wcag.php */
  --deep:#17222C; --deep-2:#10181F; --brand:#33444F; --primary:#2F5D85; --accent:#A04607;
  --alt:#F6F3EE; --tint:#E8EDF1; --surface:#FFFFFF; --rule:#E9E4DB; --zebra:#FAF8F4;
  --line:#DDD7CD; --edge:#C7C0B4; --line-strong:#66727E;
  --metal:#D8DDE1; --metal-edge:#9AA3AB; --metal-ink:#2F3A44;
  --ink:#1F2A33; --head:#15202A; --muted:#4F5B66;
  --dark-text:#D8E0E7; --dark-muted:#A8B4BF; --dark-accent:#FFB26B; --dark-line:#2E3C49; --dark-line-strong:#8A98A4;
  --cta:#FF8A1A; --cta-hover:#FF9B3D; --cta-edge:#B4570A; --on-cta:#141008;
  --danger:#A3161D; --danger-tint:#FBEFEC; --danger-line:#EBC6C1; --info-line:#D2DAE1;
  --focus:#15202A;
  --scrim:23 34 44;                                   /* = --deep as an rgb triplet for the photo scrim */
  /* glass — white veils on graphite / steel / the photo; tools/wcag.php measures every text pairing on them */
  --glass-1:rgba(255,255,255,.06);    /* plates on graphite (steps, cards, chips, say box) */
  --glass-2:rgba(255,255,255,.1);     /* plates on steel, icon plates on dark */
  --glass-3:rgba(255,255,255,.14);    /* hover of a glass plate */
  --glass-line:rgba(255,255,255,.2);  /* hairlines on dark + photo (decorative) */
  --glass-line-strong:rgba(255,255,255,.3);
  --glass-edge:rgba(255,255,255,.62); /* the ghost button's load-bearing edge on the photo */
  --metal-sheen:rgba(255,255,255,.7); /* highlights on the light metal (only ever lightens it — metal stays the measured worst case) */
  /* context tokens — dark grounds flip them, light islands reset them; --gr = the current ground */
  --ring:var(--focus); --link:var(--primary); --link-hover:var(--brand); --gr:var(--surface);
  /* type */
  --font:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --font-head:Georgia,"Iowan Old Style",Charter,"Bitstream Charter","Noto Serif",serif;
  --fw-h:700; --fw-x:800; --fw-b:700; --fw-m:600;
  --fs-micro:.875rem; --fs-small:1rem; --fs-base:1.125rem;
  --fs-lead:clamp(1.1875rem,1.1rem + .35vw,1.3125rem);
  --fs-h3:clamp(1.25rem,1.15rem + .4vw,1.4375rem);
  --fs-h2:clamp(1.75rem,1.3rem + 1.7vw,2.5rem);
  --fs-h1:clamp(2.125rem,1.4rem + 2.4vw,3rem);   /* 3rem keeps "Charlottenburg-Wilmersdorf" on one line in the 46rem hero column */
  --fs-phone:clamp(1.75rem,1.3rem + 1.9vw,2.5rem);
  /* space */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.25rem; --s6:1.5rem; --s7:2rem; --s8:2.5rem; --s9:3.5rem;
  --band:clamp(3.5rem,2.4rem + 3.4vw,5.75rem); --band-tight:clamp(2.25rem,1.7rem + 2vw,3.25rem);
  --wrap:73.75rem; --gutter:clamp(1rem,.6rem + 1.6vw,1.5rem); --hdr-h:76px;
  --lift:clamp(2.5rem,1.6rem + 3vw,4.25rem);         /* how far a lifted plate reaches into the hero */
  /* shape — one family: plates and buttons 6, cards 10, panels 14 */
  --r-xs:4px; --r-sm:6px; --r:10px; --r-lg:14px;
  --sh-sm:0 1px 2px rgba(21,32,42,.08); --sh:0 8px 22px rgba(21,32,42,.10); --sh-lg:0 18px 42px rgba(21,32,42,.16);
  --sh-float:0 22px 54px rgba(16,24,31,.26);
  --sh-plate:inset 0 1px 0 var(--metal-sheen),inset 0 -1px 0 rgba(21,32,42,.07);
  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1); --dur:.2s; --dur-reveal:.55s; --rise:18px;
  --tap:44px;
}

/* ── 1 · base ────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hdr-h) + 16px)}
body{margin:0;font-family:var(--font);font-size:var(--fs-base);line-height:1.62;color:var(--ink);background:var(--surface);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
.wp-site-blocks>*,.site-main>*{margin-block:0}
.site-main{display:block}
.part-header,.part-footer{display:contents}
img,svg,video{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4{margin:0;color:var(--head);font-family:var(--font-head);font-weight:var(--fw-h);line-height:1.18;letter-spacing:-.005em;text-wrap:balance}
h1{font-size:var(--fs-h1);line-height:1.1} h2{font-size:var(--fs-h2);line-height:1.15}
h3{font-size:var(--fs-h3);line-height:1.25;letter-spacing:0}
h4{font-family:var(--font);font-size:1.125rem;font-weight:var(--fw-b);letter-spacing:0}
p,ul,ol,dl,figure,blockquote{margin:0}
p,li,dd,td,th,figcaption{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:10 4 4}
h1,h2,h3,h4{hyphens:manual;-webkit-hyphens:manual}
/* component titles live in narrow columns: a long compound breaks with a hyphen, never mid-word */
.card__t,.step__t,.iclist__t,.clist__t,.kschild__t,.compare__h,.trust__t,.hubindex__t,.callband__ft strong,.herocard__t{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:8 4 4}
ul,ol{padding:0;list-style:none}
strong,b{font-weight:var(--fw-b);color:inherit}
a{color:var(--link);text-decoration:underline;text-decoration-thickness:.07em;text-underline-offset:.2em}
a:hover{color:var(--link-hover);text-decoration-thickness:.12em}
q{quotes:"\201E" "\201C" "\201A" "\2018"}
::selection{background:var(--brand);color:#fff}
:focus{outline:none}
:focus-visible{outline:3px solid var(--ring);outline-offset:3px;border-radius:var(--r-xs)}
.i{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nowrap{white-space:nowrap}
.muted{color:var(--muted)}
/* numbers that matter are sans (Georgia sets old-style figures): 110 / 112 inside a serif heading */
.num{font-family:var(--font);font-weight:var(--fw-x);font-variant-numeric:lining-nums tabular-nums;letter-spacing:0}

/* skip link — visible on focus */
.skip{position:absolute;left:var(--gutter);top:-100px;z-index:400;background:var(--surface);color:var(--head);font-weight:var(--fw-b);padding:12px 18px;border-radius:var(--r-sm);border:1px solid var(--line);box-shadow:var(--sh-lg);text-decoration:none;--ring:var(--focus)}
.skip:focus{top:12px}

/* ── 2 · layout ──────────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:calc(var(--wrap) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:calc(52rem + 2 * var(--gutter))}
.wrap--prose{max-width:calc(46rem + 2 * var(--gutter))}
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.75rem,1rem + 3vw,3.5rem);align-items:center}
.duo--wide{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.duo--narrow{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.duo--start{align-items:start}
.stack>*+*{margin-top:var(--s5)}
.flexrow{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.center{text-align:center}
.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--muted);max-width:60ch}

/* ── 3 · buttons + phone ─────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;max-width:100%;min-height:50px;padding:.7em 1.3em;border-radius:var(--r-sm);border:1px solid transparent;font:inherit;font-size:1.0625rem;font-weight:var(--fw-b);line-height:1.2;text-decoration:none;cursor:pointer;text-align:center;transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform .12s var(--ease)}
.btn .i{width:1.2em;height:1.2em}
/* label + number: one line while it fits; a long label pushes the number onto its own line */
.btn__txt{display:inline-flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:0 .5em;min-width:0}
.btn__l{white-space:nowrap}
.btn__num{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:var(--fw-x);letter-spacing:.01em}
.btn--lg{min-height:56px;font-size:1.125rem;padding:.75em 1.5em}
.btn--xl{min-height:64px;font-size:clamp(1.1875rem,1rem + .8vw,1.4375rem);padding:.65em 1.5em}
.btn--block{display:flex;width:100%}
.btn--block .btn__l{white-space:normal}   /* a narrow phone box: the label wraps inside the plate */
/* THE CALL PLATE — signal orange, ink label, burnt 1 px edge (it reads on white), an enamel press
   line. The most salient element of every page; it never moves. */
.btn--call{background:var(--cta);color:var(--on-cta);border-color:var(--cta-edge);box-shadow:inset 0 -3px 0 rgba(20,16,8,.14),0 1px 2px rgba(20,16,8,.18)}
.btn--call:hover{background:var(--cta-hover);color:var(--on-cta);text-decoration:none}
.btn--call:active{box-shadow:inset 0 2px 0 rgba(20,16,8,.16)}
.btn--call .btn__ic{stroke-width:2.2}
/* stacked: the label small over the big number, the glyph in an ink disc */
.btn--stack{justify-content:flex-start;gap:.7em;padding-left:.55em;text-align:left}
.btn--stack .btn__ic{box-sizing:content-box;width:1.05em;height:1.05em;padding:.42em;border-radius:50%;background:var(--on-cta);color:var(--cta);stroke-width:2.2}
.btn--stack .btn__txt{flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:0;line-height:1.1}
.btn--stack .btn__l{font-size:max(.8em,.875rem);font-weight:var(--fw-m);letter-spacing:.01em}   /* never below 14 px — older callers */
.btn--stack .btn__num{font-size:1.16em}
.btn--outline{background:var(--surface);border-color:var(--line-strong);color:var(--head)}
.btn--outline:hover{border-color:var(--brand);background:var(--alt);color:var(--head);transform:translateY(-1px)}
.btn--ghost{background:rgba(16,24,31,.2);border-color:var(--glass-edge);color:#fff}
.btn--ghost:hover{background:var(--glass-2);border-color:#fff;color:#fff;transform:translateY(-1px)}
.btn--outline .i,.btn--ghost .i{transition:transform var(--dur) var(--ease)}
.btn--outline:hover .i,.btn--ghost:hover .i{transform:translateX(3px)}

/* the number as display type, with the orange call disc */
.telbig{display:inline-flex;align-items:center;gap:.4em;min-height:var(--tap);font-family:var(--font);font-size:var(--fs-phone);font-weight:var(--fw-x);line-height:1.1;letter-spacing:-.005em;color:var(--head);text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.telbig__ic{display:grid;place-items:center;width:1.45em;height:1.45em;border-radius:50%;background:var(--cta);color:var(--on-cta);box-shadow:inset 0 0 0 1px var(--cta-edge);flex:none}
.telbig__ic .i{width:.66em;height:.66em;stroke-width:2.3}
.telbig:hover{color:inherit}
.telbig:hover .telbig__n{text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.16em}
.telnote{font-size:var(--fs-small);line-height:1.5;color:var(--muted);margin-top:var(--s3);max-width:44ch}

/* ── 4 · chrome ──────────────────────────────────────────────────────────── */
/* topbar — graphite, one true line, scrolls away */
.topbar{background:var(--deep);color:var(--dark-text);font-size:.9375rem;--ring:#fff}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:2px var(--s6);min-height:40px;flex-wrap:wrap;padding-block:6px}
.topbar p{display:flex;align-items:center;gap:.55em;line-height:1.35}
.topbar .i{color:var(--dark-accent);width:1.05em;height:1.05em}
.topbar__r{color:var(--dark-muted)}

/* sticky header — light: the steel lock-up, the registry nav, the orange call plate */
.site-header{position:sticky;top:0;z-index:100;background:var(--surface);color:var(--head);border-bottom:1px solid var(--line);transition:box-shadow var(--dur) var(--ease)}
.site-header.is-stuck{box-shadow:0 6px 20px rgba(21,32,42,.10)}
.hdr{display:flex;align-items:center;gap:var(--s5);min-height:var(--hdr-h)}
.brand{display:flex;align-items:center;gap:12px;min-height:var(--tap);color:var(--head);text-decoration:none;flex:0 1 auto;min-width:0;border-radius:var(--r-sm)}
.brand:hover{color:var(--head)}
/* the chrome mark is a GRAPHITE tile with the light-orange handle: orange fills only a call action (the
   favicon file itself stays orange — it is not on the page next to a call plate) */
.brand__mark{display:block;width:46px;height:46px;border-radius:9px;overflow:hidden;flex:none;box-shadow:0 0 0 1px rgba(20,16,8,.14),0 2px 6px rgba(21,32,42,.14)}
.brand__mark svg{width:100%;height:100%}
.brand__mark .mark__bg,.brand__mark .mark__cut{fill:var(--deep)}
.brand__mark .mark__fg{fill:var(--dark-accent)}
.brand__mark .mark__fgs{stroke:var(--dark-accent)}
.site-footer .brand__mark{box-shadow:0 0 0 1px var(--dark-line-strong)}
.brand__t{position:relative;display:flex;flex-direction:column;gap:2px;line-height:1.12;min-width:0}
.brand__l1{font-family:var(--font);font-size:.8125rem;font-weight:var(--fw-x);letter-spacing:.13em;text-transform:uppercase;color:var(--primary);white-space:nowrap}
.brand__sep{margin-inline:.45em;color:var(--accent)}
.brand__l2{font-family:var(--font-head);font-size:1.3125rem;font-weight:700;color:var(--head);white-space:nowrap;letter-spacing:-.005em}

.mainnav{margin-left:auto}
.nav{display:flex;align-items:center;gap:2px}
.nav__item{position:relative;display:flex;align-items:center}
.nav__l{position:relative;display:inline-flex;align-items:center;min-height:var(--tap);padding:8px 12px;border-radius:var(--r-sm);color:var(--head);font-weight:var(--fw-m);font-size:1.0625rem;text-decoration:none;white-space:nowrap}
.nav__l::after{content:"";position:absolute;left:12px;right:12px;bottom:5px;height:2px;border-radius:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease)}
.nav__l:hover{color:var(--primary);text-decoration:none}
.nav__l:hover::after,.nav__l[aria-current="page"]::after,.nav__item.is-active>.nav__l::after{transform:none}
.nav__l[aria-current="page"],.nav__item.is-active>.nav__l{color:var(--head);font-weight:var(--fw-b)}
.has-drop>.nav__l{padding-right:2px}
.has-drop>.nav__l::after{right:2px}
.nav__tog{display:inline-grid;place-items:center;width:var(--tap);min-height:var(--tap);padding:0;border:0;border-radius:var(--r-sm);background:transparent;color:var(--head);cursor:pointer}
.nav__tog:hover{background:var(--alt)}
.nav__tog .i{width:1.05em;height:1.05em;transition:transform var(--dur) var(--ease)}
.nav__item.is-open>.nav__tog .i{transform:rotate(180deg)}
.nav__drop{position:absolute;top:calc(100% + 12px);left:0;z-index:120;min-width:320px;padding:8px;background:var(--surface);border-radius:var(--r);box-shadow:var(--sh-lg);border:1px solid var(--line);visibility:hidden;opacity:0;transform:translateY(6px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility 0s linear var(--dur)}
.nav__drop::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
/* opens ONLY via the disclosure button (.is-open, aria-expanded in step) or a real pointer hover —
   never on focus, so keyboard users are not walked through every sub-link; Esc dismisses both (theme.js) */
.nav__item.is-open>.nav__drop{visibility:visible;opacity:1;transform:none;transition-delay:0s}
@media (hover:hover){.nav__item.has-drop:not(.is-dismissed):hover>.nav__drop{visibility:visible;opacity:1;transform:none;transition-delay:0s}}
.nav__sub a{display:flex;align-items:center;gap:12px;min-height:var(--tap);padding:9px 12px;border-radius:var(--r-sm);color:var(--head);font-weight:var(--fw-m);font-size:1rem;text-decoration:none}
.nav__sub a .i{color:var(--primary);width:1.15em;height:1.15em}
.nav__sub a:hover{background:var(--alt);color:var(--primary)}
.nav__sub a[aria-current="page"]{background:var(--tint);font-weight:var(--fw-b)}
.nav__over{display:block!important;border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
.nav__over a{color:var(--primary);font-weight:var(--fw-b)}

.hdr__call{display:flex;align-items:center;gap:var(--s3);flex:none}
.mainnav+.hdr__call{margin-left:var(--s3)}
.hdr__btn{min-height:54px;padding:.4em 1.1em .4em .45em;font-size:1.0625rem}
.hdr__btn .btn__l{font-size:max(.8em,.875rem)}

.burger{display:none;align-items:center;justify-content:center;gap:8px;min-width:var(--tap);min-height:var(--tap);padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--head);font:inherit;font-weight:var(--fw-b);font-size:1rem;cursor:pointer}
.burger:hover{background:var(--alt)}
.burger__bars{position:relative;display:block;width:18px;height:2px;background:currentColor;border-radius:2px}
.burger__bars::before,.burger__bars::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;border-radius:2px}
.burger__bars::before{top:-6px}.burger__bars::after{top:6px}
.menulink{display:none;color:var(--head);font-weight:var(--fw-b)}

/* drawer (≤ 900 px) — a modal panel with focus trap (theme.js) */
.drawer{position:fixed;inset:0;z-index:300;visibility:hidden}
.drawer.is-open{visibility:visible}
.drawer__scrim{position:absolute;inset:0;background:rgba(16,24,31,.55);opacity:0;transition:opacity .25s var(--ease)}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(380px,90vw);background:var(--surface);display:flex;flex-direction:column;box-shadow:var(--sh-lg);transform:translateX(100%);transition:transform .28s var(--ease);overflow-y:auto;overscroll-behavior:contain}
.drawer.is-open .drawer__panel{transform:none}
.drawer__head{display:flex;align-items:center;gap:var(--s3);padding:14px 16px;border-bottom:1px solid var(--line);background:var(--alt)}
.drawer__head .brand__mark{width:38px;height:38px;border-radius:8px}
.drawer__title{flex:1;font-family:var(--font-head);font-weight:700;font-size:1.1875rem;color:var(--head)}
.drawer__close{display:grid;place-items:center;width:var(--tap);height:var(--tap);border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--head);cursor:pointer}
.drawer__close:hover{background:var(--tint)}
.drawer__close .i{width:22px;height:22px}
.drawer__nav{padding:8px 14px;flex:1}
.drawer__nav>ul>li{border-bottom:1px solid var(--line)}
.drawer__nav a,.drawer__nav summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:54px;padding:10px 6px;color:var(--head);font-weight:var(--fw-b);font-size:1.0625rem;text-decoration:none;border-radius:var(--r-sm);cursor:pointer}
.drawer__nav a:hover,.drawer__nav summary:hover{color:var(--primary);background:var(--alt)}
.drawer__nav a[aria-current="page"]{color:var(--primary)}
.drawer__nav a[aria-current="page"]::after{content:"";width:8px;height:8px;border-radius:2px;background:var(--accent);flex:none}
.drawer__nav summary{list-style:none}
.drawer__nav summary::-webkit-details-marker{display:none}
.drawer__nav summary .i{color:var(--primary);transition:transform var(--dur) var(--ease)}
.drawer__nav details[open]>summary .i{transform:rotate(180deg)}
.drawer__sub{padding:0 0 10px 12px;border-left:2px solid var(--line);margin-left:6px}
.drawer__sub a{min-height:var(--tap);font-weight:var(--fw-m);font-size:1rem;padding-block:8px}
.drawer__call{padding:16px 16px 20px;border-top:1px solid var(--line);background:var(--alt)}
.drawer__call .telnote{margin-top:10px}
html.drawer-open{overflow:hidden}

/* sticky mobile call bar (≤ 760 px) */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:150;display:none;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(21,32,42,.12)}
.callbar .btn{width:100%;min-height:56px;font-size:1.125rem}

/* scroll-to-top — a steel plate; the two-tone ring stays visible on every ground */
/* hidden = visibility:hidden too, so the invisible plate is never a tab stop; no JS → no plate at all */
.totop{position:fixed;right:20px;bottom:22px;z-index:140;display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--glass-line);border-radius:var(--r);background:var(--brand);color:#fff;box-shadow:var(--sh);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px);pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s linear .25s,background-color var(--dur)}
.totop.is-on{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.no-js .totop{display:none}
.totop:hover{background:var(--deep)}
.totop .i{width:22px;height:22px}
.totop:focus-visible,.callbar .btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 2px #fff}

/* footer — graphite: lock-up row, four columns, the operator bar */
.site-footer{background:var(--deep);color:var(--dark-text);font-size:1rem;--ring:#fff;--link:var(--dark-text);--link-hover:#fff}
.foot__top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s5) clamp(2rem,1rem + 4vw,5rem);align-items:center;padding-block:clamp(2.5rem,2rem + 2vw,3.5rem);border-bottom:1px solid var(--dark-line)}
.site-footer .brand,.site-footer .brand:hover{color:#fff}
.site-footer .brand__l1,.site-footer .brand__sep{color:var(--dark-accent)}
.site-footer .brand__l2{color:#fff}
.foot__blurb{justify-self:end;max-width:58ch;color:var(--dark-text);font-size:1.0625rem;line-height:1.6}
.foot{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1.2fr) minmax(0,.85fr);gap:clamp(1.75rem,1rem + 2vw,2.75rem);padding-block:clamp(2.25rem,1.8rem + 2vw,3.25rem) clamp(2rem,1.6rem + 1.5vw,2.75rem)}
.foot__h{display:flex;align-items:center;gap:10px;margin-bottom:var(--s3);font-family:var(--font);font-size:var(--fs-micro);font-weight:var(--fw-x);letter-spacing:.13em;text-transform:uppercase;color:var(--dark-accent)}
.foot__h::before{content:"";width:18px;height:2px;background:var(--dark-accent);flex:none}
/* even rhythm when a label wraps: the 44 px target comes from padding, not from a centred min-height box */
.foot ul a{display:inline-block;min-height:var(--tap);padding-block:10px;text-decoration:none;line-height:1.5}
.foot ul a:hover{text-decoration:underline;color:#fff}
.foot ul a[aria-current="page"]{color:#fff;font-weight:var(--fw-b)}
.site-footer .telbig{color:#fff;font-size:1.5rem}
.foot__note{margin-top:10px;color:var(--dark-muted);font-size:var(--fs-small);line-height:1.55;max-width:34ch}
.fbar{background:var(--deep-2);color:var(--dark-muted);font-size:.9375rem}
.fbar__in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px var(--s6);padding-block:18px}

/* ── 5 · bands + section heads ───────────────────────────────────────────── */
.section{position:relative;padding-block:var(--band)}
.section--tight{padding-block:var(--band-tight)}
.section--flush-top{padding-top:0}
.section--flush-bottom{padding-bottom:0}
.section--surface{background:var(--surface);--gr:var(--surface)}
/* bg: white + a faint perforated-steel dot field ("Lochblech") — texture only, the text sits on white (counts as white for the rhythm) */
.section--bg{background-color:var(--surface);background-image:radial-gradient(circle,var(--rule) 1.3px,transparent 1.8px);background-size:22px 22px;background-position:11px 11px;--gr:var(--surface)}
.section--alt{background:var(--alt);--gr:var(--alt)}
.section--tint{background:var(--tint);--gr:var(--tint)}
.section--dark{background:var(--deep);color:var(--dark-text);--gr:var(--deep)}
.section--primary{background:var(--brand);color:#fff;--gr:var(--brand)}
.section--danger{background:var(--danger-tint);border-block:1px solid var(--danger-line);--gr:var(--danger-tint)}
.section--strip{padding-block:0;border-bottom:1px solid var(--line)}
/* dark grounds flip the context tokens … */
.section--dark,.section--primary,.hero__stage,.callrow--steel,.callrow--graphite,.compare__side--b{--ring:#fff;--link:#fff;--link-hover:var(--dark-accent)}
.section--dark :is(h2,h3,h4),.section--primary :is(h2,h3,h4){color:#fff}
.section--dark .lead,.section--primary .lead{color:var(--dark-text)}
.section--dark .muted,.section--primary .muted{color:var(--dark-muted)}
/* … and light islands inside them reset the tokens and the text colours */
.card,.hinweis,.compare__side--a,.phonebox,.herocard,.split__badge,.ftable,.keyfacts,.prose--card,.clist,.callband--plate .callband__in,.callrow--light,.hubindex,.klingelschild__panel{--ring:var(--focus);--link:var(--primary);--link-hover:var(--brand)}
.section--dark :is(.card,.hinweis,.phonebox,.prose--card,.clist,.callrow--light,.klingelschild__panel,.keyfacts,.ftable) :is(h2,h3,h4),.section--primary :is(.card,.hinweis,.phonebox,.prose--card,.clist,.callrow--light,.klingelschild__panel,.keyfacts,.ftable) :is(h2,h3,h4){color:var(--head)}

.shead{max-width:46rem;margin-bottom:clamp(1.75rem,1.2rem + 1.6vw,2.75rem)}
.shead--center{margin-inline:auto;text-align:center}
.shead--center .shead__intro{margin-inline:auto}
.shead--wide{max-width:none}
.shead--split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s4) clamp(2rem,1rem + 3vw,4rem);align-items:end;max-width:none}
.shead--split .shead__intro:first-child{margin-top:0}
.shead__h{margin-top:12px}
.shead__h:first-child{margin-top:0}
.shead__intro{margin-top:14px;font-size:var(--fs-lead);line-height:1.55;color:var(--muted);max-width:60ch}
.shead__intro+.shead__intro{margin-top:10px}
.section--dark .shead__intro,.section--primary .shead__intro{color:var(--dark-text)}

/* eyebrow: small caps behind a short burnt-orange rule (light orange on dark grounds) */
.eyebrow{display:flex;align-items:center;gap:12px;max-width:100%;font-family:var(--font);color:var(--primary);font-size:var(--fs-micro);font-weight:var(--fw-x);letter-spacing:.14em;text-transform:uppercase;line-height:1.35;hyphens:manual}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--accent);flex:none}
.shead--center .eyebrow{justify-content:center}
.shead--center .eyebrow::after{content:"";width:28px;height:2px;background:var(--accent);flex:none}
.section--dark .eyebrow,.section--primary .eyebrow,.hero__stage .eyebrow,.ctaband .eyebrow{color:var(--dark-text)}
.section--dark .eyebrow::before,.section--primary .eyebrow::before,.hero__stage .eyebrow::before,.section--dark .shead--center .eyebrow::after,.section--primary .shead--center .eyebrow::after{background:var(--dark-accent)}

/* ── 6 · hero ────────────────────────────────────────────────────────────── */
.hero{position:relative;isolation:isolate}
.hero__h{--h1:var(--fs-h1);font-size:var(--h1)}
.hero__copy{position:relative;max-width:46rem}
/* the Bezirk name never splits at its hyphen on desktop: cw_hero / cw_shead wrap it in .bz (text unchanged),
   and the WHOLE heading shrinks just enough that the name fits its column (≈ 14.6 em wide in Georgia bold).
   cw_shead marks such a heading .shead__h--bz; other headings keep their size. */
@media (min-width:761px){
  .hero__copy,.shead{container-type:inline-size}
  .hero__h{font-size:min(var(--h1),6.4cqi)}
  .hero__h .bz,.shead__h .bz{white-space:nowrap}
  h2.shead__h--bz{font-size:min(var(--fs-h2),6.4cqi)}
  h3.shead__h--bz{font-size:min(var(--fs-h3),6.4cqi)}
}
.hero__copy>.crumbs{margin-bottom:var(--s5)}
.hero__copy>.eyebrow{margin-bottom:var(--s4)}
.hero__lead{margin-top:var(--s5);font-size:var(--fs-lead);line-height:1.55;max-width:52ch}
.hero__more{margin-top:var(--s3);max-width:56ch}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s7)}
.hero__note{margin-top:var(--s3);font-size:var(--fs-small);max-width:52ch}

/* the photo family: full-bleed image + a directional graphite scrim. The scrim's .84 stop is anchored
   to the RIGHT EDGE OF THE COPY COLUMN (not to a percentage of the viewport), so the text keeps its
   measured contrast at every width — tools/wcag.php measures that lightest point (scrim*).
   The PHOTO is placed so its subject lands where the scrim is thin: cw_hero passes the manifest focal x
   as --fx (0…1), and .hero__bg starts at the left offset that puts that point at --hero-t (≥ 78 % of the
   stage, always past the copy). A subject already far right (focal ≥ ≈ .78) keeps the full bleed; one in
   the middle of its crop slides right, its left edge melts into the graphite under the copy. So no face
   ever sits behind the H1, whatever the crop. */
.hero--photo{background:var(--deep)}
.hero__stage{position:relative;isolation:isolate;overflow:hidden;background:var(--deep);color:#fff;--copy-end:max(calc(50% + 9.5rem),49rem);--hero-t:max(78%,calc(var(--copy-end) + 6rem))}
.hero__stage .hero__h{color:#fff}
.hero__stage .hero__lead,.hero__stage .hero__more,.hero__stage .hero__note{color:var(--dark-text)}
.hero__bg{position:absolute;inset:0;z-index:-2;left:clamp(0%,calc((var(--hero-t) - var(--fx,.78) * 100%) / (1 - var(--fx,.78))),60%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 min(40%,16rem));mask-image:linear-gradient(90deg,transparent 0,#000 min(40%,16rem))}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:var(--focal,70% 45%)}
.hero__stage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgb(var(--scrim)/.92) 0,rgb(var(--scrim)/.84) var(--copy-end),rgb(var(--scrim)/.36) calc(var(--copy-end) + 13rem),rgb(var(--scrim)/.14) 100%)}
.hero__in{padding-block:clamp(3.5rem,2.2rem + 4.4vw,6.5rem)}

/* the quick-fact LEDGE: a LINE OF FACTS under one hairline — no box, no fill, no dividers, no tap
   height, regular weight, small ticks: it must never read as buttons (only links/calls look pressable) */
.quick{display:flex;flex-wrap:wrap;gap:0 28px;max-width:46rem;margin-top:var(--s7);padding-top:var(--s2);border-top:1px solid var(--glass-line)}
.quick li{display:flex;align-items:flex-start;gap:8px;min-height:auto;padding:6px 0;color:var(--dark-text);font-weight:400;font-size:var(--fs-small);line-height:1.4;cursor:default}
.quick .i{flex:none;width:14px;height:14px;margin-top:.2em;color:var(--dark-accent);stroke-width:3}
.quick--light{border-top-color:var(--line)}
.quick--light li{color:var(--ink)}
.quick--light .i{color:var(--primary)}
/* inline ticks (service + split heroes) */
.hchecks{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:10px 28px;margin-top:var(--s5)}
.hchecks li{display:flex;align-items:flex-start;gap:10px;font-weight:var(--fw-m);line-height:1.4;max-width:30ch}
.hchecks .i{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--glass-3);color:var(--dark-accent);stroke-width:3;margin-top:.1em}

/* home — the tallest photo hero */
.hero--home .hero__in{padding-block:clamp(4rem,2.4rem + 6vw,7.5rem) clamp(3.5rem,2.2rem + 5vw,6.5rem)}
.hero--home .hero__h{--h1:clamp(2.25rem,1.45rem + 2.6vw,3rem);line-height:1.08}
/* service — compact, crumbs, inline ticks */
.hero--service .hero__in{padding-block:clamp(2.5rem,1.8rem + 3vw,4.25rem) clamp(3rem,2rem + 3.5vw,5rem)}
/* notdienst — the orange CALL STRIP on top (one tel: link), a heavier scrim, the call before the lead */
.callstrip{display:block;background:var(--cta);color:var(--on-cta);text-decoration:none;border-bottom:1px solid var(--cta-edge);--ring:var(--focus)}
.callstrip:hover{background:var(--cta-hover);color:var(--on-cta);text-decoration:none}
.callstrip:focus-visible{outline-offset:-5px;border-radius:0}
.callstrip__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s2) var(--s6);flex-wrap:wrap;min-height:64px;padding-block:10px}
.callstrip__t{display:flex;align-items:center;gap:12px;font-weight:var(--fw-b);font-size:1.0625rem;line-height:1.35}
.callstrip__ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--on-cta);color:var(--cta);flex:none}
.callstrip__ic .i{width:20px;height:20px;stroke-width:2.2}
.callstrip__n{display:inline-flex;align-items:center;gap:10px;font-size:clamp(1.375rem,1.1rem + 1vw,1.75rem);font-weight:var(--fw-x);white-space:nowrap;font-variant-numeric:tabular-nums}
.callstrip__n .i{width:.9em;height:.9em;stroke-width:2.4}
/* heavier, and the tail never drops below .55 — no bright wall slab beside the door at the right edge */
.hero--notdienst .hero__stage::before{background:linear-gradient(90deg,rgb(var(--scrim)/.95) 0,rgb(var(--scrim)/.9) var(--copy-end),rgb(var(--scrim)/.66) calc(var(--copy-end) + 16rem),rgb(var(--scrim)/.58) 100%)}
.hero--notdienst .hero__in{padding-block:clamp(2.5rem,2rem + 3vw,4.5rem)}
.hero--notdienst .hero__cta{margin-top:var(--s6)}
.hero--notdienst .hero__cta+.hero__lead,.hero--notdienst .hero__note+.hero__lead{margin-top:var(--s6)}

/* split + preise share the two-column grid */
.hero__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr);gap:clamp(2rem,1rem + 3.5vw,4.5rem);align-items:center;padding-block:clamp(2.5rem,1.8rem + 3vw,4.5rem) clamp(3rem,2rem + 3.5vw,5.25rem)}
.hero__grid .hero__h{--h1:clamp(2rem,1.3rem + 1.6vw,2.375rem)}
.hero__side{position:relative}
.hero__pic{padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh)}
.hero__pic .frame{border-radius:var(--r-sm)}
.herocard{position:absolute;left:clamp(-2.25rem,-2.6vw,-1rem);bottom:clamp(-1.75rem,-2vw,-1rem);z-index:2;max-width:min(22rem,86%);padding:16px 20px 18px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);color:var(--ink);box-shadow:var(--sh-lg)}
.herocard__t{display:flex;align-items:center;gap:10px;font-weight:var(--fw-b);color:var(--head);line-height:1.3}
.herocard__t .i{color:var(--primary);width:1.35em;height:1.35em}
.herocard p{font-size:var(--fs-small);color:var(--muted);margin-top:6px;line-height:1.5}
.herocard p.herocard__t{font-size:1.0625rem;color:var(--head);margin-top:0}
.herocard .checks{margin-top:10px;font-size:var(--fs-small)}
.herocard--danger{border-left:4px solid var(--danger)}
.herocard--danger .herocard__t .i{color:var(--danger)}
/* split — pale steel ground, the photo in a passe-partout plate, side left|right */
.hero--split{background:var(--tint);color:var(--ink)}
.hero--split .hero__lead,.hero--split .hero__note,.hero--preise .hero__lead,.hero--preise .hero__note,.hero--plain .hero__lead,.hero--plain .hero__note{color:var(--muted)}
.hero--split .hchecks li{color:var(--ink)}
.hero--split .hchecks .i{background:var(--primary);color:#fff}
.hero--media-left .hero__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr)}
.hero--media-left .hero__side{order:-1}
.hero--media-left .herocard{left:auto;right:clamp(-2.25rem,-2.6vw,-1rem)}
.hero--hoch .hero__grid{grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr)}
.hero--hoch.hero--media-left .hero__grid{grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr)}
/* preise — calm paper, no scrim: copy + a note plate (and optionally a small framed photo) */
.hero--preise{background:var(--alt);color:var(--ink)}
.hero--preise .hero__side{display:grid}
.hero--preise .herocard{position:relative;left:auto;right:auto;bottom:auto;max-width:none;margin:-2.75rem 0 0 clamp(1rem,.5rem + 2vw,2.25rem)}
.hero--nopic .herocard{margin:0;padding:clamp(1.4rem,1rem + 1.5vw,2.25rem);border-top:3px solid var(--brand);box-shadow:var(--sh)}
.hero--nopic .herocard p.herocard__t{font-family:var(--font-head);font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem)}
.hero--nopic .herocard p{font-size:1.0625rem}
/* hub — photo stage + the INDEX PLATE pulled up over its bottom edge */
.hero--hub{background:var(--surface)}
.hero--hub .hero__in{padding-block:clamp(2.75rem,2rem + 3vw,4.5rem)}
.hero--indexed .hero__in{padding-bottom:calc(clamp(2.75rem,2rem + 3vw,4.5rem) + 3.5rem)}
.hubindex{position:relative;z-index:2;margin-top:-3.5rem;margin-bottom:clamp(1.25rem,.75rem + 2vw,2.5rem);padding:12px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-lg)}
.hubindex__l{display:flex;align-items:center;gap:10px;margin:4px 6px 12px;font-size:var(--fs-micro);font-weight:var(--fw-x);letter-spacing:.13em;text-transform:uppercase;color:var(--primary)}
.hubindex__l::before{content:"";width:22px;height:2px;background:var(--accent)}
.hubindex__list{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:8px}
.hubindex__a{display:flex;flex-direction:column;align-items:flex-start;gap:12px;height:100%;min-height:var(--tap);padding:14px 14px 12px;border-radius:var(--r);border:1px solid var(--line);background:var(--alt);color:var(--head);text-decoration:none;line-height:1.25;transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.hubindex__a:hover{background:var(--surface);border-color:var(--edge);box-shadow:var(--sh);transform:translateY(-2px);color:var(--head);text-decoration:none}
.hubindex__ic{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-sm);background:var(--tint);color:var(--primary)}
.hubindex__ic .i{width:24px;height:24px}
.hubindex__t{font-family:var(--font-head);font-weight:700;font-size:1.125rem;hyphens:auto;-webkit-hyphens:auto}
.hubindex__go{margin-top:auto;color:var(--accent);width:1.1em;height:1.1em;transition:transform var(--dur) var(--ease)}
.hubindex__a:hover .hubindex__go{transform:translateX(4px)}
/* plain — 404 + legal pages */
.hero--plain{background:var(--alt);color:var(--ink);border-bottom:1px solid var(--line)}
.hero--plain .hero__in{padding-block:clamp(2.25rem,1.6rem + 3vw,4rem)}
.hero--plain .hero__copy{max-width:48rem}
/* a lifted call band right below: the hero grows by the lift so the plate overlaps its bottom edge */
/* "~" (not "+"): a page's own <style> printed between hero and band must not break the reserved space —
   still, print the page <style> BEFORE cw_hero() */
.hero:has(~ .callband--lift){padding-bottom:var(--lift)}
.hero--photo:has(~ .callband--lift){padding-bottom:0}
.hero--photo:has(~ .callband--lift) .hero__stage{padding-bottom:var(--lift)}

/* ── 7 · call band · call row · phone box · closing band ─────────────────── */
.callband{padding-block:clamp(2rem,1.5rem + 1.8vw,3rem)}
.callband__in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s5) clamp(1.5rem,1rem + 3vw,4rem);align-items:center}
.callband__copy>.eyebrow{margin-bottom:10px}
.callband__h{font-size:clamp(1.5rem,1.2rem + 1.1vw,2.0625rem)}
.callband__p{margin-top:10px;max-width:62ch;font-size:1.0625rem}
.callband__p+.callband__p{margin-top:var(--s3)}
.callband__after{margin-top:var(--s5)}
/* topics: an UNBOXED inline tick list (static labels — only links may look like plates) */
.callband__topics{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:var(--s4)}
.callband__topics li{display:inline-flex;align-items:center;gap:9px;color:var(--head);font-weight:var(--fw-m);font-size:1rem;line-height:1.35;cursor:default}
.callband__topics .i{box-sizing:content-box;width:12px;height:12px;padding:4px;border-radius:50%;background:var(--primary);color:#fff;stroke-width:3.2}
.callband__act{display:flex;flex-direction:column;align-items:center;gap:10px}
.callband__btn{min-width:min(100%,19rem)}
.callband__note{color:var(--muted);font-size:.9375rem;font-weight:var(--fw-m);text-align:center;max-width:30ch}
/* plate — the white plate on paper; lifted over the hero above it (only ever directly after the hero) */
.callband--plate .callband__in{position:relative;z-index:2;padding:clamp(1.5rem,1.1rem + 1.6vw,2.5rem) clamp(1.35rem,1rem + 2vw,2.75rem);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-lg)}
/* flow-root: the plate's negative margin must NOT collapse through the band — otherwise the whole paper band
   slides up and covers the hero's reserved space instead of the plate reaching into it */
.callband--lift{padding-top:0;display:flow-root}
.callband--lift .callband__in{margin-top:calc(-1 * var(--lift))}
/* steel — the full Stahlblau band */
.callband--steel .callband__h{color:#fff}
.callband--steel .callband__p{color:var(--dark-text)}
.callband--steel .callband__topics li{color:#fff}
.callband--steel .callband__topics .i{background:#fff;color:var(--brand)}
.callband--steel .callband__note{color:var(--dark-text)}
/* paper — copy straight on the paper ground, framed by hairlines */
.callband--paper{border-block:1px solid var(--line)}
/* rich — paragraphs + factor rows left, the phone box right (sticky beside long copy) */
.callband--rich{padding-block:var(--band-tight)}
.callband--rich .callband__in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}
/* factors: a hairline-ruled list with a bold lead word — no icon squares (those belong to cw_iclist) */
.callband__fs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(1.25rem,1rem + 1vw,2rem);margin-top:var(--s5)}
.callband__f{position:relative;padding:14px 0 16px;border-top:1px solid var(--line-strong);line-height:1.5;font-size:1rem;color:var(--ink)}
.callband__f::before{content:"";position:absolute;left:0;top:-2px;width:28px;height:3px;background:var(--accent)}
.callband__ft strong{display:block;font-family:var(--font-head);font-size:1.1875rem;line-height:1.3;color:var(--head);margin-bottom:4px}
.callband__ft span{color:var(--muted)}
.callband--steel .callband__f{border-top-color:var(--dark-line-strong)}
.callband--steel .callband__f::before{background:var(--dark-accent)}
.callband--steel .callband__ft strong{color:#fff}
.callband--steel .callband__ft span{color:var(--dark-text)}
.callband__act--box{align-items:stretch;position:sticky;top:calc(var(--hdr-h) + 20px)}
.callband__act--box .phonebox{width:100%}

/* call row: the rounded plate + the big number */
.callrow{display:flex;align-items:center;justify-content:space-between;gap:var(--s4) var(--s7);flex-wrap:wrap;padding:clamp(1.4rem,1rem + 1.4vw,2rem) clamp(1.4rem,1rem + 2vw,2.5rem);border-radius:var(--r-lg);color:#fff}
.callrow--steel{background:var(--brand)}
.callrow--graphite{background:var(--deep)}
.callrow--light{background:var(--surface);border:1px solid var(--line);color:var(--ink);box-shadow:var(--sh-sm)}
.section--dark .callrow--graphite{border:1px solid var(--dark-line)}
.callrow__copy{flex:1 1 20rem;min-width:0}
.callrow__t{font-family:var(--font-head);font-size:clamp(1.25rem,1.05rem + .8vw,1.625rem);font-weight:700;line-height:1.25;color:#fff}
.callrow__s{margin-top:6px;color:var(--dark-text)}
.callrow--light .callrow__t{color:var(--head)}
.callrow--light .callrow__s{color:var(--muted)}
.callrow .telbig{color:#fff;font-size:clamp(1.625rem,1.25rem + 1.5vw,2.25rem)}
.callrow--light .telbig{color:var(--head)}

/* phone box: the white call card (a light island on any ground) */
/* container: the number scales with the BOX, not the viewport, so it never overflows a narrow column */
.phonebox{container-type:inline-size;padding:clamp(1.35rem,1.05rem + 1.3vw,2rem);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.phonebox--card{border-color:transparent;box-shadow:var(--sh-float)}
.phonebox--soft{background:var(--alt)}
.section--alt .phonebox--soft{background:var(--surface)}
.phonebox__label{display:flex;align-items:center;gap:10px;font-size:var(--fs-micro);font-weight:var(--fw-x);letter-spacing:.13em;text-transform:uppercase;color:var(--primary)}
.phonebox__label::before{content:"";width:22px;height:2px;background:var(--accent);flex:none}
.phonebox .telbig{margin-top:8px;font-size:clamp(1.375rem,8.6cqi,2.375rem);color:var(--head)}
.phonebox .btn{margin-top:var(--s4)}
.phonebox .telnote{text-align:center;margin-inline:auto}

/* closing band: steel (default) or graphite, copy left + the phone box right */
.ctaband__in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:center}
.ctaband__copy .lead{margin-top:var(--s4);color:var(--dark-text)}
.ctaband__copy .checks{margin-top:var(--s6)}
.ctaband .phonebox{max-width:30rem;justify-self:end;width:100%}

/* ── 8 · trust ───────────────────────────────────────────────────────────── */
/* strip: equal cells with hairline dividers — never an orphaned last item */
.trust__list{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));padding-block:clamp(1rem,.8rem + .8vw,1.4rem)}
.trust__i{display:flex;align-items:center;gap:12px;min-height:var(--tap);font-weight:var(--fw-b);color:var(--head);line-height:1.3}
.trust--strip .trust__i{justify-content:center;padding:6px clamp(.75rem,.4rem + 1vw,1.5rem)}
.trust--strip .trust__i+.trust__i{border-left:1px solid var(--line)}
/* strip: a bare line icon (no tinted square — that motif belongs to cw_iclist / the hub index) */
.trust__ic{display:grid;place-items:center;color:var(--primary);flex:none}
.trust__ic .i{width:24px;height:24px}
.trust__i small{display:block;font-weight:400;font-size:var(--fs-small);color:var(--muted)}
/* cards = RULED PLEDGES: no plate, no icon — a strong hairline with a short burnt lead, a serif title, one
   line under it. An incomplete last row sits in the middle, never a lone item left */
.trust--cards .trust__list{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s6) clamp(1.25rem,1rem + 1.5vw,2.5rem);padding:0}
.trust--cards .trust__i{position:relative;flex:0 1 calc((100% - (var(--cols,4) - 1) * clamp(1.25rem,1rem + 1.5vw,2.5rem)) / var(--cols,4));min-width:0;display:block;padding-top:var(--s4);border-top:1px solid var(--line-strong)}
.trust--cards .trust__i::before{content:"";position:absolute;left:0;top:-2px;width:28px;height:3px;background:var(--accent)}
.trust--cards .trust__t{display:block;font-family:var(--font-head);font-size:clamp(1.1875rem,1.1rem + .3vw,1.3125rem);line-height:1.3}
.trust--cards small{margin-top:6px;font-family:var(--font);font-size:1.0625rem;line-height:1.55}
.section--dark .trust__i,.section--primary .trust__i{color:#fff}
.section--dark .trust--strip .trust__i+.trust__i,.section--primary .trust--strip .trust__i+.trust__i{border-left-color:var(--glass-line)}
.section--dark .trust__ic,.section--primary .trust__ic{color:var(--dark-accent)}
.section--dark .trust__i small,.section--primary .trust__i small{color:var(--dark-text)}
.section--dark .trust--cards .trust__i,.section--primary .trust--cards .trust__i{border-top-color:var(--dark-line-strong)}
.section--dark .trust--cards .trust__i::before,.section--primary .trust--cards .trust__i::before{background:var(--dark-accent)}

/* ── 9 · cards (passe-partout) ───────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:clamp(1rem,.8rem + .8vw,1.5rem)}
.card{position:relative;display:flex;flex-direction:column;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);color:var(--ink);box-shadow:var(--sh-sm);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.card--link:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--edge)}
.card__media{position:relative;aspect-ratio:7/5;background:var(--tint);overflow:hidden;border-radius:var(--r-sm)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card--link:hover .card__media img{transform:scale(1.03)}
.card__badge{position:absolute;left:10px;top:10px;padding:4px 10px;border-radius:var(--r-xs);background:var(--surface);color:var(--head);font-size:.875rem;font-weight:var(--fw-b);letter-spacing:.04em;box-shadow:var(--sh-sm)}
.card__body{display:flex;flex-direction:column;flex:1;padding:16px 12px 10px}
.card__ic{display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r-sm);background:var(--tint);color:var(--primary);margin-bottom:var(--s4)}
.card__ic .i{width:27px;height:27px}
.card--icon .card__body{padding-top:14px}
.card__t{font-size:clamp(1.1875rem,1.1rem + .3vw,1.3125rem);color:var(--head);line-height:1.25}
.card__t::after{content:"";display:block;width:30px;height:3px;margin-top:10px;border-radius:2px;background:var(--accent)}
.card__link{color:inherit;text-decoration:none}
.card__link:hover{color:inherit;text-decoration:none}
.card__link::after{content:"";position:absolute;inset:0;z-index:1}
.card__link:focus-visible{outline:none}
.card:has(.card__link:focus-visible){outline:3px solid var(--ring-out,var(--focus));outline-offset:3px}
.section--dark .card,.section--primary .card{--ring-out:#fff}
.card__body>p{margin-top:10px;color:var(--muted);font-size:1.0625rem;line-height:1.55}
.card--link .card__body>p:not(.card__more){margin-bottom:16px}
.card__more{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto!important;padding-top:12px;border-top:1px solid var(--line);color:var(--primary)!important;font-weight:var(--fw-b);font-size:1rem}
.card__more .i{width:1.1em;height:1.1em;color:var(--accent);transition:transform var(--dur) var(--ease)}
.card--link:hover .card__more .i{transform:translateX(4px)}
.cards--tint .card{background:var(--alt);box-shadow:none}
.section--alt .cards--tint .card{background:var(--surface)}
.cards--c5 .card__t{font-size:1.125rem}
.cards--c5 .card__body>p{font-size:1rem}
.card--wide{grid-column:span 2;flex-direction:row}
.card--wide .card__media{flex:0 0 50%;aspect-ratio:auto;min-height:15rem}
.card--wide .card__body{justify-content:center;padding:18px 18px 12px 22px}
/* fill: an orphaned last card widens to close its row and turns sideways (photo left, text right),
   so its height stays in line with the cards beside it — never a lone card beside a gap */
@media (min-width:1001px){
  .cards--fill.cards--c3>.card:last-child:nth-child(3n+2),.cards--fill.cards--c2>.card:last-child:nth-child(odd),.cards--fill.cards--c4>.card:last-child:nth-child(4n+3){grid-column:span 2;flex-direction:row}
  .cards--fill.cards--c3>.card:last-child:nth-child(3n+4),.cards--fill.cards--c4>.card:last-child:nth-child(4n+5){grid-column:1 / -1;flex-direction:row}
  .cards--fill.cards--c4>.card:nth-last-child(2):nth-child(4n+5),.cards--fill.cards--c4>.card:last-child:nth-child(4n+6){grid-column:span 2;flex-direction:row}
  .cards--fill.cards--c3>.card:last-child:is(:nth-child(3n+2),:nth-child(3n+4)) .card__media,
  .cards--fill.cards--c2>.card:last-child:nth-child(odd) .card__media,
  .cards--fill.cards--c4>.card:last-child:is(:nth-child(4n+3),:nth-child(4n+5),:nth-child(4n+6)) .card__media,
  .cards--fill.cards--c4>.card:nth-last-child(2):nth-child(4n+5) .card__media{flex:0 0 48%;aspect-ratio:auto;min-height:14rem}
  .cards--fill.cards--c3>.card:last-child:is(:nth-child(3n+2),:nth-child(3n+4)) .card__body,
  .cards--fill.cards--c2>.card:last-child:nth-child(odd) .card__body,
  .cards--fill.cards--c4>.card:last-child:is(:nth-child(4n+3),:nth-child(4n+5),:nth-child(4n+6)) .card__body,
  .cards--fill.cards--c4>.card:nth-last-child(2):nth-child(4n+5) .card__body{justify-content:center;padding:18px 18px 12px 22px}
}
/* five in a row from 1200 px; between 1001 and 1199 three + a widened pair */
@media (min-width:1001px) and (max-width:1199px){
  .cards--c5{--cols:3!important}
  .cards--fill.cards--c5>.card:last-child:nth-child(3n+2){grid-column:span 2;flex-direction:row}
  .cards--fill.cards--c5>.card:last-child:nth-child(3n+2) .card__media{flex:0 0 48%;aspect-ratio:auto;min-height:14rem}
  .cards--fill.cards--c5>.card:last-child:nth-child(3n+2) .card__body{justify-content:center;padding:18px 18px 12px 22px}
}
@media (min-width:761px) and (max-width:1000px){
  .cards--fill>.card:last-child:nth-child(odd){grid-column:span 2;flex-direction:row}
  .cards--fill>.card:last-child:nth-child(odd) .card__media{flex:0 0 48%;aspect-ratio:auto;min-height:14rem}
  .cards--fill>.card:last-child:nth-child(odd) .card__body{justify-content:center;padding:18px 18px 12px 22px}
}

/* ── 10 · icon lists + checks ────────────────────────────────────────────── */
.iclist{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:var(--s6) clamp(1.25rem,1rem + 1.5vw,2.5rem)}
.iclist__i{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:start}
.iclist__ic{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-sm);background:var(--tint);color:var(--primary);box-shadow:inset 0 0 0 1px rgba(47,93,133,.14)}
.iclist__ic .i{width:24px;height:24px}
.iclist__t{font-size:clamp(1.1875rem,1.1rem + .3vw,1.3125rem);color:var(--head);line-height:1.3;padding-top:.45em}
.iclist__c p{margin-top:6px;color:var(--muted)}
.iclist__c>p:first-child{margin-top:.55em;color:var(--ink)}
.iclist--cards .iclist__i{grid-template-columns:minmax(0,1fr);gap:14px;padding:var(--s5) var(--s5) var(--s6);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm)}
.iclist--cards .iclist__t{padding-top:0}
.section--tint .iclist--rows .iclist__ic,.section--alt .iclist--rows .iclist__ic{background:var(--surface)}
.iclist--ruled{gap:0 clamp(1.25rem,1rem + 1.5vw,2.5rem)}
.iclist--ruled .iclist__i{padding-block:var(--s5) var(--s6);border-top:1px solid var(--line)}
.iclist--ruled .iclist__i:nth-child(-n + 3){border-top-color:var(--line-strong)}
.ic--danger{background:var(--danger-tint)!important;color:var(--danger)!important;box-shadow:inset 0 0 0 1px var(--danger-line)!important}
.ic--solid{background:var(--brand)!important;color:#fff!important;box-shadow:none!important}
.section--dark .iclist__ic,.section--primary .iclist__ic{background:var(--glass-2);color:var(--dark-accent);box-shadow:none}
.section--dark .iclist__t,.section--primary .iclist__t{color:#fff}
.section--dark .iclist__c p,.section--primary .iclist__c p{color:var(--dark-text)}
.section--dark .iclist--cards .iclist__i{background:var(--glass-1);border-color:var(--dark-line);box-shadow:none}
.section--primary .iclist--cards .iclist__i{background:var(--glass-2);border-color:var(--glass-line);box-shadow:none}
.section--dark .iclist--ruled .iclist__i{border-top-color:var(--dark-line)}

.checks{display:grid;gap:10px}
/* round tick discs — a square with a tick would read as a form checkbox on a site without forms */
.checks li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;line-height:1.5}
.checks__m{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--primary);color:#fff;margin-top:2px}
.checks__m .i{width:14px;height:14px;stroke-width:3}
.checks--cross .checks__m{background:var(--danger-tint);color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger-line)}
.checks--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px var(--s6)}
.section--dark .checks li,.section--primary .checks li{color:#fff}
.section--dark .checks__m,.section--primary .checks__m{background:#fff;color:var(--brand)}

/* checklist panel (shape "checklist"): ruled rows, a BARE drawn tick (no box — nothing here is a form
   control), a filled steel disc for an ordered to-do, a bare red warning glyph; title + short text */
.clist{border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm);overflow:hidden}
.section--surface .clist,.section--bg .clist{background:var(--alt);box-shadow:none}
.clist__list{display:grid;grid-template-columns:repeat(var(--clc,1),minmax(0,1fr));column-gap:clamp(1.5rem,1rem + 2vw,3rem);padding:0 clamp(1.1rem,.8rem + 1.4vw,2rem)}
.clist--c2{--clc:2}
.clist__i{display:grid;grid-template-columns:32px minmax(0,1fr);gap:16px;align-items:start;padding-block:clamp(1rem,.85rem + .6vw,1.35rem);border-top:1px solid var(--line)}
.clist__i:first-child,.clist--c2 .clist__i:nth-child(2){border-top:0}
.clist__box{display:grid;place-items:center;width:32px;height:32px;color:var(--primary);margin-top:-1px;cursor:default}
.clist__box .i{width:28px;height:28px;stroke-width:3}
.clist__n{font-weight:var(--fw-x);font-size:1.0625rem;line-height:1;font-variant-numeric:tabular-nums}
.clist--num .clist__box{border-radius:50%;background:var(--brand);color:#fff;margin-top:1px}
.clist__i--warn .clist__box{color:var(--danger)}
.clist__i--warn .clist__box .i{width:26px;height:26px;stroke-width:2.2}
.clist__t{font-family:var(--font);font-size:1.125rem;font-weight:var(--fw-b);color:var(--head);line-height:1.35;padding-top:.25em}
.clist__c p{margin-top:6px;color:var(--muted)}
.clist__foot{display:flex;align-items:flex-start;gap:10px;margin:0;padding:var(--s4) clamp(1.1rem,.8rem + 1.4vw,2rem);border-top:1px solid var(--line);background:var(--alt);font-size:1rem;color:var(--ink)}
.clist__foot .i{color:var(--primary);margin-top:.15em}
.section--surface .clist__foot,.section--bg .clist__foot{background:var(--tint)}

/* ── 11 · process steps ──────────────────────────────────────────────────── */
/* cards: the number plate sits as a tab on the top edge; a short rail bridges the gaps */
.steps{--gap:clamp(1.25rem,1rem + 1vw,1.75rem);display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:calc(var(--gap) + 10px) var(--gap);padding-top:22px}
.step{position:relative;padding:38px var(--s5) var(--s5);background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.step__n{position:absolute;top:-22px;left:var(--s5);display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-sm);background:var(--brand);color:#fff;font-family:var(--font);font-weight:var(--fw-x);font-size:1.1875rem;line-height:1;font-variant-numeric:tabular-nums;box-shadow:0 0 0 5px var(--gr)}
.step__t{font-size:clamp(1.1875rem,1.1rem + .3vw,1.3125rem);color:var(--head);line-height:1.3}
.step p{margin-top:8px;color:var(--muted);font-size:1.0625rem;line-height:1.55}
.steps--cards .step:not(:last-child)::after{content:"";position:absolute;top:-1px;left:100%;width:calc(var(--gap) + 2px);border-top:2px solid var(--edge)}
.steps--n6 .step:nth-child(3n)::after{display:none}
.section--alt .step,.section--tint .step{border-color:transparent;box-shadow:var(--sh-sm)}
.steps--line{grid-template-columns:minmax(0,1fr);gap:0;max-width:48rem;padding-top:0}
.steps--line .step{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 var(--s5);padding:0 0 var(--s6);border:0;background:none;box-shadow:none}
.steps--line .step::before{content:"";position:absolute;left:21px;top:50px;bottom:6px;border-left:2px solid var(--edge)}
.steps--line .step:last-child::before{display:none}
.steps--line .step__n{position:relative;top:auto;left:auto;box-shadow:none;grid-row:span 2}
.steps--line .step__t{padding-top:.45em}
.steps--line .step p{margin-top:6px}
.section--dark .step,.section--primary .step{background:var(--glass-1);border-color:var(--dark-line);box-shadow:none}
.section--primary .step{border-color:var(--glass-line)}
.section--dark .step__t,.section--primary .step__t{color:#fff}
.section--dark .step__n,.section--primary .step__n{background:#fff;color:var(--head)}
.section--dark .step p,.section--primary .step p{color:var(--dark-text)}
.section--dark .steps--cards .step:not(:last-child)::after{border-top-color:var(--dark-line-strong)}
.section--dark .steps--line .step,.section--primary .steps--line .step{background:none;border:0}
.section--dark .steps--line .step::before{border-left-color:var(--dark-line-strong)}

/* ── 12 · faq — a ruled ledger of native <details> ───────────────────────── */
.faq{max-width:52rem;border-top:2px solid var(--head)}
.faq--center{margin-inline:auto}
.faq__i{border-bottom:1px solid var(--line)}
.faq__i summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);min-height:64px;padding:16px 4px 16px 2px;cursor:pointer;list-style:none;font-weight:var(--fw-b);font-size:1.125rem;color:var(--head);line-height:1.4;border-radius:var(--r-xs)}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary:hover .faq__q{color:var(--primary)}
.faq__ic{position:relative;flex:none;width:32px;height:32px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--surface);transition:background-color var(--dur),border-color var(--dur)}
.faq__ic::before,.faq__ic::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:1px;background:var(--head);transition:transform .25s var(--ease),background-color var(--dur)}
.faq__ic::after{transform:rotate(90deg)}
.faq__i[open] .faq__ic{background:var(--brand);border-color:var(--brand)}
.faq__i[open] .faq__ic::before,.faq__i[open] .faq__ic::after{background:#fff}
.faq__i[open] .faq__ic::after{transform:rotate(0deg)}
.faq__i[open]>summary{color:var(--primary)}
.faq__a{padding:0 56px 22px 2px;color:var(--ink)}
.faq__a p+p{margin-top:10px}
/* on a graphite or steel band the ledger turns white-on-dark (no light island needed) */
.section--dark .faq,.section--primary .faq{border-top-color:#fff}
.section--dark .faq__i,.section--primary .faq__i{border-bottom-color:var(--dark-line-strong)}
.section--dark .faq__i summary,.section--primary .faq__i summary,.section--dark .faq__i[open]>summary,.section--primary .faq__i[open]>summary{color:#fff}
.section--dark .faq__i summary:hover .faq__q,.section--primary .faq__i summary:hover .faq__q{color:var(--dark-accent)}
.section--dark .faq__ic,.section--primary .faq__ic{background:transparent;border-color:var(--dark-line-strong)}
.section--dark .faq__ic::before,.section--dark .faq__ic::after,.section--primary .faq__ic::before,.section--primary .faq__ic::after{background:#fff}
.section--dark .faq__i[open] .faq__ic,.section--primary .faq__i[open] .faq__ic{background:#fff;border-color:#fff}
.section--dark .faq__i[open] .faq__ic::before,.section--dark .faq__i[open] .faq__ic::after{background:var(--deep)}
.section--primary .faq__i[open] .faq__ic::before,.section--primary .faq__i[open] .faq__ic::after{background:var(--brand)}
.section--dark .faq__a,.section--primary .faq__a{color:var(--dark-text)}

/* ── 13 · hinweis (safety — 110 / 112 are plain text, never tel: links) ───── */
.hinweis{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4) var(--s5);align-items:start;padding:clamp(1.1rem,.9rem + 1vw,1.6rem) clamp(1.1rem,.9rem + 1vw,1.75rem);border-radius:var(--r);background:var(--danger-tint);border:1px solid var(--danger-line);border-left:5px solid var(--danger);color:var(--ink)}
.hinweis__ic{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--danger);color:#fff}
.hinweis__ic .i{width:24px;height:24px;stroke-width:2.1}
.hinweis__tag{font-size:var(--fs-micro);font-weight:var(--fw-x);letter-spacing:.11em;text-transform:uppercase;color:var(--danger)}
.hinweis__h{font-size:var(--fs-h3);color:var(--head);margin-top:2px}
.hinweis__body p{margin-top:6px}
.hinweis__body>p:first-child{margin-top:0}
.hinweis__list{display:grid;gap:6px;margin-top:10px}
.hinweis__list li{position:relative;padding-left:22px}
.hinweis__list li::before{content:"";position:absolute;left:4px;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--danger);transform:rotate(45deg)}
/* 110 / 112 as a LINE OF TEXT under the title — never a tile: a box with a big number reads as a dial
   button, and these are deliberately not tel: links */
.hinweis__nums{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin-top:6px;cursor:default}
.hinweis__num{display:inline-flex;align-items:baseline;gap:7px;line-height:1.2}
.hinweis__num strong{font-family:var(--font);font-size:1.5rem;font-weight:var(--fw-x);color:var(--danger);font-variant-numeric:lining-nums tabular-nums}
.hinweis__num span{font-size:1.0625rem;font-weight:var(--fw-b);color:var(--ink)}
.hinweis__sep{color:var(--danger);font-weight:var(--fw-b)}
.hinweis__nums+p,.hinweis__h+p{margin-top:8px}
.hinweis--info{background:var(--tint);border-color:var(--info-line);border-left-color:var(--primary)}
.hinweis--info .hinweis__ic{background:var(--primary)}
.hinweis--info .hinweis__tag{color:var(--primary)}
.hinweis--info .hinweis__list li::before{background:var(--primary)}
.hinweis-band{padding-block:clamp(1.75rem,1.3rem + 1.6vw,2.5rem)}
.section--danger .hinweis{background:var(--surface)}
.hinweis-band .hinweis__h{font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem)}

/* ── 14 · contrast pair ──────────────────────────────────────────────────── */
.compare{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.25rem,1rem + 1.5vw,2rem);align-items:stretch}
.compare__side{padding:clamp(1.4rem,1.1rem + 1.2vw,2.1rem);border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface)}
.compare__side--b{background:var(--deep);border-color:var(--deep);color:var(--dark-text)}
.compare__tag{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border-radius:var(--r-xs);background:var(--tint);color:var(--primary);font-size:var(--fs-micro);font-weight:var(--fw-x);letter-spacing:.1em;text-transform:uppercase}
.compare__tag .i{width:1.1em;height:1.1em}
.compare__side--b .compare__tag{background:var(--glass-2);color:#fff}
.compare__side--b .compare__tag .i{color:var(--dark-accent)}
.compare__h{margin-top:var(--s4);font-size:clamp(1.3125rem,1.15rem + .6vw,1.5625rem);color:var(--head)}
.compare__side--b .compare__h{color:#fff}
.compare__lead{margin-top:8px;color:var(--muted)}
.compare__side--b .compare__lead{color:var(--dark-text)}
.compare__side .checks{margin-top:var(--s5)}
.compare__side--b .checks li{color:#fff}
.compare__side--b .checks__m{background:#fff;color:var(--head)}
.compare__side--b .checks--cross .checks__m{background:var(--glass-2);color:#fff;box-shadow:inset 0 0 0 1px var(--glass-line-strong)}
.compare__vs{position:absolute;left:50%;top:50%;z-index:2;display:grid;place-items:center;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:var(--surface);border:1px solid var(--line-strong);box-shadow:0 0 0 5px var(--gr),var(--sh);color:var(--head);font-family:var(--font-head);font-style:italic;font-weight:700;font-size:1.0625rem}
.compare--light .compare__side--b{background:var(--alt);border-color:var(--line);color:var(--ink);--ring:var(--focus);--link:var(--primary);--link-hover:var(--brand)}
.compare--light .compare__side--b .compare__h{color:var(--head)}
.compare--light .compare__side--b .compare__lead{color:var(--muted)}
.compare--light .compare__side--b .checks li{color:var(--ink)}
.compare--light .compare__side--b .compare__tag{background:var(--surface);color:var(--primary)}
.compare--light .compare__side--b .compare__tag .i{color:var(--primary)}
.compare--light .compare__side--b .checks__m{background:var(--primary);color:#fff}
.compare--light .compare__side--b .checks--cross .checks__m{background:var(--danger-tint);color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger-line)}
.section--alt .compare--light .compare__side--b{background:var(--surface)}
.section--dark .compare__side--b{border-color:var(--dark-line);background:var(--deep-2)}

/* ── 15 · feature split + frames ─────────────────────────────────────────── */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:center}
.split--media-left .split__media,.split--media-left .split__aside{order:-1}
.split--wide{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split--wide.split--media-left{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.split--hoch{grid-template-columns:minmax(0,1.5fr) minmax(0,.62fr)}
.split--hoch.split--media-left{grid-template-columns:minmax(0,.62fr) minmax(0,1.5fr)}
.split__copy .lead{margin-top:var(--s4)}
.split__copy .shead{margin-bottom:0}
.split__paras{margin-top:var(--s4);max-width:68ch}
.split__paras p+p{margin-top:var(--s3)}
.split__copy>.checks,.split__copy>.iclist,.split__body{margin-top:var(--s6)}
.split__foot{margin-top:var(--s7)}
.split__media{position:relative;margin:0}
/* the passe-partout: a white plate with a hairline around the photo */
.split__pic{position:relative;padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh)}
.split__pic .frame{border-radius:var(--r-sm)}
.section--dark .split__pic,.section--primary .split__pic{background:var(--glass-1);border-color:var(--glass-line);box-shadow:none}
.split__cap,.fig__cap{margin-top:var(--s3);font-family:var(--font-head);font-style:italic;font-size:var(--fs-small);color:var(--muted);line-height:1.5}
.section--dark .split__cap,.section--primary .split__cap,.section--dark .fig__cap{color:var(--dark-muted)}
.section--primary .split__cap{color:var(--dark-text)}
.split__badge{position:absolute;left:-16px;bottom:28px;z-index:2;display:inline-flex;align-items:center;gap:10px;max-width:80%;padding:10px 14px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);color:var(--head);font-weight:var(--fw-b);font-size:1rem;line-height:1.3;box-shadow:var(--sh-lg)}
.split__badge .i{color:var(--primary);width:1.35em;height:1.35em}
.split--media-left .split__badge{left:auto;right:-16px}

.frame{position:relative;border-radius:var(--r);overflow:hidden;background:var(--tint)}
.frame img{width:100%;height:100%;object-fit:cover;object-position:var(--focal,50% 50%)}
.frame--75{aspect-ratio:7/5}.frame--167{aspect-ratio:16/7}.frame--23{aspect-ratio:2/3}.frame--43{aspect-ratio:4/3}.frame--32{aspect-ratio:3/2}
.frame--1610{aspect-ratio:16/10}.frame--169{aspect-ratio:16/9}.frame--sq{aspect-ratio:1}.frame--45{aspect-ratio:4/5}

/* ── 16 · chips (related pages) ──────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);padding:8px 14px 8px 16px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line-strong);color:var(--primary);font-weight:var(--fw-b);font-size:1rem;line-height:1.25;text-decoration:none;transition:background-color var(--dur),border-color var(--dur),color var(--dur),transform .12s var(--ease)}
.chip .i{width:1.05em;height:1.05em;color:var(--accent);transition:transform var(--dur) var(--ease)}
.chip:hover{background:var(--alt);border-color:var(--brand);color:var(--brand);text-decoration:none;transform:translateY(-1px)}
.chip:hover .i{transform:translateX(3px)}
.chip[aria-current="page"]{background:var(--brand);border-color:var(--brand);color:#fff}
.chip[aria-current="page"] .i{color:#fff}
.chips__note{margin-top:var(--s4);font-size:var(--fs-small);color:var(--muted);max-width:60ch}
.section--dark .chip,.section--primary .chip,.hero__stage .chip{background:var(--glass-1);border-color:var(--dark-line-strong);color:#fff}
.section--dark .chip .i,.section--primary .chip .i,.hero__stage .chip .i{color:var(--dark-accent)}
.section--dark .chip:hover,.section--primary .chip:hover{background:var(--glass-3);border-color:#fff;color:#fff}
.section--dark .chips__note,.section--primary .chips__note{color:var(--dark-text)}
.chips--center{justify-content:center}

/* ── 17 · Klingelschild — the Bezirk's house types as a doorbell panel (signature) ── */
/* The PANEL is the object: one brushed light-metal Klingeltableau with four corner screws. The house
   types sit on it directly, as rows divided by engraved hairlines: left an engraved name plate with two
   screws + a convex steel push button (decorative, aria-hidden — nothing to press), the "Wo" line and the
   caller's sentence on a white card; right the title and the text. The panel stays LIGHT metal on every
   ground — on a graphite or steel band it reads as a lit panel on a dark wall (metal-ink on metal 9.07). */
.klingelschild{display:grid;gap:clamp(1.75rem,1rem + 3vw,3.5rem);align-items:start}
.klingelschild--aside{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.klingelschild--aside-right{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.klingelschild--aside-right .klingelschild__aside{order:2}
.klingelschild__aside{position:sticky;top:calc(var(--hdr-h) + 24px)}
.klingelschild__aside>.shead{margin-bottom:var(--s5)}
.klingelschild__aside>p+p{margin-top:var(--s3)}
.klingelschild__panel{--screw:radial-gradient(circle,var(--metal-edge) 0 2.2px,var(--metal-sheen) 2.8px 3.4px,transparent 3.9px);
  position:relative;padding:clamp(.6rem,.4rem + .8vw,1.1rem) clamp(1.1rem,.7rem + 1.8vw,2.4rem);border-radius:var(--r-lg);color:var(--ink);
  background:var(--screw) left 9px top 9px/9px 9px no-repeat,var(--screw) right 9px top 9px/9px 9px no-repeat,
    var(--screw) left 9px bottom 9px/9px 9px no-repeat,var(--screw) right 9px bottom 9px/9px 9px no-repeat,
    linear-gradient(180deg,var(--metal-sheen),transparent 30%),
    linear-gradient(112deg,transparent 18%,rgba(255,255,255,.3) 40%,transparent 62%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 1px,transparent 1px 3px,rgba(255,255,255,.07) 3px 4px,transparent 4px 6px),var(--metal);
  border:1px solid var(--metal-edge);box-shadow:var(--sh-plate),var(--sh)}
.klingelschild__list{display:grid}
.kschild{display:grid;grid-template-columns:minmax(14rem,17rem) minmax(0,1fr);grid-template-areas:"plate title" "where text" "say text";grid-template-rows:auto auto 1fr;gap:var(--s3) clamp(1.25rem,1rem + 1.6vw,2.5rem);align-items:start;padding-block:clamp(1.15rem,.9rem + .9vw,1.75rem);border-top:1px solid var(--metal-edge);box-shadow:inset 0 1px 0 var(--metal-sheen)}
.kschild:first-child{border-top:0;box-shadow:none}
/* with a photo: plate + photo left; title, "Wo" line, text and the caller's sentence right. The photo
   spans into a trailing 1fr row, so it never sizes the right column's rows: the say box always follows
   the text directly (no hole under the text when the photo is the taller side) */
.kschild--pic{grid-template-areas:"plate title" "pic where" "pic text" "pic say" "pic .";grid-template-rows:auto auto auto auto 1fr}
.kschild__plate{grid-area:plate}.kschild__t{grid-area:title;align-self:center}.kschild__where{grid-area:where}.kschild__text{grid-area:text}.kschild__say{grid-area:say}.kschild__pic{grid-area:pic}
/* the engraved name plate: recessed, two screws, the label cut into it */
.kschild__plate{display:flex;align-items:center;gap:16px;padding-right:5px}
.kschild__label{position:relative;flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;min-height:48px;padding:8px 24px;border-radius:var(--r-xs);text-align:center;
  background:linear-gradient(180deg,var(--metal-sheen),transparent 75%),var(--metal);border:1px solid var(--metal-edge);
  box-shadow:inset 0 2px 4px rgba(21,32,42,.2),inset 0 -1px 0 var(--metal-sheen),0 1px 0 var(--metal-sheen);
  font-family:var(--font);font-size:.875rem;font-weight:var(--fw-x);letter-spacing:.12em;text-transform:uppercase;color:var(--metal-ink);line-height:1.25;text-shadow:0 1px 0 var(--metal-sheen);hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:6 3 3;overflow-wrap:break-word}
.kschild__label::before,.kschild__label::after{content:"";position:absolute;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;
  background:linear-gradient(135deg,transparent 42%,rgba(21,32,42,.5) 43% 57%,transparent 58%),radial-gradient(circle at 35% 35%,var(--surface),var(--metal-edge) 80%);box-shadow:0 0 0 1px rgba(21,32,42,.22)}
.kschild__label::before{left:8px}.kschild__label::after{right:8px}
/* the push button: convex steel in a darker bezel ring (decorative) */
.kschild__bell{flex:none;width:34px;height:34px;border-radius:50%;cursor:default;
  background:radial-gradient(circle at 36% 30%,var(--surface) 0,var(--metal) 46%,var(--metal-edge) 100%);border:1px solid var(--line-strong);
  box-shadow:0 0 0 4px var(--metal),0 0 0 5px var(--metal-edge),0 3px 5px 1px rgba(21,32,42,.24),inset 0 -2px 3px rgba(21,32,42,.18)}
.kschild__t{font-size:clamp(1.25rem,1.15rem + .4vw,1.4375rem);color:var(--head);line-height:1.25}
.kschild__where{display:flex;align-items:flex-start;gap:8px;margin:2px 2px 0;font-size:var(--fs-small);color:var(--ink);line-height:1.45}
.kschild__where .i{width:1.1em;height:1.1em;color:var(--accent);margin-top:.12em}
.kschild__where strong{color:var(--head)}
.kschild__p{color:var(--ink)}
.kschild__p+.kschild__p{margin-top:8px}
/* the caller's sentence: the one white inset on the metal */
.kschild__say{display:flex;align-items:flex-start;gap:10px;padding:11px 14px 12px 12px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--metal-edge);border-left:3px solid var(--primary);box-shadow:inset 0 1px 2px rgba(21,32,42,.08);line-height:1.5;color:var(--ink)}
.kschild__say .i{color:var(--primary);margin-top:.15em}
.kschild__say strong{display:block;margin-bottom:2px;font-size:var(--fs-micro);font-weight:var(--fw-x);letter-spacing:.06em;text-transform:uppercase;color:var(--primary)}
.kschild__say q{font-family:var(--font-head);font-style:italic;font-size:1.0625rem;color:var(--head)}
.kschild__pic{padding:6px;background:var(--surface);border:1px solid var(--metal-edge);border-radius:var(--r)}
.kschild__pic .frame{border-radius:var(--r-sm)}
.klingelschild__foot{margin:0 0 6px;padding-top:12px;border-top:1px solid var(--metal-edge);box-shadow:inset 0 1px 0 var(--metal-sheen);font-family:var(--font-head);font-style:italic;font-size:.9375rem;color:var(--muted)}
/* compact: a literal two-column tableau — a plate on top of each cell, its text underneath */
.klingelschild--compact .klingelschild__list{grid-template-columns:repeat(2,minmax(0,1fr))}
.klingelschild--compact .kschild,.klingelschild--compact .kschild--pic{grid-template-columns:minmax(0,1fr);grid-template-areas:"plate" "title" "where" "text" "say" "pic";grid-template-rows:none;align-content:start;row-gap:10px}
.klingelschild--compact .kschild:nth-child(2){border-top:0;box-shadow:none}
.klingelschild--compact .kschild:nth-child(odd){padding-right:clamp(1rem,.6rem + 1.5vw,2rem)}
.klingelschild--compact .kschild:nth-child(even){padding-left:clamp(1rem,.6rem + 1.5vw,2rem);border-left:1px solid var(--metal-edge)}
.klingelschild--compact .kschild__plate{max-width:24rem}
.klingelschild--compact .kschild__t{align-self:start;margin-top:4px}
/* an odd last plate keeps the stacked cell of the others (an empty slot beside it, like a real tableau) */
/* on a graphite or steel band: the same LIGHT panel, lit against the dark wall */
.klingelschild--dark .klingelschild__panel{box-shadow:var(--sh-plate),0 0 0 1px var(--glass-line),0 26px 60px rgba(0,0,0,.42)}

/* ── 18 · breadcrumbs ────────────────────────────────────────────────────── */
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 2px;font-size:var(--fs-small);line-height:1.3}
.crumbs li{display:inline-flex;align-items:center}
.crumbs li+li::before{content:"";width:6px;height:6px;margin:0 10px 0 6px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);opacity:.55}
.crumbs a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--link);font-weight:var(--fw-m);text-decoration:none}
.crumbs a:hover{color:var(--link-hover);text-decoration:underline}
.crumbs [aria-current]{font-weight:var(--fw-b);color:var(--head)}
.hero__stage .crumbs{color:var(--dark-text)}
.hero__stage .crumbs [aria-current]{color:var(--dark-text)}

/* ── 19 · factor table (Preise — qualitative, never a figure) ────────────── */
.ftable{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);overflow:hidden;box-shadow:var(--sh-sm)}
.ftable table{width:100%;border-collapse:collapse;font-size:1.0625rem;line-height:1.5}
.ftable caption{caption-side:top;text-align:left;padding:var(--s4) var(--s5);font-family:var(--font-head);font-weight:700;font-size:1.1875rem;color:var(--head);background:var(--alt);border-bottom:1px solid var(--line)}
.ftable th,.ftable td{padding:var(--s4) var(--s5);text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.ftable thead th{border-top:0;border-bottom:2px solid var(--brand);background:var(--tint);color:var(--brand);font-size:var(--fs-micro);font-weight:var(--fw-x);letter-spacing:.1em;text-transform:uppercase}
.ftable tbody th{font-weight:var(--fw-b);color:var(--head);width:28%}
.ftable__f{display:flex;align-items:flex-start;gap:12px}
.ftable__f>span:last-child{padding-top:.45em}
.ftable__ic{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-sm);background:var(--tint);color:var(--primary);flex:none}
.ftable__ic .i{width:22px;height:22px}
.ftable tbody tr:nth-child(even){background:var(--zebra)}
.ftable td{color:var(--ink)}
.ftable__foot{padding:var(--s4) var(--s5);border-top:1px solid var(--line);background:var(--alt);font-size:1rem;color:var(--ink)}

/* ── 20 · prose + key facts ──────────────────────────────────────────────── */
.prose{max-width:68ch;color:var(--ink)}
.prose>*+*{margin-top:1em}
.prose h2{font-size:clamp(1.4375rem,1.2rem + .9vw,1.8125rem);margin-top:1.8em}
.prose h3{font-size:clamp(1.1875rem,1.08rem + .4vw,1.3125rem);margin-top:1.5em}
.prose h4{margin-top:1.3em}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul,.prose ol{padding-left:1.4em}
.prose ul{list-style:disc}.prose ol{list-style:decimal}
.prose li+li{margin-top:.35em}
.prose li::marker{color:var(--accent)}
.prose a{font-weight:var(--fw-m);overflow-wrap:anywhere}
.prose table{width:100%;border-collapse:collapse;font-size:1rem}
.prose th,.prose td{padding:10px 12px;border:1px solid var(--line);text-align:left;vertical-align:top}
.prose th{background:var(--alt)}
.prose address{font-style:normal}
.prose--card{padding:clamp(1.5rem,1rem + 2vw,2.75rem);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm);max-width:52rem}
/* plain prose on a dark band (the card variant stays a white island) */
.section--dark .prose:not(.prose--card),.section--primary .prose:not(.prose--card){color:var(--dark-text)}
.section--dark .prose:not(.prose--card) li::marker,.section--primary .prose:not(.prose--card) li::marker{color:var(--dark-accent)}
.section--dark .prose:not(.prose--card) :is(th,td),.section--primary .prose:not(.prose--card) :is(th,td){border-color:var(--dark-line-strong)}
.section--dark .prose:not(.prose--card) th,.section--primary .prose:not(.prose--card) th{background:var(--glass-2);color:#fff}
.prose--card{color:var(--ink)}
.prose--lead>p:first-child{font-size:var(--fs-lead);color:var(--muted);line-height:1.55}
.keyfacts{display:grid;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);overflow:hidden}
.keyfacts__row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--s4);padding:var(--s4) var(--s5);border-top:1px solid var(--line)}
.keyfacts__row:first-child{border-top:0}
.keyfacts dt{display:flex;align-items:flex-start;gap:10px;font-weight:var(--fw-b);color:var(--head)}
.keyfacts dt .i{color:var(--primary);margin-top:.15em}
.keyfacts dd{margin:0;color:var(--ink)}

/* ── 21 · motion (reveal never hides content without JS) ─────────────────── */
.js .reveal:not(.in){opacity:0;transform:translateY(var(--rise))}
.js .reveal{transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease)}
.js .reveal.d2{transition-delay:.07s}.js .reveal.d3{transition-delay:.14s}.js .reveal.d4{transition-delay:.21s}
/* once revealed, a linked card answers the pointer at hover speed */
.js .card.reveal.in{transition:opacity var(--dur-reveal) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal:not(.in){opacity:1;transform:none}
  .card--link:hover,.card--link:hover .card__media img,.btn:hover,.chip:hover,.hubindex__a:hover{transform:none}
}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .hdr{gap:var(--s3)}
  .nav__l{padding-inline:10px}
  .nav__l::after{left:10px;right:10px}
  .brand__l2{font-size:1.1875rem}
}
@media (max-width:1000px){
  .foot{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards{--cols:2!important}
  .card--wide{grid-column:auto;flex-direction:column}
  .card--wide .card__media{flex:none;aspect-ratio:7/5;min-height:0}
  .card--wide .card__body{padding:16px 12px 10px}
  .trust__list{--cols:2!important;row-gap:var(--s2)}
  /* strip: two per row, an odd last cell centred */
  .trust--strip .trust__list{display:flex;flex-wrap:wrap;justify-content:center}
  .trust--strip .trust__i{flex:0 0 50%;justify-content:flex-start}
  .trust--strip .trust__i+.trust__i{border-left:0}
  .trust--strip .trust__i:nth-child(even){border-left:1px solid var(--line)}
  /* steps: 4 → 2×2 · 3 and 6 → rows of 3 · 5 → 3 + 2 centred */
  .steps{--n:2!important}
  .steps--n3,.steps--n6{--n:3!important}
  .steps--n5{--n:6!important}
  .steps--n5>.step{grid-column:span 2}
  .steps--n5>.step:nth-child(4){grid-column:2 / span 2}
  .steps--cards .step:not(:last-child)::after{display:none}
  .hubindex__list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .klingelschild--aside,.klingelschild--aside-right{grid-template-columns:minmax(0,1fr)}
  .klingelschild--aside-right .klingelschild__aside{order:0}
  .klingelschild__aside{position:static;max-width:46rem}
  .kschild,.kschild--pic{grid-template-columns:minmax(12.5rem,14rem) minmax(0,1fr)}
  .foot__top{grid-template-columns:minmax(0,1fr)}
  .foot__blurb{justify-self:start}
}
@media (max-width:900px){
  .mainnav{display:none}
  .burger{display:inline-flex}
  .hdr__call,.mainnav+.hdr__call{margin-left:auto}
  .topbar__r{display:none}
  .hero__grid,.hero--media-left .hero__grid,.hero--hoch .hero__grid,.hero--hoch.hero--media-left .hero__grid{grid-template-columns:minmax(0,1fr)}
  .hero--media-left .hero__side{order:0}
  .hero--split .hero__side,.hero--preise .hero__side{max-width:36rem}
  .hero--hoch .hero__side{max-width:20rem}
  .callband--rich .callband__in{grid-template-columns:minmax(0,1fr)}
  .callband__act--box{position:static;max-width:30rem}
  /* PHOTO HEROES on tablets + phones: the copy would cover the whole stage, so the photo becomes a
     visible STRIP of its own (16:10, the subject placed by focal_m) and the copy sits on SOLID graphite
     (white on --deep 16.13) — never a 90 % smear with a ghost face behind the H1. Only a light .35 fade
     at the strip's foot, where no text sits. Notdienst: the strip goes UNDER the copy — the call first. */
  .hero__stage{display:flex;flex-direction:column}
  .hero__stage::before{display:none}
  .hero__bg{position:relative;inset:auto;z-index:0;order:0;width:100%;aspect-ratio:16/10;max-height:22rem;-webkit-mask-image:none;mask-image:none}
  .hero__bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(180deg,transparent,rgb(var(--scrim)/.35));pointer-events:none}
  .hero__bg img{object-position:var(--focal-m,70% 50%)}
  .hero__stage>.hero__in{order:1}
  .hero--notdienst .hero__bg{order:2}
  .hero--notdienst .hero__bg::after{top:0;bottom:auto;background:linear-gradient(0deg,transparent,rgb(var(--scrim)/.35))}
  .hero--photo .hero__in{padding-block:clamp(1.5rem,1.2rem + 1.5vw,2.25rem) clamp(2.25rem,1.6rem + 3vw,3.25rem)}
  .hero--indexed .hero__in{padding-bottom:calc(clamp(2.25rem,1.6rem + 3vw,3.25rem) + 3.5rem)}
}
@media (max-width:760px){
  /* two-column compositions stack on phones (tablets keep them side by side) */
  :root{--hdr-h:66px}
  .topbar{display:none}
  .ctaband__in{grid-template-columns:minmax(0,1fr)}
  .ctaband .phonebox{justify-self:start}
  .split,.split--wide,.split--wide.split--media-left,.split--hoch,.split--hoch.split--media-left{grid-template-columns:minmax(0,1fr)}
  .split--media-left .split__media,.split--media-left .split__aside{order:0}
  .split__media,.split__aside{max-width:36rem}
  .split--hoch .split__media{max-width:20rem}
  .duo,.duo--wide,.duo--narrow{grid-template-columns:minmax(0,1fr)}
  .shead--split{grid-template-columns:minmax(0,1fr)}
  .compare{grid-template-columns:minmax(0,1fr)}
  .compare__vs{position:relative;left:auto;top:auto;margin:-2.3rem auto;justify-self:center}
  .steps--n5>.step,.steps--n5>.step:nth-child(4){grid-column:auto}
  .clist--c2{--clc:1}
  .clist--c2 .clist__i:nth-child(2){border-top:1px solid var(--line)}
  .prose table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .brand__mark{width:40px;height:40px;border-radius:8px}
  .brand__l1{font-size:.75rem;letter-spacing:.11em}
  .brand__l2{font-size:1.0625rem}
  .hdr{gap:10px}
  .hdr__btn{min-width:48px;min-height:48px;padding:0;justify-content:center}
  .hdr__btn .btn__txt{display:none}
  .hdr__btn .btn__ic{width:20px;height:20px;padding:0;background:none;color:var(--on-cta)}
  .callbar{display:block}
  /* the sticky call bar (≈ 77 px) never covers content: the footer's last bar runs on under it */
  .fbar{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  /* phones: the sticky call bar is the one floating control — the scroll-to-top plate would sit on the
     copy (the 16 px gutter cannot hold a 44 px target), so it steps aside; the header stays one swipe away */
  .totop{display:none}
  .hero__cta .btn{width:100%}
  .hero__cta .btn--stack{justify-content:flex-start}
  .quick{flex-direction:column;max-width:none}
  .hchecks{grid-template-columns:minmax(0,1fr)}
  .callband__in{grid-template-columns:minmax(0,1fr)}
  .callband__act{align-items:stretch}
  .callband__btn{width:100%;min-width:0}
  .callband__note{text-align:left;max-width:none}
  .herocard{position:relative;left:auto!important;right:auto!important;bottom:auto!important;margin:-2.25rem var(--s4) 0 auto;max-width:calc(100% - 2 * var(--s4))}
  .hero--preise .herocard{margin:-2.25rem var(--s4) 0 auto}
  .hero--nopic .herocard{margin:0;max-width:none}
  .hubindex{margin-top:-2.75rem}
  .hero--indexed .hero__in{padding-bottom:calc(clamp(2.25rem,1.6rem + 3vw,3.25rem) + 2.75rem)}
  .hubindex__list{grid-template-columns:minmax(0,1fr)}
  .hubindex__a{flex-direction:row;align-items:center;padding:10px 12px}
  .hubindex__go{margin:0 0 0 auto}
  .cards{--cols:1!important}
  .card--wide{grid-column:auto}
  /* icon cards: icon left, text right — four short cards stay short */
  .card--icon .card__body{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:16px;align-content:start}
  .card--icon .card__ic{grid-row:1 / span 3;margin:0}
  .card--icon .card__body>:not(.card__ic){grid-column:2}
  .card--icon .card__t{padding-top:.3em}
  .iclist{--cols:1!important}
  .iclist--cards .iclist__i{grid-template-columns:48px minmax(0,1fr);gap:16px;padding:var(--s4) var(--s5)}
  .iclist--cards .iclist__t{padding-top:.45em}
  .iclist--ruled .iclist__i:nth-child(-n + 3){border-top-color:var(--line)}
  .iclist--ruled .iclist__i:first-child{border-top-color:var(--line-strong)}
  .checks--2{grid-template-columns:minmax(0,1fr)}
  /* steps: one card per row, the number stays a TAB on the card's top edge (the line variant stays a ledger) */
  .steps{--n:1!important;gap:34px;padding-top:20px}
  .steps--cards .step{padding:32px var(--s5) var(--s5)}
  .steps--cards .step__n{top:-20px;width:40px;height:40px;font-size:1.0625rem}
  .trust__list{--cols:1!important}
  .trust--strip .trust__i:nth-child(even){border-left:0}
  .trust--strip .trust__i{flex-basis:100%;padding-inline:0}
  .trust--strip .trust__i+.trust__i{border-top:1px solid var(--line)}
  .section--dark .trust--strip .trust__i+.trust__i,.section--primary .trust--strip .trust__i+.trust__i{border-top-color:var(--glass-line)}
  .trust--cards .trust__i{flex-basis:100%}
  .split__badge{left:12px;bottom:22px}
  .split--media-left .split__badge{right:12px}
  /* Klingelschild: one plate per row, everything under its plate */
  .klingelschild--compact .klingelschild__list{grid-template-columns:minmax(0,1fr)}
  .kschild,.kschild--pic,.klingelschild--compact .kschild,.klingelschild--compact .kschild--pic,.klingelschild--compact .kschild:last-child:nth-child(odd),.klingelschild--compact .kschild--pic:last-child:nth-child(odd){grid-template-columns:minmax(0,1fr);grid-template-areas:"plate" "title" "where" "text" "say" "pic";grid-template-rows:none;row-gap:10px}
  .klingelschild--compact .kschild:nth-child(odd),.klingelschild--compact .kschild:nth-child(even){padding-inline:0;border-left:0}
  .klingelschild--compact .kschild:nth-child(2){border-top:1px solid var(--metal-edge);box-shadow:inset 0 1px 0 var(--metal-sheen)}
  .kschild__t,.klingelschild--compact .kschild:last-child:nth-child(odd) .kschild__t{align-self:start;margin-top:4px}
  .kschild__plate{max-width:22rem}
  .kschild__pic{max-width:20rem}
  .ftable caption{display:block}
  .ftable thead{display:none}
  .ftable table,.ftable tbody,.ftable tr,.ftable th,.ftable td{display:block;width:auto}
  .ftable tbody th{width:auto}
  .ftable tbody tr{padding:var(--s4) var(--s5);border-top:1px solid var(--line)}
  .ftable tbody th,.ftable td{border:0;padding:0}
  .ftable td{margin-top:10px}
  .ftable td::before{content:attr(data-label);display:block;font-size:var(--fs-micro);font-weight:var(--fw-x);letter-spacing:.08em;text-transform:uppercase;color:var(--primary);margin-bottom:2px}
  .keyfacts__row{grid-template-columns:minmax(0,1fr);gap:4px}
  .foot{grid-template-columns:minmax(0,1fr)}
  .fbar__in{flex-direction:column}
}
@media (max-width:560px){
  /* call buttons that carry the number: small label over the big number */
  .btn--num:not(.btn--block):not(.btn--stack) .btn__txt{flex-direction:column;align-items:flex-start;gap:0;line-height:1.15;text-align:left}
  .btn--num:not(.btn--block):not(.btn--stack) .btn__l{font-size:max(.8125em,.875rem);font-weight:var(--fw-m);white-space:normal}
  .btn--num:not(.btn--block):not(.btn--stack) .btn__num{font-size:1.2em}
  /* a long call label wraps inside the plate instead of running past its padding */
  .btn__l{white-space:normal}
  .btn--block{padding-inline:1em}
  .callband__fs{grid-template-columns:minmax(0,1fr)}
  /* notice: ONE column — a small icon inline with the tag, title and text get the full width */
  .hinweis{grid-template-columns:30px minmax(0,1fr);gap:8px 12px}
  .hinweis__ic{width:30px;height:30px}
  .hinweis__ic .i{width:17px;height:17px}
  .hinweis__body{display:contents}
  .hinweis__body>*{grid-column:1 / -1;margin-top:0!important}
  .hinweis__body>:first-child{grid-column:2;align-self:center}
  .clist__i{grid-template-columns:30px minmax(0,1fr);gap:12px}
  .clist__box{width:30px;height:30px}
  .callrow{flex-direction:column;align-items:flex-start}
  .callrow__copy{flex:none}
  .callrow .telbig{font-size:clamp(1.5rem,6.6vw,2rem)}
  .callstrip__in{justify-content:flex-start}
  .callstrip__t{font-size:1rem}
  /* linked photo cards turn into rows: a 7:5 thumbnail left, title + line + arrow right (≈ 140 px each) */
  .card--photo.card--link{display:grid;grid-template-columns:38% minmax(0,1fr);gap:0 14px;align-items:start}
  .card--photo.card--link .card__media{aspect-ratio:7/5}
  .card--photo.card--link .card__body{padding:2px 4px 2px 0}
  .card--photo.card--link .card__t{font-size:1.0625rem}
  .card--photo.card--link .card__t::after{width:24px;margin-top:6px}
  .card--photo.card--link .card__body>p:not(.card__more){margin:6px 0 8px;font-size:.9375rem;line-height:1.45}
  .card--photo.card--link .card__more{padding-top:6px;font-size:.9375rem}
  .card--photo .card__badge{left:5px;top:5px;padding:2px 6px;font-size:.75rem;letter-spacing:0}
  /* the header keeps a 44 px icon-only call plate (aria-label carries the number) beside the burger;
     the Bezirk name may break at its own hyphen to make room */
  .hdr__btn{min-width:44px;min-height:44px}
  .brand{gap:10px}
  .brand__mark{width:38px;height:38px}
  .brand__l2{font-size:clamp(.9375rem,4.1vw,1.0625rem);white-space:normal}
  /* the burger keeps its accessible name "Menü"; on phones the glyph alone leaves the Bezirk name its room */
  .burger__txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .burger{padding:0;min-width:46px;min-height:46px}
}
@media (max-width:440px){
  /* "· Berlin" leaves the visible lock-up (it stays in the link's accessible name) */
  .brand__sep,.brand__sub{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:380px){
  .brand{gap:8px}
  .brand__mark{width:34px;height:34px}
  .quick li{font-size:.9375rem}
  /* small phones: a long compound in a big heading may break with a hyphen instead of overflowing */
  h1,h2{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:12 5 5}
}
@media (max-width:359px){
  /* 320 px (WCAG 1.4.10 reflow): everything fits inside the 16 px gutters */
  .hdr,.hdr__call{gap:6px}
  .brand{gap:7px}
  .brand__mark{width:32px;height:32px;border-radius:7px}
  .brand__l1{font-size:.6875rem;letter-spacing:.08em}
  .brand__l2{font-size:.875rem}
  .burger{min-width:44px;min-height:44px}
  /* the stacked call plate keeps the whole number inside its edge */
  .btn--stack{padding-right:.9em}
  .btn--stack .btn__num{font-size:1.06em}
}
@media (max-width:340px){
  .callbar .btn__l{display:none}
}
/* no JavaScript: no drawer — the burger becomes a link to the footer navigation */
.no-js .burger{display:none!important}
.no-js .nav__tog{display:none}
@media (max-width:900px){.no-js .menulink{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 6px}}

/* ── 22 · print ──────────────────────────────────────────────────────────── */
@media print{
  .topbar,.site-header,.drawer,.callbar,.totop,.hero__bg,.callstrip{display:none!important}
  .hero__stage,.section--dark,.section--primary,.site-footer,.compare__side--b{background:#fff!important;color:#000!important}
  .hero__stage *,.section--dark *,.section--primary *,.site-footer *,.compare__side--b *{color:#000!important;background:none!important;box-shadow:none!important;text-shadow:none!important}
  .hero__stage::before{display:none}
  body{padding:0}
}