// stufen-page.jsx — Die 5 Stufen der KI-Nutzung (interaktive Übersicht)
// Source-of-truth lebt parallel als standalone HTML in
// ~/Downloads/stufen_v2.html (deployed auch unter stufen-ki-nutzung.kilian-e2b.workers.dev)

const STUFEN_STAGE_NUMS = [1, 2, 3, 4, 4.5, 5];
const stageToNum = (s) => (s === "4.5" ? 4.5 : parseFloat(s));

const STUFEN_DATA = [
  {
    num: "1",
    label: "Mensch im Loop",
    name: "Chat",
    fam: "fam-petrol",
    tools: "Claude · Gemini · ChatGPT",
    tagline: "Du tippst, KI antwortet — Schritt für Schritt.",
    desc: "Direkter Dialog mit dem Modell. Du tippst, die KI antwortet — jeder Schritt geht durch dich.",
    when: "Wenn du im Loop bleiben willst und Aufgaben variieren.",
    example:
      "Anfrage-Mail eines Interessenten in Claude reinkopiert, um Antwort-Entwurf gebeten, redigiert, abgeschickt. Drei Minuten.",
    transition:
      "Wenn dieselbe Anfrage-Sorte mehrmals pro Woche kommt, gehört der Kontext (Leistungen, Preise, Tonfall) in einen vorkonfigurierten Bot.",
  },
  {
    num: "2",
    label: "Mensch im Loop",
    name: "Konfigurierter Bot",
    fam: "fam-petrol",
    tools: "Custom GPTs · Gems · Projects",
    tagline: "Vorab konfiguriert. Aufruf bleibt manuell.",
    desc: "Bot ist vorab konfiguriert (Rolle, Wissen, Format). Jeder Aufruf bleibt aber manuell.",
    when: "Wenn du dich wiederholst und der Kontext stabil ist.",
    example:
      "Custom GPT kennt eure Leistungen, Preise und Tonfall. Anfrage rein — Entwurf im richtigen Format raus. Du musst nur noch redigieren.",
    transition:
      "Wenn der Antwort-Pfad immer derselbe ist — Auslöser, Schritte, Output — kann er als Workflow laufen, ganz ohne dich.",
  },
  {
    num: "3",
    label: "Workflow",
    name: "KI-Workflow",
    fam: "fam-sand",
    tools: "Make · n8n · Zapier (Workflow-Modus)",
    tagline: "KI als Knoten im festen Pfad.",
    desc: "Vordefinierter Pfad. Die KI ist ein Knoten unter vielen — fest verdrahtet, nicht entscheidend.",
    when: "Wenn der Use Case stabil und der Pfad bekannt ist.",
    example:
      "Sobald eine Anfrage eingeht, liest die KI sie, erkennt die gewünschte Leistung und legt einen Antwort-Entwurf in deinem Postfach ab. Immer derselbe Weg — auch nachts und am Wochenende.",
    transition:
      "Wenn nicht jede Anfrage denselben Pfad braucht — manche wollen CRM-Check, andere Kalender, andere nichts davon — wird’s ein Agent.",
  },
  {
    num: "4",
    label: "KI im Loop",
    name: "Agent mit Tools",
    fam: "fam-coral",
    tools: "Claude Code · n8n Agent · LangChain · Agents SDK",
    tagline: "Agent entscheidet selbst, welche Tools.",
    desc: "Die KI entscheidet im Loop selbst, welche Tools sie nutzt — Bash, Datei, Web. Kein fester Pfad mehr.",
    when: "Wenn der Weg vorher unklar ist und sich aus Zwischenergebnissen ergibt.",
    example:
      "Der Agent liest die Mail, prüft in deiner Kundenliste ob es ein Bestandskunde ist, schaut nach freien Terminen im Kalender und schreibt passend zurück — alles in einem Rutsch.",
    transition:
      "Wenn der Agent über Sessions hinweg dazulernen soll — Kundensegmente, Stil-Präferenzen, Eskalationsregeln — bist du in Stufe 4.5.",
  },
  {
    num: "4.5",
    label: "KI im Loop",
    name: "Lernender Agent",
    fam: "fam-coral",
    tools: "Memory · Skills · Sub-Agents",
    tagline: "Erinnert sich. Wird besser.",
    desc: "Der Agent erinnert sich, delegiert an Spezialisten und verbessert seine Arbeit über die Zeit.",
    when: "Wenn der Agent über Zeit besser werden soll — nicht nur einzelne Aufgaben lösen.",
    example:
      "Der Agent erinnert sich an Kundengruppen und deinen Schreibstil. Ein Spezial-Bot „Preise“ rechnet Konditionen aus, ein zweiter „Sprache“ poliert den Ton — beide werden besser, wenn du ihre Entwürfe korrigierst.",
    transition:
      "Stufe 5 würde eigene Ziele setzen: „Welche Anfrage-Sorten lohnen sich überhaupt, welche delegiere ich weg?“ — heute bewusst Vision.",
  },
  {
    num: "5",
    label: "Vision · 2027+",
    name: "Autonomer Assistent",
    fam: "fam-coral is-vision",
    tools: "— heute bewusst leer —",
    tagline: "Setzt eigene Ziele. Noch Vision.",
    desc: "Setzt sich eigene Ziele, handelt, evaluiert sich selbst. Nicht nur ausführend, sondern zielsetzend.",
    when: "Heute bewusst als Zielbild markiert — kein produktives Pattern.",
    example:
      "Setzt sich selbst Ziele: priorisiert hochwertige Anfragen, gibt seltene Fälle an dich ab, misst seine eigene Trefferquote — und schlägt vor, aus wiederkehrenden Anfragen ein eigenes Angebot zu bauen.",
    transition:
      "Heute Zielbild. Realistische Frage: welche Teile deines Anfrage-Workflows nähern sich Stufe 5 an?",
  },
];

// Workflow-Pattern-SVGs (inline für Detail-Panel-Anzeige).
// Aus stufen_v2.html übernommen — Animation via CSS-Selektoren `.pattern svg ...`
const STUFEN_PATTERNS = {
  1: `<svg width="240" height="130" viewBox="0 0 240 130"><defs><marker id="arrPetrol" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0,0 L10,5 L0,10 z" fill="#5a8a96"></path></marker></defs><g font-family="Inter" font-size="11.5" font-weight="600" text-anchor="middle"><rect x="20" y="14" width="84" height="32" rx="7" fill="#cfe0e5" stroke="#5a8a96"></rect><text x="62" y="34" fill="#1f1d1e">Anfrage</text><line x1="108" y1="30" x2="136" y2="30" stroke="#5a8a96" stroke-width="2" marker-end="url(#arrPetrol)"></line><rect x="138" y="14" width="84" height="32" rx="7" fill="#e6f9ee" stroke="#4caf50"></rect><text x="180" y="34" fill="#1f1d1e">Ergebnis</text><text x="120" y="78" fill="#6b6870" font-size="10.5" font-weight="500">linear · 2 Knoten</text></g></svg>`,

  2: `<svg width="240" height="130" viewBox="0 0 240 130"><defs><marker id="arrPetrol2" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0,0 L10,5 L0,10 z" fill="#5a8a96"></path></marker></defs><g font-family="Inter" font-size="11" font-weight="600" text-anchor="middle"><rect x="6" y="42" width="60" height="30" rx="6" fill="#cfe0e5" stroke="#5a8a96"></rect><text x="36" y="61" fill="#1f1d1e">Anfrage</text><line x1="68" y1="57" x2="86" y2="57" stroke="#5a8a96" stroke-width="2" marker-end="url(#arrPetrol2)"></line><rect x="88" y="34" width="76" height="46" rx="7" fill="#f7f0dd" stroke="#a78937"></rect><text x="126" y="55" fill="#1f1d1e">Bot</text><text x="126" y="71" fill="#6b6870" font-size="10" font-weight="500">+ Wissen</text><line x1="166" y1="57" x2="184" y2="57" stroke="#5a8a96" stroke-width="2" marker-end="url(#arrPetrol2)"></line><rect x="186" y="42" width="50" height="30" rx="6" fill="#e6f9ee" stroke="#4caf50"></rect><text x="211" y="61" fill="#1f1d1e">Ergebnis</text></g></svg>`,

  3: `<svg width="240" height="130" viewBox="0 0 240 130"><defs><marker id="arrSand" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0,0 L10,5 L0,10 z" fill="#a78937"></path></marker></defs><g font-family="Inter" font-size="10.5" font-weight="600" text-anchor="middle"><rect x="4" y="48" width="48" height="26" rx="5" fill="#cfe0e5" stroke="#5a8a96"></rect><text x="28" y="65" fill="#1f1d1e">Auslöser</text><line x1="54" y1="61" x2="68" y2="61" stroke="#a78937" stroke-width="2" marker-end="url(#arrSand)"></line><rect x="70" y="48" width="50" height="26" rx="5" fill="#f7f0dd" stroke="#a78937"></rect><text x="95" y="65" fill="#1f1d1e">Schritt</text><line x1="122" y1="61" x2="136" y2="61" stroke="#a78937" stroke-width="2" marker-end="url(#arrSand)"></line><rect x="138" y="48" width="56" height="26" rx="5" fill="#f7f0dd" stroke="#a78937"></rect><text x="166" y="65" fill="#1f1d1e">Schritt·KI</text><line x1="196" y1="61" x2="210" y2="61" stroke="#a78937" stroke-width="2" marker-end="url(#arrSand)"></line><rect x="212" y="48" width="24" height="26" rx="5" fill="#e6f9ee" stroke="#4caf50"></rect><text x="224" y="65" fill="#1f1d1e" font-size="9.5">Erg.</text></g></svg>`,

  4: `<svg width="240" height="160" viewBox="0 0 240 160"><defs><marker id="arrCoral4" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0,0 L10,5 L0,10 z" fill="#ff644f"></path></marker><marker id="arrGray4" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0,0 L10,5 L0,10 z" fill="#494648"></path></marker></defs><g font-family="Inter" font-size="10.5" font-weight="600" text-anchor="middle"><rect x="40" y="6" width="64" height="22" rx="5" fill="#cfe0e5" stroke="#5a8a96"></rect><text x="72" y="21" fill="#1f1d1e">Auslöser</text><line x1="72" y1="30" x2="72" y2="60" stroke="#494648" stroke-width="1.5" marker-end="url(#arrGray4)"></line><rect x="36" y="64" width="72" height="32" rx="7" fill="#ff644f" stroke="#cc4c3d"></rect><text x="72" y="84" fill="#fff">KI-Agent</text><rect x="138" y="46" width="68" height="22" rx="5" fill="#fff" stroke="#494648"></rect><text x="172" y="61" fill="#1f1d1e" font-size="10">Bash/CLI</text><rect x="138" y="72" width="68" height="22" rx="5" fill="#fff" stroke="#494648"></rect><text x="172" y="87" fill="#1f1d1e" font-size="10">Datei</text><rect x="138" y="98" width="68" height="22" rx="5" fill="#fff" stroke="#494648"></rect><text x="172" y="113" fill="#1f1d1e" font-size="10">Web</text><path d="M108,76 L 136,57" fill="none" stroke="#ff644f" stroke-width="1.6" marker-end="url(#arrCoral4)"></path><path d="M136,63 L 108,80" fill="none" stroke="#ff644f" stroke-width="1.6" marker-end="url(#arrCoral4)"></path><path d="M108,82 L 136,82" fill="none" stroke="#ff644f" stroke-width="1.8" marker-end="url(#arrCoral4)"></path><path d="M136,86 L 108,86" fill="none" stroke="#ff644f" stroke-width="1.8" marker-end="url(#arrCoral4)"></path><path d="M108,90 L 136,108" fill="none" stroke="#ff644f" stroke-width="1.6" marker-end="url(#arrCoral4)"></path><path d="M136,114 L 108,94" fill="none" stroke="#ff644f" stroke-width="1.6" marker-end="url(#arrCoral4)"></path><line x1="72" y1="98" x2="72" y2="128" stroke="#494648" stroke-width="1.5" marker-end="url(#arrGray4)"></line><rect x="40" y="132" width="64" height="22" rx="5" fill="#e6f9ee" stroke="#4caf50"></rect><text x="72" y="147" fill="#1f1d1e">Ergebnis</text></g></svg>`,

  4.5: `<svg width="240" height="160" viewBox="0 0 240 160"><defs><marker id="arrCoral45" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0,0 L10,5 L0,10 z" fill="#ff644f"></path></marker><marker id="arrGray45" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0,0 L10,5 L0,10 z" fill="#494648"></path></marker></defs><g font-family="Inter" font-size="10.5" font-weight="600" text-anchor="middle"><rect x="40" y="6" width="64" height="22" rx="5" fill="#cfe0e5" stroke="#5a8a96"></rect><text x="72" y="21" fill="#1f1d1e">Auslöser</text><line x1="72" y1="30" x2="72" y2="60" stroke="#494648" stroke-width="1.5" marker-end="url(#arrGray45)"></line><rect x="36" y="64" width="72" height="32" rx="7" fill="#ff644f" stroke="#cc4c3d"></rect><text x="72" y="84" fill="#fff">KI-Agent</text><rect x="138" y="46" width="68" height="22" rx="5" fill="#fff" stroke="#494648"></rect><text x="172" y="61" fill="#1f1d1e" font-size="10">Tools</text><rect x="136" y="70" width="72" height="26" rx="6" fill="#cc4c3d" stroke="#cc4c3d"></rect><text x="172" y="86" fill="#fff" font-size="10.5" font-weight="700">Memory</text><rect x="138" y="100" width="68" height="22" rx="5" fill="#fff" stroke="#494648"></rect><text x="172" y="115" fill="#1f1d1e" font-size="10">Skills</text><path d="M108,76 L 136,57" fill="none" stroke="#ff644f" stroke-width="1.6" marker-end="url(#arrCoral45)"></path><path d="M136,63 L 108,80" fill="none" stroke="#ff644f" stroke-width="1.6" marker-end="url(#arrCoral45)"></path><path d="M108,82 L 136,82" fill="none" stroke="#ff644f" stroke-width="2.2" marker-end="url(#arrCoral45)"></path><path d="M136,86 L 108,86" fill="none" stroke="#ff644f" stroke-width="2.2" marker-end="url(#arrCoral45)"></path><path d="M108,90 L 136,109" fill="none" stroke="#ff644f" stroke-width="1.6" marker-end="url(#arrCoral45)"></path><path d="M136,115 L 108,94" fill="none" stroke="#ff644f" stroke-width="1.6" marker-end="url(#arrCoral45)"></path><line x1="72" y1="98" x2="72" y2="128" stroke="#494648" stroke-width="1.5" marker-end="url(#arrGray45)"></line><rect x="32" y="132" width="80" height="22" rx="5" fill="#f7f0dd" stroke="#a78937"></rect><text x="72" y="147" fill="#1f1d1e">Erkenntnis</text></g></svg>`,

  5: `<svg width="240" height="160" viewBox="0 0 240 160"><defs><marker id="arrCoral5" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0,0 L10,5 L0,10 z" fill="#ff644f"></path></marker><marker id="arrGray5" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0,0 L10,5 L0,10 z" fill="#494648"></path></marker></defs><g font-family="Inter" font-size="10.5" font-weight="600" text-anchor="middle"><rect x="40" y="6" width="64" height="22" rx="5" fill="none" stroke="#5a8a96" stroke-dasharray="3 3"></rect><text x="72" y="21" fill="#1f1d1e">Auslöser</text><line x1="72" y1="30" x2="72" y2="60" stroke="#494648" stroke-width="1.5" stroke-dasharray="3 3" marker-end="url(#arrGray5)"></line><rect x="36" y="64" width="72" height="32" rx="7" fill="none" stroke="#cc4c3d" stroke-dasharray="3 3"></rect><text x="72" y="84" fill="#cc4c3d">KI-Agent</text><rect x="138" y="46" width="68" height="22" rx="5" fill="none" stroke="#494648" stroke-dasharray="3 3"></rect><text x="172" y="61" fill="#1f1d1e" font-size="10">Tools</text><rect x="138" y="72" width="68" height="22" rx="5" fill="none" stroke="#cc4c3d" stroke-dasharray="3 3"></rect><text x="172" y="87" fill="#cc4c3d" font-size="10" font-weight="700">Memory</text><rect x="138" y="98" width="68" height="22" rx="5" fill="none" stroke="#494648" stroke-dasharray="3 3"></rect><text x="172" y="113" fill="#1f1d1e" font-size="10">Skills</text><path d="M108,82 L 136,82" fill="none" stroke="#ff644f" stroke-width="1.6" stroke-dasharray="3 3" marker-end="url(#arrCoral5)"></path><path d="M136,86 L 108,86" fill="none" stroke="#ff644f" stroke-width="1.6" stroke-dasharray="3 3" marker-end="url(#arrCoral5)"></path><line x1="56" y1="98" x2="38" y2="128" stroke="#494648" stroke-width="1.5" stroke-dasharray="3 3" marker-end="url(#arrGray5)"></line><line x1="88" y1="98" x2="106" y2="128" stroke="#494648" stroke-width="1.5" stroke-dasharray="3 3" marker-end="url(#arrGray5)"></line><rect x="2" y="132" width="68" height="22" rx="5" fill="none" stroke="#4caf50" stroke-dasharray="3 3"></rect><text x="36" y="147" fill="#1f1d1e">Ergebnis</text><rect x="76" y="132" width="80" height="22" rx="5" fill="none" stroke="#a78937" stroke-dasharray="3 3"></rect><text x="116" y="147" fill="#1f1d1e">Erkenntnis</text></g></svg>`,
};

const DISCIPLINES = [
  {
    id: "prompt",
    name: "Prompt Engineering",
    sinceStage: 1,
    sinceLabel: "ab Stufe 1",
    sinceLong: "ab Stufe 1 — bleibt überall aktiv",
    about:
      "Anweisungen so formulieren, dass das Modell tut, was du willst — Rolle, Format, Beispiele.",
    wann: "Sobald du mit einem Modell sprichst. Bleibt bei jeder höheren Stufe wichtig.",
    fehler:
      "Zu vage („hilf mir mit dem Vertrag“) oder zu mikromanagig („in 3 Bulletpoints à 12 Wörtern“). Trefferraum liegt dazwischen.",
    bausteine:
      "System-Prompts, Few-Shot-Beispiele, Output-Format-Vorgaben, Persona.",
  },
  {
    id: "context",
    name: "Context Engineering",
    sinceStage: 2,
    sinceLabel: "ab Stufe 2",
    sinceLong: "ab Stufe 2",
    about:
      "Dem Modell den richtigen Kontext geben — nicht zu viel, nicht zu wenig.",
    wann: "Sobald du vorab konfigurieren kannst (Bot, Workflow, Agent).",
    fehler:
      "Komplette Wissensbasis reinwerfen — das Modell verliert Fokus und halluziniert eher.",
    bausteine:
      "System-Prompts mit Wissen, RAG, Memory-Retrieval, Kontextfenster-Management.",
  },
  {
    id: "harness",
    name: "Harness Engineering",
    sinceStage: 4,
    sinceLabel: "ab Stufe 4",
    sinceLong: "ab Stufe 4",
    about:
      "CLI, Tools, Sandbox — die Infrastruktur, in der ein Agent operieren darf.",
    wann: "Sobald die KI selbst entscheidet, welche Werkzeuge sie greift.",
    fehler:
      "Zu viele Tools mit zu breiten Berechtigungen. Schwer zu debuggen, manchmal gefährlich.",
    bausteine:
      "MCP-Server, Tool-Whitelists, Sandbox-Container, CLI-Wrapper, klare Tool-Interfaces.",
  },
  {
    id: "memory",
    name: "Memory & Skill",
    sinceStage: 4.5,
    sinceLabel: "ab Stufe 4.5",
    sinceLong: "ab Stufe 4.5",
    about: "Erinnerung über Sessions hinweg, Spezialisierung über Sub-Agents.",
    wann: "Sobald der Agent über Zeit besser werden soll, nicht nur einzelne Aufgaben lösen.",
    fehler:
      "Memory akkumuliert Rauschen, weil kein Decay oder Konsolidierung passiert.",
    bausteine:
      "Vector-Stores, episodisches Memory, Sub-Agent-Architektur, Skill-Files.",
  },
];

const STUFEN_CSS = `
.stufen-root {
  --coral-red:#ff644f;
  --muted-red:#e55745;
  --deep-red:#cc4c3d;
  --coral-tint:#fff0ee;
  --blush:#ffd4cc;
  --charcoal:#494648;
  --off-white:#f8f7f6;
  --white:#ffffff;
  --border:#e5e5e5;
  --border-soft:#f0f0f0;
  --border-strong:#d4d4d4;
  --fg-muted:#6b6870;
  --petrol:#5a8a96;
  --petrol-deep:#456c76;
  --petrol-tint:#eaf1f3;
  --petrol-soft:#cfe0e5;
  --sand:#c9a961;
  --sand-deep:#a78937;
  --sand-tint:#f7f0dd;
  --sand-soft:#ecdcae;
  --coral:#ff644f;
  --coral-soft:#ffd4cc;
  --font-display:'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;
  color:var(--charcoal);
  font-family:var(--font-body);
}

.stufen-page-content{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:48px 40px 40px 40px;
  box-sizing:border-box;
}
@media (max-width: 720px){
  .stufen-page-content{padding:28px 20px;}
}

.stufen-kicker{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--coral-red);
  margin-bottom:14px;
}
.stufen-h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(32px, 5.8vw, 54px);
  line-height:1.05;
  letter-spacing:-0.025em;
  color:#1f1d1e;
  margin:0;
  word-break:break-word;
}
.brand-mark{display:block;margin-bottom:14px;}

.intro{
  margin-top:28px;
  background:var(--white);
  border:1px solid var(--border-soft);
  border-left:4px solid var(--coral-red);
  border-radius:10px;
  padding:18px 24px;
  box-shadow:0 1px 3px rgba(0,0,0,.03);
}
.intro-text{
  font-family:var(--font-display);
  font-size:16.5px;
  line-height:1.5;
  color:#1f1d1e;
  margin:0;
  font-weight:500;
}
.intro-text em{font-style:normal;color:var(--coral-red);font-weight:700;}
.intro-text .intro-hint{color:var(--fg-muted);font-weight:500;}

.bands-wrap{margin-top:28px;}
.bands-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:13px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--fg-muted);
  margin:0 0 8px 0;
}

.discipline-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.d-chip{
  flex:0 1 auto;display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:10px 16px 10px 18px;
  background:var(--white);
  border:1.5px solid var(--border);
  border-left-width:5px;
  border-radius:10px;
  cursor:pointer;
  font-family:var(--font-display);
  color:var(--charcoal);
  text-align:left;
  line-height:1.2;
  transition:transform .25s ease, opacity .35s ease, filter .35s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.d-chip-name{font-weight:700;font-size:13.5px;letter-spacing:-0.005em;}
.d-chip-since{font-weight:500;font-size:11px;color:var(--fg-muted);letter-spacing:0.02em;}
.d-chip-dots{display:inline-flex;align-items:center;gap:3px;margin-top:5px;}
.d-chip-dot{width:6px;height:6px;border-radius:50%;background:var(--border);transition:background .2s ease, transform .2s ease;}
.d-chip-dot.is-on{background:var(--coral-red);}
.d-chip-dot.is-current{transform:scale(1.6);box-shadow:0 0 0 2px rgba(255,100,79,.25);}
.d-chip.b-prompt {border-left-color:var(--petrol);}
.d-chip.b-context{border-left-color:var(--petrol-deep);}
.d-chip.b-harness{border-left-color:var(--coral-red);}
.d-chip.b-memory {border-left-color:var(--deep-red);}
.d-chip:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.06);}
.d-chip.is-active{
  background:var(--coral-tint);
  border-color:var(--coral-red);
  box-shadow:0 0 0 3px rgba(255,100,79,.20), 0 6px 12px rgba(255,100,79,.10);
  transform:translateY(-2px);
  z-index:3;
}
.d-chip.is-active .d-chip-since{color:var(--coral-red);}
.discipline-chips.is-cross .d-chip.is-dimmed{opacity:.28;filter:saturate(.35);}
.discipline-chips.is-cross .d-chip.is-applies{
  border-color:var(--coral-red);
  box-shadow:0 0 0 2px rgba(255,100,79,.18), 0 4px 10px rgba(255,100,79,.10);
}

.bands-panel{
  margin-top:14px;
  background:var(--white);
  border:1px solid var(--border-soft);
  border-radius:12px;
  overflow:hidden;
  max-height:0;
  opacity:0;
  transform:translateY(-6px);
  box-shadow:0 1px 3px rgba(0,0,0,.04);
  transition:max-height .5s cubic-bezier(.2,.7,.2,1), opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
.bands-panel.is-open{max-height:520px;opacity:1;transform:translateY(0);}
.bp-inner{padding:24px 28px;}
.bp-head{display:flex;align-items:baseline;gap:14px;margin-bottom:6px;}
.bp-name{font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-0.015em;color:#1f1d1e;}
.bp-since{font-size:12px;color:var(--fg-muted);font-weight:500;}
.bp-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;margin-top:14px;}
@media (max-width:720px){.bp-grid{grid-template-columns:1fr;}}
.bp-sec-label{font-size:10.5px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--coral-red);margin-bottom:4px;}
.bp-sec-body{font-size:14px;line-height:1.55;color:var(--charcoal);margin:0;}
.bands-panel.b-prompt .bp-name{color:var(--petrol);}
.bands-panel.b-context .bp-name{color:var(--petrol-deep);}
.bands-panel.b-harness .bp-name{color:var(--coral-red);}
.bands-panel.b-memory .bp-name{color:var(--deep-red);}

.stair-wrap{margin-top:40px;position:relative;}
.stair{
  position:relative;width:100%;margin:0 auto;
  display:flex;flex-wrap:nowrap;gap:12px;
  align-items:flex-start;justify-content:center;
}
.step{
  position:relative;flex:0 0 172px;width:172px;height:200px;
  background:var(--white);border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  overflow:hidden;border:1px solid var(--border-soft);
  display:flex;flex-direction:column;cursor:pointer;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s cubic-bezier(.2,.7,.2,1), border-color .25s ease;
}
.step:nth-child(1){margin-top:150px;}
.step:nth-child(2){margin-top:120px;}
.step:nth-child(3){margin-top:90px;}
.step:nth-child(4){margin-top:60px;}
.step:nth-child(5){margin-top:30px;}
.step:nth-child(6){margin-top:0;}
@media (max-width: 1180px){
  .stair{flex-wrap:wrap;align-items:stretch;}
  .step{margin-top:0 !important;}
}
@media (max-width: 720px){
  .stair{gap:14px;}
  .step{flex:1 1 100%;width:100%;height:auto;min-height:160px;}
  .step .body{padding:14px 18px 18px;}
  .step .tagline{font-size:14px;}
  /* Focus-Modus: aktive Karte bleibt, alle anderen blenden aus */
  .stair:has(.step.is-active) .step:not(.is-active){display:none;}
}

.step.is-active{
  border-color:var(--coral-red);
  box-shadow:0 0 0 3px rgba(255,100,79,.22), 0 6px 14px rgba(255,100,79,.14);
  transform:translateY(-4px);z-index:5;
}
.step:not(:last-of-type):not(.is-active):hover{
  transform:translateY(-4px) rotate(-.3deg);
  box-shadow:0 4px 12px rgba(0,0,0,.05), 0 14px 30px rgba(73,70,72,.10);
  z-index:5;
}
.step:last-of-type:not(.is-active):hover{
  transform:translateY(-4px) rotate(-.3deg);
  box-shadow:0 4px 12px rgba(255,100,79,.08), 0 14px 30px rgba(255,100,79,.12);
}

.step .head{padding:14px 16px 12px;color:var(--white);position:relative;}
.step .head .row1{display:flex;align-items:baseline;gap:10px;}
.step .head .num{font-family:var(--font-display);font-weight:800;font-size:24px;letter-spacing:-0.02em;line-height:1;}
.step .head .label{margin-left:auto;font-size:9.5px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;opacity:.85;white-space:nowrap;}
.step .head .name{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-0.01em;line-height:1.15;margin-top:6px;}

.step .body{padding:14px 16px 16px;flex:1;display:flex;flex-direction:column;}
.step .tagline{font-size:13px;line-height:1.4;color:var(--charcoal);margin:0 0 10px 0;}
.step .more-hint{margin-top:auto;padding-top:10px;border-top:1px dashed var(--border-soft);font-size:10.5px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-muted);display:flex;align-items:center;gap:6px;}
.step .more-hint::after{content:"+";margin-left:auto;font-size:16px;font-weight:700;color:var(--coral-red);transition:transform .3s ease;line-height:1;display:inline-block;}
.step:not(.is-active) .more-hint::after{animation:hintPulse 2.6s ease-in-out infinite;}
.step.is-active .more-hint::after{content:"−";animation:none;}
@keyframes hintPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.28);}}

.step.fam-petrol .head{background:var(--petrol);}
.step.fam-petrol{border-color:#cfe0e5;}
.step.fam-sand .head{background:var(--sand);}
.step.fam-sand{border-color:var(--sand-soft);}
.step.fam-coral .head{background:var(--coral);}
.step.fam-coral{border-color:var(--coral-soft);}
.step.is-vision{background:transparent;border:2px dashed var(--coral);box-shadow:none;}
.step.is-vision .head{background:var(--coral-tint);color:var(--coral-red);border-bottom:1px dashed var(--coral);}
.step.is-vision .head .label{color:var(--coral-red);opacity:.9;}

.stair-arrow{
  position:absolute;top:50%;right:-14px;transform:translateY(-50%);
  color:var(--coral-red);opacity:.55;pointer-events:none;z-index:4;
  transition:opacity .25s ease, transform .25s ease;
}
.step:last-of-type .stair-arrow{display:none;}
.step:hover .stair-arrow{opacity:.9;transform:translateY(-50%) translateX(2px);}
@media (max-width: 1180px){.stair-arrow{display:none;}}

.detail-panel{
  margin-top:36px;background:var(--white);border:1px solid var(--border-soft);
  border-radius:14px;box-shadow:0 1px 3px rgba(0,0,0,.04);overflow:hidden;
  max-height:0;opacity:0;transform:translateY(-6px);
  transition:max-height .5s cubic-bezier(.2,.7,.2,1), opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
.detail-panel.is-open{max-height:820px;opacity:1;transform:translateY(0);}
.detail-panel{position:relative;}
.detail-close{
  position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--border);background:var(--white);color:var(--fg-muted);
  font-size:20px;font-weight:400;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s ease;z-index:5;
}
.detail-close:hover{
  color:var(--coral-red);border-color:var(--coral-red);
  background:var(--coral-tint);transform:scale(1.08);
}
.detail-close:focus-visible{outline:2px solid var(--coral-red);outline-offset:2px;}
.detail-inner{display:grid;grid-template-columns:1fr 280px;gap:32px;padding:28px 32px;align-items:start;}
@media (max-width: 820px){.detail-inner{grid-template-columns:1fr;gap:20px;padding:22px 24px;}}
.detail-head{display:flex;align-items:baseline;gap:14px;margin-bottom:12px;}
.detail-num{font-family:var(--font-display);font-weight:800;font-size:42px;letter-spacing:-0.02em;line-height:1;color:var(--coral-red);}
.detail-name{font-family:var(--font-display);font-weight:800;font-size:26px;letter-spacing:-0.015em;color:#1f1d1e;line-height:1.15;}
.detail-label{font-size:10.5px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:10px;}
.detail-pattern{background:var(--off-white);border:1px solid var(--border-soft);border-radius:10px;padding:18px;display:flex;align-items:center;justify-content:center;}
.detail-pattern svg{width:100%;height:auto;max-width:260px;}

.detail-panel .tools{
  font-family:var(--font-mono);font-size:12.5px;line-height:1.5;color:var(--charcoal);
  background:var(--off-white);padding:9px 12px;border-radius:6px;margin:0 0 14px 0;border:1px solid var(--border-soft);
}
.detail-panel .desc{font-size:15px;line-height:1.55;color:var(--charcoal);margin:0 0 16px 0;}
.detail-panel .when-label,
.detail-panel .example-label,
.detail-panel .transition-label{font-size:10.5px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--coral-red);margin:0 0 4px 0;}
.detail-panel .when,
.detail-panel .example,
.detail-panel .transition{font-size:14px;line-height:1.55;color:var(--charcoal);margin:0 0 18px 0;}
.detail-panel .transition{margin-bottom:0;}

/* Animations */
.detail-pattern svg line[marker-end],
.detail-pattern svg path[marker-end]{
  stroke-dasharray:4 5;animation:stufenFlow 1.6s linear infinite;
}
.detail-panel.is-vision .detail-pattern svg line[marker-end],
.detail-panel.is-vision .detail-pattern svg path[marker-end]{animation:stufenBreathe 3.2s ease-in-out infinite;}
@keyframes stufenFlow{to{stroke-dashoffset:-18;}}
@keyframes stufenBreathe{0%,100%{opacity:.55;}50%{opacity:1;}}
.detail-panel.fam-coral:not(.is-vision) .detail-pattern svg rect[fill="#ff644f"],
.detail-panel.fam-coral:not(.is-vision) .detail-pattern svg rect[fill="#cc4c3d"]{
  animation:stufenPulse 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center;
}
@keyframes stufenPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.85;transform:scale(1.04);}}

@media (prefers-reduced-motion: reduce){
  .stufen-root *, .stufen-root *::before, .stufen-root *::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;
  }
}
`;

function StufenPage({ lang, setLang }) {
  const [activeStep, setActiveStep] = React.useState(null);
  const [activeChip, setActiveChip] = React.useState(null);
  const [mobile, setMobile] = React.useState(() => window.innerWidth < 760);

  React.useEffect(() => {
    const h = () => setMobile(window.innerWidth < 760);
    window.addEventListener("resize", h);
    return () => window.removeEventListener("resize", h);
  }, []);

  const rootRef = React.useRef(null);
  React.useEffect(() => {
    const onClick = (e) => {
      if (!rootRef.current) return;
      const target = e.target;
      const inStep = target.closest && target.closest(".step");
      const inDetail = target.closest && target.closest(".detail-panel");
      const inChip = target.closest && target.closest(".d-chip");
      const inBands = target.closest && target.closest(".bands-panel");
      if (!inStep && !inDetail) setActiveStep(null);
      if (!inChip && !inBands) setActiveChip(null);
    };
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, []);

  const activeStepData = STUFEN_DATA.find((s) => s.num === activeStep);
  const activeChipData = DISCIPLINES.find((d) => d.id === activeChip);
  const activeStageNum = activeStep != null ? stageToNum(activeStep) : null;

  const toggleStep = (num) => setActiveStep(activeStep === num ? null : num);
  const toggleChip = (id) => setActiveChip(activeChip === id ? null : id);

  const renderChip = (d) => {
    const isActive = activeChip === d.id;
    const applies = activeStageNum != null && activeStageNum >= d.sinceStage;
    const dimmed = activeStageNum != null && !applies;
    const cls = [
      "d-chip",
      "b-" + d.id,
      isActive ? "is-active" : "",
      applies ? "is-applies" : "",
      dimmed ? "is-dimmed" : "",
    ]
      .filter(Boolean)
      .join(" ");
    return (
      <button
        key={d.id}
        type="button"
        className={cls}
        aria-expanded={isActive}
        onClick={(e) => {
          e.stopPropagation();
          toggleChip(d.id);
        }}
      >
        <span className="d-chip-name">{d.name}</span>
        <span className="d-chip-dots" aria-hidden="true">
          {STUFEN_STAGE_NUMS.map((s) => {
            const isOn = s >= d.sinceStage;
            const isCurrent = isOn && activeStageNum === s;
            const dotCls = [
              "d-chip-dot",
              isOn ? "is-on" : "",
              isCurrent ? "is-current" : "",
            ]
              .filter(Boolean)
              .join(" ");
            return <span key={s} className={dotCls} />;
          })}
        </span>
        <span className="d-chip-since">{d.sinceLabel}</span>
      </button>
    );
  };

  const renderStep = (s) => {
    const isActive = activeStep === s.num;
    const cls = ["step", s.fam, isActive ? "is-active" : ""]
      .filter(Boolean)
      .join(" ");
    return (
      <article
        key={s.num}
        className={cls}
        role="button"
        tabIndex={0}
        aria-expanded={isActive}
        onClick={(e) => {
          e.stopPropagation();
          toggleStep(s.num);
        }}
        onKeyDown={(e) => {
          if (e.key === "Enter" || e.key === " ") {
            e.preventDefault();
            toggleStep(s.num);
          }
        }}
      >
        <div className="head">
          <div className="row1">
            <div className="num">{s.num}</div>
            <div className="label">{s.label}</div>
          </div>
          <div className="name">{s.name}</div>
        </div>
        <div className="body">
          <p className="tagline">{s.tagline}</p>
          <div className="more-hint">Details</div>
        </div>
        <svg
          className="stair-arrow"
          width="14"
          height="14"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2.5"
          strokeLinecap="round"
          strokeLinejoin="round"
          aria-hidden="true"
        >
          <polyline points="9 6 15 12 9 18" />
        </svg>
      </article>
    );
  };

  const chipsCls = ["discipline-chips", activeStep != null ? "is-cross" : ""]
    .filter(Boolean)
    .join(" ");
  const bandsPanelCls = [
    "bands-panel",
    activeChipData ? "is-open b-" + activeChipData.id : "",
  ].join(" ");
  const detailPanelCls = [
    "detail-panel",
    activeStepData ? "is-open " + activeStepData.fam : "",
  ].join(" ");

  return (
    <div
      ref={rootRef}
      className="stufen-root"
      style={{ minHeight: "100vh", background: KS.offwhite }}
    >
      <style>{STUFEN_CSS}</style>

      {/* Sticky top bar — Webseiten-Konvention */}
      <header
        style={{
          position: "sticky",
          top: 0,
          zIndex: 50,
          background: "rgba(248,247,246,0.85)",
          backdropFilter: "blur(10px)",
          WebkitBackdropFilter: "blur(10px)",
          borderBottom: `1px solid ${KS.border}`,
          padding: "14px 24px",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        <a
          href="index.html"
          style={{
            display: "flex",
            alignItems: "center",
            gap: 10,
            textDecoration: "none",
            color: KS.charcoal,
            whiteSpace: "nowrap",
          }}
        >
          <span
            style={{
              color: KS.muted,
              fontFamily: KSFonts.mono,
              fontSize: 14,
              marginRight: 2,
            }}
          >
            ←
          </span>
          <div
            style={{
              width: 24,
              height: 24,
              background: KS.coral,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              color: "#fff",
              fontWeight: 700,
              fontSize: 12,
              fontFamily: KSFonts.mono,
            }}
          >
            K
          </div>
          <div style={{ fontWeight: 600, fontSize: 14, letterSpacing: -0.2 }}>
            Kilian Springer
          </div>
        </a>
        <LangToggle lang={lang} setLang={setLang} />
      </header>

      <main className="stufen-page-content">
        {/* Brand-Mark + Kicker + H1 */}
        <svg
          className="brand-mark"
          viewBox="0 0 110 80"
          width="40"
          height="29"
          aria-hidden="true"
        >
          <rect x="0" y="60" width="22" height="20" rx="3" fill="#5a8a96" />
          <rect x="22" y="45" width="22" height="35" rx="3" fill="#5a8a96" />
          <rect x="44" y="30" width="22" height="50" rx="3" fill="#c9a961" />
          <rect x="66" y="15" width="22" height="65" rx="3" fill="#ff644f" />
          <rect x="88" y="0" width="22" height="80" rx="3" fill="#ff644f" />
        </svg>
        <div className="stufen-kicker">Eine Landkarte</div>
        <h1 className="stufen-h1">Die 5 Stufen der KI-Nutzung</h1>

        {/* Intro */}
        <section className="intro">
          <p className="intro-text">
            Fünf Stufen plus eine Zwischenstufe, wie KI in deinen Arbeitsalltag
            rückt — vom <em>du tippst</em> bis zum <em>KI denkt selbst</em>.
            Durchgespielt am Beispiel einer eingehenden Anfrage-Mail.{" "}
            <span className="intro-hint">Klick eine Karte für Details.</span>
          </p>
        </section>

        {/* Engineering-Disziplinen */}
        <section className="bands-wrap">
          <h2 className="bands-title">Die vier Engineering-Disziplinen</h2>
          <div className={chipsCls}>{DISCIPLINES.map(renderChip)}</div>
          <div className={bandsPanelCls} aria-hidden={!activeChipData}>
            <div className="bp-inner">
              <div className="bp-head">
                <span className="bp-name">
                  {activeChipData ? activeChipData.name : ""}
                </span>
                <span className="bp-since">
                  {activeChipData ? activeChipData.sinceLong : ""}
                </span>
              </div>
              <div className="bp-grid">
                <div>
                  <div className="bp-sec-label">Worum geht's</div>
                  <p className="bp-sec-body">
                    {activeChipData ? activeChipData.about : ""}
                  </p>
                </div>
                <div>
                  <div className="bp-sec-label">Typischer Fehler</div>
                  <p className="bp-sec-body">
                    {activeChipData ? activeChipData.fehler : ""}
                  </p>
                </div>
                <div>
                  <div className="bp-sec-label">Wann wichtig</div>
                  <p className="bp-sec-body">
                    {activeChipData ? activeChipData.wann : ""}
                  </p>
                </div>
                <div>
                  <div className="bp-sec-label">Bausteine</div>
                  <p className="bp-sec-body">
                    {activeChipData ? activeChipData.bausteine : ""}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Treppe */}
        <section className="stair-wrap">
          <div className="stair">{STUFEN_DATA.map(renderStep)}</div>
          <div className={detailPanelCls} aria-hidden={!activeStepData}>
            <button
              type="button"
              className="detail-close"
              aria-label="Schließen"
              title="Schließen"
              onClick={(e) => {
                e.stopPropagation();
                setActiveStep(null);
              }}
            >
              ×
            </button>
            <div className="detail-inner">
              <div className="detail-text">
                <div className="detail-head">
                  <span className="detail-num">
                    {activeStepData ? activeStepData.num : ""}
                  </span>
                  <div>
                    <div className="detail-label">
                      {activeStepData ? activeStepData.label : ""}
                    </div>
                    <div className="detail-name">
                      {activeStepData ? activeStepData.name : ""}
                    </div>
                  </div>
                </div>
                {activeStepData && (
                  <React.Fragment>
                    <div className="tools">{activeStepData.tools}</div>
                    <p className="desc">{activeStepData.desc}</p>
                    <div className="when-label">Wann sinnvoll</div>
                    <p className="when">{activeStepData.when}</p>
                    <div className="example-label">Beispiel</div>
                    <p className="example">{activeStepData.example}</p>
                    <div className="transition-label">Übergang</div>
                    <p className="transition">{activeStepData.transition}</p>
                  </React.Fragment>
                )}
              </div>
              <div
                className="detail-pattern"
                dangerouslySetInnerHTML={{
                  __html: activeStepData
                    ? STUFEN_PATTERNS[activeStepData.num]
                    : "",
                }}
              />
            </div>
          </div>
        </section>
      </main>

      {/* Footer */}
      <footer
        style={{
          borderTop: `1px solid ${KS.border}`,
          padding: "22px 24px 28px",
          maxWidth: 1280,
          margin: "40px auto 0",
          fontFamily: KSFonts.mono,
          fontSize: 11,
          letterSpacing: 0.5,
          textTransform: "uppercase",
          color: KS.charcoal,
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          flexWrap: "wrap",
          gap: 12,
        }}
      >
        <div>© 2026 · kilian-springer.com</div>
        <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
          <a
            href="index.html"
            style={{ color: "inherit", textDecoration: "none" }}
          >
            Über
          </a>
          <a
            href="events.html"
            style={{ color: "inherit", textDecoration: "none" }}
          >
            Events
          </a>
          <a
            href="impressum.html"
            style={{ color: "inherit", textDecoration: "none" }}
          >
            Impressum
          </a>
          <a
            href="datenschutz.html"
            style={{ color: "inherit", textDecoration: "none" }}
          >
            Datenschutz
          </a>
        </div>
      </footer>
    </div>
  );
}