/* Frag ZOK: Glaskugel mit wirbelndem Nebel auf einem Sockel, Antwort taucht aus der Tiefe auf. */

.buehne-frage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 6px 12px 10px;
}

.frage-zeile { position: relative; width: min(100%, 560px); }
/* Mikrofon rechts im Feld (A.9.1.0): gesprochene Frage ⇒ ZOK antwortet gleich. */
.frage-mikro { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); }
.kann-sprechen .frage-feld { padding-right: 56px; }
.frage-feld {
  width: 100%;
  min-height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 8px 24px rgba(80, 60, 160, .12);
  font-size: 1.05rem;
  font-weight: 550;
  text-align: center;
}
.frage-feld:focus { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* ---------- Kugel ---------- */
.kugel-platz {
  --k: min(78vw, 100dvh - 380px, 400px);
  position: relative;
  width: var(--k);
  min-width: 220px;
  aspect-ratio: 1;
  margin-bottom: calc(var(--k) * .08);
}
.kugel {
  --glut: #a78bfa;
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  /* tiefes Glas: innen dunkel, zum Rand violett, Licht von oben */
  background:
    radial-gradient(circle at 50% 55%, #1a1446 0 38%, #2c2178 62%, #5b3fc4 86%, #a78bfa 100%);
  box-shadow:
    inset 0 -18px 40px rgba(10, 4, 40, .55),
    inset 0 10px 30px rgba(255, 255, 255, .18),
    0 0 0 2px rgba(255, 255, 255, .35),
    0 26px 60px rgba(60, 40, 160, .35),
    0 0 60px 6px color-mix(in oklab, var(--glut) 35%, transparent);
  transition: box-shadow .6s ease;
  -webkit-tap-highlight-color: transparent;
}
.kugel:focus-visible { outline: 3px solid var(--akzent); outline-offset: 6px; }
.kugel[data-art="ja"] { --glut: #34d399; }
.kugel[data-art="nein"] { --glut: #f472b6; }
.kugel[data-art="vielleicht"] { --glut: #a78bfa; }

/* Nebel: drei weiche Farbwolken, die langsam kreisen (beim Fragen schnell) */
.nebel {
  position: absolute;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  filter: blur(22px);
  opacity: .55;
  mix-blend-mode: screen;
  animation: nebel-kreist 14s linear infinite;
  pointer-events: none;
}
.n1 { background: #ec4899; left: 5%; top: 18%; transform-origin: 65% 40%; }
.n2 { background: #22d3ee; left: 28%; top: 26%; transform-origin: 30% 55%; animation-duration: 19s; animation-direction: reverse; opacity: .4; }
.n3 { background: var(--glut); left: 18%; top: 34%; transform-origin: 55% 30%; animation-duration: 11s; opacity: .5; transition: background .6s ease; }
@keyframes nebel-kreist { to { rotate: 360deg; } }
.kugel.wackelt .nebel { animation-duration: 1.1s; opacity: .8; }

/* Funkeln im Glas */
.funken {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1.5px 1.5px at 30% 40%, #fff 90%, transparent),
    radial-gradient(1px 1px at 62% 30%, #fff 90%, transparent),
    radial-gradient(1.5px 1.5px at 70% 66%, #fff 90%, transparent),
    radial-gradient(1px 1px at 40% 72%, #fff 90%, transparent),
    radial-gradient(1px 1px at 52% 52%, #fff 90%, transparent);
  opacity: .7;
  animation: funkeln 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes funkeln { 50% { opacity: .25; } }

/* Antwortfenster: ein dunkler Kreis in der Mitte, die Schrift leuchtet */
.antwort {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10, 6, 34, .82) 0 55%, rgba(10, 6, 34, .35) 75%, transparent 76%);
  pointer-events: none;
}
.antwort-text {
  max-width: 82%;
  color: #fff;
  font-family: var(--schrift-titel);
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
  text-shadow: 0 0 18px color-mix(in oklab, var(--glut) 85%, transparent), 0 0 4px rgba(255, 255, 255, .6);
}
.antwort-text[data-groesse="xl"] { font-size: calc(var(--k) * .13); }
.antwort-text[data-groesse="l"] { font-size: calc(var(--k) * .085); }
.antwort-text[data-groesse="m"] { font-size: calc(var(--k) * .062); }
.antwort-text[data-groesse="s"] { font-size: calc(var(--k) * .05); }
.antwort-text.auftauchen { animation: auftauchen .9s cubic-bezier(.2, .8, .3, 1); }
@keyframes auftauchen {
  from { opacity: 0; filter: blur(10px); scale: .55; }
  60% { opacity: 1; filter: blur(0); }
  to { scale: 1; }
}

/* Glanzlicht oben links + Spiegelung unten */
.glanz {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 34% 20% at 34% 20%, rgba(255, 255, 255, .55), transparent 70%),
    radial-gradient(ellipse 50% 12% at 50% 90%, rgba(255, 255, 255, .14), transparent 70%);
  pointer-events: none;
}

/* Wackeln beim Fragen */
.kugel.wackelt { animation: wackeln 1.1s cubic-bezier(.36, .07, .19, .97); }
@keyframes wackeln {
  10%, 90% { translate: -3px 0; rotate: -1deg; }
  20%, 80% { translate: 6px 0; rotate: 2deg; }
  30%, 50%, 70% { translate: -10px 0; rotate: -3deg; }
  40%, 60% { translate: 10px 0; rotate: 3deg; }
}

/* Sockel aus dunklem Glas */
.sockel {
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: -9%;
  height: 16%;
  border-radius: 50% 50% 18% 18% / 60% 60% 30% 30%;
  background: linear-gradient(180deg, #4b3aa8, #221a5c 60%, #140f3c);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .25), 0 18px 30px rgba(40, 20, 120, .35);
}

.frag-knopf {
  min-width: min(80vw, 300px);
  min-height: 60px;
  font-size: 1.3rem;
  font-weight: 650;
  letter-spacing: -.01em;
}
.frage-hinweis { margin: 0; font-weight: 550; color: var(--tusche-weich); text-align: center; }

/* ---------- Verlauf ---------- */
.frage-verlauf { width: min(100%, 560px); display: grid; gap: 6px; justify-items: center; }
.frage-verlauf[hidden] { display: none; }
.frage-verlauf ol { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 6px; }
.frage-verlauf li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  align-items: baseline;
  gap: 12px;
  padding: 8px 14px;
  border-radius: 14px;
  background: var(--flaeche);
  box-shadow: var(--schatten-klein);
  border-left: 4px solid var(--art, #a78bfa);
}
.frage-verlauf li[data-art="ja"] { --art: #34d399; }
.frage-verlauf li[data-art="nein"] { --art: #f472b6; }
.v-frage { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tusche-weich); font-weight: 500; }
.frage-verlauf strong { max-width: 15em; text-align: right; font-weight: 650; text-wrap: balance; overflow-wrap: anywhere; }

/* ---------- Werkbank ---------- */
.satz-wahl { display: grid; gap: 8px; }
.satz-wahl button {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 0;
  border-radius: 16px;
  background: var(--flaeche);
  box-shadow: var(--schatten-klein);
  text-align: left;
  cursor: pointer;
}
.satz-wahl small { color: var(--tusche-weich); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.satz-wahl button[aria-pressed="true"] { background: var(--verlauf); color: #fff; }
.satz-wahl button[aria-pressed="true"] small { color: rgba(255, 255, 255, .85); }
.antwort-liste { list-style: none; margin: 10px 0 14px; padding: 0; display: grid; gap: 8px; }
.antwort-liste li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.antwort-liste .feld-text { grid-area: auto; }
.art-schild {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  font-weight: 650;
  font-size: .85rem;
  cursor: pointer;
  background: rgba(167, 139, 250, .2);
  color: #5b21b6;
}
.art-schild[data-art="ja"] { background: rgba(52, 211, 153, .22); color: #047857; }
.art-schild[data-art="nein"] { background: rgba(244, 114, 182, .22); color: #9d174d; }

@media (min-width: 980px) {
  .kugel-platz { --k: min(100vw - 560px, 100dvh - 330px, 440px); }
}
@media (prefers-reduced-motion: reduce) {
  .nebel, .funken, .kugel.wackelt, .antwort-text.auftauchen { animation: none; }
}

/* Handy quer (A.14.4.0): Kugel links, Frage, Knopf und Verlauf rechts — vorher lag „ZOK fragen“ unter dem Rand. */
@media (orientation: landscape) and (max-height: 540px) and (min-width: 480px) {
  .buehne-frage {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 1fr repeat(4, auto) 1fr;
    align-items: center;
    justify-items: center;
    column-gap: 28px;
    row-gap: 10px;
    padding: 0 16px 8px;
  }
  .buehne-frage > .kugel-platz { grid-column: 1; grid-row: 1 / -1; --k: min(100dvh - 130px, 42vw); min-width: 0; }
  .buehne-frage > :not(.kugel-platz) { grid-column: 2; }
  .buehne-frage > .frage-zeile { grid-row: 2; }
  .buehne-frage > .frag-knopf { grid-row: 3; }
  .buehne-frage > .frage-hinweis { grid-row: 4; }
  .buehne-frage > .frage-verlauf { grid-row: 5; max-height: 32dvh; overflow-y: auto; }
}