/* ═══════════════════════════════════════════════════════
   SAR Kontakt-Widget (SAR\Contact_Widget, seit 17.09.2026)
   Sticky-Kontaktbutton rechts (Desktop) / Bottom-Bar (Mobil),
   Panel mit Ansprechpartner(n), Formular-Modal.
   Markup: includes/class-sar-contact_widget.php, JS: assets/js/contact-widget.js
   ═══════════════════════════════════════════════════════ */

.sar-cw {
	--sar-cw-navy: #1a3a5c;
	--sar-cw-orange: #e87722;
	--sar-cw-text: #1a1a1a;
	--sar-cw-muted: #50575e;
	/* Abstand des Desktop-Buttons von oben: unter Neve-Header + Sprungmarken-Leiste. */
	--sar-cw-top: 230px;
	/* Hoehe der mobilen Bottom-Bar (ohne Safe-Area): steht am body
	   (body.sar-cw-active), weil auch Fremd-Elemente (Borlabs-Icon) damit
	   rechnen; hier nur geerbt. */
	/* Ueber dem Feedback-Launcher (99990), unter dessen Modal (99999) und der Lightbox. */
	--sar-cw-z: 99995;
	font-size: 15px;
	line-height: 1.4;
	color: var(--sar-cw-text);
}

.sar-cw *,
.sar-cw *::before,
.sar-cw *::after {
	box-sizing: border-box;
}

.sar-cw [hidden] {
	display: none !important;
}

body.sar-cw-active {
	--sar-cw-bar-h: 64px;
}

/* Waehrend die Lightbox offen ist alles verstecken (wie Feedback-Launcher,
   Borlabs-Icon, Theme-Buttons in sar-lightbox.css). */
body.sar-lightbox-open .sar-cw {
	visibility: hidden !important;
}

/* ─── Eigene Buttons (Reiter, Bar, Panel, Schliessen) ───
   Bewusst NICHT ".sar-cw button": im Modal steckt der sar/form-Block, dessen
   Senden-Button wie ueberall aussehen soll.
   ACHTUNG Spezifitaet: dieser Reset (0,1,1) schlaegt einfache Klassen
   (0,1,0). Alle Button-Regeln mit eigenem Hintergrund stehen deshalb als
   .sar-cw .sar-cw__xyz (0,2,0). */

.sar-cw .sar-cw__fab,
.sar-cw__bar button,
.sar-cw__panel button,
.sar-cw .sar-cw__close {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	text-align: left;
}

.sar-cw__fab:focus-visible,
.sar-cw__bar button:focus-visible,
.sar-cw__panel button:focus-visible,
.sar-cw .sar-cw__close:focus-visible,
.sar-cw__bar a:focus-visible,
.sar-cw__panel a:focus-visible {
	outline: 3px solid var(--sar-cw-orange);
	outline-offset: 2px;
}

/* ─── Foto-Stapel (zugeklappt) ─── */

.sar-cw__stack {
	position: relative;
	display: block;
	flex: 0 0 auto;
}

.sar-cw__stack--fab {
	width: 56px;
	height: 56px;
}

.sar-cw__stack--bar {
	width: 44px;
	height: 44px;
}

.sar-cw__stack-item {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 50%;
	background: #e9eef3;
	color: var(--sar-cw-navy);
	box-shadow: 0 0 0 2px #fff;
}

.sar-cw__stack-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sar-cw__stack-item--icon {
	background: var(--sar-cw-navy);
	color: #fff;
}

/* Weitere Personen leicht versetzt dahinter andeuten. Das erste Foto
   (--0) steht im DOM zuletzt und liegt damit vorn. */
.sar-cw__stack-item--1 {
	transform: translate(-8px, 6px) scale(0.9);
	opacity: 0.95;
}

.sar-cw__stack-item--2 {
	transform: translate(-16px, 12px) scale(0.8);
	opacity: 0.9;
}

/* Platz fuer den Versatz nach links/unten reservieren. */
.sar-cw__stack--n2 {
	margin-left: 8px;
	margin-bottom: 6px;
}

.sar-cw__stack--n3 {
	margin-left: 16px;
	margin-bottom: 12px;
}

/* ─── Desktop-Reiter rechts am Rand (Optik analog Feedback-Launcher) ─── */

.sar-cw .sar-cw__fab {
	position: fixed;
	right: 0;
	top: var(--sar-cw-top);
	z-index: var(--sar-cw-z);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 12px 10px 14px;
	background: var(--sar-cw-orange);
	color: #fff;
	border-radius: 10px 0 0 10px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
	/* Hover/offen: Reiter waechst nach links (padding), statt per transform
	   vom Rand wegzuruecken; so bleibt er buendig am Bildschirmrand. */
	transition: padding-left 0.15s ease, background 0.15s ease;
}

@media (hover: hover) {
	.sar-cw .sar-cw__fab:hover {
		background: var(--sar-cw-navy);
		color: #fff;
		padding-left: 14px;
	}
}

.sar-cw .sar-cw__fab[aria-expanded="true"] {
	background: var(--sar-cw-navy);
	padding-left: 14px;
}

.sar-cw__fab .sar-cw__stack-item {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}

.sar-cw__fab-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
}

/* Neutral (kein PM-Foto): Optik wie der Feedback-Launcher, leere
   Sprechblase oben, Label vertikal von oben nach unten. */
.sar-cw--neutral .sar-cw__fab-icon {
	width: 24px;
	height: 24px;
}

.sar-cw--neutral .sar-cw__fab-label {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-size: 14px;
}

/* Mit PM-Foto: Label horizontal unter dem Foto, ggf. zweizeilig. */
.sar-cw__fab-label {
	text-align: center;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.25;
}

/* ─── Panel (Desktop: Karte neben dem Button) ─── */

.sar-cw__panel {
	position: fixed;
	/* Links neben dem Reiter, der bleibt sichtbar und schliesst das Panel wieder. */
	right: 84px;
	top: var(--sar-cw-top);
	z-index: calc(var(--sar-cw-z) + 1);
	width: 340px;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - var(--sar-cw-top) - 24px);
	overflow-y: auto;
	padding: 22px 22px 18px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28);
}

.sar-cw .sar-cw__close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: var(--sar-cw-navy);
	background: #f2f5f8;
}

.sar-cw .sar-cw__close:hover,
.sar-cw .sar-cw__close:focus {
	background: #e3e9ef;
	color: var(--sar-cw-navy);
}

.sar-cw__panel-title {
	margin: 0 36px 14px 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sar-cw-muted);
}

.sar-cw__person {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* Mehrere PMs: Tabs (Namen) ueber der Person, Panel etwas breiter. */
.sar-cw__panel:has(.sar-cw__tabs) {
	width: 420px;
}

.sar-cw__tabs {
	display: flex;
	gap: 4px;
	margin: 0 0 16px;
	padding: 4px;
	border-radius: 8px;
	background: #f2f5f8;
}

.sar-cw .sar-cw__tab {
	flex: 1 1 0;
	min-width: 0;
	padding: 8px 10px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	color: var(--sar-cw-muted);
	background: transparent;
	transition: background 0.15s ease, color 0.15s ease;
}

.sar-cw .sar-cw__tab:hover {
	color: var(--sar-cw-navy);
}

.sar-cw .sar-cw__tab.is-active {
	background: #fff;
	color: var(--sar-cw-navy);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.sar-cw__person-photo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	margin-bottom: 12px;
	overflow: hidden;
	border-radius: 50%;
	background: #e9eef3;
	color: var(--sar-cw-navy);
}

.sar-cw__person-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sar-cw__person-photo--icon {
	background: var(--sar-cw-navy);
	color: #fff;
}

.sar-cw__person-name {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--sar-cw-navy);
}

.sar-cw__person-role {
	margin: 2px 0 0;
	font-size: 14px;
	color: var(--sar-cw-muted);
}

.sar-cw__person-intro {
	margin: 10px 0 0;
	font-size: 15px;
	color: var(--sar-cw-text);
}

.sar-cw__actions {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
	margin-top: 14px;
}

.sar-cw .sar-cw__action {
	display: flex;
	align-items: center;
	gap: 12px;
	/* Icon-Kreise buendig mit dem Text darueber: Hover-Flaeche ragt per
	   negativem Rand nach aussen statt den Inhalt einzuruecken. */
	width: calc(100% + 20px);
	margin: 0 -10px;
	padding: 10px;
	border-radius: 8px;
	color: inherit;
	text-decoration: none;
	text-align: left;
}

.sar-cw .sar-cw__action:hover,
.sar-cw .sar-cw__action:focus {
	background: #f2f5f8;
	color: inherit;
	text-decoration: none;
}

.sar-cw__action-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--sar-cw-navy);
	color: #fff;
}

.sar-cw__action:hover .sar-cw__action-icon {
	background: var(--sar-cw-orange);
}

.sar-cw__action-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sar-cw__action-text strong {
	font-size: 15px;
	color: var(--sar-cw-navy);
}

.sar-cw__action-text span {
	font-size: 13px;
	color: var(--sar-cw-muted);
	overflow-wrap: anywhere;
}

/* ─── Formular-Modal ─── */

.sar-cw__modal {
	position: fixed;
	inset: 0;
	z-index: calc(var(--sar-cw-z) + 5);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.sar-cw__modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
}

.sar-cw__modal-content {
	position: relative;
	width: 100%;
	max-width: 760px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	padding: 28px 28px 24px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
}

.sar-cw__modal-title {
	margin: 0 40px 6px 0;
	font-size: 24px;
	line-height: 1.25;
	color: var(--sar-cw-navy);
}

.sar-cw__modal-intro {
	margin: 0 0 18px;
	color: var(--sar-cw-muted);
}

/* Formular im Modal: Datenschutz-Text nicht fett (im Block gewinnt
   ".sar-form__field > label" mit 600 gegen ".sar-form__check" mit 400). */
.sar-cw__modal-form .sar-form__field > label.sar-form__check {
	font-weight: 400;
}

/* Body-Scroll sperren, solange das Modal offen ist (JS setzt die Klasse). */
body.sar-cw-modal-open {
	overflow: hidden;
}

/* ─── Mobile Bottom-Bar (bis 960px, wie die uebrigen Mobil-Umschaltungen) ─── */

.sar-cw__bar {
	display: none;
}

@media (max-width: 960px) {
	.sar-cw .sar-cw__fab {
		display: none;
	}

	/* Leiste selbst ist transparent und faengt keine Klicks; sichtbar sind
	   nur die zwei Pillen (Kontaktfeld + nach oben). */
	.sar-cw__bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: var(--sar-cw-z);
		display: flex;
		align-items: stretch;
		gap: 10px;
		height: calc(var(--sar-cw-bar-h) + env(safe-area-inset-bottom, 0px));
		padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
		background: transparent;
		pointer-events: none;
	}

	.sar-cw__bar > * {
		pointer-events: auto;
	}

	/* Seiteninhalt unten freihalten, sonst verdeckt die Leiste Footer/Buttons. */
	body.sar-cw-active {
		padding-bottom: calc(var(--sar-cw-bar-h, 64px) + env(safe-area-inset-bottom, 0px));
	}

	/* Neves eigenen "nach oben"-Button ersetzt die Leiste. */
	body.sar-cw-active .scroll-to-top {
		display: none !important;
	}

	/* Borlabs-Cookie-Icon (unten links) um die Leistenhoehe nach oben
	   schieben, sonst liegt es auf dem Foto. Nur das Widget, nicht der
	   Container der Cookie-Box (.brlbs-cmpnt-container). */
	body.sar-cw-active .brlbs-cmpnt-widget,
	body.sar-cw-active #brlbs-cmpnt-widget {
		transform: translateY(calc(-1 * (var(--sar-cw-bar-h, 64px) + env(safe-area-inset-bottom, 0px)))) !important;
	}

	/* Bildschirmtastatur offen (Fokus in einem Formularfeld ausserhalb des
	   Widgets): Leiste weg, sonst springt sie ueber der Tastatur herum. */
	body.sar-cw-kbd .sar-cw__bar {
		display: none;
	}

	/* Kontaktfeld nur so breit wie sein Inhalt; "nach oben" bleibt rechts. */
	.sar-cw .sar-cw__bar-contact {
		display: flex;
		align-items: center;
		gap: 10px;
		flex: 0 1 auto;
		min-width: 0;
		padding: 6px 14px 6px 8px;
		border-radius: 14px;
		background: #fff;
		box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
	}

	.sar-cw__bar-text {
		display: flex;
		flex-direction: column;
		min-width: 0;
		line-height: 1.25;
	}

	.sar-cw__bar-text strong {
		font-size: 14px;
		color: var(--sar-cw-navy);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.sar-cw__bar-text span {
		font-size: 12px;
		color: var(--sar-cw-muted);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Stapel in der Leiste: Versatz kleiner. */
	.sar-cw__stack--bar .sar-cw__stack-item--1 {
		transform: translate(-6px, 4px) scale(0.9);
	}

	.sar-cw__stack--bar .sar-cw__stack-item--2 {
		transform: translate(-12px, 8px) scale(0.8);
	}

	.sar-cw__stack--bar.sar-cw__stack--n2 {
		margin-left: 6px;
		margin-bottom: 4px;
	}

	.sar-cw__stack--bar.sar-cw__stack--n3 {
		margin-left: 12px;
		margin-bottom: 8px;
	}

	.sar-cw .sar-cw__bar-top {
		margin-left: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 52px;
		border-radius: 14px;
		background: var(--sar-cw-navy);
		color: #fff;
		box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
		transition: opacity 0.2s ease;
	}

	/* Ganz oben ist "nach oben" sinnlos: ausgegraut, JS setzt is-scrolled. */
	.sar-cw:not(.is-scrolled) .sar-cw__bar-top {
		opacity: 0.35;
		pointer-events: none;
	}

	/* Panel als Karte ueber der Leiste: gleiche Seitenraender wie die
	   Pillen (12px), rundum abgerundet, kleiner Abstand zur Leiste. */
	.sar-cw__panel,
	.sar-cw__panel:has(.sar-cw__tabs) {
		top: auto;
		right: 12px;
		left: 12px;
		bottom: calc(var(--sar-cw-bar-h) + env(safe-area-inset-bottom, 0px) + 4px);
		width: auto;
		max-width: none;
		max-height: calc(100vh - var(--sar-cw-bar-h) - 80px);
		border-radius: 14px;
		box-shadow: 0 6px 30px rgba(0, 0, 0, 0.28);
	}

	/* Formular-Modal als Karte mit denselben Seitenraendern. */
	.sar-cw__modal {
		padding: 12px;
		align-items: center;
	}

	.sar-cw__modal-content {
		max-width: none;
		max-height: calc(100vh - 24px);
		border-radius: 14px;
		padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px));
	}

	.sar-cw__modal-title {
		font-size: 21px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sar-cw__fab,
	.sar-cw__bar-top {
		transition: none;
	}
}