@font-face { font-family: Zen; font-weight: 400; font-display: swap; src: url(/public/fonts/zen-kaku-gothic-new-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Zen; font-weight: 700; font-display: swap; src: url(/public/fonts/zen-kaku-gothic-new-latin-700-normal.woff2) format('woff2'); }

:root {
  --paper: #faf4e3; --cream: #f5efde; --matcha: #5c8c4a; --deep: #365a33; --dark: #1f3a22;
  --sumi: #1a1712; --hanko: #b84a2e; --ink-soft: #4d463c; --line: rgba(31, 58, 34, .16);
}
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: Zen, -apple-system, system-ui, sans-serif; background: var(--paper); color: var(--dark); min-height: 100svh; }
main { max-width: 440px; margin: 0 auto; padding: 28px 16px 40px; display: grid; gap: 20px; }
.logo { height: 40px; justify-self: center; }
h1 { font-size: 1.15rem; text-align: center; }
button, .knopf { font: 700 1rem Zen, system-ui; border: 0; border-radius: 14px; padding: 15px 18px; width: 100%; cursor: pointer; background: var(--dark); color: var(--cream); }
button.zweit { background: transparent; color: var(--dark); box-shadow: inset 0 0 0 2px var(--dark); }
button:disabled { opacity: .45; }
.karte { border-radius: 16px; overflow: hidden; box-shadow: 0 6px 20px rgba(26, 23, 18, .14); }
.karte img { display: block; width: 100%; height: auto; }
.karte .kopf { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; font-weight: 700; }
.wahl { display: grid; gap: 14px; }
.wahl label { display: block; border-radius: 18px; padding: 4px; cursor: pointer; outline: 3px solid transparent; transition: outline-color .15s; }
.wahl input { position: absolute; opacity: 0; }
.wahl input:checked + .karte { outline: 3px solid var(--matcha); outline-offset: 3px; }
.wahl input:focus-visible + .karte { outline: 3px dashed var(--matcha); outline-offset: 3px; }
.meldung { text-align: center; font-weight: 700; padding: 12px; border-radius: 12px; background: var(--cream); }
.meldung.fehler { color: var(--hanko); }
video { width: 100%; border-radius: 16px; background: var(--sumi); aspect-ratio: 1; object-fit: cover; }
input[type=password], input[type=text], textarea { font: 1rem Zen, system-ui; width: 100%; padding: 13px 14px; border-radius: 12px; border: 2px solid var(--line); background: #fff; color: var(--dark); }
textarea { min-height: 96px; resize: vertical; }
.zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.zahl { font-size: 2.6rem; font-weight: 700; text-align: center; }
[hidden] { display: none !important; }