/* Vorbereitungsseite für Kunden (customer-instructions.html).
 *
 * ⛔ Bis zum 16.10.2026 trug die Seite einen eigenen Stil im <style>-Block: violette
 *    Verläufe (#667eea → #764ba2), weiße Karte, schwebende Emojis. Dazu stellte
 *    `display: flex` am <body> den gemeinsamen Kopf NEBEN die Karte (dieselbe Falle wie
 *    in `einstieg.css`). Jetzt: Gerüst aus `konto.css`, Farben nur aus `tokens.css`.
 */

.anleitung-wichtig {
    margin: 1.25rem 0 0;
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--akzent);
    border-radius: var(--radius-eingabe);
    background: var(--akzent-fuellung);
}

.anleitung-wichtig h2 {
    font-size: 1.0625rem;
}

.anleitung-wichtig .anleitung-nachsatz {
    margin: 0.5rem 0 0;
}

/* Haken statt Punkt, im Akzent: die einzige Farbe im Bild. */
.kg-haken {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kg-haken li {
    position: relative;
    padding: 0.375rem 0 0.375rem 1.5rem;
}

.kg-haken li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--akzent);
    font-weight: 700;
}

/* Einstufung als Pille. „Kritisch" in Warnfarbe, sonst leise im Akzent. */
.kg-stufe,
.kg-stufe--kritisch {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--akzent-rand);
    border-radius: var(--radius-pille);
    background: var(--akzent-fuellung);
    color: var(--akzent);
    font-size: var(--text-klein);
    font-weight: 600;
}

.kg-stufe--kritisch {
    border-color: var(--warnung-rand);
    background: var(--warnung-flaeche);
    color: var(--warnung);
}

.anleitung-aktionen {
    margin-top: 0;
}

@media (max-width: 480px) {
    .anleitung-aktionen .kg-btn {
        width: 100%;
    }
}