@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url(/fonts/hanken-grotesk-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url(/fonts/hanken-grotesk-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4; }

:root { --bg: #0E0E0E; --tx: #F4F1EC; --mut: #A8A39A; --feld: #1C1B19; --rand: #34322E; --akz: #E8C872; --fehler: #FF8A7A; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--tx); }
body { font: 400 16px/1.45 'Hanken Grotesk', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased;
  min-height: 100dvh; background: radial-gradient(120% 60% at 50% -10%, #2A2416 0%, var(--bg) 60%); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; }

.karte { max-width: 460px; margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 18px 20px; min-height: 100dvh; display: flex; flex-direction: column; }
.kopf { margin-bottom: 14px; }
.marke { margin: 0 0 10px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
.marke b { color: var(--akz); font-weight: 700; }
h1, h2 { margin: 0 0 6px; font-weight: 700; font-size: 27px; line-height: 1.12; letter-spacing: -.01em; }
.unter { margin: 0; color: var(--mut); font-size: 15px; }

.form { display: flex; flex-direction: column; gap: 8px; }
.zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
input:not([type=radio]) { width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--rand);
  background: var(--feld); color: var(--tx); font: inherit; font-size: 16px; outline: none; }
input::placeholder { color: #8A857C; }
input:focus { border-color: var(--akz); }
input.fehlt { border-color: var(--fehler); }

.land { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.land__t { grid-column: 1 / -1; font-size: 13px; color: var(--mut); margin: 2px 0 0 2px; }
.land label { position: relative; }
.land input { position: absolute; opacity: 0; inset: 0; }
.land label span { display: flex; align-items: center; justify-content: center; height: 42px; border-radius: 12px; border: 1px solid var(--rand);
  background: var(--feld); font-size: 14px; cursor: pointer; }
.land input:checked + span { border-color: var(--akz); color: var(--akz); font-weight: 600; }
.land input:focus-visible + span { outline: 2px solid var(--akz); outline-offset: 2px; }
.land.fehlt label span { border-color: var(--fehler); }

.btn { display: flex; align-items: center; justify-content: center; height: 52px; margin-top: 4px; border: 0; border-radius: 14px;
  background: var(--akz); color: #17140C; font: inherit; font-size: 17px; font-weight: 700; text-decoration: none; cursor: pointer; }
.btn[disabled] { opacity: .6; }
.msg { margin: 0; color: var(--fehler); font-size: 14px; }
.einw { margin: 2px 0 0; font-size: 12px; color: var(--mut); }
.einw a, .fuss a { color: var(--mut); }

.danke { padding-top: 8px; }
.danke .btn { margin-top: 18px; }
.fuss { margin-top: auto; padding-top: 18px; font-size: 12px; color: var(--mut); text-align: center; }

/* Rechtsseiten */
.rs { max-width: 680px; margin: 0 auto; padding: 28px 20px 48px; }
.rs h1 { font-size: 30px; margin-bottom: 4px; }
.rs h2 { font-size: 19px; margin: 26px 0 6px; }
.rs h3 { font-size: 16px; margin: 18px 0 4px; }
.rs p, .rs li { color: #D9D4CB; }
.rs a { color: var(--akz); }
.rs__stand { color: var(--mut); font-size: 14px; }

@media (min-height: 760px) { .karte { padding-top: 48px; } h1, h2 { font-size: 32px; } .kopf { margin-bottom: 22px; } }