/* Tokens, base reset, utility & component classes */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --red: #C41E2A;
    --red-dark: #9E1822;
    --red-light: #FDEBED;
    --red-bright: #C41E2A;
    --red-rgb: 196,30,42;
    --red-tint-soft:   rgba(196,30,42,0.08);
    --red-tint-medium: rgba(196,30,42,0.15);
    --red-tint-strong: rgba(196,30,42,0.30);
    --dark: #34608B;
    --dark-surface: #3D6D9A;
    --cream: #FAF8F4;
    --cream-warm: #F5F0E8;
    --text: #1A1A1A;
    --text-muted: #5A5A5A;
    --text-light: #666666;
    --border: #E8E3DB;

    /* Lesetexte auf dunklen / blauen Karten — zentral steuerbar.
       Kein Wert unter 0.78 Alpha (sonst wirkt es grau). */
    --text-on-dark:        #FFFFFF;
    --text-on-dark-soft:   #FFFFFF;
    --text-on-dark-muted:  rgba(255,255,255,0.85);
    --accent-on-dark:      var(--red);
    --success-on-dark:     #4ADE80;
}

.text-on-dark        { color: var(--text-on-dark); }
.text-on-dark-soft   { color: var(--text-on-dark-soft); }
.text-on-dark-muted  { color: var(--text-on-dark-muted); }
.text-accent-on-dark { color: var(--accent-on-dark); }
.text-success-on-dark { color: var(--success-on-dark); }

/* Komponenten-Klassen — ersetzen wiederholte Inline-Styles, damit
   Aenderungen zentral greifen. */
.form-success-title { color: var(--success-on-dark); margin-bottom: 0.5rem; }
.form-success-text  { color: var(--text-on-dark-soft); font-size: 0.9rem; }
.form-success-text strong { color: var(--text-on-dark); }
.va-step-row    { display: flex; align-items: center; gap: 1rem; }
.va-step-num    {
    min-width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: var(--red);
    color: #FFFFFF;
    border-radius: 50%;
    font-size: 0.8rem; font-weight: 700;
}
.va-step-text   { font-size: 0.9rem; color: var(--text-on-dark-soft); }
.sabine-quote {
    border-left: 3px solid var(--red-bright);
    padding: 0.75rem 1rem; margin: 1rem 0;
    font-style: italic; font-size: 0.95rem;
    color: var(--text-on-dark-soft);
}
.sabine-quote cite {
    display: block; margin-top: 0.5rem;
    font-style: normal; font-weight: 700; font-size: 0.85rem;
    color: var(--red);
}

html { scroll-behavior: smooth; }

body {
    font-family: 'DM Sans', -apple-system, sans-serif;
    color: var(--text);
    background: var(--cream);
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: 'DM Serif Display', serif; font-weight: 400; line-height: 1.15; }

.section-label {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 1.25rem;
}

.section-label-light {
    color: var(--text-on-dark-soft);
}

img { display: block; max-width: 100%; height: auto; }