/* ══════════════════════════════════════════════════════════
   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:"Grotesk";src:url(/fonts/space-grotesk.woff2) format("woff2-variations");
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"SMono";src:url(/fonts/space-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"SMono";src:url(/fonts/space-mono-700.woff2) format("woff2");font-weight:700;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:"Grotesk","Helvetica Neue",Arial,sans-serif;
  --ff-b:"Plex Sans",-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;
  --ff-m:"SMono","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}
/* overflow-x bleibt auf dem BODY.
   ──────────────────────────────────────────────────────────────────
   Am 13. August 2026 probeweise auf `html{overflow-x:clip}` umgestellt,
   weil `hidden` auf einer Achse die andere von `visible` auf `auto`
   zwingt und den Body damit zu einem eigenen Scroll-Container macht.
   Das ist theoretisch der sauberere Weg — praktisch hat es den
   Lesefortschritt oben zerlegt: Bei vollem Scroll stand der Balken
   auf 0,0007 statt 1, weil `scroll(root)` dann eine andere
   Zeitachse misst. Gemessen, verworfen, hier notiert, damit es
   niemand ein zweites Mal versucht. */
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-weight:700;
  line-height:1.02;letter-spacing:-.032em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.4rem,5.8vw,4.6rem);font-weight:700;letter-spacing:-.042em}
h2{font-size:clamp(1.95rem,3.9vw,3.15rem);letter-spacing:-.038em}
h3{font-size:clamp(1.12rem,1.6vw,1.38rem);letter-spacing:-.022em}
h4{font-size:1rem;letter-spacing:-.018em}
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-schrift);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(--band-tinte)}

.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-schrift);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(--band-tinte);border-color:var(--ink)}
.on-dark .btn--g,.hero .btn--g,.phero .btn--g{border-color:var(--mute);color:var(--band-tinte)}
.on-dark .btn--g:hover,.hero .btn--g:hover,.phero .btn--g:hover{background:var(--paper);color:var(--ink);border-color:var(--band-tinte)}
.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(--band-tinte)}
.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;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(--band-tinte);
  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-schrift);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}
/* KORREKTUR: Die Striche standen auf --paper. Das ist die Farbe des
   Seitengrunds und kippt mit dem Thema — im Dunkelmodus also #0a0a0c,
   schwarz auf schwarzer Kopfleiste. Das Menuezeichen war dort
   unsichtbar. Jetzt die feste helle Bandfarbe; das helle Thema setzt
   in Abschnitt 39 dagegen. */
.burger span{position:absolute;left:11px;width:20px;height:2px;background:var(--band-tinte);
  transition:transform .25s,opacity .2s,background-color .25s}
.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-schrift);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(--band-tinte);font-size:1.05rem;font-weight:500}
.mnav a::after{content:"→";color:var(--brand-schrift);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(--band-tinte)}
.mnav .btn--p{border-color:var(--brand-schrift);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}
/* Kein Blinken mehr.
   ──────────────────────────────────────────────────────────────────
   Der Punkt pulsierte alle zwei Sekunden. Zusammen mit dem
   vollflaechigen Rot und den Versalien in Monospace ergab das exakt
   die Bildsprache gefaelschter Virenwarnungen — eine Aussenmeinung
   am 13. August 2026 las das Band als Scam statt als Angebot.

   Nebenbei war es ein Barrierefreiheitsmangel: Die Animation lief
   ohne Ruecksicht auf prefers-reduced-motion, dauerhaft und
   unabschaltbar. Ein ruhiger Punkt sagt dasselbe. */
.dot{width:8px;height:8px;border-radius:50%;background:#fff;flex:none}

/* ── Hero Startseite ─────────────────────────────────── */
.hero{background:var(--ink);color:var(--band-tinte);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-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(--band-tinte);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(--band-tinte)}

/* ── 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}
@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-schrift);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-schrift);
  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-schrift);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}
/* KORREKTUR 6. August 2026: Hier stand eine Regel, die den ERSTEN
   Absatz in einer Karte in Mono, Versalien und .68rem setzte — als
   Beschriftungszeile gedacht, aus einem früheren Entwurf. In der
   neuen Kontaktkarte neben den häufigen Fragen ist der erste Absatz
   aber Fliesstext. Der stand dadurch in Grossbuchstaben und einer
   anderen Schrift als der Rest der Seite.
   Die Regel wurde nirgends sonst gebraucht — die einzige Karte mit
   einer echten Beschriftung nutzt dafür .picker-hd. Also entfernt
   statt überschrieben. */
.picker-bd>p{margin-top:0}
.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-schrift);color:var(--brand-deep);transform:translateY(-1px)}
.chip[aria-pressed=true]{background:var(--brand);border-color:var(--brand-schrift);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-schrift)}
.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-schrift);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-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-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-schrift);color:var(--brand-schrift);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-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-schrift);margin-bottom:.4rem}
.next b{display:block;font-family:var(--ff-d);font-weight:600;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(--band-tinte);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(--band-tinte);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-schrift)}
.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(--band-tinte)}
.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-schrift)}
.theme-hell .on-dark .step p{color:var(--slate)}
.theme-hell .on-dark .step::before{color:var(--brand-schrift)}
.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(--band-tinte);border-color:var(--ink)}

/* Kontaktkarte */
.theme-hell .ccard{border-color:var(--line);background:var(--white)}
.theme-hell .ccard dt{color:var(--brand-schrift)}
.theme-hell .ccard dd a{border-bottom-color:var(--line)}
.theme-hell .ccard dd a:hover{border-bottom-color:var(--brand-schrift);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-schrift)}
.theme-hell .phero .btn--g{border-color:var(--ink);color:var(--ink)}
.theme-hell .phero .btn--g:hover{background:var(--ink);color:var(--band-tinte);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-schrift)}
.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(--band-tinte);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){
    /* `both` ist hier keine Kosmetik, sondern die Reparatur.
       ────────────────────────────────────────────────────────────
       Vorher lief die Animation ohne Füllmodus. Solange der Fortschritt
       zwischen 0 und 100 % liegt, ist das gleich; sobald er kurz
       darüber oder darunter gerät, ist die Animation ausserhalb ihres
       Bereichs — und ohne Füllmodus fällt der Balken dann auf den
       Grundwert scaleX(0) zurück. Also von halbvoll auf leer.

       Genau das passiert auf dem iPhone: Beim Scrollen klappt Safari
       die Adressleiste ein, das Fenster wird höher, der scrollbare
       Bereich dadurch kürzer — und die aktuelle Position liegt für
       einen Moment jenseits des Endes. Der Balken sprang zurück.
       Am Rechner sieht man es nie, weil sich dort die Fensterhöhe
       beim Scrollen nicht ändert.

       Mit `both` hält er stattdessen den letzten Wert. */
    .fortschritt{animation:fortschritt linear both;
      animation-timeline:scroll(root block)}
    /* site.js setzt diese Klasse auf Geraeten mit grobem Zeiger und
       rechnet den Balken dort selbst. Ohne das Stilllegen gewaenne
       die Animation — sie steht in der Kaskade ueber dem
       Stilattribut, das JavaScript setzt. */
    .fortschritt--js{animation:none}
  }
}
@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-schrift);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-schrift)}
.theme-hell .ft .bm{color:var(--brand-schrift)}
/* 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-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-schrift);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-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-schrift);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-schrift);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-schrift);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-schrift)}
.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-weight:800;
  font-size:7rem;line-height:1;color:var(--brand-schrift);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-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-schrift);
  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}
}

/* ══════════════════════════════════════════════════════════════════
   AUSBAU — Tiefe, Rhythmus und Bewegung unterhalb des Heros
   ──────────────────────────────────────────────────────────────────
   Befund: Der Hero hat eine eigene Sprache (dunkel, roter Schein,
   Netz, Mono-Labels). Ab dem ersten Scroll wurde sie fallengelassen —
   weiße Karten mit 1px-Grau, vier helle Abschnitte hintereinander.
   Das ist der Grund, warum es unterhalb der Falz langweilig wirkt.

   Dieser Block ergänzt, er ersetzt nichts. Steht bewusst am Ende,
   damit er bei gleicher Spezifität gewinnt.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1 · Korn über der ganzen Seite ──────────────────────────────
   Nimmt großen Flächen die digitale Flachheit. Ein SVG, ~200 Byte,
   liegt über allem und fängt keine Klicks ab. */
body::after{content:"";position:fixed;inset:0;z-index:900;pointer-events:none;
  opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
.theme-hell body::after{opacity:.022}

/* ── 2 · Karten bekommen eine Verlaufskante statt 1px Grau ───────
   Der Unterschied zwischen „Kasten" und „Objekt". Die Kante ist
   oben links rot angehaucht und läuft nach unten aus. */
.card,.sit{isolation:isolate}
/* KORREKTUR: Weiter oben (Abschnitt „Leistungskarten mit Tiefe") stand auf
   demselben ::after schon einmal ein Leuchtkreis mit width:130px, height:130px
   und transform:scale(.6). Diese Regel hier setzt zwar inset:0, aber weder
   Breite noch Hoehe noch transform — beides blieb also stehen. Ergebnis: die
   Verlaufskante wurde nicht um die Karte gelegt, sondern als 130 x 130 grosses,
   auf 60 % geschrumpftes Rechteck oben links hineingemalt. Genau das waren die
   „Artefakte" auf dem Handy. Breite, Hoehe und transform deshalb ausdruecklich
   zuruecksetzen. */
.card::after{content:"";position:absolute;inset:0;width:auto;height:auto;
  transform:none;border-radius:inherit;padding:1px;
  background:linear-gradient(145deg,rgba(228,24,30,.55),rgba(0,0,0,.06) 34%,
    rgba(0,0,0,.05) 68%,rgba(228,24,30,.2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.5;transition:opacity .3s;pointer-events:none;z-index:3}
.card:hover::after{opacity:1}
.card{border-color:transparent;box-shadow:0 1px 2px rgba(10,10,12,.05),0 8px 22px -18px rgba(10,10,12,.35)}
.card:hover{box-shadow:0 30px 60px -34px rgba(228,24,30,.55),0 6px 18px -10px rgba(10,10,12,.3)}

/* ── 3 · Die Sätze aus dem Alltag tragen jetzt ───────────────────
   Vorher: kleine graue Kästchen mit riesigem Anführungszeichen.
   Jetzt: der Satz ist die Hauptsache, mit rotem Marker an der Kante
   und einer Linie, die beim Überfahren aufläuft. */
.sit{padding:1.65rem 1.5rem;transition:background .28s,padding-left .28s}
.sit::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--brand),var(--brand-deep));
  transform:scaleY(0);transform-origin:top;transition:transform .34s cubic-bezier(.2,.8,.3,1)}
.sit:hover::before,.sit:focus-visible::before{transform:scaleY(1)}
.sit:hover{padding-left:1.9rem}
.sit-satz{font-size:clamp(1.02rem,1.35vw,1.18rem);line-height:1.32;letter-spacing:-.022em}
.sit-q{display:none}   /* die überdimensionierten Anführungszeichen raus */

/* ── 4 · Abschnittsrhythmus ──────────────────────────────────────
   Ein dunkler Abschnitt bekommt oben eine rote Lichtkante und einen
   weichen Schein, damit der Wechsel hell/dunkel als Schnitt wirkt. */
.on-dark{position:relative}
.on-dark::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--brand) 22%,var(--accent) 50%,var(--brand) 78%,transparent);
  opacity:.65}
.on-dark>.wrap{position:relative;z-index:1}
.on-dark::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 55% at 78% 0%,rgba(228,24,30,.13),transparent 62%)}

/* ── 5 · Scroll-Reveal gestaffelt statt gleichzeitig ─────────────
   Alle Kacheln gleichzeitig einzublenden sieht nach Schalter aus.
   Nacheinander sieht es nach Bewegung aus. */
.rv{transform:translateY(26px)}
.cards .card,.sits .sit,.privat-list a{transition:opacity .5s cubic-bezier(.2,.8,.3,1),
  transform .5s cubic-bezier(.2,.8,.3,1),background .28s,padding-left .28s,
  box-shadow .3s,border-color .3s}
.rv:not(.in) .card,.rv:not(.in) .sit{opacity:0;transform:translateY(16px)}
.cards.in .card:nth-child(2),.sits.in .sit:nth-child(2){transition-delay:.07s}
.cards.in .card:nth-child(3),.sits.in .sit:nth-child(3){transition-delay:.14s}
.cards.in .card:nth-child(4),.sits.in .sit:nth-child(4){transition-delay:.21s}
.sits.in .sit:nth-child(5){transition-delay:.28s}
.sits.in .sit:nth-child(6){transition-delay:.35s}

/* ── 6 · Privatliste: gleiche Behandlung wie die Sätze ───────────── */
.privat-list a{position:relative}
.privat-list a::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)}
.privat-list a:hover::before{transform:scaleY(1)}

/* ── 7 · Bewegung respektiert die Systemeinstellung ─────────────── */
@media(prefers-reduced-motion:reduce){
  .rv,.rv:not(.in) .card,.rv:not(.in) .sit{opacity:1!important;transform:none!important}
  .sit::before,.privat-list a::before{transform:scaleY(1)}
}

/* ── 8 · Index-Liste statt Kachelraster ──────────────────────────
   Die Saetze aus SIT_BIZ und SIT_PRIV sind echte gesprochene Saetze
   („Gerade steht alles.") — das Beste am ganzen Text. Als Mini-Kachel
   verschenkt man sie. Als grosse Zeile in einem Index tragen sie.
   Nebeneffekt: bricht den Stapel aus Kartenrastern auf. */
.index{border-top:1px solid var(--line);margin-top:.5rem}
.on-dark .index{border-color:var(--line-d)}
.index--warm{border-color:rgba(10,10,12,.14)}

.zeile{position:relative;display:grid;
  grid-template-columns:3.25rem minmax(0,1fr) auto 2rem;
  align-items:baseline;gap:1.25rem;
  padding:1.5rem .5rem 1.5rem 0;
  border-bottom:1px solid var(--line);
  text-decoration:none;overflow:hidden;
  transition:padding-left .38s cubic-bezier(.2,.8,.3,1)}
.on-dark .zeile{border-color:var(--line-d)}
.index--warm .zeile{border-color:rgba(10,10,12,.12)}

/* Rote Flaeche laeuft von links ein — der eine Effekt je Zeile. */
.zeile::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(228,24,30,.13),rgba(228,24,30,.02) 55%,transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.2,.8,.3,1)}
.zeile:hover::before,.zeile:focus-visible::before{transform:scaleX(1)}
.zeile:hover,.zeile:focus-visible{padding-left:1.1rem}

.zeile-nr{font-family:var(--ff-m);font-size:.72rem;letter-spacing:.14em;
  color:var(--brand-schrift);opacity:.75}
.zeile-satz{font-family:var(--ff-d);font-weight:700;
  font-size:clamp(1.25rem,2.5vw,2rem);line-height:1.12;letter-spacing:-.035em;
  transition:transform .38s cubic-bezier(.2,.8,.3,1)}
.zeile:hover .zeile-satz{transform:translateX(4px)}
.zeile-leistung{font-family:var(--ff-m);font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--slate);white-space:nowrap}
.on-dark .zeile-leistung{color:var(--mute)}
.zeile-pfeil{font-size:1.15rem;color:var(--brand-schrift);
  opacity:0;transform:translateX(-8px);
  transition:opacity .3s,transform .38s cubic-bezier(.2,.8,.3,1)}
.zeile:hover .zeile-pfeil,.zeile:focus-visible .zeile-pfeil{opacity:1;transform:none}

@media(max-width:760px){
  .zeile{grid-template-columns:2.5rem minmax(0,1fr);gap:.35rem 1rem;
    padding-block:1.15rem}
  .zeile-leistung{grid-column:2;margin-top:.15rem}
  .zeile-pfeil{display:none}
}

/* Gestaffelt einblenden, nicht alle auf einmal. */
.index.rv:not(.in) .zeile{opacity:0;transform:translateY(14px)}
.index .zeile{transition:opacity .5s cubic-bezier(.2,.8,.3,1),
  transform .5s cubic-bezier(.2,.8,.3,1),padding-left .38s cubic-bezier(.2,.8,.3,1)}
.index.in .zeile:nth-child(1){transition-delay:.02s}
.index.in .zeile:nth-child(2){transition-delay:.07s}
.index.in .zeile:nth-child(3){transition-delay:.12s}
.index.in .zeile:nth-child(4){transition-delay:.17s}
.index.in .zeile:nth-child(5){transition-delay:.22s}
.index.in .zeile:nth-child(6){transition-delay:.27s}
.index.in .zeile:nth-child(n+7){transition-delay:.32s}
@media(prefers-reduced-motion:reduce){
  .index.rv:not(.in) .zeile{opacity:1;transform:none}
}

/* ── 9 · Ablauf-Karten: sticky repariert ─────────────────────────
   FEHLER: top:calc(84px + var(--i) * 18px) — --i wurde nirgends
   gesetzt. Damit war das ganze calc() ungueltig, top fiel auf auto
   zurueck und position:sticky griff nie. Die Karten scrollten normal
   durch, waehrend die Zuruecktreten-Animation trotzdem lief: Sie
   blendeten also grundlos aus. Genau das sah kaputt aus.
   Jetzt wird --i gesetzt, und der Fallback verhindert, dass ein
   fehlender Wert die Regel noch einmal komplett kippt. */
.stapel-karte{--i:0}
.stapel-karte:nth-child(2){--i:1}
.stapel-karte:nth-child(3){--i:2}
.stapel-karte:nth-child(4){--i:3}
@media(min-width:821px){
  .stapel-karte{top:calc(84px + var(--i,0) * 18px)}
}

/* ── 10 · Leistungs-Akte ─────────────────────────────────────────
   Loest die Satzliste ab. Links das Register, rechts das Blatt mit
   „Enthalten" und „Nicht enthalten". Die Ausschlussliste ist der
   eigentliche Inhalt — kein Wettbewerber der Region schreibt hin,
   was er NICHT macht. */
.akte{display:grid;grid-template-columns:minmax(14rem,20rem) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,3rem);align-items:start}
.akte-reg-spalte{display:flex;flex-direction:column;
  border-left:1px solid var(--line)}
.on-dark .akte-reg-spalte{border-color:var(--line-d)}

.akte-reg{position:relative;display:grid;grid-template-columns:2.4rem 1fr;
  align-items:baseline;gap:.75rem;width:100%;text-align:left;
  padding:1.05rem 1rem;cursor:pointer;
  font-family:var(--ff-d);font-weight:700;letter-spacing:-.024em;
  font-size:clamp(1.02rem,1.5vw,1.22rem);color:var(--slate);
  transition:color .26s,padding-left .3s cubic-bezier(.2,.8,.3,1)}
.on-dark .akte-reg{color:var(--mute)}
/* Rote Schiene wandert auf das aktive Register. */
.akte-reg::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;
  background:var(--brand);transform:scaleY(0);transform-origin:center;
  transition:transform .34s cubic-bezier(.2,.8,.3,1)}
.akte-reg:hover{color:var(--ink)}
.on-dark .akte-reg:hover{color:var(--band-tinte)}
.akte-reg[aria-selected=true]{color:var(--ink);padding-left:1.35rem}
.on-dark .akte-reg[aria-selected=true]{color:var(--band-tinte)}
.akte-reg[aria-selected=true]::before{transform:scaleY(1)}
.akte-reg-nr{font-family:var(--ff-m);font-size:.7rem;letter-spacing:.14em;
  color:var(--brand-schrift);opacity:.8}

.akte-blaetter{position:relative;min-height:19rem}
.akte-blatt[hidden]{display:none}
.akte-blatt{animation:blattauf .42s cubic-bezier(.2,.8,.3,1) both}
@keyframes blattauf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.akte-wofuer{font-family:var(--ff-d);font-weight:700;letter-spacing:-.028em;
  font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.15;margin-bottom:1.6rem}
.akte-spalten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.25rem,3vw,2.5rem)}
.akte-lbl{font-family:var(--ff-m);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand-schrift);margin-bottom:.75rem}
.akte-lbl--aus{color:var(--slate)}
.on-dark .akte-lbl--aus{color:var(--mute)}
.akte-liste li{position:relative;padding-left:1.5rem;margin-bottom:.6rem;
  font-size:.95rem;line-height:1.5;color:var(--slate)}
.on-dark .akte-liste li{color:var(--mute)}
.akte-liste li::before{content:"";position:absolute;left:0;top:.62em;
  width:.55rem;height:1px;background:var(--brand)}
.akte-aus,.akte-fall{font-size:.95rem;line-height:1.55;color:var(--slate)}
.on-dark .akte-aus,.on-dark .akte-fall{color:var(--mute)}
.akte-mehr{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.9rem;
  font-family:var(--ff-m);font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--brand-schrift);text-decoration:none}
.akte-mehr::after{content:"→";transition:transform .25s}
.akte-mehr:hover::after{transform:translateX(5px)}

@media(max-width:860px){
  .akte{grid-template-columns:1fr}
  /* overflow-y ausdrücklich auf hidden.
     ────────────────────────────────────────────────────────────────
     BEFUND vom 13. August 2026: `overflow-x:auto` allein zwingt die
     andere Achse von `visible` auf `auto` — die Registerleiste war
     damit AUCH senkrecht scrollbar, obwohl sie nur eine Auswahl nach
     links und rechts ist. Zu scrollen gab es dort genau 1 Pixel, und
     der kam von der Markierung des aktiven Registers, die bei
     bottom:-1px einen Pixel aus dem Kasten ragte.

     Ein Pixel genügt: Auf dem Finger fängt der Browser damit
     senkrechte Wischer ab, die Leiste wackelt und verschluckt das
     Scrollen der Seite.

     Deshalb zweierlei — die Achse dichtmachen UND die Markierung
     nach innen holen, sonst würde `hidden` sie zur Hälfte abschneiden. */
  .akte-reg-spalte{flex-direction:row;overflow-x:auto;overflow-y:hidden;
    border-left:0;border-bottom:1px solid var(--line);scrollbar-width:thin;
    overscroll-behavior-x:contain}
  .on-dark .akte-reg-spalte{border-color:var(--line-d)}
  .akte-reg{white-space:nowrap;padding:.85rem 1rem;grid-template-columns:auto auto}
  .akte-reg::before{left:0;right:0;top:auto;bottom:0;width:auto;height:2px;
    transform:scaleX(0)}
  .akte-reg[aria-selected=true]{padding-left:1rem}
  .akte-reg[aria-selected=true]::before{transform:scaleX(1)}
  .akte-spalten{grid-template-columns:1fr}
  .akte-blaetter{min-height:0}
}

/* ── 11 · Privatbereich: Leistungen statt Sprueche ───────────────
   Die gesprochenen Saetze („Er ist so langsam geworden.") wirkten in
   grosser Type wie eine Kleinanzeige. Hier stehen jetzt die
   Leistungsnamen mit einer sachlichen Zeile darunter. */
.pgruppen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr));
  gap:clamp(1.5rem,3vw,2.75rem)}
.pgruppe-t{font-family:var(--ff-m);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand-schrift);margin-bottom:1rem;
  padding-bottom:.7rem;border-bottom:1px solid rgba(10,10,12,.14)}
.pgruppe li+li{margin-top:.15rem}
.pgruppe a{position:relative;display:block;padding:.65rem .75rem .65rem 0;
  text-decoration:none;transition:padding-left .28s cubic-bezier(.2,.8,.3,1)}
.pgruppe a::before{content:"";position:absolute;left:0;top:.5rem;bottom:.5rem;width:2px;
  background:var(--brand);transform:scaleY(0);transform-origin:top;
  transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.pgruppe a:hover::before,.pgruppe a:focus-visible::before{transform:scaleY(1)}
.pgruppe a:hover,.pgruppe a:focus-visible{padding-left:.8rem}
.pgruppe b{display:block;font-family:var(--ff-d);font-weight:700;
  letter-spacing:-.022em;font-size:1.02rem;line-height:1.25}
.pgruppe span{display:block;font-size:.88rem;color:var(--slate);line-height:1.45}

/* ══════════════════════════════════════════════════════════════════
   REFRESH — sauberer, ruhiger, weniger Attrappe
   ══════════════════════════════════════════════════════════════════ */

/* ── 12 · Hero-Panel ohne Fenster-Attrappe ───────────────────────
   Raus sind: die drei bunten macOS-Knoepfe und die gruenen
   Status-Pillen. Beides sind die abgegriffensten Muster ueberhaupt
   und der Grund, warum der Baustein wie generiert aussah.
   Jetzt: eine ruhige Tafel. Status als Mono-Text mit feinem Punkt,
   Trennlinien statt Kaesten, oben eine rote Haarlinie. */
.board{border-radius:12px;overflow:hidden;position:relative;
  background:var(--ink-2);border:1px solid var(--line-d);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9)}
.theme-hell .board{background:var(--white);border-color:var(--line);
  box-shadow:0 40px 90px -55px rgba(10,10,12,.4)}
.board::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--brand) 30%,var(--accent) 55%,transparent);
  opacity:.85;z-index:2}
.lights{display:none}                      /* Fenster-Attrappe raus */
.pill{display:none}                        /* gruene Status-Pillen raus */

.board-hd{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.05rem 1.35rem;border-bottom:1px solid var(--line-d)}
.theme-hell .board-hd{border-color:var(--line)}
.board-kap{font-family:var(--ff-m);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute)}
.theme-hell .board-kap{color:var(--slate)}
.board-kap--r{color:var(--brand-schrift);opacity:.9}

.board-body{padding:.35rem 0}
.brow{display:grid;grid-template-columns:1fr auto;
  grid-template-areas:"nm st" "sub st";
  gap:.1rem 1.25rem;align-items:center;
  padding:.95rem 1.35rem;border-bottom:1px solid rgba(255,255,255,.05)}
.theme-hell .brow{border-bottom-color:var(--line)}
.brow:last-child{border-bottom:0}
.brow .nm{grid-area:nm;font-family:var(--ff-d);font-weight:700;
  letter-spacing:-.02em;font-size:1rem;line-height:1.25}
.brow .sub{grid-area:sub;font-size:.8rem;color:var(--mute);line-height:1.35}
.theme-hell .brow .sub{color:var(--slate)}
.brow .st{grid-area:st;display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--ff-m);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);white-space:nowrap}
.theme-hell .brow .st{color:var(--slate)}
.brow .st::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--brand);flex:none;opacity:.85}
.brow .st--offen::before{background:var(--mute)}
.board-ft{padding:1rem 1.35rem;border-top:1px solid var(--line-d);
  font-size:.85rem;color:var(--mute)}
.theme-hell .board-ft{border-color:var(--line);color:var(--slate)}

/* ── 13 · Eingrenzen als eigener Abschnitt ───────────────────────
   Vorher ein grauer Kasten unter den Karten — sah aus wie ein
   Formular. Jetzt ein eigener dunkler Abschnitt: grosse Schalter,
   Ergebnis erscheint darunter. */
.eingrenzen .picker{background:none;border:0;padding:0;max-width:none}
.eingrenzen .picker-hd{display:none}
.eingrenzen .chips{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:2.5rem}
.eingrenzen .chip{position:relative;overflow:hidden;
  padding:.85rem 1.35rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--line-d);background:rgba(255,255,255,.03);
  color:var(--band-tinte);font-family:var(--ff-m);font-size:.78rem;
  letter-spacing:.05em;
  transition:border-color .26s,color .26s,transform .26s cubic-bezier(.2,.8,.3,1)}
.theme-hell .eingrenzen .chip{border-color:var(--line);background:var(--white);color:var(--ink)}
.eingrenzen .chip::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,var(--brand),var(--brand-deep));
  transform:translateY(101%);transition:transform .32s cubic-bezier(.2,.8,.3,1)}
.eingrenzen .chip:hover{border-color:var(--brand-schrift);transform:translateY(-2px)}
.eingrenzen .chip[aria-pressed=true]{border-color:var(--brand-schrift);color:#fff}
.eingrenzen .chip[aria-pressed=true]::before{transform:none}

.eingrenzen .out{border-top:1px solid var(--line-d);padding-top:2rem;
  background:none;border-radius:0}
.theme-hell .eingrenzen .out{border-color:var(--line)}
.eingrenzen .out dl{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr));
  gap:2rem;margin:0 0 2rem}
.eingrenzen .out dt{font-family:var(--ff-m);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brand-schrift);margin-bottom:.7rem}
.eingrenzen .out dd{margin:0;font-family:var(--ff-d);font-weight:700;
  letter-spacing:-.028em;font-size:clamp(1.3rem,2.2vw,1.85rem);line-height:1.15}
.eingrenzen .out dd.n{font-family:var(--ff-b);font-weight:400;font-size:1rem;
  line-height:1.6;letter-spacing:0;color:var(--mute)}
.theme-hell .eingrenzen .out dd.n{color:var(--slate)}

/* ── 14 · Ruhiger insgesamt ──────────────────────────────────────
   Weniger Korn, einheitliche Radien, weichere Schatten. „Cleaner"
   heisst vor allem: weniger konkurrierende Reize. */
body::after{opacity:.026}
.theme-hell body::after{opacity:.016}
.card{border-radius:12px}
.stapel-karte{border-radius:12px}
.akte-blatt,.picker{border-radius:12px}

/* ── 15 · Direktwahl — kompakte Tafel statt eigenem Abschnitt ────
   Der Versuch davor war ein ganzer Bildschirm fuer eine kleine
   Interaktion, und die Aufforderung stand in Schlagzeilengroesse,
   wo das Ergebnis hingehoert. Jetzt: eine flache dunkle Tafel direkt
   unter den Karten. Frage links, Schalter rechts, Ergebnis erscheint
   in derselben Tafel — kein Sprung, kein neuer Abschnitt. */
.eingrenzen{display:none}                        /* alter Abschnitt raus */

.direkt{margin-top:clamp(1.75rem,3vw,2.5rem);
  background:var(--ink);color:var(--band-tinte);
  border-radius:14px;padding:clamp(1.5rem,3vw,2.1rem);
  position:relative;overflow:hidden;
  box-shadow:0 30px 70px -50px rgba(10,10,12,.8)}
.direkt::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 90% at 88% 0%,rgba(228,24,30,.16),transparent 62%)}
.direkt>*{position:relative}

.direkt-frage{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
  margin-bottom:1.15rem}
.direkt-lbl{font-family:var(--ff-m);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brand-schrift);margin:0}
.direkt-h{font-family:var(--ff-d);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.15;margin:0}

.direkt .chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.4rem}
.direkt .chip{position:relative;overflow:hidden;z-index:0;cursor:pointer;
  padding:.6rem 1rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);background:transparent;color:var(--band-tinte);
  font-family:var(--ff-m);font-size:.74rem;letter-spacing:.04em;
  transition:border-color .24s,color .24s}
.direkt .chip::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--brand);transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.direkt .chip:hover{border-color:var(--brand-schrift)}
.direkt .chip[aria-pressed=true]{border-color:var(--brand-schrift);color:#fff}
.direkt .chip[aria-pressed=true]::before{transform:none}

/* Ergebniszeile: erscheint erst, wenn etwas gewaehlt wurde. */
.direkt .out{border-top:1px solid rgba(255,255,255,.1);padding-top:1.3rem;
  background:none;border-radius:0;margin:0;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:1.25rem 2rem;align-items:end}
.direkt .out dl{display:grid;gap:.15rem;margin:0}
.direkt .out dt{font-family:var(--ff-m);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);margin:0}
.direkt .out dd{margin:0;font-family:var(--ff-d);font-weight:700;
  letter-spacing:-.028em;font-size:clamp(1.15rem,2vw,1.55rem);line-height:1.2}
.direkt .out dd.n{font-family:var(--ff-b);font-weight:400;font-size:.92rem;
  line-height:1.5;letter-spacing:0;color:var(--mute);margin-top:.35rem}
.direkt-n dt{display:none}
.direkt .btn-row{display:flex;gap:.6rem;flex-wrap:wrap}
.direkt .btn{padding:.75rem 1.2rem;font-size:.72rem}
.direkt .btn--g{border-color:rgba(255,255,255,.28);color:var(--band-tinte)}
.direkt .btn--g:hover{border-color:var(--band-tinte)}

@media(max-width:760px){
  .direkt .out{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════════
   REDESIGN — futuristischer, leichter, praeziser
   ══════════════════════════════════════════════════════════════════ */

/* ── 16 · Space Grotesk sitzt anders ─────────────────────────────
   Die Schrift laeuft enger und hat groessere Versalien als Instrument
   Sans. Ohne Nachjustierung wirken die Ueberschriften gedrungen. */
h1,h2,h3,h4{letter-spacing:-.038em;line-height:1.0}
h1{letter-spacing:-.05em}
h2{letter-spacing:-.045em}
h3{letter-spacing:-.028em;line-height:1.12}
/* Space Mono ist breiter als Plex Mono — Sperrung zuruecknehmen,
   sonst brechen die Labels um. */
.eyebrow,.kap,.board-kap,.direkt-lbl,.akte-lbl,.pgruppe-t,
.zeile-leistung,.card-n,.akte-reg-nr,.stat span{letter-spacing:.12em}
.btn{letter-spacing:.03em;font-size:.74rem}

/* ── 17 · Direktwahl: nicht mehr schwarzer Klotz ─────────────────
   Vorher eine massive schwarze Flaeche mitten im hellen Abschnitt —
   zu wuchtig. Jetzt ein Verlauf mit rotem Anteil, Glaskante und
   weichem Schein. Gleiche Praesenz, halbes Gewicht. */
.direkt{
  background:
    radial-gradient(120% 140% at 88% -10%,rgba(228,24,30,.30),transparent 55%),
    linear-gradient(155deg,#1a1a20 0%,#101014 55%,#17131a 100%);
  border-radius:18px;
  box-shadow:0 24px 60px -40px rgba(228,24,30,.55),
             0 10px 30px -22px rgba(10,10,12,.6)}
.direkt::before{content:"";position:absolute;inset:0;border-radius:inherit;
  padding:1px;pointer-events:none;
  background:linear-gradient(145deg,rgba(228,24,30,.75),rgba(255,255,255,.12) 40%,
    rgba(255,255,255,.05) 70%,rgba(228,24,30,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
/* Feines Raster im Panel — technisch, aber sehr leise. */
.direkt::after{content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(90% 90% at 20% 0%,#000,transparent 75%)}
.direkt .chip{backdrop-filter:blur(6px);background:rgba(255,255,255,.04)}

/* ── 18 · Hero-Tafel: HUD statt Tabelle ─────────────────────────
   „Zu langweilig" — stimmt: eine Liste ohne Leben. Jetzt vier
   Eckmarken wie auf einem Messgeraet und ein roter Strahl, der beim
   Laden einmal durchlaeuft. Keine erfundenen Daten, nur Bewegung. */
.board{border-radius:16px;
  background:
    radial-gradient(90% 60% at 92% -8%,rgba(228,24,30,.16),transparent 60%),
    var(--ink-2)}
.theme-hell .board{background:
  radial-gradient(90% 60% at 92% -8%,rgba(228,24,30,.07),transparent 60%),var(--white)}
/* Eckmarken */
.board-body{position:relative}
.board-body::before,.board-body::after{content:"";position:absolute;
  width:14px;height:14px;pointer-events:none;opacity:.55}
.board-body::before{top:6px;left:10px;
  border-top:1.5px solid var(--brand);border-left:1.5px solid var(--brand)}
.board-body::after{bottom:6px;right:10px;
  border-bottom:1.5px solid var(--brand);border-right:1.5px solid var(--brand)}
/* Strahl */
.board-hd{position:relative;overflow:hidden}
.board-hd::after{content:"";position:absolute;left:-40%;top:0;bottom:0;width:40%;
  background:linear-gradient(90deg,transparent,rgba(228,24,30,.30),transparent);
  pointer-events:none}
@media(prefers-reduced-motion:no-preference){
  .board-hd::after{animation:strahl 5.5s ease-in-out 1.2s infinite}
}
@keyframes strahl{0%{left:-40%}55%,100%{left:130%}}

.brow .nm{font-family:var(--ff-d);letter-spacing:-.028em}
.brow .st{font-size:.62rem;letter-spacing:.14em}

/* ── 19 · Dunkle Abschnitte praeziser ────────────────────────────
   Feines Raster statt leerer Flaeche — technisch, ruhig, laeuft aus. */
.on-dark::after{background:
  radial-gradient(70% 55% at 78% 0%,rgba(228,24,30,.13),transparent 62%),
  linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:auto,58px 58px,58px 58px;
  mask-image:linear-gradient(180deg,#000,transparent 70%)}

/* ── 20 · Radien und Kanten einheitlich schaerfen ────────────────
   „Cleaner" heisst hier: ein Radius, konsequent. */
.card,.stapel-karte,.akte-blatt,.picker{border-radius:14px}
.chip{border-radius:999px}

/* ── 21 · Kennzahlenreihe an Space Mono anpassen ─────────────────
   Space Mono laeuft breiter als Plex Mono. Mit flex-wrap und 2,4rem
   Abstand kippte „< 4 h" in eine zweite Zeile. Vier feste Spalten
   halten die Reihe zusammen, unter 620px sauber zwei mal zwei. */
.stats{display:grid;grid-template-columns:repeat(4,auto);
  justify-content:start;gap:0 clamp(1.4rem,3vw,2.6rem);align-items:end}
.stat span{font-size:.6rem;letter-spacing:.1em;white-space:nowrap}
.stat b{white-space:nowrap}
@media(max-width:620px){
  .stats{grid-template-columns:repeat(2,auto);gap:1.2rem 2rem}
}

/* ══════════════════════════════════════════════════════════════════
   22 · „Eine Nacht im Betrieb" — das Herzstück im Hero
   ──────────────────────────────────────────────────────────────────
   Die Ueberschrift verspricht: „Ihre IT laeuft. Und Sie merken nichts
   davon." Das Panel zeigt jetzt genau das — was nachts passiert,
   waehrend niemand hinsieht. Ein roter Strahl laeuft die Zeitachse
   hinunter, die Ereignisse leuchten nacheinander auf, am Ende steht
   08:00 Uhr: Sie kommen ins Buero.

   Bewusst als „schematisch" gekennzeichnet — keine Kundendaten,
   sondern der Ablauf, den Betreuung ausmacht.
   ══════════════════════════════════════════════════════════════════ */
.board{display:none}                    /* alte Tafel raus */

.nacht{position:relative;overflow:hidden;border-radius:16px;
  background:
    radial-gradient(120% 90% at 88% -10%,rgba(228,24,30,.20),transparent 58%),
    linear-gradient(165deg,#16161c 0%,#0c0c11 60%,#141018 100%);
  box-shadow:0 40px 90px -55px rgba(0,0,0,.95),
             0 20px 60px -45px rgba(228,24,30,.5)}
.theme-hell .nacht{
  background:
    radial-gradient(120% 90% at 88% -10%,rgba(228,24,30,.10),transparent 58%),
    linear-gradient(165deg,#15151b 0%,#0e0e13 60%,#141018 100%)}
/* Glaskante */
.nacht::before{content:"";position:absolute;inset:0;border-radius:inherit;
  padding:1px;pointer-events:none;z-index:3;
  background:linear-gradient(150deg,rgba(228,24,30,.8),rgba(255,255,255,.14) 38%,
    rgba(255,255,255,.05) 72%,rgba(228,24,30,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
/* Sternenfeld-Raster, sehr leise */
.nacht::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(80% 70% at 80% 0%,#000,transparent 78%)}

.nacht-hd{position:relative;z-index:2;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;
  padding:1.1rem 1.4rem;border-bottom:1px solid rgba(255,255,255,.09)}
.nacht-kap{font-family:var(--ff-m);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(245,246,244,.55)}
.nacht-kap--r{color:var(--brand-schrift)}

.nacht-bahn{position:relative;z-index:2;padding:.5rem 1.4rem 1.3rem}
/* Senkrechte Zeitachse */
.nacht-bahn::before{content:"";position:absolute;left:calc(1.4rem + 3.6rem);
  top:.9rem;bottom:1.6rem;width:1px;background:rgba(255,255,255,.12)}

/* Der Strahl: laeuft die Achse hinunter und zieht einen Schein mit. */
.nacht-strahl{position:absolute;left:calc(1.4rem + 3.6rem - 1px);
  top:.9rem;width:3px;height:64px;border-radius:2px;
  background:linear-gradient(180deg,transparent,var(--brand) 45%,var(--accent) 70%,transparent);
  box-shadow:0 0 22px 5px rgba(228,24,30,.45);
  opacity:0}

.ev{position:relative;display:grid;grid-template-columns:3.6rem 1fr;
  align-items:baseline;gap:1.5rem;padding:.72rem 0;
  opacity:.3;transition:none}
.ev-zeit{font-family:var(--ff-m);font-size:.78rem;letter-spacing:.06em;
  color:rgba(245,246,244,.5);text-align:right}
.ev-txt{position:relative;padding-left:1.4rem}
/* Knoten auf der Achse */
.ev-txt::before{content:"";position:absolute;left:-4.5px;top:.52em;
  width:9px;height:9px;border-radius:50%;
  background:#0c0c11;border:1.5px solid rgba(255,255,255,.28)}
.ev b{display:block;font-family:var(--ff-d);font-weight:700;letter-spacing:-.028em;
  font-size:1rem;line-height:1.25;color:var(--band-tinte)}
.ev i{display:block;font-style:normal;font-size:.79rem;line-height:1.4;
  color:rgba(245,246,244,.5);margin-top:.1rem}

/* Zielzeile bekommt Gewicht — das ist die Pointe. */
.ev--ziel{padding-top:1rem;margin-top:.35rem;
  border-top:1px solid rgba(255,255,255,.09)}
.ev--ziel b{font-size:1.12rem;color:#fff}
.ev--ziel .ev-txt::before{background:var(--brand);border-color:var(--brand-schrift);
  box-shadow:0 0 0 4px rgba(228,24,30,.2)}

/* ── Bewegung ──────────────────────────────────────────────────
   Ein Durchlauf dauert 13 s. Jedes Ereignis leuchtet auf, wenn der
   Strahl es passiert — Verzoegerung ueber --n gestaffelt. */
@media(prefers-reduced-motion:no-preference){
  .nacht-strahl{animation:strahl-lauf 13s cubic-bezier(.5,0,.5,1) infinite}
  .ev{animation:ev-auf 13s linear infinite;
      animation-delay:calc(var(--n) * 1.28s + .35s)}
  .ev-txt::before{animation:knoten 13s linear infinite;
      animation-delay:calc(var(--n) * 1.28s + .35s)}
}
@keyframes strahl-lauf{
  0%        {opacity:0;transform:translateY(0)}
  6%        {opacity:1}
  62%       {opacity:1;transform:translateY(calc(100% + 15rem))}
  70%,100%  {opacity:0;transform:translateY(calc(100% + 15rem))}
}
@keyframes ev-auf{
  0%,1%    {opacity:.3}
  6%       {opacity:1}
  62%      {opacity:1}
  76%,100% {opacity:.3}
}
@keyframes knoten{
  0%,1%    {background:#0c0c11;border-color:rgba(255,255,255,.28);box-shadow:none}
  6%,62%   {background:var(--brand);border-color:var(--brand-schrift);
            box-shadow:0 0 0 4px rgba(228,24,30,.18)}
  76%,100% {background:#0c0c11;border-color:rgba(255,255,255,.28);box-shadow:none}
}
/* Warnzeile: Punkt bleibt hell, Text bekommt einen Hauch mehr Kontrast. */
.ev--warn i{color:rgba(255,140,145,.75)}

/* Ohne Bewegung steht die ganze Nacht ruhig und vollstaendig da. */
@media(prefers-reduced-motion:reduce){
  .ev{opacity:1}
  .nacht-strahl{display:none}
  .ev-txt::before{background:var(--brand);border-color:var(--brand-schrift)}
}

@media(max-width:520px){
  .ev{grid-template-columns:3rem 1fr;gap:1rem}
  .nacht-bahn::before,.nacht-strahl{left:calc(1.4rem + 3rem)}
  .ev i{font-size:.74rem}
}

/* ── 23 · Nacht-Panel: zwei Korrekturen ──────────────────────────
   a) Die Achse lag 1,5rem links neben den Knoten — der Spaltenabstand
      des Rasters fehlte in der Rechnung. Knotenmitte liegt bei
      Rand + Zeitspalte + Abstand.
   b) Ruhezustand war mit .3 zu blass. Wer im falschen Moment landet,
      sah ein ausgegrautes Panel. Jetzt .55 als Grundton — der Strahl
      hebt hervor, statt ueberhaupt erst sichtbar zu machen. */
.nacht-bahn::before,
.nacht-strahl{left:calc(1.4rem + 3.6rem + 1.5rem)}
.nacht-strahl{margin-left:-1px}

.ev{opacity:.55}
@keyframes ev-auf{
  0%,1%    {opacity:.55}
  6%       {opacity:1}
  62%      {opacity:1}
  76%,100% {opacity:.55}
}
@media(max-width:520px){
  .nacht-bahn::before,.nacht-strahl{left:calc(1.4rem + 3rem + 1rem)}
}

/* ── 24 · Reduced-Motion-Ausnahme wiederherstellen ───────────────
   FEHLER: Block 23 setzte .ev{opacity:.55} NACH der Ausnahme in
   Block 22. Gleiche Spezifitaet, spaeter in der Datei — damit gewann
   der Grundwert auch dann, wenn Bewegung abgeschaltet ist. Ergebnis:
   Wer reduzierte Bewegung eingestellt hat, sah dauerhaft ein blasses
   Panel, das nie aufleuchtet. Diese Regel muss ans Ende. */
@media(prefers-reduced-motion:reduce){
  .ev{opacity:1}
  .nacht-strahl{display:none}
  .ev-txt::before{background:var(--brand);border-color:var(--brand-schrift);box-shadow:none}
}

/* ══════════════════════════════════════════════════════════════════
   25 · ECHTER DUNKELMODUS
   ──────────────────────────────────────────────────────────────────
   BEFUND: Die Seite war hell gebaut, mit einzelnen dunklen Baendern
   (.hero, .on-dark). Die Klasse .theme-hell machte diese Baender
   HELL. Einen Dunkelmodus gab es also nie — nur „mit dunklen
   Baendern" und „ohne". Beim Umschalten aenderte sich fast nichts
   ausser im Hero, und der dunkle Block in der Mitte blieb stehen.

   LOESUNG: Die Farbwerte kippen jetzt pro THEMA, nicht pro Abschnitt.
   :root ist dunkel (Standardzustand), .theme-hell ist hell.
   Damit ziehen alle bestehenden Regeln automatisch mit.

   Sechs Regeln nutzen --ink als HINTERGRUND und duerfen NICHT
   mitkippen — sonst waeren Hero, Footer und Notdienstband im
   Dunkelmodus ploetzlich weiss. Sie bekommen feste Bandfarben.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* ── Feste Baender: kippen nie, in beiden Themen dunkel ── */
  --band:#08080a;        /* Footer, Mobilmenue                       */
  --band-2:#16161c;      /* .on-dark-Abschnitte im Dunkelmodus       */
  --band-tinte:#f5f6f4;
  --band-leise:#9b9ca4;

  /* ── DUNKEL (Standard) ── */
  --paper:#0a0a0c;       /* Seitengrund                              */
  --white:#131316;       /* Karten, Tafeln                           */
  --warm:#141118;        /* warmes Band, hier ins Dunkle gedreht     */
  --ink:#f5f6f4;         /* Text                                     */
  --ink-2:#16161c;
  --ink-3:#26262c;
  --slate:#adaeb6;       /* gedaempfter Text                         */
  --mute:#8e8f98;
  --line:#26262c;
  --line-d:#33333b;
}

.theme-hell{
  /* ── HELL ── */
  --paper:#f5f6f4;
  --white:#ffffff;
  --warm:#f3efe8;
  --ink:#0a0a0c;
  --ink-2:#131316;
  --ink-3:#1e1e22;
  --slate:#5f6067;
  --mute:#767781;
  --line:#e0e0dc;
  --line-d:#2a2a30;
}

/* ── Die Ausnahmen: immer dunkel ─────────────────────────────── */
.hero,.phero{background:var(--band);color:var(--band-tinte)}
.ft{background:var(--band);color:var(--band-leise)}
.mnav{background:var(--band)}
.on-dark{background:var(--band-2);color:var(--band-tinte)}
/* Im hellen Thema bleibt der Hero hell — das gefaellt und funktioniert. */
.theme-hell .hero{background:var(--paper);color:var(--ink)}
/* .on-dark wird im hellen Thema zum warmen Band (bestehendes Verhalten). */
.theme-hell .on-dark{background:var(--warm);color:var(--ink)}

/* ── Nacharbeiten, die aus dem Kippen folgen ─────────────────── */
/* Karten standen auf --white und brauchen im Dunkeln eine Kante. */
.card{background:var(--white);border-color:var(--line)}
/* Der Notdienst-Streifen bleibt rot, Text darauf weiss. */
.on-dark .lede,.on-dark .step p{color:var(--band-leise)}
.theme-hell .on-dark .lede,.theme-hell .on-dark .step p{color:var(--slate)}
/* Akte und Privatliste erben jetzt korrekt, nur die Trennlinie nachziehen. */
.pgruppe-t{border-bottom-color:var(--line)}

/* ── Direktwahl: im hellen Thema keine schwarze Insel ────────── */
.theme-hell .direkt{
  background:
    radial-gradient(120% 140% at 88% -10%,rgba(228,24,30,.09),transparent 58%),
    var(--white);
  box-shadow:0 24px 60px -42px rgba(228,24,30,.4),
             0 8px 26px -20px rgba(10,10,12,.25)}
.theme-hell .direkt::before{
  background:linear-gradient(145deg,rgba(228,24,30,.6),rgba(10,10,12,.1) 40%,
    rgba(10,10,12,.06) 70%,rgba(228,24,30,.28))}
.theme-hell .direkt::after{
  background-image:linear-gradient(rgba(10,10,12,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,10,12,.04) 1px,transparent 1px)}
.theme-hell .direkt-h{color:var(--ink)}
.theme-hell .direkt .chip{border-color:var(--line);color:var(--ink);
  background:rgba(10,10,12,.02)}
.theme-hell .direkt .chip[aria-pressed=true]{color:#fff}
.theme-hell .direkt .out{border-top-color:var(--line)}
.theme-hell .direkt .out dt{color:var(--slate)}
.theme-hell .direkt .out dd{color:var(--ink)}
.theme-hell .direkt .out dd.n{color:var(--slate)}
.theme-hell .direkt .btn--g{border-color:var(--ink);color:var(--ink)}

/* ── Nacht-Panel bleibt dunkel — es zeigt eine Nacht ──────────
   Im hellen Thema wird es dafuer als eingelassene Anzeige gerahmt,
   damit es als Absicht liest und nicht als vergessener Kasten. */
.theme-hell .nacht{
  box-shadow:0 40px 90px -50px rgba(10,10,12,.55),
             0 0 0 1px rgba(10,10,12,.06),
             0 18px 50px -40px rgba(228,24,30,.45)}


/* ── 26 · Rot als Schrift barrierefrei ───────────────────────────
   Das Markenrot #e4181e ist gesetzt und bleibt die Fuellfarbe. Als
   SCHRIFT reicht es aber nicht: 4,19:1 auf dunklem und 4,35:1 auf
   hellem Grund — beides unter den geforderten 4,5:1.
   Deshalb eine eigene Textvariante je Thema. Fuellflaechen und
   Logo bleiben unveraendert beim Markenrot.

   gemessen:  hell  #b3121b  6,42:1 auf Seite · 6,96:1 auf Karte
              dunkel #ff6b70 7,15:1 auf Seite · 6,70:1 auf Karte */
:root{ --brand-schrift:#ff6b70 }
.theme-hell{ --brand-schrift:#b3121b }

/* Gedaempfter Text im hellen Thema lag bei 4,10:1 — jetzt 4,67:1. */
.theme-hell{ --mute:#6d6e78 }

/* ── 27 · Einsatzgebiet: zwei Spalten, Karte gebaendigt ──────────
   FEHLER: Die viewBox der Karte folgt der geografischen Ausdehnung
   des Kreises und ist dadurch fast quadratisch. Mit width:100% wurde
   sie 1087 x 1017 px — hoeher als das Fenster (813 px). Man sah nie
   die ganze Karte.
   Jetzt steht sie neben dem Text und ist in der Hoehe gedeckelt.
   Das Seitenverhaeltnis bleibt unangetastet — die Karte ist
   massstaeblich und darf nicht verzerrt werden. */
.gebiet-raster{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(2rem,4vw,4rem);align-items:center}
.karte{margin-top:0}
.karte svg{width:auto;height:auto;max-width:100%;
  max-height:min(58vh,30rem);display:block;margin-inline:auto}
@media(max-width:900px){
  .gebiet-raster{grid-template-columns:1fr}
  .karte svg{max-height:min(52vh,24rem)}
}

/* ── 28 · Karte animiert ─────────────────────────────────────────
   Signale laufen von Bad Homburg nach aussen, die Orte springen an,
   wenn der Impuls sie erreicht, die Fahrzeitringe atmen. Alles nur
   ueber opacity, transform und stroke-dashoffset — kein Layout. */
.k-signal{stroke:var(--brand-schrift);stroke-width:1.6;stroke-linecap:round;
  fill:none;stroke-dasharray:7 93;opacity:0}
.k-linie{opacity:.4}
.k-punkt{transition:none}

@media(prefers-reduced-motion:no-preference){
  .k-signal{animation:k-lauf 4.2s cubic-bezier(.45,0,.5,1) infinite;
    animation-delay:calc(var(--n) * .17s)}
  .k-ort{animation:k-an 4.2s ease-out infinite;
    animation-delay:calc(var(--n) * .17s)}
  .k-ring{animation:k-atmen 4.2s ease-in-out infinite;
    animation-delay:calc(var(--n) * .5s)}
  .k-puls{animation:k-welle 4.2s ease-out infinite}
}
@keyframes k-lauf{
  0%      {stroke-dashoffset:100;opacity:0}
  8%      {opacity:1}
  55%,100%{stroke-dashoffset:0;opacity:0}
}
@keyframes k-an{
  0%,44%  {opacity:.55}
  56%     {opacity:1}
  86%,100%{opacity:.55}
}
@keyframes k-atmen{
  0%,100% {opacity:.16}
  50%     {opacity:.34}
}
@keyframes k-welle{
  0%      {transform:scale(1);opacity:.34}
  70%,100%{transform:scale(2.8);opacity:0}
}
/* Ohne Bewegung steht die Karte vollstaendig und ruhig da. */
@media(prefers-reduced-motion:reduce){
  .k-signal{display:none}
  .k-ort{opacity:1}
  .k-linie{opacity:.55}
}

/* ══════════════════════════════════════════════════════════════════
   29 · „Nachtlauf" — Fenster mit Fortschritt
   ──────────────────────────────────────────────────────────────────
   Ein Balken laeuft von 22:00 bis 08:00 durch. Jede Aufgabe steht
   erst auf ROT (offen) und springt auf GRUEN, sobald der Balken sie
   passiert hat. Der Zaehler oben rechts zaehlt mit. Damit versteht
   auch jemand ohne IT-Kenntnisse in zwei Sekunden, was gemeint ist:
   nachts wird eine Liste abgearbeitet, morgens ist sie fertig.

   Gruen ist hier keine Markenfarbe, sondern eine Statusfarbe —
   „erledigt" versteht man nur in Gruen. Rot bleibt der Marke.

   Funktioniert in BEIDEN Themen: das Fenster nimmt die Flaechenfarbe
   des Themas an, nicht mehr fest dunkel.
   ══════════════════════════════════════════════════════════════════ */
.nacht{display:none}                     /* Vorgaenger raus */

:root{ --gruen:#3ddc91 }
.theme-hell{ --gruen:#0f9d63 }

.fenster{position:relative;overflow:hidden;border-radius:16px;
  background:var(--white);
  box-shadow:0 40px 90px -55px rgba(0,0,0,.9),0 12px 40px -30px rgba(228,24,30,.35)}
.theme-hell .fenster{
  box-shadow:0 40px 90px -55px rgba(10,10,12,.4),0 0 0 1px rgba(10,10,12,.05)}
/* Glaskante */
.fenster::before{content:"";position:absolute;inset:0;border-radius:inherit;
  padding:1px;pointer-events:none;z-index:4;
  background:linear-gradient(150deg,rgba(228,24,30,.7),rgba(255,255,255,.12) 38%,
    rgba(255,255,255,.04) 72%,rgba(228,24,30,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.theme-hell .fenster::before{
  background:linear-gradient(150deg,rgba(228,24,30,.55),rgba(10,10,12,.1) 38%,
    rgba(10,10,12,.05) 72%,rgba(228,24,30,.25))}

/* ── Fensterleiste ── */
.fenster-leiste{display:flex;align-items:center;gap:.75rem;
  padding:.95rem 1.3rem;border-bottom:1px solid var(--line);
  background:var(--paper)}
.fenster-titel{font-family:var(--ff-d);font-weight:700;letter-spacing:-.028em;
  font-size:.98rem;color:var(--ink)}
.fenster-zeit{font-family:var(--ff-m);font-size:.68rem;letter-spacing:.1em;
  color:var(--slate)}
.fenster-marke{margin-left:auto;font-family:var(--ff-m);font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brand-schrift);
  border:1px solid currentColor;border-radius:999px;padding:.2rem .55rem}

.fenster-erklaer{padding:.95rem 1.3rem .2rem;margin:0;
  font-size:.88rem;color:var(--slate)}

/* ── Fortschrittsbalken ── */
.fenster-fortschritt{display:flex;align-items:center;gap:.9rem;
  padding:.7rem 1.3rem 1rem}
.fp-spur{flex:1;height:5px;border-radius:99px;background:var(--line);
  overflow:hidden;position:relative}
.fp-fuellung{position:absolute;inset:0 auto 0 0;width:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--brand),var(--gruen));
  box-shadow:0 0 14px 1px rgba(61,220,145,.4)}
.fp-zaehler{font-family:var(--ff-m);font-size:.68rem;letter-spacing:.08em;
  color:var(--slate);white-space:nowrap}
.fp-zahl{color:var(--gruen);font-weight:700}

/* ── Aufgabenzeilen ── */
.fenster-liste{padding:0 1.3rem .3rem}
.fz{display:grid;grid-template-columns:auto 3.3rem 1fr auto;
  align-items:baseline;gap:.85rem;padding:.62rem 0;
  border-bottom:1px solid var(--line)}
.fz:last-child{border-bottom:0}
.fz-punkt{width:9px;height:9px;border-radius:50%;align-self:center;
  background:var(--brand);box-shadow:0 0 0 3px rgba(228,24,30,.16)}
.fz-zeit{font-family:var(--ff-m);font-size:.72rem;color:var(--slate)}
.fz-was{font-size:.92rem;font-weight:500;color:var(--ink);line-height:1.3}
.fz-detail{font-family:var(--ff-m);font-size:.68rem;letter-spacing:.04em;
  color:var(--slate);white-space:nowrap}

/* ── Fuss ── */
.fenster-fuss{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  padding:1rem 1.3rem;border-top:1px solid var(--line);background:var(--paper)}
.fenster-fuss b{font-family:var(--ff-d);font-weight:700;letter-spacing:-.028em;
  font-size:1rem;color:var(--ink)}
.fenster-fuss span{font-size:.88rem;color:var(--slate)}

/* ══ Bewegung: 15 s Durchlauf ══════════════════════════════════
   Der Balken laeuft von 6 % bis 70 %. Jede Zeile springt auf Gruen,
   wenn er sie erreicht — deshalb sechs eigene Keyframes statt
   Verzoegerungen: so setzen alle Zeilen gleichzeitig zurueck und
   der Neustart wirkt wie eine neue Nacht, nicht wie ein Fehler. */
@media(prefers-reduced-motion:no-preference){
  .fp-fuellung{animation:fp 15s cubic-bezier(.42,0,.5,1) infinite}
  .fp-rolle{animation:zaehl 15s steps(1) infinite}
  .fz{animation:fz-hell 15s linear infinite}
  .fz:nth-child(1) .fz-punkt{animation:s1 15s linear infinite}
  .fz:nth-child(2) .fz-punkt{animation:s2 15s linear infinite}
  .fz:nth-child(3) .fz-punkt{animation:s3 15s linear infinite}
  .fz:nth-child(4) .fz-punkt{animation:s4 15s linear infinite}
  .fz:nth-child(5) .fz-punkt{animation:s5 15s linear infinite}
  .fz:nth-child(6) .fz-punkt{animation:s6 15s linear infinite}
  .fz:nth-child(1){animation-delay:0s}
  .fz:nth-child(2){animation-delay:-.1s}
}
@keyframes fp{
  0%,5%   {transform:translateX(-100%)}
  70%,100%{transform:translateX(0)}
}
@keyframes fz-hell{
  0%,4%   {opacity:.5}
  10%     {opacity:1}
  92%     {opacity:1}
  100%    {opacity:.5}
}
/* rot → gruen, jeweils wenn der Balken die Zeile passiert */
@keyframes s1{0%,14%{background:var(--brand);box-shadow:0 0 0 3px rgba(228,24,30,.16)}
  16%,100%{background:var(--gruen);box-shadow:0 0 0 3px rgba(61,220,145,.2)}}
@keyframes s2{0%,25%{background:var(--brand);box-shadow:0 0 0 3px rgba(228,24,30,.16)}
  27%,100%{background:var(--gruen);box-shadow:0 0 0 3px rgba(61,220,145,.2)}}
@keyframes s3{0%,36%{background:var(--brand);box-shadow:0 0 0 3px rgba(228,24,30,.16)}
  38%,100%{background:var(--gruen);box-shadow:0 0 0 3px rgba(61,220,145,.2)}}
@keyframes s4{0%,47%{background:var(--brand);box-shadow:0 0 0 3px rgba(228,24,30,.16)}
  49%,100%{background:var(--gruen);box-shadow:0 0 0 3px rgba(61,220,145,.2)}}
@keyframes s5{0%,58%{background:var(--brand);box-shadow:0 0 0 3px rgba(228,24,30,.16)}
  60%,100%{background:var(--gruen);box-shadow:0 0 0 3px rgba(61,220,145,.2)}}
@keyframes s6{0%,69%{background:var(--brand);box-shadow:0 0 0 3px rgba(228,24,30,.16)}
  71%,100%{background:var(--gruen);box-shadow:0 0 0 3px rgba(61,220,145,.2)}}
/* Zaehler: sieben Ziffern uebereinander, die Spalte wandert nach oben.
   `content` laesst sich auf einem normalen Element nicht animieren —
   deshalb dieser Weg statt der naheliegenden Loesung. */
.fp-zahl{display:inline-block;overflow:hidden;height:1em;line-height:1;
  vertical-align:-.12em}
/* transform bewegt nur das Element selbst, nicht seine Geschwister —
   deshalb traegt ein Wrapper die ganze Ziffernspalte. */
.fp-rolle{display:block}
.fp-zahl i{display:block;font-style:normal;height:1em;line-height:1}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@keyframes zaehl{
  0%,14%  {transform:translateY(0)}
  16%,25% {transform:translateY(-1em)}
  27%,36% {transform:translateY(-2em)}
  38%,47% {transform:translateY(-3em)}
  49%,58% {transform:translateY(-4em)}
  60%,69% {transform:translateY(-5em)}
  71%,100%{transform:translateY(-6em)}
}
}

/* Ohne Bewegung: alles erledigt, Balken voll — der Endzustand. */
@media(prefers-reduced-motion:reduce){
  .fz{opacity:1}
  .fp-rolle{transform:translateY(-6em)}
  .fz-punkt{background:var(--gruen);box-shadow:0 0 0 3px rgba(61,220,145,.2)}
  .fp-fuellung{transform:none}
}

@media(max-width:560px){
  .fz{grid-template-columns:auto 3rem 1fr;gap:.6rem}
  .fz-detail{grid-column:3;font-size:.64rem;opacity:.85}
}

/* ══════════════════════════════════════════════════════════════════
   30 · Das Modul — Schaubild statt Textliste
   ──────────────────────────────────────────────────────────────────
   Drei Anlaeufe waren Textzeilen in huebschen Rahmen. Eine Liste
   bleibt eine Liste, egal wie man sie einfasst. Ein Modul muss ein
   SYSTEM ZEIGEN: Kaesten, Leitungen, Statuslichter, fliessende Daten.
   Beschriftung nur als Etikett, kein Fliesstext.

   Zu sehen ist die tatsaechliche Struktur einer betreuten Umgebung:
   Arbeitsplaetze → Firewall → Server → Microsoft 365 und Cloud-Backup.
   Ein Laie erkennt: verbundene Kaesten, alle Lichter gruen.
   ══════════════════════════════════════════════════════════════════ */
.fenster{display:none}

.modul{position:relative;overflow:hidden;border-radius:16px;
  background:var(--white);
  box-shadow:0 40px 90px -55px rgba(0,0,0,.9),0 12px 40px -32px rgba(228,24,30,.4)}
.theme-hell .modul{
  box-shadow:0 40px 90px -55px rgba(10,10,12,.35),0 0 0 1px rgba(10,10,12,.05)}
.modul::before{content:"";position:absolute;inset:0;border-radius:inherit;
  padding:1px;pointer-events:none;z-index:4;
  background:linear-gradient(150deg,rgba(228,24,30,.7),rgba(255,255,255,.12) 38%,
    rgba(255,255,255,.04) 72%,rgba(228,24,30,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.theme-hell .modul::before{
  background:linear-gradient(150deg,rgba(228,24,30,.5),rgba(10,10,12,.09) 38%,
    rgba(10,10,12,.05) 72%,rgba(228,24,30,.22))}

/* Blende oben — die Geraetefront */
.modul-blende{display:flex;align-items:center;gap:.7rem;
  padding:.85rem 1.2rem;border-bottom:1px solid var(--line);background:var(--paper)}
.modul-led{width:8px;height:8px;border-radius:50%;background:var(--gruen);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--gruen) 22%,transparent)}
.modul-name{font-family:var(--ff-d);font-weight:700;letter-spacing:-.026em;
  font-size:.94rem;color:var(--ink)}
.modul-marke{margin-left:auto;font-family:var(--ff-m);font-size:.58rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brand-schrift);
  border:1px solid currentColor;border-radius:999px;padding:.18rem .5rem}

/* Schaltplan */
.modul-plan{display:block;width:100%;height:auto;padding:.4rem .2rem 0}
.md-kasten{fill:var(--paper);stroke:var(--line-d);stroke-width:1.2}
.theme-hell .md-kasten{stroke:var(--line)}
.md-kasten--wolke{stroke-dasharray:5 4}
.md-geraete rect{fill:var(--slate);opacity:.5}
.md-schacht rect{fill:var(--slate);opacity:.35}
.md-icon{fill:none;stroke:var(--brand-schrift);stroke-width:1.6;stroke-linejoin:round}
.md-titel{font-family:var(--ff-d);font-weight:700;font-size:14.5px;
  letter-spacing:-.02em;fill:var(--ink)}
.md-klein{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.1em;
  fill:var(--slate);text-transform:uppercase}
.md-led{fill:var(--gruen)}
.md-blink{fill:var(--brand-schrift);opacity:.25}

.md-bahn{fill:none;stroke:var(--line-d);stroke-width:1.4}
.theme-hell .md-bahn{stroke:var(--line)}
.md-puls{fill:none;stroke:var(--brand-schrift);stroke-width:2.2;
  stroke-linecap:round;stroke-dasharray:12 88;opacity:0}
.md-wache rect{fill:var(--line-d)}
.theme-hell .md-wache rect{fill:var(--line)}
.md-kurve path{fill:none;stroke:var(--gruen);stroke-width:1.4;
  stroke-linejoin:round;stroke-linecap:round;opacity:.8}

/* Fuss mit Kennzahlen */
.modul-fuss{display:flex;gap:1.6rem;flex-wrap:wrap;
  padding:.9rem 1.2rem;border-top:1px solid var(--line);background:var(--paper)}
.modul-stat{font-family:var(--ff-m);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--slate)}
.modul-stat b{font-family:var(--ff-d);font-size:1.05rem;font-weight:700;
  letter-spacing:-.02em;color:var(--ink);margin-right:.4rem;
  vertical-align:-.05em}
.modul-stat--ok b{color:var(--gruen)}

/* ── Bewegung: Daten fliessen, Lichter atmen ─────────────────── */
@media(prefers-reduced-motion:no-preference){
  .md-puls{animation:md-fluss 3.4s cubic-bezier(.45,0,.55,1) infinite;
    animation-delay:var(--v)}
  .md-led{animation:md-atmen 3.4s ease-in-out infinite;
    animation-delay:calc(var(--n,0) * .3s)}
  .md-blink{animation:md-blink 1.7s steps(1) infinite;animation-delay:var(--v)}
  .modul-led{animation:md-atmen 3.4s ease-in-out infinite}
  .md-kurve path{stroke-dasharray:140;animation:md-kurve 5s linear infinite}
  .md-block{animation:md-auf .7s cubic-bezier(.2,.8,.3,1) both;
    animation-delay:calc(var(--n) * .09s)}
}
@keyframes md-fluss{
  0%      {stroke-dashoffset:100;opacity:0}
  10%     {opacity:1}
  62%,100%{stroke-dashoffset:0;opacity:0}
}
@keyframes md-atmen{
  0%,100%{opacity:1}
  50%    {opacity:.45}
}
@keyframes md-blink{
  0%,60% {opacity:.25}
  70%,90%{opacity:1}
}
@keyframes md-kurve{
  from{stroke-dashoffset:140}
  to  {stroke-dashoffset:0}
}
@keyframes md-auf{
  from{opacity:0;transform:translateY(8px)}
  to  {opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .md-puls{opacity:.55;stroke-dasharray:none}
  .md-block{opacity:1;transform:none}
}

/* ══════════════════════════════════════════════════════════════════
   31 · Mega-Menue folgt dem Thema
   ──────────────────────────────────────────────────────────────────
   FEHLER: .mega stand auf var(--ink-2) — und --ink-2 ist in BEIDEN
   Themen dunkel. Das Menue war deshalb immer schwarz, egal wie der
   Schalter stand. Die Schrift kam ausserdem von .hd (immer hell),
   was den Fehler im Dunkelmodus zufaellig kaschierte.
   Jetzt nimmt es die Flaechenfarbe des Themas und setzt seine
   Schriftfarbe selbst, statt sie von der Kopfleiste zu erben.
   ══════════════════════════════════════════════════════════════════ */
.mega{background:var(--white);color:var(--ink);border-color:var(--line)}
.theme-hell .mega{box-shadow:0 40px 90px -34px rgba(10,10,12,.3)}
.mega-lbl::after{background:var(--line)}
.mega b{color:var(--ink)}
.mega span{color:var(--slate)}
.mega-seite p,.mega-seite .mega-txt{color:var(--slate)}
.mega-seite b,.mega-seite strong{color:var(--ink)}

/* ══════════════════════════════════════════════════════════════════
   32 · Blende — dieselbe Liste, andere Fassung
   ──────────────────────────────────────────────────────────────────
   Inhalt wie zuvor. Neu sind: Eckmarken wie an einem Messgeraet,
   ein Statusstreifen oben, ein Haken statt eines Punktes, sobald
   der Balken die Zeile passiert hat, und eine Laufzeile, die die
   gerade bearbeitete Aufgabe hervorhebt.
   ══════════════════════════════════════════════════════════════════ */
.modul{display:none}

.blende{position:relative;border-radius:18px;padding:.35rem;
  background:
    radial-gradient(120% 100% at 85% -10%,rgba(228,24,30,.22),transparent 55%),
    linear-gradient(160deg,color-mix(in srgb,var(--white) 92%,var(--ink) 8%),var(--white) 60%);
  box-shadow:0 44px 100px -58px rgba(0,0,0,.9),0 14px 44px -34px rgba(228,24,30,.45)}
.theme-hell .blende{
  background:
    radial-gradient(120% 100% at 85% -10%,rgba(228,24,30,.10),transparent 55%),
    linear-gradient(160deg,#fff,#fafafa 60%);
  box-shadow:0 44px 100px -58px rgba(10,10,12,.35),0 0 0 1px rgba(10,10,12,.05)}
.blende::before{content:"";position:absolute;inset:0;border-radius:inherit;
  padding:1px;pointer-events:none;z-index:3;
  background:linear-gradient(150deg,rgba(228,24,30,.75),rgba(255,255,255,.14) 36%,
    rgba(255,255,255,.05) 70%,rgba(228,24,30,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.theme-hell .blende::before{
  background:linear-gradient(150deg,rgba(228,24,30,.5),rgba(10,10,12,.1) 36%,
    rgba(10,10,12,.05) 70%,rgba(228,24,30,.25))}

/* Eckmarken */
.ecke{position:absolute;width:13px;height:13px;z-index:4;pointer-events:none;
  border-color:var(--brand-schrift);opacity:.7}
.ecke--lo{top:9px;left:9px;border-top:1.5px solid;border-left:1.5px solid}
.ecke--ro{top:9px;right:9px;border-top:1.5px solid;border-right:1.5px solid}
.ecke--lu{bottom:9px;left:9px;border-bottom:1.5px solid;border-left:1.5px solid}
.ecke--ru{bottom:9px;right:9px;border-bottom:1.5px solid;border-right:1.5px solid}

.bl-kopf{display:flex;align-items:center;gap:.6rem;
  padding:.85rem 1.15rem;border-bottom:1px solid var(--line)}
.bl-punkt{width:7px;height:7px;border-radius:50%;background:var(--gruen);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--gruen) 22%,transparent)}
.bl-titel{font-family:var(--ff-d);font-weight:700;letter-spacing:-.026em;
  font-size:.95rem;color:var(--ink)}
.bl-spanne{font-family:var(--ff-m);font-size:.66rem;letter-spacing:.1em;color:var(--slate)}
.bl-marke{margin-left:auto;font-family:var(--ff-m);font-size:.57rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brand-schrift);
  border:1px solid currentColor;border-radius:999px;padding:.16rem .48rem}

.bl-balken{display:flex;align-items:center;gap:.85rem;padding:.85rem 1.15rem .7rem}
.bl-spur{flex:1;height:4px;border-radius:99px;background:var(--line);
  overflow:hidden;position:relative}
.bl-fuell{position:absolute;inset:0;border-radius:99px;
  background:linear-gradient(90deg,var(--brand),var(--gruen));
  box-shadow:0 0 12px 1px color-mix(in srgb,var(--gruen) 40%,transparent)}
.bl-zahl{font-family:var(--ff-m);font-size:.65rem;letter-spacing:.08em;
  color:var(--slate);white-space:nowrap}
.bl-rolle{display:inline-block;overflow:hidden;height:1em;line-height:1;
  vertical-align:-.12em;color:var(--gruen);font-weight:700}
.bl-rolle i{display:block;font-style:normal;height:1em;line-height:1}

.bl-liste{padding:0 1.15rem .35rem}
.lz{position:relative;display:grid;grid-template-columns:auto 3.1rem 1fr auto;
  align-items:center;gap:.75rem;padding:.55rem .5rem;
  border-radius:7px;margin-inline:-.5rem}
.lz-status{position:relative;width:14px;height:14px;display:block}
.lz-status svg{position:absolute;inset:0;width:14px;height:14px}
.lz-offen circle{fill:none;stroke:var(--brand-schrift);stroke-width:1.6}
.lz-fertig{opacity:0}
.lz-fertig circle{fill:var(--gruen)}
.lz-fertig path{fill:none;stroke:var(--white);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.lz-zeit{font-family:var(--ff-m);font-size:.7rem;color:var(--slate)}
.lz-was{font-size:.9rem;font-weight:500;color:var(--ink);line-height:1.3}
.lz-detail{font-family:var(--ff-m);font-size:.65rem;color:var(--slate);white-space:nowrap}

.bl-fuss{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  padding:.9rem 1.15rem;border-top:1px solid var(--line);margin-top:.35rem}
.bl-fuss b{font-family:var(--ff-m);font-size:.72rem;letter-spacing:.1em;
  color:var(--brand-schrift)}
.bl-fuss span{font-size:.88rem;color:var(--ink);font-weight:500}

/* ── Bewegung: 15 s ──────────────────────────────────────────── */
@media(prefers-reduced-motion:no-preference){
  .bl-fuell{animation:bl-lauf 15s cubic-bezier(.42,0,.5,1) infinite}
  .bl-rolle{animation:zaehl 15s steps(1) infinite}
  .lz:nth-child(1) .lz-fertig{animation:h1 15s steps(1) infinite}
  .lz:nth-child(2) .lz-fertig{animation:h2 15s steps(1) infinite}
  .lz:nth-child(3) .lz-fertig{animation:h3 15s steps(1) infinite}
  .lz:nth-child(4) .lz-fertig{animation:h4 15s steps(1) infinite}
  .lz:nth-child(5) .lz-fertig{animation:h5 15s steps(1) infinite}
  .lz:nth-child(6) .lz-fertig{animation:h6 15s steps(1) infinite}
  .lz:nth-child(1) .lz-offen{animation:o1 15s steps(1) infinite}
  .lz:nth-child(2) .lz-offen{animation:o2 15s steps(1) infinite}
  .lz:nth-child(3) .lz-offen{animation:o3 15s steps(1) infinite}
  .lz:nth-child(4) .lz-offen{animation:o4 15s steps(1) infinite}
  .lz:nth-child(5) .lz-offen{animation:o5 15s steps(1) infinite}
  .lz:nth-child(6) .lz-offen{animation:o6 15s steps(1) infinite}
  /* die gerade laufende Zeile wird kurz hervorgehoben */
  .lz:nth-child(1){animation:a1 15s steps(1) infinite}
  .lz:nth-child(2){animation:a2 15s steps(1) infinite}
  .lz:nth-child(3){animation:a3 15s steps(1) infinite}
  .lz:nth-child(4){animation:a4 15s steps(1) infinite}
  .lz:nth-child(5){animation:a5 15s steps(1) infinite}
  .lz:nth-child(6){animation:a6 15s steps(1) infinite}
}
@keyframes bl-lauf{0%,5%{transform:translateX(-100%)}70%,100%{transform:translateX(0)}}
@keyframes zaehl{0%,14%{transform:translateY(0)}16%,25%{transform:translateY(-1em)}
  27%,36%{transform:translateY(-2em)}38%,47%{transform:translateY(-3em)}
  49%,58%{transform:translateY(-4em)}60%,69%{transform:translateY(-5em)}
  71%,100%{transform:translateY(-6em)}}
@keyframes h1{0%,14%{opacity:0}16%,100%{opacity:1}}
@keyframes h2{0%,25%{opacity:0}27%,100%{opacity:1}}
@keyframes h3{0%,36%{opacity:0}38%,100%{opacity:1}}
@keyframes h4{0%,47%{opacity:0}49%,100%{opacity:1}}
@keyframes h5{0%,58%{opacity:0}60%,100%{opacity:1}}
@keyframes h6{0%,69%{opacity:0}71%,100%{opacity:1}}
@keyframes o1{0%,14%{opacity:1}16%,100%{opacity:0}}
@keyframes o2{0%,25%{opacity:1}27%,100%{opacity:0}}
@keyframes o3{0%,36%{opacity:1}38%,100%{opacity:0}}
@keyframes o4{0%,47%{opacity:1}49%,100%{opacity:0}}
@keyframes o5{0%,58%{opacity:1}60%,100%{opacity:0}}
@keyframes o6{0%,69%{opacity:1}71%,100%{opacity:0}}
@keyframes a1{0%,5%{background:transparent}7%,14%{background:color-mix(in srgb,var(--brand) 9%,transparent)}16%,100%{background:transparent}}
@keyframes a2{0%,16%{background:transparent}18%,25%{background:color-mix(in srgb,var(--brand) 9%,transparent)}27%,100%{background:transparent}}
@keyframes a3{0%,27%{background:transparent}29%,36%{background:color-mix(in srgb,var(--brand) 9%,transparent)}38%,100%{background:transparent}}
@keyframes a4{0%,38%{background:transparent}40%,47%{background:color-mix(in srgb,var(--brand) 9%,transparent)}49%,100%{background:transparent}}
@keyframes a5{0%,49%{background:transparent}51%,58%{background:color-mix(in srgb,var(--brand) 9%,transparent)}60%,100%{background:transparent}}
@keyframes a6{0%,60%{background:transparent}62%,69%{background:color-mix(in srgb,var(--brand) 9%,transparent)}71%,100%{background:transparent}}

@media(prefers-reduced-motion:reduce){
  .lz-fertig{opacity:1}.lz-offen{opacity:0}
  .bl-fuell{transform:none}.bl-rolle{transform:translateY(-6em)}
}
@media(max-width:560px){
  .lz{grid-template-columns:auto 2.8rem 1fr;gap:.55rem}
  .lz-detail{grid-column:3;font-size:.6rem;opacity:.85}
}

/* ══════════════════════════════════════════════════════════════════
   33 · Konsole — senkrechte Schiene, technischer Ton
   ──────────────────────────────────────────────────────────────────
   Zwei Korrekturen und eine Richtungsentscheidung:

   a) Der Balken laeuft jetzt SENKRECHT neben den Zeilen nach unten.
      Waagerecht ergab keinen Sinn — die Liste laeuft ja nach unten.
   b) Der Zaehler rutschte sichtbar hoch. Ursache: eine verschobene
      Ziffernspalte. Jetzt liegen alle sieben Ziffern uebereinander
      und werden per opacity geschaltet — da kann nichts mehr rutschen.
   c) Ton: Kommandonamen, Prueffsummen, Rueckgabewert. Nicht jeder
      muss jedes Wort verstehen; es soll nach Werkzeug aussehen.
   ══════════════════════════════════════════════════════════════════ */
.blende{display:none}

.konsole{position:relative;border-radius:16px;overflow:hidden;
  background:
    radial-gradient(120% 90% at 88% -8%,rgba(228,24,30,.20),transparent 56%),
    linear-gradient(165deg,color-mix(in srgb,var(--white) 90%,var(--ink) 10%),var(--white) 62%);
  box-shadow:0 44px 100px -58px rgba(0,0,0,.9),0 14px 44px -34px rgba(228,24,30,.45)}
.theme-hell .konsole{
  background:radial-gradient(120% 90% at 88% -8%,rgba(228,24,30,.09),transparent 56%),
    linear-gradient(165deg,#fff,#fafafa 62%);
  box-shadow:0 44px 100px -58px rgba(10,10,12,.35),0 0 0 1px rgba(10,10,12,.05)}
.konsole::before{content:"";position:absolute;inset:0;border-radius:inherit;
  padding:1px;pointer-events:none;z-index:5;
  background:linear-gradient(150deg,rgba(228,24,30,.75),rgba(255,255,255,.14) 36%,
    rgba(255,255,255,.05) 70%,rgba(228,24,30,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.theme-hell .konsole::before{
  background:linear-gradient(150deg,rgba(228,24,30,.5),rgba(10,10,12,.1) 36%,
    rgba(10,10,12,.05) 70%,rgba(228,24,30,.25))}
/* feines Zeilenraster wie auf einem Monitor */
.konsole::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px);
  opacity:.7}
.theme-hell .konsole::after{
  background:repeating-linear-gradient(180deg,rgba(10,10,12,.02) 0 1px,transparent 1px 3px)}
/* Strahl, der einmal je Durchlauf durchwandert */
.kn-scan{position:absolute;left:0;right:0;height:120px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(228,24,30,.10),transparent);
  top:-120px}

.kn-kopf,.kn-koerper,.kn-fuss{position:relative;z-index:3}

.kn-kopf{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  padding:.8rem 1.1rem;border-bottom:1px solid var(--line);
  font-family:var(--ff-m);font-size:.68rem}
.kn-led{width:7px;height:7px;border-radius:50%;background:var(--gruen);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--gruen) 22%,transparent)}
.kn-name{color:var(--ink);font-weight:700;letter-spacing:.02em}
.kn-arg{color:var(--slate);letter-spacing:.02em}
.kn-marke{margin-left:auto;color:var(--brand-schrift);letter-spacing:.16em;
  text-transform:uppercase;font-size:.56rem;
  border:1px solid currentColor;border-radius:999px;padding:.15rem .45rem}

/* ── Koerper: Schiene links, Zeilen rechts ── */
.kn-koerper{display:grid;grid-template-columns:auto 1fr;gap:.9rem;
  padding:.9rem 1.1rem .7rem}
.kn-schiene{position:relative;width:3px;border-radius:99px;background:var(--line);
  overflow:visible}
.kn-fuell{position:absolute;left:0;right:0;top:0;height:100%;border-radius:99px;
  background:linear-gradient(180deg,var(--brand),var(--gruen));
  transform-origin:top}
.kn-head{position:absolute;left:50%;top:0;width:9px;height:9px;border-radius:50%;
  margin-left:-4.5px;margin-top:-4.5px;background:var(--brand);
  box-shadow:0 0 12px 3px color-mix(in srgb,var(--brand) 60%,transparent)}

.kn-zeilen{display:grid;gap:.1rem}
.kz{display:grid;grid-template-columns:3.2rem minmax(0,1fr) auto 2.9rem;
  align-items:baseline;gap:.7rem;padding:.42rem .45rem;
  border-radius:5px;margin-inline:-.45rem;
  font-family:var(--ff-m);font-size:.72rem;opacity:.42}
.kz-t{color:var(--slate)}
.kz-c{color:var(--ink);font-weight:700;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kz-v{color:var(--slate);font-size:.66rem;white-space:nowrap}
.kz-s{position:relative;text-align:right;font-size:.6rem;letter-spacing:.1em}
.kz-s i{font-style:normal}
.kz-lauf{color:var(--brand-schrift)}
.kz-ok{position:absolute;right:0;top:0;color:var(--gruen);opacity:0}
.kz--warn .kz-ok{color:#e8a33d}

/* ── Fuss ── */
.kn-fuss{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  padding:.75rem 1.1rem;border-top:1px solid var(--line);
  font-family:var(--ff-m);font-size:.64rem;color:var(--slate);letter-spacing:.06em}
.kn-zahl{color:var(--ink);font-weight:700}
.kn-rolle{position:relative;display:inline-block;width:.62em;height:1em;
  vertical-align:-.14em;color:var(--gruen)}
/* Alle Ziffern liegen uebereinander — geschaltet wird per opacity.
   Damit kann nichts mehr sichtbar verrutschen. */
.kn-rolle i{position:absolute;inset:0;font-style:normal;opacity:0;text-align:center}
.kn-rolle i:first-child{opacity:1}
.kn-welle{width:120px;height:16px;margin-left:auto}
.kn-welle path{fill:none;stroke:var(--gruen);stroke-width:1.2;
  stroke-linejoin:round;stroke-linecap:round;opacity:.75}
.kn-ende{color:var(--gruen);font-weight:700}

/* ══ Bewegung — 15 s ══════════════════════════════════════════ */
@media(prefers-reduced-motion:no-preference){
  .kn-fuell{animation:kn-fuell 15s cubic-bezier(.4,0,.5,1) infinite}
  .kn-head{animation:kn-head 15s cubic-bezier(.4,0,.5,1) infinite}
  .kn-scan{animation:kn-scan 15s cubic-bezier(.4,0,.5,1) infinite}
  .kn-led{animation:kn-blink 2.2s steps(1) infinite}
  .kn-welle path{stroke-dasharray:260;animation:kn-welle 6s linear infinite}
  .kz:nth-child(1){animation:z1 15s steps(1) infinite}
  .kz:nth-child(2){animation:z2 15s steps(1) infinite}
  .kz:nth-child(3){animation:z3 15s steps(1) infinite}
  .kz:nth-child(4){animation:z4 15s steps(1) infinite}
  .kz:nth-child(5){animation:z5 15s steps(1) infinite}
  .kz:nth-child(6){animation:z6 15s steps(1) infinite}
  .kz:nth-child(1) .kz-ok{animation:k1 15s steps(1) infinite}
  .kz:nth-child(2) .kz-ok{animation:k2 15s steps(1) infinite}
  .kz:nth-child(3) .kz-ok{animation:k3 15s steps(1) infinite}
  .kz:nth-child(4) .kz-ok{animation:k4 15s steps(1) infinite}
  .kz:nth-child(5) .kz-ok{animation:k5 15s steps(1) infinite}
  .kz:nth-child(6) .kz-ok{animation:k6 15s steps(1) infinite}
  .kz .kz-lauf{animation:punkte .9s steps(4) infinite}
  .kn-rolle i{animation:ziffer 15s steps(1) infinite;
    animation-delay:calc(var(--d) * 0s)}
  .kn-rolle i:nth-child(1){animation-name:zf0}
  .kn-rolle i:nth-child(2){animation-name:zf1}
  .kn-rolle i:nth-child(3){animation-name:zf2}
  .kn-rolle i:nth-child(4){animation-name:zf3}
  .kn-rolle i:nth-child(5){animation-name:zf4}
  .kn-rolle i:nth-child(6){animation-name:zf5}
  .kn-rolle i:nth-child(7){animation-name:zf6}
}
@keyframes kn-fuell{0%,5%{transform:scaleY(0)}72%,100%{transform:scaleY(1)}}
@keyframes kn-head{0%,5%{top:0;opacity:1}72%{top:100%;opacity:1}
  80%,100%{top:100%;opacity:0}}
@keyframes kn-scan{0%,4%{top:-120px}72%,100%{top:100%}}
@keyframes kn-blink{0%,80%{opacity:1}88%{opacity:.35}96%{opacity:1}}
@keyframes kn-welle{from{stroke-dashoffset:260}to{stroke-dashoffset:0}}
@keyframes punkte{0%{opacity:.3}50%{opacity:1}100%{opacity:.3}}
@keyframes z1{0%,12%{opacity:.42}14%,100%{opacity:1}}
@keyframes z2{0%,23%{opacity:.42}25%,100%{opacity:1}}
@keyframes z3{0%,34%{opacity:.42}36%,100%{opacity:1}}
@keyframes z4{0%,45%{opacity:.42}47%,100%{opacity:1}}
@keyframes z5{0%,56%{opacity:.42}58%,100%{opacity:1}}
@keyframes z6{0%,67%{opacity:.42}69%,100%{opacity:1}}
@keyframes k1{0%,12%{opacity:0}14%,100%{opacity:1}}
@keyframes k2{0%,23%{opacity:0}25%,100%{opacity:1}}
@keyframes k3{0%,34%{opacity:0}36%,100%{opacity:1}}
@keyframes k4{0%,45%{opacity:0}47%,100%{opacity:1}}
@keyframes k5{0%,56%{opacity:0}58%,100%{opacity:1}}
@keyframes k6{0%,67%{opacity:0}69%,100%{opacity:1}}
@keyframes zf0{0%,12%{opacity:1}14%,100%{opacity:0}}
@keyframes zf1{0%,12%{opacity:0}14%,23%{opacity:1}25%,100%{opacity:0}}
@keyframes zf2{0%,23%{opacity:0}25%,34%{opacity:1}36%,100%{opacity:0}}
@keyframes zf3{0%,34%{opacity:0}36%,45%{opacity:1}47%,100%{opacity:0}}
@keyframes zf4{0%,45%{opacity:0}47%,56%{opacity:1}58%,100%{opacity:0}}
@keyframes zf5{0%,56%{opacity:0}58%,67%{opacity:1}69%,100%{opacity:0}}
@keyframes zf6{0%,67%{opacity:0}69%,100%{opacity:1}}

@media(prefers-reduced-motion:reduce){
  .kz{opacity:1}.kz-ok{opacity:1}.kz-lauf{opacity:0}
  .kn-fuell{transform:scaleY(1)}.kn-head{display:none}.kn-scan{display:none}
  .kn-rolle i{opacity:0}.kn-rolle i:last-child{opacity:1}
}
@media(max-width:560px){
  .kz{grid-template-columns:2.9rem minmax(0,1fr) 2.6rem;gap:.5rem;font-size:.66rem}
  .kz-v{display:none}
}

/* ══════════════════════════════════════════════════════════════════
   34 · Nachtachse — in der Sprache der Seite
   ──────────────────────────────────────────────────────────────────
   Die Konsole davor war dicht, klein und komplett in Monospace,
   waehrend die uebrige Seite von grosser Typo, viel Luft und wenigen
   Elementen lebt. Stilistisch waren das zwei verschiedene Seiten.

   Jetzt: kein Rahmen, kein Fenster, keine Tabelle. Vier Momente,
   grosse Zeitangaben in der Anzeigeschrift, eine rote Achse, die
   nach unten durchlaeuft. Gleiche Aussage, Sprache der Seite.
   ══════════════════════════════════════════════════════════════════ */
.konsole{display:none}

.nachtachse{padding-left:clamp(0rem,1.5vw,1.5rem)}
.na-kap{display:flex;align-items:center;gap:.6rem;margin:0 0 clamp(1.5rem,3vw,2.25rem);
  font-family:var(--ff-m);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate)}
.na-led{width:7px;height:7px;border-radius:50%;background:var(--gruen);flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--gruen) 22%,transparent)}

.na-liste{position:relative;list-style:none;margin:0;padding:0 0 0 clamp(2rem,3.5vw,3rem);
  display:grid;gap:clamp(1.75rem,3.5vw,2.75rem)}
/* Die Achse: ruhige Spur, darauf die rote Fuellung */
.na-liste::before{content:"";position:absolute;left:0;top:.7em;bottom:.9em;
  width:2px;background:var(--line)}
.na-schiene{position:absolute;left:0;top:.7em;bottom:.9em;width:2px;overflow:hidden}
.na-fuell{position:absolute;inset:0;transform-origin:top;
  background:linear-gradient(180deg,var(--brand),var(--gruen))}

.na-p{position:relative;display:grid;gap:.3rem}
/* Knoten auf der Achse */
.na-p::before{content:"";position:absolute;left:calc(clamp(2rem,3.5vw,3rem) * -1 - 5px);
  top:.62em;width:12px;height:12px;border-radius:50%;
  background:var(--paper);border:2px solid var(--line-d);
  transition:none}
.theme-hell .na-p::before{border-color:var(--line)}

.na-zeit{font-family:var(--ff-d);font-weight:700;letter-spacing:-.045em;
  font-size:clamp(1.85rem,3.4vw,2.9rem);line-height:.95;color:var(--ink);
  font-variant-numeric:tabular-nums}
.na-txt b{display:block;font-family:var(--ff-d);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.02rem,1.5vw,1.22rem);line-height:1.2;color:var(--ink);
  margin-top:.35rem}
.na-txt span{display:block;font-size:.92rem;line-height:1.5;color:var(--slate);
  margin-top:.2rem}

/* Der letzte Moment ist die Pointe und bekommt Gewicht. */
.na-p:last-child .na-zeit{color:var(--brand-schrift)}
.na-p:last-child .na-txt b{font-size:clamp(1.15rem,1.8vw,1.45rem)}

/* ── Bewegung: 14 s, die Achse laeuft durch ──────────────────── */
.na-p{opacity:.4}
@media(prefers-reduced-motion:no-preference){
  .na-fuell{animation:na-lauf 14s cubic-bezier(.4,0,.5,1) infinite}
  .na-p:nth-child(2){animation:na1 14s steps(1) infinite}
  .na-p:nth-child(3){animation:na2 14s steps(1) infinite}
  .na-p:nth-child(4){animation:na3 14s steps(1) infinite}
  .na-p:nth-child(5){animation:na4 14s steps(1) infinite}
  .na-p:nth-child(2)::before{animation:nk1 14s steps(1) infinite}
  .na-p:nth-child(3)::before{animation:nk2 14s steps(1) infinite}
  .na-p:nth-child(4)::before{animation:nk3 14s steps(1) infinite}
  .na-p:nth-child(5)::before{animation:nk4 14s steps(1) infinite}
  .na-led{animation:na-blink 2.4s steps(1) infinite}
}
@keyframes na-lauf{0%,4%{transform:scaleY(0)}74%,100%{transform:scaleY(1)}}
@keyframes na1{0%,8%{opacity:.4}10%,100%{opacity:1}}
@keyframes na2{0%,30%{opacity:.4}32%,100%{opacity:1}}
@keyframes na3{0%,52%{opacity:.4}54%,100%{opacity:1}}
@keyframes na4{0%,72%{opacity:.4}74%,100%{opacity:1}}
@keyframes nk1{0%,8%{background:var(--paper);border-color:var(--line-d)}
  10%,100%{background:var(--brand);border-color:var(--brand)}}
@keyframes nk2{0%,30%{background:var(--paper);border-color:var(--line-d)}
  32%,100%{background:var(--brand);border-color:var(--brand)}}
@keyframes nk3{0%,52%{background:var(--paper);border-color:var(--line-d)}
  54%,100%{background:#e8a33d;border-color:#e8a33d}}
@keyframes nk4{0%,72%{background:var(--paper);border-color:var(--line-d)}
  74%,100%{background:var(--gruen);border-color:var(--gruen);
    box-shadow:0 0 0 5px color-mix(in srgb,var(--gruen) 20%,transparent)}}
@keyframes na-blink{0%,84%{opacity:1}90%{opacity:.3}96%{opacity:1}}

@media(prefers-reduced-motion:reduce){
  .na-p{opacity:1}
  .na-fuell{transform:scaleY(1)}
  .na-p::before{background:var(--brand);border-color:var(--brand)}
}

/* ══════════════════════════════════════════════════════════════════
   35 · IT-Check — das Fenster, das zum Knopf passt
   ──────────────────────────────────────────────────────────────────
   Der Haupt-CTA heisst „IT-Check anfragen". Das Fenster zeigt jetzt,
   was dabei herauskommt: ein Befund. Damit wird der Knopf konkret,
   statt eine Behauptung zu bleiben.

   Vier Hinweise, nichts Kritisches — das ist das ehrliche Bild eines
   Erstchecks. Ein Fenster mit sieben gruenen Haken waere unglaubwuerdig
   und wertlos; die Hinweise sind der Grund, warum man den Check macht.

   Groesser als die Konsole davor: Fliesstext statt Monospace fuer die
   Bezeichnungen, Mono nur fuer die Werte.
   ══════════════════════════════════════════════════════════════════ */
.nachtachse{display:none}

.check{position:relative;border-radius:18px;overflow:hidden;
  background:
    radial-gradient(120% 90% at 88% -8%,rgba(228,24,30,.18),transparent 56%),
    linear-gradient(165deg,color-mix(in srgb,var(--white) 90%,var(--ink) 10%),var(--white) 62%);
  box-shadow:0 46px 105px -60px rgba(0,0,0,.9),0 16px 46px -34px rgba(228,24,30,.45)}
.theme-hell .check{
  background:radial-gradient(120% 90% at 88% -8%,rgba(228,24,30,.08),transparent 56%),
    linear-gradient(165deg,#fff,#fbfbfb 62%);
  box-shadow:0 46px 105px -60px rgba(10,10,12,.35),0 0 0 1px rgba(10,10,12,.05)}
.check::before{content:"";position:absolute;inset:0;border-radius:inherit;
  padding:1px;pointer-events:none;z-index:5;
  background:linear-gradient(150deg,rgba(228,24,30,.75),rgba(255,255,255,.14) 36%,
    rgba(255,255,255,.05) 70%,rgba(228,24,30,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.theme-hell .check::before{
  background:linear-gradient(150deg,rgba(228,24,30,.5),rgba(10,10,12,.1) 36%,
    rgba(10,10,12,.05) 70%,rgba(228,24,30,.25))}

/* ── Fensterleiste ── */
.ck-leiste{position:relative;z-index:3;display:flex;align-items:center;gap:.65rem;
  padding:1rem 1.35rem;border-bottom:1px solid var(--line)}
.ck-led{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent)}
.ck-titel{font-family:var(--ff-d);font-weight:700;letter-spacing:-.03em;
  font-size:1.08rem;color:var(--ink)}
.ck-lauf{font-family:var(--ff-m);font-size:.68rem;letter-spacing:.1em;color:var(--slate)}
.ck-lauf i{font-style:normal;opacity:0}
.ck-marke{margin-left:auto;font-family:var(--ff-m);font-size:.58rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brand-schrift);
  border:1px solid currentColor;border-radius:999px;padding:.18rem .5rem}

/* ── Befundzeilen ── */
.ck-koerper{position:relative;z-index:3;padding:.5rem 1.35rem .6rem}
.ck-scan{position:absolute;left:0;right:0;height:64px;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,transparent,rgba(228,24,30,.14),transparent);
  top:-64px}
.ck-z{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1fr) auto 1.35rem;
  align-items:baseline;gap:.9rem;padding:.72rem 0;
  border-bottom:1px solid var(--line);opacity:.42}
.ck-z:last-child{border-bottom:0}
.ck-was{font-size:.98rem;font-weight:500;color:var(--ink);line-height:1.3}
.ck-erg{font-family:var(--ff-m);font-size:.72rem;color:var(--slate);
  text-align:right;line-height:1.4}
.ck-ic{position:relative;width:17px;height:17px;align-self:center}
.ck-ic svg{position:absolute;inset:0;width:17px;height:17px}
.ck-warte circle{fill:none;stroke:var(--line-d);stroke-width:1.6;
  stroke-dasharray:4 5}
.theme-hell .ck-warte circle{stroke:var(--line)}
.ck-fertig{opacity:0}
.ck-fertig circle:first-child{fill:none;stroke-width:1.6}
.ck-fertig path,.ck-fertig circle:last-child{stroke-linecap:round;stroke-linejoin:round}
.ck-z--ok .ck-fertig circle:first-child{stroke:var(--gruen)}
.ck-z--ok .ck-fertig path{fill:none;stroke:var(--gruen);stroke-width:1.9}
.ck-z--hinweis .ck-fertig circle{stroke:#e8a33d;fill:none;stroke-width:1.6}
.ck-z--hinweis .ck-fertig circle:last-child{fill:#e8a33d;stroke:none}
.ck-z--hinweis .ck-fertig path{fill:none;stroke:#e8a33d;stroke-width:1.9}
.ck-z--hinweis .ck-erg{color:#e8a33d}
.theme-hell .ck-z--hinweis .ck-erg{color:#a8681a}

/* ── Fuss ── */
.ck-fuss{position:relative;z-index:3;display:flex;align-items:baseline;gap:1.3rem;
  flex-wrap:wrap;padding:.95rem 1.35rem;border-top:1px solid var(--line)}
.ck-kv{font-family:var(--ff-m);font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate)}
.ck-kv b{font-family:var(--ff-d);font-size:1.15rem;font-weight:700;
  letter-spacing:-.03em;color:var(--ink);margin-right:.35rem;vertical-align:-.06em}
.ck-kv--warn b{color:#e8a33d}
.theme-hell .ck-kv--warn b{color:#a8681a}
.ck-kv--ok b{color:var(--gruen)}
.ck-dauer{margin-left:auto;font-family:var(--ff-m);font-size:.64rem;
  letter-spacing:.1em;color:var(--slate)}

/* ══ Bewegung: der Check laeuft durch, 13 s ═══════════════════ */
@media(prefers-reduced-motion:no-preference){
  .ck-scan{animation:ck-scan 13s cubic-bezier(.4,0,.5,1) infinite}
  .ck-led{animation:ck-led 13s steps(1) infinite}
  .ck-lauf i{animation:ck-pkt 1.1s steps(1) infinite}
  .ck-lauf i:nth-child(2){animation-delay:.25s}
  .ck-lauf i:nth-child(3){animation-delay:.5s}
  /* [entfernt: 13s-Zuweisungen aus dem vorherigen Anlauf] */
  .ck-fuss{animation:ck-fuss 13s steps(1) infinite}
}
@keyframes ck-scan{0%,4%{top:-64px}70%,100%{top:100%}}
@keyframes ck-led{0%,70%{background:var(--brand)}
  72%,100%{background:var(--gruen);box-shadow:0 0 0 3px color-mix(in srgb,var(--gruen) 22%,transparent)}}
@keyframes ck-pkt{0%,49%{opacity:0}50%,100%{opacity:1}}
@keyframes cz1{0%,9%{opacity:.42}11%,100%{opacity:1}}
@keyframes cz2{0%,18%{opacity:.42}20%,100%{opacity:1}}
@keyframes cz3{0%,27%{opacity:.42}29%,100%{opacity:1}}
@keyframes cz4{0%,36%{opacity:.42}38%,100%{opacity:1}}
@keyframes cz5{0%,45%{opacity:.42}47%,100%{opacity:1}}
@keyframes cz6{0%,54%{opacity:.42}56%,100%{opacity:1}}
@keyframes cz7{0%,63%{opacity:.42}65%,100%{opacity:1}}
@keyframes cf1{0%,9%{opacity:0}11%,100%{opacity:1}}
@keyframes cf2{0%,18%{opacity:0}20%,100%{opacity:1}}
@keyframes cf3{0%,27%{opacity:0}29%,100%{opacity:1}}
@keyframes cf4{0%,36%{opacity:0}38%,100%{opacity:1}}
@keyframes cf5{0%,45%{opacity:0}47%,100%{opacity:1}}
@keyframes cf6{0%,54%{opacity:0}56%,100%{opacity:1}}
@keyframes cf7{0%,63%{opacity:0}65%,100%{opacity:1}}
@keyframes ck-fuss{0%,65%{opacity:.35}67%,100%{opacity:1}}

@media(prefers-reduced-motion:reduce){
  .ck-z{opacity:1}.ck-fertig{opacity:1}.ck-scan{display:none}
  .ck-fuss{opacity:1}.ck-lauf{display:none}
}
/* [Die Regeln fuer schmale Fenster stehen jetzt in Abschnitt 40 —
    sie muessen NACH .ck-ergs stehen, sonst greifen sie nicht.] */

/* ══════════════════════════════════════════════════════════════════
   36 · IT-Check in zwei Phasen: Befund → Behebung
   ──────────────────────────────────────────────────────────────────
   Erst laeuft der Pruefstrahl durch und findet, was im Argen liegt.
   Dann laeuft ein zweiter, gruener Strahl durch — und die Hinweise
   kippen einzeln auf erledigt, samt neuem Messwert. Das erzaehlt in
   einem Bild, was die Uebernahme bewirkt.

   Die drei Punkte ohne Beanstandung bleiben unveraendert. Wuerden
   sie mitwandern, waere es Werbung statt Befund.

   KORREKTUR: Der Strahl lief mit cubic-bezier und beschleunigte in
   der Mitte, waehrend die Zeilen in gleichmaessigen Schritten
   umsprangen — deshalb eilte er voraus. Jetzt linear, damit er die
   Zeile genau dann erreicht, wenn sie umspringt.
   ══════════════════════════════════════════════════════════════════ */

/* Wertepaare uebereinander legen, damit nichts springt */
.ck-ergs{position:relative;display:grid;justify-items:end;text-align:right}
.ck-ergs .ck-erg{grid-area:1/1}
.ck-erg--nach{opacity:0;color:var(--gruen)}
.theme-hell .ck-erg--nach{color:#0f7d50}

/* Drei Symbolzustaende */
.ck-ic svg{position:absolute;inset:0;width:17px;height:17px}
.ck-befund,.ck-heil{opacity:0}
.ck-befund circle:first-child{fill:none;stroke:#e8a33d;stroke-width:1.6}
.ck-befund path{fill:none;stroke:#e8a33d;stroke-width:1.9;stroke-linecap:round}
.ck-pt{fill:#e8a33d;stroke:none}
.ck-befund--ok circle:first-child{stroke:var(--gruen)}
.ck-befund--ok path{stroke:var(--gruen);stroke-linejoin:round}
.ck-heil circle{fill:none;stroke:var(--gruen);stroke-width:1.6}
.ck-heil path{fill:none;stroke:var(--gruen);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}

/* Phasenanzeige in der Leiste */
.ck-phase{position:relative;display:inline-grid;min-width:11rem}
.ck-ph{grid-area:1/1;font-style:normal;font-family:var(--ff-m);font-size:.68rem;
  letter-spacing:.1em;color:var(--slate);opacity:0}
.ck-ph--1{opacity:1}
.ck-ph--3{color:var(--gruen)}

/* Zweiter, gruener Strahl */
.ck-scan--heil{background:linear-gradient(180deg,transparent,
  color-mix(in srgb,var(--gruen) 30%,transparent),transparent)}

/* Fuss-Wechsel */
.ck-kv--wechsel{position:relative;display:inline-grid}
.ck-kv--wechsel>span{grid-area:1/1;white-space:nowrap}
.ck-w1 b{color:#e8a33d}
.theme-hell .ck-w1 b{color:#a8681a}
.ck-w2{opacity:0}
.ck-w2 b{color:var(--gruen)}

/* ══ Ablauf: 18 s ═════════════════════════════════════════════
   0–4    Ruhe
   4–46   Strahl 1 laeuft, Zeilen zeigen den Befund
   46–56  Befund steht
   56–88  Strahl 2 laeuft, Hinweise werden erledigt
   88–100 Endzustand haelt                                      */
@media(prefers-reduced-motion:no-preference){
  .ck-scan{animation:s1 18s linear infinite}
  .ck-scan--heil{animation:s2 18s linear infinite}
  .ck-led{animation:led2 18s steps(1) infinite}
  .ck-ph--1{animation:p1 18s steps(1) infinite}
  .ck-ph--2{animation:p2 18s steps(1) infinite}
  .ck-ph--3{animation:p3 18s steps(1) infinite}
  .ck-w1{animation:p2 18s steps(1) infinite}
  .ck-w2{animation:p3 18s steps(1) infinite}

  /* [entfernt: veraltete Zuweisungen fuer die alte DOM-Struktur] */
}
@keyframes s1{0%,4%{top:-64px;opacity:1}46%{top:100%;opacity:1}47%,100%{opacity:0;top:100%}}
@keyframes s2{0%,56%{top:-64px;opacity:0}57%{opacity:1}88%{top:100%;opacity:1}89%,100%{opacity:0;top:100%}}
@keyframes led2{0%,46%{background:var(--brand)}
  47%,56%{background:#e8a33d}
  88%,100%{background:var(--gruen);box-shadow:0 0 0 3px color-mix(in srgb,var(--gruen) 22%,transparent)}}
@keyframes p1{0%,44%{opacity:1}46%,100%{opacity:0}}
@keyframes p2{0%,45%{opacity:0}47%,86%{opacity:1}88%,100%{opacity:0}}
@keyframes p3{0%,87%{opacity:0}89%,100%{opacity:1}}

@keyframes zz1{0%,8%{opacity:.42}10%,100%{opacity:1}}
@keyframes zz2{0%,14%{opacity:.42}16%,100%{opacity:1}}
@keyframes zz3{0%,20%{opacity:.42}22%,100%{opacity:1}}
@keyframes zz4{0%,26%{opacity:.42}28%,100%{opacity:1}}
@keyframes zz5{0%,32%{opacity:.42}34%,100%{opacity:1}}
@keyframes zz6{0%,38%{opacity:.42}40%,100%{opacity:1}}
@keyframes zz7{0%,43%{opacity:.42}45%,100%{opacity:1}}
@keyframes bf1{0%,8%{opacity:0}10%,100%{opacity:1}}
@keyframes bf2{0%,14%{opacity:0}16%,100%{opacity:1}}
@keyframes bf3{0%,20%{opacity:0}22%,100%{opacity:1}}
@keyframes bf4{0%,26%{opacity:0}28%,100%{opacity:1}}
@keyframes bf5{0%,32%{opacity:0}34%,100%{opacity:1}}
@keyframes bf6{0%,38%{opacity:0}40%,100%{opacity:1}}
@keyframes bf7{0%,43%{opacity:0}45%,100%{opacity:1}}

@keyframes hl1{0%,60%{opacity:0}62%,100%{opacity:1}}
@keyframes hl2{0%,66%{opacity:0}68%,100%{opacity:1}}
@keyframes hl3{0%,74%{opacity:0}76%,100%{opacity:1}}
@keyframes hl4{0%,80%{opacity:0}82%,100%{opacity:1}}
@keyframes vw1{0%,60%{opacity:1}62%,100%{opacity:0}}
@keyframes vw2{0%,66%{opacity:1}68%,100%{opacity:0}}
@keyframes vw3{0%,74%{opacity:1}76%,100%{opacity:0}}
@keyframes vw4{0%,80%{opacity:1}82%,100%{opacity:0}}

@media(prefers-reduced-motion:reduce){
  .ck-z{opacity:1}
  .ck-befund{opacity:0}.ck-heil{opacity:1}
  .ck-z--ok .ck-befund{opacity:1}
  .ck-erg--vor{opacity:0}.ck-erg--nach{opacity:1}
  .ck-scan,.ck-scan--heil{display:none}
  .ck-ph--1,.ck-ph--2{opacity:0}.ck-ph--3{opacity:1}
  .ck-w1{opacity:0}.ck-w2{opacity:1}
}

/* ══════════════════════════════════════════════════════════════════
   37 · Kein Schleier mehr — die geprüfte Zeile markiert sich selbst
   ──────────────────────────────────────────────────────────────────
   Der Strahl war ein dekorativer Verlauf, der ueber die Tafel zog,
   ohne zu zeigen, WAS gerade geprueft wird. Deshalb wirkte er sinnlos.

   Jetzt gibt es keinen Strahl. Stattdessen leuchtet die Zeile auf,
   die gerade dran ist: roter Balken an der Kante, leicht getoenter
   Grund, danach faellt das Ergebnis. Man sieht die Pruefung wandern,
   weil die Zeilen wandern — nicht weil ein Verlauf darueberzieht.

   Zusaetzlich drei Befundstufen statt zwei: kritisch (rot),
   Hinweis (bernstein), ohne Befund (gruen). Zwei kritische Punkte
   machen aus dem Vorher einen echten Handlungsbedarf.
   ══════════════════════════════════════════════════════════════════ */
.ck-scan,.ck-scan--heil{display:none}

.ck-z{position:relative;overflow:hidden;border-radius:6px;
  margin-inline:-.6rem;padding-inline:.6rem}
/* Markierung an der Kante — sie zeigt, was gerade geprueft wird */
.ck-mark{position:absolute;left:0;top:6%;bottom:6%;width:3px;border-radius:2px;
  background:var(--brand);transform:scaleY(0);transform-origin:center;
  opacity:0}

/* Drei Stufen */
.ck-z--krit .ck-befund circle:first-child{stroke:var(--brand)}
.ck-z--krit .ck-befund path{stroke:var(--brand)}
.ck-z--krit .ck-pt{fill:var(--brand)}
.ck-z--krit .ck-erg--vor{color:var(--brand-schrift)}
.ck-z--warn .ck-befund circle:first-child{stroke:#e8a33d}
.ck-z--warn .ck-befund path{stroke:#e8a33d}
.ck-z--warn .ck-pt{fill:#e8a33d}
.ck-z--warn .ck-erg--vor{color:#e8a33d}
.theme-hell .ck-z--warn .ck-erg--vor{color:#a8681a}

.ck-kv--krit .ck-w1 b{color:var(--brand-schrift)}
.ck-kv--warn .ck-w1 b{color:#e8a33d}
.theme-hell .ck-kv--warn .ck-w1 b{color:#a8681a}
.ck-kv--krit .ck-w2 b,.ck-kv--warn .ck-w2 b{color:var(--gruen)}

/* ══ Ablauf 20 s ══════════════════════════════════════════════
   Phase 1  4–46 %   je Zeile: Markierung an → Ergebnis faellt
   Phase 2 56–92 %   je beanstandete Zeile: gruene Markierung → erledigt */
@media(prefers-reduced-motion:no-preference){
  .ck-z{animation-duration:20s;animation-timing-function:steps(1);
    animation-iteration-count:infinite}
  .ck-mark{animation-duration:20s;animation-timing-function:ease-out;
    animation-iteration-count:infinite}
  .ck-befund,.ck-heil,.ck-erg--vor,.ck-erg--nach,.ck-ph,.ck-w1,.ck-w2,.ck-led{
    animation-duration:20s;animation-timing-function:steps(1);
    animation-iteration-count:infinite}

  .ck-z:nth-child(1){animation-name:zz1} .ck-z:nth-child(1) .ck-mark{animation-name:mk1}
  .ck-z:nth-child(2){animation-name:zz2} .ck-z:nth-child(2) .ck-mark{animation-name:mk2}
  .ck-z:nth-child(3){animation-name:zz3} .ck-z:nth-child(3) .ck-mark{animation-name:mk3}
  .ck-z:nth-child(4){animation-name:zz4} .ck-z:nth-child(4) .ck-mark{animation-name:mk4}
  .ck-z:nth-child(5){animation-name:zz5} .ck-z:nth-child(5) .ck-mark{animation-name:mk5}
  .ck-z:nth-child(6){animation-name:zz6} .ck-z:nth-child(6) .ck-mark{animation-name:mk6}
  .ck-z:nth-child(7){animation-name:zz7} .ck-z:nth-child(7) .ck-mark{animation-name:mk7}

  .ck-z:nth-child(1) .ck-befund{animation-name:bf1}
  .ck-z:nth-child(2) .ck-befund{animation-name:bf2}
  .ck-z:nth-child(3) .ck-befund{animation-name:bf3}
  .ck-z:nth-child(4) .ck-befund{animation-name:bf4}
  .ck-z:nth-child(5) .ck-befund{animation-name:bf5}
  .ck-z:nth-child(6) .ck-befund{animation-name:bf6}
  .ck-z:nth-child(7) .ck-befund{animation-name:bf7}

  /* Phase 2 — die sechs beanstandeten Zeilen */
  .ck-z:nth-child(1) .ck-heil,.ck-z:nth-child(1) .ck-erg--nach{animation-name:hl1}
  .ck-z:nth-child(1) .ck-erg--vor{animation-name:vw1}
  .ck-z:nth-child(2) .ck-heil,.ck-z:nth-child(2) .ck-erg--nach{animation-name:hl2}
  .ck-z:nth-child(2) .ck-erg--vor{animation-name:vw2}
  .ck-z:nth-child(3) .ck-heil,.ck-z:nth-child(3) .ck-erg--nach{animation-name:hl3}
  .ck-z:nth-child(3) .ck-erg--vor{animation-name:vw3}
  .ck-z:nth-child(4) .ck-heil,.ck-z:nth-child(4) .ck-erg--nach{animation-name:hl4}
  .ck-z:nth-child(4) .ck-erg--vor{animation-name:vw4}
  .ck-z:nth-child(5) .ck-heil,.ck-z:nth-child(5) .ck-erg--nach{animation-name:hl5}
  .ck-z:nth-child(5) .ck-erg--vor{animation-name:vw5}
  .ck-z:nth-child(6) .ck-heil,.ck-z:nth-child(6) .ck-erg--nach{animation-name:hl6}
  .ck-z:nth-child(6) .ck-erg--vor{animation-name:vw6}

  .ck-ph--1{animation-name:p1} .ck-ph--2{animation-name:p2} .ck-ph--3{animation-name:p3}
  .ck-w1{animation-name:p2} .ck-w2{animation-name:p3}
  .ck-led{animation-name:led3}
}

/* Zeile hell / dunkel */
@keyframes zz1{0%,5%{opacity:.4}7%,100%{opacity:1}}
@keyframes zz2{0%,11%{opacity:.4}13%,100%{opacity:1}}
@keyframes zz3{0%,17%{opacity:.4}19%,100%{opacity:1}}
@keyframes zz4{0%,23%{opacity:.4}25%,100%{opacity:1}}
@keyframes zz5{0%,29%{opacity:.4}31%,100%{opacity:1}}
@keyframes zz6{0%,35%{opacity:.4}37%,100%{opacity:1}}
@keyframes zz7{0%,41%{opacity:.4}43%,100%{opacity:1}}
/* Markierung: faehrt auf, haelt kurz, faehrt ab — je Zeile nacheinander

   KORREKTUR: Die Farbe stand nur in den Bildern der zweiten Phase. Fuer
   alles davor nahm der Browser den Grundwert (Markenrot) als Bild bei 0 %
   und blendete ihn ueber die ganze Laufzeit nach Gruen — die Markierung
   war also schon in Phase 1 rostbraun und wurde beim Umspringen als
   roter Rest sichtbar. Jetzt steht in JEDEM Bild eine Farbe, und der
   Wechsel von Rot auf Gruen liegt in dem Prozent, in dem die Markierung
   ohnehin unsichtbar ist. */
@keyframes mk1{0%,3%{transform:scaleY(0);opacity:0;background:var(--brand)}
  4%,6%{transform:scaleY(1);opacity:1;background:var(--brand)}
  8%,55%{transform:scaleY(0);opacity:0;background:var(--brand)}
  56%{transform:scaleY(0);opacity:0;background:var(--gruen)}
  57%,59%{transform:scaleY(1);opacity:1;background:var(--gruen)}
  61%,100%{transform:scaleY(0);opacity:0;background:var(--gruen)}}
@keyframes mk2{0%,9%{transform:scaleY(0);opacity:0;background:var(--brand)}
  10%,12%{transform:scaleY(1);opacity:1;background:var(--brand)}
  14%,61%{transform:scaleY(0);opacity:0;background:var(--brand)}
  62%{transform:scaleY(0);opacity:0;background:var(--gruen)}
  63%,65%{transform:scaleY(1);opacity:1;background:var(--gruen)}
  67%,100%{transform:scaleY(0);opacity:0;background:var(--gruen)}}
@keyframes mk3{0%,15%{transform:scaleY(0);opacity:0;background:var(--brand)}
  16%,18%{transform:scaleY(1);opacity:1;background:var(--brand)}
  20%,67%{transform:scaleY(0);opacity:0;background:var(--brand)}
  68%{transform:scaleY(0);opacity:0;background:var(--gruen)}
  69%,71%{transform:scaleY(1);opacity:1;background:var(--gruen)}
  73%,100%{transform:scaleY(0);opacity:0;background:var(--gruen)}}
@keyframes mk4{0%,21%{transform:scaleY(0);opacity:0;background:var(--brand)}
  22%,24%{transform:scaleY(1);opacity:1;background:var(--brand)}
  26%,73%{transform:scaleY(0);opacity:0;background:var(--brand)}
  74%{transform:scaleY(0);opacity:0;background:var(--gruen)}
  75%,77%{transform:scaleY(1);opacity:1;background:var(--gruen)}
  79%,100%{transform:scaleY(0);opacity:0;background:var(--gruen)}}
@keyframes mk5{0%,27%{transform:scaleY(0);opacity:0;background:var(--brand)}
  28%,30%{transform:scaleY(1);opacity:1;background:var(--brand)}
  32%,79%{transform:scaleY(0);opacity:0;background:var(--brand)}
  80%{transform:scaleY(0);opacity:0;background:var(--gruen)}
  81%,83%{transform:scaleY(1);opacity:1;background:var(--gruen)}
  85%,100%{transform:scaleY(0);opacity:0;background:var(--gruen)}}
@keyframes mk6{0%,33%{transform:scaleY(0);opacity:0;background:var(--brand)}
  34%,36%{transform:scaleY(1);opacity:1;background:var(--brand)}
  38%,85%{transform:scaleY(0);opacity:0;background:var(--brand)}
  86%{transform:scaleY(0);opacity:0;background:var(--gruen)}
  87%,89%{transform:scaleY(1);opacity:1;background:var(--gruen)}
  91%,100%{transform:scaleY(0);opacity:0;background:var(--gruen)}}
@keyframes mk7{0%,39%{transform:scaleY(0);opacity:0;background:var(--brand)}
  40%,42%{transform:scaleY(1);opacity:1;background:var(--brand)}
  44%,100%{transform:scaleY(0);opacity:0;background:var(--brand)}}
/* Ergebnis faellt
   KORREKTUR: Das Befundsymbol (roter bzw. bernsteinfarbener Kreis mit
   Ausrufezeichen) blieb bis zum Schluss stehen. In Phase 2 blendete
   darueber das gruene Hakensymbol ein — beide liegen im selben 17px-
   Feld uebereinander. Sichtbar war dann ein gruener Kreis mit dem
   roten Strich und Punkt des alten Symbols darin; das sah aus wie ein
   Pfeil nach unten und war der „rote Rueckstand".
   Die sechs beanstandeten Zeilen blenden ihr Befundsymbol jetzt
   genau dann aus, wenn der Haken kommt (hl1–hl6). Zeile 7 hat keinen
   Befund und bleibt unveraendert stehen. */
@keyframes bf1{0%,5%{opacity:0}7%,58%{opacity:1}60%,100%{opacity:0}}
@keyframes bf2{0%,11%{opacity:0}13%,64%{opacity:1}66%,100%{opacity:0}}
@keyframes bf3{0%,17%{opacity:0}19%,70%{opacity:1}72%,100%{opacity:0}}
@keyframes bf4{0%,23%{opacity:0}25%,76%{opacity:1}78%,100%{opacity:0}}
@keyframes bf5{0%,29%{opacity:0}31%,82%{opacity:1}84%,100%{opacity:0}}
@keyframes bf6{0%,35%{opacity:0}37%,88%{opacity:1}90%,100%{opacity:0}}
@keyframes bf7{0%,41%{opacity:0}43%,100%{opacity:1}}
/* Behebung */
@keyframes hl1{0%,58%{opacity:0}60%,100%{opacity:1}}
@keyframes hl2{0%,64%{opacity:0}66%,100%{opacity:1}}
@keyframes hl3{0%,70%{opacity:0}72%,100%{opacity:1}}
@keyframes hl4{0%,76%{opacity:0}78%,100%{opacity:1}}
@keyframes hl5{0%,82%{opacity:0}84%,100%{opacity:1}}
@keyframes hl6{0%,88%{opacity:0}90%,100%{opacity:1}}
@keyframes vw1{0%,58%{opacity:1}60%,100%{opacity:0}}
@keyframes vw2{0%,64%{opacity:1}66%,100%{opacity:0}}
@keyframes vw3{0%,70%{opacity:1}72%,100%{opacity:0}}
@keyframes vw4{0%,76%{opacity:1}78%,100%{opacity:0}}
@keyframes vw5{0%,82%{opacity:1}84%,100%{opacity:0}}
@keyframes vw6{0%,88%{opacity:1}90%,100%{opacity:0}}
/* Kopf und Fuss */
@keyframes p1{0%,43%{opacity:1}45%,100%{opacity:0}}
@keyframes p2{0%,44%{opacity:0}46%,89%{opacity:1}91%,100%{opacity:0}}
@keyframes p3{0%,90%{opacity:0}92%,100%{opacity:1}}
@keyframes led3{0%,45%{background:var(--brand)}
  46%,90%{background:#e8a33d}
  92%,100%{background:var(--gruen);box-shadow:0 0 0 3px color-mix(in srgb,var(--gruen) 22%,transparent)}}

@media(prefers-reduced-motion:reduce){
  .ck-mark{opacity:0}
}

/* ── 38 · Ticker folgt dem hellen Thema ──────────────────────────
   FEHLER: Die Regel, die den Ticker im hellen Thema aufhellen sollte,
   lautete `.theme-hell .theme-hell .hero + .ticker` — zwei
   verschachtelte .theme-hell, die es im Dokument nie gibt (die Klasse
   sitzt einmal auf <html>). Der Selektor traf also nie, und die
   dunkle Variante `.theme-hell .hero + .ticker` behielt die Oberhand.
   Deshalb blieb das Laufband auch im hellen Modus schwarz. */
.theme-hell .hero + .ticker,
.theme-hell .ticker{background:var(--warm);color:var(--slate);
  border-block:1px solid var(--line)}
.theme-hell .ticker-track b::after{color:var(--brand-schrift)}

/* ══════════════════════════════════════════════════════════════════
   39 · Kopfleiste und Mobilmenue folgen dem hellen Thema
   ──────────────────────────────────────────────────────────────────
   BEFUND: Die Kopfleiste stand fest auf rgba(10,10,12,.9), das
   Mobilmenue auf --band (#08080a). Beide waren damit auch im hellen
   Thema schwarz. Auf dem Handy fiel es am staerksten auf: ein
   schwarzer Balken und ein schwarzes Vollbildmenue ueber einer
   hellen Seite.

   Footer und Notdienstband bleiben bewusst dunkel — die sind
   Abschluss und Alarm. Kopfleiste und Menue sind Bedienung und
   gehoeren zur Seite, nicht zum Rahmen.
   ══════════════════════════════════════════════════════════════════ */

/* ── Kopfleiste ── */
.theme-hell .hd{background:rgba(255,255,255,.88);border-bottom-color:var(--line);
  color:var(--ink)}
.theme-hell .hd--klein{background:rgba(255,255,255,.96);
  box-shadow:0 10px 30px -20px rgba(10,10,12,.45)}
.theme-hell .brand{color:var(--ink)}
.theme-hell .brand small{color:var(--slate)}
.theme-hell .nav-link{color:var(--ink)}
.theme-hell .nav-link:hover,
.theme-hell .nav-link[aria-expanded=true]{background:rgba(10,10,12,.06);color:var(--ink)}
.theme-hell .nav-link[aria-current=page]{color:var(--brand-schrift)}
.theme-hell .hd :where(a,button):focus-visible{outline-color:var(--brand)}

/* Themenschalter: auf Weiss braucht er eine sichtbare Kante */
.theme-hell .themebtn{color:var(--ink);border-color:var(--line);
  background:rgba(10,10,12,.03)}
.theme-hell .themebtn:hover{background:rgba(10,10,12,.07);border-color:var(--slate)}

/* Burger-Striche waren --paper, also im hellen Thema fast weiss */
.theme-hell .burger span{background:var(--ink)}

/* ── Mega-Menue ── */
.theme-hell .mega{background:var(--white);border-color:var(--line);
  box-shadow:0 40px 90px -40px rgba(10,10,12,.35),0 0 0 1px rgba(10,10,12,.04)}
.theme-hell .mega-lbl::after{background:var(--line)}
.theme-hell .mega a{color:var(--ink)}
.theme-hell .mega span{color:var(--slate)}
.theme-hell .mega a:hover{background:rgba(228,24,30,.07)}
.theme-hell .mega-txt{color:var(--slate)}
.theme-hell .mega-mehr{color:var(--brand-schrift)}

/* ── Mobiles Vollbildmenue ── */
.theme-hell .mnav{background:var(--paper)}
.theme-hell .mnav a{color:var(--ink);border-bottom-color:var(--line)}
.theme-hell .mnav a::after{color:var(--brand-schrift)}
.theme-hell .mnav h2{color:var(--brand-schrift)}
.theme-hell .mnav .btn{border-color:var(--ink);color:var(--ink)}
.theme-hell .mnav .btn:hover{background:var(--ink);color:var(--paper)}
.theme-hell .mnav .btn--p{background:var(--brand);border-color:var(--brand-schrift);
  color:#fff}
.theme-hell .mnav .btn--p:hover{background:var(--brand-deep);color:#fff}

/* ══════════════════════════════════════════════════════════════════
   40 · IT-Check auf dem Handy
   ──────────────────────────────────────────────────────────────────
   BEFUND: Die Tafel war auf schmalen Fenstern breiter als das Fenster,
   die Werte liefen rechts aus dem Bild.

   Zwei Ursachen:

   1. Die alte Regel fuer schmale Fenster setzte .ck-erg in die erste
      Spalte. Die Ergebnisse liegen aber seit Abschnitt 36 in einem
      Wrapper .ck-ergs — damit „vorher" und „nachher" uebereinander-
      liegen und beim Umspringen nichts springt. Der Wrapper blieb
      also in der weggefallenen zweiten Spalte stehen, das Raster
      legte dafuer eine implizite dritte Spalte an, und ohne
      min-width:0 konnte darin nichts umbrechen.

   2. Die Regel stand ausserdem VOR der Definition von .ck-ergs. Bei
      gleicher Gewichtung gewinnt die spaetere Regel — die Ausrichtung
      nach rechts blieb deshalb bestehen. Darum steht dieser Block
      jetzt am Ende.

   Aufbau auf schmalen Fenstern: links Bezeichnung ueber Ergebnis,
   rechts das Symbol ueber beide Zeilen.
   ══════════════════════════════════════════════════════════════════ */
.check{max-width:100%}
.ck-was,.ck-ergs{min-width:0}

@media(max-width:560px){
  .ck-z{grid-template-columns:minmax(0,1fr) 1.35rem;
    grid-template-rows:auto auto;gap:.25rem .7rem;align-items:center}
  .ck-was{grid-column:1;grid-row:1;min-width:0}
  .ck-ergs{grid-column:1;grid-row:2;min-width:0;width:100%;
    justify-items:start;text-align:left}
  .ck-erg{grid-column:auto;text-align:left;font-size:.68rem;
    overflow-wrap:anywhere}
  .ck-ic{grid-column:2;grid-row:1/span 2;align-self:center}

  /* Fensterleiste: Titel, Phase und „Beispiel" passten nebeneinander
     nicht mehr in 350 px — der Titel brach um, die Marke lief hinaus.
     Die Phasenanzeige braucht die 11 rem Mindestbreite nur, damit der
     laengste der drei Texte nicht das Layout schiebt; auf dem Handy
     darf sie unter den Titel rutschen. */
  .ck-leiste{flex-wrap:wrap;gap:.45rem .6rem;padding:.85rem 1rem}
  .ck-titel{white-space:nowrap}
  .ck-phase{min-width:0;order:3;flex-basis:100%}
  .ck-ph{white-space:nowrap}
  .ck-marke{margin-left:auto;order:2}
  .ck-koerper{padding-inline:1rem}
  .ck-fuss{padding-inline:1rem;gap:.9rem}
}

/* ══════════════════════════════════════════════════════════════════
   41 · Kontaktformular
   ──────────────────────────────────────────────────────────────────
   Bis zum 6. August 2026 gab es auf der Seite kein einziges
   Eingabefeld — entsprechend keine Stile dafür. Hier stehen sie.

   Gestalterisch bewusst ruhig: Die Kontaktseite sagt in der
   Überschrift „Rufen Sie einfach an". Das Formular ist das zweite
   Angebot, nicht das erste. Es soll benutzbar und sauber aussehen,
   aber dem Telefon nicht die Aufmerksamkeit wegnehmen.
   ══════════════════════════════════════════════════════════════════ */

.fmr{display:flex;flex-direction:column;gap:1.1rem}
.fmr-reihe{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media(max-width:640px){.fmr-reihe{grid-template-columns:1fr}}

.fmr-feld{display:flex;flex-direction:column;gap:.45rem;margin:0;min-width:0}
.fmr-feld label{font-family:var(--ff-m);font-size:.68rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--slate);
  display:flex;align-items:baseline;gap:.5rem}
.fmr-feld label b{color:var(--brand-schrift);font-weight:500}
.fmr-feld label em{font-style:normal;text-transform:none;letter-spacing:.02em;
  font-size:.72rem;color:var(--mute)}

/* background-COLOR, nicht die Kurzschreibweise background. Die würde
   auch Wiederholung, Position und Grösse zurücksetzen — und damit den
   Pfeil des Auswahlfelds weiter unten über das ganze Feld kacheln. */
.fmr input,.fmr textarea,.fmr select{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);
  background-color:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:.85rem 1rem;
  transition:border-color .2s,box-shadow .2s,background-color .2s}
.fmr textarea{resize:vertical;min-height:9rem;line-height:1.6}
.fmr input::placeholder,.fmr textarea::placeholder{color:var(--mute)}

/* Auswahlfeld: eigener Pfeil, damit es zu den übrigen Feldern passt.
   Der Pfeil steckt als Daten-URI im Hintergrund — die CSP erlaubt
   img-src data:, das ist also gedeckt. */
.fmr select{appearance:none;-webkit-appearance:none;cursor:pointer;
  padding-right:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235f6067' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;
  background-size:12px 8px}

.fmr input:hover,.fmr textarea:hover,.fmr select:hover{border-color:var(--slate)}
.fmr input:focus,.fmr textarea:focus,.fmr select:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}
/* Tastaturbedienung behält den kräftigen Rahmen aus der Grundregel. */
.fmr :is(input,textarea,select):focus-visible{outline:3px solid var(--brand);
  outline-offset:2px;box-shadow:none}

/* Erst meckern, wenn etwas eingegeben wurde — nicht beim ersten Blick. */
.fmr input:not(:placeholder-shown):invalid,
.fmr textarea:not(:placeholder-shown):invalid{border-color:var(--brand-schrift)}

/* Honigtopf. Nicht display:none — manche Roboter überspringen genau
   das. Stattdessen aus dem Bild geschoben und aus der Tabreihenfolge
   genommen. aria-hidden fehlt bewusst: Vorleseprogramme sollen die
   Beschriftung hören, falls jemand doch dort landet. */
.fmr-topf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.fmr-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;
  margin-top:.4rem}
.fmr-fuss .btn{flex:none}
.fmr-hinweis{flex:1 1 22rem;margin:0;font-size:.86rem;line-height:1.55;
  color:var(--slate)}
.fmr-hinweis a{color:var(--brand-schrift);text-decoration:underline;
  text-underline-offset:2px}
.fmr-hinweis b{color:var(--brand-schrift);font-weight:500}

/* Dunkles Thema: Felder dürfen nicht als weisse Blöcke stehenbleiben. */
:root:not(.theme-hell) .fmr input,
:root:not(.theme-hell) .fmr textarea,
:root:not(.theme-hell) .fmr select{background-color:var(--ink-2);border-color:var(--line-d)}
:root:not(.theme-hell) .fmr select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23adaeb6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E")}

/* ── Kundenart: Betrieb oder privat ───────────────────────────────
   Zwei grosse Flächen statt zweier winziger Kreise. Auf dem Handy
   ist das der Unterschied zwischen treffen und danebentippen — die
   ganze Karte ist die Schaltfläche, nicht nur der Punkt.

   fieldset und legend bringen eigene Voreinstellungen mit, die zu
   nichts hier passen. Deshalb zurückgesetzt. */
.fmr-art{border:0;margin:0;padding:0;min-width:0}
.fmr-art legend{padding:0;margin:0 0 .45rem;font-family:var(--ff-m);
  font-size:.68rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--slate)}
.fmr-art legend b{color:var(--brand-schrift);font-weight:500}

.fmr-wahl{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
@media(max-width:640px){.fmr-wahl{grid-template-columns:1fr}}

.fmr-wahl label{display:flex;align-items:flex-start;gap:.7rem;cursor:pointer;
  padding:.85rem 1rem;border:1px solid var(--line);border-radius:var(--r);
  background-color:var(--white);
  transition:border-color .2s,background-color .2s,box-shadow .2s}
.fmr-wahl label:hover{border-color:var(--slate)}
.fmr-wahl input{width:18px;height:18px;flex:none;margin:.15rem 0 0;
  accent-color:var(--brand);cursor:pointer}
.fmr-wahl span{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.fmr-wahl b{font-weight:600;font-size:.98rem;line-height:1.3}
.fmr-wahl em{font-style:normal;font-size:.82rem;color:var(--slate);line-height:1.4}

/* Die gewählte Karte hebt sich ab — sonst sieht man auf einen Blick
   nicht, was eingestellt ist. :has() kennen alle aktuellen Browser;
   wo nicht, bleibt der Punkt allein als Anzeige, das genügt. */
.fmr-wahl label:has(input:checked){border-color:var(--brand);
  background-color:color-mix(in srgb,var(--brand) 6%,var(--white));
  box-shadow:0 0 0 1px var(--brand) inset}
.fmr-wahl label:has(input:focus-visible){outline:3px solid var(--brand);
  outline-offset:2px}

:root:not(.theme-hell) .fmr-wahl label{background-color:var(--ink-2);
  border-color:var(--line-d)}
:root:not(.theme-hell) .fmr-wahl label:has(input:checked){
  background-color:color-mix(in srgb,var(--brand) 14%,var(--ink-2));
  border-color:var(--brand)}

/* ══════════════════════════════════════════════════════════════════
   42 · Kontaktseite: Formular und Direktkontakt nebeneinander
   ──────────────────────────────────────────────────────────────────
   BEFUND: Das Formular war nur unter den Hero geschoben worden, ohne
   die Seite neu zu setzen. Drei Folgen, alle sichtbar:

   1. Der Hero lief auf 1200 px, das Formular auf 820 px — die linke
      Kante sprang mitten auf der Seite um fast 200 px nach innen.
   2. „Rufen Sie einfach an" und „Lieber schreiben?" standen als zwei
      grosse Überschriften direkt übereinander und stritten sich.
   3. Die rechte Hälfte blieb leer.

   Jetzt ein Raster über die volle Breite: links das Formular als
   Tafel, rechts der Direktkontakt. Die zweite grosse Überschrift ist
   zu einer Beschriftung in der Tafelleiste geworden — damit bleibt
   im Kopf der Seite eine einzige Aussage stehen.
   ══════════════════════════════════════════════════════════════════ */

.kgrid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(1.5rem,3.5vw,3rem);align-items:start}
@media(max-width:900px){.kgrid{grid-template-columns:1fr}}

/* ── Die Tafel ── */
.ktafel{background-color:var(--white);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;
  box-shadow:0 30px 70px -55px rgba(10,10,12,.7)}
.ktafel-hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;
  padding:1.05rem 1.5rem;border-bottom:1px solid var(--line);
  background-color:color-mix(in srgb,var(--brand) 5%,var(--white))}
.ktafel-lbl{font-family:var(--ff-m);font-size:.68rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brand-schrift)}
.ktafel-sub{font-size:.88rem;color:var(--slate)}
.ktafel-bd{padding:clamp(1.25rem,3vw,1.75rem)}

:root:not(.theme-hell) .ktafel{background-color:var(--white);border-color:var(--line)}
:root:not(.theme-hell) .ktafel-hd{
  background-color:color-mix(in srgb,var(--brand) 10%,var(--white))}

/* ── Die Randspalte ──
   Am Rechner läuft sie mit, damit die Telefonnummer erreichbar bleibt,
   während man das Formular ausfüllt. Unter 900 px rutscht sie unter
   das Formular — dort steht ohnehin schon die Anrufleiste am
   unteren Rand. */
@media(min-width:901px){
  .kseite{position:sticky;top:6.5rem}
}
.kseite .picker{box-shadow:none}

.kdaten{display:grid;gap:1.25rem;margin:0}
.kdaten dt{font-family:var(--ff-m);font-size:.64rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--slate)}
.kdaten dd{margin:.3rem 0 0}
.kdaten dd a{color:var(--brand-schrift)}
.kdaten-gross{font-size:1.15rem;font-weight:600}
.kdaten-gross a{text-decoration:none}
.kdaten address{font-style:normal;line-height:1.55}

.kseite-hinweis{margin:1.4rem 0 0;padding-top:1.2rem;
  border-top:1px dashed var(--line);font-size:.86rem;line-height:1.55;
  color:var(--slate)}
.kseite-hinweis strong{color:var(--brand-schrift)}

/* ── Kontaktseite: Kleingedrucktes in der Karte ───────────────────
   Der Hinweis zur Werkstatt stand vorher im Fliesstext daneben. Der
   Abschnitt ist weg — er wiederholte nur, was die Karte ohnehin
   sagt. Der eine Satz, der dort NICHT stand, ist hierhergezogen. */
.kdaten-klein{display:block;margin-top:.4rem;font-size:.82rem;
  line-height:1.5;color:var(--slate)}

/* ── Hinweis am Nachrichtenfeld ───────────────────────────────────
   Stand vorher als eigener Abschnitt unter dem Formular — dort sah
   ihn beim Tippen niemand. Jetzt fest über dem Feld: ein Platzhalter
   wäre beim ersten Buchstaben verschwunden, genau dann, wenn man ihn
   braucht. */
.fmr-tipp{display:block;margin:-.15rem 0 .1rem;font-size:.84rem;
  line-height:1.5;color:var(--slate)}
.fmr-tipp b{font-weight:600;color:var(--ink)}

/* ══════════════════════════════════════════════════════════════════
   43 · Kundenlogos auf „Über mich"
   ──────────────────────────────────────────────────────────────────
   Erster Anlauf war eine schmale Leiste unter dem Hero der Startseite,
   an der Stelle des Schlagwort-Laufbands. Sie wirkte gedrängt und nahm
   dem Hero die Ruhe — verworfen, das Laufband ist zurück.

   Hier haben die Logos Platz: ein Raster mit Namen darunter, an der
   Stelle, an der jemand ohnehin prüft, mit wem er es zu tun hat.

   Die vier PNG sind Graustufen mit Alphakanal, also schwarz auf
   durchsichtig — im dunklen Thema genügt filter:invert(1). ATREMIS
   liegt als SVG im Quelltext und trägt fill:currentColor, folgt dem
   Thema also ohne Filter.

   Die Bildfläche ist fest hoch, damit eine breite Wortmarke und ein
   kompaktes Zeichen dieselbe Zeile halten — ohne diese Höhe säßen die
   Namen darunter auf verschiedenen Linien.
   ══════════════════════════════════════════════════════════════════ */

.kundenwand{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(1.75rem,4vw,2.75rem) clamp(1.5rem,3vw,2.5rem)}

.kundenwand li{display:flex;flex-direction:column;align-items:center;
  gap:.85rem;text-align:center;min-width:0}

.kw-bild{display:flex;align-items:center;justify-content:center;
  height:46px;width:100%}
.kw-bild img,.kw-bild svg{max-height:46px;max-width:100%;width:auto;
  height:auto;display:block;opacity:.72;transition:opacity .25s}
.kundenwand li:hover .kw-bild img,
.kundenwand li:hover .kw-bild svg{opacity:1}

/* Das SVG trägt fill:currentColor — die Farbe kommt von hier. */
.kw-svg{color:var(--ink)}

.kw-name{font-family:var(--ff-m);font-size:.68rem;letter-spacing:.08em;
  color:var(--slate);line-height:1.45;text-wrap:balance}

/* Dunkles Thema: die schwarzen Rasterbilder umkehren. */
:root:not(.theme-hell) .kw-bild img{filter:invert(1)}

/* ══════════════════════════════════════════════════════════════════
   44 · Schaubilder neben der Einleitung
   ──────────────────────────────────────────────────────────────────
   Die Einleitung steht in .prose und ist auf 68 Zeichen begrenzt —
   rechts daneben blieb auf 21 Leistungsseiten dieselbe leere Fläche.

   Erster Entwurf war eine Tafel mit Kopfleiste, Phasenanzeige und
   beschrifteten Messpunkten, gebaut wie der IT-Check. Zu viel: Die
   Zeichnung soll die Einleitung begleiten, nicht sie erklären.
   Geblieben ist die Zeichnung, ohne Rahmen und ohne ein Wort.

   Sechs Bausteine, alle nach demselben Muster: rot der Zustand, den
   jemand mitbringt, grün der nach der Arbeit. Alle 16 s mit
   denselben Phasengrenzen, damit zwei Seiten hintereinander im
   selben Takt laufen. Die Grenzen stehen in module.py.

   Skaliert wird über transform, nicht über Geometrie-Attribute wie
   r oder rx: Die sind als CSS-Eigenschaft noch nicht überall
   verlässlich, transform ist es seit jeher.
   ══════════════════════════════════════════════════════════════════ */

.eingrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,3.5rem);align-items:center}

/* Auf dem Handy fällt die Zeichnung weg. Sie füllt eine leere Fläche,
   die es dort gar nicht gibt — einspaltig steht der Text ohnehin über
   die ganze Breite. Sie ist Inline-SVG, es wird also auch nichts
   geladen, was dann ungenutzt bliebe. */
@media(max-width:900px){
  .eingrid{grid-template-columns:1fr}
  .abd{display:none}
}

.abd{width:100%}
.abd svg{display:block;width:100%;height:auto;overflow:visible}

/* ── Gemeinsame Bausteine ── */
.abd-boden{stroke:var(--line);stroke-width:1.5}
.abd-bau{fill:none;stroke:var(--slate);stroke-width:1.6;
  stroke-linejoin:round;stroke-linecap:round}
.abd-fuell{fill:color-mix(in srgb,var(--ink) 4%,transparent)}
.abd-neu{fill:none;stroke:var(--gruen);stroke-width:1.6;stroke-linecap:round}

/* Der Punkt, der die Aussage trägt: grau, rot, grün. */
.abd-punkt{fill:var(--line);stroke:var(--paper);stroke-width:1.5}
.abd-punkt--gut{animation-name:abd-immer !important}

/* Was erst in der zweiten Phase dazukommt. */
.abd-eingriff{opacity:0}

@media(prefers-reduced-motion:no-preference){
  .abd-punkt{animation:abd-punkt 16s steps(1) infinite;
    animation-delay:calc(var(--n,0) * .35s)}
  .abd-eingriff{animation:abd-ein 16s ease-out infinite}
}
@keyframes abd-punkt{
  0%,20%   {fill:var(--line)}
  22%,60%  {fill:var(--brand)}
  62%,100% {fill:var(--gruen)}}
@keyframes abd-immer{
  0%,20%   {fill:var(--line)}
  22%,100% {fill:var(--gruen)}}
@keyframes abd-ein{0%,48%{opacity:0}54%,100%{opacity:1}}

/* ── 1 · Funkabdeckung ── */
.abd-welle{fill:none;stroke-width:1.6;transform-box:view-box;
  opacity:0;transform:scale(0)}
.abd-welle--schwach{stroke:var(--brand);transform-origin:72px 205px;
  fill:color-mix(in srgb,var(--brand) 7%,transparent)}
.abd-welle--stark{stroke:var(--gruen);transform-origin:150px 205px;
  fill:color-mix(in srgb,var(--gruen) 7%,transparent)}
@media(prefers-reduced-motion:no-preference){
  .abd-welle--schwach{animation:abd-schwach 16s cubic-bezier(.3,.7,.4,1) infinite}
  .abd-welle--stark{animation:abd-stark 16s cubic-bezier(.3,.7,.4,1) infinite}
}
@keyframes abd-schwach{
  0%,6%{opacity:0;transform:scale(0)} 30%,46%{opacity:1;transform:scale(1)}
  54%,100%{opacity:0;transform:scale(1)}}
@keyframes abd-stark{
  0%,54%{opacity:0;transform:scale(0)} 84%,100%{opacity:1;transform:scale(1)}}

/* ── 2 · Sicherung ── */
.abd-weg{fill:none;stroke:var(--line);stroke-width:1.5;stroke-dasharray:4 5}
.abd-paket{fill:color-mix(in srgb,var(--slate) 22%,transparent);
  stroke:var(--slate);stroke-width:1.4;opacity:0}
.abd-probe{fill:color-mix(in srgb,var(--gruen) 22%,transparent);
  stroke:var(--gruen);stroke-width:1.4;opacity:0}
@media(prefers-reduced-motion:no-preference){
  .abd-paket{animation:abd-hin 16s cubic-bezier(.4,0,.3,1) infinite;
    animation-delay:calc(var(--n) * 1.1s)}
  .abd-probe{animation:abd-zurueck 16s cubic-bezier(.4,0,.3,1) infinite}
}
@keyframes abd-hin{
  0%,6%   {opacity:0;transform:translateX(0)}
  10%     {opacity:1}
  26%     {opacity:1;transform:translateX(168px)}
  30%,100%{opacity:0;transform:translateX(168px)}}
@keyframes abd-zurueck{
  0%,56%  {opacity:0;transform:translateX(0)}
  60%     {opacity:1}
  80%     {opacity:1;transform:translateX(-140px)}
  84%,100%{opacity:0;transform:translateX(-140px)}}

/* ── 3 · Schutzschild ── */
.abd-wand{fill:none;stroke-width:2.4;stroke-linecap:round}
.abd-wand--loch{stroke:var(--brand)}
.abd-wand--zu{stroke:var(--gruen);stroke-dasharray:100;stroke-dashoffset:100}
.abd-pfeil{fill:none;stroke:var(--brand);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:0}
.abd-pfeil--ab{stroke:var(--gruen)}
@media(prefers-reduced-motion:no-preference){
  .abd-wand--loch{animation:abd-loch 16s steps(1) infinite}
  .abd-wand--zu{animation:abd-zu 16s cubic-bezier(.3,.7,.4,1) infinite}
  .abd-pfeil--offen{animation:abd-durch 16s cubic-bezier(.4,0,.4,1) infinite;
    animation-delay:calc(var(--n) * .5s)}
  .abd-pfeil--ab{animation:abd-prall 16s cubic-bezier(.4,0,.4,1) infinite;
    animation-delay:calc(var(--n) * .5s)}
}
@keyframes abd-loch{0%,52%{opacity:1}54%,100%{opacity:0}}
@keyframes abd-zu{0%,52%{stroke-dashoffset:100}54%{opacity:1}
  66%,100%{stroke-dashoffset:0}}
/* Vorher: Der mittlere kommt durch, die anderen bleiben stehen. */
@keyframes abd-durch{
  0%,8%   {opacity:0;transform:translateX(0)}
  12%     {opacity:1}
  26%     {opacity:1;transform:translateX(196px)}
  30%,100%{opacity:0;transform:translateX(196px)}}
/* Nachher: Alle prallen an der Wand ab. */
@keyframes abd-prall{
  0%,58%  {opacity:0;transform:translateX(0)}
  62%     {opacity:1}
  74%     {opacity:1;transform:translateX(184px)}
  78%     {opacity:1;transform:translateX(172px)}
  82%,100%{opacity:0;transform:translateX(172px)}}

/* ── 4 · Umzug ── */
.abd-einheit{fill:color-mix(in srgb,var(--slate) 22%,transparent);
  stroke:var(--slate);stroke-width:1.4}
.abd-ziel{fill:color-mix(in srgb,var(--gruen) 20%,transparent);
  stroke:var(--gruen);stroke-width:1.4;opacity:0}
.abd-laeuft{stroke:var(--gruen);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:100}
@media(prefers-reduced-motion:no-preference){
  .abd-einheit{animation:abd-raus 16s steps(1) infinite;
    animation-delay:calc(var(--n) * 1.4s)}
  .abd-ziel{animation:abd-rein 16s steps(1) infinite;
    animation-delay:calc(var(--n) * 1.4s)}
  .abd-laeuft{animation:abd-strom 16s ease-out infinite}
}
@keyframes abd-raus{0%,54%{opacity:1}58%,100%{opacity:0}}
@keyframes abd-rein{0%,56%{opacity:0}60%,100%{opacity:1}}
@keyframes abd-strom{0%,4%{stroke-dashoffset:100}18%,100%{stroke-dashoffset:0}}

/* ── 5 · Diagnose ── */
.abd-strahl{stroke-width:2;stroke-linecap:round;opacity:0}
.abd-strahl--rot{stroke:var(--brand)}
.abd-strahl--gruen{stroke:var(--gruen)}
.abd-haken{fill:none;stroke:var(--paper);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;opacity:0}
@media(prefers-reduced-motion:no-preference){
  .abd-strahl--rot{animation:abd-scan1 16s linear infinite}
  .abd-strahl--gruen{animation:abd-scan2 16s linear infinite}
  .abd-haken{animation:abd-haken 16s steps(1) infinite}
}
@keyframes abd-scan1{
  0%,6%   {opacity:0;transform:translateY(0)}
  8%      {opacity:1}
  26%     {opacity:1;transform:translateY(88px)}
  28%,100%{opacity:0;transform:translateY(88px)}}
@keyframes abd-scan2{
  0%,56%  {opacity:0;transform:translateY(0)}
  58%     {opacity:1}
  78%     {opacity:1;transform:translateY(88px)}
  80%,100%{opacity:0;transform:translateY(88px)}}
@keyframes abd-haken{0%,62%{opacity:0}64%,100%{opacity:1}}

/* ── 6 · Netzplan ── */
.abd-leitung{stroke:var(--gruen);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:100}
@media(prefers-reduced-motion:no-preference){
  .abd-leitung{animation:abd-zieh 16s cubic-bezier(.3,.7,.4,1) infinite;
    animation-delay:calc(var(--n) * .45s)}
}
@keyframes abd-zieh{0%,54%{stroke-dashoffset:100}72%,100%{stroke-dashoffset:0}}

/* ── Ohne Bewegung: der Endzustand, denn der ist die Aussage. ── */
@media(prefers-reduced-motion:reduce){
  .abd-punkt{fill:var(--gruen)}
  .abd-eingriff{opacity:1}
  .abd-welle--schwach{opacity:0}
  .abd-welle--stark{opacity:1;transform:scale(1)}
  .abd-paket{opacity:0}
  .abd-probe{opacity:0}
  .abd-wand--loch{opacity:0}
  .abd-wand--zu{stroke-dashoffset:0}
  .abd-pfeil{opacity:0}
  .abd-einheit{opacity:0}
  .abd-ziel{opacity:1}
  .abd-laeuft{stroke-dashoffset:0}
  .abd-strahl{opacity:0}
  .abd-haken{opacity:1}
  .abd-leitung{stroke-dashoffset:0}
}