/* ============================================================
   css/q4.css — nur das Q4-Eigene.
   Formular, Vorteile und Antwortkasten kommen aus shopbriefing.css,
   die diese Seite ebenfalls lädt.
   ============================================================ */

/* ── Fahrplan ─────────────────────────────────────────────────
   Macht greifbar, was "100 Tage" heißt. Die Zeitachse links ist
   eine echte Linie, keine Dekoration: Sie zeigt, dass die vier
   Phasen aufeinander folgen und wo der Kurs endet. */
.q4-fahrplan {
    list-style: none; margin: 30px 0 34px; padding: 0 0 0 26px;
    text-align: left; position: relative;
}
.q4-fahrplan::before {
    content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px;
    width: 2px; background: linear-gradient(180deg,
        var(--green) 0%, rgba(139, 214, 38, .35) 60%, rgba(242, 244, 239, .12) 100%);
    border-radius: 2px;
}
.q4-fahrplan li {
    position: relative; padding: 0 0 20px 0;
    font-size: 13px; line-height: 1.6; color: var(--muted);
}
.q4-fahrplan li:last-child { padding-bottom: 0; }
.q4-fahrplan li::before {
    content: ""; position: absolute; left: -26px; top: 5px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--bg); border: 2px solid var(--green);
}
.q4-phase {
    display: block; font-size: 11.5px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--green); margin-bottom: 3px;
}
.q4-fahrplan strong {
    display: block; font-size: 15px; color: var(--text);
    margin-bottom: 3px; font-weight: 700;
}

/* ── Einstiegswahl ────────────────────────────────────────────
   Abgesetzt wie die Zustimmungen im ShopBriefing: Es ist eine echte
   Entscheidung mit Folgen, keine Formalie. */
.q4-modus {
    background: var(--panel-2); border: 1px solid var(--faint);
    border-radius: 12px; padding: 15px 17px; margin-bottom: 4px;
}
.q4-modus-titel {
    display: block; font-size: 13.5px; font-weight: 700;
    color: var(--text); margin-bottom: 12px;
}
.q4-wahl {
    display: flex; gap: 11px; align-items: flex-start;
    padding: 10px 0; cursor: pointer;
    font-size: 13px; line-height: 1.6; color: var(--muted);
}
.q4-wahl + .q4-wahl { border-top: 1px solid var(--faint); }
.q4-wahl input {
    margin-top: 3px; width: 17px; height: 17px; flex-shrink: 0;
    accent-color: var(--green); cursor: pointer;
}
.q4-wahl strong { display: block; color: var(--text); font-weight: 700; margin-bottom: 2px; }
.q4-wahl em { font-style: normal; color: var(--muted); }

/* Der Warnhinweis muss auffallen: Wer "von vorne" wählt, weil es
   gründlicher klingt, bekommt sonst die Launchtag-Checkliste im Januar. */
.q4-wahl em.q4-warnung {
    display: block; margin-top: 5px; color: #f0b429; font-weight: 600;
}