@charset "utf-8";
/* =========================================================================
   DuBot AI — KI-Leadmanagement fuer Immobilienmakler (Google-Ads-Landingpage 3 von 3)
   Stand 02.10.2026. Dasselbe System wie die Schwesterseiten (Papiergrund,
   Pillen-Kopfzeile, Grotesk + Serifen-Kursive, blaue Inseln, Szenen-Engine),
   eigene Bausteine ab Abschnitt 27: Funnel-Cockpit, Portal-Wortchips,
   3D-Funnel mit fallenden Verlusten, System-Buehne, Buero-Gedaechtnis.
   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:#6B7092;   /* 4,8:1 auf Weiss, 4,5:1 auf #F5F6FB */
  --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(6,6,104,.36);border-color:rgba(255,255,255,.3);color:#fff}   /* dunkle Pille: Kicker >= 4,5:1 auch in der aufgehellten Kopfzone */
.s-blau .kicker i{background:#fff;color:var(--blau)}
.s-blau .serif{color:#E0E1FF}   /* 4,8:1 auch in der aufgehellten Kopfzone */
.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:120px;top:-22px;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__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__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. Pause-Knoepfe und gemeinsame Karte in den Buehnen
   ========================================================================= */
.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,.lauf.aus .band__z,.lauf.angehalten .band__z{animation-play-state:paused}
.band__pause{display:flex;align-items:center;gap:.45rem;min-height:40px;margin:.2rem auto 0;padding:0 .95rem 0 .75rem;border-radius:var(--r-pille);
  border:1px solid var(--linie);background:#fff;color:var(--ink);font-size:.8125rem;font-weight:600;cursor:pointer;transition:border-color .2s var(--e-weich)}
.band__pause:hover{border-color:var(--muted-2)}
.band__pause svg{width:13px;height:13px}
.band__pause .p-aus,.band__pause[aria-pressed="true"] .p-an{display:none}
.band__pause[aria-pressed="true"] .p-aus{display:block}

/* 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{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{display:flex;gap:16px;width:max-content;margin-bottom:16px;animation:laufL 46s linear infinite}
.band__z--r{animation-name:laufR;animation-duration:52s}
.band:hover .band__z,.band:focus-within .band__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}
@media (prefers-reduced-motion:reduce){
  .band__z{animation:none}
  .band{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__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:.01em;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:1.25rem 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:46rem;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);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 > .fab__l{pointer-events:none}   /* zugeklappt: keine unsichtbare Trefferflaeche */
.fab.is-auf > .fab__l{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;max-width:none;flex:none}
.rechts-kopf a:first-child{flex:none}
.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. Gemeinsame Bausteine: Abteilungsfarben, Zahlwechsel, Status, Cockpit
   ========================================================================= */
/* 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}

/* Kein Umbruch innerhalb (z. B. „im AI-Ready-Check.") */
.nw{white-space:nowrap}

/* Angehaltene oder unsichtbare Szene: auch die CSS-Schleifen darin stehen (WCAG 2.2.2) */
.steht *,.steht *::before,.steht *::after{animation-play-state:paused !important}

/* 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)}}
/* 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}


/* 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,.2);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. Funnel-Cockpit im Produktschirm
   ========================================================================= */
.ck{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:12px;flex:1;min-height:0;margin-top:12px}
.ck .lt__h{margin:0 2px 8px}
.fu{min-width:0;display:flex;flex-direction:column;gap:7px;padding:11px 12px 12px;border-radius:12px;border:1px solid var(--linie);background:#fff}
.fu .lt__h{margin-bottom:2px}
.fu__z{display:grid;grid-template-columns:78px minmax(0,1fr) 34px;align-items:center;gap:8px;font-size:11.5px}
.fu__n{font-weight:600;color:var(--muted);white-space:nowrap}
.fu__b{position:relative;display:block;height:14px;border-radius:5px;background:#ECEDF7;overflow:hidden}
.fu__b::after{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--w)*100%);border-radius:5px;
  background:linear-gradient(90deg,var(--blau-h),var(--blau))}
.fu__z--ziel .fu__b::after{background:linear-gradient(90deg,#3BB27A,var(--ok))}
.fu__z b{display:inline-grid;justify-items:end;font-size:12px;font-variant-numeric:tabular-nums}
.fu__q{margin-top:auto;padding-top:10px;border-top:1px dashed var(--linie)}
.fu__qk{margin-bottom:6px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.fu__qb{display:flex;gap:2px;height:10px;border-radius:5px;overflow:hidden}
.fu__qb i{flex:var(--a) 1 0;display:block}
.fu__ql{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:7px;font-size:11px;font-weight:600;color:var(--muted)}
.fu__ql li{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.fu__ql i{width:8px;height:8px;border-radius:2px}
.fu__ql b{color:var(--ink)}
.q1{background:var(--blau)}
.q2{background:var(--blau-h)}
.q3{background:var(--f2)}
.q4{background:var(--f3)}
.fu__leck{margin-top:8px;display:flex;align-items:center;gap:6px;padding:6px 9px;border-radius:9px;background:#FFF5F3;border:1px solid #F4CFC9;
  font-size:11px;font-weight:700;color:#9A2E22}
.fu__leck svg{width:12px;height:12px;flex:none}
.ck__feed{min-width:0;min-height:0;display:flex;flex-direction:column}
.lt__wort{padding:2px 7px;border-radius:6px;background:#F1F2F8;border:1px solid var(--linie);font-style:normal;font-size:10.5px;font-weight:700;color:#474C73}

/* =========================================================================
   28. Portale und Maklersoftware: Wortchips statt nachgemachter Logos
   ========================================================================= */
.modelle__ico{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-content:center;color:var(--blau);
  background:linear-gradient(145deg,var(--blau-soft),#fff);border:1px solid #DCDDFB}
.modelle__ico svg{width:17px;height:17px}

/* =========================================================================
   29. 3D — Der Funnel: sechs schwebende Ringe, Verluste fallen zu Boden
   ========================================================================= */
.tr-wrap{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:clamp(1rem,.6rem + 1.6vw,2rem);align-items:stretch}
.tr{position:relative;isolation:isolate;min-height:clamp(520px,46vw,620px);border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.16);
  background-color:rgba(6,6,110,.32);
  background-image:radial-gradient(55% 50% at 50% 46%,rgba(150,150,255,.26),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{--s:1;--tx:0px;--ty:0px;position:absolute;left:50%;top:50%;transform-style:preserve-3d;
  transform:translate(var(--tx),var(--ty)) scale(var(--s)) rotateX(var(--rx)) rotateZ(var(--rz))}
.tr__szene{--rx:62deg;--rz:45deg;width:300px;height:300px;margin:-150px 0 0 -150px}
.tr__szene i,.tr__szene span{position:absolute;display:block}
.tr__boden{position:absolute;left:-60px;top:-60px;width:420px;height:420px;border-radius:26px;transform:translateZ(-44px);
  border:1px solid rgba(255,255,255,.2);background-color:rgba(255,255,255,.05);
  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}
.tr__achse{position:absolute;left:149px;top:150px;width:2px;height:300px;transform-origin:50% 0;transform:translateZ(262px) rotateX(-90deg);
  background:repeating-linear-gradient(rgba(255,255,255,.42) 0 6px,transparent 6px 13px)}

/* Ring = Deckflaeche mit Loch, zwei Aussenwaende, zwei Innenwaende. Nie opacity auf den Koerper. */
.tp{--t:13;--h:10;position:absolute;left:calc(var(--x)*1px);top:calc(var(--y)*1px);width:calc(var(--w)*1px);height:calc(var(--w)*1px);
  transform-style:preserve-3d;transform:translateZ(calc(var(--z)*1px))}
.tp > i{position:absolute;display:block;transition:background .5s var(--e-weich),border-color .5s var(--e-weich),box-shadow .5s var(--e-weich)}
.tp > .o{inset:0;transform:translateZ(calc(var(--h)*1px));border:calc(var(--t)*1px) solid rgba(236,236,255,.26);border-radius:9px}
.tp > .v{left:0;right:0;top:calc((var(--w) - var(--h))*1px);height:calc(var(--h)*1px);transform-origin:50% 100%;transform:rotateX(-90deg);background:rgba(200,202,255,.3)}
.tp > .r{left:0;top:calc(var(--h)*-1px);width:calc(var(--w)*1px);height:calc(var(--h)*1px);transform-origin:100% 100%;transform:rotateZ(-90deg) rotateX(-90deg);background:rgba(150,154,250,.32)}
.tp > .iv{left:calc(var(--t)*1px);width:calc((var(--w) - 2*var(--t))*1px);top:calc((var(--t) - var(--h))*1px);height:calc(var(--h)*1px);
  transform-origin:50% 100%;transform:rotateX(-90deg);background:rgba(120,124,240,.26)}
.tp > .ir{left:calc((3*var(--t) - var(--w))*1px);width:calc((var(--w) - 2*var(--t))*1px);top:calc((var(--t) - var(--h))*1px);height:calc(var(--h)*1px);
  transform-origin:100% 100%;transform:rotateZ(-90deg) rotateX(-90deg);background:rgba(110,114,236,.3)}
.tr.ab-1 .tp--1 > .o,.tr.ab-2 .tp--2 > .o,.tr.ab-3 .tp--3 > .o,.tr.ab-4 .tp--4 > .o,.tr.ab-5 .tp--5 > .o,.tr.ab-6 .tp--6 > .o{border-color:#F4F4FF}
.tr.ab-1 .tp--1 > .v,.tr.ab-2 .tp--2 > .v,.tr.ab-3 .tp--3 > .v,.tr.ab-4 .tp--4 > .v,.tr.ab-5 .tp--5 > .v,.tr.ab-6 .tp--6 > .v{background:#C3C5F8}
.tr.ab-1 .tp--1 > .r,.tr.ab-2 .tp--2 > .r,.tr.ab-3 .tp--3 > .r,.tr.ab-4 .tp--4 > .r,.tr.ab-5 .tp--5 > .r,.tr.ab-6 .tp--6 > .r{background:#9C9FF2}
.tr.ab-1 .tp--1 > .iv,.tr.ab-2 .tp--2 > .iv,.tr.ab-3 .tp--3 > .iv,.tr.ab-4 .tp--4 > .iv,.tr.ab-5 .tp--5 > .iv,.tr.ab-6 .tp--6 > .iv{background:#8487E9}
.tr.ab-1 .tp--1 > .ir,.tr.ab-2 .tp--2 > .ir,.tr.ab-3 .tp--3 > .ir,.tr.ab-4 .tp--4 > .ir,.tr.ab-5 .tp--5 > .ir,.tr.ab-6 .tp--6 > .ir{background:#7276E2}
.tr[data-ist="1"] .tp--1 > .o,.tr[data-ist="2"] .tp--2 > .o,.tr[data-ist="3"] .tp--3 > .o,.tr[data-ist="4"] .tp--4 > .o,.tr[data-ist="5"] .tp--5 > .o,.tr[data-ist="6"] .tp--6 > .o{
  border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 46px 10px rgba(170,172,255,.75),inset 0 0 26px 2px rgba(170,172,255,.55)}
/* Ergebnis: die Stufe mit dem groessten Verlust leuchtet bernstein */
.tr.fertig .tp--2 > .o{border-color:#FFD48A;box-shadow:0 0 0 2px #FFD48A,0 0 50px 12px rgba(255,196,110,.6),inset 0 0 24px 2px rgba(255,196,110,.5)}
.tr.fertig .tp--2 > .v{background:#F5C77A}
.tr.fertig .tp--2 > .r{background:#E6AE55}

/* Verluste: rote Wuerfel. Sie rutschen ueber die Kante und fallen auf den Boden. */
.tv-w{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;
  transform:translate3d(calc(var(--x0)*1px),calc(var(--y0)*1px),calc(var(--z0)*1px))}
.tv-c{position:absolute;left:-6px;top:-6px;width:12px;height:12px;transform-style:preserve-3d}
.tv-c > i{position:absolute;display:block;opacity:0;transition:opacity .25s var(--e-weich)}
.tv-c > .o{inset:0;transform:translateZ(12px);background:#FF7A6E;border-radius:2px}
.tv-c > .v{left:0;right:0;top:0;height:12px;transform-origin:50% 100%;transform:rotateX(-90deg);background:#E2483B}
.tv-c > .r{left:0;top:-12px;width:12px;height:12px;transform-origin:100% 100%;transform:rotateZ(-90deg) rotateX(-90deg);background:#B83428}
.tr.ab-2 .tv[data-n="2"] .tv-c > i,.tr.ab-3 .tv[data-n="3"] .tv-c > i,.tr.ab-4 .tv[data-n="4"] .tv-c > i,
.tr.ab-5 .tv[data-n="5"] .tv-c > i,.tr.ab-6 .tv[data-n="6"] .tv-c > i{opacity:1}
.tr.ab-2 .tv[data-n="2"] .tv-w,.tr.ab-3 .tv[data-n="3"] .tv-w,.tr.ab-4 .tv[data-n="4"] .tv-w,
.tr.ab-5 .tv[data-n="5"] .tv-w,.tr.ab-6 .tv[data-n="6"] .tv-w{
  transform:translate3d(calc((var(--x0) + var(--dx))*1px),calc((var(--y0) + var(--dy))*1px),-44px)}
.tr[data-ist="2"] .tv[data-n="2"] .tv-w,.tr[data-ist="3"] .tv[data-n="3"] .tv-w,.tr[data-ist="4"] .tv[data-n="4"] .tv-w,
.tr[data-ist="5"] .tv[data-n="5"] .tv-w,.tr[data-ist="6"] .tv[data-n="6"] .tv-w{
  animation:tvFall 1.2s cubic-bezier(.55,0,.85,.45) calc(var(--i)*150ms + 300ms) both}
@keyframes tvFall{
  0%{transform:translate3d(calc(var(--x0)*1px),calc(var(--y0)*1px),calc(var(--z0)*1px))}
  26%{transform:translate3d(calc((var(--x0) + var(--dx)*.24)*1px),calc((var(--y0) + var(--dy)*.24)*1px),calc((var(--z0) + 9)*1px))}
  100%{transform:translate3d(calc((var(--x0) + var(--dx))*1px),calc((var(--y0) + var(--dy))*1px),-44px)}
}
.tr.springt .tv-w{animation:none !important}
.tr.angehalten *{animation-play-state:paused !important}
.tr .tr__pause{top:auto;bottom:14px;right:14px;z-index:3}

/* Der Lead-Zaehler schwebt durch die Mitte der Ringe (Schild dreht sich zur Kamera) */
.tk{position:absolute;left:150px;top:150px;width:0;height:0;transform-style:preserve-3d;
  transform:translateZ(calc(var(--kz,300)*1px)) rotateZ(calc(var(--rz,45deg) * -1)) rotateX(-90deg);transition:transform 1.15s var(--e)}
.tr[data-ist="1"] .tk{--kz:262}
.tr[data-ist="2"] .tk{--kz:212}
.tr[data-ist="3"] .tk{--kz:162}
.tr[data-ist="4"] .tk{--kz:112}
.tr[data-ist="5"] .tk{--kz:62}
.tr[data-ist="6"] .tk{--kz:12}
.tr.springt .tk{transition:none}
.tk > span{left:0;bottom:0;width:54px;height:54px;margin-left:-27px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:var(--blau-d);font-size:17px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 6px rgba(255,255,255,.18),0 14px 30px -10px rgba(0,0,40,.6);transition:opacity .35s var(--e-weich),transform .45s var(--e)}
.tk i{position:static !important;grid-area:1/1;font-style:normal;opacity:0;transition:opacity .3s var(--e-weich) .35s}
.tr[data-ist="0"] .tk > span{opacity:0;transform:translateY(10px) scale(.8)}
.tr[data-ist="1"] .k1,.tr[data-ist="2"] .k2,.tr[data-ist="3"] .k3,.tr[data-ist="4"] .k4,.tr[data-ist="5"] .k5,.tr[data-ist="6"] .k6{opacity:1}

/* 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,45deg) * -1)) rotateX(-90deg)}
.bb--tp > span{left:8px;bottom:0;transform:translateY(50%);display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:4px 6px 4px 4px;border-radius:var(--r-pille);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);
  color:#E3E4FF;font-size:12.5px;font-weight:700;letter-spacing:-.01em;transition:background .45s,color .45s,border-color .45s}
.bb--tp b{width:20px;height:20px;border-radius:50%;display:grid;place-content:center;background:rgba(255,255,255,.2);font-size:10.5px;transition:background .45s}
.bb--tp em{font-style:normal;padding:1px 8px;border-radius:var(--r-pille);font-size:12px;font-variant-numeric:tabular-nums}
.bb--tp .n{background:rgba(255,255,255,.14)}
.bb--tp .m{display:none;background:#FFE2DD;color:#A3281C}
.tr.ab-1 .bb--tp[data-n="1"] > span,.tr.ab-2 .bb--tp[data-n="2"] > span,.tr.ab-3 .bb--tp[data-n="3"] > span,
.tr.ab-4 .bb--tp[data-n="4"] > span,.tr.ab-5 .bb--tp[data-n="5"] > span,.tr.ab-6 .bb--tp[data-n="6"] > span{background:#fff;border-color:#fff;color:var(--ink)}
.tr.ab-1 .bb--tp[data-n="1"] b,.tr.ab-2 .bb--tp[data-n="2"] b,.tr.ab-3 .bb--tp[data-n="3"] b,
.tr.ab-4 .bb--tp[data-n="4"] b,.tr.ab-5 .bb--tp[data-n="5"] b,.tr.ab-6 .bb--tp[data-n="6"] b{background:var(--blau);color:#fff}
.tr.ab-1 .bb--tp[data-n="1"] .n,.tr.ab-2 .bb--tp[data-n="2"] .n,.tr.ab-3 .bb--tp[data-n="3"] .n,
.tr.ab-4 .bb--tp[data-n="4"] .n,.tr.ab-5 .bb--tp[data-n="5"] .n,.tr.ab-6 .bb--tp[data-n="6"] .n{background:var(--blau-soft);color:var(--blau-d)}
.tr.ab-2 .bb--tp[data-n="2"] .m,.tr.ab-3 .bb--tp[data-n="3"] .m,.tr.ab-4 .bb--tp[data-n="4"] .m,
.tr.ab-5 .bb--tp[data-n="5"] .m,.tr.ab-6 .bb--tp[data-n="6"] .m{display:inline-block}
.tr.fertig .bb--tp[data-n="2"] > span{box-shadow:0 0 0 3px #FFD48A,0 10px 26px -8px rgba(0,0,40,.5)}
.tr.fertig .bb--tp[data-n="2"] .m{background:#FFD48A;color:#5C3A00}

/* HTML-Ebene ueber der Szene: Etikett, Verlust-Zaehler, Datenkarte */
.tr__kopf{position:absolute;left:14px;right:14px;top:14px;z-index:2;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:8px;pointer-events:none}
.tr__etikett,.tr__verlust{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:var(--r-pille);font-size:11.5px;font-weight:700}
.tr__etikett{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);color:#fff}
.tr__verlust{background:#fff;color:var(--ink)}
.tr__verlust b{display:inline-grid;min-width:22px;padding:1px 7px;border-radius:var(--r-pille);background:#FFE2DD;color:#A3281C;font-variant-numeric:tabular-nums;text-align:center}
.tr__verlust i{grid-area:1/1;font-style:normal;opacity:0;transition:opacity .3s var(--e-weich)}
.tr[data-ist="0"] .v0,.tr[data-ist="1"] .v0,.tr[data-ist="2"] .v2,.tr[data-ist="3"] .v3,.tr[data-ist="4"] .v4,.tr[data-ist="5"] .v5,.tr[data-ist="6"] .v6{opacity:1;transition-delay:.9s}
.tr[data-ist="0"] .v0,.tr[data-ist="1"] .v0{transition-delay:0s}
.tr__karte{position:absolute;left:14px;bottom:14px;z-index:2;display:grid;max-width:min(320px,62%);pointer-events:none}
.tr__karte > span{grid-area:1/1;display:flex;flex-direction:column;gap:1px;padding:9px 13px;border-radius:12px;background:#fff;color:var(--ink);
  box-shadow:0 14px 30px -12px rgba(0,0,40,.55);opacity:0;transform:translateY(6px);transition:opacity .35s var(--e-weich),transform .45s var(--e)}
.tr__karte b{font-size:13px;letter-spacing:-.02em}
.tr__karte small{font-size:11px;font-weight:500;color:var(--muted)}
.tr[data-ist="1"] .d1,.tr[data-ist="2"] .d2,.tr[data-ist="3"] .d3,.tr[data-ist="4"] .d4,.tr[data-ist="5"] .d5,.tr[data-ist="6"]:not(.fertig) .d6,.tr.fertig .dz{
  opacity:1;transform:none;transition-delay:.55s}
.tr.fertig .dz{transition-delay:0s;box-shadow:0 0 0 3px #FFD48A,0 14px 30px -12px rgba(0,0,40,.55)}
.tr__cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 1.6rem;margin-top:clamp(1.4rem,1rem + 1.4vw,2.2rem);text-align:center}
.tr__cta p{max-width:30rem;font-size:.95rem;line-height:1.55;color:#D8D9FA}

/* Schrittliste rechts (wie LP 2) */
.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:12px 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.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}
.tr-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){
  .tp > i,.tv-c > i,.tk,.tk > span,.tk i,.bb--tp > span,.tr__karte > span,.tr__verlust i{transition:none !important}
  .tv-w{animation:none !important}
  .tr-wrap .st-s::after{display:none}
}

/* =========================================================================
   30. Das System — Interessent und Buero nebeneinander, eine Anfrage
   ========================================================================= */
.sb{position:relative;border-radius:var(--r-lg);padding:clamp(14px,2.2vw,28px);border:1px solid var(--linie);overflow:hidden;
  background:radial-gradient(70% 60% at 12% 0%,rgba(104,104,243,.16),transparent 70%),linear-gradient(152deg,#F4F4FB 0%,#ECECFA 46%,#E1E2F8 100%);
  box-shadow:var(--sh-buehne)}
.sb::before,.wi::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%)}
.sb__ui{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(14px,2.2vw,28px);
  height:clamp(560px,47vw,620px);font-size:13px;letter-spacing:-.01em;color:var(--ink)}
.sb__ui svg,.wi__ui svg{width:14px;height:14px}
.hy{justify-self:center;width:100%;max-width:400px;min-height:0;display:flex;flex-direction:column;overflow:hidden;border-radius:30px;background:#fff;
  border:1px solid #E1E2EC;box-shadow:0 0 0 8px rgba(255,255,255,.55),0 30px 60px -30px rgba(16,16,120,.18)}
.hy__kopf{display:flex;align-items:center;gap:10px;padding:16px 16px 12px;border-bottom:1px solid var(--linie-2)}
.hy__kopf b{display:block;font-size:14px;letter-spacing:-.02em}
.hy__kopf small{display:block;font-size:11px;color:var(--muted-2)}
.hy__av{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-content:center;background:var(--f3);color:#fff;font-size:11px;font-weight:700}
.hy__obj{margin-left:auto;padding:4px 9px;border-radius:var(--r-pille);background:var(--blau-soft);color:var(--blau-d);font-size:10.5px;font-weight:700;white-space:nowrap}
.hy__chat{position:relative;flex:1;min-height:0;overflow:hidden;padding:12px 14px 14px;
  -webkit-mask-image:linear-gradient(transparent,#000 9%);mask-image:linear-gradient(transparent,#000 9%)}
.hy__fluss{display:flex;flex-direction:column;gap:10px;transition:transform .5s var(--e)}
.hy__tag{align-self:center;padding:3px 10px;border-radius:var(--r-pille);background:#F1F2F8;font-size:10.5px;font-weight:700;color:var(--muted);text-align:center}
.js .hy__tag--spaet{display:none}
.hy__tag--spaet.an{display:block;animation:mAuf .45s var(--e) both}
.hy .m--a .m__b{padding:9px 12px;border-radius:4px 14px 14px 14px;background:#F2F3F8;line-height:1.5}
.hy .m__wer img{width:15px;height:auto}
.m__ki{margin-left:2px;padding:1px 6px;border-radius:var(--r-pille);background:#EEF0F6;color:#50557A;font-size:9.5px;font-weight:700;letter-spacing:.02em}
.sl{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:16px;border-radius:18px;background:#fff;
  border:1px solid #E3E4EE;box-shadow:0 30px 60px -30px rgba(16,16,120,.16),0 2px 6px rgba(15,17,54,.04)}
.sl__kopf{display:flex;align-items:center;gap:11px;padding-bottom:13px;margin-bottom:14px;border-bottom:1px solid var(--linie-2)}
.sl__kopf b{display:block;font-size:14.5px;letter-spacing:-.02em}
.sl__kopf small{display:block;font-size:11.5px;color:var(--muted-2)}
.sl__score{margin-left:auto;display:inline-grid;justify-items:end}
.sl__score > i{grid-area:1/1;font-style:normal;padding:3px 9px;border-radius:var(--r-pille);font-size:10.5px;font-weight:700;white-space:nowrap;
  opacity:0;transform:translateY(4px);transition:opacity .3s var(--e-weich),transform .4s var(--e)}
.sl__score .o{background:#EEF0F6;color:#50557A}
.sl__score .a{background:#E6F5EC;color:#15724A}
.sl__score:not([data-st]) .o,.sl__score[data-st="0"] .o,.sl__score[data-st="a"] .a{opacity:1;transform:none}
.sl__stufen{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin:0 0 14px;padding:0;list-style:none}
.sl__stufen li{position:relative;padding-top:24px;text-align:center;font-size:10.5px;font-weight:700;color:var(--muted-2);transition:color .35s}
.sl__stufen li::before{content:"";position:absolute;left:0;right:0;top:8px;height:4px;border-radius:2px;background:#E6E7F2;transition:background .45s var(--e-weich)}
.sl__stufen li::after{content:"";position:absolute;left:50%;top:3px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#fff;border:2px solid #D3D5E6;
  transition:background .35s,border-color .35s,transform .45s var(--e-spring)}
.sl__stufen li[data-st="1"]{color:var(--ink)}
.sl__stufen li[data-st="1"]::before{background:var(--blau)}
.sl__stufen li[data-st="1"]::after{background:var(--blau);border-color:#fff;box-shadow:0 0 0 2px var(--blau);transform:scale(1.08)}
.sl__stufen li:last-child[data-st="1"]::before{background:var(--ok)}
.sl__stufen li:last-child[data-st="1"]::after{background:var(--ok);box-shadow:0 0 0 2px var(--ok)}
.sl__log{display:grid;gap:6px;align-content:start}
.sl__e{display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px;align-items:baseline;padding:8px 11px;border-radius:10px;border:1px solid var(--linie-2);
  background:#FBFBFE;font-size:12px;line-height:1.45}
.js .sl__e{display:none}
.sl__e.an{display:grid;animation:mAuf .45s var(--e) both}
.sl__e time{font-family:var(--font-m);font-size:10.5px;color:var(--muted-2);white-space:nowrap}
.sl__e b{color:#15724A}
.sl__profil{margin-top:auto;padding:11px 12px;border-radius:12px;background:var(--blau-soft-2);border:1px solid #E0E1FB}
.sl__pk{margin-bottom:7px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blau)}
.sl__profil dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0}
.sl__profil dt{font-size:10.5px;font-weight:500;color:var(--muted)}
.sl__profil dd{min-height:1.4em;margin:0;font-size:12.5px;font-weight:700;white-space:nowrap}
.sl__fg{right:16px;bottom:16px}
.sys__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)}
.sb .buehne-pause,.wi .buehne-pause{top:14px;right:14px}

/* =========================================================================
   31. Wissenssicherung — aus dem Kopf ins Buero-Gedaechtnis
   ========================================================================= */
.wi{position:relative;border-radius:var(--r-lg);padding:clamp(14px,2.2vw,28px);border:1px solid var(--linie);overflow:hidden;
  background:radial-gradient(70% 60% at 88% 0%,rgba(104,104,243,.14),transparent 70%),linear-gradient(152deg,#F4F4FB 0%,#ECECFA 46%,#E1E2F8 100%);
  box-shadow:var(--sh-buehne)}
.wi__ui{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 84px minmax(0,1.1fr);gap:clamp(12px,1.6vw,20px);
  font-size:13px;letter-spacing:-.01em;color:var(--ink)}
.wi__kopf-l,.wi__db,.wi__frage{min-width:0;padding:16px;border-radius:18px;background:#fff;border:1px solid #E3E4EE}
.wi__kopf-l,.wi__frage{box-shadow:0 30px 60px -30px rgba(16,16,120,.14),0 2px 6px rgba(15,17,54,.04)}
.wi__person,.wi__db-kopf,.wi__wer{display:flex;align-items:center;gap:11px}
.wi__person,.wi__db-kopf{padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--linie-2)}
.wi__person b,.wi__db-kopf b,.wi__wer b{display:block;font-size:14px;letter-spacing:-.02em}
.wi__person small,.wi__db-kopf small,.wi__wer small{display:block;font-size:11px;color:var(--muted-2)}
.wi__av{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-content:center;background:var(--f4);color:#fff;font-size:12px;font-weight:700}
.wi__av--neu{background:var(--f2)}
.wi__label{margin-bottom:8px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.wi__chips{display:grid;gap:6px}
.wi__chips li{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:11px;background:#FFF8EC;border:1px solid #F4E1BC;
  font-size:12px;font-weight:600;color:#5C4314;transition:opacity .5s var(--e-weich),transform .6s var(--e),background .4s,border-color .4s}
.wi__chips svg{flex:none;color:#A86A00}
.js .wi__chips li:not(.an){opacity:.38;transform:translateX(12px);background:#fff;border-color:#E3E4EC;border-style:dashed}
.wi__kopf-l{display:flex;flex-direction:column}
.wi__weg{align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:var(--r-pille);
  background:#FFF1D6;color:#8A5300;font-size:11.5px;font-weight:700}
.wi__chips + .wi__weg{margin-top:14px}
.wi__weg svg{color:#A86A00}
.wi__flug{position:relative;align-self:center;height:100%;min-height:200px}
.wi__flug::before{content:"";position:absolute;left:6px;right:6px;top:50%;border-top:2px dashed #C9CAFB}
.wi__flug::after{content:"";position:absolute;right:2px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-top:2px solid #A9ABF6;border-right:2px solid #A9ABF6;transform:rotate(45deg)}
.wi__flug i{position:absolute;left:4px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--blau);
  box-shadow:0 0 0 5px rgba(32,32,237,.15);opacity:0}
.wi__flug i.an{animation:wiFlug .75s var(--e-weich) both}
@keyframes wiFlug{0%{opacity:0;transform:none}15%,80%{opacity:1}100%{opacity:0;transform:translateX(64px)}}
.wi__db{border-color:#D9DAFB;box-shadow:0 0 0 6px rgba(32,32,237,.05),0 30px 60px -30px rgba(16,16,120,.16)}
.wi__db-kopf img{width:32px;height:auto}
.wi__fach{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:10px}
.wi__fach span{min-width:0;display:flex;flex-direction:column;gap:2px;padding:8px 9px;border-radius:10px;background:var(--blau-soft-2);border:1px solid #E0E1FB;
  font-size:10.5px;font-weight:600;color:var(--muted)}
.wi__fach svg{color:var(--blau)}
.wi__fach b{display:inline-grid;font-size:16px;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.wi__neu{display:grid;align-content:start;gap:5px;min-height:196px}
.wi__neu li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:7px 10px;border-radius:10px;border:1px solid var(--linie);
  font-size:12px;font-weight:600}
.js .wi__neu li{display:none}
.wi__neu li.an{display:grid;animation:mAuf .45s var(--e) both}
.wi__neu svg{color:var(--blau)}
.wi__neu small{font-size:10.5px;font-weight:500;color:var(--muted-2);white-space:nowrap}
.wi__frage{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px 18px;align-items:start}
.wi__wer{grid-column:1;grid-row:1}
.wi__q{grid-column:1;grid-row:2;align-self:start;justify-self:start;max-width:100%;min-height:2.9em;padding:9px 13px;border-radius:14px 14px 14px 4px;background:var(--blau);color:#fff;font-weight:600;line-height:1.45}
.wi__q span:not(:empty)::after{content:"";display:inline-block;width:1.5px;height:1em;margin-left:1px;vertical-align:-2px;background:#fff;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.wi__a{grid-column:2;grid-row:1 / 3;padding:11px 13px;border-radius:12px;background:#F7F7FB}
.wi__ak{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)}
.wi__ak img{width:15px;height:auto}
.wi__a p[data-strom]{min-height:4.65em;font-size:13px;line-height:1.55}
.wi__quellen{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.wi__quellen span{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:var(--r-pille);background:#fff;border:1px solid var(--linie);
  font-size:11px;font-weight:600;color:var(--muted)}
.wi__quellen svg{width:12px;height:12px;color:#D93025}
.wi__punkte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(1.4rem,1rem + 1.4vw,2.2rem)}
.wi__punkte > div{padding:1.3rem 1.4rem;border-radius:var(--r);background:#fff;border:1px solid var(--linie);box-shadow:var(--sh-1)}
.wi__punkte b{display:block;margin-bottom:.35rem;font-size:1.02rem;letter-spacing:-.02em}
.wi__punkte p{font-size:.9125rem;line-height:1.6;color:var(--muted)}
.wi__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}
@media (prefers-reduced-motion:reduce){
  .wi__flug i{display:none}
  .wi__chips li{transition:none}
  .wi__q span::after{animation:none}
}

/* =========================================================================
   32. 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,.18)}
.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)}
.rs__ui--fu{gap:7px}
.rf{display:grid;grid-template-columns:70px minmax(0,1fr) 26px;align-items:center;gap:8px;font-size:.75rem;font-weight:600;color:var(--muted)}
.rf i{position:relative;display:block;height:12px;border-radius:5px;background:#E3E4F3;overflow:hidden}
.rf i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--w)*100%);border-radius:5px;background:var(--blau)}
.rf em{font-style:normal;font-size:.6875rem;font-weight:700;color:#A3281C}
.rf--leck i::after{background:linear-gradient(90deg,var(--blau),#E8705F)}

/* =========================================================================
   33. Studien — drei Zahlen auf blauer Insel
   ========================================================================= */
.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,.1);color:#fff;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}
.zs-reihe--3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* =========================================================================
   Paket: weitere Loesungen von DuBot AI (Fusszeile) + Mikro-Interaktionen
   (gleicher Block auf allen drei DuBot-Seiten, Stand 02.10.2026)
   ========================================================================= */
.fuss__suite{padding-bottom:clamp(1.6rem,1.2rem + 1.4vw,2.2rem);margin-bottom:clamp(1.6rem,1.2rem + 1.4vw,2.2rem);border-bottom:1px solid rgba(255,255,255,.16)}
.fuss__suite-k{margin-bottom:.9rem;font-size:.8125rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#fff}
.fuss__suite-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fs{position:relative;display:flex;align-items:center;gap:12px;min-height:66px;padding:12px 14px;border-radius:14px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#fff;text-decoration:none;
  transition:background .2s var(--e-weich),border-color .2s var(--e-weich),transform .2s var(--e-weich)}
a.fs:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.32);transform:translateY(-2px)}
.fs__i{width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-content:center;background:#fff;color:var(--blau)}
.fs__i svg{width:18px;height:18px}
.fs b{display:block;font-size:.9375rem;letter-spacing:-.015em}
.fs small{display:block;margin-top:.1rem;font-size:.78rem;line-height:1.4;color:#C9CBF7}
.fs em{position:absolute;top:-9px;right:12px;padding:2px 8px;border-radius:var(--r-pille);background:#fff;color:var(--blau-d);
  font-style:normal;font-size:.625rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.fs.is-hier{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.45)}
.fs__pfeil{margin-left:auto;width:16px;height:16px;flex:none;opacity:.7;transition:transform .2s var(--e-weich),opacity .2s var(--e-weich)}
a.fs:hover .fs__pfeil{transform:translateX(3px);opacity:1}

/* Pfeil im Knopf ruckt beim Hover ein Stueck nach rechts */
.btn > svg{transition:transform .22s var(--e-weich)}
.btn:hover > svg:has(> use[href="#i-arrow"]),.btn:hover > svg:has(> use[href="#i-plane"]){transform:translateX(3px)}

/* Lichtkegel folgt der Maus auf Karten (nur mit echter Maus, gesetzt in app.js) */
.licht{position:relative;--mx:50%;--my:50%}
.licht::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(260px circle at var(--mx) var(--my),rgba(32,32,237,.08),transparent 65%);transition:opacity .3s var(--e-weich)}
.s-blau .licht::after{background:radial-gradient(260px circle at var(--mx) var(--my),rgba(255,255,255,.12),transparent 65%)}
.licht.is-licht::after{opacity:1}
@media (max-width:980px){.fuss__suite-g{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){
  .btn:hover > svg,a.fs:hover .fs__pfeil{transform:none}
  .licht::after{display:none}
}

/* =========================================================================
   34. Umbrueche (Set wie LP 1/2: 1080/980/900/860/760/720/640/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)}
  .tr-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))}
  .zs-reihe{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zs-reihe--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fu__z{grid-template-columns:70px minmax(0,1fr) 30px}
}
@media (max-width:980px){
  .kopf__tag{display:none}
  .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}
  .zs-reihe--3{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 */
  .tr-wrap{grid-template-columns:minmax(0,1fr)}
  .tr{min-height:clamp(460px,80vw,580px)}
  .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}
  /* System: Handy oben, Buero darunter */
  .sb__ui{grid-template-columns:minmax(0,1fr);height:auto}
  .hy{height:470px;max-width:440px}
  .sl{height:610px;max-width:560px;width:100%;justify-self:center}
  /* Buero-Gedaechtnis: untereinander, ohne Flugbahn */
  .wi__ui{grid-template-columns:minmax(0,1fr)}
  .wi__flug{display:none}
  .wi__frage{grid-template-columns:minmax(0,1fr)}
  .wi__wer,.wi__q,.wi__a{grid-column:1;grid-row:auto}
  .wi__punkte{grid-template-columns:minmax(0,1fr);max-width:560px;margin-inline:auto}
}
@media (max-width:900px){
  .kopf__nav,.kopf .btn{display:none}
  .kopf__mob{display:flex}
  .kopf__ico{width:44px;height:44px}
  .kopf__logo{min-height:44px}
  /* Touch-Ziele ab Tablet */
  .fab__a{min-height:44px}
  .legal .zurueck{min-height:44px}
  .band__pause{min-height:44px}
  .opt{min-height:48px}
  .schirm__pause{min-height:44px}
  .buehne-pause{width:44px;height:44px;top:8px;right:8px}
  .sb .buehne-pause,.wi .buehne-pause{top:8px;right:8px}
  .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}
  .kopf__in{padding:.42rem .42rem .42rem 1rem}
}
/* Unter 861 px und bei Reduced Motion ist die Kippung aus — wie bei LP 1/2. */
@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}
}
@media (max-width:760px){
  .ck{grid-template-columns:minmax(0,1fr);gap:8px}
  .fu{gap:5px;padding:9px 10px 10px}
  .fu__leck{display:none}
}
@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__ico{width:28px;height:28px}
  .bento,.bento--4{grid-template-columns:minmax(0,1fr)}
  .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:580px;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}
  .band__k{font-size:.8125rem}
  .sl__stufen{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:10px}
  .wi__fach{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tr__karte{max-width:calc(100% - 84px)}
  /* Blaue Inseln: schmale Insel = Aufhellung oben flacher, sonst sinkt der Kontrast der Kicker */
  .s-blau{background:
    radial-gradient(60% 34% at 50% -8%, rgba(150,150,255,.3), 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,#2626EE 0%,#1C1CD6 46%,var(--blau-d) 100%)}
}
@media (max-width:640px){
  .ht-a{display:block}
}
@media (max-width:560px){
  .rechts-kopf .btn{display:none}
  .ui{padding:12px;font-size:12px}
  .zs-reihe{grid-template-columns:minmax(0,1fr)}
  .lt__toast{width:max-content;max-width:calc(100% - 24px);white-space:normal;text-align:center;justify-content:center}
  .tr{min-height:470px}
  .bb--tp{display:none}
  .final__logos span{width:36px;height:36px}
  .final__logos span:nth-child(1),.final__logos span:nth-child(7){display:none}
  .hy{height:450px}
  .sl{height:510px}
  /* Am Handy stehen die neuesten Eintraege oben, aeltere rutschen unten raus */
  .sl__log{display:flex;flex-direction:column-reverse;justify-content:flex-end;max-height:178px;overflow:hidden}
  .sl__profil dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sl__e{grid-template-columns:50px minmax(0,1fr);gap:8px;font-size:11.5px}
  .fu__z{grid-template-columns:72px minmax(0,1fr) 30px;font-size:11px}
  .wi__neu small{display:none}
}
@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:.44rem;letter-spacing:0}
  .hero .btn-reihe .btn{width:100%;white-space:normal}
  .roll__cta .btn,.tr__cta .btn{width:100%;white-space:normal}
  .anf .karte-form{padding-top:4.4rem}
  .ovl .karte-form{padding-top:4rem}
}
@media (max-width:400px){
  .t-h2{font-size:1.46rem}
  .t-h3x{font-size:1.24rem}
  .hero__team{font-size:1.2rem}
}