/* ===================================================================================== DER BERATUNGSBOT – Blase unten rechts, Fenster darueber. EBENEN (die bestehenden nicht verschieben): 50 klebende Kopfzeile (style.css) 60 Warenkorb-Knopf (shop.css) 61 BOT-BLASE <- liegt neben dem Warenkorb, nicht darueber 70 Warenkorb-Schleier (shop.css) 71 Warenkorb-Schublade (shop.css) 80 BOT-FENSTER <- wenn der Bot offen ist, ist er vorn Die Blase liegt bewusst UNTER dem Warenkorb-Schleier: Wer den Warenkorb offen hat, soll nicht aus Versehen den Bot treffen. KOLLISION MIT DEM WARENKORB: Am Desktop sitzt der Warenkorb-Knopf oben rechts, die Blase unten rechts - kein Konflikt. Am Handy (<=820px) rutscht der Warenkorb nach unten rechts, genau auf die Blase. Dort weicht die Blase nach oben aus; die Klasse dafuer setzt bot.js, wenn ein Warenkorb auf der Seite ist. ===================================================================================== */ /* ------------------------------------------------------------------ Die Blase */ .bot-blase{ position:fixed;right:16px;bottom:16px;z-index:61; display:inline-flex;align-items:center;gap:9px; font-family:var(--kopf);font-weight:600;font-size:.92rem; background:var(--card);color:var(--ink); border:1px solid var(--line);cursor:pointer; padding:12px 18px;border-radius:999px; box-shadow:0 4px 16px -4px rgba(43,40,32,.35); transition:transform .18s ease,box-shadow .18s ease; } .bot-blase:hover{transform:translateY(-1px);box-shadow:0 6px 22px -6px rgba(43,40,32,.45)} .bot-blase:focus-visible{outline:3px solid var(--accent);outline-offset:2px} .bot-blase svg{width:19px;height:19px;fill:var(--accent);flex:none} .bot-blase[hidden]{display:none} /* Auf Seiten mit Warenkorb am Handy ueber den Warenkorb-Knopf. 16 px Rand + 46 px Knopf + 12 px Luft = 74 px. */ @media(max-width:820px){ .bot-blase--neben-warenkorb{bottom:74px} } /* ----------------------------------------------------------------- Das Fenster */ .bot-fenster{ position:fixed;right:16px;bottom:16px;z-index:80; width:min(400px,calc(100vw - 32px));height:min(560px,calc(100vh - 32px)); display:flex;flex-direction:column; background:var(--bg);border:1px solid var(--line);border-radius:16px; box-shadow:0 18px 50px -12px rgba(43,40,32,.4); overflow:hidden; } .bot-fenster[hidden]{display:none} /* Am Handy Vollbild. Die Zielgruppe steht im Stall - ein 400-px-Fenster auf einem Telefon waere ein Briefkastenschlitz. */ @media(max-width:560px){ .bot-fenster{inset:0;width:100%;height:100%;height:100dvh;border-radius:0;border:0} } /* -------------------------------------------------------------------- Kopfzeile */ .bot-kopf{ display:flex;align-items:center;gap:10px; padding:13px 14px;background:var(--card);border-bottom:1px solid var(--line);flex:none; } .bot-kopf__punkt{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none} .bot-kopf__titel{font-family:var(--kopf);font-weight:700;font-size:.98rem;margin:0;flex:1} .bot-kopf__zu{ background:none;border:0;cursor:pointer;color:var(--muted); font-size:1.5rem;line-height:1;padding:4px 8px;border-radius:8px; } .bot-kopf__zu:hover{background:var(--line);color:var(--ink)} .bot-kopf__zu:focus-visible{outline:2px solid var(--accent);outline-offset:1px} /* --------------------------------------------------------------------- Verlauf */ /* min-height:0 ist hier PFLICHT, auch wenn es nach nichts aussieht. Ein Flex-Kind hat von sich aus min-height:auto und wird deshalb so hoch wie sein Inhalt - overflow-y:auto laeuft dann ins Leere, weil nichts ueberlaeuft. Das Fenster darueber schneidet mit overflow:hidden ab, und im Gespraech liess sich mit dem Mausrad nicht mehr nach oben scrollen (gemeldet 31.08.2026). Beim Formular darunter stand es von Anfang an richtig. */ .bot-verlauf{flex:1;min-height:0;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px; -webkit-overflow-scrolling:touch} .bot-nachricht{max-width:88%;padding:10px 13px;border-radius:14px; font-size:.93rem;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere} .bot-nachricht--nutzer{align-self:flex-end;background:var(--accent);color:#fff; border-bottom-right-radius:4px} .bot-nachricht--bot{align-self:flex-start;background:var(--card);color:var(--ink); border:1px solid var(--line);border-bottom-left-radius:4px} .bot-nachricht--fehler{align-self:flex-start;background:var(--warnbg);color:var(--warn); border:1px solid #e8d5ab} .bot-nachricht strong{font-weight:700} .bot-nachricht a{color:inherit} /* Der Ladepunkt. Kein Streaming in dieser Fassung - die Antwort kommt am Stueck, und bis dahin muss sichtbar sein, dass etwas passiert. */ .bot-tippt{align-self:flex-start;display:flex;gap:5px;padding:13px} .bot-tippt span{width:7px;height:7px;border-radius:50%;background:var(--muted); animation:bot-huepf 1.3s infinite} .bot-tippt span:nth-child(2){animation-delay:.18s} .bot-tippt span:nth-child(3){animation-delay:.36s} @keyframes bot-huepf{0%,60%,100%{opacity:.28;transform:translateY(0)} 30%{opacity:1;transform:translateY(-4px)}} /* Wer "Bewegung reduzieren" eingestellt hat, bekommt keine huepfenden Punkte - dieselbe Zusage wie auf den Produktseiten (siehe werkzeuge/pruefung.js). */ @media(prefers-reduced-motion:reduce){ .bot-tippt span{animation:none;opacity:.5} .bot-blase{transition:none} } /* ------------------------------------------------------------------ Vorschlaege Drei Startfragen. Sie ersparen den Kaltstart vor einem leeren Feld - gerade am Handy die groesste Huerde. Verschwinden nach der ersten Frage. */ .bot-vorschlaege{display:flex;flex-wrap:wrap;gap:7px;padding:0 14px 12px} .bot-vorschlag{ font-family:inherit;font-size:.84rem;color:var(--ink); background:var(--card);border:1px solid var(--line);border-radius:999px; padding:7px 13px;cursor:pointer;text-align:left; } .bot-vorschlag:hover{border-color:var(--accent);color:var(--accent-dark)} .bot-vorschlag:focus-visible{outline:2px solid var(--accent);outline-offset:1px} /* -------------------------------------------------------------------- Eingabe */ .bot-eingabe{display:flex;gap:8px;padding:11px;background:var(--card); border-top:1px solid var(--line);flex:none;align-items:flex-end} .bot-eingabe textarea{ flex:1;resize:none;font:inherit;font-size:16px; /* 16px: kleiner zoomt iOS beim Tippen hinein */ line-height:1.45;color:var(--ink);background:var(--bg); border:1px solid var(--line);border-radius:11px;padding:9px 11px; max-height:110px;min-height:42px; } .bot-eingabe textarea:focus{outline:0;border-color:var(--accent)} .bot-senden{ flex:none;width:42px;height:42px;border-radius:11px;border:0;cursor:pointer; background:var(--accent);color:#fff;display:grid;place-items:center; } .bot-senden:hover:not(:disabled){background:var(--accent-dark)} .bot-senden:disabled{opacity:.45;cursor:default} .bot-senden:focus-visible{outline:3px solid var(--accent-dark);outline-offset:2px} .bot-senden svg{width:18px;height:18px;fill:currentColor} /* ------------------------------------------------------------------- Rueckruf Liegt zwischen Verlauf und Eingabe. Der Knopf ist immer da, aber leise - wer beraten werden will, soll nicht als Erstes ein Formular sehen. */ .bot-rueckruf-auf{ display:block;width:100%;text-align:left; font-family:inherit;font-size:.82rem;color:var(--muted); background:none;border:0;border-top:1px solid var(--line); padding:9px 14px;cursor:pointer;flex:none; } .bot-rueckruf-auf:hover{color:var(--accent-dark);background:var(--card)} .bot-rueckruf-auf:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} .bot-rueckruf-auf[hidden]{display:none} /* Das Formular nimmt den Platz des Verlaufs ein, statt sich darunter zu quetschen. Beim ersten Versuch stand es unter dem Gespraech, war auf 62vh gedeckelt - und am Handy waren Einwilligungstext und Knoepfe abgeschnitten. Wer das Formular ausfuellt, will es ausfuellen; der Verlauf ist mit "Zurueck" unveraendert wieder da. */ .bot-formular{flex:1;min-height:0;padding:12px 14px;background:var(--card); border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px; overflow-y:auto;-webkit-overflow-scrolling:touch} .bot-formular[hidden]{display:none} .bot-formular h3{margin:0;font-family:var(--kopf);font-size:.96rem} .bot-formular label{display:flex;flex-direction:column;gap:3px; font-size:.79rem;color:var(--muted)} .bot-formular input[type=text], .bot-formular input[type=tel], .bot-formular textarea{ font:inherit;font-size:16px; /* 16px, sonst zoomt iOS beim Antippen hinein */ color:var(--ink);background:var(--bg); border:1px solid var(--line);border-radius:9px;padding:9px 10px; } .bot-formular textarea{resize:vertical;min-height:56px} .bot-formular input:focus,.bot-formular textarea:focus{outline:0;border-color:var(--accent)} .bot-haken{flex-direction:row;align-items:flex-start;gap:8px; font-size:.78rem;line-height:1.45;color:var(--muted);cursor:pointer} .bot-haken input{margin-top:2px;width:17px;height:17px;flex:none;accent-color:var(--accent)} .bot-formular__knoepfe{display:flex;gap:8px;margin-top:2px} .bot-formular__knoepfe button{ font-family:inherit;font-size:.88rem;font-weight:600; border-radius:9px;padding:10px 15px;cursor:pointer;border:1px solid var(--line); } .bot-formular__ab{background:var(--accent);color:#fff;border-color:var(--accent);flex:1} .bot-formular__ab:hover:not(:disabled){background:var(--accent-dark)} .bot-formular__ab:disabled{opacity:.5;cursor:default} .bot-formular__zurueck{background:var(--bg);color:var(--muted)} .bot-formular__zurueck:hover{color:var(--ink)} .bot-formular__meldung{margin:0;font-size:.82rem;line-height:1.45} .bot-formular__meldung--fehler{color:var(--warn)} .bot-formular__meldung[hidden]{display:none} /* -------------------------------------------------------------------- Hinweis Pflichtangabe: dass hier eine KI antwortet, dass die Eingaben an einen Dienstleister gehen und dass sie sich irren kann. Steht sichtbar im Fenster, nicht versteckt hinter einem Link. */ .bot-hinweis{margin:0;padding:8px 14px 11px;font-size:.74rem;line-height:1.45; color:var(--muted);background:var(--card);border-top:1px solid var(--line);flex:none} .bot-hinweis a{color:var(--muted)}