/* fortschrittdigital · Startseite
   Farbprinzip: Anthrazit/Dunkelgrau = Fundament, Weiß/Hellgrau = Raum, Orange = Highlight.
   Sektionsblöcke, Eyebrow-Chips und Hover-Glow nach dem Vorbild LUMA. Neue Werte nur über Variablen. */

@font-face{font-family:"Montserrat";src:url(fonts/montserrat.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Manrope";src:url(fonts/manrope.woff2) format("woff2");font-weight:200 800;font-display:swap}

:root{
  --akzent:#E87A03;          /* Orange: Icons, Haken, Chips, Glow, Highlights auf Dunkel */
  --akzent-rgb:232,122,3;
  --akzent-schrift:#C96A02;  /* Orange für große Schrift auf Weiß (3,8:1) */
  --akzent-dunkel:#B35C00;   /* Orange für kleine Schrift/Links auf Weiß (4,7:1) */
  --akzent-hauch:#FFF4E8;   /* NUR Hover- und Auswahl-Zustände, nie als Fläche oder Sektion (User 24.10.2026) */
  --tinte:#2A2C30; --anthrazit:#2A2C30; --anthrazit-dunkel:#1C1E21; --box-dunkel:#35373C; --kante-dunkel:#45474D; /* deckende Boxen auf dunklen Blöcken */
  --text-2:#4A4D52; --text-3:#8A8D92; --text-auf-dunkel:#B9BBC0;
  --weiss:#FFFFFF; --flaeche:#F5F5F5; --grau-hell:#EDEDEE; --linie:#E3E3E3;
  --head:"Montserrat",system-ui,sans-serif; --body:"Manrope",system-ui,sans-serif;
  --fs-h2:clamp(2rem,1.2rem + 3vw,3.75rem); /* größer wie apex: 32 → 60 px */
  --fs-h3:clamp(1.25rem,1.15rem + .4vw,1.5rem);
  --fs-lead:clamp(1.125rem,1rem + .55vw,1.5rem);
  --fs-text:clamp(1rem,.97rem + .1vw,1.0625rem);
  --fs-klein:clamp(.8125rem,.79rem + .1vw,.875rem);
  --r-block:44px; --r-box:16px; --r-innen:12px; --r-klein:10px;
  --pad-x:clamp(1.5rem,4vw,3rem); --max:1200px; --block-rand:clamp(.5rem,1.4vw,1.25rem);
  --sek:clamp(3.5rem,2.5rem + 4vw,6rem); --gap:clamp(1rem,2vw,1.5rem);
  --ease:cubic-bezier(.2,.8,.2,1);
}
@media (max-width:767px){:root{--r-block:28px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--weiss);color:var(--text-2);font:400 var(--fs-text)/1.6 var(--body);overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--head);font-weight:600;color:var(--tinte);margin:0}
h2{font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.025em;font-weight:700}
h3{font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.005em}
p{margin:0}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px;border-radius:4px}
.wrap{width:min(100% - 2*var(--pad-x),var(--max));margin-inline:auto}
.sek{padding-block:var(--sek);position:relative}
.sek-kopf{max-width:760px;display:grid;gap:1rem;justify-items:start;margin-bottom:clamp(2rem,4vw,3rem)}
.sek-kopf p:not(.eyebrow){font-size:var(--fs-lead);line-height:1.5}
.ph{color:var(--text-3)} /* Platzhalter, wird durch /copywriting ersetzt */
/* Orange Wörter in Überschriften: Verlauf hell → dunkel, jede Zeile eigener Verlauf */
.hl{color:var(--akzent-schrift)}
.dunkel .hl,.hl--dunkel{color:var(--akzent)}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .hl{background-image:linear-gradient(90deg,#E07502 0%,var(--akzent-dunkel) 100%);-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
  .dunkel .hl,.hl--dunkel{background-image:linear-gradient(90deg,#FFA640 0%,var(--akzent) 100%)}
}

/* ---------- Eyebrow-Chip (wie LUMA: Kontur in Markenfarbe, leichter Glow) ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:6px;margin:0;padding:.3rem .6rem;border-radius:var(--r-klein);
  border:1px solid var(--akzent);background:var(--akzent-hauch);color:var(--akzent-dunkel);
  font:600 .6875rem/1.2 var(--head);letter-spacing:.07em;text-transform:uppercase;
  box-shadow:0 0 14px -4px rgba(0,0,0,.08)}
.eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--akzent);box-shadow:0 0 6px rgba(0,0,0,.08)}
.dunkel .eyebrow{background:rgba(var(--akzent-rgb),.1);color:var(--akzent)}

/* ---------- Sektionsblock dunkel (wie LUMA: runde Ecken, Glow an den Nähten) ---------- */
/* Gitter in dunklen Blöcken: Mitte heller, zu den Rändern ins Anthrazit ausgeblendet (oberste Ebene deckt die Ränder ab) */
.dunkel{background:
    radial-gradient(560px circle at var(--dx,50%) var(--dy,-40%),rgba(var(--akzent-rgb),.14),transparent 70%),
    radial-gradient(ellipse 70% 75% at 50% 50%,rgba(42,44,48,0) 0%,rgba(42,44,48,.75) 65%,var(--anthrazit) 100%),
    radial-gradient(ellipse 45% 50% at 50% 50%,rgba(255,255,255,.05),transparent 100%),
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/48px 48px,
    var(--anthrazit);color:var(--text-auf-dunkel);border-radius:var(--r-block);margin-inline:var(--block-rand);isolation:isolate;
  box-shadow:0 -40px 90px -50px rgba(0,0,0,.08),0 40px 90px -50px rgba(0,0,0,.08)}
.dunkel::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--akzent-rgb),.16) 0%,rgba(var(--akzent-rgb),0) 220px),
             linear-gradient(0deg,rgba(var(--akzent-rgb),.12) 0%,rgba(var(--akzent-rgb),0) 200px),
             radial-gradient(55% 40% at 12% 0%,rgba(var(--akzent-rgb),.14),transparent 100%)}
.dunkel h2,.dunkel h3{color:var(--weiss)}

/* ---------- CTA: Anthrazit-Pille, Pfeil im orangen Kreis dreht beim Hover ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:8px 8px 8px 24px;border-radius:999px;
  font:600 1rem/1.2 var(--head);text-decoration:none;border:0;transition:background-color .25s ease,color .25s ease}
.btn__kreis{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--akzent);color:var(--anthrazit);
  box-shadow:0 4px 14px -4px rgba(0,0,0,.08)}
.btn__pfeil{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform 350ms var(--ease)}
.btn:hover .btn__pfeil,.btn:focus-visible .btn__pfeil{transform:rotate(45deg)}
.btn--primaer{background:var(--anthrazit);color:var(--weiss)}
.btn--primaer:hover{background:var(--anthrazit-dunkel)}
.btn--hell{background:var(--weiss);color:var(--tinte)}
.btn--hell:hover{background:var(--akzent-hauch)}
/* Zweite Handlung: weiß mit Kontur, Download-Pfeil tippt beim Hover nach unten */
.btn--kontur{background:var(--weiss);color:var(--tinte);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.08)}
.btn--kontur:hover{background:var(--akzent-hauch);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.08)}
.btn:hover .btn__pfeil--dl,.btn:focus-visible .btn__pfeil--dl{transform:none;animation:dlTippen .7s var(--ease)}
@keyframes dlTippen{0%,100%{transform:translateY(0)}45%{transform:translateY(3px)}}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px}
@media (min-width:981px){.hero__text{max-width:none}.hero__ctas .btn{font-size:.9375rem;padding-left:20px;gap:10px}}
@media (max-width:600px){.hero__ctas{flex-direction:column;align-items:stretch;width:100%}.hero__ctas .btn{justify-content:space-between}}
.btn--klein{min-height:44px;padding:6px 6px 6px 18px;font-size:.9375rem;gap:10px}
.btn--klein .btn__kreis{width:32px;height:32px}
@media (max-width:600px){.btn{min-height:48px;font-size:.9375rem}}

/* ---------- Haken / Kreuz ---------- */
.ico-haken,.ico-kreuz{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;margin-top:.1em}
.ico-haken{background:var(--akzent);color:var(--weiss);box-shadow:0 0 12px -3px rgba(0,0,0,.08)}
.ico-kreuz{background:rgba(42,44,48,.07);color:var(--text-3)}
.ico-haken svg,.ico-kreuz svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.liste{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.liste li{display:flex;gap:12px;align-items:flex-start;color:var(--tinte)}
.liste--nein li{color:var(--text-2)}

/* ---------- Navigation (weiß) ---------- */
/* Nav: schwebende Karte, scrollt mit der Seite weg (Vorbild geoagentur.de) */
.nav{position:relative;z-index:100;padding:14px var(--block-rand) 0}
.nav.is-scrolled{box-shadow:0 1px 0 rgba(0,0,0,.08),0 10px 30px -18px rgba(0,0,0,.08)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:72px;width:min(100%,1320px);margin-inline:auto;padding:.6rem .75rem .6rem 1.5rem;
  background:var(--weiss);border-radius:20px;box-shadow:0 0 0 1px rgba(42,44,48,.05),0 14px 34px -16px rgba(0,0,0,.08)}
.nav__logo img{height:50px;width:auto}
.nav__links{display:flex;align-items:center;gap:clamp(.25rem,1vw,.75rem);list-style:none;margin:0;padding:0}
.nav__links a:not(.btn){display:block;padding:.7rem 1.05rem;border-radius:999px;font:500 .9375rem/1 var(--head);color:var(--tinte);text-decoration:none;transition:background-color .25s ease,color .25s ease}
.nav__links a:not(.btn):hover{background:var(--flaeche)}
.nav__links a.is-aktiv{background:var(--anthrazit);color:var(--weiss)}
.nav__links li:last-child{margin-left:clamp(.5rem,2vw,1.5rem)}
/* Umriss-Button mit Verlauf Anthrazit → Orange */
.btn--rahmen{min-height:48px;padding:.7rem 1.4rem;border:2px solid transparent;color:var(--tinte);
  background:linear-gradient(var(--weiss),var(--weiss)) padding-box,linear-gradient(90deg,var(--anthrazit),var(--akzent)) border-box}
.btn--rahmen:hover{background:linear-gradient(var(--akzent-hauch),var(--akzent-hauch)) padding-box,linear-gradient(90deg,var(--anthrazit),var(--akzent)) border-box}
.burger{display:none}
@media (max-width:980px){
  .nav__links{display:none}
  .burger{display:grid;place-items:center;position:absolute;top:26px;right:calc(var(--block-rand) + 12px);z-index:106;width:48px;height:48px;border:0;border-radius:50%;background:var(--flaeche);cursor:pointer}
  .burger span{position:absolute;left:14px;width:20px;height:2px;border-radius:2px;background:var(--tinte);transition:transform .3s var(--ease),opacity .2s}
  .burger span:nth-child(1){top:17px}.burger span:nth-child(2){top:23px}.burger span:nth-child(3){top:29px}
  .nav-offen .burger{position:fixed;background:var(--anthrazit-dunkel);box-shadow:none}
  .nav-offen .burger span{background:var(--weiss)}
  .nav-offen .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav-offen .burger span:nth-child(2){opacity:0}
  .nav-offen .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}
.menu{position:fixed;inset:0;z-index:105;background:var(--anthrazit);color:var(--weiss);padding:96px var(--pad-x) 2rem;
  display:flex;flex-direction:column;gap:2rem;transform:translateX(100%);visibility:hidden;transition:transform .4s var(--ease),visibility 0s .4s}
.nav-offen .menu{transform:none;visibility:visible;transition:transform .4s var(--ease)}
.menu ul{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}
.menu ul a{display:block;padding:.6rem 0;font:600 1.5rem/1.2 var(--head);color:var(--weiss);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.1)}
.menu ul a:hover{color:var(--akzent)}
.menu .btn{align-self:flex-start}
.menu__kontakt{margin-top:auto;font-size:var(--fs-klein);color:var(--text-auf-dunkel)}
body.nav-offen{overflow:hidden}
@media (min-width:981px){.menu{display:none}}

/* ---------- Hero: Text links, Bild rechts ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;width:min(70vw,900px);aspect-ratio:1;right:-18%;top:-10%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--akzent-rgb),.14),rgba(var(--akzent-rgb),0))}
.hero__inhalt{display:grid;gap:clamp(2rem,4vw,4rem);align-items:center;padding-block:clamp(2.5rem,6vw,5rem)}
@media (min-width:981px){.hero__inhalt{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);min-height:calc(100svh - 100px)}}
.hero__text{max-width:640px;display:grid;gap:1.25rem;justify-items:start}
.hero__claim{font-size:clamp(1.875rem,1.3rem + 2.8vw,3.625rem);line-height:1.15;letter-spacing:-.02em;font-weight:700}
.hero__lead{font-size:var(--fs-lead);line-height:1.5;color:var(--text-2)}
.hero__punkte{gap:.75rem;margin:.25rem 0 .5rem}
.hero__punkte li{font-size:var(--fs-text);line-height:1.5}
.hero__bild{position:relative;aspect-ratio:4/5;max-height:calc(100svh - 100px - 5rem);width:100%;border-radius:var(--r-box);display:grid;place-items:center;padding:2rem;text-align:center;
  background:linear-gradient(140deg,#F4F4F5 0%,#DFE0E2 100%);border:1px solid var(--linie);
  box-shadow:0 0 0 6px rgba(0,0,0,.08),0 0 0 7px rgba(0,0,0,.08),0 30px 60px -30px rgba(0,0,0,.08)}
.hero__bild > span{font-size:var(--fs-klein);color:var(--text-3);border:1px dashed #B9BBC0;border-radius:var(--r-klein);padding:.5rem .8rem;background:rgba(255,255,255,.7)}
@media (max-width:980px){.hero__bild{aspect-ratio:4/3;max-height:none}}

/* ---------- Leistungen ---------- */
.karten{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.karte{display:grid;grid-template-areas:"ico titel" "text text" "link link";grid-template-columns:auto 1fr;align-items:center;gap:1rem 14px;
  padding:clamp(1.5rem,3vw,2rem);border-radius:var(--r-box);background:var(--weiss);border:1px solid var(--linie);
  box-shadow:0 1px 2px rgba(42,44,48,.04),0 16px 36px -26px rgba(0,0,0,.08);transition:border-color .4s ease,box-shadow .4s ease}
@media (hover:hover){.karte:hover{border-color:var(--akzent);box-shadow:0 0 0 1px rgba(0,0,0,.08),0 0 26px -2px rgba(0,0,0,.08),0 18px 40px -26px rgba(0,0,0,.08)}}
.karte .ic{grid-area:ico}
.karte h3{grid-area:titel}
.karte p{grid-area:text}
.karte__link{grid-area:link;justify-self:start;display:inline-flex;align-items:center;gap:6px;font:600 .9375rem/1 var(--head);color:var(--akzent-dunkel);text-decoration:none;margin-top:.25rem}
.karte__link:hover{text-decoration:underline;text-underline-offset:4px}
.karte__link svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.weitere{margin-top:clamp(1.5rem,3vw,2rem);font-size:var(--fs-klein);color:var(--text-2)}
.weitere a{color:var(--akzent-dunkel);font-weight:600;text-decoration:none}
.weitere a:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- Ablauf (dunkler Block, Nummern als leuchtende Ringe) ---------- */
.schritte{list-style:none;margin:0;padding:0;display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));counter-reset:s}
.schritt{counter-increment:s;display:grid;gap:.75rem;align-content:start;padding:clamp(1.5rem,3vw,2rem);border-radius:var(--r-box);
  background:var(--box-dunkel);border:1px solid var(--kante-dunkel);transition:border-color .4s ease,box-shadow .4s ease}
@media (hover:hover){.schritt:hover{border-color:var(--akzent);box-shadow:0 0 0 1px rgba(0,0,0,.08),0 0 30px -2px rgba(0,0,0,.08),inset 0 0 40px -18px rgba(0,0,0,.08)}}
.schritt::before{content:counter(s);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--akzent);color:var(--akzent);font:700 1rem/1 var(--head);box-shadow:0 0 18px -4px rgba(0,0,0,.08),inset 0 0 12px -6px rgba(0,0,0,.08)}
.schritt p{color:var(--text-auf-dunkel)}
.schritt__dauer{font-size:var(--fs-klein);color:var(--text-3)}
.sek-cta{margin-top:clamp(2rem,4vw,3rem)}

/* ---------- Voraussetzungen ---------- */
.passt{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.passt__box{display:grid;gap:1.25rem;align-content:start;padding:clamp(1.5rem,3vw,2.25rem);border-radius:var(--r-box);background:var(--flaeche);border:1px solid var(--linie)}
.passt__box--ja{background:var(--weiss);border-color:var(--akzent);box-shadow:0 0 0 1px rgba(0,0,0,.08),0 0 30px -6px rgba(0,0,0,.08)}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:clamp(1.5rem,3vw,2rem) 0 0;padding:0}
.chips li{padding:7px 14px;border-radius:999px;background:var(--grau-hell);font:600 .8125rem/1.3 var(--body);color:var(--text-2);letter-spacing:.02em}

/* ---------- FAQ ---------- */
.faq{max-width:860px;border-top:1px solid var(--linie)}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.25rem 0;font:600 var(--fs-text)/1.4 var(--head);color:var(--tinte)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--akzent-dunkel)}
.faq summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--akzent-hauch);border:1.5px solid var(--akzent);color:var(--akzent-dunkel);font:600 1.1rem/1 var(--head);transition:transform .3s var(--ease)}
.faq details[open] summary::after{content:"−";transform:rotate(180deg)}
.faq details p{padding:0 0 1.25rem;max-width:720px}

/* ---------- Kontakt (dunkler Block) + Footer (hell) ---------- */
.kontakt__grid{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));align-items:end}
.kontakt .sek-kopf{margin-bottom:0}
.kontakt__daten{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.kontakt__daten li{display:flex;align-items:center;gap:12px}
.kontakt__daten svg{width:20px;height:20px;fill:var(--akzent);flex:none}
.kontakt__daten a{color:var(--weiss);text-decoration:none}
.kontakt__daten a:hover{color:var(--akzent)}
.footer{font-size:var(--fs-klein);color:var(--text-2)}
.footer__inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding-block:2rem}
.footer__marke img{height:42px;width:auto}
.footer nav{display:flex;gap:1.5rem}
.footer a{color:var(--text-2);text-decoration:none}
.footer a:hover{color:var(--akzent-dunkel)}

/* ---------- Sektionen mit GPT-Hintergrundbild ---------- */
.sek-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;border-radius:inherit;pointer-events:none}
.sek--bild{isolation:isolate;overflow:hidden;background:var(--grau-hell)}
/* zwei helle Sektionen hintereinander: feine Linie */
.sek:not(.dunkel):not(.sek--bild) + .sek:not(.dunkel):not(.sek--bild){border-top:1px solid var(--linie)}

/* ---------- Doppel-Block: dunkler Block, dahinter schaut unten ein oranger Block mit Muster raus (Vorbild geoagentur.de) ---------- */
.doppel{position:relative;margin:var(--sek) var(--block-rand);border-radius:var(--r-block);padding-bottom:clamp(2.5rem,4vw,3.75rem);
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,0) 0 22px,rgba(255,255,255,.16) 22px 24px,rgba(255,255,255,0) 24px 46px),
    radial-gradient(rgba(255,255,255,.18) 1.5px,transparent 1.6px) 0 0/14px 14px,
    linear-gradient(90deg,var(--akzent) 0%,var(--akzent-schrift) 55%,var(--akzent) 100%)}
.doppel > .dunkel{margin:0;box-shadow:0 18px 40px -20px rgba(0,0,0,.08)}
.dunkel .ansprechpartner strong{color:var(--weiss)}
.dunkel .vertrauen__punkte p{color:var(--text-auf-dunkel)}
.warum.ringe{--rx:0%;--ry:100%;--rc:rgba(255,255,255,.06);--rm1:30%;--rm2:110%}

/* ---------- Problem: Wachstumsbremsen (dunkler Block) ---------- */
.schmerzen{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.schmerz{display:grid;gap:.6rem;align-content:start;padding:clamp(1.5rem,3vw,2rem);border-radius:var(--r-box);
  background:var(--box-dunkel);border:1px solid var(--kante-dunkel)}
.schmerz h3::before{content:"";display:block;width:10px;height:10px;border-radius:50%;background:var(--akzent);box-shadow:0 0 12px rgba(0,0,0,.08);margin-bottom:1rem}
.schmerz p{color:var(--text-auf-dunkel)}

/* ---------- Vorher / nachher ---------- */
.vergleich{border-radius:var(--r-box);overflow:hidden;background:var(--weiss);
  border:1px solid var(--linie);box-shadow:0 20px 50px -30px rgba(0,0,0,.08)}
.vergleich__kopf,.vergleich__zeile{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:1rem;padding:1rem clamp(1rem,3vw,2rem);align-items:center}
.vergleich__kopf{background:var(--anthrazit);color:var(--weiss);font:600 .75rem/1.2 var(--head);letter-spacing:.07em;text-transform:uppercase}
.vergleich__kopf span:last-child{color:var(--akzent)}
.vergleich__zeile + .vergleich__zeile{border-top:1px solid var(--linie)}
.vergleich__ablauf{font:600 var(--fs-text)/1.35 var(--head);color:var(--tinte)}
.vergleich__heute,.vergleich__danach{display:flex;gap:10px;align-items:flex-start}
@media (max-width:720px){.vergleich__kopf{display:none}.vergleich__zeile{grid-template-columns:1fr;gap:.6rem}}

/* ---------- Branchen ---------- */
.branchen{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.branche{display:grid;gap:1.25rem;align-content:start;padding:clamp(1.5rem,3vw,2rem);border-radius:var(--r-box);background:var(--weiss);border:1px solid var(--linie);
  box-shadow:0 1px 2px rgba(42,44,48,.04),0 16px 36px -26px rgba(0,0,0,.08);transition:border-color .4s ease,box-shadow .4s ease}

/* ---------- Warum wir + Ansprechpartner ---------- */
.vertrauen{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (min-width:981px){.vertrauen{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}}
.vertrauen__punkte{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem 2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.vertrauen__punkte li{display:flex;gap:12px;align-items:flex-start}
.vertrauen__punkte h3{font-size:1.0625rem;margin-bottom:.35rem}
.ansprechpartner{margin:0;display:grid;gap:1rem;max-width:420px;width:100%;justify-self:center}
.ansprechpartner__bild{aspect-ratio:4/5;border-radius:var(--r-box);display:grid;place-items:center;padding:2rem;text-align:center;
  background:linear-gradient(140deg,#F4F4F5 0%,#DFE0E2 100%);border:1px solid var(--linie);
  box-shadow:0 0 0 6px rgba(0,0,0,.08),0 0 0 7px rgba(0,0,0,.08),0 30px 60px -30px rgba(0,0,0,.08)}
.ansprechpartner__bild span{font-size:var(--fs-klein);color:var(--text-3);border:1px dashed #B9BBC0;border-radius:var(--r-klein);padding:.5rem .8rem;background:rgba(255,255,255,.7)}
.ansprechpartner figcaption{display:grid;gap:.2rem;padding-left:.25rem}
.ansprechpartner strong{font:600 1.0625rem/1.3 var(--head)}

/* ---------- Preise ---------- */
.preise{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-items:stretch}
.preis{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;padding:clamp(1.5rem,3vw,2.25rem);border-radius:var(--r-box);background:var(--weiss);border:1px solid var(--linie);
  box-shadow:0 1px 2px rgba(42,44,48,.04),0 16px 36px -26px rgba(0,0,0,.08);transition:border-color .4s ease,box-shadow .4s ease}
.preis--hervor{border-color:var(--akzent);box-shadow:0 0 0 1px rgba(0,0,0,.08),0 0 34px -6px rgba(0,0,0,.08)}
.preis__betrag{font:700 clamp(1.75rem,1.5rem + 1vw,2.25rem)/1 var(--head);color:var(--tinte)}
.preis__betrag small{font:500 .875rem/1 var(--body);color:var(--text-3)}
.preis .liste{margin-bottom:.5rem}
.preis .btn{margin-top:auto}
@media (hover:hover){.branche:hover,.preis:hover{border-color:var(--akzent);box-shadow:0 0 0 1px rgba(0,0,0,.08),0 0 26px -2px rgba(0,0,0,.08),0 18px 40px -26px rgba(0,0,0,.08)}}

/* ---------- CTA-Band mit GPT-Hintergrund (Vorbild geoagentur.de) ---------- */
.cta-band{position:relative;isolation:isolate;overflow:hidden;margin:var(--sek) var(--block-rand);border-radius:var(--r-block);background:var(--anthrazit);color:var(--text-auf-dunkel)}
.cta-band__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;z-index:-2}
.cta-band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(28,30,33,.88) 0%,rgba(28,30,33,.55) 50%,rgba(28,30,33,0) 80%)}
.cta-band__inhalt{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2rem;padding-block:clamp(3rem,6vw,5rem)}
.cta-band__text{max-width:640px;display:grid;gap:1rem}
.cta-band h2{color:var(--weiss)}
.cta-band__text p{font-size:var(--fs-lead);line-height:1.5}
@media (max-width:767px){.cta-band::before{background:linear-gradient(180deg,rgba(28,30,33,.9) 0%,rgba(28,30,33,.6) 60%,rgba(28,30,33,.3) 100%)}}

/* ---------- Ringe: konzentrische Linien, die langsam nach außen laufen ---------- */
@property --ring{syntax:"<length>";inherits:false;initial-value:0px}
.ringe::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:repeating-radial-gradient(circle at var(--rx) var(--ry),
    var(--rc) calc(var(--ring) - 36px),var(--rc) calc(var(--ring) - 35px),transparent calc(var(--ring) - 35px),transparent var(--ring));
  -webkit-mask-image:radial-gradient(circle at var(--rx) var(--ry),#000 var(--rm1,15%),transparent var(--rm2,75%));mask-image:radial-gradient(circle at var(--rx) var(--ry),#000 var(--rm1,15%),transparent var(--rm2,75%));
  animation:ringeLaufen 4s linear infinite}
@keyframes ringeLaufen{to{--ring:36px}}
.kontakt.ringe{--rx:105%;--ry:-15%;--rc:rgba(232,122,3,.38);--rm1:35%;--rm2:115%}
.hero.ringe{--rx:78%;--ry:50%;--rc:rgba(42,44,48,.07)}
@media (max-width:980px){.hero.ringe{--rx:50%;--ry:85%}}
@media (prefers-reduced-motion:reduce){.ringe::after{animation:none}}

/* ---------- Use Cases: Karussell, mit der Maus seitlich ziehbar ---------- */
#use-cases{overflow:hidden}
.usecases__kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap}
.usecases__pfeile{display:flex;gap:10px;margin-bottom:clamp(2rem,4vw,3rem)}
.usecases__pfeil{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--linie);background:var(--weiss);color:var(--tinte);display:grid;place-items:center;cursor:pointer;transition:background-color .25s ease,border-color .25s ease}
.usecases__pfeil:hover{background:var(--akzent-hauch);border-color:var(--akzent)}
.usecases__pfeil svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.usecases{--uc-rand:max(var(--pad-x),calc((100vw - var(--max)) / 2));display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--uc-rand);padding:.75rem var(--uc-rand) 2.5rem;scrollbar-width:none;cursor:grab;user-select:none}
.usecases::-webkit-scrollbar{display:none}
.usecases.zieht{cursor:grabbing;scroll-snap-type:none}
.usecase{flex:0 0 clamp(260px,26vw,320px);scroll-snap-align:start;display:flex;flex-direction:column;gap:1rem;padding:clamp(1.5rem,3vw,2rem);border-radius:var(--r-box);
  background:var(--weiss);border:1px solid var(--linie);box-shadow:0 1px 2px rgba(42,44,48,.04),0 16px 36px -26px rgba(0,0,0,.08);
  color:inherit;text-decoration:none;transition:border-color .4s ease,box-shadow .4s ease}
.usecase img,.usecase svg{-webkit-user-drag:none}
.usecase__link{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font:600 .9375rem/1 var(--head);color:var(--akzent-dunkel)}
.usecase__link svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.usecase:hover{border-color:var(--akzent);box-shadow:0 0 0 1px rgba(0,0,0,.08),0 0 26px -2px rgba(0,0,0,.08),0 18px 40px -26px rgba(0,0,0,.08)}}

/* ---------- Referenzen und Kundenstimmen (Platzhalter bis echte Freigaben vorliegen) ---------- */
.logos{list-style:none;margin:0 0 clamp(2rem,4vw,3rem);padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--gap)}
.logos li{height:64px;border-radius:var(--r-klein);background:var(--weiss);border:1px dashed #C9CBCF;display:grid;place-items:center;font-size:var(--fs-klein)}
.stimmen{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.stimme{margin:0;display:flex;flex-direction:column;gap:1rem;padding:clamp(1.5rem,3vw,2rem);border-radius:var(--r-box);background:var(--weiss);border:1px solid var(--linie);
  box-shadow:0 20px 50px -30px rgba(0,0,0,.08)}
.stimme__sterne{letter-spacing:.15em}
.stimme blockquote{margin:0;font-size:var(--fs-lead);line-height:1.5}
.stimme figcaption{margin-top:auto;display:flex;gap:12px;align-items:center}
.stimme__foto{flex:none;width:44px;height:44px;border-radius:50%;background:var(--grau-hell)}
.stimme figcaption > span:last-child{display:grid;gap:.1rem;font-size:var(--fs-klein)}
.stimme strong{font:600 1rem/1.3 var(--head)}

/* ---------- „Sie sind auf dem richtigen Weg": Kriterien im CTA-Band ---------- */
.cta-band__liste{gap:.7rem;margin-top:.5rem}
.cta-band .liste li{color:var(--weiss)}

/* ---------- Ablauf jetzt hell ---------- */
#ablauf .schritt{background:var(--weiss);border-color:var(--linie);box-shadow:0 1px 2px rgba(42,44,48,.04),0 16px 36px -26px rgba(0,0,0,.08)}
#ablauf .schritt p{color:var(--text-2)}

/* ---------- Footer als dunkler Block mit Kontakt ---------- */
.footer-block{margin:0 var(--block-rand) var(--block-rand);padding-bottom:0}
.footer__unten{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-top:clamp(2.5rem,5vw,4rem);
  padding-block:1.75rem 2rem;border-top:1px solid rgba(255,255,255,.12);font-size:var(--fs-klein)}
.footer__unten nav{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.footer__unten a{color:var(--text-auf-dunkel);text-decoration:none}
.footer__unten a:hover{color:var(--akzent)}
.footer__unten .footer__marke img{height:42px;width:auto}

/* ---------- Zentrierte Sektionsköpfe (wie apex) ---------- */
.sek-kopf--mitte{margin-inline:auto;text-align:center;justify-items:center;max-width:860px}
.sek-cta--mitte{display:flex;justify-content:center}

/* ---------- Hero: Platz für Beweise ---------- */
.hero__beweis{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;margin-top:.75rem;padding-top:1.25rem;border-top:1px solid var(--linie);width:100%}
.hero__logos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.hero__logos li{width:84px;height:36px;border-radius:8px;border:1px dashed #C9CBCF;display:grid;place-items:center;font-size:.75rem}
.hero__bewertung{display:flex;align-items:center;gap:8px;font-size:var(--fs-klein)}
.hero__sterne{letter-spacing:.12em}

/* ---------- Kundenstimme zwischen den Sektionen ---------- */
.zwischenstimme{padding-block:clamp(2.75rem,5vw,4.5rem);text-align:center;border-block:1px solid var(--linie);background:var(--weiss)}
.zwischenstimme .wrap{display:grid;justify-items:center;gap:1rem;max-width:920px}
.zwischenstimme blockquote{margin:0;font:600 clamp(1.25rem,1rem + 1.2vw,2rem)/1.35 var(--head);letter-spacing:-.01em}
.zwischenstimme blockquote::before{content:"";display:block;width:44px;height:3px;border-radius:3px;margin:0 auto 1.25rem;background:linear-gradient(90deg,var(--akzent),var(--akzent-dunkel))}
.zwischenstimme__sterne{letter-spacing:.15em;margin:0}
.zwischenstimme__wer{display:flex;align-items:center;gap:12px;font-size:var(--fs-klein)}

/* ---------- Kosten-Rechner ---------- */
.rechner{display:grid;gap:var(--gap);max-width:1060px;margin-inline:auto}
@media (min-width:900px){.rechner{grid-template-columns:1.1fr .9fr}}
.rechner__eingaben{display:grid;gap:1.2rem;align-content:center;padding:clamp(1.5rem,3vw,2.5rem);border-radius:var(--r-box);background:var(--weiss);border:1px solid var(--linie);box-shadow:0 20px 50px -30px rgba(0,0,0,.08)}
.rechner__zeile{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.6rem}
.rechner__zeile label{font-weight:600;color:var(--tinte)}
.rechner__zeile output{font:700 1.125rem/1 var(--head);color:var(--akzent-dunkel);white-space:nowrap}
.rechner input[type=range]{--wert:50%;width:100%;height:8px;border-radius:8px;appearance:none;-webkit-appearance:none;cursor:pointer;
  background:linear-gradient(90deg,var(--akzent) var(--wert),var(--grau-hell) var(--wert))}
.rechner input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--weiss);border:3px solid var(--akzent);box-shadow:0 2px 10px rgba(0,0,0,.08)}
.rechner input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--weiss);border:3px solid var(--akzent)}
.rechner__ergebnis{display:grid;gap:.35rem;align-content:center;justify-items:start;padding:clamp(1.75rem,3vw,2.75rem);border-radius:var(--r-box);background:var(--anthrazit);color:var(--text-auf-dunkel);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.08)}
.rechner__zahl{font:700 clamp(2.5rem,1.8rem + 2.5vw,3.75rem)/1.05 var(--head);color:var(--weiss);letter-spacing:-.02em;margin-bottom:.4rem}
.rechner__zahl--akzent{color:var(--akzent)}
.rechner__potenzial{margin:.6rem 0 1.2rem;padding-top:1rem;border-top:1px solid var(--kante-dunkel)}
.rechner__potenzial strong{color:var(--weiss)}
.rechner__label{font-size:var(--fs-klein);color:var(--text-3);margin-top:.4rem}
.rechner__ergebnis > p:first-child strong{color:var(--weiss)}
.rechner__hinweis{margin-top:.8rem;font-size:.75rem;color:var(--text-3)}

/* ---------- Ergebnis-Zahlen ---------- */
.zahlen{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));text-align:center}
.zahl{padding:clamp(1.5rem,3vw,2.25rem);border-radius:var(--r-box);background:var(--box-dunkel);border:1px solid var(--kante-dunkel)}
.zahl__wert{font:700 clamp(3.5rem,2.2rem + 5vw,6.5rem)/1 var(--head);letter-spacing:-.03em;margin-bottom:.75rem}
.zahl__text{font-size:var(--fs-text)}

/* ---------- 3 Schritte, Mit wem, Richtiger Weg ---------- */
.schritte--drei{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.schritte--drei .schritt::before{width:52px;height:52px;font-size:1.25rem}
.branche h3{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);letter-spacing:-.015em}
.weg{margin:clamp(2.5rem,5vw,4rem) auto 0;max-width:860px;padding:clamp(1.75rem,3vw,2.5rem);border-radius:var(--r-box);background:var(--weiss);border:1px solid var(--akzent);
  box-shadow:0 0 0 1px rgba(0,0,0,.08),0 0 34px -8px rgba(0,0,0,.08);display:grid;gap:1.25rem}
.weg h3{font-size:clamp(1.375rem,1.15rem + .8vw,1.875rem);text-align:center}

/* ---------- Abschluss-CTA zentriert ---------- */
.cta-band--mitte::before{background:radial-gradient(ellipse 60% 70% at 50% 50%,rgba(28,30,33,.86),rgba(28,30,33,.55) 100%)}
.cta-band--mitte .cta-band__inhalt{flex-direction:column;justify-content:center;text-align:center;gap:1.25rem;padding-block:clamp(4rem,8vw,7rem)}
.cta-band--mitte h2{max-width:900px}
.cta-band--mitte p{font-size:var(--fs-lead)}
.cta-band--mitte .hero__ctas{justify-content:center;margin-top:.75rem}
.cta-band--mitte .btn--kontur{background:transparent;color:var(--weiss);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.cta-band--mitte .btn--kontur:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.08)}

/* ---------- Desktop: jede Sektion passt in einen Bildschirm (Maßstab 1440×900) ---------- */
@media (min-width:981px){
  :root{--sek:clamp(3.5rem,2.5rem + 2.5vw,5rem)}
  .sek-kopf{margin-bottom:2rem}
  .sek-kopf--mitte{max-width:1000px}
  .hero__inhalt{padding-block:1.75rem 2.25rem;min-height:calc(100svh - 100px)}
  .hero__text{gap:.95rem}
  .hero__claim{font-size:clamp(2.25rem,1.2rem + 2.2vw,3.125rem)}
  .hero__lead{font-size:1.1875rem}
  .hero__punkte{gap:.5rem;margin:.1rem 0 .3rem}
  .hero__punkte li{font-size:1rem}
  .hero__beweis{margin-top:.2rem;padding-top:.9rem}
  .weg{margin-top:0}
  .rechner__ergebnis{padding:1.75rem 2rem;gap:.2rem}
  .rechner__zahl{font-size:clamp(2.25rem,1.6rem + 1.6vw,3rem);margin-bottom:.2rem}
  .rechner__potenzial{margin:.5rem 0 .9rem;padding-top:.8rem}
  .rechner__eingaben{gap:1rem;padding:1.75rem 2rem}
}

/* ---------- Unschärfe am unteren Bildschirmrand (nach akquise.de: drei gestaffelte Blur-Ebenen mit Maskenverlauf) ---------- */
.unten-blur{position:fixed;left:0;right:0;bottom:0;height:150px;z-index:90;pointer-events:none;transition:opacity .4s ease}
.unten-blur span{position:absolute;inset:0;-webkit-backdrop-filter:blur(var(--b));backdrop-filter:blur(var(--b));
  -webkit-mask-image:linear-gradient(to bottom,transparent var(--von),#000 var(--bis));mask-image:linear-gradient(to bottom,transparent var(--von),#000 var(--bis))}
.unten-blur span:nth-child(1){--b:3px;--von:0%;--bis:45%}
.unten-blur span:nth-child(2){--b:7px;--von:30%;--bis:70%}
.unten-blur span:nth-child(3){--b:14px;--von:55%;--bis:100%}
.unten-blur.is-aus,body.nav-offen .unten-blur{opacity:0}
@media (max-width:767px){.unten-blur{height:100px}}

/* ---------- Bewegte Icons (Prinzip LUMA: ein Teil läuft in ruhiger Schleife) ---------- */
.ic{width:48px;height:48px;fill:none;stroke:var(--tinte);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ic .ak{stroke:var(--akzent)}
.ic .ak-f{fill:var(--akzent);stroke:none}
.ic .pkt{fill:var(--tinte);stroke:none}
.ic .ic-teil{transform-box:fill-box}
.ic-ki .ic-rad{transform-origin:50% 50%;animation:icDrehen 7s linear infinite}
.ic-ki .ic-funke{transform-origin:50% 50%;animation:icFunke 2.6s ease-in-out infinite}
.ic-web .ic-teil{transform-origin:0% 50%;animation:icZeile 4.2s var(--ease) infinite}
.ic-web .ic-w1{transform-origin:50% 50%;animation-name:icBlock}
.ic-web .ic-w2{animation-delay:.25s}.ic-web .ic-w3{animation-delay:.45s}.ic-web .ic-w4{animation-delay:.65s}
.ic-seo .ic-bar{transform-origin:50% 100%;animation:icWachsen 3.6s var(--ease) infinite}
.ic-seo .ic-b2{animation-delay:.2s}.ic-seo .ic-b3{animation-delay:.4s}
.ic-seo .ic-lupe{transform-origin:50% 50%;animation:icSuchen 3.6s ease-in-out infinite}
.ic-mail .ic-badge{transform-origin:50% 50%;animation:icBadge 2.4s var(--ease) infinite}
.ic-kal .ic-check{stroke-dasharray:1;stroke-dashoffset:1;animation:icHaken 3.2s var(--ease) infinite}
@keyframes icBadge{0%,100%{transform:scale(.75)}35%{transform:scale(1.15)}55%{transform:scale(1)}}
@keyframes icHaken{0%,10%{stroke-dashoffset:1}40%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
.ic-doc .ic-teil{transform-origin:0% 50%;animation:icZeile 4.2s var(--ease) infinite}
.ic-doc .ic-z2{animation-delay:.25s}.ic-doc .ic-z3{animation-delay:.5s}
.ic-net .ic-teil{transform-origin:50% 50%;animation:icKnoten 3s var(--ease) infinite}
.ic-net .ic-k2{animation-delay:.5s}.ic-net .ic-k3{animation-delay:1s}
@keyframes icKnoten{0%,60%,100%{transform:scale(0);opacity:0}15%,40%{transform:scale(1);opacity:1}}
@keyframes icDrehen{to{transform:rotate(360deg)}}
@keyframes icFunke{0%,100%{transform:scale(.7) rotate(0);opacity:.55}50%{transform:scale(1.1) rotate(45deg);opacity:1}}
@keyframes icZeile{0%{transform:scaleX(0)}25%,80%{transform:scaleX(1)}95%,100%{transform:scaleX(0)}}
@keyframes icBlock{0%{transform:scale(0);opacity:0}20%,80%{transform:scale(1);opacity:1}95%,100%{transform:scale(0);opacity:0}}
@keyframes icWachsen{0%,100%{transform:scaleY(.45)}40%,65%{transform:scaleY(1)}}
@keyframes icSuchen{0%,100%{transform:translate(0,0)}30%{transform:translate(-6px,4px)}65%{transform:translate(3px,-3px)}}
.kontakt__daten .ic-tel{transform-origin:50% 50%;animation:icKlingeln 3.2s ease-in-out infinite}
.kontakt__daten .ic-chat{transform-origin:50% 100%;animation:icPuls 2.8s ease-in-out infinite}
.kontakt__daten .ic-ort{animation:icHuepfen 2.4s var(--ease) infinite}
@keyframes icKlingeln{0%,60%,100%{transform:rotate(0)}64%,72%,80%{transform:rotate(-14deg)}68%,76%{transform:rotate(14deg)}}
@keyframes icPuls{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
@keyframes icHuepfen{0%,55%,100%{transform:translateY(0)}25%{transform:translateY(-5px)}40%{transform:translateY(0)}47%{transform:translateY(-2px)}}

/* ---------- Scroll-Reveal (Kit-Baustein, sparsam: Hero-Stagger, Leistungen, Ablauf) ---------- */
.js .reveal{opacity:0}
.reveal.is-visible{animation:revealFadeUp .9s var(--ease) both}
.reveal-stagger.is-visible > .reveal:nth-child(2){animation-delay:.08s}
.reveal-stagger.is-visible > .reveal:nth-child(3){animation-delay:.16s}
.reveal-stagger.is-visible > .reveal:nth-child(4){animation-delay:.24s}
.reveal-stagger.is-visible > .reveal:nth-child(5){animation-delay:.32s}
.reveal-stagger.is-visible > .reveal:nth-child(6){animation-delay:.4s}
@keyframes revealFadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .ic *,.kontakt__daten svg,.btn,.btn__pfeil{animation:none!important;transition:none!important}
  .js .reveal{opacity:1}.reveal.is-visible{animation:none}
}

/* =================== Animationen („tob dich aus", 21.10.2026) =================== */
:root{interpolate-size:allow-keywords}
.fortschritt-balken{position:fixed;top:0;left:0;right:0;height:3px;z-index:130;transform-origin:0 50%;transform:scaleX(0);pointer-events:none;
  background:linear-gradient(90deg,var(--akzent-dunkel),var(--akzent),#FFB25C);box-shadow:0 0 12px rgba(0,0,0,.08)}
.reveal.fertig{animation:none;opacity:1}
/* Überschriften Wort für Wort */
.geteilt .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.geteilt .w__i{display:inline-block;transform:translateY(110%) rotate(4deg);transform-origin:0 100%;transition:transform .9s var(--ease) calc(var(--i) * 60ms)}
.geteilt.zeigen .w__i{transform:none}
/* Glanz im Orange-Verlauf */
@supports (-webkit-background-clip:text) or (background-clip:text){
  .hl{background-image:linear-gradient(90deg,#E07502 0%,var(--akzent-dunkel) 45%,#E07502 70%,var(--akzent-dunkel) 100%);background-size:220% 100%;animation:hlGlanz 7s linear infinite}
  .dunkel .hl,.hl--dunkel{background-image:linear-gradient(90deg,#FFA640 0%,var(--akzent) 45%,#FFC27A 70%,var(--akzent) 100%)}
}
@keyframes hlGlanz{to{background-position:-220% 0}}
/* Hero: schwebende Meldungen + Neigung */
.hero__bild{transition:transform .5s var(--ease);transform-style:preserve-3d;will-change:transform}
.meldung{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;padding:.65rem .9rem .65rem .65rem;border-radius:14px;background:var(--weiss);text-align:left;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.08),0 0 0 1px rgba(42,44,48,.06);opacity:0;transform:translateY(16px) scale(.92);
  animation:meldungRein .7s var(--ease) forwards,meldungSchweben 5s ease-in-out infinite}
.meldung strong{display:block;font:600 .875rem/1.25 var(--head);color:var(--tinte)}
.meldung small{display:block;font-size:.75rem;color:var(--text-3)}
.meldung__ico{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--akzent);color:var(--weiss);box-shadow:0 0 14px -2px rgba(0,0,0,.08)}
.meldung__ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.meldung--1{top:12%;left:-9%;animation-delay:.9s,1.6s}
.meldung--2{top:46%;right:-7%;animation-delay:1.7s,2.4s;animation-duration:.7s,6s}
.meldung--3{bottom:12%;left:-5%;animation-delay:2.5s,3.2s;animation-duration:.7s,5.5s}
@keyframes meldungRein{to{opacity:1;transform:none}}
@keyframes meldungSchweben{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media (max-width:980px){.meldung{transform:scale(.85)}.meldung--1{left:2%}.meldung--2{right:2%}.meldung--3{left:4%}}
/* Lichtkegel auf Karten, folgt der Maus */
.karte,.usecase,.branche,.schmerz,.schritt,.stimme,.zahl,.rechner__eingaben,.rechner__ergebnis{position:relative;isolation:isolate}
:is(.karte,.usecase,.branche,.schmerz,.schritt,.stimme,.zahl,.rechner__eingaben,.rechner__ergebnis)::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(var(--akzent-rgb),.14),transparent 60%);opacity:0;transition:opacity .35s ease}
:is(.karte,.usecase,.branche,.schmerz,.schritt,.stimme,.zahl,.rechner__eingaben,.rechner__ergebnis):hover::after{opacity:1}
.schmerz,.karte,.zahl,.branche{transition:transform .35s var(--ease),border-color .4s ease,box-shadow .4s ease}
/* Buttons: magnetisch + Lichtstreifen */
.btn{position:relative;isolation:isolate;overflow:hidden;transition:background-color .25s ease,color .25s ease,transform .35s var(--ease)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transform:translateX(-120%);
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%)}
.btn--hell::after,.btn--kontur::after,.btn--rahmen::after{background:linear-gradient(110deg,transparent 30%,rgba(var(--akzent-rgb),.22) 50%,transparent 70%)}
.btn:hover::after{transform:translateX(120%);transition:transform .9s var(--ease)}
/* Ablauf: Nummern pulsieren nacheinander */
.schritte.is-visible .schritt::before{animation:ringPuls 3s ease-out infinite}
.schritte.is-visible .schritt:nth-child(2)::before{animation-delay:1s}
.schritte.is-visible .schritt:nth-child(3)::before{animation-delay:2s}
@keyframes ringPuls{0%{box-shadow:0 0 0 0 rgba(0,0,0,.08),0 0 18px -4px rgba(0,0,0,.08)}60%,100%{box-shadow:0 0 0 16px rgba(0,0,0,.08),0 0 18px -4px rgba(0,0,0,.08)}}
/* FAQ gleitet auf und zu */
.faq details::details-content{height:0;overflow:clip;transition:height .45s var(--ease),content-visibility .45s allow-discrete}
.faq details[open]::details-content{height:auto}
/* Dunkle Blöcke zoomen beim Hineinscrollen */
@supports (animation-timeline:view()){
  main > .dunkel,.doppel,.cta-band,.footer-block{animation:blockRein linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  @keyframes blockRein{from{transform:scale(.94) translateY(28px);opacity:.5}to{transform:none;opacity:1}}
}
@media (prefers-reduced-motion:reduce){
  .geteilt .w__i{transform:none!important;transition:none}
  .meldung{animation:none!important;opacity:1;transform:none}
  .hl,.schritte.is-visible .schritt::before,main > .dunkel,.doppel,.cta-band,.footer-block{animation:none!important}
  .btn::after{display:none}
  .faq details::details-content{transition:none}
}

/* =================== Demo-Sektionen: Chat, Workflow, Content, Dashboard =================== */
.demo__raster{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (min-width:981px){.demo__raster{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.demo--rechts .demo__text{order:2}}
.demo__text .sek-kopf{margin-bottom:1.5rem}
.demo--grau{background:var(--flaeche)}
.dunkel .demo__text .liste li{color:var(--weiss)}
.mock{position:relative;border-radius:20px;background:var(--anthrazit);color:var(--weiss);overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.08)}
.dunkel .mock{background:#232529;box-shadow:0 40px 80px -40px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.08)}
.mock--hell{background:var(--weiss);color:var(--tinte);box-shadow:0 40px 80px -40px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.08)}
.demo-badge{position:absolute;top:12px;right:12px;z-index:3;font:600 .6875rem/1 var(--head);letter-spacing:.04em;padding:.4rem .6rem;border-radius:999px;
  color:var(--akzent);border:1px solid rgba(var(--akzent-rgb),.5);background:rgba(var(--akzent-rgb),.1)}
.mock--hell .demo-badge{color:var(--akzent-dunkel);background:var(--akzent-hauch)}
.mock__kopf{display:flex;align-items:center;gap:12px;padding:.9rem 1.2rem;border-bottom:1px solid var(--kante-dunkel);font:600 .875rem/1 var(--head);padding-right:10rem}
.mock__punkte{display:flex;gap:6px}.mock__punkte i{width:10px;height:10px;border-radius:50%;background:#4A4D52}
.mock__punkte i:first-child{background:var(--akzent)}
.mock__online{display:inline-flex;align-items:center;gap:6px;font:500 .75rem var(--body);color:var(--text-auf-dunkel)}
.mock__online::before{content:"";width:8px;height:8px;border-radius:50%;background:#3DD68C;box-shadow:0 0 0 0 rgba(0,0,0,.08);animation:onlinePuls 2s infinite}
@keyframes onlinePuls{70%{box-shadow:0 0 0 8px rgba(0,0,0,.08)}}
/* Chat */
.chat__verlauf{height:380px;padding:1.2rem 1.2rem .6rem;display:flex;flex-direction:column;justify-content:flex-end;gap:.6rem;overflow:hidden;transition:opacity .4s}
.chat__verlauf.aus{opacity:0}
.blase{max-width:82%;padding:.7rem .95rem;border-radius:16px;font-size:.9rem;line-height:1.45;animation:blaseRein .45s var(--ease) both}
.blase--k{align-self:flex-end;background:var(--weiss);color:var(--tinte);border-bottom-right-radius:4px}
.blase--a{align-self:flex-start;background:var(--box-dunkel);border:1px solid var(--kante-dunkel);border-left:3px solid var(--akzent);border-bottom-left-radius:4px}
.blase--s{align-self:center;max-width:none;font:600 .75rem/1.3 var(--head);color:var(--akzent);border:1px solid rgba(var(--akzent-rgb),.5);background:rgba(var(--akzent-rgb),.1);border-radius:999px;padding:.5rem .9rem}
.blase.tippen{display:flex;gap:5px;padding:.85rem 1rem}
.blase.tippen i{width:7px;height:7px;border-radius:50%;background:var(--text-auf-dunkel);animation:tippen 1s infinite}
.blase.tippen i:nth-child(2){animation-delay:.15s}.blase.tippen i:nth-child(3){animation-delay:.3s}
@keyframes tippen{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-5px);opacity:1}}
@keyframes blaseRein{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
.chat__eingabe{display:flex;justify-content:space-between;align-items:center;margin:.4rem 1.2rem 1.2rem;padding:.75rem 1rem;border-radius:12px;background:var(--box-dunkel);border:1px solid var(--kante-dunkel);font-size:.875rem;color:var(--text-3)}
.chat__eingabe i{width:28px;height:28px;border-radius:50%;background:var(--akzent)}
/* Workflow */
.wf{padding:1.4rem 1.4rem 1.6rem;display:grid}
.wf__zaehler{margin-left:auto;font:500 .75rem var(--body);color:var(--text-auf-dunkel)}
.wf__zaehler b{color:var(--akzent);font:700 .9375rem var(--head)}
.wf__knoten{display:flex;align-items:center;gap:14px;padding:.75rem .9rem;border-radius:14px;background:var(--box-dunkel);border:1px solid var(--kante-dunkel);transition:border-color .35s,box-shadow .35s,background-color .35s}
.wf__ico{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.06);color:var(--text-auf-dunkel);transition:background-color .35s,color .35s}
.wf__ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wf__txt{display:grid;gap:2px}.wf__txt strong{font:600 .9375rem/1.2 var(--head)}.wf__txt small{font-size:.75rem;color:var(--text-3)}
.wf__status{margin-left:auto;font:600 .6875rem/1 var(--head);padding:.35rem .55rem;border-radius:999px;color:var(--text-3);border:1px solid var(--kante-dunkel)}
.wf__knoten.aktiv{border-color:var(--akzent);box-shadow:0 0 0 1px rgba(0,0,0,.08),0 0 28px -6px rgba(0,0,0,.08)}
.wf__knoten.aktiv .wf__ico,.wf__knoten.fertig .wf__ico{background:var(--akzent);color:var(--anthrazit)}
.wf__knoten.aktiv .wf__status{color:var(--akzent);border-color:var(--akzent)}
.wf__knoten.fertig .wf__status{color:#3DD68C;border-color:rgba(61,214,140,.5)}
.wf__linie{position:relative;height:22px;margin-left:calc(.9rem + 18px);width:2px;background:var(--kante-dunkel)}
.wf__linie i{position:absolute;left:50%;top:0;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--akzent);box-shadow:0 0 10px rgba(0,0,0,.08);opacity:0}
.wf__linie.fliesst{background:linear-gradient(var(--akzent),var(--akzent)) 0 0/100% 100% no-repeat,var(--kante-dunkel)}
.wf__linie.fliesst i{animation:paket .7s var(--ease) forwards}
@keyframes paket{0%{top:-4px;opacity:1}100%{top:calc(100% - 4px);opacity:0}}
/* Content-Post */
.mock--post{padding:1.25rem;display:grid;gap:.9rem}
.post__kopf{display:flex;align-items:center;gap:10px;padding-right:9rem}
.post__avatar{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 70% 70%,var(--akzent) 0 30%,var(--anthrazit) 31%)}
.post__kopf strong{display:block;font:600 .9375rem var(--head)}.post__kopf small{font-size:.75rem;color:var(--text-3)}
.post__status{margin-left:auto;font:600 .6875rem/1 var(--head);padding:.4rem .65rem;border-radius:999px;border:1px solid var(--linie);color:var(--text-2);white-space:nowrap;transition:all .3s}
.post__status[data-stufe="1"]{color:var(--akzent-dunkel);border-color:var(--akzent);background:var(--akzent-hauch)}
.post__status[data-stufe="2"]{color:var(--weiss);background:#2BA36B;border-color:#2BA36B}
.post__text{margin:0;min-height:4.4em;font-size:.9375rem;line-height:1.5;color:var(--tinte)}
.post__cursor{display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-2px;background:var(--akzent);animation:cursor 1s steps(1) infinite}
.mock--post.live .post__cursor{display:none}
@keyframes cursor{50%{opacity:0}}
.post__bild{border-radius:12px;overflow:hidden;aspect-ratio:16/7;background:var(--anthrazit)}
.post__bild img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.2s var(--ease),filter 1.2s;filter:saturate(.4) brightness(.8)}
.mock--post.live .post__bild img{transform:none;filter:none}
.post__fuss{display:flex;gap:1.25rem;font-size:.8125rem;color:var(--text-2)}
.post__fuss span:last-child{margin-left:auto;color:var(--text-3)}
.post__herz{color:var(--text-3);transition:color .3s}.mock--post.live .post__herz{color:#E0245E;animation:herz .6s var(--ease)}
@keyframes herz{50%{transform:scale(1.4)}}
.post__likes b{display:inline-block}
.post__kommentar{justify-self:start;font-size:.8125rem;padding:.55rem .8rem;border-radius:12px;background:var(--flaeche);border:1px solid var(--linie);opacity:0;transform:translateY(8px);transition:all .45s var(--ease)}
.post__kommentar.da{opacity:1;transform:none}
/* Dashboard */
.dash{padding:1.2rem;display:grid;gap:1rem}
.dash__kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
@media (min-width:600px){.dash__kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{padding:.8rem .9rem;border-radius:12px;background:var(--box-dunkel);border:1px solid var(--kante-dunkel);display:grid;gap:.3rem}
.kpi small{font-size:.6875rem;color:var(--text-3)}
.kpi strong{font:700 1.375rem/1 var(--head);color:var(--weiss);white-space:nowrap}
.kpi em{font-style:normal;font-size:.6875rem;color:#3DD68C}
.dash__chart{position:relative;height:150px;padding:.8rem .9rem 1.6rem;border-radius:12px;background:var(--box-dunkel);border:1px solid var(--kante-dunkel)}
.dash__balken{position:absolute;inset:.8rem .9rem 1.6rem;display:flex;align-items:flex-end;gap:8%}
.dash__balken i{flex:1;height:var(--h);border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--akzent),rgba(var(--akzent-rgb),.25));transform:scaleY(0);transform-origin:bottom;transition:transform 1s var(--ease)}
.mock--dash.live .dash__balken i{transform:none}
.mock--dash.live .dash__balken i:nth-child(n){transition-delay:calc(var(--n,0) * 1ms)}
.dash__linie{position:absolute;inset:.8rem .9rem 1.6rem;width:calc(100% - 1.8rem);height:calc(100% - 2.4rem);overflow:visible}
.dash__linie path{fill:none;stroke:#FFC27A;stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2s var(--ease) .4s;filter:drop-shadow(0 0 6px rgba(var(--akzent-rgb),.8))}
.mock--dash.live .dash__linie path{stroke-dashoffset:0}
.dash__achse{position:absolute;left:.9rem;right:.9rem;bottom:.45rem;display:flex;justify-content:space-between;font-size:.625rem;color:var(--text-3);word-spacing:1.6em}
.dash__feed{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.dash__feed li{display:flex;align-items:center;gap:10px;padding:.55rem .8rem;border-radius:10px;background:var(--box-dunkel);border:1px solid var(--kante-dunkel);font-size:.8125rem;animation:blaseRein .5s var(--ease) both}
.dash__feed li i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--akzent);box-shadow:0 0 8px rgba(0,0,0,.08)}
.dash__feed li small{margin-left:auto;font-size:.6875rem;color:var(--text-3);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.blase,.dash__feed li{animation:none}.dash__balken i,.dash__linie path,.post__bild img{transition:none}.mock__online::before{animation:none}}

/* =================== Demo-Oberflächen als Add-on in bestehenden Sektionen =================== */
.addon{display:grid;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
@media (min-width:981px){.addon{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
.addon__links{display:grid;gap:var(--gap);align-content:center}
/* kompakte Karten in der linken Spalte */
.addon .karten,.addon .zahlen,.addon .schritte{grid-template-columns:1fr;gap:.9rem}
.addon .karte{padding:1.1rem 1.4rem;gap:.5rem 14px;grid-template-areas:"ico titel" "ico text" "ico link";align-items:start}
.addon .karte .ic{width:40px;height:40px;align-self:start}
.addon .karte p{font-size:.9375rem;line-height:1.5}
.addon .karte__link{margin-top:0}
.addon .weitere{margin-top:.25rem}
.addon .schritt{grid-template-columns:auto 1fr;grid-template-areas:"nr titel" "nr text";gap:.3rem 1rem;padding:1.1rem 1.4rem;align-items:start}
.addon .schritt::before{grid-area:nr}
.addon .schritt h3{grid-area:titel;font-size:1.125rem}
.addon .schritt p{grid-area:text;font-size:.9375rem}
.addon .schritte--drei .schritt::before{width:44px;height:44px;font-size:1.0625rem}
.addon .zahl{display:flex;align-items:center;gap:1.25rem;padding:1.1rem 1.5rem;text-align:left}
.addon .zahl__wert{font-size:clamp(2.25rem,1.6rem + 1.8vw,3.25rem);margin:0;min-width:5.5ch}
.addon .weg{margin:0}
.addon .weg h3{text-align:left}
.addon .chat__verlauf{height:330px}
.addon .wf{padding:1rem 1.2rem 1.2rem}
.addon .wf__knoten{padding:.55rem .8rem}
.addon .wf__ico{width:34px;height:34px}
.addon .wf__linie{height:14px}

/* Hero-Foto (Desktop/Webseite Erdem/Hero_Bild.png, 4:5) */
.hero__bild{padding:0;background:var(--flaeche)}
.hero__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;border-radius:inherit;z-index:0}
@media (max-width:980px){.hero__bild{aspect-ratio:4/5}}
/* ohne Demo-Etikett: Kopfzeilen brauchen keinen Platz mehr dafür */
.mock__kopf{padding-right:1.2rem}
.post__kopf{padding-right:0}
/* FAQ immer mittig unter dem zentrierten Kopf */
.faq{margin-inline:auto}
/* Mobil: Meldungen nicht über die Person legen */
@media (max-width:980px){.meldung--1{top:3%;left:3%}.meldung--2{display:none}.meldung--3{bottom:3%;left:auto;right:3%}}

/* =================== Hero: animierte Automatisierungs-Zentrale (statt Foto) =================== */
.hero__bild--zentrale{background:
    radial-gradient(circle at 50% 43%,rgba(var(--akzent-rgb),.22),transparent 55%),
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/32px 32px,
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/32px 32px,
    var(--anthrazit);border-color:#3A3C41;overflow:hidden;container-type:inline-size}
.zentrale__svg{position:absolute;inset:0;width:100%;height:100%}
.zentrale__linie{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1.5;stroke-dasharray:4 6;animation:linieLauf 1.2s linear infinite}
@keyframes linieLauf{to{stroke-dashoffset:-20}}
.zentrale__paket{fill:var(--akzent);filter:drop-shadow(0 0 5px rgba(var(--akzent-rgb),1))}
.zentrale__ring{fill:none;stroke:rgba(var(--akzent-rgb),.55);stroke-width:1.5;transform-origin:200px 215px;animation:ringWelle 3s ease-out infinite}
.zentrale__ring--2{animation-delay:1.5s}
@keyframes ringWelle{from{transform:scale(.8);opacity:.9}to{transform:scale(2.1);opacity:0}}
.zentrale__kern{position:absolute;transform:translate(-50%,-50%);width:27%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;align-content:center;gap:.35rem;
  background:radial-gradient(circle at 35% 30%,#FFB25C,var(--akzent) 45%,var(--akzent-dunkel));box-shadow:0 0 0 6px rgba(0,0,0,.08),0 0 50px rgba(0,0,0,.08);
  animation:kernPuls 2.2s ease-in-out infinite}
.zentrale__kern small{font:600 clamp(.5rem,2.4cqi,.6875rem)/1 var(--head);color:var(--anthrazit-dunkel);letter-spacing:.02em}
.zentrale__punkte{display:flex;align-items:flex-end;gap:4px}
.zentrale__punkte i{display:block;border-radius:999px;background:var(--anthrazit-dunkel)}
.zentrale__punkte i:nth-child(1){width:12px;height:16px}.zentrale__punkte i:nth-child(2){width:9px;height:9px}.zentrale__punkte i:nth-child(3){width:5px;height:5px}
@keyframes kernPuls{50%{box-shadow:0 0 0 10px rgba(0,0,0,.08),0 0 70px rgba(0,0,0,.08)}}
.zentrale__knoten{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:7px;padding:.5rem .7rem;border-radius:12px;white-space:nowrap;
  background:#33353A;border:1px solid #46484E;color:var(--weiss);font:600 clamp(.6875rem,2.9cqi,.875rem)/1 var(--head);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.08);animation:knotenGlow 4.8s ease-in-out infinite;animation-delay:calc(var(--i) * .8s)}
.zentrale__knoten svg{width:18px;height:18px;fill:none;stroke:var(--akzent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@keyframes knotenGlow{0%,70%,100%{border-color:#46484E;box-shadow:0 10px 24px -12px rgba(0,0,0,.08)}10%,25%{border-color:var(--akzent);box-shadow:0 0 0 1px rgba(0,0,0,.08),0 0 24px -4px rgba(0,0,0,.08)}}
.zentrale__status{position:absolute;left:5%;right:5%;bottom:4%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem;border-radius:14px;
  background:rgba(28,30,33,.92);border:1px solid #46484E}
.zentrale__status small{display:block;font-size:.6875rem;color:var(--text-3)}
.zentrale__status strong{font:700 clamp(1rem,4.5cqi,1.375rem)/1.1 var(--head);color:var(--akzent)}
.zentrale__status p{margin:0;display:flex;align-items:center;gap:8px;font-size:clamp(.6875rem,3cqi,.8125rem);color:var(--weiss);text-align:right}
.zentrale__status p i{flex:none;width:8px;height:8px;border-radius:50%;background:#3DD68C;box-shadow:0 0 8px rgba(0,0,0,.08)}
.zentrale__status p.neu span{animation:blaseRein .5s var(--ease)}
/* Über uns: echtes Foto */
.ansprechpartner__bild{padding:0;overflow:hidden}
.ansprechpartner__bild img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
@media (prefers-reduced-motion:reduce){.zentrale__linie,.zentrale__ring,.zentrale__kern,.zentrale__knoten{animation:none}}

.zentrale__knoten{width:max-content}
.zentrale__knoten svg{flex:none}

/* Unsere Lösung: 4 Karten, Gegenstück zu den 4 Problemen */
.loesung__karten{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.loesung__karte{grid-template-areas:"ico" "titel" "text";grid-template-columns:1fr;align-content:start}
.loesung__karte .ic{margin-bottom:.25rem}
/* Über uns: Bild links, Text rechts */
@media (min-width:981px){.vertrauen--bild-links{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}.vertrauen--bild-links .ansprechpartner{order:-1}}
.vertrauen--bild-links .sek-kopf p:not(.eyebrow){color:var(--text-auf-dunkel)}

/* =================== Problem als Sprechblasen, Lösung ohne Boxen =================== */
@media (min-width:768px){.schmerzen{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 2rem;max-width:980px;margin-inline:auto}
  .schmerz:nth-child(even){translate:0 2.25rem}}
.schmerz{border-radius:24px 24px 24px 6px;padding:1.5rem 1.75rem;animation:blaseSchweben 6s ease-in-out infinite}
.schmerz:nth-child(2){border-radius:24px 24px 6px 24px;animation-delay:-1.5s}
.schmerz:nth-child(3){animation-delay:-3s}
.schmerz:nth-child(4){border-radius:24px 24px 6px 24px;animation-delay:-4.5s}
.schmerz h3{font-size:clamp(1.125rem,1rem + .5vw,1.375rem);line-height:1.35}
.schmerz h3::before{content:"\201E";display:block;width:auto;height:auto;background:none;box-shadow:none;margin:0 0 .1rem;
  font:700 3rem/0.6 var(--head);color:var(--akzent);text-shadow:none}
@keyframes blaseSchweben{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-6px) rotate(.6deg)}}
.schmerz.fertig{animation:blaseSchweben 6s ease-in-out infinite}
.loesung__karten{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 3.5rem;max-width:1040px;margin-inline:auto}
@media (max-width:767px){.loesung__karten{grid-template-columns:1fr}}
.loesung__karte{background:none;border:0;border-top:1px solid var(--linie);border-radius:0;box-shadow:none;padding:1.6rem 0;
  grid-template-areas:"ico titel" "ico text";grid-template-columns:auto 1fr;gap:.4rem 1.25rem;align-items:start;transform:none!important}
.loesung__karte::after{display:none}
.loesung__karte .ic{width:64px;height:64px;padding:12px;margin:0;border-radius:50%;background:var(--akzent-hauch);box-shadow:0 0 0 1px rgba(0,0,0,.08),0 0 26px -6px rgba(0,0,0,.08)}
.loesung__karte h3{font-size:clamp(1.125rem,1rem + .5vw,1.375rem);align-self:end}
@media (hover:hover){.loesung__karte:hover{border-color:var(--akzent);box-shadow:none}}

/* =================== Digitalisierung in 3 Schritten (Vorbild apex) =================== */
.drei{position:relative;isolation:isolate;overflow:hidden;margin:var(--sek) var(--block-rand);border-radius:var(--r-block);color:var(--weiss);
  padding-block:clamp(3rem,6vw,5rem);background:linear-gradient(160deg,#D06E02 0%,var(--akzent-dunkel) 55%,#9A4F00 100%);
  box-shadow:0 30px 80px -40px rgba(0,0,0,.08)}
.drei h2{color:var(--weiss);font-size:clamp(2.5rem,1.4rem + 4.4vw,5.25rem);line-height:1;letter-spacing:-.035em;max-width:14ch}
.drei__zahl{display:inline-block;color:var(--anthrazit-dunkel)}
.drei__unter{margin-top:1rem;font-size:var(--fs-lead);color:rgba(255,255,255,.85)}
.drei__unter.ph{color:rgba(255,255,255,.72)}
.drei__wasserzeichen{position:absolute;right:-4%;top:-8%;z-index:-1;display:flex;align-items:flex-end;gap:2.5vw;opacity:.09;pointer-events:none}
.drei__wasserzeichen i{display:block;border-radius:999px;background:var(--weiss)}
.drei__wasserzeichen i:nth-child(1){width:18vw;height:24vw}.drei__wasserzeichen i:nth-child(2){width:12vw;height:12vw}.drei__wasserzeichen i:nth-child(3){width:6vw;height:6vw}
.drei__karten{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));margin-top:clamp(2rem,4vw,3rem)}
.drei__karte{display:flex;flex-direction:column;gap:.75rem;padding:clamp(1.5rem,2.5vw,2rem);border-radius:var(--r-box);background:var(--weiss);color:var(--text-2);
  box-shadow:0 0 0 6px rgba(0,0,0,.08),0 24px 50px -28px rgba(0,0,0,.08)}
.drei__karte h3{color:var(--tinte);font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem)}
.drei__karte p{font-size:.9375rem}
.drei__nr{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;font:700 1.125rem/1 var(--head);color:var(--weiss);
  background:linear-gradient(140deg,#FFB25C,var(--akzent));box-shadow:0 8px 18px -8px rgba(0,0,0,.08)}
/* Mini-Animationen unter den Texten (größer, beschriftet) */
.drei__kopf{display:flex;align-items:center;gap:14px}
.drei__kopf h3{margin:0}
.drei__karte p.ph{margin-top:.1rem}
.mini{position:relative;margin-top:auto;min-height:168px;padding:14px 16px;border-radius:14px;background:var(--flaeche);border:1px solid var(--linie);overflow:hidden;display:grid;align-content:start;gap:8px}
.mini__titel{margin:0 0 2px;font:600 .6875rem/1.2 var(--head);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.mini__zeile{display:grid;grid-template-columns:132px 1fr 34px;align-items:center;gap:10px;font-size:.75rem;color:var(--text-2)}
.mini__zeile i{height:9px;width:var(--w);border-radius:9px;background:#D4D5D8}
.mini__zeile small{font:600 .6875rem/1 var(--head);color:var(--text-3);text-align:right}
.mini__zeile--treffer i{animation:trefferBalken 4.5s infinite}
.mini__zeile--treffer span,.mini__zeile--treffer small{animation:trefferFarbe 4.5s infinite}
.mini__fund{justify-self:start;margin-top:4px;padding:.35rem .6rem;border-radius:999px;font:700 .6875rem/1 var(--head);color:var(--akzent-dunkel);background:var(--akzent-hauch);border:1px solid rgba(var(--akzent-rgb),.5);
  opacity:0;transform:translateY(4px);animation:trefferText 4.5s infinite}
.mini__strahl{position:absolute;top:0;bottom:0;left:0;width:44px;background:linear-gradient(90deg,transparent,rgba(var(--akzent-rgb),.3),transparent);animation:scan 4.5s ease-in-out infinite}
@keyframes scan{0%{transform:translateX(-50px)}55%,100%{transform:translateX(420px)}}
@keyframes trefferBalken{0%,30%{background:#D4D5D8}40%,90%{background:var(--akzent);box-shadow:0 0 10px rgba(0,0,0,.08)}100%{background:#D4D5D8}}
@keyframes trefferFarbe{0%,30%{color:var(--text-2)}40%,90%{color:var(--akzent-dunkel);font-weight:700}100%{color:var(--text-2)}}
@keyframes trefferText{0%,40%{opacity:0;transform:translateY(4px)}50%,90%{opacity:1;transform:none}100%{opacity:0}}
.mini__bauzeile{display:flex;align-items:center;margin-top:10px}
.mini__bs{flex:none;display:grid;gap:3px;justify-items:center;padding:.55rem .65rem;border-radius:10px;background:var(--weiss);border:1px solid var(--linie);box-shadow:0 4px 10px -6px rgba(0,0,0,.08);animation:bsAn 4.5s infinite}
.mini__bs b{font:700 .8125rem/1 var(--head);color:var(--tinte)}
.mini__bs small{font-size:.625rem;color:var(--text-3);white-space:nowrap}
.mini__bs--mitte{background:var(--akzent);border-color:var(--akzent);animation-delay:1s}
.mini__bs--mitte b,.mini__bs--mitte small{color:var(--weiss)}
.mini__bs--3{animation-delay:2s}
.mini__verb{position:relative;flex:1;height:3px;margin:0 6px;border-radius:3px;background:var(--linie);overflow:visible}
.mini__verb::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--akzent);transform:scaleX(0);transform-origin:left;animation:verbFuellen 4.5s infinite}
.mini__verb--2::before{animation-name:verbFuellen2}
.mini__verb em{position:absolute;top:50%;left:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--akzent);box-shadow:0 0 8px rgba(0,0,0,.08);opacity:0;animation:verbPaket 4.5s infinite}
.mini__verb--2 em{animation-name:verbPaket2}
@keyframes verbFuellen{0%,8%{transform:scaleX(0)}28%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes verbFuellen2{0%,32%{transform:scaleX(0)}52%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes verbPaket{0%,55%{left:0;opacity:0}58%{opacity:1}72%{left:100%;opacity:1}75%,100%{left:100%;opacity:0}}
@keyframes verbPaket2{0%,72%{left:0;opacity:0}75%{opacity:1}89%{left:100%;opacity:1}92%,100%{left:100%;opacity:0}}
@keyframes bsAn{0%,15%{box-shadow:0 4px 10px -6px rgba(0,0,0,.08)}25%,40%{box-shadow:0 0 0 3px rgba(0,0,0,.08),0 0 16px rgba(0,0,0,.08)}55%,100%{box-shadow:0 4px 10px -6px rgba(0,0,0,.08)}}
.mini__status{margin:10px 0 0;display:flex;align-items:center;gap:8px;font:600 .75rem/1.2 var(--head);color:var(--tinte)}
.mini__status i{width:8px;height:8px;border-radius:50%;background:#2BA36B;box-shadow:0 0 0 0 rgba(0,0,0,.08);animation:onlinePuls 2s infinite}
.mini__diagramm{position:relative;height:96px}
.mini__diagramm svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mini__kurve{fill:none;stroke:var(--akzent);stroke-width:3;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:kurve 4.5s var(--ease) infinite;filter:drop-shadow(0 0 4px rgba(var(--akzent-rgb),.6))}
@keyframes kurve{0%,8%{stroke-dashoffset:1}55%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
.mini__saeulen{position:absolute;inset:0;display:flex;align-items:flex-end;gap:7%}
.mini__saeulen i{flex:1;height:var(--h);border-radius:4px 4px 1px 1px;background:rgba(var(--akzent-rgb),.25);transform-origin:bottom;animation:saeule 4.5s var(--ease) infinite}
.mini__saeulen i:nth-child(2){animation-delay:.1s}.mini__saeulen i:nth-child(3){animation-delay:.2s}.mini__saeulen i:nth-child(4){animation-delay:.3s}.mini__saeulen i:nth-child(5){animation-delay:.4s}.mini__saeulen i:nth-child(6){animation-delay:.5s}
@keyframes saeule{0%,5%{transform:scaleY(.12)}45%,90%{transform:scaleY(1)}100%{transform:scaleY(.12)}}
.mini__pfeil{position:absolute;right:-2px;top:-10px;font:700 1.375rem/1 var(--head);color:var(--akzent);animation:pfeilHoch 4.5s infinite}
@keyframes pfeilHoch{0%,40%{opacity:0;transform:translate(-6px,6px)}55%,90%{opacity:1;transform:none}100%{opacity:0}}
.mini__achse{margin:0;display:flex;justify-content:space-between;font-size:.625rem;color:var(--text-3)}
/* Unsere Lösung: großer zentrierter Text */
.statement-wrap{display:grid;justify-items:center;gap:1.5rem;text-align:center;max-width:1060px}
.statement{font:600 clamp(1.375rem,1rem + 1.5vw,2.25rem)/1.4 var(--head);letter-spacing:-.015em;color:var(--tinte)}
@media (prefers-reduced-motion:reduce){.schmerz,.mini *{animation:none!important}.mini__lin,.mini__kurve{stroke-dashoffset:0}}

/* =================== Ruhiger: 3-Schritte-Animationen einmal, langsam, nacheinander =================== */
.drei .mini *,.drei .mini *::before{animation:none}
.mini__strahl{opacity:0}
.mini__saeulen i{transform:scaleY(.12)}
.mini__pfeil,.mini__status{opacity:0}
.mini__verb em{display:none}
.spielt .mini__strahl{animation:scanEinmal 3s ease-in-out var(--d) forwards}
@keyframes scanEinmal{0%{opacity:1;transform:translateX(-50px)}85%{opacity:1}100%{opacity:0;transform:translateX(420px)}}
.spielt .mini__zeile--treffer i{animation:zuOrange .8s ease calc(var(--d) + 1.6s) forwards}
.spielt .mini__zeile--treffer span,.spielt .mini__zeile--treffer small{animation:zuOrangeText .8s ease calc(var(--d) + 1.6s) forwards}
.spielt .mini__fund{animation:einblenden .9s var(--ease) calc(var(--d) + 2.2s) forwards}
@keyframes zuOrange{to{background:var(--akzent);box-shadow:0 0 10px rgba(0,0,0,.08)}}
@keyframes zuOrangeText{to{color:var(--akzent-dunkel);font-weight:700}}
@keyframes einblenden{to{opacity:1;transform:none}}
.spielt .mini__verb--1::before{animation:fuellenEinmal 1.4s var(--ease) calc(var(--d) + .4s) forwards}
.spielt .mini__verb--2::before{animation:fuellenEinmal 1.4s var(--ease) calc(var(--d) + 1.6s) forwards}
@keyframes fuellenEinmal{to{transform:scaleX(1)}}
.spielt .mini__status{animation:einblenden .9s ease calc(var(--d) + 2.8s) forwards}
.spielt .mini__status i{animation:onlinePuls 2.4s calc(var(--d) + 3.6s) 2}
.spielt .mini__saeulen i{animation:wachsEinmal 1.6s var(--ease) calc(var(--d) + .3s) forwards}
.spielt .mini__saeulen i:nth-child(2){animation-delay:calc(var(--d) + .45s)}.spielt .mini__saeulen i:nth-child(3){animation-delay:calc(var(--d) + .6s)}
.spielt .mini__saeulen i:nth-child(4){animation-delay:calc(var(--d) + .75s)}.spielt .mini__saeulen i:nth-child(5){animation-delay:calc(var(--d) + .9s)}.spielt .mini__saeulen i:nth-child(6){animation-delay:calc(var(--d) + 1.05s)}
@keyframes wachsEinmal{to{transform:scaleY(1)}}
.spielt .mini__kurve{animation:kurveEinmal 2.6s var(--ease) calc(var(--d) + .5s) forwards}
@keyframes kurveEinmal{to{stroke-dashoffset:0}}
.spielt .mini__pfeil{animation:einblenden .8s ease calc(var(--d) + 2.8s) forwards}
.final .mini__zeile--treffer i{background:var(--akzent)}.final .mini__fund,.final .mini__status,.final .mini__pfeil{opacity:1;transform:none}
.final .mini__verb::before,.final .mini__saeulen i{transform:none}.final .mini__kurve{stroke-dashoffset:0}
/* allgemein ruhiger */
.schmerz,.schmerz.fertig{animation:blaseRuhig 10s ease-in-out infinite}
@keyframes blaseRuhig{0%,100%{transform:translateY(0) rotate(-.3deg)}50%{transform:translateY(-3px) rotate(.3deg)}}
.hl{animation-duration:14s}
.schmerz h3::before{margin-bottom:.45rem}

/* =================== Fix 22.10.: Problem 5 Blasen, 3 Schritte hell + Schleife =================== */
.schmerz p{color:var(--text-auf-dunkel);font-size:.9375rem;line-height:1.55}
.schmerz__zu{color:var(--akzent);font-weight:700;margin-left:.08em}
@media (min-width:900px){
  .schmerzen{display:flex;flex-wrap:wrap;justify-content:center;gap:1.25rem;max-width:1180px;margin-inline:auto}
  .schmerz{flex:0 1 calc((100% - 2.5rem) / 3)}
  .schmerz:nth-child(even){translate:none}
  .schmerz:nth-child(2),.schmerz:nth-child(5){translate:0 1.25rem}
}
/* 3 Schritte: hell statt orange */
.drei{background:var(--flaeche);color:var(--text-2);border:1px solid var(--linie);box-shadow:none}
.drei h2{color:var(--tinte)}
.drei__zahl{color:var(--akzent-schrift)}
.drei__unter,.drei__unter.ph{color:var(--text-2)}
.drei__wasserzeichen{opacity:.05}
.drei__wasserzeichen i{background:var(--tinte)}
.drei__karte{box-shadow:0 1px 2px rgba(42,44,48,.04),0 18px 40px -26px rgba(0,0,0,.08);border:1px solid var(--linie)}
.drei .mini{background:var(--flaeche)}
/* sanftes Aus- und Einblenden zwischen den Durchläufen */
.drei .mini{transition:opacity .6s ease}
.drei__karten.ausblenden .mini{opacity:0}
/* 3 Schritte hell: kein Wasserzeichen, Bausteine passen in die Karte */
.drei__wasserzeichen{display:none}
.mini__bauzeile{min-width:0}
.mini__bs{flex:0 1 auto;min-width:0;padding:.5rem .45rem}
.mini__bs small{white-space:normal;text-align:center;line-height:1.2;max-width:9ch}
.mini__verb{min-width:14px}
/* Sprechblasen: rund, mit Zipfel, mehr Luft; Anführungszeichen direkt am Text */
.schmerz h3::before{content:none}
.schmerz__auf,.schmerz__zu{color:var(--akzent)}
.schmerz__auf{margin-right:.04em}
.schmerz,.schmerz:nth-child(2),.schmerz:nth-child(4){border-radius:28px;padding:1.75rem 2rem 1.9rem}
.schmerz h3{font-size:clamp(1.125rem,1rem + .5vw,1.3125rem);line-height:1.4}
/* Zipfel (ersetzt hier den Lichtkegel) */
.schmerz::after{content:"";inset:auto;left:2.25rem;bottom:-9px;width:18px;height:18px;opacity:1;z-index:0;background:var(--box-dunkel);
  border:1px solid var(--kante-dunkel);border-top:0;border-left:0;border-radius:0 0 5px 0;transform:rotate(45deg)}
.schmerz:nth-child(even)::after{left:auto;right:2.25rem}
@media (min-width:900px){.schmerzen{gap:2.75rem 2rem}.schmerz{flex-basis:calc((100% - 4rem) / 3)}}
@media (max-width:899px){.schmerzen{gap:1.75rem}}

/* =================== 3 Schritte v2: höhere, nach unten laufende Animationen =================== */
.drei{padding-block:clamp(2.5rem,4.5vw,3.75rem)}
.drei h2{font-size:clamp(2.25rem,1.3rem + 3.4vw,4.25rem);max-width:none}
.drei__karten{margin-top:clamp(1.5rem,3vw,2.25rem)}
.mini--v{min-height:0;gap:10px;padding:16px 18px}
.v-liste{display:grid;gap:7px;position:relative}
.v-zeile{display:flex;justify-content:space-between;align-items:center;padding:.4rem .6rem;border-radius:8px;background:var(--weiss);border:1px solid var(--linie);font-size:.75rem;color:var(--text-2);transition:none}
.v-zeile b{font:600 .6875rem/1 var(--head);color:var(--text-3)}
.mini--scan2{position:relative}
.v-strahl{position:absolute;left:0;right:0;top:0;height:46px;background:linear-gradient(180deg,transparent,rgba(var(--akzent-rgb),.28),transparent);opacity:0;pointer-events:none}
.v-fazit{margin:2px 0 0;justify-self:start;padding:.35rem .65rem;border-radius:999px;font:700 .6875rem/1 var(--head);color:var(--akzent-dunkel);background:var(--akzent-hauch);border:1px solid rgba(var(--akzent-rgb),.5);opacity:0;transform:translateY(4px)}
.v-fazit--gruen{color:#1F7A4F;background:#E8F7EF;border-color:rgba(43,163,107,.45)}
.v-strecke{position:relative;display:grid;gap:12px;padding-left:2px}
.v-schiene{position:absolute;left:12px;top:12px;bottom:12px;width:2px;background:var(--linie)}
.v-schiene em{position:absolute;inset:0;background:var(--akzent);transform:scaleY(0);transform-origin:top}
.v-station{position:relative;display:flex;align-items:center;gap:12px;font-size:.8125rem;color:var(--text-2)}
.v-punkt{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--weiss);border:2px solid var(--linie);z-index:1}
.v-punkt svg{width:13px;height:13px;fill:none;stroke:var(--weiss);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.v-woche{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:10px;font-size:.75rem;color:var(--text-2)}
.v-woche i{height:12px;width:var(--w);border-radius:6px;background:linear-gradient(90deg,rgba(var(--akzent-rgb),.35),var(--akzent));transform:scaleX(0);transform-origin:left}
/* Ablauf je Karte: alles nach unten gehend, Startversatz --d pro Karte */
.drei__karte.spielt .v-strahl{animation:strahlRunter 3.2s ease-in-out var(--d) forwards}
@keyframes strahlRunter{0%{opacity:1;transform:translateY(20px)}88%{opacity:1}100%{opacity:0;transform:translateY(250px)}}
.drei__karte.spielt .v-zeile--treffer{animation:zeileTreffer .7s ease calc(var(--d) + .55s * var(--n)) forwards}
@keyframes zeileTreffer{to{background:var(--akzent-hauch);border-color:var(--akzent);color:var(--akzent-dunkel);font-weight:700}}
.drei__karte.spielt .v-zeile--treffer b{animation:zuOrangeText .7s ease calc(var(--d) + .55s * var(--n)) forwards}
.drei__karte.spielt .v-fazit{animation:einblenden .8s var(--ease) calc(var(--d) + 3.4s) forwards}
.drei__karte.spielt .v-schiene em{animation:fuellenRunter 3.4s var(--ease) calc(var(--d) + .3s) forwards}
@keyframes fuellenRunter{to{transform:scaleY(1)}}
.drei__karte.spielt .v-punkt{animation:punktAn .5s ease calc(var(--d) + .3s + .75s * var(--n)) forwards}
.drei__karte.spielt .v-punkt svg{animation:einblenden .4s ease calc(var(--d) + .5s + .75s * var(--n)) forwards}
.drei__karte.spielt .v-station span:last-child{animation:zuTinte .5s ease calc(var(--d) + .3s + .75s * var(--n)) forwards}
@keyframes punktAn{to{background:var(--akzent);border-color:var(--akzent);box-shadow:0 0 10px rgba(0,0,0,.08)}}
@keyframes zuTinte{to{color:var(--tinte);font-weight:600}}
.drei__karte.spielt .v-woche i{animation:wachsX .9s var(--ease) calc(var(--d) + .3s + .5s * var(--n)) forwards}
@keyframes wachsX{to{transform:scaleX(1)}}
.drei__karte.spielt .mini--zeit .v-fazit{animation-delay:calc(var(--d) + 3.6s)}
.final .v-zeile--treffer{background:var(--akzent-hauch);border-color:var(--akzent);color:var(--akzent-dunkel)}
.final .v-fazit{opacity:1;transform:none}.final .v-schiene em,.final .v-woche i{transform:none}
.final .v-punkt{background:var(--akzent);border-color:var(--akzent)}.final .v-punkt svg{opacity:1}

/* =================== Tool-Marquee: weiße Logos, nach außen ausblendend (Vorbild LUMA) =================== */
.tools{margin:0 var(--block-rand) var(--sek);padding:clamp(1.75rem,3vw,2.5rem) 0;border-radius:var(--r-block);background:var(--anthrazit);overflow:hidden}
.tools__titel{margin:0 0 clamp(1.1rem,2vw,1.5rem);text-align:center;font:700 .72rem/1 var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.tools__sicht{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
.tools__band{display:flex;align-items:center;gap:clamp(48px,5vw,80px);width:max-content;animation:toolsLaufen 48s linear infinite}
.tools__band img{flex:none;height:30px;width:auto;filter:brightness(0) invert(1);opacity:.85;-webkit-user-drag:none;user-select:none}
.tools__sicht:hover .tools__band{animation-play-state:paused}
@keyframes toolsLaufen{to{transform:translateX(calc(-50% - clamp(48px,5vw,80px) / 2))}}
@media (max-width:767px){.tools__band img{height:24px}}
@media (prefers-reduced-motion:reduce){.tools__band{animation:none}}
/* 3 Schritte: auf einen Bildschirm einpassen */
.drei h2{font-size:clamp(2.25rem,1.3rem + 3vw,3.75rem)}
.v-liste{gap:5px}
.v-zeile{padding:.3rem .6rem}
.v-strecke{gap:8px}
.mini--v{gap:8px;padding:14px 16px}
/* 3 Schritte: Animationen bündig, füllen die Karte */
.drei__karte .mini{margin-top:.25rem;flex:1}
/* Marquee: Logo + Name in Weiß */
.tool{flex:none;display:flex;align-items:center;gap:10px;font:600 1.0625rem/1 var(--head);color:var(--weiss);opacity:.85;white-space:nowrap}
.tool img{height:26px;width:auto;filter:brightness(0) invert(1)}
.tools__band{gap:clamp(40px,4.5vw,72px)}
@media (max-width:767px){.tool{font-size:.9375rem}.tool img{height:20px}}

/* =================== 3 Schritte v3: ruhige schwebende Elemente statt Abläufe =================== */
.drei__nr{flex:none;width:44px;min-width:44px;height:44px}
.schwebe{position:relative;flex:1;min-height:200px;margin-top:.5rem;border-radius:14px;background:var(--flaeche);border:1px solid var(--linie);overflow:hidden}
.schwebe__chip{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:.55rem .85rem;border-radius:999px;white-space:nowrap;
  background:var(--weiss);border:1px solid var(--linie);font:600 .8125rem/1 var(--head);color:var(--tinte);
  box-shadow:0 12px 26px -16px rgba(0,0,0,.08);animation:schweben 7s ease-in-out infinite}
.schwebe__chip i{width:8px;height:8px;border-radius:50%;background:var(--akzent);box-shadow:0 0 8px rgba(0,0,0,.08)}
.schwebe__chip--1{top:16%;left:8%}
.schwebe__chip--2{top:44%;right:7%;animation-duration:8.5s;animation-delay:-2s}
.schwebe__chip--3{bottom:14%;left:14%;animation-duration:9.5s;animation-delay:-4s}
.schwebe__chip--akzent{background:var(--akzent-hauch);border-color:rgba(var(--akzent-rgb),.55);color:var(--akzent-dunkel)}
@keyframes schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (prefers-reduced-motion:reduce){.schwebe__chip{animation:none}}

/* 3 Schritte v4: jede Karte eigene schwebende Szene */
.schwebe > *{position:absolute;animation:schweben 8s ease-in-out infinite}
.s-rund{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--weiss);border:1px solid var(--linie);box-shadow:0 14px 28px -16px rgba(0,0,0,.08)}
.s-rund svg,.s-kachel svg{width:26px;height:26px;fill:none;stroke:var(--akzent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.s-rund--akzent{background:var(--akzent);border-color:var(--akzent);box-shadow:0 14px 30px -12px rgba(0,0,0,.08)}
.s-rund--akzent svg{stroke:var(--weiss)}
.s-etikett{padding:.55rem .85rem;border-radius:999px;background:var(--weiss);border:1px solid var(--linie);font:600 .8125rem/1 var(--head);color:var(--tinte);white-space:nowrap;box-shadow:0 12px 26px -16px rgba(0,0,0,.08)}
.s-etikett--akzent{background:var(--akzent-hauch);border-color:rgba(var(--akzent-rgb),.55);color:var(--akzent-dunkel)}
/* 1: Uhr, Etiketten, Lupe */
.s-uhr{top:12%;left:9%;animation-duration:9s}
.s-et1{top:20%;right:8%;animation-duration:7.5s;animation-delay:-2s}
.s-et2{top:50%;left:30%;animation-duration:8.5s;animation-delay:-4s}
.s-lupe{bottom:9%;right:14%;width:52px;height:52px;animation-duration:7s;animation-delay:-1s}
/* 2: App-Kacheln im Dreieck */
.s-linien{inset:0;width:100%;height:100%;animation:none}
.s-linien path{fill:none;stroke:var(--akzent);stroke-width:1.2;stroke-dasharray:3 4;vector-effect:non-scaling-stroke;opacity:.6}
.s-kachel{display:grid;justify-items:center;gap:5px;padding:.7rem .8rem;border-radius:14px;background:var(--weiss);border:1px solid var(--linie);box-shadow:0 14px 28px -16px rgba(0,0,0,.08);transform:translate(-50%,-50%)}
.s-kachel b{font:700 .75rem/1 var(--head);color:var(--tinte)}
.s-kachel--akzent{background:var(--akzent);border-color:var(--akzent)}
.s-kachel--akzent svg{stroke:var(--weiss)}.s-kachel--akzent b{color:var(--weiss)}
.s-k1{left:24%;top:34%;animation-name:schwebenMitte;animation-duration:8s}
.s-k2{left:50%;top:72%;animation-name:schwebenMitte;animation-duration:9.5s;animation-delay:-3s}
.s-k3{left:76%;top:34%;animation-name:schwebenMitte;animation-duration:7.5s;animation-delay:-5s}
@keyframes schwebenMitte{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 7px))}}
/* 3: Diagramm, Pfeil, Etikett */
.s-diagramm{top:10%;left:9%;display:grid;gap:6px;width:46%;padding:.7rem .8rem;border-radius:14px;background:var(--weiss);border:1px solid var(--linie);box-shadow:0 14px 28px -16px rgba(0,0,0,.08);animation-duration:9s}
.s-diagramm small{font:600 .625rem/1 var(--head);letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)}
.s-balken{display:flex;align-items:flex-end;gap:6%;height:58px}
.s-balken i{flex:1;height:var(--h);border-radius:4px 4px 1px 1px;background:linear-gradient(180deg,var(--akzent),rgba(var(--akzent-rgb),.35))}
.s-hoch{top:16%;right:12%;animation-duration:7.5s;animation-delay:-3s}
.s-et3{bottom:11%;right:9%;animation-duration:8.5s;animation-delay:-1.5s}
@media (prefers-reduced-motion:reduce){.schwebe > *{animation:none}}

/* =================== Mit wem wir arbeiten: breite Boxen untereinander =================== */
.zielboxen{display:grid;gap:var(--gap)}
.zielbox{display:grid;gap:1.25rem 3rem;align-items:start;padding:clamp(1.5rem,3vw,2rem) clamp(1.5rem,3vw,2.5rem);border-radius:var(--r-box);background:var(--weiss);border:1px solid var(--linie);
  box-shadow:0 1px 2px rgba(42,44,48,.04),0 16px 36px -26px rgba(0,0,0,.08);transition:border-color .4s ease,box-shadow .4s ease}
@media (min-width:900px){.zielbox{grid-template-columns:minmax(0,.7fr) minmax(0,2.3fr)}}
@media (hover:hover){.zielbox:hover{border-color:var(--akzent);box-shadow:0 0 0 1px rgba(0,0,0,.08),0 0 26px -4px rgba(0,0,0,.08)}}
.zielbox__kopf{display:flex;align-items:center;gap:14px}
.zielbox__kopf .ic{flex:none;width:44px;height:44px}
.zielbox__kopf h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.625rem);letter-spacing:-.015em}
.zielbox__text{display:grid;gap:1rem 2.5rem}
@media (min-width:768px){.zielbox__text{grid-template-columns:1fr 1fr}}
.zielbox__text p{font-size:.9375rem;line-height:1.6;margin:0}
.zielbox__label{font:700 .6875rem/1.2 var(--head)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:.45rem!important}
.zielbox__label--akzent{color:var(--akzent-dunkel)}
.nicht-dabei{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-top:var(--gap);
  padding:clamp(1.5rem,3vw,2rem) clamp(1.5rem,3vw,2.5rem);border-radius:var(--r-box);border:1.5px dashed rgba(var(--akzent-rgb),.7);background:var(--weiss)}
.nicht-dabei h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.625rem);margin-bottom:.35rem}
.nicht-dabei p{margin:0}
/* Fortsetzung einer geteilten Sektion: ohne Trennlinie, wenig Abstand oben */
.sek.sek--weiter{border-top:0!important;padding-top:0}
#mit-wem{padding-bottom:var(--gap)}
/* Für wen, Teil 2: Foto links, Box + "Keiner der genannten" rechts */
.weiter-raster{display:grid;gap:clamp(1.5rem,3vw,2.5rem);align-items:center}
@media (min-width:981px){.weiter-raster{grid-template-columns:minmax(0,.36fr) minmax(0,1fr)}}
.weiter-bild{margin:0;border-radius:var(--r-box);overflow:hidden;aspect-ratio:4/5;max-width:420px;
  box-shadow:0 0 0 6px rgba(0,0,0,.08),0 0 0 7px rgba(0,0,0,.08),0 30px 60px -30px rgba(0,0,0,.08)}
.weiter-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.weiter-inhalt{display:grid;gap:var(--gap)}
.weiter-inhalt .nicht-dabei{margin-top:0}
@media (min-width:900px){.weiter-inhalt .zielbox{grid-template-columns:1fr}}

/* Für wen: gespiegelter Zickzack, gleich große Fotos (symmetrisch) */
.zick{display:grid;gap:clamp(1.5rem,3vw,2.5rem);align-items:center}
@media (min-width:981px){.zick{grid-template-columns:minmax(0,.42fr) minmax(0,1fr)}.zick--gespiegelt{grid-template-columns:minmax(0,1fr) minmax(0,.42fr)}}
.zick__bild{margin:0;border-radius:var(--r-box);overflow:hidden;aspect-ratio:4/5;width:100%;
  box-shadow:0 0 0 6px rgba(0,0,0,.08),0 0 0 7px rgba(0,0,0,.08),0 30px 60px -30px rgba(0,0,0,.08)}
.zick__bild img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.zick .zielbox{grid-template-columns:1fr}
.zick .nicht-dabei{margin-top:0}
.zick .zielbox{padding:1.3rem 1.75rem;gap:.9rem}
.zick .zielbox__text p{font-size:.9rem;line-height:1.55}
/* Für wen v3: drei Boxen links, ein Bild rechts (gleiche Höhe), "Keiner der genannten" über volle Breite */
#mit-wem{padding-bottom:var(--sek)}
#mit-wem .sek-kopf{margin-bottom:1.75rem}
.fw{display:grid;gap:var(--gap);align-items:stretch}
@media (min-width:981px){.fw{grid-template-columns:minmax(0,1fr) minmax(0,.5fr)}}
.fw .zielboxen{gap:14px}
.fw .zielbox{grid-template-columns:1fr;gap:.6rem;padding:1.05rem 1.5rem}
.fw .zielbox__kopf .ic{width:34px;height:34px}
.fw .zielbox__kopf h3{font-size:1.1875rem}
.fw .zielbox__text{gap:.5rem 2rem}
.fw .zielbox__text p{font-size:.875rem;line-height:1.5}
.fw .zielbox__label{margin-bottom:.25rem!important}
.fw__bild{margin:0;border-radius:var(--r-box);overflow:hidden;min-height:320px;
  box-shadow:0 0 0 6px rgba(0,0,0,.08),0 0 0 7px rgba(0,0,0,.08),0 30px 60px -30px rgba(0,0,0,.08)}
.fw__bild img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
#mit-wem .nicht-dabei{margin-top:var(--gap);padding:1.1rem 1.5rem}
#mit-wem .nicht-dabei h3{font-size:1.25rem;margin-bottom:.2rem}
/* Für wen v3b: Branche links, zwei kurze Sätze rechts */
@media (min-width:981px){.fw .zielbox{grid-template-columns:200px 1fr;align-items:center;gap:1.5rem}}
.fw .zielbox__text{grid-template-columns:1fr!important;gap:.45rem}
.fw .zielbox__text p{font-size:.9rem;line-height:1.5}
.zielbox__marke{display:inline-block;margin-right:.5rem;padding:.2rem .45rem;border-radius:6px;font:700 .625rem/1.2 var(--head);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);background:var(--flaeche);vertical-align:1px}
.zielbox__marke--akzent{color:var(--akzent-dunkel);background:var(--akzent-hauch)}
#mit-wem{padding-block:clamp(3rem,2.5rem + 2vw,4rem)}
#mit-wem .sek-kopf{max-width:1100px;margin-bottom:1.5rem}
#mit-wem .sek-kopf p:not(.eyebrow){font-size:1.125rem}
.fw .zielbox{padding:.9rem 1.5rem}
.fw .zielboxen{gap:12px}
#mit-wem .nicht-dabei{padding:.9rem 1.5rem}
/* Für wen: Engpass und Lösung klar getrennt */
.fw .zielbox__text{gap:6px}
.fw .zielbox__text p{padding:.4rem .7rem;border-radius:8px;line-height:1.45}
.fw .zb-engpass{background:var(--flaeche);border-left:3px solid #C4C6CA}
.fw .zb-loesung{background:var(--flaeche);border-left:3px solid var(--akzent);color:var(--tinte)}
.zielbox__marke{background:none;padding:0;margin-right:.45rem}
.zielbox__marke i{display:inline-grid;place-items:center;width:15px;height:15px;margin-right:5px;border-radius:50%;font-style:normal;font-size:.625rem;line-height:1;vertical-align:-2px;color:var(--weiss);background:#9A9DA3}
.zielbox__marke--akzent{background:none}
.zielbox__marke--akzent i{background:var(--akzent)}
.fw .zielbox{padding:.75rem 1.4rem}
#mit-wem{padding-block:2.75rem 3rem}

/* Chronologisches Erscheinen (ersetzt .reveal): Startzustand nur mit JS */
.js .seq{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .seq.seq-an{opacity:1;transform:none}
.js .seq.geteilt{opacity:1;transform:none}
.js .seq.fertig{transition:opacity .7s var(--ease),transform .35s var(--ease)}
@media (prefers-reduced-motion:reduce){.js .seq{opacity:1;transform:none;transition:none}}

/* =================== Sprechblasen: Hover =================== */
.schmerz{transition:transform .45s var(--ease),scale .45s var(--ease),background-color .4s ease,border-color .4s ease,box-shadow .45s ease}
.schmerz::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(var(--akzent-rgb),.2),transparent 65%)}
.schmerz>h3{position:relative;z-index:2}
.schmerz::after{transition:background-color .4s ease,border-color .4s ease}
.schmerz__auf,.schmerz__zu{display:inline-block;transition:transform .45s var(--ease),text-shadow .45s ease}
@media (hover:hover){
  .schmerz.fertig:hover{animation:none;scale:1.04;background-color:#3B3D43;border-color:rgba(var(--akzent-rgb),.75);
    box-shadow:0 18px 44px -14px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.08),0 0 36px -6px rgba(0,0,0,.08)}
  .schmerz.fertig:hover::before{opacity:1}
  .schmerz.fertig:hover::after{background-color:#3B3D43;border-color:rgba(var(--akzent-rgb),.75)}
  .schmerz.fertig:hover .schmerz__auf{transform:translate(-2px,-3px) scale(1.25)}
  .schmerz.fertig:hover .schmerz__zu{transform:translate(2px,-3px) scale(1.25)}
  .schmerz.fertig:hover :is(.schmerz__auf,.schmerz__zu){text-shadow:none}
}
@media (prefers-reduced-motion:reduce){.schmerz.fertig:hover{scale:none;transform:none!important}}
.schmerz__ende{white-space:nowrap}

/* =================== Mit wem: Branche als Hauptzeile, Text ruhig =================== */
.fw .zielbox{padding:1.15rem 1.6rem}
.fw .zielbox__kopf{gap:12px}
.fw .zielbox__kopf .ic{width:38px;height:38px}
.fw .zielbox__kopf h3{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);line-height:1.2;color:var(--tinte)}
@media (min-width:981px){.fw .zielbox{grid-template-columns:250px 1fr;gap:1.75rem}
  .fw .zielbox__text{padding-left:1.75rem;border-left:1px solid var(--linie)}}
.fw .zielbox__text{gap:.55rem}
.fw .zielbox__text p,.fw .zb-engpass,.fw .zb-loesung{padding:0;background:none;border:0;border-radius:0;font-size:.9rem;line-height:1.5}
.fw .zb-engpass{color:var(--text-2)}
.fw .zb-loesung{color:var(--tinte)}
.fw .zielbox__marke{display:inline-block;margin:0 .5rem 0 0}

/* =================== 3 Schritte: Workflow-Foto neben der Überschrift =================== */
.drei__oben{display:grid;gap:1.5rem 3rem;align-items:center}
@media (min-width:981px){.drei__oben{grid-template-columns:minmax(0,1fr) minmax(0,520px)}}
.drei__bild{margin:0;border-radius:var(--r-box);overflow:hidden;aspect-ratio:1122/590;
  box-shadow:0 0 0 6px rgba(0,0,0,.08),0 0 0 7px rgba(0,0,0,.08),0 30px 60px -30px rgba(0,0,0,.08)}
.drei__bild img{width:100%;height:100%;object-fit:cover;display:block}

/* =================== 3 Schritte v5: Karten als L, Foto rechts in voller Höhe =================== */
.drei__oben{display:none}
.drei__raster{display:grid;gap:var(--gap)}
.drei__kopftext h2{margin:0}
.drei__bild{aspect-ratio:auto;min-height:420px}
.drei__bild img{object-position:62% 30%}
@media (min-width:981px){
  .drei__raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.82fr);grid-template-areas:"kopf k1 bild" "k2 k3 bild";gap:20px}
  .drei__kopftext{grid-area:kopf;align-self:center;padding-right:1rem}
  .drei__raster>.drei__karte:nth-of-type(1){grid-area:k1}
  .drei__raster>.drei__karte:nth-of-type(2){grid-area:k2}
  .drei__raster>.drei__karte:nth-of-type(3){grid-area:k3}
  .drei__bild{grid-area:bild;min-height:0;height:100%}
  .drei__kopftext h2{font-size:clamp(2.25rem,1rem + 2vw,2.625rem)}
  .drei__kopftext .drei__unter{font-size:1.0625rem;line-height:1.55}
  .drei__raster .drei__karte{padding:1.4rem 1.5rem;gap:.6rem}
  .drei__raster .drei__karte h3{font-size:1.25rem}
  .drei__raster .drei__karte p{font-size:.875rem;line-height:1.5}
  .drei__raster .schwebe{min-height:150px}
}

/* =================== 3 Schritte v6: Titel Mitte, Karten als L mit Pfeilen =================== */
.drei__raster .drei__karte{position:relative}
.drei__raster .drei__karte:has(.drei__pfeil){z-index:2}
.drei__pfeil{position:absolute;z-index:3;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,#F59A2E,var(--akzent));box-shadow:0 0 0 6px rgba(0,0,0,.08),0 10px 24px -8px rgba(0,0,0,.08)}
.drei__pfeil svg{width:20px;height:20px;fill:none;stroke:var(--weiss);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.drei__pfeil--runter,.drei__pfeil--rechts{left:50%;bottom:-22px;margin-left:-22px}
.drei__pfeil svg{transform:rotate(90deg)}
.drei__pfeil svg{animation:pfeilRunter 2.4s ease-in-out infinite}
@keyframes pfeilRunter{0%,100%{translate:0 -2px}50%{translate:0 3px}}
@keyframes pfeilRechts{0%,100%{translate:-2px 0}50%{translate:3px 0}}
.drei__raster{gap:32px}
@media (min-width:981px){
  .drei__raster{grid-template-areas:"k1 kopf bild" "k2 k3 bild";gap:32px}
  .drei__kopftext{text-align:center;padding:0 .5rem}
  .drei__kopftext .drei__unter{max-width:34ch;margin-inline:auto}
  .drei__pfeil--rechts{left:auto;bottom:auto;right:-22px;top:50%;margin:-22px 0 0}
  .drei__pfeil--rechts svg{transform:none;animation-name:pfeilRechts}
}
@media (prefers-reduced-motion:reduce){.drei__pfeil svg{animation:none}}

/* =================== 3 Schritte v7: Titel mittig, Karten untereinander, Szene klein rechts =================== */
.drei__kopftext{text-align:center}
.drei__kopftext .drei__unter{max-width:62ch;margin-inline:auto}
.drei__raster{gap:16px}
/* weniger Elemente pro Szene */
.drei__raster :is(.s-et2,.s-uhr,.s-k3,.s-et3){display:none}
.drei__raster .schwebe{min-height:120px;margin:0}
.drei__raster .s-rund{width:44px;height:44px}
.drei__raster .s-rund svg,.drei__raster .s-kachel svg{width:20px;height:20px}
.drei__raster .s-etikett{font-size:.75rem;padding:.45rem .7rem}
.drei__raster .s-kachel{padding:.5rem .6rem;gap:4px;border-radius:12px}
.drei__raster .s-kachel b{font-size:.6875rem}
.drei__raster .s-et1{top:22%;left:10%;right:auto}
.drei__raster .s-lupe{bottom:14%;right:12%;width:44px;height:44px}
.drei__raster .s-k1{left:27%;top:38%}
.drei__raster .s-k2{left:70%;top:62%}
.drei__raster .s-diagramm{top:14%;left:9%;width:58%;padding:.5rem .6rem;gap:4px}
.drei__raster .s-balken{height:40px}
.drei__raster .s-hoch{top:auto;bottom:16%;right:10%}
@media (min-width:981px){
  .drei__raster{grid-template-columns:minmax(0,1fr) minmax(0,400px);grid-template-areas:"kopf kopf" "k1 bild" "k2 bild" "k3 bild";gap:16px 24px}
  .drei__kopftext{padding:0 0 1rem;align-self:auto}
  .drei__kopftext h2{font-size:clamp(2.25rem,1.3rem + 3vw,3.75rem)}
  .drei__kopftext .drei__unter{font-size:var(--fs-lead)}
  .drei__raster .drei__karte{display:grid;grid-template-columns:minmax(0,1fr) 210px;grid-template-areas:"kopf sz" "text sz";
    align-items:start;column-gap:2rem;row-gap:.4rem;padding:1.15rem 1.15rem 1.15rem 1.6rem}
  .drei__raster .drei__karte .drei__kopf{grid-area:kopf;align-self:end}
  .drei__raster .drei__karte>p{grid-area:text;margin:0;max-width:56ch}
  .drei__raster .drei__karte .schwebe{grid-area:sz;align-self:stretch}
  .drei__raster .drei__karte h3{font-size:1.3125rem}
}

/* =================== Mit wem v3: Animation links, Branche mittig, kurzer Warum-Text =================== */
.fw .zielbox{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:1.25rem;padding:1rem}
@media (min-width:981px){.fw .zielbox{grid-template-columns:110px minmax(0,1fr) 110px;padding:1.1rem}}
.zielbox__anim{display:grid;place-items:center;aspect-ratio:1;border-radius:16px;background:var(--flaeche);border:1px solid var(--linie);position:relative;overflow:hidden}
.zielbox__anim::before{content:"";position:absolute;inset:auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(var(--akzent-rgb),.22),transparent 70%);animation:animPuls 4s ease-in-out infinite}
@keyframes animPuls{0%,100%{transform:scale(.85);opacity:.6}50%{transform:scale(1.1);opacity:1}}
.zielbox__anim .ic{position:relative;width:52px;height:52px}
.zielbox__inhalt{text-align:center}
.zielbox__inhalt h3{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);line-height:1.2;color:var(--tinte);margin:0}
.zielbox__inhalt p{margin:.45rem auto 0;max-width:54ch;font-size:.9rem;line-height:1.5;color:var(--text-2)}
@media (prefers-reduced-motion:reduce){.zielbox__anim::before{animation:none}}

/* =================== 3 Schritte: frei stehende Strich-Illustrationen (Prinzip LUMA) =================== */
.drei__raster .schwebe{background:none;border:0;overflow:visible;min-height:118px;display:grid;place-items:center}
.drei__raster .schwebe>.ill{position:static;animation:none;width:100%;max-width:220px;height:auto;overflow:visible}
.ill *{fill:none;stroke-linecap:round;stroke-linejoin:round}
/* 1 Lupe sucht */
.ill-zeilen path{stroke:#D5D7DB;stroke-width:6}
.ill-zeilen .ill-treffer{stroke:#D5D7DB;animation:trefferAn 7s ease-in-out infinite}
@keyframes trefferAn{0%,30%{stroke:#D5D7DB}40%,78%{stroke:var(--akzent)}90%,100%{stroke:#D5D7DB}}
.ill-lupe{animation:lupeSucht 7s ease-in-out infinite}
.ill-lupe circle,.ill-lupe path{stroke:var(--tinte);stroke-width:5}
.ill-lupe .ill-glas{fill:rgba(255,255,255,.75);stroke:none}
.ill-lupe path{stroke:var(--akzent)}
@keyframes lupeSucht{0%{transform:translate(62px,40px) rotate(-8deg)}20%{transform:translate(118px,82px) rotate(6deg)}38%,74%{transform:translate(138px,52px) rotate(-4deg) scale(1.08)}88%{transform:translate(86px,70px) rotate(4deg)}100%{transform:translate(62px,40px) rotate(-8deg)}}
/* 2 Workflow */
.ill-weg{stroke:rgba(var(--akzent-rgb),.55);stroke-width:2;stroke-dasharray:4 5;animation:wegLauf 1.2s linear infinite}
@keyframes wegLauf{to{stroke-dashoffset:-18}}
.ill-paket{fill:var(--akzent)!important;stroke:none;filter:drop-shadow(0 0 4px rgba(var(--akzent-rgb),.9))}
.ill-knoten rect{fill:var(--weiss);stroke:var(--tinte);stroke-width:2.4}
.ill-knoten path{stroke:var(--tinte);stroke-width:2}
.ill-knoten--ki rect{fill:var(--akzent);stroke:var(--akzent);filter:drop-shadow(0 8px 14px rgba(var(--akzent-rgb),.45))}
.ill-knoten--ki .ill-ki-stern{stroke:var(--weiss);stroke-width:2.6;transform-box:fill-box;transform-origin:center;animation:kiDreht 6s linear infinite}
@keyframes kiDreht{to{transform:rotate(360deg)}}
/* 3 Balken wachsen, Pfeil zeichnet sich */
.ill-achse{stroke:#D5D7DB;stroke-width:3}
.ill-balken rect{fill:rgba(var(--akzent-rgb),.18);stroke:var(--akzent);stroke-width:2.4;transform-box:fill-box;transform-origin:bottom;
  animation:balkenWachs 6s var(--ease) infinite;animation-delay:calc(var(--i) * .18s)}
.ill-balken rect:last-child{fill:var(--akzent)}
@keyframes balkenWachs{0%{transform:scaleY(.08);opacity:.4}28%,82%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.08);opacity:.4}}
.ill-trend{stroke:var(--tinte);stroke-width:3.4;stroke-dasharray:1;stroke-dashoffset:1;animation:trendZeichnen 6s var(--ease) infinite}
@keyframes trendZeichnen{0%,12%{stroke-dashoffset:1}42%,82%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
.ill-spitze{stroke:var(--tinte);stroke-width:3.4;opacity:0;animation:spitzeAn 6s ease infinite}
@keyframes spitzeAn{0%,38%{opacity:0}44%,82%{opacity:1}96%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .ill *{animation:none!important}.ill-paket{display:none}
  .ill-lupe{transform:translate(138px,52px)}.ill-trend{stroke-dashoffset:0}.ill-spitze{opacity:1}.ill-zeilen .ill-treffer{stroke:var(--akzent)}}

/* Mit wem: Foto links (Wechsel zu 3 Schritte mit Foto rechts) */
@media (min-width:981px){.fw{grid-template-columns:minmax(0,.5fr) minmax(0,1fr)}.fw__bild{order:-1}}

/* =================== Umbau 21.10.: Use Cases, Zahlen-Gitter, Richtiger Weg mit Grafik, Footer =================== */
/* Use Cases */
.karte--uc{display:flex;flex-direction:column;align-items:stretch;gap:.35rem}
.uc__kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding-bottom:.85rem;margin-bottom:.4rem;border-bottom:1px solid var(--linie)}
.uc__aussage{margin:0;font:700 clamp(1.25rem,1.05rem + .7vw,1.625rem)/1.2 var(--head);letter-spacing:-.015em;
  background:linear-gradient(100deg,var(--akzent-schrift),#F29A3A);-webkit-background-clip:text;background-clip:text;color:transparent}
.uc__kopf .ic{flex:none;width:38px;height:38px}
.uc__label{margin:0;font:700 .6875rem/1.2 var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.karte--uc h3{font-size:1.1875rem}
.karte--uc p:not(.uc__aussage):not(.uc__label){font-size:.9rem;line-height:1.55}
#leistungen .karten{grid-template-columns:1fr}

/* Zahlen als Gitter */
.zahlen{display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie);border-radius:var(--r-box);overflow:hidden}
@media (min-width:700px){.zahlen{grid-template-columns:repeat(2,1fr)}}
@media (min-width:981px){.zahlen{grid-template-columns:repeat(3,1fr)}}
.zahlen__zelle{display:flex;flex-direction:column;gap:.45rem;padding:clamp(1.25rem,2.2vw,1.75rem);background:var(--weiss);position:relative;transition:background-color .35s ease}
@media (hover:hover){.zahlen__zelle:not(.zahlen__zelle--cta):hover{background:var(--akzent-hauch)}}
.zahlen__wert{margin:0;font:700 clamp(2.5rem,1.8rem + 2.4vw,3.5rem)/1 var(--head);letter-spacing:-.03em;color:var(--akzent-schrift)}
.zahlen__zelle h3{font-size:1.125rem;color:var(--tinte);margin:.2rem 0 0}
.zahlen__zelle p{margin:0;font-size:.875rem;line-height:1.5}
.zahlen__quelle{margin-top:auto!important;padding-top:.5rem;font-size:.75rem!important;color:var(--text-3)}
.zahlen__zelle--cta{background:var(--anthrazit);color:var(--text-auf-dunkel);justify-content:center;gap:.8rem}
.zahlen__zelle--cta h3{color:var(--weiss);font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem)}
.zahlen__zelle--cta .btn{align-self:flex-start;margin-top:.3rem}
.zahlen__hinweis{margin:1rem 0 0;text-align:center;font-size:.75rem;color:var(--text-3)}

/* Richtiger Weg mit Grafik */
.weg2{display:grid;gap:clamp(2rem,4vw,4rem);align-items:center}
@media (min-width:981px){.weg2{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.weg2__text{display:grid;gap:1rem;justify-items:start}
.weg2__text h2{margin:0}
.weg2__text p{margin:0;font-size:var(--fs-lead);line-height:1.6}
.weg2__antwort{padding:1rem 1.25rem;border-left:3px solid var(--akzent);background:var(--flaeche);border-radius:0 12px 12px 0;color:var(--tinte)}
.weg2__antwort strong{color:var(--akzent-dunkel)}
.weg2__text .btn{margin-top:.5rem}
.graf{margin:0;padding:clamp(1rem,2vw,1.5rem);border-radius:var(--r-box);background:var(--weiss);border:1px solid var(--linie);box-shadow:0 30px 60px -36px rgba(0,0,0,.08)}
.graf__titel{font:700 .6875rem/1.2 var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:.5rem}
.graf svg{display:block;width:100%;height:auto;overflow:visible}
.graf__raster path{stroke:var(--grau-hell);stroke-width:1;fill:none}
.graf__achsen path{fill:none;stroke:var(--tinte);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.graf__achse{font:700 14px var(--head);fill:var(--tinte)}
.graf__flaeche{fill:url(#graf-flaeche)}
.graf__linie{fill:none;stroke-width:4;stroke-linecap:round;stroke-dasharray:1}
.graf__linie--ohne{stroke:#9A9DA3;stroke-dasharray:.018 .014}
.graf__linie--mit{stroke:var(--akzent);filter:drop-shadow(0 6px 10px rgba(var(--akzent-rgb),.35))}
.graf__punkt{fill:var(--akzent);stroke:var(--weiss);stroke-width:3;filter:drop-shadow(0 0 6px rgba(var(--akzent-rgb),.8))}
.graf__marke rect{fill:var(--weiss);stroke:var(--linie)}
.graf__marke text{font:600 12px var(--head);fill:var(--text-2)}
.graf__marke--mit rect{fill:var(--akzent-hauch);stroke:rgba(var(--akzent-rgb),.55)}
.graf__marke--mit text{fill:var(--akzent-dunkel)}
.graf__gespart{font:700 13px var(--head);fill:var(--akzent-dunkel);letter-spacing:.02em}
/* Zeichnen beim Erscheinen */
.js .graf .graf__linie--mit{stroke-dashoffset:1}
.js .graf .graf__flaeche,.js .graf .graf__marke,.js .graf .graf__gespart,.js .graf .graf__punkt{opacity:0}
.js .graf.seq-an .graf__linie--mit{animation:grafZeichnen 1.8s var(--ease) .5s forwards}
.js .graf.seq-an :is(.graf__flaeche,.graf__marke,.graf__gespart,.graf__punkt){animation:einblenden .8s ease 1.9s forwards}
@keyframes grafZeichnen{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.js .graf .graf__linie--mit{stroke-dashoffset:0}.js .graf :is(.graf__flaeche,.graf__marke,.graf__gespart){opacity:1}.graf__punkt{display:none}}

/* Footer: sauberer Abschluss in Anthrazit, volle Breite, kein Kasten */
.fuss{background:var(--anthrazit-dunkel);color:var(--text-auf-dunkel);padding:clamp(3.5rem,6vw,5rem) 0 0;margin-top:var(--sek)}
.fuss__raster{display:grid;gap:2.5rem}
@media (min-width:768px){.fuss__raster{grid-template-columns:repeat(3,minmax(0,1fr))}.fuss__marke{grid-column:1/-1}}
@media (min-width:1100px){.fuss__raster{grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.2fr)}.fuss__marke{grid-column:auto}}
.fuss__marke{display:grid;gap:1.1rem;justify-items:start}
.fuss__marke img{width:170px;height:auto}
.fuss__marke p{margin:0;max-width:36ch;font-size:.9375rem;line-height:1.6}
.fuss__spalte{display:flex;flex-direction:column;gap:.7rem}
.fuss__spalte h2{margin:0 0 .4rem;font:700 .75rem/1.2 var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--weiss)}
.fuss a:not(.btn){color:var(--text-auf-dunkel);text-decoration:none;transition:color .2s ease}
.fuss a:not(.btn):hover{color:var(--akzent)}
.fuss__kontakt{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.fuss__kontakt li{display:flex;align-items:center;gap:.7rem;font-size:.9375rem}
.fuss__kontakt svg{flex:none;width:16px;height:16px;fill:var(--akzent)}
.fuss__unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:clamp(2.5rem,5vw,3.5rem);padding:1.25rem 0 1.5rem;border-top:1px solid var(--kante-dunkel);font-size:.8125rem}
.fuss__unten p{margin:0}
.fuss__unten nav{display:flex;gap:1.5rem}
/* Korrekturen Umbau */
#leistungen .karte--uc{display:flex;flex-direction:column;align-items:stretch;gap:.3rem;padding:1.1rem 1.4rem;text-align:left}
#leistungen .uc__kopf{width:100%;align-items:center;padding:0;margin:0 0 .25rem;border:0}
#leistungen .karte--uc h3{margin:0}
#leistungen .karte--uc p:not(.uc__aussage){margin:0;font-size:.875rem;line-height:1.5}
#leistungen .karten{gap:12px}
.zahlen__zelle{text-align:left}
.zahlen .zahlen__wert{font:700 clamp(2.5rem,1.8rem + 2.4vw,3.25rem)/1 var(--head);letter-spacing:-.03em;color:var(--akzent-schrift);margin:0 0 .2rem}
.zahlen .zahlen__quelle{font-size:.75rem;color:var(--text-3)}
.zahlen__zelle--cta{text-align:left}
.weg2__text p.eyebrow{font-size:11px;line-height:1.2}
.fuss{margin-top:0}
#leistungen .uc__aussage{font-size:clamp(1.25rem,1.05rem + .7vw,1.5rem);line-height:1.15}
#leistungen .karte--uc{padding:1rem 1.4rem;gap:.25rem}
#leistungen .karte--uc h3{font-size:1.0625rem}
.zahlen__zelle{padding:1.15rem 1.5rem;gap:.35rem}
.zahlen .zahlen__wert{font-size:clamp(2.25rem,1.7rem + 1.8vw,2.875rem)}
.zahlen__hinweis{margin-top:.75rem}

/* =================== Use Cases v2: drei Karten mit eigener Animation, ohne Chat =================== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ucs{display:grid;gap:var(--gap)}
@media (min-width:900px){.ucs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.uc{display:flex;flex-direction:column;gap:.5rem;padding:1.25rem 1.5rem 1.5rem;border-radius:var(--r-box);background:var(--weiss);border:1px solid var(--linie);
  box-shadow:0 1px 2px rgba(42,44,48,.04),0 18px 40px -26px rgba(0,0,0,.08);transition:border-color .35s ease,box-shadow .35s ease}
@media (hover:hover){.uc:hover{border-color:rgba(var(--akzent-rgb),.6);box-shadow:0 0 0 1px rgba(0,0,0,.08),0 22px 44px -24px rgba(0,0,0,.08)}}
.uc__bild{display:grid;place-items:center;padding:.25rem 0 1rem;margin-bottom:.4rem;border-bottom:1px solid var(--linie)}
.uci{width:100%;max-width:260px;height:auto;overflow:visible}
.uci *{fill:none;stroke-linecap:round;stroke-linejoin:round}
.uc .uc__aussage{margin:0;font:700 clamp(1.25rem,1.05rem + .7vw,1.5rem)/1.15 var(--head);letter-spacing:-.015em;
  background:linear-gradient(100deg,var(--akzent-schrift),#F29A3A);-webkit-background-clip:text;background-clip:text;color:transparent}
.uc h3{margin:.15rem 0 0;font-size:1.125rem;color:var(--tinte)}
.uc .uc__text{margin:0;font-size:.9rem;line-height:1.55}
.uc__tools{list-style:none;margin:auto 0 0;padding:.6rem 0 0;display:flex;flex-wrap:wrap;gap:6px}
.uc__tools li{padding:.3rem .65rem;border-radius:999px;background:var(--flaeche);border:1px solid var(--linie);font:600 .75rem/1 var(--head);color:var(--text-2)}
.weitere--mitte{text-align:center;margin-top:1.25rem}
/* gemeinsame Teile */
.uci-weg{stroke:rgba(var(--akzent-rgb),.6);stroke-width:2;stroke-dasharray:4 5;animation:wegLauf 1.2s linear infinite}
.uci-paket{fill:var(--akzent)!important;stroke:none;filter:drop-shadow(0 0 4px rgba(var(--akzent-rgb),.9))}
/* 1 Dokumente */
.uci-stapel rect{fill:var(--weiss);stroke:#B9BBC0;stroke-width:2}
.uci-flieg{fill:var(--weiss);stroke:var(--tinte);stroke-width:2;animation:dokFliegt 3.6s var(--ease) infinite}
@keyframes dokFliegt{0%{transform:translateX(-30px);opacity:0}25%{opacity:1}60%{transform:translateX(10px);opacity:1}80%,100%{transform:translateX(22px);opacity:0}}
.uci-blatt rect{fill:var(--weiss);stroke:var(--tinte);stroke-width:2.6}
.uci-blatt path{stroke:#D5D7DB;stroke-width:4}
.uci-blatt .uci-scan{stroke:var(--akzent);stroke-width:3;filter:drop-shadow(0 0 6px rgba(var(--akzent-rgb),.9));animation:scannen 2.4s ease-in-out infinite}
@keyframes scannen{0%,100%{transform:translateY(0)}50%{transform:translateY(70px)}}
.uci-ordner path{fill:var(--akzent-hauch);stroke:var(--tinte);stroke-width:2.6}
.uci-ok{fill:var(--akzent)!important;stroke:none;transform-box:fill-box;transform-origin:center;animation:okPuls 1.8s ease-in-out infinite}
.uci-haken{stroke:var(--weiss);stroke-width:2.6}
@keyframes okPuls{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
/* 2 Meta-Leads ins CRM */
.uci-ads rect{fill:var(--weiss);stroke:var(--tinte);stroke-width:2.6}
.uci-ads path{stroke:var(--akzent);stroke-width:2.4}
.uci text{font:700 11px var(--head);fill:var(--tinte);stroke:none}
.uci-lead rect{fill:var(--akzent)!important;stroke:none;filter:drop-shadow(0 6px 10px rgba(var(--akzent-rgb),.45))}
.uci-lead circle,.uci-lead path{stroke:var(--weiss);stroke-width:2}
.uci-crm>rect{fill:var(--weiss);stroke:var(--tinte);stroke-width:2.6}
.uci-crm>path{stroke:var(--linie);stroke-width:2}
.uci-zeile circle{fill:rgba(var(--akzent-rgb),.25)!important;stroke:var(--akzent);stroke-width:2}
.uci-zeile path{stroke:#D5D7DB;stroke-width:5}
.uci-zeile{transform-box:fill-box;transform-origin:left center;animation:zeileNeu 7.2s var(--ease) infinite;animation-delay:calc(var(--i) * 2.4s + 2.2s)}
@keyframes zeileNeu{0%{opacity:.25}6%{opacity:1}8%{transform:translateX(-4px)}12%{transform:none}90%{opacity:1}100%{opacity:.25}}
.uci-zeile:nth-of-type(1) path{stroke:#D5D7DB}
/* 3 Support-Bot */
.uci-fenster{fill:var(--weiss);stroke:var(--tinte);stroke-width:2.6}
.uci-blase rect{stroke:none}
.uci-blase--kunde rect{fill:var(--grau-hell)!important}
.uci-blase--bot rect{fill:var(--akzent)!important;filter:drop-shadow(0 6px 10px rgba(var(--akzent-rgb),.35))}
.uci-blase{opacity:0;animation:blaseAn 7.5s ease infinite;animation-delay:calc(var(--i) * 1.2s)}
@keyframes blaseAn{0%{opacity:0;transform:translateY(6px)}8%,80%{opacity:1;transform:none}92%,100%{opacity:0}}
.uci-tippen circle{fill:#B9BBC0!important;stroke:none;animation:tippen 1.2s ease-in-out infinite}
.uci-tippen circle:nth-child(2){animation-delay:.2s}.uci-tippen circle:nth-child(3){animation-delay:.4s}
@keyframes tippen{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.uci-uhr circle{fill:var(--akzent-hauch);stroke:var(--akzent);stroke-width:2.6}
.uci-zeiger{stroke:var(--tinte);stroke-width:2.6;transform-origin:222px 40px;animation:kiDreht 4s linear infinite}
.uci-zeiger--kurz{animation-duration:48s}
.uci-uhr text{font-size:15px;fill:var(--akzent-dunkel)}
@media (prefers-reduced-motion:reduce){.uci *{animation:none!important}.uci-blase{opacity:1}.uci-paket,.uci-lead{display:none}}

/* =================== Diagramm v2: realistisch, Break-even, Vergleichstabelle =================== */
.graf__linie--ohne{stroke:var(--tinte);stroke-dasharray:1;stroke-width:3.5}
.js .graf .graf__linie--ohne{stroke-dashoffset:1}
.js .graf.seq-an .graf__linie--ohne{animation:grafZeichnen 1.6s var(--ease) .3s forwards}
.js .graf.seq-an .graf__linie--mit{animation:grafZeichnen 1.6s var(--ease) .9s forwards}
.js .graf :is(.graf__be,.graf__notiz){opacity:0}
.js .graf.seq-an :is(.graf__flaeche,.graf__marke,.graf__gespart,.graf__punkt,.graf__be,.graf__notiz){animation:einblenden .8s ease 2.4s forwards}
.graf__be circle{fill:var(--weiss);stroke:var(--akzent);stroke-width:3}
.graf__be path{stroke:var(--akzent);stroke-width:1.5;stroke-dasharray:3 4}
.graf__be text{font:700 12px var(--head);fill:var(--akzent-dunkel)}
.graf__notiz{font:600 11.5px var(--body);fill:var(--text-3)}
.graf__notiz--muede{fill:#B4282E}
.graf__marke--ohne rect{fill:var(--tinte);stroke:var(--tinte)}
.graf__marke--ohne text{fill:var(--weiss)}
.vergleich{width:100%;margin-top:.75rem;border-collapse:collapse;font-size:.8125rem;line-height:1.35}
.vergleich th,.vergleich td{padding:.45rem .5rem;text-align:left;border-top:1px solid var(--linie);vertical-align:top}
.vergleich thead th{border-top:0;font:700 .6875rem/1.2 var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.vergleich thead th:last-child{color:var(--akzent-dunkel)}
.vergleich tbody th{font:600 .8125rem/1.35 var(--head);color:var(--tinte);white-space:nowrap}
.vergleich td:nth-child(2){color:var(--text-2)}
.vergleich td:last-child{color:var(--tinte);font-weight:600}
.vergleich td:last-child::before{content:"✓";display:inline-block;margin-right:.4rem;color:var(--akzent);font-weight:700}
@media (prefers-reduced-motion:reduce){.js .graf .graf__linie--ohne{stroke-dashoffset:0}.js .graf :is(.graf__be,.graf__notiz){opacity:1}}

/* =================== Use-Cases: ganze Karte verlinkt, Fußzeile auf gleicher Höhe =================== */
a.uc{color:inherit;text-decoration:none}
.uc__tools{margin-top:auto}
.uc__mehr{display:inline-flex;align-items:center;gap:.45rem;margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--linie);font:700 .875rem/1 var(--head);color:var(--akzent-dunkel)}
.uc__mehr svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
@media (hover:hover){a.uc:hover .uc__mehr svg{transform:translateX(4px)}}
a.uc:focus-visible{outline:2px solid var(--akzent);outline-offset:3px}
.ucs__fuss{display:flex;justify-content:center;margin-top:clamp(1.5rem,3vw,2rem)}
.ucs__fuss + .weitere--mitte{margin-top:.9rem}

/* =================== Unterseite Use Cases =================== */
.seite-kopf{padding-top:clamp(8rem,12vw,10rem);padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.seite-kopf h1{font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.025em;font-weight:700}
.seite-sprung{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:clamp(1.5rem,3vw,2rem)}
.seite-sprung a{padding:.6rem 1rem;border-radius:999px;background:var(--weiss);border:1px solid var(--linie);font:600 .875rem/1 var(--head);color:var(--tinte);text-decoration:none;transition:border-color .25s ease,color .25s ease}
.seite-sprung a:hover{border-color:var(--akzent);color:var(--akzent-dunkel)}
.ucd{scroll-margin-top:90px}
.ucd + .ucd{padding-top:0}
.ucd__raster{display:grid;gap:clamp(1.5rem,4vw,4rem);align-items:center}
@media (min-width:981px){.ucd__raster{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  .ucd:nth-of-type(odd) .ucd__bild{order:2}}
.ucd__bild{display:grid;place-items:center;aspect-ratio:4/3;padding:clamp(1.5rem,4vw,3rem);border-radius:var(--r-box);background:var(--flaeche);border:1px solid var(--linie)}
.ucd__bild .uci{max-width:420px}
.ucd__text{display:grid;gap:.9rem;justify-items:start}
.ucd__text .uc__aussage{font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem)}
.ucd__text h2{font-size:clamp(1.75rem,1.3rem + 1.6vw,2.5rem)}
.ucd__intro{margin:0;font-size:var(--fs-lead);line-height:1.55}
.ucd__block{width:100%;padding-top:.9rem;border-top:1px solid var(--linie)}
.ucd__block h3{margin:0 0 .45rem;font:700 .75rem/1.2 var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.ucd__block p{margin:0;font-size:.9375rem;line-height:1.6}
.ucd__schritte{margin:0;gap:.5rem}
.ucd__schritte li{font-size:.9375rem}
.ucd .uc__tools{margin-top:.25rem;padding-top:0}
/* Seitliches Verschieben auf dem Handy sicher verhindern (clip statt hidden: kein Scroll-Container) */
html,body{overflow-x:clip}
.ucs .uc__bild{padding:0 0 .75rem}
.ucs .uci{max-width:220px}
.ucs .uc__mehr{margin-top:auto}
.ucs .uc__text{margin-bottom:.9rem}
/* Zahlen: Titel oben, Zahl direkt vor dem Satz, damit "57 % der ..." zusammen gelesen wird */
.zahlen__zelle:not(.zahlen__zelle--cta) h3{margin:0 0 .35rem;font-size:.9375rem;color:var(--text-2)}
.zahlen .zahlen__wert{margin:0}
.zahlen__wert + p{margin-top:.1rem}

/* Use-Cases: kurzer Verweisblock auf der Startseite */
.uc-verweis{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 3rem;padding:clamp(1.75rem,4vw,3rem) clamp(1.5rem,4vw,3.5rem);
  border-radius:var(--r-box);background:var(--flaeche);border:1px solid var(--linie)}
.uc-verweis__text{display:grid;gap:.6rem;justify-items:start;max-width:640px}
.uc-verweis__text h2{margin:0}
.uc-verweis__text p:not(.eyebrow){margin:0;font-size:var(--fs-lead);line-height:1.55}

/* =================== Hero: Animation auf schmalen Bildschirmen nach oben statt ganz unten =================== */
@media (max-width:980px){
  .hero__bild--zentrale{order:-1;justify-self:center;width:min(100%,290px)}
  .hero__inhalt{gap:1.75rem}
}
@media (min-width:700px) and (max-width:980px){
  .hero__inhalt{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center}
  .hero__bild--zentrale{order:0;width:100%}
}
.menu .menu__kontakt a{font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px}

/* =================== Rechtsseiten =================== */
.recht{padding-top:clamp(8rem,12vw,10rem)}
.recht__inhalt{max-width:760px}
.recht__inhalt h1{font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.025em;font-weight:700;margin-bottom:.5rem}
.recht__inhalt h2{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);margin:2.25rem 0 .6rem}
.recht__inhalt h3{font-size:1.0625rem;margin:1.5rem 0 .5rem}
.recht__inhalt p,.recht__inhalt li{font-size:1rem;line-height:1.7}
.recht__inhalt p{margin:0 0 .9rem}
.recht__inhalt ul{margin:0 0 .9rem;padding-left:1.2rem}
.recht__inhalt a{color:var(--akzent-dunkel)}
.recht__stand{color:var(--text-3);font-size:.9375rem}
/* Hero-Animation klein: Statusleiste einzeilig, ohne Ereignistext */
@media (max-width:600px){
  .zentrale__status{padding:.5rem .8rem;bottom:3%}
  .zentrale__status p{display:none}
  .zentrale__status>div{display:flex;align-items:baseline;gap:.5rem}
  .zentrale__status small{font-size:.625rem}
  .zentrale__status strong{font-size:1rem}
}
/* Hero: auf Handys ohne Animation, Text steht allein (Animation ab 700px rechts neben dem Text) */
@media (max-width:980px){.hero__bild--zentrale{display:none}}
/* Hero mobil: Gesicht direkt im ersten Bildschirm (Desktop zeigt stattdessen die Animation) */
.hero__person{display:flex;align-items:center;gap:.8rem;margin:0;font-size:.9375rem;line-height:1.35;color:var(--text-2)}
.hero__person img{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px rgba(0,0,0,.08),0 0 0 4px rgba(0,0,0,.08)}
.hero__person strong{display:block;color:var(--tinte);font-family:var(--head);font-weight:700}
@media (min-width:981px){.hero__person{display:none}}

/* =================== Use-Case-Übersicht: eine große Karte =================== */
.uc-liste{padding-top:0}
.uc-gross{display:grid;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding:clamp(1.5rem,3vw,2.5rem);border-radius:var(--r-box);background:var(--weiss);border:1px solid var(--linie);
  color:inherit;text-decoration:none;box-shadow:0 1px 2px rgba(42,44,48,.04),0 24px 50px -30px rgba(0,0,0,.08);transition:border-color .35s ease,box-shadow .35s ease}
@media (min-width:900px){.uc-gross{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
@media (hover:hover){.uc-gross:hover{border-color:rgba(var(--akzent-rgb),.6);box-shadow:0 0 0 1px rgba(0,0,0,.08),0 26px 50px -26px rgba(0,0,0,.08)}
  .uc-gross:hover .uc__mehr svg{transform:translateX(4px)}}
.uc-gross:focus-visible{outline:2px solid var(--akzent);outline-offset:3px}
.uc-gross__bild{display:grid;place-items:center;aspect-ratio:16/10;border-radius:12px;background:var(--flaeche);padding:1.5rem}
.uc-gross__bild .uci{max-width:360px}
.uc-gross__text{display:grid;gap:.75rem;justify-items:start}
.uc-gross__text h2{font-size:clamp(1.75rem,1.3rem + 1.6vw,2.5rem)}
.uc-gross__text p:not(.uc__aussage){margin:0;font-size:var(--fs-lead);line-height:1.55}
.uc-gross .uc__aussage{font:700 clamp(1.25rem,1.05rem + .7vw,1.5rem)/1.15 var(--head);background:linear-gradient(100deg,var(--akzent-schrift),#F29A3A);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0}
.uc-gross .uc__mehr{border-top:0;padding-top:0;margin-top:.25rem}
.uc-liste__hinweis{margin:1.25rem 0 0;text-align:center;color:var(--text-3);font-size:.9375rem}

/* =================== Case Study =================== */
.ucs-hero{padding-top:clamp(7.5rem,11vw,9.5rem)}
.brotkrumen{display:flex;gap:.5rem;align-items:center;margin-bottom:clamp(1.25rem,3vw,2rem);font-size:.875rem;color:var(--text-3)}
.brotkrumen a{color:var(--akzent-dunkel);text-decoration:none}.brotkrumen a:hover{text-decoration:underline}
.ucs-hero__raster{display:grid;gap:clamp(2rem,4vw,4rem);align-items:center}
@media (min-width:981px){.ucs-hero__raster{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}}
.ucs-hero__text{display:grid;gap:1rem;justify-items:start}
.ucs-hero__text h1{font-size:var(--fs-h2);line-height:1.05;letter-spacing:-.03em;font-weight:700}
.ucs-hero__text .uc__aussage{margin:0;font:700 clamp(1.25rem,1.05rem + .8vw,1.625rem)/1.2 var(--head);background:linear-gradient(100deg,var(--akzent-schrift),#F29A3A);-webkit-background-clip:text;background-clip:text;color:transparent}
.ucs-hero__lead{margin:0;font-size:var(--fs-lead);line-height:1.6;max-width:52ch}
.ucs-hero__text .btn{margin-top:.5rem}
.ucs-fakten{padding:1.5rem;border-radius:var(--r-box);background:var(--weiss);border:1px solid var(--linie);box-shadow:0 24px 50px -30px rgba(0,0,0,.08)}
.ucs-fakten__kunde{display:flex;align-items:center;gap:1rem;padding-bottom:1.1rem;margin-bottom:.4rem;border-bottom:1px solid var(--linie)}
.ucs-fakten__logo{display:grid;place-items:center;width:64px;height:64px;border-radius:12px;border:1px dashed #B9BBC0;font-size:.75rem;color:var(--text-3);flex:none}
.ucs-fakten small{display:block;font:700 .6875rem/1.2 var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:.25rem}
.ucs-fakten strong{font:700 1.0625rem/1.3 var(--head);color:var(--tinte)}
.ucs-fakten dl{margin:0;display:grid}
.ucs-fakten dl div{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--linie);font-size:.9375rem}
.ucs-fakten dl div:last-child{border-bottom:0;padding-bottom:0}
.ucs-fakten dt{color:var(--text-3)}.ucs-fakten dd{margin:0;color:var(--tinte);font-weight:600;text-align:right}
.ucs-zwei{display:grid;gap:clamp(2rem,4vw,4rem);align-items:center}
@media (min-width:981px){.ucs-zwei{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.ucs-zwei h2{margin:.25rem 0 1rem}
.ucs-zwei > div > p:not(.eyebrow){font-size:var(--fs-lead);line-height:1.6;margin:0}
.vn{display:grid;gap:14px}
@media (min-width:600px){.vn{grid-template-columns:1fr 1fr}}
.vn__spalte{padding:1.4rem 1.5rem;border-radius:var(--r-box);border:1px solid var(--linie);background:var(--weiss)}
.vn__spalte h3{margin:0 0 1rem;font:700 .75rem/1.2 var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.vn__spalte--nachher{border-color:rgba(var(--akzent-rgb),.5);background:var(--weiss)}
.vn__spalte--nachher h3{color:var(--akzent-dunkel)}
.vn .liste li{font-size:.9375rem;line-height:1.45}
.ico-kreuz{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:#E3E3E3;color:#6B6E73}
.ico-kreuz svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.zahlen--drei{margin-top:0}
@media (min-width:981px){.zahlen--drei{grid-template-columns:repeat(3,1fr)}}
.ucs-zitat{margin:clamp(1.5rem,3vw,2.5rem) auto 0;max-width:760px;text-align:center}
.ucs-zitat blockquote{margin:0 0 .75rem;font:600 clamp(1.25rem,1.1rem + .6vw,1.625rem)/1.4 var(--head);color:var(--tinte)}
.ucs-zitat figcaption{font-size:.9375rem;color:var(--text-3)}

/* =================== Workflow-Animation =================== */
.wfa{display:grid;gap:clamp(1.25rem,2.5vw,2rem);margin-top:clamp(1.5rem,3vw,2.5rem)}
.wfa__lead{justify-self:center;display:flex;align-items:center;gap:.75rem;padding:.6rem 1rem .6rem .6rem;border-radius:999px;background:var(--weiss);color:var(--tinte);
  box-shadow:0 0 0 6px rgba(0,0,0,.08),0 16px 30px -12px rgba(0,0,0,.08);opacity:.35;transform:translateY(6px) scale(.97);transition:opacity .5s ease,transform .5s var(--ease)}
.wfa.laeuft .wfa__lead{opacity:1;transform:none}
.wfa__avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--akzent);color:var(--weiss);font:700 .8125rem/1 var(--head)}
.wfa__lead strong{display:block;font:700 .9375rem/1.2 var(--head)}
.wfa__lead small{font-size:.8125rem;color:var(--text-2)}
.wfa__kette{display:grid;gap:10px;align-items:center}
@media (min-width:900px){.wfa__kette{grid-template-columns:1fr 48px 1fr 48px 1fr 48px 1fr 48px 1fr}}
.wfa__knoten{position:relative;display:grid;justify-items:center;text-align:center;gap:.35rem;padding:1.15rem .75rem 1rem;border-radius:16px;background:#33353A;border:1px solid #46484E;
  transition:border-color .4s ease,box-shadow .4s ease,background-color .4s ease,transform .4s var(--ease)}
.wfa__knoten strong{font:700 .9375rem/1.2 var(--head);color:var(--weiss)}
.wfa__knoten small{font-size:.75rem;line-height:1.3;color:var(--text-auf-dunkel)}
.wfa__ico{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:#2A2C30;border:1px solid #46484E;transition:background-color .4s ease,border-color .4s ease}
.wfa__ico svg{width:22px;height:22px;fill:none;stroke:var(--akzent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s ease}
.wfa__ok{position:absolute;top:-9px;right:-9px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--akzent);transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.wfa__ok svg{width:13px;height:13px;fill:none;stroke:var(--weiss);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.wfa__knoten.aktiv{border-color:var(--akzent);background:#3A3330;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 0 36px -6px rgba(0,0,0,.08);transform:translateY(-4px)}
.wfa__knoten.aktiv .wfa__ico{background:var(--akzent);border-color:var(--akzent)}
.wfa__knoten.aktiv .wfa__ico svg{stroke:var(--weiss)}
.wfa__knoten.fertig{border-color:rgba(var(--akzent-rgb),.45)}
.wfa__knoten.fertig .wfa__ok{transform:scale(1)}
.wfa__linie{position:relative;display:block;height:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 5px,transparent 5px 10px)}
.wfa__linie i{position:absolute;left:0;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--akzent);box-shadow:0 0 10px rgba(0,0,0,.08);opacity:0}
.wfa__linie.fliesst i{animation:paketLauf .6s ease-in forwards}
@keyframes paketLauf{0%{left:0;opacity:1}100%{left:100%;opacity:1}}
@media (max-width:899px){.wfa__linie{width:2px;height:22px;justify-self:center;background:repeating-linear-gradient(180deg,rgba(255,255,255,.18) 0 5px,transparent 5px 10px)}
  .wfa__linie i{left:50%;top:0;margin:-5px 0 0 -5px}
  .wfa__linie.fliesst i{animation-name:paketRunter}
  .wfa__knoten{grid-template-columns:auto 1fr;justify-items:start;text-align:left;column-gap:.9rem;padding:.8rem 1rem}
  .wfa__ico{grid-row:span 2}}
@keyframes paketRunter{0%{top:0;opacity:1}100%{top:100%;opacity:1}}
.wfa__unten{display:grid;gap:14px}
@media (min-width:900px){.wfa__unten{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.wfa__schritte{list-style:none;margin:0;padding:0;display:grid;gap:6px;counter-reset:none}
.wfa-schritt{display:flex;align-items:flex-start;gap:.8rem;padding:.6rem .8rem;border-radius:12px;font-size:.9375rem;line-height:1.45;color:var(--text-auf-dunkel);transition:background-color .35s ease,color .35s ease}
.wfa-schritt__nr{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;border:1px solid #5A5C62;font:700 .75rem/1 var(--head);color:var(--text-auf-dunkel);transition:all .35s ease}
.wfa-schritt.aktiv{background:rgba(var(--akzent-rgb),.12);color:var(--weiss)}
.wfa-schritt.aktiv .wfa-schritt__nr,.wfa-schritt.fertig .wfa-schritt__nr{background:var(--akzent);border-color:var(--akzent);color:var(--weiss)}
.wfa__log{padding:1rem 1.1rem;border-radius:14px;background:rgba(28,30,33,.85);border:1px solid #46484E;font:500 .8125rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;min-height:220px}
.wfa__log-kopf{display:flex;justify-content:space-between;align-items:center;padding-bottom:.6rem;margin-bottom:.6rem;border-bottom:1px solid #46484E;color:var(--text-auf-dunkel);font-family:var(--head);font-weight:600}
.wfa__live{display:flex;align-items:center;gap:.5rem}
.wfa__live i{width:8px;height:8px;border-radius:50%;background:#3DD68C;box-shadow:0 0 8px rgba(0,0,0,.08);animation:onlinePuls 2s ease-in-out infinite}
.wfa__zeit{color:var(--akzent)}
.wfa__log ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.wfa__log li{display:flex;gap:.6rem;color:var(--weiss);animation:einblenden .4s ease forwards;opacity:0;transform:translateY(4px)}
.wfa__log li b{color:var(--akzent);font-weight:500;flex:none;min-width:3.6em}
@media (prefers-reduced-motion:reduce){.wfa__lead{opacity:1;transform:none}.wfa__log li{opacity:1;transform:none;animation:none}}
.sek.seite-kopf + .sek.uc-liste:not(#_){border-top:0}
.sek.ucs-hero + .sek:not(#_){border-top:0}

/* Case Study Finora: Logo-Band, vier Knoten, Zitat mit Foto */
.ucs-fakten{padding:0;overflow:hidden}
.ucs-fakten__logo{display:grid;place-items:center;width:auto;height:auto;padding:1.5rem;border:0;border-radius:0;background:var(--anthrazit)}
.ucs-fakten__logo img{width:min(100%,200px);height:auto}
.ucs-fakten dl{padding:.4rem 1.5rem 1.2rem}
@media (min-width:900px){.wfa__kette--vier{grid-template-columns:1fr 64px 1fr 64px 1fr 64px 1fr}}
.ucs-zitat{display:grid;gap:1.5rem 2.5rem;align-items:center;text-align:left;max-width:900px}
@media (min-width:700px){.ucs-zitat{grid-template-columns:240px 1fr}}
.ucs-zitat__foto{width:100%;max-width:240px;aspect-ratio:4/5;object-fit:cover;object-position:50% 15%;border-radius:var(--r-box);justify-self:center;
  box-shadow:0 0 0 6px rgba(0,0,0,.08),0 0 0 7px rgba(0,0,0,.08),0 30px 60px -30px rgba(0,0,0,.08)}
.ucs-zitat figcaption strong{color:var(--tinte)}
.ucs-zitat__foto{height:auto}

/* =================== Case Study v2: Kunde mit Foto im Hero, Logo in Markenfarbe =================== */
@media (min-width:900px){.wfa__kette--4{grid-template-columns:1fr 64px 1fr 64px 1fr 64px 1fr}
  .wfa__kette--5{grid-template-columns:1fr 40px 1fr 40px 1fr 40px 1fr 40px 1fr}}
.ucs-hero__raster{align-items:stretch}
@media (min-width:981px){.ucs-hero__raster{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}}
.ucs-hero__text{align-content:center}
.ucs-fakten-zeile{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem 1.5rem;margin:.25rem 0 .5rem;padding:1rem 0;border-block:1px solid var(--linie);width:100%;max-width:560px}
.ucs-fakten-zeile div{display:grid;gap:.15rem}
.ucs-fakten-zeile dt{font:700 .6875rem/1.2 var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.ucs-fakten-zeile dd{margin:0;font-size:.9375rem;font-weight:600;color:var(--tinte)}
.ucs-person{position:relative;margin:0;border-radius:var(--r-box);overflow:hidden;align-self:center;max-width:420px;width:100%;justify-self:center;
  box-shadow:0 0 0 6px rgba(0,0,0,.08),0 0 0 7px rgba(0,0,0,.08),0 30px 60px -30px rgba(0,0,0,.08)}
.ucs-person__foto{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 12%}
.ucs-person__foto--frei{background:radial-gradient(circle at 50% 35%,#E9EEF3,#C9D3DC);object-position:50% 0}
.ucs-person__band{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:1rem;padding:.9rem 1.1rem;background:var(--marke);color:rgba(255,255,255,.85);font-size:.8125rem;line-height:1.35}
.ucs-person__band img{flex:none;width:auto;height:30px;max-width:46%}
.ucs-person__band strong{color:var(--weiss);font-weight:700}
.ucs-person__band .ph{color:rgba(255,255,255,.6)}
.ucs-zitat{grid-template-columns:1fr!important;text-align:center;max-width:760px}
/* Übersicht: Kundenfoto + Logo-Band */
.uc-liste__raster{display:grid;gap:var(--gap)}
.uc-gross__bild--kunde{position:relative;padding:0;overflow:hidden;aspect-ratio:4/3;background:#DDE3E8}
.uc-gross__foto{width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.uc-gross__foto--frei{object-fit:contain;object-position:50% 100%;background:radial-gradient(circle at 50% 35%,#E9EEF3,#C9D3DC)}
.uc-gross__logo{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;padding:.85rem 1.1rem;background:var(--marke)}
.uc-gross__logo img{height:28px;width:auto;max-width:60%}
.ucs-hero{padding-top:clamp(6.5rem,9vw,7.75rem);padding-bottom:clamp(2.5rem,4vw,3.5rem)}
.brotkrumen{margin-bottom:1rem}
.ucs-hero__text{gap:.85rem}
.ucs-hero__text h1{font-size:clamp(2.25rem,1.2rem + 3vw,3.75rem)}
@media (min-width:600px){.ucs-fakten-zeile{grid-template-columns:repeat(3,minmax(0,1fr));max-width:640px}}
.ucs-person{max-width:380px}
.ucs-person__band img{height:40px}.uc-gross__logo img{height:36px}

/* =================== Workflow als n8n-Arbeitsfläche (Use Case Finora) =================== */
.wfc{border-radius:18px;border:1px solid #46484E;overflow-x:auto;
  background:radial-gradient(circle,rgba(255,255,255,.09) 1px,transparent 1.2px) 0 0/22px 22px,#25272B}
.wfc__svg{display:block;width:100%;min-width:820px;height:auto}
.wfc__kante{fill:none;stroke:#5A5C62;stroke-width:2.2;transition:stroke .4s ease}
.wfc__kante.aktiv{stroke:var(--akzent)}
.wfc__kante--fehler{stroke-dasharray:5 6;stroke:#6B3A3A}
.wfc__kante--neben{stroke-dasharray:5 6}
.wfc__knoten rect{fill:#33353A;stroke:#55575D;stroke-width:1.5;transition:fill .4s ease,stroke .4s ease}
.wfc__ico{fill:none;stroke:var(--akzent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wfc__ico *{fill:none}
.wfc__t{font:700 14px var(--head);fill:var(--weiss);text-anchor:middle}
.wfc__u{font:500 11.5px var(--body);fill:var(--text-auf-dunkel);text-anchor:middle}
.wfc__knoten--neben .wfc__t{font-size:12.5px}
.wfc__knoten--neben .wfc__u{font-size:11px}
.wfc__knoten--fehler{opacity:.55}
.wfc__knoten--fehler .wfc__ico{stroke:#E06C6C}
.wfc__ok{fill:var(--akzent);opacity:0;transition:opacity .3s ease}
.wfc__haken{fill:none;stroke:var(--weiss);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .3s ease}
.wfc__knoten.aktiv rect{fill:#4A3A2C;stroke:var(--akzent);filter:drop-shadow(0 0 14px rgba(0,0,0,.08))}
.wfc__knoten.aktiv .wfc__ico,.wfc__knoten.fertig .wfc__ico{stroke:#FFB25C}
.wfc__knoten.fertig rect{stroke:rgba(232,122,3,.6)}
.wfc__knoten.fertig .wfc__ok,.wfc__knoten.fertig .wfc__haken{opacity:1}
.wfc__paket{fill:var(--akzent);filter:drop-shadow(0 0 6px rgba(0,0,0,.08))}
.wfa--canvas .wfa__lead{justify-self:start}
@media (max-width:899px){.wfc{margin-inline:-.5rem}}
.wfc__knoten--neben text{text-anchor:start}
.wfa--canvas{position:relative}
.wfa--canvas .wfa__lead{position:absolute;top:14px;left:14px;z-index:2;padding:.45rem .9rem .45rem .45rem;box-shadow:0 0 0 4px rgba(0,0,0,.08),0 12px 24px -12px rgba(0,0,0,.08)}
.wfa--canvas .wfa__avatar{width:32px;height:32px;font-size:.75rem}
.wfa--canvas .wfa__lead strong{font-size:.875rem}.wfa--canvas .wfa__lead small{font-size:.75rem}
.wfa--canvas .wfa__log{min-height:0}
.wfa--canvas .wfa-schritt{padding:.45rem .8rem}
.wfa--canvas .wfa__schritte{gap:2px}
@media (max-width:899px){.wfa--canvas .wfa__lead{position:static;justify-self:start}}
.sek.dunkel#workflow{padding-block:clamp(3rem,5vw,4.25rem)}
.wfa--canvas{gap:1rem;margin-top:1.5rem}

/* =================== Workflow Unterlagen-Ablage als Arbeitsfläche (Use Case Wohlstandshüter) =================== */
.wfc__svg--dennis{min-width:860px}
.wfc__svg--dennis .wfc__t{font-size:15px}
.wfc__svg--dennis .wfc__u{font-size:12px}
.wfc__t--l{text-anchor:start}
.wfc__zweig--r{text-anchor:end}
.wfc__zweig--m{text-anchor:middle}
.wfc__zweig--gut{fill:#FFB25C}
.wfc__knoten--seite .wfc__ico{stroke:#9A9DA3}
.wfc__knoten--seite.aktiv .wfc__ico,.wfc__knoten--seite.fertig .wfc__ico{stroke:#FFB25C}

/* Ausgangslage: Problem links, Lösung rechts */
.vn--pl{max-width:1000px;margin-inline:auto}
.vn--pl .vn__spalte{padding:clamp(1.4rem,2.5vw,2rem)}
.vn--pl .vn__spalte h3{margin:0 0 1.1rem;font:700 1.375rem/1.2 var(--head);letter-spacing:0;text-transform:none;color:var(--tinte)}
.vn--pl .vn__spalte--nachher h3{color:var(--akzent-dunkel)}
.vn--pl .liste{display:grid;gap:.8rem}
.vn--pl .liste li{font-size:1rem;line-height:1.5}

/* =================== Use-Case-Seiten komplett hell, nur die Workflow-Grafik bleibt dunkel =================== */
.ucs-wf .sek-kopf h2{color:var(--tinte)}
.ucs-wf .sek-kopf p:not(.eyebrow){color:var(--text-2)}
.ucs-wf .wfa__lead{box-shadow:0 0 0 4px rgba(0,0,0,.08),0 14px 28px -14px rgba(0,0,0,.08);border:1px solid var(--linie)}
.ucs-wf .wfc{box-shadow:0 30px 60px -34px rgba(0,0,0,.08)}
.ucs-wf .wfa__log{background:#25272B;box-shadow:0 30px 60px -34px rgba(0,0,0,.08)}
.ucs-wf .wfa-schritt{color:var(--text-2)}
.ucs-wf .wfa-schritt__nr{border-color:#C4C6CA;color:var(--text-3)}
.ucs-wf .wfa-schritt.aktiv{background:var(--akzent-hauch);color:var(--tinte)}
.ucs-wf .wfa-schritt.fertig{color:var(--tinte)}
.ucs-cta{text-align:center}
.ucs-cta__btns{justify-content:center;margin-top:1.25rem}
.ucs-hero{padding-bottom:2rem}
.sek.ucs-wf#workflow{padding-block:clamp(3rem,5vw,4.25rem)}

/* Case Study: Hero-Reihenfolge (mobil: Überschrift, Text, Foto, Eckdaten), Zitat mit rundem Foto */
.ucs-hero__raster{grid-template-areas:"text" "bild" "unten";row-gap:1.5rem}
.ucs-hero__text{grid-area:text}.ucs-person{grid-area:bild}.ucs-hero__unten{grid-area:unten;display:grid;gap:1rem;justify-items:start}
@media (min-width:981px){.ucs-hero__raster{grid-template-areas:"text bild" "unten bild";row-gap:.5rem;align-items:end}
  .ucs-person{align-self:center}.ucs-hero__unten{align-self:start}}
.ucs-zitat blockquote:not(.ph){font-style:normal}
.ucs-zitat figcaption{display:inline-flex;align-items:center;gap:.8rem;text-align:left;justify-content:center}
.ucs-zitat__avatar{flex:none;width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 12%;box-shadow:0 0 0 3px rgba(0,0,0,.08),0 0 0 4px rgba(0,0,0,.08)}
/* Übersicht mobil: Text vor dem Foto */
@media (max-width:899px){.uc-gross__bild{order:2}}
/* Canvas Finora v2: Raute, Wahl-Knoten, Zweig-Beschriftung */
.wfc__knoten--raute .wfc__t{font-size:13.5px}
.wfc__knoten--wahl .wfc__t{font-size:13px}
.wfc__zweig{font:700 12px var(--head);fill:var(--text-auf-dunkel)}
.wfc__zweig--ja{fill:#E06C6C}
.wfa--canvas .wfa-schritt{padding:.3rem .8rem}
.wfa--canvas .wfa__log li{line-height:1.35}
.wfa--canvas{gap:.75rem;margin-top:1rem}
.sek.ucs-wf#workflow{padding-block:clamp(2.75rem,4.5vw,3.75rem)}

/* =================== Slop-Fix 22.10.2026: keine Verlaufsschrift, keine Deko-Verläufe, Kontrast AA =================== */
:root{--text-3:#6B6E73}
/* Hervorhebung: eine feste Markenfarbe statt Verlauf */
.hl,.hl .w__i,.w__i.hl,.uc__aussage,.uc .uc__aussage,.uc-gross .uc__aussage,.ucs-hero__text .uc__aussage{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;
  -webkit-text-fill-color:currentColor!important;color:var(--akzent-schrift)!important;animation:none!important}
.dunkel .hl,.hl--dunkel,.dunkel .w__i.hl,.cta-band .hl,.zahlen__zelle--cta .hl{color:#F29A3A!important}
/* Flächen ohne Verlauf */
.ringe::before,.ringe::after{display:none!important}
.dunkel{background:var(--anthrazit)!important}
.dunkel::before,.dunkel::after{display:none!important}
.hero__bild--zentrale{background:var(--anthrazit)!important}
.zentrale__kern{background:var(--akzent)!important}
.doppel{background:var(--akzent)!important}
.ansprechpartner__bild{background:var(--flaeche)!important}
:is(.karte,.usecase,.branche,.schritt,.stimme,.zahl,.rechner__eingaben,.rechner__ergebnis)::after{display:none!important}
.schmerz::before{display:none!important}
.cta-band::before,.cta-band--mitte::before{background:rgba(28,30,33,.82)!important}
.btn::after{display:none!important}
.btn--rahmen,.btn--rahmen:hover{background:var(--weiss)!important;border-color:var(--akzent)!important}
.btn--rahmen:hover{background:var(--akzent-hauch)!important}
.drei__nr{background:var(--akzent)!important}
.zielbox__anim::before{display:none!important}
.fortschritt-balken{background:var(--akzent)!important}
.ucs-person__foto--frei,.uc-gross__foto--frei{background:#DDE3E8!important}
/* Kontrast */
.eyebrow{color:#9A4F00!important}
.dunkel .eyebrow,.cta-band .eyebrow{color:#FFB25C!important}
.dunkel .ph,.zentrale__status small{color:var(--text-auf-dunkel)!important}
.ringe::before,.ringe::after,.dunkel::before,.dunkel::after,.schmerz::before,.zielbox__anim::before,.btn::after,
:is(.karte,.usecase,.branche,.schritt,.stimme,.zahl,.rechner__eingaben,.rechner__ergebnis)::after{background:none!important;background-image:none!important}
h3 .hl,.nicht-dabei .hl{color:#9A4F00!important}
.rechner__ergebnis .rechner__label,.rechner__ergebnis .rechner__hinweis,.cta-band .ph{color:var(--text-auf-dunkel)!important}
.btn--kontur{box-shadow:none!important;border:1.5px solid rgba(42,44,48,.25)}
.cta-band--mitte .btn--kontur{border-color:rgba(255,255,255,.35)}
.rechner input[type=range]{background:var(--grau-hell)!important}
.rechner input[type=range]::-moz-range-progress{background:var(--akzent);height:8px;border-radius:8px}
.vn__spalte--nachher h3{color:#9A4F00!important}

/* =================== Bewegung zurück, ohne Slop-Muster (22.10.2026) ===================
   Regeln: keine background-gradients, keine farbigen box-shadows, keine Verlaufsschrift.
   Stattdessen SVG-Muster, feste Farben, Masken und Bewegung. */
:root{
  --raster-hell:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M48 .5H.5V48' fill='none' stroke='%23ffffff' stroke-opacity='.07'/%3E%3C/svg%3E");
  --raster-orange:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M48 .5H.5V48' fill='none' stroke='%23E87A03' stroke-opacity='.6'/%3E%3C/svg%3E");
  --ringe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1200'%3E%3Cg fill='none' stroke='%232A2C30' stroke-opacity='.075'%3E%3Ccircle cx='600' cy='600' r='130'/%3E%3Ccircle cx='600' cy='600' r='210'/%3E%3Ccircle cx='600' cy='600' r='290'/%3E%3Ccircle cx='600' cy='600' r='370'/%3E%3Ccircle cx='600' cy='600' r='450'/%3E%3Ccircle cx='600' cy='600' r='530'/%3E%3C/g%3E%3C/svg%3E");
  --ring-strich:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1200'%3E%3Ccircle cx='600' cy='600' r='410' fill='none' stroke='%23E87A03' stroke-opacity='.35' stroke-width='2' stroke-dasharray='4 18'/%3E%3C/svg%3E");
  --streifen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M-6 6L6-6M0 24L24 0M18 30L30 18' stroke='%23ffffff' stroke-opacity='.18' stroke-width='2'/%3E%3C/svg%3E");
}
/* Dunkle Blöcke: wanderndes Raster + Raster leuchtet unter der Maus orange auf (Maske statt Glow) */
.sek.dunkel::before{display:block!important;content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:var(--raster-hell) 0 0/48px 48px!important;animation:rasterZieh 40s linear infinite}
.sek.dunkel::after{display:block!important;content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:var(--raster-orange) 0 0/48px 48px!important;animation:rasterZieh 40s linear infinite;
  -webkit-mask-image:radial-gradient(300px circle at var(--dx,50%) var(--dy,-30%),#000,transparent 72%);mask-image:radial-gradient(300px circle at var(--dx,50%) var(--dy,-30%),#000,transparent 72%)}
@keyframes rasterZieh{to{background-position:48px 48px}}
/* Hero: Ringe als SVG, atmen langsam, gestrichelter Ring dreht sich */
.hero.ringe::before,.hero.ringe::after{display:block!important;content:"";position:absolute;z-index:-1;pointer-events:none;width:1300px;height:1300px;right:-330px;top:50%;margin-top:-650px}
.hero.ringe::before{background:var(--ringe) center/contain no-repeat!important;animation:ringeAtmen 12s ease-in-out infinite}
.hero.ringe::after{background:var(--ring-strich) center/contain no-repeat!important;animation:drehen 90s linear infinite}
@keyframes ringeAtmen{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes drehen{to{transform:rotate(360deg)}}
@media (max-width:980px){.hero.ringe::before,.hero.ringe::after{right:-700px;opacity:.7}}
/* Hervorgehobene Wörter: Unterstreichung zeichnet sich ein (feste Farbe) */
.hl:not(.w__i),.w__i.hl{position:relative}
.hl:not(.w__i)::after,.w__i.hl::after{content:"";position:absolute;left:0;right:0;bottom:-.04em;height:.08em;border-radius:3px;background:var(--akzent);opacity:.55;
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .35s}
.geteilt.zeigen .w__i.hl::after,.hl:not(.w__i)::after{transform:scaleX(1)}
.js .seq:not(.seq-an) .hl:not(.w__i)::after{transform:scaleX(0)}
.dunkel .hl::after,.cta-band .hl::after{background:#F29A3A}
/* Buttons: Lichtstreifen in fester Farbe, beim Hover und beim Primär-Button regelmäßig */
.btn.btn::after{display:block!important;content:"";position:absolute;top:0;bottom:0;left:0;width:40%;z-index:-1;pointer-events:none;
  background:rgba(255,255,255,.14)!important;transform:translateX(-160%) skewX(-20deg);transition:none}
.btn--hell.btn::after,.btn--kontur.btn::after,.btn--rahmen.btn::after{background:rgba(232,122,3,.14)!important}
.btn.btn:hover::after{transform:translateX(330%) skewX(-20deg);transition:transform .8s var(--ease)}
.btn--primaer.btn::after{animation:btnWisch 7s ease-in-out infinite 2s}
@keyframes btnWisch{0%,82%{transform:translateX(-160%) skewX(-20deg)}96%,100%{transform:translateX(330%) skewX(-20deg)}}
/* Pulsieren statt Leuchten */
.zentrale__kern{animation:kernAtmen 2.6s ease-in-out infinite!important}
@keyframes kernAtmen{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.07)}}
.hero__bild--zentrale{background:var(--raster-hell) 0 0/32px 32px,var(--anthrazit)!important}
.eyebrow::before{animation:punktPuls 2.4s ease-in-out infinite}
@keyframes punktPuls{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.7);opacity:.55}}
.fw .zielbox__anim::before{display:block!important;background:rgba(232,122,3,.16)!important;background-image:none!important}
.wfc__knoten,.wfl__knoten{transform-box:fill-box;transform-origin:center;transition:transform .35s var(--ease)}
.wfc__knoten.aktiv,.wfl__knoten.aktiv{transform:scale(1.1)}
/* Orange Fläche hinter "Über uns": laufende Streifen */
.doppel{isolation:isolate}
.doppel::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:var(--streifen) 0 0/24px 24px;animation:streifenLauf 2.5s linear infinite}
@keyframes streifenLauf{to{background-position:24px 0}}
/* Karten heben sich leicht an */
.zielbox,.drei__karte,.uc-gross,.vn__spalte{transition:transform .4s var(--ease),border-color .35s ease}
@media (hover:hover){.zielbox:hover,.drei__karte:hover,.uc-gross:hover{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){
  .sek.dunkel::before,.sek.dunkel::after,.hero.ringe::before,.hero.ringe::after,.doppel::before,.btn--primaer.btn::after,.zentrale__kern,.eyebrow::before{animation:none!important}
  .hl::after{transition:none;transform:scaleX(1)!important}}
.zentrale__status strong{font-size:clamp(.9375rem,.8rem + .5vw,1.125rem);white-space:nowrap}

/* 22.10.: Gitter nur am Rand der dunklen Boxen, zur Mitte hin ausgeblendet */
.sek.dunkel::before{-webkit-mask-image:radial-gradient(ellipse 72% 68% at 50% 50%,transparent 38%,#000 100%);mask-image:radial-gradient(ellipse 72% 68% at 50% 50%,transparent 38%,#000 100%)}
/* Unterstreichungen nur dort, wo gewünscht: nicht in Hero, Lösung, Use Cases, Richtiger Weg, FAQ */
.hero .hl::after,#loesung .hl::after,#leistungen .hl::after,#richtiger-weg .hl::after,#faq .hl::after,.seite-kopf .hl::after{display:none!important}
.sek.dunkel::after{
  -webkit-mask-image:radial-gradient(ellipse 72% 68% at 50% 50%,transparent 38%,#000 100%),radial-gradient(300px circle at var(--dx,50%) var(--dy,-30%),#000,transparent 72%);
  -webkit-mask-composite:source-in;
  mask-image:radial-gradient(ellipse 72% 68% at 50% 50%,transparent 38%,#000 100%),radial-gradient(300px circle at var(--dx,50%) var(--dy,-30%),#000,transparent 72%);
  mask-composite:intersect}
/* Über uns mobil: Überschrift, dann Foto, dann der restliche Text */
@media (max-width:980px){
  .vertrauen--bild-links{row-gap:1.25rem}
  .vertrauen--bild-links > div,.vertrauen--bild-links .sek-kopf{display:contents}
  .vertrauen--bild-links .sek-kopf > .eyebrow{order:1;justify-self:start}
  .vertrauen--bild-links .sek-kopf > h2{order:2;margin:0}
  .vertrauen--bild-links .ansprechpartner{order:3;margin-block:.5rem}
  .vertrauen--bild-links .sek-kopf > p:not(.eyebrow){order:4;margin:0}
  .vertrauen--bild-links .vertrauen__punkte{order:5}
  .vertrauen--bild-links .sek-cta{order:6}
}

/* Use Cases: Bahnen, Schritt-Nummern, Icon im Lead-Chip, Live-Protokoll mit fester Höhe */
.wfa__avatar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:900px){.wfa--canvas .wfa__schritte{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 14px}}

/* Use Cases: Erzähler unter der Arbeitsfläche, zeigt den aktuellen Schritt */
.wfc{overflow:hidden;display:grid}
.wfc__flaeche{overflow-x:auto}
.wfc__erzaehler{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.9rem 1.25rem;padding:1.1rem 1.5rem;border-top:1px solid #3A3C41;background:#1F2124}
.wfc__nr{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--akzent-dunkel);color:var(--weiss);font:700 1rem/1 var(--head);transition:opacity .22s ease,transform .22s ease}
.wfc__text{margin:0;min-height:2.9em;display:flex;align-items:center;font:500 1.0625rem/1.45 var(--body);color:var(--weiss);transition:opacity .22s ease,transform .22s ease}
.wfc__erzaehler.wechsel .wfc__nr,.wfc__erzaehler.wechsel .wfc__text{opacity:0;transform:translateY(6px)}
.wfc__fort{display:flex;gap:6px}
.wfc__fort i{width:22px;height:4px;border-radius:2px;background:#46484E;transition:background-color .35s ease}
.wfc__fort i.an{background:var(--akzent)}
@media (max-width:699px){.wfc__erzaehler{grid-template-columns:auto minmax(0,1fr);padding:1rem}.wfc__fort{grid-column:1/-1}.wfc__fort i{flex:1}
  .wfc__text{min-height:5.8em;font-size:.9375rem}.wfc__nr{width:36px;height:36px;font-size:.875rem;align-self:start}}
@media (max-width:899px){.wfa--canvas .wfa__lead{margin-bottom:.25rem}}

/* Use Case: Ergebnis als Stichpunkte */
.erg-liste{display:grid;gap:.9rem;max-width:760px;margin:0 auto;padding:0}
.erg-liste li{font-size:1.0625rem;line-height:1.5;color:var(--tinte)}

/* Use Cases: keine Unterstreichung unter den hervorgehobenen Wörtern */
.ucs-hero .hl::after,.ucs-hero ~ .sek .hl::after,.ucs-cta .hl::after{display:none!important}

/* =================== Kurz-Checks: Mini-Fragebogen zwischen den Sektionen =================== */
.sek.quiz{background:var(--flaeche);padding-block:clamp(3rem,2rem + 3vw,4.5rem)}
.quiz__raster{display:grid;gap:clamp(1.75rem,3vw,3rem);align-items:start}
@media (min-width:981px){.quiz__raster{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:4rem}}
.quiz__intro{display:grid;gap:1rem;justify-items:start;padding-top:.5rem}
.quiz__titel{font-size:clamp(1.75rem,1.2rem + 1.8vw,2.5rem);line-height:1.12}
.quiz__lead{font-size:var(--fs-lead);line-height:1.5}
.quiz__meta{list-style:none;margin:.25rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
.quiz__meta li{display:flex;align-items:center;gap:.45rem;font:600 .875rem/1.3 var(--head);color:var(--tinte)}
.quiz__meta svg{width:18px;height:18px;fill:none;stroke:var(--akzent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Die Karte reserviert den Platz des größten Schritts; sichtbar ist nur die weiße Fläche dahinter, die mit dem aktuellen Schritt wächst und schrumpft */
.quiz__karte{position:relative;padding:clamp(1.4rem,3vw,2rem)}
.quiz__hg{position:absolute;inset:0;border-radius:24px;background:var(--weiss);border:1px solid var(--linie);box-shadow:0 30px 60px -34px rgba(0,0,0,.08)}
.quiz__innen{position:relative}
.quiz__sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.quiz__falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.quiz__fehler{margin:0 0 1rem;padding:.8rem 1rem;border-radius:12px;background:#FDECEC;color:#8A1F1F;font-size:.9375rem}
.quiz__fehler a{color:inherit;font-weight:700}
.quiz__kopf{display:none;align-items:center;gap:1rem;margin-bottom:1.4rem}
.quiz__zurueck{flex:none;padding:0;border:0;background:none;cursor:pointer;font:600 .875rem/1.5 var(--head);color:var(--text-3)}
@media (hover:hover){.quiz__zurueck:hover{color:var(--tinte)}}
.quiz__zurueck--aus{visibility:hidden}
.quiz__balken{flex:1;height:5px;border-radius:3px;background:var(--grau-hell);overflow:hidden}
.quiz__balken i{display:block;height:100%;width:var(--fort,0%);border-radius:3px;background:var(--akzent);transition:width .45s var(--ease)}
.quiz__buehne{display:grid;gap:2.25rem}
.quiz__schritt{border:0;margin:0;padding:0;min-width:0}
.quiz__frage{display:block;float:none;width:100%;padding:0;margin:0 0 1.1rem;font:600 clamp(1.2rem,1.05rem + .6vw,1.5rem)/1.3 var(--head);color:var(--tinte)}
.quiz__optionen{display:grid;gap:.7rem}
@media (min-width:560px){.quiz__optionen{grid-template-columns:1fr 1fr}.quiz__optionen--ungerade .quiz__kachel:last-child{grid-column:1/-1}}
.quiz__kachel{position:relative;cursor:pointer}
.quiz__kachel input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.quiz__kachel span{display:flex;align-items:center;gap:.8rem;min-height:56px;height:100%;padding:.8rem 1.1rem;border-radius:14px;border:1.5px solid var(--linie);background:var(--weiss);
  font:600 .9688rem/1.35 var(--head);color:var(--tinte);transition:border-color .25s ease,background-color .25s ease}
.quiz__kachel span::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid #C4C6CA;background:var(--weiss);transition:border-color .25s ease,background-color .25s ease,box-shadow .25s ease}
@media (hover:hover){.quiz__kachel:hover span{border-color:var(--akzent);background:var(--akzent-hauch)}}
.quiz__kachel input:checked + span{border-color:var(--akzent);background:var(--akzent-hauch)}
.quiz__kachel input:checked + span::before{border-color:var(--akzent-dunkel);background:var(--akzent-dunkel);box-shadow:inset 0 0 0 3.5px var(--weiss)}
.quiz__kachel input:focus-visible + span{outline:2px solid var(--akzent);outline-offset:2px}
.quiz__frei{display:flex;gap:.6rem;margin-top:.7rem}
.quiz__frei .quiz__feld{flex:1;min-width:0}
.quiz__felder{display:grid;gap:.6rem}
.quiz__feld{display:block;width:100%;height:54px;padding:0 1.1rem;border-radius:12px;border:1.5px solid var(--linie);background:var(--weiss);font:500 1rem/1.3 var(--body);color:var(--tinte);transition:border-color .25s ease,box-shadow .25s ease}
.quiz__feld::placeholder{color:#9A9DA3}
.quiz__feld:focus{outline:none;border-color:var(--akzent);box-shadow:0 0 0 3px rgba(var(--akzent-rgb),.18)}
.quiz__hinweis{margin:.8rem 0 0;font-size:.8125rem;line-height:1.5;color:var(--text-3)}
.quiz__hinweis a{color:var(--akzent-dunkel)}
/* schlichter Knopf passend zu den Feldern */
.quiz__knopf{flex:none;height:54px;padding:0 1.5rem;border:0;border-radius:12px;background:var(--anthrazit);color:var(--weiss);font:600 1rem/1 var(--head);cursor:pointer;transition:background-color .25s ease}
@media (hover:hover){.quiz__knopf:hover{background:var(--akzent-dunkel)}}
.quiz__knopf:disabled{opacity:.6;cursor:default}
.quiz__senden{width:100%;margin-top:1rem}
/* mit JS: ein Schritt nach dem anderen in derselben Rasterzelle */
.quiz--js .quiz__kopf{display:flex}
.quiz--js .quiz__buehne{gap:0}
.quiz--js .quiz__schritt{grid-area:1/1;align-self:start;visibility:hidden;opacity:0;transform:translateX(18px);transition:opacity .3s ease,transform .35s var(--ease),visibility 0s linear .35s}
.quiz--js .quiz__schritt.aktiv{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.quiz--js .quiz__schritt.vorbei{transform:translateX(-18px)}
.quiz--js .quiz__frei{display:none}
.quiz--js .quiz__frei.offen,.quiz--js.messen .quiz__frei{display:flex}
.quiz--js .quiz__hg{bottom:auto;height:var(--h,100%);transition:height .4s var(--ease)}
@media (prefers-reduced-motion:reduce){.quiz--js .quiz__schritt,.quiz--js .quiz__hg{transition:none;transform:none}}

/* =================== Danke-Fenster mit Zeitleiste und Lade-Symbolen =================== */
.danke{width:min(100% - 2rem,540px);max-height:calc(100dvh - 2rem);overflow:auto;border:0;padding:clamp(1.5rem,4vw,2.25rem);border-radius:24px;background:var(--weiss);color:var(--text-2);box-shadow:0 40px 80px -30px rgba(0,0,0,.08)}
.danke::backdrop{background:rgba(28,30,33,.6)}
.danke[open]{animation:dankeAuf .5s var(--ease)}
.danke:target{display:block;position:fixed;inset:0;margin:auto;height:fit-content;z-index:300}
@keyframes dankeAuf{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.danke__zu{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--flaeche);color:var(--tinte);cursor:pointer}
.danke__zu svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media (hover:hover){.danke__zu:hover{background:var(--grau-hell)}}
.danke__siegel{position:relative;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--akzent-dunkel);color:var(--weiss);animation:siegel .6s var(--ease) .15s both}
.danke__siegel svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@keyframes siegel{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.danke__titel{margin:1rem 0 .25rem;font:700 clamp(1.5rem,1.3rem + .8vw,1.875rem)/1.15 var(--head);color:var(--tinte)}
.danke__text{margin:0;color:var(--text-2)}
.danke__ok{width:100%}
.zeitlinie{list-style:none;margin:1.5rem 0 1.75rem;padding:0;display:grid}
/* --t: Erscheinen, --x: Ladekreis wird zum Symbol */
.zl--1{--t:.3s;--x:1.4s}.zl--2{--t:1.5s;--x:2.8s}.zl--3{--t:3s}.zl--4{--t:3.3s}
.zl{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:1rem;padding-bottom:1.35rem;animation:zlEin .45s var(--ease) var(--t) both}
.zl:last-child{padding-bottom:0}
.zl:not(:last-child)::before{content:"";position:absolute;left:19px;top:42px;bottom:2px;width:2px;border-radius:1px;background:var(--linie)}
.zl--1::after{content:"";position:absolute;left:19px;top:42px;width:2px;height:0;border-radius:1px;background:var(--akzent);animation:zlLinie .5s ease 1.5s forwards}
@keyframes zlEin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes zlLinie{to{height:calc(100% - 44px)}}
.zl__punkt{position:relative;z-index:1;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:2px solid var(--linie);background:var(--weiss);color:var(--text-3)}
.zl__punkt svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.zl__lader{position:absolute;inset:-2px;border-radius:50%;border:2.5px solid rgba(var(--akzent-rgb),.2);border-top-color:var(--akzent);animation:zlDreh .8s linear infinite,zlAus .25s ease var(--x) forwards}
.zl__ico{display:grid;place-items:center;opacity:0;transform:scale(.5);animation:zlIco .35s var(--ease) var(--x) forwards}
.zl--1 .zl__punkt{animation:zlFertig .3s ease var(--x) forwards}
.zl--2 .zl__punkt{animation:zlAktiv .3s ease var(--x) forwards}
.zl--2 .zl__punkt::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--akzent);opacity:0;animation:zlPuls 1.8s ease-out calc(var(--x) + .4s) infinite}
.zl--2 .zl__ico svg{animation:zlBrief 1.8s ease-in-out calc(var(--x) + .4s) infinite}
.zl__warten{display:flex;gap:3px}
.zl__warten i{width:5px;height:5px;border-radius:50%;background:#B4B7BC;animation:zlPunkt 1.2s ease-in-out infinite}
.zl__warten i:nth-child(2){animation-delay:.15s}.zl__warten i:nth-child(3){animation-delay:.3s}
@keyframes zlDreh{to{transform:rotate(360deg)}}
@keyframes zlAus{to{opacity:0;visibility:hidden}}
@keyframes zlIco{to{opacity:1;transform:none}}
@keyframes zlFertig{to{border-color:var(--akzent-dunkel);background:var(--akzent-dunkel);color:var(--weiss)}}
@keyframes zlAktiv{to{border-color:var(--akzent);background:var(--akzent-hauch);color:var(--akzent-dunkel)}}
@keyframes zlPuls{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}
@keyframes zlBrief{0%,100%{transform:none}30%{transform:translateY(-3px)}60%{transform:translateY(1px)}}
@keyframes zlPunkt{0%,100%{opacity:.35;transform:none}50%{opacity:1;transform:translateY(-2px)}}
.zl__text strong{display:block;margin-top:.45rem;font:700 1rem/1.3 var(--head);color:var(--tinte)}
.zl__text small{display:block;margin-top:.2rem;font-size:.9063rem;line-height:1.5;color:var(--text-2)}
.zl--3 strong,.zl--4 strong{color:var(--text-2)}
.zl--3 small,.zl--4 small{color:var(--text-3)}
.zl--2 .zl__text small{color:var(--akzent-dunkel);font-weight:600}
.zl--2 .zl__text small{opacity:0;animation:zlIco .35s var(--ease) var(--x) forwards}
@media (prefers-reduced-motion:reduce){.danke[open],.danke__siegel,.zl,.zl--1::after,.zl__punkt,.zl__punkt::after,.zl__ico,.zl__ico svg,.zl__warten i{animation:none!important;opacity:1}
  .zl__lader{display:none}.zl__ico{transform:none}.zl--1::after{height:calc(100% - 44px)}
  .zl--1 .zl__punkt{border-color:var(--akzent-dunkel);background:var(--akzent-dunkel);color:var(--weiss)}.zl--2 .zl__punkt{border-color:var(--akzent);background:var(--akzent-hauch);color:var(--akzent-dunkel)}}

/* Positionen, die vorher inline im HTML standen (SEO: keine style-Attribute) */
.zentrale__kern--s1.zentrale__kern{left:50%;top:43.0%}
.zentrale__knoten--s2.zentrale__knoten{left:50.0%;top:12.4%;--i:0}
.zentrale__knoten--s3.zentrale__knoten{left:83.75%;top:28.0%;--i:1}
.zentrale__knoten--s4.zentrale__knoten{left:83.75%;top:58.0%;--i:2}
.zentrale__knoten--s5.zentrale__knoten{left:50.0%;top:72.4%;--i:3}
.zentrale__knoten--s6.zentrale__knoten{left:16.25%;top:58.0%;--i:4}
.zentrale__knoten--s7.zentrale__knoten{left:16.25%;top:28.0%;--i:5}
.st-8{--i:0}
.st-9{--i:1}
.st-10{--i:2}
.st-11{--i:3}
.st-12{--i:4}
.marke-finora{--marke:#043C43}
.marke-wohlstand{--marke:#002947}
.fehlerseite__wege{margin:1.25rem 0 1.5rem}
.fehlerseite__wege a{font-weight:700;color:var(--akzent-dunkel)}

/* =================== Leistungsseite Webdesign (nur .wd, Markenfarben) =================== */
.wd h2{text-wrap:balance}
.wd .hl::after{display:none!important}
/* Kopf wie auf der Startseite, Bild vollständig im Querformat */
.wd-hero__breit{margin:0}
.wd-hero__breit img{display:block;width:100%;height:auto;border-radius:var(--r-box);box-shadow:0 0 0 6px rgba(0,0,0,.08),0 30px 60px -30px rgba(0,0,0,.08)}
.wd-hero .brotkrumen{margin:0}
/* Abschnitte trennen sich über Farbblöcke wie auf der Startseite, nicht über Linien */
.wd>.sek:not(#_){border-top:0}
.sek.wd-block{margin-inline:var(--block-rand);border-radius:var(--r-block);background:var(--flaeche)}
.wd-block .statement{font-size:clamp(1.5rem,1rem + 1.9vw,2.6rem)}
/* Zwei Spalten */
.wd-zwei{display:grid;gap:clamp(2rem,4vw,4.5rem);align-items:center}
@media (min-width:981px){.wd-zwei{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.wd-zwei--gedreht{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}.wd-zwei--gedreht .wd-zwei__text{order:2}}
.wd-zwei__text{display:grid;gap:1.1rem;justify-items:start}
.wd-zwei__text h2,.wd .sek-kopf h2{font-size:clamp(2rem,1.3rem + 2.3vw,3.1rem);line-height:1.08}
.wd-zwei__text>p:not(.eyebrow){font-size:var(--fs-lead);line-height:1.6}
/* 3 Sofort verständlich: 5-Sekunden-Check */
.wd-check{position:relative;display:grid;padding-top:3.9rem}
.wd-check__uhr{position:absolute;z-index:2;top:0;right:1.5rem;display:grid;place-items:center;width:104px;height:104px;border-radius:50%;background:var(--weiss);box-shadow:0 14px 30px -14px rgba(0,0,0,.08)}
.wd-check__uhr svg{position:absolute;inset:0;transform:rotate(-90deg)}
.wd-check__spur,.wd-check__lauf{fill:none;stroke-width:7}
.wd-check__spur{stroke:var(--grau-hell)}
.wd-check__lauf{stroke:var(--akzent);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0}
.wd-check.laeuft .wd-check__lauf{stroke-dashoffset:100;transition:stroke-dashoffset 5s linear}
.wd-check__zahl{font:700 2.25rem/1 var(--head);color:var(--tinte)}
.wd-check__uhr small{position:absolute;bottom:22px;font-size:.6875rem;color:var(--text-3)}
.wd-check__seite{position:relative;width:100%;display:grid;gap:1.25rem;padding:1.25rem 1.5rem 2.5rem;border-radius:18px;background:var(--weiss);border:1px solid var(--linie);box-shadow:0 40px 80px -40px rgba(0,0,0,.08)}
.wd-check__leiste{display:flex;gap:6px}.wd-check__leiste i{width:9px;height:9px;border-radius:50%;background:#D0D2D6}
.wd-check__zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem}
.wd-check__balken{display:block;height:24px;border-radius:7px;background:var(--anthrazit)}
.wd-check__balken--h1{width:92%}
.wd-check__balken--sub{width:76%;height:12px;background:#CFD1D6}
.wd-check__balken--knopf{width:160px;height:40px;border-radius:999px;background:var(--akzent)}
.wd-check__frage{display:flex;align-items:center;gap:.5rem;font:600 .9375rem/1.2 var(--head);color:var(--tinte);opacity:0;transform:translateX(10px);transition:opacity .4s ease,transform .4s var(--ease)}
.wd-check__frage b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--akzent-dunkel);color:var(--weiss);font-size:.8125rem}
.wd-check__zeile.an .wd-check__frage{opacity:1;transform:none}
.wd-check__zeile.an .wd-check__balken{box-shadow:0 0 0 4px rgba(var(--akzent-rgb),.25)}
.wd-check__fazit{position:absolute;left:1.5rem;bottom:-1.1rem;display:flex;align-items:center;gap:.5rem;padding:.4rem .8rem .4rem .45rem;border-radius:999px;background:var(--akzent-hauch);font:700 .875rem/1 var(--head);color:var(--akzent-dunkel);opacity:0;transform:scale(.7);transition:opacity .35s ease,transform .5s var(--ease)}
.wd-check.fertig .wd-check__fazit{opacity:1;transform:none}
@media (max-width:559px){.wd-check__zeile{grid-template-columns:1fr}.wd-check__frage{justify-self:start}}
/* 4 Recherche: dunkler Block (Anthrazit) mit Suchleiste */
.wd-suche{padding:clamp(1.25rem,3vw,2rem);border-radius:22px;background:#33353A;border:1px solid #46484E}
.wd-suche__feld{display:flex;align-items:center;gap:.8rem;min-height:64px;padding:.9rem 1.3rem;border-radius:32px;background:var(--weiss);color:var(--tinte);font:500 clamp(.9375rem,.85rem + .3vw,1.0625rem)/1.35 var(--body)}
.wd-suche__feld svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--text-3);stroke-width:2;stroke-linecap:round}
.wd-suche__text{overflow-wrap:anywhere}
.wd-suche__cursor{flex:none;width:2px;height:1.2em;background:var(--akzent);animation:wdCursor 1s steps(1) infinite}
.wd-suche__label{margin:1.5rem 0 .6rem;font:700 .75rem/1 var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--akzent)}
.wd-suche__seite{display:grid;gap:.75rem;padding:1.1rem 1.25rem 1.4rem;border-radius:14px;background:var(--weiss)}
.wd-suche__mini{display:flex;gap:5px}.wd-suche__mini i{width:8px;height:8px;border-radius:50%;background:#D0D2D6}
.wd-suche__ergebnis{min-height:2.5em;margin:0;font:700 clamp(1.25rem,1rem + .8vw,1.6rem)/1.25 var(--head);color:var(--tinte);transition:color .35s ease}
.wd-suche__ergebnis.leer{color:transparent}
.wd-suche__zeilen{display:grid;gap:.45rem}.wd-suche__zeilen i{height:9px;border-radius:5px;background:var(--grau-hell)}.wd-suche__zeilen i:last-child{width:70%}
.wd-suche__knopf{width:130px;height:34px;border-radius:999px;background:var(--akzent)}
.wd-suche__teile{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:1.1rem 0 0;padding:0}
.wd-suche__teile li{padding:.45rem .9rem;border-radius:999px;border:1px solid rgba(var(--akzent-rgb),.55);color:#FFB25C;font:600 .8125rem/1 var(--head)}
/* KI-Agent: Zentrale mit Gehirn, Quellen fließen zur Mitte */
.wd-agent{display:grid;gap:0;border-radius:22px;overflow:hidden;border:1px solid #3A3C41;background:var(--raster-hell) 0 0/32px 32px,var(--anthrazit)}
.wd-agent__feld{position:relative;aspect-ratio:1;container-type:inline-size}
.wd-agent .zentrale__linie{stroke:rgba(255,255,255,.18);stroke-width:2}
.wd-agent__ring{transform-origin:250px 250px}
.wd-agent__kern{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;align-content:center;gap:.4rem;background:var(--akzent);box-shadow:0 0 0 8px rgba(var(--akzent-rgb),.2);animation:kernAtmen 2.6s ease-in-out infinite}
.wd-agent__gehirn{width:44%;height:auto;fill:none;stroke:var(--weiss);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wd-agent__kern small{font:700 clamp(.6875rem,3cqi,.9375rem)/1 var(--head);color:var(--weiss);letter-spacing:.02em}
.wd-agent .zentrale__knoten{font-size:clamp(.75rem,3.2cqi,1rem);padding:.6rem .85rem}
.wd-agent .zentrale__knoten svg{width:20px;height:20px}
.wd-agent__k0{left:50%;top:13.6%;--i:0}.wd-agent__k1{left:81.5%;top:31.8%;--i:1}.wd-agent__k2{left:81.5%;top:68.2%;--i:2}
.wd-agent__k3{left:50%;top:86.4%;--i:3}.wd-agent__k4{left:18.5%;top:68.2%;--i:4}.wd-agent__k5{left:18.5%;top:31.8%;--i:5}
.wd-agent__status{display:flex;align-items:center;gap:.7rem;padding:1rem 1.25rem;border-top:1px solid #3A3C41;background:#25272B;font:600 .9375rem/1.3 var(--head);color:var(--weiss)}
.wd-agent__status i{flex:none;width:9px;height:9px;border-radius:50%;background:#3DD68C;animation:onlinePuls 2s ease-in-out infinite}
.wd-agent__status span{transition:opacity .3s ease}
.wd-agent__status span.leer{opacity:0}
/* Persönlich: Foto + Text */
.wd-person{display:grid;gap:clamp(2rem,4vw,4rem);align-items:center}
@media (min-width:900px){.wd-person{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.wd-person__rahmen{position:relative;border-radius:var(--r-box);overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.08)}
.wd-person__bild{display:block;width:100%;height:auto}
.wd-person__text{display:grid;gap:1.1rem;justify-items:start}
.wd-person__text h2{font-size:clamp(2rem,1.3rem + 2.3vw,3.1rem);line-height:1.08}
.wd-person__text p:not(.eyebrow){font-size:var(--fs-lead);line-height:1.6}
/* Referenzen */
.ref-liste{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.5rem,3vw,2.25rem) var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
@media (min-width:981px){.ref-liste{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ref{display:grid;gap:1rem;height:100%;text-decoration:none;color:inherit}
.ref__bild{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--linie);background:var(--weiss);box-shadow:0 30px 60px -34px rgba(0,0,0,.08)}
.ref__leiste{display:flex;align-items:center;gap:5px;padding:.55rem .8rem;background:var(--flaeche);border-bottom:1px solid var(--linie)}
.ref__leiste i{width:8px;height:8px;border-radius:50%;background:#D0D2D6}
.ref__leiste b{margin-left:.6rem;font:500 .75rem/1 var(--body);color:var(--text-3)}
.ref__bild img{display:block;width:100%;height:auto}
.ref__text{display:grid;gap:.2rem}
.ref__text strong{font:700 1.0625rem/1.3 var(--head);color:var(--tinte)}
.ref__text small{font-size:.9375rem;color:var(--text-2)}
.ref__mehr{display:inline-flex;align-items:center;gap:.4rem;margin-top:.35rem;font:700 .875rem/1.3 var(--head);color:var(--akzent-dunkel)}
.ref__mehr svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.ref:hover .ref__mehr{text-decoration:underline}.ref:hover .ref__text strong{color:var(--akzent-dunkel)}}
/* Abschluss */
.wd-abschluss__inhalt{display:grid;gap:1.1rem;justify-items:center;text-align:center;max-width:860px}
.wd-abschluss__inhalt h2{font-size:clamp(2rem,1.3rem + 2.3vw,3.1rem);line-height:1.08}
.wd-abschluss__inhalt p{font-size:var(--fs-lead);line-height:1.55;max-width:56ch}
@media (prefers-reduced-motion:reduce){.wd-suche__cursor,.wd-agent__kern,.wd-agent__status i{animation:none}}
@keyframes wdCursor{50%{opacity:0}}

/* =================== Höhen-Balance (Regel): linke und rechte Spalte beginnen oben gleich und enden unten gleich =================== */
@media (max-width:1199px){.wd-hero .hero__inhalt:not(#_){grid-template-columns:1fr;min-height:0}.wd-hero__breit{max-width:820px}}
@media (min-width:1200px){
  .wd-hero .hero__inhalt:not(#_){grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:stretch;min-height:0;padding-block:clamp(2rem,4vw,3.5rem)}
  .wd-hero .hero__text:not(#_){display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;max-width:none}
  .wd-hero .hero__claim:not(#_){font-size:clamp(2.2rem,1.1rem + 1.6vw,2.9rem);line-height:1.1}
  .wd-hero .hero__punkte:not(#_){margin:0}
  .wd-hero .hero__ctas:not(#_){margin-top:auto}
  .wd-hero__breit{align-self:start}
}
@media (min-width:981px){
  .wd-zwei:not(#_){align-items:stretch}
  .wd-zwei__text{align-content:start}
  .wd-suche{display:flex;flex-direction:column;justify-content:space-between;height:100%}
  .wd-suche__seite{flex:1;align-content:center}
  .wd-check{display:flex;flex-direction:column;height:100%}
  .wd-check__seite{flex:1;align-content:space-evenly}
  .wd-agent{justify-self:end;align-self:start;width:var(--bal-b,100%)}
  .wd-person:not(#_){align-items:stretch}
  .wd-person__rahmen{height:100%}
  .wd-person__bild{position:absolute;inset:0;height:100%;object-fit:cover;object-position:50% 30%}
  .wd-person__text{align-content:center}
}

/* Vorher/Nachher live: Beispiel-Website baut sich von der Visitenkarte zur Verkaufsseite um */
.wd-demo{position:relative;width:100%;max-width:780px;margin:.5rem auto;text-align:left;border-radius:18px;background:var(--weiss);border:1px solid var(--linie);box-shadow:0 40px 80px -40px rgba(0,0,0,.08);overflow:hidden;min-height:400px}
.wd-demo__leiste{display:flex;align-items:center;gap:.8rem;padding:.75rem 1rem;background:var(--flaeche);border-bottom:1px solid var(--linie)}
.wd-demo__punkte{display:flex;gap:5px}.wd-demo__punkte i{width:9px;height:9px;border-radius:50%;background:#D0D2D6}
.wd-demo__url{flex:1;padding:.3rem .7rem;border-radius:999px;background:var(--weiss);font:500 .75rem/1 var(--body);color:var(--text-3)}
.wd-demo__etikett{padding:.35rem .7rem;border-radius:999px;background:var(--grau-hell);font:700 .6875rem/1 var(--head);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);transition:background-color .4s ease,color .4s ease}
.wd-demo.nachher .wd-demo__etikett{background:var(--akzent-dunkel);color:var(--weiss)}
.wd-demo__seite{display:grid;gap:.9rem;justify-items:start;padding:clamp(1.5rem,3vw,2.25rem)}
.wd-demo__logo{display:flex;align-items:center;gap:.5rem;font:700 .875rem/1 var(--head);color:var(--tinte)}
.wd-demo__logo i{width:18px;height:18px;border-radius:5px;background:var(--anthrazit)}
.wd-demo__h{min-height:2.4em;margin:.4rem 0 0;font:700 clamp(1.4rem,1.1rem + 1vw,1.9rem)/1.2 var(--head);color:var(--tinte)}
.wd-demo__h::after{content:"";display:inline-block;width:3px;height:1em;margin-left:3px;vertical-align:-.12em;background:var(--akzent);opacity:0}
.wd-demo.tippt .wd-demo__h::after{opacity:1;animation:wdCursor 1s steps(1) infinite}
.wd-demo__p{margin:0;font-size:1rem;line-height:1.5;color:var(--text-2);transition:color .35s ease}
.wd-demo__p.leer{color:transparent}
.wd-demo__knopf{display:inline-flex;align-items:center;height:48px;padding:0 1.4rem;border-radius:999px;background:var(--anthrazit);color:var(--weiss);font:700 .9375rem/1 var(--head);transform:scale(0);transform-origin:left center;transition:transform .5s var(--ease),background-color .2s ease}
.wd-demo.nachher .wd-demo__knopf{transform:scale(1)}
.wd-demo.klick .wd-demo__knopf{transform:scale(.94);background:var(--akzent-dunkel)}
.wd-demo__vertrauen{display:flex;align-items:center;gap:.4rem;opacity:0;transform:translateY(8px);transition:opacity .5s ease .25s,transform .5s ease .25s}
.wd-demo__vertrauen i{width:26px;height:26px;margin-right:-.75rem;border-radius:50%;background:var(--grau-hell);border:2px solid var(--weiss)}
.wd-demo__vertrauen small{margin-left:1rem;font-size:.8125rem;color:var(--text-2)}
.wd-demo.nachher .wd-demo__vertrauen{opacity:1;transform:none}
.wd-demo__kontakt{margin-top:2.5rem;font-size:.8125rem;color:var(--text-3);transition:opacity .4s ease}
.wd-demo.nachher .wd-demo__kontakt{opacity:0}
.wd-demo__maus{position:absolute;left:78%;top:88%;width:26px;height:26px;opacity:0;transition:left 1s var(--ease),top 1s var(--ease),opacity .3s ease}
.wd-demo__maus svg{width:100%;height:100%;fill:var(--tinte);stroke:var(--weiss);stroke-width:1.4;stroke-linejoin:round}
.wd-demo.zeigen .wd-demo__maus{opacity:1}
.wd-demo__toast{position:absolute;right:1rem;bottom:1rem;display:flex;align-items:center;gap:.75rem;padding:.8rem 1rem;border-radius:14px;background:var(--anthrazit);color:var(--weiss);box-shadow:0 20px 40px -20px rgba(0,0,0,.08);transform:translateY(140%);transition:transform .55s var(--ease)}
.wd-demo.anfrage .wd-demo__toast{transform:none}
.wd-demo__toast-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--akzent-dunkel)}
.wd-demo__toast-ico svg{width:20px;height:20px;fill:none;stroke:var(--weiss);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wd-demo__toast b{display:block;font:700 .9375rem/1.2 var(--head)}.wd-demo__toast small{font-size:.8125rem;color:var(--text-auf-dunkel)}

/* Ablauf in 3 Schritten: gleich hohe Karten, Schritte leuchten nacheinander auf */
.sek.wd-block.wd-block--hauch{background:var(--flaeche)}
.wd-block + .wd-block{margin-top:var(--block-rand)}
.wd-ablauf{list-style:none;margin:clamp(2rem,4vw,3rem) 0 0;padding:0;display:grid;gap:var(--gap)}
@media (min-width:900px){.wd-ablauf{grid-template-columns:repeat(3,minmax(0,1fr))}}
.wd-ablauf__schritt{position:relative;overflow:hidden;display:grid;align-content:start;gap:.85rem;padding:clamp(1.5rem,2.5vw,2rem);border-radius:var(--r-box);background:var(--weiss);border:1.5px solid #F1D7B8;transition:border-color .4s ease}
.wd-ablauf__schritt::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:4px;background:var(--akzent);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease)}
.wd-ablauf__kopf{display:flex;align-items:center;gap:.9rem}
.wd-ablauf__nr{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--grau-hell);font:700 1.125rem/1 var(--head);color:var(--tinte);transition:background-color .4s ease,color .4s ease}
.wd-ablauf__kopf svg{width:30px;height:30px;fill:none;stroke:var(--akzent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wd-ablauf__schritt h3{font-size:clamp(1.125rem,1rem + .4vw,1.3125rem)}
.wd-ablauf__schritt p{margin:0;color:var(--text-2);line-height:1.6}
.wd-ablauf__schritt.an{border-color:var(--akzent)}
.wd-ablauf__schritt.an::after{transform:scaleX(1)}
.wd-ablauf__schritt.an .wd-ablauf__nr{background:var(--akzent-dunkel);color:var(--weiss)}

.wd-demo__url{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.wd-demo__etikett{flex:none;white-space:nowrap}
@media (max-width:420px){.wd-demo__etikett{font-size:.625rem;padding:.3rem .55rem}}

/* Statement ohne Beispiel-Box: Button mit Luft */
.wd #verkauft .statement + .btn{margin-top:clamp(.75rem,1.4vw,1.25rem)}

/* Kurz-Check: Kontaktschritt kompakt, damit alle Schritte ähnlich hoch sind und keine leere Fläche entsteht */
@media (min-width:981px){
  .quiz__schritt--kontakt{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1.25rem;align-items:center}
  .quiz__schritt--kontakt .quiz__frage,.quiz__schritt--kontakt .quiz__felder{grid-column:1/-1}
  .quiz__schritt--kontakt .quiz__felder{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
  .quiz__schritt--kontakt .quiz__hinweis{margin-top:1rem}
  .quiz__schritt--kontakt .quiz__senden{width:auto;margin-top:1rem}
}
@media (min-width:981px){
  .quiz__intro:not(#_){display:flex;flex-direction:column;align-items:flex-start;gap:1rem;padding-top:0}
  .quiz__intro .quiz__meta{margin-top:auto}
}

/* Schwebender Analyse-Button unten rechts (User-Wunsch 23.10.2026, alle Seiten) */
.fab-analyse{position:fixed;right:24px;bottom:24px;z-index:90;display:flex;align-items:center;gap:.9rem;padding:.5rem 1.35rem .5rem .5rem;border-radius:999px;background:var(--anthrazit-dunkel);border:1px solid var(--kante-dunkel);color:var(--weiss);text-decoration:none;box-shadow:0 20px 44px -14px rgba(0,0,0,.5);transition:background-color .25s ease,opacity .35s ease,transform .35s var(--ease),visibility 0s linear 0s}
.fab-analyse img{flex:none;width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.22)}
.fab-analyse__text{display:grid;gap:.15rem}
.fab-analyse__text strong{font:600 1.0625rem/1.2 var(--head);color:var(--weiss)}
.fab-analyse__text small{font:500 .8125rem/1.3 var(--body);color:rgba(255,255,255,.68)}
.fab-analyse__pfeil{flex:none;width:22px;height:22px;margin-left:.5rem;fill:none;stroke:var(--weiss);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fab-analyse:hover{background:var(--anthrazit)}
.fab-analyse:focus-visible{outline:2px solid var(--akzent);outline-offset:3px}
.js .fab-analyse:not(.sichtbar){opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s}
@media (max-width:600px){
  .fab-analyse{right:14px;bottom:14px;gap:.7rem;padding:.4rem 1rem .4rem .4rem}
  .fab-analyse img{width:42px;height:42px}
  .fab-analyse__text strong{font-size:.9375rem}
  .fab-analyse__text small{font-size:.75rem}
  .fab-analyse__pfeil{width:18px;height:18px;margin-left:.25rem}
}
@media (prefers-reduced-motion:reduce){.fab-analyse,.js .fab-analyse:not(.sichtbar){transition:none;transform:none}}

/* Kurz-Check: linke Spalte mit bewegtem Kreis (Fortschritt in der Mitte); Karte rechts bleibt flexibel */
.quiz__kreis{display:none}
@media (min-width:981px){
  .quiz__raster:not(#_){align-items:stretch}
  .quiz__intro:not(#_){min-height:460px}
  .quiz__kreis{display:block;position:relative;flex:1;min-height:0;width:100%;margin:.25rem 0}
  .quiz__kreis-flaeche{position:absolute;top:0;bottom:0;left:0;aspect-ratio:1;max-width:100%;max-height:260px;margin:auto 0}
  .quiz__kreis svg{display:block;width:100%;height:100%;overflow:visible}
  .k-bahn{fill:none;stroke:var(--linie);stroke-width:6}
  .k-fort{fill:none;stroke:var(--akzent);stroke-width:6;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p,0) * 100);transform:rotate(-90deg);transform-origin:100px 100px;transition:stroke-dashoffset .6s var(--ease)}
  .k-innen{fill:var(--weiss);stroke:#D3D5D9;stroke-width:1.5;stroke-dasharray:3 6;transform-origin:100px 100px;animation:k-dreh 40s linear infinite reverse}
  .k-orbit{fill:var(--akzent);transform-origin:100px 100px;animation:k-dreh 9s linear infinite}
  .k-orbit--zurueck{fill:var(--anthrazit);animation-duration:14s;animation-direction:reverse}
  .quiz__kreis-text{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:.1rem}
  .quiz__kreis-text b{font:700 clamp(1.6rem,1.2rem + 1vw,2.1rem)/1 var(--head);color:var(--tinte)}
  .quiz__kreis-text small{font:600 .75rem/1.2 var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
}
@keyframes k-dreh{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.k-innen,.k-orbit{animation:none}.k-fort{transition:none}}

/* Use Cases: Querverweis auf den anderen Fall */
.ucs-weiter{margin:1.75rem auto 0;text-align:center;font-size:.9375rem;color:var(--text-2)}
.ucs-weiter a{color:var(--akzent-dunkel);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ucs-weiter a:hover{color:var(--tinte)}
.faq a{color:var(--akzent-dunkel);text-decoration:underline;text-underline-offset:3px}

/* Einwilligungs-Banner (GA4 + Clarity), unten links, damit der Analyse-Button rechts frei bleibt */
.einwilligung{position:fixed;left:24px;bottom:24px;z-index:110;width:min(400px,calc(100vw - 48px));padding:1.25rem 1.35rem;border-radius:20px;background:var(--weiss);border:1px solid var(--linie);box-shadow:0 24px 60px -20px rgba(0,0,0,.25)}
.einwilligung__titel{margin:0 0 .4rem;font:700 1rem/1.3 var(--head);color:var(--tinte)}
.einwilligung__text{margin:0;font-size:.875rem;line-height:1.55;color:var(--text-2)}
.einwilligung__text a{color:var(--akzent-dunkel);text-decoration:underline;text-underline-offset:2px}
.einwilligung__knoepfe{display:flex;gap:.6rem;margin-top:1rem}
.einwilligung__knoepfe button{flex:1;height:46px;border-radius:12px;font:600 .9375rem/1 var(--head);cursor:pointer;transition:background-color .25s ease,color .25s ease}
.einwilligung__ja{border:0;background:var(--anthrazit);color:var(--weiss)}
.einwilligung__ja:hover{background:var(--anthrazit-dunkel)}
.einwilligung__nein{border:1.5px solid var(--anthrazit);background:var(--weiss);color:var(--tinte)}
.einwilligung__nein:hover{background:var(--grau-hell)}
.einwilligung button:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
@media (max-width:600px){
  .einwilligung{left:14px;right:14px;bottom:14px;width:auto}
  .hat-einwilligung .fab-analyse{display:none}
}

/* Mini-Audit (mini-audit.html) */
.mb .wd-hero__breit img{border-radius:0;box-shadow:none}
.mb-meta{flex-basis:100%;margin:.35rem 0 0;font:500 .8125rem/1.45 var(--body);color:var(--text-3)}
@media (min-width:900px){.wd-ablauf--vier:not(#_){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.wd-ablauf--vier:not(#_){grid-template-columns:repeat(4,minmax(0,1fr))}}
.mb-rechnung{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem 1.4rem;margin:clamp(2rem,4vw,3rem) auto 0;max-width:1000px}
.mb-rechnung>div:not(.mb-op){display:grid;justify-items:center;gap:.3rem;min-width:150px;padding:1.1rem 1.5rem;border-radius:var(--r-box);background:var(--flaeche)}
.mb-rechnung strong{font:700 clamp(1.6rem,1.2rem + 1.2vw,2.25rem)/1 var(--head);color:var(--tinte)}
.mb-rechnung span{font-size:.875rem;color:var(--text-2)}
.mb-op{font:600 1rem/1 var(--head);color:var(--akzent-dunkel);white-space:nowrap}
.mb-rechnung .mb-ziel:not(#_){background:var(--weiss);box-shadow:inset 0 0 0 2px var(--akzent)}
.mb-ziel strong{color:var(--akzent-dunkel)}
.mb-unten{display:flex;flex-direction:column;align-items:center;gap:.4rem;margin-top:clamp(2rem,4vw,2.75rem);text-align:center}
.mb-unten .mb-meta{flex-basis:auto}
.mb .hero__ctas:not(#_){flex-wrap:wrap}
.mb .hero__ctas .mb-meta{width:100%;flex:0 0 100%}

/* =================== Ablauf auf Unterseiten im Muster der Startseite (.drei): graue Fläche, eigene animierte Illustrationen =================== */
.drei--seite h2{font-size:clamp(2rem,1.3rem + 2.3vw,3.1rem);line-height:1.1;letter-spacing:-.02em;max-width:none}
.drei--seite .sek-kopf p:not(.eyebrow){color:var(--text-2)}
.drei__karten--ill{margin-top:clamp(2rem,4vw,3rem)}
@media (min-width:1100px){.drei__karten--vier:not(#_){grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:700px) and (max-width:1099px){.drei__karten--vier:not(#_){grid-template-columns:repeat(2,minmax(0,1fr))}}
.drei__karten--ill .drei__karte{gap:.65rem}
.drei__karten--ill .schwebe{background:none;border:0;overflow:visible;min-height:130px;display:grid;place-items:center;margin-top:auto;padding-top:.5rem}
.drei__karten--ill .schwebe>.ill{position:static;animation:none;width:100%;max-width:220px;height:auto;overflow:visible}
/* Woche: Personen + Tage füllen sich */
.ill-person circle,.ill-person path{stroke:var(--tinte);stroke-width:2.6}
.ill-person--akzent circle,.ill-person--akzent path{stroke:var(--akzent)}
.ill-tag rect{fill:var(--weiss);stroke:#D5D7DB;stroke-width:2.4;animation:tagAn 6s ease infinite;animation-delay:calc(var(--i) * .45s)}
.ill-tag path{stroke:#D5D7DB;stroke-width:3}
.ill-tag .ill-tag-strich{stroke:var(--akzent);stroke-width:3;opacity:0;animation:tagStrich 6s ease infinite;animation-delay:calc(var(--i) * .45s)}
@keyframes tagAn{0%,6%{stroke:#D5D7DB}16%,72%{stroke:var(--akzent)}86%,100%{stroke:#D5D7DB}}
@keyframes tagStrich{0%,10%{opacity:0}20%,72%{opacity:1}86%,100%{opacity:0}}
/* Uhr: Zeiger läuft, Strichliste */
.ill-uhr circle,.ill-uhr path{stroke:var(--tinte);stroke-width:4}
.ill-uhr .ill-skala{stroke:#C9CBCF;stroke-width:3}
.ill-zeiger{stroke:var(--akzent)!important;transform-origin:68px 74px;animation:zeigerDreht 4s linear infinite}
.ill-achsenpunkt{fill:var(--akzent)!important;stroke:none!important}
@keyframes zeigerDreht{to{transform:rotate(360deg)}}
.ill-strich{stroke:var(--tinte);stroke-width:4;stroke-dasharray:1;stroke-dashoffset:1;animation:strichAn 6s ease infinite;animation-delay:calc(var(--i) * .5s)}
.ill-strich--quer{stroke:var(--akzent)}
@keyframes strichAn{0%,4%{stroke-dashoffset:1}14%,78%{stroke-dashoffset:0}92%,100%{stroke-dashoffset:1}}
/* Schnittstellen: Mensch als Handarbeits-Knoten */
.ill-hand circle,.ill-hand path{stroke:var(--weiss);stroke-width:2.6}
/* Auswertung: Zeitfresser-Balken + €-Münze */
.ill-hbalken{fill:rgba(var(--akzent-rgb),.18);stroke:var(--akzent);stroke-width:2.4;transform-box:fill-box;transform-origin:left;animation:hBalken 6s var(--ease) infinite;animation-delay:calc(var(--i) * .2s)}
.ill-hbalken:first-of-type{fill:var(--akzent)}
@keyframes hBalken{0%{transform:scaleX(.06);opacity:.4}26%,80%{transform:scaleX(1);opacity:1}100%{transform:scaleX(.06);opacity:.4}}
.ill-muenze{transform-box:fill-box;transform-origin:center;animation:muenze 3s ease-in-out infinite}
.ill-muenze circle{fill:var(--weiss);stroke:var(--tinte);stroke-width:3}
.ill-muenze path{stroke:var(--akzent);stroke-width:3}
@keyframes muenze{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
/* Gespräch: Tipp-Punkte */
.ill-blase path{fill:var(--weiss);stroke:var(--tinte);stroke-width:2.6}
.ill-blase .ill-blase-zeile{fill:none;stroke:#D5D7DB;stroke-width:5}
.ill-blase--akzent path{fill:var(--akzent);stroke:var(--akzent)}
.ill-tipp{fill:var(--weiss)!important;animation:tippen 1.4s ease-in-out infinite;animation-delay:calc(var(--i) * .18s)}
@keyframes tippen{0%,60%,100%{transform:translateY(0);opacity:.55}30%{transform:translateY(-5px);opacity:1}}
/* Seitenbaum baut sich auf */
.ill-ast{stroke:#C9CBCF;stroke-width:2.6;stroke-dasharray:1;stroke-dashoffset:1;animation:astAn 7s ease infinite}
.ill-ast--2{animation-delay:.6s}
@keyframes astAn{0%,8%{stroke-dashoffset:1}26%,80%{stroke-dashoffset:0}94%,100%{stroke-dashoffset:1}}
.ill-seite rect{fill:var(--weiss);stroke:var(--tinte);stroke-width:2.4}
.ill-seite path{stroke:#C9CBCF;stroke-width:3}
.ill-seite--start rect{fill:var(--akzent);stroke:var(--akzent)}
.ill-seite--start path{stroke:var(--weiss)}
.ill-seite{transform-box:fill-box;transform-origin:center;animation:seiteAn 7s var(--ease) infinite;animation-delay:calc(var(--i) * .35s)}
@keyframes seiteAn{0%,4%{opacity:0;transform:scale(.7)}14%,82%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(.7)}}
/* Browser füllt sich, Haken */
.ill-fenster rect,.ill-fenster path,.ill-fenster circle{stroke:var(--tinte);stroke-width:2.6}
.ill-fenster rect{fill:var(--weiss)}
.ill-baustein{fill:#E3E3E3;transform-box:fill-box;transform-origin:left;animation:bausteinAn 6s var(--ease) infinite;animation-delay:calc(var(--i) * .35s)}
.ill-baustein--akzent{fill:var(--akzent)}
@keyframes bausteinAn{0%,4%{transform:scaleX(0)}16%,80%{transform:scaleX(1)}94%,100%{transform:scaleX(0)}}
.ill-haken{transform-box:fill-box;transform-origin:center;animation:hakenAn 6s var(--ease) infinite}
.ill-haken circle{fill:var(--akzent);stroke:var(--weiss);stroke-width:3}
.ill-haken path{stroke:var(--weiss);stroke-width:3.4}
@keyframes hakenAn{0%,40%{opacity:0;transform:scale(.5)}50%,82%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(.5)}}
@media (prefers-reduced-motion:reduce){
  .ill-strich,.ill-ast{stroke-dashoffset:0}.ill-tag .ill-tag-strich,.ill-seite,.ill-haken{opacity:1;transform:none}.ill-hbalken,.ill-baustein{transform:none}}

/* Ablauf-Karten Unterseiten (.akarte, nicht .schritt: Namenskollision mit Startseiten-Klassen): fester Bildbereich, nie mehr als 3 nebeneinander, 4 Schritte als 2x2-Querkarten */
.akarten{display:grid;gap:var(--gap);margin-top:clamp(2rem,4vw,3rem)}
.akarte{display:grid;grid-template-rows:auto 1fr;border-radius:var(--r-box);background:var(--weiss);border:1px solid var(--linie);overflow:hidden;
  box-shadow:0 1px 2px rgba(42,44,48,.04),0 18px 40px -26px rgba(0,0,0,.08)}
.akarte__bild{display:grid;place-items:center;height:180px;padding:1.25rem 1.5rem;background:var(--flaeche);border-bottom:1px solid var(--linie)}
.akarte__bild .ill{width:100%;max-width:230px;height:auto;overflow:visible}
.akarte__text{display:flex;flex-direction:column;gap:.7rem;padding:clamp(1.4rem,2.4vw,1.9rem)}
.akarte__kopf{display:flex;align-items:center;gap:14px}
.akarte__kopf .drei__nr{flex:none}
.akarte__kopf h3{margin:0;color:var(--tinte);font-size:clamp(1.2rem,1.05rem + .45vw,1.4rem);line-height:1.2}
.akarte__text p{margin:0;font-size:.9375rem;line-height:1.6;color:var(--text-2)}
@media (min-width:1100px){.akarten--drei{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Querkarten: Bild links fest, Text rechts; 2x2 ab 1100 px, eine Spalte darunter */
@media (min-width:760px){
  .akarten--quer .akarte,.akarten--drei .akarte{grid-template-rows:none;grid-template-columns:260px minmax(0,1fr)}
  .akarten--quer .akarte__bild,.akarten--drei .akarte__bild{height:auto;min-height:200px;border-bottom:0;border-right:1px solid var(--linie)}
  .akarten--quer .akarte__text,.akarten--drei .akarte__text{justify-content:center}
}
@media (min-width:1100px){
  .akarten--quer{grid-template-columns:repeat(2,minmax(0,1fr))}
  .akarten--drei .akarte{grid-template-columns:none;grid-template-rows:auto 1fr}
  .akarten--drei .akarte__bild{height:190px;min-height:0;border-right:0;border-bottom:1px solid var(--linie)}
  .akarten--drei .akarte__text{justify-content:flex-start}
}
/* Ablauf-Karten als Stichworte (Mini-Audit): wenig Text, dafür größer */
.akarte__liste{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.akarte__liste li{position:relative;padding-left:1.4rem;font:500 clamp(1.0625rem,1rem + .3vw,1.1875rem)/1.4 var(--body);color:var(--tinte)}
.akarte__liste li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--akzent)}
.mb .hero__lead{font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem)}
.mb #zeit .sek-kopf p:not(.eyebrow),.mb .drei--seite .sek-kopf p:not(.eyebrow){font-size:clamp(1.2rem,1.05rem + .55vw,1.4rem)}
.mb .cta-band p{font-size:clamp(1.15rem,1.05rem + .45vw,1.35rem)}

/* KI-Zentrale (Webdesign): KI-Funken in der Mitte, Umlaufbahn, Quellen leuchten nacheinander orange auf */
.wd-agent__kern:not(#_){background:radial-gradient(circle at 35% 30%,#F59A2F,var(--akzent) 45%,var(--akzent-dunkel));box-shadow:0 0 0 10px rgba(var(--akzent-rgb),.12),0 0 60px rgba(var(--akzent-rgb),.45);animation:kernGlut 3.2s ease-in-out infinite}
@keyframes kernGlut{0%,100%{box-shadow:0 0 0 10px rgba(var(--akzent-rgb),.12),0 0 50px rgba(var(--akzent-rgb),.35)}50%{box-shadow:0 0 0 18px rgba(var(--akzent-rgb),.08),0 0 80px rgba(var(--akzent-rgb),.6)}}
.wd-agent__ki{width:46%;height:auto}
.wd-agent__funke{fill:var(--weiss);transform-box:fill-box;transform-origin:center;animation:funkeGross 3.2s ease-in-out infinite}
.wd-agent__funke--k1{animation:funkeKlein 2.4s ease-in-out infinite}
.wd-agent__funke--k2{animation:funkeKlein 2.4s ease-in-out .8s infinite}
@keyframes funkeGross{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.12) rotate(12deg)}}
@keyframes funkeKlein{0%,100%{transform:scale(.4);opacity:.3}50%{transform:scale(1);opacity:1}}
.wd-agent .zentrale__linie{stroke:rgba(var(--akzent-rgb),.5)!important;stroke-width:2!important;animation-direction:reverse}
.wd-agent .zentrale__paket{r:5.5}
.wd-agent__bahn{transform-origin:250px 250px;animation:bahnDreht 14s linear infinite}
.wd-agent__bahn circle:first-child{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.5;stroke-dasharray:3 9}
.wd-agent__trabant{fill:var(--akzent);filter:drop-shadow(0 0 6px rgba(var(--akzent-rgb),.9))}
.wd-agent__trabant--k{fill:var(--weiss);filter:none;opacity:.8}
@keyframes bahnDreht{to{transform:rotate(360deg)}}
.wd-agent .zentrale__knoten:not(#_){animation:wdKnotenAn 7.2s ease-in-out infinite;animation-delay:calc(var(--i) * 1.2s)}
.wd-agent .zentrale__knoten svg{animation:wdKnotenIcon 7.2s ease-in-out infinite;animation-delay:calc(var(--i) * 1.2s)}
@keyframes wdKnotenAn{0%,18%,100%{background:#33353A;border-color:#46484E;color:var(--weiss);box-shadow:0 10px 24px -12px rgba(0,0,0,.2)}4%,14%{background:var(--akzent);border-color:var(--akzent);color:var(--weiss);box-shadow:0 0 28px rgba(var(--akzent-rgb),.55)}}
@keyframes wdKnotenIcon{0%,18%,100%{stroke:var(--akzent)}4%,14%{stroke:var(--weiss)}}
@media (prefers-reduced-motion:reduce){.wd-agent__kern,.wd-agent__funke,.wd-agent__bahn,.wd-agent .zentrale__knoten,.wd-agent .zentrale__knoten svg{animation:none!important}}

/* 5-Sekunden-Check: Mini-Website mit Bildbereich und Checkliste statt verteilter Leerräume */
.wd-check__seite:not(#_){display:grid;grid-template-rows:auto auto 1fr auto;gap:1rem;padding:1rem 1.25rem 1.5rem;align-content:stretch}
.wd-check__leiste{align-items:center}
.wd-check__leiste em{margin-left:.6rem;flex:1;padding:.3rem .7rem;border-radius:999px;background:var(--flaeche);font:500 .75rem/1 var(--body);font-style:normal;color:var(--text-3)}
.wd-check__nav{display:flex;align-items:center;gap:.7rem;padding-bottom:.85rem;border-bottom:1px solid var(--linie)}
.wd-check__nav span{width:34px;height:6px;border-radius:3px;background:#D5D7DB}
.wd-check__nav .wd-check__logo{width:58px;height:12px;border-radius:4px;background:var(--anthrazit);margin-right:auto}
.wd-check__nav b{width:62px;height:22px;border-radius:999px;border:2px solid var(--akzent)}
.wd-check__hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:1.25rem;min-height:0}
.wd-check__text{display:flex;flex-direction:column;justify-content:center;gap:1.2rem}
.wd-check__zeile:not(#_){display:grid;grid-template-columns:none;gap:.5rem;padding:.35rem;margin:-.35rem;border-radius:10px;transition:box-shadow .35s ease}
.wd-check__zeile.an{box-shadow:0 0 0 2px var(--akzent)}
.wd-check__zeile.an .wd-check__balken{box-shadow:none}
.wd-check__balken--h1{width:100%}.wd-check__balken--h1b{width:70%;height:24px;border-radius:7px;background:var(--anthrazit)}
.wd-check__balken--sub2{width:58%;height:12px;border-radius:7px;background:#CFD1D6}
.wd-check__bild{display:grid;place-items:center;border-radius:12px;background:var(--flaeche);border:1px solid var(--linie);min-height:150px}
.wd-check__bild svg{width:38%;fill:none;stroke:#C4C6CA;stroke-width:2.2;stroke-linecap:round}
.wd-check__liste{list-style:none;margin:0;padding:.85rem 1rem;border-radius:12px;background:var(--flaeche);display:grid;gap:.55rem}
.wd-check__punkt{display:flex;align-items:center;gap:.65rem;font:600 1rem/1.2 var(--head);color:var(--text-3);transition:color .35s ease}
.wd-check__punkt i{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:2px solid #C4C6CA;background:var(--weiss);transition:background-color .35s ease,border-color .35s ease}
.wd-check__punkt svg{width:15px;fill:none;stroke:var(--weiss);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .3s ease}
.wd-check:has(.wd-check__zeile[data-nr="1"].an) .wd-check__punkt[data-nr="1"],.wd-check:has(.wd-check__zeile[data-nr="2"].an) .wd-check__punkt[data-nr="2"],.wd-check:has(.wd-check__zeile[data-nr="3"].an) .wd-check__punkt[data-nr="3"]{color:var(--tinte)}
.wd-check:has(.wd-check__zeile[data-nr="1"].an) .wd-check__punkt[data-nr="1"] i,.wd-check:has(.wd-check__zeile[data-nr="2"].an) .wd-check__punkt[data-nr="2"] i,.wd-check:has(.wd-check__zeile[data-nr="3"].an) .wd-check__punkt[data-nr="3"] i{background:var(--akzent);border-color:var(--akzent)}
.wd-check:has(.wd-check__zeile[data-nr="1"].an) .wd-check__punkt[data-nr="1"] svg,.wd-check:has(.wd-check__zeile[data-nr="2"].an) .wd-check__punkt[data-nr="2"] svg,.wd-check:has(.wd-check__zeile[data-nr="3"].an) .wd-check__punkt[data-nr="3"] svg{opacity:1}
.wd-check__fazit:not(#_){background:var(--weiss);box-shadow:inset 0 0 0 2px var(--akzent)}
@media (max-width:559px){.wd-check__hero{grid-template-columns:1fr}.wd-check__bild{display:none}}

/* Wenig Text = schmale Spalte, kompakte Höhe, ausgeglichene Zeilen (User 24.10.2026) */
.sek-kopf h2,.sek-kopf p:not(.eyebrow){text-wrap:balance}
.mb #zeit:not(#_){padding-block:clamp(2.5rem,5vw,3.75rem)}
.mb #zeit .sek-kopf{max-width:620px;margin-inline:auto}
.mb #zeit .sek-kopf p:not(.eyebrow){max-width:30ch;margin-inline:auto}
.mb #zeit .mb-rechnung{margin-top:clamp(1.5rem,3vw,2rem)}
.mb #zeit .mb-unten{margin-top:clamp(1.5rem,3vw,2rem)}
.mb .drei--seite .sek-kopf p:not(.eyebrow){max-width:30ch;margin-inline:auto}

/* Einwilligungs-Banner v3: Ablehnen und Akzeptieren gleichwertig, Auswahl je Dienst */
.einwilligung{max-height:calc(100vh - 48px);overflow:auto}
.einwilligung--auswahl{width:min(520px,calc(100vw - 48px))}
.einwilligung__knoepfe{flex-wrap:wrap}
.einwilligung__knopf{flex:1 1 0;min-width:130px;height:46px;border-radius:12px;border:1.5px solid var(--anthrazit);background:var(--anthrazit);color:var(--weiss);font:600 .9375rem/1 var(--head);cursor:pointer;transition:background-color .25s ease}
.einwilligung__knopf:hover{background:var(--anthrazit-dunkel)}
.einwilligung__knopf:focus-visible,.einwilligung__mehr:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.einwilligung__links{margin:.8rem 0 0;font-size:.8125rem;color:var(--text-3)}
.einwilligung__links a,.einwilligung__mehr{color:var(--tinte);text-decoration:underline;text-underline-offset:2px}
.einwilligung__mehr{padding:0;border:0;background:none;font:inherit;font-weight:600;cursor:pointer}
.einwilligung__liste{display:grid;gap:.6rem;margin:1rem 0 0}
.einwilligung__dienst{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;padding:.8rem .9rem;border-radius:12px;background:var(--flaeche);cursor:pointer}
.einwilligung__dienst--fest{cursor:default}
.einwilligung__dienst input{width:20px;height:20px;margin:.1rem 0 0;accent-color:var(--akzent)}
.einwilligung__dienst strong{display:block;font:700 .875rem/1.3 var(--head);color:var(--tinte)}
.einwilligung__dienst small{display:block;margin-top:.25rem;font-size:.78rem;line-height:1.45;color:var(--text-2)}
.einwilligung__dienst small b{color:var(--tinte)}
.einwilligung--auswahl:not(#_){width:min(580px,calc(100vw - 48px))}
.einwilligung__knopf{white-space:nowrap}
/* Mini-Audit „Zeit“: breiter und flacher (User 24.10.2026) */
.mb #zeit:not(#_){padding-block:clamp(2rem,4vw,3rem)}
.mb #zeit .sek-kopf:not(#_){max-width:980px;gap:.5rem}
.mb #zeit .sek-kopf h2{max-width:none}
.mb #zeit .sek-kopf p:not(.eyebrow):not(#_){max-width:58ch}
.mb #zeit .mb-rechnung:not(#_){margin-top:clamp(1.25rem,2.5vw,1.75rem)}
.mb #zeit .mb-unten:not(#_){margin-top:clamp(1.25rem,2.5vw,1.5rem)}
@media (min-width:1100px){.mb #zeit .sek-kopf p:not(.eyebrow):not(#_){max-width:none;text-wrap:nowrap}}
@media (min-width:900px){
  .mb #zeit .mb-rechnung:not(#_){max-width:none;flex-wrap:nowrap;justify-content:space-between;gap:1rem}
  .mb #zeit .mb-rechnung>div:not(.mb-op){flex:1 1 0;min-width:0;padding:1rem 1.25rem}
}


/* ===== Version X: UX-Verbesserungen (25.10.2026), Beschreibung in unterlagen/fortschrittdigital/ux-version-x/LIESMICH.md ===== */

/* 9 View Transitions: weiche Überblendung zwischen den Seiten, Navigation bleibt stehen */
@view-transition{navigation:auto}
.nav{view-transition-name:kopfzeile}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* 17 Ausgeglichene Überschriften, Fließtext ohne Einzelwort in der letzten Zeile */
h1,h2,h3,.hero__lead{text-wrap:balance}
p,li,figcaption{text-wrap:pretty}

/* 16 Gleich breite Ziffern, wo Zahlen stehen oder sich ändern */
.zahlen__wert.zahlen__wert,.rechner__zahl.rechner__zahl,.drei__zahl.drei__zahl,.quiz__kreis-text.quiz__kreis-text,.quiz__meta.quiz__meta,.mb-meta.mb-meta,output,table{font-variant-numeric:tabular-nums}  /* Klasse doppelt: schlägt die font-Kurzschreibweise in .zahlen .zahlen__wert */

/* 14 Safe-Area: Abstand zu Home-Balken und Rundung beim iPhone (viewport-fit=cover im Viewport-Tag) */
.fab-analyse{right:calc(24px + env(safe-area-inset-right));bottom:calc(24px + env(safe-area-inset-bottom))}
.einwilligung{bottom:calc(24px + env(safe-area-inset-bottom));left:calc(24px + env(safe-area-inset-left))}
@media (max-width:640px){.einwilligung{left:calc(14px + env(safe-area-inset-left));right:calc(14px + env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom))}}
.menu{padding-bottom:calc(2rem + env(safe-area-inset-bottom))}
.nav{padding-left:max(var(--block-rand),env(safe-area-inset-left));padding-right:max(var(--block-rand),env(safe-area-inset-right))}

/* 8 Unscharfe Platzhalter: das Bild-Element zeigt sein Mini-Vorschaubild (Inline-Style) bis das Foto geladen ist */
img[data-lqip]{background-color:#E3E3E3}

/* 13 Hit Slop: auf Touch-Geräten mindestens 44 px Tippfläche (Apple/WCAG 2.5.5), Desktop unverändert */
@media (pointer:coarse){
  .fuss__spalte{gap:0}
  .fuss__spalte a,.fuss__unten a,.js-mail{display:inline-flex;align-items:center;min-height:44px}
  .fuss__unten nav{flex-wrap:wrap;column-gap:1.5rem;row-gap:0}
  /* einzelne Textlinks: Fläche unsichtbar vergrößern, Zeilenhöhe bleibt */
  .einwilligung__links a,.einwilligung__mehr,.brotkrumen a,.quiz__hinweis a{display:inline-block;padding:.8rem .35rem;margin:-.8rem -.35rem}
}

/* ===== Einwilligungs-Banner im Cookiebot-Stil (Version X, 25.10.2026) =====
   Mittig unten, fährt hoch; Reiter Zustimmung/Details/Über; Schalter je Kategorie; drei gleich breite Knöpfe. */
.zst{position:fixed;z-index:110;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));width:min(880px,calc(100vw - 32px));max-height:calc(100vh - 40px);
  display:flex;flex-direction:column;background:var(--weiss);color:var(--text-2);border:1px solid var(--linie);border-radius:22px;
  box-shadow:0 30px 80px -24px rgba(28,30,33,.45),0 0 0 1px rgba(28,30,33,.04);transform:translateX(-50%);animation:zstHoch .55s var(--ease) both;font-family:var(--body)}
@keyframes zstHoch{from{transform:translate(-50%,calc(100% + 40px));opacity:0}to{transform:translate(-50%,0);opacity:1}}
@media (prefers-reduced-motion:reduce){.zst{animation:none}}
.zst__kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;padding:1.1rem 1.5rem 0;border-bottom:1px solid var(--linie)}
.zst__titel{margin:0 0 .85rem;font:700 1.0625rem/1.2 var(--head);color:var(--tinte)}
.zst__reiter{display:flex;gap:1.4rem}
.zst__reiter button{position:relative;min-height:44px;padding:0 .1rem;border:0;background:none;font:600 .875rem/1 var(--head);color:var(--text-3);cursor:pointer}
.zst__reiter button[aria-selected=true]{color:var(--tinte)}
.zst__reiter button[aria-selected=true]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--akzent)}
.zst__reiter button:hover{color:var(--tinte)}
.zst__inhalt{overflow:auto;padding:1.1rem 1.5rem;max-height:min(34vh,300px);overscroll-behavior:contain}
.zst__panel p{margin:0 0 .7rem;font-size:.9rem;line-height:1.6;text-wrap:pretty}
.zst__panel p:last-child{margin-bottom:0}
.zst__panel a{color:var(--akzent-dunkel);text-decoration:underline;text-underline-offset:2px}
.zst__dienst{border:1px solid var(--linie);border-radius:14px;margin-bottom:.6rem;background:var(--flaeche)}
.zst__dienst summary{display:flex;flex-direction:column;gap:.15rem;padding:.8rem 1rem;cursor:pointer;list-style:none;min-height:44px}
.zst__dienst summary::-webkit-details-marker{display:none}
.zst__dienst summary b{font:600 .9rem/1.3 var(--head);color:var(--tinte)}
.zst__dienst summary small{font-size:.78rem;color:var(--text-3)}
.zst__dienst details[open] summary{border-bottom:1px solid var(--linie)}
.zst__dienst details>p,.zst__dienst dl{margin:0;padding:.8rem 1rem;font-size:.85rem;line-height:1.55}
.zst__dienst dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem .9rem;padding-top:0}
.zst__dienst dt{font-weight:700;color:var(--tinte)}
.zst__dienst dd{margin:0}
.zst__kats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.zst__kat{display:flex;align-items:center;justify-content:space-between;gap:.8rem;min-height:56px;padding:.6rem 1.5rem;font:600 .9rem/1.2 var(--head);color:var(--tinte);cursor:pointer;position:relative}
.zst__kat+.zst__kat{border-left:1px solid var(--linie)}
.zst__kat input{position:absolute;opacity:0;width:1px;height:1px}
.zst__kat i{flex:none;position:relative;width:46px;height:26px;border-radius:999px;background:#C9CBCF;transition:background-color .2s ease}
.zst__kat i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s var(--ease)}
.zst__kat input:checked+i{background:var(--akzent)}
.zst__kat input:checked+i::after{transform:translateX(20px)}
.zst__kat--fest{cursor:default;color:var(--text-3)}
.zst__kat--fest input:checked+i{background:#9A9DA2}
.zst__kat input:focus-visible+i{outline:2px solid var(--akzent);outline-offset:3px}
.zst__knoepfe{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;padding:1rem 1.5rem 1.15rem}
.zst__knopf{min-height:48px;border-radius:12px;border:1.5px solid var(--anthrazit);background:var(--weiss);color:var(--tinte);font:600 .9375rem/1 var(--head);cursor:pointer;transition:background-color .2s ease,color .2s ease}
.zst__knopf:hover{background:var(--grau-hell)}
.zst__knopf--voll{background:var(--anthrazit);color:var(--weiss)}
.zst__knopf--voll:hover{background:var(--anthrazit-dunkel)}
.zst button:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
/* Handy: Bottom Sheet über die volle Breite, Inhalt scrollt, Knöpfe untereinander */
@media (max-width:640px){
  .zst{left:0;right:0;bottom:0;width:auto;max-height:88vh;border-radius:22px 22px 0 0;border-bottom:0;transform:none;animation-name:zstHochM;padding-bottom:env(safe-area-inset-bottom)}
  @keyframes zstHochM{from{transform:translateY(100%)}to{transform:none}}
  .zst__kopf{flex-direction:column;align-items:stretch;gap:0;padding:1rem 1.1rem 0}
  .zst__titel{margin-bottom:.4rem}
  .zst__reiter{gap:1.1rem}
  .zst__inhalt{padding:1rem 1.1rem;max-height:none;flex:1 1 auto;min-height:0}
  .zst__kats{grid-template-columns:1fr}
  .zst__kat{padding:.5rem 1.1rem;min-height:52px}
  .zst__kat+.zst__kat{border-left:0;border-top:1px solid var(--linie)}
  .zst__knoepfe{grid-template-columns:1fr;gap:.55rem;padding:.9rem 1.1rem 1rem}
}