/* AV Vote – Teilnehmerseite (Smartphone). Farben kommen per JS aus dem Branding. */
:root {
  --primaer: #7B3FE4; --akzent: #2BB8F0; --bg: #0D0B1E; --flaeche: #1A1733; --text: #FFFFFF;
  --ja: #22C55E; --nein: #EF4444; --enth: #EAB308; --r: 18px;
  --leise: rgba(255,255,255,.62); --linie: rgba(255,255,255,.12); --karte: rgba(255,255,255,.06);
  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.hell { --leise: rgba(0,0,0,.58); --linie: rgba(0,0,0,.1); --karte: rgba(0,0,0,.04); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--schrift); font-size: 17px; line-height: 1.4;
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
.aus { display: none !important; }
#hg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background-size: cover; background-position: center; }
#hg:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg); opacity: var(--abdunkeln, 1); }
#app { max-width: 560px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) 0 calc(76px + env(safe-area-inset-bottom)); }

#kopf { display: flex; align-items: center; padding: 14px 16px 10px; }
#logo { max-height: 38px; max-width: 120px; margin-right: 12px; display: none; }
#logo.da { display: block; }
.kopf-text { flex: 1; min-width: 0; }
#ev-name { font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ev-unter { font-size: 13px; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#verbindung span { display: block; width: 10px; height: 10px; border-radius: 50%; background: #888; margin-left: 10px; }
#verbindung.ok span { background: var(--ja); box-shadow: 0 0 0 4px rgba(34,197,94,.18); }
#verbindung.weg span { background: var(--nein); animation: puls 1s infinite; }

main { flex: 1; padding: 6px 16px 16px; }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); padding: 20px; margin-bottom: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.top { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--akzent); margin-bottom: 6px; }
h1 { font-size: 24px; line-height: 1.22; margin: 0 0 8px; font-weight: 750; letter-spacing: -.01em; word-wrap: break-word; }
h2 { font-size: 19px; margin: 0 0 10px; }
.beschr { color: var(--leise); margin: 0 0 14px; white-space: pre-line; }
.frage-bild { width: 100%; border-radius: calc(var(--r) - 6px); margin: 4px 0 14px; display: block; }
.leise { color: var(--leise); }
.klein { font-size: 14px; }
.mitte { text-align: center; }
.zeile { display: flex; align-items: center; justify-content: space-between; }

/* Knöpfe */
.knopf { display: block; width: 100%; border: 0; border-radius: calc(var(--r) - 4px); padding: 17px 18px; font: inherit;
  font-weight: 700; font-size: 18px; color: #fff; background: var(--primaer); cursor: pointer; text-align: center;
  background-image: linear-gradient(135deg, var(--primaer), var(--akzent)); transition: transform .08s, opacity .2s; }
.knopf:active { transform: scale(.98); }
.knopf[disabled] { opacity: .45; }
.knopf.zweit { background: var(--karte); background-image: none; color: var(--text); border: 1px solid var(--linie); }
.knopf + .knopf { margin-top: 10px; }

.optionen { margin: 6px 0 14px; }
.opt { display: flex; align-items: center; width: 100%; text-align: left; font: inherit; font-size: 18px; font-weight: 600;
  color: var(--text); background: var(--karte); border: 2px solid var(--linie); border-radius: calc(var(--r) - 4px);
  padding: 15px 16px; margin-bottom: 10px; cursor: pointer; min-height: 60px; transition: border-color .15s, background .15s, transform .08s; }
.opt:active { transform: scale(.985); }
.opt .marke { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--linie); margin-right: 14px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 15px; color: #fff; }
.opt.mehr .marke { border-radius: 7px; }
.opt.gewaehlt { border-color: var(--primaer); background: rgba(123,63,228,.16); }
.opt.gewaehlt .marke { background: var(--primaer); border-color: var(--primaer); }
.opt.gewaehlt .marke:after { content: "✓"; }
.opt.gesperrt { opacity: .4; }

/* Ja / Nein / Enthaltung – groß wie ein TED-Gerät */
.ted { display: flex; flex-direction: column; margin-top: 18px; }
.ted .opt { justify-content: center; font-size: 24px; font-weight: 800; min-height: 84px; border-width: 3px; letter-spacing: .02em; }
.ted .opt .marke { display: none; }
.ted .opt.ja { border-color: var(--ja); color: var(--ja); }
.ted .opt.nein { border-color: var(--nein); color: var(--nein); }
.ted .opt.enthaltung { border-color: var(--enth); color: var(--enth); }
.ted .opt.gewaehlt.ja { background: var(--ja); color: #fff; }
.ted .opt.gewaehlt.nein { background: var(--nein); color: #fff; }
.ted .opt.gewaehlt.enthaltung { background: var(--enth); color: #111; }
.ted .opt.farbig.gewaehlt { color: #fff; }
.tasten-reihe { display: flex; }
.tasten-reihe .opt { flex: 1; margin: 0 4px 10px; padding: 14px 4px; font-size: 26px; }

/* Quiz-Kacheln */
.quiz { display: flex; flex-wrap: wrap; margin: 0 -5px 10px; }
.quiz .opt { width: calc(50% - 10px); margin: 5px; min-height: 110px; flex-direction: column; justify-content: center;
  text-align: center; color: #fff; border: 0; font-size: 17px; }
.quiz .opt .form { font-size: 30px; margin-bottom: 6px; line-height: 1; }
.quiz .opt .marke { display: none; }
.quiz .opt.gewaehlt { box-shadow: 0 0 0 4px #fff inset; }
.quiz .opt.richtig { box-shadow: 0 0 0 4px var(--ja) inset; }

/* Bewertung */
.sterne { display: flex; justify-content: center; margin: 10px 0 18px; }
.sterne button { background: none; border: 0; font-size: 44px; line-height: 1; padding: 4px; color: var(--linie); cursor: pointer; }
.sterne button.an { color: #FBBF24; }
.zahlen { display: flex; flex-wrap: wrap; justify-content: center; margin: 8px -4px 10px; }
.zahlen button { flex: 1 0 15%; min-width: 46px; margin: 4px; padding: 14px 0; font: inherit; font-weight: 700; font-size: 18px;
  color: var(--text); background: var(--karte); border: 2px solid var(--linie); border-radius: 12px; }
.zahlen button.an { background: var(--primaer); border-color: var(--primaer); color: #fff; }
.skala-texte { display: flex; justify-content: space-between; font-size: 13px; color: var(--leise); margin: -4px 2px 16px; }
input[type=range] { width: 100%; margin: 14px 0 6px; accent-color: var(--primaer); height: 34px; }
.aussage { padding: 12px 0 4px; border-top: 1px solid var(--linie); }
.aussage:first-child { border-top: 0; padding-top: 0; }
.aussage .wert { font-weight: 800; font-size: 20px; color: var(--akzent); min-width: 34px; text-align: right; }

/* Eingaben */
input[type=text], textarea { width: 100%; font: inherit; font-size: 18px; color: var(--text); background: var(--karte);
  border: 2px solid var(--linie); border-radius: 14px; padding: 14px 15px; margin-bottom: 10px; outline: none; -webkit-appearance: none; }
input[type=text]:focus, textarea:focus { border-color: var(--primaer); }
textarea { min-height: 120px; resize: vertical; }
.code-eingabe { text-align: center; font-size: 30px !important; letter-spacing: .25em; text-transform: uppercase; font-weight: 800; }
.zaehler { text-align: right; font-size: 13px; color: var(--leise); margin: -6px 2px 10px; }

/* Ranking / Punkte */
.rang { display: flex; align-items: center; background: var(--karte); border: 1px solid var(--linie); border-radius: 14px;
  padding: 10px 10px 10px 14px; margin-bottom: 8px; transition: transform .15s; }
.rang .nr { font-weight: 800; font-size: 20px; width: 30px; color: var(--akzent); }
.rang .txt { flex: 1; font-weight: 600; }
.rang button, .punkt button { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--linie); background: var(--flaeche);
  color: var(--text); font-size: 20px; font-weight: 700; margin-left: 6px; }
.rang button[disabled] { opacity: .25; }
.punkt { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.punkt .txt { flex: 1; font-weight: 600; }
.punkt .wert { width: 54px; text-align: center; font-weight: 800; font-size: 20px; }
.rest { font-size: 15px; font-weight: 700; margin: 12px 0; text-align: center; }
.rest.null { color: var(--ja); }

/* Fertig / Warten */
.warten { text-align: center; padding: 42px 22px; }
.warten .kreis { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 20px; position: relative;
  background: linear-gradient(135deg, var(--primaer), var(--akzent)); animation: atmen 2.4s ease-in-out infinite; }
.warten .kreis:after { content: ""; position: absolute; top: 8px; left: 8px; right: 8px; bottom: 8px; border-radius: 50%; background: var(--flaeche); }
.fertig { text-align: center; padding: 30px 20px 24px; }
.haken { width: 84px; height: 84px; border-radius: 50%; background: var(--ja); margin: 0 auto 18px; display: flex;
  align-items: center; justify-content: center; animation: plopp .45s cubic-bezier(.2,1.6,.4,1); }
.haken svg { width: 46px; height: 46px; }
.quittung { display: inline-block; font-family: ui-monospace, Menlo, monospace; font-weight: 700; letter-spacing: .08em;
  background: var(--karte); border: 1px dashed var(--linie); border-radius: 10px; padding: 6px 12px; margin-top: 8px; }
.meine { font-size: 20px; font-weight: 800; margin: 8px 0 2px; }
.timer { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-variant-numeric: tabular-nums;
  margin-bottom: 12px; font-size: 15px; }
.timer .balken { flex: 1; height: 6px; border-radius: 3px; background: var(--linie); margin-right: 12px; overflow: hidden; }
.timer .balken i { display: block; height: 100%; background: var(--akzent); transition: width 1s linear; }
.timer.knapp { color: var(--nein); }
.timer.knapp .balken i { background: var(--nein); }
.status-pausiert { background: rgba(234,179,8,.15); color: var(--enth); border-radius: 12px; padding: 10px 14px; font-weight: 700;
  margin-bottom: 12px; text-align: center; }
.fehler-text { color: var(--nein); font-weight: 600; margin: 4px 0 10px; }

/* Ergebnisse */
.erg-zeile { margin: 12px 0; }
.erg-kopf { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 5px; }
.erg-balken { height: 12px; border-radius: 6px; background: var(--linie); overflow: hidden; }
.erg-balken i { display: block; height: 100%; border-radius: 6px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.urteil { text-align: center; font-size: 26px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; padding: 14px;
  border-radius: 14px; margin-bottom: 8px; }
.urteil.ja { background: rgba(34,197,94,.16); color: var(--ja); }
.urteil.nein { background: rgba(239,68,68,.16); color: var(--nein); }
.woerter { display: flex; flex-wrap: wrap; justify-content: center; }
.woerter span { margin: 4px 8px; font-weight: 700; }

/* Anwesenheit */
.anwesend-karte { border: 2px solid var(--akzent); }

/* Fragen */
.frage { display: flex; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--linie); }
.frage:first-child { border-top: 0; }
.frage .ftext { flex: 1; word-wrap: break-word; }
.frage .fname { font-size: 13px; color: var(--leise); margin-top: 3px; }
.frage .daumen { margin-left: 12px; min-width: 56px; padding: 7px 8px; border-radius: 12px; border: 1px solid var(--linie);
  background: var(--karte); color: var(--text); font: inherit; font-weight: 700; font-size: 15px; }
.frage .daumen.an { background: var(--primaer); border-color: var(--primaer); color: #fff; }
.frage.beantwortet .ftext { opacity: .55; }
.etikett { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  border-radius: 6px; padding: 2px 6px; margin-left: 6px; background: var(--karte); color: var(--leise); }

/* Reiter und Reaktionen */
#reiter { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center;
  background: rgba(13,11,30,.82); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-top: 1px solid var(--linie); padding: 6px 12px calc(6px + env(safe-area-inset-bottom)); z-index: 5; }
.hell #reiter { background: rgba(255,255,255,.85); }
#reiter button { flex: 1; max-width: 220px; background: none; border: 0; color: var(--leise); font: inherit; font-size: 12px;
  font-weight: 600; padding: 6px; display: flex; flex-direction: column; align-items: center; position: relative; }
#reiter button .sym { font-size: 20px; line-height: 24px; }
#reiter button.aktiv { color: var(--text); }
#reiter button.aktiv .sym { color: var(--akzent); }
#fragen-zahl { position: absolute; top: 2px; left: 55%; background: var(--nein); color: #fff; font-size: 11px; border-radius: 9px;
  padding: 1px 6px; }
#reaktionen { position: fixed; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; z-index: 4; }
#reaktionen button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--linie); background: var(--flaeche);
  font-size: 22px; margin-top: 8px; box-shadow: 0 6px 16px rgba(0,0,0,.25); transition: transform .1s; }
#reaktionen button:active { transform: scale(1.25); }
#reaktionen .auf { font-size: 18px; }
#hinweis { position: fixed; left: 16px; right: 16px; top: calc(12px + env(safe-area-inset-top)); z-index: 9; background: #222;
  color: #fff; border-radius: 14px; padding: 13px 16px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.4); text-align: center;
  max-width: 520px; margin: 0 auto; }
#hinweis.rot { background: var(--nein); }
.fusszeile { text-align: center; font-size: 12px; color: var(--leise); padding: 6px 0 4px; }
.fusszeile a { color: inherit; }

@keyframes puls { 50% { opacity: .3; } }
@keyframes atmen { 0%, 100% { transform: scale(.92); opacity: .75; } 50% { transform: scale(1.05); opacity: 1; } }
@keyframes plopp { 0% { transform: scale(.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.rein { animation: rein .35s cubic-bezier(.2,.8,.2,1); }
@keyframes rein { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }