/* Startbild "Systemplan KI" - animierter Vollbild-Hero.
   Alle Animationen CSS-only; Timing der Zeichen-Choreografie per Inline-Variablen --d / --dur. */

*,*::before,*::after{box-sizing:border-box}
body,div,h1,p,a,footer{margin:0;padding:0}
html,body{height:100%}
html{color-scheme:dark}
body{
  height:100dvh;overflow:hidden;
  background:#050f22;color:#e2ebf8;
  font-family:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
}

/* --- Ebenen --- */
.bg{position:fixed;inset:0;z-index:0;background:radial-gradient(120% 95% at 50% 42%,#123a6b 0%,#0b1e3f 52%,#050f22 100%)}
.blueprint{position:fixed;inset:0;z-index:1;width:100%;height:100%;fill:none;stroke-linecap:round;stroke-linejoin:round}
.stage{position:relative;z-index:2;isolation:isolate;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 6vw}
/* Scrim 1 (z-index:-2): helle Grunddimmung ueber .blueprint. Deckt die h1-Zone als einzige Lage (~.3 statt ~.9 frueher); Schwanze reicht unveraendert bis in die Fusszone (~.2) */
.stage::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(74% 86% at 50% 44%,rgba(2,9,22,.34) 0%,rgba(2,9,22,.3) 38%,rgba(2,9,22,.24) 60%,rgba(2,9,22,.14) 80%,rgba(2,9,22,0) 96%);pointer-events:none;opacity:0;animation:fade 1.2s ease 3.6s forwards}

/* --- Zeichen-Klassen (SVG) --- */
.d{stroke-dasharray:1;stroke-dashoffset:1;animation:draw var(--dur,1.4s) ease-in-out var(--d,0s) forwards}
.fx{opacity:0;animation:fade var(--dur,.8s) ease var(--d,0s) forwards}
.t1{stroke:#e2ebf8;stroke-opacity:.85;stroke-width:2.4}
.t2{stroke:#7d9cc8;stroke-opacity:.6;stroke-width:2}
.t3{stroke:#cfdcee;stroke-opacity:.42;stroke-width:1.6}
.t4{stroke:#cfdcee;stroke-opacity:.34;stroke-width:1}
.via{fill:#0b1e3f}
.lbl{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.22em;stroke:none;fill:#7d9cc8;fill-opacity:.8}

/* Akzent (Phase f) */
.acc{stroke:#00a6e0;stroke-width:2.2;opacity:0;filter:drop-shadow(0 0 5px rgba(0,166,224,.6));animation:fade .9s ease var(--d,3.4s) forwards}
.acc.pulse{animation:fade .9s ease var(--d,3.4s) forwards,glow 2.8s ease-in-out calc(var(--d,3.4s) + 1s) infinite}

/* Dauerschleife 1+2: Pulse entlang zwei Leiterbahnen */
.flow{stroke:#00a6e0;stroke-opacity:.8;stroke-width:2.4;stroke-dasharray:3 117;opacity:0;
  animation:flow 3.8s linear var(--fd,4.2s) infinite,fade .6s linear var(--fd,4.2s) forwards}

/* --- Keyframes --- */
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes flow{from{stroke-dashoffset:0}to{stroke-dashoffset:-120}}
@keyframes glow{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes type{to{width:calc(36ch + 2.88em)}} /* Zielbreite: 36 Zeichen plus je .08em Laufweite, sonst clippt overflow:hidden das Ende */
@keyframes caret{from,to{border-right-color:#4fd3ff}50%{border-right-color:transparent}}

/* --- Branding --- */
.stage h1{
  font-family:'Space Grotesk','Space Grotesk Fallback',sans-serif;font-weight:700;
  font-size:clamp(2.4rem,8.5vw,6rem);letter-spacing:.12em;text-indent:.12em;
  color:#fff;text-shadow:0 1px 2px rgba(2,9,22,.98),0 0 6px rgba(2,9,22,.95),0 0 16px rgba(2,9,22,.92),0 0 38px rgba(2,9,22,.85),0 0 90px rgba(2,9,22,.7);overflow:visible;
  opacity:0;animation:rise 1s cubic-bezier(.2,.7,.2,1) 3.6s forwards;
}
.tagline{margin-top:clamp(14px,3vh,26px);overflow:visible}
/* Tagline-Schatten wie h1, auf ~18px Font geschrumpft; overflow:hidden clippt an der Padding-Box (~9px Luft ueber/unter den Grossbuchstaben), daher die beiden aeussersten Layer bei 11/14px Blur gekappt und alpha-reduziert */
.tw{
  display:inline-block;overflow:hidden;white-space:nowrap;
  font-size:clamp(.82rem,3vw,1.15rem);letter-spacing:.08em;line-height:1.7;color:#eef6ff;text-shadow:0 1px 2px rgba(2,9,22,.98),0 0 4px rgba(2,9,22,.95),0 0 8px rgba(2,9,22,.9),0 0 11px rgba(2,9,22,.7),0 0 14px rgba(2,9,22,.45);
  border-right:3px solid transparent;
  width:0;
  animation:type 1.9s steps(36) 4.2s forwards,caret 1.1s step-end 4.2s infinite;
}
.tw:empty,.stage h1:empty{display:none}

/* --- Fusszeile --- */
.foot{
  position:absolute;left:0;right:0;bottom:clamp(14px,3vh,28px);z-index:3;
  font-size:12px;letter-spacing:.14em;color:rgba(226,235,248,.72);text-shadow:0 1px 3px rgba(2,9,22,.8);text-align:center;padding:0 4vw;
}
.foot a{color:#c2e2fa;text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot a:focus-visible,.stage a:focus-visible{outline:2px solid #00a6e0;outline-offset:3px;border-radius:2px}

/* Admin-/Dive-Panel aus %Info% (Stil des alten index4.css, angepasst) */
.dive{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:5;
  background:#ff8;color:#1c2b45;font-size:12px;line-height:1.6;
  padding:14px 18px;border-radius:10px;border:2px solid #fff;
  max-width:min(520px,92vw);text-align:left;overflow-wrap:anywhere;
}
.dive a{color:#0b3f7a}

/* --- CMS-Editor-Popups (globales CMS, Tools/CMS/CMS_Admin.php, nur bei Login sichtbar) ---
   Bewusst wie .dive gestaltet: dunkle Schrift auf hellem Grund. Ohne diese Regeln
   greift bei html{color-scheme:dark} die helle UA-Linkfarbe auf weisslichem Grund,
   und das Popup ohne eigenes z-index liegt unter .stage (2). z-index 60 liegt ueber
   allen Hero-Ebenen (max .dive = 5); right/bottom/width bleiben aus den Inline-Styles
   wirksam. Der Attribut-Selektor trifft zusaetzlich das klassenlose Log-Admin-Popup
   (einzige weitere fixed+bottom-Injection des CMS auf dieser Seite). */
.AMenu,
div[style*="position:fixed"][style*="bottom:"]{z-index:60;color:#1c2b45}
.AMenu a{color:#0b3f7a;text-decoration:none}
.AMenu a:hover{text-decoration:underline}

/* Bearbeitungsmodus: Editor-Links duerfen nie abgeschnitten werden */
.tw:has(a[href^="/CMS/Editor.php"]){width:auto;overflow:visible;animation:none;border-right:none;white-space:normal}
.stage h1:has(a[href^="/CMS/Editor.php"]){opacity:1;animation:none}
.stage:has(a[href^="/CMS/Editor.php"])::before{opacity:1;animation:none} /* Bearbeitungsmodus: Scrim sofort sichtbar */

/* --- reduced motion: Endzustand direkt (CSS-Fallback ... --- */
@media (prefers-reduced-motion:reduce){
  .d{stroke-dashoffset:0;animation:none}
  .fx,.acc{opacity:1;animation:none}
  .acc.pulse{animation:none}
  .stage h1{opacity:1;animation:none}
  .stage::before{opacity:1;animation:none}
  .tw{width:auto;animation:none;border-right-color:#4fd3ff}
  .flow{display:none}
}
/* --- ... und derselbe Endzustand per Inline-JS-Klasse, falls das Media-Query nicht greift --- */
html.reduce-motion .d{stroke-dashoffset:0;animation:none}
html.reduce-motion .fx,html.reduce-motion .acc{opacity:1;animation:none}
html.reduce-motion .stage h1{opacity:1;animation:none}
html.reduce-motion .stage::before{opacity:1;animation:none}
html.reduce-motion .tw{width:auto;animation:none;border-right-color:#4fd3ff}
html.reduce-motion .flow{display:none}