/*
 * Aussehen des Chat-Widgets nach der BGW-Website (A-14).
 *
 * GEMESSEN am 2026-09-25 an www.bgw-bielefeld.de (Avada 7 mit Child-Theme),
 * Quelle der Werte: das Fusion-Stylesheet
 *   /wp-content/cache/min/1/wp-content/uploads/fusion-styles/c244936d2a0420b1b3f582838a103784.min.css
 * dort `:root` mit den Avada-Globalfarben --awb-color1 bis --awb-color8 und den
 * Typografie-Variablen. Die Herleitung jeder Zeile und die Kontrastwerte stehen in
 * `docs/chat-widget-einbindung.md`, Abschnitt 4a, "Das Aussehen der BGW".
 *
 * WARUM NUR VARIABLEN (und vier kleine Regeln): Das Bündel und sein Stylesheet
 * bleiben unverändert, sonst gelten ihre Prüfsummen nicht mehr (Abschnitt 3).
 * Die Variablen stehen auf `#biggi-chat` und nicht auf `:root` -- so gewinnen sie
 * unabhängig von der Ladereihenfolge gegen die Vorgaben des Pakets (die auf
 * `:root` stehen) und berühren die Variablen des Themes nicht.
 *
 * DIE SCHRIFT wird hier NICHT geladen: kein @font-face, kein url(), kein @import.
 * "GT Walsheim" ist eine lizenzierte Schrift, die das Theme der BGW selbst von
 * der eigenen Domain lädt; auf der echten Seite ist sie also schon da. Wo sie
 * fehlt (lokale Testumgebung), greift die Systemschrift dahinter.
 * `werkzeug/chat-widget-holen.py` verweigert, wenn hier etwas nachgeladen würde.
 */

#biggi-chat {
	/* Eigene Grundgröße: Das Widget erbt sonst die Schrift der Seite, und die BGW
	   setzt den Fließtext auf 24 px mit fester Zeilenhöhe 32 px (--awb-typography4).
	   Damit liefe der Datenschutzhinweis auf dem Begrüßungsbildschirm aus dem
	   Fenster (lokal mit einem Theme mit 22 px gemessen). */
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: normal;

	/* Farben -- BGW: color5 #325747 (primary_color, link_color), color6 #008291
	   (link_hover_color), color7 #000032 (body_typography-color, Knopftext),
	   color4 #bad739 (Knopfhintergrund), color2 #eff2f1, #d6ddda (Child-Theme). */
	--chat--color--primary: #325747;
	--chat--color--primary-shade-50: #008291;
	--chat--color--primary--shade-100: #20372d;
	--chat--color--secondary: #325747;
	--chat--color-secondary-shade-50: #008291;
	--chat--color-dark: #000032;
	--chat--color-light: #eff2f1;
	--chat--color-light-shade-50: #d6ddda;
	--chat--color-light-shade-100: #d6ddda;
	--chat--color-medium: #d6ddda;
	--chat--color-typing: #325747;

	/* Schrift -- BGW: --awb-typography5-font-family "GT Walsheim Regular"
	   (Fließtext 17 px), Überschriften "GT Walsheim Bold". */
	--chat--font-family: "GT Walsheim Regular", "GT Walsheim", -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Kopf hell wie der Verlauf (Entwurf 2026-10-06, Daniel): #325747 auf #F4F6F5, 7,47:1 */
	--chat--header--background: #F4F6F5;
	--chat--header--color: #325747;
	--chat--heading--font-size: 1.75em;
	--chat--subtitle--line-height: 1.4;

	/* Verlauf */
	--chat--body--background: #F4F6F5;
	--chat--message--bot--background: #ffffff;
	--chat--message--bot--color: #000032;          /* 20,08:1 */
	--chat--message--user--background: #325747;
	--chat--message--user--color: #ffffff;         /* 8,11:1 */

	/* Knöpfe wie auf der Website: Navy auf Limette, 12,30:1; beim Überfahren Weiß auf
	   #02515a (Avada: color6 mit s -5 %, l -10 %), 9,02:1; Rundung 20 px. */
	--chat--button--background--primary: #bad739;
	--chat--button--color--primary: #000032;
	--chat--button--background--primary--hover: #02515a;
	--chat--button--color--primary--hover: #ffffff;
	--chat--button--border-radius: 20px;

	/* Eingabe: Navy auf Weiss. Senden als Limettenkreis, siehe Gestaltung unten. */
	--chat--input--text-color: #000032;
	--chat--input--send--button--color: #325747;
	--chat--input--send--button--color-hover: #000032;
	--chat--input--send--button--background-hover: #bad739;
	--chat--footer--background: #ffffff;
	--chat--footer--color: #000032;

	/* Sprechblase: Weiß auf #325747 8,11:1, Überfahren #008291 4,56:1,
	   gedrückt #20372d 12,76:1. Abstand 20 px zum Rand (Abschnitt 4b). */
	--chat--toggle--background: #325747;
	--chat--toggle--hover--background: #008291;
	--chat--toggle--active--background: #20372d;
	--chat--toggle--color: #ffffff;
	/* 26 statt 20 px: das Schild unter der Blase ist breiter als sie (2026-10-18). */
	--chat--window--right: 26px;
	/* Seit 2026-10-18 Platz für den Schriftzug "BiggiChat" unter der Blase (22 px) und
	   darunter Luft wie zum rechten Rand (Auftraggeber: "zu weit unten am Rand"). */
	--chat--window--bottom: 58px;
	/* 690 statt 600 px (Vorgabe des Pakets): Auf der Stage mit GT Walsheim fehlten dem
	   Vorschaltschirm 82 px, "Chat starten" lag unter der Kante (gemessen 2026-10-18).
	   Höchstens Schirmhöhe minus Rand oben 20, Blase 64, Abstand 16, Rand unten 58 px. */
	--chat--window--height: min(690px, calc(100dvh - 158px));

	/* Rundungen (2026-09-26, Auftraggeber: "zumindest die Ecken abrunden"). Das
	   Paket rundet mit 0,25 rem, heute sind 12 bis 20 px üblich. Fenster und
	   Vorschaltschirm gleich, damit der Wechsel nach "Chat starten" nicht springt. */
	--chat--window--border-radius: 16px;
	--chat--message--border-radius: 16px;
}

/* Die Ecke zum Absender hin fast spitz: die übliche Sprechblasen-Form, zeigt ohne
   Farbe, wer spricht. Klassen aus dem Bündel, nur die eine Ecke. */
#biggi-chat .chat-message.chat-message-from-bot {
	border-bottom-left-radius: 4px;
}
#biggi-chat .chat-message.chat-message-from-user {
	border-bottom-right-radius: 4px;
}

/* Schreibanzeige nach Biggis Antwort aus (seit 2026-09-27). Das Merkmal setzt
   `biggi-schreibanzeige.js`, solange die letzte Nachricht von Biggi ist; das Widget
   zeigt die Punkte sonst nach `n8n|continue` bis zu 3 s unter der fertigen Antwort.
   Nur ausgeblendet, der Knoten bleibt: Zustand und Zeitgrenze hängen nicht daran. */
#biggi-chat[data-biggi-antwort-steht] .chat-message-typing {
	display: none;
}

/* Schatten wie der Vorschaltschirm, damit beide Zustände gleich aussehen. */
#biggi-chat .chat-window {
	box-shadow: 0 8px 28px rgba(0, 0, 50, 0.18);
}

/* Überschrift in der fetten Schnittdatei. Die Website setzt "GT Walsheim Bold" als
   eigene Familie mit Gewicht 400, deshalb eine Familie und kein font-weight. */
#biggi-chat .chat-layout .chat-header h1 {
	font-family: "GT Walsheim Bold", var(--chat--font-family);
	font-weight: 400;
	line-height: 1.2;
	margin: 0;
}

/* Fett und kursiv im Verlauf (Markdown der Antworten wird zu <strong>/<em>) aus den
   ECHTEN Schnitten, wie das Child-Theme der BGW es für Fließtext tut. Die Website
   bindet jeden Schnitt als eigene Familie mit Gewicht 400 ein; "bold" auf "GT Walsheim
   Regular" rechnet der Browser deshalb künstlich fett (am 2026-09-26 auf der Stage
   gemessen: gerendert GTWalsheim-Regular bei Gewicht 700). Gewicht 400, sonst würde
   der Bold-Schnitt noch einmal künstlich verdickt. Fehlt die Schrift (lokale
   Testumgebung ohne Lizenzschrift), erscheint Fettes dort normal -- auf der Seite
   der BGW ist sie immer geladen. */
#biggi-chat .chat-message strong,
#biggi-chat .chat-message b {
	font-family: "GT Walsheim Bold", var(--chat--font-family);
	font-weight: 400;
}
#biggi-chat .chat-message em,
#biggi-chat .chat-message i {
	font-family: "GT Walsheim Regular Oblique", var(--chat--font-family);
	font-style: normal;
}

/* Abstände im Kopf gegen die Vorgaben des Themes festhalten (h1 und p erben sonst
   dessen Ränder; lokal gemessen: eine Lücke von rund 80 px unter dem Titel). Das Paket
   setzt zudem 1em Lücke zwischen Titel und Untertitel; im Entwurf 2026-10-06 und im
   Vorschaltschirm steht der Untertitel direkt darunter (4 px). */
#biggi-chat .chat-layout .chat-header {
	gap: 4px;
}
/* Seit 2026-10-18 (Auftraggeber): das Biggi-Symbol links neben Titel und Untertitel,
   im Fenster wie im Vorschaltschirm gleich groß und an derselben Stelle. Zierde wie
   das Signet an den Nachrichten, kein Text. */
#biggi-chat .chat-layout .chat-header {
	position: relative;
	padding-left: calc(16px + 44px + 12px);
}
#biggi-chat .chat-layout .chat-header::before,
#biggi-chat .biggi-vorschalt-kopf::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 50%;
	width: 44px;
	height: 44px;
	transform: translateY(-50%);
	background: var(--biggi-signet) center / contain no-repeat;
}
/* Untertitel kursiv wie im Entwurf 2026-10-06, aus dem echten Schnitt (siehe oben). */
#biggi-chat .chat-layout .chat-header p {
	margin: 0;
	font-family: "GT Walsheim Regular Oblique", var(--chat--font-family);
	font-style: normal;
}

/* Der Datenschutzhinweis (A-11) ist lang; etwas kleiner, damit er ohne Rollen in
   das Fenster passt. 14 px Navy auf Weiß bleibt bei 20,08:1. */
#biggi-chat .chat-get-started-footer {
	font-size: 14px;
	line-height: 1.45;
}

/* "Powered by n8n" auf dem Begrüßungsbildschirm (Komponente im Bündel, Klasse
   `chat-powered-by`). Nur ausgeblendet: Das Bündel bleibt unverändert. */
#biggi-chat .chat-powered-by {
	display: none;
}

/* Auf dem Telefon: Fenster über die ganze Breite, fast die ganze Höhe. */
@media (max-width: 480px) {
	#biggi-chat {
		--chat--window--right: 8px;
		/* Schriftzug "BiggiChat" (22 px) und Luft darunter, wie auf dem Desktop. */
		--chat--window--bottom: 58px;
		--chat--window--width: 100vw;
		--chat--window--height: calc(100dvh - 64px - 82px);
	}
}

/* "Neuer Chat" (bis 2026-09-28 "Gespräch beenden"). Das Plugin setzt ihn neben die Konfiguration, auf der
   Testinstanz also ans Seitenende. Seit 2026-09-28 ist er dort AUSGEBLENDET und
   erscheint erst in der Kopfzeile des Fensters (`knopfEinhaengen` in
   biggi-einbettung.js). Nur wenn die Kopfzeile fehlt, bleibt er als Rückfall
   an seinem Ort sichtbar (`biggi-knopf-frei`), im Stil der Knöpfe der Website. */
#biggi-neues-gespraech {
	display: none;
}
.chat-heading #biggi-neues-gespraech {
	display: inline-flex;
	align-items: center;
	flex: none;
	margin-left: 12px;
	font: inherit;
	font-size: 0.85em;
	line-height: 1.2;
	color: inherit;
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 14px;
	padding: 4px 12px;
	cursor: pointer;
}
.chat-heading #biggi-neues-gespraech:hover,
.chat-heading #biggi-neues-gespraech:focus-visible {
	background: #bad739;
	color: #000032;
	border-color: #bad739;
}
#biggi-neues-gespraech.biggi-knopf-frei {
	display: inline-block;
	font: inherit;
	font-family: "GT Walsheim Regular", "GT Walsheim", -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	background: #bad739;
	color: #000032;
	border: 0;
	border-radius: 20px;
	padding: 10px 29px 8px;
	cursor: pointer;
}
#biggi-neues-gespraech.biggi-knopf-frei:hover,
#biggi-neues-gespraech.biggi-knopf-frei:focus-visible {
	background: #02515a;
	color: #ffffff;
}
#biggi-neues-gespraech:focus-visible {
	outline: 2px solid #000032;
	outline-offset: 2px;
}
/* Seit 2026-10-06 ist der Kopf hell: derselbe dunkle Rahmen wie überall. */

/* ------------------------------------------------------------------------------
   Vorschaltschirm (seit 2026-09-25): Hinweis, Haken, "Chat starten" -- bevor das
   Paket geladen ist. Er sitzt an derselben Sprechblase und in derselben Größe wie
   das Fenster des Widgets; Werte deshalb aus denselben Variablen, mit den Vorgaben
   des Pakets als Rückfall (dessen Stylesheet kommt erst nach der Bestätigung).
   Kontraste auf Weiß: Navy #000032 20,08:1, #325747 8,11:1, #008291 4,56:1;
   Navy auf #eff2f1 17,82:1, Navy auf Limette 12,30:1. KEIN Weiß auf Limette (1,63:1).
   Alles mit eigenen Klassen und ausdrücklichen Werten, weil das Theme Überschriften,
   Absätze, Knöpfe und Kästchen sonst nach eigenem Geschmack setzt.
   ------------------------------------------------------------------------------ */
#biggi-chat .biggi-vorschalt-huelle {
	position: fixed;
	right: var(--chat--window--right, 20px);
	bottom: var(--chat--window--bottom, 20px);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	max-width: calc(100% - var(--chat--window--right, 20px) * 2);
	/* oben 20 px Rand, nicht noch einmal der untere (der trägt seit 2026-10-18 den Schriftzug) */
	max-height: calc(100% - var(--chat--window--bottom, 20px) - 20px);
	font-family: var(--chat--font-family);
	color: #000032;
}
#biggi-chat .biggi-vorschalt-fenster {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: var(--chat--window--width, 400px);
	height: var(--chat--window--height, 600px);
	max-width: 100%;
	max-height: 100%;
	margin-bottom: 16px;
	overflow: hidden;
	background: #ffffff;
	border: 1px solid #d6ddda;
	border-radius: var(--chat--window--border-radius, 16px);
	box-shadow: 0 8px 28px rgba(0, 0, 50, 0.18);
}
#biggi-chat .biggi-vorschalt-fenster[hidden] {
	display: none;
}
#biggi-chat .biggi-vorschalt-fenster:focus {
	outline: none;
}
#biggi-chat .biggi-vorschalt-fenster:focus-visible {
	outline: 2px solid #000032;
	outline-offset: 2px;
}
/* Kopf wie im Widget: #325747 auf #F4F6F5, 7,47:1 (seit 2026-10-06 hell) */
#biggi-chat .biggi-vorschalt-kopf {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	/* links Platz für das Biggi-Symbol (siehe Kopf des Fensters) */
	position: relative;
	padding: 16px 16px 16px calc(16px + 44px + 12px);
	background: #F4F6F5;
	color: #325747;
}
#biggi-chat .biggi-vorschalt-titel {
	margin: 0;
	padding: 0;
	font-family: "GT Walsheim Bold", var(--chat--font-family);
	font-weight: 400;
	font-size: 1.75em;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	color: #325747;
}
#biggi-chat .biggi-vorschalt-untertitel {
	margin: 4px 0 0;
	padding: 0;
	font-size: 1em;
	line-height: 1.4;
	font-family: "GT Walsheim Regular Oblique", var(--chat--font-family);
	color: #325747;
}
#biggi-chat .biggi-vorschalt-schliessen {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -8px -8px 0 0;
	padding: 0;
	background: transparent;
	color: #325747;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}
#biggi-chat .biggi-vorschalt-schliessen:hover {
	background: #d6ddda;
}
#biggi-chat .biggi-vorschalt-schliessen:focus-visible {
	outline: 2px solid #000032;
	outline-offset: -4px;
}
#biggi-chat .biggi-vorschalt-rumpf {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	padding: 20px 20px 16px;
}
/* margin: auto statt justify-content: center -- so bleibt der Anfang des Textes
   erreichbar, wenn er auf kleinen Schirmen länger ist als das Fenster. */
#biggi-chat .biggi-vorschalt-inhalt {
	margin: auto 0;
}
#biggi-chat .biggi-vorschalt-hinweis {
	margin: 0 0 20px;
	padding: 0;
	font-size: 15px;
	line-height: 1.5;
	color: #000032;
}
#biggi-chat .biggi-vorschalt-hinweis strong {
	font-family: "GT Walsheim Bold", var(--chat--font-family);
	font-weight: 400;
}
#biggi-chat .biggi-vorschalt-hinweis a {
	color: #325747;
	text-decoration: underline;
	text-underline-offset: 2px;
}
#biggi-chat .biggi-vorschalt-hinweis a:hover {
	color: #008291;
}
#biggi-chat .biggi-vorschalt-hinweis a:focus-visible {
	outline: 2px solid #000032;
	outline-offset: 2px;
	border-radius: 2px;
}
#biggi-chat .biggi-vorschalt-unsichtbar {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
#biggi-chat .biggi-vorschalt-bestaetigung {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 20px;
	padding: 12px;
	background: #eff2f1;
	border-radius: 10px;
}
#biggi-chat .biggi-vorschalt-bestaetigung input {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 1px 0 0;
	accent-color: #325747;
	cursor: pointer;
}
#biggi-chat .biggi-vorschalt-bestaetigung input:focus-visible {
	outline: 2px solid #000032;
	outline-offset: 2px;
}
#biggi-chat .biggi-vorschalt-bestaetigung label {
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.45;
	color: #000032;
	cursor: pointer;
}
/* Wie die Knöpfe der Website: Navy auf Limette, beim Überfahren Weiß auf #02515a. */
#biggi-chat .biggi-vorschalt-start {
	display: block;
	margin: 0 auto;
	min-height: 44px;
	padding: 10px 29px 8px;
	font: inherit;
	font-family: var(--chat--font-family);
	font-size: 16px;
	line-height: 1.5;
	text-transform: none;
	letter-spacing: normal;
	background: #bad739;
	color: #000032;
	border: 0;
	border-radius: 20px;
	cursor: pointer;
}
#biggi-chat .biggi-vorschalt-start:hover,
#biggi-chat .biggi-vorschalt-start:focus-visible {
	background: #02515a;
	color: #ffffff;
}
#biggi-chat .biggi-vorschalt-start:focus-visible {
	outline: 2px solid #000032;
	outline-offset: 2px;
}
/* Solange der Haken fehlt: grau, aber fokussierbar (aria-disabled). Navy auf
   #d6ddda 14,54:1 -- lesbar, auch wenn deaktivierte Bedienelemente davon
   ausgenommen wären. */
#biggi-chat .biggi-vorschalt-start[aria-disabled="true"],
#biggi-chat .biggi-vorschalt-start[aria-disabled="true"]:hover {
	background: #d6ddda;
	color: #000032;
	cursor: not-allowed;
}
#biggi-chat .biggi-vorschalt-start[aria-busy="true"] {
	cursor: progress;
}
/* Seit 2026-09-29: Ladezustand nach "Chat starten". Am Telefon dauert das erste Laden
   rund 3,5 s; ohne sichtbare Rueckmeldung wirkt das wie ein Haenger. Der Text wechselt
   sofort, ein drehender Ring hinter "Chat wird geladen ..." (Farbe der Schrift) kommt
   erst nach 0,3 s -- am Rechner und mit warmem Cache ist der Chat bis dahin da, und ein
   Ring, der nur aufblitzt, waere Unruhe (und kostete am Telefon Hauptthread). Ohne Ring
   bei weniger Bewegung (unten). Der Live-Bereich sagt dasselbe an und ist so lange nur
   optisch ausgeblendet (biggi-vorschaltschirm.js, LAEDT_KLASSE) -- sonst stuende es
   doppelt da. */
#biggi-chat .biggi-vorschalt-start[aria-busy="true"]::after {
	content: "";
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	margin-left: 0.55em;
	vertical-align: -0.1em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	opacity: 0;
	animation: biggi-vorschalt-zeigen 0.2s ease-out 0.3s forwards, biggi-vorschalt-dreht 0.8s linear 0.3s infinite;
}
@keyframes biggi-vorschalt-zeigen {
	to {
		opacity: 1;
	}
}
@keyframes biggi-vorschalt-dreht {
	to {
		transform: rotate(360deg);
	}
}
#biggi-chat.biggi-vorschalt-laedt .biggi-vorschalt-zustand {
	position: absolute;
	width: 1px;
	height: 1px;
	min-height: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
#biggi-chat .biggi-vorschalt-zustand {
	min-height: 1.45em;
	margin: 12px 0 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.45;
	text-align: center;
	color: #000032;
}
/* Die Blase wie die des Widgets: 64 px, Weiß auf #325747. */
#biggi-chat .biggi-vorschalt-blase {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	padding: 0;
	background: #325747;
	color: #ffffff;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: transform 0.15s ease, background 0.15s ease;
}
#biggi-chat .biggi-vorschalt-blase:hover {
	background: #008291;
	transform: scale(1.05);
}
#biggi-chat .biggi-vorschalt-blase:active {
	background: #20372d;
	transform: scale(0.95);
}
#biggi-chat .biggi-vorschalt-blase:focus-visible {
	outline: 3px solid #000032;
	outline-offset: 3px;
}
#biggi-chat .biggi-vorschalt-blase svg {
	width: 32px;
	height: 32px;
}
#biggi-chat .biggi-vorschalt-blase .biggi-vorschalt-zu,
#biggi-chat.biggi-vorschalt-offen .biggi-vorschalt-blase .biggi-vorschalt-auf {
	display: none;
}
#biggi-chat.biggi-vorschalt-offen .biggi-vorschalt-blase .biggi-vorschalt-zu {
	display: inline;
}

/* Seit 2026-09-28 (`biggi-zugang.js`): die Blase ist per Tastatur erreichbar und
   braucht einen sichtbaren Fokus. */
#biggi-chat .chat-window-toggle:focus-visible {
	outline: 3px solid #000032;
	outline-offset: 3px;
}

/* Nur für Screenreader: der Live-Bereich, der neue Antworten ansagt. */
.biggi-nur-vorlesen {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Arabisch (seit 2026-09-28): Jeder Absatz nimmt die Schreibrichtung seines
   Inhalts, deutsche Absätze bleiben links, arabische stehen rechts. Das Markdown
   des Pakets setzt kein `dir`. */
#biggi-chat .chat-message :is(p, li, blockquote, h1, h2, h3, h4) {
	unicode-bidi: plaintext;
	text-align: start;
}

/* Die Chat-ID unter dem Eingabefeld (seit 2026-09-28, `biggi-chat-id.js`): klein
   und ruhig, aber lesbar (#5b6770 auf Weiß 5,8 : 1, gerechnet). Ein Klick markiert sie
   ganz, zum Kopieren. */
#biggi-chat .biggi-chat-id {
	padding: 2px 12px 6px;
	font-size: 0.75em;
	line-height: 1.3;
	color: #5b6770;
	background: #ffffff;
	user-select: all;
}
/* "Chat-ID:" fett wie im Entwurf 2026-10-06 (echter Schnitt, siehe oben). */
#biggi-chat .biggi-chat-id-beschriftung {
	font-family: "GT Walsheim Bold", var(--chat--font-family);
	font-weight: 400;
}

/* Seit 2026-09-28: Nach einem Seitenwechsel geht das Fenster von selbst wieder auf
   (biggi-verlauf.js). Dann steht es sofort da, statt aus der Ecke aufzuziehen -- das
   sah aus wie ein neues Laden. Die Einbettung setzt die Klasse nur fuer dieses eine
   Oeffnen. Ohne Animation auch fuer alle, die weniger Bewegung eingestellt haben. */
#biggi-chat.biggi-sofort {
	--chat--transition-duration: 0s;
}
@media (prefers-reduced-motion: reduce) {
	#biggi-chat {
		--chat--transition-duration: 0s;
	}
	#biggi-chat .biggi-vorschalt-blase {
		transition: none;
	}
	#biggi-chat .biggi-vorschalt-start[aria-busy="true"]::after {
		display: none;
	}
}

/* ------------------------------------------------------------------------------
   Seit 2026-10-01 (Anregung des Auftraggebers, Chat des mittwald-Supports):
   Fenster vergrößern, Signet an Biggis Nachrichten, eigenes Symbol auf der Blase,
   Anstoß neben der Blase. Die beiden Bilder stehen als data:-URI hier: Sie laden
   nichts nach (das Werkzeug lässt url() nur in dieser Form zu). Seit 2026-10-18 ist
   beides das Biggi-Symbol (biggi-03.svg vom Auftraggeber, lächelnde Sprechblase mit
   Funkeln) statt BGW-Haus und Doppelblase: das Signet mit dem grünen Kreis, auf der
   Blase ohne ihn -- dort ist der Kreis die Blase selbst und behält ihre Farbwechsel.
   ------------------------------------------------------------------------------ */
#biggi-chat {
	--biggi-signet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='96' fill='%23325747'/%3E%3Cpath d='M78.9 145.9 L49 160 L56.7 128 A50 44 0 1 1 78.9 145.9 Z' fill='%23BAD739'/%3E%3Cpath d='M147.6 92.4 A50 44 0 0 1 78.9 145.9 L49 160 L56.7 128 A50 44 0 0 1 115.5 64.2' fill='none' stroke='%23FFFFFF' stroke-width='5.5' stroke-linejoin='miter' stroke-linecap='round'/%3E%3Cpath d='M136 58 Q140.8 70.2 153 75 Q140.8 79.8 136 92 Q131.2 79.8 119 75 Q131.2 70.2 136 58 Z' fill='%23FFFFFF' stroke='%23FFFFFF' stroke-width='2.5' stroke-linejoin='round'/%3E%3Ccircle cx='86' cy='102' r='6.5' fill='%23000032'/%3E%3Ccircle cx='114' cy='102' r='6.5' fill='%23000032'/%3E%3Cpath d='M83 117 Q100 134 117 117' fill='none' stroke='%23000032' stroke-width='6.5' stroke-linecap='round'/%3E%3C/svg%3E");
	--biggi-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M78.9 145.9 L49 160 L56.7 128 A50 44 0 1 1 78.9 145.9 Z' fill='%23BAD739'/%3E%3Cpath d='M147.6 92.4 A50 44 0 0 1 78.9 145.9 L49 160 L56.7 128 A50 44 0 0 1 115.5 64.2' fill='none' stroke='%23FFFFFF' stroke-width='5.5' stroke-linejoin='miter' stroke-linecap='round'/%3E%3Cpath d='M136 58 Q140.8 70.2 153 75 Q140.8 79.8 136 92 Q131.2 79.8 119 75 Q131.2 70.2 136 58 Z' fill='%23FFFFFF' stroke='%23FFFFFF' stroke-width='2.5' stroke-linejoin='round'/%3E%3Ccircle cx='86' cy='102' r='6.5' fill='%23000032'/%3E%3Ccircle cx='114' cy='102' r='6.5' fill='%23000032'/%3E%3Cpath d='M83 117 Q100 134 117 117' fill='none' stroke='%23000032' stroke-width='6.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Vergrößert (`biggi-vergroessern.js`): fast der ganze Schirm, höchstens 880 px breit.
   Abgezogen: Blase 64 px, Abstand darüber 16 px, Rand oben 20 px, unten 58 px. Der
   Vorschaltschirm nimmt dieselben Variablen, vergrößert wird aber erst nach dem Start. */
#biggi-chat.biggi-gross {
	--chat--window--width: min(880px, calc(100vw - 40px));
	--chat--window--height: calc(100dvh - 64px - 16px - 78px);
}
.chat-heading #biggi-vergroessern {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	/* -6 px oben und unten: die Zielfläche bleibt 44 px, die Titelzeile aber so hoch
	   wie der Titel (33,6 px). Sonst stand der Kopf auf dem Desktop 10 px höher als
	   im Vorschaltschirm und auf dem Telefon (gemessen 2026-10-18). */
	margin: -6px -8px -6px 4px;
	padding: 0;
	color: inherit;
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}
.chat-heading #biggi-vergroessern:hover {
	background: #d6ddda; /* #325747 darauf 5,87:1 */
}
.chat-heading #biggi-vergroessern:focus-visible {
	outline: 2px solid #000032;
	outline-offset: -4px;
}
/* "Neuer Chat" schiebt sich sonst an den Titel; beide Knöpfe stehen rechts. */
.chat-heading #biggi-neues-gespraech {
	margin-left: auto;
}

/* Biggis Nachrichten mit dem Signet links unten, wie üblich nur an der letzten einer
   Folge (ohne :has steht kein Signet, der Einzug bleibt). Nicht an der Schreibanzeige.
   Das Paket schneidet die Blase ab (overflow: hidden); für das Signet außerhalb muss
   das weg, lange Wörter und Links brechen stattdessen um. Kein Text: Das Signet ist
   Zierde, Screenreader überspringen es. */
#biggi-chat .chat-message.chat-message-from-bot {
	margin-left: 40px;
	overflow: visible;
	overflow-wrap: break-word;
}
#biggi-chat .chat-message.chat-message-from-bot :is(pre, table) {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}
#biggi-chat .chat-message.chat-message-from-bot:not(.chat-message-typing):not(:has(+ .chat-message-from-bot:not(.chat-message-typing)))::before {
	content: "";
	position: absolute;
	left: -40px;
	bottom: 0;
	width: 30px;
	height: 30px;
	background: var(--biggi-signet) center / contain no-repeat;
}

/* Die Blase des Widgets: Biggi-Symbol statt der einfachen Sprechblase des Pakets. Nur im
   geschlossenen Zustand -- das Paket zeigt dann sein Symbol "mdi-chat", erkennbar am
   Pfad; offen bleibt sein Pfeil nach unten. Fehlt der Pfad nach einem Update, bleibt
   das Symbol des Pakets stehen. Darunter der Schriftzug "BiggiChat" (Auftraggeber,
   2026-10-18), ebenfalls nur geschlossen; #325747 auf Weiß 8,11:1. Er ist Zierde:
   die Blase trägt ihren Namen schon im aria-label, der Text bleibt ungelesen. */
#biggi-chat .chat-window-toggle svg:has(path[d^="M12 3c5.5"]) {
	display: none;
}
#biggi-chat .chat-window-toggle:has(path[d^="M12 3c5.5"])::before {
	content: "";
	width: 64px;
	height: 64px;
	background: var(--biggi-symbol) center / contain no-repeat;
}
#biggi-chat .biggi-vorschalt-blase svg.biggi-vorschalt-auf {
	width: 64px;
	height: 64px;
}
#biggi-chat .chat-window-toggle,
#biggi-chat .biggi-vorschalt-blase {
	position: relative;
	/* Schutzraum (Auftraggeber, 2026-10-18): auf dunklen Flächen der Seite verschwamm
	   die Blase mit dem Grund. Weißer Ring und Schatten wie der Anstoß; auf Weiß
	   bleibt der Ring unsichtbar. */
	box-shadow: 0 0 0 3px #ffffff, 0 4px 14px rgba(0, 0, 50, 0.22);
}
#biggi-chat .chat-window-toggle:has(path[d^="M12 3c5.5"])::after,
#biggi-chat:not(.biggi-vorschalt-offen) .biggi-vorschalt-blase::after {
	content: "BiggiChat";
	content: "BiggiChat" / "";
	position: absolute;
	/* 10 px: 3 px Ring der Blase plus 7 px Luft bis zum Schild. */
	top: calc(100% + 10px);
	/* Schild wie der Anstoß, damit der Schriftzug auf jedem Grund lesbar bleibt. */
	padding: 1px 8px;
	background: #ffffff;
	border-radius: 11px;
	box-shadow: 0 2px 8px rgba(0, 0, 50, 0.16);
	left: 50%;
	transform: translateX(-50%);
	font-family: "GT Walsheim Bold", var(--chat--font-family);
	font-weight: 700;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: normal;
	word-spacing: normal;
	text-transform: none;
	color: #325747;
	white-space: nowrap;
	pointer-events: none;
}

/* Anstoß (`biggi-anstoss.js`): links neben der Blase, unten bündig. Navy auf Weiß
   20,08:1; das Kreuz #325747 auf Weiß 8,11:1, Zielfläche 28 px (WCAG 2.5.8: 24). */
#biggi-chat .biggi-anstoss {
	position: absolute;
	right: calc(64px + 14px);
	bottom: 6px;
	display: flex;
	align-items: flex-start;
	width: max-content;
	max-width: min(300px, calc(100vw - 64px - 14px - 40px));
	background: #ffffff;
	border: 1px solid #d6ddda;
	border-radius: 12px;
	box-shadow: 0 6px 20px rgba(0, 0, 50, 0.16);
	animation: biggi-anstoss-ein 0.25s ease-out;
}
#biggi-chat .biggi-anstoss[hidden] {
	display: none;
}
@keyframes biggi-anstoss-ein {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
}
#biggi-chat .biggi-anstoss-text {
	position: relative;
	display: block;
	margin: 0;
	padding: 12px 4px 12px 54px;
	font: inherit;
	font-family: var(--chat--font-family);
	font-size: 15px;
	line-height: 1.4;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	color: #000032;
	background: transparent;
	border: 0;
	border-radius: 12px;
	cursor: pointer;
}
#biggi-chat .biggi-anstoss-text::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 12px;
	width: 32px;
	height: 32px;
	background: var(--biggi-signet) center / contain no-repeat;
}
#biggi-chat .biggi-anstoss-text strong {
	display: block;
	font-family: "GT Walsheim Bold", var(--chat--font-family);
	font-weight: 400;
}
#biggi-chat .biggi-anstoss-text span {
	display: block;
}
#biggi-chat .biggi-anstoss-text:focus-visible {
	outline: 2px solid #000032;
	outline-offset: 2px;
}
#biggi-chat .biggi-anstoss-zu {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: 8px 8px 0 4px;
	padding: 0;
	color: #325747;
	background: #ffffff;
	border: 1px solid #325747;
	border-radius: 50%;
	cursor: pointer;
}
#biggi-chat .biggi-anstoss-zu:hover {
	background: #eff2f1;
}
#biggi-chat .biggi-anstoss-zu:focus-visible {
	outline: 2px solid #000032;
	outline-offset: 2px;
}

/* Auf dem Telefon füllt das Fenster den Schirm schon, und der Anstoß verdeckte Inhalt. */
@media (max-width: 480px) {
	.chat-heading #biggi-vergroessern,
	#biggi-chat .biggi-anstoss {
		display: none;
	}
	/* "BiggiChat" samt Schild ist breiter als die Blase; bei 8 px Rand stieß er an den
	   Schirmrand. */
	#biggi-chat .chat-window-toggle,
	#biggi-chat .biggi-vorschalt-blase {
		margin-right: 16px;
	}
}
@media (prefers-reduced-motion: reduce) {
	#biggi-chat .biggi-anstoss {
		animation: none;
	}
}

/* Seit 2026-10-01: Telefonnummern in Antworten sind Links (`biggi-kontaktlinks.js`).
   Eine Nummer bricht nicht mitten in der Zeile um; E-Mail-Adressen dürfen es, sonst
   ragte eine lange Adresse auf dem Telefon aus der Blase. */
#biggi-chat .chat-message a.biggi-kontaktlink[href^="tel:"] {
	white-space: nowrap;
}

/* Zeichengrenze: Navy auf Weiß (20,08:1), gut lesbar auch auf dem Telefon.
   Die Ansage steht getrennt, damit der laufende Zaehler nicht vorgelesen wird. */
#biggi-chat .biggi-zeichengrenze {
	padding: 4px 12px 6px;
	font-size: 0.875em;
	line-height: 1.4;
	color: #000032;
	background: #ffffff;
	overflow-wrap: anywhere;
}
#biggi-chat .biggi-zeichengrenze[hidden] {
	display: none;
}

/* Gestaltungsentwurf 2026-10-06: Weiss im Fuss, Zaehler links, Chat-ID rechts.
   Grid folgt nicht der Einhaengereihenfolge der beiden Beobachter. */
#biggi-chat .chat-footer {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	background: #ffffff;
}
#biggi-chat .chat-footer .chat-input,
#biggi-chat .chat-footer .chat-inputs {
	grid-column: 1 / -1;
	min-width: 0;
}
#biggi-chat .biggi-zeichengrenze {
	grid-column: 1;
	grid-row: 2;
	font-size: 0.75em;
	color: #567566; /* grau-grün, Entwurf 2026-10-06; auf Weiß 5,08:1 */
}
#biggi-chat .biggi-chat-id {
	grid-column: 2;
	grid-row: 2;
	text-align: right;
}
#biggi-chat .biggi-zeichengrenze-voll,
#biggi-chat .biggi-zeichengrenze-meldung {
	color: #A85800; /* WCAG auf Weiss: 5,17:1 */
}
#biggi-chat .biggi-zeichengrenze-meldung {
	grid-column: 1 / -1;
	grid-row: 3;
	position: relative;
	margin: 14px 12px 12px;
	padding-left: 26px;
	font-size: 0.875em;
	line-height: 1.45;
	overflow-wrap: anywhere;
}
#biggi-chat .biggi-zeichengrenze-meldung::before {
	content: "\26A0";
	position: absolute;
	left: 0;
	color: #ff9e14;
	font-size: 1.4em;
	line-height: 1;
}
#biggi-chat .biggi-zeichengrenze-meldung[hidden] {
	display: none;
}
#biggi-chat[data-biggi-grenze] .chat-inputs {
	border-bottom: 2px solid #ff9e14;
}
/* Hintergrundmuster nach der Designvorlage (Übergabe 2026-10-07, Ordner 03_Finals/Uebergabe:
   bg-grey.png 1892x1818 px, bg-transp.png, 20261006-BGW-Biggi_fin.pdf). Gemessen an bg-grey.png:
   Fläche #F4F6F5, Symbole #E1E6E4; zwei Symbole im Wechsel, ein volles Pluszeichen 9x9 px
   (Arme 3 px breit) und ein halbes (6x9 px, linker Arm fehlt, Form "├"); beide Gruppen
   liegen auf einem Quadratraster von 26 px, das halbe Raster um (13|13) versetzt (Abstand
   zum nächsten Symbol rund 18 px); das Raster ist um etwa 6 Grad gedreht (steigt nach rechts),
   die Dichte nimmt von 0 (oberhalb etwa 55 % der Bildhöhe) auf voll (ab etwa 80 %) zu, die
   Kante steigt nach rechts an. Die PDF zeigt das Muster mit dem Faktor 0,5 der PNG (Raster
   13 px, Symbole 4,5 px, Arme 1,5 px); so ist die Kachel gezeichnet (13x13 px).
   Nicht nachgebildet: die Drehung (eine gedrehte Kachel wiederholt sich erst nach rund
   250 px); die Welle der Kante steckt im Verlauf (rund 6 Grad schräg).
   SVG statt PNG: Nachladeverbot (url() nur als eingebettetes SVG, werkzeug/chat-widget-holen.py),
   die PNG wiegt rund 330 KB, und ihre Skalierung auf die Widgetbreite machte die Symbole unscharf.
   Die Kachel misst unter 0,5 KB und bleibt in jeder Fenstergröße scharf. Liegt hinter Nachrichten
   und Symbolen; der Kopf trägt dieselbe Fläche ohne Muster. Text steht in weißen Blasen
   oder dunkel (#325747/#000032) auf #F4F6F5, 7,47:1 beziehungsweise 18,50:1. */
#biggi-chat .chat-body {
	background-color: #F4F6F5;
	background-image: linear-gradient(174deg, #F4F6F5 0%, #F4F6F5 30%, rgba(244, 246, 245, 0) 80%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Cpath fill='%23E1E6E4' d='M3.5 2h1.5v1.5h1.5v1.5h-1.5v1.5h-1.5v-1.5h-1.5v-1.5h1.5zM9.25 8.25h1.5v1.5h1.5v1.5h-1.5v1.5h-1.5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat, repeat;
}
#biggi-chat .chat-input-send-button {
	flex: none;
	align-self: center;
	width: 44px;
	height: 44px;
	min-width: 44px;
	margin: 8px;
	padding: 10px;
	border: 0;
	border-radius: 50%;
	background: #bad739;
	color: #325747; /* Pfeil auf Limette: 4,97:1 */
}
#biggi-chat .chat-input-send-button:hover {
	background: #bad739;
	color: #000032;
}
#biggi-chat .chat-input-send-button:focus-visible,
#biggi-chat .biggi-schnellwahl button:focus-visible {
	outline: 2px solid #000032;
	outline-offset: 3px;
}
#biggi-chat .biggi-schnellwahl {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin: 12px 0;
	min-width: 0;
}
#biggi-chat .biggi-schnellwahl[hidden] {
	display: none;
}
#biggi-chat .biggi-schnellwahl button {
	max-width: 100%;
	min-height: 44px;
	padding: 8px 14px;
	font: inherit;
	font-size: 0.875em;
	line-height: 1.4;
	text-align: left;
	white-space: normal;
	overflow-wrap: anywhere;
	color: #000032;
	background: #ffffff;
	border: 1px solid #325747;
	border-radius: 24px;
	cursor: pointer;
}
#biggi-chat .biggi-schnellwahl button:hover {
	background: #eff2f1;
}
#biggi-chat .biggi-vorschalt-hinweis p {
	margin: 0 0 14px;
	padding: 0;
	font: inherit;
	color: inherit;
}
#biggi-chat .biggi-vorschalt-hinweis p:last-child {
	margin-bottom: 0;
}

/* Das Eingabefeld bleibt auf schmalen Telefonen innerhalb des Footers. Es waechst mit dem Text, aber hoechstens
   auf etwa sieben Zeilen und scrollt dann (Entwurf 2026-10-06): Ohne Grenze schob ein Text von 1.000 Zeichen
   Zaehler, Meldung und Senden-Knopf aus dem Fenster (Browserprobe 2026-10-06). */
#biggi-chat .chat-inputs textarea {
	min-width: 0;
	max-height: 10.5em;
	overflow-y: auto;
}
@media (max-width: 480px) {
	#biggi-chat .chat-window {
		max-width: calc(100vw - 16px);
	}
}

/* ------------------------------------------------------------------------------
   Seit 2026-10-18 (Auftraggeber, Stage): Der Knopf "nach oben" des Themes Avada
   (#toTop, unten rechts, 48 x 35 px) lag unter dem Schriftzug "BiggiChat". Er rückt
   links neben Blase und Schild: Mitte der Blase 26 + 32 px vom Rand, halbes Schild
   46 px, dazu 32 px Luft (12 px waren dem Auftraggeber zu dicht). Nur, wenn Biggi
   auf der Seite ist.
   ------------------------------------------------------------------------------ */
body:has(#biggi-chat) #toTop.fusion-top-top-link {
	right: calc(26px + 32px + 46px + 32px);
}

/* Niedrige Schirme (Laptop 1366 x 768): Der Vorschaltschirm passte nicht, "Chat
   starten" lag unter der Kante (gemessen 2026-10-18, 86 px). Etwas dichter gesetzt;
   der Text bleibt bei 14 px. */
@media (max-height: 800px) {
	#biggi-chat .biggi-vorschalt-rumpf {
		padding: 14px 20px 12px;
	}
	#biggi-chat .biggi-vorschalt-hinweis {
		margin-bottom: 14px;
		font-size: 14px;
		line-height: 1.42;
	}
	#biggi-chat .biggi-vorschalt-hinweis p {
		margin-bottom: 10px;
	}
	#biggi-chat .biggi-vorschalt-bestaetigung {
		margin-bottom: 14px;
		padding: 10px 12px;
	}
	#biggi-chat .biggi-vorschalt-bestaetigung label {
		font-size: 15px;
		line-height: 1.4;
	}
}