/* Abstimmung — Gestaltung. Nur Systemschriften, keine externen Ressourcen. */

:root {
  color-scheme: light dark;
  --bg: #f8f4ff;
  --bg2: #ffeef7;
  --text: #1b1233;
  --muted: #62588a;
  --glas-oben: rgba(255, 255, 255, 0.92);
  --glas-unten: rgba(255, 255, 255, 0.66);
  --glas-rand: rgba(80, 50, 160, 0.16);
  --glas-licht: rgba(255, 255, 255, 0.95);
  --karte-fest: #ffffff;
  --rand: rgba(80, 50, 160, 0.16);
  --akzent: #6d28d9;
  --akzent2: #db2777;
  --akzent3: #d97706;
  --akzent-text: #ffffff;
  --gut: #15803d;
  --warn: #b91c1c;
  --schatten: 0 24px 50px -26px rgba(76, 29, 149, 0.4);
  --gitter: rgba(60, 30, 140, 0.05);
  --blase-licht: 0.4;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #07040f;
    --bg2: #120a2b;
    --text: #f6f2ff;
    --muted: #a99fc7;
    --glas-oben: rgba(255, 255, 255, 0.12);
    --glas-unten: rgba(255, 255, 255, 0.045);
    --glas-rand: rgba(255, 255, 255, 0.16);
    --glas-licht: rgba(255, 255, 255, 0.24);
    --karte-fest: #150e2e;
    --rand: rgba(255, 255, 255, 0.16);
    --akzent: #a78bfa;
    --akzent2: #f472b6;
    --akzent3: #fbbf24;
    --akzent-text: #140c2b;
    --gut: #4ade80;
    --warn: #fca5a5;
    --schatten: 0 24px 60px -24px rgba(0, 0, 0, 0.8);
    --gitter: rgba(255, 255, 255, 0.045);
    --blase-licht: 0.55;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { font-size: 18px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--text);
  background:
    radial-gradient(1200px 720px at 10% -8%, color-mix(in srgb, var(--akzent) 30%, transparent), transparent 62%),
    radial-gradient(900px 620px at 100% 105%, color-mix(in srgb, var(--akzent2) 24%, transparent), transparent 58%),
    linear-gradient(160deg, var(--bg), var(--bg2));
  background-attachment: fixed;
  font-family: system-ui, -apple-system, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  line-height: 1.45;
  overflow-x: hidden;
  touch-action: manipulation;
  overscroll-behavior-y: contain;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  -webkit-font-smoothing: antialiased;
}

main {
  position: relative;
  z-index: 2;
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

h1 {
  font-size: clamp(1.5rem, 5.8vw, 2.1rem);
  line-height: 1.15;
  margin: 0 0 1.2rem;
  letter-spacing: -0.02em;
  font-weight: 800;
  animation: einblenden 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

h1.mit-strich::after {
  content: "";
  display: block;
  width: 3.6rem;
  height: 0.28rem;
  margin-top: 0.7rem;
  border-radius: 1rem;
  background: linear-gradient(90deg, var(--akzent), var(--akzent2), var(--akzent3));
}

h2 { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; }

button, select, textarea, input { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }

/* ---------- Hintergrund ---------- */

.blasen, .gitter, .sterne { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

.gitter {
  background-image: linear-gradient(var(--gitter) 1px, transparent 1px), linear-gradient(90deg, var(--gitter) 1px, transparent 1px);
  background-size: 3rem 3rem;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, transparent 75%);
}

.sterne { z-index: 1; width: 100%; height: 100%; }

.blase {
  position: absolute;
  width: 36rem;
  height: 36rem;
  border-radius: 50%;
  filter: blur(90px);
  opacity: var(--blase-licht);
  animation: schweben 24s ease-in-out infinite alternate;
  will-change: transform;
}

.b0 { background: #7c3aed; top: -14rem; left: -12rem; }
.b1 { background: #f59e0b; bottom: -16rem; right: -10rem; animation-delay: -7s; opacity: calc(var(--blase-licht) * 0.7); }
.b2 { background: #ec4899; top: 38%; left: 55%; width: 24rem; height: 24rem; animation-delay: -13s; opacity: calc(var(--blase-licht) * 0.55); }
.b3 { background: #06b6d4; bottom: 8%; left: -10rem; width: 26rem; height: 26rem; animation-delay: -4s; opacity: calc(var(--blase-licht) * 0.5); }

@keyframes schweben {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(7rem, -5rem, 0) scale(1.18); }
}

@keyframes einblenden {
  from { opacity: 0; transform: translateY(0.8rem); }
  to { opacity: 1; transform: none; }
}

@keyframes poppen {
  0% { opacity: 0; transform: scale(0.82) translateY(0.8rem); }
  65% { transform: scale(1.04); }
  100% { opacity: 1; transform: none; }
}

@keyframes puls {
  0% { transform: scale(1); }
  40% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@keyframes glanz {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

@keyframes wisch {
  from { transform: translateX(-120%) skewX(-18deg); }
  to { transform: translateX(260%) skewX(-18deg); }
}

@keyframes atmen {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.12); opacity: 0.7; }
}

@keyframes welle {
  from { transform: scale(0); opacity: 0.55; }
  to { transform: scale(4); opacity: 0; }
}

@keyframes plusflug {
  0% { opacity: 0; transform: translate(-50%, 0.4rem) scale(0.6); }
  18% { opacity: 1; transform: translate(-50%, -0.6rem) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -3.4rem) scale(1); }
}

@keyframes siegerein {
  0% { opacity: 0; transform: scale(0.4) rotate(-6deg); }
  55% { opacity: 1; transform: scale(1.08) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes kroneschwingen {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-0.5rem) rotate(6deg); }
}

@keyframes ausblenden {
  to { opacity: 0; visibility: hidden; }
}

/* ---------- Teilnehmerseite ---------- */

body.mit-zeit main { padding-top: 3.8rem; }

.status { min-height: 1.5rem; color: var(--muted); font-size: 0.9rem; }
.status.fehler { color: var(--warn); }
.status.gut { color: var(--gut); font-weight: 700; }

.live {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.8rem;
}

.live .punkt { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0.9rem #ef4444; animation: atmen 1.6s ease-in-out infinite; }

.zeitleiste {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  height: 2.5rem;
  background: linear-gradient(180deg, var(--glas-oben), var(--glas-unten));
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--glas-rand);
  display: flex;
  align-items: center;
  padding: env(safe-area-inset-top) 1rem 0;
  gap: 0.8rem;
}

.zeitleiste[hidden] { display: none; }
.zeitleiste .spur { flex: 1; height: 0.55rem; border-radius: 1rem; background: color-mix(in srgb, var(--text) 12%, transparent); overflow: hidden; }
.zeitleiste .fuell {
  height: 100%;
  width: calc(var(--anteil, 1) * 100%);
  background: linear-gradient(90deg, #22c55e, #f59e0b);
  border-radius: 1rem;
  box-shadow: 0 0 0.8rem rgba(34, 197, 94, 0.6);
  transition: width 0.3s linear;
}
.zeitleiste.knapp .fuell { background: linear-gradient(90deg, #f59e0b, #ef4444); box-shadow: 0 0 0.9rem rgba(239, 68, 68, 0.7); }
.zeitleiste.knapp .zahl { color: var(--warn); animation: atmen 1s ease-in-out infinite; }
.zeitleiste .zahl { font-variant-numeric: tabular-nums; font-weight: 800; min-width: 2.8rem; text-align: right; }

.optionen { display: grid; gap: 0.8rem; margin: 1.2rem 0; }

.option {
  --farbe: var(--akzent);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 0.95rem;
  width: 100%;
  min-height: 4rem;
  text-align: left;
  padding: 0.75rem 1.05rem;
  background: linear-gradient(180deg, var(--glas-oben), var(--glas-unten)) padding-box,
              linear-gradient(135deg, var(--glas-rand), transparent 60%) border-box;
  border: 1.5px solid transparent;
  border-radius: 1.25rem;
  box-shadow: inset 0 1px 0 var(--glas-licht), var(--schatten);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease, background 0.3s ease;
  animation: poppen 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

.option:nth-child(2) { animation-delay: 0.06s; }
.option:nth-child(3) { animation-delay: 0.12s; }
.option:nth-child(4) { animation-delay: 0.18s; }
.option:nth-child(5) { animation-delay: 0.24s; }
.option:nth-child(n + 6) { animation-delay: 0.3s; }

.option:hover:not(:disabled) { transform: translateY(-3px); box-shadow: inset 0 1px 0 var(--glas-licht), 0 18px 40px -18px var(--farbe), var(--schatten); }
.option:active:not(:disabled) { transform: scale(0.975); }
.option:disabled { cursor: default; opacity: 0.62; }

.option .buchstabe {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.85rem;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, color-mix(in srgb, var(--farbe) 70%, #fff), var(--farbe) 55%, color-mix(in srgb, var(--farbe) 75%, #000));
  color: #fff;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow: 0 8px 18px -8px var(--farbe), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.option .text { flex: 1; overflow-wrap: anywhere; font-weight: 600; }

.option .haken {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--farbe);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 0 1.1rem var(--farbe);
  transform: scale(0) rotate(-90deg);
  transition: transform 0.35s cubic-bezier(0.3, 1.7, 0.5, 1);
}

.option[aria-pressed="true"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--farbe) 24%, var(--karte-fest)), color-mix(in srgb, var(--farbe) 10%, var(--karte-fest))) padding-box,
              linear-gradient(135deg, var(--farbe), color-mix(in srgb, var(--farbe) 40%, #fff)) border-box;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--farbe) 26%, transparent), 0 20px 44px -16px var(--farbe), inset 0 1px 0 var(--glas-licht);
}

.option[aria-pressed="true"] .haken { transform: scale(1) rotate(0); }

.option[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: wisch 0.9s ease 1 both;
}

.option.puls { animation: puls 0.4s ease; }

.option .welle {
  position: absolute;
  z-index: -1;
  width: 5rem;
  height: 5rem;
  margin: -2.5rem 0 0 -2.5rem;
  border-radius: 50%;
  background: var(--farbe);
  pointer-events: none;
  animation: welle 0.7s ease-out forwards;
}

.zaehlband {
  display: grid;
  gap: 0.45rem;
  margin: 1.1rem 0 0.2rem;
  padding: 0.8rem 1rem;
  border-radius: 1rem;
  background: linear-gradient(180deg, var(--glas-oben), var(--glas-unten));
  border: 1px solid var(--glas-rand);
  box-shadow: inset 0 1px 0 var(--glas-licht);
  font-size: 0.92rem;
  font-weight: 700;
}

.zaehlband .spur { height: 0.45rem; border-radius: 1rem; background: color-mix(in srgb, var(--text) 12%, transparent); overflow: hidden; }
.zaehlband .fuell { height: 100%; width: 0; border-radius: 1rem; background: linear-gradient(90deg, var(--akzent), var(--akzent2)); transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }

.knopf {
  padding: 0.65rem 1.15rem;
  min-height: 2.75rem;
  background: linear-gradient(135deg, var(--akzent), color-mix(in srgb, var(--akzent) 45%, var(--akzent2)));
  color: var(--akzent-text);
  font-weight: 700;
  border: 0;
  border-radius: 0.8rem;
  cursor: pointer;
  box-shadow: 0 10px 22px -10px var(--akzent);
  transition: transform 0.14s ease, filter 0.14s ease, box-shadow 0.14s ease;
}

.knopf:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-2px); }
.knopf:active:not(:disabled) { transform: scale(0.97); }
a.knopf { text-decoration: none; display: inline-flex; align-items: center; }
.knopf.leise { background: transparent; color: var(--text); border: 1px solid var(--rand); box-shadow: none; }
.knopf.gefahr { background: transparent; color: var(--warn); border: 1px solid var(--warn); box-shadow: none; }
.knopf:disabled { opacity: 0.5; cursor: default; }

textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="datetime-local"], select {
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: color-mix(in srgb, var(--karte-fest) 80%, transparent);
  border: 1px solid var(--rand);
  border-radius: 0.85rem;
}

textarea { min-height: 7.5rem; resize: vertical; }

.zeile { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin: 0.5rem 0; }
.zeile > .wachsend { flex: 1 1 12rem; }
.zeile > .schmal { flex: 0 0 7rem; width: 7rem; }

.hinweis { color: var(--muted); font-size: 0.9rem; margin: 0.4rem 0; }

.karte {
  background: linear-gradient(180deg, var(--glas-oben), var(--glas-unten)) padding-box,
              linear-gradient(135deg, var(--glas-rand), transparent 55%) border-box;
  border: 1px solid transparent;
  border-radius: 1.3rem;
  padding: 1.15rem 1.3rem;
  margin: 1rem 0;
  box-shadow: inset 0 1px 0 var(--glas-licht), var(--schatten);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

.karte h2:first-child { margin-top: 0; }

.badge {
  font-size: 0.75rem;
  padding: 0.12rem 0.65rem;
  border-radius: 1rem;
  border: 1px solid var(--rand);
  color: var(--muted);
  white-space: nowrap;
}

.badge.offen { color: var(--gut); border-color: var(--gut); }
.badge.zu { color: var(--warn); border-color: var(--warn); }

/* ---------- Ergebnis: Balken und Texte ---------- */

.ergebnis { margin: 1rem 0; }

.balken { --farbe: var(--akzent); margin: 1rem 0; animation: einblenden 0.45s ease both; }

.balken .kopf { display: flex; align-items: center; gap: 0.65rem; font-size: 1rem; }
.balken .kopf .buchstabe {
  flex: none;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 0.55rem;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, color-mix(in srgb, var(--farbe) 70%, #fff), var(--farbe) 55%, color-mix(in srgb, var(--farbe) 75%, #000));
  color: #fff;
  font-weight: 900;
  font-size: 0.9rem;
  box-shadow: 0 6px 14px -6px var(--farbe);
}
.balken .kopf .text { flex: 1; overflow-wrap: anywhere; font-weight: 600; }
.balken .kopf .zahl { font-weight: 900; font-variant-numeric: tabular-nums; min-width: 1.6rem; text-align: right; }
.balken .kopf .prozent { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 3.2rem; text-align: right; }

.balken .spur {
  position: relative;
  height: 1.2rem;
  margin-top: 0.4rem;
  background: color-mix(in srgb, var(--text) 9%, transparent);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.25);
  border-radius: 1rem;
}

.balken .fuell {
  position: relative;
  height: 100%;
  width: 0;
  border-radius: 1rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--farbe) 80%, #000), var(--farbe) 55%, color-mix(in srgb, var(--farbe) 65%, #fff));
  box-shadow: 0 0 1.2rem -0.2rem var(--farbe);
  transition: width 0.95s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.balken .fuell::after {
  content: "";
  position: absolute;
  right: 0.3rem;
  top: 50%;
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, rgba(255, 255, 255, 0) 70%);
  transform: translateY(-50%);
  opacity: 0.9;
}

.balken.fuehrend .fuell {
  background: linear-gradient(100deg, var(--farbe) 0%, color-mix(in srgb, var(--farbe) 50%, #fff) 40%, var(--farbe) 80%);
  background-size: 300% 100%;
  animation: glanz 2.6s linear infinite;
  box-shadow: 0 0 1.8rem var(--farbe);
}

.balken.fuehrend .kopf .text { font-weight: 800; }
.balken .krone { display: none; }
.balken.sieger .krone { display: inline-block; animation: kroneschwingen 1.8s ease-in-out infinite; }

.plus {
  position: absolute;
  z-index: 3;
  top: -0.2rem;
  padding: 0.05rem 0.55rem;
  border-radius: 1rem;
  background: var(--farbe, var(--akzent));
  color: #fff;
  font-weight: 900;
  font-size: 0.85em;
  box-shadow: 0 0 1rem var(--farbe, var(--akzent));
  pointer-events: none;
  animation: plusflug 1.3s ease-out forwards;
}

.texte { list-style: none; padding: 0; margin: 0.5rem 0; display: grid; gap: 0.7rem; }

.texte li {
  background: linear-gradient(180deg, var(--glas-oben), var(--glas-unten));
  border: 1px solid var(--glas-rand);
  border-left: 0.35rem solid var(--farbe, var(--akzent));
  border-radius: 0.95rem;
  padding: 0.65rem 0.95rem;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: flex-start;
  overflow-wrap: anywhere;
  animation: poppen 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
  box-shadow: inset 0 1px 0 var(--glas-licht), var(--schatten);
}

.texte li.neu { box-shadow: 0 0 0 3px color-mix(in srgb, var(--farbe, var(--akzent)) 50%, transparent), 0 0 2rem -0.4rem var(--farbe, var(--akzent)); }

/* ---------- Ringe ---------- */

.ring { width: 100%; height: 100%; transform: rotate(-90deg); display: block; overflow: visible; }
.ring .spur { stroke: color-mix(in srgb, var(--text) 14%, transparent); }
.ring .fortschritt { stroke: var(--akzent); stroke-linecap: round; filter: drop-shadow(0 0 6px var(--akzent)); transition: stroke-dashoffset 0.95s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ring.zeit .fortschritt { stroke: var(--akzent3); filter: drop-shadow(0 0 6px var(--akzent3)); transition: stroke-dashoffset 0.3s linear; }
.ring.zeit.knapp .fortschritt { stroke: #ef4444; filter: drop-shadow(0 0 8px #ef4444); }

.ringbox { position: relative; width: 9rem; height: 9rem; }
.ringbox .mitte {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.ringbox .mitte .gross { font-size: 2.5rem; line-height: 1; letter-spacing: -0.03em; }
.ringbox .mitte .klein { display: block; font-size: 0.8rem; font-weight: 700; color: var(--muted); margin-top: 0.25rem; }

.konfetti { position: fixed; inset: 0; z-index: 60; pointer-events: none; }

/* ---------- Dozentenseite ---------- */

.kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.pille {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.28rem 0.85rem;
  border-radius: 2rem;
  border: 1px solid var(--glas-rand);
  background: linear-gradient(180deg, var(--glas-oben), var(--glas-unten));
  box-shadow: inset 0 1px 0 var(--glas-licht);
  font-weight: 700;
  font-size: 0.9rem;
}

.pille .punkt { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0.8rem #22c55e; animation: atmen 2s ease-in-out infinite; }

.fragenliste { list-style: none; padding: 0; margin: 0; }
.fragenliste li { display: flex; gap: 0.5rem; align-items: center; padding: 0.55rem 0; border-bottom: 1px solid var(--rand); flex-wrap: wrap; }
.fragenliste li:last-child { border-bottom: 0; }
.fragenliste li .titel { flex: 1 1 14rem; font-weight: 600; }

.zeitknoepfe { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; margin: 0.6rem 0; }
.zeitknoepfe .knopf { padding: 0.4rem 0.85rem; min-height: 2.25rem; font-size: 0.9rem; }

.warnung { color: var(--warn); font-size: 0.9rem; margin: 0.3rem 0; }

/* ---------- Beamer ---------- */

body.beamer {
  --bg: #07040f;
  --bg2: #120a2b;
  --text: #f6f2ff;
  --muted: #a99fc7;
  --glas-oben: rgba(255, 255, 255, 0.12);
  --glas-unten: rgba(255, 255, 255, 0.045);
  --glas-rand: rgba(255, 255, 255, 0.16);
  --glas-licht: rgba(255, 255, 255, 0.24);
  --karte-fest: #150e2e;
  --rand: rgba(255, 255, 255, 0.16);
  --akzent: #a78bfa;
  --akzent2: #f472b6;
  --akzent3: #fbbf24;
  --akzent-text: #140c2b;
  --schatten: 0 24px 60px -24px rgba(0, 0, 0, 0.8);
  --gitter: rgba(255, 255, 255, 0.045);
  --blase-licht: 0.55;
  font-size: clamp(16px, 1.45vw, 38px);
  height: 100vh;
  overflow: hidden;
}

body.beamer main { max-width: none; height: 100%; padding: 2vh 3vw; display: grid; grid-template-rows: auto 1fr; gap: 2vh; }

.beamer .oben { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.beamer .oben .links { display: flex; align-items: center; gap: 1.2rem; }

.beamer .marke {
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--akzent), var(--akzent2), var(--akzent3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.beamer .live { margin: 0; }

.beamer .buehne { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 3vw; min-height: 0; }
.beamer .buehne.allein { grid-template-columns: minmax(0, 1fr); }
.beamer .haupt { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; position: relative; }
.beamer .haupt > h1 { flex: none; font-size: clamp(2.2rem, 5.4vh, 4.2rem); margin-bottom: 0.4rem; text-shadow: 0 0 3rem color-mix(in srgb, var(--akzent) 45%, transparent); }
.beamer .haupt > .hinweis { flex: none; font-size: 1.05rem; margin: 0 0 1.2vh; }
.beamer .seite { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }

.beamer .qrkarte {
  background: #ffffff;
  color: #111;
  border-radius: 1.1rem;
  padding: 0.6rem;
  text-align: center;
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--akzent) 40%, transparent), 0 24px 60px -20px color-mix(in srgb, var(--akzent) 70%, transparent);
}

.beamer .qrkarte canvas { display: block; width: 12.5rem; height: auto; image-rendering: pixelated; border-radius: 0.5rem; }
.beamer .qrkarte .adresse { font-size: 0.72rem; font-weight: 800; word-break: break-all; padding: 0.3rem 0.2rem 0; }
.beamer .qrkarte.gross canvas { width: 24rem; }
.beamer .qrkarte.gross .adresse { font-size: 1rem; }

/* Bar-Chart-Race: die Balken liegen uebereinander und gleiten in ihre Rangfolge */
.beamer .rennen { position: relative; flex: 1; min-height: 0; margin: 0; }
.beamer .rennen .balken { position: absolute; left: 0; right: 0; top: 0; margin: 0; display: flex; flex-direction: column; justify-content: center; transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease; will-change: transform; }
.beamer .rennen .balken.abgeblendet { opacity: 0.42; }
.beamer .rennen:not(.bereit) .balken { transition: none; }
/* Eine festgehaltene Einblend-Animation wuerde die Verschiebung nach Rang ueberschreiben */
.beamer .rennen .balken { animation: none; }
.beamer .balken .kopf { font-size: clamp(1.3rem, 3.3vh, 2.5rem); gap: 0.9rem; }
.beamer .balken .kopf .buchstabe { width: 1.9em; height: 1.9em; font-size: 0.85em; border-radius: 0.55em; }
.beamer .balken .spur { height: clamp(1.7rem, 5vh, 3.6rem); margin-top: 0.5em; }
.beamer .balken.fuehrend .fuell { box-shadow: 0 0 2.4rem var(--farbe); }
.beamer .balken.sieger .kopf .text { font-size: 1.08em; }
.beamer .plus { font-size: 1.1rem; }

.beamer .texte { flex: 1; min-height: 0; overflow: hidden; align-content: start; grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); gap: 1.1rem; }
.beamer .texte li { font-size: clamp(1.4rem, 3.2vh, 2.2rem); padding: 1.1rem 1.3rem; min-height: 5rem; line-height: 1.3; }
.beamer .texte.wenige { grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap: 1.6rem; }
.beamer .texte.wenige li { font-size: clamp(2rem, 5.2vh, 3.6rem); padding: 1.6rem 1.8rem; min-height: 9rem; border-left-width: 0.6rem; }
.beamer .texte.mittel { grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr)); }
.beamer .texte.mittel li { font-size: clamp(1.6rem, 3.8vh, 2.6rem); min-height: 6.5rem; }
/* Verdeckt, bis die Moderation das Ergebnis zeigt: Antworten stehen da, Zahlen, Balken, Texte und Wolke nicht */
.beamer .ergebnis-folgt { display: none; }
.beamer .haupt.verdeckt .ergebnis-folgt { display: grid; place-items: center; flex: 1; font-size: clamp(2rem, 6vh, 4rem); font-weight: 800; color: var(--muted); animation: atmen 3.5s ease-in-out infinite; }
.beamer .haupt.verdeckt .balken .zahl, .beamer .haupt.verdeckt .balken .prozent { visibility: hidden; }
.beamer .haupt.verdeckt .texte, .beamer .haupt.verdeckt .wolke, .beamer .haupt.verdeckt .kennzahl-box { display: none; }
.beamer .ringbox.komplett .ring .fortschritt { stroke: #22c55e; filter: drop-shadow(0 0 8px #22c55e); }
.beamer .ringbox.komplett .klein { color: #4ade80; }

.beamer .mitte-bild { display: grid; place-items: center; height: 100%; text-align: center; gap: 1.5rem; align-content: center; }
.beamer .mitte-bild h1 { font-size: 3.6rem; animation: atmen 3.5s ease-in-out infinite; }

.beamer .ton-knopf {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 30;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid var(--glas-rand);
  background: linear-gradient(180deg, var(--glas-oben), var(--glas-unten));
  color: var(--text);
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.beamer .ton-knopf:hover, .beamer .ton-knopf[aria-pressed="true"] { opacity: 1; transform: scale(1.08); }

/* Gewinner-Enthuellung */
.sieger-buehne {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(10, 6, 28, 0.55), rgba(5, 3, 15, 0.9));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: einblenden 0.4s ease both;
}

.sieger-buehne.aus { animation: ausblenden 0.7s ease forwards; }

.sieger-karte {
  --farbe: var(--akzent);
  position: relative;
  text-align: center;
  padding: 3.2rem 4.4rem;
  border-radius: 2rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
  border: 2px solid color-mix(in srgb, var(--farbe) 70%, #fff);
  box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--farbe) 25%, transparent), 0 0 6rem color-mix(in srgb, var(--farbe) 70%, transparent);
  animation: siegerein 0.8s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
  max-width: 80vw;
}

.sieger-karte .krone-gross { font-size: 4.2rem; display: block; animation: kroneschwingen 1.8s ease-in-out infinite; }
.sieger-karte .etikett { font-size: 1.1rem; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); margin: 0.4rem 0 1rem; }
.sieger-karte .name { display: flex; align-items: center; justify-content: center; gap: 1.2rem; font-size: 3.4rem; font-weight: 900; line-height: 1.1; overflow-wrap: anywhere; }
.sieger-karte .name .buchstabe {
  flex: none;
  width: 1.5em;
  height: 1.5em;
  border-radius: 0.4em;
  display: grid;
  place-items: center;
  font-size: 0.8em;
  color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--farbe) 70%, #fff), var(--farbe) 55%, color-mix(in srgb, var(--farbe) 75%, #000));
  box-shadow: 0 0 2rem var(--farbe);
}
.sieger-karte .zahlen { margin-top: 1.2rem; font-size: 1.6rem; font-weight: 700; color: var(--muted); }
.sieger-karte .zahlen strong { color: var(--text); font-size: 1.15em; }

/* ---------- Kleine Bildschirme ---------- */

@media (max-width: 30rem) {
  html { font-size: 17px; }
  main { padding: 1.2rem 0.85rem 3rem; }
}

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

/* ================================================================================
   Fragen-Editor
   ================================================================================ */

body.editor-offen main { max-width: 76rem; }

@keyframes schubladerein {
  from { transform: translateX(100%); }
  to { transform: none; }
}

@keyframes leiste-hoch {
  from { opacity: 0; transform: translate(-50%, 140%); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- Reiter ---------- */

.reiter {
  display: flex;
  gap: 0.3rem;
  width: fit-content;
  max-width: 100%;
  margin: 0.4rem 0 1.1rem;
  padding: 0.3rem;
  border-radius: 1.1rem;
  background: linear-gradient(180deg, var(--glas-oben), var(--glas-unten));
  border: 1px solid var(--glas-rand);
  box-shadow: inset 0 1px 0 var(--glas-licht), var(--schatten);
}

.reiter-knopf {
  border: 0;
  background: transparent;
  padding: 0.55rem 1.2rem;
  border-radius: 0.8rem;
  font-weight: 800;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.reiter-knopf:hover { color: var(--text); }

.reiter-knopf[aria-selected="true"] {
  color: var(--akzent-text);
  background: linear-gradient(135deg, var(--akzent), color-mix(in srgb, var(--akzent) 45%, var(--akzent2)));
  box-shadow: 0 10px 22px -10px var(--akzent);
}

.reiter-knopf .symbol { margin-right: 0.35rem; }

/* ---------- Raster ---------- */

.editor-raster { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 1.3rem; align-items: start; animation: einblenden 0.4s ease both; }

@media (max-width: 56rem) {
  .editor-raster { grid-template-columns: minmax(0, 1fr); }
}

.knopf.klein { padding: 0.4rem 0.85rem; min-height: 2.25rem; font-size: 0.9rem; border-radius: 0.7rem; }

/* ---------- Satzliste ---------- */

.satzliste {
  position: sticky;
  top: 0.8rem;
  padding: 1rem;
  border-radius: 1.3rem;
  background: linear-gradient(180deg, var(--glas-oben), var(--glas-unten)) padding-box,
              linear-gradient(135deg, var(--glas-rand), transparent 55%) border-box;
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 var(--glas-licht), var(--schatten);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

.satzkopf { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.satzkopf h2 { margin: 0; font-size: 1rem; }
.werkzeuge { display: flex; gap: 0.4rem; }

.satzkarten { display: grid; gap: 0.5rem; }

.satzkarte {
  position: relative;
  display: grid;
  gap: 0.1rem;
  width: 100%;
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-radius: 1rem;
  border: 1.5px solid var(--glas-rand);
  background: color-mix(in srgb, var(--karte-fest) 55%, transparent);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.satzkarte:hover { transform: translateY(-2px); border-color: var(--akzent); }

.satzkarte.aktiv {
  border-color: transparent;
  background: linear-gradient(180deg, color-mix(in srgb, var(--akzent) 18%, var(--karte-fest)), color-mix(in srgb, var(--akzent2) 9%, var(--karte-fest))) padding-box,
              linear-gradient(135deg, var(--akzent), var(--akzent2)) border-box;
  box-shadow: 0 14px 30px -14px var(--akzent);
}

.satzkarte .name { font-weight: 800; overflow-wrap: anywhere; padding-right: 1rem; }
.satzkarte .meta { font-size: 0.78rem; color: var(--muted); overflow-wrap: anywhere; }
.punkt-ungespeichert { position: absolute; top: 0.6rem; right: 0.8rem; color: var(--akzent3); font-size: 0.8rem; animation: atmen 1.6s ease-in-out infinite; }

.hinweis-box {
  margin: 0 0 0.8rem;
  padding: 0.7rem 0.9rem;
  border-radius: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--akzent3) 60%, transparent);
  background: color-mix(in srgb, var(--akzent3) 12%, transparent);
  font-size: 0.88rem;
}

/* ---------- Detail ---------- */

.detail-kopf { margin-top: 0; }

.satztitel {
  width: 100%;
  padding: 0.3rem 0;
  font-size: clamp(1.3rem, 3.4vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--rand);
  border-radius: 0;
  transition: border-color 0.2s ease;
}

.satztitel:focus { outline: none; border-bottom-color: var(--akzent); }

.aktionen-zeile { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.8rem; }

.fragenkarten { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 0.7rem; }

.frage-karte {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.85rem 1rem;
  border-radius: 1.1rem;
  background: linear-gradient(180deg, var(--glas-oben), var(--glas-unten));
  border: 1px solid var(--glas-rand);
  box-shadow: inset 0 1px 0 var(--glas-licht), var(--schatten);
  cursor: grab;
  animation: poppen 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
  transition: box-shadow 0.15s ease, opacity 0.15s ease;
}

.frage-karte:hover { border-color: color-mix(in srgb, var(--akzent) 60%, var(--glas-rand)); }
.frage-karte.zieht { opacity: 0.35; }
.frage-karte.ziel-oben { box-shadow: 0 -5px 0 0 var(--akzent), var(--schatten); }
.frage-karte.ziel-unten { box-shadow: 0 5px 0 0 var(--akzent), var(--schatten); }

.frage-karte .griff { color: var(--muted); font-size: 1.2rem; line-height: 1; letter-spacing: -0.1em; }

.frage-karte .nummer {
  width: 2rem;
  height: 2rem;
  border-radius: 0.65rem;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: var(--akzent-text);
  background: linear-gradient(135deg, var(--akzent), var(--akzent2));
  box-shadow: 0 8px 16px -8px var(--akzent);
}

.frage-karte .inhalt { min-width: 0; }
.frage-karte .titel { font-weight: 700; overflow-wrap: anywhere; }
.frage-karte .meta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; align-items: center; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 16rem;
  padding: 0.1rem 0.6rem 0.1rem 0.15rem;
  border-radius: 2rem;
  border: 1px solid var(--glas-rand);
  background: color-mix(in srgb, var(--karte-fest) 60%, transparent);
  font-size: 0.78rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.chip.mehr { padding-left: 0.6rem; color: var(--muted); }

.mini-buchstabe {
  --farbe: var(--akzent);
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 0.45rem;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--farbe) 70%, #fff), var(--farbe) 55%, color-mix(in srgb, var(--farbe) 75%, #000));
  box-shadow: 0 4px 10px -4px var(--farbe);
}

.mini-buchstabe.gross { width: 2rem; height: 2rem; border-radius: 0.6rem; font-size: 0.9rem; }

.frage-aktionen { display: flex; gap: 0.25rem; flex-wrap: wrap; justify-content: flex-end; }

.ikon {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.65rem;
  border: 1px solid var(--glas-rand);
  background: color-mix(in srgb, var(--karte-fest) 60%, transparent);
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ikon:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--akzent); }
.ikon.start { color: var(--gut); border-color: color-mix(in srgb, var(--gut) 55%, transparent); }
.ikon.start:hover:not(:disabled) { background: color-mix(in srgb, var(--gut) 20%, transparent); }
.ikon.gefahr:hover:not(:disabled) { color: var(--warn); border-color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.ikon:disabled { opacity: 0.4; cursor: default; }

@media (max-width: 40rem) {
  .frage-karte { grid-template-columns: auto minmax(0, 1fr); }
  .frage-karte .griff { display: none; }
  .frage-aktionen { grid-column: 1 / -1; justify-content: flex-start; }
}

.knopf.frage-neu {
  width: 100%;
  min-height: 3.4rem;
  background: transparent;
  color: var(--akzent);
  border: 2px dashed color-mix(in srgb, var(--akzent) 55%, transparent);
  box-shadow: none;
  font-size: 1rem;
}

.knopf.frage-neu:hover:not(:disabled) { background: color-mix(in srgb, var(--akzent) 10%, transparent); transform: none; filter: none; border-color: var(--akzent); }

.leer-zustand { text-align: center; padding: 3rem 1rem; }
.leer-zustand.klein { padding: 1.4rem 1rem; }
.leer-zustand .emoji { font-size: 3rem; animation: atmen 3s ease-in-out infinite; }
.leer-zustand h2, .leer-zustand h3 { margin: 0.6rem 0 0.2rem; }

/* ---------- Speicherleiste ---------- */

.speicherleiste {
  position: fixed;
  left: 50%;
  bottom: 1.1rem;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem 0.55rem 1.1rem;
  border-radius: 1.2rem;
  background: linear-gradient(180deg, var(--karte-fest), color-mix(in srgb, var(--karte-fest) 90%, var(--akzent)));
  border: 1px solid var(--akzent);
  box-shadow: 0 20px 50px -14px rgba(0, 0, 0, 0.6), 0 0 0 4px color-mix(in srgb, var(--akzent) 22%, transparent);
  opacity: 0;
  transform: translate(-50%, 160%);
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.3s ease;
}

.speicherleiste.sichtbar { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.speicherleiste .leiste-text { font-weight: 800; color: var(--akzent3); white-space: nowrap; }

@media (max-width: 36rem) {
  .speicherleiste .leiste-text { display: none; }
}

/* ---------- Schublade ---------- */

.schublade-huelle { position: fixed; inset: 0; z-index: 40; display: flex; justify-content: flex-end; }

.schublade-hintergrund {
  position: absolute;
  inset: 0;
  background: rgba(5, 3, 15, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: einblenden 0.25s ease both;
}

.schublade {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(62rem, 100%);
  height: 100%;
  background: linear-gradient(180deg, var(--karte-fest), color-mix(in srgb, var(--karte-fest) 92%, var(--akzent)));
  border-left: 1px solid var(--glas-rand);
  box-shadow: -30px 0 80px -30px rgba(0, 0, 0, 0.7);
  animation: schubladerein 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.schublade-kopf { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.4rem 0.4rem; }
.schublade-kopf h2 { margin: 0; }

.schublade-inhalt {
  flex: 1;
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: 1.6rem;
  padding: 0 1.4rem 1.2rem;
}

@media (max-width: 52rem) {
  .schublade-inhalt { grid-template-columns: minmax(0, 1fr); }
}

.schublade-fuss { display: flex; justify-content: flex-end; gap: 0.6rem; padding: 0.9rem 1.4rem calc(0.9rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--rand); }

.feld-label { font-weight: 800; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 1.1rem 0 0.6rem; }
.formular .feld-label:first-child { margin-top: 0.4rem; }

.frage-titel { min-height: 5rem; font-size: 1.05rem; font-weight: 600; }
.zaehler { text-align: right; font-size: 0.8rem; color: var(--muted); margin-top: 0.2rem; font-variant-numeric: tabular-nums; }
.zaehler.zu-lang { color: var(--warn); font-weight: 800; }

.art-gruppe { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }

.art-knopf {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "symbol name" "symbol hilfe";
  column-gap: 0.7rem;
  align-items: center;
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-radius: 1rem;
  border: 1.5px solid var(--glas-rand);
  background: color-mix(in srgb, var(--karte-fest) 55%, transparent);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}

.art-knopf:hover { transform: translateY(-2px); border-color: var(--akzent); }
.art-knopf .art-symbol { grid-area: symbol; font-size: 1.5rem; color: var(--akzent); }
.art-knopf .art-name { grid-area: name; font-weight: 800; }
.art-knopf .art-hilfe { grid-area: hilfe; font-size: 0.78rem; color: var(--muted); }

.art-knopf[aria-checked="true"] {
  border-color: var(--akzent);
  background: color-mix(in srgb, var(--akzent) 16%, var(--karte-fest));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 28%, transparent);
}

.optionszeile { display: flex; align-items: center; gap: 0.5rem; margin: 0.45rem 0; animation: einblenden 0.25s ease both; }
.optionszeile .option-eingabe { flex: 1; min-width: 0; }
.optionswerkzeuge { display: flex; gap: 0.2rem; }
.optionswerkzeuge .ikon { width: 1.9rem; height: 1.9rem; font-size: 0.8rem; }
.optionen-bereich .knopf.klein { margin-top: 0.4rem; }

.fehler-liste { list-style: none; padding: 0; margin: 0.9rem 0 0; display: grid; gap: 0.3rem; }
.fehler-zeile { color: var(--warn); font-size: 0.9rem; font-weight: 600; }
.fehler-zeile::before { content: "⚠ "; }
.hinweis-zeile { color: var(--muted); font-size: 0.88rem; }

/* ---------- Vorschau im Handy ---------- */

.vorschau { align-self: start; position: sticky; top: 0; }
.vorschau .feld-label { text-align: center; margin-top: 0.4rem; }

.telefon {
  position: relative;
  width: 100%;
  max-width: 18.5rem;
  margin: 0.5rem auto 0;
  border-radius: 2.2rem;
  border: 0.6rem solid #1b1633;
  background: linear-gradient(160deg, var(--bg), var(--bg2));
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.telefon-kerbe { width: 36%; height: 1rem; margin: 0 auto; background: #1b1633; border-radius: 0 0 0.9rem 0.9rem; }
.telefon-inhalt { padding: 0.7rem 0.9rem 1.4rem; min-height: 25rem; font-size: 0.8rem; }
.telefon h1 { font-size: 1.12rem; margin: 0 0 0.8rem; animation: none; }
.telefon h1.leer { opacity: 0.45; }
.telefon .live { font-size: 0.6rem; margin-bottom: 0.5rem; }
.telefon .optionen { gap: 0.55rem; margin: 0.8rem 0; }
.telefon .option { min-height: 2.8rem; padding: 0.45rem 0.65rem; gap: 0.6rem; border-radius: 0.9rem; animation: none; pointer-events: none; }
.telefon .option .buchstabe { width: 1.9rem; height: 1.9rem; border-radius: 0.6rem; font-size: 0.85rem; }
.telefon .option .haken { display: none; }
.telefon .option.platzhalter { opacity: 0.5; }
.telefon textarea { min-height: 6rem; font-size: 0.85rem; }

/* ---------- Hinweise (Toasts) ---------- */

.toasts { position: fixed; left: 50%; bottom: 5.4rem; z-index: 70; display: grid; gap: 0.5rem; width: min(28rem, calc(100% - 2rem)); transform: translateX(-50%); pointer-events: none; }

.toast {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75rem 1rem;
  border-radius: 0.95rem;
  background: var(--karte-fest);
  border: 1px solid var(--glas-rand);
  box-shadow: var(--schatten), 0 0 0 3px color-mix(in srgb, var(--akzent) 14%, transparent);
  animation: poppen 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
  pointer-events: auto;
}

.toast .text { flex: 1; font-weight: 600; }
.toast.gut { border-color: var(--gut); }
.toast.fehler { border-color: var(--warn); }
.toast.warn { border-color: var(--akzent3); }
.toast-knopf { border: 0; background: transparent; color: var(--akzent); font-weight: 800; cursor: pointer; padding: 0.2rem 0.4rem; }
.toast-knopf:hover { text-decoration: underline; }

.spontan-speichern { margin-top: 0.8rem; }

/* Das hidden-Attribut gilt immer, auch fuer Elemente mit eigenem display (zum Beispiel .zeile) */
[hidden] { display: none !important; }

/* ---- Weitere Fragetypen: Ja/Nein, Skala, NPS, Kennzahlen, Wortwolke ------------------------------------- */
.optionen.janein { grid-template-columns: 1fr 1fr; }
.optionen.janein .option { min-height: 6.5rem; justify-content: center; text-align: center; font-size: 1.6rem; font-weight: 800; }
.optionen.janein .option .haken { position: absolute; top: 0.6rem; right: 0.8rem; }

.skala-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(3.4rem, 1fr)); gap: 0.55rem; margin: 1.2rem 0 0.4rem; }
.skala-reihe.dicht { grid-template-columns: repeat(auto-fit, minmax(2.5rem, 1fr)); gap: 0.4rem; }
.skala-knopf {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 3.6rem; padding: 0.4rem; font-size: 1.35rem; font-weight: 800; color: var(--text); cursor: pointer;
  background: linear-gradient(180deg, var(--glas-oben), var(--glas-unten)) padding-box,
              linear-gradient(135deg, var(--glas-rand), transparent 60%) border-box;
  border: 1.5px solid transparent; border-radius: 1rem;
  box-shadow: inset 0 1px 0 var(--glas-licht), var(--schatten);
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease, background 0.3s ease, color 0.2s ease;
  animation: poppen 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.skala-knopf:hover:not(:disabled) { transform: translateY(-3px) scale(1.04); }
.skala-knopf:active:not(:disabled) { transform: scale(0.94); }
.skala-knopf:disabled { opacity: 0.55; cursor: default; }
.skala-knopf[aria-pressed="true"] { background: linear-gradient(135deg, #7c3aed, #c026d3); color: #fff; border-color: transparent; transform: scale(1.08); box-shadow: 0 0 1.6rem -0.2rem #a855f7; }
.skala-knopf.puls { animation: puls 0.5s ease; }
.skala-enden { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: 0.95rem; margin: 0.2rem 0.2rem 1rem; }

.kennzahl-reihe { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 0.6rem 0 1rem; align-items: stretch; }
.kennzahl, .kennzahl-reihe .gruppe {
  display: flex; flex-direction: column; justify-content: center; padding: 0.7rem 1.2rem; border-radius: 1.1rem;
  background: linear-gradient(180deg, var(--glas-oben), var(--glas-unten)); border: 1px solid var(--rand);
  box-shadow: inset 0 1px 0 var(--glas-licht), var(--schatten);
}
.kennzahl .etikett { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.kennzahl .wert { font-size: 2.6rem; line-height: 1.05; font-variant-numeric: tabular-nums; background: linear-gradient(135deg, #7c3aed, #db2777); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kennzahl.gut .wert { background: linear-gradient(135deg, #16a34a, #0ea5e9); -webkit-background-clip: text; background-clip: text; }
.kennzahl.schlecht .wert { background: linear-gradient(135deg, #dc2626, #f97316); -webkit-background-clip: text; background-clip: text; }
.kennzahl-reihe .gruppe strong { font-size: 1.8rem; font-variant-numeric: tabular-nums; }
.kennzahl-reihe .gruppe span { font-size: 0.85rem; color: var(--muted); }
.kennzahl-reihe .gruppe.kritiker strong { color: #dc2626; }
.kennzahl-reihe .gruppe.passive strong { color: #d97706; }
.kennzahl-reihe .gruppe.promotoren strong { color: #16a34a; }

.wolke { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.2rem 1rem; padding: 1rem 0.5rem; min-height: 8rem; line-height: 1.1; }
.wolke .wort { color: var(--farbe, var(--akzent)); font-weight: 800; transition: font-size 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); animation: poppen 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; overflow-wrap: anywhere; max-width: 100%; }
.wolke.leer::after { content: "Noch keine Wörter"; color: var(--muted); font-size: 1.1rem; }
.beamer .wolke.gross { flex: 1; min-height: 0; overflow: hidden; align-content: center; gap: 0.4rem 2.2rem; }
.beamer .kennzahl-box:empty { display: none; }
.beamer .kennzahl-box { flex: none; }
.beamer .kennzahl .wert { font-size: clamp(3rem, 8vh, 6rem); }
.beamer .kennzahl-reihe .gruppe strong { font-size: clamp(2rem, 5vh, 3.4rem); }
@media (prefers-reduced-motion: reduce) { .wolke .wort, .skala-knopf { animation: none; transition: none; } }

/* Editor: Einstellungen der Skala */
.skala-bereich { margin-top: 0.4rem; }
.skala-zeile { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.4rem; }
.skala-zeile .feld-label { margin: 0.2rem 0; flex: 1 0 100%; }
.skala-zeile.zwei input { flex: 1 1 10rem; }
.telefon .skala-knopf.vorschau-skala { min-height: 2.6rem; font-size: 1rem; pointer-events: none; animation: none; }
.telefon .skala-reihe { grid-template-columns: repeat(auto-fit, minmax(1.9rem, 1fr)); gap: 0.3rem; }
.telefon .optionen.janein .option { min-height: 4rem; font-size: 1.2rem; }

/* Viele Optionen (Skala bis 10, NPS, lange Mehrfachauswahl): kompaktere Balken, damit die Fuellung sichtbar bleibt */
.beamer .rennen.viele .balken .kopf { font-size: clamp(0.95rem, 2.5vh, 1.7rem); gap: 0.7rem; }
.beamer .rennen.viele .balken .spur { height: clamp(0.8rem, 2.4vh, 1.7rem); margin-top: 0.15em; }
.beamer .rennen.viele .balken .kopf .buchstabe { font-size: 0.7em; }

/* ---- Einbettung (/embed), Tastenhilfe und Fernbedienung ----------------------------------------------- */
body.embed .oben { display: none; }
body.embed .seite { display: none; }
body.embed .buehne, body.embed .buehne.allein { grid-template-columns: 1fr; }
body.embed main { padding: 1.5vh 2vw; grid-template-rows: 1fr; }
body.embed .qrkarte { display: none; }
body.embed .ton-knopf { display: none; }
body.embed.transparent, body.embed.transparent main { background: transparent; }
body.embed.transparent .blasen, body.embed.transparent .gitter, body.embed.transparent .sterne { display: none; }

.tasten-hilfe { position: fixed; left: 1.2rem; bottom: 1.2rem; z-index: 50; padding: 0.9rem 1.1rem; border-radius: 1rem; background: rgba(15, 10, 35, 0.88); color: #fff; font-size: 0.95rem; display: grid; gap: 0.35rem; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }
.tasten-hilfe kbd { display: inline-block; min-width: 2rem; padding: 0.1rem 0.5rem; margin-right: 0.3rem; border-radius: 0.4rem; background: rgba(255, 255, 255, 0.16); font: inherit; font-weight: 800; }

.fernbedienung main { max-width: 30rem; }
.fb-reihe { display: grid; grid-template-columns: 1fr 1.6fr; gap: 0.8rem; margin: 0.8rem 0; }
.fb-reihe.drei { grid-template-columns: 1fr 1fr 1fr; }
.fb-knopf {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; min-height: 6.5rem;
  font-size: 1.25rem; font-weight: 800; color: var(--text); cursor: pointer;
  background: linear-gradient(180deg, var(--glas-oben), var(--glas-unten)) padding-box, linear-gradient(135deg, var(--glas-rand), transparent 60%) border-box;
  border: 1.5px solid transparent; border-radius: 1.4rem; box-shadow: inset 0 1px 0 var(--glas-licht), var(--schatten);
  touch-action: manipulation; transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.fb-knopf:active:not(:disabled) { transform: scale(0.95); }
.fb-knopf:disabled { opacity: 0.4; }
.fb-knopf .fb-symbol { font-size: 1.8rem; }
.fb-knopf.gross { min-height: 9rem; background: linear-gradient(135deg, #7c3aed, #c026d3); color: #fff; box-shadow: 0 14px 34px -12px #a855f7; }
.fb-knopf.breit { width: 100%; min-height: 5rem; flex-direction: row; margin-bottom: 0.8rem; }
.fb-knopf.klein { min-height: 4rem; font-size: 1rem; }
.fb-knopf.gefahr { color: var(--warn); }

/* Einbettung auf heller Folie (?hell=1): dunkle Schrift, dunkle Balkenspur */
body.embed.hell { color: #1b1233; --text: #1b1233; --muted: #62588a; }
body.embed.hell .haupt > h1 { color: #1b1233; text-shadow: none; }
body.embed.hell .haupt > .hinweis, body.embed.hell .balken .prozent { color: #62588a; }
body.embed.hell .balken .kopf, body.embed.hell .balken .zahl, body.embed.hell .balken .text { color: #1b1233; }
body.embed.hell .balken .spur { background: rgba(80, 50, 160, 0.14); border-color: rgba(80, 50, 160, 0.2); }
body.embed.hell .kennzahl, body.embed.hell .kennzahl-reihe .gruppe { color: #1b1233; }
body.embed.hell .wolke .wort { filter: saturate(0.9) brightness(0.85); }
body.embed.hell .texte li { color: #1b1233; background: rgba(255, 255, 255, 0.7); }

/* ---- Fragebogen ------------------------------------------------------------------------------------------- */
.fragebogen main { max-width: 42rem; padding-bottom: 6rem; }
.fragebogen .fliess { font-size: 1.1rem; line-height: 1.55; margin: 0.4rem 0 1rem; }
.frage-block { margin: 1rem 0; scroll-margin-top: 5rem; transition: box-shadow 0.25s ease; }
.frage-kopf { display: flex; align-items: flex-start; gap: 0.8rem; margin-bottom: 0.6rem; }
.frage-kopf h2 { margin: 0; font-size: 1.2rem; flex: 1; line-height: 1.3; }
.frage-nummer { flex: none; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 0.6rem; background: linear-gradient(135deg, #7c3aed, #c026d3); color: #fff; font-weight: 800; font-size: 0.95rem; }
.pflicht { flex: none; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--warn); border: 1px solid currentColor; border-radius: 99rem; padding: 0.1rem 0.55rem; }
.frage-fehler { display: none; color: var(--warn); font-weight: 700; margin-top: 0.5rem; }
.frage-block.fehlt { box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 60%, transparent); }
.frage-block.fehlt .frage-fehler { display: block; }
.knopf.gross { width: 100%; min-height: 3.6rem; font-size: 1.2rem; margin-top: 0.8rem; }
.fortschritt-leiste { position: sticky; top: 0; z-index: 20; }
.fragebogen .optionen { margin: 0.6rem 0; }

.chip.status-offen { color: #15803d; border-color: #15803d; }
.chip.status-noch_nicht { color: #b45309; border-color: #b45309; }
.chip.status-beendet, .chip.status-geschlossen { color: var(--muted); }
.fenster-zeile { align-items: center; }
.pflicht-zeile { display: flex; align-items: center; gap: 0.5rem; margin: 0.8rem 0; cursor: pointer; }
.pflicht-badge { color: var(--warn); border-color: var(--warn); }

/* ---------- Moderation: Raumkopf, Teilnehmen, zwei Spalten, Hauptknopf ---------- */

body.moderation main { max-width: 72rem; }
.raumkopf { align-items: flex-start; }
.raumtitel h1 { margin: 0.1rem 0; overflow-wrap: anywhere; }
.raumtitel .hinweis { margin: 0.1rem 0 0; }
.zurueck { display: inline-block; font-size: 0.9rem; color: var(--muted); text-decoration: none; margin-bottom: 0.2rem; }
.zurueck:hover { color: var(--text); text-decoration: underline; }

.teilnehmen { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.3rem; align-items: start; }
.teilnehmen-qr { background: #fff; padding: 0.6rem; border-radius: 0.9rem; box-shadow: 0 0.25rem 1.1rem rgba(0, 0, 0, 0.14); line-height: 0; }
.teilnehmen-qr canvas { display: block; width: 9.5rem; height: auto; image-rendering: pixelated; }
.teilnehmen-text h2 { margin-top: 0; }
.adresse-gross { font-size: 1.05rem; font-weight: 700; }
.codezeile { margin: 0.1rem 0 0.7rem; color: var(--muted); }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.7rem; letter-spacing: 0.16em; color: var(--text); margin-left: 0.4rem; }
.ansichten .knopf { text-decoration: none; display: inline-flex; align-items: center; }
.klein-details { margin-top: 0.6rem; }
.klein-details > summary, .mehr > summary, .erweitert > summary { cursor: pointer; color: var(--muted); font-size: 0.92rem; font-weight: 600; }
.klein-details > summary:hover, .mehr > summary:hover, .erweitert > summary:hover { color: var(--text); }
.erweitert > summary { font-size: 1rem; color: var(--text); font-weight: 700; }
.erweitert[open] > summary { margin-bottom: 0.8rem; }
.erweitert section + section { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--rand); }
.erweitert h2 { font-size: 1.05rem; }
.hinweis-karte { border-left: 4px solid var(--warn); }

.moderation-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-areas: "fragen aktiv"; gap: 0 1.2rem; align-items: start; }
.spalte-fragen { grid-area: fragen; min-width: 0; display: flex; flex-direction: column; }
.spalte-fragen #fragen-karte { order: 1; }
.spalte-fragen #eigene-karte { order: 2; }
body.einfach .spalte-fragen #eigene-karte { order: 1; }
body.einfach .spalte-fragen #fragen-karte { order: 2; }
.spalte-aktiv { grid-area: aktiv; min-width: 0; position: sticky; top: 0.8rem; }
.aktiv-karte { margin-top: 1rem; }
.frage-titel { font-size: 1.15rem; overflow-wrap: anywhere; }
.hauptreihe { margin: 0.8rem 0; }
.hauptreihe .haupt { font-size: 1.1rem; font-weight: 800; padding: 0.8rem 1.5rem; min-height: 3rem; }
.hinweis.leer { margin: 0.4rem 0 0.8rem; }
.mehr { margin: 0.6rem 0; }
.fragenliste li.laeuft { background: rgba(34, 197, 94, 0.1); border-radius: 0.6rem; padding-left: 0.6rem; padding-right: 0.4rem; }
/* Schon gestellte Fragen treten zurueck, bleiben aber startbar */
.fragenliste li.gestellt .titel { color: var(--muted); }
.badge.gestellt { color: var(--muted); }
.sichtzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin: 0.4rem 0; }
.sichtzeile .hinweis { margin: 0; }
.schalter { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; cursor: pointer; }

/* Art der eigenen Frage als Knoepfe; das Auswahlfeld bleibt fuer Tastatur und Vorlesegeraete, ist aber unsichtbar */
.artwahl { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0; }
.chip-knopf {
  font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; color: var(--text);
  padding: 0.4rem 0.85rem; border-radius: 999px; background: transparent; border: 1px solid var(--rand);
}
.chip-knopf:hover { border-color: var(--muted); }
.chip-knopf[aria-pressed="true"] { background: linear-gradient(135deg, #7c3aed, #c026d3); color: #fff; border-color: transparent; }
.moderation .zeile:has(> #neu-typ) { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); }

/* Schnellumfrage: eine einfachere Ansicht. Frage stellen steht oben, die Fragensaetze nur, wenn es welche gibt */
body.einfach main { max-width: 56rem; }
body.einfach .moderation-raster { grid-template-columns: 1fr; grid-template-areas: "aktiv" "fragen"; }
body.einfach .spalte-aktiv { position: static; }

@media (max-width: 62rem) {
  .moderation-raster { grid-template-columns: 1fr; grid-template-areas: "aktiv" "fragen"; }
  .spalte-aktiv { position: static; }
}
@media (max-width: 36rem) {
  /* Auf dem Handy steuert man; der QR-Code ist klein und die Erklaerung entfaellt, die Steuerung soll zuerst sichtbar sein */
  .teilnehmen { grid-template-columns: auto minmax(0, 1fr); gap: 0.7rem; padding: 0.9rem; }
  .teilnehmen-qr { padding: 0.4rem; }
  .teilnehmen-qr canvas { width: 6.2rem; }
  .teilnehmen-text > .hinweis:first-of-type { display: none; }
  .teilnehmen-text h2 { font-size: 1.05rem; }
  .adresse-gross { font-size: 0.9rem; }
  .code { font-size: 1.3rem; }
  .hauptreihe .haupt { width: 100%; justify-content: center; }
  /* Reihenfolge auf dem Handy: Moderationslink, Steuerung, dann Teilnehmen */
  #steuerung { display: flex; flex-direction: column; }
  #steuerung > #raum-karte { order: 0; }
  #steuerung > .reiter { order: 1; }
  #steuerung > #live-panel, #steuerung > #editor { order: 2; }
  #steuerung > #teilnehmen { order: 3; }
}

/* Konto: Adresse der Befragung zum Kopieren, QR-Code auf Knopfdruck */
.teilnehmen-zeile { align-items: center; }
.code-klein { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.1em; }
.adresse-klein { font-size: 0.92rem; min-width: 12rem; }
.qr-klein { background: #fff; display: inline-block; padding: 0.5rem; border-radius: 0.8rem; margin: 0.2rem 0 0.4rem; line-height: 0; box-shadow: 0 0.2rem 0.9rem rgba(0, 0, 0, 0.14); }
.qr-klein canvas { width: 9rem; height: auto; image-rendering: pixelated; display: block; }
.zeitknoepfe .schmal { flex: 0 0 5.5rem; width: 5.5rem; min-height: 2.25rem; padding: 0.3rem 0.6rem; }