@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 300 500; font-display: swap; src: url(fonts/inter-tight.woff2) format("woff2"); }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 200 900; font-display: swap; src: url(fonts/logo-unbounded.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/jetbrains-mono.woff2) format("woff2"); }

:root {
  --bg: #0a0a09;
  --fg: #eeede8;
  --dim: #77756e;
  --line: #2b2a27;
  --accent: #ff2a14;
  --display: "Inter Tight", system-ui, sans-serif;
  --sans: "Inter Tight", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --logo: "Unbounded", var(--sans);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--fg); font-family: var(--sans); font-weight: 300; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, select, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--bg); }
em { font-style: normal; }

/* Scrollbalken: dünn, dunkel, rot beim Anfassen */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); }
::-webkit-scrollbar-thumb:hover { background: var(--dim); }
::-webkit-scrollbar-thumb:active { background: var(--accent); }
::-webkit-scrollbar-corner { background: var(--bg); }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: var(--line) var(--bg); } }
.m { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.red { color: var(--accent); }

nav { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding: 20px 32px; gap: 16px; }
nav.solid { position: sticky; background: var(--bg); border-bottom: 1px solid var(--line); }
.logo { font-family: var(--logo); font-weight: 800; font-size: 24px; letter-spacing: 0; }
.logo i { color: var(--accent); font-style: normal; }
nav ul { display: flex; gap: 28px; list-style: none; }
nav ul a, nav ul button { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; background: none; border: 0; cursor: pointer; }
nav ul a:hover, nav ul button:hover { opacity: 1; }

section { padding: 120px 32px; border-bottom: 1px solid var(--line); }
.kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 28px; }
h2 { font-family: var(--display); font-weight: 500; font-size: clamp(34px, 4.2vw, 60px); line-height: 1; letter-spacing: -.035em; max-width: 960px; }
h2 em { color: var(--accent); }
h3 { font-family: var(--display); font-weight: 500; font-size: 30px; line-height: 1.05; letter-spacing: -.025em; }
.lead.red { color: var(--accent); }
.lead { color: var(--dim); max-width: 600px; margin-top: 24px; font-size: 16px; line-height: 1.6; }

.chip { background: none; border: 1px solid var(--line); padding: 6px 12px; cursor: pointer; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); transition: all .2s; }
.chip:hover { color: var(--fg); border-color: var(--dim); }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--fg); }
.tag { display: inline-block; border: 1px solid var(--accent); color: var(--accent); padding: 4px 8px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; margin: 0 6px 6px 0; }
.tag.dim { border-color: var(--line); color: var(--dim); }

/* Formulare */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; max-width: 1100px; }
.field { border-top: 1px solid var(--line); padding: 16px 0 22px; display: grid; gap: 10px; align-content: start; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); display: flex; justify-content: space-between; gap: 12px; }
.field input, .field select { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 6px 0; font-family: var(--display); font-weight: 300; font-size: 22px; letter-spacing: -.01em; outline: none; border-radius: 0; }
.field textarea { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 6px 0; font-family: var(--sans); font-size: 16px; line-height: 1.55; outline: none; resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field select option { background: var(--bg); font-family: var(--sans); font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.btn { background: var(--accent); border: 0; padding: 16px 28px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; color: var(--fg); }
.btn:disabled { background: var(--line); color: var(--dim); cursor: not-allowed; }
.btn.ghost { background: none; border: 1px solid var(--line); color: var(--fg); }
.btn.ghost:hover { border-color: var(--fg); }
.btn.small { padding: 8px 12px; font-size: 10px; }
.actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; border-top: 1px solid var(--line); padding-top: 24px; flex-wrap: wrap; }
.meldung { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.meldung.fehler { color: var(--accent); }

/* Listen */
.rows { margin-top: 32px; }
.row { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); align-items: baseline; }
.row .name { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.1; letter-spacing: -.02em; }
.leer { color: var(--dim); padding: 16px 0; border-top: 1px solid var(--line); font-size: 14px; }

.seite { max-width: 1100px; margin: 0 auto; padding: 80px 32px 120px; }
.seite section { padding: 72px 0; }
.seite section:first-child { padding-top: 24px; }

footer { padding: 48px 32px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Vorschau Frage 6: große Zahlen */
.zahlen-b .regel .num, .zahlen-b .jg .gross, .zahlen-b .jahrgang .gross { font-family: var(--logo); font-weight: 800; letter-spacing: 0; }
.zahlen-c .regel .num, .zahlen-c .jg .gross, .zahlen-c .jahrgang .gross { font-family: var(--mono); font-weight: 400; letter-spacing: -.04em; }
.zahlen-wahl { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: flex; gap: 4px; align-items: center; background: var(--bg); border: 1px solid var(--accent); padding: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.zahlen-wahl span { color: var(--accent); padding: 0 8px; }
.zahlen-wahl a { padding: 6px 10px; border: 1px solid var(--line); } .zahlen-wahl a.on { background: var(--accent); border-color: var(--accent); }

@media (max-width: 900px) {
  nav { padding: 16px; } nav ul { gap: 14px; }
  section { padding: 80px 16px; }
  .seite { padding: 48px 16px 80px; }
  .form { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr auto; } .row > :nth-child(2), .row > :nth-child(3) { display: none; }
}