/* DYNAMIS dunkel: Premium-Look (dunkel, Glas, Gelb-Akzent). Wird nach allen anderen Stylesheets geladen. */
:root {
  --z: 1;
  --ink: #f2f4f5; --soft: rgba(242,244,245,.68); --faint: rgba(242,244,245,.5);
  --bg: #0b0d10; --paper: #111418; --line: rgba(255,255,255,.09); --line2: rgba(255,255,255,.16);
  --glass: linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  --shadow: 0 30px 70px -30px rgba(0,0,0,.85); --shadow-s: 0 14px 34px -16px rgba(0,0,0,.8);
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
body { background: var(--bg); color: var(--ink); }
::selection { color: #1a1400; }
.h2 { font-weight: 700; letter-spacing: -.03em; }
.hl { color: var(--accent); background: none; }

/* Kopf und Menüs */
.head .logo, .nav, .head .burger { background: rgba(18,21,25,.72); border: 0; box-shadow: 0 0 0 1px var(--line2), 0 16px 40px -18px #000; backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); }
.head .logo:hover { box-shadow: 0 0 0 1px rgba(245,197,24,.4), 0 16px 40px -18px #000; }
.nav > a, .nav .dd > button { color: var(--ink); opacity: .7; }
.nav > a:hover, .nav .dd:hover > button, .nav .dd.is-open > button { opacity: 1; background: rgba(255,255,255,.08); }
.nav > a.is-active, .nav .dd.is-active > button { background: var(--accent); color: #1a1400; }
.nav .mega a { color: var(--ink); }
.mega, .drop { background: #13161a; box-shadow: 0 40px 80px -30px #000, 0 0 0 1px var(--line2); }
.mega { top: 84px; }
.mlink { background: rgba(255,255,255,.03); border-color: var(--line); color: var(--ink); }
.mlink:hover { border-color: rgba(245,197,24,.45); box-shadow: none; }
.mlink svg { color: var(--accent); }
.mlink--store, .mlink.is-active { background: rgba(245,197,24,.07); border-color: rgba(245,197,24,.35); }
.burger { background: rgba(255,255,255,.06); border-color: var(--line2); }
.burger span { background: var(--ink); }
.mnav { background: #13161a; border-color: var(--line); inset: 80px 16px auto; border-radius: 18px; }
.mnav a, .mnav details { border-color: var(--line); }

/* Knöpfe und Etiketten */
.btn--primary { background: var(--accent); box-shadow: 0 0 0 1px rgba(245,197,24,.4), 0 14px 40px -12px rgba(245,197,24,.6); }
.btn--ghost { background: rgba(255,255,255,.07); border: 1px solid var(--line2); color: var(--ink); box-shadow: none; }
.btn--ghost:hover { background: rgba(255,255,255,.12); }
.pill { background: rgba(255,255,255,.04); border-color: var(--line2); box-shadow: none; color: var(--soft); font-family: var(--mono); font-weight: 500; letter-spacing: .1em; }
.pill::before { box-shadow: 0 0 10px var(--accent); }
.sub { color: var(--soft); }

/* Neuer Kopfbereich mit Halle und Cockpit */
.nh { position: relative; padding: 170px 0 0; text-align: center; overflow: hidden; isolation: isolate; }
.nh__halle { position: absolute; inset: 0; z-index: -2; }
.nh__halle img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; opacity: .62; filter: saturate(.75); }
.nh::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(55% 45% at 50% 0%, rgba(245,197,24,.18), transparent 70%), linear-gradient(180deg, rgba(11,13,16,.55) 0%, rgba(11,13,16,.75) 40%, var(--bg) 78%); }
.nh .pill { margin: 0; }
.nh h1 { margin: 24px auto 0; max-width: 15ch; font-family: var(--display); font-weight: 700; font-size: clamp(40px, 1.6rem + 4.2vw, 82px); line-height: 1.02; letter-spacing: -.035em; }
.nh h1 em { font-style: normal; color: transparent; background: linear-gradient(100deg, var(--accent), #fff3c4 130%); -webkit-background-clip: text; background-clip: text; }
.nh__lead { max-width: 54ch; margin: 22px auto 0; font-size: 18px; color: rgba(242,244,245,.75); }
.nh__lead b { color: var(--ink); }
.nh .hero__cta { justify-content: center; }
.nh .p-hero__zusatz { margin-top: 18px; }
.nh__riese { position: absolute; left: 50%; bottom: 0; translate: -50% 0; z-index: -1; font-family: var(--display); font-weight: 800; font-size: 22vw; line-height: .78; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.07); white-space: nowrap; pointer-events: none; }
.nh__buehne { position: relative; margin-top: 70px; padding-bottom: 100px; perspective: 2200px; }
.nh__monitor { position: relative; width: min(1100px, 100%); margin: 0 auto; padding: 12px; border-radius: 26px; background: linear-gradient(160deg, #3a3f45, #16191d 40%, #2b2f34); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 60px 120px -40px #000, 0 0 140px -30px rgba(245,197,24,.28); transform: rotateX(14deg) scale(.96); transform-origin: 50% 100%; transition: transform 1.4s var(--ease); }
.nh__buehne.ist-an .nh__monitor { transform: none; }
.nh__monitor::after { content: ""; position: absolute; left: 50%; bottom: -78px; translate: -50% 0; width: 190px; height: 78px; background: linear-gradient(#2a2e33, #15181b); clip-path: polygon(30% 0, 70% 0, 84% 100%, 16% 100%); z-index: -1; }
.nh__bsp { position: absolute; left: 50%; translate: -50% 0; bottom: -14px; z-index: 2; padding: 5px 11px; border-radius: 999px; background: #1b1f24; border: 1px solid var(--line2); color: var(--faint); font: 500 10.5px var(--mono); letter-spacing: .05em; }
.nh .card, .nh .chip { z-index: 3; text-align: left; background: rgba(20,24,28,.74); border: 1px solid var(--line2); color: var(--ink); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 50px -20px #000; }
.nh .card { padding: 12px 14px; border-radius: 14px; min-width: 170px; }
.nh .card b { font-size: 13.5px; }
.nh .card .tag { background: rgba(245,197,24,.14); color: var(--accent); font-family: var(--mono); }
.nh .chip i { background: var(--accent); }

.ds { display: grid; grid-template-columns: 64px 1fr; border-radius: 16px; overflow: hidden; background: #0d1013; text-align: left; font-size: 12.5px; }
.ds aside { display: grid; align-content: start; justify-items: center; gap: 10px; padding: 16px 0; border-right: 1px solid var(--line); background: #0a0c0f; }
.ds aside img { width: 30px; margin-bottom: 12px; }
.ds aside i { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--faint); }
.ds aside i.an { background: var(--accent); color: #1a1400; border-color: transparent; box-shadow: 0 0 24px -4px rgba(245,197,24,.7); }
.ds aside svg { width: 16px; height: 16px; }
.ds__in { padding: 18px 20px 20px; display: grid; gap: 14px; }
.ds__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ds__chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--soft); font-size: 11.5px; }
.ds__chip--ok { color: var(--accent); border-color: rgba(245,197,24,.3); background: rgba(245,197,24,.06); }
.ds__chip--ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.ds__chip--frag { flex: 1; min-width: 160px; }
.ds__chip--frag i { width: 22px; height: 22px; border-radius: 7px; background: var(--accent); display: grid; place-items: center; color: #1a1400; font-style: normal; font-size: 12px; }
.ds__gruss small { color: var(--faint); }
.ds__gruss b { display: block; font: 600 26px/1.15 var(--display); letter-spacing: -.02em; margin-top: 2px; }
.ds__gruss p { color: var(--soft); font-size: 12px; margin-top: 4px; }
.ds__grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; }
.ds__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ds__glas { border-radius: 14px; border: 1px solid var(--line); background: var(--glass); padding: 14px; }
.ds__kpi small { color: var(--soft); font-size: 11.5px; display: flex; justify-content: space-between; }
.ds__kpi small em { font-style: normal; color: var(--accent); font-family: var(--mono); font-size: 10.5px; }
.ds__kpi b { display: block; margin-top: 10px; font: 600 26px var(--display); letter-spacing: -.02em; }
.ds__kpi span { font-size: 11px; color: var(--faint); }
.ds h5 { margin: 0 0 12px; display: flex; justify-content: space-between; align-items: center; font: 600 12px var(--sans); }
.ds h5 span { color: var(--faint); font: 500 10.5px var(--mono); }
.ds__masch { margin-top: 12px; }
.ds__balken { display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; gap: 6px; height: 130px; border-bottom: 1px solid var(--line); }
.ds__balken i { border-radius: 6px 6px 2px 2px; height: var(--h); background: repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 2px, transparent 2px 5px), rgba(255,255,255,.05); }
.ds__balken i.a { background: linear-gradient(var(--accent), rgba(245,197,24,.35)); box-shadow: 0 0 30px -6px rgba(245,197,24,.6); }
.ds__achse { display: flex; justify-content: space-between; margin-top: 6px; color: var(--faint); font: 500 10px var(--mono); }
.ds__ki { position: relative; overflow: hidden; border-radius: 14px; padding: 14px; background: linear-gradient(170deg, rgba(245,197,24,.95), rgba(245,197,24,.6)); color: #1a1400; }
.ds__ki::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(0,0,0,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.06) 1px, transparent 1px); background-size: 18px 18px; }
.ds__ki > * { position: relative; }
.ds__ki h5 span { color: #1a1400; font-weight: 600; padding: 3px 7px; border-radius: 6px; background: rgba(0,0,0,.12); }
.ds__hw { margin-top: 8px; padding: 10px 11px; border-radius: 11px; background: rgba(255,255,255,.4); }
.ds__hw em { display: inline-block; font: 700 9.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; background: rgba(0,0,0,.8); color: var(--accent); }
.ds__hw b { display: block; margin-top: 6px; font-size: 12.5px; }
.ds__hw small { display: block; margin-top: 2px; font-size: 11px; line-height: 1.4; opacity: .75; }
.ds__tl { margin-top: 12px; }
.ds__ev { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.ds__ev time { font: 500 10.5px var(--mono); color: var(--accent); padding: 3px 7px; border-radius: 6px; background: rgba(245,197,24,.08); border-left: 2px solid var(--accent); }
.ds__ev b { font-size: 12px; font-weight: 600; }
.ds__ev small { display: block; color: var(--faint); font-size: 10.5px; }
.ds__ev span { font: 600 9.5px var(--mono); color: var(--soft); border: 1px solid var(--line); padding: 3px 7px; border-radius: 6px; }

/* Vertrauensleiste und Systeme */
.trust { margin-top: 0; }
.trust__bar { background: var(--glass), #111418; border: 1px solid var(--line); box-shadow: none; }
.band__spur li { border-color: var(--line); }
.band__logo { filter: brightness(0) invert(1); opacity: .62; }
.band__mit span { color: rgba(242,244,245,.62); }

/* Überblick / Vorteile */
.zk__mark { color: var(--accent); }
.zk__karte { background: var(--glass), #111418; border-color: var(--line); box-shadow: none; transition: border-color .4s, transform .5s var(--ease); }
.zk__karte:hover { border-color: rgba(245,197,24,.4); transform: translateY(-4px); }
.zk__zahl { color: var(--ink); }
.zk__zahl em { color: var(--accent); }
.zk__chart { background: rgba(0,0,0,.25); border-color: var(--line); }
.zk__karte--mitte { background: linear-gradient(170deg, rgba(245,197,24,.16), rgba(245,197,24,.03)), #111418; border-color: rgba(245,197,24,.3); }
.zk__bild img { filter: saturate(.8) brightness(.85); }

/* Lösung mit Video */
.sol { background: none; }
.ico, .chip, .card { background: #171a1e; color: var(--ink); border: 1px solid var(--line); }
.xv__frame { background: linear-gradient(160deg, #3a3f45, #16191d 40%, #2b2f34); padding: 12px; border-radius: 26px; box-shadow: 0 0 0 1px rgba(255,255,255,.08), var(--shadow), 0 0 120px -40px rgba(245,197,24,.25); }
.xv__poster { background: #0d1013; }
.xv__label { background: rgba(20,24,28,.82); color: var(--ink); border: 1px solid var(--line2); backdrop-filter: blur(10px); }
.xv-close { background: #1b1f24; color: #fff; }
.step { background: var(--glass), #13161a; border: 1px solid var(--line); box-shadow: var(--shadow-s); }
.step .n { background: rgba(255,255,255,.08); }

/* Darum DYNAMIS */
.darkcard { border: 1px solid var(--line); background: radial-gradient(60% 80% at 75% 40%, rgba(245,197,24,.18), transparent 60%), #101215; }
.tile span { background: rgba(20,24,28,.9); color: var(--ink); border: 1px solid var(--line2); }

/* Praxisbeweis, Gründer, Abteilungen */
.beweis__zahlen div { background: var(--glass), #111418; border-color: var(--line); box-shadow: none; }
.beweis__zahlen b { color: var(--ink); }
.gr__sig { color: var(--accent); }
.gr__bilder img { box-shadow: var(--shadow); }
.dep { border: 1px solid var(--line); }

/* Rechner, Guide, Fundament */
.zeit__box, .gt__box { border: 1px solid var(--line); }
.fd-lage { background: rgba(255,255,255,.04); border-color: var(--line2); color: var(--ink); box-shadow: none; }
.fd-lage.ist-an { background: var(--accent); color: #1a1400; border-color: var(--accent); box-shadow: 0 0 40px -10px rgba(245,197,24,.6); }
.fd-panel { background: var(--glass), #111418; border: 1px solid var(--line); }
.fd-nr { color: var(--accent); font-family: var(--mono); font-weight: 500; }

/* Weg in drei Schritten */
.tl::before { border-color: var(--line2); }
.tl__row .img { background: linear-gradient(135deg, rgba(245,197,24,.45), rgba(245,197,24,.06)); }
.tl__row .num { box-shadow: 0 0 0 7px var(--bg), 0 0 30px rgba(245,197,24,.5); }

/* Abschluss, FAQ, Fuß */
.cta { border: 1px solid rgba(245,197,24,.25); background: radial-gradient(60% 90% at 50% 120%, rgba(245,197,24,.32), transparent 70%), #111418; }
.faq details { background: var(--glass), #111418; border: 1px solid var(--line); box-shadow: none; }
.faq details[open] { border-color: rgba(245,197,24,.3); }
.faq summary::after { color: var(--accent); }
.foot { background: #08090b; border-top: 1px solid var(--line); }
.fab { box-shadow: 0 0 0 1px var(--line2), var(--shadow); }

@media (max-width: 960px) {
  .nh { padding-top: 130px; }
  .nh .card, .nh .chip { display: none; }
  .ds__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ds { grid-template-columns: 1fr; } .ds aside { display: none; }
  .ds__kpis { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .ds__kpi { padding: 10px; } .ds__kpi small { font-size: 10.5px; } .ds__kpi small em, .ds__kpi span { display: none; } .ds__kpi b { font-size: 20px; }
  .nh__buehne { margin-top: 50px; padding-bottom: 60px; }
}
@media (prefers-reduced-motion: reduce) { .nh__monitor { transform: none; } }

/* Kopfbereich zweispaltig: Text links, runder Ausschnitt mit Vorteilen rechts */
.nh { padding-bottom: 110px; text-align: left; }
.nh__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.nh__grid h1 { margin-left: 0; font-size: clamp(38px, 1.4rem + 3.2vw, 68px); }
.nh__grid .nh__lead { margin-left: 0; }
.nh__grid .hero__cta { justify-content: flex-start; }
.nh .orb { width: min(100%, 540px); justify-self: center; }
.nh .orb__img { box-shadow: 0 0 0 1px rgba(245,197,24,.35), 0 0 0 10px rgba(255,255,255,.03), 0 40px 100px -30px #000, 0 0 120px -20px rgba(245,197,24,.35); }
.nh .orb__ring { border-color: rgba(245,197,24,.28); }
.nh .ico { background: rgba(20,24,28,.74); border: 1px solid var(--line2); color: var(--accent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nh__riese { bottom: -3vw; }
.ck { padding: 40px 0 0; overflow: hidden; }
.ck .nh__buehne { margin-top: 0; }
@media (max-width: 960px) {
  .nh__grid { grid-template-columns: 1fr; }
  .nh .orb { width: min(100%, 420px); }
  .nh .card, .nh .chip { display: flex; }
  .nh .card { display: block; }
}
@media (max-width: 520px) { .nh .card, .nh .ico { display: none; } }

/* ---------- Farbverlauf im Hintergrund ---------- */
html { background: var(--bg); }
body { background: transparent; }
body::before { content: ""; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 32% at 82% 18%, rgba(245,197,24,.16), transparent 70%),
    radial-gradient(34% 30% at 12% 72%, rgba(255,140,40,.11), transparent 70%),
    radial-gradient(30% 28% at 55% 95%, rgba(70,110,170,.12), transparent 70%),
    radial-gradient(26% 24% at 30% 20%, rgba(90,120,160,.08), transparent 70%);
}
#ueberblick, .beweis, #fundament, #ueber, #zusammenarbeit, #faq { isolation: isolate; }
#ueberblick::before, .beweis::before, #fundament::before, #ueber::before, #zusammenarbeit::before { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; }
#ueberblick::before { left: 8%; right: 8%; top: 38%; height: 420px; background: radial-gradient(closest-side, rgba(245,197,24,.30), rgba(255,140,40,.12) 60%, transparent); }
.beweis::before { left: 20%; width: 60%; top: 40%; height: 260px; background: radial-gradient(closest-side, rgba(70,110,170,.30), transparent); }
#ueber::before { right: 4%; width: 46%; top: 10%; height: 80%; background: radial-gradient(closest-side, rgba(245,197,24,.22), transparent); }
#fundament::before { left: 5%; width: 50%; top: 30%; height: 60%; background: radial-gradient(closest-side, rgba(245,197,24,.26), rgba(255,140,40,.1) 60%, transparent); }
#zusammenarbeit::before { right: 0; width: 40%; top: 20%; height: 50%; background: radial-gradient(closest-side, rgba(70,110,170,.22), transparent); }

/* ---------- Echtes Glas ---------- */
.zk__karte, .beweis__zahlen div, .fd-panel, .fd-lage, .step, .trust__bar, .darkcard, .gl {
  --glanz: radial-gradient(420px circle at var(--mx, 50%) var(--my, -30%), rgba(255,255,255,.11), transparent 45%);
  background: var(--glanz), linear-gradient(140deg, rgba(255,255,255,.09), rgba(255,255,255,.02) 55%, rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(255,255,255,.04), 0 30px 60px -30px rgba(0,0,0,.85);
  transition: border-color .4s, transform .5s var(--ease), box-shadow .4s;
}
.zk__karte:hover, .beweis__zahlen div:hover, .fd-panel:hover, .step:hover { border-color: rgba(245,197,24,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 1px rgba(245,197,24,.12), 0 30px 70px -30px rgba(0,0,0,.9), 0 0 60px -20px rgba(245,197,24,.35); }
.beweis__zahlen div:hover, .step:hover { transform: translateY(-4px); }
.zk__karte--mitte { background: var(--glanz), linear-gradient(160deg, rgba(245,197,24,.22), rgba(245,197,24,.04) 60%), linear-gradient(140deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border-color: rgba(245,197,24,.3); }
.zk__chart { background: rgba(0,0,0,.18); }
.fd-lage.ist-an { background: var(--accent); border-color: var(--accent); backdrop-filter: none; }
.darkcard { background: var(--glanz), radial-gradient(60% 80% at 75% 40%, rgba(245,197,24,.14), transparent 60%), linear-gradient(140deg, rgba(255,255,255,.07), rgba(255,255,255,.015)); }
.trust__bar { border-radius: var(--radius); }
.faq details { background: rgba(255,255,255,.035); }
/* Abteilungen: Beschriftung als Glasfläche auf dem Foto */
.dep .txt { top: auto; bottom: 14px; left: 12px; right: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(20,24,28,.35); border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); background: rgba(14,16,20,.72); transition: transform .5s var(--ease); }
.dep .pb { top: 14px; bottom: auto; background: rgba(20,24,28,.7); border: 1px solid rgba(255,255,255,.25); }
.dep .pb::after { color: #fff; }
.dep .more { bottom: 92px; }
.dep:hover .txt { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

/* Hallenbild läuft hinter Kopfbereich, Vertrauensleiste und Systemband durch */
.nh-hg { position: relative; isolation: isolate; overflow: hidden; padding-bottom: 60px; }
.nh-hg > .nh__halle { position: absolute; inset: 0; z-index: -2; }
.nh-hg > .nh__halle img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; opacity: .62; filter: saturate(.75); -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.nh-hg::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(55% 35% at 50% 0%, rgba(245,197,24,.18), transparent 70%), linear-gradient(180deg, rgba(11,13,16,.55) 0%, rgba(11,13,16,.72) 55%, rgba(11,13,16,.4) 85%, var(--bg) 100%); }
.nh { overflow: visible; isolation: auto; }
.nh::before { display: none; }
.nh-hg .trust__bar { background: var(--glanz), linear-gradient(140deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); }

/* ---------- Unterseiten: Foto hinter dem Kopfbereich ---------- */
.p-hero, .vo-hero, .pr-hero { position: relative; isolation: isolate; }
.hf { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hf img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; opacity: .34; filter: saturate(.7); -webkit-mask-image: linear-gradient(#000 45%, transparent 95%); mask-image: linear-gradient(#000 45%, transparent 95%); }
.hf::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 0%, rgba(245,197,24,.14), transparent 70%), linear-gradient(180deg, rgba(11,13,16,.45), rgba(11,13,16,.7) 60%, transparent); }

/* ---------- Bildschirm-Mockups auf Unterseiten: massiv statt durchsichtig ---------- */
.device__frame { background: linear-gradient(160deg, #3a3f45, #16191d 40%, #2b2f34); border: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 50px 100px -40px #000, 0 0 120px -40px rgba(245,197,24,.25); }
.device__frame::before { display: none; }
.screen, .screen--demo, .dm--screen { background: #0d1013; }
.screen aside { background: #0a0c0f; }
.dm__go { background: var(--accent); color: #1a1400; }
.play { background: rgba(20,24,28,.8); border: 1px solid var(--line2); backdrop-filter: blur(10px); }
.play::after { border-left-color: var(--accent); }

/* ---------- Große und breite Bildschirme: Seite wächst mit, statt schmal in der Mitte zu stehen ---------- */
@media (min-width: 1600px) { :root { --wrap: 1320px; } }
@media (min-width: 1800px) { html { zoom: 1.1; --z: 1.1; } }
@media (min-width: 2200px) { html { zoom: 1.22; --z: 1.22; } }
@media (min-width: 2800px) { html { zoom: 1.4; --z: 1.4; } }
/* auf großen Bildschirmen soll das Systemband noch im ersten Bild zu sehen sein */

/* Halle bei Nacht als bewegter Hintergrund (nur Rechner); das Standbild bleibt darunter liegen */
.nh-hg > .nh__halle video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; opacity: 0; filter: saturate(.75); -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); transition: opacity 1.4s ease; }
.nh-hg > .nh__halle video.ist-an { opacity: .62; }

/* ================= Bewegung (d321-bewegung.js setzt .bw, wenn Bewegung erlaubt ist) ================= */
/* Lesefortschritt oben */
.lesefortschritt { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 60; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, rgba(245,197,24,.2), var(--accent)); box-shadow: 0 0 12px rgba(245,197,24,.6); pointer-events: none; }


/* Kachel-Raster: nacheinander hereinkommen */
.bw .rv.staffel { opacity: 1; transform: none; }
.bw .rv.staffel > * { opacity: 0; transform: translateY(34px) scale(.97); transition: opacity .8s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i) * 90ms); }
.bw .rv.staffel.is-in > * { opacity: 1; transform: none; }

/* 3D-Neigung zur Maus; Anheben läuft über translate, damit sich beides nicht stört */
.bw .kippt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s var(--ease), border-color .4s, box-shadow .4s, translate .5s var(--ease); }
.zk__karte:hover, .beweis__zahlen div:hover, .step:hover { transform: none; translate: 0 -4px; }
.bw .rv.staffel.is-in > .kippt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.dep:hover { transform: none; translate: 0 -6px; scale: 1.02; }

/* Fotos mit Tiefe beim Scrollen */
.zk__bild, .tl__row .img, .gr__bilder, .ov__media .photo, .tile { overflow: hidden; }
.bw .zk__bild img, .bw .tl__row .img img, .bw .gr__bilder img, .bw .ov__media img, .bw .bf-gruender img, .bw .tile img { scale: 1.14; translate: 0 var(--par, 0%); }

/* Kopfbereiche der Unterseiten: Foto zoomt ganz langsam */
.bw .hf img { animation: kameraFahrt 26s ease-in-out infinite alternate; }
@keyframes kameraFahrt { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-1.5%, -1%, 0); } }

/* Runder Ausschnitt: Kärtchen folgen der Maus in unterschiedlicher Tiefe */
.bw .nh .orb .card, .bw .nh .orb .chip { translate: calc(var(--px, 0) * 34px) calc(var(--py, 0) * 26px); transition: translate .6s var(--ease); }
.bw .nh .orb .ico { translate: calc(var(--px, 0) * -22px) calc(var(--py, 0) * -18px); transition: translate .6s var(--ease); }
.bw .nh .orb__img { translate: calc(var(--px, 0) * 10px) calc(var(--py, 0) * 8px); transition: translate .8s var(--ease); }

/* Cockpit: Balken wachsen, Hinweise kommen nacheinander, LIVE pulsiert */
.bw .ds__balken i { transform-origin: bottom; transform: scaleY(0); transition: transform 1.1s var(--ease); }
.bw .nh__buehne.ist-an .ds__balken i { transform: none; }
.bw .ds__balken i:nth-child(odd) { transition-delay: .5s; } .bw .ds__balken i:nth-child(even) { transition-delay: .65s; } .bw .ds__balken i.a { transition-delay: .85s; }
.bw .ds__hw, .bw .ds__ev, .bw .ds__kpi { opacity: 0; translate: 0 12px; transition: opacity .7s var(--ease), translate .8s var(--ease); }
.bw .nh__buehne.ist-an .ds__kpi, .bw .nh__buehne.ist-an .ds__hw, .bw .nh__buehne.ist-an .ds__ev { opacity: 1; translate: none; }
.bw .ds__kpi:nth-child(2) { transition-delay: .12s; } .bw .ds__kpi:nth-child(3) { transition-delay: .24s; }
.bw .ds__hw { transition-delay: .9s; } .bw .ds__hw + .ds__hw { transition-delay: 1.3s; }
.bw .ds__ev { transition-delay: 1.6s; } .bw .ds__ev + .ds__ev { transition-delay: 1.9s; }
.ds h5 span { position: relative; }
.ds__tl h5 span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #ff5a4a; box-shadow: 0 0 0 0 rgba(255,90,74,.6); animation: livePuls 1.8s ease-out infinite; vertical-align: 1px; }
@keyframes livePuls { 70% { box-shadow: 0 0 0 7px rgba(255,90,74,0); } 100% { box-shadow: 0 0 0 0 rgba(255,90,74,0); } }

/* Gelbe Knöpfe: Lichtstreif beim Überfahren */
.btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); translate: -120% 0; transition: translate .8s var(--ease); }
.btn--primary:hover::after { translate: 120% 0; }

/* Videos in Kacheln: blenden über dem Standbild ein */
.bv { position: relative; }
.bv video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
.bv video.ist-an { opacity: 1; }

/* Abschnitte mit Anker landen unter der festen Kopfzeile */
section[id] { scroll-margin-top: 90px; }

/* Hallen-Draufsicht in den Kacheln: zoomt langsam hinein, als würde die Kamera absinken */
.bw .zk__bild:not(.bv) img { animation: draufsicht 18s ease-in-out infinite alternate; transform-origin: 55% 45%; }
@keyframes draufsicht { from { transform: scale(1); } to { transform: scale(1.18); } }

/* ---------- Formular "4 Wochen kostenlos testen" im dunklen Design ---------- */
/* d321-test.css wird erst später nachgeladen, daher mit "html" davor */
html .tf { background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)), #121519; color: var(--ink); box-shadow: 0 0 0 1px var(--line2), 0 50px 120px -30px #000, 0 0 120px -40px rgba(245,197,24,.35); }
html .tf::backdrop { background: rgba(8,9,11,.72); backdrop-filter: blur(12px); }
html .tf__zu { background: rgba(255,255,255,.08); color: var(--ink); }
html .tf__zu:hover { background: rgba(255,255,255,.14); }
html .tf h2 span { color: var(--accent); }
html .tf__karte { background: rgba(255,255,255,.04); box-shadow: 0 0 0 1px var(--line), 0 20px 60px -30px rgba(245,197,24,.35); }
html .tf__bar { background: rgba(255,255,255,.1); }
html .tf__wahl button { background: rgba(255,255,255,.04); border-color: var(--line2); color: var(--ink); }
html .tf__wahl button:hover, html .tf__wahl button:focus-visible { background: rgba(245,197,24,.1); border-color: var(--accent); }
html .tf__chips span { border-color: var(--line2); color: var(--ink); }
html .tf__chips input:checked + span { background: rgba(245,197,24,.16); border-color: var(--accent); }
html .tf__felder input, html .tf__felder textarea { background: rgba(255,255,255,.05); border-color: var(--line2); color: var(--ink); }
html .tf__felder input::placeholder, html .tf__felder textarea::placeholder { color: var(--faint); }
html .tf__ok input { accent-color: var(--accent); }
html .tf__fehler { background: rgba(229,72,77,.14); color: #ff9b95; }

/* Kopfzeile: kein Glasstreifen über die ganze Breite, auch nicht beim Scrollen. Glas nur an Logo, Menü und Knopf */
.head, .head.is-scrolled { background: transparent; box-shadow: none; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (min-width: 961px) { .head, .head.is-scrolled { height: 84px; } .head.is-scrolled .mega { top: 84px; } }

/* ---------- Apps in Entwicklung: sichtbar, gekennzeichnet, nicht anklickbar ---------- */
.bald { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(245,197,24,.35); background: rgba(245,197,24,.08); color: var(--accent); font: 500 10px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; font-style: normal; vertical-align: 2px; white-space: nowrap; }
a[aria-disabled="true"], a[data-bald] { cursor: default; }
.mlink--bald { opacity: .62 !important; }
.mlink--bald:hover { transform: none; border-color: var(--line); }
.mnav a.ist-bald { opacity: .55; }
.mnav a.ist-bald .bald { font-size: 9px; }
.as__app.ist-bald { opacity: .6; }
.as__app.ist-bald:hover { transform: none; }
.as__app .bald { margin: 10px 0 0; align-self: flex-start; }
.pk__preis--bald { margin-top: auto; }
.pk__preis--bald .bald { margin-left: 0; font-size: 11px; padding: 4px 10px; }
a[data-bald]:not(.btn) { text-decoration: none; }
.as__app .bald { width: max-content; justify-self: start; }
.pk__ic, .as__app i, .fchip i, .bcard i { background: rgba(245,197,24,.12); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(245,197,24,.2); }
.bw .rv.staffel.is-in > .ist-bald, .as__app.ist-bald { opacity: .6; }

/* Erstes Bild: Kopfbereich füllt genau den Bildschirm, das Systemband schließt unten ab */
@media (min-width: 961px) {
  .nh-hg { min-height: var(--hoehe); display: flex; flex-direction: column; padding-bottom: 26px; }
  .nh { flex: 1; display: flex; align-items: center; padding: 104px 0 36px; }
  .nh > .wrap { width: min(var(--wrap), 100% - 32px); }
  .nh-hg .trust { flex: none; }
  .nh-hg .band { margin-top: 22px; }
}
/* großer DYNAMIS-Schriftzug im Hintergrund: ganz sichtbar, von D bis S */
.nh__riese { font-size: calc(16.5vw / var(--z)); letter-spacing: -.03em; bottom: 2%; }
/* Kopfbereich passt sich der Fensterhöhe an: Überschrift und runder Ausschnitt werden so groß, wie Platz ist */
@media (min-width: 961px) {
  :root { --hoehe: 100svh; }  /* genaue Fensterhöhe setzt d321-glas.js, weil zoom die vh-Einheit verfälscht */
  .nh { padding: 88px 0 12px; }
  .nh__grid h1 { font-size: max(34px, min(clamp(38px, 1.4rem + 3.2vw, 72px), calc((var(--hoehe) - 560px) / 4.1))); margin-top: 18px; }
  .nh__grid .nh__lead { margin-top: 16px; }
  .nh__grid .hero__cta { margin-top: 24px; }
  .nh .orb { width: max(340px, min(100%, 560px, calc(var(--hoehe) - 330px))); }
  .nh-hg .trust__bar { padding-top: 18px; padding-bottom: 18px; }
  .nh-hg .band { margin-top: 16px; }
}