/* PEXI Anfrage-Chat (mu-plugin pexi-anfrage, Fassung 1.3.0).
   Vorbild: Assistent von Tanner Umzüge. Farben von pexi.ch: Schwarz als
   Hauptfarbe, Petrol #6CB9B8 als Akzent (Hover der Website), Rot nur im Logo.
   Alles unter .pexi-chat und mit eigenen Zuständen für :hover und :focus,
   weil das Theme hello-elementor Knöpfe sonst rosa einfärbt. */

.pexi-chat {
	--pxc-schwarz: #0b0b0b;
	--pxc-text: #2f282e;
	--pxc-leise: #6b7280;
	--pxc-linie: #e5e7eb;
	--pxc-rand: #d3d3d3;
	--pxc-flaeche: #f6f6f3;
	--pxc-akzent: #6cb9b8;
	--pxc-akzent-tief: #2f7f7e;
	--pxc-akzent-hell: #e7f4f3;
	--pxc-fehler: #b42318;
	--pxc-fehler-hell: #fef3f2;
	--pxc-r: 12px;
	color: var(--pxc-text);
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
	letter-spacing: normal;
}

.pexi-chat *,
.pexi-chat *::before,
.pexi-chat *::after { box-sizing: border-box; }

.pexi-chat p { margin: 0; }

/* ---------- Rahmen ---------- */

.pexi-chat .pxc-rahmen { display: grid; gap: 28px; align-items: start; }

@media (min-width: 980px) {
	.pexi-chat .pxc-rahmen { grid-template-columns: minmax(0, 1fr) 270px; gap: 40px; }
	.pexi-chat .pxc-seite { position: sticky; top: 120px; }
}

.pexi-chat .pxc-haupt {
	border: 1px solid var(--pxc-linie);
	border-radius: 16px;
	background: var(--pxc-flaeche);
	overflow: hidden;
}

/* ---------- Schritte und Balken ---------- */

.pexi-chat .pxc-schritte {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 0;
	padding: 16px 20px;
	list-style: none;
	background: #ffffff;
	border-bottom: 1px solid var(--pxc-linie);
}

.pexi-chat .pxc-schritt { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; padding: 0; color: var(--pxc-leise); }

.pexi-chat .pxc-schritt b {
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	border: 1.5px solid var(--pxc-rand);
	font-size: 13px;
	font-weight: 800;
	color: var(--pxc-leise);
	background: #ffffff;
}

.pexi-chat .pxc-schritt span { display: flex; flex-direction: column; min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.25; }
.pexi-chat .pxc-schritt em { font-style: normal; }
.pexi-chat .pxc-schritt small { font-size: 12px; font-weight: 500; color: var(--pxc-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pexi-chat .pxc-schritt[data-stand="aktiv"] { color: var(--pxc-schwarz); }
.pexi-chat .pxc-schritt[data-stand="aktiv"] b { background: var(--pxc-schwarz); border-color: var(--pxc-schwarz); color: #ffffff; }
.pexi-chat .pxc-schritt[data-stand="fertig"] { color: var(--pxc-schwarz); }
.pexi-chat .pxc-schritt[data-stand="fertig"] b { background: var(--pxc-akzent); border-color: var(--pxc-akzent); color: #ffffff; }

.pexi-chat .pxc-balken { height: 3px; background: var(--pxc-linie); }
.pexi-chat .pxc-balken span { display: block; height: 100%; width: 0; background: var(--pxc-akzent); transition: width 0.4s ease; }

/* ---------- Verlauf ---------- */

.pexi-chat .pxc-verlauf { display: flex; flex-direction: column; gap: 14px; padding: 26px 24px 22px; }

.pexi-chat .pxc-blase { display: flex; max-width: 640px; }
.pexi-chat .pxc-blase--pexi { gap: 12px; align-items: flex-start; }
.pexi-chat .pxc-blase--gast { justify-content: flex-end; align-self: flex-end; max-width: 80%; }

.pexi-chat .pxc-marke {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #ffffff;
	border: 1px solid var(--pxc-linie);
}

.pexi-chat .pxc-marke img { display: block; width: 24px; height: auto; max-width: none; }

.pexi-chat .pxc-blase--pexi .pxc-inhalt {
	padding: 14px 18px 15px;
	background: #ffffff;
	border: 1px solid var(--pxc-linie);
	border-radius: 4px 16px 16px 16px;
	box-shadow: 0 1px 2px rgba(15, 15, 15, 0.04);
}

.pexi-chat .pxc-frage { font-size: 17px; font-weight: 800; line-height: 1.3; color: var(--pxc-schwarz); text-wrap: balance; }
.pexi-chat .pxc-kontext { margin-top: 6px !important; font-size: 14.5px; line-height: 1.55; color: var(--pxc-leise); }
.pexi-chat .pxc-kontext a { color: var(--pxc-schwarz); font-weight: 700; }

.pexi-chat .pxc-blase--gast .pxc-inhalt,
.pexi-chat .pxc-blase--gast .pxc-aendern,
.pexi-chat .pxc-blase--gast .pxc-aendern:focus {
	display: block;
	margin: 0;
	padding: 11px 16px;
	border: 0;
	border-radius: 16px 4px 16px 16px;
	background: var(--pxc-schwarz);
	color: #ffffff;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
	text-transform: none;
	white-space: normal;
	overflow-wrap: anywhere;
}

.pexi-chat .pxc-blase--gast .pxc-aendern { cursor: pointer; transition: background-color 0.15s ease; }
.pexi-chat .pxc-blase--gast .pxc-aendern:hover { background: #333333; color: #ffffff; }
.pexi-chat .pxc-blase--gast .pxc-aendern:focus-visible { outline: 2px solid var(--pxc-akzent); outline-offset: 2px; }

.pexi-chat .pxc-blase--danke .pxc-inhalt { border-color: var(--pxc-akzent); box-shadow: 0 0 0 3px var(--pxc-akzent-hell); }
.pexi-chat .pxc-blase--danke:focus { outline: none; }

.pexi-chat .pxc-neu { animation: pxc-rein 0.28s ease-out both; }

@keyframes pxc-rein {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

.pexi-chat .pxc-tippt { display: inline-flex; gap: 5px; padding: 6px 2px; }
.pexi-chat .pxc-tippt span { width: 7px; height: 7px; border-radius: 50%; background: #a3a3a3; animation: pxc-punkt 1s infinite ease-in-out; }
.pexi-chat .pxc-tippt span:nth-child(2) { animation-delay: 0.15s; }
.pexi-chat .pxc-tippt span:nth-child(3) { animation-delay: 0.3s; }

@keyframes pxc-punkt {
	0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
	40% { opacity: 1; transform: translateY(-3px); }
}

/* ---------- Eingabe ---------- */

.pexi-chat .pxc-eingabe { display: grid; gap: 14px; padding: 20px 24px 6px; background: #ffffff; border-top: 1px solid var(--pxc-linie); }
.pexi-chat .pxc-eingabe:empty { display: none; }
.pexi-chat .pxc-eingabe[data-typ="fertig"] { display: none; }

.pexi-chat .pxc-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.pexi-chat .pxc-chip,
.pexi-chat .pxc-chip:focus {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	margin: 0;
	padding: 10px 16px;
	border: 1.5px solid var(--pxc-rand);
	border-radius: var(--pxc-r);
	background: #ffffff;
	color: var(--pxc-schwarz);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
	text-align: left;
	text-transform: none;
	white-space: normal;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pexi-chat .pxc-chip:hover { border-color: var(--pxc-schwarz); background: #ffffff; color: var(--pxc-schwarz); }
.pexi-chat .pxc-chip[aria-pressed="true"] { border-color: var(--pxc-akzent-tief); background: var(--pxc-akzent-hell); color: var(--pxc-schwarz); }
.pexi-chat .pxc-chip:focus-visible { outline: 2px solid var(--pxc-akzent); outline-offset: 2px; }

.pexi-chat .pxc-label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; line-height: 1.3; color: #3e3e3e; }
.pexi-chat .pxc-frei { font-weight: 400; color: var(--pxc-leise); }

.pexi-chat .pxc-feld,
.pexi-chat input.pxc-feld,
.pexi-chat textarea.pxc-feld {
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 11px 14px;
	border: 1px solid var(--pxc-rand);
	border-radius: var(--pxc-r);
	background: #ffffff;
	color: #183c51;
	font: inherit;
	font-size: 16px;
	line-height: 1.4;
	box-shadow: none;
}

.pexi-chat textarea.pxc-feld { min-height: 110px; resize: vertical; }
.pexi-chat .pxc-feld::placeholder { color: #9ca3af; opacity: 1; }
.pexi-chat .pxc-feld:focus { outline: none; border-color: var(--pxc-schwarz); box-shadow: 0 0 0 1px var(--pxc-schwarz); }
.pexi-chat [aria-invalid="true"] { border-color: var(--pxc-fehler) !important; box-shadow: 0 0 0 1px var(--pxc-fehler) !important; }

.pexi-chat .pxc-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.pexi-chat .pxc-datum[hidden] { display: none; }

/* Dateien */
.pexi-chat .pxc-ablage { position: relative; border: 1.5px dashed #b9b9b9; border-radius: var(--pxc-r); background: var(--pxc-flaeche); transition: border-color 0.15s ease, background-color 0.15s ease; }
.pexi-chat .pxc-ablage.ist-ziel { border-color: var(--pxc-akzent-tief); background: var(--pxc-akzent-hell); }
.pexi-chat .pxc-datei-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.pexi-chat .pxc-ablage-text { display: block; margin: 0; padding: 16px 18px; font-size: 15px; line-height: 1.4; text-align: center; cursor: pointer; color: var(--pxc-text); }
.pexi-chat .pxc-ablage-text strong { text-decoration: underline; text-underline-offset: 3px; }
.pexi-chat .pxc-ablage-text span { display: block; margin-top: 5px; font-size: 13px; color: var(--pxc-leise); }
.pexi-chat .pxc-ablage-text a { color: inherit; text-decoration: underline; }
.pexi-chat .pxc-datei-input:focus-visible + .pxc-ablage-text { outline: 2px solid var(--pxc-akzent); outline-offset: 2px; border-radius: var(--pxc-r); }

.pexi-chat .pxc-dateiliste { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pexi-chat .pxc-dateiliste:empty { display: none; }
.pexi-chat .pxc-dateiliste li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 6px 6px 6px 12px; border: 1px solid var(--pxc-linie); border-radius: 10px; font-size: 14px; }
.pexi-chat .pxc-dateiname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pexi-chat .pxc-dateigroesse { flex: 0 0 auto; color: var(--pxc-leise); font-variant-numeric: tabular-nums; }

.pexi-chat .pxc-entfernen,
.pexi-chat .pxc-entfernen:hover,
.pexi-chat .pxc-entfernen:focus {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--pxc-leise);
	font-size: 20px;
	line-height: 34px;
	cursor: pointer;
}

.pexi-chat .pxc-entfernen:hover { background: var(--pxc-flaeche); color: var(--pxc-schwarz); }

.pexi-chat .pxc-hinweis { font-size: 14px; color: var(--pxc-fehler); }
.pexi-chat .pxc-hinweis[hidden] { display: none; }

/* Knöpfe */
.pexi-chat .pxc-aktion { display: flex; justify-content: flex-end; gap: 10px; }

.pexi-chat .pxc-weiter,
.pexi-chat .pxc-weiter:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	margin: 0;
	padding: 14px 26px;
	border: 1.5px solid var(--pxc-schwarz);
	border-radius: var(--pxc-r);
	background: var(--pxc-schwarz);
	color: #ffffff;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.8px;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pexi-chat .pxc-weiter:hover { background: var(--pxc-akzent); border-color: var(--pxc-akzent); color: #ffffff; }
.pexi-chat .pxc-weiter:focus-visible { outline: 2px solid var(--pxc-akzent); outline-offset: 3px; }
.pexi-chat .pxc-weiter[disabled],
.pexi-chat .pxc-weiter[disabled]:hover { cursor: not-allowed; background: #cfcfcf; border-color: #cfcfcf; color: #ffffff; }
.pexi-chat .pxc-weiter--leise,
.pexi-chat .pxc-weiter--leise:focus { background: #ffffff; color: var(--pxc-schwarz); }
.pexi-chat .pxc-weiter--leise:hover { background: var(--pxc-flaeche); border-color: var(--pxc-schwarz); color: var(--pxc-schwarz); }

/* Kontakt */
.pexi-chat .pxc-kontakt { display: grid; gap: 16px; margin: 0; }
.pexi-chat .pxc-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.pexi-chat .pxc-zelle { min-width: 0; }
.pexi-chat .pxc-breit { grid-column: 1 / -1; }

.pexi-chat .pxc-zustimmung { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.pexi-chat .pxc-zustimmung input[type="checkbox"] { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--pxc-schwarz); }
.pexi-chat .pxc-zustimmung label { display: block; margin: 0; font-size: 14px; line-height: 1.5; color: #3e3e3e; }
.pexi-chat .pxc-zustimmung a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.pexi-chat .pxc-fehler { padding: 12px 14px; border-left: 4px solid var(--pxc-fehler); border-radius: 8px; background: var(--pxc-fehler-hell); color: var(--pxc-fehler); font-size: 14.5px; }
.pexi-chat .pxc-fehler[hidden] { display: none; }
.pexi-chat .pxc-fehler ul { margin: 6px 0; padding-left: 18px; }
.pexi-chat .pxc-fehler a { color: inherit; font-weight: 700; }

.pexi-chat .pxc-aktion--senden { display: grid; grid-template-columns: 1fr 1fr; }
.pexi-chat .pxc-aktion--senden .pxc-weiter { width: 100%; }

.pexi-chat .pxc-anrufen {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 8px 12px;
	border: 1.5px solid var(--pxc-schwarz);
	border-radius: var(--pxc-r);
	color: var(--pxc-schwarz);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.4px;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.pexi-chat .pxc-anrufen span { font-size: 15px; letter-spacing: 0; text-transform: none; font-weight: 800; white-space: nowrap; }
.pexi-chat .pxc-anrufen:hover { background: var(--pxc-flaeche); color: var(--pxc-schwarz); }

/* Fuss: Zurück und Zähler */
.pexi-chat .pxc-fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 4px 24px 12px; background: #ffffff; }
.pexi-chat .pxc-eingabe[data-typ="fertig"] + .pxc-fuss { display: none; }

.pexi-chat .pxc-zurueck,
.pexi-chat .pxc-zurueck:focus {
	margin: 0;
	padding: 8px 4px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--pxc-leise);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	text-transform: none;
	cursor: pointer;
}

.pexi-chat .pxc-zurueck::before { content: "← "; }
.pexi-chat .pxc-zurueck:hover { background: transparent; color: var(--pxc-schwarz); }
.pexi-chat .pxc-zurueck[hidden] { display: none; }
.pexi-chat .pxc-zaehler { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--pxc-leise); font-variant-numeric: tabular-nums; }

/* ---------- Seite rechts ---------- */

.pexi-chat .pxc-seite { display: grid; gap: 10px; font-size: 15px; line-height: 1.55; color: var(--pxc-text); }
.pexi-chat .pxc-seite-titel { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--pxc-akzent-tief); }
.pexi-chat .pxc-seite-titel::before { content: ""; width: 24px; height: 2px; background: var(--pxc-akzent); }
.pexi-chat .pxc-seite-klein { margin-top: 10px !important; font-size: 13px; color: var(--pxc-leise); }
.pexi-chat .pxc-seite-tel { font-size: 22px; font-weight: 800; color: var(--pxc-schwarz); text-decoration: none; }
.pexi-chat .pxc-seite-link { color: var(--pxc-schwarz); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.pexi-chat .pxc-honig { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.pexi-chat .pxc-ohne-js { padding: 16px; border: 1px solid var(--pxc-linie); border-radius: var(--pxc-r); }

/* ---------- Telefon ---------- */

@media (max-width: 979px) {
	.pexi-chat .pxc-seite { grid-template-columns: 1fr 1fr; align-items: start; gap: 4px 12px; }
	.pexi-chat .pxc-seite-titel,
	.pexi-chat .pxc-seite > p:nth-child(2) { display: none; }
	.pexi-chat .pxc-seite-klein { margin-top: 0 !important; grid-row: 1; }
	.pexi-chat .pxc-seite-tel { grid-row: 2; font-size: 18px; }
	.pexi-chat .pxc-seite-link { grid-row: 2; font-size: 14px; }
}

@media (max-width: 620px) {
	.pexi-chat .pxc-haupt { border-radius: 14px; }
	.pexi-chat .pxc-schritte { padding: 12px 12px; gap: 4px; }
	.pexi-chat .pxc-schritt { gap: 6px; }
	.pexi-chat .pxc-schritt b { flex-basis: 24px; width: 24px; height: 24px; font-size: 12px; }
	.pexi-chat .pxc-schritt span { font-size: 12px; }
	.pexi-chat .pxc-schritt small { display: none; }
	.pexi-chat .pxc-schritt:not([data-stand="aktiv"]) span { display: none; }
	.pexi-chat .pxc-verlauf { padding: 18px 12px 16px; gap: 12px; }
	.pexi-chat .pxc-marke { flex-basis: 32px; width: 32px; height: 32px; }
	.pexi-chat .pxc-marke img { width: 20px; }
	.pexi-chat .pxc-blase--pexi { gap: 8px; }
	.pexi-chat .pxc-blase--pexi .pxc-inhalt { padding: 12px 14px 13px; }
	.pexi-chat .pxc-frage { font-size: 16px; }
	.pexi-chat .pxc-kontext { font-size: 14px; }
	.pexi-chat .pxc-blase--gast { max-width: 88%; }
	.pexi-chat .pxc-eingabe { padding: 16px 12px 4px; }
	.pexi-chat .pxc-chip { min-height: 44px; padding: 9px 13px; font-size: 14.5px; }
	.pexi-chat .pxc-fuss { padding: 2px 12px 10px; }
	.pexi-chat .pxc-aktion .pxc-weiter { flex: 1 1 auto; }
	.pexi-chat .pxc-weiter { padding-left: 14px; padding-right: 14px; letter-spacing: 0.4px; }
	.pexi-chat .pxc-label { font-size: 13px; }
}

@media (max-width: 359px) {
	.pexi-chat .pxc-raster { grid-template-columns: 1fr; }
	.pexi-chat .pxc-aktion--senden { grid-template-columns: 1fr; }
}

/* Touch: Nach dem Tippen bleibt :hover am Finger hängen, und die nächste
   Frage legt ihren Knopf genau dorthin. Ohne Maus also kein Hover-Rahmen. */
@media (hover: none) {
	.pexi-chat .pxc-chip:not([aria-pressed="true"]):hover { border-color: var(--pxc-rand); }
}

@media (prefers-reduced-motion: reduce) {
	.pexi-chat *,
	.pexi-chat *::before,
	.pexi-chat *::after { animation: none !important; transition: none !important; }
}

/* =====================================================================
   Ganze Seite (seit 1.2.0, Vorlage seite.php auf /kontakt/)
   Bildschirm ab 1025 px: Kopf und klebende Leiste unten 1:1 wie auf der
   Website, die grossen Blöcke der Fusszeile fallen weg (Entscheid Besim,
   23.10.2026). Dazwischen links die dunkle Spalte mit den Schritten, in der
   Mitte der Chat, ab 1280 px rechts «Gut zu wissen» (schmaler als Schublade).
   Telefon und Tablet: Kopf und Fusszeile ganz weg, eigene App-Leiste, wie
   bei Tanner und Ajeti. Gescrollt wird immer das Dokument; die Spalten am Bildschirm
   scrollen nur, wenn ihr Inhalt höher ist als das Fenster.
   ===================================================================== */

.pxa-seite { display: block; margin: 0; padding: 0; }

.pexi-chat--seite {
	--pxa-kopf: 60px;   /* Kopf der Website, misst anfrage.js nach */
	--pxa-fuss: 60px;   /* klebende Leiste der Website unten, misst anfrage.js nach */
	--pxa-hoehe: calc(100vh - var(--pxa-kopf) - var(--pxa-fuss));
	--pxa-breite: 760px;
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	background: var(--pxc-flaeche);
}

@supports (height: 100svh) {
	.pexi-chat--seite { --pxa-hoehe: calc(100svh - var(--pxa-kopf) - var(--pxa-fuss)); }
}

.pexi-chat--seite svg { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Von der Fusszeile der Website bleibt nur die klebende Leiste (mit ihrem
   Platzhalter); die grossen Blöcke und die Copyright-Zeile fallen weg. */
body.pexi-anfrage-seite .elementor-location-footer > .e-parent:not(.elementor-sticky) { display: none !important; }

/* ---------- Chat in der Mitte ---------- */

.pexi-chat--seite .pxc-haupt {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: var(--pxa-hoehe);
	border: 0;
	border-radius: 0;
	background: var(--pxc-flaeche);
	overflow: visible; /* sonst kleben Leiste und Eingabe nicht */
}

.pexi-chat--seite .pxc-oben { position: sticky; top: var(--pxa-kopf); z-index: 20; }
.pexi-chat--seite .pxc-leiste { display: none; }
.pexi-chat--seite .pxc-balken { height: 4px; }

.pexi-chat--seite .pxc-verlauf {
	flex: 1 0 auto;
	justify-content: flex-end;
	width: 100%;
	max-width: var(--pxa-breite);
	margin: 0 auto;
	padding: 40px 32px 28px;
}

.pexi-chat--seite .pxc-unten {
	position: sticky;
	bottom: var(--pxa-fuss);
	z-index: 10;
	background: #ffffff;
	border-top: 1px solid var(--pxc-linie);
	box-shadow: 0 -12px 28px rgba(15, 15, 15, 0.05);
}

.pexi-chat--seite .pxc-unten--lang { position: static; box-shadow: none; }
.pexi-chat--seite.ist-fertig .pxc-unten { display: none; }

.pexi-chat--seite .pxc-eingabe,
.pexi-chat--seite .pxc-fuss { width: 100%; max-width: var(--pxa-breite); margin: 0 auto; background: transparent; }
.pexi-chat--seite .pxc-eingabe { padding: 22px 32px 4px; border-top: 0; }
.pexi-chat--seite .pxc-fuss { padding: 4px 32px 14px; }

/* ---------- Spalte links (Bildschirm) ---------- */

.pexi-chat--seite .pxc-spalte-zurueck,
.pexi-chat--seite .pxc-spalte-zurueck:hover,
.pexi-chat--seite .pxc-spalte-zurueck:focus {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	color: rgba(255, 255, 255, 0.74);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.pexi-chat--seite .pxc-spalte-zurueck:hover { color: #ffffff; }

.pexi-chat--seite .pxc-ueber { margin-top: 34px; font-size: 12px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--pxc-akzent); }

.pexi-chat--seite .pxc-titel {
	margin: 8px 0 0;
	padding: 0;
	color: #ffffff;
	font-size: 32px;
	font-weight: 900;
	line-height: 1.04;
	letter-spacing: -0.3px;
	text-transform: uppercase;
	text-wrap: balance;
}

.pexi-chat--seite .pxc-lead { margin-top: 14px; }

.pexi-chat--seite .pxc-schritte { grid-template-columns: 1fr; gap: 4px; margin: 30px 0 0; padding: 0; background: none; border: 0; }
.pexi-chat--seite .pxc-schritt { gap: 12px; padding: 10px 12px; border-radius: 12px; color: rgba(255, 255, 255, 0.6); }
.pexi-chat--seite .pxc-schritt b { background: transparent; border-color: rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.75); }
.pexi-chat--seite .pxc-schritt span { font-size: 15px; }
.pexi-chat--seite .pxc-schritt small { margin-top: 2px; font-size: 14px; font-weight: 700; color: #ffffff; white-space: normal; }
.pexi-chat--seite .pxc-schritt[data-stand="aktiv"] { background: rgba(255, 255, 255, 0.08); color: #ffffff; }
.pexi-chat--seite .pxc-schritt[data-stand="aktiv"] b { background: var(--pxc-akzent); border-color: var(--pxc-akzent); color: var(--pxc-schwarz); }
.pexi-chat--seite .pxc-schritt[data-stand="fertig"] { color: #ffffff; }
.pexi-chat--seite .pxc-schritt[data-stand="fertig"] b { background: transparent; border-color: var(--pxc-akzent); color: var(--pxc-akzent); }
.pexi-chat--seite .pxc-schritt[data-stand="fertig"] em:not(:only-child) { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }

.pexi-chat--seite .pxc-spalte-fuss { display: grid; gap: 4px; margin-top: auto; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.pexi-chat--seite .pxc-spalte .pxc-klein { font-size: 13px; color: rgba(255, 255, 255, 0.6); }

.pexi-chat--seite .pxc-tel,
.pexi-chat--seite .pxc-tel:hover,
.pexi-chat--seite .pxc-tel:focus { justify-self: start; color: #ffffff; font-size: 22px; font-weight: 800; letter-spacing: 0.2px; text-decoration: none; }
.pexi-chat--seite .pxc-tel:hover { color: var(--pxc-akzent); }

.pexi-chat--seite .pxc-info-link,
.pexi-chat--seite .pxc-info-link:hover,
.pexi-chat--seite .pxc-info-link:focus {
	justify-self: start;
	margin: 12px 0 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #ffffff;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-transform: none;
	cursor: pointer;
}

.pexi-chat--seite .pxc-info-link:hover { color: var(--pxc-akzent); }
.pexi-chat--seite .pxc-spalte a:focus-visible,
.pexi-chat--seite .pxc-info-link:focus-visible { outline: 2px solid var(--pxc-akzent); outline-offset: 3px; border-radius: 4px; }

/* ---------- Gut zu wissen (rechts oder als Schublade) ---------- */

.pexi-chat--seite .pxc-info { padding: 30px 26px 28px; background: #ffffff; color: var(--pxc-text); font-size: 14.5px; line-height: 1.6; }
.pexi-chat--seite .pxc-info-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; }
.pexi-chat--seite .pxc-info-titel { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--pxc-akzent-tief); }
.pexi-chat--seite .pxc-info-titel::before { content: ""; width: 24px; height: 2px; background: var(--pxc-akzent); }

.pexi-chat--seite .pxc-info-zu,
.pexi-chat--seite .pxc-info-zu:hover,
.pexi-chat--seite .pxc-info-zu:focus {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: -10px -10px -10px 0;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--pxc-schwarz);
	cursor: pointer;
}

.pexi-chat--seite .pxc-info-zu:hover { background: var(--pxc-flaeche); }
.pexi-chat--seite .pxc-info-zu:focus-visible { outline: 2px solid var(--pxc-akzent); outline-offset: -2px; }
.pexi-chat--seite .pxc-info-zu svg { width: 20px; height: 20px; }

.pexi-chat--seite .pxc-info-lead { margin-top: 14px; color: var(--pxc-leise); }
.pexi-chat--seite .pxc-info details { margin: 0; border-bottom: 1px solid var(--pxc-linie); }
.pexi-chat--seite .pxc-info-lead + details { margin-top: 18px; border-top: 1px solid var(--pxc-linie); }

.pexi-chat--seite .pxc-info summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 15px 0;
	color: var(--pxc-schwarz);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	list-style: none;
	cursor: pointer;
}

.pexi-chat--seite .pxc-info summary::-webkit-details-marker { display: none; }
.pexi-chat--seite .pxc-info summary::after { content: ""; flex: 0 0 9px; width: 9px; height: 9px; margin-right: 3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform 0.2s ease; }
.pexi-chat--seite .pxc-info details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.pexi-chat--seite .pxc-info summary:focus-visible { outline: 2px solid var(--pxc-akzent); outline-offset: 2px; border-radius: 4px; }
.pexi-chat--seite .pxc-info details p { padding: 0 0 16px; }

.pexi-chat--seite .pxc-info a,
.pexi-chat--seite .pxc-info a:hover,
.pexi-chat--seite .pxc-info a:focus { color: var(--pxc-schwarz); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.pexi-chat--seite .pxc-info a:hover { color: var(--pxc-akzent-tief); }

.pexi-chat--seite .pxc-info-adresse { display: grid; gap: 8px; margin-top: 24px; }
.pexi-chat--seite .pxc-info .pxc-klein { font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--pxc-leise); }

.pexi-chat--seite .pxc-schleier[hidden] { display: none; }

/* ---------- Bildschirm ---------- */

@media (min-width: 1025px) {
	.pexi-chat--seite { grid-template-columns: 300px minmax(0, 1fr); }

	.pexi-chat--seite .pxc-spalte {
		position: sticky;
		top: var(--pxa-kopf);
		align-self: start;
		display: flex;
		flex-direction: column;
		height: var(--pxa-hoehe);
		overflow-y: auto;
		padding: 34px 30px 26px;
		background: var(--pxc-schwarz);
		color: rgba(255, 255, 255, 0.74);
		font-size: 15px;
		line-height: 1.55;
	}
}

@media (min-width: 1280px) {
	.pexi-chat--seite { grid-template-columns: 330px minmax(0, 1fr) 320px; }
	.pexi-chat--seite .pxc-spalte { padding-left: 36px; padding-right: 36px; }

	.pexi-chat--seite .pxc-info {
		position: sticky;
		top: var(--pxa-kopf);
		align-self: start;
		height: var(--pxa-hoehe);
		overflow-y: auto;
		padding-right: 54px; /* Platz für Facebook und Instagram der Website am rechten Rand */
		border-left: 1px solid var(--pxc-linie);
	}

	.pexi-chat--seite [data-info-auf],
	.pexi-chat--seite .pxc-info-zu,
	.pexi-chat--seite .pxc-schleier { display: none; }
}

/* Schmaler als 1280 px: «Gut zu wissen» als Schublade von rechts */
@media (max-width: 1279px) {
	.pexi-chat--seite .pxc-info {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 100001;
		width: min(400px, 100%);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-top: calc(24px + env(safe-area-inset-top));
		padding-bottom: calc(28px + env(safe-area-inset-bottom));
		box-shadow: -20px 0 50px rgba(0, 0, 0, 0.18);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.25s ease, visibility 0s linear 0.25s;
	}

	.pexi-chat--seite .pxc-info.ist-offen { transform: none; visibility: visible; transition: transform 0.25s ease; }
	.pexi-chat--seite .pxc-schleier { position: fixed; inset: 0; z-index: 100000; background: rgba(11, 11, 11, 0.45); }
}

/* ---------- Telefon und Tablet: App-Leiste statt Seitenkopf ---------- */

@media (max-width: 1024px) {
	body.pexi-anfrage-seite .elementor-location-header,
	body.pexi-anfrage-seite .elementor-location-footer { display: none !important; }

	.pexi-chat--seite { --pxa-kopf: 0px; --pxa-fuss: 0px; }

	.pexi-chat--seite .pxc-spalte > :not(.pxc-titel) { display: none; }
	.pexi-chat--seite .pxc-titel { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

	.pexi-chat--seite .pxc-leiste {
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr) 48px 48px;
		align-items: center;
		gap: 2px;
		min-height: 60px;
		padding: 6px 8px;
		padding-top: calc(6px + env(safe-area-inset-top));
		background: var(--pxc-schwarz);
		color: #ffffff;
	}

	.pexi-chat--seite .pxc-leiste-knopf,
	.pexi-chat--seite .pxc-leiste-knopf:hover,
	.pexi-chat--seite .pxc-leiste-knopf:focus {
		display: grid;
		place-items: center;
		width: 48px;
		height: 48px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 12px;
		background: transparent;
		color: #ffffff;
		text-decoration: none;
		cursor: pointer;
	}

	.pexi-chat--seite .pxc-leiste-knopf:hover { background: rgba(255, 255, 255, 0.1); }
	.pexi-chat--seite .pxc-leiste-knopf:focus-visible { outline: 2px solid var(--pxc-akzent); outline-offset: -2px; }
	.pexi-chat--seite .pxc-leiste-knopf svg { width: 22px; height: 22px; }

	.pexi-chat--seite .pxc-leiste-titel { min-width: 0; margin: 0; color: #ffffff; font-size: 16px; font-weight: 800; line-height: 1.2; text-align: center; }
	.pexi-chat--seite .pxc-leiste-titel small { display: block; margin-top: 2px; overflow: hidden; color: rgba(255, 255, 255, 0.68); font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

	.pexi-chat--seite .pxc-verlauf { padding: 22px 16px 18px; }
	.pexi-chat--seite .pxc-eingabe { padding: 16px 16px 2px; }
	.pexi-chat--seite .pxc-fuss { padding: 2px 16px calc(8px + env(safe-area-inset-bottom)); }
	.pexi-chat--seite .pxc-unten--lang .pxc-fuss { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}