/* BendYourMind: Aussehen des Gesprächsbausteins (#wg-gespraech) und seiner Bühne.
   Eine Frage steht groß da wie ein Untertitel, der bisherige Verlauf klein darüber.
   Nutzt die Farbvariablen aus seite.css (--stage, --stage-fg, --stage-muted, --glint). */
.stage{background:var(--stage);color:var(--stage-fg);padding-block:96px;scroll-margin-top:0}
.stage .wrap{max-width:860px}
.kicker{font-family:var(--body);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--stage-muted);font-weight:500;line-height:1.5;margin-bottom:26px}
.wgg{display:flex;flex-direction:column;gap:20px}
.wgg-wege{display:flex;flex-wrap:wrap;gap:8px}
.wgg-wege button{background:transparent;border:1px solid var(--stage-muted);color:inherit;border-radius:var(--ecke,999px);padding:8px 16px;font-size:14.5px;line-height:1.25;min-height:40px;text-align:left}
.wgg-wege button:hover{border-color:var(--stage-fg)}
.wgg-wege button[aria-pressed="true"]{background:var(--stage-fg);color:var(--stage);border-color:var(--stage-fg);font-weight:600}
.wgg-verlauf{display:flex;flex-direction:column;gap:10px;font-size:15.5px;color:var(--stage-muted)}
.wgg-verlauf:empty{display:none}
.wgg-verlauf b{color:var(--stage-fg);font-weight:500}
.wgg-marke{font-size:13px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;color:var(--stage-muted)}
.wgg-jetzt{font-family:var(--display);font-weight:var(--kopf-gewicht,300);font-size:clamp(26px,3.6vw,44px);line-height:1.15;letter-spacing:-.015em;text-wrap:balance;min-height:1.2em;outline:none;white-space:pre-line}
.wgg-jetzt.neu{animation:wgg-auf .6s ease}
.wgg-jetzt:focus-visible{outline:3px solid var(--glint);outline-offset:6px}
.wgg.wartet .wgg-jetzt{opacity:.45}
.wgg-wozu{font-size:15px;color:var(--stage-muted)}
.wgg-wozu b{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--stage-fg);margin-right:8px}
.wgg-form{display:flex;gap:10px;align-items:flex-end}
.wgg-form textarea{flex:1;min-width:0;background:transparent;border:0;border-bottom:2px solid var(--stage-muted);border-radius:0;padding:12px 2px;font-size:19px;line-height:1.4;min-height:54px;resize:none;overflow:auto}
.wgg-form textarea:focus{border-bottom-color:var(--glint);outline:none}
.wgg-form textarea::placeholder{color:var(--stage-muted)}
.wgg-form button,.wgg-neu{background:transparent;border:1.5px solid currentColor;color:inherit;border-radius:var(--ecke,999px);padding:0 24px;min-height:54px;font-weight:600}
.wgg-form button:hover:not(:disabled),.wgg-neu:hover{background:var(--stage-fg);color:var(--stage)}
.wgg-form button:disabled,.wgg-form textarea:disabled{opacity:.5;cursor:default}
.wgg-neu{align-self:flex-start}
.wgg-status{font-size:15px;min-height:1.5em}
.wgg-status:empty{display:none}
.wgg[data-zustand="bald"] .wgg-status{align-self:flex-start;font-family:var(--display);font-weight:700;font-size:17px;border:1.5px solid var(--glint);border-radius:999px;padding:8px 18px;display:inline-flex;align-items:center;gap:10px}
.wgg[data-zustand="bald"] .wgg-status::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--glint);box-shadow:0 0 10px 2px var(--glint)}
.wgg[data-zustand="bald"] .wgg-jetzt{opacity:.7}
.wgg-hinweis{font-size:13.5px;color:var(--stage-muted);max-width:64ch}
.wgg-hinweis:empty{display:none}
.wgg-blatt{background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:14px;padding:20px 22px;display:flex;flex-direction:column;gap:12px}
.wgg-blatt>b{font-family:var(--display);font-size:18px}
.wgg-blatt dl{display:flex;flex-direction:column;gap:12px;margin:0}
.wgg-blatt dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.wgg-blatt dd{margin:0;font-size:16px;line-height:1.4}
@keyframes wgg-auf{from{opacity:0;transform:translateY(8px)}}
@media (max-width:820px){
  .stage{padding-block:60px}
  .wgg-form{flex-direction:column;align-items:stretch}
}