/* ==========================================================================
   shk-neukoelln — the design language „farbblock-duo · Neukölln“
   Signature: the page is a stack of FULL-BLEED COLOUR BLOCKS that alternate
   CORAL (#FF5A2E, dark ink text) ⇄ VIOLET (#7B2FF7, white text), with white / mist
   reading bands between them; zig-zag splits flip the picture side from block to block.
   Neukölln's own devices, taken from the favicon (a white flame that breaks out of the
   top edge of a violet squircle):
     · the SQUIRCLE — every tile, card, frame, button and tag is a rounded square
       (25 % radius on tiles, a fixed 22–34 px on cards and frames), never a pill
     · the BREAKOUT — one element leaves its container's edge: a flame tongue rising out
       of a band / frame / panel (--m-tongue mask), an icon tile that overhangs a card's top edge
     · the „Sockel“ — raised surfaces stand on a solid 5 px under-edge instead of a soft glow
     · the duo seam under the header (coral | violet), a coral top bar, flat colour blocks (no texture)
   Every value below is a token; per-page code never adds a colour, font, radius, shadow
   or motion value of its own. Contrast gate: tools/contrast.php.
   ========================================================================== */

:root{
  /* colour — locked from the favicon: coral, violet, deep indigo, mist, white */
  --coral:#ff5a2e;--coral-hi:#ff7048;--coral-700:#b6320f;--peach:#ffeee8;--on-coral:#200a3a;
  --violet:#7b2ff7;--violet-700:#5a1fcb;--violet-900:#170a36;
  --on-violet:#fff;--on-violet-2:#f6f1ff;
  --white:#fff;--mist:#f4eeff;--mist-2:#e6d9ff;--line:#ddd0f2;--line-strong:#8a76b5;
  --ink:#5a1fcb;--text:#241a38;--muted:#5a5068;
  --danger:#b3261e;--danger-bg:#fdf0ee;--danger-line:#f0c7c2;
  /* shape — squircle tiles are 25 % (the favicon's rx16 of 64); cards and frames a fixed radius */
  --sq:25%;--r-xs:10px;--r-btn:16px;--r:24px;--r-lg:34px;
  --sh-sm:0 1px 2px rgba(23,10,54,.08),0 4px 12px rgba(23,10,54,.06);
  --sh:0 12px 30px rgba(23,10,54,.16);
  --sh-lg:0 24px 56px rgba(23,10,54,.26);
  --wrap:1180px;--gut:clamp(16px,4vw,24px);
  --ease:cubic-bezier(.22,.61,.36,1);
  /* weights: the stack has 400/600/700/900 everywhere (Segoe UI has no 800) — UI text 700, display 900 */
  --sans:'Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',Arial,sans-serif;
  --topbar-h:44px;
  /* the breakout: a flame tongue (two licks) and the favicon flame itself, as masks (colour = background) */
  /* preserveAspectRatio=none: the mask fills its box exactly, so a tongue whose --tw/--th ratio differs from 56:44 still sits flush on its edge */
  --m-tongue:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 44' preserveAspectRatio='none'%3E%3Cpath d='M18 44C18 31 29 25 32 13C33 8 34 4 37 0C39 8 43 12 48 19C53 25 56 33 56 44ZM0 44C0 36 6 31 9 23C10 27 12 30 15 32C17 34 18 38 18 44Z'/%3E%3C/svg%3E");
  --m-flame:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8 0 48 60'%3E%3Cpath d='M32 60C18.7 60 8 50.5 8 38.5C8 28 12 20 18 12C19.5 19 22.5 25 26 27C26 15 36 8 36 0H48C48 6 45 12.5 50 18.5C54 23.5 56 30.5 56 38.5C56 50.5 45.3 60 32 60Z'/%3E%3C/svg%3E");
  /* the same flame with a CLOSED, pointed tip (the bullet above is the favicon crop; at watermark size its flat top read as a bottle neck) */
  --m-flame-tip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8 -10 48 70'%3E%3Cpath d='M32 60C18.7 60 8 50.5 8 38.5C8 28 12 20 18 12C19.5 19 22.5 25 26 27C26 15 33 6 40 -10C42 2 56 22 56 38.5C56 50.5 45.3 60 32 60Z'/%3E%3C/svg%3E");
}

/* ------------------------------------------- tone scopes (band tokens) --
   Every brick reads these; a band or a surface sets them for its subtree.  */
/* LIGHT — page default, white + mist bands, and every white surface (a card on a coral band stays white) */
:root,.band--white,.band--mist,
.card,.promise,.notice,.compare__col,.factsheet,.phonebox,.qa,.hero__dial,.hero__badge,.gal figure,.trustbar,.masthead,.drawer__p,.callbar,.phoneband,.sub,
:is(.band--coral.band--hasfoot:has(+.band--violet) .hero__foot),
:is(.band--violet.band--hasfoot:has(+.band--coral) .hero__foot){
  --bg-band:var(--white);--fg:var(--text);--fg-h:var(--ink);--fg-muted:var(--muted);--link:var(--coral-700);--focus:var(--violet);
  --kick-fg:var(--coral-700);--kick-bg:var(--mist);--kick-bd:var(--mist-2);--bullet:var(--coral);--hl:var(--coral-700);
  --card:var(--white);--card-bd:var(--line);--tile-bg:var(--coral);--tile-fg:var(--on-coral);--num-bg:var(--violet);--num-fg:#fff;
  --chip-bg:var(--mist);--chip-bd:var(--mist-2);--chip-ic:var(--coral-700);
  --call-bg:var(--violet);--call-fg:#fff;--call-hov:var(--violet-700);--call-sh:rgba(90,31,203,.34);--rule:var(--line);--mark:rgba(255,90,46,.28)
}
.band--mist{--bg-band:var(--mist);--kick-bg:var(--white);--chip-bg:var(--white)}
/* CORAL colour block — dark ink on #FF5A2E (nothing violet carries meaning here: text, focus, numbers, the call pill are indigo/ink);
   also the top bar, the closing „Wählleiste“ and the foot strip of a violet hero */
.band--coral,.legal-hero,.topbar,.cta__dial,.band--violet .hero__foot{
  --bg-band:var(--coral);--fg:var(--on-coral);--fg-h:var(--on-coral);--fg-muted:var(--on-coral);--link:var(--on-coral);--focus:var(--violet-900);
  --kick-fg:var(--on-coral);--kick-bg:rgba(255,255,255,.3);--kick-bd:rgba(32,10,58,.26);--bullet:var(--violet-900);--hl:var(--violet-900);
  --card:var(--white);--card-bd:transparent;--tile-bg:var(--violet);--tile-fg:#fff;--num-bg:var(--violet);--num-fg:#fff;
  --chip-bg:rgba(255,255,255,.3);--chip-bd:rgba(32,10,58,.26);--chip-ic:var(--on-coral);
  --call-bg:var(--violet-900);--call-fg:#fff;--call-hov:var(--violet);--call-sh:rgba(23,10,54,.34);--rule:rgba(32,10,58,.26);--mark:rgba(255,255,255,.55)
}
/* VIOLET colour block — white on #7B2FF7 (text stays white: the usable window above 4.5 : 1 is white … #f6f1ff);
   also the violet panels (call row, hero foot strip, the closing bar on a coral band) */
.band--violet,.callrow,.hero__foot,.band--coral .cta__dial,.qa.is-open{
  --bg-band:var(--violet);--fg:var(--on-violet);--fg-h:#fff;--fg-muted:var(--on-violet-2);--link:var(--peach);--focus:#fff;
  --kick-fg:#fff;--kick-bg:rgba(23,10,54,.3);--kick-bd:rgba(255,255,255,.24);--bullet:var(--coral);--hl:var(--peach);
  --card:rgba(23,10,54,.34);--card-bd:rgba(255,255,255,.2);--tile-bg:var(--coral);--tile-fg:var(--on-coral);--num-bg:var(--coral);--num-fg:var(--on-coral);
  --chip-bg:rgba(23,10,54,.3);--chip-bd:rgba(255,255,255,.26);--chip-ic:var(--peach);
  --call-bg:var(--coral);--call-fg:var(--on-coral);--call-hov:var(--coral-hi);--call-sh:rgba(23,10,54,.4);--rule:rgba(255,255,255,.24);--mark:rgba(23,10,54,.4)
}
/* INDIGO — the footer only */
.foot{
  --bg-band:var(--violet-900);--fg:#d9c8ff;--fg-h:#fff;--fg-muted:#d9c8ff;--link:#fff;--focus:#fff;
  --kick-fg:#fff;--bullet:var(--coral);--card:rgba(255,255,255,.06);--card-bd:rgba(255,255,255,.14);--rule:rgba(255,255,255,.16)
}
/* the „Sockel“ — the solid under-edge of raised surfaces, chosen by the BAND they stand on */
/* --ring-out: the colour of a focus ring drawn OUTSIDE a white surface (service cards, rows) — i.e. on the BAND, so it is
   chosen by the band and is not reset by the card's own light scope (violet on white/mist, indigo on coral, white on violet) */
:root,.band--white,.band--mist{--rail:var(--line);--bk-bg:var(--coral);--bk-fg:var(--on-coral);--ring-out:var(--violet)}
.band--coral,.legal-hero{--rail:var(--violet-900);--bk-bg:var(--violet);--bk-fg:#fff;--ring-out:var(--violet-900)}
.band--violet{--rail:var(--coral);--bk-bg:var(--coral);--bk-fg:var(--on-coral);--ring-out:#fff}
.qa.is-open{background:var(--violet)}
.band--violet .qa.is-open{background:var(--violet-900)}

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

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

/* ------------------------------------- the squircle (shared tile shape) -- */
.telbig__ic,.trustbar__ic,.ci__ic,.card__ic,.card__bk,.card__bigic,.card__num,.promise__ic,.step__n,.row__n,.tile__ic,.factor__ic,.notice__ic,.asks__n,.qa__ic,.foot__telic,.hero__badge-ic,.ersteps__n,.portrait__badge,.hero__foot .hq .ic,.ticks .ic,.sub__grid .ic,.drawer__sub a .ic,.hazard__steps li::before{display:grid;place-items:center;flex:none;border-radius:var(--sq)}

/* ------------------------------------------------- the breakout (tongue) --
   A flame tongue in the colour of its container, rising out of the container's top edge (bottom:100%). */
.band+.band::before,.hero__frame::before,.hero__foot::before,.hero__fig::before,.hero__dial::before,.callrow::before,.cta__dial::before,.phoneband::before,.fig--flame::before,.foot::before{
  content:"";position:absolute;z-index:2;bottom:100%;margin-bottom:-1px;width:var(--tw,64px);height:var(--th,50px);pointer-events:none;
  background:var(--tg,var(--bg-band));transform-origin:50% 100%;
  -webkit-mask:var(--m-tongue) 50% 100%/100% 100% no-repeat;mask:var(--m-tongue) 50% 100%/100% 100% no-repeat
}
/* a seam tongue pokes out of the band BELOW into the band above — left on odd seams, right on even ones (zig-zag) */
.band+.band::before{left:max(var(--gut),calc(50% - var(--wrap)/2 + var(--gut)))}
.band+.band:nth-of-type(even)::before{left:auto;right:max(var(--gut),calc(50% - var(--wrap)/2 + var(--gut)))}
:is(.band+.band:has(>.wrap>.head--center:first-child))::before,.band+.band--chips::before,.band+.band--cta::before{left:calc(50% - 28px);right:auto}
.band--hasfoot+.band::before,.band--noedge::before,.band--flush-top::before{display:none}
/* no seam tongue where it would be a ghost or a stack: light on light (1.1 : 1), or a band that opens with a panel that carries its own tongue */
.band--white+.band--mist::before,.band--mist+.band--white::before,
:is(.band+.band:has(>.wrap>.callrow:first-child))::before,:is(.band+.band:has(>.wrap>.phoneband:first-child))::before{display:none}
@keyframes ignite{from{transform:scaleY(.15)}to{transform:none}}

/* ------------------------------------------------------------------ bands */
.band{position:relative;padding:clamp(60px,7vw,88px) 0;background-color:var(--bg-band);color:var(--fg);isolation:isolate}
.band--tight{padding:clamp(40px,4.8vw,58px) 0}
.band--tall{padding:clamp(76px,8.6vw,116px) 0}
.band--flush-top{padding-top:0}
.band--hero{padding:clamp(48px,5.2vw,74px) 0 clamp(60px,6.2vw,86px)}
.band--rule{border-top:1px solid var(--line)}
.band--coral.band--rule,.band--violet.band--rule{border-top:0}

/* ------------------------------------------------------------ eyebrow/head */
/* small caps labels: 13.6 px minimum (older callers) — the letter-spacing keeps the look */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 .85rem/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--kick-fg);background:var(--kick-bg);border:1px solid var(--kick-bd);padding:7px 14px 7px 12px;border-radius:var(--r-xs);margin-bottom:16px;max-width:100%;text-wrap:balance}
.eyebrow::before,.topbar__drop,.nav__phone span::before,.hero__dial-k::before,.phoneband__k::before,.factsheet__t::before,.cta__k::before{content:"";width:9px;height:11px;flex:none;background:var(--bullet);-webkit-mask:var(--m-flame) center/contain no-repeat;mask:var(--m-flame) center/contain no-repeat}
.head{max-width:780px;margin:0 0 clamp(30px,3.8vw,46px)}
.head--center{margin-left:auto;margin-right:auto;text-align:center}
.head--center .lead{margin-left:auto;margin-right:auto}
.head--wide{max-width:980px}
.head--narrow{max-width:640px}
.head .stitle{margin-bottom:.3em}
.head .lead{margin-top:0;margin-bottom:0}
.head--rule{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(20px,4vw,56px);align-items:end;max-width:none;padding-bottom:clamp(20px,2.6vw,28px);border-bottom:2px solid var(--rule)}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 24px;border-radius:var(--r-btn);border:2px solid transparent;
  font:700 1rem/1.2 var(--sans);text-decoration:none;cursor:pointer;transition:transform .14s var(--ease),box-shadow .18s,background-color .18s,color .18s,border-color .18s}
.btn:hover{transform:translateY(-2px);text-decoration:none}
.btn:active{transform:translateY(0)}
.btn .ic{width:19px;height:19px}
/* a wrapped label stays centred and balanced; its trailing arrow rides on the last word (skn_tail) */
.btn>span{text-wrap:balance}
.btn--lg>span,.btn:not(.btn--call)>span{text-align:center}
.tail{white-space:nowrap}
.tail .ic{display:inline-block;vertical-align:-.2em;margin-left:.42em}
.btn .tail .ic{margin-left:10px;vertical-align:-4px}
.btn--lg{min-height:58px;padding:15px 30px;font-size:1.06rem;border-radius:18px}
/* the phone pill is the strongest element: the band's call colour (indigo on coral, coral on violet, violet on light) with a Sockel */
.btn--accent{background:var(--call-bg);color:var(--call-fg);box-shadow:0 5px 0 var(--call-sh)}
.btn--accent:hover{background:var(--call-hov);color:var(--call-fg)}
.btn--violet{background:var(--violet);color:#fff;box-shadow:0 5px 0 rgba(90,31,203,.34)}
.btn--violet:hover{background:var(--violet-700);color:#fff}
.btn--coral{background:var(--coral);color:var(--on-coral);box-shadow:0 5px 0 rgba(23,10,54,.4)}
.btn--coral:hover{background:var(--coral-hi);color:var(--on-coral)}
.btn--white{background:#fff;color:var(--violet-700);box-shadow:0 5px 0 rgba(23,10,54,.3)}
.btn--white:hover{background:var(--mist);color:var(--violet-700)}
.btn--outline-dark{background:transparent;border-color:var(--fg-h);color:var(--fg-h)}
.btn--outline-dark:hover{background:var(--fg-h);color:var(--bg-band)}
.btn--outline-light{background:transparent;border-color:rgba(255,255,255,.8);color:#fff}
.btn--outline-light:hover{background:#fff;color:var(--violet-700)}
.btn--text{min-height:44px;padding:8px 2px;border:0;border-radius:0;color:var(--link);background:none;box-shadow:none;text-decoration:underline}
.telbig{display:inline-flex;align-items:center;gap:14px;font:900 clamp(26px,3.2vw,38px)/1.1 var(--sans);letter-spacing:-.015em;color:var(--fg-h);text-decoration:none;white-space:nowrap;min-height:48px}
.telbig__ic{width:54px;height:54px;background:var(--num-bg);color:var(--num-fg);transition:transform .2s var(--ease)}
.telbig__ic .ic{width:26px;height:26px}
.telbig--light .telbig__ic{background:var(--coral);color:var(--on-coral)}
.telbig--dark .telbig__ic{background:var(--violet);color:#fff}
.telbig:hover .telbig__n{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.16em}
.telbig:hover .telbig__ic{transform:rotate(-8deg)}
/* inside a panel the big number is sized from the PANEL (container query), so it never crosses the edge —
   not at 320 px, not at a 305 px layout (400 % zoom). 7.9 em ≈ the number's width (measured 7.44 em) + margin;
   --tb-room = icon + gap; --tb-max = the design size. */
.hero__dial,.cta__dial,.phoneband__num,.phonebox__top,.callrow,.foot__dial{container-type:inline-size;--tb-max:clamp(26px,3.2vw,38px);--tb-room:70px}
.hero__dial{--tb-max:clamp(27px,3.4vw,40px)}
.cta__dial{--tb-max:clamp(28px,3vw,40px)}
.phoneband__num{--tb-max:clamp(30px,4.2vw,50px);--tb-room:80px}
:is(.hero__dial,.cta__dial,.phoneband__num,.phonebox__top,.callrow) .telbig{font-size:max(19px,min(var(--tb-max),calc((100cqi - var(--tb-room)) / 7.9)))}

/* ------------------------------------------------------------ header/top */
.site-top{position:sticky;top:calc(var(--topbar-h) * -1);z-index:100}
.admin-bar .site-top{top:calc(32px - var(--topbar-h))}
.topbar{background:var(--coral);color:var(--on-coral);font-size:.9rem;height:var(--topbar-h);overflow:hidden}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:100%}
.topbar p{margin:0;white-space:nowrap;display:flex;align-items:center;gap:9px}
.topbar__l{min-width:0;overflow:hidden;text-overflow:ellipsis}
.topbar__r{flex:none}
/* the phone link is a full 44 px target (validator A11) with its focus ring drawn inside */
.topbar a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;margin:0 -6px;color:var(--on-coral);font-weight:900;text-decoration:underline;text-decoration-thickness:1.5px}
.topbar a:hover{text-decoration-thickness:3px}
.topbar a:focus-visible{outline-offset:-3px}
.topbar__short{display:none}
/* separator dot drawn in CSS: the flex gap on its left, the same 9 px on its right */
.topbar__x::before{content:"";display:inline-block;width:4px;height:4px;margin:0 9px 0 0;border-radius:50%;background:currentColor;vertical-align:middle}
.masthead{position:relative;background:#fff;transition:box-shadow .2s}
/* the duo seam: coral | violet, the two blocks of the page in one line */
/* a 1 px indigo hairline closes it, so on a coral or violet hero the seam reads as a drawn device, not a stray bar */
.masthead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:linear-gradient(90deg,var(--coral) 0 62%,var(--violet) 62% 100%);box-shadow:0 1px 0 var(--violet-900)}
.is-scrolled .masthead{box-shadow:0 8px 24px rgba(23,10,54,.14)}
.nav{display:flex;align-items:center;gap:18px;height:80px;padding-bottom:5px;transition:height .2s var(--ease)}
.is-scrolled .nav{height:70px}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;color:var(--violet-700);flex:none}
.brand__mk{display:block;flex:none}
.brand__mk svg{width:46px;height:46px}
.brand__t{display:flex;flex-direction:column}
.brand__n{font:900 1.42rem/1 var(--sans);letter-spacing:-.025em;color:var(--violet-700)}
.brand__s{font:700 .8rem/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--coral-700);margin-top:5px;white-space:nowrap}
.brand:hover .brand__n{color:var(--violet)}
.menu{display:flex;align-items:center;gap:2px;margin:0 0 0 14px;list-style:none}
.menu>li{position:relative;display:flex;align-items:center}
.menu>li>a{display:flex;align-items:center;white-space:nowrap;min-height:46px;padding:9px 13px;border-radius:14px;font-weight:600;font-size:.97rem;color:var(--violet-700);text-decoration:none;transition:background-color .15s,color .15s,box-shadow .15s}
.menu>li>a:hover{background:var(--mist)}
.menu>li.is-current>a{font-weight:700;background:var(--mist);box-shadow:inset 0 -3px 0 var(--coral)}
.menu__tg{display:grid;place-items:center;width:44px;height:46px;margin-left:-12px;border:0;background:none;color:var(--muted);cursor:pointer;border-radius:12px}
.no-js .menu__tg{display:none}
.menu__tg .ic{width:15px;height:15px;transition:transform .2s}
.menu>li.open .menu__tg .ic{transform:rotate(180deg)}
.sub{position:absolute;top:calc(100% + 18px);left:-14px;width:600px;background:#fff;border:2px solid var(--violet);border-radius:var(--r);
  box-shadow:0 6px 0 var(--mist-2),var(--sh-lg);padding:16px 14px 12px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s var(--ease),visibility .18s;z-index:50}
.sub::before{content:"";position:absolute;left:0;right:0;top:-26px;height:24px}
.menu>li:hover>.sub,.menu>li:focus-within>.sub,.menu>li.open>.sub{opacity:1;visibility:visible;transform:none}
.menu>li.is-dismissed>.sub,.menu>li.is-dismissed:hover>.sub{opacity:0;visibility:hidden}
.sub__k{font:700 .84rem/1.2 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--coral-700);margin:0 8px 8px}
.sub__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 8px}
.sub a{display:flex;align-items:center;gap:11px;min-height:46px;padding:7px 9px;border-radius:14px;color:var(--violet-700);text-decoration:none;font-weight:600;font-size:.95rem}
.sub a:hover{background:var(--mist)}
.sub a[aria-current]{font-weight:700}
.sub__grid .ic{width:32px;height:32px;padding:7px;background:var(--coral);color:var(--on-coral)}
.sub__all{display:flex;justify-content:space-between;gap:10px;margin-top:8px;border-top:1px solid var(--line);padding-top:8px}
.sub__all a{color:var(--coral-700);font-weight:700}
.sub__all .ic{width:18px;height:18px}
.sub .sub__tel{color:var(--violet-700);font-weight:900}
.nav__right{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav__phone{display:flex;flex-direction:column;justify-content:center;min-height:44px;text-align:right;line-height:1.12;text-decoration:none;color:var(--violet-700)}
.nav__phone b{font:900 1.1rem/1.1 var(--sans);color:var(--violet-700)}
.nav__phone span{display:inline-flex;align-items:center;justify-content:flex-end;gap:7px;font:700 .85rem/1.2 var(--sans);color:var(--coral-700);margin-top:4px}
.nav__phone:hover b{text-decoration:underline}
.nav__call{min-height:48px;white-space:nowrap}
.burger{display:none;width:48px;height:48px;border:2px solid var(--line);border-radius:var(--r-btn);background:#fff;color:var(--violet-700);cursor:pointer;place-items:center}
.burger .ic{width:24px;height:24px}

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

/* ------------------------------------------------------------------ crumbs */
.crumbs{margin:0 0 10px;font-size:.9rem}
.crumbs ol{display:flex;flex-wrap:wrap;gap:0;list-style:none}
.crumbs li{display:flex;align-items:center;color:var(--fg-muted)}
.crumbs li+li::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;margin:0 11px;opacity:.8}
.crumbs a{color:var(--fg-h);font-weight:700;min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-decoration-thickness:1px}
.crumbs a:hover{text-decoration-thickness:2.5px}
.crumbs [aria-current]{font-weight:600}

/* -------------------------------------------------------------------- hero */
.hero .display{margin:0 0 .32em}
.hero .lead{margin:0 0 28px;color:var(--fg)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero__note{display:flex;gap:9px;align-items:flex-start;margin:20px 0 0;font-size:.95rem;font-weight:600;max-width:56ch;color:var(--fg)}
.hero__note .ic{width:20px;height:20px;margin-top:2px;color:var(--chip-ic)}
.hq{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hq li{display:flex;align-items:center;gap:9px;padding:9px 15px 9px 11px;border-radius:var(--r-btn);background:var(--chip-bg);border:1px solid var(--chip-bd);font-weight:700;font-size:.92rem;line-height:1.3;color:var(--fg-h)}
.hq .ic{width:20px;height:20px;color:var(--chip-ic)}
/* block + violet — copy beside an oversize SQUIRCLE FRAME: the favicon's tile (violet on a coral block, coral on a violet block)
   with a flame tongue breaking out of its top edge and a white badge hanging from its bottom edge; the quick facts close the band */
.hero--block{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,4.6vw,64px);align-items:center}
.hero--block.hero--rev{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.hero--block.hero--nomedia{grid-template-columns:minmax(0,1fr);max-width:820px}
.hero--rev>.hero__media{order:-1}
.hero__media{position:relative;padding:50px 0 40px}
.hero__frame{--tg:var(--violet);--fp:clamp(12px,1.4vw,16px);position:relative;background:var(--tg);padding:var(--fp);border-radius:var(--r-lg);box-shadow:0 8px 0 var(--violet-900),var(--sh-lg);--tw:76px;--th:68px}
.hero__frame::before{right:14%;animation:ignite .9s var(--ease) .25s both}
.hero__pic{overflow:hidden;border-radius:calc(var(--r-lg) - var(--fp));background:var(--mist)}
.hero__pic .illu{width:100%;aspect-ratio:4/3;object-fit:cover}
.band--violet .hero__frame{--tg:var(--coral);box-shadow:0 8px 0 var(--violet-900),var(--sh-lg)}
.band--herozone{overflow-x:clip}
/* safety net: any band that holds a frame clips sideways overflow, even one built without skn_hero() */
.band:has(.hero__frame){overflow-x:clip}
/* the foot strip: the quick facts close the hero band (violet on coral, coral on violet; white when the next
   band has the strip's colour, so two equal blocks never touch). A tongue rises out of its top edge into the hero. */
.band.band--hasfoot{padding-bottom:0}
.hero__foot{position:relative;margin-top:clamp(64px,6.6vw,92px);background-color:var(--bg-band);color:var(--fg);--tw:48px;--th:38px}
.hero__foot::before{left:max(var(--gut),calc(50% - var(--wrap)/2 + var(--gut)))}
.band--coral.band--hasfoot:has(+.band--violet) .hero__foot,.band--violet.band--hasfoot:has(+.band--coral) .hero__foot{border-bottom:1px solid var(--line)}
.hero__foot .hq{margin:0;padding:18px 0;gap:10px 36px}
.hero__foot .hq li{padding:0;background:none;border:0;border-radius:0;font-size:.97rem;color:var(--fg-h)}
.hero__foot .hq .ic{width:38px;height:38px;padding:9px;background:var(--tile-bg);color:var(--tile-fg)}
/* balanced strips (foot strip + trustbar): the column count follows the item count, so a row never ends in a
   lone item — 2 → 2, 3 → 3, 4 → 4 (2 × 2 up to 1100 px), 5 → 5 (3 + 2 up to 1100 px); ≤ 560 px: 1–3 items
   stack, 4 items 2 × 2 (responsive block at the end) */
.hero__foot .hq,.trustbar ul{display:grid;grid-template-columns:repeat(var(--sn,3),auto);justify-content:start}
/* wide screens: the facts of a foot strip spread over the whole band instead of crowding its left 60 % */
@media (min-width:1101px){.hero__foot .hq{justify-content:space-between}}
:is(.hero__foot .hq,.trustbar ul):not(:has(>li:nth-child(3))){--sn:2}
:is(.hero__foot .hq,.trustbar ul):has(>li:nth-child(4)){--sn:4}
:is(.hero__foot .hq,.trustbar ul):has(>li:nth-child(5)){--sn:5}
.hero__badge{position:absolute;left:22px;bottom:0;max-width:min(340px,calc(100% - 44px));display:flex;align-items:center;gap:13px;padding:14px 18px 14px 14px;border-radius:var(--r);background:#fff;color:var(--fg);box-shadow:0 5px 0 var(--mist-2),var(--sh-lg)}
.hero--rev .hero__badge{left:auto;right:22px}
.hero__badge-ic{width:46px;height:46px;background:var(--coral);color:var(--on-coral)}
.hero__badge-ic .ic{width:23px;height:23px}
.hero__badge b{display:block;font-size:1.02rem;line-height:1.25;color:var(--fg-h)}
.hero__badge small{display:block;color:var(--fg-muted);font-size:.86rem;line-height:1.35;margin-top:2px}
/* split — light band: copy beside a framed figure with a violet caption tab */
.hero--split{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(30px,5vw,64px);align-items:center}
.hero--split.hero--rev{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
.hero--split.hero--rev>:last-child{order:-1}
.hero__fig{--tg:var(--violet);--tw:60px;--th:48px;margin:0;position:relative}
.hero__fig::before{right:14%}
.hero__fig-in{border-radius:var(--r-lg);overflow:hidden;background:var(--mist);border:3px solid var(--violet);box-shadow:0 8px 0 var(--mist-2),var(--sh)}
.hero__fig-in .illu{width:100%;aspect-ratio:4/3;object-fit:cover}
.hero__fig figcaption,.hero__strip figcaption{position:relative;display:table;margin:-26px 0 0 22px;padding:10px 16px;border-radius:var(--r-btn);background:var(--violet);color:#fff;font-size:.9rem;font-weight:700;line-height:1.35;max-width:calc(100% - 44px);box-shadow:var(--sh)}
/* column — centred copy, wide framed strip below */
.hero--column{text-align:center;max-width:920px;margin:0 auto}
.hero--column .crumbs ol,.hero--column .hero__cta,.hero--column .hq{justify-content:center}
.hero--column .lead{margin-left:auto;margin-right:auto}
.hero--column .hero__note{justify-content:center;margin-left:auto;margin-right:auto;text-align:left}
.hero--column .display{font-size:clamp(34px,5.2vw,60px)}
.hero__strip{margin:clamp(32px,4.4vw,52px) 0 0}
.hero__strip-in{display:flex;justify-content:center;padding:clamp(12px,2vw,22px);border-radius:var(--r-lg);box-shadow:0 8px 0 var(--mist-2),var(--sh-lg);background-color:#fff;background-image:radial-gradient(var(--mist-2) 2px,transparent 2.5px);background-size:22px 22px}
.hero__strip-pic{width:min(100%,calc(clamp(220px,30vw,380px) * 4 / 3));overflow:hidden;border-radius:var(--r);background:var(--mist)}
.hero__strip-pic .illu{width:100%;aspect-ratio:4/3;object-fit:cover}
/* panel — copy + aside */
.hero--panel{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,5vw,64px);align-items:center}
.hero__aside{position:relative;min-width:0}
/* emergency — violet block, big white dial card (a white tongue breaks out of its top edge — the favicon's flame on violet), the first steps */
.hero--emergency{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(26px,4vw,56px);align-items:center}
.hero--emergency .hero__copy .lead{margin:0}
.hero__dial{--tg:#fff;--tw:68px;--th:54px;position:relative;background:#fff;color:var(--fg);border-radius:var(--r-lg);padding:clamp(24px,3vw,34px);box-shadow:0 8px 0 var(--coral),var(--sh-lg)}
.hero__dial::before{right:12%}
.hero__dial-k{display:inline-flex;align-items:center;gap:10px;font:700 .85rem/1.2 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--coral-700);margin-bottom:14px}
.hero__dial .telbig{display:flex}
.hero__dial-n{margin:14px 0 18px;color:var(--muted);font-size:.97rem}
.hero__dial-btn{width:100%}
.ersteps{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:8px}
.ersteps li{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:var(--r);background:var(--card);border:1px solid var(--card-bd)}
.ersteps__n{width:44px;height:44px;background:var(--num-bg);color:var(--num-fg);font:900 1.1rem/1 var(--sans)}
.ersteps b{display:block;color:var(--fg-h);font:700 1.06rem/1.3 var(--sans);margin-bottom:4px}
.ersteps li>div>span{display:block;color:var(--fg-muted);font-size:.95rem;line-height:1.5}
.hero--emergency .hq{grid-column:1/-1;margin-top:0}

/* ---------------------------------------------------------------- trustbar */
.trustbar{background:#fff;border-bottom:1px solid var(--line)}
.trustbar ul{justify-content:center;gap:14px 36px;padding:20px 0;list-style:none}
.trustbar li{display:flex;align-items:center;gap:11px;font-weight:700;font-size:.96rem;color:var(--violet-700)}
.trustbar__ic{width:38px;height:38px;background:var(--coral);color:var(--on-coral)}
.trustbar__ic .ic{width:19px;height:19px}

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

/* figures + portrait — the frame owns its squircle shape (overflow clips the picture) */
.fig{margin:0;position:relative}
.fig__in{overflow:hidden;background:var(--mist);border-radius:var(--r-lg);box-shadow:0 7px 0 var(--rail),var(--sh)}
.fig__in .illu{width:100%;aspect-ratio:4/3;object-fit:cover}
.fig__in .illu--sq{aspect-ratio:1}
.fig--tilt .fig__in{transform:rotate(-1.6deg)}
.fig--round .fig__in{border-radius:50%;border:8px solid #fff;box-shadow:0 7px 0 var(--rail),var(--sh)}
.fig--round .illu{aspect-ratio:1}
.fig--flat .fig__in{box-shadow:none}
.fig--flame{--tg:var(--bk-bg);--tw:56px;--th:44px}
.fig--flame::before{right:16%}
.fig figcaption{margin-top:16px;font-size:.92rem;font-weight:700;color:var(--fg-muted);text-align:center}
.portrait{position:relative;width:min(390px,86%);margin:0 auto}
.portrait__ring{aspect-ratio:1;border-radius:50%;border:9px solid var(--coral);overflow:hidden;background:var(--mist);box-shadow:0 0 0 14px rgba(255,255,255,.1),var(--sh-lg)}
.portrait__ring .illu{width:100%;height:100%;object-fit:cover}

/* ------------------------------------------------------ illustration zoom --
   The art is full-bleed (no mat), so --z is 1; hover multiplies it. The square 'monteur' is zoomed into the circle
   (--z set per ring below, tuned to the drawing). */
:is(.hero__pic,.card__media,.gal__pic,.row__shot,.fig__in,.hero__fig-in,.hero__strip-pic,.portrait__ring) .illu{transform:scale(var(--z,1));transition:transform .55s var(--ease)}
:is(.portrait__ring,.fig--round .fig__in) .illu--sq{--z:1.32;transform-origin:50% 50%}
.portrait__badge{position:absolute;right:2%;bottom:6%;width:70px;height:70px;background:var(--coral);color:var(--on-coral);border:5px solid var(--bg-band);box-shadow:var(--sh)}
.portrait__badge .ic{width:28px;height:28px}
.band--coral .portrait__ring{border-color:var(--violet);box-shadow:0 0 0 14px rgba(255,255,255,.22),var(--sh-lg)}
.band--coral .portrait__badge{background:var(--violet);color:#fff}
.band--white .portrait__ring,.band--mist .portrait__ring{box-shadow:0 0 0 14px var(--mist-2),var(--sh)}
.pblock{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5.4vw,72px);align-items:center}
.pblock--rev{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.pblock--rev>.pblock__media{order:-1}
.pblock__copy .lead{margin-bottom:28px}
.pblock__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* -------------------------------------------------------------------- lede */
.lede{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(28px,4.6vw,56px);align-items:start}
.lede__cols{column-count:2;column-gap:clamp(24px,3vw,38px)}
.lede__cols p{margin:0 0 16px;break-inside:avoid}
.lede__cols p:first-child{font-size:1.08em;color:var(--fg-h);font-weight:600}
.lede__aside{position:sticky;top:110px}
.pull{margin:0;padding:26px 28px;border-radius:var(--r);background:var(--card);border:2px solid var(--bullet);box-shadow:0 6px 0 var(--bullet);font:700 clamp(19px,1.9vw,23px)/1.4 var(--sans);color:var(--fg-h)}
.pull p{margin:0}
.pull cite{display:block;font:600 .88rem/1.4 var(--sans);font-style:normal;color:var(--fg-muted);margin-top:12px}
.pull--center{max-width:840px;margin:0 auto;text-align:center;padding:30px 32px}

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

/* ----------------------------------------------------------------- gallery */
.gal{display:grid;gap:20px;grid-auto-flow:dense}
.gal--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.gal--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gal figure{margin:0;display:flex;flex-direction:column;background:#fff;padding:8px 8px 0;border-radius:var(--r);box-shadow:0 6px 0 var(--rail),var(--sh-sm);transition:transform .25s var(--ease),box-shadow .25s}
.gal figure:hover{transform:translateY(-4px);box-shadow:0 10px 0 var(--rail),var(--sh)}
.gal__pic{position:relative;border-radius:calc(var(--r) - 8px);overflow:hidden;background:var(--mist)}
.gal__pic .illu{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s var(--ease)}
.gal figure:hover .illu{transform:scale(calc(var(--z,1) * 1.05))}
.gal figcaption{padding:12px 8px 14px;font-size:.9rem;color:var(--muted);line-height:1.42}
.gal figcaption b{display:block;color:var(--violet-700);font-size:1rem;font-weight:700;margin-bottom:1px}
.gal figcaption span{display:block}
.gal>.gal--wide{grid-column:span 2}
.gal>.gal--wide .illu{aspect-ratio:2/1}
.gal>.gal--big{grid-column:span 2;grid-row:span 2}
.gal>.gal--tall{grid-row:span 2}
.gal>:is(.gal--big,.gal--tall) .gal__pic{flex:1;min-height:200px}
.gal>:is(.gal--big,.gal--tall) .illu{position:absolute;inset:0;height:100%;aspect-ratio:auto}

/* ----------------------------------------------------------------- callrow */
.callrow{--tg:var(--violet);--tw:52px;--th:40px;position:relative;background-color:var(--violet);color:var(--fg);border-radius:var(--r-lg);padding:clamp(24px,3.2vw,36px) clamp(22px,3.6vw,44px);display:flex;justify-content:space-between;align-items:center;gap:20px 30px;flex-wrap:wrap;box-shadow:0 7px 0 var(--violet-900),var(--sh)}
.callrow::before{right:clamp(26px,4vw,52px)}
.callrow p.callrow__t{font:900 clamp(1.3rem,2.2vw,1.7rem)/1.2 var(--sans);color:#fff;margin:0 0 4px}
.callrow p{margin:0;color:var(--fg-muted);max-width:56ch}
.callrow .telbig{color:#fff}
.band--violet .callrow{background-color:var(--violet-900);box-shadow:0 7px 0 var(--coral),var(--sh);--tg:var(--violet-900)}

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

/* ------------------------------------------------------------------- cards
   White squircle cards on a „Sockel“; the icon tile of a photo card breaks out over its top edge. */
.cards{display:grid;gap:24px}
.cards--photo{row-gap:48px}
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{position:relative;background:#fff;color:var(--fg);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;box-shadow:0 6px 0 var(--rail),var(--sh-sm);
  transition:transform .22s var(--ease),box-shadow .22s}
.band--coral .card,.band--violet .card{border-color:transparent}
.card--link:hover{transform:translateY(-6px);box-shadow:0 12px 0 var(--rail),var(--sh-lg)}
.card__body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.card__media{background:var(--mist);aspect-ratio:16/10;overflow:hidden;border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0}
.card__media .illu{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.card--link:hover .card__media .illu{transform:scale(calc(var(--z,1) * 1.05))}
.card__media--ic{display:grid;place-items:center;background-color:var(--mist)}
.card__bigic{width:78px;height:78px;background:var(--coral);color:var(--on-coral);box-shadow:var(--sh)}
.card__bigic .ic{width:36px;height:36px}
.card__bk{position:absolute;z-index:2;top:-26px;right:20px;width:52px;height:52px;background:var(--bk-bg);color:var(--bk-fg);box-shadow:var(--sh)}
.card__bk .ic{width:25px;height:25px}
.card__ic{width:52px;height:52px;background:var(--tile-bg);color:var(--tile-fg);margin-bottom:16px}
.card__ic .ic{width:25px;height:25px}
.card__num{width:48px;height:48px;background:var(--num-bg);color:var(--num-fg);font:900 1.12rem/1 var(--sans);margin-bottom:16px}
.card__t{font-size:1.2rem;margin:0 0 6px}
/* title device: a short coral rule under the title */
.cards--photo .card__t{position:relative;padding-bottom:16px;margin-bottom:12px}
.cards--photo .card__t::after{content:"";position:absolute;left:0;bottom:3px;width:44px;height:4px;border-radius:4px;background:var(--coral)}
.card p{color:var(--fg-muted);font-size:.97rem;margin:0;line-height:1.56}
.card__a{color:inherit;text-decoration:none}
.card__a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--r)}
.card__a:focus-visible{outline:none}
/* the card is a white surface (light token scope), but its ring is drawn on the BAND: --ring-out comes from the band
   (violet on white/mist, indigo on coral, white on violet) and the offset clears the 6 px Sockel (12 px when lifted) */
.card--link:focus-within{outline:3px solid var(--ring-out);outline-offset:12px}
.card__more{margin-top:auto;padding-top:16px;display:block;font-weight:700;font-size:.93rem;color:var(--fg-h)}
.card__more .ic{width:17px;height:17px;color:var(--hl);transition:transform .16s var(--ease)}
.card--link:hover .card__more .ic{transform:translateX(4px)}
.cards--line .card{border-top:6px solid var(--coral)}
.band--coral .cards--line .card{border-top-color:var(--violet)}
/* plain = no surface: the card takes the BAND's colours (it is in the light scope list as a .card) */
.cards--plain .card{background:transparent;border:0;box-shadow:none;--fg:inherit;--fg-h:inherit;--fg-muted:inherit;--link:inherit;--focus:inherit;--bullet:inherit;--hl:inherit;--tile-bg:inherit;--tile-fg:inherit;--num-bg:inherit;--num-fg:inherit}
.cards--plain .card__body{padding:0}
.cards--plain .card p{color:inherit}

/* --------------------------------------------------------------- promises */
.promises{display:grid;gap:48px 24px}
.promises--2{grid-template-columns:repeat(2,minmax(0,1fr))}.promises--3{grid-template-columns:repeat(3,minmax(0,1fr))}.promises--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.promise{position:relative;display:flex;flex-direction:column;background:#fff;color:var(--fg);border-radius:var(--r);padding:36px 26px 22px;box-shadow:0 6px 0 var(--rail),var(--sh);transition:transform .22s var(--ease),box-shadow .22s}
.promise:hover{transform:translateY(-4px);box-shadow:0 10px 0 var(--rail),var(--sh-lg)}
.promise__top{display:flex;align-items:center;justify-content:flex-end;margin-bottom:14px}
.promise__ic{position:absolute;top:-26px;left:24px;width:54px;height:54px;background:var(--bk-bg);color:var(--bk-fg);box-shadow:var(--sh)}
.promise__ic .ic{width:26px;height:26px}
.promise__n{font:900 2.5rem/1 var(--sans);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.6px var(--coral)}
.promise__t{font-size:1.2rem;margin:0 0 8px;color:var(--fg-h)}
.promise p{margin:0;color:var(--fg)}
.promise p.promise__foot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:18px;font-size:.88rem;font-weight:700;color:var(--coral-700)}
.promise__foot .ic{width:17px;height:17px}
.promise>p:not(.promise__foot){margin-bottom:18px}

/* ------------------------------------------------------------------- steps
   „boxes“: white/dark squircle steps, the number tile breaks out over each card's top edge and a dashed line
   runs from tile to tile (one-row layouts) */
.steps{display:grid;gap:20px}
.steps--boxes{row-gap:46px}
.steps--c2{grid-template-columns:repeat(2,minmax(0,1fr))}.steps--c3{grid-template-columns:repeat(3,minmax(0,1fr))}.steps--c4{grid-template-columns:repeat(4,minmax(0,1fr))}.steps--c5{grid-template-columns:repeat(5,minmax(0,1fr))}
.step{position:relative;padding:24px 22px 22px;background:var(--card);border:1px solid var(--card-bd);border-radius:var(--r)}
.band--white .step,.band--mist .step,.band--coral .step{box-shadow:0 5px 0 var(--rail),var(--sh-sm)}
.step__n{width:52px;height:52px;background:var(--num-bg);color:var(--num-fg);font:900 1.25rem/1 var(--sans);margin:0 0 16px}
.steps--boxes .step{padding-top:38px}
.steps--boxes .step__n{position:absolute;z-index:2;top:-26px;left:22px;margin:0;box-shadow:var(--sh-sm)}
.step__t{font-size:1.1rem;margin:0 0 6px}
.step p{margin:0;color:var(--fg-muted);font-size:.96rem;line-height:1.56}
.steps--rail .step:not(:last-child)::after{content:"";position:absolute;right:-17px;top:42px;width:12px;height:12px;border-top:3px solid var(--bullet);border-right:3px solid var(--bullet);transform:rotate(45deg);z-index:2}
.steps--line .step{background:none;border:0;border-top:4px solid var(--bullet);border-radius:0;padding:22px 0 0;box-shadow:none}
.steps.steps--vertical{grid-template-columns:minmax(0,1fr);gap:12px}
.steps--vertical .step{display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;align-items:start;padding:18px 22px}
.steps--vertical .step__n{margin:0}
@media (min-width:1061px){
  .steps--boxes .step:not(:last-child)::after{content:"";position:absolute;z-index:1;left:84px;right:-37px;top:-2px;border-top:3px dashed var(--bullet)}
}

/* --------------------------------------------------------------- phoneband */
.phoneband{--tg:var(--mist);--tw:64px;--th:50px;position:relative;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(26px,4.4vw,56px);align-items:center;background:var(--mist);border:2px solid var(--mist-2);border-radius:var(--r-lg);padding:clamp(24px,4.4vw,52px);box-shadow:0 8px 0 var(--mist-2)}
/* a light tongue on a light band is only 1.1 : 1 — so it is drawn as two layers: a --mist-2 tongue 2 px larger behind
   (the panel's own border colour) and the panel-coloured tongue on top, i.e. the border runs round the flame */
.phoneband::before,.phoneband::after{right:clamp(32px,7vw,96px)}
.phoneband::before{--tg:var(--mist-2);--tw:68px;--th:52px;margin-right:-2px}
.phoneband::after{content:"";position:absolute;z-index:3;bottom:100%;margin-bottom:-1px;width:64px;height:50px;pointer-events:none;background:var(--mist);-webkit-mask:var(--m-tongue) 50% 100%/100% 100% no-repeat;mask:var(--m-tongue) 50% 100%/100% 100% no-repeat}
.band--mist .phoneband{background:#fff}
.band--mist .phoneband::after{background:#fff}
.phoneband--solo{grid-template-columns:minmax(0,1fr)}
.phoneband .stitle{margin-bottom:.3em}
.phoneband .lead{margin:0;color:var(--fg)}
.phoneband__num{margin:24px 0 20px}
.phoneband__num .telbig{gap:16px}
.phoneband__num .telbig__ic{width:62px;height:62px}
.phoneband__note{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;font-size:.95rem;font-weight:600}
.phoneband__note .ic{width:20px;height:20px;margin-top:2px;color:var(--coral-700)}
.phoneband__asks{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.8vw,30px);box-shadow:var(--sh-sm)}
.phoneband__k{display:flex;align-items:center;gap:10px;font:700 .85rem/1.2 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--coral-700);margin:0 0 8px}
.asks li{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line)}
.asks li:last-child{border-bottom:0;padding-bottom:0}
.asks__n{width:38px;height:38px;background:var(--violet);color:#fff;font:900 .98rem/1 var(--sans)}
.asks b{display:block;color:var(--violet-700);line-height:1.35}
.asks li>div>span{display:block;color:var(--muted);font-size:.95rem;line-height:1.5;margin-top:2px}

/* --------------------------------------------------------------------- faq
   Squircle rows; an OPEN answer turns into a violet colour block (indigo on a violet band) */
.faq{max-width:880px;margin:0 auto;display:grid;gap:12px}
.qa{background:#fff;color:var(--fg);border:2px solid var(--line);border-radius:var(--r);transition:border-color .2s,box-shadow .2s,background-color .2s}
.qa.is-open{border-color:transparent;box-shadow:0 6px 0 var(--coral)}
.qa__h{margin:0;font-size:inherit;font-weight:inherit;letter-spacing:0}
.qa__b{display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:16px 18px 16px 24px;background:none;border:0;border-radius:inherit;cursor:pointer;text-align:left;font:700 1.06rem/1.38 var(--sans);color:var(--fg-h)}
.qa__b:focus-visible{outline-offset:-5px}
.qa__b:hover .qa__q{text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:3px;text-underline-offset:.2em}
.qa__ic{width:38px;height:38px;background:var(--mist);color:var(--violet-700);transition:background-color .2s,color .2s}
.qa__ic .ic{width:19px;height:19px;transition:transform .25s var(--ease)}
.qa.is-open .qa__ic{background:var(--coral);color:var(--on-coral)}
.qa.is-open .qa__ic .ic{transform:rotate(45deg)}
.qa__a{padding:0 26px 24px 24px;color:var(--fg);max-width:78ch}
.qa__a:not([hidden]){animation:qa-in .28s var(--ease)}
.qa__a p{margin:0 0 .8em}.qa__a p:last-child{margin:0}
.no-js .qa__a[hidden]{display:block}
@keyframes qa-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------------ notice */
.notice{--ntc:var(--violet);display:flex;gap:16px;align-items:flex-start;padding:20px 24px;border-radius:var(--r);border:2px solid var(--ntc);max-width:920px;background:#fff;color:var(--fg);box-shadow:0 5px 0 var(--ntc)}
.notice--danger{--ntc:var(--danger);background:var(--danger-bg)}
.notice--ok{--ntc:var(--coral-700)}
.notice__ic{width:46px;height:46px;color:#fff;background:var(--ntc)}
.notice__ic .ic{width:22px;height:22px}
.notice__t{font:700 1.12rem/1.3 var(--sans);color:var(--fg-h);margin:7px 0 6px}
.notice--danger .notice__t{color:var(--danger)}
.notice__b p{margin:0 0 .6em}.notice__b p:last-child{margin:0}
.notice--center{margin-left:auto;margin-right:auto}
.hazard__steps{counter-reset:h;display:grid;grid-template-columns:minmax(0,1fr);gap:9px;margin:12px 0 14px}
.hazard__steps li{counter-increment:h;display:flex;gap:12px;align-items:flex-start;font-weight:600;min-width:0}
.hazard__steps li>span{min-width:0;overflow-wrap:break-word}
.hazard__steps li::before{content:counter(h);width:30px;height:30px;background:var(--danger);color:#fff;font-size:.92rem;font-weight:700}

/* ------------------------------------------------------------------- chips */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips--center{justify-content:center;max-width:1000px;margin-left:auto;margin-right:auto}
.chip{display:inline-flex;align-items:center;gap:8px;text-wrap:balance;min-height:46px;padding:10px 18px;border-radius:var(--r-btn);font-weight:700;font-size:.95rem;line-height:1.25;text-decoration:none;
  background:var(--chip-bg);border:2px solid var(--chip-bd);color:var(--fg-h);transition:background-color .16s,color .16s,border-color .16s,transform .16s var(--ease)}
.chip .ic{width:17px;height:17px;color:var(--chip-ic);transition:transform .16s var(--ease)}
a.chip:hover{background:var(--call-bg);border-color:var(--call-bg);color:var(--call-fg);transform:translateY(-2px)}
a.chip:hover .ic{color:inherit;transform:translateX(3px)}
.chip--static{cursor:default}
.chips--band{gap:12px}
.chips--band .chip{min-height:52px;padding:12px 22px;font-size:1rem}

/* --------------------------------------------------------------------- cta
   Centred head, then the „Wählleiste“ — ONE solid squircle bar (kicker | big number | call pill) with a flame tongue
   breaking out of its top edge: coral with ink on violet/white/mist bands, violet on a coral band — then the links. */
.cta{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.cta__copy{max-width:780px}
.cta .stitle{margin-bottom:.35em}
.cta .lead{margin:0 auto;color:var(--fg)}
.cta__dial{--tw:68px;--th:54px;position:relative;width:100%;max-width:1040px;margin-top:clamp(58px,5.6vw,70px);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 28px;padding:clamp(18px,2.2vw,26px) clamp(20px,2.8vw,34px);
  border-radius:var(--r-lg);background-color:var(--bg-band);color:var(--fg);box-shadow:0 8px 0 var(--violet-900),var(--sh-lg);text-align:left}
.cta__dial::before{left:clamp(24px,4vw,56px)}
.cta__k{display:inline-flex;align-items:center;gap:10px;max-width:19em;text-wrap:balance;font:700 .85rem/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--kick-fg)}
/* wide screens: the Wählleiste has room to spare, so a long kicker takes two lines instead of a tall three-line stack */
@media (min-width:1061px){.cta__k{max-width:26em}}
.cta__links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px;margin:28px 0 0;font-weight:700}
.cta__links a{display:inline-flex;align-items:center;min-height:44px}
/* the closing band clips the flame watermark sideways (overflow-x:clip keeps the seam tongue open at the top) */
.band--cta{overflow-x:clip}
.band--cta::after{content:"";position:absolute;z-index:-1;right:0;bottom:-60px;width:330px;height:410px;background:rgba(255,255,255,.07);-webkit-mask:var(--m-flame-tip) center/contain no-repeat;mask:var(--m-flame-tip) center/contain no-repeat;pointer-events:none}
.band--coral.band--cta::after{background:rgba(23,10,54,.08)}
.band--white.band--cta::after,.band--mist.band--cta::after{background:var(--mist-2)}

/* ---------------------------------------------------------------- phonebox */
.phonebox{background:#fff;color:var(--fg);border-radius:var(--r-lg);border:2px solid var(--line);box-shadow:0 8px 0 var(--rail),var(--sh-lg);overflow:hidden}
.phonebox__top{padding:clamp(22px,3vw,30px);border-top:8px solid var(--coral);border-bottom:1px solid var(--line)}
.phonebox p.phonebox__t{font:900 1.3rem/1.2 var(--sans);color:var(--fg-h);margin:0 0 6px}
.phonebox__top p{color:var(--fg-muted);margin:0 0 16px}
.phonebox__asks{padding:clamp(12px,2vw,18px) clamp(22px,3vw,30px);display:grid;background:var(--mist)}
.phonebox__asks li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line)}
.phonebox__asks li:last-child{border-bottom:0}
.phonebox__asks .ic{width:21px;height:21px;color:var(--coral-700);margin-top:3px}
.phonebox__asks b{display:block}
.phonebox__asks li>div>span{display:block;color:var(--fg-muted);font-size:.95rem}
.phonebox__note{display:flex;gap:10px;align-items:flex-start;margin:0;padding:15px clamp(22px,3vw,30px);font-size:.94rem;font-weight:600;background:#fff}
.phonebox__note .ic{width:20px;height:20px;color:var(--coral-700);margin-top:2px}

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

/* ------------------------------------------------------------------- stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin:0}
.stat{padding:22px 24px;border-radius:var(--r);background:var(--card);border:1px solid var(--card-bd);box-shadow:0 5px 0 var(--rail);display:flex;flex-direction:column-reverse;gap:8px}
.stat dd{margin:0;font:900 clamp(36px,3.8vw,48px)/1 var(--sans);letter-spacing:-.03em;color:var(--hl)}
.stat dt{font-size:.94rem;font-weight:700;color:var(--fg-muted);overflow-wrap:anywhere}

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

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

/* ---------------------------------------------------------------- timeline */
.timeline{position:relative;display:grid;gap:20px;max-width:880px}
.timeline::before{content:"";position:absolute;left:22px;top:24px;bottom:24px;width:4px;border-radius:4px;background:var(--rule)}
.timeline li{position:relative;padding-left:70px;min-height:46px}
.timeline li::before{content:"";position:absolute;left:0;top:0;width:46px;height:46px;border-radius:var(--sq);background:var(--num-bg);box-shadow:0 0 0 6px var(--bg-band)}
.timeline li::after{content:"";position:absolute;left:17px;top:14px;width:12px;height:16px;background:var(--num-fg);-webkit-mask:var(--m-flame) center/contain no-repeat;mask:var(--m-flame) center/contain no-repeat}
.timeline__k{display:block;font:700 .85rem/1.4 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--kick-fg);padding-top:2px}
.timeline__t{font-size:1.12rem;margin:2px 0 4px}
.timeline p{margin:0;color:var(--fg-muted)}

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

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

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

/* ------------------------------------------------------------------ footer
   Indigo; the coral „Wählkarte“ (the phone, strongest element) beside the brand text, two squircle panels below,
   a flame tongue rising out of the footer's top edge into the closing band. */
.foot{--tg:var(--violet-900);--tw:64px;--th:50px;position:relative;background:var(--violet-900);color:var(--fg);padding:clamp(58px,6.4vw,80px) 0 26px;font-size:.95rem}
.foot::before{right:max(var(--gut),calc(50% - var(--wrap)/2 + var(--gut)))}
.foot__top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(26px,4vw,56px);align-items:center;margin-bottom:clamp(30px,3.6vw,44px)}
.foot .brand{margin-bottom:16px}
.foot .brand__n{color:#fff}
.foot .brand__s{color:var(--peach)}
.foot__brandcol p{max-width:46ch;margin:0}
.foot__dial{--focus:var(--violet-900);background:var(--coral);color:var(--on-coral);border-radius:var(--r-lg);padding:clamp(20px,2.6vw,30px);box-shadow:0 7px 0 var(--violet),0 0 0 1px rgba(255,255,255,.04);--tb-max:clamp(26px,2.6vw,34px);--tb-room:70px}
.foot__dial-k{display:block;font:700 .85rem/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase;margin:0 0 10px;color:var(--on-coral)}
.foot__tel{display:flex;align-items:center;gap:14px;min-height:54px;font:900 clamp(22px,2.5vw,32px)/1.15 var(--sans);letter-spacing:-.01em;color:var(--on-coral);text-decoration:none;white-space:nowrap}
.foot__tel:hover span:last-child{text-decoration:underline;text-decoration-thickness:3px}
.foot__telic{width:50px;height:50px;background:var(--violet);color:#fff}
.foot__telic .ic{width:24px;height:24px}
.foot__note{margin:10px 0 0;font-size:.92rem;font-weight:600;color:var(--on-coral)}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(18px,2.4vw,28px)}
.foot__col{background:var(--card);border:1px solid var(--card-bd);border-radius:var(--r-lg);padding:clamp(22px,2.6vw,32px)}
.foot h2{font:700 1rem/1.3 var(--sans);color:#fff;margin:0 0 10px;letter-spacing:.01em}
.foot ul{list-style:none;display:grid;column-gap:24px}
.foot__col--svc ul{grid-template-columns:repeat(2,minmax(0,1fr))}
.foot__col--more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
.foot li a,.foot__col nav a{color:var(--link);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;min-width:44px;line-height:1.3}
.foot li a:hover{text-decoration:underline}
.foot__bar{margin-top:clamp(28px,3.4vw,40px);padding-top:20px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;font-size:.86rem}
.foot__bar p{margin:0}

/* ------------------------------------------------------- callbar + to-top */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:200;display:none;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:3px solid var(--coral);box-shadow:0 -8px 24px rgba(23,10,54,.18)}
.callbar .btn{width:100%;min-height:54px}
.drawer-open .callbar,.drawer-open .totop{display:none}
.totop{position:fixed;right:22px;bottom:24px;z-index:190;width:50px;height:50px;border:0;border-radius:var(--sq);background:var(--violet);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 5px 0 var(--violet-900),var(--sh);
  opacity:0;visibility:hidden;translate:0 14px;transition:opacity .25s,translate .25s var(--ease),visibility .25s,background-color .2s}
.totop .ic{width:22px;height:22px}
.totop.show{opacity:1;visibility:visible;translate:0 0}
.totop:hover{background:var(--coral);color:var(--on-coral)}
/* two-tone ring: white + indigo halo — visible over every band, coral included */
.totop:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 7px var(--violet-900),var(--sh)}

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

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

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

/* -------------------------------------------------------------- responsive */
@media (max-width:1200px){
  .menu{margin-left:6px}
  .menu>li>a{padding:8px 10px;font-size:.95rem}
  .nav__phone{display:none}
}
@media (max-width:1100px){
  :is(.hero__foot .hq,.trustbar ul):has(>li:nth-child(4)){--sn:2}
  :is(.hero__foot .hq,.trustbar ul):has(>li:nth-child(5)){--sn:3}
}
@media (max-width:1060px){
  .nav__main{display:none}
  .burger{display:grid}
  /* without JavaScript the burger is inert: show the main links as a wrapping row under the logo instead */
  .no-js .burger,.no-js .menu__tg,.no-js .sub{display:none}
  .no-js .nav{height:auto;flex-wrap:wrap;padding-block:8px 13px}
  .no-js .nav__main{display:block;order:3;flex:1 0 100%}
  .no-js .menu{flex-wrap:wrap;margin:0;gap:0 4px}
  .cards--4,.tiles--4,.factors--4,.promises--4,.steps--c4,.steps--c5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps--rail .step::after{display:none}
  .foot__top,.foot__grid{grid-template-columns:minmax(0,1fr)}
  .nav__phone{display:flex}
}
@media (max-width:980px){
  .split,.split--rev,.split--wide-l,.split--wide-r,.cols,.cols--wide-l,.cols--wide-r,.hero--panel,.hero--emergency,.hero--split,.hero--block,.hero--block.hero--rev,.hero--split.hero--rev,.cta,.lede,.head--rule,.pblock,.pblock--rev,.phoneband{grid-template-columns:minmax(0,1fr)}
  .split--rev>:last-child,.hero--split.hero--rev>:last-child,.hero--rev>.hero__media{order:0}
  .pblock--rev>.pblock__media,.pblock>.pblock__media{order:-1}
  /* a stacked split whose media is a single figure opens with the picture (like the portrait block), so a
     colour band never starts with a long run of copy; facts, notices and other media keep the copy-first order */
  .split>.split__media:has(>.fig:only-child){order:-1}
  .portrait{width:min(300px,76%)}
  .hero--split .hero__fig,.hero--block .hero__media{max-width:640px}
  .cards--3,.factors--3,.tiles--3,.promises--3,.steps--c3,.gal--4,.gal--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ersteps{grid-template-columns:minmax(0,1fr)}
  .checklist--2{grid-template-columns:minmax(0,1fr)}
  .lede__cols{column-count:1}
  .lede__aside{position:static}
  .row{grid-template-columns:52px minmax(0,1fr)}
  .row__shot{display:none}
  .nav__phone{display:none}
}
/* an odd LAST card in a two-column grid stands centred at half width instead of alone on a half-empty row
   (3 promises at 768 px, 5 steps, 7 services …). One block per breakpoint at which a grid drops to two columns. */
.cards,.promises{--cg:24px}.factors{--cg:22px}.tiles,.steps{--cg:20px}
@media (min-width:761px){
  :is(.cards--2,.tiles--2,.factors--2,.promises--2,.steps--c2):not(.steps--vertical)>:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - var(--cg)/2)}
}
@media (min-width:761px) and (max-width:980px){
  :is(.cards--3,.tiles--3,.factors--3,.promises--3,.steps--c3):not(.steps--vertical)>:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - var(--cg)/2)}
}
@media (min-width:761px) and (max-width:1060px){
  :is(.cards--4,.tiles--4,.factors--4,.promises--4,.steps--c4,.steps--c5):not(.steps--vertical)>:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - var(--cg)/2)}
}
@media (max-width:760px){
  html{scroll-padding-top:86px;scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  /* room for the fixed call bar sits INSIDE the indigo footer (bar height + the device's home-indicator inset),
     not as a white strip under it */
  .foot{padding-bottom:calc(108px + env(safe-area-inset-bottom,0px))}
  .topbar{font-size:.86rem}
  .topbar__long,.topbar__x,.topbar__rk{display:none}
  .topbar__short{display:inline}
  .callbar{display:block}
  .totop{bottom:98px;right:16px;width:46px;height:46px}
  .band{padding:clamp(52px,12vw,64px) 0}
  .band--hero{padding:34px 0 52px}
  .nav{height:70px;gap:10px}
  .is-scrolled .nav{height:66px}
  .brand__mk svg{width:42px;height:42px}
  .brand__n{font-size:1.26rem}
  .brand__s{letter-spacing:.16em}
  .nav__call{padding:10px 15px}
  .nav__call .nav__call-t{display:none}
  .cards--2,.cards--3,.cards--4,.factors--2,.factors--3,.factors--4,.tiles--2,.tiles--3,.tiles--4,.promises--2,.promises--3,.promises--4,.steps--c2,.steps--c3,.steps--c4,.steps--c5,.compare{grid-template-columns:minmax(0,1fr)}
  .gal>.gal--wide,.gal>.gal--big{grid-column:span 2}
  .gal>.gal--big,.gal>.gal--tall{grid-row:auto}
  .gal>:is(.gal--big,.gal--tall) .illu{position:static;aspect-ratio:4/3}
  .gal>.gal--big .illu,.gal>.gal--wide .illu{aspect-ratio:2/1}
  .gal{gap:14px}
  .gal figcaption{font-size:.86rem;padding:10px 6px 12px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .telbig__ic{width:48px;height:48px}
  .factsheet dl>div{grid-template-columns:minmax(0,1fr);gap:2px}
  .sub{display:none}
  /* the badge hangs from the frame's bottom edge instead of covering the picture */
  .hero__media,.hero--rev .hero__media{padding:44px 0 0}
  .hero__badge,.hero--rev .hero__badge{position:relative;left:auto;right:auto;bottom:auto;margin:-26px 14px 0;max-width:none}
  .hero__frame::before{--tw:60px;--th:54px}
  .hero__foot .hq{gap:10px 22px;padding:14px 0}
  .hero__foot .hq li{font-size:.92rem}
  .hero__foot .hq .ic{width:34px;height:34px;padding:8px}
  .trustbar ul{gap:12px 22px}
  .row{grid-template-columns:46px minmax(0,1fr);gap:14px;padding:16px}
  .row__n{width:44px;height:44px}
  .cta__dial{flex-direction:column;align-items:stretch}
  .cta__dial .btn{width:100%}
  .cta__k{max-width:none}
  /* photo cards become compact rows: a 4:3 thumbnail tile top left (it keeps its own ratio — never a tall slice
     beside long copy), copy right; the icon tile breaks out over the thumbnail's corner */
  .cards--photo{row-gap:34px}
  .cards--photo .card{display:grid;grid-template-columns:124px minmax(0,1fr);align-items:start}
  .cards--photo .card__media{aspect-ratio:4/3;height:auto;margin:16px 0 16px 16px;border-radius:var(--r-btn)}
  .cards--photo .card__body{padding:16px 18px 18px}
  .cards--photo .card__t{font-size:1.1rem}
  .cards--photo .card p{font-size:.93rem}
  .cards--photo .card__more{padding-top:12px}
  .cards--photo .card__bigic{width:56px;height:56px}
  .cards--photo .card__bigic .ic{width:28px;height:28px}
  .cards--photo .card__bk{width:42px;height:42px;top:-16px;left:6px;right:auto}
  .cards--photo .card__bk .ic{width:21px;height:21px}
  .head--rule{padding-bottom:16px}
  .steps{row-gap:20px}
  .steps:not(.steps--line) .step,.steps--boxes .step{display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;align-items:start;padding:18px}
  .steps:not(.steps--line) .step__n,.steps--boxes .step__n{position:static;margin:0;width:48px;height:48px;box-shadow:none}
  .promises{row-gap:44px}
  .foot__col--svc ul{column-gap:20px}
}
@media (max-width:560px){
  .hero__foot .hq,.trustbar ul{grid-template-columns:repeat(var(--sn),minmax(0,1fr));justify-content:stretch}
  :is(.hero__foot .hq,.trustbar ul):not(:has(>li:nth-child(4))){--sn:1}
  :is(.hero__foot .hq,.trustbar ul):has(>li:nth-child(4)){--sn:2}
  :is(.hero__foot .hq,.trustbar ul):has(>li:nth-child(5)){--sn:1}
  /* in the 2 × 2 grid the icon sits above its line, so a long word never runs out of a 130 px cell */
  :is(.hero__foot .hq,.trustbar ul):has(>li:nth-child(4)):not(:has(>li:nth-child(5)))>li{flex-direction:column;align-items:flex-start;gap:8px}
  :is(.hero__foot .hq,.trustbar ul)>li>span{min-width:0;overflow-wrap:break-word}
  .trustbar ul{padding:16px 0;gap:14px 18px}
  .trustbar li{font-size:.92rem;line-height:1.35}
  .trustbar__ic{width:34px;height:34px}
  .foot__col--more{grid-template-columns:minmax(0,1fr);row-gap:20px}
}
@media (max-width:440px){
  .nav{gap:8px}
  .brand{gap:9px}
  .nav__right{gap:8px}
  .btn--lg{padding:14px 20px;font-size:1rem}
  .hq li{font-size:.88rem}
  .qa__b{padding:14px 12px 14px 18px}
  .qa__a{padding:0 18px 18px}
  .telbig{font-size:clamp(23px,7.4vw,28px);gap:10px}
  :is(.hero__dial,.cta__dial,.phonebox__top,.callrow){--tb-max:clamp(23px,7.4vw,28px)}
  .phoneband__num{--tb-max:clamp(25px,8.2vw,32px)}
  .phoneband__num .telbig__ic{width:50px;height:50px}
  .notice{flex-direction:column;gap:10px;padding:18px 18px 18px 20px}
  .notice__t{margin-top:0}
  .card__body{padding:20px}
  .phoneband{padding:22px 18px}
  .chips--band{gap:10px}
  .chips--band .chip{min-height:44px;padding:9px 15px;font-size:.92rem}
  .foot__tel{font-size:clamp(20px,6.6vw,26px);gap:10px}
  .foot__telic{width:44px;height:44px}
  .foot__col--svc ul{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){
  /* captioned gallery tiles: one column of compact rows (picture left, caption right), the big/wide tile on top */
  .gal{grid-template-columns:minmax(0,1fr)}
  .gal>.gal--wide,.gal>.gal--big{grid-column:auto}
  .gal>figure:not(.gal--big,.gal--wide){display:grid;grid-template-columns:42% minmax(0,1fr);align-items:start;padding:8px}
  .gal>figure:not(.gal--big,.gal--wide) figcaption{padding:0 2px 2px 12px}
}
@media (max-width:360px){
  .telbig{gap:8px}
  .telbig__ic,.phoneband__num .telbig__ic{width:42px;height:42px}
  .phoneband__num .telbig{gap:10px}
  :is(.hero__dial,.cta__dial,.phoneband__num,.phonebox__top,.callrow){--tb-room:56px}
}
@media (max-width:380px){
  .nav{gap:6px}
  .brand__mk svg{width:38px;height:38px}
  .brand__n{font-size:1.12rem}
  .brand__s{letter-spacing:.13em}
  .nav__right{gap:6px}
  .nav__call{min-height:46px;min-width:46px;padding:8px 12px}
  .burger{width:46px;height:46px}
  .hero__cta .btn{width:100%}
  .cards--photo .card{grid-template-columns:104px minmax(0,1fr)}
  .cards--photo .card__media{margin:14px 0 14px 14px}
  .cards--photo .card__body{padding:14px 14px 16px}
  .cards--photo .card__t{font-size:1.04rem}
  .topbar__in{justify-content:center}
  .topbar p.topbar__l{display:none}
}
/* the header row (logo + call + burger) needs 335 px of content width at ≤ 380 px; narrower screens — and 320 px with a
   classic scrollbar, i.e. 305 px of layout (400 % zoom) — shrink the logo, keep both buttons at 44 px */
@media (max-width:349px){
  .nav{gap:5px}
  .brand{gap:8px}
  .brand__mk svg{width:36px;height:36px}
  .brand__n{font-size:1.02rem}
  .nav__right{gap:4px}
  .nav__call{min-width:44px;min-height:44px;padding:8px 10px}
  .burger{width:44px;height:44px}
}
@media (max-width:324px){
  .brand{gap:7px}
  .brand__mk svg{width:32px;height:32px}
  .brand__n{font-size:.9rem}
  .brand__s{letter-spacing:.12em}
}
/* print: chrome hidden; colour blocks print black on white */
@media print{.site-top,.callbar,.totop,.drawer{display:none!important}.band,.foot{padding:20px 0;background:#fff!important;color:#000}.band *,.foot *{color:#000!important}.callrow,.cta__dial,.hero__foot,.foot__dial{background:#fff!important;border:1px solid #000;box-shadow:none}.reveal{opacity:1;transform:none}.band+.band::before,.band::after,.hero__frame::before,.foot::before,.phoneband::before,.phoneband::after{display:none}}