/* Fragebogen: drei Fragen, je drei Antworten und ein "Ich weiß nicht".
   Das Skript zeigt eine Frage auf einmal, nennt danach den Befund und gibt
   die Seite erst dann frei. Ohne Skript stehen alle Fragen und alle Befunde
   sichtbar da - der Baustein bleibt lesbar, nur ohne Führung.
   Siehe steuerung/68-fragebogen.yaml. Nur vorhandene Custom Properties. */

.fragebogen {
    margin-block: var(--space-2xl);
}

.frage {
    padding: var(--space-xl) 0;
}

.frage-bereich,
.befund-bereich {
    margin-bottom: var(--space-xs);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.frage-text {
    margin-bottom: var(--space-lg);
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: 400;
    line-height: 1.25;
    color: var(--color-heading);
}

.frage-wahl {
    display: grid;
    gap: var(--space-sm);
}

/* Das Feld steckt in der Beschriftung: dadurch kann der Fokus nicht an
   den Seitenanfang wandern und die ganze Fläche ist anklickbar. */
.frage-wahl label {
    display: block;
    padding: var(--space-md);
    border: 1px solid var(--color-primary-light);
    border-radius: var(--radius-md);
    line-height: 1.4;
    cursor: pointer;
    transition: all var(--transition-base);
}

.frage-wahl label:hover {
    border-color: var(--color-secondary);
}

/* "Ich weiß nicht" ist eine gültige Antwort, aber keine der drei Lagen:
   sie steht ruhiger und etwas abgesetzt. */
.wahl-offen {
    margin-top: var(--space-xs);
    border-style: dashed;
    color: var(--color-text-light);
}

.frage-wahl input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

/* Weiße Schrift auf diesem Ton trägt 4.80; auf #c99e67 nur 2.45. */
.frage-wahl input:checked + span {
    color: var(--color-white);
}

.frage-wahl label:has(input:checked) {
    background: var(--color-secondary-text);
    border-color: var(--color-secondary-text);
}

.frage-wahl label:has(input:focus-visible) {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* Der Lauf nennt die Stelle im Bogen: wer sieben Fragen vor sich hat,
   soll das wissen und nicht raten. */
.fragebogen-lauf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.fragebogen-weiter {
    padding: var(--space-sm) var(--space-xl);
    border: 1px solid var(--color-secondary-text);
    border-radius: var(--radius-full);
    background: var(--color-secondary-text);
    color: var(--color-white);
    font: inherit;
    cursor: pointer;
}

/* Solange die Frage offen ist, führt der Knopf nirgendwohin - er sagt es
   auch, statt still zu bleiben. */
.fragebogen-weiter[disabled] {
    background: transparent;
    border-color: var(--color-primary-light);
    color: var(--color-text-muted);
    cursor: default;
}

.fragebogen-zurueck {
    background: none;
    border: 0;
    padding: 0;
    color: var(--color-text-light);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.auswertung {
    display: grid;
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

.befund {
    padding: var(--space-lg);
    border-left: 3px solid var(--color-secondary);
    background: var(--color-white);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* Der Befund traegt die Ueberschrift der Auswertung: er soll gelesen
   werden, bevor der Blick weiterzieht. */
.befund .befund-bereich {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-heading);
}

.befund p:last-child {
    margin-bottom: 0;
}