/* ============================================================
   AintDumb V2 — Intro-Cinematic "Vom Gedanken zur Software"
   LOKAL, nicht deployen. Laeuft einmal auf der Home-Seite,
   uebergibt nahtlos an die Seite. reduced-motion = uebersprungen.
   ============================================================ */

/* Inhalt waehrend des Intros verbergen + Scroll sperren.
   v2-intro-on wird vom Inline-Head-Script gesetzt (nur Home + Motion),
   mit 12s-Fallback, falls das Intro-Script nie laedt. */
html.v2-intro-on{overflow:hidden}
html.v2-intro-on body{opacity:0}
body{transition:opacity .9s ease}

#v2-intro{
  position:fixed;inset:0;z-index:99999;pointer-events:auto;
  background:#080c14;   /* flache Basis; Aura-Schicht darüber, Canvas wieder darüber */
  opacity:1;transition:opacity 1.1s ease;overflow:hidden;
}
#v2-intro.hide{opacity:0;pointer-events:none}
#v2-intro-cv{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block}

/* ===== AURA: geblurrte radial-gradient-Blobs (Stripe/Linear-Mesh), HINTER dem Canvas =====
   Bandfrei, weil ein echter Gauss-Blur (>=100px) jeden Pixel aus hunderten
   Nachbarn mittelt -> Stufenbreite < 1px = unter der Wahrnehmungsschwelle.
   Reiner CSS-Blur (Safari seit 9.1), KEIN ctx.filter/feTurbulence/Upscale. */
.v2-aura{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;isolation:isolate;transform:translateZ(0)}
.v2-aura b{position:absolute;display:block;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.v2-aura .b1{width:80vw;height:80vw;left:-12vw;top:6vh;background:radial-gradient(circle at center,rgba(40,100,240,.50),rgba(40,100,240,0) 62%);filter:blur(84px);animation:auraDrift1 34s ease-in-out infinite alternate}
.v2-aura .b2{width:62vw;height:62vw;right:-10vw;top:24vh;background:radial-gradient(circle at center,rgba(94,226,255,.34),rgba(94,226,255,0) 60%);filter:blur(78px);animation:auraDrift2 41s ease-in-out infinite alternate}
.v2-aura .b3{width:74vw;height:74vw;left:16vw;top:-22vh;background:radial-gradient(circle at center,rgba(30,50,120,.58),rgba(30,50,120,0) 64%);filter:blur(92px);animation:auraDrift3 47s ease-in-out infinite alternate}
.v2-aura .b4{width:55vw;height:55vw;left:-6vw;bottom:-18vh;background:radial-gradient(circle at center,rgba(52,96,230,.36),rgba(52,96,230,0) 60%);filter:blur(74px);animation:auraDrift4 38s ease-in-out infinite alternate}
@keyframes auraDrift1{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(7vw,5vh,0) scale(1.18)}}
@keyframes auraDrift2{0%{transform:translate3d(0,0,0) scale(1.1)}100%{transform:translate3d(-6vw,7vh,0) scale(.92)}}
@keyframes auraDrift3{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-5vw,9vh,0) scale(1.22)}}
@keyframes auraDrift4{0%{transform:translate3d(0,0,0) scale(1.05)}100%{transform:translate3d(8vw,-6vh,0) scale(.9)}}
@media (max-width:860px){.v2-aura .b1{filter:blur(90px)}.v2-aura .b2{filter:blur(85px)}.v2-aura .b3{filter:blur(95px)}.v2-aura .b4{display:none}}
@media (prefers-reduced-motion:reduce){.v2-aura b{animation:none}}

/* ganz dezente Schrift, gestapelt am selben Ort -> Crossfade */
/* Eröffnungs-Title-Card (3-5s vor dem Film) */
.v2-intro-title{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:.5em;pointer-events:none;opacity:0;padding:0 24px;z-index:3;
  transform:translateY(20px) scale(.978);filter:blur(9px);will-change:opacity,transform,filter;
  transition:opacity .6s ease, transform 1.25s cubic-bezier(.16,1,.3,1), filter 1.05s ease;
}
/* Fokus-In: hebt sich ruhig & scharf herein */
.v2-intro-title.in{transform:translateY(0) scale(1);filter:blur(0)}
/* edler Abgang: hebt ab nach oben + loest sich auf (Crossfade in die Erklaer-Grafik) */
.v2-intro-title.lift{transform:translateY(-46px) scale(.948);filter:blur(11px)}
.v2-intro-title .wb{
  font-family:var(--mono,monospace);font-size:clamp(11px,1.2vw,15px);letter-spacing:.36em;text-transform:uppercase;
  color:var(--blue-3,#7BA4FF);text-shadow:0 0 14px rgba(45,108,255,.4);
}
.v2-intro-title .brand{
  font-family:var(--sans,sans-serif);font-weight:600;font-size:clamp(40px,7.4vw,98px);letter-spacing:-.03em;line-height:1;
  font-feature-settings:"ss01","cv11";
  background:linear-gradient(105deg,#fff,#bfeeff 30%,var(--cyan,#5EE2FF) 62%,var(--blue-2,#4F86FF));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.v2-intro-title .slogan{
  font-family:var(--mono,monospace);font-size:clamp(14px,1.7vw,22px);letter-spacing:.2em;text-transform:uppercase;
  color:#cfe7ff;margin-top:.35em;
}
.v2-intro-title .slogan b{color:var(--cyan,#5EE2FF);font-weight:700;text-shadow:0 0 18px rgba(94,226,255,.75)}
/* Unterueberschrift „Security-Layer …": groesser + praesenter + besser lesbar (war vorher kleines .wb).
   Bewusst Mischschreibung (kein uppercase) -> laengere Erklaerzeile bleibt gut lesbar. */
.v2-intro-title .subline{
  font-family:var(--mono,monospace);font-weight:600;font-size:clamp(15px,1.85vw,23px);letter-spacing:.04em;
  color:#e3f1ff;text-shadow:0 0 18px rgba(94,226,255,.5),0 1px 3px rgba(0,0,0,.55);margin-top:.8em;line-height:1.45;
}
.v2-intro-title .subline b{color:var(--cyan,#5EE2FF);font-weight:700;text-shadow:0 0 18px rgba(94,226,255,.85)}

/* Captions (Opening + Film, EIN System): gross, praesent, einheitlich; mobil umbruchfaehig statt Ueberlauf */
.v2-intro-text{position:absolute;left:0;right:0;bottom:17%;text-align:center;pointer-events:none;z-index:2}
.v2-intro-text span{
  position:absolute;left:0;right:0;bottom:0;
  font-family:var(--mono,monospace);font-weight:600;
  font-size:clamp(17px,2.15vw,28px);letter-spacing:.18em;text-transform:uppercase;line-height:1.32;
  color:#eaf6ff;opacity:0;padding:0 6vw;
  text-shadow:0 0 28px rgba(94,226,255,.65),0 0 8px rgba(94,226,255,.55),0 1px 3px rgba(0,0,0,.6);
  transition:opacity .55s ease;
}
@media (max-width:860px){
  .v2-intro-text{bottom:20%}
  .v2-intro-text span{font-size:clamp(16px,4.6vw,21px);letter-spacing:.07em;line-height:1.4;padding:0 22px}
}

/* ===== Cockpit-Seitenspalten: links Chat (Input), rechts Plan ===== */
.v2-intro-side{
  position:absolute;top:50%;transform:translateY(-50%);
  height:clamp(300px,56vh,470px);                 /* identische Box links+rechts, vertikal mittig */
  display:flex;flex-direction:column;justify-content:flex-start;gap:9px;overflow:hidden;
  width:clamp(232px,21vw,338px);padding:0 24px;pointer-events:none;opacity:0;transition:opacity .9s ease;z-index:2;
}
.v2-intro-chat{left:0}
.v2-intro-plan{right:0;gap:2px}
.v2-intro-side .panel-h{font-family:var(--mono,monospace);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--blue-3,#7BA4FF);opacity:.7;margin-bottom:8px}
.v2-chat-msg{
  font-family:var(--mono,monospace);font-size:clamp(11px,1.04vw,13.5px);line-height:1.42;padding:9px 12px;border-radius:11px;
  opacity:0;transform:translateY(9px);transition:opacity .5s ease,transform .5s ease;max-width:94%;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.v2-chat-msg.show{opacity:1;transform:none}
.v2-chat-msg.dim{opacity:.42}
.v2-chat-msg.hide{display:none}   /* Sliding-Window: aus dem Layout */
.v2-chat-msg.cust{align-self:flex-start;background:rgba(255,255,255,.05);border:1px solid var(--line-2,rgba(255,255,255,.1));color:#cddcec}
.v2-chat-msg.ai{align-self:flex-end;background:rgba(94,226,255,.09);border:1px solid rgba(94,226,255,.32);color:#e3f6ff}
.v2-plan-entry{display:flex;flex-direction:column}
.v2-plan-item{display:flex;align-items:center;gap:11px;font-family:var(--mono,monospace);font-size:clamp(11px,1vw,13px);color:#8294ad;opacity:.34;transition:opacity .5s,color .5s;padding:3px 0;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.v2-plan-item .dot{flex:0 0 auto;width:15px;height:15px;border-radius:50%;border:1.5px solid #4a5a72;display:grid;place-items:center;font-size:9px;color:#021018;transition:border-color .4s,background .4s,box-shadow .4s}
.v2-plan-item.active{opacity:1;color:#e3f6ff}
.v2-plan-item.active .dot{border-color:var(--cyan,#5EE2FF);box-shadow:0 0 11px rgba(94,226,255,.55);animation:planPulse 1.5s ease-in-out infinite}
.v2-plan-item.done{opacity:.82;color:#bfeeff}
.v2-plan-item.done .dot{border-color:var(--cyan,#5EE2FF);background:var(--cyan,#5EE2FF);box-shadow:0 0 0 3px rgba(94,226,255,.16)}  /* gebaut + geprüft */
/* Hintergrund-Workflows je Planpunkt — Akkordeon, nur der aktive Punkt klappt auf */
.v2-plan-flows{max-height:0;opacity:0;overflow:hidden;margin-left:26px;display:flex;flex-direction:column;gap:1px;transition:max-height .42s cubic-bezier(.2,.7,.2,1),opacity .26s ease,margin .3s ease}
.v2-plan-flows.open{max-height:60px;opacity:1;margin-top:2px;margin-bottom:3px}
.v2-flow{display:flex;align-items:center;gap:7px;font-family:var(--mono,monospace);font-size:clamp(9.5px,.78vw,11px);line-height:14px;color:rgba(220,238,255,.58);padding:0;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.v2-flow .fdot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;border:1px solid #46566e;display:grid;place-items:center;font-size:7px;color:#021018;transition:border-color .3s,background .3s,box-shadow .3s}
.v2-flow.run{color:#dbeeff}
.v2-flow.run .fdot{border-color:var(--cyan,#5EE2FF);box-shadow:0 0 7px rgba(94,226,255,.6);animation:planPulse 1.2s ease-in-out infinite}
.v2-flow.done{color:#9fd9c4}
.v2-flow.done .fdot{border-color:var(--mint,#3DF5A0);background:var(--mint,#3DF5A0);box-shadow:none}
@keyframes planPulse{50%{box-shadow:0 0 18px rgba(94,226,255,.9)}}
@media (max-width:860px){.v2-intro-side{display:none}}
/* Projekt-Wissen: dezente Karte unten links — Wissen wird sichtbar erfasst, bevor das Fundament entsteht */
.v2-intro-know{position:absolute;left:22px;bottom:calc(17% + 34px);z-index:2;pointer-events:none;width:clamp(206px,18vw,262px);padding:13px 15px;border-radius:12px;background:rgba(13,30,25,.6);border:1px solid rgba(61,245,160,.3);opacity:0;transition:opacity .55s ease;box-shadow:0 0 24px rgba(61,245,160,.09)}  /* knapp ueber dem Caption-Band (.v2-intro-text bottom:17%) */
.v2-intro-know .kh{font-family:var(--mono,monospace);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--mint,#3DF5A0);opacity:.85;margin-bottom:9px}
.v2-intro-know .ki{display:flex;align-items:center;gap:9px;font-family:var(--mono,monospace);font-size:clamp(10px,.9vw,12px);color:#b0d8ff;opacity:.32;transform:translateY(3px);transition:opacity .4s ease,transform .4s ease;padding:2px 0}
.v2-intro-know .ki.on{opacity:.95;transform:none}
.v2-intro-know .kc{flex:0 0 auto;width:13px;height:13px;border-radius:50%;border:1px solid #2f6a4a;display:grid;place-items:center;font-size:8px;color:#0a1a0f;background:transparent;transition:background .3s,border-color .3s}
.v2-intro-know .ki.on .kc{background:var(--mint,#3DF5A0);border-color:var(--mint,#3DF5A0)}
.v2-intro-know .kcap{margin-top:10px;font-family:var(--mono,monospace);font-size:9px;line-height:1.4;color:#7fae9a;opacity:.82}
@media (max-width:860px),(max-height:700px){.v2-intro-know{display:none}}

.v2-intro-note{
  position:absolute;left:22px;bottom:18px;max-width:48vw;z-index:2;pointer-events:none;
  font-family:var(--mono,monospace);font-size:10px;letter-spacing:.04em;line-height:1.45;
  color:var(--fg-3,#838B9C);opacity:0;transition:opacity 1s ease;
}
.v2-intro-skip{
  position:absolute;right:22px;bottom:20px;z-index:2;
  font-family:var(--mono,monospace);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-3,#838B9C);background:transparent;border:0;cursor:pointer;padding:8px 10px;
  opacity:.55;transition:opacity .2s,color .2s;
}
.v2-intro-skip:hover{opacity:1;color:var(--cyan,#5EE2FF)}

.v2-intro-exit{
  position:absolute;right:22px;bottom:54px;z-index:2;
  font-family:var(--mono,monospace);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue-3,#7BA4FF);background:rgba(94,226,255,.05);border:1px solid rgba(94,226,255,.28);
  border-radius:8px;cursor:pointer;padding:9px 14px;opacity:0;transition:opacity .8s ease,background .2s,color .2s;
}
.v2-intro-exit:hover{background:rgba(94,226,255,.12);color:var(--cyan,#5EE2FF)}

/* ===== Endsequenz: Onboarding/„nächste Schritte" + CTA, im Intro-UI-Stil ===== */
/* Film-natives Ende: KEIN Karten-Hero, sondern ein Terminal-Start-Prompt im System (Canvas rahmt). */
.v2-intro-end{
  position:absolute;left:50%;top:88.5%;transform:translate(-50%,-50%) scale(.98);
  z-index:4;pointer-events:none;opacity:0;text-align:center;
  transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.v2-intro-end.show{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
.v2-intro-end .ve-cta{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-family:var(--mono,monospace);font-weight:600;font-size:clamp(13px,1.5vw,17px);letter-spacing:.1em;
  color:#dff4ff;padding:8px 22px;text-shadow:0 0 16px rgba(94,226,255,.55);
}
.v2-intro-end .ve-prompt{color:#5EE2FF}
.v2-intro-end .ve-cta::after{content:'\25AE';margin-left:1px;color:#5EE2FF;animation:veBlink 1.1s steps(1) infinite}
@keyframes veBlink{50%{opacity:0}}
.v2-intro-end .ve-cta:hover{color:#fff;text-shadow:0 0 22px rgba(94,226,255,.9)}
.v2-intro-end .ve-cta .ve-arrow{color:#5EE2FF;transition:transform .18s ease}
.v2-intro-end .ve-cta:hover .ve-arrow{transform:translateX(4px)}
.v2-intro-end .ve-cta:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:6px}
@media (prefers-reduced-motion:reduce){.v2-intro-end .ve-cta::after{animation:none}}

/* Tastatur-Fokus sichtbar (A11y) */
.v2-intro-skip:focus-visible,.v2-intro-exit:focus-visible{outline:2px solid var(--cyan,#5EE2FF);outline-offset:3px;opacity:1}

/* Tablet: Aura-Blur etwas reduzieren (Render-Last) */
@media (max-width:1200px){.v2-aura .b1{filter:blur(96px)}.v2-aura .b2{filter:blur(88px)}.v2-aura .b3{filter:blur(102px)}.v2-aura .b4{filter:blur(86px)}}
/* Mobile: größere Touch-Ziele für Skip/Exit */
@media (max-width:860px){.v2-intro-skip,.v2-intro-exit{padding:12px 16px;font-size:12px}}

@media (prefers-reduced-motion:reduce){
  html.v2-intro-on{overflow:auto}
  html.v2-intro-on body{opacity:1}
  #v2-intro{display:none}
}