/* ==========================================================================
   HAHNE DIGITAL – HD CORE
   --------------------------------------------------------------------------
   Hero-Szene und scrollgesteuerte Systemgeschichte der Startseite.

   Aufbau
    01  Story-Container und klebende Bühne
    02  Hero-Text und Szenentexte
    03  Das Systemobjekt „HD Core“ (DOM/CSS-3D + SVG)
    04  Scharfe Beschriftungen (HTML-Overlay)
    05  Technische Anzeigen
    06  Ruhige Fassung (ohne JavaScript, reduzierte Bewegung, schwache Geräte)
    07  Sticky Produktnavigation
    08  Responsive

   Steuerung
    assets/hd-core.js liest den Scrollfortschritt (0 … 1), rechnet Kamera
    und Szenenwerte aus und schreibt sie als Custom Properties auf die
    Bühne. Diese Datei bildet die Werte ab – ausschließlich über transform
    und opacity, ohne Layoutberechnung. Jede Bewegung läuft rückwärts
    genauso wie vorwärts, weil jeder Wert nur vom Fortschritt abhängt.
   ========================================================================== */

/* ==========================================================================
   01  STORY-CONTAINER UND BÜHNE
   ========================================================================== */

.story{
  position:relative;
  --story-h:560svh;             /* Länge der Scrollstrecke (Desktop)      */
  --p:0;
  --copy:1;                     /* Sichtbarkeit des Hero-Textes            */
  --sep:0;                      /* Explosionsgrad der Ebenen               */
  --lid:1;                      /* Deckel                                  */
  --trace:0;                    /* Leiterbahnen                            */
  --chip:0;                     /* Chiplets                                */
  --flow:0;                     /* Geschäftsablauf                         */
  --flowop:0;
  --srv:0;                      /* Server-/Sicherheitsebene                */
  --dash:0;                     /* Unternehmensansicht                     */
  --ifop:1;--lgop:1;--dtop:1;   /* Deckung je Ebene                        */
  --lift:0;                     /* Interface hebt sich beim Zoom in den Kern */
  --tags:0;--chips:0;--wf:0;--srvl:0;
  --c1:0;--c2:0;--c3:0;--c4:0;--c5:0;--c6:0;--c7:0;
  --fit:1;
  background:var(--paper);
}
.story-marker{position:absolute;left:0;width:1px;height:1px;pointer-events:none}
.story-marker--system{top:30%}

.story-stage{
  position:relative;
  min-height:calc(100svh - var(--nav-h));
  overflow:hidden;
  isolation:isolate;
}
/* Das Layout hängt an html.hd-live – gesetzt von assets/hd-core-init.js noch
   vor dem ersten Bild, damit nichts springt. Die Zustandswerte setzt
   assets/hd-core.js (.is-live). */
.hd-live .story{height:var(--story-h)}
.hd-live .story .story-stage{
  position:sticky;top:0;
  height:100svh;min-height:0;
}

/* Sehr ruhiges technisches Raster – nur innerhalb der Systemdarstellung */
.story-grid{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(to right,rgba(242,239,232,.04) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(242,239,232,.04) 1px,transparent 1px);
  background-size:clamp(56px,6vw,96px) clamp(56px,6vw,96px);
  -webkit-mask-image:radial-gradient(ellipse 70% 78% at 68% 50%,#000 10%,transparent 72%);
  mask-image:radial-gradient(ellipse 70% 78% at 68% 50%,#000 10%,transparent 72%);
  opacity:.9;
}
.story-grid:after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 46% 56% at 70% 48%,rgba(98,217,227,.10),transparent 70%),
    radial-gradient(ellipse 60% 70% at 8% 0%,rgba(242,239,232,.035),transparent 70%);
}

.story-layout{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:minmax(0,.5fr) minmax(0,.5fr);
  grid-template-rows:minmax(0,1fr);
  grid-template-areas:"copy core";
  align-items:center;
  height:100%;
  padding-top:var(--nav-h);
  padding-bottom:clamp(44px,6vh,72px);
  column-gap:clamp(16px,2vw,40px);
}

/* ==========================================================================
   02  HERO-TEXT UND SZENENTEXTE
   ========================================================================== */

.hero-copy{
  grid-area:copy;
  position:relative;z-index:2;
  opacity:var(--copy);
  transform:translate3d(0,calc((1 - var(--copy)) * -18px),0);
  pointer-events:none;
  max-width:36rem;
}
html:not(.hd-live) .hero-copy,
.story[data-copy="1"] .hero-copy{pointer-events:auto}
.story[data-copy="0"] .hero-copy{visibility:hidden}

.hero-copy h1{
  font-size:var(--fs-h1);
  font-weight:420;
  line-height:var(--lh-display);
  letter-spacing:var(--tr-display);
  margin:var(--s-5) 0 var(--s-5);
  max-width:11ch;
  text-wrap:balance;
}
.hero-copy h1 span,.hero-copy h1 em{display:block;font-style:normal}
.hero-copy h1 em{color:var(--ink);position:relative;padding-bottom:.06em}
.hero-copy h1 em:after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:linear-gradient(to right,var(--accent-ink),transparent 70%);
  transform:scaleX(0);transform-origin:left;
  animation:ruleIn var(--duration-cine) var(--ease-out) .5s forwards;
}
@keyframes ruleIn{to{transform:scaleX(1)}}
.hero-copy .lead{max-width:44ch;font-size:var(--fs-body);line-height:1.55}
.hero-copy .hero-actions{margin-top:var(--s-5)}
.hero-copy .hero-actions .btn{padding:0 22px}

/* Sanfter Eintritt beim Laden – nur über transform/opacity, ohne Maske */
.hero-copy>*{animation:heroIn 1s var(--ease-entry) both}
.hero-copy>:nth-child(2){animation-delay:.08s}
.hero-copy>:nth-child(3){animation-delay:.16s}
.hero-copy>:nth-child(4){animation-delay:.24s}
.hero-copy>:nth-child(5){animation-delay:.3s}
@keyframes heroIn{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}

/* Szenentexte: dieselbe Spalte wie der Hero-Text, ein Satz je Szene ------- */
.story-captions{
  grid-area:copy;
  position:relative;z-index:2;
  display:grid;
  align-content:center;
  pointer-events:none;
  max-width:34rem;
}
.cap{
  grid-area:1/1;
  margin:0;
  opacity:var(--w,0);
  transform:translate3d(0,calc((1 - var(--w,0)) * 22px),0);
  will-change:opacity,transform;
}
.cap b{
  display:block;
  font-size:var(--fs-h2);
  font-weight:430;
  line-height:var(--lh-head);
  letter-spacing:var(--tr-head);
  color:var(--ink);
  max-width:14ch;
  text-wrap:balance;
}
.cap span{
  display:block;
  margin-top:var(--s-4);
  font-size:var(--fs-lead);
  color:var(--ink-soft);
  max-width:38ch;
  line-height:1.5;
}
.cap:before{
  content:"0" attr(data-cap) " / 07";
  display:block;
  font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:var(--tr-meta);
  text-transform:uppercase;color:var(--accent-ink);
  margin-bottom:var(--s-4);
}
.cap[data-cap="1"]{--w:var(--c1)}
.cap[data-cap="2"]{--w:var(--c2)}
.cap[data-cap="3"]{--w:var(--c3)}
.cap[data-cap="4"]{--w:var(--c4)}
.cap[data-cap="5"]{--w:var(--c5)}
.cap[data-cap="6"]{--w:var(--c6)}
.cap[data-cap="7"]{--w:var(--c7)}

/* ==========================================================================
   03  DAS SYSTEMOBJEKT „HD CORE“
   --------------------------------------------------------------------------
   Drei Ebenen (Data, Logic, Interface) als Platten mit Stärke, darüber der
   Deckel des geschlossenen Geräts. Alles ist Geometrie im Code: keine
   Bibliothek, keine Modelle, keine Bilddateien.
   ========================================================================== */

.core-viewport,.core-overlay{
  grid-area:core;
  align-self:stretch;
  position:relative;
  min-height:0;
  /* Die Bühne läuft rechts über die Inhaltsspalte hinaus */
  margin-right:calc(-1 * var(--bleed));
}
.story{--bleed:calc((100vw - min(var(--max),100vw - 2*var(--gutter))) / 2)}

.core-viewport{
  perspective:1500px;
  perspective-origin:50% 50%;
  overflow:visible;
  z-index:1;
}
.core{
  position:absolute;left:50%;top:50%;width:0;height:0;
  transform-style:preserve-3d;
  transform-origin:0 0;
  transform:scale(var(--fit)) rotateX(58deg) rotateZ(-34deg);
  will-change:transform;
}

/* Bezugsebene unter der Anlage ------------------------------------------- */
.floor{
  position:absolute;left:-700px;top:-500px;width:1400px;height:1000px;
  transform:translateZ(calc(-190px - var(--sep) * 130px));
  background-image:
    linear-gradient(to right,rgba(242,239,232,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(242,239,232,.05) 1px,transparent 1px);
  background-size:70px 70px;
  -webkit-mask-image:radial-gradient(ellipse 42% 42% at 50% 50%,#000 20%,transparent 70%);
  mask-image:radial-gradient(ellipse 42% 42% at 50% 50%,#000 20%,transparent 70%);
  opacity:calc(.35 + var(--sep) * .45);
}

/* Platten ----------------------------------------------------------------- */
.plate,.lid{
  position:absolute;left:-280px;top:-200px;width:560px;height:400px;
  transform-style:preserve-3d;
  --th:12px;
}
/* Ebenenabstand in der Explosionsansicht: 230 px – derselbe Wert steht
   als EBENE in hd-core.js (Projektion der Beschriftungen). */
.plate--data{transform:translateZ(calc(var(--sep) * -230px));opacity:var(--dtop)}
.plate--logic{opacity:var(--lgop)}
.plate--interface{
  transform:translateZ(calc(var(--sep) * 230px + var(--lift) * 150px));
  opacity:var(--ifop);
}
.lid{
  transform:translateZ(calc(var(--sep) * 230px + 14px + (1 - var(--lid)) * 120px));
  opacity:var(--lid);
}
.plate-face,.lid-face{
  position:absolute;inset:0;border-radius:14px;
  background:
    linear-gradient(118deg,rgba(255,255,255,.07),rgba(255,255,255,0) 40%),
    linear-gradient(302deg,rgba(98,217,227,.06),rgba(98,217,227,0) 46%),
    #0b1215;
  box-shadow:
    inset 0 0 0 1px rgba(242,239,232,.10),
    inset 1px 1px 0 rgba(255,255,255,.15),
    inset -1px -1px 0 rgba(0,0,0,.45);
}
.plate--interface .plate-face{
  background:
    linear-gradient(118deg,rgba(255,255,255,.11),rgba(255,255,255,.02) 42%,rgba(255,255,255,0) 70%),
    linear-gradient(302deg,rgba(98,217,227,.05),rgba(98,217,227,0) 50%),
    rgba(17,27,31,.74);
  box-shadow:
    inset 0 0 0 1px rgba(242,239,232,.14),
    inset 1px 1px 0 rgba(255,255,255,.22),
    inset -1px -1px 0 rgba(0,0,0,.3);
}
.plate-art{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}

/* Stärke der Platten: zwei Seitenflächen, die zum Betrachter zeigen */
.plate-edge{position:absolute;backface-visibility:hidden}
.plate-edge--front{
  left:6px;top:100%;width:calc(100% - 12px);height:var(--th);
  transform-origin:50% 0;transform:rotateX(-90deg);
  background:linear-gradient(to bottom,#111a1e,#05080a);
}
.plate-edge--left{
  left:0;top:6px;width:var(--th);height:calc(100% - 12px);
  transform-origin:0 50%;transform:rotateY(90deg);
  background:linear-gradient(to right,rgba(22,34,38,.9),#070c0e);
}

/* Deckel: dunkles eloxiertes Metall mit Gravur --------------------------- */
.lid-face{
  background:
    repeating-linear-gradient(100deg,rgba(255,255,255,.014) 0 2px,rgba(255,255,255,0) 2px 5px),
    linear-gradient(118deg,rgba(255,255,255,.13),rgba(255,255,255,.02) 36%,rgba(0,0,0,.22) 100%),
    radial-gradient(ellipse 60% 50% at 30% 20%,rgba(98,217,227,.05),transparent 70%),
    #101a1e;
  box-shadow:
    inset 0 0 0 1px rgba(242,239,232,.16),
    inset 2px 2px 0 rgba(255,255,255,.14),
    inset -2px -2px 0 rgba(0,0,0,.4),
    0 50px 90px rgba(0,0,0,.55);
}
.lid-mark{
  position:absolute;left:34px;top:30px;width:112px;height:112px;
  border:1px solid rgba(242,239,232,.14);border-radius:12px;
  display:grid;place-items:center;
  background:rgba(0,0,0,.18);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.08);
}
.lid-mark svg{width:70%;height:70%;fill:rgba(242,239,232,.7);stroke:rgba(242,239,232,.7)}
.lid-mark .brand-bar,.die-mark .brand-bar,.modulcore-mark .brand-bar{fill:var(--accent-ink);stroke:none}
.lid-etch{
  position:absolute;font-family:var(--mono);text-transform:uppercase;
  letter-spacing:.24em;color:rgba(242,239,232,.42);
  text-shadow:0 1px 0 rgba(255,255,255,.06);
}
.lid-etch--title{left:34px;bottom:52px;font-size:16px;color:rgba(242,239,232,.62);letter-spacing:.3em}
.lid-etch--sub{left:34px;bottom:30px;font-size:9px}
.lid-etch--de{right:34px;bottom:30px;font-size:11px;padding:6px 10px;border:1px solid rgba(242,239,232,.22);border-radius:4px}
.lid-etch--status{right:34px;top:34px;font-size:9px;display:inline-flex;align-items:center;gap:8px;color:rgba(98,217,227,.75)}
.lid-etch--status i{width:6px;height:6px;border-radius:50%;background:var(--accent-ink);box-shadow:0 0 10px var(--accent-ink)}

/* Der Prozessor ----------------------------------------------------------- */
.chip-glow{
  position:absolute;left:50%;top:50%;width:380px;height:380px;margin:-190px 0 0 -190px;
  background:radial-gradient(circle,rgba(98,217,227,calc(.10 + var(--chip) * .16)),transparent 62%);
  transform:translateZ(1px);pointer-events:none;
}
.chip{
  position:absolute;left:50%;top:50%;width:196px;height:196px;margin:-98px 0 0 -98px;
  transform:translateZ(6px);transform-style:preserve-3d;
  border-radius:10px;
  background:linear-gradient(135deg,#1b272c,#0a1013 70%);
  box-shadow:
    inset 0 0 0 1px rgba(242,239,232,.16),
    inset 1px 1px 0 rgba(255,255,255,.16),
    0 14px 30px rgba(0,0,0,.6);
}
.chip:before{
  content:"";position:absolute;inset:6px;border-radius:7px;
  border:1px solid rgba(242,239,232,.08);
}
.die{
  position:absolute;inset:16px;border-radius:6px;
  background:#070b0d;
  box-shadow:inset 0 0 0 1px rgba(98,217,227,calc(.12 + var(--chip) * .3));
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 34px 1fr;gap:6px;padding:6px;
}
.chiplet{
  border-radius:4px;
  background:linear-gradient(160deg,#152025,#0c1316);
  display:grid;place-items:center;
  box-shadow:
    inset 0 0 0 1px rgba(242,239,232,.10),
    0 0 0 1px rgba(98,217,227,calc(var(--on) * .9)),
    0 0 18px rgba(98,217,227,calc(var(--on) * .4));
  --on:0;
}
.chiplet b{
  font-family:var(--mono);font-size:8px;letter-spacing:.14em;font-weight:600;
  color:rgba(242,239,232,calc(.4 + var(--on) * .6));
}
.chiplet[data-chiplet="web"]{--on:clamp(0,calc(var(--chip) * 6),1)}
.chiplet[data-chiplet="commerce"]{--on:clamp(0,calc((var(--chip) - .16) * 6),1)}
.chiplet[data-chiplet="crm"]{--on:clamp(0,calc((var(--chip) - .32) * 6),1)}
.chiplet[data-chiplet="operations"]{--on:clamp(0,calc((var(--chip) - .48) * 6),1)}
.chiplet[data-chiplet="automation"]{--on:clamp(0,calc((var(--chip) - .64) * 6),1)}
.chiplet[data-chiplet="ai"]{--on:clamp(0,calc((var(--chip) - .8) * 6),1)}
.die-bus{
  grid-column:1/-1;
  border-radius:3px;
  background:
    repeating-linear-gradient(to right,rgba(98,217,227,.35) 0 1px,transparent 1px 7px),
    rgba(98,217,227,calc(.06 + var(--chip) * .1));
  box-shadow:inset 0 0 0 1px rgba(98,217,227,.35);
  display:flex;align-items:center;justify-content:space-between;padding:0 8px;
}
.die-bus span{font-family:var(--mono);font-size:7px;letter-spacing:.2em;color:var(--accent-ink);background:#070b0d;padding:0 4px}
.die-mark{width:20px;height:20px;display:grid;place-items:center;background:#070b0d;border-radius:3px}
.die-mark svg{width:16px;height:16px;fill:rgba(242,239,232,.8);stroke:rgba(242,239,232,.8)}

/* Zeichnungen auf den Platten -------------------------------------------- */
.a-etch{fill:rgba(242,239,232,.30);font-family:var(--mono);font-size:9px;letter-spacing:1.8px}
.a-etch--big{font-size:24px;font-weight:600;letter-spacing:2px;fill:rgba(242,239,232,.42)}
.a-bus rect{fill:rgba(98,217,227,.06);stroke:rgba(98,217,227,.30);stroke-width:1}
.a-busline{fill:none;stroke:rgba(98,217,227,.36);stroke-width:1;stroke-dasharray:7 6}
.a-block rect{fill:rgba(242,239,232,.05);stroke:rgba(242,239,232,.22);stroke-width:1}
.a-pin{fill:none;stroke:rgba(242,239,232,.30);stroke-width:1}
.a-record rect{fill:rgba(242,239,232,.06);stroke:rgba(242,239,232,.14);stroke-width:1}
.a-part rect{fill:rgba(242,239,232,.14)}
.a-port rect{fill:rgba(242,239,232,.08);stroke:rgba(242,239,232,.30);stroke-width:1}
.a-ui rect,.a-ui circle,.a-ui path{fill:none;stroke:rgba(242,239,232,.30);stroke-width:1}
.a-ui .a-ui-fill{fill:rgba(242,239,232,.07);stroke:rgba(242,239,232,.16)}
.a-ui .a-ui-accent{fill:rgba(98,217,227,.55);stroke:none}

/* Leiterbahnen: werden mit dem Fortschritt gezeichnet, nacheinander */
.a-trace path{
  fill:none;stroke:var(--accent-ink);stroke-width:1.2;stroke-linecap:square;
  opacity:.62;
  stroke-dasharray:1;
  stroke-dashoffset:clamp(0,calc(1 - (var(--trace) - var(--d,0)) * 1.55),1);
}
.a-trace path:nth-child(2){--d:.04}
.a-trace path:nth-child(3){--d:.08}
.a-trace path:nth-child(4){--d:.12}
.a-trace path:nth-child(5){--d:.05}
.a-trace path:nth-child(6){--d:.10}
.a-trace path:nth-child(7){--d:.15}
.a-trace path:nth-child(8){--d:.18}
.a-trace path:nth-child(9){--d:.22}
.a-trace path:nth-child(10){--d:.20}
.a-trace path:nth-child(11){--d:.26}
.a-trace path:nth-child(12){--d:.30}
.a-trace path:nth-child(13){--d:.28}
.a-trace path:nth-child(14){--d:.33}

/* Geschäftsablauf: eine Bahn, sechs Knoten, ein Datenpaket */
.a-flow{
  fill:none;stroke:var(--accent-ink);stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;
  stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--flow));
  opacity:var(--flowop);
  filter:drop-shadow(0 0 4px rgba(98,217,227,.6));
}
.a-flownode rect{
  fill:rgba(98,217,227,calc(.18 + var(--on,0) * .82));
  stroke:rgba(98,217,227,calc(.3 + var(--on,0) * .7));stroke-width:1;
  opacity:var(--flowop);
}
.a-flownode rect[data-wf="1"]{--on:clamp(0,calc(var(--flow) * 12),1)}
.a-flownode rect[data-wf="2"]{--on:clamp(0,calc((var(--flow) - .18) * 12),1)}
.a-flownode rect[data-wf="3"]{--on:clamp(0,calc((var(--flow) - .36) * 12),1)}
.a-flownode rect[data-wf="4"]{--on:clamp(0,calc((var(--flow) - .54) * 12),1)}
.a-flownode rect[data-wf="5"]{--on:clamp(0,calc((var(--flow) - .72) * 12),1)}
.a-flownode rect[data-wf="6"]{--on:clamp(0,calc((var(--flow) - .9) * 12),1)}
.a-packet{
  fill:#fff;
  offset-path:path("M44 72H130V160H220V312H350V230H450V100H516");
  offset-rotate:0deg;
  offset-distance:calc(var(--flow) * 100%);
  opacity:calc(var(--flowop) * clamp(0,calc((1 - var(--flow)) * 12),1));
  filter:drop-shadow(0 0 5px var(--accent-ink));
}
@supports not (offset-path:path("M0 0 L1 1")){.a-packet{display:none}}

/* Server- und Sicherheitsebene: leuchtet in Szene 6 nacheinander auf */
.a-srv rect{fill:rgba(242,239,232,.03);stroke:rgba(242,239,232,.18);stroke-width:1}
.a-srv path,.a-srv ellipse{fill:none;stroke:rgba(242,239,232,calc(.45 + var(--on,0) * .55));stroke-width:1.4}
.a-srv{--on:0}
.a-srv rect{stroke:rgba(98,217,227,calc(.18 + var(--on) * .7));fill:rgba(98,217,227,calc(var(--on) * .08))}
.a-srv .a-etch--big{fill:rgba(242,239,232,calc(.42 + var(--on) * .5))}
.a-srv[data-srv="cert"]{--on:clamp(0,calc(var(--srv) * 4),1)}
.a-srv[data-srv="backup"]{--on:clamp(0,calc((var(--srv) - .25) * 4),1)}
.a-srv[data-srv="monitor"]{--on:clamp(0,calc((var(--srv) - .5) * 4),1)}
.a-srv[data-srv="de"]{--on:clamp(0,calc((var(--srv) - .75) * 4),1)}
.a-pulse{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--on,1));stroke:var(--accent-ink)}

/* ==========================================================================
   04  SCHARFE BESCHRIFTUNGEN – HTML-Overlay
   --------------------------------------------------------------------------
   hd-core.js projiziert Ankerpunkte der Platten in die Bildebene und
   setzt --x/--y je Element. Der Text bleibt echter, scharfer HTML-Text.
   ========================================================================== */

.core-overlay{pointer-events:none;z-index:3}
.core-overlay ul,.core-overlay ol{list-style:none;margin:0;padding:0}
.core-overlay [data-anchor]{
  position:absolute;left:0;top:0;
  transform:translate3d(var(--x,-9999px),var(--y,-9999px),0) translate(var(--ox,0),var(--oy,-50%));
  opacity:var(--o,0);
  will-change:transform,opacity;
  font-family:var(--sans);
}
.core-overlay [data-anchor] b{
  display:block;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--tr-label);
  text-transform:uppercase;font-weight:600;color:var(--ink);
}
.core-overlay [data-anchor] span{
  display:block;font-size:var(--fs-mini);color:var(--ink-faint);line-height:1.45;margin-top:3px;
  max-width:22ch;
}

/* Ebenen: Beschriftung links, Führungslinie zur Kante */
.tag{--ox:-100%;padding-right:40px;text-align:right;--o:var(--tags)}
.tag:after{
  content:"";position:absolute;right:0;top:50%;width:30px;height:1px;
  background:linear-gradient(to right,transparent,var(--accent-ink));
}
.tag:before{
  content:"";position:absolute;right:-3px;top:calc(50% - 3px);width:6px;height:6px;
  border:1px solid var(--accent-ink);background:var(--paper);
}
.tag b{color:var(--accent-ink)}

/* Chiplets: kleine Marken über und unter dem Kern */
.chiplabel{--ox:-50%;text-align:center;--o:calc(var(--chips) * var(--on,0))}
.chiplabel b{font-size:var(--fs-meta)}
.chiplabel span{max-width:16ch;margin-inline:auto}
.chiplabel[data-anchor="chip-web"]{--on:clamp(0,calc(var(--chip) * 6),1)}
.chiplabel[data-anchor="chip-commerce"]{--on:clamp(0,calc((var(--chip) - .16) * 6),1)}
.chiplabel[data-anchor="chip-crm"]{--on:clamp(0,calc((var(--chip) - .32) * 6),1)}
.chiplabel[data-anchor="chip-operations"]{--on:clamp(0,calc((var(--chip) - .48) * 6),1)}
.chiplabel[data-anchor="chip-automation"]{--on:clamp(0,calc((var(--chip) - .64) * 6),1)}
.chiplabel[data-anchor="chip-ai"]{--on:clamp(0,calc((var(--chip) - .8) * 6),1)}

/* Ablauf: Schritt, Nutzen und eine abstrahierte Vorschau.
   Ungerade Schritte stehen über dem Knoten, gerade darunter; ältere
   Schritte treten zurück, damit immer der aktuelle Schritt trägt. */
.wfstep{
  --o:calc(var(--wf) * var(--on,0));
  padding:9px 11px 9px;
  border:1px solid var(--accent-line);border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--surface-1) 90%,transparent);
  width:164px;
  transform:translate3d(var(--x,-9999px),var(--y,-9999px),0) translate(-50%,calc(-100% - 16px)) translateY(calc((1 - var(--on,0)) * 8px));
  box-shadow:var(--sh-2);
}
@supports not (background:color-mix(in srgb,red 50%,blue)){.wfstep{background:rgba(11,17,20,.92)}}
.wfstep:after{
  content:"";position:absolute;left:50%;bottom:-9px;width:1px;height:8px;background:var(--accent-ink);
}
.wfstep[data-anchor="wf-2"],.wfstep[data-anchor="wf-4"],.wfstep[data-anchor="wf-5"]{
  transform:translate3d(var(--x,-9999px),var(--y,-9999px),0) translate(-50%,16px) translateY(calc((1 - var(--on,0)) * -8px));
}
.wfstep[data-anchor="wf-2"]:after,.wfstep[data-anchor="wf-4"]:after,.wfstep[data-anchor="wf-5"]:after{bottom:auto;top:-9px}
.wfstep b{color:var(--accent-ink);font-size:var(--fs-meta)}
.wfstep span{color:var(--ink-soft);font-size:.78rem;max-width:none}
.wfstep{--start:0}
.wfstep[data-anchor="wf-2"]{--start:.18}
.wfstep[data-anchor="wf-3"]{--start:.36}
.wfstep[data-anchor="wf-4"]{--start:.54}
.wfstep[data-anchor="wf-5"]{--start:.72}
.wfstep[data-anchor="wf-6"]{--start:.9}
.wfstep[data-anchor]{
  --auf:clamp(0,calc((var(--flow) - var(--start)) * 12),1);
  --ab:clamp(0,calc((var(--flow) - var(--start) - .3) * 6),1);
  --on:calc(var(--auf) * (1 - var(--ab) * .88));
}
/* Vorschau: reine Formen, keine echten Daten */
.wf-preview{
  display:grid;gap:4px;margin-top:8px;padding:6px;border-radius:4px;
  background:var(--surface-2);border:1px solid var(--line-soft);
}
.wf-preview em{display:block;height:5px;border-radius:2px;background:rgba(242,239,232,.14)}
.wf-preview .wf-btn{width:36%;height:7px;background:var(--accent-ink);opacity:.8}
.wf-preview--card{grid-template-columns:22px 1fr;align-items:center}
.wf-preview--card .wf-avatar{grid-row:span 2;width:22px;height:22px;border-radius:50%;background:var(--accent-soft);border:1px solid var(--accent-line)}
.wf-preview--doc .wf-sum{width:44%;justify-self:end;background:var(--sand);opacity:.7}
.wf-preview--doc .wf-paid{width:30%;justify-self:end;background:var(--gruen);opacity:.8}
.wf-preview--cal{grid-template-columns:repeat(4,1fr)}
.wf-preview--cal em{height:9px}
.wf-preview--cal .wf-on{background:var(--accent-ink)}
.wf-preview--status{grid-template-columns:8px 1fr;align-items:center}
.wf-preview--status .wf-dot{width:8px;height:8px;border-radius:50%;background:rgba(242,239,232,.25)}
.wf-preview--status .wf-dot.wf-on{background:var(--accent-ink);box-shadow:0 0 8px var(--accent-ink)}

/* Server und Sicherheit */
.srvlabel{--ox:-50%;--oy:14px;text-align:center;--o:calc(var(--srvl) * var(--on,0));padding-top:14px}
.srvlabel:before{content:"";position:absolute;left:50%;top:0;width:1px;height:10px;background:var(--accent-ink)}
/* Jede zweite Beschriftung steht über dem Symbol, damit sich nichts überlappt */
.srvlabel[data-anchor="srv-backup"],.srvlabel[data-anchor="srv-de"]{--oy:calc(-100% - 22px);padding-top:0;padding-bottom:14px}
.srvlabel[data-anchor="srv-backup"]:before,.srvlabel[data-anchor="srv-de"]:before{top:auto;bottom:0}
.srvlabel b{color:var(--accent-ink);font-size:var(--fs-meta)}
.srvlabel span{max-width:16ch;margin-inline:auto}
.srvlabel[data-anchor="srv-cert"]{--on:clamp(0,calc(var(--srv) * 4),1)}
.srvlabel[data-anchor="srv-backup"]{--on:clamp(0,calc((var(--srv) - .25) * 4),1)}
.srvlabel[data-anchor="srv-monitor"]{--on:clamp(0,calc((var(--srv) - .5) * 4),1)}
.srvlabel[data-anchor="srv-de"]{--on:clamp(0,calc((var(--srv) - .75) * 4),1)}

/* Unternehmensansicht: die Anlage wird zur Arbeitsoberfläche */
.dash{
  --ox:-50%;--oy:-100%;--o:var(--dash);
  width:min(360px,46vw);
  padding:14px 16px 16px;
  border:1px solid var(--line-strong);border-radius:var(--r-md);
  background:color-mix(in srgb,var(--surface-1) 92%,transparent);
  box-shadow:var(--sh-3),var(--rim);
  transform:translate3d(var(--x,-9999px),var(--y,-9999px),0) translate(-50%,calc(-100% - 20px)) translateY(calc((1 - var(--dash)) * 14px));
}
@supports not (background:color-mix(in srgb,red 50%,blue)){.dash{background:rgba(11,17,20,.94)}}
.dash-head{
  margin:0 0 10px;display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:var(--tr-meta);text-transform:uppercase;
}
.dash-head b{color:var(--ink);font-weight:600}
.dash-head span{color:var(--accent-ink)}
.dash-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-xs);overflow:hidden}
.dash-kpis li{background:var(--surface-2);padding:8px 8px 9px;text-align:center}
.dash-kpis b{display:block;font-size:1.25rem;font-weight:450;color:var(--ink);letter-spacing:var(--tr-head);line-height:1}
.dash-kpis span{display:block;font-family:var(--mono);font-size:.5rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-top:4px;line-height:1.3}
.dash-row{margin:8px 0 0;display:flex;align-items:center;gap:8px;font-size:var(--fs-mini);color:var(--ink-soft)}
.dash-row i{width:6px;height:6px;border-radius:50%;background:var(--accent-ink);flex:0 0 auto}

/* ==========================================================================
   05  TECHNISCHE ANZEIGEN
   ========================================================================== */

.story-hud{
  position:absolute;left:var(--gutter);bottom:clamp(14px,2.4vh,26px);
  max-width:min(46%,640px);
  display:flex;flex-wrap:wrap;align-items:center;gap:6px clamp(14px,1.8vw,26px);
  z-index:4;pointer-events:none;
}
.hd-live .story-hud{opacity:calc(1 - var(--copy))}
.story-hud .hud-line{opacity:.32;transition:opacity var(--t-state),color var(--t-state)}
.story-hud .hud-step{opacity:1;color:var(--ink-soft)}
.story-hud .hud-meta{flex-basis:100%;opacity:.6;text-transform:none;letter-spacing:.08em}
.story-hud [data-hud="2"]{opacity:calc(.32 + var(--c2) * .68)}
.story-hud [data-hud="3"]{opacity:calc(.32 + var(--c3) * .68)}
.story-hud [data-hud="4"]{opacity:calc(.32 + var(--c4) * .68)}
.story-hud [data-hud="5"]{opacity:calc(.32 + var(--c5) * .68)}
.story-hud [data-hud="6"]{opacity:calc(.32 + var(--c6) * .68)}
.story-hud [data-hud="7"]{opacity:calc(.32 + var(--c7) * .68)}

.story-scrollhint{
  position:absolute;left:var(--gutter);bottom:clamp(14px,2.4vh,26px);z-index:4;
  margin:0;display:inline-flex;align-items:center;gap:var(--s-3);
  font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:var(--tr-meta);text-transform:uppercase;
  color:var(--ink-faint);opacity:var(--copy);pointer-events:none;
}
.story-scrollhint i{display:block;width:1px;height:26px;background:linear-gradient(to bottom,var(--accent-ink),transparent);position:relative;overflow:hidden}
.story-scrollhint i:after{content:"";position:absolute;left:0;top:0;width:1px;height:9px;background:var(--accent-ink);animation:scrollHint 2.4s var(--ease-in-out) infinite}
@keyframes scrollHint{0%{transform:translateY(-10px);opacity:0}35%{opacity:1}100%{transform:translateY(26px);opacity:0}}

/* ==========================================================================
   06  RUHIGE FASSUNG
   --------------------------------------------------------------------------
   Ohne JavaScript, bei prefers-reduced-motion und auf schwachen Geräten:
   keine Scrollstrecke, keine Kamerafahrt. Der Hero steht, das geöffnete
   System wird als Standbild gezeigt, die sieben Szenen, der Ablauf, die
   Ebenen und die Serverebene stehen vollständig als Text darunter.
   ========================================================================== */

html:not(.hd-live) .story{
  --copy:1;--sep:1;--lid:0;--trace:1;--chip:1;--flow:1;--flowop:.9;--srv:1;--dash:0;
  --ifop:1;--lgop:1;--dtop:1;--lift:0;--c1:1;--c2:1;--c3:1;--c4:1;--c5:1;--c6:1;--c7:1;
}
html:not(.hd-live) .story .story-stage{overflow:hidden}
html:not(.hd-live) .story .story-layout{
  grid-template-columns:1fr;
  grid-template-areas:"copy" "core" "caps" "over";
  align-items:start;
  row-gap:var(--s-8);
  padding-top:calc(var(--nav-h) + var(--s-7));
  padding-bottom:var(--s-9);
  height:auto;
}
html:not(.hd-live) .story .hero-copy{transform:none;max-width:44rem}
html:not(.hd-live) .story .hero-copy h1{max-width:14ch}
html:not(.hd-live) .story .core-viewport{height:clamp(340px,58vw,640px);margin-right:0;overflow:hidden}
html:not(.hd-live) .story .core-overlay{margin-right:0}
html:not(.hd-live) .story .core{transform:translate3d(0,-10px,0) scale(calc(var(--fit) * .8)) rotateX(60deg) rotateZ(-34deg)}
html:not(.hd-live) .story .a-flow,html:not(.hd-live) .story .a-flownode rect{opacity:.9}
html:not(.hd-live) .story .a-packet{display:none}
html:not(.hd-live) .story .chiplet,html:not(.hd-live) .story .a-srv{--on:1}
html:not(.hd-live) .story .a-flownode rect{--on:1}

html:not(.hd-live) .story .story-captions{
  grid-area:caps;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:var(--s-6) var(--s-7);
  max-width:none;
  pointer-events:auto;
  border-top:1px solid var(--line);padding-top:var(--s-7);
}
html:not(.hd-live) .story .cap{grid-area:auto;opacity:1;transform:none}
html:not(.hd-live) .story .cap b{font-size:var(--fs-h4);max-width:none}
html:not(.hd-live) .story .cap span{font-size:var(--fs-small)}

html:not(.hd-live) .story .core-overlay{
  grid-area:over;position:static;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:var(--s-6) var(--s-7);pointer-events:auto;
  border-top:1px solid var(--line);padding-top:var(--s-7);
}
html:not(.hd-live) .story .core-overlay [data-anchor]{
  position:static;transform:none;opacity:1;will-change:auto;
  padding:0;border:0;background:none;box-shadow:none;text-align:left;
  min-width:0;max-width:none;width:auto;
}
html:not(.hd-live) .story .tag:before,html:not(.hd-live) .story .tag:after,
html:not(.hd-live) .story .srvlabel:before,html:not(.hd-live) .story .wfstep:after{display:none}
html:not(.hd-live) .story .core-overlay [data-anchor] span{max-width:none;margin-inline:0}
html:not(.hd-live) .story .core-overlay ul,html:not(.hd-live) .story .core-overlay ol{display:grid;gap:var(--s-3)}
html:not(.hd-live) .story .core-overlay ol{counter-reset:wf}
html:not(.hd-live) .story .wfstep{counter-increment:wf;display:grid;grid-template-columns:2.2em 1fr;column-gap:var(--s-2)}
html:not(.hd-live) .story .wfstep:before{
  content:"0" counter(wf);display:block;grid-row:span 2;
  font-family:var(--mono);font-size:var(--fs-meta);color:var(--accent-ink);letter-spacing:var(--tr-meta);padding-top:2px;
}
html:not(.hd-live) .story .wf-preview{display:none}
html:not(.hd-live) .story .core-overlay ul:before,html:not(.hd-live) .story .core-overlay ol:before,html:not(.hd-live) .story .dash:before{
  content:attr(aria-label);display:block;margin-bottom:var(--s-2);
  font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:var(--tr-meta);text-transform:uppercase;color:var(--ink-faint);
}
html:not(.hd-live) .story .dash{width:auto}
html:not(.hd-live) .story .dash-kpis{margin-top:var(--s-2);grid-template-columns:repeat(2,1fr)}
html:not(.hd-live) .story .dash-kpis li{text-align:left;padding:10px 12px}
html:not(.hd-live) .story .story-hud,html:not(.hd-live) .story .story-scrollhint{display:none}
html:not(.hd-live) .story .tag b{color:var(--ink)}

/* Sehr schmale Geräte: Bühne und Anzeigen bleiben im Bild */
@media(max-width:900px){
  html:not(.hd-live) .story .core{transform:translate3d(0,0,0) scale(calc(var(--fit) * .5)) rotateX(60deg) rotateZ(-34deg)}
}

/* ==========================================================================
   07  STICKY PRODUKTNAVIGATION
   --------------------------------------------------------------------------
   Erscheint, sobald der erste Bildschirm durchlaufen ist. Leicht
   durchscheinend, aber mit ausreichend Kontrast; verdeckt keinen Inhalt,
   weil jede Sektion ihren Sprungabstand (scroll-padding) berücksichtigt.
   ========================================================================== */

.subnav{
  position:fixed;left:0;right:0;top:var(--nav-h);z-index:58;
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--paper) 84%,transparent);
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
  transform:translateY(-8px);opacity:0;visibility:hidden;
  transition:opacity var(--t-state),transform var(--t-state),visibility 0s linear var(--duration-medium);
}
@supports not (background:color-mix(in srgb,red 50%,blue)){.subnav{background:rgba(7,11,13,.92)}}
.subnav.is-on{transform:none;opacity:1;visibility:visible;transition-delay:0s}
body.nav-open .subnav{display:none}
.subnav-in{
  height:52px;display:flex;align-items:center;gap:var(--s-5);
}
.subnav-brand{
  display:inline-flex;align-items:center;gap:var(--s-3);
  font-size:var(--fs-small);font-weight:500;color:var(--ink);white-space:nowrap;
}
.subnav-brand .brand-mark{width:26px;height:26px}
.subnav-links{display:flex;align-items:center;gap:2px;margin-left:auto}
.subnav-links a{
  padding:7px 12px;border-radius:var(--r-pill);
  font-size:var(--fs-mini);color:var(--ink-soft);white-space:nowrap;
  transition:color var(--t-hover),background var(--t-hover);
}
.subnav-links a:hover{color:var(--ink);background:rgba(242,239,232,.06)}
.subnav-links a[aria-current="true"]{color:var(--ink);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line)}
.subnav-cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:34px;padding:0 16px;border-radius:var(--r-pill);
  background:var(--accent);color:#fff;font-size:var(--fs-mini);font-weight:500;white-space:nowrap;
  transition:background var(--t-hover);
}
.subnav-cta:hover{background:var(--accent-dark)}
body.subnav-on{scroll-padding-top:calc(var(--nav-h) + 80px)}
html.subnav-on{scroll-padding-top:calc(var(--nav-h) + 80px)}

/* ==========================================================================
   08  RESPONSIVE
   ========================================================================== */

/* Tablet: Kamera und Ebenen bleiben, Bühne wird schmaler */
@media(max-width:1180px){
  .story-layout{grid-template-columns:minmax(0,.48fr) minmax(0,.52fr)}
  .core-viewport,.core-overlay{margin-right:calc(-1 * var(--gutter))}
}

/* Mobil: Text oben, Anlage füllt die Bühne, Szenentexte unten auf einem
   Verlauf. Weniger gleichzeitig sichtbare Details, größere Beschriftungen. */
@media(max-width:900px){
  .story{--story-h:430svh}
  .story-layout{
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0,1fr);
    grid-template-areas:"copy" "core";
    align-items:start;
    row-gap:0;
    padding-top:calc(var(--nav-h) + 10px);
    padding-bottom:0;
  }
  .hd-live .core-viewport,.hd-live .core-overlay{grid-row:1/-1;grid-column:1}
  .hd-live .hero-copy{grid-row:1;grid-column:1;z-index:2}
  .core-viewport,.core-overlay{margin-right:0;margin-left:calc(-1 * var(--gutter));width:calc(100% + 2*var(--gutter))}
  .hero-copy{max-width:none}
  .hero-copy h1{margin:var(--s-4) 0;max-width:12ch}
  .hero-copy .lead{font-size:var(--fs-body);max-width:none}
  .hero-copy .hero-actions{margin-top:var(--s-5)}
  .hero-copy .hero-fein{display:none}
  .story-captions{
    grid-area:core;grid-row:1/-1;grid-column:1;align-self:end;z-index:5;
    padding:0 0 clamp(72px,10vh,96px);
    max-width:none;
  }
  .hd-live .story-captions{position:relative}
  .hd-live .story-captions:before{
    content:"";position:absolute;left:calc(-1 * var(--gutter));right:calc(-1 * var(--gutter));bottom:0;top:-60px;
    background:linear-gradient(to bottom,transparent,var(--paper) 50%);
    z-index:-1;
    opacity:calc(max(var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6),var(--c7)));
  }
  .cap b{font-size:clamp(1.45rem,1rem + 2.6vw,2rem);max-width:none}
  .cap span{font-size:var(--fs-small);margin-top:var(--s-2);max-width:none}
  .cap:before{margin-bottom:var(--s-2)}
  .story-hud{display:none}
  .story-scrollhint{display:none}
  .core-overlay [data-anchor] span{display:none}
  .core-overlay .wfstep span{display:block;font-size:.72rem}
  .core-overlay .dash span{display:block}
  .core-overlay .dash-head span{display:inline}
  .tag{--ox:0;padding-right:0;padding-left:36px;text-align:left}
  .tag:after{right:auto;left:0;background:linear-gradient(to left,transparent,var(--accent-ink))}
  .tag:before{right:auto;left:-3px}
  .wfstep{width:142px;padding:8px 10px}
  .wf-preview{display:none}
  .dash{width:min(250px,64vw);padding:10px 12px 12px}
  .dash-kpis b{font-size:1rem}
  .subnav-links{display:none}
  .subnav-in{height:44px;gap:var(--s-3)}
  .subnav-cta{margin-left:auto;min-height:32px}
}

/* Kurze Bildschirme (Querformat, kleine Notebooks): weniger Höhe verbrauchen */
@media(max-height:720px) and (min-width:901px){
  .hero-copy h1{font-size:clamp(2.6rem,1rem + 4.6vw,5.6rem)}
  .hero-copy .lead{font-size:var(--fs-body)}
  .story-layout{padding-bottom:36px}
}
@media(max-height:660px) and (max-width:900px){
  .hero-copy h1{font-size:clamp(2rem,1rem + 5vw,3rem)}
  .hero-copy .lead{display:none}
}

/* Schreibrichtung von rechts nach links */
body.rtl .core-viewport,body.rtl .core-overlay{margin-right:0;margin-left:calc(-1 * var(--bleed))}
@media(max-width:1180px){body.rtl .core-viewport,body.rtl .core-overlay{margin-right:0;margin-left:calc(-1 * var(--gutter))}}
@media(max-width:900px){body.rtl .core-viewport,body.rtl .core-overlay{margin-left:calc(-1 * var(--gutter));margin-right:0}}
body.rtl .tag{--ox:0;padding-right:0;padding-left:40px;text-align:left}
body.rtl .tag:after{right:auto;left:0;background:linear-gradient(to left,transparent,var(--accent-ink))}
body.rtl .tag:before{right:auto;left:-3px}
body.rtl .subnav-links{margin-left:0;margin-right:auto}

/* Reduzierte Bewegung: keine Eintrittsanimationen, keine Laufmarken */
@media(prefers-reduced-motion:reduce){
  .hero-copy>*{animation:none}
  .hero-copy h1 em:after{animation:none;transform:scaleX(1)}
  .story-scrollhint i:after{animation:none}
  .subnav{transition:none}
}