/* ===========================================================
   Hero mit Produktbühne und Datenströmen
   Ersetzt den Logo-Hero. Eigene Klassen (hb-), damit nichts
   aus basis.css oder nav-pille.css überschrieben wird.
   =========================================================== */
.hb{position:relative;overflow:hidden;color:#fff;
  margin-top:calc(-1 * var(--kopfh,110px));
  background:
    radial-gradient(68% 58% at 74% 46%,rgba(42,74,215,.42),transparent 68%),
    radial-gradient(42% 42% at 88% 92%,rgba(227,26,62,.22),transparent 70%),
    linear-gradient(180deg,var(--navy) 0%,var(--tief) 100%)}
.hb-stroeme{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
.hb::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(224,238,254,.09) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(58% 70% at 72% 50%,#000,transparent 75%);
  mask-image:radial-gradient(58% 70% at 72% 50%,#000,transparent 75%)}
.hb-gitter{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,5.5fr) minmax(0,7.5fr);align-items:center;
  gap:clamp(24px,3vw,56px);
  padding-top:calc(var(--kopfh,110px) + clamp(16px,2.2vw,34px));
  padding-bottom:clamp(26px,3.4vw,46px)}

/* ---------- Textspalte ---------- */
.hb-text{min-width:0}
.hb-pos{display:block;font-size:clamp(1rem,1.5vw,1.26rem);font-weight:300;
  color:rgba(224,238,254,.78);margin-bottom:16px;line-height:1.45}
.hb-pos em{font-style:normal;font-weight:600;color:#fff;position:relative}
.hb-pos em::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;
  background:var(--rot);transform-origin:left;transform:scaleX(0);
  transition:transform .6s cubic-bezier(.16,1,.3,1) .5s}
.hb.da .hb-pos em::after{transform:none}
.hb h1{margin:0;font-weight:600;letter-spacing:-.035em;line-height:1.07;
  font-size:clamp(2.05rem,3.3vw,3.5rem);text-wrap:balance}
.hb h1 span{display:block}
.hb h1 .z2{color:rgba(224,238,254,.72)}
.hb h1 .z3{background:var(--verlauf-w);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(min-width:1100px){.hb h1 span{white-space:nowrap}}

.hb-ziel{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(22px,2.6vw,32px)}
.hb-ziel span{display:inline-flex;align-items:center;gap:8px;height:33px;padding:0 15px;
  border-radius:100px;background:rgba(224,238,254,.07);border:1px solid rgba(224,238,254,.15);
  font-size:.8rem;font-weight:500;letter-spacing:-.005em;color:rgba(224,238,254,.86)}
.hb-ziel span::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--rot);flex:none;opacity:.9}
.hb-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,2.6vw,30px)}
.hb-trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:clamp(26px,3vw,38px);
  padding-top:18px;border-top:1px solid rgba(224,238,254,.14);
  font-size:.82rem;color:rgba(224,238,254,.68)}
.hb-trust span{display:inline-flex;align-items:center;gap:8px}
.hb-trust i{width:6px;height:6px;border-radius:50%;background:var(--rot);flex:none}

/* ---------- Bühne ---------- */
.hb-szene{position:relative;width:100%;aspect-ratio:880/742;min-width:0;
  perspective:2100px;perspective-origin:46% 46%}
.hb-stapel{position:absolute;left:0;top:0;width:760px;height:700px;transform-origin:0 0;
  transform:scale(var(--s,1)) translate(66px,40px);transform-style:preserve-3d;
  color:var(--schwarz);font-size:12px;line-height:1.3}
.hb-kipp{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(calc(9deg + var(--ry,0deg))) rotateY(calc(-15deg + var(--rx,0deg))) rotateZ(2deg);
  transition:transform .5s cubic-bezier(.16,1,.3,1)}
.hb-ebene{position:absolute;transform-style:preserve-3d}

.hb-fenster{background:#F7F9FD;border-radius:16px;overflow:hidden;
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 50px 90px -30px rgba(2,8,28,.85),0 18px 40px -18px rgba(2,8,28,.6)}
.hb-fenster{position:relative;line-height:0}
.hb-fenster img{display:block;width:100%;height:auto;border-radius:16px}
.hb-laeuft{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:7px;
  height:26px;padding:0 11px;border-radius:100px;background:rgba(8,31,68,.9);color:#fff;
  font-size:10.5px;font-weight:600;line-height:1;letter-spacing:-.01em;
  box-shadow:0 8px 20px -8px rgba(2,8,28,.7)}
.hb-laeuft i{width:6px;height:6px;border-radius:50%;background:#1FA971;flex:none;
  box-shadow:0 0 0 3px rgba(31,169,113,.25)}
@media(prefers-reduced-motion:no-preference){.hb-laeuft i{animation:hb-puls 2.4s ease-in-out infinite}}
@keyframes hb-puls{0%,100%{opacity:1}50%{opacity:.35}}

.hb-schiene{display:grid;gap:9px}
.hb-sys{width:132px;height:44px;display:flex;align-items:center;gap:9px;padding:0 9px;
  border-radius:11px;background:rgba(253,253,253,.96);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 16px 30px -16px rgba(2,8,28,.8);font-size:11.5px;font-weight:600}
.hb-sys .hb-kachel{width:26px;height:26px;border-radius:7px;font-size:10px}
.hb-sys.mehr{background:rgba(224,238,254,.12);border-color:rgba(224,238,254,.3);
  color:var(--hellblau);justify-content:center;font-weight:500;box-shadow:none}

.hb-karte{background:#fff;border-radius:14px;border:1px solid rgba(255,255,255,.9);
  box-shadow:0 40px 70px -28px rgba(2,8,28,.9),0 12px 24px -14px rgba(2,8,28,.5);padding:14px}
.hb-karte h3{margin:0;font-size:12px;font-weight:600;letter-spacing:-.01em;
  display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.hb-karte h3 span{font-size:9.5px;font-weight:500;color:#6B7386;white-space:nowrap}
.hb-zuord{margin-top:10px;display:grid;gap:6px;list-style:none}
.hb-zuord li{display:grid;grid-template-columns:78px minmax(0,1fr) 14px minmax(0,1fr);
  align-items:center;gap:6px;font-size:10px}
.hb-zuord em{font-style:normal;color:#6B7386}
.hb-zuord code{font:500 10px/1 ui-monospace,'SF Mono',Menlo,Consolas,monospace;padding:5px 6px;
  border-radius:6px;background:#F1F4FA;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-zuord code.raus{background:#E9F7F0;color:#156B49}
.hb-zuord svg{width:14px;height:14px;color:#9AA6B5}
.hb-lauf{margin-top:8px;display:grid;list-style:none}
.hb-lauf li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:8px;align-items:center;
  padding:6px 0;border-top:1px solid #EEF1F7;font-size:10px}
.hb-lauf time{color:#6B7386;font-variant-numeric:tabular-nums}
.hb-lauf b{font-weight:600} .hb-lauf small{display:block;font-size:9px;color:#6B7386}
.hb-lauf .ok{color:#156B49;font-weight:600;font-variant-numeric:tabular-nums}
.hb-kpi{background:linear-gradient(145deg,#E14757 0%,var(--rot) 40%,var(--rot-d) 100%);
  color:#fff;border-color:rgba(255,255,255,.28);overflow:hidden}
.hb-kpi strong{display:block;font-size:52px;line-height:1;font-weight:600;letter-spacing:-.04em}
.hb-kpi p{margin-top:6px;font-size:11.5px;line-height:1.35;max-width:13em}
.hb-kpi small{display:block;margin-top:10px;font-size:9.5px;opacity:.8}
.hb-balken{position:absolute;right:14px;bottom:16px;display:flex;align-items:flex-end;gap:6px;height:74px}
.hb-balken i{width:14px;border-radius:4px 4px 2px 2px;background:rgba(255,255,255,.28);
  transform-origin:bottom}
.hb-balken i:last-child{background:#fff}
.hb-toast{display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:12px;
  background:rgba(8,31,68,.92);color:#fff;border:1px solid rgba(224,238,254,.22);
  box-shadow:0 30px 50px -20px rgba(2,8,28,.95);font-size:11px;white-space:nowrap}
.hb-toast i{width:24px;height:24px;border-radius:50%;background:#1FA971;display:grid;place-items:center}
.hb-toast i svg{width:12px;height:12px}
.hb-toast b{font-weight:600} .hb-toast span{color:rgba(224,238,254,.72);margin-left:8px}

/* Lage der Ebenen: das Produktfenster trägt die Bühne, der Rest legt sich an die Kanten */
.e-schiene{left:16px;top:150px;transform:translateZ(44px)}
.e-fenster{left:178px;top:116px;width:582px;transform:translateZ(0)}
.e-log{left:522px;top:8px;width:238px;transform:translateZ(64px)}
.e-zuord{left:0;top:500px;width:300px;transform:translateZ(54px)}
.e-kpi{left:462px;top:516px;width:272px;height:158px;transform:translateZ(78px)}

/* Stempel bleibt */
.hb-stempel{position:absolute;z-index:2;right:clamp(12px,3vw,40px);top:clamp(80px,9vw,120px);
  width:clamp(86px,9vw,124px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  text-align:center;border:1px solid rgba(224,238,254,.28);background:rgba(8,31,68,.55);
  backdrop-filter:blur(6px);padding:10px}
.hb-stempel b{display:block;font-size:.62rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--rot);line-height:1.3}
.hb-stempel em{display:block;margin-top:5px;font-style:normal;font-size:.5rem;font-weight:300;
  color:rgba(224,238,254,.6);line-height:1.35}
.hb-stempel .fahne{font-size:1rem;display:block;margin-bottom:3px}

/* Auftritt */
@keyframes hb-setzen{from{opacity:0;transform:translate3d(0,26px,var(--z,0)) scale(.97)}
  to{opacity:1;transform:translate3d(0,0,var(--z,0)) scale(1)}}
@keyframes hb-heben{from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none}}
@keyframes hb-schweben{0%,100%{transform:translate3d(0,0,var(--z,0))}
  50%{transform:translate3d(0,-7px,var(--z,0))}}
  100%{opacity:0;transform:translateX(20px)}}
  100%{opacity:0;transform:translateX(0)}}
  100%{opacity:0;transform:translateY(42px)}}
@keyframes hb-wachsen{from{transform:scaleY(.15)} to{transform:scaleY(1)}}
@media(prefers-reduced-motion:no-preference){
  .js .hb-ebene{animation:hb-setzen .9s cubic-bezier(.16,1,.3,1) both,
    hb-schweben 7s ease-in-out infinite;animation-delay:var(--d,0s),calc(var(--d,0s) + 1s)}
  .js .e-fenster{--z:0px;--d:.05s;animation:hb-setzen .9s cubic-bezier(.16,1,.3,1) .05s both}
  .js .e-schiene{--z:44px;--d:.18s;animation:hb-setzen .9s cubic-bezier(.16,1,.3,1) .18s both}
  .js .e-log{--z:64px;--d:.38s} .js .e-zuord{--z:54px;--d:.48s}
  .js .e-kpi{--z:78px;--d:.58s}
  .js .hb-sys{animation:hb-heben .6s cubic-bezier(.16,1,.3,1) both;
    animation-delay:calc(.35s + var(--i) * .07s)}
  .hb-balken i{animation:hb-wachsen .9s cubic-bezier(.16,1,.3,1) both;
    animation-delay:calc(.9s + var(--i) * .06s)}
}

@media(max-width:1020px){
  .hb-gitter{grid-template-columns:minmax(0,1fr)}
  .hb-szene{max-width:680px;justify-self:center;width:100%}
  .hb-stapel{--s:.76}
  .hb-stempel{top:auto;bottom:clamp(10px,3vw,24px);right:clamp(10px,3vw,20px);width:84px}
}
@media(max-width:640px){
  .hb-stapel{--s:.64}
  .hb-trust{display:none}
  .hb-stempel{display:none}
}

/* ---------- Fuß: wer damit arbeitet ----------
   Steht im dunklen Hero, damit der erste Bildschirm das Vertrauen
   gleich mitliefert. Die Logos werden auf Weiß reduziert, sonst
   bringt jedes seine eigene Farbe in die Fläche. */
.hb-fuss{position:relative;z-index:1;display:flex;flex-direction:column;
  align-items:stretch;gap:12px;
  padding-top:clamp(18px,2.2vw,28px);padding-bottom:clamp(22px,3vw,40px)}
.hb-fuss::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.22),rgba(255,255,255,.05) 72%,transparent)}
.hb-fuss-titel{font-size:.8rem;font-weight:500;letter-spacing:.01em;
  color:rgba(255,255,255,.6)}
.hb-logos{display:flex;align-items:center;justify-content:space-between;
  width:100%;min-width:0;flex-wrap:nowrap;
  gap:clamp(12px,1.8vw,26px);
  background:#fff;border-radius:18px;
  padding:clamp(13px,1.5vw,18px) clamp(18px,2.2vw,30px);
  box-shadow:0 20px 48px rgba(3,12,28,.34),inset 0 1px 0 rgba(255,255,255,.7)}
/* Die acht Logos sind sehr verschieden gebaut: Betty Barclay ist zwölfmal
   so breit wie hoch, GEMA fast quadratisch. Nur die Höhe zu setzen würde
   die breiten Schriftzüge riesig und die hohen winzig machen. Deshalb
   Höhe UND eine Breitengrenze, dazwischen passt sich jedes Logo an. */
.hb-logos img{flex:1 1 0;min-width:0;height:clamp(26px,3vw,42px);width:100%;
  object-fit:contain;display:block;
  transition:transform .25s var(--e,ease)}
.hb-logos img:hover{transform:translateY(-2px)}
@media(max-width:860px){
  .hb-fuss{gap:12px;padding-bottom:26px}
  .hb-logos{gap:14px;padding:12px 14px;border-radius:14px;flex-wrap:wrap}
  .hb-logos img{flex:1 1 26%;height:26px}
  .hb-logos img:nth-child(n+7){display:none}
}