/* Das Vertragshaus — nur für tarif-finder.html (nach style.css geladen). */
/* ---------- TARIF-FINDER ALS GESPRÄCH (seit 23.10.2026, tarif-finder.js) ----------
   Ohne JS bleibt das normale Formular (style.css, Abschnitt „Tarif-Finder“). Bewegungen figur-atmen/-hops: style.css Abschnitt 29. Mit JS stellt die Figur die Fragen nacheinander:
   weiße Comic-Blasen links (Figur), türkise Antwort-Blasen rechts (Besucher), Antworten als Knöpfe (statt Radio-Pfeiltasten).
   Große Figur links nur ab 900 px; nachdenklich während der Fragen, jubelnd beim Ergebnis. */
.finder-buehne{ display:grid; grid-template-columns:minmax(0,1fr); gap:28px; align-items:start; }
.finder-spalte{ min-width:0; }
.finder-figur{ display:none; margin:0; }
@media (min-width:900px){
  .finder-buehne{ grid-template-columns:300px minmax(0,1fr); gap:44px; }
  .finder-figur{ display:grid; place-items:end center; position:sticky; top:110px; min-height:420px; }
  .finder-figur::before{ content:""; position:absolute; inset:12% -6% 4%; border-radius:50%; z-index:-1;
    background:radial-gradient(closest-side, rgba(255,43,214,.45), rgba(139,70,255,.22) 60%, transparent 100%); }
  .finder-figur__bild{ width:auto; max-width:100%; height:min(560px, calc(100vh - 170px)); object-fit:contain;
    transform-origin:50% 100%; animation:figur-atmen 4.6s ease-in-out infinite; filter:drop-shadow(6px 6px 0 var(--ink)); }
  .finder-figur.hops .finder-figur__bild{ animation:figur-atmen 4.6s ease-in-out infinite, figur-hops .5s ease-out 1; }
}
@keyframes chat-rein{ from{ opacity:0; translate:0 12px; scale:.96; } to{ opacity:1; translate:0 0; scale:1; } }
@keyframes chat-punkt{ 0%,80%,100%{ opacity:.25; translate:0 0; } 40%{ opacity:1; translate:0 -4px; } }
.finder--chat{ gap:26px; max-width:780px; }
.finder--chat > button[type="submit"], .finder--chat .finder-optionen{ display:none; }
.finder--chat .finder-frage{ border:0; background:none; box-shadow:none; padding:0; margin:0; min-width:0; }
.finder--chat .finder-frage legend{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.finder--chat .finder-frage:not([hidden]){ animation:chat-rein .38s cubic-bezier(.34,1.56,.64,1); }
.chat-zeile{ display:flex; align-items:flex-end; gap:12px; }
.chat-kopf{ flex:none; width:58px; height:58px; border-radius:50%; object-fit:cover; border:3px solid var(--ink);
  background:radial-gradient(circle at 50% 30%, #ff8be9, var(--magenta) 70%); box-shadow:3px 3px 0 var(--ink); }
.chat-blase{ position:relative; max-width:560px; margin:0; padding:12px 16px; background:#fff; color:var(--ink);
  border:3px solid var(--ink); border-radius:18px 18px 18px 4px; box-shadow:5px 5px 0 var(--ink), 0 0 22px rgba(255,43,214,.35);
  font-weight:600; line-height:1.45; }
.chat-blase b{ font-weight:800; }
.chat-reaktion{ color:#b0008e; }
.chat-blase .chat-name{ display:block; margin-bottom:2px; font:400 .78rem/1 var(--font-display); letter-spacing:1px; color:var(--magenta-deep); }
.chat-chips{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; margin-top:14px; padding-left:70px; }
.chat-chip{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:10px 14px; text-align:left; cursor:pointer;
  background:var(--bg-3); color:var(--paper); border:var(--bd); border-radius:14px 14px 4px 14px; box-shadow:3px 3px 0 var(--ink);
  font:800 1rem/1.25 var(--font-body); transition:translate .1s, box-shadow .1s, border-color .1s; }
.chat-chip small{ font-weight:600; font-size:.78rem; opacity:.75; }
.chat-chip:hover{ border-color:var(--cyan); translate:-2px -2px; box-shadow:5px 5px 0 var(--ink); }
.chat-chip:focus-visible{ outline:3px solid var(--magenta); outline-offset:2px; }
.finder-frage.ist-beantwortet .chat-chips{ display:none; }
.chat-antwort{ display:block; margin:14px 0 0 auto; max-width:min(440px, 85%); padding:10px 16px; cursor:pointer; text-align:right;
  background:var(--cyan); color:var(--ink); border:3px solid var(--ink); border-radius:18px 18px 4px 18px; box-shadow:4px 4px 0 var(--ink);
  font:800 1rem/1.3 var(--font-body); animation:chat-rein .3s ease-out; }
.chat-antwort__aendern{ display:block; margin-top:2px; font-size:.72rem; font-weight:600; opacity:.7; }
.chat-antwort:hover .chat-antwort__aendern{ opacity:1; text-decoration:underline; }
.chat-antwort:focus-visible{ outline:3px solid var(--magenta); outline-offset:2px; }
.chat-tippt .chat-blase{ display:flex; gap:6px; padding:16px 18px; }
.chat-tippt i{ width:9px; height:9px; border-radius:50%; background:var(--ink); animation:chat-punkt 1s ease-in-out infinite; }
.chat-tippt i:nth-child(2){ animation-delay:.15s; } .chat-tippt i:nth-child(3){ animation-delay:.3s; }
.finder--chat, .finder-ergebnis{ scroll-margin-top:100px; }   /* nicht unter der festen Kopfleiste landen */
.finder-ergebnis > .chat-zeile{ margin-bottom:6px; animation:chat-rein .38s cubic-bezier(.34,1.56,.64,1); }
.finder-neu{ margin-top:22px; }
@media (max-width:640px){
  .chat-kopf{ width:48px; height:48px; }
  .chat-chips{ padding-left:0; }
  .chat-chip{ flex:1 1 calc(50% - 10px); }
}