/* «Frag Bipo» – Chat-Knopf und -Fenster (website/fragbipo.js). Farben und Schrift aus site.css (Markenfarben), nur helle Anzeige
   wie die übrige Website. Handy: fast Vollbild; Computer: 600 breit, fast ganze Höhe, unten rechts; Knopf «Grösser» = fast ganzer Bildschirm (Wunsch Martin 22.10.2026). */
.fb-knopf{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:1000;
  display:inline-flex;align-items:center;gap:10px;padding:6px 18px 6px 6px;min-height:60px;border:0;border-radius:999px;cursor:pointer;
  background:var(--mittelblau,#1874e6);color:#fff;font:800 1.02rem/1 var(--schrift,system-ui,sans-serif);
  box-shadow:0 10px 28px rgba(12,36,58,.28),0 2px 6px rgba(12,36,58,.16);transition:transform .15s ease,box-shadow .15s ease}
.fb-knopf:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(12,36,58,.32),0 2px 6px rgba(12,36,58,.16)}
.fb-knopf:focus-visible,.fb-fenster button:focus-visible,.fb-fenster a:focus-visible,.fb-fenster textarea:focus-visible,
.fb-fenster input:focus-visible,.fb-fenster select:focus-visible,.fb-verlauf:focus-visible{outline:3px solid var(--gelb,#fdc201);outline-offset:2px}
.fb-knopf.offen{display:none}
/* Bipos ganzer Kopf (bilder/marke/montibit-kopf.svg) mittig im Kreis, nichts abgeschnitten */
.fb-kopf{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;overflow:hidden;background:#e4f1fe;border:2px solid #fff}
.fb-kopf img{display:block;width:84%;height:auto;max-width:none}
.fb-kopf.klein{width:44px;height:44px}
/* Neben den Antworten nur der Kopf, ohne runden Hintergrund (Wunsch Martin 22.10.2026) */
.fb-kopf.mini{width:34px;height:auto;border:0;border-radius:0;background:transparent;overflow:visible}
.fb-kopf.mini img{width:100%}

.fb-fenster{position:fixed;z-index:1001;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));
  width:min(600px,calc(100vw - 32px));height:900px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;
  background:var(--paper,#fff);color:var(--ink,#0c243a);border-radius:20px;overflow:hidden;font:400 .98rem/1.45 var(--schrift,system-ui,sans-serif);
  box-shadow:0 20px 50px rgba(12,36,58,.28),0 2px 8px rgba(12,36,58,.14);border:1px solid var(--line,#e2e8f0)}
.fb-fenster[hidden]{display:none}
/* Grosse Ansicht: fast der ganze Bildschirm, Text in einer gut lesbaren Spalte */
.fb-fenster.fb-gross{left:max(24px,env(safe-area-inset-left,0px));right:max(24px,env(safe-area-inset-right,0px));top:24px;bottom:24px;width:auto;height:auto;max-height:none;font-size:1.04rem;
  box-shadow:0 0 0 100vmax rgba(12,36,58,.4),0 20px 50px rgba(12,36,58,.28)}
.fb-gross .fb-verlauf{padding:20px max(16px,calc((100% - 860px) / 2)) 10px}
.fb-gross .fb-unten{padding:10px max(12px,calc((100% - 860px) / 2)) 10px}
.fb-gross .fb-msg .fb-text{max-width:80%}
.fb-kopfzeile{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 12px;background:var(--dunkelblau,#0c243a);color:#fff;flex:none}
.fb-titel{flex:1;min-width:0}
.fb-titel h2{margin:0;font-size:1.08rem;line-height:1.2;font-weight:800;color:#fff}
.fb-titel p{margin:0;font-size:.8rem;opacity:.82}
.fb-neu{border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;border-radius:999px;padding:6px 10px;font:700 .8rem var(--schrift,system-ui,sans-serif);cursor:pointer;white-space:nowrap}
.fb-neu:hover{background:rgba(255,255,255,.12)}
.fb-zu{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;flex:none}
.fb-zu svg,.fb-senden svg,.fb-mikro svg{fill:currentColor}
.fb-zu:hover{background:rgba(255,255,255,.24)}
.fb-gross-knopf svg{width:20px;height:20px}

.fb-verlauf{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 12px 8px;background:var(--bg,#f9fafb);display:flex;flex-direction:column;gap:10px}
.fb-msg{display:flex;gap:8px;align-items:flex-end;max-width:100%}
.fb-msg .fb-text{padding:9px 13px;border-radius:16px;max-width:86%;overflow-wrap:anywhere}
.fb-msg.bipo .fb-text{background:var(--paper,#fff);border:1px solid var(--line,#e2e8f0);border-bottom-left-radius:6px}
.fb-msg.nutzer{justify-content:flex-end}
.fb-msg.nutzer .fb-text{background:var(--mittelblau,#1874e6);color:#fff;border-bottom-right-radius:6px;white-space:pre-wrap}
.fb-msg.lokal .fb-text{background:var(--soft,#e4f1fe);border-color:#cfe4fa}
.fb-msg.danke .fb-text{background:var(--gruen-soft,#d1fae5);border-color:#a7e9c9}
.fb-text p{margin:0 0 .5em}.fb-text p:last-child{margin-bottom:0}
.fb-text ul,.fb-text ol{margin:.2em 0 .5em;padding-left:1.25em}.fb-text li{margin:.15em 0}
.fb-text a{color:var(--mittelblau,#1874e6);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.fb-punkte{display:inline-flex;gap:4px;padding:4px 0}
.fb-punkte i{width:7px;height:7px;border-radius:50%;background:var(--muted,#5b6577);opacity:.4;animation:fb-punkt 1s infinite ease-in-out}
.fb-punkte i:nth-child(2){animation-delay:.15s}.fb-punkte i:nth-child(3){animation-delay:.3s}
@keyframes fb-punkt{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:.9;transform:translateY(-3px)}}
.fb-chips{display:flex;flex-wrap:wrap;gap:8px;padding-left:38px}
.fb-chip{border:1.5px solid var(--mittelblau,#1874e6);background:var(--paper,#fff);color:var(--mittelblau,#1874e6);border-radius:999px;padding:7px 12px;
  font:700 .88rem/1.2 var(--schrift,system-ui,sans-serif);cursor:pointer;text-align:left;min-height:36px}
.fb-chip:hover{background:var(--soft,#e4f1fe)}

.fb-unten{flex:none;border-top:1px solid var(--line,#e2e8f0);padding:8px 10px 8px;background:var(--paper,#fff)}
.fb-anliegen{display:block;width:100%;margin:0 0 8px;border:1px dashed #b9c6d4;background:transparent;color:var(--ink,#0c243a);border-radius:12px;
  padding:8px 10px;font:700 .86rem/1.2 var(--schrift,system-ui,sans-serif);cursor:pointer;min-height:38px}
.fb-anliegen[hidden]{display:none}
.fb-anliegen:hover{background:var(--flaeche2,#f1f5f9)}
.fb-anliegen.hervor{border:0;background:var(--orange,#fa7001);color:#fff;box-shadow:0 4px 14px rgba(250,112,1,.35)}
.fb-eingabe{display:flex;align-items:flex-end;gap:6px}
.fb-eingabe textarea{flex:1;min-width:0;resize:none;border:1.5px solid #c7d3e0;border-radius:14px;padding:10px 12px;font:400 1rem/1.35 var(--schrift,system-ui,sans-serif);
  color:var(--ink,#0c243a);background:#fff;max-height:140px;min-height:44px}
.fb-eingabe textarea:focus{border-color:var(--mittelblau,#1874e6);outline:0}
.fb-senden,.fb-mikro{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;cursor:pointer}
.fb-senden{background:var(--mittelblau,#1874e6);color:#fff}
.fb-senden:disabled{opacity:.5;cursor:default}
.fb-mikro{background:var(--flaeche2,#f1f5f9);color:var(--dunkelblau,#0c243a)}
.fb-mikro[hidden]{display:none}
.fb-mikro.an{background:#dc2626;color:#fff;animation:fb-puls 1.2s infinite}
@keyframes fb-puls{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.45)}50%{box-shadow:0 0 0 7px rgba(220,38,38,0)}}
.fb-zaehler{display:block;font-size:.78rem;color:var(--muted,#5b6577);min-height:0;margin-top:2px}
.fb-zaehler:empty{display:none}
.fb-fuss{margin:4px 2px 0;font-size:.74rem;color:var(--muted,#5b6577)}
.fb-fuss a{color:inherit}
.fb-nur-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.fb-formular{background:var(--paper,#fff);border:1px solid var(--line,#e2e8f0);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.fb-formular h3{margin:0;font-size:1rem;font-weight:800}
.fb-formular label{font-weight:700;font-size:.86rem;margin-top:6px}
.fb-formular input,.fb-formular select,.fb-formular textarea{width:100%;box-sizing:border-box;border:1.5px solid #c7d3e0;border-radius:10px;padding:8px 10px;
  font:400 .95rem/1.35 var(--schrift,system-ui,sans-serif);color:var(--ink,#0c243a);background:#fff;min-height:40px}
.fb-formular textarea{resize:vertical}
.fb-klein{margin:2px 0;font-size:.8rem;color:var(--muted,#5b6577)}
.fb-klein a{color:var(--mittelblau,#1874e6)}
.fb-formfehler{margin:4px 0 0;color:#b91c1c;font-weight:700;font-size:.86rem}
.fb-formfehler:empty{display:none}
.fb-formknoepfe{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.fb-formsenden,.fb-formzurueck{border:0;border-radius:12px;padding:10px 16px;font:800 .95rem var(--schrift,system-ui,sans-serif);cursor:pointer;min-height:44px}
.fb-formsenden{background:var(--orange,#fa7001);color:#fff}.fb-formsenden:disabled{opacity:.6}
.fb-formzurueck{background:var(--flaeche2,#f1f5f9);color:var(--ink,#0c243a)}
.fb-falle{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}

/* Seite: Platz unten, damit der Knopf nichts Wichtiges verdeckt */
body.fb-da .fuss{padding-bottom:84px}
/* Konto: am Handy über der Leiste des Prüfungs-Baukastens */
@media (max-width:900px){.fb-knopf.fb-hoch{bottom:calc(max(16px,env(safe-area-inset-bottom,0px)) + 70px)}}
/* Handy: fast Vollbild */
@media (max-width:520px){
  .fb-knopf{padding-right:14px;min-height:56px}
  .fb-kopf{width:50px;height:50px}
  .fb-fenster,.fb-fenster.fb-gross{left:8px;right:8px;top:8px;bottom:8px;width:auto;height:auto;max-height:none;border-radius:16px;font-size:.98rem}
  .fb-gross .fb-verlauf{padding:14px 12px 8px}.fb-gross .fb-unten{padding:8px 10px}.fb-gross .fb-msg .fb-text{max-width:86%}
  html.fb-offen,html.fb-offen body{overflow:hidden}
  .fb-neu{padding:6px 8px}
  .fb-gross-knopf{display:none}
}
@media (prefers-reduced-motion:reduce){.fb-knopf,.fb-punkte i,.fb-mikro.an{transition:none;animation:none}}
@media print{.fb-knopf,.fb-fenster{display:none!important}}