/* Schriften lokal einbinden (keine Übertragung an Google). Die .woff2-Dateien
   unter assets/fonts/ ablegen, siehe README. Fehlen sie, greifen die Ersatzschriften. */
@font-face { font-family: 'Anton'; src: url('fonts/anton-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('fonts/archivo-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('fonts/archivo-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('fonts/archivo-latin-800-normal.woff2') format('woff2'); font-weight: 800; font-display: swap; }

:root {
  --gelb: #FFD400;
  --cyan: #009FE3;
  --rot: #E30613;
  --schwarz: #111111;
  --grund: #1A1A1A;
  --weiss: #FFFFFF;
  --grau-hell: #D9D9D9;
  --inaktiv: #4A4A4A;
  --display: 'Anton', Impact, 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
  --text: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--schwarz); font-family: var(--text); font-size: 16px; line-height: 1.5; }
a { color: var(--schwarz); }
a:hover { color: #005C8A; }
input, select, button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--schwarz); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.seite { min-height: 100vh; padding: 32px 16px 48px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.kopfzeile, .los, .rechtliches { width: 100%; max-width: 560px; }
.kopfzeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #F2F2F2; font-size: 13px; letter-spacing: .04em; }
.anzeige { border: 1px solid #F2F2F2; padding: 2px 8px; font-weight: 600; }

.los { background: var(--gelb); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.los-kopf { background: var(--schwarz); color: var(--gelb); padding: 18px 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.los-titel { font-family: var(--display); font-size: 44px; line-height: 1; letter-spacing: .04em; margin: 0; font-weight: 400; }
.los-meta { font-size: 13px; font-weight: 600; color: #F2F2F2; text-align: right; }
.fortschritt { display: flex; height: 18px; background: var(--schwarz); gap: 4px; padding: 0 24px 10px; }
.fortschritt span { flex: 1; background: var(--inaktiv); }
.fortschritt span.an { background: var(--gelb); }

.countdown { background: var(--rot); color: var(--weiss); padding: 10px 24px; display: flex; justify-content: center; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.countdown-text { font-size: 15px; font-weight: 800; letter-spacing: .06em; }
.countdown-zeit { font-family: var(--display); font-size: 34px; line-height: 1; letter-spacing: .06em; font-variant-numeric: tabular-nums; }

.schritt { padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; }
.h-display { font-family: var(--display); font-size: 30px; line-height: 1.1; margin: 0; font-weight: 400; }
.h-klein { font-size: 18px; font-weight: 800; margin: 6px 0 0; }
.lead { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.35; }
.text { margin: 0; font-size: 15px; line-height: 1.5; }
.klein { margin: 0; font-size: 14px; font-weight: 600; }

.gewinnfeld { background: var(--cyan); padding: 24px 20px; text-align: center; border: 4px solid var(--schwarz); display: flex; flex-direction: column; gap: 4px; }
.gewinnfeld .zeile1 { font-family: var(--display); font-size: 34px; line-height: 1.05; letter-spacing: .04em; }
.gewinnfeld .betrag { font-family: var(--display); font-size: 76px; line-height: 1.02; }
.gewinnfeld .zeile3 { font-size: 20px; font-weight: 800; }
.gewinnfeld .gesamt { margin-top: 8px; font-size: 15px; font-weight: 600; }

.btn-haupt { min-height: 60px; border: 0; background: var(--rot); color: var(--weiss); font-family: var(--display); font-size: 26px; letter-spacing: .05em; cursor: pointer; box-shadow: 4px 4px 0 var(--schwarz); }
.btn-haupt:disabled { opacity: .6; cursor: wait; }
.btn-oeffnen { min-height: 64px; font-size: 30px; transform: rotate(-1.5deg); }
.btn-link { min-height: 44px; border: 0; background: transparent; font-size: 15px; font-weight: 800; text-decoration: underline; cursor: pointer; }
.btn-rahmen { min-height: 48px; border: 2px solid var(--schwarz); background: transparent; font-size: 15px; font-weight: 800; cursor: pointer; }

.feld { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 800; }
.feld input, .feld select, .eingabe { min-height: 48px; border: 2px solid var(--schwarz); background: var(--weiss); padding: 0 12px; width: 100%; font-weight: 400; font-size: 16px; }
.reihe-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.reihe-31 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 12px; }
.reihe-12 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px; }
.reihe-tel { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 8px; }
@media (max-width: 400px) { .reihe-2 { grid-template-columns: 1fr; } }

.glueck-feld { background: var(--weiss); border: 4px dashed var(--schwarz); padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.glueck-feld input { width: 100%; max-width: 300px; min-height: 64px; border: 3px solid var(--schwarz); background: var(--gelb); text-align: center; font-family: var(--display); font-size: 40px; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.glueck-feld .hinweis { font-size: 13px; font-weight: 600; letter-spacing: 0; }
.glueck-mini { background: var(--weiss); border: 3px dashed var(--schwarz); padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.glueck-mini .label { font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.glueck-mini .nummer { font-family: var(--display); font-size: 28px; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.glueck-gross { background: var(--weiss); border: 4px dashed var(--schwarz); padding: 18px; text-align: center; }
.glueck-gross .label { font-size: 14px; font-weight: 800; letter-spacing: .08em; }
.glueck-gross .nummer { font-family: var(--display); font-size: 52px; letter-spacing: .1em; font-variant-numeric: tabular-nums; }

.hinweis-ok, .hinweis-fehler { font-size: 13px; font-weight: 800; line-height: 1.4; padding: 8px 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hinweis-ok { background: var(--weiss); border: 2px solid var(--schwarz); }
.hinweis-fehler { background: var(--schwarz); color: var(--weiss); }
.hinweis-neutral { font-size: 13px; font-weight: 600; line-height: 1.4; }
.vorschlag-btn { min-height: 44px; padding: 0 14px; border: 2px solid var(--schwarz); background: var(--gelb); color: var(--schwarz); font-size: 14px; font-weight: 800; cursor: pointer; }
.orte { display: flex; flex-wrap: wrap; gap: 8px; }
.orte button { min-height: 44px; padding: 0 14px; border: 2px solid var(--schwarz); background: var(--weiss); font-size: 14px; font-weight: 800; cursor: pointer; }
.orte button[aria-pressed="true"] { background: var(--schwarz); color: var(--gelb); }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; padding: 12px; border: 2px solid var(--schwarz); font-weight: 400; }
.check.pflicht { background: var(--weiss); }
.check.frei { border-style: dashed; }
.check input { width: 22px; height: 22px; margin: 0; flex: none; }
.fehler { margin: 0; background: var(--schwarz); color: var(--weiss); padding: 10px 12px; font-size: 14px; font-weight: 600; }
.honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.erfolg-kopf { display: flex; align-items: center; gap: 14px; }
.erfolg-kopf svg { flex: none; }
.erfolg-info { background: var(--cyan); padding: 16px; border: 3px solid var(--schwarz); display: flex; flex-direction: column; gap: 6px; }

.los-fuss-linie { border-top: 3px dashed var(--schwarz); margin: 0 24px; }
.los-fuss { padding: 16px 24px 22px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; font-weight: 600; }

.rechtliches { color: var(--grau-hell); font-size: 12px; line-height: 1.6; display: flex; flex-direction: column; gap: 12px; }
.rechtliches h2 { margin: 0; font-size: 14px; color: var(--weiss); }
.rechtliches p { margin: 0; }
.rechtliches a, .rechtliches button.link { color: var(--weiss); }
.rechtliches nav { display: flex; gap: 16px; flex-wrap: wrap; }
button.link { background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; font-size: inherit; }

/* Cookie-Banner: Ablehnen und Zustimmen gleichwertig */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--weiss); border-top: 4px solid var(--schwarz); padding: 16px; display: flex; justify-content: center; }
.consent-inhalt { max-width: 720px; width: 100%; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.consent-inhalt h2 { margin: 0; font-size: 16px; }
.consent-inhalt p { margin: 0; }
.consent-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.consent-btns button { flex: 1 1 200px; min-height: 48px; border: 2px solid var(--schwarz); background: var(--gelb); font-weight: 800; cursor: pointer; }

/* Unterseiten (Impressum, Datenschutz) */
.unterseite { max-width: 760px; margin: 0 auto; padding: 32px 16px 64px; color: #F2F2F2; }
.unterseite h1 { font-family: var(--display); font-weight: 400; color: var(--gelb); font-size: 40px; margin: 0 0 16px; }
.unterseite h2 { font-size: 18px; margin: 24px 0 8px; color: var(--weiss); }
.unterseite a { color: var(--gelb); }