/**
 * SchorniWeb Bevollmaechtigtensuche - Frontend
 *
 * Kapselung: Jede Regel beginnt mit .swbs. Es wird kein globaler Selektor und
 * kein Theme-Element ausserhalb des Containers angefasst.
 *
 * Zum Einsatz von !important: Themes und Elementor setzen fuer Ueberschriften,
 * Schaltflaechen und Formularfelder sehr durchsetzungsstarke Regeln, teilweise
 * selbst mit !important. Abgesichert sind genau die Eigenschaften, die
 * Lesbarkeit, Markenwirkung und Layoutbreite tragen.
 *
 * Farben: ausschliesslich Schorni-Gruen #7ebb34, Schwarz #050505, Weiss #ffffff
 * sowie ein neutrales Hellgrau als Flaeche. Es gibt bewusst keinen zweiten
 * Gruenton.
 *
 * Wichtig zur Farbverteilung: Gruen traegt immer schwarze Schrift (8,78:1) und
 * niemals weisse (2,32:1). Ueberschriften stehen in Schwarz, weil Gruen auf Weiss
 * nur 2,32:1 erreicht und ein dunklerer Gruenton nicht zulaessig ist.
 */

.swbs {
	/* Marke */
	--swbs-black: #050505;
	--swbs-white: #ffffff;
	--swbs-green: #7ebb34;

	/* Abgeleitete Farben */
	--swbs-ink: var(--swbs-black);
	--swbs-surface: var(--swbs-white);
	--swbs-muted: #4a4a4a;
	--swbs-soft: #f2f2f2;
	--swbs-on-green: var(--swbs-black);

	/*
	 * Fehler muessen als Fehler erkennbar sein. Der Rahmen bleibt schwarz wie bei
	 * allen Boxen; unterschieden wird ueber Flaeche und Schriftfarbe - zusaetzlich
	 * zum Text, nie allein ueber die Farbe.
	 */
	--swbs-error-surface: #fdecec;
	--swbs-error-ink: #b42318;

	/* Form: durchgaengig 3 px Rand, 15 px Radius, kein Schatten. */
	--swbs-border-width: 3px;
	--swbs-radius: 15px;
	--swbs-gap: 16px;
	--swbs-pad: 16px;

	/* Breite: lesefreundlich begrenzt und zentriert. */
	--swbs-max-width: 660px;

	/* Schrift: Barlow wird nicht extern geladen, sondern vom Theme erwartet. */
	--swbs-font: "Barlow", "Barlow Semi Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--swbs-weight-normal: 500;
	--swbs-weight-strong: 700;

	/*
	 * Groessen. Klare Hierarchie, keine Groesse unter 14 px, keine dynamische
	 * Verkleinerung. Lange Beschriftungen brechen um, statt zu schrumpfen.
	 */
	--swbs-size-head: 26px;
	--swbs-size-name: 24px;
	--swbs-size-input: 18px;
	--swbs-size-button: 18px;
	--swbs-size-text: 16px;
	--swbs-size-label: 16px;
	--swbs-size-hint: 15px;

	display: block;
	margin-left: auto;
	margin-right: auto;
	font-family: var(--swbs-font);
	font-size: var(--swbs-size-text);
	font-weight: var(--swbs-weight-normal);
	line-height: 1.45;
	color: var(--swbs-ink);
	text-align: left;
}

/*
 * Breitenkorrektur fuer den Container und alle Kindelemente: volle Breite
 * zulaessig, nie breiter als der Platz, keine Mindestbreite, Rahmen und
 * Innenabstand innerhalb der Breite.
 */
.swbs,
.swbs * {
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

/* Nach dem Sammelblock: Der Container behaelt seine Maximalbreite. */
.swbs {
	width: 100%;
	max-width: var(--swbs-max-width);
}

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

/*
 * Lange Namen, Anschriften und E-Mail-Adressen brechen sicher um.
 *
 * Ueberschriften gehoerten bis 0.1.7 nicht dazu. Bei 320 px war
 * "BEZIRKSSCHORNSTEINFEGER" in 26 px Versalien breiter als der Viewport und
 * lief aus dem Container - genau die abgeschnittene Ueberschrift aus dem
 * Testbericht (D-81).
 */
.swbs p,
.swbs li,
.swbs span,
.swbs dd,
.swbs dt,
.swbs a,
.swbs label,
.swbs button,
.swbs h2,
.swbs h3 {
	overflow-wrap: break-word;
	word-break: normal;
}

/* Optionale Beschriftung aus dem Shortcode-Attribut. */
.swbs .swbs__shortcode-title {
	margin: 0 0 var(--swbs-gap) !important;
	font-family: var(--swbs-font) !important;
	font-size: var(--swbs-size-label) !important;
	font-weight: var(--swbs-weight-strong) !important;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--swbs-ink) !important;
	-webkit-text-fill-color: var(--swbs-ink);
}

/* --- Umschaltung der Suchwege ---------------------------------------- */

.swbs .swbs__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 var(--swbs-gap);
}

.swbs .swbs__tab {
	flex: 1 1 220px;
	/* Lange Beschriftungen brechen um, statt zu ueberlaufen. */
	white-space: normal;
	/* Touch-Ziel deutlich ueber 44 px. */
	min-height: 52px;
	padding: 12px 16px !important;
	border: var(--swbs-border-width) solid var(--swbs-ink) !important;
	border-radius: var(--swbs-radius) !important;
	background: var(--swbs-surface) !important;
	color: var(--swbs-ink) !important;
	-webkit-text-fill-color: var(--swbs-ink);
	font-family: var(--swbs-font) !important;
	font-size: var(--swbs-size-button) !important;
	font-weight: var(--swbs-weight-strong) !important;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-align: center;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none !important;
	text-shadow: none !important;
}

/*
 * Der aktive Reiter ist gruen mit schwarzer Schrift. Er ist zusaetzlich ueber
 * aria-selected ausgezeichnet, damit der Zustand nicht allein an der Farbe haengt.
 */
.swbs .swbs__tab--active {
	background: var(--swbs-green) !important;
	color: var(--swbs-on-green) !important;
	-webkit-text-fill-color: var(--swbs-on-green);
}

/*
 * Hover aller schaltflaechenartigen Elemente: schwarze Flaeche, weisse Schrift.
 * Niemals eine Unterstreichung - sie liess grosse Schaltflaechen wie Textlinks
 * aussehen und war der einzige Hoverzustand, den sie hatten. Weiss auf Schwarz
 * erreicht 20:1; ein zweiter Gruenton bleibt ausgeschlossen.
 *
 * Der Hover ist an Zeigegeraete gebunden. Auf Touchgeraeten bleibt er sonst
 * nach der Beruehrung haengen.
 */
@media (hover: hover) {
	.swbs .swbs__tab:hover {
		background: var(--swbs-black) !important;
		color: var(--swbs-white) !important;
		-webkit-text-fill-color: var(--swbs-white);
	}
}

/* --- Ueberschriften --------------------------------------------------- */

/*
 * Die Schrittueberschrift steht in Schwarz. Gruen erreicht auf Weiss nur
 * 2,32:1 und ein dunklerer Gruenton ist nicht zulaessig.
 */
.swbs h2.swbs__headline,
.swbs .swbs__headline {
	display: block;
	margin: 0 0 8px !important;
	padding: 0 !important;
	border: 0 !important;
	font-family: var(--swbs-font) !important;
	font-size: var(--swbs-size-head) !important;
	font-weight: var(--swbs-weight-strong) !important;
	line-height: 1.2 !important;
	letter-spacing: 0.01em;
	text-transform: uppercase !important;
	color: var(--swbs-ink) !important;
	-webkit-text-fill-color: var(--swbs-ink);
	background: none !important;
	text-shadow: none !important;
	/*
	 * Themes vererben auf Ueberschriften teilweise eine Unterstreichung. Sie
	 * laesst eine Ueberschrift wie einen Verweis aussehen und wird hier
	 * ausdruecklich aufgehoben.
	 */
	text-decoration: none !important;
	-webkit-text-decoration: none !important;
	text-decoration-line: none !important;
	border-bottom: 0 !important;
	/* Ein sehr langes Wort bricht um, statt den Container zu sprengen. */
	overflow-wrap: break-word !important;
	hyphens: auto;
	-webkit-hyphens: auto;
}

/*
 * Die Ergebnisueberschrift wird nach dem Laden programmatisch fokussiert, damit
 * Hilfsmittel den neuen Abschnitt ansagen. Sie ist dafuer mit tabindex="-1"
 * ausgezeichnet und liegt damit ausdruecklich **nicht** in der
 * Tabulatorreihenfolge - erreichbar ist sie nur ueber diesen Sprung.
 *
 * Ein sichtbarer rechteckiger Rahmen um eine nicht bedienbare Ueberschrift ist
 * deshalb irrefuehrend: Er verspricht ein Bedienelement, das es nicht gibt. Er
 * entfaellt hier - und nur hier. Alle bedienbaren Elemente behalten ihren
 * deutlichen Fokusindikator (siehe unten).
 */
.swbs .swbs__headline:focus,
.swbs .swbs__headline:focus-visible {
	outline: none !important;
	box-shadow: none !important;
	border: 0 !important;
	text-decoration: none !important;
}

/* Auch die Ueberschrift der Ergebniskarte bleibt frei von Unterstreichungen. */
.swbs .swbs__result-name,
.swbs .swbs__contact-name,
.swbs .swbs__options-headline {
	text-decoration: none !important;
	-webkit-text-decoration: none !important;
	border-bottom: 0 !important;
}

.swbs .swbs__lead {
	margin: 0 0 var(--swbs-gap) !important;
	font-family: var(--swbs-font) !important;
	font-size: var(--swbs-size-hint) !important;
	font-weight: var(--swbs-weight-normal) !important;
	line-height: 1.45 !important;
	color: var(--swbs-muted) !important;
	-webkit-text-fill-color: var(--swbs-muted);
}

/* --- Formularelemente ------------------------------------------------- */

.swbs .swbs__field {
	margin: 0 0 var(--swbs-gap);
}

.swbs .swbs__label {
	display: block;
	margin: 0 0 6px !important;
	font-family: var(--swbs-font) !important;
	font-size: var(--swbs-size-label) !important;
	font-weight: var(--swbs-weight-strong) !important;
	line-height: 1.35 !important;
	color: var(--swbs-ink) !important;
	-webkit-text-fill-color: var(--swbs-ink);
}

.swbs .swbs__input,
.swbs .swbs__textarea {
	display: block;
	width: 100%;
	padding: 14px var(--swbs-pad) !important;
	border: var(--swbs-border-width) solid var(--swbs-ink) !important;
	border-radius: var(--swbs-radius) !important;
	background: var(--swbs-surface) !important;
	color: var(--swbs-ink) !important;
	font-family: var(--swbs-font) !important;
	font-size: var(--swbs-size-input) !important;
	font-weight: var(--swbs-weight-normal) !important;
	line-height: 1.4;
	box-shadow: none !important;
	appearance: none;
	-webkit-appearance: none;
}

.swbs .swbs__input {
	min-height: 56px;
	height: auto;
}

.swbs .swbs__textarea {
	min-height: 96px;
	resize: vertical;
}

.swbs .swbs__input::placeholder,
.swbs .swbs__textarea::placeholder {
	color: var(--swbs-muted);
	opacity: 1;
}

.swbs .swbs__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: var(--swbs-gap);
}

/* --- Schaltflaechen --------------------------------------------------- */

.swbs .swbs__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	/* Touch-Ziel deutlich ueber 44 px. */
	min-height: 52px;
	padding: 12px 22px !important;
	border: var(--swbs-border-width) solid var(--swbs-ink) !important;
	border-radius: var(--swbs-radius) !important;
	font-family: var(--swbs-font) !important;
	/* Einheitliche Groesse fuer alle Schaltflaechen. */
	font-size: var(--swbs-size-button) !important;
	font-weight: var(--swbs-weight-strong) !important;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none !important;
	text-shadow: none !important;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

/*
 * Keine Unterstreichung, in keinem Zustand. Themes, Elementor und WordPress
 * setzen sie auf Verweisen durchgesetzt; die Aufhebung steht deshalb hier
 * ausdruecklich fuer jeden Zustand und mit ausreichender Spezifitaet - aber nur
 * innerhalb von .swbs, nie fuer fremde Verweise der Seite.
 */
.swbs a.swbs__button:not(.swbs__button--link),
.swbs a.swbs__button:not(.swbs__button--link):link,
.swbs a.swbs__button:not(.swbs__button--link):visited,
.swbs a.swbs__button:not(.swbs__button--link):hover,
.swbs a.swbs__button:not(.swbs__button--link):focus,
.swbs a.swbs__button:not(.swbs__button--link):focus-visible,
.swbs a.swbs__button:not(.swbs__button--link):active,
.swbs button.swbs__button:not(.swbs__button--link),
.swbs button.swbs__button:not(.swbs__button--link):hover,
.swbs button.swbs__button:not(.swbs__button--link):focus,
.swbs button.swbs__button:not(.swbs__button--link):focus-visible,
.swbs button.swbs__button:not(.swbs__button--link):active,
.swbs .swbs__tab,
.swbs .swbs__tab:hover,
.swbs .swbs__tab:focus,
.swbs .swbs__tab:focus-visible,
.swbs .swbs__tab:active,
.swbs .swbs__option,
.swbs .swbs__option:hover,
.swbs .swbs__option:focus,
.swbs .swbs__option:focus-visible,
.swbs .swbs__option:active,
.swbs a.swbs__action,
.swbs a.swbs__action:link,
.swbs a.swbs__action:visited,
.swbs a.swbs__action:hover,
.swbs a.swbs__action:focus,
.swbs a.swbs__action:focus-visible,
.swbs a.swbs__action:active {
	text-decoration: none !important;
	-webkit-text-decoration: none !important;
	text-decoration-line: none !important;
	border-bottom-style: solid !important;
}

/* Hauptaktion: Schorni-Gruen mit schwarzer Schrift. */
.swbs .swbs__button--primary {
	flex: 1 1 240px;
	background: var(--swbs-green) !important;
	color: var(--swbs-on-green) !important;
	-webkit-text-fill-color: var(--swbs-on-green);
}

/* Nebenaktion: weiss mit schwarzer Schrift. */
.swbs .swbs__button--quiet {
	flex: 0 1 auto;
	background: var(--swbs-surface) !important;
	color: var(--swbs-ink) !important;
	-webkit-text-fill-color: var(--swbs-ink);
}

/*
 * Hover: schwarze Flaeche, weisse Schrift - fuer grosse wie fuer kleine
 * Schaltflaechen identisch. Der Rahmen bleibt 3 px schwarz.
 */
@media (hover: hover) {
	.swbs .swbs__button--primary:hover,
	.swbs .swbs__button--quiet:hover {
		background: var(--swbs-black) !important;
		color: var(--swbs-white) !important;
		-webkit-text-fill-color: var(--swbs-white);
	}
}

/* Gedrueckter Zustand: dezent, ohne Schatten. */
.swbs .swbs__button--primary:active,
.swbs .swbs__button--quiet:active,
.swbs .swbs__tab:active,
.swbs .swbs__action:active {
	transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
	.swbs .swbs__button--primary:active,
	.swbs .swbs__button--quiet:active,
	.swbs .swbs__tab:active,
	.swbs .swbs__action:active {
		transform: none;
	}
}

.swbs .swbs__button[disabled],
.swbs .swbs__button[aria-disabled="true"] {
	cursor: default;
	opacity: 0.65;
}

/*
 * Textaktion innerhalb von Hinweisen ("Ort ändern"). Sie ist bewusst kein
 * Schalter, sondern ein Textverweis - und traegt deshalb als einziges Element
 * dieser Gruppe eine Unterstreichung. Der Ausschluss oben ist ausdruecklich.
 */
.swbs .swbs__button--link,
.swbs button.swbs__button--link {
	min-height: 0;
	padding: 4px 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	color: var(--swbs-ink) !important;
	-webkit-text-fill-color: var(--swbs-ink);
	font-size: var(--swbs-size-hint) !important;
	font-weight: var(--swbs-weight-strong) !important;
	text-transform: none;
	letter-spacing: 0;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

/*
 * Sichtbarer Fokus fuer alle bedienbaren Elemente: schwarze Kontur mit Abstand.
 * Ueberschriften sind davon ausgenommen (siehe oben).
 */
.swbs .swbs__tab:focus-visible,
.swbs .swbs__button:focus-visible,
.swbs .swbs__option:focus-visible,
.swbs a:focus-visible {
	outline: var(--swbs-border-width) solid var(--swbs-ink) !important;
	outline-offset: 3px !important;
}

/*
 * Eingabefelder behalten im Fokus GENAU EINE Kontur.
 *
 * Bis 0.1.12 bekamen sie zusaetzlich die aeussere Kontur der Regel darueber -
 * neben dem eigenen 3-px-Rahmen und mit 3 px Abstand dazwischen. Das ergab die
 * gemeldete doppelte Umrandung mit sichtbarem Zwischenraum.
 *
 * Sichtbar bleibt der Fokus trotzdem: als zusaetzliche Linie INNERHALB des
 * vorhandenen Rahmens. Sie liegt im Feld, erzeugt also weder eine zweite
 * aeussere Linie noch einen Zwischenraum, und sie veraendert weder Groesse noch
 * Abstaende - ein Sprung beim Fokussieren ist damit ausgeschlossen (D-99).
 */
.swbs .swbs__input:focus,
.swbs .swbs__input:focus-visible,
.swbs .swbs__textarea:focus,
.swbs .swbs__textarea:focus-visible {
	/*
	 * Die Kontur waechst nach INNEN: Der negative Abstand setzt sie an die
	 * Innenkante des vorhandenen Rahmens, wo sie mit ihm zu einer einzigen,
	 * etwas kraeftigeren Linie verschmilzt. Kein zweiter Ring, kein
	 * Zwischenraum - und weil eine Outline keinen Platz beansprucht, aendert
	 * sich weder Groesse noch Abstand. Ein Schatten kaeme nicht in Frage: Die
	 * Gestaltung kennt keine.
	 */
	outline: 2px solid var(--swbs-ink) !important;
	outline-offset: calc(-1 * var(--swbs-border-width)) !important;
	border-color: var(--swbs-ink) !important;
	box-shadow: none !important;
}

/* --- Autocomplete des Strassenfeldes ---------------------------------- */

/*
 * Das Feld und seine Vorschlagsliste bilden eine Einheit. Die Liste steht
 * unmittelbar unter dem Feld und ist scrollbar begrenzt: Eine grosse Stadt hat
 * viele passende Strassen, und keine davon wird stillschweigend entfernt -
 * sie sind alle erreichbar, nur eben durch Scrollen.
 */
.swbs .swbs__combo {
	position: relative;
}

/*
 * Auch im aufgeklappten Zustand bleibt es bei EINER Kontur - aber es bleibt bei
 * einer sichtbaren.
 *
 * Bis 0.1.14 stand hier "outline: none". Die Regel stammte aus der Zeit, als
 * ein fokussiertes Feld noch eine aeussere Kontur bekam; sie sollte den zweiten
 * Ring neben der Vorschlagsliste verhindern. Seit die Fokuskontur nach innen
 * waechst (D-99), verhinderte sie stattdessen den Tastaturfokus: Wer mit der
 * Tastatur tippte, sah beim ersten Vorschlag nicht mehr, wo er steht.
 *
 * Die Kontur wird deshalb ausdruecklich wiederholt, statt sie zu entfernen -
 * dieselbe innere Linie wie im geschlossenen Zustand, ohne aeusseren Ring und
 * ohne Schatten (D-106).
 */
.swbs .swbs__combo .swbs__input[aria-expanded="true"]:focus,
.swbs .swbs__combo .swbs__input[aria-expanded="true"]:focus-visible {
	outline: 2px solid var(--swbs-ink) !important;
	outline-offset: calc(-1 * var(--swbs-border-width)) !important;
	border-color: var(--swbs-ink) !important;
	box-shadow: none !important;
}

.swbs .swbs__listbox {
	position: relative;
	z-index: 2;
	/* Nie hoeher als der halbe Bildschirm - auch nicht auf kleinen Geraeten. */
	max-height: min(320px, 50vh);
	overflow-y: auto;
	margin: 8px 0 0 !important;
	padding: 0 !important;
	border: var(--swbs-border-width) solid var(--swbs-ink);
	border-radius: var(--swbs-radius);
	background: var(--swbs-surface);
	list-style: none !important;
	box-shadow: none !important;
	-webkit-overflow-scrolling: touch;
}

/* Ohne Vorschlaege entsteht kein leerer Rahmen. */
.swbs .swbs__listbox[hidden] {
	display: none !important;
}

.swbs .swbs__listbox-option {
	display: block;
	/* Touch-Ziel ueber 44 px. */
	min-height: 48px;
	margin: 0 !important;
	padding: 12px var(--swbs-pad) !important;
	list-style: none !important;
	cursor: pointer;
	line-height: 1.35;
}

.swbs .swbs__listbox-option::before,
.swbs .swbs__listbox-option::marker {
	content: none !important;
}

.swbs .swbs__listbox-option + .swbs__listbox-option {
	border-top: 1px solid var(--swbs-soft);
}

/*
 * Der aktive Eintrag ist gruen mit schwarzer Schrift. Er ist zusaetzlich ueber
 * aria-selected ausgezeichnet, damit der Zustand nicht allein an der Farbe
 * haengt.
 */
.swbs .swbs__listbox-option--active,
.swbs .swbs__listbox-option[aria-selected="true"] {
	background: var(--swbs-green);
	color: var(--swbs-on-green);
	-webkit-text-fill-color: var(--swbs-on-green);
	font-weight: var(--swbs-weight-strong);
}

@media (hover: hover) {
	.swbs .swbs__listbox-option:hover {
		background: var(--swbs-black);
		color: var(--swbs-white);
		-webkit-text-fill-color: var(--swbs-white);
	}
}

.swbs .swbs__listbox-title {
	display: block;
	font-size: var(--swbs-size-text);
	overflow-wrap: break-word;
}

.swbs .swbs__listbox-meta {
	display: block;
	margin-top: 2px;
	font-size: var(--swbs-size-hint);
	color: var(--swbs-muted);
	overflow-wrap: break-word;
}

/* Im aktiven Eintrag muss auch die Zusatzangabe lesbar bleiben. */
.swbs .swbs__listbox-option--active .swbs__listbox-meta {
	color: var(--swbs-on-green);
	-webkit-text-fill-color: var(--swbs-on-green);
}

@media (hover: hover) {
	.swbs .swbs__listbox-option:hover .swbs__listbox-meta {
		color: var(--swbs-white);
		-webkit-text-fill-color: var(--swbs-white);
	}
}

/* --- Auswahllisten ---------------------------------------------------- */

.swbs .swbs__options-headline {
	margin: var(--swbs-gap) 0 10px !important;
	font-family: var(--swbs-font) !important;
	font-size: var(--swbs-size-text) !important;
	font-weight: var(--swbs-weight-strong) !important;
	line-height: 1.4 !important;
	color: var(--swbs-ink) !important;
	-webkit-text-fill-color: var(--swbs-ink);
}

.swbs .swbs__options {
	display: grid;
	gap: 12px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.swbs .swbs__options li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.swbs .swbs__options li::before,
.swbs .swbs__options li::marker {
	content: none !important;
}

/* Die gesamte Karte ist die Schaltflaeche. */
.swbs .swbs__option {
	display: block;
	width: 100%;
	min-height: 52px;
	text-align: left;
	padding: var(--swbs-pad) !important;
	border: var(--swbs-border-width) solid var(--swbs-ink) !important;
	border-radius: var(--swbs-radius) !important;
	background: var(--swbs-surface) !important;
	color: var(--swbs-ink) !important;
	font-family: var(--swbs-font) !important;
	font-size: var(--swbs-size-text) !important;
	font-weight: var(--swbs-weight-normal) !important;
	line-height: 1.4;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none !important;
	transition: background-color 0.15s ease;
}

.swbs .swbs__option:hover {
	background: var(--swbs-soft) !important;
}

.swbs .swbs__option-title {
	display: block;
	font-size: var(--swbs-size-text);
	font-weight: var(--swbs-weight-strong);
	overflow-wrap: break-word;
}

.swbs .swbs__option-meta {
	display: block;
	margin-top: 4px;
	font-size: var(--swbs-size-hint);
	font-weight: var(--swbs-weight-normal);
	color: var(--swbs-muted);
	overflow-wrap: break-word;
}

/* --- Hinweise --------------------------------------------------------- */

/*
 * Alle Hinweise tragen denselben Rahmen: 3 px, Schwarz, 15 px Radius, kein
 * Schatten, keine verstaerkte oder farbige linke Kante. Die Unterscheidung
 * erfolgt ueber die Wortwahl, nicht ueber einen Farbbalken.
 */
.swbs .swbs__note {
	margin: 0 0 var(--swbs-gap) !important;
	padding: 14px var(--swbs-pad) !important;
	border: var(--swbs-border-width) solid var(--swbs-ink) !important;
	border-radius: var(--swbs-radius) !important;
	background: var(--swbs-surface) !important;
	font-family: var(--swbs-font) !important;
	font-size: var(--swbs-size-text) !important;
	font-weight: var(--swbs-weight-normal) !important;
	line-height: 1.45 !important;
	color: var(--swbs-ink) !important;
	-webkit-text-fill-color: var(--swbs-ink);
	/* Auch eine lange Meldung bleibt vollstaendig lesbar. */
	overflow-wrap: break-word !important;
}

/* Der Demohinweis ist der einzige Hinweis mit abweichender Flaeche. */
.swbs .swbs__note--demo {
	background: var(--swbs-soft) !important;
	font-weight: var(--swbs-weight-strong) !important;
}

/*
 * Echte Fehler: rote Flaeche und rote Schrift, aber derselbe schwarze Rahmen wie
 * alle anderen Boxen - kein verstaerkter linker Rand, kein Schatten, keine
 * zusaetzliche Outline.
 */
.swbs .swbs__note--error {
	background: var(--swbs-error-surface) !important;
	color: var(--swbs-error-ink) !important;
	-webkit-text-fill-color: var(--swbs-error-ink);
	font-weight: var(--swbs-weight-strong) !important;
}

/* Getroffene Auswahl eines Zwischenschrittes. */
.swbs .swbs__selection {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	margin: 0 0 var(--swbs-gap);
	padding: 12px var(--swbs-pad);
	border: var(--swbs-border-width) solid var(--swbs-ink);
	border-radius: var(--swbs-radius);
	background: var(--swbs-soft);
}

.swbs .swbs__selection-text {
	font-size: var(--swbs-size-text);
	font-weight: var(--swbs-weight-strong);
	color: var(--swbs-ink);
}

/*
 * Feldbezogene Meldung: rot, ohne eigene Box. Sie steht unmittelbar am Feld und
 * ist ueber aria-describedby damit verbunden.
 */
.swbs .swbs__field-error {
	display: block;
	margin: 8px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-family: var(--swbs-font) !important;
	font-size: var(--swbs-size-text) !important;
	font-weight: var(--swbs-weight-strong) !important;
	line-height: 1.45 !important;
	color: var(--swbs-error-ink) !important;
	-webkit-text-fill-color: var(--swbs-error-ink);
	/* Lange Fehlermeldungen brechen vollstaendig um, statt zu ueberlaufen. */
	overflow-wrap: break-word !important;
}

/*
 * Ein ungueltiges Feld ist nicht allein an einer Farbe erkennbar: Es traegt
 * aria-invalid, eine verbundene Meldung im Text und eine doppelte Kontur.
 */
.swbs .swbs__input[aria-invalid="true"] {
	border-style: double !important;
	border-width: 6px !important;
}

/* --- Ergebnis --------------------------------------------------------- */

.swbs .swbs__result {
	padding: var(--swbs-pad) !important;
	border: var(--swbs-border-width) solid var(--swbs-ink) !important;
	border-radius: var(--swbs-radius) !important;
	background: var(--swbs-surface) !important;
	box-shadow: none !important;
}

/*
 * Desktop: Foto links neben den Daten. Mobil kippt die Reihe, das Foto steht
 * dann oberhalb. Ohne Foto entsteht keine leere Spalte, weil das Bildelement
 * gar nicht erzeugt wird und der Text die volle Breite nutzt.
 */
.swbs .swbs__result-head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--swbs-pad);
	align-items: flex-start;
}

/*
 * Das Foto traegt keinen eigenen Rahmen mehr: Die Ergebniskarte umschliesst es
 * bereits. Nur der Radius bleibt, das Bild wird sauber beschnitten.
 */
.swbs .swbs__result-photo {
	flex: 0 0 auto;
	width: 104px;
	height: 130px;
	object-fit: cover;
	border: 0 !important;
	border-radius: var(--swbs-radius);
	box-shadow: none !important;
	background: var(--swbs-soft);
}

.swbs .swbs__result-body {
	flex: 1 1 240px;
}

.swbs .swbs__result-name {
	margin: 0 0 6px !important;
	font-family: var(--swbs-font) !important;
	font-size: var(--swbs-size-name) !important;
	font-weight: var(--swbs-weight-strong) !important;
	line-height: 1.2 !important;
	color: var(--swbs-ink) !important;
	-webkit-text-fill-color: var(--swbs-ink);
	overflow-wrap: break-word;
}

.swbs .swbs__result-role {
	margin: 0 0 14px !important;
	font-size: var(--swbs-size-text) !important;
	font-weight: var(--swbs-weight-strong) !important;
	color: var(--swbs-ink) !important;
	-webkit-text-fill-color: var(--swbs-ink);
}

.swbs .swbs__data {
	display: grid;
	gap: 10px;
	margin: 16px 0 0;

	/*
	 * Einheitliche Breite aller Aktionsschalter innerhalb einer Ergebnisbox.
	 * "ANRUFEN" und "E-MAIL SCHREIBEN" stehen damit buendig untereinander.
	 */
	--swbs-action-width: 190px;
}

/*
 * Festes Raster statt umbrechendem Flex. Genau darin lag der Fehler: Mit
 * flex-wrap rutschte der Schalter "E-Mail schreiben" unter eine lange
 * E-Mail-Adresse, waehrend die kuerzeren Telefonzeilen rechts stehen blieben.
 * Drei Spalten - Bezeichnung, Angabe, Aktion - liegen dagegen fest; die Angabe
 * bricht innerhalb ihrer Spalte um und verschiebt nichts.
 *
 * Zeilen ohne Aktion (etwa Fax) belegen die Spalten zwei und drei gemeinsam.
 * Fehlende Kontaktfelder erzeugen gar keine Zeile und koennen das Raster
 * deshalb nicht verschieben.
 */
.swbs .swbs__data-row {
	display: grid;
	grid-template-columns: minmax(80px, max-content) minmax(0, 1fr) max-content;
	align-items: center;
	gap: 4px 12px;
	font-size: var(--swbs-size-text);
	line-height: 1.45;
}

.swbs .swbs__data-key {
	grid-column: 1;
	font-weight: var(--swbs-weight-strong);
	color: var(--swbs-ink);
}

.swbs .swbs__data-value {
	grid-column: 2 / -1;
	min-width: 0;
	font-weight: var(--swbs-weight-normal);
	overflow-wrap: anywhere;
}

/* In einer Zeile mit Aktion endet die Angabe vor der dritten Spalte. */
.swbs .swbs__data-row--action .swbs__data-value {
	grid-column: 2;
}

.swbs .swbs__data-text {
	display: block;
	min-width: 0;
	overflow-wrap: anywhere;
}

.swbs .swbs__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	grid-column: 3;
	justify-self: end;
	/* Gleiche Breite fuer alle Aktionen einer Ergebnisbox. */
	min-width: var(--swbs-action-width);
	/* Bedienhoehe ueber 44 px. */
	min-height: 44px;
	padding: 8px 16px !important;
	border: var(--swbs-border-width) solid var(--swbs-ink) !important;
	border-radius: var(--swbs-radius) !important;
	background: var(--swbs-green) !important;
	color: var(--swbs-on-green) !important;
	-webkit-text-fill-color: var(--swbs-on-green);
	font-family: var(--swbs-font) !important;
	font-size: var(--swbs-size-hint) !important;
	font-weight: var(--swbs-weight-strong) !important;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	/* Als Aktion, nicht als Textlink. */
	text-decoration: none !important;
	border-bottom-width: var(--swbs-border-width) !important;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

@media (hover: hover) {
	.swbs .swbs__action:hover {
		background: var(--swbs-black) !important;
		color: var(--swbs-white) !important;
		-webkit-text-fill-color: var(--swbs-white);
	}
}

.swbs .swbs__action:focus-visible {
	outline: var(--swbs-border-width) solid var(--swbs-ink) !important;
	outline-offset: 3px !important;
}

/*
 * Echte Verweise in der Ergebniskarte bleiben als Verweise erkennbar. Die
 * Aktionsschalter sind ausdruecklich ausgenommen: Sie sind Schaltflaechen und
 * wuerden sonst die Unterstreichung dieser Regel erben.
 *
 * Seit 0.1.17 gilt das auch fuer die Gruppe der direkten Kontaktaktionen.
 * "Anrufen" und "E-Mail" sind dort Verweise - technisch, damit das Geraet
 * waehlt oder das Mailprogramm oeffnet -, aber sie sollen als Schalter wirken.
 * Ohne diese zweite Ausnahme erbten genau sie die Unterstreichung (D-113).
 */
.swbs .swbs__result a:not(.swbs__action):not(.swbs__contact-action) {
	color: var(--swbs-ink) !important;
	-webkit-text-fill-color: var(--swbs-ink);
	font-weight: var(--swbs-weight-normal);
	text-decoration: underline !important;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

.swbs .swbs__used-address {
	margin: var(--swbs-gap) 0 0 !important;
	padding: 14px var(--swbs-pad) !important;
	border: var(--swbs-border-width) solid var(--swbs-ink);
	border-radius: var(--swbs-radius);
	font-size: var(--swbs-size-text);
}

.swbs .swbs__used-address dt {
	margin: 12px 0 2px !important;
	font-size: var(--swbs-size-hint) !important;
	font-weight: var(--swbs-weight-strong) !important;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--swbs-ink) !important;
	-webkit-text-fill-color: var(--swbs-ink);
}

.swbs .swbs__used-address dt:first-child {
	margin-top: 0 !important;
}

.swbs .swbs__used-address dd {
	margin: 0 !important;
	font-size: var(--swbs-size-text);
	font-weight: var(--swbs-weight-normal);
	overflow-wrap: break-word;
}

/* --- Kontaktstelle ---------------------------------------------------- */

.swbs .swbs__contact {
	margin: 0 0 var(--swbs-gap);
	padding: var(--swbs-pad);
	border: var(--swbs-border-width) solid var(--swbs-ink);
	border-radius: var(--swbs-radius);
	background: var(--swbs-surface);
}

.swbs .swbs__contact-name {
	margin: 0 0 8px !important;
	font-family: var(--swbs-font) !important;
	font-size: var(--swbs-size-name) !important;
	font-weight: var(--swbs-weight-strong) !important;
	line-height: 1.25 !important;
	color: var(--swbs-ink) !important;
	-webkit-text-fill-color: var(--swbs-ink);
	/* Lange Bezeichnungen brechen um, statt zu schrumpfen. */
	overflow-wrap: break-word;
}

.swbs .swbs__contact-status {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin: 0 0 var(--swbs-gap) !important;
	font-size: var(--swbs-size-text) !important;
}

/* Der Status steht als Text da; die Flaeche ist nur eine Ergaenzung. */
.swbs .swbs__contact-badge {
	font-weight: var(--swbs-weight-strong);
	color: var(--swbs-ink);
}

.swbs .swbs__contact-detail {
	color: var(--swbs-muted);
}

.swbs .swbs__hours {
	margin: var(--swbs-gap) 0 0 !important;
	padding: 0 !important;
	font-size: var(--swbs-size-text);
}

.swbs .swbs__hours-title {
	margin: 0 0 6px !important;
	font-size: var(--swbs-size-hint) !important;
	font-weight: var(--swbs-weight-strong) !important;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--swbs-ink) !important;
	-webkit-text-fill-color: var(--swbs-ink);
}

.swbs .swbs__hours-row {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 10px;
	line-height: 1.45;
}

.swbs .swbs__hours-day {
	flex: 0 0 120px;
	font-weight: var(--swbs-weight-strong);
}

.swbs .swbs__hours-time {
	flex: 1 1 120px;
	overflow-wrap: break-word;
}

/* --- Ladezustand ------------------------------------------------------ */

.swbs .swbs__loading {
	display: flex;
	align-items: center;
	gap: 12px;
	/* Feste Mindesthoehe, damit beim Laden nichts springt. */
	min-height: 56px;
	padding: 14px var(--swbs-pad);
	border: var(--swbs-border-width) solid var(--swbs-ink);
	border-radius: var(--swbs-radius);
	font-size: var(--swbs-size-text);
	color: var(--swbs-ink);
}

.swbs .swbs__spinner {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border: 3px solid var(--swbs-soft);
	/* Dekorativ, reine Bewegungsanzeige. */
	border-top-color: var(--swbs-green);
	border-radius: 50%;
	animation: swbs-spin 0.8s linear infinite;
}

@keyframes swbs-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.swbs *,
	.swbs *::before,
	.swbs *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.swbs .swbs__spinner {
		border-top-color: var(--swbs-ink);
	}
}

/* --- Meldeformular ---------------------------------------------------- */

.swbs .swbs__report {
	margin-top: var(--swbs-gap);
	padding: var(--swbs-pad);
	border: var(--swbs-border-width) solid var(--swbs-ink);
	border-radius: var(--swbs-radius);
}

/* --- Nur fuer Hilfsmittel --------------------------------------------- */

.swbs .swbs__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Mobil ------------------------------------------------------------- */

@media (max-width: 599px) {
	.swbs {
		/*
		 * Hierarchie auf dem Telefon.
		 *
		 * Die Ueberschrift der Seite steht ueber dem Ganzen und ordnet ein.
		 * Die Schrittueberschriften darunter sagen, wo man gerade ist - sie
		 * sollen fuehren, nicht mit ihr konkurrieren. Auf einem schmalen Bild
		 * taten sie das mit 22 px: Sie fuellten zwei bis drei Zeilen und
		 * drueckten das Eigentliche nach unten (D-116).
		 *
		 * Unveraendert bleiben Eingabefelder (18 px - darunter zoomt iOS beim
		 * Antippen), Schaltflaechen und Aktionsschalter. Nichts faellt unter
		 * 14 px.
		 */
		--swbs-size-head: 18px;
		--swbs-size-name: 18px;
		--swbs-size-button: 16px;
		--swbs-size-input: 18px;
		--swbs-size-text: 15px;
		--swbs-size-label: 14px;
		--swbs-size-hint: 15px;
	}

	/* Suchweg-Schalter und Aktionen stehen untereinander. */
	.swbs .swbs__tab,
	.swbs .swbs__button {
		flex: 1 1 100%;
		width: 100%;
	}

	/*
	 * Die Schrittueberschrift darf auch bei sehr langen Woertern nicht
	 * ueberlaufen. Versalien und feste Laufweite machen sie breiter, als die
	 * Zeichenzahl vermuten laesst.
	 */
	.swbs h2.swbs__headline,
	.swbs .swbs__headline {
		letter-spacing: 0 !important;
		hyphens: auto;
		-webkit-hyphens: auto;
	}

	.swbs .swbs__button--link {
		flex: 0 0 auto;
		width: auto;
	}

	/* Foto oberhalb der Daten. */
	.swbs .swbs__result-head {
		flex-direction: column;
	}

	.swbs .swbs__result-photo {
		width: 116px;
		height: 145px;
	}

	/*
	 * Metadaten untereinander: eine Spalte, feste Reihenfolge. Bezeichnung,
	 * Angabe, Aktion - kein zufaelliger Umbruch, kein waagerechter Ueberlauf.
	 */
	.swbs .swbs__data-row,
	.swbs .swbs__data-row--action {
		grid-template-columns: minmax(0, 1fr);
	}

	.swbs .swbs__data-key,
	.swbs .swbs__data-value,
	.swbs .swbs__data-row--action .swbs__data-value {
		grid-column: 1;
	}

	/* Bürozeiten ebenfalls, damit nichts abgeschnitten wird. */
	.swbs .swbs__hours-day,
	.swbs .swbs__hours-time {
		flex: 0 0 100%;
	}

	/* Kontaktaktionen über die volle Breite unter der jeweiligen Angabe. */
	.swbs .swbs__action {
		grid-column: 1;
		justify-self: stretch;
		min-width: 0;
		margin-top: 8px;
		white-space: normal;
	}
}

/* --- Zusammenspiel mit Seitenbaukaesten -------------------------------- */

/*
 * Warum das Plugin hier ueberhaupt etwas regelt.
 *
 * Ein Elementor-Popup wird als gewoehnlicher Abschnitt in die Seite gedruckt
 * und erst durch JavaScript in den Dialog gehoben. Zwischen dem ersten
 * darstellbaren Bild und diesem Umbau ist die rohe Vorlage sichtbarer
 * Seiteninhalt - beim harten Neuladen sieht man die Suchmaske fuer einen
 * Moment unterhalb des Footers stehen, bevor sie an ihren Platz springt.
 *
 * Das Plugin kann das nicht in Elementor beheben, aber es kann dafuer sorgen,
 * dass SEINE Maske nicht an der falschen Stelle auftaucht. Die Regel ist so eng
 * gefasst wie moeglich (D-107):
 *
 * - Sie greift nur fuer eine Popup-Vorlage, die tatsaechlich eine Suchmaske
 *   enthaelt. Fremde Popups bleiben unberuehrt.
 * - Sie greift nicht, sobald die Vorlage im Dialog steht - dort soll sie ja
 *   sichtbar sein.
 * - Sie greift nicht im Elementor-Editor, sonst liesse sich das Popup nicht
 *   mehr bearbeiten.
 *
 * Kennt ein Browser :has() nicht, faellt die Regel ersatzlos aus. Dann bleibt
 * es beim bisherigen Verhalten - schlechter, aber nicht kaputt.
 */
body:not(.elementor-editor-active):not(.elementor-editor-preview)
	[data-elementor-type="popup"]:has(.swbs):not(.dialog-widget):not(.dialog-widget *):not(.elementor-popup-modal):not(.elementor-popup-modal *) {
	display: none !important;
}

/*
 * Und innerhalb des Dialogs: Die Maske wird erst sichtbar, wenn ihr konkreter
 * Knoten wirklich gestartet ist.
 *
 * Das Attribut allein waere kein Beleg - es wird beim Klonen mitkopiert
 * (D-100). Es traegt hier auch nicht die Beweislast: Das Startverfahren
 * entfernt ein mitgebrachtes Attribut, bevor es den Knoten uebernimmt, und
 * setzt es erst nach dem Aufbau wieder. Zwischen beidem liegt kein Bild.
 *
 * "visibility" statt "display": Der Platz bleibt reserviert, es gibt also auch
 * beim Sichtbarwerden keinen Sprung.
 */
[data-elementor-type="popup"] .swbs:not([data-swbs-ready]) {
	visibility: hidden;
}

/*
 * Der aktive Modalcontainer waehrend seiner Vorbereitung.
 *
 * Die Klasse setzt das Skript selbst - an genau den Container, in dem eine
 * Suchmaske steckt, und in demselben Arbeitsschritt, in dem der Container ins
 * Dokument kommt. Sie faellt wieder weg, sobald die Maske aufgebaut ist und der
 * Container nachweislich still im Sichtfenster steht (D-108).
 *
 * "visibility" und nicht "display": Der Container behaelt seine Masse, und der
 * Seitenbaukasten kann seine Position weiter berechnen. Genau das braucht er,
 * um sie zu korrigieren.
 *
 * Die zweite Zeile ist Vorsorge gegen fremde Regeln, die einzelnen Nachfahren
 * ausdruecklich "visibility: visible" geben - die Vererbung allein genuegte
 * dann nicht.
 */
.swbs-popup-pending,
.swbs-popup-pending * {
	visibility: hidden !important;
}

.swbs-popup-pending {
	pointer-events: none !important;
}

/* --- Direkte Kontaktaktionen des Ergebnisses --------------------------- */

/*
 * Anrufen, schreiben, speichern - drei gleichwertige Schalter unter den
 * Kontaktdaten.
 *
 * Warum sie nicht mehr neben den Angaben stehen: Ein Schalter in derselben
 * Zeile nimmt der Angabe rund 190 px. Eine lange E-Mail-Adresse brach dadurch
 * mitten im Wort um. Unter den Daten hat die Angabe die volle Breite, und die
 * Aktionen stehen beieinander (D-109).
 *
 * Keiner der drei ist die Hauptaktion. Sie sind deshalb weiss mit gruenem
 * Rahmen, waehrend "Neue Suche" unveraendert die gefuellte Hauptschaltflaeche
 * bleibt.
 */
.swbs .swbs__contact-actions {
	/*
	 * Der Gruenton der mitgelieferten Symbole. Er steht hier und nicht bei den
	 * uebrigen Farben, weil er ausschliesslich zu dieser Gruppe gehoert.
	 */
	--swbs-action-green: #95c11f;

	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.swbs .swbs__contact-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	/*
	 * Gleichmaessig breit, solange Platz ist. Die Grundbreite von 140 px
	 * entscheidet den Umbruch: Drei nebeneinander, sonst zwei und einer, sonst
	 * untereinander. Geschrumpft wird nicht unter den eigenen Inhalt - daher
	 * bricht die Gruppe um, statt waagerecht ueberzulaufen.
	 */
	flex: 1 1 140px;
	/* Bedienhoehe ueber 44 px. */
	min-height: 44px;
	padding: 8px 16px !important;
	border: var(--swbs-border-width) solid var(--swbs-action-green) !important;
	border-radius: var(--swbs-radius) !important;
	background: var(--swbs-white) !important;
	color: var(--swbs-ink) !important;
	-webkit-text-fill-color: var(--swbs-ink);
	font-family: var(--swbs-font) !important;
	font-size: var(--swbs-size-hint) !important;
	font-weight: var(--swbs-weight-strong) !important;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-align: center;
	/* Als Aktion, nicht als Textlink. */
	text-decoration: none !important;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none !important;
	text-shadow: none !important;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

/*
 * Das Symbol behaelt sein Seitenverhaeltnis und seine mitgelieferte Farbe. Es
 * wird als Bild eingebunden und deshalb bewusst nicht per CSS eingefaerbt.
 */
.swbs .swbs__contact-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	object-fit: contain;
}

.swbs .swbs__contact-label {
	min-width: 0;
}

@media (hover: hover) {
	/*
	 * Nur eine leichte Toenung: Der Schalter soll antworten, nicht die Farbe
	 * wechseln. Kein Schatten, keine Vergroesserung.
	 */
	.swbs .swbs__contact-action:hover {
		background: rgba(149, 193, 31, 0.1) !important;
		border-color: var(--swbs-action-green) !important;
	}
}

/* Derselbe sichtbare Fokus wie bei den uebrigen bedienbaren Elementen. */
.swbs .swbs__contact-action:focus-visible {
	outline: var(--swbs-border-width) solid var(--swbs-ink) !important;
	outline-offset: 3px !important;
}