/* Handy-Seite der Abstimmung, Farben aus dem TKB-Design des Decks */
:root {
  --gruen-dunkel: #006d41;
  --gruen: #80b613;
  --petrol: #006374;
  --blau-hell: #8fb9c1;
  --grau-hell: #f0f0f0;
  --grau: #d1cdc9;
  --schrift: 'Futura PT', 'Futura', 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --feder: cubic-bezier(.34, 1.45, .64, 1);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; font-family: var(--schrift); color: #111; background: #fff; }
body { display: flex; flex-direction: column; min-height: 100dvh; }

header { background: var(--gruen-dunkel); color: #fff; padding: calc(14px + env(safe-area-inset-top)) 20px 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
header .titel { font-weight: 600; font-size: 15px; letter-spacing: .01em; }
.verbindung { font-size: 12px; display: inline-flex; align-items: center; gap: 6px; opacity: .95; white-space: nowrap; }
.verbindung::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #aaa; }
.verbindung.an::before { background: var(--gruen); animation: puls 1.8s ease-in-out infinite; }
@keyframes puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(128,182,19,.6); } 50% { box-shadow: 0 0 0 5px rgba(128,182,19,0); } }
.fortschritt { height: 3px; background: var(--grau-hell); }
.fortschritt span { display: block; height: 100%; width: 0; background: var(--gruen); transition: width 600ms var(--ease); }

main { flex: 1; position: relative; overflow: clip; }
.ansicht { position: absolute; inset: 0; padding: 26px 20px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; opacity: 0; transform: translateX(24px); pointer-events: none; visibility: hidden; transition: opacity 380ms, transform 380ms var(--ease), visibility 0s 380ms; overflow-y: auto; }
.ansicht.an { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity 380ms, transform 380ms var(--ease), visibility 0s; }

/* Warten und kein Code */
.warten { align-items: center; justify-content: center; text-align: center; }
.warten .punkte { display: flex; gap: 10px; margin-bottom: 28px; }
.warten .punkte i { width: 14px; height: 14px; background: var(--gruen-dunkel); animation: huepf 1.2s var(--ease) infinite; }
.warten .punkte i:nth-child(2) { animation-delay: .15s; background: var(--petrol); }
.warten .punkte i:nth-child(3) { animation-delay: .3s; background: var(--gruen); }
@keyframes huepf { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-12px); } }
.qr-zeichen { display: grid; grid-template-columns: repeat(2, 22px); gap: 8px; margin-bottom: 28px; }
.qr-zeichen i { width: 22px; height: 22px; border: 4px solid var(--gruen-dunkel); }
.qr-zeichen i:nth-child(4) { border: 0; background: var(--gruen); transform: scale(.55); }
.warten h2 { font-size: 24px; font-weight: 600; margin: 0 0 10px; color: var(--gruen-dunkel); }
.warten p { margin: 0; font-size: 16px; line-height: 1.45; color: #555; max-width: 280px; }

/* Frage */
.marke { color: var(--petrol); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.frage h2 { margin: 8px 0 6px; font-size: 26px; line-height: 1.2; font-weight: 600; }
.frage .zusatz { margin: 0; font-size: 15px; color: #555; line-height: 1.35; }
.optionen { display: grid; gap: 12px; margin-top: 20px; }
/* mehrere Fragen einer Folie untereinander, jede für sich wählbar */
.block + .block { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--grau-hell); }
.mehrere h2 { font-size: 21px; }
.mehrere .optionen { gap: 10px; margin-top: 14px; }
.mehrere .option { min-height: 54px; font-size: 17px; }
.option { position: relative; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; border: 1.5px solid var(--petrol); border-radius: 0; background: #fff; font: inherit; font-size: 19px; color: var(--petrol); text-align: left; cursor: pointer; transition: background 250ms, color 250ms, transform 120ms, opacity 300ms; animation: einblenden 460ms var(--ease) both; }
@keyframes einblenden { from { opacity: 0; transform: translateY(14px); } }
.option:active { transform: scale(.98); }
.option:focus-visible { outline: 3px solid var(--gruen); outline-offset: 2px; }
.option .buchstabe { flex: none; width: 34px; height: 34px; display: grid; place-items: center; font-weight: 600; font-size: 15px; background: var(--grau-hell); color: var(--petrol); transition: background 250ms, color 250ms; }
.option .haken { flex: none; margin-left: auto; width: 26px; height: 26px; opacity: 0; transform: scale(.4); transition: opacity 250ms, transform 300ms var(--feder); }
.option.gewaehlt { background: var(--petrol); color: #fff; }
.option.gewaehlt .buchstabe { background: rgba(255,255,255,.18); color: #fff; }
.option.gewaehlt .haken { opacity: 1; transform: none; }
.option.gewaehlt .haken path { stroke-dashoffset: 0; }
.haken path { stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset 350ms 80ms var(--ease); }
.block.zu .option { pointer-events: none; }
.block.zu .option:not(.gewaehlt) { opacity: .4; }

.unten { margin-top: auto; padding-top: 18px; }
.status { font-size: 14px; color: #666; line-height: 1.45; display: flex; gap: 10px; align-items: flex-start; min-height: 42px; }
.status .ok { flex: none; width: 22px; height: 22px; background: var(--gruen); display: grid; place-items: center; transform: scale(0); transition: transform 300ms var(--feder); }
.status .ok svg { width: 14px; height: 14px; }
.status .ok path { stroke: #fff; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.status.gezaehlt .ok { transform: none; }
.status b { color: #111; font-weight: 600; }
.status.fehler b { color: #b3261e; }
.mitzaehlen { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--grau-hell); font-size: 13px; color: #666; }
.mitzaehlen .zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mitzaehlen b { color: var(--gruen-dunkel); font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; display: inline-block; }
.mitzaehlen b.stoss { animation: stoss 380ms var(--feder); }
@keyframes stoss { from { transform: translateY(-6px) scale(1.2); } }
.mitzaehlen .live { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gruen-dunkel); display: inline-flex; align-items: center; gap: 5px; }
.mitzaehlen .live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gruen); animation: puls 1.6s ease-in-out infinite; }
.zu .mitzaehlen .live { color: #888; }
.zu .mitzaehlen .live::before { animation: none; background: #aaa; }
.mitzaehlen .spur { margin-top: 8px; height: 5px; background: var(--grau-hell); }
.mitzaehlen .spur span { display: block; height: 100%; width: 0; background: var(--gruen); transition: width 500ms var(--feder); }

/* Ergebnis */
.ergebnis h2 { margin: 8px 0 6px; font-size: 22px; line-height: 1.25; font-weight: 600; }
.ergebnis .unter { font-size: 14px; color: #666; margin-bottom: 22px; }
.ergebnis-block + .ergebnis-block { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--grau-hell); }
.ergebnis.mehrere h2 { font-size: 19px; }
.ergebnis.mehrere .unter { margin-bottom: 14px; }
.balken { display: grid; gap: 14px; }
.balken .zeile .kopf { display: flex; justify-content: space-between; gap: 10px; font-size: 16px; margin-bottom: 6px; }
.balken .zeile .kopf b { font-weight: 600; font-variant-numeric: tabular-nums; }
.balken .zeile .spur { height: 14px; background: var(--grau-hell); }
.balken .zeile .spur span { display: block; height: 100%; width: 0; background: var(--blau-hell); transition: width 900ms var(--ease); }
.balken .zeile.vorn .spur span { background: var(--petrol); }
.balken .zeile .deine { display: inline-block; margin-left: 8px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--gruen-dunkel); padding: 2px 6px; vertical-align: 2px; }
.ergebnis .fuss { margin-top: auto; font-size: 13px; color: #888; text-align: center; padding-top: 16px; }

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