@charset "utf-8";
/* =========================================================================
   DuBot AI — Prozessautomatisierung fuer KMU (Google-Ads-Landingpage 2 von 3)
   Stand 28.09.2026. Schwesterseite der Corporate-LLM-Seite: dasselbe System
   (Papiergrund, Pillen-Kopfzeile, Grotesk + Serifen-Kursive, blaue Inseln),
   eigene Bausteine ab Abschnitt 26: Leitstand, Engpass-Karten, 3D-Stationen,
   sechs Prozess-Buehnen, Netz „Einzeltools oder ein System".
   Satoshi steht fuer Oldschool Grotesk, bis die lizenzierte Webfont da ist.
   ========================================================================= */

/* --- 1. Schriften ------------------------------------------------------- */
@font-face{font-family:Satoshi;src:url(../fonts/satoshi-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Satoshi;src:url(../fonts/satoshi-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Satoshi;src:url(../fonts/satoshi-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Satoshi;src:url(../fonts/satoshi-900.woff2) format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:Lora;src:url(../fonts/lora-italic-400.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}

/* --- 2. Tokens ---------------------------------------------------------- */
:root{
  --papier:#F6F5F1;
  --papier-2:#EEEDE8;
  --flaeche:#F2F3FA;
  --weiss:#fff;
  --ink:#0F1136;
  --ink-2:#1A1C4A;
  --muted:#565B80;
  --muted-2:#868BA8;
  --linie:#E3E4EC;
  --linie-2:#ECEDF3;

  /* Die vier Toene der Farbtafel */
  --blau:#2020ED;
  --blau-d:#1010C1;
  --blau-m:#3E3EEF;
  --blau-h:#6868F3;
  --blau-soft:#E9E9FE;
  --blau-soft-2:#F3F3FF;

  --auf-d:#EDEDFC;
  --auf-d-2:#C4C6F6;
  --linie-d:rgba(255,255,255,.16);
  --linie-d2:rgba(255,255,255,.09);

  --ok:#16895A;
  --warn:#C0392B;

  /* Abteilungsfarben in den Produkt-Buehnen */
  --f1:#2020ED; --f2:#0E8F7E; --f3:#C77A06; --f4:#7A3FF2; --f5:#1E8E4F;

  --r-pille:999px;
  --r-btn:10px;
  --r-s:12px;
  --r:16px;
  --r-lg:24px;

  --sh-1:0 1px 2px rgba(15,17,54,.05);
  --sh-2:0 1px 2px rgba(15,17,54,.04),0 12px 28px rgba(15,17,54,.07);
  --sh-3:0 2px 6px rgba(15,17,54,.05),0 26px 60px rgba(15,17,54,.1);
  --sh-buehne:0 16px 48px -18px rgba(16,16,120,.1),0 1px 2px rgba(15,17,54,.04);
  --sh-blau:0 8px 20px -10px rgba(32,32,237,.22);

  --wrap:1200px;
  --pad:clamp(1rem,.6rem + 2.2vw,2rem);
  --sec:clamp(3.6rem,2rem + 5.6vw,6.5rem);

  --font:Satoshi,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --serif:Lora,Georgia,'Times New Roman',serif;
  --font-m:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;

  --e:cubic-bezier(.16,1,.3,1);
  --e-weich:cubic-bezier(.22,.61,.36,1);
  --e-spring:linear(0,.2178 2.1%,1.1144 8.49%,1.2959 10.7%,1.3463 11.81%,1.3705 12.94%,1.3726,1.3535 14.48%,1.3223 15.25%,1.2076 17.36%,1.0574 19.98%,.9782 21.94%,.9654 22.9%,.9663 23.9%,.9987 27.72%,1.0224 30.98%,1.0263 32.98%,1.0146 36.86%,.9974 40.68%,.9925 43.83%,1.0007 51.04%,1.0027 57.79%,.9994 68.22%,1);
}

/* --- 3. Grundgeruest ---------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--papier);overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:transparent;color:var(--ink);
  font-family:var(--font);font-size:1rem;line-height:1.6;font-weight:400;
  letter-spacing:-.011em;-webkit-font-smoothing:antialiased;overflow-x:clip;position:relative;
}
/* Raster nur an den Raendern — die Mitte bleibt ruhig fuer den Text. */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(rgba(170,174,200,.32) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(170,174,200,.32) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,transparent 26%,transparent 74%,#000 100%);
          mask-image:linear-gradient(90deg,#000 0%,transparent 26%,transparent 74%,#000 100%);
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.022em;line-height:1.14;text-wrap:balance}
p{margin:0}
p,li,dd,figcaption{text-wrap:pretty}
ul{margin:0;padding:0;list-style:none}
svg{width:1em;height:1em;flex:none}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--blau);outline-offset:3px}
.s-blau :focus-visible{outline-color:#fff}

.wrap{width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto}
[id]{scroll-margin-top:92px}
.sec{padding-block:var(--sec);position:relative}
.sec--eng{padding-block:clamp(2.6rem,1.6rem + 3vw,4.2rem)}

/* --- 4. Typo ------------------------------------------------------------ */
.t-hero{font-size:clamp(2.2rem,1.1rem + 4vw,3.55rem);line-height:1.1;letter-spacing:-.03em;font-weight:700}
.t-h2{font-size:clamp(1.75rem,1.05rem + 2.5vw,3rem);line-height:1.14;letter-spacing:-.028em;font-weight:700}
.t-h3{font-size:clamp(1.06rem,.98rem + .4vw,1.24rem);line-height:1.28;letter-spacing:-.02em;font-weight:700}
.t-h3x{font-size:clamp(1.45rem,1.05rem + 1.3vw,2rem);line-height:1.16;letter-spacing:-.026em;font-weight:700}
.t-lead{font-size:clamp(1rem,.95rem + .25vw,1.12rem);line-height:1.62;color:var(--muted)}

/* Das Schluesselwort in Serifen-Kursive — die typografische Signatur der Referenz. */
.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--blau)}
/* Farb- und Schriftwechsel = Zeilenwechsel (RGN-Dauerregel). Der Hero ist ausgenommen. */
.sec-head .t-h2 .serif,.final .t-h2 .serif,.t-h3x .serif,.anf .t-h2 .serif,.hero .t-hero .serif{display:block}

/* Kicker = Pille mit Plus-Kachel */
.kicker{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.15rem;
  padding:.32rem 1rem .32rem .32rem;border-radius:var(--r-pille);
  background:linear-gradient(#fff,#EFEFFF);border:1.5px solid rgba(104,104,243,.38);
  font-size:.75rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--blau)}
.kicker i{width:22px;height:22px;border-radius:8px;flex:none;display:grid;place-content:center;color:#fff;
  background:linear-gradient(140deg,var(--blau-h),var(--blau-d))}
.kicker i svg{width:13px;height:13px}
.sec-head{max-width:46rem;margin-bottom:clamp(2rem,1.3rem + 2.4vw,3.2rem)}
.sec-head--c{margin-inline:auto;text-align:center}
.sec-head .t-lead{margin-top:1rem;max-width:40rem}
.sec-head--c .t-lead{margin-inline:auto}

/* --- 5. Knoepfe --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;
  padding:.85rem 1.35rem;border:1px solid transparent;border-radius:var(--r-btn);
  font-size:.9375rem;font-weight:700;letter-spacing:-.012em;text-decoration:none;
  cursor:pointer;white-space:nowrap;
  transition:background .2s var(--e-weich),border-color .2s var(--e-weich),color .2s var(--e-weich),
             transform .2s var(--e-weich),box-shadow .2s var(--e-weich);
}
.btn svg{width:16px;height:16px}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn--pri{background:var(--blau);color:#fff;box-shadow:var(--sh-blau)}
.btn--pri:hover{background:var(--blau-d);box-shadow:0 12px 26px -12px rgba(32,32,237,.3)}
.btn--weiss{background:#fff;color:var(--ink);border-color:#D9DBE6;box-shadow:var(--sh-1)}
.btn--weiss:hover{border-color:var(--muted-2)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--linie)}
.btn--ghost:hover{border-color:var(--ink);background:rgba(15,17,54,.03)}
.btn--aufBlau{background:#fff;color:var(--blau-d)}
.btn--aufBlau:hover{background:var(--blau-soft)}
.btn--klarAufBlau{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.btn--klarAufBlau:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}
.btn--wide{width:100%}
.btn--lg{padding:1rem 1.6rem;font-size:1rem}
.btn.is-busy{pointer-events:none;opacity:.7}
.btn-reihe{display:flex;flex-wrap:wrap;gap:.75rem}

.checks{display:grid;gap:.6rem}
.checks li{display:flex;gap:.65rem;align-items:flex-start;font-size:.95rem;line-height:1.5}
.checks > li > svg{width:18px;height:18px;margin-top:.19rem;color:var(--blau)}
.s-blau .checks > li > svg{color:#fff}

/* --- 6. Reveal — einmal, 10 px, nur opacity + transform ------------------ */
.js .rv{opacity:0;transform:translateY(10px);transition:opacity .6s var(--e),transform .6s var(--e)}
.js .rv.is-visible{opacity:1;transform:none}
.js .rv-g > *{opacity:0;transform:translateY(10px);transition:opacity .6s var(--e),transform .6s var(--e)}
.js .rv-g.is-visible > *{opacity:1;transform:none}
.rv-g.is-visible > *:nth-child(2){transition-delay:.06s}
.rv-g.is-visible > *:nth-child(3){transition-delay:.12s}
.rv-g.is-visible > *:nth-child(4){transition-delay:.18s}
.rv-g.is-visible > *:nth-child(5){transition-delay:.24s}
.rv-g.is-visible > *:nth-child(6){transition-delay:.3s}
.rv-g.is-visible > *:nth-child(7){transition-delay:.36s}
.rv-g.is-visible > *:nth-child(8){transition-delay:.42s}
.rv-g.is-visible > *:nth-child(n+9){transition-delay:.48s}
@media (prefers-reduced-motion:reduce){.js .rv,.js .rv-g > *{opacity:1;transform:none;transition:none}}
@media (max-width:720px){.js .rv,.js .rv-g > *{transform:translateY(6px)}}

/* Gezeichnete Icons */
.zi{display:block;flex:none;color:var(--blau)}
.zi svg{display:block;width:100%;height:100%}
.zi .zeichne{stroke-dasharray:var(--len,240px);stroke-dashoffset:0}
.zi.bereit .zeichne{stroke-dashoffset:var(--len,240px)}
.zi.bereit.is-an .zeichne{animation:zeichnen .95s var(--e-weich) forwards}
.zi.bereit.is-an .zeichne:nth-child(2){animation-delay:.14s}
.zi.bereit.is-an .zeichne:nth-child(3){animation-delay:.26s}
.zi .haken,.zi .buegel,.zi .feder{stroke-dashoffset:var(--len,60px)}
.zi.bereit.is-an .haken{animation:zeichnen .5s var(--e-weich) .48s forwards}
.zi.bereit.is-an .buegel{animation:zeichnen .5s var(--e-weich) .32s forwards}
.zi.bereit.is-an .feder{animation:zeichnen .6s var(--e-weich) .4s forwards}
@keyframes zeichnen{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .zi.bereit .zeichne,.zi.bereit .haken,.zi.bereit .buegel,.zi.bereit .feder{stroke-dashoffset:0;animation:none}
}

/* =========================================================================
   7. Blaue Insel
   ========================================================================= */
.s-blau{
  position:relative;isolation:isolate;color:var(--auf-d);
  border-radius:var(--r-lg);overflow:hidden;
  background:
    radial-gradient(60% 55% at 50% -8%, rgba(150,150,255,.55), transparent 70%),
    radial-gradient(74% 66% at 98% 110%, rgba(8,8,132,.7), transparent 62%),
    radial-gradient(58% 62% at -8% 96%, rgba(88,88,255,.3), transparent 62%),
    linear-gradient(170deg,#2A2AF3 0%,#1E1ED9 46%,var(--blau-d) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.12);
}
/* Feines Korn gegen Farbbanding */
.s-blau::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.s-blau::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(90% 80% at 50% 0%,#000,transparent 80%);
          mask-image:radial-gradient(90% 80% at 50% 0%,#000,transparent 80%);
}
.s-blau h2,.s-blau h3,.s-blau h4{color:#fff}
.s-blau .t-lead{color:#D8D9FA}
.s-blau .kicker{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
.s-blau .kicker i{background:#fff;color:var(--blau)}
.s-blau .serif{color:#D3D5FF}
.insel{padding:clamp(2.6rem,1.6rem + 3.4vw,4.6rem) clamp(1.2rem,.6rem + 2.6vw,3.4rem)}

/* =========================================================================
   8. Kopfzeile — freischwebende Pille
   ========================================================================= */
.kopf{position:fixed;inset:.9rem 0 auto;z-index:60;pointer-events:none;transition:inset .3s var(--e-weich)}
.kopf.is-fest{inset:.5rem 0 auto}
.kopf__in{
  pointer-events:auto;display:flex;align-items:center;gap:1.1rem;
  width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto;
  padding:.55rem .55rem .55rem 1.3rem;border-radius:var(--r-pille);
  background:#fff;border:1px solid rgba(227,228,236,.9);
  box-shadow:0 8px 24px -18px rgba(5,11,16,.12);
  transition:box-shadow .3s var(--e-weich),border-color .3s var(--e-weich);
}
.kopf.is-fest .kopf__in{border-color:#D6D8E2;box-shadow:0 14px 40px -18px rgba(5,11,16,.16)}
.kopf__logo{display:flex;align-items:center;gap:.6rem;margin-right:auto;text-decoration:none}
.kopf__logo img{height:22px;width:auto}
.kopf__tag{padding:.2rem .5rem;border-radius:6px;background:var(--blau-soft);color:var(--blau-d);
  font-size:.625rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.kopf__nav{display:flex;gap:.2rem}
.kopf__nav a{white-space:nowrap;padding:.6rem .8rem;border-radius:var(--r-pille);font-size:.875rem;font-weight:500;
  color:var(--ink);text-decoration:none;transition:background .15s var(--e-weich),color .15s var(--e-weich)}
.kopf__nav a:hover{background:rgba(32,32,237,.07);color:var(--blau-d)}
.kopf__mail{display:inline-flex;align-items:center;gap:.4rem;font-size:.875rem;
  font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap}
.kopf__mail svg{width:15px;height:15px;color:var(--blau)}
.kopf__mail:hover{color:var(--blau)}
.kopf .btn{min-height:40px;padding:.62rem 1.1rem;font-size:.8375rem}
.kopf__mob{display:none;gap:.45rem}
.kopf__ico{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:var(--r-pille);border:1px solid var(--linie);color:var(--ink);background:#fff}
.kopf__ico svg{width:17px;height:17px}
.kopf__ico--pri{background:var(--blau);border-color:var(--blau);color:#fff;box-shadow:var(--sh-blau)}

/* =========================================================================
   9. Hero
   ========================================================================= */
.hero{position:relative;isolation:isolate;text-align:center;
  padding-top:clamp(7.5rem,5rem + 8vw,11rem);padding-bottom:clamp(1.2rem,.8rem + 1.6vw,2.2rem)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 70% at 50% 34%,rgba(32,32,237,.09),transparent 70%)}
.hero .t-hero{max-width:980px;margin-inline:auto}
.hero__team{margin-top:1rem;font-size:clamp(1.3rem,.95rem + 1.5vw,2.05rem);font-weight:700;letter-spacing:-.025em;line-height:1.2;color:var(--ink)}
.hero__text{margin:1.3rem auto 0;max-width:46rem;font-size:clamp(1.05rem,.98rem + .3vw,1.22rem);
  line-height:1.6;color:var(--muted)}
.hero .btn-reihe{justify-content:center;margin-top:2rem;gap:1rem}
.hero__trust{margin-top:1.5rem;display:flex;flex-wrap:wrap;justify-content:center;
  gap:.45rem 1.5rem;font-size:.8125rem;font-weight:600;color:var(--muted)}
.hero__trust span{display:inline-flex;align-items:center;gap:.4rem}
.hero__trust svg{width:15px;height:15px;color:var(--blau)}

/* Wort-Rotor: Modellname mit Logo. Die Box waechst mit dem Wort. */
.rotor{display:inline-grid;vertical-align:bottom;text-align:left;white-space:nowrap;
  transition:width .45s var(--e);padding-right:.06em}
.rotor__w{grid-area:1/1;display:inline-flex;align-items:center;gap:.16em;
  opacity:0;transform:translateY(.35em);transition:opacity .3s var(--e-weich),transform .3s var(--e-weich)}
.rotor__w.is-an{opacity:1;transform:none}
.rotor__w.is-raus{opacity:0;transform:translateY(-.35em)}
.rotor__w img{width:.74em;height:.74em;flex:none;transform:translateY(.03em)}

/* =========================================================================
   10. Produktschirm — kippt beim Scrollen auf (26° → 0°)
   ========================================================================= */
.schirm{padding-block:clamp(1.8rem,1.2rem + 2.4vw,3rem) clamp(4.4rem,3.6rem + 2.6vw,5.6rem)}
.schirm__buehne{perspective:1300px;perspective-origin:50% 0}
.schirm__kipp{position:relative;transform-origin:50% 30%;will-change:transform}
.js .schirm__kipp{transform:rotateX(26deg)}
.schirm__rahmen{
  border-radius:22px;padding:8px;
  background:linear-gradient(170deg,#3131F4,var(--blau-d));
  box-shadow:0 50px 90px -40px rgba(16,16,120,.2),0 18px 40px -20px rgba(15,17,54,.08),
             inset 0 1px 0 rgba(255,255,255,.28);
}
.schirm__hinweis{margin-top:1rem;text-align:center;font-size:.75rem;color:var(--muted-2)}
.schwebe-pille{position:absolute;right:-18px;bottom:128px;z-index:3;display:inline-flex;align-items:center;gap:.5rem;
  padding:.45rem .9rem .45rem .45rem;border-radius:var(--r-pille);background:#fff;border:1px solid #E7E8EF;
  font-size:.75rem;font-weight:700;color:var(--ink);box-shadow:0 8px 24px -4px rgba(5,11,16,.18)}
.schwebe-pille i{width:24px;height:24px;border-radius:8px;display:grid;place-content:center;
  background:rgba(32,32,237,.09);color:var(--blau)}
.schwebe-pille i svg{width:13px;height:13px}
.schirm__pause{position:absolute;left:0;bottom:-56px;z-index:3;min-height:40px;padding:0 .95rem 0 .75rem;border-radius:var(--r-pille);
  border:1px solid var(--linie);cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;color:var(--ink);
  background:#fff;font-size:.8125rem;font-weight:600;transition:border-color .2s var(--e-weich)}
.schirm__pause:hover{border-color:var(--muted-2)}
.schirm__pause[hidden]{display:none}
.schirm__pause svg{width:13px;height:13px}
.schirm__pause .p-aus{display:none}
.schirm__pause[aria-pressed="true"] .p-an{display:none}
.schirm__pause[aria-pressed="true"] .p-aus{display:block}

/* --- Der Workspace ------------------------------------------------------ */
.ws{display:grid;grid-template-columns:230px minmax(0,1fr);height:clamp(470px,44vw,620px);
  border-radius:15px;overflow:hidden;background:#fff;color:var(--ink);font-size:13px;letter-spacing:-.01em}
.ws svg{width:14px;height:14px}
.ws__seite{background:#F5F6FB;border-right:1px solid var(--linie-2);padding:14px 12px;display:flex;flex-direction:column;gap:4px;min-height:0}
.ws__marke{padding:4px 6px 14px}
.ws__marke img{height:17px;width:auto}
.ws__neu{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:10px;background:var(--blau);color:#fff;font-weight:700;margin-bottom:8px;box-shadow:0 6px 14px -8px rgba(32,32,237,.7)}
.ws__nav{display:grid;gap:2px}
.ws__nav span{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:9px;color:#474C73;font-weight:500}
.ws__nav span svg{opacity:.75}
.ws__nav span.is-an{background:#fff;color:var(--blau-d);font-weight:700;box-shadow:0 1px 2px rgba(15,17,54,.06)}
.ws__gruppe{margin:16px 10px 6px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.ws__zuletzt{display:grid;gap:1px}
.ws__zuletzt li{padding:6px 10px;border-radius:8px;color:#50557A;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws__zuletzt li:first-child{background:rgba(32,32,237,.07);color:var(--blau-d);font-weight:600}
.ws__nutzer{margin-top:auto;display:flex;align-items:center;gap:9px;padding:10px 8px 2px;border-top:1px solid var(--linie-2)}
.ws__nutzer b{display:block;font-size:12px}
.ws__nutzer small{display:block;font-size:10.5px;color:var(--muted-2)}
.ws__av{width:28px;height:28px;border-radius:50%;display:grid;place-content:center;background:var(--blau);color:#fff;font-size:10px;font-weight:700;flex:none}
.ws__haupt{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
.ws__kopf{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--linie-2)}
.ws__pfad{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-weight:500}
.ws__pfad b{color:var(--ink)}
.ws__wissen{margin-left:auto;display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:var(--r-pille);
  background:#F1FAF5;color:#16704A;font-size:11.5px;font-weight:600;border:1px solid #D4EEDF}
.ws__wissen i{width:6px;height:6px;border-radius:50%;background:var(--ok)}

/* Nachrichten (auch in den Buehnen) */
.js .m{display:none}
.m.an,html:not(.js) .m{display:block;animation:mAuf .45s var(--e) both}
@keyframes mAuf{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.m--u{align-self:flex-end;max-width:78%}
.m--u .m__b{background:var(--blau);color:#fff;border-radius:14px 4px 14px 14px;padding:9px 13px;line-height:1.5}
.m--a{align-self:flex-start;max-width:88%}
.m--a .m__b{padding:2px 0;line-height:1.6;color:var(--ink)}
.m__wer{display:flex;align-items:center;gap:7px;margin-bottom:6px;font-size:11.5px;font-weight:700;color:#474C73}
.m__wer img{width:16px;height:16px}
.js [data-strom] .w{display:none}
[data-strom] .w.an{display:inline}
.m__aktion{display:none;gap:6px;margin-top:8px}
.m__aktion.an{display:flex;animation:mAuf .4s var(--e) both}
.m__aktion span{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;border:1px solid var(--linie);font-size:11px;font-weight:600;color:#474C73}
.m__aktion span:first-child{background:var(--blau);border-color:var(--blau);color:#fff}
.m__aktion svg{width:12px;height:12px}
.tippen{display:none;gap:4px;padding:8px 0}
.tippen.an{display:flex}
.tippen i{width:6px;height:6px;border-radius:50%;background:var(--muted-2);animation:tipp 1.2s infinite}
.tippen i:nth-child(2){animation-delay:.16s}
.tippen i:nth-child(3){animation-delay:.32s}
@keyframes tipp{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}

/* =========================================================================
   11. Modell-Wand
   ========================================================================= */
.modelle{padding-block:clamp(1.6rem,1rem + 2vw,2.8rem) clamp(2.4rem,1.6rem + 2.6vw,3.6rem);text-align:center}
.modelle__l{font-size:clamp(1.05rem,.95rem + .45vw,1.35rem);font-weight:700;letter-spacing:-.02em;color:var(--ink);margin-bottom:1.5rem}
.modelle__l b{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--blau)}
.modelle__g{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;text-align:left}
.modelle__g li{display:flex;align-items:center;gap:13px;padding:17px 15px;border-radius:14px;background:#fff;
  border:1px solid var(--linie);box-shadow:var(--sh-1);transition:transform .2s var(--e-weich),box-shadow .2s var(--e-weich),border-color .2s}
.modelle__g li:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:#D2D4E2}
.modelle__g img{width:34px;height:34px;flex:none}
.modelle__g b{display:block;font-size:1.06rem;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.modelle__g small{display:block;font-size:.75rem;color:var(--muted);line-height:1.3;margin-top:.1rem}
.modelle__g > li > span:last-child{min-width:0}
.modelle__eigen{background:transparent !important;border-style:dashed !important;border-color:#C8CAF7 !important;box-shadow:none !important}
.modelle__plus{width:34px;height:34px;border-radius:9px;display:grid;place-content:center;background:var(--blau-soft);color:var(--blau);flex:none}
.modelle__plus svg{width:16px;height:16px}
.modelle__n{margin-top:1.3rem;font-size:.9rem;color:var(--muted)}

/* =========================================================================
   12. Bento
   ========================================================================= */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.bento--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.bk{position:relative;padding:1.7rem 1.55rem;border-radius:var(--r);
  border:1px solid var(--linie);background:#fff;box-shadow:var(--sh-1);
  transition:border-color .22s var(--e-weich),box-shadow .22s var(--e-weich),transform .22s var(--e-weich)}
.bk:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.bk--weit{grid-column:span 2}
.bk__ico{width:46px;height:46px;border-radius:13px;display:grid;place-content:center;
  margin-bottom:1.1rem;background:linear-gradient(145deg,var(--blau-soft),#fff);border:1px solid var(--linie)}
.bk__ico .zi{width:22px;height:22px}
.bk h3{margin-bottom:.5rem}
.bk p{font-size:.9125rem;line-height:1.6;color:var(--muted)}
.s-blau .bk{background:linear-gradient(172deg,rgba(255,255,255,.12),rgba(255,255,255,.035));
  border-color:rgba(255,255,255,.16);box-shadow:none;color:var(--auf-d)}
.s-blau .bk:hover{border-color:rgba(255,255,255,.32);box-shadow:none}
.s-blau .bk p{color:#D4D5F9}
.s-blau .bk__ico{background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.05));border-color:rgba(255,255,255,.18)}
.s-blau .bk__ico .zi{color:#fff}

/* =========================================================================
   13. Funktionen — Zickzack mit Produkt-Buehnen
   ========================================================================= */
.fr-liste{display:grid;gap:clamp(3.4rem,2rem + 4.6vw,6.5rem)}
.fr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(1.8rem,1rem + 3.4vw,4rem)}
.fr:nth-child(even) > .fr__buehne{order:2}
.fr__buehne{position:relative;aspect-ratio:1/1;border-radius:20px;overflow:hidden;border:1px solid var(--linie);
  background:
    radial-gradient(70% 60% at 20% 0%,rgba(104,104,243,.16),transparent 70%),
    linear-gradient(152deg,#F4F4FB 0%,#ECECFA 46%,#E1E2F8 100%);
  box-shadow:var(--sh-buehne);display:grid;place-items:center;padding:clamp(56px,4vw,64px) clamp(14px,3.4vw,40px) clamp(14px,3.4vw,40px)}
.fr__buehne::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(32,32,237,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(32,32,237,.05) 1px,transparent 1px);
  background-size:28px 28px;-webkit-mask-image:linear-gradient(#000,transparent 70%);mask-image:linear-gradient(#000,transparent 70%)}
.fr__text{max-width:32rem}
.fr__nr{display:inline-block;margin-bottom:.9rem;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blau)}
.fr__text .t-h3x{margin-bottom:1rem}
.fr__text p{font-size:1.02rem;line-height:1.66;color:var(--muted)}
.fr__punkte{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}
.fr__punkte li{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .8rem;border-radius:var(--r-pille);
  background:#fff;border:1px solid var(--linie);font-size:.8125rem;font-weight:600}
.fr__punkte svg{width:14px;height:14px;color:var(--blau)}

.buehne-pause{position:absolute;top:12px;right:12px;z-index:3;width:40px;height:40px;border-radius:50%;cursor:pointer;
  display:grid;place-content:center;color:var(--ink);background:rgba(255,255,255,.92);border:1px solid var(--linie);
  box-shadow:var(--sh-1);transition:border-color .2s var(--e-weich)}
.buehne-pause:hover{border-color:var(--muted-2)}
.buehne-pause svg{width:13px;height:13px}
.buehne-pause .p-aus,.buehne-pause[aria-pressed="true"] .p-an{display:none}
.buehne-pause[aria-pressed="true"] .p-aus{display:block}
.lauf.pausiert .band__z{animation-play-state:paused}

/* Gemeinsame Karte in den Buehnen */
.ui{position:relative;z-index:1;width:100%;min-width:0;max-width:470px;background:#fff;border-radius:18px;border:1px solid #E3E4EE;
  box-shadow:0 30px 60px -30px rgba(16,16,120,.16),0 2px 6px rgba(15,17,54,.04);
  padding:16px;font-size:13px;letter-spacing:-.01em;color:var(--ink)}
.ui svg{width:14px;height:14px}
.ui__kopf{display:flex;align-items:center;gap:11px;padding-bottom:13px;margin-bottom:13px;border-bottom:1px solid var(--linie-2)}
.ui__kopf b{display:block;font-size:14.5px;letter-spacing:-.02em}
.ui__kopf small{display:block;font-size:11.5px;color:var(--muted-2)}
.ui__ico{width:36px;height:36px;border-radius:11px;display:grid;place-content:center;background:var(--blau-soft);color:var(--blau);flex:none}
.ui__ico svg{width:17px;height:17px}

/* =========================================================================
   15. Laufbaender
   ========================================================================= */
.band,.integr{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.band{padding-bottom:clamp(1rem,.6rem + 1vw,1.6rem)}
.band__z,.integr__z{display:flex;gap:16px;width:max-content;margin-bottom:16px;animation:laufL 46s linear infinite}
.band__z--r{animation-name:laufR;animation-duration:52s}
.integr__z{animation-duration:62s}
.integr__z--r{animation-name:laufR;animation-duration:74s}
.band:hover .band__z,.band:focus-within .band__z,.integr:hover .integr__z,.integr:focus-within .integr__z{animation-play-state:paused}
@keyframes laufL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes laufR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.band__k{display:inline-flex;align-items:center;gap:.75rem;padding:.8rem 1.3rem;border-radius:var(--r-pille);border:1px solid #E3E5EB;background:#fff;
  font-size:.9rem;font-weight:500;color:var(--ink);white-space:nowrap}
.band__k i{width:7px;height:7px;border-radius:50%;background:var(--blau);flex:none}
.integr__k{display:inline-flex;align-items:center;gap:.65rem;padding:.65rem 1.3rem .65rem .8rem;border-radius:var(--r-pille);border:1px solid #E3E5EB;background:#fff;
  font-size:.9rem;font-weight:600;color:var(--ink);white-space:nowrap}
.integr__k img{width:22px;height:22px;flex:none}
.integr__i{width:22px;height:22px;border-radius:6px;display:grid;place-content:center;background:#EEF0F6;color:#50557A}
.integr__i svg{width:14px;height:14px}
@media (prefers-reduced-motion:reduce){
  .band__z,.integr__z{animation:none}
  .band,.integr{overflow-x:auto}
}

/* =========================================================================
   17. Ablauf
   ========================================================================= */
.roll{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.rs{border-radius:var(--r);border:1px solid #D9DBE6;background:#fff;overflow:hidden;box-shadow:0 16px 48px -24px rgba(16,16,120,.1);
  transition:transform .25s var(--e-weich),box-shadow .25s var(--e-weich)}
.rs:hover{transform:translateY(-2px);box-shadow:0 22px 52px -24px rgba(16,16,120,.14)}
.rs__bild{position:relative;height:200px;display:grid;place-items:center;background:linear-gradient(160deg,#F2F3FB,#E9EAF8);border-bottom:1px solid var(--linie)}
.rs__n{position:absolute;left:14px;top:14px;width:28px;height:28px;border-radius:9px;background:var(--blau);color:#fff;display:grid;place-content:center;font-size:.8125rem;font-weight:700}
.rs__ui{display:grid;gap:7px;width:min(220px,80%)}
.rs__r{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:10px;background:#fff;border:1px solid #E4E6EF;font-size:.8125rem;font-weight:600;box-shadow:var(--sh-1)}
.rs__r img{width:16px;height:16px;flex:none}
.rs__sw{margin-left:auto;width:26px;height:15px;border-radius:8px;background:#DADBE6;position:relative}
.rs__sw::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:#fff}
.rs__r.is-an .rs__sw{background:var(--blau)}
.rs__r.is-an .rs__sw::after{left:13px}
.rs__ok{margin-left:auto;width:15px;height:15px;color:var(--ok)}
.rs__ui--team{justify-items:center;gap:14px}
.rs__av{display:flex}
.rs__av span{width:34px;height:34px;border-radius:50%;margin-left:-9px;border:2px solid #fff;display:grid;place-content:center;font-size:.6875rem;font-weight:700;color:#fff;background:var(--blau)}
.rs__av span:nth-child(2){background:var(--f2)}
.rs__av span:nth-child(3){background:var(--f3)}
.rs__av span:nth-child(4){background:#E6E7F3;color:#50557A}
.rs__av span:first-child{margin-left:0}
.rs__los{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--r-pille);background:var(--blau);color:#fff;font-size:.8125rem;font-weight:700;box-shadow:var(--sh-blau)}
.rs__los svg{width:14px;height:14px}
.rs__text{padding:1.4rem 1.5rem 1.6rem}
.rs__text h3{margin-bottom:.5rem}
.rs__text p{font-size:.9rem;line-height:1.6;color:var(--muted)}
.roll__cta{justify-content:center;margin-top:clamp(1.8rem,1.3rem + 1.6vw,2.6rem)}

/* =========================================================================
   19. Anfrage + Formular
   ========================================================================= */
.anf .t-lead{margin-top:1rem}
.anf__grid{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:clamp(1.8rem,1rem + 3.2vw,3.6rem);align-items:center}
.anf__kontakt{margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--linie-d);display:grid;gap:.8rem}
.anf__z{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.anf__z svg{width:18px;height:18px;color:#fff;flex:none}
.anf__z b{display:block;font-size:.9375rem;font-weight:700;color:#fff;letter-spacing:-.015em}
.anf__z span{display:block;font-size:.8125rem;color:var(--auf-d-2)}

.karte-form{position:relative;background:#fff;color:var(--ink);border-radius:var(--r-lg);padding:clamp(1.3rem,1rem + 1.1vw,1.8rem);box-shadow:var(--sh-3)}
.stoerer{position:absolute;top:-18px;right:-14px;z-index:3;width:86px;height:86px;border-radius:50%;background:var(--blau);color:#fff;
  display:grid;place-content:center;text-align:center;transform:rotate(-11deg);box-shadow:0 10px 24px rgba(32,32,237,.34);line-height:1.06;border:3px solid #fff}
.stoerer b{display:block;font-size:1.28rem;font-weight:900;letter-spacing:-.03em}
.stoerer span{display:block;margin-top:.2rem;font-size:.5rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;line-height:1.1;white-space:nowrap}
.form__h{font-size:1.12rem;font-weight:700;letter-spacing:-.026em;line-height:1.24}
.form__zeit{margin-top:.32rem;font-size:.8125rem;color:var(--muted)}
.fort{margin:1rem 0 1.1rem}
.fort__t{display:flex;justify-content:space-between;font-size:.75rem;font-weight:700;color:var(--muted);margin-bottom:.4rem}
.fort__bal{height:4px;border-radius:var(--r-pille);background:var(--linie);overflow:hidden}
.fort__bal i{display:block;height:100%;border-radius:var(--r-pille);background:var(--blau);transition:width .45s var(--e)}
.schritt{display:none}
.schritt.is-an{display:block}
.schritt__f{font-size:.9375rem;font-weight:700;margin-bottom:.75rem;letter-spacing:-.015em}
.opts{display:grid;gap:.45rem}
.opts--2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.opt{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;cursor:pointer;padding:.72rem .8rem;border:1px solid var(--linie);
  border-radius:var(--r-s);background:#F7F7FA;font-size:.8625rem;font-weight:500;line-height:1.32;transition:border-color .16s var(--e-weich),background .16s var(--e-weich)}
.opt:hover,.opt.is-an{border-color:var(--blau);background:var(--blau-soft)}
.opt svg{width:18px;height:18px;color:var(--blau);flex:none}
.felder{display:grid;gap:.55rem}
.felder--2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.feld label{display:block;font-size:.75rem;font-weight:700;color:var(--muted);margin-bottom:.26rem}
.feld input{width:100%;padding:.7rem .8rem;border:1px solid var(--linie);border-radius:var(--r-btn);background:#fff;font-size:1rem;transition:border-color .16s var(--e-weich)}
.feld input:focus{border-color:var(--blau);outline:none}
.feld input.is-fehler{border-color:var(--warn)}
.dsgvo{display:flex;gap:.55rem;align-items:flex-start;margin-top:.8rem;font-size:.75rem;line-height:1.5;color:var(--muted)}
.dsgvo input{width:16px;height:16px;flex:none;margin-top:.16rem;accent-color:var(--blau)}
.dsgvo a{color:var(--blau);text-decoration:underline}
.form__nav{display:flex;gap:.5rem;margin-top:1rem}
.form__zur{display:none}
.form__zur.is-an{display:inline-flex}
.trust{margin-top:.8rem;text-align:center;font-size:.8125rem;font-weight:700;letter-spacing:-.008em}
.formstate{display:none;text-align:center;padding:1.2rem .4rem}
.formstate.is-an{display:block}
.formstate__i{width:50px;height:50px;margin:0 auto .85rem;border-radius:50%;display:grid;place-content:center;background:var(--blau-soft);color:var(--blau)}
.formstate__i svg{width:23px;height:23px}
.formstate h3{font-size:1.08rem}
.formstate p{margin-top:.5rem;font-size:.9125rem;color:var(--muted)}
.formstate--fehler .formstate__i{background:rgba(192,57,43,.1);color:var(--warn)}

/* =========================================================================
   20. FAQ
   ========================================================================= */
.faq{max-width:50rem;margin-inline:auto;display:grid;gap:10px}
.f{border:1px solid var(--linie);border-radius:var(--r);background:#fff;overflow:hidden;transition:border-color .2s var(--e-weich),box-shadow .2s var(--e-weich)}
.f.is-auf{border-color:var(--blau);box-shadow:0 10px 30px -12px rgba(32,32,237,.24)}
.f__b{display:flex;align-items:center;gap:1rem;width:100%;padding:1.15rem 1.25rem;background:none;border:0;cursor:pointer;text-align:left;
  font-size:1rem;font-weight:700;letter-spacing:-.02em;line-height:1.36;color:var(--ink)}
.f__n{font-family:var(--font-m);font-size:.8rem;font-weight:700;color:var(--blau);flex:none}
.f__p{margin-left:auto;width:34px;height:34px;flex:none;position:relative;border:1px solid var(--linie);border-radius:50%;transition:transform .28s var(--e-weich),border-color .2s}
.f__p::before,.f__p::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--ink);border-radius:2px}
.f__p::before{width:12px;height:2px}
.f__p::after{width:2px;height:12px;transition:opacity .2s var(--e-weich)}
.f.is-auf .f__p{transform:rotate(90deg);border-color:var(--blau)}
.f.is-auf .f__p::after{opacity:0}
.f__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--e-weich)}
.f.is-auf .f__a{grid-template-rows:1fr}
.f__a > div{overflow:hidden}
.f__a p{padding:0 1.25rem 1.15rem 3.1rem;font-size:.9375rem;line-height:1.66;color:var(--muted)}
.f__a p + p{padding-top:.65rem}

/* =========================================================================
   21. Abschlussband + Fusszeile
   ========================================================================= */
.final{text-align:center}
.final .t-h2{max-width:34rem;margin-inline:auto}
.final .t-lead{max-width:38rem;margin:1rem auto 0}
.final .btn-reihe{justify-content:center;margin-top:1.9rem}
.final__logos{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:1.8rem}
.final__logos span{width:42px;height:42px;border-radius:50%;background:#fff;display:grid;place-content:center;box-shadow:0 10px 24px -12px rgba(0,0,40,.6)}
.final__logos img{width:22px;height:22px}
.final__logos .final__kern{width:64px;height:64px;border-radius:18px;box-shadow:0 0 0 6px rgba(255,255,255,.14),0 16px 34px -14px rgba(0,0,40,.7)}
.final__kern img{width:34px;height:auto}

.fuss{background:radial-gradient(70% 90% at 0% 0%,rgba(104,104,243,.35),transparent 60%),linear-gradient(175deg,#1515CC,var(--blau-d) 40%,#0C0CA0);color:#C9CBF7;padding-block:clamp(2.6rem,2rem + 2.2vw,4rem) 1.7rem;font-size:.875rem;margin-top:var(--sec);border-radius:var(--r-lg) var(--r-lg) 0 0}
.fuss__grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(1.8rem,1rem + 2.4vw,3.2rem);padding-bottom:clamp(1.9rem,1.4rem + 1.6vw,2.6rem);border-bottom:1px solid rgba(255,255,255,.16)}
.fuss__marke img{height:24px;width:auto;margin-bottom:1.1rem}
.fuss__marke p{font-size:.875rem;line-height:1.64;max-width:26rem}
.fuss__mail{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.2rem;font-size:.9375rem;font-weight:700;color:#fff;text-decoration:none;transition:color .18s var(--e-weich)}
.fuss__mail svg{width:16px;height:16px;color:#fff}
.fuss__mail:hover{color:#D3D5FF}
.fuss__zeit{margin-top:.28rem;font-size:.8125rem;color:#AEB1F0}
.fuss__sp h2{font-size:.8125rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#fff;margin-bottom:.95rem}
.fuss__sp ul{display:grid;gap:.55rem}
.fuss__sp a{font-size:.875rem;line-height:1.4;text-decoration:none;transition:color .18s var(--e-weich)}
.fuss__sp a:hover{color:#fff}
.fuss__cta{margin-top:1.3rem}
.fuss .btn--pri{background:#fff;color:var(--blau-d);box-shadow:0 10px 24px -12px rgba(0,0,40,.25)}
.fuss .btn--pri:hover{background:var(--blau-soft)}
.fuss__u{padding-top:1.4rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.55rem 1.5rem;font-size:.8125rem;color:#B6B9F2}
.fuss__recht{display:flex;flex-wrap:wrap;gap:1.3rem}
.fuss__u a{text-decoration:none;transition:color .18s var(--e-weich)}
.fuss__u a:hover{color:#fff}
.fuss__hinweis{flex:1 1 100%;max-width:60rem;line-height:1.6;font-size:.75rem;padding-top:.55rem;color:#A3A6EE}
/* Kurzfassung auf den Rechtsseiten */
.fuss__o{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;padding-bottom:1.4rem;border-bottom:1px solid rgba(255,255,255,.16)}
.fuss__o img{height:22px;width:auto}
.fuss__n{display:flex;flex-wrap:wrap;gap:1.3rem}
.fuss__n a{text-decoration:none}
.fuss__n a:hover{color:#fff}

/* =========================================================================
   22. Overlays
   ========================================================================= */
.ovl{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:1.1rem;background:rgba(10,11,40,.7);backdrop-filter:blur(3px)}
.ovl.is-on{display:flex}
.ovl__c{position:relative;width:100%;max-width:560px;max-height:92vh;overflow-y:auto;background:#fff;border-radius:var(--r-lg);animation:ovlAuf .3s var(--e-weich) both}
@keyframes ovlAuf{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.ovl__c--promo{max-width:26.5rem;padding:0;text-align:center}
.ovl__x{position:absolute;top:.7rem;right:.7rem;z-index:6;width:34px;height:34px;border-radius:50%;border:0;background:#fff;color:var(--ink);cursor:pointer;
  display:grid;place-content:center;box-shadow:0 3px 12px rgba(15,17,54,.22);transition:transform .24s var(--e-weich)}
.ovl__x:hover{transform:rotate(90deg)}
.ovl__x svg{width:15px;height:15px}
.ovl__form{padding:clamp(1.3rem,1rem + 1.3vw,1.8rem)}
.ovl .karte-form{box-shadow:none;padding:0}
.promo__bild{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-lg) var(--r-lg) 0 0}
.promo__bild img{width:100%;height:100%;object-fit:cover}
.promo__bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,40,.05),rgba(10,11,40,.6))}
.promo__badge{position:absolute;left:.9rem;bottom:.9rem;z-index:2;padding:.3rem .7rem;border-radius:var(--r-pille);background:var(--blau);color:#fff;font-size:.6875rem;font-weight:700}
.promo__c{padding:1.4rem 1.4rem 1.5rem}
.promo__c h3{font-size:1.22rem;letter-spacing:-.026em;line-height:1.2;font-weight:700}
.promo__c > p{margin-top:.55rem;font-size:.9125rem;line-height:1.58;color:var(--muted)}
.promo__l{margin:1.1rem 0;padding:1rem 0;border-top:1px solid var(--linie-2);border-bottom:1px solid var(--linie-2);display:grid;gap:.5rem;text-align:left}
.promo__l li{display:flex;gap:.55rem;align-items:flex-start;font-size:.8625rem;line-height:1.46}
.promo__l svg{width:15px;height:15px;margin-top:.16rem;color:var(--blau);flex:none}
.promo__b{display:grid;gap:.5rem}
.promo__t{margin-top:.8rem;font-size:.75rem;color:var(--muted-2)}
.promo__weg{display:inline-block;margin-top:.65rem;font-size:.75rem;color:var(--muted-2);background:none;border:0;cursor:pointer;text-decoration:underline}

/* --- 23. Schwebender Kontaktknopf -------------------------------------- */
.fab{position:fixed;right:18px;bottom:18px;z-index:120;display:flex;flex-direction:column;align-items:flex-end;gap:.45rem;pointer-events:none;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s var(--e-weich),transform .3s var(--e-weich),visibility 0s .3s}
.fab.is-da{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--e-weich),transform .3s var(--e-weich),visibility 0s}
.fab > *{pointer-events:auto}
.fab__l{display:flex;flex-direction:column;gap:.4rem;align-items:flex-end}
.fab__a{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .85rem;border-radius:var(--r-pille);background:#fff;color:var(--ink);text-decoration:none;
  font-size:.8125rem;font-weight:700;box-shadow:0 6px 20px rgba(15,17,54,.14);border:1px solid var(--linie-2);opacity:0;transform:translateY(8px) scale(.96);
  pointer-events:none;transition:opacity .24s var(--e-weich),transform .24s var(--e-spring)}
.fab__a svg{width:15px;height:15px;color:var(--blau)}
.fab.is-auf .fab__a{opacity:1;transform:none;pointer-events:auto}
.fab.is-auf .fab__a:nth-child(2){transition-delay:.05s}
.fab__b{width:50px;height:50px;border-radius:50%;border:0;background:var(--blau);color:#fff;cursor:pointer;display:grid;place-content:center;
  box-shadow:0 8px 20px -6px rgba(32,32,237,.22);position:relative;transition:transform .24s var(--e-spring),background .18s var(--e-weich)}
.fab__b:hover{background:var(--blau-d)}
.fab__b svg{width:21px;height:21px;transition:opacity .2s var(--e-weich),transform .28s var(--e-weich)}
.fab__b .ico-zu{position:absolute;opacity:0;transform:rotate(-90deg)}
.fab.is-auf .fab__b .ico-auf{opacity:0;transform:rotate(90deg)}
.fab.is-auf .fab__b .ico-zu{opacity:1;transform:none}

/* =========================================================================
   24. Rechtsseiten + 404
   ========================================================================= */
.rechts-kopf{padding-block:1rem;border-bottom:1px solid var(--linie);background:rgba(255,255,255,.6)}
.rechts-kopf .kopf__in{display:flex;align-items:center;gap:1.5rem;background:none;border:0;box-shadow:none;padding:0;border-radius:0}
.rechts-kopf img{height:24px;width:auto}
.rechts-kopf a:first-child{display:inline-flex;align-items:center;min-height:44px}
.rechts-kopf .btn{margin-left:auto}
.rechtsseite main{padding-block:clamp(2.4rem,1.8rem + 2.4vw,4rem) var(--sec)}
.legal{max-width:47rem;margin-inline:auto}
.legal h1{font-size:clamp(1.7rem,1.2rem + 1.9vw,2.35rem);letter-spacing:-.028em;margin-bottom:1.5rem;font-weight:700}
.legal h2{font-size:clamp(1.12rem,1rem + .6vw,1.32rem);letter-spacing:-.024em;margin:2.5rem 0 .75rem;padding-top:1.5rem;border-top:1px solid var(--linie);font-weight:700}
.legal h3{font-size:1rem;font-weight:700;letter-spacing:-.018em;margin:1.6rem 0 .45rem}
.legal p,.legal li{font-size:.9375rem;line-height:1.72;color:var(--muted)}
.legal p + p{margin-top:.8rem}
.legal ul{margin:.65rem 0 .65rem 1.1rem;list-style:disc;display:grid;gap:.28rem}
.legal a{color:var(--blau);text-underline-offset:2px}
.legal strong{color:var(--ink);font-weight:700}
.legal .zurueck{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.5rem;font-size:.875rem;font-weight:700;color:var(--muted);text-decoration:none}
.legal .zurueck:hover{color:var(--blau)}
.legal .stand{margin-top:2.2rem;padding-top:1.3rem;border-top:1px solid var(--linie);font-size:.8125rem;color:var(--muted-2)}
.legal .offen{margin:0 0 1.7rem;padding:.9rem 1.1rem;border:1px solid var(--linie);border-radius:var(--r-s);background:var(--papier-2);font-size:.875rem}
.vier{min-height:66vh;display:grid;place-content:center;text-align:center;padding-block:var(--sec)}
.vier__z{font-size:clamp(5rem,3rem + 12vw,10rem);font-weight:900;line-height:.9;letter-spacing:-.05em;color:var(--blau);opacity:.16}
.vier h1{margin-top:-.4em;font-size:clamp(1.6rem,1.1rem + 1.9vw,2.3rem);letter-spacing:-.028em;font-weight:700}
.vier p{margin:.9rem auto 0;max-width:32rem;font-size:.9375rem;line-height:1.62;color:var(--muted)}
.vier .btn-reihe{justify-content:center;margin-top:1.8rem}

/* =========================================================================
   26. Bausteine der Automatisierungs-Seite
   ========================================================================= */
/* Abteilungsfarben als Kachel */
.f1{background:rgba(32,32,237,.1);color:var(--f1)}
.f2{background:rgba(14,143,126,.12);color:var(--f2)}
.f3{background:rgba(199,122,6,.13);color:var(--f3)}
.f4{background:rgba(122,63,242,.12);color:var(--f4)}
.f5{background:rgba(30,142,79,.12);color:var(--f5)}

/* Zahlwechsel in den Buehnen: data-s schaltet z0 … z6 */
.zw{display:inline-grid;font-style:normal}
.zw > i{grid-area:1/1;font-style:normal;opacity:0;transform:translateY(5px);transition:opacity .3s var(--e-weich),transform .4s var(--e)}
.zw:not([data-st]) > .z0,.zw[data-st="0"] > .z0,.zw[data-st="1"] > .z1,.zw[data-st="2"] > .z2,.zw[data-st="3"] > .z3,
.zw[data-st="4"] > .z4,.zw[data-st="5"] > .z5,.zw[data-st="6"] > .z6{opacity:1;transform:none}

/* Einblenden auf Zeit (data-an) */
.js .erst{opacity:0;transform:translateY(6px);transition:opacity .35s var(--e-weich),transform .45s var(--e)}
.erst.an{opacity:1;transform:none}

@keyframes dreh{to{transform:rotate(360deg)}}
@keyframes pingG{0%{box-shadow:0 0 0 0 rgba(22,137,90,.45)}70%{box-shadow:0 0 0 6px rgba(22,137,90,0)}100%{box-shadow:0 0 0 0 rgba(22,137,90,0)}}
@keyframes puls{to{stroke-dashoffset:0}}

/* Status-Chips: laeuft · Freigabe · erledigt */
.fd__st,.ui__chip{display:inline-grid;justify-items:end}
.fd__st > i,.ui__chip > i{grid-area:1/1;font-style:normal;display:none;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-pille);
  font-size:10.5px;font-weight:700;white-space:nowrap}
.fd__st .l,.ui__chip .l{background:var(--blau-soft);color:var(--blau-d)}
.fd__st .l::before,.ui__chip .l::before{content:"";width:8px;height:8px;border-radius:50%;border:1.6px solid currentColor;border-right-color:transparent;animation:dreh .7s linear infinite}
.fd__st .w,.ui__chip .w{background:#FFF1D6;color:#8A5300}      /* 6,6:1 */
.fd__st .ok,.ui__chip .ok{background:#E6F5EC;color:#15724A}    /* 5,6:1 */
.fd__st[data-st="l"] .l,.fd__st[data-st="w"] .w,.fd__st[data-st="ok"] .ok,.fd__st.is-ok .ok,
.ui__chip[data-st="l"] .l,.ui__chip[data-st="w"] .w,.ui__chip[data-st="ok"] .ok{display:inline-flex}
.ui__chip{margin-left:auto}

/* Haken im Kreis (Abgleich, Onboarding) */
.rc > i,.ob > i{position:relative;flex:none;width:14px;height:14px;border-radius:50%;border:1.6px solid #C4C6D6;transition:background .25s,border-color .25s}
.rc[data-st="l"] > i,.ob[data-st="l"] > i{border-color:var(--blau);border-right-color:transparent;animation:dreh .7s linear infinite}
.rc[data-st="ok"] > i,.ob[data-st="ok"] > i{border-color:var(--ok);background:var(--ok)}
.rc[data-st="ok"] > i::after,.ob[data-st="ok"] > i::after{content:"";position:absolute;left:3.4px;top:1.2px;width:3px;height:6px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}

/* Rotor mit Icon-Kachel */
.rotor__i{width:.78em;height:.78em;border-radius:.22em;flex:none;display:grid;place-content:center;color:#fff;
  background:linear-gradient(140deg,var(--blau-h),var(--blau-d));box-shadow:0 8px 16px -10px rgba(32,32,237,.7);transform:translateY(.04em)}
.rotor__i svg{width:.46em;height:.46em}

/* --- Leitstand im Produktschirm ----------------------------------------- */
.ws__zahl{margin-left:auto;display:inline-grid;min-width:20px;height:18px;padding:0 6px;border-radius:9px;background:#FFE7BF;color:#8A5300;
  font-size:10.5px;font-weight:700;line-height:18px;text-align:center}
.lt{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;padding:14px 18px 0;overflow:hidden}
.lt__kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.kp{min-width:0;padding:10px 12px;border-radius:12px;border:1px solid var(--linie);background:#fff}
.kp small{display:block;font-size:10.5px;font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp b{display:inline-grid;margin-top:2px;font-size:19px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.kp--warn{background:#FFFAF0;border-color:#F6E3BD}
.kp--warn b{color:#8A5300}
.kp--ok{background:#F4FBF7;border-color:#D4EEDF}
.kp--ok b{color:#15724A}
.lt__h{display:flex;align-items:center;gap:8px;margin:14px 2px 8px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.lt__h span{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:var(--r-pille);background:#F1FAF5;color:#15724A;letter-spacing:.04em}
.lt__h span i{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:pingG 2s infinite}
.lt__feed{display:grid;align-content:start;gap:6px;min-height:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 76%,transparent);mask-image:linear-gradient(#000 76%,transparent)}
.fd{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:9px 11px;border-radius:12px;border:1px solid var(--linie-2);background:#fff}
.js .fd[data-an]{display:none}
.fd[data-an].an{display:grid;animation:mAuf .45s var(--e) both}
.fd__i{width:30px;height:30px;border-radius:9px;display:grid;place-content:center}
.fd__t{min-width:0}
.fd__t b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd__t small{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd time{font-family:var(--font-m);font-size:10.5px;color:var(--muted-2)}
.fg{position:absolute;right:18px;bottom:14px;z-index:4;width:min(300px,78%);padding:14px;border-radius:16px;background:#fff;border:1px solid #E1E2EC;
  box-shadow:0 26px 60px -22px rgba(15,17,54,.42);opacity:0;transform:translateY(14px) scale(.97);pointer-events:none;
  transition:opacity .25s var(--e-weich),transform .4s var(--e)}
.fg.an{opacity:1;transform:none}
.fg__k{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:var(--r-pille);background:#FFF1D6;color:#8A5300;font-size:10.5px;font-weight:700}
.fg__k svg{width:12px;height:12px}
.fg__t{display:block;margin-top:9px;font-size:14px;letter-spacing:-.02em}
.fg__m{margin-top:2px;font-size:11.5px;color:var(--muted)}
.fg__summe{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;padding:9px 11px;border-radius:10px;background:#F6F6FB;font-size:11.5px;color:var(--muted)}
.fg__summe b{font-size:15px;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fg__b{display:flex;gap:6px;margin-top:10px}
.fg__b > span{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px;border-radius:9px;border:1px solid var(--linie);font-size:12px;font-weight:700}
.fg__b .fg__ok{background:var(--blau);border-color:var(--blau);color:#fff;transition:transform .15s,background .2s,border-color .2s}
.fg__ok svg{width:13px;height:13px;display:none}
.fg__b[data-st="1"] .fg__ok{transform:scale(.95);background:var(--ok);border-color:var(--ok)}
.fg__b[data-st="1"] .fg__ok svg{display:block}
.lt__toast{position:absolute;left:50%;bottom:16px;z-index:5;display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:var(--r-pille);
  background:var(--ink);color:#fff;font-size:12px;font-weight:600;white-space:nowrap;opacity:0;transform:translate(-50%,10px);transition:opacity .3s,transform .4s var(--e)}
.lt__toast svg{width:13px;height:13px;color:#6EE7A8}
.lt__toast.an{opacity:1;transform:translate(-50%,0)}
.lt__fuss{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px;border-top:1px solid var(--linie-2);font-size:11.5px;color:var(--muted)}
.lt__verb{display:inline-flex;align-items:center;gap:7px;font-weight:600}
.lt__verb img{width:18px;height:18px}
.lt__prot{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.lt__prot svg{width:13px;height:13px;color:var(--blau)}

/* =========================================================================
   27. Engpass — drei Karten mit Mini-Grafik
   ========================================================================= */
.pk-reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pk{display:flex;flex-direction:column;padding:14px 14px 1.6rem;border-radius:var(--r-lg);border:1px solid var(--linie);background:#fff;box-shadow:var(--sh-1);
  transition:box-shadow .22s var(--e-weich),transform .22s var(--e-weich)}
.pk:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.pk__bild{position:relative;height:172px;margin-bottom:1.3rem;border-radius:14px;overflow:hidden;border:1px solid var(--linie-2);
  background:radial-gradient(80% 70% at 20% 0%,rgba(104,104,243,.12),transparent 70%),linear-gradient(160deg,#F6F6FC,#ECECFA)}
.pk__nr{margin:0 .6rem .5rem;font-family:var(--font-m);font-size:.75rem;font-weight:700;color:var(--blau)}
.pk h3{margin:0 .6rem .55rem}
.pk p{margin:0 .6rem;font-size:.9125rem;line-height:1.62;color:var(--muted)}
.pk__fazit{max-width:40rem;margin:clamp(1.6rem,1.2rem + 1.2vw,2.4rem) auto 0;text-align:center;
  font-size:clamp(1.06rem,.98rem + .4vw,1.3rem);font-weight:700;letter-spacing:-.02em;line-height:1.4}

/* 1 · Woche: Fachliches gegen Routine */
.woche{position:absolute;left:22px;right:22px;top:16px;bottom:52px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.woche > span{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:3px}
.woche i{display:block;border-radius:6px}
.woche .f{height:calc(var(--f)*100%);background:linear-gradient(180deg,var(--blau-m),var(--blau-d))}
.woche .r{height:calc(var(--r)*100%);background:repeating-linear-gradient(135deg,#E48C74 0 5px,#FBE1D8 5px 10px);
  transform-origin:50% 100%;transition:transform 1.1s var(--e) .25s}
.js .pk-reihe:not(.is-visible) .woche .r{transform:scaleY(0)}
.woche small{position:absolute;left:0;right:0;bottom:-19px;text-align:center;font-size:10.5px;font-weight:700;color:var(--muted)}
.woche__leg{position:absolute;left:16px;right:16px;bottom:9px;display:flex;flex-wrap:wrap;gap:3px 12px;font-size:10.5px;font-weight:500;color:var(--muted)}
.woche__leg span{display:inline-flex;align-items:center;gap:5px}
.woche__leg i{width:10px;height:10px;border-radius:3px}
.woche__leg .f{background:var(--blau)}
.woche__leg .r{background:repeating-linear-gradient(135deg,#E48C74 0 3px,#FBE1D8 3px 6px)}

/* 2 · Inseln ohne Verbindung */
.ins__linien{position:absolute;inset:0;width:100%;height:100%}
.ins__linien path{fill:none;stroke:#C9A39D;stroke-width:1.6;stroke-dasharray:.035 .025;vector-effect:non-scaling-stroke}
.ins{position:absolute;left:var(--x);top:var(--y);transform:rotate(var(--d));display:inline-flex;flex-direction:column;padding:7px 11px;border-radius:10px;
  background:#fff;border:1px solid #DADCE8;font-size:11.5px;font-weight:700;color:#3E4368;box-shadow:0 8px 18px -12px rgba(15,17,54,.35)}
.ins em{font-style:normal;font-size:9.5px;font-weight:700;color:var(--warn)}
.ins--weg{border-color:#F1C4BE;background:#FFF7F6}
.ins__frage{position:absolute;left:var(--x);top:var(--y);width:26px;height:26px;border-radius:50%;display:grid;place-content:center;
  background:var(--ink);color:#fff;font-size:13px;font-weight:700;box-shadow:0 6px 14px -6px rgba(15,17,54,.5)}

/* 3 · Nachfrage gegen Kapazitaet */
.kap{position:absolute;left:14px;top:18px;width:calc(100% - 28px);height:calc(100% - 44px);transition:clip-path 1.4s var(--e) .3s;clip-path:inset(0 0 0 0)}
.js .pk-reihe:not(.is-visible) .kap{clip-path:inset(0 100% 0 0)}
.kap__luecke{fill:rgba(228,140,116,.2)}
.kap__nach{fill:none;stroke:var(--blau);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke}
.kap__kap{fill:none;stroke:#7E83A6;stroke-width:2;stroke-dasharray:6 5;vector-effect:non-scaling-stroke}
.kap__l{position:absolute;padding:2px 8px;border-radius:var(--r-pille);background:#fff;border:1px solid var(--linie);font-size:10.5px;font-weight:700;white-space:nowrap}
.kap__l--n{right:14px;top:10px;color:var(--blau-d)}
.kap__l--k{left:16px;bottom:10px;color:#565B80}
.kap__l--g{right:16px;top:74px;color:#9A3B26;border-color:#F3C9BD}

/* =========================================================================
   28. 3D — Ein Vorgang, fuenf Stationen
   ========================================================================= */
.str-wrap{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:clamp(1rem,.6rem + 1.6vw,2rem);align-items:stretch}
.str{position:relative;isolation:isolate;min-height:clamp(440px,40vw,540px);border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.16);
  background-color:rgba(6,6,110,.32);
  background-image:radial-gradient(60% 55% at 50% 56%,rgba(150,150,255,.24),transparent 70%),
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:100% 100%,28px 28px,28px 28px}
.iso{position:absolute;inset:0;perspective:1800px;perspective-origin:50% 30%}
.iso__szene{--rx:58deg;--rz:50deg;--s:1;--tx:0px;--ty:0px;
  position:absolute;left:50%;top:50%;width:700px;height:200px;margin:-100px 0 0 -350px;transform-style:preserve-3d;
  transform:translate(var(--tx),var(--ty)) scale(var(--s)) rotateX(var(--rx)) rotateZ(var(--rz))}
.iso__boden{position:absolute;inset:-26px -24px;border-radius:22px;border:1px solid rgba(255,255,255,.2);
  background-color:rgba(255,255,255,.06);
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:35px 35px}
.iso__bahn{position:absolute;left:46px;right:46px;top:92px;height:16px;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.14);transform:translateZ(1px)}
.iso__bahn i{position:absolute;inset:0;opacity:.55;background:repeating-linear-gradient(90deg,rgba(255,255,255,.6) 0 10px,transparent 10px 26px)}
.str.is-auto .iso__bahn i{animation:bahn 1.1s linear infinite}
@keyframes bahn{to{background-position:26px 0}}

/* Quader-Primitiv: drei sichtbare Flaechen reichen bei fester Kamera. Nie opacity auf den Koerper. */
.iso-box{position:absolute;left:calc(var(--x)*1px);top:calc(var(--y)*1px);width:calc(var(--w)*1px);height:calc(var(--d)*1px);
  transform-style:preserve-3d;transform:translateZ(calc(var(--z,0)*1px))}
.iso-box > i{position:absolute;display:block}
.iso-box > .o{inset:0;transform:translateZ(calc(var(--h)*1px));display:grid;place-content:center;border-radius:7px}
.iso-box > .v{left:0;right:0;top:calc((var(--d) - var(--h))*1px);height:calc(var(--h)*1px);transform-origin:50% 100%;transform:rotateX(-90deg)}
.iso-box > .r{left:calc((var(--w) - var(--d))*1px);top:calc(var(--h)*-1px);width:calc(var(--d)*1px);height:calc(var(--h)*1px);
  transform-origin:100% 100%;transform:rotateZ(-90deg) rotateX(-90deg)}

/* Stationen: dunkel, bis der Vorgang da war */
.iso-st > .o{background:rgba(236,236,255,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);transition:background .5s var(--e-weich),box-shadow .5s var(--e-weich)}
.iso-st > .v{background:rgba(200,202,255,.3);transition:background .5s var(--e-weich)}
.iso-st > .r{background:rgba(150,154,250,.34);transition:background .5s var(--e-weich)}
.iso-st > .o > *{opacity:.5;transform:rotate(calc(var(--rz,50deg) * -1));transition:opacity .5s var(--e-weich)}
.iso-st > .o img{width:40px;height:40px}
.iso-ico{width:42px;height:42px;border-radius:12px;display:grid;place-content:center;background:rgba(32,32,237,.12);color:var(--blau-d)}
.iso-ico svg{width:24px;height:24px}
.iso-ico--ok{background:var(--ok);color:#fff}
.iso-av{width:42px;height:42px;border-radius:50%;display:grid;place-content:center;background:var(--f3);color:#fff;font-size:14px;font-weight:700;transition:box-shadow .4s}
.str.ab-1 .iso-st--1 > .o,.str.ab-2 .iso-st--2 > .o,.str.ab-3 .iso-st--3 > .o,.str.ab-4 .iso-st--4 > .o,.str.ab-5 .iso-st--5 > .o{background:linear-gradient(150deg,#fff,#E4E5FF)}
.str.ab-1 .iso-st--1 > .v,.str.ab-2 .iso-st--2 > .v,.str.ab-3 .iso-st--3 > .v,.str.ab-4 .iso-st--4 > .v,.str.ab-5 .iso-st--5 > .v{background:#C0C2F8}
.str.ab-1 .iso-st--1 > .r,.str.ab-2 .iso-st--2 > .r,.str.ab-3 .iso-st--3 > .r,.str.ab-4 .iso-st--4 > .r,.str.ab-5 .iso-st--5 > .r{background:#9A9DF1}
.str.ab-1 .iso-st--1 > .o > *,.str.ab-2 .iso-st--2 > .o > *,.str.ab-3 .iso-st--3 > .o > *,.str.ab-4 .iso-st--4 > .o > *,.str.ab-5 .iso-st--5 > .o > *{opacity:1}
.str[data-ist="1"] .iso-st--1 > .o,.str[data-ist="2"] .iso-st--2 > .o,.str[data-ist="3"] .iso-st--3 > .o,.str[data-ist="5"] .iso-st--5 > .o{
  box-shadow:0 0 0 3px rgba(255,255,255,.95),0 0 50px 14px rgba(170,172,255,.8)}
.str[data-ist="4"] .iso-st--4 > .o{background:linear-gradient(150deg,#fff,#FFEBC7);box-shadow:0 0 0 3px #FFD48A,0 0 50px 14px rgba(255,196,110,.6)}
.str.frei .iso-av{box-shadow:0 0 0 4px #6EE7A8}

/* Stehende Schilder: drehen sich zur Kamera zurueck, auch bei Maus-Parallaxe */
.bb{position:absolute;left:calc(var(--x)*1px);top:calc(var(--y)*1px);width:0;height:0;transform-style:preserve-3d;
  transform:translateZ(calc(var(--z,0)*1px)) rotateZ(calc(var(--rz,50deg) * -1)) rotateX(-90deg)}
.bb > span{position:absolute;left:0;bottom:0;transform:translateX(-50%);white-space:nowrap}
.bb--st > span{display:inline-flex;align-items:center;gap:6px;padding:4px 11px 4px 4px;border-radius:var(--r-pille);
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;font-size:12px;font-weight:700;transition:background .45s,color .45s,border-color .45s}
.bb--st b{width:19px;height:19px;border-radius:50%;display:grid;place-content:center;background:rgba(255,255,255,.22);font-size:10.5px}
.str.ab-1 .bb--st[data-n="1"] > span,.str.ab-2 .bb--st[data-n="2"] > span,.str.ab-3 .bb--st[data-n="3"] > span,
.str.ab-4 .bb--st[data-n="4"] > span,.str.ab-5 .bb--st[data-n="5"] > span{background:#fff;border-color:#fff;color:var(--blau-d)}
.str.ab-1 .bb--st[data-n="1"] b,.str.ab-2 .bb--st[data-n="2"] b,.str.ab-3 .bb--st[data-n="3"] b,
.str.ab-4 .bb--st[data-n="4"] b,.str.ab-5 .bb--st[data-n="5"] b{background:var(--blau);color:#fff}
.str.ab-4 .bb--mensch > span{background:#FFF1D6;border-color:#FFF1D6;color:#8A5300}
.str.ab-4 .bb--mensch b{background:var(--f3)}

/* Der Vorgang: schwebendes Dokument mit Datenkarte */
.tok{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;
  transform:translate3d(calc(var(--tx,-40)*1px),100px,0);transition:transform 1.15s var(--e)}
.str[data-ist="1"] .tok{--tx:70}
.str[data-ist="2"] .tok{--tx:210}
.str[data-ist="3"] .tok{--tx:350}
.str[data-ist="4"] .tok{--tx:490}
.str[data-ist="5"] .tok{--tx:630}
.str.springt .tok{transition:none}
.tok__schatten{position:absolute;left:-28px;top:-32px;width:56px;height:64px;border-radius:14px;background:rgba(0,0,50,.4);filter:blur(9px);transform:translateZ(2px);transition:opacity .4s}
.tok__h{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;animation:schweb 2.6s ease-in-out infinite alternate}
@keyframes schweb{from{transform:translateZ(58px)}to{transform:translateZ(66px)}}
.tok__doc > .o{background:#fff;border-radius:4px;padding:8px 7px;display:block}
.tok__doc > .v{background:#D9DAF0}
.tok__doc > .r{background:#C4C6EA}
.tok__zeilen{display:block;height:100%;background:
  linear-gradient(var(--blau) 0 0) 0 0/60% 4px no-repeat,
  repeating-linear-gradient(#DADBEA 0 3px,transparent 3px 8px) 0 10px/100% calc(100% - 10px) no-repeat}
.str[data-ist="0"] .tok__doc > i,.str[data-ist="0"] .tok__schatten,.str[data-ist="0"] .bb--daten > span{opacity:0}
.tok__doc > i{transition:opacity .4s}
.bb--daten{--z:14}
.bb--daten > span{display:flex;flex-direction:column;gap:1px;padding:8px 12px;border-radius:12px;background:#fff;color:var(--ink);text-align:left;
  box-shadow:0 14px 30px -12px rgba(0,0,40,.55);opacity:0;transition:opacity .35s var(--e-weich)}
.bb--daten b{font-size:13px;letter-spacing:-.02em}
.bb--daten small{font-size:10.5px;font-weight:500;color:var(--muted)}
.str[data-ist="1"] .d1,.str[data-ist="2"] .d2,.str[data-ist="3"] .d3,.str[data-ist="4"] .d4,.str[data-ist="5"] .d5{opacity:1;transition-delay:.55s}
.d4 .warte{color:#8A5300}
.d4 .frei{display:none;color:#15724A}
.str.frei .d4 .warte{display:none}
.str.frei .d4 .frei{display:block}

/* Protokoll oben rechts */
.str__log{position:absolute;right:14px;top:14px;z-index:2;width:min(228px,40%);padding:11px 12px;border-radius:14px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff}
.str__lt{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#C9CBF7}
.str__lt svg{width:13px;height:13px}
.str__e{display:flex;gap:8px;padding:2px 0;font-size:11.5px;line-height:1.35;opacity:0;transform:translateY(4px);transition:opacity .4s var(--e-weich),transform .4s var(--e)}
.str__e time{min-width:34px;font-family:var(--font-m);font-size:10.5px;color:#B8BBF4}
.str.ab-1 .str__e[data-ab="1"],.str.ab-2 .str__e[data-ab="2"],.str.ab-3 .str__e[data-ab="3"],.str.ab-4.frei .str__e[data-ab="4"],.str.ab-5 .str__e[data-ab="5"]{opacity:1;transform:none}

/* Schrittliste rechts */
.st{display:flex;flex-direction:column;gap:12px}
.st__liste{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.st-s{position:relative;width:100%;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;text-align:left;
  padding:13px 15px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#D8D9FA;cursor:pointer;overflow:hidden;
  transition:background .3s var(--e-weich),border-color .3s var(--e-weich)}
.st-s:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.26)}
.st-s__n{width:28px;height:28px;border-radius:9px;display:grid;place-content:center;background:rgba(255,255,255,.14);color:#fff;font-size:.8125rem;font-weight:700;transition:background .3s}
.st-s__c b{display:block;color:#fff;font-size:.98rem;letter-spacing:-.02em;line-height:1.3}
.st-s__c > span{display:block;margin-top:.2rem;font-size:.84rem;line-height:1.5;color:#C9CBF7}
.st-s.ist-erledigt .st-s__n{background:rgba(110,231,168,.28)}
.st-s.is-an{background:#fff;border-color:#fff}
.st-s.is-an .st-s__n{background:var(--blau);color:#fff}
.st-s--mensch.is-an .st-s__n{background:var(--f3)}
.st-s.is-an .st-s__c b{color:var(--ink)}
.st-s.is-an .st-s__c > span{color:var(--muted)}
.st-s::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--blau);transform:scaleX(0);transform-origin:left}
.str-wrap.is-auto .st-s.is-an::after{animation:schrittZeit var(--dauer,3400ms) linear forwards}
@keyframes schrittZeit{to{transform:scaleX(1)}}
.st__mtext{display:none}
.st__nochmal{align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 1.05rem;border-radius:var(--r-pille);
  border:1px solid rgba(255,255,255,.32);background:transparent;color:#fff;font-size:.875rem;font-weight:700;cursor:pointer;transition:background .2s,border-color .2s}
.st__nochmal:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}
.st__nochmal[hidden]{display:none}
.st__nochmal svg{width:15px;height:15px}

@media (prefers-reduced-motion:reduce){
  .tok,.tok__doc > i,.iso-st > i,.iso-st > .o > *,.bb--st > span,.bb--daten > span,.str__e{transition:none !important}
  .tok__h{animation:none;transform:translateZ(62px)}
  .iso__bahn i{animation:none}
  .str-wrap .st-s::after{display:none}
}

/* =========================================================================
   29. Typische Prozesse — die sechs Buehnen
   ========================================================================= */
/* 1 · Angebot */
.ang{position:relative;padding:14px 16px;border-radius:12px;border:1px solid var(--linie);background:#FCFCFE}
.ang__kopf{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.ang__kopf img{width:26px;height:auto}
.ang__adr{display:grid;gap:4px;justify-items:end}
.ang__adr i{display:block;width:84px;height:5px;border-radius:3px;background:#E6E7F0}
.ang__adr i.k{width:56px}
.ang__betreff{min-height:1.5em;margin-bottom:10px;font-size:12.5px;font-weight:700}
.ang__betreff span:not(:empty)::after,.rech__felder dd:not(:empty)::after{content:"";display:inline-block;width:1.5px;height:1em;margin-left:1px;vertical-align:-2px;background:var(--blau);animation:blink 1s steps(1) infinite}
.rech__felder dd:not(:empty)::after{display:none}
.ang__tab{display:grid;border-top:1px solid var(--linie-2)}
.ang__z{display:grid;grid-template-columns:28px minmax(0,1fr) 44px 74px;gap:6px;align-items:center;padding:7px 2px;border-bottom:1px solid var(--linie-2);font-size:11.5px}
.ang__z > span:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ang__z > span:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
.ang__z--k{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-2)}
.js .ang__z[data-an]{display:none}
.ang__z[data-an].an{display:grid;animation:mAuf .4s var(--e) both}
.ang__summe{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding:9px 11px;border-radius:10px;background:var(--blau);color:#fff;font-size:11.5px}
.ang__summe b{font-size:16px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ang__summe .zw > i{justify-self:end}
.ang__quelle{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:10.5px;font-weight:500;color:var(--muted)}
.ang__quelle svg{width:12px;height:12px;color:var(--blau)}
.ang__stempel{position:absolute;right:16px;top:58px;padding:5px 12px;border:2.5px solid var(--ok);border-radius:8px;background:rgba(255,255,255,.85);color:var(--ok);
  font-size:14px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;opacity:0;transform:rotate(-12deg) scale(1.6);transition:opacity .2s,transform .45s var(--e-spring)}
.ang__stempel.an{opacity:1;transform:rotate(-12deg) scale(1)}
.ang__fuss{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.ang__wer{display:inline-flex;align-items:center;gap:8px;min-width:0;font-size:11.5px;font-weight:500;color:var(--muted)}
.ang__wer em{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-content:center;font-style:normal;font-size:9.5px;font-weight:700;background:#FFE7BF;color:#8A5300}
.ang__knopf{display:inline-flex;gap:6px}
.ang__knopf > *{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:9px;border:1px solid var(--linie);font-size:12px;font-weight:700}
.ang__knopf b{background:var(--blau);border-color:var(--blau);color:#fff;transition:transform .15s,background .2s,border-color .2s}
.ang__knopf b svg{width:12px;height:12px}
.ang__knopf[data-st="1"] b{transform:scale(.94);background:var(--ok);border-color:var(--ok)}

/* 2 · Posteingang */
.post__zahl{margin-left:auto;display:inline-flex;align-items:baseline;gap:2px;padding:4px 10px;border-radius:var(--r-pille);background:#F1F2F8;font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap}
.post__zahl b{font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums}
.post__zahl .zw{display:inline-grid}   /* .ui__kopf b setzt sonst display:block */
.post__liste{display:grid;gap:5px}
.pm{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px;align-items:center;padding:6px 10px 6px 14px;border-radius:12px;
  border:1px solid var(--linie);background:#fff;overflow:hidden;transition:background .35s,border-color .35s}
.pm::before{content:"";position:absolute;left:5px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--blau);transition:opacity .3s}
.pm[data-st="1"]{background:#FBFBFE;border-color:var(--linie-2)}
.pm[data-st="1"]::before{opacity:0}
.pm__av{width:28px;height:28px;border-radius:50%;display:grid;place-content:center;font-size:10px;font-weight:700;background:#E9EAF4;color:#50557A}
.pm__t{min-width:0}
.pm__t b{display:block;font-size:12.5px}
.pm__t small{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm__tag{justify-self:end;padding:3px 9px;border-radius:var(--r-pille);font-size:10.5px;font-weight:700;opacity:0;transform:translateX(12px);transition:opacity .3s,transform .45s var(--e)}
.pm[data-st="1"] .pm__tag{opacity:1;transform:none}
.pm__entwurf{grid-column:2 / -1;justify-self:end;display:inline-flex;align-items:center;gap:4px;margin-top:2px;font-size:10.5px;font-weight:700;color:var(--blau)}
.pm__entwurf svg{width:11px;height:11px}
.t0{background:#EEF0F6;color:#50557A}
.t1{background:rgba(32,32,237,.1);color:var(--blau-d)}
.t2{background:rgba(14,143,126,.13);color:#0B6A5E}
.t3{background:rgba(199,122,6,.15);color:#7E4C00}
.t4{background:rgba(122,63,242,.13);color:#5629B8}
.t5{background:rgba(30,142,79,.13);color:#146B45}
.post__fuss{display:flex;align-items:center;gap:7px;margin-top:8px;padding:8px 12px;border-radius:12px;background:#F1FAF5;border:1px solid #D4EEDF;color:#15724A;font-size:12px;font-weight:700}
.post__fuss svg{width:13px;height:13px}

/* 3 · Rechnungen */
.rech{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;align-items:start}
.rech__pdf{position:relative;height:152px;padding:32px 12px 10px;border-radius:10px;border:1px solid var(--linie);background:#fff;overflow:hidden;display:grid;align-content:start;gap:7px}
.rech__pdfk{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:5px;padding:6px 8px;font-size:10px;font-weight:700;background:#F6F6FB;border-bottom:1px solid var(--linie-2)}
.rech__pdfk svg{width:11px;height:11px;color:#D93025}
.rech__pdf > i{display:block;height:5px;border-radius:3px;background:#E6E7F0}
.rech__pdf > i.k{width:62%}
.rech__scan{position:absolute;left:0;right:0;top:30px;height:22px;opacity:0;border-bottom:1.5px solid var(--blau);
  background:linear-gradient(180deg,rgba(32,32,237,0),rgba(32,32,237,.2))}
.rech__scan.an{opacity:1;animation:scan 1.5s ease-in-out infinite alternate}
@keyframes scan{to{transform:translateY(98px)}}
.rech__felder{display:grid;gap:5px;margin:0}
.rech__felder > div{display:flex;justify-content:space-between;gap:8px;padding:6px 9px;border-radius:8px;background:#F7F7FB;font-size:11.5px}
.rech__felder dt{color:var(--muted);font-weight:500}
.rech__felder dd{margin:0;min-height:1.2em;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.rech__check{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.rc{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--r-pille);border:1px solid var(--linie);font-size:11px;font-weight:700;color:var(--muted);transition:background .3s,border-color .3s,color .3s}
.rc[data-st="ok"]{background:#E6F5EC;border-color:#CDEBDB;color:#15724A}
.rech__datev{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--linie);transition:background .3s,border-color .3s}
.rech__datev img{width:26px;height:26px}
.rech__datev b{display:block;font-size:12.5px}
.rech__datev small{display:none;font-size:11px;color:var(--muted)}
.rech__datev[data-st="l"] .s-l,.rech__datev[data-st="ok"] .s-ok{display:block}
.rech__haken{width:24px;height:24px;border-radius:50%;display:grid;place-content:center;background:#E9EAF4;color:#fff;transition:background .3s}
.rech__haken svg{width:12px;height:12px}
.rech__datev[data-st="l"] .rech__haken{background:transparent;border:2px solid var(--blau);border-right-color:transparent;animation:dreh .7s linear infinite}
.rech__datev[data-st="l"] .rech__haken svg{display:none}
.rech__datev[data-st="ok"]{background:#F1FAF5;border-color:#D4EEDF}
.rech__datev[data-st="ok"] .rech__haken{background:var(--ok)}
.rech__abw{display:flex;gap:8px;align-items:flex-start;margin-top:10px;padding:9px 11px;border-radius:12px;background:#FFF5F3;border:1px solid #F4CFC9;font-size:11.5px;line-height:1.45;color:#5A2A24}
.rech__abw svg{width:14px;height:14px;flex:none;margin-top:1px;color:var(--warn)}
.rech__abw em{font-style:normal;font-weight:700;color:#A3281C}

/* 4 · Onboarding */
.onb__person{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;margin-bottom:10px;padding:10px 12px;border-radius:14px;background:var(--blau-soft-2);border:1px solid #DCDDFB}
.onb__av{width:40px;height:40px;border-radius:50%;display:grid;place-content:center;background:var(--f3);color:#fff;font-size:12px;font-weight:700}
.onb__wer{min-width:0}
.onb__wer b{display:block;font-size:13.5px}
.onb__wer small{display:block;font-size:11px;color:var(--muted)}
.onb__ring{position:relative;width:46px;height:46px;display:grid;place-content:center}
.onb__ring svg{position:absolute;inset:0;width:46px;height:46px;transform:rotate(-90deg)}
.onb__ring circle{fill:none;stroke-width:4}
.onb__ring .g{stroke:#DCDDFB}
.onb__ring .w{stroke:var(--blau);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .6s var(--e),stroke .3s}
.onb__ring[data-st="1"] .w{stroke-dashoffset:83}
.onb__ring[data-st="2"] .w{stroke-dashoffset:67}
.onb__ring[data-st="3"] .w{stroke-dashoffset:50}
.onb__ring[data-st="4"] .w{stroke-dashoffset:33}
.onb__ring[data-st="5"] .w{stroke-dashoffset:17}
.onb__ring[data-st="6"] .w{stroke-dashoffset:0;stroke:var(--ok)}
.onb__ring b{position:relative;font-size:9.5px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.onb__liste{display:grid;gap:5px}
.ob{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:11px;border:1px solid var(--linie);font-size:12px;color:var(--muted);transition:background .3s,border-color .3s,color .3s}
.ob span{flex:1;min-width:0}
.ob img{width:16px;height:16px}
.ob small{font-size:10.5px;font-weight:700;color:var(--muted-2);white-space:nowrap}
.ob[data-st="l"]{border-color:#C9CAFB;background:var(--blau-soft-2);color:var(--ink)}
.ob[data-st="ok"]{color:var(--ink)}

/* 5 · Reporting */
.rep__kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.rep__kpi > div{min-width:0;padding:9px 10px;border-radius:11px;border:1px solid var(--linie);background:#fff}
.rep__kpi small{display:block;font-size:10.5px;font-weight:500;color:var(--muted)}
.rep__kpi b{display:block;font-size:15px;letter-spacing:-.025em;font-variant-numeric:tabular-nums;white-space:nowrap}
.rep__kpi em{display:block;font-style:normal;font-size:10px;font-weight:700;white-space:nowrap}
.rep__kpi .auf{color:#15724A}
.rep__kpi .ab{color:#A3281C}
.rep__chart{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px;align-items:end;height:108px;margin-top:12px;padding:0 4px 18px;border-bottom:1px solid var(--linie)}
.rep__b{position:relative;display:block;height:calc(var(--h)*86px);border-radius:5px 5px 2px 2px;background:#D6D7F7;transform-origin:50% 100%;transform:scaleY(0);transition:transform .6s var(--e)}
.rep__b.an,html:not(.js) .rep__b{transform:none}
.rep__b--jetzt{background:var(--blau)}
.rep__b small{position:absolute;left:50%;bottom:-17px;transform:translateX(-50%);font-size:9.5px;font-weight:500;color:var(--muted-2)}
.rep__plan{position:absolute;left:0;right:0;bottom:calc(18px + .64*86px);border-top:1.5px dashed #E48C74}
.rep__plan span{position:absolute;left:0;top:-15px;padding:0 4px;border-radius:4px;background:#fff;font-style:normal;font-size:9.5px;font-weight:700;color:#A3281C}
.rep__txt{margin-top:12px;padding:10px 12px;border-radius:12px;background:#F7F7FB}
.rep__k{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--blau)}
.rep__k svg{width:12px;height:12px}
.rep__txt p[data-strom]{min-height:4.65em;font-size:12px;line-height:1.55}
.rep__fuss{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:11.5px;font-weight:700;color:#15724A}
.rep__fuss svg{width:13px;height:13px}

/* 6 · Kundenanfragen */
.kq__zeit{margin-left:auto;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-pille);background:var(--ink);color:#fff;font-size:11px;font-weight:700;white-space:nowrap}
.kq__zeit svg{width:12px;height:12px}
.kq-chat{position:relative;height:292px;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 12%);mask-image:linear-gradient(transparent,#000 12%)}
.kq-chat__fluss{display:flex;flex-direction:column;gap:10px;padding:2px 2px 8px;transition:transform .5s var(--e)}
.kq-chat .m__wer img{width:15px;height:auto}
.kq__fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--linie-2);font-size:11.5px;font-weight:500;color:var(--muted)}
.kq__fuss > span{display:inline-flex;align-items:center;gap:6px}
.kq__fuss svg{width:12px;height:12px;color:var(--blau)}
.kq__lead{padding:3px 9px;border-radius:var(--r-pille);background:#E6F5EC;color:#15724A;font-weight:700}

/* =========================================================================
   30. Warum DuBot — Netz: zehn Einzeltools oder ein System
   ========================================================================= */
.netz{position:relative;padding:clamp(1rem,.6rem + 1.4vw,1.7rem);border-radius:var(--r-lg);background:#fff;border:1px solid var(--linie);box-shadow:var(--sh-buehne)}
.netz__kopf{display:flex;justify-content:center;margin-bottom:clamp(1.2rem,.8rem + 1.4vw,2rem)}
.netz__schalter{display:inline-flex;gap:4px;padding:5px;border-radius:var(--r-pille);background:#F1F2F8;border:1px solid var(--linie)}
.netz__schalter button{min-height:40px;padding:0 1.1rem;border:0;border-radius:var(--r-pille);background:transparent;font-size:.875rem;font-weight:700;color:var(--muted);cursor:pointer;
  transition:background .25s var(--e-weich),color .25s var(--e-weich),box-shadow .25s var(--e-weich)}
.netz__schalter button:hover{color:var(--ink)}
.netz__schalter button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 6px 16px -8px rgba(15,17,54,.3)}
.netz[data-modus="eins"] .netz__schalter button[aria-pressed="true"]{background:var(--blau);color:#fff;box-shadow:var(--sh-blau)}
.netz__bild{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);gap:clamp(1.4rem,1rem + 3vw,4rem);align-items:center;min-height:380px;padding:6px 0}
.netz__linien{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.nz-spalte{position:relative;z-index:1;display:grid;gap:10px}
.nz-k,.nz-p{display:flex;align-items:center;gap:10px;padding:9px 14px 9px 9px;border-radius:14px;background:#fff;border:1px solid var(--linie);
  font-size:.9rem;font-weight:700;letter-spacing:-.015em;box-shadow:var(--sh-1);white-space:nowrap}
.nz-k i{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-content:center}
.nz-k i svg{width:15px;height:15px}
.nz-p img{width:22px;height:22px;flex:none}
.nz-mitte{position:relative;z-index:1;display:grid;place-items:center;min-height:300px}
.nz-inseln,.nz-kern{grid-area:1/1}
.nz-inseln{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:16px 20px;max-width:420px;transition:opacity .5s var(--e-weich),transform .6s var(--e)}
.nz-i{display:inline-flex;flex-direction:column;align-items:flex-start;padding:9px 13px;border-radius:12px;background:#fff;border:1px dashed #BFC2D4;
  font-size:.84rem;font-weight:700;color:#474C73;transform:rotate(var(--d));box-shadow:0 10px 22px -16px rgba(15,17,54,.4)}
.nz-i em{font-style:normal;font-size:.6875rem;font-weight:700;color:var(--warn)}
.nz-i--weg{border-color:#EDB9B2;background:#FFF7F6}
.nz-kern{width:min(100%,340px);padding:16px;border-radius:20px;background:#fff;border:1px solid #D9DAFB;
  box-shadow:0 0 0 8px rgba(32,32,237,.06),0 30px 60px -28px rgba(16,16,120,.35);transition:opacity .5s var(--e-weich),transform .7s var(--e-spring)}
.nz-kern__kopf{display:flex;align-items:center;gap:12px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--linie-2)}
.nz-kern__kopf img{width:38px;height:auto}
.nz-kern__kopf b{display:block;font-size:1.05rem;letter-spacing:-.025em}
.nz-kern__kopf small{display:block;font-size:.78rem;color:var(--muted)}
.nz-kern__regeln{display:flex;flex-wrap:wrap;gap:6px}
.nz-kern__regeln span{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--r-pille);background:var(--blau-soft-2);border:1px solid #D9DAFB;font-size:.75rem;font-weight:700;color:var(--blau-d)}
.nz-kern__regeln svg{width:13px;height:13px}
.netz[data-modus="chaos"] .nz-kern{opacity:0;transform:scale(.82);pointer-events:none}
.netz[data-modus="eins"] .nz-inseln{opacity:0;transform:scale(.9);pointer-events:none}
.netz.messen .nz-kern,.netz.messen .nz-inseln{transform:none !important;transition:none !important}
.nl{transition:opacity .5s var(--e-weich)}
.netz[data-modus="chaos"] .nl--eins,.netz[data-modus="eins"] .nl--chaos{opacity:0}
.nl path{fill:none}
.nl .grund{stroke-width:1.6}
.nl--chaos .grund{stroke:#C0C3D4;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--e-weich)}
.netz.gezeichnet .nl--chaos .grund{stroke-dashoffset:0}
.nl--chaos .grund.kopie{stroke:#E9A79E;stroke-dasharray:.02 .016;stroke-dashoffset:0;opacity:0;transition:opacity .6s var(--e-weich) .8s}
.netz.gezeichnet .nl--chaos .grund.kopie{opacity:1}
.nl--eins .grund{stroke:#C9CAFB;stroke-width:2}
.nl .puls{stroke-width:2.4;stroke-linecap:round;stroke-dasharray:16 var(--lang,600);stroke-dashoffset:calc(var(--lang,600) * 1px + 16px);
  animation:puls 2.8s linear infinite;animation-play-state:paused}
.nl--chaos .puls{stroke:#D93025;animation-duration:2.2s}
.nl--eins .puls{stroke:var(--blau)}
.netz.laeuft .puls{animation-play-state:running}
.netz__txt{display:grid;margin-top:clamp(1rem,.8rem + 1vw,1.6rem);text-align:center}
.nt{grid-area:1/1;max-width:44rem;margin-inline:auto;font-size:.95rem;line-height:1.6;color:var(--muted);transition:opacity .4s var(--e-weich)}
.nt b{color:var(--ink)}
.netz[data-modus="chaos"] .nt--eins,.netz[data-modus="eins"] .nt--chaos{opacity:0;visibility:hidden}
.warum__bento{margin-top:clamp(1.4rem,1rem + 1.4vw,2.2rem)}
.warum__ehrlich{max-width:46rem;margin:clamp(1.4rem,1rem + 1.2vw,2rem) auto 0;padding:1rem 1.3rem;border-radius:var(--r);background:var(--blau-soft-2);border:1px solid #DCDDFB;
  font-size:.95rem;line-height:1.6;color:var(--ink-2);text-align:center}
.warum__ehrlich b{color:var(--blau-d)}
@media (prefers-reduced-motion:reduce){
  .nl .puls{display:none}
  .nl--chaos .grund,.nl--chaos .grund.kopie,.nz-kern,.nz-inseln,.nl,.nt{transition:none}
}

/* =========================================================================
   31. Ablauf — Mini-Oberflaechen in den Schrittkarten
   ========================================================================= */
.rs__r{position:relative}
.rs__txt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs__r:has(.rs__bal){padding-bottom:13px}
.rs__r--top{border-color:#C9CAFB;box-shadow:0 8px 18px -12px rgba(32,32,237,.45)}
.rs__zuerst{padding:2px 7px;border-radius:var(--r-pille);background:var(--blau);color:#fff;font-size:.625rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.rs__bal{position:absolute;left:11px;right:11px;bottom:5px;height:3px;border-radius:2px;background:#ECEDF6}
.rs__bal::after{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--w)*100%);border-radius:2px;background:var(--blau)}
.rs__pilot,.rs__gov{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.rs__pilot span,.rs__gov span{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:var(--r-pille);background:#fff;border:1px solid #E4E6EF;font-size:.6875rem;font-weight:700}
.rs__pilot i{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.rs__pilot svg{width:12px;height:12px;color:#8A5300}
.rs__gov svg{width:12px;height:12px;color:var(--blau)}

/* Stoerer: „AI-Ready-Check" ist laenger als „Erstgespraech" */
.stoerer span{font-size:.44rem;letter-spacing:.01em}

/* =========================================================================
   32. Umbrueche (Set wie LP 1: 1080/980/900/860/760/720/560/480/400)
   ========================================================================= */
@media (max-width:1080px){
  .kopf__mail{display:none}
  .modelle__g{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bento--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .anf__grid{grid-template-columns:minmax(0,1fr) 380px}
  .ws{grid-template-columns:200px minmax(0,1fr)}
  .str-wrap{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
  .lt__kpi .kp:nth-child(3){display:none}
  .lt__kpi{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:980px){
  .kopf__tag{display:none}
  .fr{grid-template-columns:minmax(0,1fr);gap:1.6rem}
  .fr:nth-child(even) > .fr__buehne{order:0}
  .fr__buehne{max-width:560px;width:100%;margin-inline:auto}
  .fr__text{max-width:560px;margin-inline:auto}
  .anf__grid{grid-template-columns:minmax(0,1fr)}
  .anf .karte-form{max-width:470px;margin-inline:auto;width:100%}
  .roll{grid-template-columns:minmax(0,1fr);max-width:560px;margin-inline:auto}
  .ws{grid-template-columns:minmax(0,1fr)}
  .ws__seite{display:none}
  .fuss__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .fuss__marke{grid-column:1 / -1}
  .pk-reihe{grid-template-columns:minmax(0,1fr);max-width:560px;margin-inline:auto}
  /* 3D: Liste wird zur wischbaren Chip-Leiste, der Text wandert unter die Buehne */
  .str-wrap{grid-template-columns:minmax(0,1fr)}
  .str{min-height:clamp(400px,74vw,520px)}
  .st__liste{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .st__liste::-webkit-scrollbar{display:none}
  .st__liste li{flex:none;scroll-snap-align:start}
  .st-s{align-items:center;min-height:44px;padding:8px 14px 8px 8px;gap:9px}
  .st-s__c > span{display:none}
  .st-s__c b{font-size:.9rem;white-space:nowrap}
  .st__mtext{display:block;min-height:3.2em;font-size:.95rem;line-height:1.55;color:#D8D9FA}
}
@media (max-width:900px){
  .kopf__nav,.kopf .btn{display:none}
  .kopf__mob{display:flex}
  .kopf__in{padding:.42rem .42rem .42rem 1rem}
}
/* Unter 861 px und bei Reduced Motion ist die Kippung aus — wie bei LP 1. */
@media (max-width:860px){
  .js .schirm__kipp{transform:none !important}
  .schirm__buehne{perspective:none}
}
@media (prefers-reduced-motion:reduce){
  .js .schirm__kipp{transform:none !important}
  .schirm__buehne{perspective:none}
}
/* Netz hochkant: Team oben, System in der Mitte, Programme unten */
@media (max-width:760px){
  .netz__bild{grid-template-columns:minmax(0,1fr);gap:2.4rem;min-height:0}
  .nz-team,.nz-prog{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nz-mitte{min-height:230px}
  .nz-k,.nz-p{font-size:.8125rem;padding:8px 10px 8px 8px;gap:8px}
  .nz-k i{width:26px;height:26px}
  .nz-p img{width:18px;height:18px}
  .nz-inseln{gap:10px 12px}
  .str__log{width:min(210px,52%)}
}
@media (max-width:720px){
  .modelle__g{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .modelle__g li{padding:12px 11px;gap:10px}
  .modelle__g img,.modelle__plus{width:28px;height:28px}
  .kopf__ico{width:44px;height:44px}
  .kopf__logo{min-height:44px}
  .fab__a{min-height:44px}
  .opt{min-height:48px}
  .schirm__pause{min-height:44px}
  .buehne-pause{width:44px;height:44px;top:8px;right:8px}
  .netz__schalter button{min-height:44px;padding:0 .9rem;font-size:.8125rem}
  .fuss__sp a,.fuss__recht a,.fuss__n a,.fuss__mail{display:inline-flex;align-items:center;min-height:44px}
  .ovl__x{width:44px;height:44px}
  .promo__weg{min-height:44px;padding:0 1rem}
  .fuss__sp ul{gap:0}
  .bento,.bento--4{grid-template-columns:minmax(0,1fr)}
  .bk--weit{grid-column:span 1}
  .opts--2,.felder--2{grid-template-columns:minmax(0,1fr)}
  .fuss__grid{grid-template-columns:minmax(0,1fr);gap:2rem}
  .f__a p{padding-left:1.25rem}
  .insel,.s-blau{border-radius:18px}
  .ws{height:560px;font-size:12px}
  .ws__wissen{display:none}
  .schwebe-pille{display:none}
  .lt{padding:12px 12px 0}
  .lt__kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lt__kpi .kp:nth-child(3){display:none}
  .lt__kpi .kp:nth-child(4){grid-column:1 / -1}
  .fd{grid-template-columns:auto minmax(0,1fr) auto;padding:8px 9px;gap:8px}
  .fd time{display:none}
  .fg{right:10px;left:10px;width:auto}
  .lt__fuss{padding:9px 12px}
  .lt__prot{display:none}
  /* Mobil ist die Karte hoeher als breit — die Buehne waechst mit, statt abzuschneiden. */
  .fr__buehne{aspect-ratio:auto;padding:60px 14px 22px}
  .band__k{font-size:.8125rem}
  .str__log{display:none}
}
@media (max-width:560px){
  .ui{padding:12px;font-size:12px}
  .final__logos span{width:36px;height:36px}
  .final__logos span:nth-child(1),.final__logos span:nth-child(7){display:none}
  .ang{padding:12px}
  .ang__z{grid-template-columns:22px minmax(0,1fr) 38px 66px;font-size:11px}
  .ang__adr{display:none}
  .rech{grid-template-columns:92px minmax(0,1fr);gap:9px}
  .rech__felder > div{padding:5px 7px;font-size:11px}
  .rep__kpi b{font-size:13.5px}
  .kq-chat{height:318px}
  .pm__t small{max-width:100%}
  .ang__wer{font-size:0;gap:0}
  .ang__wer em{font-size:9.5px}
}
@media (max-width:480px){
  .t-h2{font-size:1.6rem}
  .t-h3x{font-size:1.32rem}
  .kicker{font-size:.6875rem;letter-spacing:.03em;padding-right:.8rem}
  .kicker i{width:20px;height:20px}
  .stoerer{width:74px;height:74px;top:-14px;right:-8px}
  .stoerer b{font-size:1.06rem}
  .stoerer span{font-size:.375rem;letter-spacing:.01em}
  .hero .btn-reihe .btn{width:100%;white-space:normal}
  .roll__cta .btn{width:100%}
  .kopf__tag{display:none}
  .rep__kpi em{white-space:normal}
}
@media (max-width:400px){
  .t-h2{font-size:1.46rem}
  .t-h3x{font-size:1.24rem}
  .hero__team{font-size:1.2rem}
}

/* =========================================================================
   33. Studien — vier Zahlen auf blauer Insel (spaet angehaengt, daher nach den Umbruechen)
   ========================================================================= */
.zs-reihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.zs{display:flex;flex-direction:column;padding:1.5rem 1.35rem 1.4rem;border-radius:var(--r);
  background:linear-gradient(172deg,rgba(255,255,255,.13),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.18)}
.zs__k{align-self:flex-start;padding:3px 9px;border-radius:var(--r-pille);background:rgba(255,255,255,.14);color:#E4E5FD;font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.zs__z{display:block;margin-top:1rem;color:#fff;font-size:clamp(2.6rem,1.8rem + 2.2vw,3.5rem);font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.zs__z small{font-size:.34em;font-weight:500;letter-spacing:-.01em;color:#D3D5FF;vertical-align:.95em}
.zs__t{margin-top:.8rem;font-size:.95rem;line-height:1.5;font-weight:500;color:#fff}
.zs__q{margin-top:auto;padding-top:1rem;font-size:.75rem;line-height:1.5;color:#CDCFF8}
.zs__fazit{margin-top:clamp(1.6rem,1.2rem + 1.2vw,2.4rem);text-align:center;color:#fff;font-size:clamp(1.06rem,.98rem + .4vw,1.3rem);font-weight:700;letter-spacing:-.02em;line-height:1.4}
@media (max-width:1080px){.zs-reihe{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.zs-reihe{grid-template-columns:minmax(0,1fr)}}

/* Schwebe-Pille: ueber der Seitenleiste statt ueber den Status-Chips des Leitstands */
.schwebe-pille{right:auto;left:-22px;bottom:96px}

/* 3D mobil: Kamera faehrt dem Vorgang nach, Schilder etwas groesser */
.str.folgt .iso__szene{transition:transform .9s var(--e)}
@media (max-width:560px){
  .str{min-height:440px}
  .bb--st > span{font-size:14px;padding:5px 12px 5px 5px}
  .bb--st b{width:21px;height:21px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){.str.folgt .iso__szene{transition:none}}