/* ══════════════════════════════════════════════════════════
   König IT.Services — Stylesheet

   FARBEN: die drei Werte unter "Marke" ändern, Rest folgt.
   Schriften liegen unter /fonts/ auf dem eigenen Server —
   kein Google-CDN, damit keine Besucher-IPs in die USA gehen.
   ══════════════════════════════════════════════════════════ */

@font-face{font-family:"Archivo";src:url(/fonts/archivo-var.woff2) format("woff2-variations");
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Sans";src:url(/fonts/plex-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Sans";src:url(/fonts/plex-sans-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Plex Sans";src:url(/fonts/plex-sans-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/fonts/plex-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/fonts/plex-mono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  /* ── Marke ── */
  --brand:#e4181e;
  --brand-deep:#a21015;
  --accent:#ff5a5f;

  /* ── abgeleitet ── */
  --signal:#ffb020;
  --ink:#0a0a0c; --ink-2:#131316; --ink-3:#1e1e22;
  --paper:#f5f6f4; --warm:#f3efe8; --white:#fff;
  --slate:#5f6067; --mute:#9b9ca4;
  --line:#e0e0dc; --line-d:#2a2a30;

  --ff-d:"Archivo","Helvetica Neue",Arial,sans-serif;
  --ff-b:"Plex Sans",-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;
  --ff-m:"Plex Mono",ui-monospace,Menlo,monospace;

  --wrap:1200px;
  --gut:clamp(1.25rem,4vw,3rem);
  --sy:clamp(4rem,8vw,7rem);
  --r:4px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ff-b);
  font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0}
ul,ol{list-style:none;margin:0;padding:0}

h1,h2,h3,h4{font-family:var(--ff-d);font-variation-settings:"wdth" 112;font-weight:700;
  line-height:1.06;letter-spacing:-.022em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.2rem,5.4vw,4.2rem);font-weight:800;font-variation-settings:"wdth" 118}
h2{font-size:clamp(1.8rem,3.6vw,2.9rem)}
h3{font-size:clamp(1.1rem,1.6vw,1.35rem);font-variation-settings:"wdth" 106;letter-spacing:-.01em}
h4{font-size:1rem;font-variation-settings:"wdth" 104}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}

.eyebrow{font-family:var(--ff-m);font-size:.7rem;font-weight:500;letter-spacing:.17em;
  text-transform:uppercase;color:var(--brand);margin:0 0 1.1rem;display:flex;align-items:center;gap:.7rem}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;flex:none}
.eyebrow--l{color:var(--accent)}
.lede{font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--slate);max-width:58ch;line-height:1.62}
.on-dark .lede,.hero .lede,.phero .lede{color:var(--mute)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:820px}
.sec{padding-block:var(--sy);position:relative}
.sec--tight{padding-block:calc(var(--sy)*.6)}
.sec-head{max-width:62ch;margin-bottom:clamp(2.25rem,4.5vw,3.5rem)}
.on-dark{background:var(--ink);color:var(--paper)}

.skip{position:absolute;left:-9999px;background:var(--brand);color:#fff;padding:.75rem 1.25rem;z-index:200}
.skip:focus{left:1rem;top:1rem}
:where(a,button,summary,input,textarea):focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:2px}
.on-dark :where(a,button,summary):focus-visible,.hd :where(a,button):focus-visible{outline-color:var(--accent)}

/* ── Buttons ─────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.95rem 1.6rem;
  font-family:var(--ff-m);font-size:.8rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;border:1.5px solid var(--ink);
  border-radius:var(--r);cursor:pointer;
  transition:transform .2s cubic-bezier(.2,.8,.3,1),background .2s,color .2s,border-color .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px)}
.btn--p{background:var(--brand);border-color:var(--brand);color:#fff}
.btn--p:hover{background:var(--brand-deep);border-color:var(--brand-deep);box-shadow:0 10px 28px -12px var(--brand)}
.btn--g{border-color:currentColor;background:transparent}
.btn--g:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.on-dark .btn--g,.hero .btn--g,.phero .btn--g{border-color:var(--mute);color:var(--paper)}
.on-dark .btn--g:hover,.hero .btn--g:hover,.phero .btn--g:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}

/* ══ HEADER + NAVIGATION ═════════════════════════════ */
.hd{position:sticky;top:0;z-index:100;background:rgba(10,10,12,.9);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line-d);color:var(--paper)}
.hd-in{display:flex;align-items:center;gap:.9rem;min-height:74px;position:relative}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--ff-d);
  font-weight:800;font-variation-settings:"wdth" 105;letter-spacing:-.02em;font-size:.98rem;white-space:nowrap}
.bm{width:34px;height:34px;flex:none;border-radius:var(--r);display:grid;place-items:center;
  font-size:1.05rem;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-deep));
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset}
.brand small{display:block;font-family:var(--ff-m);font-weight:400;font-size:.58rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}

.nav{margin-left:auto;display:flex;align-items:center;gap:.1rem;flex-wrap:nowrap}
/* static, damit das Mega-Menü am Kopfleisten-Raster hängt und nicht
   am einzelnen Menüpunkt — sonst läuft es links über den Rand. */
.nav>li{position:static}
/* white-space:nowrap ist hier nicht Kosmetik: Mit „Ratgeber" sind es
   sechs Menuepunkte, und ohne die Regel bricht „Für Unternehmen" in zwei
   Zeilen um und zieht die ganze Kopfleiste auseinander. */
.nav-link{display:flex;align-items:center;gap:.35rem;text-decoration:none;
  font-size:.9rem;white-space:nowrap;
  font-weight:500;padding:.6rem .62rem;border-radius:var(--r);color:var(--paper);
  transition:background .18s,color .18s}
.nav-link:hover,.nav-link[aria-expanded=true]{background:rgba(255,255,255,.08);color:#fff}
.nav-link[aria-current=page]{color:var(--accent)}
.nav-link .caret{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .22s}
.nav-link[aria-expanded=true] .caret{transform:rotate(-135deg) translateY(-2px)}

/* ── Mega-Menü ────────────────────────────────────────
   Drei beschriftete Spalten plus eine Randspalte für die,
   die nicht wissen, wo sie hingehören. Vorher lagen alle
   Einträge als flaches Raster nebeneinander — bei zwölf
   Kacheln sucht man, statt zu lesen.                     */
.mega{position:absolute;top:calc(100% + 1.05rem);right:0;left:auto;
  transform:translateY(-10px) scale(.99);
  transform-origin:top right;
  min-width:min(52rem,94vw);background:var(--ink-2);border:1px solid var(--line-d);
  border-radius:10px;padding:1.15rem;box-shadow:0 40px 90px -34px rgba(0,0,0,.9);
  display:grid;grid-template-columns:1fr auto;gap:1.15rem;
  opacity:0;visibility:hidden;
  transition:opacity .24s cubic-bezier(.2,.8,.3,1),
             transform .24s cubic-bezier(.2,.8,.3,1),visibility .24s}
.mega[data-open=true]{opacity:1;visibility:visible;transform:none}
.mega--wide{min-width:min(62rem,95vw)}

/* Unsichtbare Brücke über den Spalt zwischen Menüpunkt und Feld.
   Ohne sie ist der Zeiger beim Hinuntergehen kurz über keinem von
   beiden, das Menü schließt und öffnet sofort wieder — das war das
   Flackern. Die Brücke gehört zum Feld, also bleibt der Zeiger
   durchgehend darin. Solange das Feld ausgeblendet ist, ist sie es
   auch und fängt nichts ab.

   Bewusst ein echtes Element und kein ::before: Pseudo-Elemente
   werden beim Treffertest nicht zuverlässig zurückgegeben, die
   Brücke lag zwar richtig, fing den Zeiger aber nicht. */
/* Höhe großzügig: Der Spalt hängt an der Höhe der Kopfleiste, und
   die schrumpft beim Scrollen. Gemessen sind 22 px im Ruhezustand,
   1,45 rem deckt das mit Reserve ab, ohne unten in die Schaltfläche
   zu ragen — sonst würde die Brücke Klicks auf den Menüpunkt
   abfangen. */
.mega-brueck{position:absolute;left:0;right:0;top:-1.6rem;height:1.6rem}

.mega-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.15rem 1.1rem}
.mega-sp{min-width:0}
.mega-lbl{font-family:var(--ff-m);font-size:.62rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--brand);margin:0 0 .5rem;padding:0 .8rem;
  display:flex;align-items:center;gap:.55rem;white-space:nowrap}
.mega-lbl::after{content:"";height:1px;flex:1;background:var(--line-d)}

.mega a{display:block;padding:.55rem .8rem;border-radius:var(--r);text-decoration:none;
  position:relative}
.mega a::before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:2px;
  background:var(--brand);border-radius:2px;transform:scaleY(0);transform-origin:center;
  transition:transform .22s cubic-bezier(.2,.8,.3,1)}
.mega a:hover{background:rgba(228,24,30,.1)}
.mega a:hover::before{transform:scaleY(1)}
.mega b{display:block;font-size:.88rem;font-weight:600;margin-bottom:.1rem;
  transition:transform .22s cubic-bezier(.2,.8,.3,1)}
.mega a:hover b{transform:translateX(4px)}
.mega span{display:block;font-size:.74rem;color:var(--mute);line-height:1.4;
  transition:transform .22s cubic-bezier(.2,.8,.3,1) .02s}
.mega a:hover span{transform:translateX(4px)}

/* Randspalte */
.mega-seite{width:15.5rem;padding:.9rem 1rem 1rem;border-radius:8px;
  background:rgba(228,24,30,.07);border:1px solid rgba(228,24,30,.18);
  display:flex;flex-direction:column}
.mega-seite .mega-lbl{padding:0;margin-bottom:.6rem}
.mega-txt{font-size:.8rem;line-height:1.5;color:var(--mute);margin:0 0 auto}
.mega-tel{display:inline-flex!important;align-items:center;gap:.5rem;margin-top:1rem;
  padding:.6rem .85rem!important;border-radius:var(--r);justify-content:center;
  background:var(--brand);color:#fff;font-family:var(--ff-m);font-size:.82rem;
  font-weight:500;white-space:nowrap}
.mega-tel::before{display:none}
.mega-tel:hover{background:var(--brand-deep)!important}
.mega-mehr{margin-top:.45rem;text-align:center;font-family:var(--ff-m)!important;
  font-size:.68rem!important;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);padding:.45rem!important}
.mega-mehr::before{display:none}
.mega-mehr:hover{background:none!important;text-decoration:underline}

@media(max-width:1240px){
  .mega,.mega--wide{min-width:min(46rem,95vw)}
  .mega-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mega-seite{width:13rem}
}

.hd-call{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--ff-m);font-size:.8rem;
  font-weight:500;text-decoration:none;padding:.62rem 1rem;border-radius:var(--r);color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-deep));white-space:nowrap;
  margin-left:.5rem;transition:transform .2s,box-shadow .2s}
.hd-call:hover{transform:translateY(-1px);box-shadow:0 8px 22px -10px var(--brand)}

/* Burger */
.burger{display:none;width:42px;height:42px;margin-left:auto;border-radius:var(--r);
  position:relative;cursor:pointer}
.burger span{position:absolute;left:11px;width:20px;height:2px;background:var(--paper);
  transition:transform .25s,opacity .2s}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:20px}
.burger span:nth-child(3){top:26px}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Mobiles Vollbild-Menü */
.mnav{position:fixed;inset:74px 0 0;background:var(--ink);z-index:99;overflow-y:auto;
  padding:1.5rem var(--gut) 6rem;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .25s,transform .25s,visibility .25s}
.mnav[data-open=true]{opacity:1;visibility:visible;transform:none}
.mnav h2{font-family:var(--ff-m);font-size:.68rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand);margin:2rem 0 .75rem;font-variation-settings:normal}
.mnav h2:first-child{margin-top:0}
.mnav a{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem 0;border-bottom:1px solid var(--line-d);text-decoration:none;
  color:var(--paper);font-size:1.05rem;font-weight:500}
.mnav a::after{content:"→";color:var(--brand);font-family:var(--ff-m)}
.mnav .mnav-cta{margin-top:2.5rem;display:flex;flex-direction:column;gap:.7rem}
.mnav .btn{justify-content:center;border-color:var(--mute);color:var(--paper)}
.mnav .btn--p{border-color:var(--brand);color:#fff}
body.locked{overflow:hidden}

/* Umschaltpunkt von 1080 auf 1200 px angehoben: Mit sechs Menuepunkten,
   Themenschalter und Telefonschaltflaeche wird es darunter zu eng. */
@media(max-width:1200px){
  .nav{display:none}
  .burger{display:block}
  .hd-call{display:none}
}
@media(min-width:1201px){.mnav{display:none}}

/* Mobile Anrufleiste unten */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  background:var(--brand);color:#fff;text-decoration:none;
  font-family:var(--ff-m);font-size:.85rem;letter-spacing:.06em;
  align-items:center;justify-content:center;gap:.6rem;padding:.95rem;
  box-shadow:0 -8px 24px -12px rgba(0,0,0,.5)}
@media(max-width:700px){.callbar{display:flex}body{padding-bottom:3.4rem}}

/* ── Notdienst-Band ──────────────────────────────────── */
.alert{background:var(--brand);color:#fff;font-family:var(--ff-m);font-size:.77rem;letter-spacing:.03em}
.alert .wrap{display:flex;align-items:center;gap:.7rem;padding-block:.6rem;flex-wrap:wrap}
.alert strong{text-transform:uppercase;letter-spacing:.1em}
.dot{width:8px;height:8px;border-radius:50%;background:#fff;flex:none;animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.2;transform:scale(.7)}}

/* ── Hero Startseite ─────────────────────────────────── */
.hero{background:var(--ink);color:var(--paper);position:relative;overflow:hidden;
  padding-block:clamp(2.75rem,5vw,4.25rem) clamp(3rem,5.5vw,4.75rem)}
.hero h1{font-size:clamp(2.1rem,4.9vw,3.7rem);line-height:1.02}
.hero h1 .nb{white-space:nowrap;display:block}
.hero::before,.phero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px 420px at 78% 20%,rgba(228,24,30,.32),transparent 70%),
             radial-gradient(520px 380px at 10% 85%,rgba(255,90,95,.1),transparent 70%)}
.hero::after,.phero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(var(--line-d) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line-d) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000,transparent);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000,transparent)}
/* Netzgrafik im Hero */
.hero-net{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.hero-net svg{position:absolute;left:-4%;top:50%;transform:translateY(-50%);
  width:min(760px,72%);height:auto;opacity:.85}
@media(max-width:1000px){.hero-net svg{left:-15%;width:120%;opacity:.4}}
.net-line{stroke:var(--brand);stroke-width:1;fill:none;opacity:.28;
  stroke-dasharray:5 9;animation:flow 3.2s linear infinite}
.net-line:nth-of-type(2n){animation-duration:4.4s;opacity:.2}
.net-line:nth-of-type(3n){animation-duration:5.6s;opacity:.15}
@keyframes flow{to{stroke-dashoffset:-56}}
.net-node{fill:var(--brand);opacity:.5}
.net-ring{fill:none;stroke:var(--brand);stroke-width:1;transform-origin:center;
  animation:ring 3.4s ease-out infinite}
.net-ring:nth-of-type(2){animation-delay:1.1s}
.net-ring:nth-of-type(3){animation-delay:2.2s}
.net-ring:nth-of-type(4){animation-delay:.55s}
@keyframes ring{0%{opacity:.55;transform:scale(.35)}70%,100%{opacity:0;transform:scale(1)}}

.hero>.wrap,.phero>.wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2.5rem,5vw,4rem);align-items:center}
@media(max-width:1000px){.hero-grid{grid-template-columns:1fr}}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--accent),var(--brand) 72%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{margin-top:1.5rem}

.stats{display:flex;flex-wrap:wrap;gap:0 2.4rem;margin-top:2.75rem;padding-top:1.75rem;border-top:1px solid var(--line-d)}
.stat{padding-block:.4rem}
.stat b{display:block;font-family:var(--ff-d);font-variation-settings:"wdth" 118;font-weight:800;
  font-size:1.85rem;line-height:1.1;letter-spacing:-.02em}
.stat span{font-family:var(--ff-m);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--mute)}

/* ── Hero Unterseite ─────────────────────────────────── */
.phero{background:var(--ink);color:var(--paper);position:relative;overflow:hidden;
  padding-block:clamp(2rem,4vw,3rem) clamp(3rem,6vw,4.5rem)}
.phero h1{margin-top:.4rem}
.phero .lede{margin-top:1.4rem}
.crumbs{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;
  font-family:var(--ff-m);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mute);margin-bottom:1.5rem}
.crumbs a{text-decoration:none;color:var(--mute);transition:color .18s}
.crumbs a:hover{color:var(--accent)}
.crumbs li{display:flex;align-items:center;gap:.45rem}
.crumbs li+li::before{content:"/";color:var(--line-d)}
.crumbs [aria-current]{color:var(--paper)}

/* ── Statusboard ─────────────────────────────────────── */
.board{background:linear-gradient(180deg,rgba(30,30,34,.94),rgba(19,19,22,.94));
  border:1px solid var(--line-d);border-radius:8px;overflow:hidden;
  box-shadow:0 40px 80px -50px #000,0 0 0 1px rgba(255,255,255,.04) inset}
.board-hd{display:flex;align-items:center;gap:.6rem;padding:.85rem 1.2rem;
  border-bottom:1px solid var(--line-d);background:rgba(0,0,0,.25)}
.lights{display:flex;gap:.35rem}
.lights i{width:9px;height:9px;border-radius:50%;display:block}
.lights i:nth-child(1){background:#ff5f57}
.lights i:nth-child(2){background:var(--signal)}
.lights i:nth-child(3){background:#28c840}
.board-hd p{margin:0 0 0 auto;font-family:var(--ff-m);font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.board-body{padding:.4rem 0}
.brow{display:grid;grid-template-columns:1fr auto;gap:.75rem;align-items:center;
  padding:.75rem 1.2rem;border-bottom:1px solid rgba(42,42,48,.7)}
.brow:last-child{border-bottom:0}
.brow .nm{font-size:.92rem;font-weight:500}
.brow .sub{display:block;font-family:var(--ff-m);font-size:.64rem;letter-spacing:.07em;color:var(--mute);margin-top:.15rem}
.pill{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--ff-m);font-size:.63rem;
  letter-spacing:.09em;text-transform:uppercase;padding:.28rem .6rem;border-radius:100px;
  border:1px solid;white-space:nowrap}
.pill.ok{color:#3ee08a;border-color:rgba(62,224,138,.35);background:rgba(62,224,138,.09)}
.pill.warn{color:var(--signal);border-color:rgba(255,176,32,.35);background:rgba(255,176,32,.09)}
.pill i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:blink 2.4s ease-in-out infinite}
@keyframes rowIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pillIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes lightIn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.board .brow{opacity:0;animation:rowIn .55s cubic-bezier(.2,.8,.3,1) forwards}
.board .brow:nth-child(1){animation-delay:.30s}
.board .brow:nth-child(2){animation-delay:.46s}
.board .brow:nth-child(3){animation-delay:.62s}
.board .brow:nth-child(4){animation-delay:.78s}
.board .brow:nth-child(5){animation-delay:.94s}
.board .pill{opacity:0;animation:pillIn .38s cubic-bezier(.2,1.4,.4,1) forwards}
.board .brow:nth-child(1) .pill{animation-delay:1.30s}
.board .brow:nth-child(2) .pill{animation-delay:1.44s}
.board .brow:nth-child(3) .pill{animation-delay:1.58s}
.board .brow:nth-child(4) .pill{animation-delay:1.72s}
.board .brow:nth-child(5) .pill{animation-delay:1.86s}
.lights i{opacity:0;animation:lightIn .3s ease forwards}
.lights i:nth-child(1){animation-delay:.06s}
.lights i:nth-child(2){animation-delay:.14s}
.lights i:nth-child(3){animation-delay:.22s}
.board-ft{opacity:0;animation:rowIn .6s ease 2.05s forwards;padding:.9rem 1.2rem;border-top:1px solid var(--line-d);background:rgba(0,0,0,.25);
  font-family:var(--ff-m);font-size:.63rem;letter-spacing:.06em;color:var(--mute)}

/* ── Ticker ──────────────────────────────────────────── */
.ticker{background:var(--white);border-block:1px solid var(--line);overflow:hidden;
  padding-block:.9rem;color:var(--slate)}
.ticker-track{display:flex;align-items:center;gap:2.75rem;width:max-content;
  animation:slide 42s linear infinite;font-family:var(--ff-m);font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.ticker-track b{font-weight:400;display:flex;align-items:center;gap:2.75rem}
.ticker-track b::after{content:"◆";color:var(--brand);font-size:.6rem}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── Karten ──────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.cards--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.cards--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.cards,.cards--3{grid-template-columns:1fr}}
.card{position:relative;background:var(--white);border:1px solid var(--line);border-radius:6px;
  padding:clamp(1.4rem,3vw,2rem);text-decoration:none;display:block;overflow:hidden;
  transition:transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s,border-color .28s}
.card::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s;pointer-events:none;
  background:radial-gradient(420px 220px at var(--mx,50%) var(--my,0%),rgba(228,24,30,.1),transparent 65%)}
.card:hover{transform:translateY(-5px);border-color:rgba(228,24,30,.45);box-shadow:0 26px 50px -34px var(--brand)}
.card:hover::before{opacity:1}
.card-n{font-family:var(--ff-m);font-size:.66rem;letter-spacing:.14em;color:var(--brand);
  display:block;margin-bottom:.9rem;position:relative}
.card h3{margin-bottom:.6rem;position:relative}
.card p{font-size:.95rem;color:var(--slate);position:relative}
.card .go{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.1rem;font-family:var(--ff-m);
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);position:relative}
.card .go::after{content:"→";transition:transform .25s}
.card:hover .go::after{transform:translateX(5px)}

/* ── Auswahl-Widget ──────────────────────────────────── */
.picker{background:var(--white);border:1px solid var(--line);border-radius:6px;overflow:hidden;
  box-shadow:0 30px 60px -50px rgba(10,10,12,.7)}
.picker-hd{padding:1.05rem 1.5rem;border-bottom:1px dashed var(--line);background:rgba(228,24,30,.05);
  font-family:var(--ff-m);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-deep)}
.picker-bd{padding:1.5rem}
.picker-bd>p:first-child{font-family:var(--ff-m);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--slate);margin-bottom:.9rem}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{padding:.55rem .9rem;font-size:.88rem;background:var(--paper);border:1px solid var(--line);
  border-radius:100px;cursor:pointer;transition:all .18s}
.chip:hover{border-color:var(--brand);color:var(--brand-deep);transform:translateY(-1px)}
.chip[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:#fff}
.out{margin-top:1.5rem;padding-top:1.4rem;border-top:1px dashed var(--line)}
.out dl{margin:0;display:grid;gap:.85rem}
.out dt{font-family:var(--ff-m);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--slate)}
.out dd{margin:.15rem 0 0;font-weight:600;font-size:1.05rem}
.out dd.n{font-weight:400;font-size:.95rem;color:var(--slate)}
.out .btn-row{margin-top:1.25rem}
.out .btn{padding:.72rem 1.15rem;font-size:.73rem}
.fade{animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── Ablauf / Schritte ───────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem);counter-reset:s}
.steps--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.steps--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding-top:2.6rem;counter-increment:s}
.step::before{content:counter(s,decimal-leading-zero);position:absolute;top:0;left:0;
  font-family:var(--ff-m);font-size:.8rem;letter-spacing:.1em;color:var(--brand)}
.step::after{content:"";position:absolute;top:1.85rem;left:0;right:0;height:1px;background:var(--line)}
.on-dark .step::before{color:var(--accent)}
.on-dark .step::after{background:var(--line-d)}
.step h3{margin-bottom:.5rem}
.step p{font-size:.95rem;color:var(--slate)}
.on-dark .step p{color:var(--mute)}

/* ── Leistungsliste ──────────────────────────────────── */
.svc{border-top:1px solid var(--line)}
.svc a{display:flex;align-items:baseline;gap:1rem;padding:1.05rem .25rem;
  border-bottom:1px solid var(--line);text-decoration:none;transition:padding-left .22s,background .22s}
.svc a:hover{padding-left:.9rem;background:var(--white)}
.svc b{font-weight:600;font-size:1rem;white-space:nowrap;min-width:14rem}
.svc span{font-size:.92rem;color:var(--slate)}
.svc a::after{content:"→";margin-left:auto;color:var(--brand);font-family:var(--ff-m);opacity:0;transition:opacity .22s}
.svc a:hover::after{opacity:1}
@media(max-width:640px){.svc a{flex-direction:column;gap:.2rem}.svc b{min-width:0}.svc a::after{display:none}}

/* ── Checkliste ──────────────────────────────────────── */
.checks{display:grid;grid-template-columns:repeat(2,1fr);gap:.85rem 2rem}
@media(max-width:700px){.checks{grid-template-columns:1fr}}
.checks li{display:flex;gap:.75rem;align-items:flex-start;font-size:1rem}
.checks li::before{content:"";flex:none;width:18px;height:18px;margin-top:.28rem;border-radius:50%;
  background:var(--brand);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}

/* ── Fließtext ───────────────────────────────────────── */
.prose{max-width:68ch}
.prose h2{margin:2.75rem 0 1rem}
.prose h2:first-child{margin-top:0}
.prose h3{margin:2rem 0 .65rem}
.prose p{margin-bottom:1.15rem}
.prose ul{margin:0 0 1.4rem;padding-left:0}
.prose ul li{position:relative;padding-left:1.4rem;margin-bottom:.5rem}
.prose ul li::before{content:"";position:absolute;left:0;top:.68em;width:6px;height:6px;
  border-radius:50%;background:var(--brand)}
.prose a{color:var(--brand-deep);text-decoration:underline;text-underline-offset:3px}
.prose strong{font-weight:600}
.callout{border-left:3px solid var(--brand);background:var(--white);
  padding:1.15rem 1.35rem;margin:1.75rem 0;border-radius:0 var(--r) var(--r) 0}
.callout p{margin:0;font-size:.98rem}

/* ── Preis-/Infoboxen ────────────────────────────────── */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:2rem}
@media(max-width:700px){.facts{grid-template-columns:1fr}}
.facts div{background:var(--paper);padding:1.3rem 1.4rem}
.facts dt{font-family:var(--ff-m);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--slate)}
.facts dd{margin:.35rem 0 0;font-family:var(--ff-d);font-variation-settings:"wdth" 110;
  font-weight:700;font-size:1.25rem;letter-spacing:-.015em}

/* ── Privat-Band ─────────────────────────────────────── */
.privat{background:var(--warm);position:relative}
.privat::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--brand),var(--accent))}
.privat-hd{display:flex;flex-wrap:wrap;align-items:flex-end;gap:2rem;
  justify-content:space-between;margin-bottom:2.5rem}
.privat-list{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
@media(max-width:860px){.privat-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.privat-list{grid-template-columns:1fr}}
.privat-list a{display:block;background:var(--warm);padding:1.4rem 1.35rem;
  text-decoration:none;transition:background .22s,padding-left .22s}
.privat-list a:hover{background:var(--white);padding-left:1.8rem}
.privat-list b{display:block;font-family:var(--ff-d);font-weight:600;
  font-variation-settings:"wdth" 106;font-size:1.05rem;margin-bottom:.28rem}
.privat-list span{font-size:.89rem;color:var(--slate);line-height:1.5}

/* ── Gebiet ──────────────────────────────────────────── */
.areas{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.areas li{font-family:var(--ff-m);font-size:.78rem;padding:.4rem .82rem;
  border:1px solid var(--line);border-radius:100px;background:var(--white);transition:all .2s}
.areas li:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}

/* ── FAQ ─────────────────────────────────────────────── */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.25rem 2.5rem 1.25rem 0;position:relative;
  font-family:var(--ff-d);font-variation-settings:"wdth" 106;font-weight:600;
  font-size:1.06rem;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.5rem;top:1.5rem;width:11px;height:11px;
  border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);
  transform:rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{padding-bottom:1.35rem;color:var(--slate);max-width:70ch}

/* ── Weiterführend ───────────────────────────────────── */
.next{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:820px){.next{grid-template-columns:1fr}}
.next a{background:var(--paper);padding:1.35rem 1.4rem;text-decoration:none;transition:background .2s,padding-left .2s}
.next a:hover{background:var(--white);padding-left:1.85rem}
.next em{display:block;font-style:normal;font-family:var(--ff-m);font-size:.64rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--brand);margin-bottom:.4rem}
.next b{display:block;font-family:var(--ff-d);font-weight:600;font-variation-settings:"wdth" 106;font-size:1.02rem}

/* ── Kontakt ─────────────────────────────────────────── */
.cgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media(max-width:860px){.cgrid{grid-template-columns:1fr}}
.ccard{border:1px solid var(--line-d);border-radius:6px;padding:clamp(1.5rem,3vw,2.25rem);background:rgba(255,255,255,.03)}
.ccard dl{margin:0;display:grid;gap:1.3rem}
.ccard dt{font-family:var(--ff-m);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.ccard dd{margin:.3rem 0 0;font-size:1.05rem}
.ccard dd a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}
.ccard dd a:hover{border-bottom-color:var(--accent);color:var(--accent)}
.ccard address{font-style:normal;line-height:1.55}

/* ── Footer ──────────────────────────────────────────── */
.ft{background:var(--ink);color:var(--mute);border-top:1px solid var(--line-d);padding-block:3.5rem 2rem}
/* Fünf Spalten, seit der Ratgeber eine eigene bekommen hat. Vorher
   standen Einsatzgebiet, Impressum und die Profile mit unter der
   Überschrift „Ratgeber" — was sie erkennbar nicht sind. */
.ft-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:2rem}
@media(max-width:1100px){.ft-grid{grid-template-columns:1fr 1fr 1fr;gap:2.25rem}}
@media(max-width:760px){.ft-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ft-grid{grid-template-columns:1fr}}
.ft h2{font-family:var(--ff-m);font-size:.66rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--paper);margin-bottom:1rem;font-variation-settings:normal}
.ft a{color:var(--mute);text-decoration:none;transition:color .18s}
.ft a:hover{color:var(--accent)}
.ft li{margin-bottom:.5rem;font-size:.92rem}
.ft .brand{color:var(--paper);margin-bottom:1rem}
.ft-legal{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line-d);
  font-family:var(--ff-m);font-size:.68rem;letter-spacing:.05em;
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between}

/* ── Scroll-Reveal ───────────────────────────────────── */
.rv{opacity:0;transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.2,.8,.3,1),transform .7s cubic-bezier(.2,.8,.3,1)}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    animation-delay:0ms!important;transition-duration:.01ms!important}
  .board .brow,.board .pill,.board-ft,.lights i{opacity:1!important}
  .rv{opacity:1;transform:none}
}

/* ══ Heller Hero ═══════════════════════════════════════
   Umschalten: in home.py HERO_HELL = True / False
   Das Statusboard bleibt bewusst dunkel — auf hellem
   Grund ist es der Blickfang statt einer Fläche.
   ══════════════════════════════════════════════════════ */
.theme-hell .hero{background:var(--paper);color:var(--ink)}
.theme-hell .hero::before{background:
  radial-gradient(760px 460px at 74% 18%,rgba(228,24,30,.10),transparent 72%),
  radial-gradient(560px 400px at 6% 88%,rgba(228,24,30,.05),transparent 72%)}
.theme-hell .hero::after{opacity:.85;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px)}
.theme-hell .hero .lede{color:var(--slate)}
.theme-hell .hero .eyebrow--l{color:var(--brand)}
.theme-hell .hero .stats{border-top-color:var(--line)}
.theme-hell .hero .stat span{color:var(--slate)}
.theme-hell .hero .btn--g{border-color:var(--ink);color:var(--ink)}
.theme-hell .hero .btn--g:hover{background:var(--ink);color:var(--paper)}
.theme-hell .hero .net-line{opacity:.22}
.theme-hell .hero .net-line:nth-of-type(2n){opacity:.16}
.theme-hell .hero .net-line:nth-of-type(3n){opacity:.12}
.theme-hell .hero .net-node{opacity:.4}
.theme-hell .hero .board{box-shadow:0 44px 90px -46px rgba(10,10,12,.55),
  0 0 0 1px rgba(255,255,255,.05) inset}
/* Ticker unter hellem Hero dunkel — Kontrastwechsel bleibt erhalten */
.theme-hell .hero + .ticker{background:var(--ink-2);border-block-color:var(--line-d);color:var(--mute)}

/* ══ Durchgehend helles Thema ══════════════════════════
   Aktiv über die Body-Klasse theme-hell.
   Umschalten in home.py: HERO_HELL = True / False
   Rhythmus entsteht jetzt über drei helle Flächen
   (paper / weiß / warm) statt über Schwarz.
   ══════════════════════════════════════════════════════ */

/* Dunkle Abschnitte werden zu warmen Bändern */
.theme-hell .on-dark{background:var(--warm);color:var(--ink);
  border-block:1px solid var(--line)}
.theme-hell .on-dark .lede{color:var(--slate)}
.theme-hell .on-dark .eyebrow--l{color:var(--brand)}
.theme-hell .on-dark .step p{color:var(--slate)}
.theme-hell .on-dark .step::before{color:var(--brand)}
.theme-hell .on-dark .step::after{background:var(--line)}
.theme-hell .on-dark .btn--g{border-color:var(--ink);color:var(--ink)}
.theme-hell .on-dark .btn--g:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* Kontaktkarte */
.theme-hell .ccard{border-color:var(--line);background:var(--white)}
.theme-hell .ccard dt{color:var(--brand)}
.theme-hell .ccard dd a{border-bottom-color:var(--line)}
.theme-hell .ccard dd a:hover{border-bottom-color:var(--brand);color:var(--brand-deep)}

/* Statusboard hell — Struktur bleibt, Schwarz geht raus */
.theme-hell .board{background:var(--white);border-color:var(--line);
  box-shadow:0 34px 70px -44px rgba(10,10,12,.4)}
.theme-hell .board-hd{background:var(--warm);border-bottom-color:var(--line)}
.theme-hell .board-hd p{color:var(--slate)}
.theme-hell .brow{border-bottom-color:var(--line)}
.theme-hell .brow .sub{color:var(--slate)}
.theme-hell .board-ft{background:var(--warm);border-top-color:var(--line);color:var(--slate)}
.theme-hell .pill.ok{color:#1a7a4d;border-color:rgba(26,122,77,.3);background:rgba(26,122,77,.08)}
.theme-hell .pill.warn{color:#95610a;border-color:rgba(149,97,10,.3);background:rgba(149,97,10,.08)}

/* Ticker als warmes Band */
.theme-hell .ticker,.theme-hell .theme-hell .hero + .ticker{background:var(--warm);
  border-block:1px solid var(--line);color:var(--slate)}

/* Footer hell */
/* Footer bleibt in beiden Themen dunkel.
   Zwei Gründe: Die Kopfleiste ist es auch, damit bekommt die Seite oben
   und unten eine Kante statt oben eine und unten ein Auslaufen ins
   Beige. Und die helle Fassung war schlicht zu blass — die
   Spaltenüberschriften standen fast weiß auf Sandton.

   (Nebenbei war das ein echter Fehler: Die Überschriften wurden von h3
   auf h2 umgestellt, weil auf der 404-Seite sonst H1 auf H3 sprang.
   Diese Regel hier zeigte weiter auf h3 und griff deshalb nicht mehr.)
   Die Standardregeln für .ft gelten damit in beiden Themen. */

/* Privat-Band gegen die warmen Nachbarn absetzen */
.theme-hell .privat{background:var(--white)}
.theme-hell .privat-list a{background:var(--white)}
.theme-hell .privat-list a:hover{background:var(--warm)}

/* Kopfleiste bleibt dunkel: gibt der Seite eine Oberkante */

/* Kopfbereich der Unterseiten — analog zum hellen Hero */
.theme-hell .phero{background:var(--paper);color:var(--ink)}
.theme-hell .phero::before{background:
  radial-gradient(700px 380px at 78% 15%,rgba(228,24,30,.09),transparent 72%),
  radial-gradient(480px 320px at 4% 90%,rgba(228,24,30,.04),transparent 72%)}
.theme-hell .phero::after{opacity:.8;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px)}
.theme-hell .phero .lede{color:var(--slate)}
.theme-hell .phero .eyebrow--l{color:var(--brand)}
.theme-hell .phero .btn--g{border-color:var(--ink);color:var(--ink)}
.theme-hell .phero .btn--g:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.theme-hell .crumbs{color:var(--slate)}
.theme-hell .crumbs a{color:var(--slate)}
.theme-hell .crumbs a:hover{color:var(--brand)}
.theme-hell .crumbs li+li::before{color:var(--line)}
.theme-hell .crumbs [aria-current]{color:var(--ink)}

/* ── Hell/Dunkel-Schalter ───────────────────────────── */
.themebtn{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:none;margin-left:.4rem;border-radius:var(--r);
  cursor:pointer;color:var(--paper);border:1px solid var(--line-d);
  background:rgba(255,255,255,.05);transition:background .18s,border-color .18s,transform .18s}
.themebtn:hover{background:rgba(255,255,255,.12);border-color:var(--mute);transform:translateY(-1px)}
.themebtn svg{width:17px;height:17px;display:block}
.themebtn .ico-mond{display:none}
.theme-hell .themebtn .ico-sonne{display:none}
.theme-hell .themebtn .ico-mond{display:block}
@media(max-width:1200px){.themebtn{margin-left:auto}.burger{margin-left:.3rem}}

/* ══════════════════════════════════════════════════════════════════
   BEWEGUNG
   ──────────────────────────────────────────────────────────────────
   Alles hier ist an die Scrollposition gebunden, nicht an einen
   Timer. Der Unterschied ist spürbar: Wer zurückscrollt, sieht die
   Bewegung rückwärts laufen. Das wirkt wie Material, das mitgeht,
   statt wie ein Video, das einmal abspielt.

   Technisch: animation-timeline: view() bzw. scroll(). Browser ohne
   Unterstützung bekommen über @supports den bisherigen Zustand –
   die Seite ist dort vollständig, nur ruhiger.

   Alles steckt zusätzlich in prefers-reduced-motion: no-preference.
   Wer im System Bewegung abbestellt hat, bekommt gar nichts davon.
   ══════════════════════════════════════════════════════════════════ */

/* ── Lesefortschritt ──────────────────────────────────────────────
   Dünner Balken an der Oberkante, direkt an das Dokument gekoppelt.
   Kein JavaScript, kein Scroll-Listener.                           */
.fortschritt{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;
  transform-origin:0 50%;transform:scaleX(0);pointer-events:none;
  background:linear-gradient(90deg,var(--brand),var(--accent))}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .fortschritt{animation:fortschritt linear;animation-timeline:scroll(root block)}
  }
}
@keyframes fortschritt{to{transform:scaleX(1)}}

/* ── Kopfleiste beim Scrollen ─────────────────────────────────────
   Wird schmaler und legt eine Schattenkante an, sobald man den
   Hero verlassen hat. Die Klasse setzt site.js.                    */
.hd{transition:min-height .3s cubic-bezier(.2,.8,.3,1),
    background-color .3s,box-shadow .3s}
.hd-in{transition:min-height .3s cubic-bezier(.2,.8,.3,1)}
.hd--klein .hd-in{min-height:60px}
.hd--klein{background:rgba(10,10,12,.96);box-shadow:0 10px 30px -20px #000}
.hd--klein .brand small{opacity:0;max-height:0;overflow:hidden;
  transition:opacity .25s,max-height .25s}
.brand small{transition:opacity .25s,max-height .25s;max-height:1.2em}

/* ── Logo-Marke ───────────────────────────────────────────────────
   Ersetzt den früheren roten Kasten mit dem Buchstaben K durch die
   echte Marke. currentColor, damit sie überall mitgeht.            */
.bm{width:32px;height:auto;flex:none;display:block;
  color:var(--brand);background:none;border-radius:0;box-shadow:none;
  transition:transform .45s cubic-bezier(.2,.8,.3,1),width .3s}
.brand:hover .bm{transform:translateY(-2px) rotate(-4deg) scale(1.06)}
.ft .bm{width:28px}
.hd--klein .bm{width:26px}
/* Auf dunklem Grund etwas heller, damit das Rot nicht absäuft */
.hd .bm{color:var(--brand)}
.theme-hell .ft .bm{color:var(--brand)}
/* Footer ist jetzt in beiden Themen dunkel — Trennlinie mitziehen */
.theme-hell .ft,.theme-hell .ft-legal{border-color:var(--line-d)}

/* ── Abschnitte schwingen ein ─────────────────────────────────────
   Ersetzt das einmalige Einblenden durch eine Bewegung, die an den
   Sichtbereich gekoppelt ist.                                      */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rv{opacity:1;transform:none;transition:none;
      animation:einschwingen linear both;
      animation-timeline:view();
      animation-range:entry 5% cover 26%}
    .rv.in{opacity:1}
  }
}
@keyframes einschwingen{
  from{opacity:0;transform:translateY(28px) scale(.985)}
  to{opacity:1;transform:none}
}

/* Überschriften decken sich auf, statt nur zu erscheinen */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .sec-head h2{animation:aufdecken linear both;animation-timeline:view();
      animation-range:entry 10% cover 30%}
  }
}
@keyframes aufdecken{
  from{clip-path:inset(0 0 62% 0);opacity:.15;transform:translateY(14px)}
  to{clip-path:inset(0 0 0 0);opacity:1;transform:none}
}

/* ══ Gestapelte Ablaufkarten ══════════════════════════════════════
   Die Schritte laufen nicht nebeneinander weg, sondern legen sich
   übereinander: Karte 1 bleibt kleben, Karte 2 schiebt sich darüber,
   Karte 1 tritt dabei einen Schritt zurück. Man liest zwangsläufig
   in der richtigen Reihenfolge, und der Abschnitt bekommt Tiefe.

   Unter 820 px abgeschaltet — auf einem Handy ist zu wenig Höhe da,
   als dass Stapeln noch lesbar wäre. Dort stehen die Karten
   schlicht untereinander.
   ══════════════════════════════════════════════════════════════════ */
.stapel{display:flex;flex-direction:column;gap:1.25rem}
.stapel-karte{background:var(--white);border:1px solid var(--line);
  border-radius:8px;padding:clamp(1.5rem,3.4vw,2.6rem);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.2rem,3vw,2.4rem);
  align-items:start;
  box-shadow:0 30px 60px -46px rgba(10,10,12,.5)}
.on-dark .stapel-karte{background:var(--ink-2);border-color:var(--line-d);
  box-shadow:0 34px 70px -44px #000}
/* Im hellen Thema wird .on-dark zum warmen Band — die Karten müssen
   mitgehen, sonst stehen dunkle Kästen auf hellem Grund. */
.theme-hell .on-dark .stapel-karte{background:var(--white);
  border-color:var(--line);box-shadow:0 30px 60px -46px rgba(10,10,12,.45)}
.theme-hell .on-dark .stapel-karte p{color:var(--slate)}
.stapel-nr{font-family:var(--ff-d);font-variation-settings:"wdth" 118;
  font-weight:800;font-size:clamp(2.4rem,5vw,3.6rem);line-height:.9;
  color:transparent;-webkit-text-stroke:1.5px var(--brand);
  letter-spacing:-.03em}
.stapel-karte h3{font-size:clamp(1.25rem,2.2vw,1.7rem);margin-bottom:.7rem}
.stapel-karte p{color:var(--slate);max-width:56ch}
.on-dark .stapel-karte p{color:var(--mute)}
.stapel-mehr{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.1rem;
  font-family:var(--ff-m);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brand);text-decoration:none}
.stapel-mehr::after{content:"→";transition:transform .25s}
.stapel-mehr:hover::after{transform:translateX(5px)}

@media(min-width:821px){
  .stapel{gap:2rem}
  .stapel-karte{position:sticky;top:calc(84px + var(--i) * 18px)}
  @supports (animation-timeline:view()){
    @media (prefers-reduced-motion:no-preference){
      .stapel-karte{animation:zuruecktreten linear both;
        animation-timeline:view();
        animation-range:exit-crossing 0% exit 100%}
    }
  }
}
@keyframes zuruecktreten{
  to{transform:scale(.94) translateY(-10px);opacity:.55;filter:saturate(.7)}
}

/* ── Mega-Menü: Einträge laufen leicht versetzt ein ───────────────
   Vorher starteten sie bei opacity 0, während das Feld schon voll
   sichtbar war — man sah einen Lidschlag lang eine leere Fläche.
   Jetzt sind sie von Anfang an lesbar und schieben sich nur noch
   ein paar Pixel nach. Das Versetzte bleibt, das Flackern ist weg. */
.mega a{transform:translateY(-5px);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),background .16s}
.mega[data-open=true] a{transform:none;transition-delay:calc(var(--n,0) * 18ms)}
@media (prefers-reduced-motion:reduce){.mega a{transform:none;transition:none}}

/* ── Schaltflächen: Schimmer beim Überfahren ──────────────────────
   Ein einzelner Lichtstreifen, kein Dauerleuchten.                 */
.btn--p{position:relative;overflow:hidden;isolation:isolate}
.btn--p::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 38%,
             rgba(255,255,255,.28) 50%,transparent 62%);
  transform:translateX(-120%)}
.btn--p:hover::after{transform:translateX(120%);transition:transform .7s ease}
@media (prefers-reduced-motion:reduce){.btn--p::after{display:none}}

/* ── Karten: Nachbarn treten zurück ───────────────────────────────
   Beim Überfahren einer Karte werden die anderen leicht ruhiger.
   Macht die Auswahl eindeutig, ohne dass etwas springt.            */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .cards:hover .card:not(:hover){opacity:.62;transform:scale(.99)}
  .card{transition:transform .28s cubic-bezier(.2,.8,.3,1),
        box-shadow .28s,border-color .28s,opacity .28s}
}

/* ── Einsatzgebiet: Orte laufen versetzt ein ──────────────────────── */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .areas li{animation:ortauf linear both;animation-timeline:view();
      animation-range:entry 0% cover 22%}
  }
}
@keyframes ortauf{from{opacity:0;transform:translateY(10px) scale(.9)}
  to{opacity:1;transform:none}}

/* ── Hintergrundtextur im Kopfbereich ─────────────────────────────
   Nur auf fünf Leistungsseiten. Stark abgedunkelt und ins Markenrot
   gezogen, unten weich auslaufend, damit der Text ruhig bleibt.
   Rein dekorativ — die Aussage steht im Text, nicht im Bild.      */
.phero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-size:cover;background-position:center;opacity:.3;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 55%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 55%,transparent 100%)}
.phero--bild::before{opacity:.85}
.theme-hell .phero-bg{opacity:.1;filter:saturate(.8)}
@media(max-width:700px){.phero-bg{opacity:.18}}

/* Langsames Mitgehen beim Scrollen — der Parallaxe-Effekt fällt
   nicht auf, sorgt aber dafür, dass der Kopfbereich lebt.        */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .phero-bg{animation:bgschieben linear both;animation-timeline:view();
      animation-range:cover 0% cover 100%}
  }
}
@keyframes bgschieben{
  from{transform:scale(1.08) translateY(-2%)}
  to{transform:scale(1.08) translateY(4%)}
}

/* ══════════════════════════════════════════════════════════════════
   KARTE DES EINSATZGEBIETS
   ──────────────────────────────────────────────────────────────────
   Echte Koordinaten, maßstäblich. Beim Scrollen laufen die Fahrzeit-
   Ringe von innen nach außen auf, danach leuchten die Orte in der
   Reihenfolge ihrer Entfernung auf. Das erzählt in drei Sekunden,
   was zehn Zeilen Text erklären müssten: Der Standort liegt mitten
   drin, nicht am Rand.
   ══════════════════════════════════════════════════════════════════ */
.karte{margin-top:2.5rem}
.karte svg{width:100%;height:auto;overflow:visible}

.k-ring{fill:none;stroke:var(--brand);stroke-width:1;opacity:.2;
  stroke-dasharray:3 7}
.k-ringtext{font-family:var(--ff-m);font-size:12px;fill:var(--brand);opacity:.5;
  letter-spacing:.12em;text-transform:uppercase}
.k-linie{stroke:var(--line);stroke-width:1;opacity:.55}
.on-dark .k-linie{stroke:var(--line-d)}
.k-punkt{fill:var(--paper);stroke:var(--brand);stroke-width:2}
.theme-hell .k-punkt{fill:var(--white)}
.k-name{font-family:var(--ff-b);font-size:14px;font-weight:600;fill:currentColor}
.k-km{font-family:var(--ff-m);font-size:11.5px;fill:var(--slate);letter-spacing:.06em}
.on-dark .k-km{fill:var(--mute)}
.k-heimpunkt{fill:var(--brand)}
.k-puls{fill:var(--brand);opacity:.3;transform-origin:center;transform-box:fill-box}
.k-heimname{font-family:var(--ff-d);font-variation-settings:"wdth" 112;font-weight:800;
  font-size:17px;fill:currentColor;letter-spacing:-.01em}
.k-heimsub{font-family:var(--ff-m);font-size:11px;fill:var(--brand);letter-spacing:.14em;
  text-transform:uppercase}

@media (prefers-reduced-motion:no-preference){
  .k-puls{animation:kpuls 3s ease-out infinite}
}
@keyframes kpuls{0%{transform:scale(.7);opacity:.4}70%,100%{transform:scale(2.6);opacity:0}}

/* Aufbau beim Scrollen — an die Sichtbarkeit gekoppelt, nicht an einen Timer */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .k-ring,.k-linie,.k-ort,.k-heim{animation:kauf linear both;
      animation-timeline:view();animation-range:entry 8% cover 34%}
    .k-ring{animation-name:kring}
    .k-linie{animation-name:klinie}
    .k-ort{animation-name:kort}
  }
}
@keyframes kring{from{opacity:0;transform:scale(.55);transform-origin:center;transform-box:fill-box}
  to{opacity:.2;transform:none}}
@keyframes klinie{from{opacity:0}to{opacity:.55}}
@keyframes kort{from{opacity:0}to{opacity:1}}
@keyframes kauf{from{opacity:0}to{opacity:1}}

@media(max-width:760px){
  .k-name{font-size:19px}
  .k-km{font-size:15px}
  .k-heimname{font-size:23px}
  .k-heimsub,.k-ringtext{font-size:15px}
}

/* ══════════════════════════════════════════════════════════════════
   ABSCHNITTE UNTER DEM HERO
   ──────────────────────────────────────────────────────────────────
   Der Hero sitzt. Darunter wurde es flach: gleich große Abschnitte,
   gleicher Rhythmus, nichts, woran das Auge hängenbleibt. Dagegen
   dreierlei — eine Kapitelmarke am linken Rand, Überschriften, die
   sich zeilenweise aufdecken, und Karten mit Tiefenstaffelung.
   ══════════════════════════════════════════════════════════════════ */

/* ── Kapitelmarke ─────────────────────────────────────────────────
   Kleine mitlaufende Nummer am linken Rand. Zeigt, wo man ist, und
   gibt den Abschnitten eine Reihenfolge.

   Als eigenes Element, nicht als ::before: Das Privatkunden-Band
   benutzt ::before schon für seinen roten Oberstrich, und zwei
   Regeln auf demselben Pseudo-Element löschen sich gegenseitig aus.
   Genau das hat dort einen roten Strich quer durch den Abschnitt
   gezogen.

   Erst ab 1280 px sichtbar — darunter ist links kein Platz.        */
.kap{display:none}
@media(min-width:1280px){
  .sec{position:relative}
  .kap{display:block;position:absolute;
    left:max(1.25rem,calc((100vw - var(--wrap))/2 - 3.4rem));
    top:calc(var(--sy) + .4rem);
    font-family:var(--ff-m);font-size:.66rem;letter-spacing:.2em;
    color:var(--brand);opacity:.5;white-space:nowrap;
    writing-mode:vertical-rl;text-orientation:mixed;pointer-events:none}
  .kap::after{content:"";position:absolute;left:50%;top:calc(100% + .9rem);
    width:1px;height:min(9rem,22vh);
    background:linear-gradient(180deg,var(--brand),transparent);opacity:.45}
  .on-dark .kap{color:var(--accent)}
}

/* ── Leistungskarten mit Tiefe ────────────────────────────────────
   Die Nummer wandert nach hinten und wird beim Überfahren größer.
   Kostet nichts und macht aus vier gleichen Kacheln vier Karten.  */
.card{--kipp:0deg}
.card::after{content:"";position:absolute;right:-30px;bottom:-30px;
  width:130px;height:130px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(228,24,30,.14),transparent 68%);
  opacity:0;transform:scale(.6);
  transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.3,1)}
.card:hover::after{opacity:1;transform:scale(1)}
.card-n{transition:letter-spacing .3s cubic-bezier(.2,.8,.3,1)}
.card:hover .card-n{letter-spacing:.22em}

/* ── Leistungsliste: Zeile schiebt eine Farbfläche auf ───────────── */
.svc a{position:relative;overflow:hidden}
.svc a::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(228,24,30,.08),transparent 60%);
  transform:translateX(-100%);transition:transform .38s cubic-bezier(.2,.8,.3,1)}
.svc a:hover::before{transform:translateX(0)}

/* ── Ortsliste: Marken statt Wortliste ───────────────────────────── */
.areas li{position:relative;transition:all .22s cubic-bezier(.2,.8,.3,1)}
.areas li:hover{background:var(--brand);border-color:var(--brand);color:#fff;
  transform:translateY(-3px);box-shadow:0 10px 22px -12px var(--brand)}

/* ── Zahlenband im Hero: Ziffern rasten ein ──────────────────────── */
.stat b{transition:transform .3s cubic-bezier(.2,1.5,.4,1)}
.stat:hover b{transform:translateY(-3px) scale(1.03)}

/* ── Ratgeber-Übersicht ───────────────────────────────────────────
   Artikel als Karten statt als Fließtext. Nach Zielgruppe gruppiert,
   damit ein Betrieb nicht erst durch Privatkundenthemen scrollt.   */
.ratgruppe{margin-bottom:clamp(2.25rem,4vw,3.25rem)}
.ratgruppe:last-child{margin-bottom:0}
.ratliste{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));
  gap:1px;background:var(--line);border:1px solid var(--line)}
.on-dark .ratliste{background:var(--line-d);border-color:var(--line-d)}
.ratkarte{position:relative;display:block;background:var(--paper);
  padding:clamp(1.35rem,2.6vw,1.9rem);text-decoration:none;
  transition:background .24s,padding-left .24s}
.theme-hell .ratkarte{background:var(--white)}
.ratkarte:hover{background:var(--warm);padding-left:calc(clamp(1.35rem,2.6vw,1.9rem) + .45rem)}
.ratkarte-nr{font-family:var(--ff-m);font-size:.66rem;letter-spacing:.16em;
  color:var(--brand);display:block;margin-bottom:.7rem}
.ratkarte h3{font-size:clamp(1.05rem,1.7vw,1.24rem);margin-bottom:.5rem;
  text-wrap:balance}
.ratkarte p{font-size:.93rem;color:var(--slate);line-height:1.55}
.ratkarte .go{margin-top:.9rem;display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--ff-m);font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--brand)}
.ratkarte .go::after{content:"→";transition:transform .24s}
.ratkarte:hover .go::after{transform:translateX(5px)}

/* ══════════════════════════════════════════════════════════════════
   SITUATIONEN
   ──────────────────────────────────────────────────────────────────
   Vorher standen hier zwölf gleich große Kacheln mit Leistungsnamen.
   Zwölf gleichrangige Felder liest niemand — man überfliegt sie und
   merkt sich nichts.

   Jetzt steht der Satz vorn, den jemand am Telefon sagen würde, und
   die Leistung klein darunter. Das Anführungszeichen macht sichtbar,
   dass es ein Zitat ist und keine Überschrift; es liegt groß und blass
   hinter dem Text, damit es Struktur gibt statt Lärm.
   ══════════════════════════════════════════════════════════════════ */
.sits{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr));
  gap:1px;background:var(--line);border:1px solid var(--line)}
.on-dark .sits{background:var(--line-d);border-color:var(--line-d)}

.sit{position:relative;display:block;background:var(--paper);
  padding:clamp(1.5rem,2.8vw,2rem) clamp(1.4rem,2.6vw,1.9rem);
  text-decoration:none;overflow:hidden;isolation:isolate;
  transition:background .26s cubic-bezier(.2,.8,.3,1)}
.theme-hell .sit{background:var(--white)}
.sits--warm .sit{background:var(--warm)}
.theme-hell .sits--warm .sit{background:var(--white)}

/* Das Anführungszeichen als Fläche, nicht als Zeichen im Textfluss */
.sit-q{position:absolute;right:.5rem;top:-1.6rem;z-index:-1;
  font-family:var(--ff-d);font-variation-settings:"wdth" 118;font-weight:800;
  font-size:7rem;line-height:1;color:var(--brand);opacity:.07;
  transition:opacity .3s,transform .45s cubic-bezier(.2,.8,.3,1)}
.sit:hover .sit-q{opacity:.16;transform:translateY(4px) scale(1.06)}

.sit-satz{display:block;font-family:var(--ff-d);font-variation-settings:"wdth" 108;
  font-weight:600;font-size:clamp(1.06rem,1.55vw,1.24rem);line-height:1.28;
  letter-spacing:-.012em;text-wrap:balance;
  transition:transform .26s cubic-bezier(.2,.8,.3,1)}
.sit:hover .sit-satz{transform:translateX(4px)}

.sit-leistung{display:inline-flex;align-items:center;gap:.45rem;margin-top:.85rem;
  font-family:var(--ff-m);font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--brand);
  transition:transform .26s cubic-bezier(.2,.8,.3,1) .03s}
.sit-leistung::after{content:"→";transition:transform .26s}
.sit:hover .sit-leistung{transform:translateX(4px)}
.sit:hover .sit-leistung::after{transform:translateX(4px)}

.sit:hover{background:var(--white)}
.theme-hell .sit:hover{background:var(--warm)}
.sits--warm .sit:hover{background:var(--white)}
.theme-hell .sits--warm .sit:hover{background:var(--paper)}

/* Roter Balken links, der beim Überfahren aufwächst */
.sit::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--brand);transform:scaleY(0);transform-origin:top;
  transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.sit:hover::before{transform:scaleY(1)}

@media (prefers-reduced-motion:reduce){
  .sit,.sit-q,.sit-satz,.sit-leistung,.sit::before{transition:none}
}