/* einklang OS · Portal-Sektion — Viz-Teil des Code-Embeds.
   Erzeugt aus dem Prototyp einklang-os-v2-sektion5-portal_6.html.
   Sektion, Raster, Textspalte, Statement und CTA sind in Webflow nativ und
   stehen NICHT hier. Token auf den Design-2.0-Stand gezogen. */
/* Eigenstaendige Fassung EINER Sektion der einklang-OS-Seite.
   Automatisch aus einklang-os-v2.html geschnitten (build_section.py) —
   CSS und Markup sind identisch, damit beide Dateien nicht auseinanderlaufen. */
:root{
  --ek-deepflow:#007889; --ek-supplyblue:#9BC4D5; --ek-amberyield:#FBB963;
  --ek-sunbuffer:#F5D88F; --ek-midnightsafe:#131936;
  --ek-surface:#f5f9fa; --ek-paper:#FFFFFF; --ek-ink:#1e1e1e;
  --ek-stone:#565656; --ek-stone-light:#B3B3B3;
  --ek-line:rgba(30,30,30,.1); --ek-line-dark:rgba(255,255,255,.10);
  --ek-bg:#E9EBEE; --maxw:1400px;
  --ek-r-panel:24px; --ek-r-card:16px; --ek-r-tile:14px; --ek-r-btn:100px; --ek-r-win:24px;
  --ek-shadow-panel:0 1px 2px rgba(19,25,54,.04),0 18px 50px -34px rgba(19,25,54,.28);
  --ek-shadow-win:0 1px 2px rgba(19,25,54,.05),0 44px 96px -48px rgba(0,0,0,.68);
  --ek-glass:rgba(255,255,255,.70); --ek-glass-line:rgba(227,232,239,.85);
  --ek-blur:blur(13px) saturate(118%);
  --ek-ease:cubic-bezier(.22,.61,.36,1);
  --ek-ease-out:cubic-bezier(.16,1,.3,1);        /* Apple-naher Ausklang */
  --ek-spring:cubic-bezier(.34,1.32,.64,1);      /* leichter Ueberschwinger */

  /* Seitenweite Anwendungsfall-Farben — identisch zum Kundenportal */
  --uc-pv:#FBB963; --uc-peak:#007889; --uc-buy:#9BC4D5;
  --uc-market:#131936; --uc-grid:#F5D88F;
}
/* ================= GEMEINSAM · FLUSSDIAGRAMM =================
   Knoten, Kern und Punkt-Rails werden von zwei Sektionen benutzt (Hero und
   Sektion 3). Deshalb stehen sie hier einmal und nicht zweimal.
   Die Position des Kerns setzt das JS je Buehne, weil die Buehnen
   unterschiedlich hoch sind. */
/* Knoten — das Element IST die Symbolkachel, die Beschriftung haengt darueber.
   So sitzt die Kachelmitte exakt auf dem Anker und die Rail-Geometrie bleibt
   unabhaengig von der Textlaenge. */
.fnode{position:absolute;width:44px;height:44px;transform:translate(-50%,-50%);
  transition:opacity .45s var(--ek-ease-out);will-change:opacity,transform}
.fnode__l{position:absolute;bottom:100%;left:50%;margin-bottom:7px;
  transform:translateX(-50%);white-space:nowrap;
  font:400 9.5px/1.4 'Inter',sans-serif;color:var(--ek-stone);
  transition:color .4s var(--ek-ease-out)}
.fnode__b{width:44px;height:44px;border-radius:11px;background:var(--ek-paper);
  border:1px solid var(--ek-line);display:grid;place-items:center;
  box-shadow:0 1px 2px rgba(19,25,54,.05),0 10px 24px -20px rgba(19,25,54,.45);
  transition:transform .5s var(--ek-spring),border-color .45s var(--ek-ease-out),
             background .45s var(--ek-ease-out),box-shadow .45s var(--ek-ease-out)}
.fnode__b svg{width:19px;height:19px;stroke:var(--ek-midnightsafe);fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .5s var(--ek-spring)}
/* Hervorhebung, wenn der zugehoerige Anwendungsfall unten durchfaehrt.
   Vier Mittel gleichzeitig: Anheben und Vergroessern, farbiger Rahmen mit
   Ring, getoente Flaeche, farbiges Symbol — plus Zuruecktreten der uebrigen.
   Einzeln traegt keines davon weit genug, um im kleinen Fenster aufzufallen. */
.fnode.is-hot{z-index:3}
.fnode.is-hot .fnode__b{transform:translateY(-4px) scale(1.18);
  background:var(--ucTint);border-color:var(--ucEdge);
  box-shadow:0 0 0 4px var(--ucRing),0 18px 32px -12px var(--ucSoft)}
.fnode.is-hot .fnode__b svg{transform:scale(1.06)}
.fnode.is-hot .fnode__l{color:var(--ek-ink)}
.orc.is-sweeping .fnode:not(.is-hot){opacity:.34}
/* Kern — Rezept aus dem Energiefluss */
.fcore{position:absolute;width:0;height:0;will-change:transform,opacity}
.fglow{position:absolute;left:0;top:0;width:200px;height:200px;margin:-100px 0 0 -100px;
  border-radius:50%;background:radial-gradient(circle,rgba(0,120,137,.12),rgba(0,120,137,0) 68%);
  animation:breathe 7s ease-in-out infinite}
.fhalo{position:absolute;left:0;top:0;width:126px;height:126px;margin:-63px 0 0 -63px;
  border-radius:50%;border:1.5px dashed rgba(0,120,137,.34);animation:spin 64s linear infinite}
.fdisc{position:absolute;left:0;top:0;width:100px;height:100px;margin:-50px 0 0 -50px;
  border-radius:50%;background:var(--ek-paper);border:2px solid var(--ek-deepflow);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 22px 50px -30px rgba(0,120,137,.75)}
/* Die Wortmarke hat unten mehr Luft als oben; der Block wird deshalb 2px
   nach oben gezogen, damit die Gruppe im Kreis optisch mittig sitzt. */
.fdisc__in{display:flex;flex-direction:column;align-items:center;transform:translateY(-2px)}
.fdisc__mark{width:31px;color:var(--ek-deepflow);line-height:0}
.fdisc__w{width:47px;margin-top:6px;line-height:0}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.07);opacity:1}}
/* Rails: 1:1 die Flussdarstellung aus dem Energiefluss-Diagramm. Keine Linie,
   nur laufende Punkte, die an den Enden ein- und ausblenden und dabei von
   .55 auf 1 skalieren. Die Keyframes sind unveraendert uebernommen; neu ist
   allein, dass die Rail gedreht werden darf, damit sie auch diagonal laeuft —
   die Punkte laufen dann in ihrer lokalen x-Achse. --tv ist der Laufweg in px. */
.orcrail{position:absolute;height:6px;margin-top:-3px;transform-origin:0 50%;
  opacity:0;transition:opacity .9s var(--ek-ease-out)}
.orcrail.is-on{opacity:1}
.orcrail i{position:absolute;left:0;top:0;width:6px;height:6px;border-radius:50%;
  opacity:0;will-change:transform,opacity}
@keyframes railH{0%{transform:translateX(0) scale(.55);opacity:0}
  18%{opacity:1;transform:translateX(calc(var(--tv) * .18)) scale(1)}
  82%{opacity:1;transform:translateX(calc(var(--tv) * .82)) scale(1)}
  100%{transform:translateX(var(--tv)) scale(.55);opacity:0}}
.os5_visual{width:100%}
/* Der Ausschnitt laeuft bis an die Sektionskante und darueber hinaus: das
   Innenpolster von .pad wird rechts aufgehoben, der Rest des Fensters wird
   beschnitten. Dadurch wird die Darstellung deutlich groesser, ohne das
   Raster von "Das System" anzutasten — und der Anschnitt sagt, dass das
   Portal weitergeht. */
.os5_cropwrap{position:relative;width:auto;overflow:hidden;
  margin-right:calc(-1 * clamp(28px,5vw,64px));
  border-radius:var(--ek-r-win) 0 0 var(--ek-r-win)}
/* Der Anschnitt endet nicht an einer Kante, sondern laeuft aus: rechts liegt
   ein Verlauf auf Papierweiss ueber dem Fenster. Er setzt erst hinter der
   Energiefluss-Kachel an, damit die Kachel unangetastet bleibt — verblasst
   nur die vierte KPI-Kachel, die ohnehin weitergeht. */
.os5_cropwrap::before{content:'';position:absolute;pointer-events:none;z-index:4;
  top:0;bottom:0;right:0;width:var(--os5-fade-x);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55) 55%,#fff 92%)}
/* Feste Buehne, per JS skaliert — dieselbe Mechanik wie beim Energiefluss der
   Homepage. STAGE-W ist die gebaute Breite, SHOW der sichtbare Teil; die
   Differenz ist der Anschnitt und liegt unter dem Fade. STAGE-H ist die
   Hoehe, die der Inhalt tatsaechlich braucht: Fensterleiste, Topbar,
   KPI-Zeile und Energiefluss-Kachel passen vollstaendig hinein, damit im
   Dashboard nichts zu scrollen ist. FADE-X gilt in Buehnenmassen; das JS
   rechnet es mit dem Skalierungsfaktor um. Unten gibt es keinen Fade mehr:
   das Fenster ist vertikal komplett, seine Unterkante ist die Aussage. */
.os5_cropwrap{--os5-stage-w:1180px;--os5-show:965px;--os5-stage-h:856px;
  --os5-fade-x:34}
.os5_crop{position:absolute;left:0;top:0;
  width:var(--os5-stage-w);height:var(--os5-stage-h);
  transform-origin:top left}
/* Ausserhalb des Fensters darf nichts liegen: die Buehne traegt als .d5host
   den grauen Dashboard-Grund, der an den runden Fensterecken als graue Ecke
   hervorsah. Beide Klassen im Selektor, weil das Asset-CSS spaeter steht. */
.os5_crop.d5host{background:transparent}
.os5_crop .win_shell{height:100%;border-radius:var(--ek-r-win) 0 0 var(--ek-r-win)}
/* Der Ausschnitt zeigt, er bedient nicht: die Navigation bleibt sichtbar,
   ist aber nicht anklickbar, damit nichts Interaktion vortaeuscht. */
.os5_crop .rail__nav,.os5_crop .rail__foot,.os5_crop .btn,
.os5_crop .win__bar{pointer-events:none}
.os5_crop .pane_shell{overflow:hidden}
/* Kacheln nur so hoch wie ihr Inhalt — sonst streckt die Rasterzeile den
   Energiefluss und unter dem Diagramm bleibt eine leere Flaeche. */
.os5_crop .view.is-on>.panel{align-self:start}
/* ---------- Asset: einklang OS Kundendashboard (unveraendert, gescoped) ----------
   Vollstaendig uebernommen, obwohl der Ausschnitt nur Leiste und eine Kachel
   zeigt: so sieht der Ausschnitt exakt aus wie das Produkt, und ein weiterer
   Ausschnitt kostet spaeter nur Markup. */
/* ============================================================
   einklang OS · Kundendashboard — Mockup v2
   01 Token · 02 Basis · 03 App-Shell · 04 Panels · 05 KPI
   06 Energiefluss · 07 Charts · 08 Fahrplan · 09 Berichte
   10 Listen · 11 Motion · 12 Responsive
   ============================================================ *//* ---------- 01 Token (CI, verbindlich) ---------- */



.d5host{
  --ek-deepflow:#007889; --ek-supplyblue:#9BC4D5; --ek-amberyield:#FBB963;
  --ek-sunbuffer:#F5D88F; --ek-midnightsafe:#131936;
  --ek-surface:#f5f9fa; --ek-paper:#FFFFFF; --ek-ink:#1e1e1e;
  --ek-stone:#565656; --ek-stone-light:#B3B3B3;
  --ek-line:rgba(30,30,30,.1); --ek-line-dark:rgba(255,255,255,.10);
  --ek-bg:#E9EBEE; --maxw:1400px;
  --ek-r-panel:24px; --ek-r-card:16px; --ek-r-btn:100px;
  --ek-shadow-panel:0 1px 2px rgba(19,25,54,.04),0 18px 50px -34px rgba(19,25,54,.28);
  --ek-shadow-hover:0 18px 40px -22px rgba(19,25,54,.5);
  --ek-glass:rgba(255,255,255,.70); --ek-glass-strong:rgba(255,255,255,.90);
  --ek-glass-line:rgba(227,232,239,.85);
  --ek-blur:blur(13px) saturate(118%);

  /* Dashboard-Ableitungen: nur Alpha und Geometrie, keine neuen Farbwerte */
  --ek-chrome:rgba(255,255,255,.62);
  --ek-chrome-blur:blur(22px) saturate(180%);
  --ek-r-tile:14px;
  --ek-ease:cubic-bezier(.22,.61,.36,1);
  --ek-rail:264px;
  --ek-bar:58px;
  --ek-r-win:24px;
  --ek-shadow-win:0 1px 2px rgba(19,25,54,.05),0 30px 64px -40px rgba(19,25,54,.45);
}
/* ---------- 02 Basis ---------- */


.d5host *{box-sizing:border-box;min-width:0}
.d5host{margin:0;background:var(--ek-bg);color:var(--ek-ink);
  font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  font-size:15px;line-height:1.5;
  
  padding:0}
.d5host h1, .d5host h2, .d5host h3, .d5host p, .d5host ul{margin:0}
.d5host ul{padding:0}
.d5host button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.d5host .tab{font-variant-numeric:tabular-nums}
.d5host .trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* .btn und .panel--col setzen display selbst — ohne !important zeigt das
   hidden-Attribut dort keine Wirkung. */

.d5host [hidden]{display:none!important}
.d5host .field_shell{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.d5host .field_shell i{position:absolute;display:block;border-radius:50%;filter:blur(60px)}
.d5host .field_shell i:nth-child(1){inset:-12% auto auto -8%;width:52vw;height:52vw;
  background:radial-gradient(circle,rgba(0,120,137,.10),rgba(0,120,137,0) 68%);animation:d5-driftA 46s ease-in-out infinite}
.d5host .field_shell i:nth-child(2){inset:auto -10% -18% auto;width:46vw;height:46vw;
  background:radial-gradient(circle,rgba(251,185,99,.08),rgba(251,185,99,0) 66%);animation:d5-driftB 58s ease-in-out infinite}
.d5host .field_shell i:nth-child(3){inset:38% auto auto 46%;width:34vw;height:34vw;
  background:radial-gradient(circle,rgba(155,196,213,.11),rgba(155,196,213,0) 68%);animation:d5-driftA 52s ease-in-out infinite reverse}
@keyframes d5-driftA{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(3%,-2%,0) scale(1.06)}}
@keyframes d5-driftB{0%,100%{transform:translate3d(0,0,0) scale(1.04)}50%{transform:translate3d(-3%,2%,0) scale(1)}}
/* ---------- 03 Fensterrahmen ---------- *//* Dieselbe Chrome wie in den Anwendungsfall-Diagrammen: 22 px Radius,
   48 px Leiste, drei Punkte links, Bildmarke, Titel. Das Fenster fuellt den
   Viewport, gescrollt wird darin — sonst wandert der Rahmen beim Scrollen
   weg, waehrend Topbar und Leiste am Browserrand kleben. */



.d5host .win_shell{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;
  border-radius:var(--ek-r-win);overflow:hidden;background:var(--ek-bg);
  border:1px solid var(--ek-line);box-shadow:var(--ek-shadow-win)}
.d5host .win__bar{position:relative;z-index:2;flex:none;display:flex;align-items:center;gap:11px;
  height:48px;padding:0 18px;background:rgba(244,246,250,.92);
  -webkit-backdrop-filter:var(--ek-chrome-blur);backdrop-filter:var(--ek-chrome-blur);
  border-bottom:1px solid var(--ek-line)}
.d5host .win__dots{display:flex;gap:6px;flex:none;margin-right:3px}
.d5host .win__dots i{display:block;width:9px;height:9px;border-radius:50%;background:rgba(19,25,54,.13)}
.d5host .win__bar .emark{width:20px;color:var(--ek-deepflow);line-height:0;flex:none}
.d5host .win__t{font-size:.84rem;font-weight:600;letter-spacing:-.005em;white-space:nowrap}
.d5host .win__url{margin-left:auto;flex:0 1 auto;padding:5px 14px;border-radius:var(--ek-r-btn);
  background:rgba(19,25,54,.045);font-size:.74rem;color:var(--ek-stone);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---------- 03b App-Shell ---------- */


.d5host .app_shell{position:relative;z-index:1;display:grid;
  grid-template-columns:var(--ek-rail) minmax(0,1fr);flex:1;min-height:0}
/* Die scrollende Spalte. min-height:0 ist Pflicht — Grid-Items stehen sonst
   auf min-height:auto und wachsen mit dem Inhalt aus dem Fenster heraus. */

.d5host .pane_shell{min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  scroll-behavior:smooth}
.d5host .rail_shell{height:100%;overflow-y:auto;display:flex;flex-direction:column;
  padding:22px 18px;gap:26px;background:rgba(19,25,54,.045);
  -webkit-backdrop-filter:var(--ek-chrome-blur);backdrop-filter:var(--ek-chrome-blur);
  border-right:1px solid rgba(19,25,54,.07)}
.d5host .rail__brand{display:flex;align-items:center;gap:11px;padding:6px 10px 0}
.d5host .rail__brand .emark{width:30px;color:var(--ek-deepflow);line-height:0;flex:none}
.d5host .rail__brand .wordmark{width:104px;line-height:0}
.d5host .rail__nav{display:flex;flex-direction:column;gap:2px}
.d5host .rail__sec{font-size:.66rem;font-weight:600;color:var(--ek-stone-light);
  padding:14px 12px 6px;letter-spacing:.04em}
.d5host .navi{display:flex;align-items:center;gap:11px;width:100%;text-align:left;white-space:nowrap;
  padding:9px 12px;border-radius:12px;font-size:.9rem;color:var(--ek-stone);
  transition:background .22s var(--ek-ease),color .22s var(--ek-ease),transform .12s ease}
.d5host .navi svg{width:17px;height:17px;flex:none;opacity:.8}
.d5host .navi:hover{background:rgba(19,25,54,.05);color:var(--ek-ink)}
.d5host .navi:active{transform:scale(.98)}
.d5host .navi.is-active{background:var(--ek-paper);color:var(--ek-midnightsafe);font-weight:600;
  box-shadow:0 1px 2px rgba(19,25,54,.05),0 8px 20px -16px rgba(19,25,54,.35)}
.d5host .navi.is-active svg{opacity:1;color:var(--ek-deepflow)}
.d5host .navi__badge{margin-left:auto;flex:none;font-size:.68rem;font-weight:600;color:var(--ek-deepflow);
  background:rgba(0,120,137,.10);border-radius:var(--ek-r-btn);padding:2px 8px}
.d5host .rail__foot{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.d5host .acct{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;
  background:var(--ek-glass);border:1px solid var(--ek-glass-line)}
.d5host .acct__av{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--ek-midnightsafe);color:#fff;font-size:.72rem;font-weight:600}
.d5host .acct__n{font-size:.82rem;font-weight:600;line-height:1.25}
.d5host .acct__r{font-size:.7rem;color:var(--ek-stone)}
.d5host .bar_shell{position:sticky;top:0;z-index:20;height:var(--ek-bar);
  display:flex;align-items:center;gap:16px;padding:0 clamp(18px,2.6vw,34px);
  background:var(--ek-chrome);
  -webkit-backdrop-filter:var(--ek-chrome-blur);backdrop-filter:var(--ek-chrome-blur)}
.d5host .bar_shell::after{content:'';position:absolute;left:0;right:0;top:100%;height:22px;
  pointer-events:none;opacity:0;transition:opacity .3s var(--ek-ease);
  background:linear-gradient(180deg,rgba(233,235,238,.85),rgba(233,235,238,0))}
.d5host .bar_shell.is-stuck::after{opacity:1}
.d5host .bar__title{font-size:1.02rem;font-weight:600;letter-spacing:-.01em;flex:none}
.d5host .bar__sub{font-size:.78rem;color:var(--ek-stone);flex:none}
.d5host .bar__spacer{flex:1}
.d5host .seg{position:relative;display:flex;padding:3px;border-radius:var(--ek-r-btn);flex:none;
  background:rgba(19,25,54,.055);isolation:isolate}
.d5host .seg__ind{position:absolute;top:3px;left:0;height:calc(100% - 6px);border-radius:var(--ek-r-btn);
  background:var(--ek-paper);box-shadow:0 1px 2px rgba(19,25,54,.10),0 6px 14px -10px rgba(19,25,54,.4);
  z-index:-1;will-change:transform,width}
.d5host .seg button{padding:6px 15px;border-radius:var(--ek-r-btn);font-size:.8rem;color:var(--ek-stone);
  white-space:nowrap;transition:color .2s var(--ek-ease),transform .1s ease}
.d5host .seg button:active{transform:scale(.96)}
.d5host .seg button.is-active{color:var(--ek-midnightsafe);font-weight:600}
.d5host .chip_live{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;flex:none;
  border-radius:var(--ek-r-btn);background:rgba(0,120,137,.09);white-space:nowrap;
  font-size:.76rem;font-weight:600;color:var(--ek-deepflow)}
.d5host .pulse{width:7px;height:7px;border-radius:50%;flex:none;background:var(--ek-deepflow);
  box-shadow:0 0 0 0 rgba(0,120,137,.5);animation:d5-pulse 2.4s infinite}
@keyframes d5-pulse{0%{box-shadow:0 0 0 0 rgba(0,120,137,.45)}70%{box-shadow:0 0 0 9px rgba(0,120,137,0)}100%{box-shadow:0 0 0 0 rgba(0,120,137,0)}}
.d5host .btn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--ek-r-btn);flex:none;
  font:600 .85rem/1 'Inter',sans-serif;padding:11px 20px;text-decoration:none;white-space:nowrap;
  transition:transform .12s ease,box-shadow .25s var(--ek-ease),background .25s var(--ek-ease)}
.d5host .btn svg{width:15px;height:15px;flex:none}
.d5host .btn--primary{background:var(--ek-deepflow);color:#fff}
.d5host .btn--primary:hover{box-shadow:0 10px 24px -12px rgba(0,120,137,.55)}
.d5host .btn--primary:active{transform:scale(.97)}
.d5host .btn--secondary{background:var(--ek-paper);color:var(--ek-midnightsafe);border:1px solid var(--ek-line)}
.d5host .btn--secondary:active{transform:scale(.97)}
.d5host .btn--icon{padding:9px;border-radius:50%;background:var(--ek-paper);border:1px solid var(--ek-line)}
.d5host .btn--icon svg{width:16px;height:16px;display:block;color:var(--ek-stone)}
/* ---------- 04 Panels ---------- */


.d5host .board_shell{padding:16px clamp(18px,2.6vw,34px) 48px}
.d5host .view{display:none}
.d5host .view.is-on{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;align-content:start}
.d5host .panel{position:relative;background:var(--ek-glass);
  -webkit-backdrop-filter:var(--ek-blur);backdrop-filter:var(--ek-blur);
  border:1px solid var(--ek-glass-line);border-radius:var(--ek-r-panel);
  box-shadow:var(--ek-shadow-panel);padding:20px 22px;
  transition:transform .4s var(--ek-ease),box-shadow .4s var(--ek-ease)}
.d5host .panel--grad{border:1.5px solid transparent;
  /* padding-box hier bewusst deckender: sonst schlaegt die Verlaufskontur
     durch das transluzente Glas und faerbt die ganze Flaeche ein. */
  background:linear-gradient(var(--ek-glass-strong),var(--ek-glass-strong)) padding-box,
    linear-gradient(120deg,var(--ek-supplyblue),var(--ek-amberyield)) border-box}
.d5host .panel__head{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.d5host .panel__title{font-size:.88rem;font-weight:600;letter-spacing:-.005em}
.d5host .panel__note{font-size:.74rem;color:var(--ek-stone)}
.d5host .panel__head .push{margin-left:auto}
/* Panels, deren Inhalt sich am Fuss ausrichtet, muessen selbst Flex-Spalte
   sein. Mit height:100% am Kind rechnet der Browser gegen die gestreckte
   Zeilenhoehe — ist der Inhalt hoeher, laeuft er unten aus dem Panel. */

.d5host .panel--col{display:flex;flex-direction:column}
.d5host .divider{height:1px;background:var(--ek-line)}
.d5host .panel--sticky{position:sticky;top:calc(var(--ek-bar) + 16px);align-self:start}
.d5host .c3{grid-column:span 3}
.d5host .c4{grid-column:span 4}
.d5host .c5{grid-column:span 5}
.d5host .c6{grid-column:span 6}
.d5host .c7{grid-column:span 7}
.d5host .c8{grid-column:span 8}
.d5host .c12{grid-column:span 12}
/* ---------- 05 KPI ---------- */


.d5host .kpi{display:flex;flex-direction:column;gap:2px}
.d5host .kpi:hover{transform:translateY(-4px);box-shadow:var(--ek-shadow-hover)}
.d5host .kpi__l{display:block;font-size:.76rem;color:var(--ek-stone)}
.d5host .kpi__v{display:block;font-size:clamp(1.45rem,2.1vw,1.9rem);font-weight:600;line-height:1.1;
  letter-spacing:-.025em;color:var(--ek-midnightsafe);font-variant-numeric:tabular-nums;margin-top:6px}
.d5host .kpi__v small{font-size:.8rem;font-weight:400;color:var(--ek-stone);letter-spacing:0}
.d5host .kpi__d{display:block;font-size:.74rem;color:var(--ek-stone);margin-top:5px}
.d5host .kpi__d b{font-weight:600;color:var(--ek-deepflow)}
.d5host .kpi__ring{display:flex;align-items:center;gap:15px;margin-top:4px}
.d5host .ring{width:56px;height:56px;flex:none;transform:rotate(-90deg)}
.d5host .ring circle{fill:none;stroke-width:5;stroke-linecap:round}
.d5host .ring .trk{stroke:rgba(19,25,54,.08)}
.d5host .ring .val{stroke:var(--ek-deepflow);stroke-dasharray:138.2;stroke-dashoffset:138.2;
  transition:stroke-dashoffset 1.4s var(--ek-ease)}
.d5host .mstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:14px 18px}
.d5host .mstats__v{display:block;font-size:1.08rem;font-weight:600;letter-spacing:-.02em;margin-top:3px;
  color:var(--ek-midnightsafe);font-variant-numeric:tabular-nums}
/* ---------- 06 Energiefluss ---------- */


.d5host .flow__wrap{display:flex;justify-content:center;overflow:hidden}
.d5host .flow{position:relative;width:700px;height:500px;flex:none;transform-origin:top center}
.d5host .fnode{position:absolute;width:160px;margin-left:-80px;text-align:center}
.d5host .fnode__l{font-size:.72rem;color:var(--ek-stone);margin-bottom:7px}
.d5host .fnode__b{width:58px;height:58px;margin:0 auto;border-radius:var(--ek-r-tile);
  background:var(--ek-paper);border:1px solid var(--ek-line);display:grid;place-items:center;
  box-shadow:0 1px 2px rgba(19,25,54,.05),0 10px 24px -20px rgba(19,25,54,.45);
  transition:transform .4s var(--ek-ease),box-shadow .4s var(--ek-ease)}
.d5host .fnode:hover .fnode__b{transform:translateY(-3px);box-shadow:var(--ek-shadow-hover)}
.d5host .fnode__b svg{width:24px;height:24px;color:var(--ek-midnightsafe)}
.d5host .fnode__v{font-size:.78rem;font-weight:600;margin-top:8px;font-variant-numeric:tabular-nums}
.d5host .fnode--grid{left:86px;top:197px}
.d5host .fnode--site{left:614px;top:197px}
.d5host .fnode--bat{left:350px;top:6px}
.d5host .fnode--pv{left:350px;top:392px}
.d5host .fnode--grid .fnode__v, .d5host .fnode--bat .fnode__v{color:var(--ek-deepflow)}
.d5host .fnode--site .fnode__v{color:var(--ek-midnightsafe)}
.d5host .fnode--pv .fnode__v{color:#C88A2E}
.d5host .fcore{position:absolute;left:350px;top:250px;width:136px;height:136px;margin:-68px 0 0 -68px;
  border-radius:50%;background:var(--ek-paper);border:2px solid var(--ek-deepflow);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 24px 60px -34px rgba(0,120,137,.75)}
/* Die Wortmarke hat unten mehr Luft als oben; der Block wird deshalb 3px
   nach oben gezogen, damit die Gruppe im Kreis optisch mittig sitzt. */

.d5host .fcore__in{display:flex;flex-direction:column;align-items:center;transform:translateY(-3px)}
.d5host .fcore__mark{width:44px;color:var(--ek-deepflow);line-height:0}
.d5host .fcore__w{width:66px;margin-top:8px;line-height:0}
.d5host .fhalo{position:absolute;left:350px;top:250px;width:172px;height:172px;margin:-86px 0 0 -86px;
  border-radius:50%;border:1.5px dashed rgba(0,120,137,.34);animation:d5-spin 64s linear infinite}
.d5host .fglow{position:absolute;left:350px;top:250px;width:280px;height:280px;margin:-140px 0 0 -140px;
  border-radius:50%;background:radial-gradient(circle,rgba(0,120,137,.10),rgba(0,120,137,0) 68%);
  animation:d5-breathe 7s ease-in-out infinite}
@keyframes d5-spin{to{transform:rotate(360deg)}}
@keyframes d5-breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.07);opacity:1}}
.d5host .rail{position:absolute}
.d5host .rail i{position:absolute;width:7px;height:7px;border-radius:50%;opacity:0;will-change:transform,opacity}
.d5host .rail--h{height:7px;margin-top:-3.5px;top:250px}
.d5host .rail--v{width:7px;margin-left:-3.5px;left:350px}
.d5host .rail--grid{left:129px;width:121px;--tv:114px}
.d5host .rail--site{left:450px;width:121px;--tv:114px}
.d5host .rail--bat{top:123px;height:33px;--tv:26px}
.d5host .rail--pv{top:344px;height:40px;--tv:33px}
.d5host .rail--grid i, .d5host .rail--bat i{background:var(--ek-deepflow)}
.d5host .rail--site i{background:var(--ek-supplyblue)}
.d5host .rail--pv i{background:var(--ek-amberyield)}
/* --tv = Laufweg der Rail in px. Prozent waere die Punktbreite, nicht die Rail. */

@keyframes d5-railH{0%{transform:translateX(0) scale(.55);opacity:0}
  18%{opacity:1;transform:translateX(calc(var(--tv) * .18)) scale(1)}
  82%{opacity:1;transform:translateX(calc(var(--tv) * .82)) scale(1)}
  100%{transform:translateX(var(--tv)) scale(.55);opacity:0}}
@keyframes d5-railV{0%{transform:translateY(0) scale(.55);opacity:0}
  22%{opacity:1;transform:translateY(calc(var(--tv) * .22)) scale(1)}
  78%{opacity:1;transform:translateY(calc(var(--tv) * .78)) scale(1)}
  100%{transform:translateY(var(--tv)) scale(.55);opacity:0}}
.d5host .flegend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:4px;align-items:center}
/* Legende eines Diagrammabschnitts: dicht unter seinem Band, mit Luft zum
   naechsten Abschnitt darunter — sonst liest sie sich als Kopf des Falschen. */

.d5host .flegend--band{margin:5px 0 16px}
.d5host .flegend--band:last-child{margin-bottom:0}
.d5host .lg{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;color:var(--ek-stone)}
/* Punkt = Fluss im Diagramm, Riegel = Balken im Chart, Strich = Kurve.
   Die Form der Marke sagt, welche Zeichenart sie erklaert. */

.d5host .lg i{width:9px;height:9px;border-radius:50%;flex:none}
.d5host .lg--load i{background:var(--ek-supplyblue)}
.d5host .lg--pv i{background:var(--ek-amberyield)}
.d5host .lg--ek i{background:var(--ek-deepflow)}
.d5host .lg--bar i{width:10px;height:14px;border-radius:2px}
.d5host .lg--line i{width:16px;height:2px;border-radius:2px}
.d5host .lg--ghost i{width:12px;height:14px;border-radius:2px;background:none;
  border:1.4px dashed var(--ek-supplyblue)}
.d5host .lg--dash i{width:16px;height:0;border-radius:0;background:none;
  border-top:1.5px dashed var(--ek-deepflow);opacity:.75}
.d5host .lg--fc i{background:var(--ek-supplyblue);opacity:.34}
.d5host .lg--note{color:var(--ek-stone-light);margin-left:auto}
.d5host .sw-load i{background:linear-gradient(180deg,rgba(155,196,213,.52),rgba(155,196,213,1))}
.d5host .sw-pv i{background:linear-gradient(180deg,rgba(251,185,99,.52),rgba(251,185,99,1))}
.d5host .sw-sun i{background:linear-gradient(180deg,rgba(245,216,143,.52),rgba(245,216,143,1))}
.d5host .sw-deep i{background:linear-gradient(180deg,rgba(0,120,137,.52),rgba(0,120,137,1))}
.d5host .sw-mid i{background:linear-gradient(180deg,rgba(19,25,54,.52),rgba(19,25,54,1))}
.d5host .sw-price i{background:var(--ek-supplyblue)}
.d5host .stat{display:flex;flex-direction:column;gap:13px;flex:1}
.d5host .stat__row{display:flex;align-items:baseline;gap:10px}
.d5host .stat__l{font-size:.76rem;color:var(--ek-stone)}
.d5host .stat__v{font-size:1.2rem;font-weight:600;letter-spacing:-.02em;margin-left:auto;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.d5host .soc{height:8px;border-radius:100px;background:rgba(19,25,54,.07);overflow:hidden}
.d5host .soc i{display:block;height:100%;border-radius:100px;background:var(--ek-deepflow);
  width:0;transition:width 1.6s var(--ek-ease)}
.d5host .next{padding:13px 15px;border-radius:var(--ek-r-tile);background:rgba(0,120,137,.06);
  border:1px solid rgba(0,120,137,.14)}
.d5host .stat .next{margin-top:auto}
.d5host .next__k{font-size:.7rem;font-weight:600;color:var(--ek-deepflow);margin-bottom:4px}
.d5host .next__t{font-size:.82rem;line-height:1.45}
/* ---------- 07 Charts (Grammatik der Anwendungsfall-Diagramme) ---------- *//* Diese Sektion ist 1:1 aus den Anwendungsfall-Diagrammen uebernommen:
   Glasverlauf .52 -> 1 von oben nach unten, rx 2, Grundlinie in --ek-line,
   Preis als feine Stufenlinie in Supplyblue mit Wash darunter, entfallener
   Bezug gestrichelt, zusaetzlicher Bezug in Deepflow. */



.d5host .chart{width:100%;height:auto;display:block;overflow:hidden}
.d5host .ax{font:400 10px 'Inter',sans-serif;fill:var(--ek-stone-light)}
.d5host .ax--kw{fill:#6f93a3}
.d5host .ax--ct{fill:var(--ek-supplyblue)}
/* Bandtitel ueber jedem Abschnitt */

.d5host .ax--band{font:600 10.5px 'Inter',sans-serif;fill:var(--ek-stone)}
.d5host .grid-l{stroke:var(--ek-line)}
.d5host .base-l{stroke:var(--ek-line);stroke-width:1}
.d5host .thr{stroke:var(--ek-stone-light);stroke-width:1;stroke-dasharray:4 5}
.d5host .ln-price{fill:none;stroke:var(--ek-supplyblue);stroke-width:1.5;
  stroke-linejoin:round;stroke-linecap:round}
.d5host .ghost{fill:none;stroke:var(--ek-supplyblue);stroke-width:1.4;stroke-dasharray:4 3}
.d5host .add{fill:var(--ek-deepflow)}
.d5host .is-fc{opacity:.34}
.d5host .nowline{stroke:rgba(19,25,54,.26);stroke-width:1;stroke-dasharray:2 4}
.d5host .nowtag{font:600 9.5px 'Inter',sans-serif;fill:var(--ek-stone)}
.d5host .bat-axis{stroke:var(--ek-line);stroke-width:1}
.d5host .soc-line{fill:none;stroke:var(--ek-deepflow);stroke-width:1.5;stroke-dasharray:2 3;opacity:.85}
/* Fassung unter der Ladestandskurve: ohne sie verschwindet die gestrichelte
   Linie dort, wo sie ueber die Balken laeuft. */

.d5host .soc-case{fill:none;stroke:#fff;stroke-width:3.6;opacity:.62;stroke-linecap:round}
/* ---------- 08 Fahrplan ---------- */

.d5host .slots{display:flex;flex-direction:column}
.d5host .slot{display:flex;align-items:center;gap:9px;padding:10px 0;border-top:1px solid var(--ek-line)}
.d5host .slot:first-child{border-top:0}
.d5host .slot__t{font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums;width:42px;flex:none}
.d5host .slot__d{width:8px;height:8px;border-radius:50%;flex:none}
.d5host .slot__b{flex:1}
.d5host .slot__n{display:block;font-size:.84rem;font-weight:600}
.d5host .slot__r{display:block;font-size:.72rem;color:var(--ek-stone)}
.d5host .slot__v{margin-left:auto;font-size:.82rem;font-weight:600;font-variant-numeric:tabular-nums;
  flex:none;white-space:nowrap;text-align:right}
.d5host .slot__v small{display:block;font-size:.68rem;font-weight:400;color:var(--ek-stone)}
.d5host .slot.is-now{background:rgba(0,120,137,.05);border-radius:10px;
  padding-left:10px;padding-right:10px;border-top-color:transparent}
.d5host .stack{display:flex;height:12px;border-radius:100px;overflow:hidden;gap:2px;margin:2px 0 14px}
/* Derselbe Glasverlauf wie die Balken in den Diagrammen — nur um 90 Grad
   gedreht, weil der Riegel hier liegt statt zu stehen. */

.d5host .stack i{display:block;height:100%;border-radius:2px;
  transition:width 1.4s var(--ek-ease);width:0}
.d5host .src{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:.82rem;
  border-top:1px solid var(--ek-line)}
.d5host .src:first-of-type{border-top:0}
.d5host .src i{width:9px;height:9px;border-radius:50%;flex:none}
.d5host .src b{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.d5host .s-peak{background:var(--ek-deepflow)}
.d5host .s-da{background:var(--ek-supplyblue)}
.d5host .s-id{background:var(--ek-midnightsafe)}
.d5host .s-pv{background:var(--ek-amberyield)}
.d5host .stack .s-peak{background:linear-gradient(90deg,rgba(0,120,137,.52),rgba(0,120,137,1))}
.d5host .stack .s-da{background:linear-gradient(90deg,rgba(155,196,213,.52),rgba(155,196,213,1))}
.d5host .stack .s-id{background:linear-gradient(90deg,rgba(19,25,54,.52),rgba(19,25,54,1))}
.d5host .stack .s-pv{background:linear-gradient(90deg,rgba(251,185,99,.52),rgba(251,185,99,1))}
/* ---------- 09 Berichte ---------- */


.d5host .filters{display:flex;flex-wrap:wrap;gap:8px}
.d5host .fchip{padding:7px 15px;border-radius:var(--ek-r-btn);font-size:.8rem;color:var(--ek-stone);
  background:var(--ek-paper);border:1px solid var(--ek-line);white-space:nowrap;
  transition:background .22s var(--ek-ease),color .22s var(--ek-ease),
    border-color .22s var(--ek-ease),transform .1s ease}
.d5host .fchip:hover{border-color:var(--ek-stone-light)}
.d5host .fchip:active{transform:scale(.96)}
.d5host .fchip.is-on{background:var(--ek-deepflow);border-color:var(--ek-deepflow);color:#fff;font-weight:600}
.d5host .fchip__n{opacity:.6;margin-left:5px;font-variant-numeric:tabular-nums}
.d5host .docs{display:flex;flex-direction:column}
.d5host .doc{display:flex;align-items:center;gap:13px;padding:12px;border-radius:var(--ek-r-tile);
  text-align:left;width:100%;transition:background .22s var(--ek-ease),transform .1s ease}
.d5host .doc + .doc{margin-top:2px}
.d5host .doc:hover{background:rgba(19,25,54,.04)}
.d5host .doc:active{transform:scale(.99)}
.d5host .doc.is-sel{background:rgba(0,120,137,.07);box-shadow:inset 0 0 0 1px rgba(0,120,137,.18)}
.d5host .doc__i{width:36px;height:42px;flex:none;border-radius:7px;display:grid;place-items:center;
  background:var(--ek-paper);border:1px solid var(--ek-line);position:relative}
.d5host .doc__i svg{width:15px;height:15px;color:var(--ek-stone-light)}
.d5host .doc__i b{position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);
  font-size:.5rem;font-weight:600;color:#fff;border-radius:3px;padding:1px 4px;background:var(--ek-stone)}
.d5host .doc__i.is-pdf b{background:#B44A3C}
.d5host .doc__i.is-xlsx b{background:var(--ek-deepflow)}
.d5host .doc__i.is-csv b{background:var(--ek-stone)}
.d5host .doc__b{flex:1}
.d5host .doc__n{display:flex;align-items:center;gap:0;font-size:.86rem;font-weight:600}
.d5host .doc__m{display:block;font-size:.72rem;color:var(--ek-stone)}
.d5host .doc__tag{flex:none;font-size:.68rem;font-weight:600;border-radius:var(--ek-r-btn);padding:3px 9px;
  white-space:nowrap}
.d5host .doc__v{flex:none;font-size:.84rem;font-weight:600;font-variant-numeric:tabular-nums;
  min-width:74px;text-align:right;white-space:nowrap}
.d5host .tag-finanz{background:rgba(0,120,137,.10);color:var(--ek-deepflow)}
.d5host .tag-energie{background:rgba(155,196,213,.30);color:#33697d}
.d5host .tag-technik{background:rgba(19,25,54,.07);color:var(--ek-midnightsafe)}
.d5host .tag-netz{background:rgba(251,185,99,.24);color:#8a5a12}
.d5host .doc__new{margin-left:8px;flex:none;font-size:.62rem;font-weight:600;color:var(--ek-deepflow);
  background:rgba(0,120,137,.12);border-radius:var(--ek-r-btn);padding:2px 7px}
.d5host .prev{display:flex;flex-direction:column;gap:14px}
.d5host .prev__cover{border-radius:var(--ek-r-card);overflow:hidden;
  background:linear-gradient(155deg,#eef4f6,#e4edf1 55%,#dbe6ec);
  border:1px solid var(--ek-line);padding:20px;min-height:180px;display:flex;flex-direction:column}
.d5host .prev__cover .emark{width:26px;color:var(--ek-deepflow);line-height:0}
.d5host .prev__ct{font-size:.68rem;font-weight:600;color:var(--ek-deepflow);margin-top:16px}
.d5host .prev__cn{font-size:1rem;font-weight:600;line-height:1.28;margin-top:5px;letter-spacing:-.01em}
.d5host .prev__cv{font-size:1.55rem;font-weight:600;letter-spacing:-.025em;margin-top:auto;
  font-variant-numeric:tabular-nums;color:var(--ek-midnightsafe)}
.d5host .prev__cs{font-size:.72rem;color:var(--ek-stone)}
.d5host .meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 14px}
.d5host .meta span{display:block;font-size:.72rem;color:var(--ek-stone)}
.d5host .meta b{display:block;font-size:.84rem;font-weight:600;margin-top:2px}
.d5host .bullets{display:flex;flex-direction:column;gap:7px}
.d5host .bullets li{list-style:none;font-size:.8rem;color:var(--ek-stone);
  display:flex;gap:9px;align-items:flex-start;line-height:1.45}
.d5host .bullets li::before{content:'';width:5px;height:5px;border-radius:50%;flex:none;
  background:var(--ek-deepflow);margin-top:7px}
.d5host .prev__acts{display:flex;gap:9px;flex-wrap:wrap}
.d5host .prev__acts .btn{flex:1 1 128px;justify-content:center;padding:11px 14px}
/* ---------- 9b Tabelle ---------- */


.d5host .tblwrap{overflow-x:auto;overscroll-behavior-x:contain}
.d5host .tbl{width:100%;border-collapse:collapse;font-size:.84rem}
.d5host .tbl th{font-weight:600;font-size:.72rem;color:var(--ek-stone);text-align:left;
  padding:0 14px 9px 0;white-space:nowrap;border-bottom:1px solid var(--ek-line)}
.d5host .tbl td{padding:12px 14px 12px 0;border-bottom:1px solid var(--ek-line);vertical-align:top}
.d5host .tbl tr:last-child td{border-bottom:0}
.d5host .tbl .num{text-align:right;padding-right:0;white-space:nowrap}
.d5host .tbl th.num{text-align:right;padding-right:0}
.d5host .tbl td:first-child{padding-right:24px}
.d5host .tbl .row__s{display:block}
.d5host .spark{width:100%;height:auto;display:block;overflow:hidden}
/* ---------- 10 Listen ---------- */


.d5host .row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--ek-line)}
.d5host .row:first-of-type{border-top:0}
.d5host .row__n{font-size:.85rem;font-weight:600}
.d5host .row__s{font-size:.72rem;color:var(--ek-stone)}
.d5host .row__v{margin-left:auto;font-size:.85rem;font-weight:600;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.d5host .row__bar{width:60px;height:5px;border-radius:100px;background:rgba(19,25,54,.07);
  overflow:hidden;flex:none}
.d5host .row__bar i{display:block;height:100%;background:var(--ek-supplyblue);width:0;
  transition:width 1.3s var(--ek-ease)}
/* ---------- 11 Motion ---------- */


.d5host .reveal{opacity:0;transform:translateY(18px) scale(.995);
  transition:opacity .7s var(--ek-ease),transform .7s var(--ek-ease)}
.d5host .reveal.in{opacity:1;transform:none}
@media(max-width:1180px){
  .doc__tag{display:none}
  /* In der schmalen KPI-Spalte konkurriert der Ring mit der Zahl —
     der Ring gibt nach, die Zahl bleibt lesbar. */
  .kpi__ring{gap:12px;flex-wrap:wrap}
  .ring{width:46px;height:46px}
}
@media(max-width:1100px){
  /* Unter dieser Breite bliebe fuer das Flow-Diagramm nur noch eine halbe
     Spalte — dann wird es unter seine Lesbarkeitsgrenze skaliert. */
  
  .d5host .panel--grad{grid-column:span 12}
}
@media(max-width:991px){
  .d5host .app_shell{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .d5host .rail_shell{height:auto;overflow:visible;flex-direction:row;align-items:center;
    gap:10px;padding:12px 18px;border-right:0;border-bottom:1px solid rgba(19,25,54,.07)}
  /* Sieben Eintraege passen liegend nicht in 991 px. Vorher haben sie sich
     ueberlappt — jetzt schiebt die Leiste horizontal statt zu kollidieren. */
  
  .d5host .rail__nav{flex-direction:row;gap:4px;margin-left:auto;min-width:0;
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .d5host .rail__nav::-webkit-scrollbar{display:none}
  .d5host .navi{width:auto;flex:none;white-space:nowrap}
  .d5host .rail__foot, .d5host .rail__sec{display:none}
  .d5host .navi__badge{display:none}
  .d5host .c3, .d5host .c4, .d5host .c5, .d5host .c7, .d5host .c8{grid-column:span 6}
  .d5host .c6{grid-column:span 12}
  /* Auf halber Spalte faellt die SVG-Schrift des Fahrplan-Charts unter ihre
     Lesbarkeitsgrenze — sie skaliert mit der viewBox. Dann lieber stapeln
     und volle Breite geben; das Nebeneinander traegt hier ohnehin nicht mehr. */
  
  .d5host #v-plan .c8{grid-column:span 12}
  /* Gestapelt hat das Sticky-Verhalten keinen Nutzen mehr und wirkt nur klebrig. */
  
  .d5host .panel--sticky{position:static}
}
@media(max-width:767px){
  /* Auf dem Telefon kostet der Rahmen nur Rand — die Leiste bleibt, damit
     das Fenster als Fenster lesbar ist, der Einzug faellt weg. */
  
  .d5host{padding:0}
  .d5host .win_shell{border-radius:0;border:0}
  .d5host .win__url{display:none}
  .d5host .bar__sub{display:none}
  .d5host .bar_shell .btn--icon{display:none}
  .d5host .c3, .d5host .c4, .d5host .c5, .d5host .c6, .d5host .c7, .d5host .c8{grid-column:span 12}
  .d5host .view.is-on{gap:12px}
  .d5host .panel{padding:17px 18px;border-radius:22px}
  .d5host .doc__v{display:none}
}
@media(max-width:479px){
  .d5host .seg button{padding:6px 11px;font-size:.74rem}
  .d5host .bar_shell{gap:10px}
  .d5host .bar_shell .chip_live{display:none}
  .d5host .navi>span:not(.navi__badge){display:none}
  .d5host .rail__brand .wordmark{display:none}
  .d5host .meta{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
  .d5host .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .d5host .field_shell i, .d5host .fhalo, .d5host .fglow, .d5host .pulse, .d5host .rail i{animation:none!important}
  .d5host .rail i{opacity:.85}
  .d5host .pane_shell{scroll-behavior:auto}
}
@media(prefers-reduced-transparency:reduce){
  .d5host .panel, .d5host .acct{background:var(--ek-paper);backdrop-filter:none;-webkit-backdrop-filter:none}
  .d5host .bar_shell, .d5host .rail_shell, .d5host .win__bar{background:var(--ek-surface);backdrop-filter:none;-webkit-backdrop-filter:none}
  .d5host .field_shell{display:none}
}
/* ---------- Buehne gegen den Viewport abschirmen ----------
   Die Buehne ist immer 1180 px breit und wird als Ganzes skaliert. Die
   Responsive- und vw-Regeln des Assets richten sich aber nach dem Viewport
   der Seite, nicht nach der Buehne: auf schmalen Bildschirmen kippte die
   Seitenleiste in die Waagerechte, die Energiefluss-Kachel sprang auf zwoelf
   Spalten und die Kachelhoehen wanderten. Hier wird deshalb die Weit-Ansicht
   festgeschrieben und jedes vw-Mass auf den Wert umgerechnet, den es in einem
   1180 px breiten Fenster haette. Steht bewusst nach dem Asset-CSS — gleiche
   Spezifitaet, spaetere Quelle. */
.os5_crop .app_shell{grid-template-columns:var(--ek-rail) minmax(0,1fr);
  grid-template-rows:none}
/* Graue Ecken oben und unten links: Fensterleiste und Seitenleiste tragen
   einen backdrop-filter. Ein Element mit Backdrop Filter bildet einen eigenen
   Kontext und wird in Chrome und Safari nicht mehr von overflow:hidden plus
   border-radius des Fensters beschnitten — die rechteckige Flaeche stand in
   der Rundung. Hinter beiden liegt im Ausschnitt nur der flache
   Fensterhintergrund, der Filter kostet also die Ecken und bringt nichts.
   Zusaetzlich tragen beide die Fensterrundung selbst, damit die Kante auch
   dort sitzt, wo der Filter erhalten bliebe. */
/* Beim Scrollen ueber die Sektion darf sich im Ausschnitt nichts bewegen: er
   ist ein Standbild des Produkts, kein Auftritt. Einblenden der Kacheln,
   Hochzaehlen der Werte und das Aufziehen des Rings sind deshalb im
   Ausschnitt abgeschaltet — alles steht sofort auf seinem Endwert. Die
   Laufpunkte im Diagramm bleiben, sie zeigen den laufenden Betrieb und
   haengen nicht am Scrollen. */
.os5_crop .reveal{opacity:1;transform:none;transition:none}
.os5_crop .ring .val{transition:none}
.os5_crop .win__bar{-webkit-backdrop-filter:none;backdrop-filter:none;
  border-radius:var(--ek-r-win) 0 0 0}
.os5_crop .bar_shell{-webkit-backdrop-filter:none;backdrop-filter:none}
.os5_crop .rail_shell{height:100%;overflow:hidden;flex-direction:column;align-items:stretch;
  gap:26px;padding:22px 18px;border-right:1px solid rgba(19,25,54,.07);border-bottom:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-radius:0 0 0 var(--ek-r-win)}
.os5_crop .rail__nav{flex-direction:column;gap:2px;margin-left:0;overflow:visible}
.os5_crop .rail__sec{display:block}
.os5_crop .rail__foot{display:flex}
.os5_crop .navi{width:100%;white-space:nowrap}
.os5_crop .navi__badge{display:block}
.os5_crop .win_shell{border:1px solid var(--ek-line)}
.os5_crop .bar__sub{display:block}
.os5_crop .bar_shell{padding:0 31px}
.os5_crop .board_shell{padding:16px 31px 48px}
.os5_crop .view.is-on{gap:16px}
.os5_crop .panel{padding:20px 22px;border-radius:var(--ek-r-panel)}
.os5_crop .kpi__v{font-size:24.8px}
.os5_crop .kpi__ring{gap:15px;flex-wrap:nowrap}
.os5_crop .ring{width:56px;height:56px}
.os5_crop .c3{grid-column:span 3}
.os5_crop .c4{grid-column:span 4}
/* Ohne die Anlagenstatus-Kachel wird die Zeile frei: der Energiefluss nimmt
   neun der zwoelf Spalten und endet damit genau dort, wo der Fade beginnt. */
.os5_crop .panel--grad{grid-column:span 9}
/* Das Flow-Diagramm ist 700 px breit und wird per Faktor auf die Kachel
   gebracht. Der unskalierte Kasten ragte zentriert links und rechts aus der
   Kachel heraus; linke Ausrichtung plus linker Skalierungsursprung nimmt den
   Ueberlauf heraus, ohne die Groesse zu aendern. */
.os5_crop .flow__wrap{justify-content:flex-start}
.os5_crop .flow{transform-origin:top left}
/* Der eigentliche Grund fuer die verschobenen Knoten: Hero und Sektion 3
   benutzen dieselben Klassennamen (.fnode, .fnode__l) unskopiert fuer ihr
   eigenes Flussdiagramm, in dem der Knoten die 44-px-Kachel selbst ist und
   per translate(-50%,-50%) auf dem Anker sitzt. Diese Regeln greifen auch in
   das Dashboard-Diagramm, das stattdessen mit 160 px Breite, negativem
   Rand und Beschriftung im Textfluss arbeitet — die Knoten wanderten dadurch
   um halbe Kachelmasse nach links und oben, "Netz" und "+1,2 MW" wurden am
   Kachelrand abgeschnitten. Hier gilt wieder die Dashboard-Mechanik. */
.os5_crop .fnode{transform:none;height:auto;will-change:auto}
.os5_crop .fnode__l{position:static;transform:none;bottom:auto;left:auto;
  font:400 .72rem/1.5 'Inter',sans-serif;color:var(--ek-stone)}
.os5_crop .field_shell i:nth-child(1){width:614px;height:614px}
.os5_crop .field_shell i:nth-child(2){width:543px;height:543px}
.os5_crop .field_shell i:nth-child(3){width:401px;height:401px}
@media(max-width:991px){
  .os5_visual{justify-self:center}
}