:root {
    --paper:#0A0E14; --surface:#101722; --surface-2:#16202E;
    --ink:#E8F0FA; --ink-soft:#BCCBDE; --muted:#7C8FA6;
    --line:#1F2C3D; --line-soft:#16202E;
    --brand:#2F81F7; --brand-2:#0F1C30; --brand-strong:#1F5FC8;
    --cta:#58C4FF; --cta-hover:#85D4FF; --cta-bg:#0D1B2A; --cta-ink:#04101E;
    --ok:#3DDC97; --ok-bg:#0C2119;
    --alarm:#E5534B;
    --stage:#060A10; --stage-2:#0C1420; --stage-ink:#D7E4F2; --stage-muted:#8296AD;
    --glow:#58C4FF; --glow-2:#3DDC97;
    --f-ui:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
    --f-display:"Newsreader",Georgia,serif;
    --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
    --r:4px;
  }

  *{box-sizing:border-box}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-ui);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}

  .demobar{background:var(--brand-2);color:var(--cta);border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:.71rem;letter-spacing:.09em;text-transform:uppercase;padding:8px 16px;text-align:center}
  .shell{max-width:820px;margin:0 auto;padding:26px 16px 60px}

  .sitehead{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:16px;margin-bottom:22px;border-bottom:1px solid var(--line);flex-wrap:wrap}
  .logo b{font-family:var(--f-display);font-weight:600;font-size:1.28rem}
  .logo span{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-left:7px}
  .phone{font-family:var(--f-mono);font-size:.76rem;color:var(--muted)}

  h1{font-family:var(--f-display);font-weight:600;font-size:clamp(1.7rem,5vw,2.35rem);line-height:1.13;letter-spacing:-.015em;margin:0 0 8px;text-wrap:balance}
  h2{font-family:var(--f-display);font-weight:600;font-size:1.35rem;margin:0 0 6px;letter-spacing:-.01em}
  h3{font-size:1rem;font-weight:600;margin:0}
  .lede{color:var(--ink-soft);margin:0 0 24px;font-size:1.05rem;max-width:58ch}
  .sub{color:var(--muted);font-size:.92rem;margin:0 0 18px}
  .hint{font-weight:400;color:var(--muted);font-size:.84rem}

  .stepper{display:flex;gap:4px;margin-bottom:24px}
  .stepper div{flex:1;height:4px;background:var(--line);border-radius:2px;transition:background .35s}
  .stepper div.done{background:var(--brand)}

  /* gewerk picker */
  .gewerke{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:26px}
  .gw{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;cursor:pointer;text-align:left;font-family:var(--f-ui);color:var(--ink);transition:border-color .15s,background .15s}
  .gw:hover{border-color:var(--brand)}
  .gw[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-2);box-shadow:inset 0 0 0 1px var(--brand)}
  .gw b{display:block;font-size:1rem;font-weight:600}
  .gw em{display:block;font-style:normal;color:var(--muted);font-size:.82rem;margin-top:2px}
  .gw .dot{width:9px;height:9px;border-radius:50%;background:var(--brand);position:absolute;top:14px;right:14px;opacity:0;transition:opacity .15s}
  .gw[aria-pressed="true"] .dot{opacity:1}
  .gw.ghost{border-style:dashed;background:transparent;color:var(--muted);cursor:not-allowed}
  .gw.ghost b{color:var(--muted)}

  /* mode toggle */
  .modes{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:24px}
  .modes button{font-family:var(--f-ui);font-size:.9rem;font-weight:600;padding:9px 18px;background:var(--surface);color:var(--ink-soft);border:0;cursor:pointer}
  .modes button[aria-pressed="true"]{background:var(--brand);color:var(--paper)}

  fieldset{border:0;padding:0;margin:0 0 24px}
  legend{font-weight:600;font-size:.95rem;padding:0;margin-bottom:9px;display:block;width:100%}
  .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:8px}
  .tile{position:relative}
  .tile input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
  .tile label{display:block;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);cursor:pointer;min-height:50px;transition:border-color .15s,background .15s}
  .tile label b{display:block;font-weight:600;font-size:.94rem}
  .tile label em{display:block;font-style:normal;color:var(--muted);font-size:.81rem;margin-top:2px}
  .tile:hover label{border-color:var(--brand)}
  .tile input:checked+label{border-color:var(--brand);background:var(--brand-2);box-shadow:inset 0 0 0 1px var(--brand)}
  .tile input:focus-visible+label{outline:2px solid var(--cta);outline-offset:2px}

  .sliderow{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px}
  input[type=range]{flex:1;accent-color:var(--brand);height:26px}
  .val{font-family:var(--f-mono);font-size:1.02rem;min-width:7ch;text-align:right;font-variant-numeric:tabular-nums}

  .btn{font-family:var(--f-ui);font-size:1rem;font-weight:600;padding:13px 24px;border-radius:var(--r);border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s}
  .btn-primary{background:var(--cta);color:var(--cta-ink)}
  .btn-primary:hover{background:var(--cta-hover)}
  .btn-ghost{background:transparent;color:var(--ink-soft);border-color:var(--line)}
  .btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
  .btn-small{font-size:.85rem;padding:8px 15px}
  .btn:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
  .btnrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

  /* chat */
  .chat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:22px}
  .log{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;max-height:340px;overflow-y:auto}
  .msg{max-width:82%;padding:10px 14px;border-radius:12px;font-size:.94rem;line-height:1.5}
  .msg.bot{background:var(--surface-2);border-bottom-left-radius:3px;align-self:flex-start}
  .msg.me{background:var(--brand-strong);color:#fff;border-bottom-right-radius:3px;align-self:flex-end}
  .chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
  .chip{font-family:var(--f-ui);font-size:.86rem;padding:7px 13px;border-radius:99px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);cursor:pointer}
  .chip:hover{border-color:var(--brand);color:var(--brand)}
  .composer{display:flex;gap:8px}
  .composer input{flex:1;font-family:var(--f-ui);font-size:.95rem;padding:11px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);color:var(--ink)}
  .composer input:focus-visible{outline:2px solid var(--brand);outline-offset:1px}

  /* calc */
  .calc{text-align:center;padding:56px 0}
  .calc ul{list-style:none;padding:0;margin:22px auto 0;max-width:350px;text-align:left;display:flex;flex-direction:column;gap:9px}
  .calc li{font-family:var(--f-mono);font-size:.84rem;color:var(--muted);opacity:.22;transition:opacity .3s,color .3s}
  .calc li.on{opacity:1;color:var(--ink-soft)}
  .calc li.on::before{content:"✓ ";color:var(--ok)}
  .spinner{width:34px;height:34px;margin:0 auto;border-radius:50%;border:3px solid var(--line);border-top-color:var(--brand);animation:spin .8s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* result */
  .pricecard{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--brand);border-radius:var(--r);padding:24px;margin-bottom:16px}
  .pricelabel{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .price{font-family:var(--f-mono);font-size:clamp(1.85rem,6vw,2.5rem);font-weight:600;letter-spacing:-.02em;margin:4px 0 2px;font-variant-numeric:tabular-nums}
  .pricenote{color:var(--muted);font-size:.87rem;margin:0}
  .breakdown{width:100%;border-collapse:collapse;margin-top:20px;font-size:.92rem}
  .breakdown td{padding:8px 0;border-bottom:1px solid var(--line-soft)}
  .breakdown td:last-child{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
  .breakdown tr:last-child td{border-bottom:0;font-weight:600}
  .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:10px;margin-bottom:16px}
  .fact{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 15px}
  .fact .k{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block}
  .fact .v{font-family:var(--f-display);font-size:1.28rem;font-weight:600;font-variant-numeric:tabular-nums}
  .fact .u{font-size:.8rem;color:var(--muted)}
  .note{background:var(--surface-2);border-left:3px solid var(--brand);padding:13px 17px;font-size:.89rem;color:var(--ink-soft);margin-bottom:16px}
  .note strong{color:var(--ink)}

  /* ecosystem stage */
  .stagewrap{background:var(--stage);border-radius:var(--r);padding:22px 18px 18px;margin:26px 0}
  .stagewrap h2{color:var(--ink);margin-bottom:2px}
  .stagewrap .sub{color:var(--stage-muted);margin-bottom:14px}
  .flow{width:100%;height:auto;display:block}
  .flow .link{stroke:#1C2A3C;stroke-width:1.5;fill:none}
  .flow .link.live{stroke:var(--glow);stroke-width:2}
  .flow .nodebox{fill:var(--stage-2);stroke:#1C2A3C;stroke-width:1}
  .flow .nodebox.live{stroke:var(--glow)}
  .flow .nlabel{fill:var(--stage-ink);font-family:"Public Sans",sans-serif;font-size:11px;font-weight:600}
  .flow .nsub{fill:var(--stage-muted);font-family:"IBM Plex Mono",monospace;font-size:8.5px}
  .flow .hub{fill:var(--glow);opacity:.12}
  .flow .hubring{fill:none;stroke:var(--glow);stroke-width:1.5}
  .flow .hublabel{fill:var(--ink);font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.08em}
  .flow .pkt{fill:var(--glow-2)}
  .flow .tick{fill:var(--glow);font-family:"IBM Plex Mono",monospace;font-size:9px;opacity:0}
  .flow .tick.on{opacity:1}
  .stagefoot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
  .stagefoot p{color:var(--stage-muted);font-size:.83rem;margin:0;font-family:var(--f-mono)}
  .btn-stage{background:transparent;border:1px solid var(--line);color:var(--stage-ink);font-size:.83rem;padding:7px 14px;border-radius:var(--r);cursor:pointer;font-family:var(--f-ui)}
  .btn-stage:hover{border-color:var(--glow);color:var(--glow)}

  /* choices */
  .choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:12px;margin:20px 0 8px}
  .choice{text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:19px;cursor:pointer;font-family:var(--f-ui);color:var(--ink);transition:border-color .15s,background .15s}
  .choice:hover{border-color:var(--cta);background:var(--cta-bg)}
  .choice b{display:block;font-size:1.03rem;margin-bottom:4px}
  .choice span{color:var(--muted);font-size:.87rem}

  .person{display:flex;gap:15px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:17px}
  .mono-avatar{width:50px;height:50px;flex:none;border-radius:50%;background:var(--brand-2);border:1px dashed var(--brand);color:var(--brand);display:grid;place-items:center;font-family:var(--f-mono);font-size:.85rem}
  .person p{margin:2px 0 0;font-size:.87rem;color:var(--muted)}
  .confirm{background:var(--ok-bg);border:1px solid var(--ok);border-radius:var(--r);padding:22px}
  .confirm h2{color:var(--ok)}

  details summary{cursor:pointer;font-family:var(--f-mono);font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;color:var(--brand);padding:9px 0;list-style:none}
  details summary::-webkit-details-marker{display:none}
  details summary::before{content:"▸ "}
  details[open] summary::before{content:"▾ "}
  pre{background:var(--stage);color:var(--stage-ink);padding:17px;border-radius:var(--r);overflow-x:auto;font-family:var(--f-mono);font-size:.76rem;line-height:1.6;margin:0 0 12px}
  pre .k{color:var(--glow)} pre .s{color:var(--glow-2)} pre .c{color:var(--stage-muted)}

  footer{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);font-size:.83rem;color:var(--muted)}
  footer p{margin:0 0 7px}
  .hidden{display:none}

  @media (prefers-reduced-motion: reduce){
    .spinner{animation:none;border-top-color:var(--line)}
  }
  @media (max-width:520px){ .shell{padding:18px 13px 48px} .pricecard{padding:19px} }

/* ---------- Schnittzeichnung / Zwilling ---------- */
.sketchbox,.twinbox{
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(88,196,255,.05) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(88,196,255,.05) 31px 32px),
    var(--stage);
  border:1px solid var(--line);border-radius:var(--r);
  padding:10px;margin:0 auto 22px;max-width:660px;
}
.sketchbox--klein{margin-bottom:16px}
.sketchbox svg,.twinbox svg{width:100%;height:auto;display:block}
.twinbox{margin:0 0 24px}
.twinstatus{margin:6px 4px 0;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--stage-muted)}

.s-linie,.s-boden,.s-hilfslinie,.s-alt,.s-neu,.s-weg,.s-rohr,.s-flaeche,.s-phantom{
  stroke-linecap:round;stroke-linejoin:round;fill:none;
}
.s-linie{stroke:var(--ink-soft);stroke-width:2}
.s-boden{stroke:var(--muted);stroke-width:2.5}
.s-hilfslinie{stroke:var(--line);stroke-width:1.5;stroke-dasharray:5 5}
.s-phantom{stroke:var(--brand);stroke-width:1.5;stroke-dasharray:3 5;opacity:.4}
.s-alt{stroke:var(--alarm);stroke-width:1.8;filter:drop-shadow(0 0 5px rgba(229,83,75,.55))}
.s-weg{stroke:var(--alarm);stroke-width:2.4}
.s-neu{stroke:var(--brand);stroke-width:2.4;filter:drop-shadow(0 0 5px rgba(47,129,247,.6))}
.s-rohr{stroke:var(--glow-2);stroke-width:1.8;stroke-dasharray:7 5;filter:drop-shadow(0 0 4px rgba(61,220,151,.5))}
.s-flaeche{stroke:var(--glow-2);stroke-width:1.8}

.s-text{
  fill:var(--muted);font-family:var(--f-mono);font-size:11px;
  paint-order:stroke;stroke:var(--stage);stroke-width:3.5;stroke-linejoin:round;
}
.s-neu-text{fill:var(--cta)}
.s-weg-text{fill:var(--alarm)}

.calc{padding:22px 0 40px}
.calc ul{margin-top:6px}

/* change-glow when the twin absorbs a new answer */
@keyframes twinpuls{
  0%{filter:drop-shadow(0 0 2px rgba(88,196,255,.3))}
  35%{filter:drop-shadow(0 0 12px rgba(88,196,255,.95))}
  100%{filter:drop-shadow(0 0 5px rgba(47,129,247,.6))}
}
.puls{animation:twinpuls 900ms ease-out}

/* Förderbalken in the price card */
.foerderbar{position:relative;height:10px;border-radius:5px;background:var(--surface-2);margin:14px 0 6px;overflow:hidden}
.foerderbar div{height:100%;width:0;background:var(--ok);border-radius:5px;transition:width 900ms ease}
.foerderlabel{font-family:var(--f-mono);font-size:.74rem;color:var(--ok)}

/* chat typing indicator */
.msg.denkt{color:var(--muted);font-family:var(--f-mono)}
.msg.denkt::after{content:"…";animation:denk 1.2s steps(4) infinite}
@keyframes denk{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

@media (prefers-reduced-motion: reduce){
  .puls{animation:none}
  .foerderbar div{transition:none}
  .msg.denkt::after{animation:none;content:"…"}
}

/* mobile hall pass */
@media (max-width:520px){
  .chip{padding:11px 16px;font-size:.9rem}
  .composer input{font-size:16px} /* prevents iOS focus zoom */
  .twinbox{position:sticky;top:8px;z-index:3;box-shadow:0 8px 24px rgba(0,0,0,.5)}
}