/* AI Assessment — Seiten-Datei zum Leiterbahn-Design (v2.3).
   Kopfleiste, Sprunglink, Fuß, Rahmen, Reiter und Abstände kommen aus circuit-site.min.css (v1.4). */
.assessment-page { margin:0; background:var(--x-bg); color:var(--x-ink); font-family:var(--x-font-ui); font-size:var(--x-fs-body); line-height:var(--x-lh-prose); }
.assessment-page main { max-width:900px; margin:auto; padding:0 24px 64px; }
.assessment-page :where(h1, h2, h3, p) { margin:0; }

/* A9 Farben der Dimensionen */
.dim-strategie { --dim:var(--x-enable); }
.dim-daten { --dim:var(--x-establish); }
.dim-team { --dim:var(--x-execute); }
.dim-tech { --dim:var(--x-blue-light); }
.dim-gov { --dim:var(--x-ink); }

/* A3 Einleitung ohne Rahmen */
.assessment-breadcrumb { display:flex; flex-wrap:wrap; gap:10px; margin:28px 0 0; font-size:var(--x-fs-ui); color:var(--x-ink-soft); }
.assessment-breadcrumb a { color:var(--x-cyan-doc); text-underline-offset:4px; }
.assessment-intro { max-width:760px; padding:40px 0 0; display:grid; gap:14px; }
.assessment-intro h1 { font:700 clamp(30px, 4.2vw, var(--x-fs-h1))/var(--x-lh-head) var(--x-font-ui); color:var(--x-ink-bright); letter-spacing:0; text-wrap:balance; }
.assessment-lead { font-size:var(--x-fs-lead); font-weight:600; color:var(--x-blue-light); }
.assessment-intro > p:last-child { color:var(--x-ink-soft); }

/* Rahmen (Start, Dimensionen, Ergebnis, Nächster Schritt) */
.assessment-frame,.result-cta-box { border:1px solid var(--x-line-quiet); border-radius:var(--x-radius); background:var(--x-bg-terminal); padding:28px; }
.assessment-section > .tab-label { color:var(--dim); }
.assessment-section { display:none; }
.assessment-section.active { display:block; }
#results-screen { display:none; }

/* A5 Start */
.meta-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px 20px; margin:0 0 26px; }
.meta-item { display:grid; gap:4px; align-content:start; }
.meta-label { font:18px/1.2 var(--x-font-display, monospace); letter-spacing:.06em; text-transform:uppercase; color:var(--x-blue-light); }
.meta-item dd { margin:0; color:var(--x-ink-bright); }
.eyebrow { margin:0 0 12px; font-size:var(--x-fs-ui); font-weight:600; color:var(--x-ink-soft); }
.category-list ul { list-style:none; margin:0 0 26px; padding:0; display:grid; gap:10px; }
.category-list li { display:flex; align-items:baseline; gap:10px; }
.cat-dot { flex:none; width:10px; height:10px; border-radius:50%; border:1.5px solid var(--dim); background:color-mix(in srgb, var(--dim) 25%, transparent); transform:translateY(1px); }
.cat-name { color:var(--dim); font-weight:600; }
.privacy-note { margin-top:14px; font-size:var(--x-fs-body-sm); color:var(--x-ink-soft); }

/* A5/A12/A16 Knöpfe */
.btn-start,.btn-next,.btn-submit,.cta-button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:10px 18px; border:1px solid var(--x-cyan-doc); border-radius:6px; background:var(--x-cyan-doc); color:var(--x-bg-terminal); font:600 var(--x-fs-body-sm)/1.3 var(--x-font-ui); text-decoration:none; cursor:pointer; }
.btn-start:hover,.btn-next:hover,.btn-submit:hover,.cta-button:hover { background:var(--x-cyan-doc-hover); border-color:var(--x-cyan-doc-hover); box-shadow:0 0 14px color-mix(in srgb, var(--x-cyan-doc) 45%, transparent); }
.btn-back { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:10px 18px; border:1px solid var(--x-line-strong); border-radius:6px; background:none; color:var(--x-ink); font:600 var(--x-fs-body-sm)/1.3 var(--x-font-ui); cursor:pointer; }
.btn-back:hover { border-color:var(--x-ink-muted); color:var(--x-ink-bright); }
.assessment-page :is(.btn-start,.btn,.cta-button,.cta-secondary,.btn-restart):focus-visible { outline:2px solid var(--x-blue-light); outline-offset:3px; }
.nav-buttons { display:flex; flex-direction:row-reverse; justify-content:space-between; gap:12px; margin-top:22px; }

/* A7 Fortschritt oben im Rahmen */
.progress-container { margin:0 0 6px; }
.progress-label { font-size:var(--x-fs-ui); color:var(--x-ink-soft); margin-bottom:8px; }
.progress-track { height:6px; border-radius:3px; background:var(--x-line-quiet); overflow:hidden; }
.progress-fill { height:100%; width:0; background:var(--x-establish); transition:width .3s ease; }

/* A8 Fragen */
.question-block { padding:22px 0 4px; border-top:1px solid var(--x-line-hair); margin-top:18px; }
.question-text { margin-bottom:14px; font-size:var(--x-fs-body); font-weight:600; color:var(--x-ink-bright); line-height:1.5; }
.question-number { margin-right:10px; font:22px/1 var(--x-font-display, monospace); font-weight:400; color:var(--dim); }

/* A10 Antworten: Formularfelder, keine Funktions-Rahmen */
.answer-group { display:grid; gap:8px; }
.answer-label { display:flex; align-items:center; gap:12px; min-height:44px; padding:10px 14px; border:1px solid var(--x-line-quiet); border-radius:var(--x-radius-sm); background:var(--x-bg-raised); color:var(--x-ink); cursor:pointer; }
.answer-label input[type="radio"] { flex:none; width:18px; height:18px; margin:0; accent-color:var(--dim); }
.answer-label:hover { border-color:var(--x-line-strong); }
.answer-label:has(input:checked) { border-color:var(--dim); background:color-mix(in srgb, var(--dim) 12%, transparent); color:var(--x-ink-bright); }
.answer-label:has(input:focus-visible) { outline:2px solid var(--x-blue-light); outline-offset:2px; }

/* A11 Hinweis */
.validation-hint { display:none; margin-top:16px; font-size:var(--x-fs-body-sm); color:var(--x-sig-stop); }

/* A13 Ergebnis */
.result-score-display { display:grid; justify-items:center; gap:8px; text-align:center; margin-bottom:28px; }
.score-number { font:var(--x-fs-numeral)/1 var(--x-font-display, monospace); color:var(--stage, var(--x-ink-bright)); }
.score-label { font-size:var(--x-fs-ui); color:var(--x-ink-soft); }
.maturity-badge { margin-top:6px; padding:4px 16px; border:1px solid var(--stage, var(--x-line)); border-radius:var(--x-radius-pill); color:var(--stage, var(--x-ink)); font:20px/1.3 var(--x-font-display, monospace); letter-spacing:.06em; }
.maturity-description { max-width:62ch; margin-top:8px; font-size:var(--x-fs-body); color:var(--x-ink); }

/* A15 Detailauswertung */
.category-scores { display:grid; gap:12px; }
.cat-score-row { display:grid; grid-template-columns:130px minmax(0, 1fr) 44px; align-items:center; gap:14px; }
.cat-score-name { font-size:var(--x-fs-ui); font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--dim); }
.cat-score-bar-track { height:8px; border-radius:4px; background:var(--x-line-quiet); overflow:hidden; }
.cat-score-bar-fill { height:100%; width:0; background:var(--dim); transition:width .4s ease; }
.cat-score-val { font-size:var(--x-fs-ui); color:var(--dim); text-align:right; }

/* A16 Nächster Schritt */
.result-cta-box p:not(.tab-label) { margin-bottom:18px; max-width:62ch; }
.cta-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; }
.cta-secondary { display:inline-flex; align-items:center; min-height:44px; color:var(--x-cyan-doc); font-size:var(--x-fs-body-sm); font-weight:600; text-underline-offset:4px; }

/* A17 Neustart */
.restart-row { text-align:center; margin-top:24px; }
.btn-restart { min-height:44px; font-size:var(--x-fs-body-sm); }

/* A20 Licht an */
[data-mode=light] .assessment-frame,[data-mode=light] .result-cta-box { border-color:var(--x-line); }
[data-mode=light] .answer-label { border-color:var(--x-line); }

@media (max-width:600px) {
  .assessment-page main { padding:0 16px 36px; }
  .assessment-intro { padding-top:28px; }
  .assessment-frame,.result-cta-box { padding:22px 16px; }
  .meta-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .nav-buttons { flex-direction:column; }
  .nav-buttons .btn { width:100%; }
  .cat-score-row { grid-template-columns:112px minmax(0, 1fr) 40px; gap:10px; }
  .cat-score-name { letter-spacing:.02em; }
  .cta-actions { flex-direction:column; align-items:stretch; }
  .cta-actions .cta-button { width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  .progress-fill,.cat-score-bar-fill { transition:none; }
}

/* A21 Druck: Ergebnis hell, ohne Bedienelemente */
@media print {
  .assessment-page main { max-width:none; padding:0; }
  .assessment-breadcrumb,.nav-buttons,.btn-start,.restart-row,.cta-actions { display:none !important; }
  .assessment-frame,.result-cta-box { border:1px solid #bbb !important; padding:16px; }
  .cat-score-bar-track { border:1px solid #bbb; }
  .cat-score-bar-fill { background:#555 !important; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  .score-number,.maturity-badge { color:#111 !important; border-color:#777 !important; }
  .cat-score-name,.cat-score-val,.assessment-section > .tab-label { color:#111 !important; }
}