/* RONOS IT GmbH - Gestaltung nach Entwurf A (entwuerfe/public/entwurf-startseite-a.html).
   Unveraendert aus dem Entwurf uebernommen; Ergaenzungen fuer TYPO3 stehen in ronos-text.css. */
/* ---------------------------------------------------------------- Tokens */
:root{
  --accent:#8cbf4b;
  --accent-deep:#6fa332;
  --radius:18px;
  --maxw:1240px;
  --gutter:clamp(20px,5vw,48px);
  --sect:clamp(76px,9vw,150px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --font:"Inter","Segoe UI Variable","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --font-display:"Inter","Segoe UI Variable","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
}
:root,:root[data-theme="dark"]{
  --bg:#0c0e0b;
  --bg-2:#12150f;
  --card:rgba(255,255,255,.035);
  --card-hi:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);
  --fg:#edf0e9;
  --fg-strong:#fff;
  --muted:#99a092;
  --accent-soft:rgba(140,191,75,.14);
  --shadow:0 30px 70px -30px rgba(0,0,0,.85);
  --grid-line:rgba(255,255,255,.045);
}
:root[data-theme="light"]{
  --bg:#fbfbf8;
  --bg-2:#fff;
  --card:#fff;
  --card-hi:#fff;
  --line:rgba(20,24,17,.12);
  --line-soft:rgba(20,24,17,.07);
  --fg:#1a1d17;
  --fg-strong:#0d0f0a;
  --muted:#5f665a;
  --accent:#5f8f28;
  --accent-soft:rgba(140,191,75,.16);
  --shadow:0 30px 60px -32px rgba(26,32,18,.35);
  --grid-line:rgba(20,24,17,.05);
}

/* ------------------------------------------------------------------ Basis */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--font);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.025em;line-height:1.08;color:var(--fg-strong);margin:0}
p{margin:0}
::selection{background:var(--accent);color:#0c0e0b}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.sect{padding-block:var(--sect);position:relative}

/* Auszeichner über Überschriften */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:22px;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft)}
.h1{font-size:clamp(2.6rem,7.2vw,5.4rem);font-weight:600}
.h2{font-size:clamp(2rem,4.4vw,3.35rem)}
.h3{font-size:clamp(1.15rem,1.9vw,1.42rem)}
.lead{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--muted);max-width:60ch}
.thin{font-weight:300}
.accent{color:var(--accent)}

/* --------------------------------------------------------------- Buttons */
.btn{
  --bg-btn:var(--accent);
  position:relative;display:inline-flex;align-items:center;gap:11px;
  padding:15px 28px;border-radius:999px;border:1px solid transparent;
  font-size:15px;font-weight:600;letter-spacing:.005em;cursor:pointer;
  background:var(--bg-btn);color:#0b0d08;overflow:hidden;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .3s;
  will-change:transform;
}
.btn::after{
  content:"";position:absolute;inset:0;transform:translateX(-120%) skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transition:transform .75s var(--ease);
}
.btn:hover{box-shadow:0 14px 40px -12px rgba(140,191,75,.65)}
.btn:hover::after{transform:translateX(120%) skewX(-18deg)}
.btn svg{width:17px;height:17px;transition:transform .4s var(--ease)}
.btn-txt,.fab-txt{display:inline-block;white-space:nowrap}
.btn:hover svg{transform:translateX(4px)}
.btn--ghost{background:transparent;color:var(--fg);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--accent);box-shadow:none;background:var(--accent-soft)}
.btn--sm{padding:11px 20px;font-size:14px}

.textlink{
  display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;
  color:var(--fg-strong);padding-bottom:3px;position:relative;
}
.textlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--accent);transform:scaleX(.001);transform-origin:left;
  transition:transform .5s var(--ease)}
.textlink:hover::after{transform:scaleX(1)}
.textlink svg{width:15px;height:15px;transition:transform .4s var(--ease)}
.textlink:hover svg{transform:translateX(4px)}

/* ----------------------------------------------------------------- Logo */
.logo{height:30px;width:auto}
.logo .lg-dark{fill:currentColor}
.logo .lg-green{fill:var(--accent)}

/* --------------------------------------------------------------- Header */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .45s var(--ease),backdrop-filter .45s,border-color .45s,padding .45s var(--ease);
  border-bottom:1px solid transparent;padding-block:20px;color:var(--fg);
}
.site-header.scrolled{
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line-soft);padding-block:12px;
}
.hdr{display:flex;align-items:center;gap:clamp(16px,3vw,44px)}
.nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px);margin-left:auto}
.nav a{font-size:15px;color:var(--muted);position:relative;padding-block:6px;white-space:nowrap;transition:color .3s}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav a:hover{color:var(--fg-strong)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.hdr-actions{display:flex;align-items:center;gap:12px;margin-left:clamp(8px,1.5vw,20px)}
.hdr-tel{font-size:14px;color:var(--muted);white-space:nowrap;transition:color .3s}
.hdr-tel:hover{color:var(--accent)}
.iconbtn{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;
  color:var(--fg);display:grid;place-items:center;cursor:pointer;transition:all .35s var(--ease)
}
.iconbtn:hover{border-color:var(--accent);color:var(--accent);transform:rotate(18deg)}
.iconbtn svg{width:17px;height:17px}
.burger{display:none}
@media(max-width:1000px){
  .nav,.hdr-tel{display:none}
  .burger{display:grid}
}

/* Mobilmenü */
.mobile{
  position:fixed;inset:0;z-index:110;background:var(--bg);
  display:grid;place-content:center;gap:6px;text-align:center;
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
}
.mobile.open{opacity:1;visibility:visible}
.mobile a{font-size:clamp(1.6rem,7vw,2.4rem);font-weight:600;letter-spacing:-.03em;
  padding:8px 0;opacity:0;transform:translateY(16px);transition:all .6s var(--ease)}
.mobile.open a{opacity:1;transform:none}
.mobile-close{position:absolute;top:22px;right:var(--gutter)}

/* ------------------------------------------------------------------ Hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  padding-top:140px;padding-bottom:70px;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform}
.blob--1{width:52vw;height:52vw;left:-12vw;top:-16vw;
  background:radial-gradient(circle at 40% 40%,rgba(140,191,75,.55),transparent 66%);
  animation:drift1 22s ease-in-out infinite alternate}
.blob--2{width:44vw;height:44vw;right:-10vw;bottom:-18vw;
  background:radial-gradient(circle at 60% 50%,rgba(90,150,110,.38),transparent 68%);
  animation:drift2 27s ease-in-out infinite alternate}
:root[data-theme="light"] .blob{opacity:.42}
@keyframes drift1{to{transform:translate3d(6vw,5vw,0) scale(1.12)}}
@keyframes drift2{to{transform:translate3d(-5vw,-4vw,0) scale(1.08)}}
.hero-grid{
  position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:radial-gradient(ellipse 80% 65% at 50% 42%,#000 20%,transparent 78%);
  mask-image:radial-gradient(ellipse 80% 65% at 50% 42%,#000 20%,transparent 78%);
}
.hero-inner{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(34px,5vw,74px);align-items:center;width:100%}
@media(max-width:980px){.hero-inner{grid-template-columns:1fr}}

.claim{font-size:clamp(3rem,8.4vw,6.4rem);font-weight:600;letter-spacing:-.04em;line-height:.98}
.claim .w{display:inline-block;overflow:hidden;vertical-align:bottom;
  /* Die Maske fuer den Einlauf schnitt sonst Unterlaengen ab (das g in "change").
     Innenabstand macht den Ausschnitt groesser, der negative Aussenabstand
     nimmt ihn fuers Layout wieder zurueck - die Zeile sitzt also unveraendert. */
  padding:.1em 0 .2em;margin:-.1em 0 -.2em}
.claim .w>span{display:inline-block;transform:translateY(105%);
  animation:riseIn .95s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes riseIn{to{transform:none}}
.hero-sub{margin-top:26px;max-width:52ch;font-size:clamp(1.02rem,1.5vw,1.18rem);color:var(--muted);
  opacity:0;animation:fadeUp .9s var(--ease) .75s forwards}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px;
  opacity:0;animation:fadeUp .9s var(--ease) .92s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Netz-Visual statt Foto */
.visual{position:relative;opacity:0;animation:fadeUp 1.1s var(--ease) .6s forwards}
/* Die Karte ist hell - damit sie im dunklen Hero nicht aufgeklebt wirkt,
   sitzt sie in einem Rahmen mit Abdunkelung zu den Raendern hin. */
.visual-frame{position:relative;aspect-ratio:600/437;border-radius:20px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
  box-shadow:0 34px 70px -34px rgba(0,0,0,.9)}
.visual-frame img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.04) contrast(1.03) brightness(.94)}
.visual-vig{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 78% 74% at 50% 46%,transparent 40%,rgba(6,9,4,.62) 100%)}

/* Einsaetze auf der Karte - Ablauf aus Entwurf C (entwuerfe/bau/bau-c.py,
   "Einsatzkarte"): an acht Leuchtpunkten des Bildes laeuft nacheinander
   derselbe Vorgang - eine Stoerung meldet sich, die Bildmarke rueckt an
   (mit umlaufendem Ring, wie ein Vorgang, der bearbeitet wird), dann steht
   der Haken. Die Punkte sind im Bild per Canvas gemessen. Alles ueber CSS
   mit versetztem Start (--start); der Ring laeuft, nichts wackelt. */
.visual-mk{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  overflow:visible;filter:drop-shadow(0 2px 7px rgba(0,0,0,.5))}
.dk-fall>*{opacity:0;transform-box:fill-box;transform-origin:center}
/* Stoerung */
.dk-stoer-halo{fill:rgba(255,138,76,.28)}
.dk-stoer-zeichen{fill:#ff9a3c;stroke:#2a1a0a;stroke-width:1;stroke-linejoin:round}
.dk-stoer-ruf{stroke:#2a1a0a;stroke-width:1.7;stroke-linecap:round}
.dk-stoer-punkt{fill:#2a1a0a}
/* Einsatz */
.dk-scheibe{fill:#f6ffe8}
.dk-bahn{fill:none;stroke:rgba(246,255,232,.32);stroke-width:2.6}
/* transform-box:fill-box ist hier Pflicht: ohne das bezieht sich
   transform-origin:center auf die Mitte der Karte, und der Ring dreht sich
   quer ueber das Bild statt um sich selbst. */
.dk-lauf{fill:none;stroke:#8cbf4b;stroke-width:3.2;stroke-linecap:round;
  stroke-dasharray:26 118;transform-box:fill-box;transform-origin:center;
  transform:rotate(-90deg)}
.dk-voll{fill:none;stroke:#8cbf4b;stroke-width:3.2}
.dk-r .lg-dark{fill:#2b2725}
.dk-r .lg-green{fill:#74a334}
.dk-haken{fill:none;stroke:#5d8727;stroke-width:3.4;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:22;stroke-dashoffset:22}

/* Ein Zyklus = alle acht Einsaetze (16 s). Prozentwerte beziehen sich auf
   den ganzen Zyklus, nicht auf den einzelnen Fall. */
.dk-stoer    {animation:dkStoer var(--zyklus) linear var(--start) infinite}
.dk-plakette {animation:dkPlak  var(--zyklus) linear var(--start) infinite}
.dk-lauf     {animation:dkLauf  var(--zyklus) linear var(--start) infinite}
.dk-voll     {animation:dkVoll  var(--zyklus) linear var(--start) infinite}
.dk-r        {animation:dkR     var(--zyklus) linear var(--start) infinite}
.dk-haken    {animation:dkHaken var(--zyklus) linear var(--start) infinite}

@keyframes dkStoer{
  0%  {opacity:0;transform:scale(.4)}
  2%  {opacity:1;transform:scale(1.08)}
  3%  {transform:scale(1)}
  4.5%{transform:scale(1.12)}
  6%  {transform:scale(1)}
  7.5%{transform:scale(1.12)}
  9%  {opacity:1;transform:scale(1)}
  11% {opacity:0;transform:scale(.85)}
  100%{opacity:0;transform:scale(.4)}
}
@keyframes dkPlak{
  0%,9.5%{opacity:0;transform:scale(.45)}
  12%    {opacity:1;transform:scale(1.06)}
  13.5%  {transform:scale(1)}
  26%    {opacity:1;transform:scale(1)}
  29%    {opacity:0;transform:scale(.9)}
  100%   {opacity:0;transform:scale(.45)}
}
@keyframes dkLauf{
  0%,11%{opacity:0;transform:rotate(-90deg)}
  13%   {opacity:1}
  20%   {opacity:1;transform:rotate(630deg)}
  21%   {opacity:0;transform:rotate(630deg)}
  100%  {opacity:0;transform:rotate(-90deg)}
}
@keyframes dkVoll{
  0%,20%{opacity:0}
  21.5% {opacity:1}
  26%   {opacity:1}
  29%   {opacity:0}
  100%  {opacity:0}
}
@keyframes dkR{
  0%,11%{opacity:0}
  13%   {opacity:1}
  20%   {opacity:1}
  21.5% {opacity:0}
  100%  {opacity:0}
}
@keyframes dkHaken{
  0%,20.5%{opacity:0;stroke-dashoffset:22}
  22%     {opacity:1}
  24%     {opacity:1;stroke-dashoffset:0}
  26%     {opacity:1;stroke-dashoffset:0}
  29%     {opacity:0;stroke-dashoffset:0}
  100%    {opacity:0;stroke-dashoffset:22}
}
.visual-scan{position:absolute;inset:0;pointer-events:none;opacity:.14;
  background-image:linear-gradient(rgba(140,191,75,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(140,191,75,.5) 1px,transparent 1px);
  background-size:26px 26px}

.float-card{
  position:absolute;background:var(--bg-2);border:1px solid var(--line);
  border-radius:16px;padding:16px 20px;box-shadow:var(--shadow);backdrop-filter:blur(8px);
  animation:bob 7s ease-in-out infinite alternate;
}
.float-card small{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.float-card b{font-size:1.28rem;font-weight:600;letter-spacing:-.02em;color:var(--fg-strong)}
.fc-1{left:-9%;bottom:-8%}
.fc-2{right:-7%;top:-9%;animation-delay:-3.5s}
@keyframes bob{to{transform:translateY(-14px)}}
@media(max-width:980px){.visual{max-width:520px;margin-inline:auto}
  .fc-1{left:0;bottom:-6%}.fc-2{right:0;top:-6%}}

/* Kennzahlenband */
.kpis{border-top:1px solid var(--line-soft);margin-top:clamp(40px,6vw,78px);padding-top:32px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  opacity:0;animation:fadeUp .9s var(--ease) 1.1s forwards}
.kpi b{display:block;font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:600;letter-spacing:-.035em;
  color:var(--fg-strong);font-variant-numeric:tabular-nums;white-space:nowrap}
/* Zaehlwerk: die Stellen rattern und rasten von links nach rechts ein */
.ro-run{color:var(--accent)}
.ro-lock{animation:roLock .55s var(--ease)}
@keyframes roLock{
  0%  {color:var(--accent);text-shadow:0 0 16px color-mix(in srgb,var(--accent) 80%,transparent)}
  100%{color:inherit;text-shadow:none}
}
.kpi > span{font-size:13.5px;color:var(--muted)}
/* die Ziffern-Spans des Zaehlwerks erben Groesse und Farbe von <b> */
.kpi b span,.badge-score b span{font-size:inherit;font-weight:inherit;letter-spacing:inherit}
@media(max-width:760px){.kpis{grid-template-columns:repeat(2,1fr);gap:28px 18px}}

/* -------------------------------------------------------------- Statusband */
.statusbar{border-block:1px solid var(--line-soft);background:var(--bg-2);font-size:13px}
.statusbar-in{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-block:13px;color:var(--muted)}
.st-item{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;letter-spacing:.03em}
.st-item b{color:var(--fg-strong);font-weight:600}
.st-sep{width:1px;height:13px;background:var(--line)}
.st-right{margin-left:auto;display:inline-flex;align-items:center;gap:16px}
.st-clock{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.09em}
.led{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 0 var(--accent-soft);animation:blip 2.4s ease-out infinite}
kbd{font-family:var(--mono);font-size:11.5px;padding:3px 7px;border-radius:6px;
  border:1px solid var(--line);background:var(--card);color:var(--muted);line-height:1}
.kbd-hint{display:inline-flex;align-items:center;gap:7px;cursor:pointer;background:none;border:0;
  color:var(--muted);font:inherit;font-size:13px;transition:color .3s}
.kbd-hint:hover{color:var(--accent)}
@media(max-width:700px){.st-right{display:none}}

/* --------------------------------------------------------------- Terminal */
.term{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#090b07;
  box-shadow:var(--shadow);position:relative}
.term::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(transparent 0 2px,rgba(0,0,0,.35) 2px 3px)}
.term-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035)}
.term-bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.16);display:block}
.term-bar i:first-child{background:var(--accent)}
.term-bar em{margin-left:10px;font-style:normal;font-family:var(--mono);font-size:11.5px;
  color:rgba(222,230,212,.42);letter-spacing:.05em}
.term-body{margin:0;padding:22px 20px 26px;min-height:326px;font-family:var(--mono);
  font-size:13px;line-height:1.95;color:#c9d2bd;white-space:pre-wrap;word-break:break-word}
.t-cmd{color:#e8efdd}.t-cmd b{color:var(--accent);font-weight:400}
.t-ok{color:#9ccf57}.t-warn{color:#e0a84f}.t-dim{color:rgba(201,210,189,.45)}
.t-cursor{display:inline-block;width:7px;height:14px;background:var(--accent);
  vertical-align:-2px;animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* --------------------------------------------------------- Scroll-Reveal */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}

/* ------------------------------------------------------------ Leistungen */
.sect-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:30px;align-items:end;margin-bottom:clamp(38px,5vw,64px)}
@media(max-width:860px){.sect-head{grid-template-columns:1fr}}

.komp{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(22px,4vw,64px);align-items:start}
@media(max-width:900px){.komp{grid-template-columns:1fr;gap:30px}}

.komp-list{display:flex;flex-direction:column;border-top:1px solid var(--line-soft)}
.komp-tab{
  position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
  width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line-soft);
  padding:20px 4px;cursor:pointer;color:var(--muted);font:inherit;text-decoration:none;
  transition:color .4s var(--ease),padding-left .55s var(--ease);
}
.komp-tab::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .65s var(--ease)}
.komp-tab:hover{color:var(--fg);padding-left:14px}
.komp-tab.is-on{color:var(--fg-strong);padding-left:14px}
.komp-tab.is-on::before{transform:scaleX(1)}
.komp-idx{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--accent);opacity:.8}
.komp-name{font-size:clamp(1.08rem,2.1vw,1.5rem);font-weight:600;letter-spacing:-.025em;line-height:1.22}
.komp-arrow{width:19px;height:19px;color:var(--accent);opacity:0;transform:translateX(-7px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.komp-tab.is-on .komp-arrow,.komp-tab:hover .komp-arrow{opacity:1;transform:none}

.komp-panels{position:relative;display:grid;border:1px solid var(--line-soft);
  border-radius:var(--radius);background:var(--card);padding:clamp(26px,3.4vw,44px);
  overflow:hidden;isolation:isolate}
.komp-panels::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(480px circle at var(--mx,72%) var(--my,8%),var(--accent-soft),transparent 64%)}
.komp-panel{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),visibility .6s}
.komp-panel.is-on{opacity:1;visibility:visible;transform:none}
.komp-kicker{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.komp-panel h3{font-size:clamp(1.35rem,2.5vw,1.9rem);margin-bottom:14px}
.komp-panel p{color:var(--muted);font-size:15.5px;max-width:56ch}
.komp-facts{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--line-soft)}
.komp-facts li{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:12px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px;color:var(--muted)}
.komp-facts b{color:var(--fg-strong);font-weight:600;font-family:var(--mono);
  font-size:13px;letter-spacing:.03em;text-align:right}
.komp-panel .textlink{margin-top:28px}
.komp-hint{display:flex;align-items:center;gap:10px;margin-top:22px;padding-left:4px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.komp-hint i{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 0 var(--accent-soft);animation:blip 2.4s ease-out infinite}
@media(max-width:900px){.komp-hint{display:none}}

/* ---------------------------------------------------------------- Beweis */
.proof{background:var(--bg-2);border-block:1px solid var(--line-soft)}
.proof-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(34px,6vw,86px);align-items:center}
@media(max-width:920px){.proof-grid{grid-template-columns:1fr}}
.badge-card{
  position:relative;border:1px solid var(--line);border-radius:22px;
  padding:clamp(26px,3vw,36px);background:var(--card);
  box-shadow:var(--shadow);overflow:hidden;isolation:isolate
}
.badge-card::after{content:"";position:absolute;width:300px;height:300px;right:-100px;top:-100px;
  border-radius:50%;z-index:-1;
  background:radial-gradient(circle,var(--accent-soft),transparent 70%)}

/* Das Foto steht auf der Unterkante der Karte und laeuft dort weich aus.
   Die Plakette bleibt in voller Farbe - das Gold ist hier das Argument. */
/* Punktzahl und Foto stehen nebeneinander auf einer Grundlinie, damit die
   Karte unten nicht halb leer bleibt. */
.badge-foot{display:grid;grid-template-columns:minmax(0,1fr) clamp(165px,46%,235px);
  align-items:end;gap:16px;margin-top:26px}
.badge-photo{width:100%;margin:0 -12px calc(clamp(26px,3vw,36px) * -1) 0}
@media(max-width:520px){
  .badge-foot{grid-template-columns:1fr}
  .badge-photo{justify-self:end;width:min(240px,70%)}
}
.badge-photo img{width:100%;height:auto;display:block;
  filter:contrast(1.04) drop-shadow(0 24px 36px rgba(0,0,0,.5));
  -webkit-mask-image:linear-gradient(to bottom,#000 86%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 86%,transparent 100%)}
.badge-score{align-self:end;margin-bottom:clamp(14px,3vw,26px);white-space:nowrap;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.badge-score b{display:block;font-family:var(--font);font-size:clamp(4rem,9vw,6.2rem);
  font-weight:700;letter-spacing:-.05em;color:var(--accent);line-height:.88;margin-bottom:12px;
  font-variant-numeric:tabular-nums;
  /* ruhiges Atmen statt Blinken - nur ein weicher Schein, der auf- und abschwillt */
  animation:scoreGlow 6s ease-in-out infinite}
@keyframes scoreGlow{
  0%,100%{text-shadow:0 0 20px color-mix(in srgb,var(--accent) 14%,transparent)}
  50%    {text-shadow:0 0 46px color-mix(in srgb,var(--accent) 42%,transparent)}
}
.checklist{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:13px}
.checklist li{display:flex;gap:13px;align-items:flex-start;font-size:15.5px;color:var(--muted)}
.checklist svg{width:19px;height:19px;flex:none;margin-top:3px;color:var(--accent)}
.checklist b{color:var(--fg-strong);font-weight:600}

/* -------------------------------------------------------------- Projekte */
.timeline{position:relative;margin-top:clamp(34px,5vw,60px);padding-left:0}
.tl-rail{position:absolute;left:0;top:8px;bottom:8px;width:1px;background:var(--line-soft)}
.tl-rail::after{content:"";position:absolute;inset:0;background:var(--accent);
  transform:scaleY(var(--p,0));transform-origin:top;transition:transform .12s linear}
.tl-item{position:relative;padding:30px 0 30px 40px;border-bottom:1px solid var(--line-soft);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:center;
  transition:padding-left .5s var(--ease)}
.tl-item:hover{padding-left:52px}
.tl-item::before{content:"";position:absolute;left:-4.5px;top:calc(50% - 4.5px);width:9px;height:9px;border-radius:50%;
  background:var(--bg-2);border:1.5px solid var(--line);transition:all .45s var(--ease)}
.tl-item.lit::before{background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 0 5px var(--accent-soft)}
.tl-item:hover::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 8px var(--accent-soft)}
.tl-dur b{transition:color .5s var(--ease)}
.tl-item.lit .tl-dur b{color:var(--accent)}
.tl-item h3{margin-bottom:6px}
.tl-item p{color:var(--muted);font-size:15px;max-width:62ch}
.tl-dur{text-align:right;white-space:nowrap}
.tl-dur b{display:block;font-size:clamp(1.3rem,2.4vw,1.9rem);font-weight:600;letter-spacing:-.03em;color:var(--fg-strong)}
.tl-dur span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media(max-width:700px){.tl-item{grid-template-columns:1fr}.tl-dur{text-align:left}}

/* ------------------------------------------------------------------ Team */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,74px);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}}
/* Foto der aktuellen Website, auf die Bildsprache der Seite gebracht:
   entsaettigt, gruen eingefaerbt, mit einer Leiterbahn, die am Scrollen haengt. */
.photo{position:relative;margin:0;aspect-ratio:600/337;border-radius:var(--radius);
  overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);isolation:isolate}
.photo img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.04) brightness(1.02)}
/* "color" nimmt Farbton und Saettigung von oben, die Helligkeit vom Bild -
   das faerbt ein, ohne abzudunkeln. */
.photo-tone{position:absolute;inset:0;mix-blend-mode:color;opacity:.46;
  background:linear-gradient(135deg,#9ccb5c 0%,#6f9633 58%,#4f7327 100%)}
.photo-veil{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,10,6,.74) 0%,rgba(8,10,6,.12) 32%,transparent 58%)}
.photo-scan{position:absolute;inset:0;opacity:.16;pointer-events:none;
  background:repeating-linear-gradient(transparent 0 2px,rgba(0,0,0,.4) 2px 3px)}
.photo-circuit{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pc-base{fill:none;stroke:rgba(236,240,230,.42);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pc-live{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 70%,transparent))}
.pc-pad{fill:rgba(10,13,7,.8);stroke:rgba(236,240,230,.5);stroke-width:2;
  transition:fill .45s var(--ease),stroke .45s var(--ease),r .45s var(--ease)}
.pc-pad.lit{fill:var(--accent);stroke:var(--accent);r:6.5}
.pc-core{fill:var(--accent);filter:drop-shadow(0 0 7px var(--accent));opacity:0;transition:opacity .4s}
.photo.live .pc-core{opacity:1}
.photo figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:10px;padding:18px 20px;font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(236,240,230,.72)}
.photo figcaption b{color:var(--accent);font-weight:400}
.photo figcaption .sep{width:14px;height:1px;background:var(--accent)}
.photo-note{margin-top:14px;display:flex;gap:9px;align-items:flex-start;
  font-size:13px;color:var(--muted)}
.photo-note svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--accent)}
/* --------------------------------------------------------- Ansprechpartner */
.team-row{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;margin-top:30px}
@media(max-width:1100px){.team-row{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){.team-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:460px){.team-row{grid-template-columns:repeat(2,1fr)}}

.mate{margin:0}
.mate-img{position:relative;display:block;aspect-ratio:1/1;border-radius:14px;overflow:hidden;
  border:1px solid var(--line-soft);
  background:linear-gradient(165deg,color-mix(in srgb,var(--accent) 16%,transparent),var(--bg-2) 72%);
  transition:border-color .45s var(--ease),transform .55s var(--ease),box-shadow .55s var(--ease)}
.mate-img img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block;
  transition:transform .7s var(--ease)}
.mate-img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:5;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease)}

/* Die Tonung liegt als Schicht ueber dem Bild und filtert, was hinter ihr liegt.
   Dadurch laesst sie sich wegwischen - und darunter kommt das Bild in voller
   Farbe zum Vorschein. Ein Filter direkt auf dem Bild koennte das nicht. */
.mate-tone{position:absolute;inset:0;z-index:2;
  -webkit-backdrop-filter:grayscale(1) sepia(.4) hue-rotate(46deg) saturate(1.08) brightness(1.14) contrast(1.04);
  backdrop-filter:grayscale(1) sepia(.4) hue-rotate(46deg) saturate(1.08) brightness(1.14) contrast(1.04);
  clip-path:inset(0 0 0 0);transition:clip-path .75s var(--ease)}
.mate:hover .mate-tone{clip-path:inset(100% 0 0 0)}

/* Messraster */
.mate-grid{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  transition:opacity .45s var(--ease);
  background-image:linear-gradient(rgba(140,191,75,.20) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(140,191,75,.20) 1px,transparent 1px);
  background-size:17px 17px}
.mate:hover .mate-grid{opacity:1}

/* Der Scanstrahl laeuft der Wischkante voraus */
.mate-scan{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  background:linear-gradient(to bottom,var(--accent) 0 2px,
             color-mix(in srgb,var(--accent) 22%,transparent) 2px 26px,transparent 26px);
  box-shadow:0 0 18px 2px color-mix(in srgb,var(--accent) 45%,transparent);
  transform:translateY(-10px);
  transition:transform .75s var(--ease),opacity .25s var(--ease) .1s}
.mate:hover .mate-scan{opacity:1;transform:translateY(100%);transition-delay:0s,0s}

/* Eckwinkel wie bei einem Zielrahmen */
.mate-corner{position:absolute;inset:0;z-index:4;pointer-events:none}
.mate-corner::before,.mate-corner::after{content:"";position:absolute;width:17px;height:17px;
  border:2px solid var(--accent);opacity:0;
  transition:opacity .4s var(--ease),transform .5s var(--ease)}
.mate-corner::before{top:9px;left:9px;border-right:0;border-bottom:0;transform:translate(-7px,-7px)}
.mate-corner::after{bottom:9px;right:9px;border-left:0;border-top:0;transform:translate(7px,7px)}
.mate:hover .mate-corner::before,.mate:hover .mate-corner::after{opacity:1;transform:none}

.mate:hover .mate-img{border-color:color-mix(in srgb,var(--accent) 60%,transparent);
  transform:translateY(-6px);box-shadow:var(--shadow)}
.mate:hover .mate-img::after{transform:scaleX(1)}
/* Kurzes Flackern der Farbkanaele beim Anfassen - ohne Versatz, das Bild
   bleibt an seinem Platz und zoomt nur ruhig heran. */
.mate:hover .mate-img img{transform:scale(1.04);animation:glitch .34s steps(3,end)}
@keyframes glitch{
  0%  {filter:hue-rotate(70deg) saturate(2.4) contrast(1.5)}
  25% {filter:hue-rotate(-60deg) saturate(2.2)}
  50% {filter:invert(.12) saturate(1.6)}
  75% {filter:none}
  100%{filter:none}
}

/* Kann der Browser keine Hintergrundfilter, faerbt das Bild wie bisher direkt ein. */
@supports not ((backdrop-filter:grayscale(1)) or (-webkit-backdrop-filter:grayscale(1))){
  .mate-img img{filter:grayscale(1) sepia(.4) hue-rotate(46deg) saturate(1.08) brightness(1.14);
    transition:filter .55s var(--ease),transform .7s var(--ease)}
  .mate:hover .mate-img img{filter:none;animation:none}
}
@media(prefers-reduced-motion:reduce){
  .mate:hover .mate-img img{animation:none}
}
.mate figcaption{padding:14px 2px 0}
.mate figcaption b{display:block;font-size:14.5px;font-weight:600;color:var(--fg-strong);
  letter-spacing:-.01em;line-height:1.3;
  /* zwei Zeilen reservieren, damit die Funktionsangaben in einer Linie stehen */
  min-height:2.6em}
.mate figcaption span{display:block;margin-top:3px;font-size:12.5px;color:var(--muted);line-height:1.4}

/* ---------------------------------------------------------- Rezensionen */
.quotes{position:relative;background:var(--bg-2);border-block:1px solid var(--line-soft)}
.q-stage{position:relative;min-height:290px}
.q-item{position:absolute;inset:0;opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.q-item.on{opacity:1;transform:none;pointer-events:auto;position:relative}
.q-item blockquote{margin:0;font-size:clamp(1.25rem,2.5vw,1.85rem);font-weight:300;line-height:1.42;
  letter-spacing:-.02em;color:var(--fg-strong);max-width:52ch}
.q-meta{margin-top:26px;display:flex;align-items:center;gap:13px;color:var(--muted);font-size:14px}
.q-meta .dotline{width:34px;height:1px;background:var(--accent)}
.q-mark{font-size:clamp(5rem,11vw,9rem);line-height:.7;color:var(--accent);opacity:.2;font-weight:600;
  margin-bottom:-6px;user-select:none}
.q-nav{display:flex;align-items:center;gap:10px;margin-top:34px}
.q-dots{display:flex;gap:7px;margin-left:8px}
.q-dot{width:7px;height:7px;border-radius:50%;border:none;padding:0;background:var(--line);cursor:pointer;
  transition:all .4s var(--ease)}
.q-dot.on{background:var(--accent);width:26px;border-radius:4px}
.stars{display:flex;gap:3px;color:var(--accent);margin-bottom:18px}
.stars svg{width:16px;height:16px}

/* -------------------------------------------------------------- CTA-Band */
.cta-band{position:relative;overflow:hidden;border-radius:26px;padding:clamp(40px,6vw,78px);
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 88%,#000),var(--accent-deep));
  color:#0b0d08;isolation:isolate}
.cta-band::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.28;
  background-image:linear-gradient(rgba(0,0,0,.25) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(0,0,0,.25) 1px,transparent 1px);
  background-size:52px 52px}
.cta-band h2{color:#0b0d08;max-width:18ch}
.cta-band p{color:rgba(11,13,8,.72);margin-top:16px;max-width:48ch}
.cta-band .btn{background:#0b0d08;color:#fff}
.cta-band .btn:hover{box-shadow:0 14px 40px -12px rgba(0,0,0,.5)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;align-items:center}
.cta-tel{font-size:clamp(1.1rem,2.2vw,1.5rem);font-weight:600;letter-spacing:-.02em;color:#0b0d08}

/* ---------------------------------------------------------------- Footer */
.site-footer{border-top:1px solid var(--line-soft);padding-top:clamp(50px,6vw,80px);padding-bottom:34px}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
@media(max-width:860px){.f-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.f-grid{grid-template-columns:1fr}}
.f-grid h4{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  font-weight:600;margin-bottom:16px}
.f-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.f-grid a{font-size:15px;color:var(--muted);transition:color .3s}
.f-grid a:hover{color:var(--accent)}
.f-bottom{margin-top:clamp(40px,5vw,66px);padding-top:24px;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:13.5px;color:var(--muted)}

/* Pulsierender Punkt - Statusband und Kompetenzhinweis nutzen ihn */
@keyframes blip{70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ------------------------------------------------------------ Logo-Intro */
html.booting{overflow:hidden}
html.booting .claim .w>span,html.booting .hero-sub,html.booting .hero-cta,
html.booting .kpis,html.booting .visual{animation-play-state:paused}
.intro{position:fixed;inset:0;z-index:200;background:var(--bg);overflow:hidden;
  display:grid;place-content:center;justify-items:center;gap:34px;
  transition:opacity .8s var(--ease),visibility .8s}
.intro.done{opacity:0;visibility:hidden}
.intro::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 52% at 50% 46%,var(--accent-soft),transparent 72%);
  opacity:0;animation:glowIn 1.8s var(--ease) .25s forwards}
@keyframes glowIn{to{opacity:1}}
.intro > *{position:relative;z-index:1}

.intro-stage{position:relative;display:grid;place-items:center}
/* Der Kniff: scale() + translateX(38.2%) haelt die Logomarke exakt in der Mitte,
   egal wie stark gezoomt wird. Die Marke kommt gross herein und faehrt zurueck. */
.intro-svg{height:clamp(50px,9.5vw,92px);width:auto;position:relative;z-index:2;
  animation:introZoom 1.55s var(--ease) .1s both}
@keyframes introZoom{
  0%  {opacity:0;transform:scale(3.1) translateX(38.2%) rotate(-9deg)}
  16% {opacity:1;transform:scale(2.7) translateX(38.2%) rotate(0deg)}
  40% {opacity:1;transform:scale(2.7) translateX(38.2%) rotate(0deg)}
  100%{opacity:1;transform:scale(1) translateX(0) rotate(0deg)}
}
.intro-svg .mk-green{transform-box:fill-box;transform-origin:14% 86%;
  animation:swoosh .9s var(--ease) .18s both}
@keyframes swoosh{
  0%{opacity:0;transform:rotate(-26deg) scale(.86)}
  60%{opacity:1;transform:rotate(4deg) scale(1.02)}
  100%{opacity:1;transform:none}
}
.intro-svg .ltr{opacity:0;transform-box:fill-box;animation:letterIn .5s var(--ease) forwards}
@keyframes letterIn{from{opacity:0;transform:translateY(13px) scaleY(.82)}to{opacity:1;transform:none}}
.intro-svg .g-it{opacity:0;transform-box:fill-box;transform-origin:left center;
  animation:itPop .55s var(--ease) 1.5s forwards}
@keyframes itPop{0%{opacity:0;transform:translateX(-14px) scale(.7)}
  65%{opacity:1;transform:translateX(0) scale(1.09)}100%{opacity:1;transform:none}}

/* Ringe, die von der Marke weglaufen */
.intro-ring{position:absolute;width:120px;height:120px;border-radius:50%;
  border:1px solid var(--accent);opacity:0;animation:ringOut 1.5s var(--ease) .25s forwards}
.intro-ring--2{animation-delay:.6s}
@keyframes ringOut{0%{opacity:.75;transform:scale(.25)}100%{opacity:0;transform:scale(3.4)}}


/* Leiterbahn unter dem Logo statt Ladebalken */
.intro-trace{width:clamp(200px,26vw,290px);height:auto;overflow:visible;
  opacity:0;animation:fadeUp .6s var(--ease) 1.55s forwards}
.intro-trace .it-base{fill:none;stroke:var(--line);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.intro-trace .it-live{fill:none;stroke:var(--accent);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:320;stroke-dashoffset:320;
  animation:traceDraw 1.15s var(--ease) 1.7s forwards}
@keyframes traceDraw{to{stroke-dashoffset:0}}
.intro-trace .it-pad{fill:var(--bg);stroke:var(--line);stroke-width:1.4;
  animation:padOn .4s var(--ease) forwards}
@keyframes padOn{to{fill:var(--accent);stroke:var(--accent)}}
.intro-claim{font-family:var(--mono);font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--muted);opacity:0;animation:fadeUp .7s var(--ease) 2.35s forwards}
.intro-skip{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  background:none;border:0;color:var(--muted);font:inherit;font-size:12.5px;
  letter-spacing:.1em;cursor:pointer;opacity:0;animation:fadeUp .6s var(--ease) 1.1s forwards;
  transition:color .3s;z-index:2}
.intro-skip:hover{color:var(--accent)}

/* ------------------------------------------------ Leiterbahn am Seitenrand */
.circuit{position:fixed;left:14px;top:0;bottom:0;z-index:90;pointer-events:none;
  opacity:0;transition:opacity .8s var(--ease) .3s}
.circuit.ready{opacity:1}
.circuit-svg{height:100vh;height:100svh;width:auto;overflow:visible;pointer-events:auto;display:block}
.c-base{fill:none;stroke:color-mix(in srgb,var(--fg) 26%,transparent);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.c-stub{fill:none;stroke:color-mix(in srgb,var(--fg) 20%,transparent);stroke-width:1.8;stroke-linecap:round}
.c-tap{fill:color-mix(in srgb,var(--fg) 26%,transparent)}
.c-live{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 60%,transparent))}
.c-pad{cursor:pointer}
.c-pad .pad{fill:var(--bg);stroke:color-mix(in srgb,var(--fg) 34%,transparent);stroke-width:2;
  transition:fill .45s var(--ease),stroke .45s var(--ease),r .45s var(--ease)}
.c-pad .hit{fill:transparent}
.c-pad.done .pad{fill:color-mix(in srgb,var(--accent) 24%,transparent);stroke:var(--accent)}
.c-pad.is-on .pad{fill:var(--accent);stroke:var(--accent);r:6}
.c-pad:hover .pad{stroke:var(--accent)}
.c-halo{fill:var(--accent);opacity:.2;animation:halo 2.6s ease-out infinite}
@keyframes halo{0%{opacity:.34;transform:scale(.72)}70%{opacity:0;transform:scale(1.9)}100%{opacity:0}}
.c-core{fill:var(--accent);filter:drop-shadow(0 0 6px var(--accent))}
.circuit-label{position:fixed;left:0;top:0;writing-mode:vertical-rl;transform:rotate(180deg) translateY(50%);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;pointer-events:none;
  transition:translate .25s var(--ease),color .4s}
@media(max-width:1280px){.circuit,.circuit-label{display:none}}

/* ----------------------------------------------------- Befehlspalette (⌘K) */
/* ----------------------------------------------------- Befehlspalette (⌘K) */
.cmdk{position:fixed;inset:0;z-index:150;display:grid;justify-items:center;
  align-content:start;padding-top:min(16vh,140px);background:rgba(0,0,0,.55);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
.cmdk.open{opacity:1;visibility:visible}
.cmdk-box{width:min(600px,92vw);background:var(--bg-2);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow);overflow:hidden;
  transform:translateY(-12px) scale(.985);transition:transform .35s var(--ease)}
.cmdk.open .cmdk-box{transform:none}
.cmdk-in{display:flex;align-items:center;gap:12px;padding:16px 18px;
  border-bottom:1px solid var(--line-soft)}
.cmdk-in svg{width:18px;height:18px;color:var(--accent);flex:none}
.cmdk-in input{flex:1;background:none;border:0;outline:0;color:var(--fg-strong);
  font:inherit;font-size:16px}
.cmdk-in input::placeholder{color:var(--muted)}
.cmdk-list{list-style:none;margin:0;padding:8px;max-height:min(46vh,340px);overflow-y:auto}
.cmdk-list li{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:10px;
  cursor:pointer;font-size:15px;color:var(--muted);transition:background .2s,color .2s}
.cmdk-list li.sel{background:var(--accent-soft);color:var(--fg-strong)}
.cmdk-list li .ck-t{color:var(--fg-strong);font-weight:500}
.cmdk-list li .ck-s{margin-left:auto;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);opacity:.7}
.cmdk-list li svg{width:16px;height:16px;color:var(--accent);flex:none}
.cmdk-empty{padding:26px 12px;text-align:center;color:var(--muted);font-size:14.5px}
.cmdk-foot{display:flex;gap:16px;flex-wrap:wrap;padding:12px 18px;font-size:12px;
  color:var(--muted);border-top:1px solid var(--line-soft);font-family:var(--mono);letter-spacing:.04em}

/* ------------------------------------------------------ Entschlüssel-Text */
.scr{font-variant-ligatures:none}
.claim .w>span{cursor:default}

/* --------------------------------------------------- Schwebender Knopf */
.fab{
  position:fixed;right:22px;bottom:22px;z-index:96;display:inline-flex;align-items:center;gap:11px;
  padding:14px 22px 14px 18px;border:0;border-radius:999px;cursor:pointer;
  font:inherit;font-size:14.5px;font-weight:600;letter-spacing:.005em;
  background:var(--accent);color:#0b0d08;box-shadow:0 16px 40px -14px rgba(140,191,75,.75);
  opacity:0;transform:translateY(22px) scale(.94);pointer-events:none;
  transition:opacity .55s var(--ease),transform .55s var(--ease),box-shadow .4s}
.fab.on{opacity:1;transform:none;pointer-events:auto}
.fab:hover{box-shadow:0 20px 46px -12px rgba(140,191,75,.9)}
.fab:active{transform:scale(.97)}
.fab svg{width:20px;height:20px;flex:none}
/* der Ring pulst nach aussen, damit der Knopf auffaellt, ohne zu blinken */
.fab::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  border:2px solid var(--accent);animation:fabRing 3s ease-out infinite}
@keyframes fabRing{
  0%  {opacity:.7;transform:scale(1)}
  70% {opacity:0;transform:scale(1.22)}
  100%{opacity:0;transform:scale(1.22)}
}
.fab .fab-txt{white-space:nowrap}
@media(max-width:620px){
  .fab{padding:15px;gap:0}
  .fab .fab-txt{display:none}
}

/* ------------------------------------------------------ Partner-Dialog */
.partner{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:24px;
  background:rgba(0,0,0,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.partner.open{opacity:1;visibility:visible}
.partner-box{position:relative;width:min(560px,100%);max-height:88vh;overflow-y:auto;
  background:var(--bg-2);border:1px solid var(--line);border-radius:22px;
  padding:clamp(28px,4vw,44px);box-shadow:var(--shadow);
  transform:translateY(16px) scale(.98);transition:transform .4s var(--ease)}
.partner.open .partner-box{transform:none}
.partner-box h3{font-size:clamp(1.5rem,3vw,2.05rem);margin-bottom:16px}
.partner-box p{color:var(--muted);font-size:15.5px}
.partner-box p + p{margin-top:14px}
.partner-close{position:absolute;top:18px;right:18px}
.partner-ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;
  margin-bottom:22px;background:var(--accent-soft);color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.partner-ico svg{width:26px;height:26px}
.partner-cta{display:flex;flex-wrap:wrap;gap:13px;align-items:center;margin-top:30px}

/* ---------------------------------------------------- Stillgelegte Links
   Dieser Entwurf ist eine Besprechungsdatei. Jeder Link, der nicht in der
   Seite selbst landet, hat deshalb kein href - er sieht aus wie ein Link,
   tut aber nichts. Kein 404, kein Sprung an den Seitenanfang, kein
   Mailprogramm, das sich mitten in der Vorfuehrung oeffnet. */
a[data-tot]{cursor:pointer}

/* ------------------------------------------------- Regionalkarte (Kontakt)
   Selbst gezeichnet aus OpenStreetMap-Daten (Resources/Private/Karte/
   karte-bauen.py) - keine Kacheln, kein fremder Server, keine Einwilligung.
   Die Farben stehen hier und nicht im SVG, damit der Hell/Dunkel-Schalter
   greift. Auf schmalen Schirmen schneidet "slice" die Raender ab; Bruchsal
   steht nahe der Mitte und bleibt sichtbar. */
.km-rahmen{margin:clamp(40px,5vw,64px) 0 0;position:relative}
/* Kein Rahmen: Die Karte laeuft zu allen Seiten in den Seitengrund aus.
   Zwei Verlaeufe als Maske, per intersect verschnitten - seitlich breiter,
   oben und unten schmaler, damit Mannheim und Pforzheim lesbar bleiben. */
.km{display:block;width:100%;height:clamp(360px,48vw,600px);
  --km-fade-x:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);
  --km-fade-y:linear-gradient(180deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  -webkit-mask-image:var(--km-fade-x),var(--km-fade-y);-webkit-mask-composite:source-in;
  mask-image:var(--km-fade-x),var(--km-fade-y);mask-composite:intersect;
  --km-grund:#10130d;--km-wasser:rgba(120,170,190,.30);
  --km-klein:rgba(255,255,255,.11);--km-mittel:rgba(255,255,255,.26);
  --km-gross:rgba(140,191,75,.62);--km-rand:#10130d;
  --km-bahn:rgba(255,255,255,.13);--km-ort:rgba(237,240,233,.92);--km-ort-2:rgba(237,240,233,.66)}
:root[data-theme="light"] .km{
  --km-grund:#eef0e8;--km-wasser:#bcd5de;
  --km-klein:#d6d9ce;--km-mittel:#fff;--km-gross:#9cc760;--km-rand:#c9cdbf;
  --km-bahn:#b4b9aa;--km-ort:#1a1d17;--km-ort-2:#4d5448}
.km-grund{fill:var(--km-grund)}
.km-rhein,.km-fluss,.km-bahn,.km-rand,.km-str{fill:none;stroke-linecap:round;stroke-linejoin:round}
.km-rhein{stroke:var(--km-wasser);stroke-width:7}
.km-fluss{stroke:var(--km-wasser);stroke-width:2.4}
.km-bahn{stroke:var(--km-bahn);stroke-width:1.2;stroke-dasharray:5 4}
.km-rand{stroke:var(--km-rand)}
.km-rand--mittel{stroke-width:5}
.km-rand--gross{stroke-width:7}
.km-str--klein{stroke:var(--km-klein);stroke-width:1.2}
.km-str--mittel{stroke:var(--km-mittel);stroke-width:2.6}
.km-str--gross{stroke:var(--km-gross);stroke-width:3.6}
.km-ort circle{fill:var(--km-grund);stroke:var(--km-ort);stroke-width:2}
.km-ort text{fill:var(--km-ort);font-family:var(--font);font-size:16px;font-weight:600;
  text-anchor:middle;letter-spacing:.01em;
  paint-order:stroke;stroke:var(--km-grund);stroke-width:5px;stroke-linejoin:round}
.km-ort--2 circle{stroke:var(--km-ort-2);stroke-width:1.6}
.km-ort--2 text{fill:var(--km-ort-2);font-size:13.5px;font-weight:500}
.km-puls{fill:none;stroke:var(--accent);stroke-width:2;opacity:0;transform-box:fill-box;
  transform-origin:center;animation:kmPuls 3.2s var(--ease) infinite}
.km-puls--2{animation-delay:1.6s}
@keyframes kmPuls{0%{opacity:.8;transform:scale(.4)}100%{opacity:0;transform:scale(2.6)}}
.km-nadel{fill:#f6ffe8;stroke:var(--accent);stroke-width:2.4;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.km-r .lg-dark{fill:#2b2725}
.km-r .lg-green{fill:#74a334}
.km-schild rect{fill:var(--bg-2);stroke:var(--line);stroke-width:1;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.35))}
.km-schild-1{fill:var(--fg-strong);font-family:var(--font);font-size:14px;font-weight:600}
.km-schild-2{fill:var(--muted);font-family:var(--mono);font-size:11.5px;letter-spacing:.04em}
/* Schmal wird die Karte verkleinert gezeichnet - Schrift und Marke wachsen
   mit, sonst sind die Namen kaum zu lesen. */
@media(max-width:640px){
  .km-ort text{font-size:24px;stroke-width:7px}
  .km-ort--2 text{font-size:20px}
  .km-marke>*{scale:1.2}
  /* Neben der Nadel liefe das Schild in den ausgeblendeten Rand, darunter
     verdeckt es Karlsruhe - also ueber die Nadel */
  .km-schild{transform:translate(-98px,-118px)}
  .km{--km-fade-x:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
  .km-ort--rand{display:none}
}
.km-rahmen figcaption{margin-top:10px;font-size:12px;color:var(--muted);text-align:right}
.km-rahmen figcaption a{color:inherit}

/* ------------------------------------------------------- Bewegung sparen */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .claim .w>span{transform:none}
  .hero-sub,.hero-cta,.kpis,.visual{opacity:1}
  .intro{display:none}
  html.booting{overflow:auto}
  .intro-svg .ltr,.intro-svg .g-it,.intro-svg .mk-green{opacity:1}
  .circuit{opacity:1}
  .fab::before{animation:none;opacity:.35}
  .km-puls{display:none}
  /* Einsaetze: ohne Bewegung steht an jedem Punkt die erledigte Plakette */
  .dk-stoer,.dk-lauf,.dk-r{display:none}
  .dk-plakette,.dk-voll,.dk-haken{animation:none;opacity:1;stroke-dashoffset:0}
}