:root { --navy: #1B2A4A; --navy2: #24375f; --gruen: #2E7D52; --gruen2: #e8f5ee; --rot: #c53030; --grau: #64748b; --linie: #e2e8f0; --bg: #f5f7fb; }
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; color: #0f172a; background: var(--bg); font-size: 15px; line-height: 1.5; }
a { color: var(--navy); }
.hidden { display: none !important; }
.muted { color: var(--grau); }
.klein { font-size: 13px; }

header.kopf { background: var(--navy); color: white; }
.kopf .innen { max-width: 1120px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 14px; }
.kopf img { width: 36px; height: 36px; border-radius: 8px; }
.kopf b { font-size: 17px; }
.kopf nav { margin-left: auto; display: flex; gap: 18px; }
.kopf nav a { color: rgba(255,255,255,.85); text-decoration: none; font-weight: 600; font-size: 14px; }
.kopf nav a:hover { color: white; }

.held { background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 100%); color: white; padding: 46px 24px 70px; }
.held .innen { max-width: 1120px; margin: 0 auto; }
.held h1 { font-size: 34px; margin: 0 0 10px; }
.held p { font-size: 17px; opacity: .9; max-width: 640px; margin: 0; }
.vorteile { display: flex; gap: 8px 22px; flex-wrap: wrap; margin-top: 18px; font-size: 14px; opacity: .95; }
.vorteile span::before { content: "✓ "; color: #86efac; font-weight: bold; }

main { max-width: 1120px; margin: -40px auto 40px; padding: 0 24px; }
.raster { display: grid; grid-template-columns: 1fr 360px; gap: 22px; align-items: start; }
@media (max-width: 920px) { .raster { grid-template-columns: 1fr; } }
.karte { background: white; border-radius: 12px; padding: 24px; box-shadow: 0 4px 18px rgba(15,23,42,.08); margin-bottom: 20px; }
.karte h2 { margin: 0 0 4px; font-size: 19px; color: var(--navy); }
.karte .unter { margin: 0 0 16px; color: var(--grau); font-size: 14px; }
.schritt { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: white; font-size: 13px; font-weight: bold; margin-right: 8px; }

.wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.wahl button { font: inherit; text-align: left; padding: 14px; border: 1.5px solid #cbd5e1; border-radius: 10px; background: white; cursor: pointer; color: var(--navy); }
.wahl button:hover { border-color: var(--navy); }
.wahl button.aktiv { border-color: var(--gruen); background: var(--gruen2); box-shadow: 0 0 0 1px var(--gruen) inset; }
.wahl button b { display: block; font-size: 15px; }
.wahl button small { display: block; color: var(--grau); font-size: 12px; margin-top: 2px; }
.wahl button .preis { display: block; margin-top: 6px; font-weight: 700; color: var(--gruen); }

label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 13px; color: var(--navy); }
input, select, textarea { font: inherit; font-weight: 400; padding: 10px 12px; border: 1.5px solid #cbd5e1; border-radius: 8px; background: white; color: inherit; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--navy); }
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.felder .ganz { grid-column: 1 / -1; }
@media (max-width: 600px) { .felder { grid-template-columns: 1fr; } }
.check { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 14px; color: #0f172a; }
.check input { margin-top: 3px; }
.zeile { display: flex; gap: 10px; align-items: flex-end; }

.zahlarten { display: grid; gap: 10px; }
.zahlarten label { flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid #cbd5e1; border-radius: 10px; cursor: pointer; font-size: 14px; }
.zahlarten label.aktiv { border-color: var(--gruen); background: var(--gruen2); }
.zahlarten label.aus { opacity: .5; cursor: not-allowed; }
.zahlarten small { display: block; font-weight: 400; color: var(--grau); }

.summe { position: sticky; top: 16px; }
.summe table { width: 100%; border-collapse: collapse; font-size: 14px; }
.summe td { padding: 5px 0; }
.summe td:last-child { text-align: right; white-space: nowrap; }
.summe tr.gesamt td { font-size: 19px; font-weight: 700; color: var(--navy); border-top: 2px solid var(--navy); padding-top: 10px; }
.summe tr.rabatt td { color: var(--gruen); }

.btn { font: inherit; font-weight: 700; border: none; border-radius: 10px; padding: 14px 18px; cursor: pointer; background: var(--gruen); color: white; width: 100%; font-size: 16px; }
.btn:hover { background: #276b46; }
.btn:disabled { opacity: .55; cursor: default; }
.btn.zweit { background: white; color: var(--navy); border: 1.5px solid #cbd5e1; }
.fehler { background: #fdecec; color: var(--rot); border-radius: 8px; padding: 10px 14px; font-size: 14px; margin: 10px 0; }
.hinweis { background: #fff8e1; border: 1px solid #f0c040; color: #7a5a00; border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 14px; }
.info { background: #eef3fb; color: var(--navy); border-radius: 8px; padding: 12px 14px; font-size: 14px; margin-bottom: 14px; }
.badge { display: inline-block; border-radius: 20px; padding: 2px 10px; font-size: 12px; font-weight: 700; background: var(--gruen2); color: var(--gruen); }
.schluessel { font-family: Consolas, "Cascadia Mono", monospace; font-size: 17px; background: #f8fafc; border: 1px solid var(--linie); border-radius: 8px; padding: 12px 16px; line-height: 1.9; user-select: all; }
.test-banner { background: #b45309; color: white; text-align: center; font-size: 13px; font-weight: 600; padding: 6px; }

footer { max-width: 1120px; margin: 0 auto; padding: 24px; color: var(--grau); font-size: 13px; display: flex; gap: 18px; flex-wrap: wrap; border-top: 1px solid var(--linie); }
footer a { color: var(--grau); }
.rechtstext { max-width: 820px; margin: 30px auto; background: white; border-radius: 12px; padding: 30px; box-shadow: 0 4px 18px rgba(15,23,42,.08); }
.rechtstext h1 { color: var(--navy); }
.platzhalter { background: #fff8e1; border: 1px dashed #f0c040; padding: 10px 14px; border-radius: 8px; color: #7a5a00; font-size: 14px; }

/* Bereiche, die sich noch in der Entwicklung befinden: sichtbar, aber nicht wählbar */
.wahl button.inEntwicklung { opacity: .5; padding-top: 30px; cursor: not-allowed; filter: grayscale(1); position: relative; background: repeating-linear-gradient(-45deg, #f4f6f8, #f4f6f8 8px, #eceff3 8px, #eceff3 16px); }
.wahl button.inEntwicklung:hover { transform: none; box-shadow: none; border-color: inherit; }
.wahl button .dev-badge { position: absolute; top: 8px; right: 8px; background: #1B2A4A; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .3px; padding: 2px 7px; border-radius: 10px; text-transform: uppercase; }

/* Download-Seite */
.dl-kopf { display: flex; align-items: center; gap: 16px; }
.dl-icon { width: 64px; height: 64px; border-radius: 14px; box-shadow: 0 2px 8px rgba(15,23,42,.15); }
.dl-btn { display: block; text-align: center; text-decoration: none; margin-top: 20px; font-size: 17px; padding: 16px 18px; }
.dl-btn.aus { opacity: .5; pointer-events: none; }
.dl-schritte { margin: 10px 0 0; padding-left: 22px; line-height: 1.6; }
.dl-schritte li { margin-bottom: 8px; }
.raster2-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 700px) { .raster2-dl { grid-template-columns: 1fr; } }
.dl-link { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--navy); }
.dl-link span { color: var(--gruen); font-weight: 600; font-size: 14px; }
.dl-link:hover { box-shadow: 0 6px 22px rgba(15,23,42,.14); }
.held-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.held-knoepfe a { width: auto; text-decoration: none; display: inline-block; }
.held-knoepfe .btn.hell { background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.45); }
.held-knoepfe .btn.hell:hover { background: rgba(255,255,255,.2); }
.bald-box { margin-top: 16px; background: var(--gruen2); border: 1px solid #b7dfc6; border-radius: 10px; padding: 14px 16px; font-size: 14px; color: #1d4d33; }
.bald-box b { font-size: 16px; display: block; margin-bottom: 4px; }
.bald-box p { margin: 6px 0 0; }
.bald-box a { color: var(--gruen); font-weight: 600; }