/* ============================================================
   08 · Daten & Visualisierung
   ============================================================ */
.d-tipp{position:absolute;left:0;top:0;z-index:5;padding:6px 10px;border-radius:9px;font:600 12px var(--sans);white-space:nowrap;pointer-events:none;
  background:var(--text);color:var(--bg);opacity:0;transform:translate(-50%,calc(-100% - 10px));transition:opacity .15s}
.d-tipp.da{opacity:1}

/* Kennzahlen */
.d-zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;width:100%}
.d-zahlen div{padding:24px;border-radius:20px;background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--linie)}
.d-zahlen b{display:block;font:300 clamp(2.4rem,4.4vw,3.6rem)/1 var(--sans);letter-spacing:-.05em;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,var(--text),var(--text-3));-webkit-background-clip:text;background-clip:text;color:transparent}
.d-zahlen span{display:block;margin-top:8px;font-size:13px;color:var(--text-3)}
@media (max-width:760px){.d-zahlen{grid-template-columns:1fr 1fr}}

/* Balken */
.d-balken{position:relative;width:100%;max-width:420px}
.d-balken-feld{display:flex;align-items:flex-end;gap:6px;height:190px;padding-bottom:22px;border-bottom:1px solid var(--linie-2);
  background:repeating-linear-gradient(0deg,var(--linie) 0 1px,transparent 1px 42px)}
.d-balken-feld i{position:relative;flex:1;height:0;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--akzent),color-mix(in oklab,var(--akzent) 45%,transparent));
  transition:height .9s var(--sanft),filter .2s;transition-delay:calc(var(--n) * 50ms)}
.d-balken.an .d-balken-feld i{height:var(--h)}
.d-balken-feld i:hover{filter:brightness(1.35)}
.d-balken-feld i span{position:absolute;left:50%;bottom:-20px;translate:-50% 0;font:500 9.5px var(--mono);color:var(--text-3)}

/* Linie */
.d-linie{position:relative;width:100%;max-width:440px;aspect-ratio:400/220}
.d-linie svg{width:100%;height:100%;overflow:visible}
.d-linie .gitter{stroke:var(--linie);stroke-width:1;vector-effect:non-scaling-stroke}
.d-linie .flaeche{opacity:0;transition:opacity 1s .6s}
.d-linie .strich{fill:none;stroke:var(--a2);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--sanft)}
.d-linie.an .strich{stroke-dashoffset:0}
.d-linie.an .flaeche{opacity:1}
.d-linie .kreuz{stroke:var(--linie-3);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;opacity:0}
.d-linie .punkt-aktiv{fill:var(--bg-2);stroke:var(--a2);stroke-width:2.5;vector-effect:non-scaling-stroke;opacity:0}
.d-linie:hover .kreuz,.d-linie:hover .punkt-aktiv{opacity:1}

/* Donut */
.d-donut{position:relative;display:grid;grid-template-columns:150px 1fr;align-items:center;gap:20px}
.d-donut svg{width:150px;height:150px;transform:rotate(-90deg)}
.d-donut circle{fill:none;stroke-width:16;transition:stroke-dasharray 1s var(--sanft),opacity .25s,stroke-width .25s}
.d-donut-mitte{position:absolute;left:0;top:0;width:150px;height:150px;display:grid;place-content:center;text-align:center;pointer-events:none}
.d-donut-mitte b{font-size:20px;letter-spacing:-.03em}
.d-donut-mitte span{font-size:11px;color:var(--text-3)}
.d-legende{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.d-legende li{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;transition:opacity .25s}
.d-legende li i{width:10px;height:10px;border-radius:3px;background:var(--f)}
.d-legende li b{margin-left:auto;font:500 12px var(--mono);color:var(--text-2)}
.d-donut.fokus .d-legende li:not(.an){opacity:.35}
.d-donut.fokus circle:not(.an){opacity:.25}
.d-donut circle.an{stroke-width:19}

/* Globus */
.d-globus{width:100%;height:100%;min-height:300px;cursor:grab;touch-action:pan-y}
.demo[data-demo="globus"] .demo-buehne{background:radial-gradient(60% 60% at 50% 50%,#13163a,#06060c 70%)}

/* Zeitleiste */
.d-zeit{position:relative;display:grid;gap:18px;margin:0;padding:0 0 0 34px;list-style:none;width:100%;max-width:300px}
.d-zeit::before,.d-zeit::after{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--linie-2)}
.d-zeit::after{bottom:auto;height:calc((100% - 12px) * var(--f,0));background:linear-gradient(var(--a2),var(--akzent));box-shadow:0 0 10px var(--akzent)}
.d-zeit li{position:relative;display:grid;opacity:.4;transition:opacity .4s}
.d-zeit li::before{content:"";position:absolute;left:-30px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--bg-2);box-shadow:inset 0 0 0 2px var(--linie-3);transition:box-shadow .4s,background .4s}
.d-zeit li.an{opacity:1}
.d-zeit li.an::before{background:var(--akzent);box-shadow:0 0 0 4px var(--akzent-zart)}
.d-zeit b{font:600 15px var(--mono)}
.d-zeit span{font-size:13.5px;color:var(--text-2)}

/* Code */
.d-code,.d-term{width:100%;max-width:440px;border-radius:16px;overflow:hidden;background:#0c0c14;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 30px 60px -30px rgba(0,0,0,.8);color:#e4e4ef}
.d-code-kopf,.d-term-kopf{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.07);background:#11111b}
.d-code-kopf i,.d-term-kopf i{width:10px;height:10px;border-radius:50%;background:#ff5f57}
.d-code-kopf i:nth-child(2),.d-term-kopf i:nth-child(2){background:#febc2e}
.d-code-kopf i:nth-child(3),.d-term-kopf i:nth-child(3){background:#28c840}
.d-code-kopf span,.d-term-kopf span{margin-left:10px;font:500 11px var(--mono);color:#8a8aa0}
.d-code-kopf .knopf{margin-left:auto;padding:6px 10px;font-size:11px;background:rgba(255,255,255,.08);color:#e4e4ef;box-shadow:none}
.d-code pre,.d-term pre{margin:0;padding:16px 18px;min-height:190px;font:500 12.5px/1.65 var(--mono);white-space:pre-wrap}
.d-code code{background:none;padding:0;font:inherit}
.tk-kw{color:#c792ea}.tk-str{color:#c3e88d}.tk-num{color:#f78c6c}.tk-kom{color:#676e95;font-style:italic}.tk-fn{color:#82aaff}.tk-op{color:#89ddff}
.d-cursor{display:inline-block;width:7px;height:1.1em;vertical-align:-.2em;background:#82aaff;animation:caret 1s steps(1) infinite}
.d-term pre{color:#c8c8d8}
.d-term .t-prompt{color:#22d3ee}.d-term .t-ok{color:#4ade80}.d-term .t-warn{color:#fbbf24}.d-term .t-dim{color:#676e95}

/* Orbit */
.d-orbit{position:relative;width:240px;height:240px}
.d-orbit-mitte{position:absolute;inset:0;margin:auto;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;font-size:24px;color:#fff;
  background:radial-gradient(circle at 35% 30%,color-mix(in oklab,var(--akzent) 70%,#fff),var(--akzent));box-shadow:0 0 40px var(--akzent-zart),0 0 0 8px var(--akzent-zart)}
.d-bahn{position:absolute;inset:0;margin:auto;border-radius:50%;box-shadow:inset 0 0 0 1px var(--linie-2);animation:dreh 18s linear infinite}
.d-bahn-1{width:150px;height:150px}
.d-bahn-2{width:236px;height:236px;animation-duration:28s;animation-direction:reverse}
.d-bahn i{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--w)) translateX(var(--r))}
.d-bahn-1 i{--r:75px}.d-bahn-2 i{--r:118px}
.d-bahn span{position:absolute;left:-17px;top:-17px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:14px;font-style:normal;
  background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--linie-2),0 6px 14px -6px rgba(0,0,0,.5);
  transform:rotate(calc(var(--w) * -1));animation:dreh 18s linear infinite reverse}
.d-bahn-2 span{animation-duration:28s;animation-direction:normal}

/* Datenstrahlen */
.d-netz{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;max-width:400px;height:220px}
.d-netz-spalte{position:relative;z-index:1;display:grid;gap:22px}
.d-knoten{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;font:700 16px var(--sans);font-style:normal;background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--linie-2),0 10px 24px -10px rgba(0,0,0,.6)}
.d-hub{width:70px;height:70px;font-size:26px;color:#fff;background:linear-gradient(140deg,var(--a2),var(--akzent));box-shadow:0 0 40px -6px var(--akzent)}
.d-netz-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.d-netz-svg .spur{fill:none;stroke:var(--linie-2);stroke-width:2}
.d-netz-svg .puls{fill:none;stroke:url(#d-puls-verlauf);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:24 300;animation:puls-lauf 2.2s linear infinite}
@keyframes puls-lauf{from{stroke-dashoffset:324}to{stroke-dashoffset:0}}

/* Heatmap */
.d-heat-box{width:100%;overflow-x:auto;scrollbar-width:thin}
.d-heat{display:grid;grid-template-rows:repeat(7,12px);grid-auto-flow:column;grid-auto-columns:12px;gap:3px;width:max-content;margin:0 auto}
.d-heat i{border-radius:3px;background:var(--linie);opacity:0;transform:scale(.4);transition:opacity .4s,transform .4s var(--feder);transition-delay:calc(var(--s) * 14ms)}
.d-heat.an i{opacity:1;transform:none}
.d-heat i[data-l="1"]{background:color-mix(in oklab,var(--akzent) 30%,var(--bg-3))}
.d-heat i[data-l="2"]{background:color-mix(in oklab,var(--akzent) 55%,var(--bg-3))}
.d-heat i[data-l="3"]{background:color-mix(in oklab,var(--akzent) 80%,var(--bg-3))}
.d-heat i[data-l="4"]{background:var(--akzent);box-shadow:0 0 8px var(--akzent-zart)}
.d-heat i:hover{outline:2px solid var(--text);outline-offset:1px}
.d-heat-fuss{display:flex;justify-content:space-between;gap:20px;margin:14px auto 0;max-width:800px;font-size:12px;color:var(--text-3)}
.d-heat-skala{display:flex;align-items:center;gap:3px}
.d-heat-skala i{width:12px;height:12px;border-radius:3px;background:var(--linie)}
.d-heat-skala i:nth-child(2){background:color-mix(in oklab,var(--akzent) 30%,var(--bg-3))}
.d-heat-skala i:nth-child(3){background:color-mix(in oklab,var(--akzent) 55%,var(--bg-3))}
.d-heat-skala i:nth-child(4){background:color-mix(in oklab,var(--akzent) 80%,var(--bg-3))}
.d-heat-skala i:nth-child(5){background:var(--akzent)}

/* Live */
.d-live{width:100%;max-width:380px;padding:18px;border-radius:20px;background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--linie)}
.d-live-kopf{display:flex;align-items:baseline;gap:12px}
.d-live-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:6px;font:700 10px var(--mono);letter-spacing:.12em;color:#f87171;background:rgba(248,113,113,.12)}
.d-live-tag i{width:6px;height:6px;border-radius:50%;background:#f87171;animation:puls 1.4s infinite}
.d-live-wert{font:300 32px/1 var(--sans);letter-spacing:-.04em;font-variant-numeric:tabular-nums;transition:color .3s}
.d-live-wert.hoch{color:var(--gut)}.d-live-wert.runter{color:var(--schlecht)}
.d-live-delta{font:500 12px var(--mono);color:var(--text-3)}
.d-live canvas{width:100%;height:120px;margin-top:10px}

/* Ringe */
.d-ringe{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:20px}
.d-ringe svg{width:150px;height:150px;transform:rotate(-90deg)}
.d-ringe circle{fill:none;stroke-width:10;stroke-linecap:round}
.d-ringe .r-spur{opacity:.18}
.d-ringe .r-wert{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.6s var(--sanft)}
.d-ringe .r1{stroke:#fa114f;color:#fa114f}.d-ringe .r2{stroke:#a3f905;color:#7cc203}.d-ringe .r3{stroke:#00d8fe;color:#00b4d4}
.d-ringe-text{display:grid;gap:6px;margin:0;padding:0;list-style:none;font-size:13px;color:var(--text-2)}
.d-ringe-text b{margin-right:4px;font:600 18px var(--sans);font-variant-numeric:tabular-nums}
.d-ringe-text li{color:var(--text-2)}
.d-ringe-text li b{color:inherit}
.d-ringe-text li.r1 b{color:#fa114f}.d-ringe-text li.r2 b{color:#7cc203}.d-ringe-text li.r3 b{color:#00b4d4}
.d-ringe .knopf{grid-column:1/-1;justify-self:center}