@font-face { font-family: "Bricolage"; src: url("/static/fonts/BricolageGrotesque-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Instrument"; src: url("/static/fonts/InstrumentSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument"; src: url("/static/fonts/InstrumentSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  --bg: #ECEFEA; --surface: #FFFFFF; --surface-2: #F3F5F1; --fg: #16201A; --muted: #5B6A61;
  --line: rgba(22,32,26,.10); --accent: #1E6B50; --accent-ink: #FFFFFF; --accent-soft: rgba(30,107,80,.11);
  --ok: #2FA968; --bad: #D63F35;
  --a: #2160C4; --b: #D9730D; --c: #6A45C2; --d: #0F8C7E; --e: #C2337A; --f: #4B5563;
  --shadow: 0 1px 2px rgba(16,24,20,.06), 0 10px 30px rgba(16,24,20,.07);
  --display: "Bricolage", ui-rounded, system-ui, sans-serif;
  --ui: "Instrument", -apple-system, system-ui, "Segoe UI", sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1311; --surface: #161D1A; --surface-2: #1D2622; --fg: #E7EDE9; --muted: #93A39A;
    --line: rgba(231,237,233,.10); --accent: #57C095; --accent-ink: #0B1410; --accent-soft: rgba(87,192,149,.14);
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.25);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg); color: var(--fg); font: 400 17px/1.45 var(--ui);
  -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100dvh;
  padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(16px, env(safe-area-inset-left));
}
button, input, textarea { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 6px; }
.brand { display: flex; align-items: center; gap: 9px; font: 700 18px var(--display); letter-spacing: -.01em; }
.mark { width: 30px; height: 30px; }
.mark-bg { fill: #1E6B50; } .mark-screen { fill: #fff; } .mark-ring { fill: none; stroke: #1E6B50; stroke-width: 1.8; }
.mark-line { fill: #1E6B50; } .mark-line2 { fill: #B9D3C7; } .mark-tri { fill: #5BE0A6; }
.session-title { color: var(--muted); font-size: 14px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }

main { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: 560px; margin: 0 auto; }
.screen { display: flex; flex-direction: column; gap: 14px; padding: 18px 0 24px; animation: rise .35s cubic-bezier(.2,.8,.2,1); }
.screen.center { align-items: center; text-align: center; justify-content: center; flex: 1; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
h1 { font: 700 clamp(26px, 7vw, 34px)/1.12 var(--display); letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.lead { color: var(--muted); margin: 0; }
.countdown { display: flex; align-items: center; gap: 12px; }
.countdown-bar { flex: 1; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.countdown-bar i { display: block; height: 100%; width: 100%; background: var(--accent); border-radius: 99px; transition: width .25s linear; }
.countdown.low .countdown-bar i { background: var(--bad); }
.countdown span { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: right; }
.kicker { margin: 0; font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }

.join { display: flex; gap: 10px; margin-top: 8px; }
.join input {
  flex: 1; min-width: 0; border: 2px solid var(--line); background: var(--surface); border-radius: 16px;
  padding: 14px 16px; font: 700 26px var(--display); letter-spacing: .14em; text-transform: uppercase; text-align: center;
}
.join input:focus { outline: none; border-color: var(--accent); }

button.primary {
  border: 0; background: var(--accent); color: var(--accent-ink); font-weight: 600; border-radius: 16px;
  padding: 0 22px; min-height: 54px; cursor: pointer; transition: transform .15s, filter .15s;
}
button.primary:active { transform: scale(.97); }
button.primary:disabled { opacity: .45; }
button.wide { width: 100%; }

.options { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.option {
  position: relative; display: flex; align-items: center; gap: 14px; text-align: left; width: 100%;
  border: 2px solid transparent; background: var(--surface); border-radius: 18px; padding: 14px 16px; min-height: 64px;
  box-shadow: var(--shadow); cursor: pointer; overflow: hidden; transition: transform .15s, border-color .2s, background .2s;
}
.option:active { transform: scale(.98); }
.option .letter {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  color: #fff; font: 700 18px var(--display); background: var(--opt);
}
.option .label { position: relative; z-index: 1; font-weight: 600; flex: 1; }
.option .meta { position: relative; z-index: 1; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.option .bar { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--opt); opacity: .14; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.option.selected { border-color: var(--opt); background: color-mix(in srgb, var(--opt) 10%, var(--surface)); }
.option.correct { border-color: var(--ok); }
.option.correct::after { content: "✓"; position: relative; z-index: 1; color: var(--ok); font-weight: 700; font-size: 20px; }
.option.wrong { border-color: var(--bad); opacity: .85; }
.option.dim { opacity: .55; }
.option[disabled] { cursor: default; }
.option .check {
  flex: none; width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--line); display: grid; place-items: center;
}
.option.selected .check { background: var(--opt); border-color: var(--opt); }
.option.selected .check::after { content: "✓"; color: #fff; font-size: 14px; font-weight: 700; }

.text-answer textarea {
  width: 100%; border: 2px solid var(--line); background: var(--surface); border-radius: 16px; padding: 14px; resize: vertical; min-height: 120px;
}
.text-answer textarea:focus { outline: none; border-color: var(--accent); }
.text-answer .row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.counter { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }

.status { margin: 0; color: var(--muted); font-size: 15px; text-align: center; min-height: 1.4em; }
.status.ok { color: var(--ok); font-weight: 600; }
.status.bad { color: var(--bad); font-weight: 600; }
.banner { border-radius: 16px; padding: 14px 16px; font-weight: 600; text-align: center; }
.banner.ok { background: color-mix(in srgb, var(--ok) 14%, var(--surface)); color: var(--ok); }
.banner.bad { background: color-mix(in srgb, var(--bad) 12%, var(--surface)); color: var(--bad); }
.banner.info { background: var(--accent-soft); color: var(--accent); }
.solution { background: var(--surface); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow); }
.solution b { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin-bottom: 4px; }
.error { color: var(--bad); margin: 0; }

.pulse { width: 74px; height: 74px; border-radius: 50%; background: var(--accent); position: relative; margin-bottom: 8px; }
.pulse::before, .pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); animation: ripple 2s ease-out infinite; }
.pulse::after { animation-delay: 1s; }
@keyframes ripple { from { transform: scale(1); opacity: .45; } to { transform: scale(2.4); opacity: 0; } }
.done { width: 74px; height: 74px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-size: 36px; font-weight: 700; }

.foot { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 16px 0 18px; color: var(--muted); font-size: 13px; }
.foot a { color: var(--muted); }

.legal { max-width: 680px; margin: 0 auto; padding: 10px 0 30px; }
.legal h1 { margin-bottom: 10px; }
.legal h2 { font: 700 20px var(--display); margin: 24px 0 6px; }
.legal p, .legal li { color: var(--fg); }
.legal ul { padding-left: 20px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Meinungslinie (Skala) */
.scale { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border-radius: 18px; padding: 22px 18px 16px; }
.scale-input { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; margin: 0; touch-action: none; }
.scale-input::-webkit-slider-runnable-track { height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--b), var(--line) 50%, var(--d)); }
.scale-input::-moz-range-track { height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--b), var(--line) 50%, var(--d)); }
.scale-input::-webkit-slider-thumb { -webkit-appearance: none; width: 38px; height: 38px; margin-top: -14px; border-radius: 50%; background: var(--accent); border: 4px solid var(--surface); box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.scale-input::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); border: 4px solid var(--surface); box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.scale-input:disabled { opacity: .6; }
.scale-labels { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 14px; font-weight: 600; }
.scale-labels span:last-child { text-align: right; }
.scale-chart { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 110px; padding: 0 9px; }
.scale-chart i { flex: 1; background: var(--accent); opacity: .75; border-radius: 4px 4px 0 0; transition: height .6s cubic-bezier(.2,.8,.2,1); }
.scale-mine { position: absolute; bottom: -4px; transform: translateX(-50%); font-size: 12px; font-weight: 700; color: var(--accent-ink); background: var(--fg); padding: 2px 7px; border-radius: 99px; }