/* Schwarz-weiß wie clicklessai.de, Systemschriften (keine externen Fonts, Datenschutz). */
:root { --text: #0b0b0c; --grau: #5c5f66; --linie: #e4e4e7; --flaeche: #ffffff; --grund: #f6f6f7; --akzent: #0b0b0c; --fehler: #b42318; }
@media (prefers-color-scheme: dark) { :root { --text: #f4f4f5; --grau: #a1a1aa; --linie: #2a2a2e; --flaeche: #141416; --grund: #0b0b0c; --akzent: #f4f4f5; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--grund); color: var(--text); font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.seite { max-width: 640px; margin: 0 auto; padding: 24px 16px 48px; }
.kopf { display: flex; align-items: baseline; gap: 10px; margin-bottom: 40px; }
.marke { font-weight: 700; letter-spacing: -0.02em; }
.kopf-zusatz { color: var(--grau); font-size: 14px; }
.held { margin-bottom: 24px; }
.dachzeile { text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; color: var(--grau); margin: 0 0 8px; }
h1 { font-size: clamp(26px, 5vw, 36px); line-height: 1.15; letter-spacing: -0.025em; margin: 0 0 14px; font-weight: 650; }
.unterzeile { color: var(--grau); font-size: 17px; margin: 0; }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 20px; padding: 24px; display: grid; gap: 16px; }
label { display: grid; gap: 6px; font-size: 14px; font-weight: 550; }
input, textarea { font: inherit; color: var(--text); background: var(--grund); border: 1px solid var(--linie); border-radius: 12px; padding: 12px 14px; width: 100%; }
input:focus, textarea:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
.haken { grid-template-columns: 22px 1fr; align-items: start; font-weight: 400; color: var(--grau); font-size: 13px; }
.haken input { width: 18px; height: 18px; margin-top: 2px; }
.falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
button, .knopf { font: inherit; font-weight: 600; background: var(--akzent); color: var(--flaeche); border: 0; border-radius: 999px; padding: 13px 22px; cursor: pointer; text-decoration: none; text-align: center; display: inline-block; }
.knopf.zweit { background: transparent; color: var(--text); border: 1px solid var(--linie); }
.knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.klein { font-size: 13px; color: var(--grau); margin: 0; }
.fehler { color: var(--fehler); margin: 0; font-weight: 550; }
.platzhalter { border: 1px dashed var(--fehler); color: var(--fehler); padding: 10px; border-radius: 10px; }
.countdown { display: flex; align-items: baseline; gap: 10px; }
.countdown span { font-size: 56px; font-weight: 650; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.countdown small { color: var(--grau); }
.erkannt ul { margin: 6px 0 0; padding-left: 18px; color: var(--grau); font-size: 14px; }
.zahl { font-size: 20px; font-weight: 600; margin: 0; }
.fuss { margin-top: 40px; font-size: 13px; color: var(--grau); }
.fuss a, .karte a:not(.knopf) { color: inherit; }
[hidden] { display: none !important; }