/* ============================================================
   punkt.css — Designsystem „Punkt." · sekape.de Relaunch
   Eine Datei, keine Importe. Farben: #D5084F / #F2407C / #A8063E,
   Weiß, Tinte #111013, Panelgrau #f5f5f6. Schrift: Inter (400/600/700).
   Animationen ausschließlich transform/opacity.

   Mathematische Grundlage (Stand 2026-07-18):
   · Goldener Schnitt φ = 1,618 — Grundzeilenabstand (line-height 1.618),
     Typo-Leiter der clamp()-Endpunkte in Halbschritten √φ ≈ 1,272
     (18 → 22,9 → 29,1 → 37 → 47 → 60 → 76 px).
   · Fibonacci-Raster 8 · 13 · 21 · 34 · 55 · 89 für Abstände
     (Tokens --s-8 … --s-89); neue Regeln nutzen ausschließlich
     diese Stufen.
   · Interaktionszustände WCAG-2.2-AA-kalibriert: --rot-hover
     #E11E61 hält 4,6:1 auf Weiß (Hover-Füllung mit weißem Text);
     die Markentriade #D5084F/#F2407C/#A8063E bleibt unverändert.
   ============================================================ */

/* ---------- Fonts: Inter, selbst gehostet, metrik-angepasster Fallback ---------- */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("fonts/inter-latin-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("fonts/inter-latin-600.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("fonts/inter-latin-700.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Metrik-angepasster Arial-Fallback gegen Layout-Sprünge */
@font-face{
  font-family:"Inter Fallback";
  src:local("Arial");
  size-adjust:107%;
  ascent-override:90%;
  descent-override:22.5%;
  line-gap-override:0%;
}

/* ---------- Tokens ---------- */
:root{
  --rot:#D5084F;
  --rot-hell:#F2407C;
  --rot-hover:#E11E61; /* hellster Rotton mit ≥4,5:1 auf weißem Text (AA) */
  --rot-tief:#A8063E;
  --phi:1.618;
  --s-8:8px;--s-13:13px;--s-21:21px;--s-34:34px;--s-55:55px;--s-89:89px;
  --tinte:#111013;
  --grau:#f5f5f6;
  --weiss:#ffffff;
  --hairline:rgba(17,16,19,.12);
  --font:"Inter","Inter Fallback",Arial,sans-serif;
  --wrap:1200px;
  --pad:clamp(20px,4.5vw,56px);
  --header-h:clamp(64px,7.5vw,96px);
  --speed:.28s;
  --speed-slow:.55s;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.22,.61,.36,1);
  --radius-pill:999px;
  --shadow-frost:0 12px 40px rgba(17,16,19,.14);
}

/* View Transitions zwischen den Seiten */
@view-transition{navigation:auto}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes vt-out{from{opacity:1}to{opacity:0}}
::view-transition-old(root){animation:vt-out .22s var(--ease) both}
::view-transition-new(root){animation:vt-in .3s var(--ease) both}

/* ---------- Reset & Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;hanging-punctuation:first allow-end}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  font-size:clamp(1rem,.42vw + .92rem,1.125rem);
  line-height:var(--phi);
  color:var(--tinte);
  background:var(--weiss);
  overflow-wrap:break-word;
  font-kerning:normal;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p a,li a,.prose a{text-decoration:underline;text-decoration-color:var(--rot);text-decoration-thickness:2px;text-underline-offset:.2em}
p button[data-cookie-settings]{text-decoration:underline;text-decoration-color:var(--rot);text-decoration-thickness:2px;text-underline-offset:.2em;text-align:left}
/* Flächen-Buttons sind keine Fließtext-Links: die Unterstreichung der
   Content-Link-Regel (höhere Spezifität als die Pill-Basisregel) greift
   hier nicht */
a.pill,a.btn-primary,a.route-btn,a.pill-tel{text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
address{font-style:normal}
:focus-visible{outline:3px solid var(--rot);outline-offset:3px;border-radius:4px}
::selection{background:var(--rot);color:var(--weiss)}
h1,h2,h3,h4{line-height:1.12;margin:0 0 .5em;font-weight:700;letter-spacing:-0.022em;text-wrap:balance}
p{margin:0 0 1em;text-wrap:pretty}

/* ---------- Mikrotypografie ---------- */
/* Deutsche Silbentrennung im Fließtext (lang="de"); Überschriften bleiben ungetrennt */
.prose p,.prose li,.topic-hero__lead,.section-lead,.quick-trust__text,
.legal-main p,.legal-main li,.page-content p,.page-content li,
.topic-callout p,.topic-faq__item p,.topic-cta p,
.author-box__intro,.author-box__note,#es-hint,.es-check span{
  -webkit-hyphens:auto;hyphens:auto;
  -webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:4;
  hyphenate-limit-chars:10 4 4;
}
/* Deutsche Anführungszeichen für <q> */
q{quotes:"\201E" "\201C" "\201A" "\2018"}
/* Listenpunkte als Markenpunkt */
.prose li::marker,.legal-main li::marker,.page-content li::marker{color:var(--rot)}
/* Ankerziele landen unterhalb des fixierten Headers */
[id]{scroll-margin-top:calc(var(--header-h) + var(--s-21))}
/* Platzhaltertext mit AA-Kontrast (≈4,9:1) */
::placeholder{color:rgba(17,16,19,.6);opacity:1}

/* Skip-Link */
.skip-link{
  position:fixed;left:16px;top:-64px;z-index:400;
  background:var(--tinte);color:var(--weiss);
  padding:.7em 1.2em;border-radius:var(--radius-pill);
  font-weight:600;transition:transform var(--speed) var(--ease);
}
.skip-link:focus{top:16px;outline-color:var(--rot)}

/* Visually hidden (Text bleibt für Screenreader und Textabgleich erhalten) */
.vh{
  position:absolute!important;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
main.wrap{max-width:none;padding-inline:0}

.no-js-note{
  background:var(--grau);border:1px solid var(--hairline);
  padding:.8em 1.2em;margin:1em auto;max-width:var(--wrap);font-size:.95rem;
}

/* ============================================================
   HEADER: nur Logo + Hamburger, gefrostet ab Scroll,
   darüber 2 px rote Lesefortschrittslinie
   ============================================================ */
.progressline{
  position:fixed;inset:0 0 auto 0;height:2px;z-index:320;
  background:var(--rot);
  transform:scaleX(var(--fx-scroll,0));
  transform-origin:left center;
  pointer-events:none;
}
.header{
  position:fixed;inset:2px 0 auto 0;z-index:300;
  display:flex;align-items:center;justify-content:space-between;
  height:var(--header-h);
  padding-inline:clamp(16px,3vw,40px);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:opacity var(--speed) var(--ease);
}
.header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(255,255,255,.74);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  backdrop-filter:blur(16px) saturate(1.4);
  opacity:0;
  transition:opacity var(--speed) var(--ease);
}
body.is-scrolled .header{border-bottom-color:var(--hairline)}
body.is-scrolled .header::before{opacity:1}
.brand{display:inline-flex;align-items:center}
.brand img{height:clamp(30px,4.2vw,54px);width:auto}

/* Hamburger — exakt so groß wie das Offcanvas-Kreuz */
.hamburger{
  position:relative;z-index:360;
  width:68px;height:68px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;
}
.hamburger .bars{
  position:relative;display:block;
  width:clamp(34px,3.4vw,44px);height:22px;
}
.hamburger .bar,
.hamburger .bars::before,
.hamburger .bars::after{
  content:"";position:absolute;left:0;right:0;height:3px;border-radius:2px;
  background:var(--tinte);
  transition:transform var(--speed-slow) var(--spring),opacity var(--speed) var(--ease),background-color var(--speed-slow) var(--ease);
}
.hamburger .bars::before{top:0}
.hamburger .bar{top:50%;transform:translateY(-50%)}
.hamburger .bars::after{bottom:0}
.hamburger:hover .bar{transform:translateY(-50%) scaleX(.72);transform-origin:left}
/* Morph zu X */
body.is-nav-open .hamburger .bars::before{transform:translateY(9.5px) rotate(45deg)}
body.is-nav-open .hamburger .bars::after{transform:translateY(-9.5px) rotate(-45deg)}
body.is-nav-open .hamburger .bar{opacity:0;transform:translateY(-50%) scaleX(.2)}
/* Rotfärbung bei Hover/Fokus — in beiden Zuständen (Balken wie X) */
.hamburger:hover .bar,
.hamburger:hover .bars::before,
.hamburger:hover .bars::after,
.hamburger:focus-visible .bar,
.hamburger:focus-visible .bars::before,
.hamburger:focus-visible .bars::after{background:var(--rot)}

/* ============================================================
   OFFCANVAS: Vollbild-Milchglas, Menüwörter in Überschriftengröße
   mit rotem Punkt, gestaffeltes Einfliegen
   ============================================================ */
.offcanvas{position:fixed;inset:0;z-index:340;visibility:hidden}
.offcanvas[data-open="true"]{visibility:visible}
.offcanvas__backdrop{
  position:absolute;inset:0;
  background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:blur(24px) saturate(1.3);
  backdrop-filter:blur(24px) saturate(1.3);
  opacity:0;transition:opacity .32s var(--ease);
}
.offcanvas[data-open="true"] .offcanvas__backdrop{opacity:1}
.offcanvas__panel{
  position:relative;height:100%;overflow-y:auto;
  overscroll-behavior:contain;
  display:flex;flex-direction:column;
  padding:calc(var(--header-h) + 12px) clamp(24px,7vw,96px) 48px;
  outline:none;
}
.offcanvas__panel .nav{margin-block:auto}
.offcanvas__close{
  position:absolute;top:10px;right:clamp(10px,2.4vw,32px);z-index:5;
  width:68px;height:68px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--tinte);
  transition:color var(--speed) var(--ease),transform var(--speed-slow) var(--spring);
}
.offcanvas__close svg{width:clamp(34px,3.4vw,44px);height:clamp(34px,3.4vw,44px)}
.offcanvas__close:hover{color:var(--rot);transform:rotate(90deg)}
.nav{display:flex;flex-direction:column;gap:clamp(2px,.7vh,10px)}
.nav__link{
  width:fit-content;
  font-size:clamp(1.8rem,1.1rem + 2.4vw,2.7rem);
  font-weight:700;letter-spacing:-0.02em;line-height:1.25;
  opacity:0;transform:translateY(26px);
}
.offcanvas[data-open="true"] .nav__link{
  opacity:1;transform:none;
  transition:opacity .5s var(--ease),transform .6s var(--spring);
  transition-delay:calc(var(--i,0)*45ms + 60ms);
}
.nav__link.is-current{color:var(--rot)}
.nav__link.is-current::after{background:var(--tinte)}

/* ============================================================
   Markenpunkt hinter Wörtern (dekoratives ::after, kein Textinhalt)
   ============================================================ */
.dot::after{
  content:"";display:inline-block;vertical-align:baseline;
  width:.17em;height:.17em;border-radius:50%;
  margin-left:.1em;
  background:var(--rot);
  transform:scale(1);
  transition:background var(--speed-slow) var(--ease);
}
.is-revealed.dot::after,
.is-revealed .dot::after,
.offcanvas[data-open="true"] .dot::after{
  animation:dotPop .6s var(--spring) both;
  animation-delay:.18s;
}
@keyframes dotPop{
  0%{transform:scale(0)}
  70%{transform:scale(1.35)}
  100%{transform:scale(1)}
}

/* ============================================================
   Signature-Effekt „Ink": Buchstaben färben sich von links
   nach rechts rot ein und wieder aus
   ============================================================ */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .ink{
    background-image:linear-gradient(90deg,var(--rot) 0 50%,currentColor 50% 100%);
    background-size:200% 100%;
    background-position:100% 0;
    background-repeat:no-repeat;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    transition:background-position var(--speed-slow) var(--ease);
  }
  .ink:hover,.ink:focus-visible,a:hover .ink,a:focus-visible .ink,
  .acc__summary:hover .ink,.acc__summary:focus-visible .ink{background-position:0 0}
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .ink{transition:color var(--speed-slow) var(--ease)}
  .ink:hover,.ink:focus-visible,a:hover .ink,a:focus-visible .ink,
  .acc__summary:hover .ink,.acc__summary:focus-visible .ink{color:var(--rot)}
}
/* Punkte hinter Ink-Wörtern: eigene Füllfarbe, gegenläufiger Tausch */
.ink.dot::after{background:var(--rot)}
.ink.dot:hover::after,.ink.dot:focus-visible::after{background:var(--tinte)}

/* ============================================================
   Scroll-gebundene Titel-Unterstriche (4 px, exakt Wortbreite)
   ============================================================ */
.u-line{position:relative;width:fit-content;max-width:100%}
.u-line::before{
  content:"";position:absolute;left:0;bottom:-.16em;
  width:100%;height:4px;background:var(--rot);
  transform:scaleX(0);transform-origin:left center;
}
/* Einmaliges, langsames Ausfahren nach Sichtbarwerden — Timing wie Livesite (1100 ms, 150 ms Verzögerung) */
.u-line::before{transition:transform 1100ms cubic-bezier(.22,.8,.3,1) 150ms}
.u-line.is-lined::before{transform:scaleX(1)}
body.no-motion .u-line::before{transition:none}

/* ============================================================
   Rot/Schwarz-Wortspiel auf großen Überschriften
   ============================================================ */
.kern em,em.kern{font-style:normal;color:var(--rot)}

/* ============================================================
   Blur-up-Reveal mit Stagger
   ============================================================ */
.reveal-on-scroll{
  opacity:0;
  transform:translateY(18px);
  filter:blur(4px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease);
}
.reveal-on-scroll.is-revealed{opacity:1;transform:none;filter:blur(0)}

/* ============================================================
   Pills — ausschließlich für Handlungsaufrufe
   ============================================================ */
.pill,.btn-primary,.route-btn,.pill-tel{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.78em 1.7em;
  border-radius:var(--radius-pill);
  font-weight:600;line-height:1.25;
  text-decoration:none;
  border:2px solid var(--rot);
  transition:transform var(--speed-slow) var(--spring),background var(--speed) var(--ease),color var(--speed) var(--ease),box-shadow var(--speed) var(--ease);
}
.btn-primary{background:var(--rot);color:var(--weiss)}
.btn-primary:hover,.btn-primary:focus-visible{
  transform:scale(1.06);
  background:var(--rot-hover);border-color:var(--rot-hover);
  box-shadow:0 10px 30px rgba(213,8,79,.35);
}
.btn-primary:active{background:var(--rot-tief);border-color:var(--rot-tief);transform:scale(1.01)}
.route-btn,.pill-tel{background:var(--weiss);color:var(--tinte)}
/* Sicherheitsnetz: Flächen-Buttons vertragen den Text-Clip der Ink-Signatur
   nicht — ihr background-Shorthand löscht den Gradienten, während die
   transparente Textfüllung bestehen bliebe und den Text unsichtbar machte.
   Landet die ink-Klasse doch einmal auf einer Pill, bleibt der Text lesbar. */
.pill.ink,.btn-primary.ink,.route-btn.ink,.pill-tel.ink{
  background-image:none;
  -webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:currentColor;
}
.route-btn:hover,.route-btn:focus-visible,
.pill-tel:hover,.pill-tel:focus-visible{
  transform:scale(1.06);
  background:var(--rot);color:var(--weiss);
  box-shadow:0 10px 30px rgba(213,8,79,.3);
}

/* ============================================================
   HERO: randloser Crossfade-Slider, fast viewportfüllend,
   davor der Textblock; dezenter Ken-Burns, Scroll-Parallax
   ============================================================ */
.hero{background:var(--weiss)}
.hero__viewport{
  position:relative;overflow:hidden;
  margin-top:calc(var(--header-h) + 2px);
  height:min(74svh,720px);
  min-height:360px;
}
.hero__slide{
  position:absolute;inset:0;margin:0;
  opacity:0;
  transition:opacity 1.4s var(--ease);
}
.hero__slide img{
  width:100%;height:112%;object-fit:cover;object-position:center 30%;
  transform:translateY(var(--par,0)) scale(1.001);
}
.hero__slide.is-active{opacity:1}
.hero__slide.is-active img{animation:kenburns 6.4s var(--ease) both}
@keyframes kenburns{
  from{transform:translateY(var(--par,0)) scale(1.06)}
  to{transform:translateY(var(--par,0)) scale(1.001)}
}
/* Mobil: das Querformat-Motiv (drei Partner nebeneinander) wird nicht mehr
   in einen Hochformat-Ausschnitt gezwungen — der Viewport folgt dem Bild
   (4:3), die Parallax-Höhenreserve entfällt, der Ken-Burns-Zoom startet
   flacher, damit niemand aus dem Bild geschnitten wird */
@media (max-width:700px){
  .hero__viewport{height:auto;aspect-ratio:4/3;min-height:0;max-height:62svh}
  .hero__slide img{height:100%}
  .hero__slide.is-active img{animation-name:kenburnsMobil}
}
@keyframes kenburnsMobil{
  from{transform:translateY(var(--par,0)) scale(1.045)}
  to{transform:translateY(var(--par,0)) scale(1.001)}
}
.hero__overlay{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(18px,4vw,44px) clamp(20px,4.5vw,56px);
  background:linear-gradient(to top,rgba(17,16,19,.55),rgba(17,16,19,0));
}
.hero__brand{
  margin:0;color:var(--weiss);
  font-size:clamp(1.3rem,.8rem + 2.4vw,2.4rem);
  font-weight:700;letter-spacing:-0.02em;
}
.hero__claim{
  max-width:var(--wrap);margin-inline:auto;
  padding:clamp(40px,7vw,96px) var(--pad) clamp(28px,4vw,56px);
}
.hero__title{
  font-size:clamp(2.5rem,1.1rem + 5.6vw,5.2rem);
  letter-spacing:-0.03em;line-height:1.04;
  margin-bottom:.35em;
}
.hero__subtitle{
  font-size:clamp(1.15rem,.9rem + 1.2vw,1.7rem);
  font-weight:600;margin:0 0 1.1em;
}
/* Pinselstrich-Unterstreichung: 1:1 von der Livesite übernommen
   (600x44-Trockenbürsten-SVG, .62em hoch; fährt per clip-path in 2,6 s
   nach Sichtbarwerden aus — Trigger: setupBrushDraw, IO threshold .6) */
.u-brush{position:relative;display:inline-block;padding-bottom:.52em}
.u-brush::after{content:"";position:absolute;left:0;right:.55em;bottom:0;height:.62em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 44' preserveAspectRatio='none'%3E%3Cpath d='M6 15 C 90 15.5, 180 13, 280 9.5 C 380 6, 480 3.5, 583 1.5 L 581 8 C 490 14, 398 22, 302 30 C 205 37.5, 100 41, 7 40 C 3 32, 2 22, 6 15 Z' fill='%23D5084F'/%3E%3Cpath d='M70 24 C 150 22.5, 230 18.5, 300 14.5 L 299 17 C 232 20.5, 152 24.5, 71 26.3 Z' fill='%23FFFFFF' opacity='.9'/%3E%3Cpath d='M150 31 C 220 28.5, 290 24.5, 360 20 L 359 21.6 C 292 25.8, 222 29.8, 151 32.6 Z' fill='%23FFFFFF' opacity='.8'/%3E%3Cpath d='M380 12 L 470 8 L 470 9.6 L 381 13.8 Z' fill='%23FFFFFF' opacity='.85'/%3E%3Cpath d='M40 34 L 110 31.5 L 110 33 L 41 35.8 Z' fill='%23FFFFFF' opacity='.7'/%3E%3Cpath d='M14 41.5 C 60 42, 110 40, 160 37 L 159 39.4 C 112 42.4, 62 43.6, 15 43.4 Z' fill='%23D5084F' opacity='.45'/%3E%3Cpath d='M230 36 C 280 33.5, 330 30, 380 26 L 379 28.4 C 332 32.2, 282 35.6, 231 38 Z' fill='%23D5084F' opacity='.4'/%3E%3Cpath d='M300 7 L 400 3.5 L 400.5 5.5 L 301 9 Z' fill='%23D5084F' opacity='.35'/%3E%3Cpath d='M470 10 L 562 5 L 562 7.2 L 471 12.2 Z' fill='%23D5084F' opacity='.45'/%3E%3Cpath d='M495 14 L 574 10 L 574 11.6 L 496 15.6 Z' fill='%23D5084F' opacity='.3'/%3E%3C/svg%3E") no-repeat center/100% 100%;pointer-events:none}
.u-brush--anim::after{clip-path:inset(-25% 100% -25% 0);transition:clip-path 2.6s cubic-bezier(.3,.55,.25,1) .25s}
.u-brush--anim.is-drawn::after{clip-path:inset(-25% 0 -25% 0)}

.hero__actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ============================================================
   Brand-Banner: pure Typo-Zeile
   ============================================================ */
.brand-banner{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.brand-banner__inner{
  max-width:var(--wrap);margin-inline:auto;
  padding:clamp(20px,3.4vw,40px) var(--pad);
  font-size:clamp(1.15rem,.9rem + 1.4vw,1.8rem);
  font-weight:600;letter-spacing:-0.015em;text-wrap:balance;
}

/* ============================================================
   Schnelleinstieg: drei Karten, Fragezeichen als roter Akzent
   ============================================================ */
.quick-trust__inner{
  max-width:var(--wrap);margin-inline:auto;
  padding:clamp(26px,4vw,52px) var(--pad);
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,3vw,40px);
}
@media (max-width:900px){.quick-trust__inner{grid-template-columns:1fr}}
.quick-trust__item{
  display:flex;flex-direction:column;gap:14px;
  padding-bottom:20px;border-bottom:1px solid var(--hairline);
}
.quick-trust__main{display:block}
.quick-trust__head{
  display:flex;align-items:baseline;gap:.4em;
  font-size:clamp(1.3rem,1rem + 1.3vw,1.75rem);
  letter-spacing:-0.02em;line-height:1.2;
  margin-bottom:.4em;
}
.quick-trust__head strong{font-weight:700;transition:color var(--speed-slow) var(--ease)}
/* Fragezeichen = roter Akzent, tauscht beim Hover gegenläufig mit dem Wort */
.qmark{color:var(--rot);transition:color var(--speed-slow) var(--ease)}
.quick-trust__main:hover .qmark,.quick-trust__main:focus-visible .qmark{color:var(--tinte)}
.quick-trust__main:hover strong,.quick-trust__main:focus-visible strong{color:var(--rot)}
.quick-trust__chev{
  margin-left:auto;flex:none;position:relative;top:-.05em;
  width:.62em;height:.62em;
  border-right:3px solid var(--tinte);border-top:3px solid var(--tinte);
  transform:rotate(45deg);
  transition:transform var(--speed-slow) var(--spring),border-color var(--speed) var(--ease);
}
.quick-trust__main:hover .quick-trust__chev,
.quick-trust__main:focus-visible .quick-trust__chev{
  border-color:var(--rot);
  transform:rotate(45deg) translate(4px,-4px);
}
.quick-trust__text{display:block;color:var(--tinte);font-size:1rem;line-height:1.55}
.quick-trust__tel{width:fit-content}

/* ============================================================
   Kennzahlen
   ============================================================ */
.stats-band{background:var(--grau)}
.stats-band__inner{
  max-width:var(--wrap);margin-inline:auto;
  padding:clamp(30px,4.6vw,60px) var(--pad);
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2.6vw,36px);
}
@media (max-width:900px){.stats-band__inner{grid-template-columns:repeat(2,1fr)}}
.stat__num{
  display:block;
  font-size:clamp(2.2rem,1.2rem + 3.6vw,4rem);
  font-weight:700;letter-spacing:-0.03em;line-height:1;
  color:var(--rot);
}
.stat__label{display:block;margin-top:.35em;font-weight:600;font-size:.98rem}

/* ============================================================
   Sektionen
   ============================================================ */
main{display:block}
section{padding:0}
.section__wrap{
  max-width:var(--wrap);margin-inline:auto;
  padding:clamp(48px,7vw,110px) var(--pad);
}
.section__title{
  font-size:clamp(2rem,1.1rem + 3.6vw,3.5rem);
  letter-spacing:-0.03em;
  margin-bottom:.7em;
}
.section-lead{
  max-width:56ch;
  font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);
  margin-bottom:2em;
}

/* ============================================================
   Themenlisten: zwei Spalten typografischer Zeilen,
   feine Hairlines, Chevron rechts, Einzug + Ink beim Hover
   ============================================================ */
.topic-rows{
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(28px,4.5vw,72px);
  border-top:1px solid var(--hairline);
}
@media (max-width:820px){.topic-rows{grid-template-columns:1fr}}
.topic-row{
  display:flex;align-items:center;gap:14px;
  padding:clamp(14px,1.8vw,22px) 2px;
  border-bottom:1px solid var(--hairline);
  transition:transform var(--speed-slow) var(--spring);
}
.topic-row:hover,.topic-row:focus-visible{transform:translateX(10px)}
.topic-row__title{
  margin:0;
  font-size:clamp(1.08rem,1rem + .5vw,1.32rem);
  font-weight:600;letter-spacing:-0.012em;line-height:1.3;
}
.topic-row__chev{
  margin-left:auto;flex:none;
  width:.55em;height:.55em;
  border-right:2.5px solid var(--tinte);border-top:2.5px solid var(--tinte);
  transform:rotate(45deg);
  transition:transform var(--speed-slow) var(--spring),border-color var(--speed) var(--ease);
}
.topic-row:hover .topic-row__chev,.topic-row:focus-visible .topic-row__chev{
  border-color:var(--rot);
  transform:rotate(45deg) translate(5px,-5px);
}
.topic-more-link{font-weight:600}
.topic-more-link a{text-decoration:none}

/* ============================================================
   Bild-Breaker („Wandbilder") mit sanftem Parallax
   ============================================================ */
.breaker{
  position:relative;overflow:hidden;
  width:100vw;margin-left:calc(50% - 50vw);
  height:clamp(300px,52vh,560px);
}
.breaker img{
  width:100%;height:126%;object-fit:cover;
  transform:translateY(var(--par,0));
}
/* Marken-Breaker: Wandschriftzug muss sichtbar bleiben — oben verankert,
   Beschnitt nur unten, dafür ohne Parallaxe (kein Verschieben des Logos) */
.breaker--brand img{height:100%;object-position:50% 0;transform:none}
/* Mobil: das Wandmotiv vollständig zeigen — der Streifen folgt dem
   Bildformat (3:2), nichts vom Schriftzug wird abgeschnitten */
@media (max-width:700px){
  .breaker{height:auto;aspect-ratio:3/2;max-height:56svh}
  .breaker img{height:100%}
}

/* ============================================================
   Köpfe & Möglichmacherinnen: horizontale Snap-Schiene
   ============================================================ */
.people-rail-shell{position:relative}
.people-rail{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:clamp(280px,32vw,400px);
  gap:clamp(18px,2.6vw,32px);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding:8px 4px 22px;
  scrollbar-width:none;
  cursor:grab;
}
.people-rail::-webkit-scrollbar{display:none}
.people-rail.is-dragging{cursor:grabbing;scroll-snap-type:none}
.people-cell{scroll-snap-align:start;display:flex;flex-direction:column;gap:16px}
.people-figure{
  position:relative;margin:0;overflow:hidden;
  aspect-ratio:4/5;background:var(--grau);
}
.people-figure img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1);
  transform:scale(1.001);
  transition:filter .7s var(--ease),transform .9s var(--ease);
}
.people-cell:hover .people-figure img,
.people-cell:focus-within .people-figure img{
  filter:grayscale(0);
  transform:scale(1.045);
}
/* Stretched-Link-Muster: unsichtbarer Vollflächen-Link als Ebene */
.people-figure__link{position:absolute;inset:0;z-index:2}
/* LinkedIn: weißer Chip oben rechts, eigener Link mit höherem z-index */
.people-li{
  position:absolute;top:12px;right:12px;z-index:3;
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.92);
  box-shadow:0 4px 14px rgba(17,16,19,.18);
  transition:transform var(--speed-slow) var(--spring);
}
.people-li:hover,.people-li:focus-visible{transform:scale(1.12)}
.people-li img{width:24px;height:20px;filter:none}
/* Sattes rotes Badge unten links, bündig zur Kante */
.people-badge{
  position:absolute;left:0;bottom:0;z-index:3;
  background:var(--rot);color:var(--weiss);
  padding:.7em 1.1em;
  pointer-events:none;
}
.people-badge strong{display:block;font-size:1.08rem;letter-spacing:-0.012em;line-height:1.2}
.people-badge span{display:block;font-size:.86rem;font-weight:400;opacity:.94}
/* Abgedunkelter Schleier mit „Mehr über [Name] →" (nur Hover, aria-hidden) */
.people-veil{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  background:rgba(17,16,19,.46);
  color:var(--weiss);font-weight:600;font-size:1.05rem;text-align:center;padding:1em;
  opacity:0;transition:opacity .4s var(--ease);
  pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .people-cell:hover .people-veil{opacity:1}
}
/* Große, runde Frosted-Pfeiltasten über der Schiene */
.rail-arrow{
  position:absolute;top:50%;z-index:5;
  translate:0 -50%;
  width:clamp(54px,5.4vw,68px);height:clamp(54px,5.4vw,68px);
  border-radius:50%;
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);
  backdrop-filter:blur(12px) saturate(1.3);
  box-shadow:var(--shadow-frost);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--rot);
  opacity:0;transform:scale(.7);
  pointer-events:none;
  transition:opacity var(--speed) var(--ease),transform var(--speed-slow) var(--spring);
}
.rail-arrow svg{width:44%;height:44%}
.rail-arrow.is-shown{opacity:1;transform:scale(1);pointer-events:auto}
.rail-arrow:hover{transform:scale(1.1)}
.rail-arrow--prev{left:calc(var(--pad)*-.35)}
.rail-arrow--next{right:calc(var(--pad)*-.35)}
@media (max-width:820px){
  .rail-arrow--prev{left:4px}
  .rail-arrow--next{right:4px}
}
/* Direktauswahl (per Fokus sichtbar) */
.people-quicknav{display:flex;flex-wrap:wrap;gap:8px}
.people-quicknav button{
  position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.people-quicknav button:focus-visible{
  position:static;width:auto;height:auto;margin:0;overflow:visible;
  clip:auto;clip-path:none;white-space:normal;
  padding:.4em .9em;border:2px solid var(--rot);border-radius:var(--radius-pill);
  font-weight:600;
}

/* ============================================================
   Standorte
   ============================================================ */
.locations{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(20px,3.4vw,52px);
  border-top:1px solid var(--hairline);
  padding-top:clamp(18px,2.6vw,32px);
}
@media (max-width:700px){.locations{grid-template-columns:1fr}}
.subhead{
  font-size:clamp(1.2rem,1.05rem + .8vw,1.6rem);
  letter-spacing:-0.018em;
  margin-bottom:.45em;
}
.area-note{margin-top:2.2em;max-width:70ch}

/* ============================================================
   Bewertungen
   ============================================================ */
.reviews-section{background:var(--grau)}
.reviews-intro{max-width:62ch;margin-bottom:2em}
.reviews-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.8vw,40px);
}
@media (max-width:960px){.reviews-grid{grid-template-columns:1fr}}
.review-person__name{
  font-size:1.25rem;
  padding-bottom:.5em;border-bottom:1px solid var(--hairline);
}
.review-card{padding:1.1em 0;border-bottom:1px solid var(--hairline)}
.review-card__tag{
  font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--rot);margin-bottom:.5em;
}
.review-card blockquote{margin:0 0 .7em;font-size:1rem;line-height:1.6}
.review-card__author{font-size:.85rem;color:var(--tinte);opacity:.72;margin:0}
.reviews-action{margin-top:2.2em}

/* ============================================================
   Podcast
   ============================================================ */
.podcast-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(20px,3.2vw,48px);
}
@media (max-width:820px){.podcast-grid{grid-template-columns:1fr}}
.podcast-card{
  padding-top:1.2em;border-top:1px solid var(--hairline);
}
.podcast-card__badge{
  font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--rot);margin-bottom:.6em;
}
.podcast-card__title{font-size:clamp(1.3rem,1.1rem + .9vw,1.7rem);margin-bottom:.25em}
.podcast-card__guest{font-weight:600;margin-bottom:.6em}
.podcast-card__teaser{font-size:1rem}

/* ============================================================
   Ersteinschätzung-Formular
   ============================================================ */
.es-form{max-width:820px}
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.acc{border-top:1px solid var(--hairline);margin:0}
.acc:last-of-type{border-bottom:1px solid var(--hairline)}
.acc__summary{
  list-style:none;display:flex;align-items:center;gap:14px;
  padding:1em 2px;cursor:pointer;
}
.acc__summary::-webkit-details-marker{display:none}
.acc__summary .subhead{margin:0;font-size:clamp(1.05rem,1rem + .4vw,1.3rem)}
.acc__chev{
  margin-left:auto;flex:none;
  width:.55em;height:.55em;
  border-right:2.5px solid var(--tinte);border-bottom:2.5px solid var(--tinte);
  transform:rotate(45deg);
  transition:transform var(--speed-slow) var(--spring),border-color var(--speed) var(--ease);
}
.acc[open] .acc__chev,details[open]>.acc__summary .acc__chev{transform:rotate(225deg)}
.acc__summary:hover .acc__chev{border-color:var(--rot)}
.acc__panel{overflow:hidden;transition:height var(--speed-slow) var(--ease),opacity var(--speed-slow) var(--ease)}
.acc__panel-inner{padding:4px 2px 18px}
.es-fieldset{border:0;padding:0;margin:0}
.es-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.es-check{
  display:flex;align-items:flex-start;gap:.6em;
  padding:.55em .8em;border:1px solid var(--hairline);border-radius:12px;
  cursor:pointer;
  transition:border-color var(--speed) var(--ease),background var(--speed) var(--ease);
}
.es-check:hover{border-color:var(--rot)}
.es-check.is-checked{border-color:var(--rot);background:rgba(213,8,79,.05)}
.es-check:has(input:focus-visible){outline:3px solid var(--rot);outline-offset:2px}
.es-check input{accent-color:var(--rot);margin-top:.28em;flex:none}
.es-check--consent{border:0;padding:0;border-radius:0}
.es-check--consent:hover{border:0}
.es-group{margin-top:1.4em;display:flex;flex-direction:column;gap:.4em}
.es-group label.subhead{font-size:1.02rem;margin:0}
.es-group input,.es-group select,.es-group textarea{
  font:inherit;color:inherit;
  padding:.7em .9em;
  border:1px solid var(--hairline);border-radius:12px;
  background:var(--weiss);
  max-width:520px;
}
.es-group--full input,.es-group--full textarea{max-width:none}
.es-group input:focus-visible,.es-group select:focus-visible,.es-group textarea:focus-visible{
  outline:3px solid var(--rot);outline-offset:1px;border-color:var(--rot);
}
.field-error{color:var(--rot-tief);font-weight:600;font-size:.92rem;margin-top:.3em}
.es-status{margin:1.2em 0 0;font-weight:600;opacity:0;transition:opacity var(--speed) var(--ease)}
.es-status.is-visible{opacity:1}
.es-status--success{color:var(--tinte)}
.es-status--error{color:var(--rot-tief)}
.es-actions{margin-top:1.6em}
#es-hint{max-width:62ch}

/* ============================================================
   Kontakt & Bürozeiten
   ============================================================ */
.contact-block{
  padding:1.2em 0;border-bottom:1px solid var(--hairline);
}
.contact-block:first-of-type{border-top:1px solid var(--hairline)}
.contact-block p{margin:0;font-size:clamp(1.05rem,1rem + .5vw,1.3rem)}
#buerozeiten .section__wrap{padding-top:0}
#buerozeiten p{font-size:clamp(1.1rem,1rem + .8vw,1.6rem);font-weight:600}

/* ============================================================
   Breadcrumb
   ============================================================ */
.breadcrumb{max-width:var(--wrap);margin-inline:auto;padding:calc(var(--header-h) + 26px) var(--pad) 0}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.35em;margin:0;padding:0;font-size:.92rem}
.breadcrumb li:not(:last-child)::after{content:"/";margin-left:.35em;opacity:.4}
.breadcrumb a{font-weight:600;display:inline-block;padding-block:var(--s-8);margin-block:calc(var(--s-8)*-1)}
.breadcrumb [aria-current="page"]{opacity:.66}

/* ============================================================
   Themenseiten
   ============================================================ */
.topic-hero__inner{
  max-width:var(--wrap);margin-inline:auto;
  padding:clamp(30px,5vw,72px) var(--pad) clamp(20px,3vw,40px);
}
.topic-hero h1,#main>h1{
  font-size:clamp(2.3rem,1.2rem + 4.6vw,4.6rem);
  letter-spacing:-0.03em;line-height:1.05;
}
.topic-hero__lead{
  max-width:58ch;
  font-size:clamp(1.1rem,1rem + .7vw,1.45rem);
  margin:1.1em 0 0;
}
.topic-content{
  max-width:var(--wrap);margin-inline:auto;
  padding:clamp(20px,3vw,44px) var(--pad) clamp(48px,6vw,90px);
}
.prose{max-width:74ch}
.prose h2{
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem);
  margin-top:1.8em;
}
.prose h3{font-size:clamp(1.2rem,1.05rem + .7vw,1.55rem);margin-top:1.4em}
.prose ul,.prose ol{padding-left:1.2em;margin:0 0 1em}
.prose li{margin-bottom:.4em}
.topic-callout{
  border-inline-start:4px solid var(--rot);
  background:var(--grau);
  padding:1em 1.3em;margin:1.4em 0;
}
.topic-callout p:last-child{margin-bottom:0}
.topic-faq{margin-top:2.4em}
.topic-faq__item{
  padding:1.1em 0;border-top:1px solid var(--hairline);
}
.topic-faq__item:last-child{border-bottom:1px solid var(--hairline)}
.topic-faq__item h3{margin-bottom:.4em}
.topic-faq__item p:last-child{margin-bottom:0}

/* Autorenkasten */
.author-box{margin-top:3em;border-top:1px solid var(--hairline);padding-top:2em}
.author-box__intro{max-width:66ch}
.author-box__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2.4vw,32px);
  margin:1.6em 0;
}
@media (max-width:700px){.author-box__grid{grid-template-columns:1fr}}
.author-card__media{overflow:hidden;aspect-ratio:1/1;background:var(--grau)}
.author-card__media img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1);
  transition:filter .7s var(--ease),transform .9s var(--ease);
}
.author-card:hover .author-card__media img,
.author-card:focus-within .author-card__media img{filter:grayscale(0);transform:scale(1.045)}
.author-card__body h3{margin:.7em 0 .1em;font-size:1.15rem}
.author-card__body p{margin:0;font-size:.95rem}
.author-box__note{font-weight:600;max-width:66ch}

/* CTA-Block */
.topic-cta{
  margin-top:3em;
  background:var(--grau);
  padding:clamp(26px,4vw,52px);
}
.topic-cta h2{
  font-size:clamp(1.7rem,1.2rem + 2.2vw,2.7rem);
  letter-spacing:-0.026em;
}
.topic-cta p{max-width:62ch}
.topic-cta__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:1.4em}

/* Themen-Fußnavigation */
.topic-bottom-nav{
  max-width:var(--wrap);margin-inline:auto;
  padding:0 var(--pad) clamp(48px,6vw,90px);
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(28px,4.5vw,72px);
  border-top:0;
}
@media (max-width:820px){.topic-bottom-nav{grid-template-columns:1fr}}
.topic-bottom-nav a{
  display:flex;align-items:center;
  padding:clamp(12px,1.6vw,18px) 2px;
  border-bottom:1px solid var(--hairline);
  font-weight:600;
  font-size:clamp(1.02rem,.98rem + .4vw,1.22rem);
  transition:transform var(--speed-slow) var(--spring);
}
.topic-bottom-nav a:first-child{border-top:1px solid var(--hairline)}
.topic-bottom-nav a:nth-child(2){border-top:1px solid var(--hairline)}
@media (max-width:820px){.topic-bottom-nav a:nth-child(2){border-top:0}}
.topic-bottom-nav a::after{
  content:"";margin-left:auto;flex:none;
  width:.5em;height:.5em;
  border-right:2.5px solid var(--tinte);border-top:2.5px solid var(--tinte);
  transform:rotate(45deg);
  transition:transform var(--speed-slow) var(--spring),border-color var(--speed) var(--ease);
}
.topic-bottom-nav a:hover{transform:translateX(10px)}
.topic-bottom-nav a:hover::after{border-color:var(--rot);transform:rotate(45deg) translate(5px,-5px)}

/* ============================================================
   Profilseiten
   ============================================================ */
.profile-head{
  display:grid;grid-template-columns:minmax(240px,340px) 1fr;
  gap:clamp(24px,4vw,56px);
  align-items:start;
  margin-bottom:2em;
}
@media (max-width:760px){.profile-head{grid-template-columns:1fr}}
.profile-head__media{overflow:hidden;aspect-ratio:4/5;background:var(--grau)}
.profile-head__media img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1);
  transition:filter .7s var(--ease),transform .9s var(--ease);
}
.profile-head__media:hover img{filter:grayscale(0);transform:scale(1.04)}
.profile-head__role{
  font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--rot);margin-bottom:.6em;
}
.profile-head__name{margin-bottom:.4em}
.profile-li{display:inline-flex}
.profile-li img{width:38px;height:32px;transition:transform var(--speed-slow) var(--spring)}
.profile-li:hover img{transform:scale(1.15)}

/* ============================================================
   Rechtsseiten & 404
   ============================================================ */
.legal-main{
  max-width:860px;margin-inline:auto;
  padding:calc(var(--header-h) + 40px) var(--pad) clamp(48px,6vw,90px);
}
.legal-main h1{font-size:clamp(2.1rem,1.3rem + 3.4vw,3.6rem);letter-spacing:-0.03em}
.legal-main h2{font-size:clamp(1.35rem,1.15rem + .9vw,1.8rem);margin-top:1.8em}
.legal-main h3{font-size:1.18rem;margin-top:1.3em}

/* ============================================================
   FOOTER
   ============================================================ */
footer{border-top:1px solid var(--hairline);margin-top:clamp(40px,6vw,80px)}
.footer__nap{
  max-width:var(--wrap);margin-inline:auto;
  padding:clamp(32px,4.5vw,60px) var(--pad) clamp(16px,2vw,28px);
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,3vw,44px);
}
@media (max-width:820px){.footer__nap{grid-template-columns:1fr}}
.footer__office strong{
  display:block;font-size:1.15rem;letter-spacing:-0.015em;margin-bottom:.3em;
}
.footer__contact{display:flex;flex-direction:column;gap:.3em;align-items:flex-start}
.footer__contact a{font-weight:600}
.footer__wrap{
  max-width:var(--wrap);margin-inline:auto;
  padding:0 var(--pad) clamp(28px,4vw,48px);
  display:flex;flex-wrap:wrap;align-items:center;gap:1.4em;
  font-size:.94rem;
}
.footer__wrap>p{margin:0}
.footer__legal{display:flex;gap:1.2em;align-items:center}
.footer__legal a,.footer-link-button{font-weight:600;font-size:.94rem;padding-block:var(--s-8);margin-block:calc(var(--s-8)*-1)}
.footer__socials{display:flex;gap:14px;align-items:center;margin-left:auto}
.social-link{display:inline-flex;padding:var(--s-8);margin:calc(var(--s-8)*-1)}
.social-link img{height:26px;width:auto;transition:transform var(--speed-slow) var(--spring)}
.social-link:hover img{transform:scale(1.15)}

/* ============================================================
   Mitfahrende Frosted-Aktionsleiste (ab ~380 px Scroll)
   ============================================================ */
.fab{
  position:fixed;z-index:280;
  left:50%;bottom:18px;
  translate:-50% 0;
  display:flex;align-items:center;gap:10px;
  padding:9px 10px 9px 20px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:var(--shadow-frost);
  border:1px solid rgba(17,16,19,.08);
  opacity:0;transform:translateY(140%);
  pointer-events:none;
  transition:opacity var(--speed) var(--ease),transform var(--speed-slow) var(--spring);
}
.fab.is-shown{opacity:1;transform:translateY(0);pointer-events:auto}
.fab__tel{font-weight:700;letter-spacing:-0.01em;white-space:nowrap}
.fab__tel .fab__tel-short{display:none}
.fab .btn-primary{padding:.62em 1.35em}
@media (max-width:640px){
  .fab{
    left:12px;right:12px;bottom:12px;translate:0 0;
    justify-content:stretch;
    padding:9px;
  }
  .fab__tel{
    flex:1;display:inline-flex;align-items:center;justify-content:center;
    border:2px solid var(--rot);border-radius:var(--radius-pill);
    padding:.62em 1em;
  }
  .fab__tel .fab__tel-long{display:none}
  .fab__tel .fab__tel-short{display:inline}
  .fab .btn-primary{flex:1}
}

/* ============================================================
   To-Top-Button mit Fortschrittsring
   ============================================================ */
.to-top{
  position:fixed;right:18px;bottom:92px;z-index:270;
  width:56px;height:56px;border-radius:50%;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:var(--shadow-frost);
  display:inline-flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(16px) scale(.8);
  pointer-events:none;
  transition:opacity var(--speed) var(--ease),transform var(--speed-slow) var(--spring);
}
.to-top.is-visible{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{transform:scale(1.08)}
.to-top__ring{position:absolute;inset:0;transform:rotate(-90deg)}
.to-top__ring circle{
  fill:none;stroke:var(--rot);stroke-width:3;
  stroke-dasharray:151;
  stroke-dashoffset:calc(151 - 151*var(--fx-scroll,0));
}
.to-top__arrow{position:relative;color:var(--tinte)}
.to-top:hover .to-top__arrow{color:var(--rot)}

/* ============================================================
   Cookie-Banner (per JS eingefügt)
   ============================================================ */
#consent-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:380;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  border-top:1px solid var(--hairline);
  box-shadow:0 -10px 40px rgba(17,16,19,.12);
}
#consent-banner .wrap{
  display:flex;flex-wrap:wrap;align-items:center;gap:1em;
  padding-block:1em;
}
#consent-banner p{margin:0;flex:1 1 420px;font-size:.95rem}
#consent-banner .actions{display:flex;gap:10px}
.cb-btn{
  padding:.6em 1.3em;border-radius:var(--radius-pill);
  border:2px solid var(--tinte);font-weight:600;
  transition:transform var(--speed-slow) var(--spring),background var(--speed) var(--ease),color var(--speed) var(--ease),border-color var(--speed) var(--ease);
}
.cb-btn:hover{transform:scale(1.05)}
.cb-btn[data-consent="accept"]{background:var(--rot);border-color:var(--rot);color:var(--weiss)}
.cb-btn[data-consent="accept"]:hover{background:var(--rot-hover);border-color:var(--rot-hover)}

/* ============================================================
   Touch-Erlebnis: Scroll-Spotlight, Menü-Welle, Tipp-Feedback
   Ohne Hover übernimmt die Scroll-Position die Zeigerrolle:
   .is-inked (Leseband-Observer in punkt.js) spiegelt die
   Hover-Zustände; .ink-wave läuft beim Öffnen des Menüs einmal
   durch die Links; :active gibt beim Antippen sofortige
   Rückmeldung, bevor die Navigation greift.
   ============================================================ */
@media (hover:none){
  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    .ink.is-inked{background-position:0 0}
    .nav__link.ink-wave{animation:inkWave 850ms var(--ease) both}
  }
  @supports not ((-webkit-background-clip:text) or (background-clip:text)){
    .ink.is-inked{color:var(--rot)}
    .nav__link.ink-wave{animation:inkWaveColor 850ms var(--ease) both}
  }
  .ink.dot.is-inked::after{background:var(--tinte)}
  .nav__link.ink-wave.dot::after{animation:dotSwap 850ms var(--ease) both}

  .quick-trust__main.is-inked .qmark{color:var(--tinte)}
  .quick-trust__main.is-inked strong{color:var(--rot)}
  .quick-trust__main.is-inked .quick-trust__chev{
    border-color:var(--rot);
    transform:rotate(45deg) translate(4px,-4px);
  }
  .topic-row.is-inked .topic-row__chev{
    border-color:var(--rot);
    transform:rotate(45deg) translate(5px,-5px);
  }
  .acc__summary .subhead.is-inked+.acc__chev{border-color:var(--rot)}

  /* Porträts: die Desktop-Hover-Entfärbung übernimmt mobil das Leseband */
  .people-cell.is-inked .people-figure img,
  .author-card.is-inked .author-card__media img,
  .profile-head__media.is-inked img{filter:grayscale(0)}
  .people-cell.is-inked .people-figure img{transform:scale(1.02)}

  .pill-tel:active,.route-btn:active{
    background:var(--rot);color:var(--weiss);
    transform:scale(.97);transition-duration:.1s;
  }
  .btn-primary:active{transform:scale(.97);transition-duration:.1s}
  .topic-row:active{transform:translateX(10px);transition:transform .15s var(--ease)}
}
@keyframes inkWave{
  0%,100%{background-position:100% 0}
  38%,62%{background-position:0 0}
}
@keyframes inkWaveColor{
  0%,100%{color:var(--tinte)}
  38%,62%{color:var(--rot)}
}
@keyframes dotSwap{
  0%,100%{background:var(--rot)}
  38%,62%{background:var(--tinte)}
}

/* ============================================================
   Forced Colors (Windows-Kontrastmodus): Ink-Effekt nutzt
   transparente Textfüllung — hier auf Systemfarben zurückfallen
   ============================================================ */
@media (forced-colors:active){
  .ink{background:none;-webkit-text-fill-color:currentColor;color:currentColor}
  .progressline,.u-line::before,.dot::after{background:CanvasText}
  .to-top__ring circle{stroke:CanvasText}
  .quick-trust__chev,.topic-row__chev,.acc__chev,.topic-bottom-nav a::after{border-color:CanvasText}
}

/* ============================================================
   Erhöhter Kontrast / reduzierte Transparenz:
   Milchglas wird deckend, Hairlines werden kräftiger
   ============================================================ */
@media (prefers-contrast:more){
  :root{--hairline:rgba(17,16,19,.34)}
}
@media (prefers-contrast:more),(prefers-reduced-transparency:reduce){
  .header::before,.offcanvas__backdrop,.fab,.to-top,.rail-arrow,.people-li,#consent-banner{
    background:var(--weiss);
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
}

/* ============================================================
   Reduced Motion: legt alle Animationen still
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .reveal-on-scroll{opacity:1;transform:none;filter:none}
  .u-line::before{transform:scaleX(1);animation:none}
  .dot::after{transform:scale(1);animation:none}
  .nav__link{opacity:1;transform:none}
  .hero__slide.is-active img{animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ============================================================
   Print
   ============================================================ */
@media print{
  @page{margin:2cm}
  .header,.offcanvas,.fab,.to-top,.progressline,.skip-link,#consent-banner,
  .hero__viewport,.breaker,.footer__socials,.people-veil,.rail-arrow{display:none!important}
  body{color:#000}
  a{text-decoration:underline}
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;font-weight:400}
  .hero__claim,.breadcrumb,.topic-hero__inner{padding-top:0}
  .stats-band,.reviews-section,.topic-cta,.topic-callout{background:none}
  .reveal-on-scroll{opacity:1!important;transform:none!important;filter:none!important}
}