/* =============================================================================
   schloss-hannover.de — shared design LANGUAGE
   Style: stahl-kupfer (machined, sober, transparent), re-themed steel-blue + #FF5C93.
   Every page links this file UNEDITED. Per-page CSS is layout-only, never a new token.

   THE ONE RULE: --cta (#FF5C93) is a FILL. As text it is 2.91:1 on white and worse on
   every tint — it may never carry a word on a light band. Pink TEXT on light is
   --cta-ink (#b81a52, worst light ground 5.21:1). Pink text on dark is
   --cta-light (#ff8fb4, 8.30:1 on --dark, 4.97:1 on --primary).
   ========================================================================== */

/* ── 1 · tokens ─────────────────────────────────────────────────────────── */
:root{
  /* grounds */
  --bg:#f7f9fb; --surface:#fff; --alt:#eef2f6; --steel:#e5e9ee; --tint:#fdeef4;
  --dark:#101923; --dark-2:#18242f;
  /* ink */
  --text:#182430; --head:#101c28; --muted:#4a5a6a; --dark-muted:#a3b5c6;
  /* structure */
  --line:#d2dae2; --line-strong:#6f8091; --line-dark:#2c3a49;
  /* brand */
  --primary:#22415c; --primary-deep:#173247; --primary-soft:#e6edf3;
  --cta:#ff5c93; --cta-deep:#e6497d; --cta-ink:#b81a52; --cta-light:#ff8fb4; --on-cta:#17120a;
  /* state */
  --danger:#a41f18; --danger-tint:#fdeceb; --success:#1c6b3f; --focus:#0b1a26;
  /* geometry */
  --r-sm:4px; --r-md:8px; --r-pill:999px; --notch:18px;
  --wrap:72rem; --wrap-wide:88rem; --prose:38rem; --prose-wide:46rem;
  --gut:clamp(1.125rem,4vw,2.5rem);
  --sp-1:.5rem; --sp-2:.875rem; --sp-3:1.25rem; --sp-4:1.75rem; --sp-5:2.5rem;
  --sp-6:clamp(2.75rem,2rem + 3vw,4.5rem); --sp-7:clamp(3.5rem,2.4rem + 4.4vw,6rem);
  --tap:44px;
  /* motion — two speeds: fast for atoms, slower for composites */
  --t-atom:.16s cubic-bezier(.2,.7,.3,1);
  --t-comp:.42s cubic-bezier(.2,.7,.3,1);
  --shadow-1:0 1px 2px rgba(16,25,35,.06),0 4px 14px rgba(16,25,35,.06);
  --shadow-2:0 2px 6px rgba(16,25,35,.08),0 16px 44px rgba(16,25,35,.10);
}

/* ── 2 · base ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:400 1.125rem/1.7 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
}
img,svg,video{max-width:100%;height:auto;display:block}
/* Inline icon default. Without it an un-sized 24x24 viewBox expands to the container width and
   a notice tag renders a full-width black triangle next to a three-line label. */
svg.i{width:1.05em;height:1.05em;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.btn--call svg.i,.calltab svg.i{fill:currentColor;stroke:none}
h1,h2,h3,h4,h5{
  margin:0 0 .5em;color:var(--head);font-weight:800;line-height:1.14;letter-spacing:-.018em;
  /* German compounds (Schliesszylinder, Bothfeld-Vahrenheide) will break a narrow column, but a
     hyphen inside a SHORT word reads as a typo — so only long words may hyphenate. */
  hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:10 5 4;overflow-wrap:break-word;
}
h1{font-size:clamp(2.125rem,1.35rem + 3.4vw,3.875rem);letter-spacing:-.026em;line-height:1.05}
h2{font-size:clamp(1.6875rem,1.15rem + 2.1vw,2.625rem)}
h3{font-size:clamp(1.1875rem,.95rem + .7vw,1.375rem);line-height:1.25}
h4{font-size:1.0625rem;line-height:1.35;letter-spacing:-.008em}
p{margin:0 0 1em}
p:last-child,ul:last-child,ol:last-child{margin-bottom:0}
ul,ol{margin:0 0 1em;padding-left:1.25em}
li{margin:0 0 .4em}
strong,b{font-weight:700;color:var(--head)}
small{font-size:.9375rem}
a{color:var(--primary);text-decoration:underline;text-underline-offset:.16em;text-decoration-thickness:1px;
  transition:color var(--t-atom),text-decoration-color var(--t-atom)}
a:hover{color:var(--cta-ink);text-decoration-color:var(--cta)}
hr{border:0;border-top:1px solid var(--line);margin:var(--sp-5) 0}
:target{scroll-margin-top:6.5rem}
::selection{background:var(--cta);color:var(--on-cta)}

/* The dual focus ring — a single dark ring is 1.66:1 on --primary and vanishes.
   Inner ring = the band's own ground, outer = the opposite. Visible on every band. */
:where(a,button,summary,[tabindex]):focus-visible{
  outline:none;border-radius:var(--r-sm);
  box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--focus);
}
.section--dark :where(a,button,summary,[tabindex]):focus-visible,
.section--primary :where(a,button,summary,[tabindex]):focus-visible,
.site-footer :where(a,button,summary,[tabindex]):focus-visible,
.callbar :where(a,button):focus-visible{
  box-shadow:0 0 0 3px var(--dark),0 0 0 6px var(--cta-light);
}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--dark);color:#fff;
  padding:.75rem 1.25rem;border-radius:0 0 var(--r-sm) 0;font-weight:700;text-decoration:none}
.skip:focus{left:0}

/* ── 3 · bands, wrap, rhythm ────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap--wide{max-width:var(--wrap-wide)}
.wrap--prose{max-width:calc(var(--prose-wide) + 2*var(--gut))}

.section{position:relative;padding-block:var(--sp-7);background:var(--surface);color:var(--text)}
.section--flush{padding-block:0}
.section--tight{padding-block:var(--sp-6)}
.section--alt{background:var(--alt)}
.section--bg{background:var(--bg)}
.section--tint{background:var(--tint)}
.section--primarysoft{background:var(--primary-soft)}

/* the brushed-steel band: two repeating hairline gradients at ~2% over a cool tint.
   A material texture (german-design §4.3) — never recolour it into a decorative gradient. */
.section--steel{
  background-color:var(--steel);
  background-image:
    repeating-linear-gradient(90deg,rgba(34,65,92,.030) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,rgba(34,65,92,.018) 0 1px,transparent 1px 13px);
}
.section--dark{background:var(--dark);color:#fff}
.section--primary{background:var(--primary);color:#fff}

/* == THE DARK-SURFACE CONTRACT =============================================
   A dark GROUND is not always a dark BAND: .card--dark (the phone card) sits inside a light
   band, and without this block its heading, its .telbig and its .hero__meta inherit the light
   band's near-black ink and render invisible. Every dark ground is therefore listed once, and
   :where() is deliberately NOT used - a 0-specificity rule loses to .stitle{color:var(--head)}
   and repaints the text dark again. */
.section--dark, .section--primary, .card--dark, .notice--dark, .keypad--dark > *,
.ledger--dark, .compare--dark, .hero__panel--dark, .diptych__b, .site-footer, .callbar{
  color:#fff;
}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4,.section--dark .stitle,
.section--primary h1,.section--primary h2,.section--primary h3,.section--primary h4,.section--primary .stitle,
.card--dark h1,.card--dark h2,.card--dark h3,.card--dark h4,.card--dark .stitle,
.notice--dark h2,.notice--dark h3,.notice--dark h4,
.keypad--dark h2,.keypad--dark h3,.keypad--dark h4,
.compare--dark h3,.compare--dark h4,
.hero__panel--dark h1,.hero__panel--dark h2,.hero__panel--dark h3,.hero__panel--dark .stitle,
.diptych__b h2,.diptych__b h3,.diptych__b h4,
.site-footer h2,.site-footer h3,.site-footer h4{
  color:#fff;
}
.section--dark p,.section--dark li,
.section--primary p,.section--primary li,
.card--dark p,.card--dark li,
.notice--dark p,.notice--dark li,
.keypad--dark p,.keypad--dark li,
.compare--dark p,.compare--dark li,
.hero__panel--dark p,.hero__panel--dark li,
.diptych__b p,.diptych__b li{
  color:#d7e2ec;
}
.section--dark .lead,.section--primary .lead,.card--dark .lead,
.hero__panel--dark .lead,.diptych__b .lead,.notice--dark .lead{color:#d7e2ec}
/* `strong,b{color:var(--head)}` is near-black — on a dark band an emphasised word would be the
   ONLY invisible thing in the paragraph. Emphasis on dark is full white. */
.section--dark strong,.section--dark b,.section--primary strong,.section--primary b,
.card--dark strong,.card--dark b,.notice--dark strong,.notice--dark b,
.keypad--dark strong,.keypad--dark b,.compare--dark strong,.compare--dark b,
.hero__panel--dark strong,.hero__panel--dark b,.diptych__b strong,.diptych__b b,
.site-footer strong,.site-footer b,.embar strong,.embar b{color:#fff}
/* …and the inverse, for a light card sitting inside a dark band. */
.section--dark .card:not(.card--dark) strong,.section--dark .card:not(.card--dark) b,
.section--dark .notice:not(.notice--dark) strong,.section--dark .notice:not(.notice--dark) b,
.section--dark .keypad:not(.keypad--dark) strong,.section--dark .keypad:not(.keypad--dark) b,
.section--dark .hero__panel:not(.hero__panel--dark) strong{color:var(--head)}
.section--dark .muted,.section--primary .muted,.card--dark .muted,
.section--dark .telnote,.section--primary .telnote,.card--dark .telnote,
.section--dark .figcap,.section--primary .figcap,.card--dark .figcap,
.section--dark .hero__meta,.section--primary .hero__meta,.card--dark .hero__meta,
.section--dark .shead__aside,.section--primary .shead__aside,.card--dark .shead__aside,
.section--dark .glist__d,.card--dark .glist__d,
.hero__panel--dark .telnote,.hero__panel--dark .hero__meta{color:var(--dark-muted)}
.section--dark .telbig,.section--primary .telbig,.card--dark .telbig,
.hero__panel--dark .telbig,.diptych__b .telbig{color:#fff}
.section--dark .telbig:hover,.card--dark .telbig:hover,.hero__panel--dark .telbig:hover{color:var(--cta-light)}
.section--dark .eyebrow,.section--primary .eyebrow,.card--dark .eyebrow,
.notice--dark .eyebrow,.hero__panel--dark .eyebrow,.diptych__b .eyebrow{color:var(--cta-light)}
.section--dark .bignum,.card--dark .bignum,.hero__panel--dark .bignum{color:var(--cta-light)}
.section--dark .numpill,.card--dark .numpill,.hero__panel--dark .numpill{
  background:transparent;border-color:var(--dark-muted);color:#fff}
.section--dark .numpill--cta,.card--dark .numpill--cta{background:var(--cta);border-color:var(--cta);color:var(--on-cta)}
.section--dark .icon-badge,.card--dark .icon-badge,.hero__panel--dark .icon-badge,
.keypad--dark .icon-badge{background:var(--dark-2);color:var(--cta-light)}
.section--dark .glist,.card--dark .glist{border-top-color:var(--line-dark)}
.section--dark .glist__i,.card--dark .glist__i{border-bottom-color:var(--line-dark)}
.section--dark .glist__t,.card--dark .glist__t{color:#fff}
.section--dark .quote,.card--dark .quote{color:#fff}
.section--dark .quote cite,.card--dark .quote cite{color:var(--dark-muted)}
.section--dark .hrule,.card--dark .hrule{color:var(--dark-muted)}
.section--dark .hrule::before,.section--dark .hrule::after{background:var(--line-dark)}
.section--dark .crumbs,.section--dark .crumbs a{color:var(--dark-muted)}
.section--dark .crumbs li+li::before{color:var(--line-dark)}
.section--dark .toc{background:var(--dark-2);border-color:var(--line-dark)}
.section--dark .frame{background:var(--dark-2);border-color:var(--line-dark)}
.section--dark .media,.card--dark .media{background:var(--dark-2)}
.section--dark .trustrail{background:var(--dark-2);border-color:var(--line-dark)}
.section--dark .trustrail li{color:#fff}
.section--dark .faq,.card--dark .faq{border-top-color:var(--line-dark)}
.section--dark .faq__i,.card--dark .faq__i{border-bottom-color:var(--line-dark)}
.section--dark .faq__i > summary,.card--dark .faq__i > summary{color:#fff}
.section--dark .faq__i > summary::after,.card--dark .faq__i > summary::after{border-color:var(--cta-light)}
.section--dark .faq__a p,.card--dark .faq__a p{color:#d7e2ec}
.section--dark .stepper__i,.card--dark .stepper__i{border-top-color:var(--line-dark)}
.section--dark .stepper__i::before,.card--dark .stepper__i::before{color:var(--cta-light)}
.section--dark .timeline li::before,.card--dark .timeline li::before{background:var(--line-dark)}
.section--dark .stats__i .k,.card--dark .stats__i .k{color:var(--dark-muted)}
.section--dark .hours li,.card--dark .hours li{border-bottom-color:var(--line-dark)}
.section--dark .hours .d,.card--dark .hours .d{color:#fff}

/* A bare `.section--dark a{}` is specificity (0,1,1) and silently beats every `.btn` (0,1,0),
   so a call button inside a dark band would paint its label pink-on-pink at ~1.4:1. */
.section--dark a:not(.btn):not(.calltab):not(.chip):not(.brand):not(.ftel):not(.rowlink):not(.cardlink):not(.skip):not(.seal),
.section--primary a:not(.btn):not(.calltab):not(.chip):not(.brand):not(.ftel):not(.rowlink):not(.cardlink):not(.skip):not(.seal),
.card--dark a:not(.btn):not(.calltab):not(.chip):not(.telbig):not(.cardlink),
.notice--dark a:not(.btn):not(.calltab),
.hero__panel--dark a:not(.btn):not(.calltab):not(.telbig),
.diptych__b a:not(.btn):not(.calltab):not(.telbig){
  color:var(--cta-light)
}
.section--dark a:not(.btn):hover,.section--primary a:not(.btn):hover,
.card--dark a:not(.btn):not(.telbig):hover{color:#fff}

/* ...and the inverse: a LIGHT card inside a dark band must get its light-ground ink back, or the
   white inherited from the band paints white-on-white. */
.section--dark .card:not(.card--dark):not(.card--tint),
.section--primary .card:not(.card--dark):not(.card--tint),
.section--dark .notice:not(.notice--dark),
.section--dark .keypad:not(.keypad--dark) > *,
.section--dark .compare:not(.compare--dark),
.section--dark .hero__panel:not(.hero__panel--dark){color:var(--text)}
.section--dark .card:not(.card--dark) h2,.section--dark .card:not(.card--dark) h3,
.section--dark .card:not(.card--dark) h4,
.section--dark .keypad:not(.keypad--dark) h3,.section--dark .keypad:not(.keypad--dark) h4,
.section--dark .notice:not(.notice--dark) h3,
.section--dark .compare:not(.compare--dark) .compare__h,
.section--dark .hero__panel:not(.hero__panel--dark) h1,
.section--dark .hero__panel:not(.hero__panel--dark) h2,
.section--dark .hero__panel:not(.hero__panel--dark) .stitle{color:var(--head)}
.section--dark .card:not(.card--dark) p,
.section--dark .keypad:not(.keypad--dark) p,
.section--dark .notice:not(.notice--dark) p,.section--dark .notice:not(.notice--dark) li,
.section--dark .compare:not(.compare--dark) li,.section--dark .compare:not(.compare--dark) p,
.section--dark .hero__panel:not(.hero__panel--dark) p,
.section--dark .hero__panel:not(.hero__panel--dark) .lead{color:var(--muted)}
.section--dark .card:not(.card--dark):not(.card--tint) a:not(.btn):not(.calltab):not(.chip):not(.brand):not(.ftel):not(.rowlink):not(.cardlink):not(.skip):not(.seal):not(.telbig),
.section--dark .notice:not(.notice--dark) a:not(.btn):not(.calltab):not(.chip):not(.brand):not(.ftel):not(.rowlink):not(.cardlink):not(.skip):not(.seal):not(.telbig),
.section--dark .keypad:not(.keypad--dark) a:not(.btn):not(.calltab):not(.chip):not(.brand):not(.ftel):not(.rowlink):not(.cardlink):not(.skip):not(.seal):not(.telbig),
.section--dark .compare:not(.compare--dark) a:not(.btn):not(.calltab):not(.chip):not(.brand):not(.ftel):not(.rowlink):not(.cardlink):not(.skip):not(.seal):not(.telbig),
.section--dark .hero__panel:not(.hero__panel--dark) a:not(.btn):not(.calltab):not(.chip):not(.brand):not(.ftel):not(.rowlink):not(.cardlink):not(.skip):not(.seal):not(.telbig),
.section--dark .glist a:not(.btn):not(.calltab):not(.chip):not(.brand):not(.ftel):not(.rowlink):not(.cardlink):not(.skip):not(.seal):not(.telbig):not(.on-dark){color:var(--primary)}
.section--dark .card:not(.card--dark) a:not(.btn):hover,
.section--dark .notice:not(.notice--dark) a:not(.btn):hover{color:var(--cta-ink)}
.section--dark .card:not(.card--dark) .icon-badge,
.section--dark .keypad:not(.keypad--dark) .icon-badge,
.section--dark .hero__panel:not(.hero__panel--dark) .icon-badge{background:var(--primary-soft);color:var(--primary)}
.section--dark .ledger:not(.ledger--dark) .ledger__k{background:var(--alt);color:var(--head)}
.section--dark .ledger:not(.ledger--dark) .ledger__v{color:var(--muted)}
.section--dark .frame:not(.frame--dark){background:var(--surface);border-color:var(--line)}
.section--dark .notice--danger h3{color:var(--danger)}
.section--dark .notice--danger p,.section--dark .notice--danger li{color:#5c1a15}
.section--dark .hero__panel:not(.hero__panel--dark) .eyebrow{color:var(--cta-ink)}

/* the seam grammar — every other band has exactly ONE element crossing its boundary.
   .seam-up on the FIRST child of the lower band. .seam-down needs all three classes. */
.seam-up{margin-top:calc(-1 * var(--seam,88px));position:relative;z-index:3}
.section--hang{padding-bottom:calc(var(--sp-7) + 0px)}
.section--catch{padding-top:calc(var(--sp-7) + 54px)}
.seam-down{margin-bottom:-54px;position:relative;z-index:3}
@media (max-width:700px){
  .seam-up{margin-top:0}
  .seam-down{margin-bottom:0}
  .section--catch{padding-top:var(--sp-7)}
}

/* ── 4 · headline discipline · ONE .stitle class ────────────────────────── */
/* Modifiers change max-width, alignment and colour — never size or weight.
   This is why visibly different bands still read as one site. */
.stitle{font-size:clamp(1.6875rem,1.15rem + 2.1vw,2.625rem);font-weight:800;line-height:1.12;
  letter-spacing:-.02em;color:var(--head);margin:0 0 var(--sp-3);max-width:24ch;hyphens:auto}
.stitle--wide{max-width:34ch}
.stitle--narrow{max-width:18ch}
.stitle--center{margin-inline:auto;text-align:center}
.stitle--light{color:#fff}
.display{font-size:clamp(2.125rem,1.35rem + 3.4vw,3.875rem);font-weight:800;line-height:1.03;
  letter-spacing:-.028em;margin:0 0 var(--sp-3);hyphens:auto}
.display--long{font-size:clamp(1.9rem,1.1rem + 2.9vw,3.25rem)}
.lead{font-size:clamp(1.1875rem,1rem + .5vw,1.3125rem);line-height:1.6;color:var(--muted);max-width:var(--prose-wide)}
.section--dark .lead,.section--primary .lead{color:#d7e2ec}
.prose{max-width:var(--prose-wide)}
.prose--narrow{max-width:var(--prose)}
.muted{color:var(--muted)}
.shead{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  align-items:end;column-gap:var(--sp-6);row-gap:var(--sp-3);margin-bottom:var(--sp-5)}
.shead__t{grid-column:1}
.shead__t>*:last-child{margin-bottom:0}
.shead__aside{grid-column:2}
@media (max-width:820px){
  .shead{grid-template-columns:minmax(0,1fr)}
  .shead__t,.shead__aside{grid-column:1}
}
.shead__aside{max-width:34ch;color:var(--muted);font-size:1rem}
.section--dark .shead__aside{color:var(--dark-muted)}

/* the key-bit eyebrow mark: a 30×12 bar clipped to a 4-tooth key profile.
   Four teeth is the measured cap — a 7-tooth profile at this size is an illegible smear. */
.eyebrow{display:flex;align-items:flex-start;gap:.6rem;line-height:1.45;font-size:.8125rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.15em;color:var(--cta-ink);margin:0 0 var(--sp-2)}
.eyebrow::before{content:"";flex:none;width:30px;height:12px;margin-top:.32em;background:var(--cta);
  clip-path:polygon(0 38%,62% 38%,62% 0,72% 0,72% 38%,80% 38%,80% 8%,88% 8%,88% 38%,100% 38%,100% 100%,0 100%)}
.section--dark .eyebrow,.section--primary .eyebrow{color:var(--cta-light)}
.eyebrow--plain::before{display:none}
.eyebrow--center{justify-content:center}

/* the pin-tumbler rule: five pins of unequal depth HANGING from a shear line.
   Bottom-anchored bars read as signal strength — the wrong object entirely. */
.pinrule{display:flex;align-items:flex-start;gap:5px;height:26px;border-top:2px solid var(--cta);
  width:74px;margin:0 0 var(--sp-3);padding-top:0}
.pinrule i{display:block;width:6px;background:var(--line-strong)}
.pinrule i:nth-child(1){height:16px}.pinrule i:nth-child(2){height:9px}
.pinrule i:nth-child(3){height:22px}.pinrule i:nth-child(4){height:12px}
.pinrule i:nth-child(5){height:19px}
.section--dark .pinrule i,.section--primary .pinrule i{background:var(--dark-muted)}
.pinrule--center{margin-inline:auto}

/* the disc — this site's own signature, taken from the favicon geometry
   (round padlock body). Used behind heroes and as a medallion. */
.disc{position:relative;isolation:isolate}
.disc::before{
  content:"";position:absolute;z-index:-1;border-radius:50%;
  width:min(62vw,540px);aspect-ratio:1;
  background:radial-gradient(circle at 38% 34%,var(--cta) 0%,var(--cta-deep) 72%,var(--cta-deep) 100%);
  opacity:.14;right:-8%;top:-14%;pointer-events:none;
}
.disc--left::before{left:-14%;right:auto}
.disc--strong::before{opacity:.22}
.section--dark .disc::before{opacity:.30}
.medallion{width:88px;height:88px;border-radius:50%;background:var(--cta);color:var(--on-cta);
  display:grid;place-items:center;font-weight:800;font-size:.8125rem;line-height:1.2;text-align:center;
  box-shadow:0 0 0 8px var(--surface);flex:none}
.section--dark .medallion{box-shadow:0 0 0 8px var(--dark)}

/* ── 5 · buttons and the call treatments ────────────────────────────────── */
.btn{
  --btn-bg:var(--primary);--btn-ink:#fff;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:var(--tap);padding:.8rem 1.4rem;border:1px solid transparent;border-radius:var(--r-sm);
  background:var(--btn-bg);color:var(--btn-ink);font-weight:800;font-size:1rem;line-height:1.2;
  text-decoration:none;cursor:pointer;overflow:hidden;isolation:isolate;
  transition:background var(--t-atom),color var(--t-atom),border-color var(--t-atom),transform var(--t-atom);
}
.btn:hover{color:var(--btn-ink);transform:translateY(-1px)}
/* the scaleX wipe-fill hover, from the source corpus */
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--primary-deep);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-comp)}
.btn:hover::after{transform:scaleX(1)}
.btn--ghost{--btn-bg:transparent;--btn-ink:var(--primary);border-color:var(--line-strong)}
.btn--ghost::after{background:var(--primary)}
.btn--ghost:hover{--btn-ink:#fff;border-color:var(--primary)}
.section--dark .btn--ghost{--btn-ink:#fff;border-color:var(--dark-muted)}
.section--dark .btn--ghost::after{background:#fff}
.section--dark .btn--ghost:hover{--btn-ink:var(--dark);border-color:#fff}
.btn--lg{padding:1rem 1.75rem;font-size:1.0625rem}

/* THE call button. Pill (round = "you can act on this"), pink fill, near-black cap at 6.39:1.
   Full white would be 2.91:1 and never opacity-dimmed — that blends to 4.02:1, under AA.
   No motion at all on the phone CTA (design-tokens §5): no wipe, no transform. */
.btn--call{
  --btn-bg:var(--cta);--btn-ink:var(--on-cta);
  border-radius:var(--r-pill);font-size:1.0625rem;padding:.85rem 1.6rem;
  box-shadow:0 1px 0 rgba(23,18,10,.10);
}
.btn--call::after{display:none}
.btn--call:hover{--btn-bg:var(--cta-deep);--btn-ink:var(--on-cta);transform:none}
.btn--call .btn__num{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.btn--call svg{flex:none;width:20px;height:20px;fill:currentColor}

/* the phone number as display type — where the call is the only channel,
   a huge tappable number outranks another square button. */
/* A 30px-tall line of type is a 30px tap target, however large the digits look. The number is
   the site's only conversion surface, so both display forms get an explicit 44px hit area. */
.telbig{display:inline-flex;align-items:center;min-height:var(--tap);padding-block:.15rem;
  font-size:clamp(1.75rem,1.1rem + 2.7vw,3.375rem);font-weight:800;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--head);text-decoration:none;
  line-height:1.05;transition:color var(--t-atom)}
.telbig:hover{color:var(--cta-ink)}
.section--dark .telbig,.section--primary .telbig{color:#fff}
.section--dark .telbig:hover{color:var(--cta-light)}
.telnote{display:block;font-size:.9375rem;color:var(--muted);margin-top:.4rem;font-weight:400}
.section--dark .telnote{color:var(--dark-muted)}

/* ── 6 · cards, notches, chips, badges ──────────────────────────────────── */
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:var(--sp-4);transition:border-color var(--t-comp),box-shadow var(--t-comp),transform var(--t-comp)}
.card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-1);transform:translateY(-2px)}
.card h3{margin-bottom:.4rem}
.card p{color:var(--muted);font-size:1rem}
.card--flat:hover{transform:none;box-shadow:none}
.card--tint{background:var(--tint);border-color:#f6d7e3}
.card--alt{background:var(--alt)}
.card--dark{background:var(--dark);border-color:var(--line-dark);color:#fff}
.card--dark h3{color:#fff}.card--dark p{color:#d7e2ec}
/* the copper→pink hairline inlay: a 3px leading edge marking the emphasis card in a set */
.card--inlay{border-left:3px solid var(--cta);padding-left:calc(var(--sp-4) - 2px)}
.card--inlay-top{border-top:3px solid var(--cta)}

/* the key-bow notch. clip-path clips border AND box-shadow, so there are two honest forms:
   .card--notch is FILLED with no edge (legible only on a tinted/steel/dark band);
   .notch + .notch__in is a two-element card whose hairline traces the cut.
   Elevation on any clipped box uses filter:drop-shadow(), applied after the clip. */
.card--notch{
  border:0;background:var(--surface);
  clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,0 100%);
}
.card--notch:hover{box-shadow:none;filter:drop-shadow(0 8px 22px rgba(16,25,35,.10))}
.notch{background:var(--line-strong);padding:1px;
  clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,0 100%)}
.notch__in{background:var(--surface);padding:var(--sp-4);
  clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% calc(var(--notch) - 1px),100% 100%,0 100%)}
.section--dark .notch{background:var(--line-dark)}
.section--dark .notch__in{background:var(--dark-2)}

.chip{display:inline-flex;align-items:center;gap:.4rem;min-height:var(--tap);padding:.5rem .9rem;
  border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--surface);
  color:var(--primary);font-size:.9375rem;font-weight:700;text-decoration:none;
  transition:background var(--t-atom),color var(--t-atom),border-color var(--t-atom)}
.chip:hover{background:var(--primary);border-color:var(--primary);color:#fff}
.section--dark .chip{background:transparent;border-color:var(--dark-muted);color:#fff}
.section--dark .chip:hover{background:#fff;color:var(--dark);border-color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:.55rem;list-style:none;margin:0;padding:0}
.chips li{margin:0}
/* a caption chip welded to an image corner */
.capchip{position:absolute;left:0;bottom:0;background:var(--dark);color:#fff;font-size:.8125rem;
  font-weight:700;padding:.45rem .8rem;letter-spacing:.02em}
.capchip--cta{background:var(--cta);color:var(--on-cta)}

.badge{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .6rem;border-radius:var(--r-sm);
  background:var(--primary-soft);color:var(--primary);font-size:.8125rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em}
.badge--cta{background:var(--cta);color:var(--on-cta)}
.badge--danger{background:var(--danger-tint);color:var(--danger)}
/* the qualification seal — never a rating. Straddles a section seam. */
.seal{width:118px;height:118px;border-radius:50%;background:var(--surface);border:2px solid var(--cta);
  display:grid;place-items:center;text-align:center;font-size:.75rem;font-weight:800;line-height:1.25;
  color:var(--primary);padding:.75rem;flex:none;box-shadow:var(--shadow-1)}
.seal span{display:block}
.numpill{width:46px;height:46px;border-radius:50%;border:2px solid var(--line-strong);
  display:grid;place-items:center;font-weight:800;font-size:1.0625rem;color:var(--primary);
  font-variant-numeric:tabular-nums;flex:none;background:var(--surface)}
.numpill--cta{border-color:var(--cta);background:var(--cta);color:var(--on-cta)}
.section--dark .numpill{background:transparent;border-color:var(--dark-muted);color:#fff}
.bignum{font-size:clamp(2.25rem,1.4rem + 3.4vw,3.5rem);font-weight:800;line-height:1;
  color:var(--cta-ink);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.section--dark .bignum{color:var(--cta-light)}

/* ── 7 · media slots ────────────────────────────────────────────────────── */
.media{position:relative;overflow:hidden;background:var(--alt);border-radius:var(--r-sm)}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.media--wide img,.media--43 img,.media--sq img,.media--tall img{position:absolute;inset:0;width:100%;height:100%}
.media--notch{border-radius:0;
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%)}
.media--tall{aspect-ratio:3/4}
.media--wide{aspect-ratio:16/9}
.media--sq{aspect-ratio:1}
.media--43{aspect-ratio:4/3}
/* one-shot clip-path reveal, fired by the observer */
.media--reveal img{clip-path:inset(0 0 100% 0);transition:clip-path .8s cubic-bezier(.16,.84,.34,1)}
.media--reveal.in img{clip-path:inset(0 0 0 0)}
.frame{position:relative;padding:12px;background:var(--surface);border:1px solid var(--line)}
.frame--cta{border-color:var(--cta)}
.figcap{margin-top:.6rem;font-size:.875rem;color:var(--muted);line-height:1.5}
.section--dark .figcap{color:var(--dark-muted)}

/* ── 8 · grids ──────────────────────────────────────────────────────────── */
.grid{display:grid;gap:var(--sp-3)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.grid--gap-lg{gap:var(--sp-4)}
@media (max-width:1000px){
  .grid--4,.grid--5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:660px){
  .grid--2,.grid--3,.grid--4,.grid--5{grid-template-columns:minmax(0,1fr)}
}

/* the keypad: the layout LINES are the design. gap:1px over a line-coloured ground with
   cells painted in the surface colour — the rules are drawn by the gap, not by borders.
   Reflows without arithmetic. At gap:2px three cells read as ONE segmented slab. */
.keypad{display:grid;gap:1px;background:var(--line-strong);border:1px solid var(--line-strong)}
.keypad>*{background:var(--surface);padding:var(--sp-4);margin:0}
.keypad--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.keypad--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.keypad--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.keypad--tight{gap:2px}
.keypad--cta{gap:2px;background:var(--cta);border-color:var(--cta)}
.keypad--dark{background:var(--line-dark);border-color:var(--line-dark)}
.keypad--dark>*{background:var(--dark-2);color:#fff}
.keypad--dark h3,.keypad--dark h4{color:#fff}
.keypad--dark p{color:#d7e2ec}
@media (max-width:900px){.keypad--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .keypad--2,.keypad--3,.keypad--4{grid-template-columns:minmax(0,1fr)}
}

/* ── 9 · the part-2 layout vocabulary ───────────────────────────────────── */

/* zero-gutter two-column band; each half carries its own fill, meeting on the centreline */
.diptych{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.diptych>*{padding:var(--sp-7) var(--gut);margin:0}
.diptych__a{background:var(--surface)}
.diptych__b{background:var(--dark);color:#fff}
.diptych__b h2,.diptych__b h3{color:#fff}
.diptych__b p{color:#d7e2ec}
.diptych--steel .diptych__a{background:var(--steel)}
.diptych--tint .diptych__a{background:var(--tint)}
.diptych__inner{max-width:34rem}
.diptych__a .diptych__inner{margin-left:auto;padding-right:var(--sp-3)}
@media (max-width:860px){
  .diptych{grid-template-columns:minmax(0,1fr)}
  .diptych>*{padding-block:var(--sp-6)}
  .diptych__a .diptych__inner{margin-left:0;padding-right:0}
}

/* one hairline frame: a narrow label cell against a wide content cell */
.ledger{border:1px solid var(--line-strong)}
.ledger__row{display:grid;grid-template-columns:minmax(11rem,15rem) 1fr;border-top:1px solid var(--line)}
.ledger__row:first-child{border-top:0}
/* A long German compound ("Verbraucherstreitbeilegung", 25 chars) has no break opportunity in
   it, so in a narrow key column it either overflows or breaks mid-syllable with no hyphen.
   hyphens:auto breaks it properly for the lang="de" this document declares. */
.ledger__k{padding:var(--sp-3) var(--sp-4);background:var(--alt);font-weight:800;color:var(--head);
  border-right:1px solid var(--line);font-size:1rem;
  min-width:0;hyphens:auto;overflow-wrap:break-word}
.ledger__v{padding:var(--sp-3) var(--sp-4);color:var(--muted);font-size:1rem}
.ledger__v strong{color:var(--head)}
.ledger--dark{border-color:var(--line-dark);background:var(--dark)}
.ledger--dark .ledger__row{border-top-color:var(--line-dark)}
.ledger--dark .ledger__k{background:var(--dark-2);color:#fff;border-right-color:var(--line-dark)}
.ledger--dark .ledger__v{color:#d7e2ec}
@media (max-width:640px){
  .ledger__row{grid-template-columns:minmax(0,1fr)}
  .ledger__k{border-right:0;border-bottom:1px solid var(--line)}
  .ledger--dark .ledger__k{border-bottom-color:var(--line-dark)}
}

/* a sticky side column against a single-file stack. Single viewport only — not scroll-jacking. */
.rail{display:grid;grid-template-columns:minmax(0,20rem) 1fr;gap:var(--sp-6);align-items:start}
.rail--right{grid-template-columns:1fr minmax(0,20rem)}
.rail__side{position:sticky;top:6.5rem}
@media (max-width:900px){
  .rail,.rail--right{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}
  .rail__side{position:static}
  .rail--right .rail__side{order:2}
}

/* hand-placed masonry rhythm via nth-child. Zero JS, no library. */
.offgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)}
.offgrid>*:nth-child(3n+2){margin-top:var(--sp-5)}
.offgrid>*:nth-child(3n+3){margin-top:calc(var(--sp-5) * 2)}
@media (max-width:860px){
  .offgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .offgrid>*:nth-child(3n+2),.offgrid>*:nth-child(3n+3){margin-top:0}
  .offgrid>*:nth-child(2n){margin-top:var(--sp-4)}
}
@media (max-width:560px){
  .offgrid{grid-template-columns:minmax(0,1fr)}
  .offgrid>*:nth-child(2n){margin-top:0}
}

/* scroll-snap rail with the next card bleeding off the edge. User-driven, keyboard-reachable,
   NOT an auto-carousel. */
.peek{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(17rem,22rem);gap:var(--sp-3);
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--sp-2);
  scrollbar-width:thin;overscroll-behavior-x:contain}
.peek>*{scroll-snap-align:start}
.peek::-webkit-scrollbar{height:6px}
.peek::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px}

/* one tall image beside two stacked halves */
.mosaic{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:var(--sp-2)}
.mosaic>*:first-child{grid-row:span 2}
@media (max-width:700px){
  .mosaic{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .mosaic>*:first-child{grid-row:auto}
}

/* the LEGAL before/after: a static two-up with a shared centre rule. Never an <input type=range>. */
.compare{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line-strong);background:var(--surface)}
.compare>*{padding:var(--sp-4)}
.compare>*+*{border-left:1px solid var(--line-strong)}
.compare__h{display:flex;align-items:center;gap:.6rem;font-weight:800;color:var(--head);margin-bottom:.6rem}
.compare__h .dot{width:10px;height:10px;border-radius:50%;background:var(--line-strong);flex:none}
.compare__a .dot{background:var(--primary)}
.compare__b .dot{background:var(--cta)}
.compare ul{list-style:none;padding:0;margin:0}
.compare li{position:relative;padding-left:1.3rem;margin-bottom:.55rem;font-size:1rem;color:var(--muted)}
.compare li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--line-strong)}
.compare--dark{background:var(--dark);border-color:var(--line-dark);color:#fff}
.compare--dark>*+*{border-left-color:var(--line-dark)}
.compare--dark .compare__h{color:#fff}
.compare--dark li{color:#d7e2ec}
@media (max-width:720px){
  .compare{grid-template-columns:minmax(0,1fr)}
  .compare>*+*{border-left:0;border-top:1px solid var(--line-strong)}
  .compare--dark>*+*{border-top-color:var(--line-dark)}
}

/* vertical connected steps */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline li{position:relative;padding:0 0 var(--sp-4) 3.9rem;margin:0}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:22px;top:46px;bottom:0;width:2px;background:var(--line)}
.timeline li:last-child::before{display:none}
.timeline .numpill{position:absolute;left:0;top:0}
.timeline h3{font-size:1.0625rem;margin-bottom:.25rem}
.timeline p{font-size:1rem;color:var(--muted);margin:0}
.section--dark .timeline li::before{background:var(--line-dark)}
.section--dark .timeline p{color:#d7e2ec}

/* horizontal steps */
.stepper{display:grid;grid-template-columns:repeat(var(--steps,4),minmax(0,1fr));gap:var(--sp-3);
  counter-reset:st;position:relative}
.stepper__i{position:relative;padding-top:var(--sp-4);border-top:2px solid var(--line)}
.stepper__i:first-child{border-top-color:var(--cta)}
.stepper__i::before{counter-increment:st;content:counter(st,decimal-leading-zero);
  position:absolute;top:-.2rem;transform:translateY(-100%);font-size:.8125rem;font-weight:800;
  letter-spacing:.12em;color:var(--cta-ink)}
.stepper__i h3{font-size:1.0625rem;margin:0 0 .3rem}
.stepper__i p{font-size:1rem;color:var(--muted);margin:0}
.section--dark .stepper__i{border-top-color:var(--line-dark)}
.section--dark .stepper__i::before{color:var(--cta-light)}
.section--dark .stepper__i p{color:#d7e2ec}
@media (max-width:900px){.stepper{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--sp-5)}}
@media (max-width:560px){.stepper{grid-template-columns:minmax(0,1fr)}}

/* the callout. --danger for safety, the pink register for everything else. */
.notice{position:relative;border:1px solid var(--line-strong);border-left-width:5px;
  border-left-color:var(--cta);background:var(--surface);padding:var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-4)}
.notice h3{font-size:1.0625rem;margin-bottom:.4rem}
.notice p{font-size:1rem;margin-bottom:.6rem}
.notice ul{margin:0;padding-left:1.15em}
.notice li{font-size:1rem;color:var(--muted)}
.notice--danger{border-color:#e9b3af;border-left-color:var(--danger);background:var(--danger-tint)}
.notice--danger h3{color:var(--danger)}
.notice--danger li,.notice--danger p{color:#5c1a15}
.notice--dark{background:var(--dark);border-color:var(--line-dark);border-left-color:var(--cta);color:#fff}
.notice--dark h3{color:#fff}.notice--dark p,.notice--dark li{color:#d7e2ec}
.notice__tag{display:inline-flex;align-items:center;gap:.45rem;flex-wrap:nowrap;white-space:normal;font-size:.75rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--danger);margin-bottom:.35rem}
.notice--dark .notice__tag{color:var(--cta-light)}
.notice__num{font-weight:800;color:var(--danger);font-variant-numeric:tabular-nums;text-decoration:none;
  border-bottom:2px solid currentColor}

/* static figures — never counters */
.stats{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:var(--sp-4)}
.stats__i{border-top:2px solid var(--cta);padding-top:var(--sp-3)}
.stats__i .k{display:block;font-size:.9375rem;color:var(--muted);font-weight:700;margin-top:.2rem}
.section--dark .stats__i .k{color:var(--dark-muted)}
@media (max-width:700px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.stats{grid-template-columns:minmax(0,1fr)}}

/* the hover-flood index — a list that is also a gallery. Replaces the forbidden bare <ul>. */
.rows{border-top:1px solid var(--line-strong);margin:0;padding:0;list-style:none}
.rows>li{margin:0;border-bottom:1px solid var(--line)}
.rowlink{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:var(--sp-3);padding:var(--sp-4) var(--sp-3);text-decoration:none;color:inherit;isolation:isolate;
  overflow:hidden}
.rowlink::before{content:"";position:absolute;inset:auto 0 0 0;height:100%;z-index:-1;
  background:var(--tint);transform:scaleY(0);transform-origin:bottom;transition:transform var(--t-comp)}
.rowlink:hover::before,.rowlink:focus-visible::before{transform:scaleY(1)}
.rowlink__t{min-width:0}
.rowlink__t h3{margin:0 0 .2rem;transition:color var(--t-atom)}
.rowlink:hover .rowlink__t h3{color:var(--cta-ink)}
.rowlink__t p{margin:0;font-size:1rem;color:var(--muted)}
.rowlink__thumb{width:104px;height:70px;overflow:hidden;flex:none;border-radius:var(--r-sm);
  background:var(--alt)}
.rowlink__thumb img{width:100%;height:100%;object-fit:cover;transform:scale(.86);opacity:.85;
  transition:transform var(--t-comp),opacity var(--t-comp)}
.rowlink:hover .rowlink__thumb img{transform:scale(1);opacity:1}
.rowlink__go{font-weight:800;color:var(--cta-ink);font-size:.9375rem;white-space:nowrap}
@media (max-width:700px){
  .rowlink{grid-template-columns:auto 1fr;gap:var(--sp-2)}
  .rowlink__thumb{display:none}
  .rowlink__go{grid-column:2;font-size:.875rem}
}

/* full-bleed accent rule carrying the service vocabulary. STATIC — continuous motion is banned. */
.strip{background:var(--cta);color:var(--on-cta);padding:.9rem 0}
.strip ul{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.6rem;list-style:none;margin:0;padding:0}
.strip li{margin:0;font-weight:800;font-size:.9375rem;letter-spacing:.02em;display:flex;align-items:center;gap:.6rem}
.strip li::before{content:"";width:7px;height:7px;background:var(--on-cta);border-radius:50%;flex:none}
.strip--dark{background:var(--dark);color:#fff}
.strip--dark li::before{background:var(--cta)}

/* icon rows — the checklist/symptom/factor treatment. Never a bare bullet list. */
.iclist{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.iclist--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.iclist--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.iclist>li{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-3);align-items:start;margin:0}
.icon-badge{width:42px;height:42px;border-radius:var(--r-sm);background:var(--primary-soft);
  color:var(--primary);display:grid;place-items:center;flex:none}
.icon-badge svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.icon-badge--cta{background:var(--cta);color:var(--on-cta)}
.icon-badge--danger{background:var(--danger-tint);color:var(--danger)}
.section--dark .icon-badge{background:var(--dark-2);color:var(--cta-light)}
.iclist h3{font-size:1.0625rem;margin:0 0 .2rem}
.iclist p{font-size:1rem;color:var(--muted);margin:0}
.section--dark .iclist p{color:#d7e2ec}
@media (max-width:900px){.iclist--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.iclist--2,.iclist--3{grid-template-columns:minmax(0,1fr)}}

/* the accordion — <details>, so it works with JS off */
.faq{border-top:1px solid var(--line-strong)}
.faq__i{border-bottom:1px solid var(--line)}
.faq__i>summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-3) 0;min-height:var(--tap);cursor:pointer;list-style:none;
  font-weight:800;font-size:1.0625rem;color:var(--head);line-height:1.35;
  transition:color var(--t-atom);
}
.faq__i>summary::-webkit-details-marker{display:none}
.faq__i>summary:hover{color:var(--cta-ink)}
.faq__i>summary::after{content:"";flex:none;width:14px;height:14px;margin-top:.45em;
  border-right:2px solid var(--cta-ink);border-bottom:2px solid var(--cta-ink);
  transform:rotate(45deg);transition:transform var(--t-atom)}
.faq__i[open]>summary::after{transform:rotate(-135deg)}
.faq__a{padding:0 0 var(--sp-4);max-width:var(--prose-wide)}
.faq__a p{font-size:1rem;color:var(--muted)}
.faq__a p:last-child{margin-bottom:0}
.section--dark .faq{border-top-color:var(--line-dark)}
.section--dark .faq__i{border-bottom-color:var(--line-dark)}
.section--dark .faq__i>summary{color:#fff}
.section--dark .faq__i>summary::after{border-color:var(--cta-light)}
.section--dark .faq__a p{color:#d7e2ec}

/* glossary list — anchor-linkable term/definition pairs */
.glist{margin:0;display:grid;gap:0;border-top:1px solid var(--line-strong)}
.glist__i{display:grid;grid-template-columns:minmax(12rem,17rem) 1fr;gap:var(--sp-3);
  padding:var(--sp-3) 0;border-bottom:1px solid var(--line);scroll-margin-top:7rem}
.glist__t{font-weight:800;color:var(--head);font-size:1.0625rem;margin:0}
.glist__d{margin:0;font-size:1rem;color:var(--muted)}
@media (max-width:700px){.glist__i{grid-template-columns:minmax(0,1fr);gap:.3rem}}

/* small widgets */
.hrule{display:flex;align-items:center;gap:var(--sp-3);margin:var(--sp-5) 0;color:var(--muted);
  font-size:.8125rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.hrule::before,.hrule::after{content:"";height:1px;background:var(--line);flex:1}
.quote{border-left:3px solid var(--cta);padding-left:var(--sp-4);font-size:1.1875rem;line-height:1.55;
  color:var(--head);font-weight:600;max-width:34rem}
.quote cite{display:block;margin-top:.6rem;font-size:.9375rem;font-weight:700;font-style:normal;color:var(--muted)}
/* The breadcrumb links carry a full 44px hit area; the negative block margin absorbs the extra
   height so the visual rhythm above the H1 is unchanged. */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 .1rem;font-size:.875rem;
  color:var(--muted);list-style:none;margin:-.55rem 0 calc(var(--sp-3) - .55rem);padding:0}
.crumbs li{margin:0;display:flex;align-items:center;gap:.4rem;min-height:var(--tap)}
.crumbs li+li::before{content:"›";color:var(--line-strong)}
.crumbs a{display:inline-flex;align-items:center;min-height:var(--tap);min-width:var(--tap);
  justify-content:center;padding-inline:.45rem;color:var(--muted);text-decoration:none}
.crumbs li:first-child a{margin-left:-.45rem}
.crumbs a:hover{color:var(--cta-ink);text-decoration:underline}
.toc{border:1px solid var(--line);background:var(--surface);padding:var(--sp-3) var(--sp-4)}
.toc h2{font-size:.8125rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:.6rem}
.toc ol{margin:0;padding-left:1.15em}
/* A jump list is navigation, not prose: its links get a real vertical hit area. 44px would
   double the height of a six-item table of contents, so this lands at a comfortable ~34px —
   above the WCAG 2.5.8 AA minimum of 24, below the mobile-best-practice 44. */
.toc li{font-size:1rem;margin-bottom:.1rem}
.toc a{display:inline-block;padding-block:.35rem;line-height:1.45}
.hours{list-style:none;margin:0;padding:0}
.hours li{display:flex;justify-content:space-between;gap:var(--sp-3);padding:.5rem 0;
  border-bottom:1px solid var(--line);font-size:1rem}
.hours li:last-child{border-bottom:0}
.hours .d{font-weight:700;color:var(--head)}
.section--dark .hours li{border-bottom-color:var(--line-dark)}
.section--dark .hours .d{color:#fff}
.colophon{font-size:.875rem;color:var(--muted);line-height:1.6}
.tabs{display:flex;flex-wrap:wrap;gap:.4rem;border-bottom:1px solid var(--line);margin-bottom:var(--sp-4)}
.tabs button{appearance:none;background:none;border:0;border-bottom:3px solid transparent;
  padding:.7rem 1rem;min-height:var(--tap);font-weight:800;font-size:1rem;color:var(--muted);cursor:pointer}
.tabs button[aria-selected="true"]{color:var(--head);border-bottom-color:var(--cta)}

/* ── 10 · chrome ────────────────────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line);backdrop-filter:saturate(1.4) blur(8px);
  transition:box-shadow var(--t-comp),background var(--t-comp)}
.site-header.is-stuck{box-shadow:0 1px 0 var(--line),0 8px 26px rgba(16,25,35,.08)}
.hdr{display:flex;align-items:center;gap:var(--sp-3);min-height:74px;padding-block:.55rem;min-width:0}
.site-header.is-stuck .hdr{min-height:64px}
.brand{display:inline-flex;align-items:center;gap:.65rem;min-height:var(--tap);min-width:0;text-decoration:none;color:var(--head);
  font-weight:800;font-size:1.0625rem;letter-spacing:-.015em;flex:none;line-height:1.15}
.brand__mark{width:38px;height:38px;flex:none;border-radius:50%;background:var(--cta);
  display:grid;place-items:center}
.brand__mark svg{width:22px;height:22px;fill:var(--on-cta)}
.brand__t{display:flex;flex-direction:column}
.brand__t b{font-weight:800}
.brand__t span{font-weight:600;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

.nav{margin-left:auto;display:flex;align-items:center;gap:.15rem;min-width:0;flex-wrap:nowrap}
.nav>li{position:relative;list-style:none;margin:0}
.nav__l{display:inline-flex;align-items:center;gap:.35rem;min-height:var(--tap);padding:.5rem .7rem;
  border-radius:var(--r-sm);font-weight:700;font-size:1rem;color:var(--primary);text-decoration:none;
  white-space:nowrap;transition:background var(--t-atom),color var(--t-atom)}
.nav__l:hover,.nav__l[aria-current="page"]{background:var(--primary-soft);color:var(--primary-deep)}
.nav__l[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--cta)}
.nav__l .caret{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);flex:none;transition:transform var(--t-atom)}
.nav__drop{position:absolute;top:calc(100% + .3rem);left:0;min-width:19rem;background:var(--surface);
  border:1px solid var(--line-strong);box-shadow:var(--shadow-2);padding:.4rem;list-style:none;margin:0;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--t-atom),transform var(--t-atom),visibility var(--t-atom)}
.nav>li:hover>.nav__drop,.nav>li:focus-within>.nav__drop{opacity:1;visibility:visible;transform:none}
.nav>li:hover>.nav__l .caret{transform:rotate(-135deg) translateY(-2px)}
.nav__drop li{margin:0}
.nav__drop a{display:block;padding:.6rem .8rem;min-height:var(--tap);border-radius:var(--r-sm);
  font-size:1rem;font-weight:600;color:var(--text);text-decoration:none;line-height:1.35}
.nav__drop a:hover{background:var(--tint);color:var(--cta-ink)}

.navcall{flex:none;margin-left:.4rem}
.burger{display:none;flex:none;margin-left:auto;width:var(--tap);height:var(--tap);align-items:center;
  justify-content:center;background:none;border:1px solid var(--line-strong);border-radius:var(--r-sm);cursor:pointer}
.burger span{display:block;position:relative;width:20px;height:2px;background:var(--head)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--head)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.drawer{display:none;border-top:1px solid var(--line);background:var(--surface);
  max-height:min(74vh,640px);overflow-y:auto;overscroll-behavior:contain}
.drawer.is-open{display:block}
.drawer ul{list-style:none;margin:0;padding:0}
.drawer li{border-bottom:1px solid var(--line)}
.drawer a{display:block;padding:.9rem var(--gut);min-height:var(--tap);font-weight:700;font-size:1.0625rem;
  color:var(--primary);text-decoration:none}
.drawer a:hover{background:var(--tint);color:var(--cta-ink)}
.drawer .sub a{padding-left:calc(var(--gut) + 1.4rem);font-weight:500;font-size:1rem;color:var(--text)}
.drawer__call{padding:var(--sp-3) var(--gut) var(--sp-4)}
.drawer__call .btn{width:100%}

/* The header must never be the widest thing on the page. Below 1360px the call button drops its
   number (the number still stands in the hero, the sticky bar and the footer); below 1120px the
   whole nav collapses into the drawer. Measured at 1280px, where nav + brand + number overflowed. */
/* The number in the header button only appears where it demonstrably fits (measured: the nav,
   the brand and the number together need ~1500px). Everywhere else the header keeps the button
   and drops the digits — the number still stands in the hero, the call bar and the footer. */
@media (max-width:1500px){
  .navcall .btn__num{display:none}
}
@media (max-width:1360px){
  .nav__l{padding-inline:.55rem;font-size:.9375rem}
}
@media (max-width:1120px){
  .nav{display:none}
  .burger{display:inline-flex}
}
/* The header keeps a call affordance at EVERY width — it is the site's only conversion channel.
   Below 420px it becomes an icon-only round button (still a 44px tap target with a real label). */
@media (max-width:480px){
  .hdr{gap:.5rem}
  .brand__t b{font-size:.9375rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .brand__mark{width:34px;height:34px}
  .brand__mark svg{width:19px;height:19px}
}
@media (max-width:360px){
  .hdr{gap:.4rem;padding-inline:.75rem}
  .site-header .wrap{padding-inline:.75rem}
}
@media (max-width:430px){
  .navcall .btn--call{padding:.7rem;gap:0;min-width:var(--tap)}
  .navcall .btn--call span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .navcall .btn--call svg{width:22px;height:22px}
  .brand__t span{display:none}
  .brand{font-size:1rem}
}
@media (max-width:340px){
  .brand__t b{font-size:.9375rem}
}

/* the sticky mobile call bar — a plain tel: link, works with JS off */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  background:var(--dark);border-top:2px solid var(--cta);padding:.55rem var(--gut)
  calc(.55rem + env(safe-area-inset-bottom,0px))}
.callbar__in{display:flex;align-items:center;gap:.75rem;max-width:var(--wrap);margin-inline:auto}
.callbar__t{min-width:0;color:#fff;font-size:.8125rem;line-height:1.25;font-weight:700}
.callbar__t span{display:block;color:var(--dark-muted);font-weight:500;font-size:.75rem}
.calltab{margin-left:auto;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:var(--tap);padding:.7rem 1.15rem;border-radius:var(--r-pill);background:var(--cta);
  color:var(--on-cta);font-weight:800;font-size:1rem;text-decoration:none;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.calltab:hover{background:var(--cta-deep);color:var(--on-cta)}
.calltab svg{width:19px;height:19px;fill:currentColor;flex:none}
@media (max-width:820px){
  .callbar{display:block}
  body{padding-bottom:76px}
}

.to-top{position:fixed;right:clamp(.75rem,3vw,1.5rem);bottom:clamp(.75rem,3vw,1.5rem);z-index:65;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);
  color:var(--primary);display:grid;place-items:center;cursor:pointer;opacity:0;visibility:hidden;
  transform:translateY(8px);transition:opacity var(--t-comp),transform var(--t-comp),visibility var(--t-comp);
  box-shadow:var(--shadow-1)}
.to-top.is-on{opacity:1;visibility:visible;transform:none}
.to-top svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:820px){.to-top{bottom:88px}}

.site-footer{background:var(--dark);color:#d7e2ec;padding-block:var(--sp-7) var(--sp-5)}
.site-footer h2,.site-footer h3{color:#fff}
.site-footer a{color:var(--dark-muted);text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:var(--sp-5)}
.foot h3{font-size:.8125rem;text-transform:uppercase;letter-spacing:.13em;color:var(--dark-muted);margin-bottom:var(--sp-2)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:.45rem;font-size:1rem}
.ftel{display:inline-flex;align-items:center;min-height:var(--tap);padding-block:.2rem;
  font-size:1.5rem;font-weight:800;color:#fff!important;text-decoration:none;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ftel:hover{color:var(--cta-light)!important;text-decoration:none!important}
.foot__legal{margin-top:var(--sp-6);padding-top:var(--sp-3);border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;font-size:.875rem;color:var(--dark-muted)}
.foot__legal ul{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;list-style:none;margin:0;padding:0}
@media (max-width:900px){.foot{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.foot{grid-template-columns:minmax(0,1fr)}}

/* ── 11 · hero scaffolding (variants are per-page, these are the shared bones) ── */
.hero{position:relative;overflow:hidden}
.hero .display{max-width:21ch}
/* A display headline breaks at SPACES. Hyphenating "Schlüsselnotdienst" across two lines in an
   H1 reads as a typo at hero size, however correct the break point is — hyphens stay on for the
   body, where a 40-char compound really would overflow a narrow column. */
h1,.display{hyphens:manual;-webkit-hyphens:manual}
.hero__panel{background:var(--surface);border:1px solid var(--line);padding:clamp(1.5rem,3.4vw,2.75rem);
  box-shadow:var(--shadow-1)}
.hero__panel--dark{background:var(--dark);border-color:var(--line-dark);color:#fff;box-shadow:none}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:var(--sp-4)}
.hero__meta{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin-top:var(--sp-4);font-size:.9375rem;
  color:var(--muted);list-style:none;padding:0}
.hero__meta li{display:flex;align-items:center;gap:.45rem;margin:0}
.hero__meta li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cta);flex:none}
.section--dark .hero__meta{color:var(--dark-muted)}
.hero--split{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-6);align-items:center}
.hero--split.is-stretch{align-items:stretch}
.hero--split.is-stretch > div > .media,.hero--split.is-stretch > div > figure,
.hero--split.is-stretch > div > figure > .media{height:100%;aspect-ratio:auto;min-height:19rem}
.hero--split-wide{grid-template-columns:1.25fr .75fr}
@media (max-width:900px){.hero--split,.hero--split-wide{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}}
/* the vertical trust rail overhanging the hero — open-bottom border. Carries qualifications, never numbers. */
.trustrail{border:1px solid var(--line-strong);border-bottom:0;background:var(--surface);padding:var(--sp-3) var(--sp-4)}
.trustrail ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.trustrail li{display:flex;gap:.6rem;align-items:flex-start;font-size:.9375rem;font-weight:700;color:var(--head);margin:0}
.trustrail li::before{content:"";flex:none;width:8px;height:8px;margin-top:.42em;background:var(--cta)}
/* the emergency bar */
.embar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);background:var(--danger);
  color:#fff;padding:.85rem var(--sp-4);font-weight:800}
.embar,.embar p,.embar li{color:#fff}
.section--dark .embar a,.section--primary .embar a,.embar a{color:#fff;text-decoration:underline;
  text-underline-offset:.18em;font-weight:800}
.section--dark .embar a:hover,.embar a:hover{color:#fff;text-decoration-thickness:2px}
.embar svg.i{width:1.3em;height:1.3em}

/* ── 12 · utility ───────────────────────────────────────────────────────── */
.stack>*+*{margin-top:var(--sp-3)}
.stack--lg>*+*{margin-top:var(--sp-4)}
.stack--xl>*+*{margin-top:var(--sp-5)}
.center{text-align:center}
.center-x{margin-inline:auto}
.flexrow{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.nowrap{white-space:nowrap}
.tabnum{font-variant-numeric:tabular-nums}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.full{width:100%}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}

/* ── 13 · motion ────────────────────────────────────────────────────────── */
/* The reveal is a RISE, not a fade. stahl-kupfer's reference does `fade + 18px rise`, but an
   `opacity:0` text block is invisible text: axe computes its blended contrast (≈1.03:1) and any
   render that never scrolls — a crawler, a print, a failed IntersectionObserver — leaves it that
   way. Animating only the transform keeps the motion, and the words are legible at every instant. */
.reveal{transform:translateY(18px);transition:transform .62s cubic-bezier(.2,.7,.3,1)}
.reveal.in{transform:none}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}.d4{transition-delay:.28s}
/* JS-off guard — without this .reveal blanks most of the page with scripting disabled */
.no-js .reveal{transform:none}
.no-js .media--reveal img{clip-path:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .reveal{transform:none}
  .media--reveal img{clip-path:none}
  .card:hover,.btn:hover{transform:none}
}

/* ── 14 · print ─────────────────────────────────────────────────────────── */
@media print{
  .site-header,.callbar,.to-top,.drawer{display:none!important}
  body{padding-bottom:0;background:#fff;font-size:11pt}
  .section{padding-block:1rem;background:#fff!important;color:#000!important}
  a[href^="tel:"]::after{content:" (" attr(href) ")";font-size:.85em}
}