/* Beta-Seite (Prototyp). Helle Tokens aus video-production/brand.config.json (colors), eingesetzt von build-site.mjs.
   Dunkle Tokens und --fehler sind nicht Teil der Markenkonfiguration und stehen deshalb hier. Keine externen Schriften.
   Kontrast aller Text/Hintergrund-Paare ≥ 4,5:1 (geprüft in test/site.test.mjs). */
:root { --feld:#EEF1F5; --papier:#FFFFFF; --graphit:#1C1F26; --graphit-2:#5A6070; --kobalt:#2F5BFF; --auf-kobalt:#fff; --haar:#DDE1E8; --fehler:#C8261B; --punkt:rgba(28,31,38,0.16);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif; color-scheme: light dark }
@media (prefers-color-scheme: dark) { :root { --feld:#111317; --papier:#1B1E24; --graphit:#EEF0F4; --graphit-2:#A0A7B4; --kobalt:#8EA3FF; --auf-kobalt:#0E1220; --haar:#2E323B; --fehler:#FF6B5E; --punkt:rgba(200,206,216,.10) } }
* { box-sizing: border-box }
html { scroll-padding-top: 80px }
body { margin:0; font:17px/1.55 var(--sans); color:var(--graphit); background:var(--feld); background-image:radial-gradient(var(--punkt) 1px, transparent 1.2px); background-size:24px 24px; overflow-wrap:anywhere }
a { color: var(--kobalt) }
.sprung { position:absolute; left:8px; top:-60px; z-index:5; background:var(--papier); color:var(--graphit); padding:12px 16px; border-radius:10px; min-height:44px }
.sprung:focus { top:8px }
.nav { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px max(16px,4vw); position:sticky; top:0; background:color-mix(in srgb, var(--papier) 82%, transparent); backdrop-filter:blur(16px); border-bottom:1px solid var(--haar); z-index:2 }
.wortmarke { font-weight:600; letter-spacing:-.028em; font-size:19px; color:var(--graphit); text-decoration:none; display:inline-flex; align-items:center; min-height:44px }
main { max-width:760px; margin:0 auto; padding:32px max(16px,4vw) 80px; display:grid; gap:28px }
main:focus { outline:none }
h1 { font-size:clamp(32px,6vw,56px); line-height:1.05; letter-spacing:-.02em; margin:0 0 14px; text-wrap:balance }
h2 { font-size:24px; letter-spacing:-.01em; margin:0 0 10px; text-wrap:balance } h3 { margin:12px 0 6px }
.lede { font-size:19px; color:var(--graphit-2); max-width:62ch; margin:0 0 20px }
.status, .klein { font-size:14px } .leise { color:var(--graphit-2) }
.papier { background:var(--papier); border-radius:16px; padding:24px; box-shadow:0 1px 2px rgba(28,31,38,.06),0 4px 12px rgba(28,31,38,.08) }
.reihe { display:flex; gap:10px; flex-wrap:wrap }
.knopf { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px; border-radius:10px; border:1px solid var(--haar); background:var(--papier); color:var(--graphit); font:600 16px var(--sans); text-decoration:none; cursor:pointer }
.knopf.voll { background:var(--kobalt); border-color:var(--kobalt); color:var(--auf-kobalt) } .knopf.klein { font-size:15px; padding:0 14px }
.knopf:disabled { opacity:.5; cursor:default }
:focus-visible, video:focus { outline:3px solid var(--kobalt); outline-offset:2px }
figure { margin:0 }
video { display:block; width:100%; max-width:360px; height:auto; aspect-ratio:9/16; margin:0 auto 10px; border-radius:12px; background:var(--feld) }
figcaption { text-align:center; max-width:52ch; margin:0 auto }
.schritte { list-style:none; padding:0; margin:0; display:grid; gap:10px }
.schritte li { display:grid; grid-template-columns:90px 1fr; gap:12px; background:var(--papier); padding:14px 16px; border-radius:12px }
.stand { display:grid; grid-template-columns:130px 1fr; gap:8px 14px; margin:0 } .stand dt { font-weight:600 } .stand dd { margin:0 }
form { display:grid; gap:10px; margin-top:12px } label { font-weight:600 }
input[type=email], select { min-height:44px; padding:0 12px; border:1px solid var(--haar); border-radius:10px; background:var(--feld); color:var(--graphit); font:16px var(--sans); width:100% }
input[aria-invalid=true] { border-color:var(--fehler) }
input[type=checkbox] { width:20px; height:20px; margin:2px 0 0; accent-color:var(--kobalt) }
.einwilligung { font-weight:400; font-size:14px; display:grid; grid-template-columns:22px 1fr; gap:10px; align-items:start; min-height:44px; padding:4px 0 }
fieldset { border:1px solid var(--haar); border-radius:10px; display:grid; gap:0; margin:0; padding:6px 12px 8px }
fieldset label { font-weight:400; display:flex; align-items:center; gap:10px; min-height:44px }
fieldset label input { margin:0 }
.fehler { color:var(--fehler); margin:0; font-size:14px } .hinweis { margin:0; min-height:1.4em }
.hinweis.ist-fehler { color:var(--fehler) }
.honig { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden }
.cf-turnstile { min-height:65px }
details { border-top:1px solid var(--haar) } summary { cursor:pointer; font-weight:600; min-height:44px; display:flex; align-items:center; padding:6px 0 } details p { margin:0 0 12px }
.vorschau { margin:0; padding:10px 14px; border-radius:10px; border:1px dashed var(--kobalt); background:var(--papier); font-size:14px }
footer { text-align:center; font-size:14px; color:var(--graphit-2); padding:24px 16px 48px } footer p { margin:4px 0 }
footer a { display:inline-flex; align-items:center; min-height:44px; padding:0 10px }
@media (max-width:560px) { .schritte li, .stand { grid-template-columns:1fr } .papier { padding:20px 16px } }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; scroll-behavior:auto !important } }