:root {
  --ink: #1b2733;
  --mut: #5b6b7b;
  --acc: #0f6f6c;
  --acc-soft: #e3f0ef;
  --bg: #f5f4f0;
  --card: #ffffff;
  --line: #e3e1da;
  --warn: #9a6b1f;
  --warn-bg: #fbf3e2;
  --dark: #14262b;
  --radius: 14px;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg); color: var(--ink); line-height: 1.55;
  min-height: 100vh; display: flex; flex-direction: column;
}
.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; max-width: 980px; width: 100%; margin: 0 auto;
}
.mark { font-weight: 800; letter-spacing: .14em; color: var(--acc); text-decoration: none; font-size: 15px; }
.mark .demo {
  font-weight: 600; letter-spacing: 0; font-size: 11px; color: #fff;
  background: var(--acc); border-radius: 5px; padding: 2px 7px; vertical-align: 2px; margin-left: 6px;
}
#topnav a { color: var(--mut); text-decoration: none; font-size: 14px; margin-left: 18px; }
#topnav a:hover { color: var(--ink); }
main { flex: 1; width: 100%; max-width: 980px; margin: 0 auto; padding: 12px 24px 64px; }
.foot {
  max-width: 980px; width: 100%; margin: 0 auto; padding: 20px 24px 32px;
  color: var(--mut); font-size: 12.5px; border-top: 1px solid var(--line);
}
h1 { font-size: 28px; line-height: 1.25; margin-bottom: 8px; }
h2.sec {
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--acc);
  margin: 44px 0 14px; display: flex; align-items: center; gap: 10px;
}
h2.sec::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.lead { color: var(--mut); max-width: 640px; margin-bottom: 30px; }

/* ---- picker ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; }
.pcard {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; cursor: pointer; text-align: left; font: inherit; color: inherit;
  transition: box-shadow .15s, transform .15s; display: flex; flex-direction: column; gap: 8px;
}
.pcard:hover { box-shadow: 0 8px 28px rgba(27,39,51,.12); transform: translateY(-2px); }
.pcard .who { font-size: 18px; font-weight: 700; }
.pcard .meta { color: var(--mut); font-size: 13.5px; }
.pcard .tag {
  align-self: flex-start; background: var(--acc-soft); color: var(--acc);
  font-size: 11.5px; font-weight: 700; border-radius: 5px; padding: 3px 8px;
}
.pcard .tagline { font-size: 14px; color: var(--ink); }
.pcard.disabled { opacity: .55; cursor: not-allowed; border-style: dashed; }
.pcard.disabled:hover { box-shadow: none; transform: none; }

/* ---- processing ---- */
.proc { max-width: 460px; margin: 12vh auto 0; text-align: center; }
.proc .who { color: var(--mut); margin-bottom: 26px; }
.steps { text-align: left; display: inline-block; }
.step { color: var(--mut); margin: 10px 0; opacity: .35; transition: opacity .4s; display: flex; gap: 10px; align-items: center; }
.step.on { opacity: 1; color: var(--ink); }
.step .dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--line); flex: none;
}
.step.on .dot { background: var(--acc); animation: pulse 1s infinite; }
.step.done .dot { background: var(--acc); animation: none; }
@keyframes pulse { 50% { transform: scale(1.6); opacity: .6; } }
.skip { display: inline-block; margin-top: 30px; color: var(--mut); font-size: 13px; }

/* ---- analysis ---- */
.tabs { display: flex; gap: 8px; margin: 6px 0 26px; border-bottom: 1px solid var(--line); }
.tabs a {
  padding: 9px 14px; text-decoration: none; color: var(--mut); font-size: 14.5px; font-weight: 600;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a.on { color: var(--acc); border-bottom-color: var(--acc); }
.hero {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 32px;
}
.hero .headline { font-size: 22px; font-weight: 750; line-height: 1.35; margin-bottom: 14px; }
.hero p { margin-bottom: 10px; }
.callout {
  background: var(--acc-soft); border-left: 4px solid var(--acc); border-radius: 8px;
  padding: 14px 18px; margin-top: 16px;
}
.callout .k { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--acc); margin-bottom: 4px; }
.note {
  background: var(--warn-bg); border-left: 4px solid var(--warn); border-radius: 8px;
  padding: 12px 16px; color: #5a4310; font-size: 14px; margin-top: 14px;
}
.pill {
  display: inline-block; border-radius: 999px; padding: 3px 11px; font-size: 12.5px; font-weight: 700;
  background: #e8e6df; color: #4a5561; white-space: nowrap;
}
.pill.sehr-stark, .pill.sehr-hoch { background: #dcefdc; color: #1e6b2e; }
.pill.stark, .pill.hoch { background: #e6f2e0; color: #3d7a2e; }
.pill.vorhanden, .pill.mittel-hoch { background: #e2ecf6; color: #2b5e8f; }
.pill.grundkenntnisse, .pill.mittel { background: #eee9dc; color: #7a6420; }
.pill.hinweis { background: var(--warn-bg); color: var(--warn); }
.pill.keine-evidenz { background: #f0efec; color: #8a94a0; border: 1px dashed #c9c6bd; }
.pill.langfristig { background: #ece4f4; color: #5d3f8f; }
.pill.individuell { background: #e8e6df; color: #4a5561; }
.pill.skill-gap { background: #ece4f4; color: #5d3f8f; }
.pill.evidence-gap { background: var(--warn-bg); color: var(--warn); }

.path { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0; }
.path .st {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 13px;
}
.path .st .z { display: block; font-size: 11px; color: var(--mut); }
.path .arr { color: var(--acc); font-weight: 800; }

table.grid { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: 14.5px; }
.tblwrap { overflow-x: auto; border-radius: var(--radius); }
table.grid th, table.grid td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.grid th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); background: #faf9f6; }
table.grid tr:last-child td { border-bottom: none; }

ul.plain { list-style: none; display: grid; gap: 8px; }
ul.plain li { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; font-size: 14.5px; }

.opts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.opt {
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 17px; cursor: pointer; transition: border-color .12s, background .12s;
}
.opt:hover { border-color: var(--acc); }
.opt.computed { border-color: var(--acc); }
.opt.computed::before { content: "●"; color: var(--acc); margin-right: 7px; font-size: 10px; vertical-align: 1px; }
.opt.active { background: var(--acc); color: #fff; border-color: var(--acc); }
.opt-hint { color: var(--mut); font-size: 13px; margin-top: 10px; }

.dialog { margin-top: 22px; display: grid; gap: 14px; }
.bubble {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px;
  padding: 13px 17px; max-width: 620px; font-size: 14.5px;
}
.routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin-top: 6px; }
.route { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.route .rname { font-weight: 700; margin-bottom: 4px; }
.route ul { margin: 8px 0 0 18px; font-size: 13.5px; color: var(--mut); }
.route .rhint { margin-top: 10px; font-size: 13px; color: var(--warn); }

.qcards { display: grid; gap: 12px; }
.qcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.qcard .qthema { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--mut); margin-bottom: 5px; }
.qcard .qfrage { font-weight: 600; }
.qcard .qopts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.qcard .qopts span { background: #f0eee8; border-radius: 6px; padding: 3px 9px; font-size: 12.5px; color: #4a5561; }
.qcard .qtype { font-size: 11.5px; color: var(--mut); margin-top: 8px; }

.gaps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.gap { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.gap .gthema { font-weight: 700; margin: 8px 0 6px; }
.gap .miss { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gap .miss span { background: #f0eee8; border-radius: 6px; padding: 3px 9px; font-size: 12.5px; color: #4a5561; }

.cvopt { display: grid; gap: 14px; }
.pair { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.pair .lbl { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; margin-bottom: 5px; }
.pair .vorher { color: var(--mut); }
.pair .vorher .lbl { color: #8a94a0; }
.pair .nachher { margin-top: 12px; }
.pair .nachher .lbl { color: var(--acc); }
.pair .cond { margin-top: 12px; font-size: 13px; color: var(--warn); }
.quote { font-style: normal; border-left: 3px solid var(--line); padding-left: 12px; display: block; }

.cockpit {
  background: var(--dark); color: #eef4f3; border-radius: var(--radius);
  padding: 30px 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px;
}
.cockpit .cell .k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #7fb8b4; font-weight: 800; margin-bottom: 6px; }
.cockpit .cell { font-size: 15px; }
.cockpit ol { margin-left: 18px; }

/* ---- benchmark ---- */
.bhint {
  background: var(--acc-soft); border-radius: 10px; padding: 14px 18px; font-size: 14px;
  color: #14504e; margin-bottom: 26px;
}
.bsec { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px; margin-bottom: 16px; }
.bsec h3 { font-size: 16px; margin-bottom: 10px; }
.bsec p { margin: 8px 0; font-size: 14.5px; }
.bsec blockquote { background: #f7f6f2; border-left: 3px solid var(--acc); border-radius: 6px; padding: 10px 16px; margin: 10px 0; font-size: 14.5px; }
.bsec table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 10px 0; }
.bsec th, .bsec td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.bsec th { color: var(--mut); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
.bsec ul, .bsec ol { margin: 8px 0 8px 20px; font-size: 14.5px; }
.bsec em { color: var(--mut); }

.errbox {
  background: #fdeeee; border: 1px solid #e6b8b8; color: #7c2d2d;
  border-radius: var(--radius); padding: 20px 24px; margin-top: 30px; font-size: 14.5px;
}
.errbox strong { display: block; margin-bottom: 6px; }

@media (max-width: 620px) {
  main { padding: 8px 16px 48px; }
  .hero { padding: 22px; }
  .cockpit { padding: 22px; }
}

/* ---- v2 Werkstatt ---- */
.banner { background:#fdeeee; border:1px solid #e6b8b8; color:#7c2d2d; border-radius:var(--radius); padding:18px 22px; margin:20px 0; }
.chips { display:flex; flex-wrap:wrap; gap:9px; margin:14px 0 8px; }
.chip { font:inherit; font-size:14px; font-weight:600; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:8px 16px; cursor:pointer; }
.chip.on { background:var(--acc); color:#fff; border-color:var(--acc); }
.cvbox { margin:10px 0 4px; }
.cvbox summary { cursor:pointer; color:var(--mut); font-size:14px; }
.cvbox pre { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; font-size:12.5px; line-height:1.5; overflow-x:auto; white-space:pre-wrap; margin-top:10px; max-height:340px; overflow-y:auto; }
.editor { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-top:14px; }
.editor textarea { width:100%; min-height:340px; font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; border:1px solid var(--line); border-radius:8px; padding:14px; resize:vertical; color:var(--ink); background:#fbfaf7; }
.editor textarea:focus { outline:2px solid var(--acc-soft); border-color:var(--acc); }
.edhead { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.edhead .t { font-weight:700; }
.edhead button { font:inherit; font-size:13px; background:none; border:none; color:var(--acc); cursor:pointer; text-decoration:underline; padding:0; }
.runrow { display:flex; align-items:center; gap:14px; margin-top:14px; flex-wrap:wrap; }
.runrow select { font:inherit; font-size:14px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--card); }
.runbtn { font:inherit; font-size:15px; font-weight:700; background:var(--acc); color:#fff; border:none; border-radius:10px; padding:12px 26px; cursor:pointer; }
.runbtn:disabled { opacity:.55; cursor:wait; }
.status { color:var(--mut); font-size:14px; }
.metaline { color:var(--mut); font-size:13px; margin:18px 0 6px; }
.failcard { background:var(--warn-bg); border:1px solid #e3cf9e; border-radius:var(--radius); padding:20px 24px; margin-top:20px; }
.failcard h3 { color:var(--warn); margin-bottom:8px; }
.failcard ul { margin:10px 0 10px 20px; font-size:14px; }
.failcard .teach { margin-top:12px; font-size:14px; color:#5a4310; }
.rawout { margin-top:12px; }
.rawout summary { cursor:pointer; font-size:13.5px; color:var(--mut); }
.rawout pre { background:#fff; border:1px solid var(--line); border-radius:8px; padding:14px; font-size:12px; overflow:auto; max-height:420px; white-space:pre-wrap; margin-top:8px; }
.cmp { display:flex; gap:16px; margin-top:8px; flex-wrap:wrap; }
.cmp a { color:var(--acc); font-size:14px; }

/* ---- Zugangs-Gate ---- */
.gate { max-width: 480px; margin: 10vh auto 0; }
.gateform { display: flex; gap: 10px; margin-top: 18px; }
.gateform input { flex: 1; font: inherit; font-size: 15px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.gateform input:focus { outline: 2px solid var(--acc-soft); border-color: var(--acc); }

/* ---- Maschinenraum ---- */
.reqbox summary { cursor:pointer; color:var(--mut); font-size:14px; }
.reqbox pre { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; font-size:12px; line-height:1.5; white-space:pre-wrap; overflow:auto; max-height:480px; margin-top:10px; }

/* ---- Flow-Stufen ---- */
.spincard { display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 22px; margin:20px 0; color:var(--mut); }
.spincard .dot { width:10px; height:10px; border-radius:50%; background:var(--acc); animation:pulse 1s infinite; flex:none; }
.ftext { width:100%; font:inherit; font-size:14px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; margin-top:10px; background:#fbfaf7; }
.ftext:focus { outline:2px solid var(--acc-soft); border-color:var(--acc); }
.callhead { font-size:16px; margin:26px 0 4px; }
.pair .gthema { font-weight:700; margin-bottom:8px; }
.failcard.verworfen { opacity:.8; border-style:dashed; margin-top:12px; }
.editor textarea.small { min-height: 150px; }
.edhead .belongs { font-weight: 400; color: var(--mut); font-size: 13px; }

/* ---- Upload-Panel ---- */
.uploadbox { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  background:var(--card); border:2px dashed var(--acc); border-radius:var(--radius);
  padding:18px 22px; margin:4px 0 18px; }
.uploadbox .ubtitle { font-weight:750; font-size:16px; margin-bottom:4px; }
.uploadbox .ubhint { color:var(--mut); font-size:13.5px; max-width:520px; }