/* Gestaltung wie Angebot Ready (unity-home/src/lib/render.js): Lila #5B2C87, Gold #B8892B, Weiss. */
:root{
  --lila:#5B2C87; --lila-dunkel:#3D1D5C; --lila-hell:#7B4BA7; --lila-flaeche:#F4EFFA;
  --gold:#B8892B; --gold-hell:#D4A84A; --gold-flaeche:#FBF5E8;
  --tinte:#241C2E; --text:#4A4356; --grau:#6B6478; --linie:#E8E4EE; --papier:#FAF9FC;
}
*{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--lila);text-decoration:none}
.kopf{max-width:620px;margin:0 auto;padding:22px 16px 6px}
.marke{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;letter-spacing:-.01em}
.marke em{font-style:normal;color:var(--gold)}
.siegel{width:30px;height:30px;border-radius:9px;flex:none;background:linear-gradient(135deg,var(--lila) 0%,var(--lila-hell) 60%,var(--gold) 100%)}
.mitte{max-width:620px;margin:0 auto;padding:14px 16px 40px}
.karte{background:#fff;border:1px solid var(--linie);border-radius:16px;padding:30px 28px}
@media(max-width:520px){.karte{padding:24px 18px}}
.fusszeile{text-align:center;font-size:12.5px;color:#9A94A6;margin:22px 0 0}
.fusszeile a{color:#9A94A6}

.balken{height:5px;background:var(--linie);border-radius:5px;margin-bottom:22px;overflow:hidden}
.balken i{display:block;height:100%;background:var(--lila);border-radius:5px;transition:width .35s ease}
.frage{font-size:23px;font-weight:700;line-height:1.3;letter-spacing:-.015em;margin:0 0 8px;text-wrap:balance}
.sub{font-size:15.5px;color:var(--grau);margin:0 0 20px;line-height:1.6;text-wrap:pretty}

button{font:inherit;color:inherit;cursor:pointer}
.wahl{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border:1px solid var(--linie);border-radius:12px;padding:15px 16px;margin:0 0 10px;font-size:16px;transition:border-color .15s,background .15s}
.wahl:hover{border-color:var(--lila)}
.wahl.aktiv{border-color:var(--lila);background:var(--lila-flaeche);color:var(--lila);font-weight:600}
.wahl svg{width:22px;height:22px;flex:none}
.pillen{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.pille{background:#fff;border:1px solid var(--linie);border-radius:999px;padding:8px 15px;font-size:14.5px}
.pille:hover{border-color:var(--lila)}
.pille.aktiv{border-color:var(--lila);background:var(--lila-flaeche);color:var(--lila);font-weight:600}
.pille.vorschlag{color:var(--lila);border-style:dashed}
.eigene{display:flex;gap:8px;margin:-4px 0 14px}
.eigene input{flex:1}
input,textarea{font:inherit;font-size:16px;color:var(--tinte);background:#fff;border:1px solid var(--linie);border-radius:12px;padding:12px 14px;width:100%}
input:focus,textarea:focus{outline:none;border-color:var(--lila);box-shadow:0 0 0 3px rgba(91,44,135,.12)}
textarea{min-height:120px;resize:vertical;line-height:1.55}

.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--lila);color:#fff;border:0;border-radius:11px;padding:15px 30px;font-size:16px;font-weight:700;letter-spacing:-.01em}
.knopf:hover{background:var(--lila-dunkel)}
.knopf.breit{width:100%}
.knopf[disabled]{opacity:.6;cursor:wait}
.klein{background:none;border:0;color:var(--grau);font-size:14.5px;padding:8px 4px}
.klein:hover{color:var(--lila)}
.mikro{display:inline-flex;align-items:center;gap:9px;background:var(--lila-flaeche);color:var(--lila);border:2px solid var(--lila);border-radius:999px;padding:10px 20px;font-size:15px;font-weight:700;margin-top:12px}
.mikro:hover{background:var(--lila);color:#fff}
.mikro.laeuft{background:var(--lila);color:#fff}
.mikro svg{width:18px;height:18px}
.zeile{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:20px}
.fehler{color:#A32D2D;font-size:14px;margin:10px 0 0;min-height:20px}

.warten{text-align:center;padding:30px 0 10px}
.kreis{width:46px;height:46px;border:4px solid var(--lila-flaeche);border-top-color:var(--lila);border-radius:50%;margin:0 auto 18px;animation:dreh 1s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}
.warten p{color:var(--grau);margin:4px 0}

.marker{font-size:13.5px;color:var(--gold);font-weight:700;margin:0 0 8px;display:flex;align-items:center;gap:6px}
.vergleich{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:4px 0 0}
.spalte{border-radius:14px;padding:16px 16px 6px}
.spalte h4{margin:0 0 12px;font-size:12px;letter-spacing:.08em;font-weight:700}
.spalte b{display:block;font-size:22px;line-height:1.2;font-weight:700}
.spalte span{display:block;font-size:13.5px;margin:2px 0 14px}
.heute{background:var(--papier);border:1px solid var(--linie);color:var(--grau)}
.heute b{color:var(--text)}
.mitki{background:var(--lila-flaeche);border:1px solid var(--lila);color:var(--lila)}
.wert{font-size:16px;color:var(--text);margin:18px 0 0;line-height:1.6}
.wert b{color:var(--lila)}
.deutung{font-size:15.5px;color:var(--text);margin:14px 0 0;line-height:1.6}

.geschenk{background:#F8F4FD;border:1px solid var(--linie);border-radius:16px;padding:22px 20px;margin-top:26px}
.geschenk h3{margin:0 0 8px;font-size:18px;color:var(--lila);display:flex;align-items:center;gap:8px}
.geschenk p{margin:0 0 16px;font-size:15.5px;line-height:1.6;color:var(--text)}
.geschenk input{margin-bottom:10px}
.geschenk .hinweis{font-size:12.5px;color:#9A94A6;margin:12px 0 0}

.ts{position:fixed;bottom:10px;right:10px}
.spalte b{white-space:nowrap}
@media(max-width:520px){.spalte{padding:14px 12px 4px}.spalte b{font-size:19px}.frage{font-size:21px}}
.postfach{text-align:center;padding:10px 0 4px}
.postfach .sub{max-width:440px;margin-left:auto;margin-right:auto}
.brief{width:64px;height:64px;border-radius:50%;background:var(--lila-flaeche);color:var(--lila);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.brief svg{width:30px;height:30px}
.titel{text-align:center;margin:4px 0 18px}
.titel .name{margin:0;font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--lila);text-wrap:balance}
.titel .claim{margin:6px 0 0;font-size:16.5px;color:var(--gold);font-weight:600;text-wrap:balance}
@media(max-width:520px){.titel .name{font-size:24px}.titel .claim{font-size:15px}}