/* ==========================================================================
   FRAGEASSISTENT
   Mobile-first. Der Assistent ersetzt optisch das lange Formular; die
   ursprünglichen Feldgruppen werden nur versteckt, nicht entfernt.
   ========================================================================== */

.as-versteckt{display:none}

.as{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 18px 22px;
  box-shadow:var(--shadow);
}
@media(min-width:600px){ .as{padding:30px 30px 28px} }

/* ---------- Fortschritt ---------- */
.as__fortschritt{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.as__balken{
  flex:1;height:7px;border-radius:999px;
  background:var(--cream-deep);overflow:hidden;
}
.as__balken i{
  display:block;height:100%;width:0;
  border-radius:999px;
  background:linear-gradient(90deg,var(--violet),var(--coral));
  transition:width .32s ease;
}
.as__zaehler{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  color:var(--ink-soft);white-space:nowrap;
}

/* ---------- KOKO stellt die Frage ---------- */
.as__kopf{display:flex;gap:12px;align-items:flex-start;margin-bottom:20px}
.as__avatar{width:48px;height:48px;flex:none}
@media(min-width:600px){ .as__avatar{width:58px;height:58px} }
.as__avatar svg{width:100%;height:100%;display:block}

.as__blase{
  position:relative;flex:1;
  background:var(--cream-deep);
  border-radius:4px 16px 16px 16px;
  padding:14px 16px;
}
/* kleine Spitze zum Avatar hin */
.as__blase::before{
  content:'';position:absolute;left:-7px;top:10px;
  border:7px solid transparent;
  border-right-color:var(--cream-deep);border-left:0;
}
.as__frage{
  font-family:var(--display);font-weight:600;
  font-size:clamp(17px,3.6vw,21px);line-height:1.28;
  margin:0;
}
.as__hinweis{
  margin:7px 0 0;font-size:14.2px;line-height:1.5;
  color:var(--ink-soft);
}

/* ---------- Felder ---------- */
.as__felder{display:grid;gap:14px}
.as__felder .feld{margin:0}
.as__felder .einwilligung{margin:0}

/* ---------- Sprachaufnahme ---------- */
.as__ton{margin-top:16px}
.as__ton-aus{
  font-size:13.2px;color:var(--ink-soft);line-height:1.5;
  background:var(--cream-deep);border-radius:12px;padding:11px 14px;margin:0;
}
.as__recorder{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  background:var(--cream-deep);border-radius:12px;padding:12px 14px;
}
.as__rec{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:600;font-size:14px;
  padding:10px 16px;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  cursor:pointer;min-height:44px;
}
.as__rec:hover{border-color:var(--violet)}
.as__punkt{
  width:10px;height:10px;border-radius:50%;
  background:var(--coral);flex:none;
}
.as__rec--laeuft{border-color:var(--coral);color:var(--coral-deep)}
.as__rec--laeuft .as__punkt{animation:as-puls 1s ease-in-out infinite}
@keyframes as-puls{50%{opacity:.25;transform:scale(.8)}}

.as__dauer{font-family:var(--mono);font-size:12px;color:var(--ink-soft)}
.as__wiedergabe{width:100%}
.as__wiedergabe audio{width:100%;margin-top:4px}

/* ---------- Fehler und Navigation ---------- */
.as__fehler{
  margin:14px 0 0;padding:10px 14px;border-radius:10px;
  background:#FDECEA;color:#9B2C1E;font-size:14px;
}
.as__navi{
  display:flex;gap:12px;margin-top:22px;
  padding-top:18px;border-top:1px solid var(--line);
}
.as__navi .btn{flex:1;justify-content:center;min-height:46px}
.as__zurueck:disabled{opacity:.4;cursor:not-allowed}
.as__zurueck:disabled:hover{transform:none}
@media(min-width:600px){
  .as__navi{justify-content:flex-end}
  .as__navi .btn{flex:0 0 auto;min-width:150px}
}

@media (prefers-reduced-motion: reduce){
  .as__balken i{transition:none}
  .as__rec--laeuft .as__punkt{animation:none}
}