/* Baustein Praxis-Assistent: Knopf "Fragen?" mit dem Turm im Ochsenauge, Dialog als Panel (Desktop) oder Blatt (Handy).
   Farben aus den Tokens der Richtung (--papier, --kachel, --text, --leise, --linie, --knopf, --dunkel). */
.frag{--frag-unten:0px;position:fixed;right:clamp(14px,2vw,28px);bottom:calc(16px + var(--frag-unten));z-index:45;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:5px 20px 5px 5px;border-radius:999px;background:var(--knopf,#A86061);color:#fff;font:600 15px/1 var(--schrift-text,system-ui);box-shadow:0 10px 30px -12px rgb(40 20 26/.45);transition:opacity .35s cubic-bezier(.22,1,.36,1),transform .35s cubic-bezier(.22,1,.36,1),visibility 0s,background-color .3s;--fokus:#2A1F24;--fokus-gegen:#fff}
.frag:hover{background:var(--knopf-hover,#985253)}
.frag__auge{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#FBF6F3;overflow:hidden;flex:none;box-shadow:inset 0 0 0 1px rgb(0 0 0/.06)}
.frag__auge img{width:34px;height:34px}
.frag.ist-weg{opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .3s,transform .3s,visibility 0s .3s;pointer-events:none}
html.ohne-js .frag{display:none}
html.assistent-offen .frag{opacity:0;visibility:hidden}

.assistent{position:fixed;inset:0;z-index:125;display:flex;align-items:flex-end;justify-content:flex-end;padding:clamp(12px,2vw,28px);background:rgb(24 16 20/.32)}
.assistent__karte{display:flex;flex-direction:column;width:min(420px,100%);height:min(680px,calc(100svh - 48px));background:var(--papier,#FBF6F3);color:var(--text,#2A1F24);border-radius:22px;overflow:hidden;box-shadow:0 30px 80px -30px rgb(30 20 26/.5);transform:translateY(16px);opacity:0;transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .3s}
.assistent.ist-offen .assistent__karte{transform:none;opacity:1}
.assistent__kopf{display:flex;align-items:center;gap:12px;padding:14px 12px 14px 16px;background:var(--dunkel,#1E2235);color:#F6EEEB}
.assistent__avatar{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#FBF6F3;overflow:hidden;flex:none}
.assistent__avatar img{width:38px;height:38px}
.assistent__kopf > div{flex:1;min-width:0}
.assistent__titel{margin:0;font:600 17px/1.2 var(--schrift-text,system-ui)!important;letter-spacing:0!important;text-transform:none!important;color:#fff}
.assistent__status{display:flex;align-items:center;gap:7px;margin:3px 0 0;font-size:13px;color:#D5CBD0}
.assistent__status.ist-offen .auge{color:#E4A2A2}
.assistent__status.ist-offen .auge::after{background:#E4A2A2}
.assistent__status.ist-zu .auge{color:#B4AAB0}
.assistent__zu{display:grid;place-items:center;width:44px;height:44px;flex:none;border:1px solid rgb(255 255 255/.22);border-radius:50%;background:none;color:#fff;--fokus:#fff;--fokus-gegen:var(--dunkel,#1E2235)}
.assistent__zu:hover{background:rgb(255 255 255/.1)}
.assistent__zu svg{width:18px;height:18px}
.assistent__hinweis{margin:0;max-width:none;padding:9px 16px;background:var(--kachel,#F4EAE5);color:var(--leise,#6E5F64);font-size:12.5px;line-height:1.4}
.assistent__verlauf{flex:1;overflow:auto;overscroll-behavior:contain;padding:18px 16px 10px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.assistent__verlauf:focus{outline:0}
.assistent__blase{max-width:88%;padding:11px 14px;border-radius:18px;font-size:15px;line-height:1.45;animation:assistent-auf .35s cubic-bezier(.22,1,.36,1)}
.assistent__blase p{margin:0;max-width:none}
.assistent__blase--praxis{align-self:flex-start;background:var(--kachel,#F4EAE5);border-bottom-left-radius:6px}
.assistent__blase--du{align-self:flex-end;background:var(--dunkel,#1E2235);color:#fff;border-bottom-right-radius:6px}
.assistent__live{display:flex;align-items:center;gap:8px;margin:8px 0 0!important;font-size:13.5px;color:var(--leise,#6E5F64)}
.assistent__weg{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:10px;padding:0 18px;border:0;border-radius:999px;background:var(--knopf,#A86061);color:#fff;font:500 14.5px/1 var(--schrift-text,system-ui);cursor:pointer}
.assistent__weg:hover{background:var(--knopf-hover,#985253)}
.assistent__weg--link{background:none;color:var(--text,#2A1F24);padding:0;text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px}
.assistent__weg--link:hover{background:none}
.assistent__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.assistent__chip{min-height:44px;padding:0 15px;border:1px solid var(--linie-stark,#B9A9AE);border-radius:999px;background:var(--papier,#FBF6F3);color:var(--text,#2A1F24);font:500 14px/1 var(--schrift-text,system-ui);cursor:pointer;transition:border-color .2s,background-color .2s}
.assistent__chip:hover{border-color:var(--knopf,#A86061);background:#fff}
.assistent__tippe{align-self:flex-start;display:flex;gap:5px;padding:14px 16px;border-radius:18px;border-bottom-left-radius:6px;background:var(--kachel,#F4EAE5)}
.assistent__tippe i{width:7px;height:7px;border-radius:50%;background:var(--leise,#6E5F64);animation:assistent-tippe 1s infinite ease-in-out}
.assistent__tippe i:nth-child(2){animation-delay:.15s}
.assistent__tippe i:nth-child(3){animation-delay:.3s}
.assistent__eingabe{display:flex;gap:8px;padding:12px 12px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--linie,#E4D6D1);background:var(--papier,#FBF6F3)}
.assistent__eingabe input{flex:1;min-width:0;min-height:48px;padding:0 16px;border:1px solid var(--leise,#6E5F64);border-radius:999px;background:#fff;color:var(--text,#2A1F24);font:400 16px/1 var(--schrift-text,system-ui)}
.assistent__eingabe input::placeholder{color:var(--leise,#6E5F64);opacity:1}
.assistent__senden{display:grid;place-items:center;width:48px;height:48px;flex:none;border:0;border-radius:50%;background:var(--knopf,#A86061);color:#fff;cursor:pointer}
.assistent__senden:hover{background:var(--knopf-hover,#985253)}
.assistent__senden svg{width:20px;height:20px}
@keyframes assistent-auf{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes assistent-tippe{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
html.still .assistent__karte,html.still .assistent__blase{transition:none;animation:none}
@media (prefers-reduced-motion:reduce){.assistent__karte,.assistent__blase,.assistent__tippe i{transition:none;animation:none}}
@media (max-width:560px){
  .assistent{padding:0;align-items:flex-end;justify-content:stretch}
  .assistent__karte{width:100%;height:min(92svh,720px);border-radius:20px 20px 0 0}
  .frag{min-height:48px;padding-right:16px;font-size:14px}
  .frag__auge{width:38px;height:38px}
  .frag__auge img{width:30px;height:30px}
}