/* KI-Kompass · Praxisfall A interaktiv — Seiten-Datei (v2.9). Ersetzt den eingebetteten <style>-Block (26 KB, drei übereinanderliegende Fassungen).
   Lädt nach /styles.css und vor /circuit-site.min.css. Kopfleiste, Sprunglink, Seitenpfad, Reiter, Knöpfe und Fuß kommen aus circuit-site (v1.6).
   Das Markup der App behält seine Klassen und IDs; das Skript (fall-a.js) ist unverändert. Es setzt am Budgetbalken inline
   background: var(--danger) bzw. var(--blue) — deshalb die beiden Aliase unten. Keine Regel für alle Links. */

.fa-page{--blue:var(--x-blue-light);--danger:var(--x-sig-stop);margin:0;background:var(--x-bg);color:var(--x-ink);font:var(--x-fs-body)/var(--x-lh-prose,1.65) var(--x-font-ui)}
.fa-page main{max-width:1120px;margin:0 auto;padding:0 20px 24px}
.fa-page main :is(h2,h3){color:var(--x-ink-bright);text-wrap:balance}
.fa-page main h2{margin:0 0 12px;font:600 var(--x-fs-h2)/1.25 var(--x-font-ui)}
.fa-page main h3{margin:0 0 8px;font:600 var(--x-fs-h3)/1.3 var(--x-font-ui)}
.fa-page main p{margin:0 0 12px;max-width:72ch}
.fa-page main strong{color:var(--x-ink-bright);font-weight:600}
.fa-page main :is(p,li,dd,blockquote) a:not(.x-btn){color:var(--x-cyan-doc);text-underline-offset:4px}

/* Kopf */
.page-heading{display:flex;align-items:center;justify-content:space-between;gap:28px;margin:22px 0 26px}
.eyebrow,.result-kicker{margin:0 0 8px;font:20px/1.2 var(--x-font-display,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--x-blue-light)}
.page-heading h1{margin:0 0 12px;font:700 clamp(30px,4.2vw,var(--x-fs-h1))/1.2 var(--x-font-ui);color:var(--x-ink-bright);text-wrap:balance}
.fa-page .intro{font-size:var(--x-fs-lead);color:var(--x-ink-soft)}
.fa-page .fa-meta{margin:6px 0 0;font-size:var(--x-fs-ui);color:var(--x-ink-muted)}
.case-marker{flex:none;font:120px/1 var(--x-font-display,monospace);color:var(--x-blue-light);opacity:.55}

/* Inhalt (ersetzt die Seitenleiste) */
.fa-toc{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:8px 32px;margin:0 0 8px;padding:16px 20px;border:1px solid var(--x-line-quiet);border-radius:var(--x-radius-sm,6px);background:var(--x-bg-raised)}
.fa-toc .nav-label{grid-column:1/-1;margin:0;font:20px/1.2 var(--x-font-display,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--x-blue-light)}
.fa-toc ol,.fa-toc ul{margin:0;padding:0;list-style:none}
.fa-toc a{display:inline-flex;gap:10px;align-items:baseline;padding:5px 0;color:var(--x-cyan-doc);font-size:var(--x-fs-body-sm);text-underline-offset:4px}
.fa-toc a span{font:18px/1 var(--x-font-display,monospace);color:var(--x-ink-muted)}
.fa-toc a:hover{color:var(--x-ink-bright)}
.fa-page .fa-toc .rail-note{margin:8px 0 0;font-size:var(--x-fs-ui);color:var(--x-ink-soft)}

/* Abschnitte als gefüllte Rahmen mit Reiter (Reiter-Abstand über Tokens aus circuit-site) */
.fa-frame{padding:28px 28px 24px;border:1px solid var(--x-line-quiet);border-radius:var(--x-radius,10px);background:var(--x-bg-terminal)}
.story-section>p:not(.eyebrow):not(.scope-note):not(.tab-label){font-size:var(--x-fs-body)}
.story-before{margin:16px 0 12px;padding:14px 18px;border:1px solid var(--x-line-quiet);border-left:3px solid var(--x-cyan-doc);border-radius:var(--x-radius-sm,6px);background:var(--x-bg-raised)}
.fa-page .scope-note,.fa-page .helper,.fa-page .muted,.fa-page .doc-meta,.fa-page .budget-caption,.fa-page .result-note,.fa-page .assumption-note{font-size:var(--x-fs-ui);color:var(--x-ink-muted)}
.fa-page .scope-note{margin:16px 0 0;padding-top:12px;border-top:.5px solid var(--x-line-hair)}

/* Unterlagen */
.section-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 32px;align-items:end;margin:0 0 18px}
.fa-page .section-intro>p{margin:0;color:var(--x-ink-soft)}
.document-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 26px}
.document{min-width:0;padding:14px 16px;border:1px solid var(--x-line-quiet);border-radius:var(--x-radius-sm,6px);background:var(--x-bg-raised)}
.document.decisive{border-left:3px solid var(--x-cyan-doc)}
.document.unavailable{border-style:dashed;border-color:var(--x-sig-stop);opacity:.7}
.document-label{display:flex;align-items:baseline;gap:10px;margin:0 0 4px}
.document-label strong{font:24px/1 var(--x-font-display,monospace);color:var(--x-amber)}
.document-label span{font-weight:600;color:var(--x-ink-bright)}
.document blockquote{margin:8px 0 0;padding:0 0 0 12px;border-left:2px solid var(--x-line);font-size:var(--x-fs-body-sm);color:var(--x-ink)}
.fa-page .reality-check strong{color:var(--x-ink-bright)}
.fa-page .document-warning{margin:10px 0 0;font-size:var(--x-fs-ui);color:var(--x-sig-stop)}
.story-process{margin:0 0 22px}
.process-list{margin:14px 0 0;padding:0;list-style:none;counter-reset:fa}
.process-list li{position:relative;margin:0 0 14px;padding-left:44px;counter-increment:fa}
.process-list li::before{content:counter(fa);position:absolute;left:0;top:0;display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--x-cyan-doc);border-radius:50%;font:20px/1 var(--x-font-display,monospace);color:var(--x-cyan-doc)}
.process-list h3{font-size:var(--x-fs-h4);margin:3px 0 4px}

/* Aufklappbare Abschnitte */
.source-details,.order-details,.prerequisites{margin:0 0 20px;border:1px solid var(--x-line-quiet);border-radius:var(--x-radius-sm,6px);background:var(--x-bg-raised)}
.source-details>summary,.order-details>summary,.prerequisites>summary{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;min-height:46px;padding:10px 44px 10px 16px;position:relative;cursor:pointer;list-style:none;font-weight:600;color:var(--x-ink-bright)}
:is(.source-details,.order-details,.prerequisites)>summary::-webkit-details-marker{display:none}
:is(.source-details,.order-details,.prerequisites)>summary::after{content:"›";position:absolute;right:16px;top:50%;translate:0 -50%;font:26px/1 var(--x-font-display,monospace);color:var(--x-cyan-doc);transition:rotate .2s}
:is(.source-details,.order-details,.prerequisites)[open]>summary::after{rotate:90deg}
:is(.source-details,.order-details,.prerequisites)>summary:focus-visible{outline:2px solid var(--x-blue-light);outline-offset:2px}
.prerequisites summary span{font-weight:400;font-size:var(--x-fs-ui);color:var(--x-ink-muted)}
.comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:4px 16px 16px}
.comparison>div{padding:14px 16px;border:1px solid var(--x-line-quiet);border-left:3px solid var(--x-sig-stop);border-radius:var(--x-radius-sm,6px);background:var(--x-bg-terminal)}
.comparison>div+div{border-left-color:var(--x-sig-go)}
.comparison h3{font-size:var(--x-fs-h4)}

/* Quellenlage durchspielen */
.source-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin:0 0 4px;padding:18px;border:1px solid var(--x-line-quiet);border-radius:var(--x-radius-sm,6px);background:var(--x-bg-raised)}
.source-workspace h3{font-size:var(--x-fs-h4)}
.select-label{display:block;margin:10px 0 6px;font-size:var(--x-fs-ui);color:var(--x-ink-soft)}
.fa-page select,.fa-page input[type=number]{box-sizing:border-box;width:100%;min-height:46px;padding:8px 12px;border:1px solid var(--x-line-strong);border-radius:var(--x-radius-sm,6px);background:var(--x-bg-sunken);color:var(--x-ink-bright);font:var(--x-fs-body)/1.3 var(--x-font-ui)}
.fa-page :is(select,input,button,summary):focus-visible{outline:2px solid var(--x-blue-light);outline-offset:2px}
.answer-options{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;border:0}
.answer-options legend{margin:0 0 8px;padding:0;font-size:var(--x-fs-ui);color:var(--x-ink-soft)}
.answer-options button,.presets button{min-height:44px;padding:8px 14px;border:1px solid var(--x-line-strong);border-radius:var(--x-radius-sm,6px);background:transparent;color:var(--x-ink);font:500 var(--x-fs-body-sm)/1.3 var(--x-font-ui);cursor:pointer}
.answer-options button:hover,.presets button:hover{border-color:var(--x-ink-muted);color:var(--x-ink-bright)}
.answer-options button[aria-pressed=true],.presets button.selected{border-color:var(--x-cyan-doc);background:color-mix(in srgb,var(--x-cyan-doc) 14%,transparent);color:var(--x-ink-bright)}
.source-feedback{padding:16px 18px;border:1px solid var(--x-line);border-left:3px solid var(--x-line-strong);border-radius:var(--x-radius-sm,6px);background:var(--x-bg-terminal)}
.source-feedback.good{border-left-color:var(--x-sig-go)}
.source-feedback.clarify{border-left-color:var(--x-sig-wait)}
.source-feedback.stop{border-left-color:var(--x-sig-stop)}
.source-feedback h3{font-size:var(--x-fs-h4)}
.source-feedback p{margin:0}

/* Brücke zum Rechner */
.story-cost-bridge{max-width:760px;margin:calc(var(--x-tab-h) + var(--x-section-gap)) 0 0}
.fa-page .story-cost-bridge p:not(.eyebrow){color:var(--x-ink-soft)}

/* Rechner */
.workspace{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.85fr);gap:0;padding:0;overflow:visible}
.input-panel{padding:26px 28px}
.section-heading{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;margin:0 0 6px}
.section-heading h2{margin:0}
.text-button{min-height:44px;padding:0;border:0;background:none;color:var(--x-cyan-doc);font:var(--x-fs-body-sm) var(--x-font-ui);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.text-button:hover{color:var(--x-ink-bright)}
.range-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:18px 0 4px;font-weight:600;color:var(--x-ink-bright)}
.range-heading output{font:28px/1 var(--x-font-display,monospace);color:var(--x-amber)}
.fa-page input[type=range]{width:100%;min-height:32px;margin:0;accent-color:var(--x-cyan-doc);cursor:pointer}
.presets{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.presets button strong{margin-left:6px}
.extra-heading{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin:26px 0 10px}
.extra-heading h3{margin:0;font-size:var(--x-fs-h4)}
.extra-heading span{font-size:var(--x-fs-ui);color:var(--x-ink-muted)}
.number-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.number-grid>label{display:grid;gap:6px;font-size:var(--x-fs-ui);color:var(--x-ink-soft)}
.number-wrap{display:flex;align-items:center;gap:8px}
.number-wrap>span{color:var(--x-ink-muted)}
.fa-page .validation{margin:12px 0 0;padding:10px 14px;border:1px solid var(--x-sig-stop);border-radius:var(--x-radius-sm,6px);color:var(--x-sig-stop);font-size:var(--x-fs-body-sm)}
.prerequisites{margin:20px 0}
.prerequisites>:not(summary){margin-left:16px;margin-right:16px}
.checks{display:grid;gap:10px;margin-bottom:12px}
.checks label{display:flex;align-items:flex-start;gap:10px;font-size:var(--x-fs-body-sm);cursor:pointer}
.checks input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--x-cyan-doc)}
.breakdown h3{font-size:var(--x-fs-h4)}
.stack{display:flex;height:14px;margin:8px 0 12px;overflow:hidden;border-radius:999px;background:var(--x-bg-sunken)}
.stack span,.key{background:var(--x-line)}
.stack span:nth-child(1),.key.work{background:var(--x-cyan-doc)}
.stack span:nth-child(2),.key.running{background:var(--x-amber)}
.stack span:nth-child(3),.key.setup{background:var(--x-blue-light)}
.breakdown dl{display:grid;gap:6px;margin:0}
.breakdown dl>div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:.5px solid var(--x-line-hair)}
.breakdown dt{display:flex;align-items:center;gap:10px;font-size:var(--x-fs-body-sm)}
.breakdown dd{margin:0;font-weight:600;color:var(--x-ink-bright);font-variant-numeric:tabular-nums}
.key{display:inline-block;width:12px;height:12px;border-radius:3px}
.result-panel{padding:26px 26px 22px;border-left:1px solid var(--x-line-quiet);background:var(--x-bg-raised);border-radius:0 var(--x-radius,10px) var(--x-radius,10px) 0}
.main-result{display:flex;align-items:flex-end;gap:14px;margin:6px 0 14px}
.main-result>span:first-child{font:88px/.85 var(--x-font-display,monospace);color:var(--x-amber);font-variant-numeric:tabular-nums}
.main-result>span:last-child{font-size:var(--x-fs-body-sm);color:var(--x-ink-soft)}
.budget-track{position:relative;height:12px;overflow:hidden;border-radius:999px;background:var(--x-bg-sunken)}
.budget-track::after{content:"";position:absolute;top:0;bottom:0;left:90%;width:2px;background:var(--x-ink-bright);opacity:.7}
.budget-track div{height:100%;border-radius:999px;background:var(--x-blue-light);transition:width .25s}
.fa-page .budget-caption{margin:8px 0 16px}
.result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 14px}
.result-grid>div{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--x-line-quiet);border-radius:var(--x-radius-sm,6px);background:var(--x-bg-terminal)}
.result-grid span{font-size:var(--x-fs-ui);color:var(--x-ink-muted)}
.result-grid strong{font:24px/1.1 var(--x-font-display,monospace);color:var(--x-ink-bright);font-variant-numeric:tabular-nums}
.decision{margin:14px 0;padding:14px 16px;border:1px solid var(--x-line);border-left:3px solid var(--x-sig-go);border-radius:var(--x-radius-sm,6px);background:var(--x-bg-terminal)}
.decision.clarify{border-left-color:var(--x-sig-wait)}
.decision.stop{border-left-color:var(--x-sig-stop)}
.fa-page .decision h2{margin:0 0 6px;font-size:var(--x-fs-h4)}
.decision p{margin:0}

/* Pilotauftrag */
.order-list{display:grid;gap:0;margin:0;padding:0 16px 10px}
.order-list>div{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:6px 18px;padding:12px 0;border-bottom:.5px solid var(--x-line-hair)}
.order-list>div:last-child{border-bottom:0}
.order-list dt{font-weight:600;color:var(--x-ink-bright);font-size:var(--x-fs-body-sm)}
.order-list dd{margin:0;font-size:var(--x-fs-body-sm)}
/* Schluss */
.fa-page .fa-colophon{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;max-width:none;margin:28px 0 0;padding-top:12px;border-top:.5px solid var(--x-line-hair);font-size:var(--x-fs-ui);color:var(--x-ink-muted)}
.no-script{max-width:1120px;margin:16px auto;padding:12px 20px;border:1px solid var(--x-sig-wait);color:var(--x-ink)}

@media (max-width:980px){
  .workspace{grid-template-columns:minmax(0,1fr)}
  .result-panel{border-left:0;border-top:1px solid var(--x-line-quiet);border-radius:0 0 var(--x-radius,10px) var(--x-radius,10px)}
  .document-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .fa-toc,.section-intro,.source-workspace,.comparison{grid-template-columns:minmax(0,1fr)}
  .number-grid{grid-template-columns:minmax(0,1fr)}
  .order-list>div{grid-template-columns:minmax(0,1fr)}
  .case-marker{display:none}
}
@media (max-width:600px){
  .fa-page main{padding:0 12px 20px}
  .fa-frame{padding:22px 16px 18px}
  .input-panel,.result-panel{padding:20px 16px}
  .workspace{padding:0}
  .main-result>span:first-child{font-size:72px}
  .result-grid{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.budget-track div,:is(.source-details,.order-details,.prerequisites)>summary::after{transition:none}}

/* Druck: hell, vollständig, ohne Navigation und Bedienelemente */
@media print{
  .fa-toc,.text-button,.presets,.answer-options,.select-label,#source-case,.fa-page input[type=range]{display:none!important}
  .fa-frame,.document,.source-workspace,.result-panel,.source-details,.order-details,.prerequisites,.decision,.source-feedback,.comparison>div,.result-grid>div,.reality-check,.story-before{background:#fff!important;border-color:#bbb!important;break-inside:avoid}
  .workspace{grid-template-columns:minmax(0,1fr)}
  .result-panel{border-left:0}
  .main-result>span:first-child,.result-grid strong,.range-heading output{color:#000!important}
  .stack span,.budget-track div,.key{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  :is(.source-details,.order-details,.prerequisites)>summary::after{content:none}
  details::details-content{content-visibility:visible;height:auto}
  details>*:not(summary){display:block!important}
  .comparison{display:block!important}
}