/* KI-Check in der freigegebenen Welt „Werkstatt bei Nacht“.
   Gemeinsame Farben, Schriften und Navigation kommen aus assets/css/site.css. */
:root { --check-max: 1100px; --check-gap: clamp(1.2rem, 3vw, 2.5rem); --check-error: #ffc0a9; }
.check-hero, .assessment-shell, .result-shell, .method { width: min(var(--check-max), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.check-hero h1 { max-width: 18ch; }
.check-hero .lead { margin-top: 1.5rem; max-width: 66ch; }
.hero-benefits { display: flex; flex-wrap: wrap; gap: .6rem 2rem; list-style: none; padding: 0; margin: 1.8rem 0 2rem; color: var(--text-read); }
.hero-benefits li + li { padding-left: 1rem; border-left: 1px solid var(--edge-warm); }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: .9rem 1.4rem; border: 1px solid var(--edge); border-radius: var(--stage-radius); font: 600 1rem/1.4 var(--font-body); text-decoration: none; cursor: pointer; text-align: center; }
.button-primary { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.button-primary:hover { background: #f2c286; color: var(--gold-ink); }
.button-secondary { background: var(--night-2); color: var(--text); }
.button-secondary:hover { border-color: var(--gold); color: var(--gold); }
.assessment-shell { padding-block: 2rem var(--section-y); }
.assessment-intro { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--check-gap); align-items: start; margin-bottom: 2rem; }
.assessment-intro h2, .contact-card h2, .result-heading h2, .method h2 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.7rem); }
.assessment-intro p, .contact-card p, .method > p { margin-top: 1rem; max-width: 65ch; }
.scale-legend { display: grid; gap: .7rem; color: var(--text-read); padding: 1.25rem; background: var(--night-2); }
.scale-legend span { display: flex; gap: 1rem; align-items: center; }
.scale-legend b { color: var(--gold); min-width: 1rem; font-family: var(--font-mono); }
.progress-wrap { position: sticky; top: 80px; z-index: 9; padding: 1rem 0; background: var(--night); }
.progress-label { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; margin-bottom: .6rem; }
.progress-label strong { color: var(--text); font-variant-numeric: tabular-nums; }
.progress-track, .mini-track { height: 5px; background: var(--edge); }
.progress-track span, .mini-track span { display: block; height: 100%; background: var(--gold); }
.progress-track span { width: 0; }
.dimension-section { margin-top: 3rem; padding: clamp(1.2rem, .8rem + 1.5vw, 2.2rem); }
.dimension-header { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
.dimension-header p { margin-top: .5rem; }
.question-card { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: var(--check-gap); align-items: center; padding: 1.5rem; border-top: 1px solid var(--edge); background: var(--night-2); scroll-margin-top: 160px; }
.question-card:last-child { border-bottom: 1px solid var(--edge); }
.question-text { color: var(--text); }
.scale-options { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .5rem; }
.scale-option { position: relative; cursor: pointer; }
.scale-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.scale-option span { display: grid; place-items: center; min-height: 48px; border: 1px solid var(--edge); color: var(--text); background: var(--night); font: 500 1.1rem/1 var(--font-mono); }
.scale-option:hover span { border-color: var(--gold); }
.scale-option input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.scale-option input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
.question-card.has-error { outline: 1px solid var(--check-error); outline-offset: -1px; }
.contact-card { margin-top: 4rem; padding: clamp(1.2rem, 4vw, 3rem); border: 1px solid var(--edge-warm); background: var(--night-3); border-radius: var(--stage-radius); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; margin-top: 2rem; }
.field-wide { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: .5rem; color: var(--text); }
.optional { color: var(--text-read); font-size: .9rem; }
.field input { width: 100%; min-height: 50px; padding: .6rem .8rem; border: 1px solid var(--edge); border-radius: 3px; background: var(--night); color: var(--text); font: inherit; caret-color: var(--gold); }
.field input[aria-invalid="true"] { border-color: var(--check-error); }
.field-error { display: block; min-height: 1.5rem; color: var(--check-error); font-size: .9rem; padding-top: .25rem; }
.privacy-confirmation { display: flex; gap: .8rem; align-items: flex-start; margin-top: 1rem; cursor: pointer; }
.contact-card .privacy-note { font-size: .95rem; margin-block: 1rem 1.5rem; }
.honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.form-summary { padding: 1rem; margin-bottom: 1rem; border: 1px solid var(--check-error); color: var(--check-error); }
.submit-button[disabled] { opacity: .6; cursor: wait; }
.result-shell { margin-bottom: var(--section-y); padding: clamp(1.2rem,4vw,3rem); background: var(--night-2); border: 1px solid var(--edge-warm); }
.result-heading { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: start; justify-content: space-between; }
.mail-status { max-width: 32ch; color: var(--gold); font-size: .95rem; }
.result-hero { display: grid; grid-template-columns: 150px 1fr; gap: var(--check-gap); margin-top: 2rem; padding-block: 2rem; border-block: 1px solid var(--edge); }
.result-score { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.result-score strong { font: 400 3.5rem/1.2 var(--font-display); color: var(--gold); }
.result-level { font-size: 1.3rem; color: var(--text); margin-bottom: 1rem; }
.dimension-results { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem 2.5rem; padding-block: 2rem; }
.dimension-result-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.dimension-result-head strong { white-space: nowrap; color: var(--text); font-variant-numeric: tabular-nums; }
.next-step { padding-top: 2rem; border-top: 1px solid var(--edge); }
.next-step strong { color: var(--text); font-size: 1.2rem; }
.next-step p { margin-top: .7rem; }
.result-invite { margin-top: 2rem; }
.result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.2rem; }
.text-button { min-height: 44px; padding: .5rem; border: 0; background: transparent; color: var(--text); font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.method { padding-bottom: var(--section-y); }
.method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2.5rem; }
.method-grid article { padding-top: 1rem; border-top: 1px solid var(--edge-warm); }
.method-grid p { margin-top: .8rem; }
#assessment, #result { scroll-margin-top: 100px; }
@media (max-width: 760px) {
 .assessment-intro, .question-card, .result-hero, .dimension-results { grid-template-columns: 1fr; }
 .question-card { gap: 1.2rem; padding: 1.2rem 1rem; }
 .scale-options { max-width: 360px; }
 .hero-benefits { flex-direction: column; }
 .hero-benefits li + li { padding-left: 0; border: 0; }
}
@media (max-width: 520px) { .contact-grid, .method-grid { grid-template-columns: 1fr; } .field-wide { grid-column: auto; } .submit-button { width: 100%; } }
@media print {
 .check-hero, .assessment-shell, .method, .result-actions, .result-invite, .mail-status { display: none !important; }
 .result-shell:not([hidden]) { width: 100%; margin: 0; padding: 0; border: 0; background: white; color: black; }
 .result-shell h2, .result-shell p, .result-shell strong, .result-shell span { color: black; }
 .mini-track span { print-color-adjust: exact; }
}

/* Unter der klebenden Fortschrittsleiste nichts verdecken. */
.contact-card, .contact-card input, .privacy-confirmation { scroll-margin-top: 180px; }

/* Hinweis statt Details, wenn die Auswertung per Mail unterwegs ist */
.result-mail-note { margin-top: 1.6rem; padding: 1rem 1.2rem; border: 1px solid rgb(var(--lamp) / .35); background: rgb(var(--lamp) / .08); color: var(--text); border-radius: 2px; }
.result-mail-note[hidden], .result-detail[hidden], #print-result[hidden] { display: none; }
/* Hero mit Beispiel-Reifeprofil rechts (2026-10-24) */
.check-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; }
.check-hero > :not(.check-hero-radar) { grid-column: 1; justify-self: start; }
.check-hero-radar { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
@media (max-width: 900px) { .check-hero { grid-template-columns: minmax(0, 1fr); } .check-hero-radar { grid-column: 1; grid-row: auto; margin-top: 2.2rem; } .check-hero-radar .radar { max-width: 340px; } }
.result-radar { margin-top: 2rem; }
.result-radar .radar { max-width: 700px; }
.result-shell .radar-figure { --radar-bg: var(--night-2); }
/* Schritt-für-Schritt mit eigenen Antworten je Aussage (2026-10-24) */
.question-card { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.question-nr { display: inline-block; min-width: 2rem; color: var(--gold); font-family: var(--font-mono); font-size: .9rem; }
.answer-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, .7fr); gap: .5rem; }
.answer-option { position: relative; cursor: pointer; }
.answer-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.answer-option span { display: flex; align-items: center; justify-content: center; text-align: center; height: 100%; min-height: 56px; padding: .55rem .6rem; border: 1px solid var(--edge); background: var(--night); color: var(--text); font-size: .9rem; line-height: 1.3; }
.answer-option:hover span { border-color: var(--gold); }
.answer-option input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.answer-option input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
.answer-unknown span { color: var(--text-read); border-style: dashed; font-style: italic; }
.answer-unknown input:checked + span { background: var(--night-3); border-color: var(--text-read); border-style: solid; color: var(--text); }
@media (max-width: 760px) { .answer-options { grid-template-columns: minmax(0, 1fr); } .answer-option span { justify-content: flex-start; text-align: left; min-height: 48px; } }
.dimension-kicker { color: var(--gold); font-family: var(--font-mono); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.dimension-section { margin-top: 1.5rem; }
.wizard-nav { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 2rem; }
.wizard-nav #step-next, .wizard-nav #step-submit { margin-left: auto; }
.wizard-nav .button[hidden] { display: none; } /* .button setzt display und hebelt sonst hidden aus */
.wizard-hint { flex-basis: 100%; min-height: 1.4rem; color: var(--check-error); font-size: .95rem; margin: 0; }
.contact-card.wizard-step { margin-top: 1.5rem; }
.field select { width: 100%; min-height: 50px; padding: .6rem .8rem; border: 1px solid var(--edge); border-radius: 3px; background: var(--night); color: var(--text); font: inherit; }
.field select[aria-invalid="true"] { border-color: var(--check-error); }
.radar-dot--unknown { fill: var(--night, #10131a); stroke: #8b93a6; stroke-dasharray: 2 2; }
.check-hero h1 { max-width: 15ch; font-size: clamp(2rem, 1rem + 2.6vw, 3.4rem); hyphens: manual; } /* drei Zeilen am Desktop (Wunsch Chris 2026-10-24) */