/* Gemeinsamer Look für Bewerben, Kontakt und Anfrage – wie die Startseite:
   hell oder dunkel nach Geräte-Einstellung, eine einzige Akzentfarbe. Wird nach dem Seiten-Stil geladen und überschreibt ihn. */
:root {
    --bg: #ffffff; --card: #f5f5f7; --card-high: #ffffff; --stroke: #e7e7ec;
    --ink: #111113; --text: #3a3a3c; --muted: #6e6e73; --faint: #8e8e93;
    --accent: #c2410c; --accent-hover: #ad3a0b; --accent-text: #c2410c; --accent-ring: #c2410c33; --accent-soft: #c2410c12;
    --ember: var(--accent); --flare: var(--accent-text); --dusk: var(--accent);
    --spark: var(--accent);
    --red: #d70015; --red-soft: #d700150f;
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    --ease: cubic-bezier(.25, .1, .25, 1);
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #000; --card: #141416; --card-high: #1f1f21; --stroke: #2a2a2e;
        --ink: #f5f5f7; --text: #d2d2d7; --muted: #a1a1a6; --faint: #8e8e93;
        --accent-text: #ff7a45; --accent-ring: #ff7a4540; --accent-soft: #ff7a451f;
        --red: #ff6961; --red-soft: #ff453a1f;
    }
}
body { font-family: var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
h1, h2, .brand { font-family: var(--display); }
.glow { display: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a { color: var(--accent-text); }

/* Marke wie in der Navigation der Startseite */
.brand { font-size: 18px; font-weight: 700; letter-spacing: -.3px; gap: 10px; color: var(--ink); }
.brand img { width: 28px; height: 28px; border-radius: 8px; }
.brand span { color: var(--accent); }

/* Typografie: groß, fett, eng */
.hero { padding-top: 64px; padding-bottom: 36px; }
h1 { font-weight: 800; letter-spacing: -.045em; line-height: .98; color: var(--ink); }
h1 em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--faint); }
h2 { font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.lead { color: var(--muted); }
summary { color: var(--ink); }

/* Flächen: helles Off-White, hauchdünne Ränder, weiche Rundung */
.card { border-radius: 32px; border-color: var(--stroke); background: var(--card); }
.card::before { display: none; }
.perks li, .way, .next li, details { background: var(--card); border-color: var(--stroke); }
.perks .ic, .way .ic { background: var(--card-high); border-color: var(--stroke); }
.pill { background: var(--card-high); border-color: var(--stroke); color: var(--text); font-weight: 500; }
.pill i { background: #30d158; box-shadow: 0 0 0 4px #30d15826; }
.card-head .count, .next .n { background: var(--card-high); border-color: var(--stroke); }
.progress { background: var(--stroke); }

/* Eingaben: weiße Felder auf der Karte, Fokus in der Akzentfarbe */
.input, input, textarea, .tile span, .switch-row, .quick button, .topics span { background: var(--card-high); border-color: var(--stroke); }
.input input, .input textarea { background: none; }
.input:focus-within, input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); background: var(--card-high); }
.input.invalid, .invalid { border-color: var(--red) !important; box-shadow: 0 0 0 4px var(--red-soft) !important; }
.tile:hover span, .quick button:hover { border-color: var(--faint); }
.tile input:checked + span { background: var(--accent-soft); border-color: var(--accent); box-shadow: none; }
.tile input:focus-visible + span, .switch-row input:focus-visible ~ .switch, .consent input:focus-visible + .box, .topics input:focus-visible + span { box-shadow: 0 0 0 4px var(--accent-ring); }
.quick button.on, .topics input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.switch { background: var(--stroke); }
.switch-row input:checked ~ .switch { background: #34c759; }
.consent { background: transparent; border-color: var(--stroke); color: var(--text); }
.consent:has(input:checked) { border-color: var(--accent); }
.consent input { accent-color: var(--accent); }
.consent.invalid { border-color: var(--red); }
.error { background: var(--red-soft); border-color: transparent; color: var(--red); }

/* Knöpfe: flach in der Akzentfarbe, rounded-2xl wie auf der Startseite */
.submit, .confirm-btn, button.primary { background: var(--accent); box-shadow: 0 10px 24px -12px var(--accent); font-weight: 600; border-radius: 16px;
    transition: transform .2s var(--ease), background .2s var(--ease), opacity .15s; }
.submit:hover, .confirm-btn:hover { background: var(--accent-hover); }
.confirm-btn { border-radius: 12px; }
.confirm-btn.ghost { background: transparent; border: 1px solid var(--stroke); color: var(--ink); box-shadow: none; }
.progress i, .step-title b { background: var(--accent); }

/* Erfolg: ruhiger Haken statt Verlauf */
.done .big { background: var(--card-high); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--stroke); }
.msg.me .bubble { background: var(--ink); color: var(--bg); }

footer { color: var(--faint); }
footer a { color: var(--muted); }