/**
 * 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 {
	/*
	 * 24 px zur Moduswahl darunter. Der Abstandskanon von 1.0.0 kennt nur
	 * 8, 16, 24 und 32 px; die Beschriftung eroeffnet den Block und bekommt
	 * deshalb den groesseren der beiden mittleren Werte (D-132).
	 */
	margin: 0 0 24px !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 ---------------------------------------- */

/*
 * Die Moduswahl ist EIN Schalter mit zwei Feldern, kein Paar Schaltflaechen.
 *
 * Bis 1.0.0 standen "Adresse suchen" und "Namen suchen" als zwei vollstaendige
 * Schalter nebeneinander - zwei Rahmen, ein Spalt dazwischen, mobil sogar
 * uebereinander gestapelt. Sie lasen sich damit wie zwei Handlungsaufrufe,
 * obwohl sie eine einzige Entscheidung sind: entweder das eine oder das andere.
 *
 * Seit 1.0.1 traegt die Leiste den Rahmen. Mit 1.0.2 bekommt der gewaehlte
 * Zustand zusaetzlich eine eigene, gerundete Flaeche INNERHALB dieses Rahmens -
 * die Bauform, die ein App-Selector benutzt. Der Innenabstand von 4 px ist
 * dabei das ganze Mittel: Er macht aus der gefuellten Haelfte eine Auswahl, die
 * im Schalter liegt, statt ihn auszufuellen (D-143).
 *
 * Die Semantik bleibt vollstaendig, wie sie war: tablist, tab, aria-selected,
 * aria-controls, Tabulator- und Pfeiltastenbedienung. Das Skript wurde dafuer
 * nicht angefasst - es ist ausschliesslich die Darstellung, die sich aendert.
 */
.swbs .swbs__tabs {
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	/*
	 * Eine Moduswahl ueber die volle Lesebreite waere kein Selector mehr,
	 * sondern eine Leiste. Sie bleibt deshalb kompakt und steht mittig - auf
	 * dem Schreibtisch wie auf dem Telefon dieselbe Bauform, nur enger.
	 */
	max-width: 480px;
	/* Moduswahl zur Schrittueberschrift: 24 px (Abstandskanon 1.0.0). */
	margin: 0 auto 24px;
	/*
	 * Der Innenabstand, aus dem die Auswahlflaeche entsteht. Er ist der
	 * einzige Unterschied zu einer schlicht geteilten Flaeche.
	 */
	padding: 4px;
	border: var(--swbs-border-width) solid var(--swbs-ink);
	border-radius: var(--swbs-radius);
	background: var(--swbs-surface);
}

.swbs .swbs__tab {
	/*
	 * Beide Felder sind exakt gleich breit - unabhaengig davon, wie lang ihre
	 * Beschriftung ist. Die Grundbreite ist deshalb 0 und nicht "auto".
	 */
	flex: 1 1 0;
	min-width: 0;
	/* Lange Beschriftungen brechen um, statt zu ueberlaufen. */
	white-space: normal;
	/* Touch-Ziel ueber 44 px, ohne den Schalter aufzublaehen. */
	min-height: 46px;
	/*
	 * Waagerecht knapp: Die Haelfte des Platzes muss fuer "ADRESSE SUCHEN"
	 * reichen, und Rahmen wie Innenabstand der Leiste liefern den optischen
	 * Abstand bereits mit.
	 */
	padding: 10px 8px !important;
	/*
	 * Kein eigener Rahmen und keine eigene Flaeche: Beides gehoert der Leiste.
	 * Der Radius liegt trotzdem hier - er beschreibt die Auswahlflaeche, die
	 * beim gewaehlten Feld sichtbar wird.
	 */
	border: 0 !important;
	border-radius: calc(var(--swbs-radius) - 4px) !important;
	background: transparent !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 Wechsel der Flaeche ist kurz und ruhig: 160 ms, keine Bewegung, keine
	 * Groessenaenderung, kein Schatten. Bei "prefers-reduced-motion" faellt er
	 * ueber die Sammelregel weiter unten praktisch weg.
	 *
	 * Eine gleitende Auswahlflaeche waere die naechste Stufe - sie braeuchte
	 * ein eigenes Element und damit eine Aenderung am Skript. Die Umschaltlogik
	 * wird dafuer nicht angefasst (D-143).
	 */
	transition: background-color 0.16s ease, color 0.16s ease;
}

/*
 * Zwei Beschriftungen je Feld, sichtbar ist immer genau eine.
 *
 * Oberhalb des Mobil-Umbruchs die lange Form ("ADRESSE SUCHEN"), darunter die
 * kurze ("ADRESSE"). Auf einem 320-px-Telefon steht jedem Feld nur die halbe
 * Breite zur Verfuegung; die lange Form bricht dort um, und kleiner als 16 px
 * wird sie ausdruecklich nicht.
 *
 * "display: none" und nicht "visibility" oder eine Absetzung fuer Hilfsmittel:
 * Nur so faellt die verborgene Form auch aus dem zugaenglichen Namen heraus.
 * Angesagt wird damit immer genau das, was auch dasteht (D-145).
 */
.swbs .swbs__tab-short {
	display: none;
}

/*
 * Die gewaehlte Auswahl: voll Schorni-Gruen mit schwarzer Schrift, gerundet,
 * mit 4 px Luft zum Rahmen ringsum.
 *
 * 1.0.0 hatte die Flaeche zu einer Toenung zurueckgenommen und dafuer einen
 * zweiten Ring in den Schalter gelegt. Beides ist hinfaellig: Der Ring
 * entfaellt ersatzlos (D-141), die Flaeche ist der volle Markenton, und ihre
 * Kante ist die Auswahl selbst - keine zusaetzliche Kontur (D-143).
 *
 * Gruen traegt schwarze Schrift (8,78:1), niemals weisse - wie ueberall in
 * dieser Oberflaeche.
 */
.swbs .swbs__tab--active {
	background: var(--swbs-green) !important;
	color: var(--swbs-on-green) !important;
	-webkit-text-fill-color: var(--swbs-on-green);
}

/*
 * Hover der Moduswahl: dieselbe zurueckhaltende Toenung wie bei den
 * Kontaktaktionen der Ergebniskarte.
 *
 * Bis 0.1.25 wechselte auch dieser Schalter auf eine schwarze Flaeche. Das war
 * fuer eine Hauptaktion richtig und fuer eine Moduswahl zu viel: Der Zeiger
 * loeste einen Zustandswechsel aus, der staerker aussah als die Auswahl selbst.
 * Die Hauptaktionen ("Weiter", "Neue Suche") und die Aktionsschalter der
 * Ergebniskarte behalten den schwarzen Hover unveraendert (D-133).
 *
 * Keine Bewegung, keine Groessenaenderung, kein Schatten - nur die Flaeche.
 *
 * Der Hover ist an Zeigegeraete gebunden. Auf Touchgeraeten bleibt er sonst
 * nach der Beruehrung haengen.
 */
@media (hover: hover) {
	.swbs .swbs__tab:hover {
		background: rgba(126, 187, 52, 0.1) !important;
		color: var(--swbs-ink) !important;
		-webkit-text-fill-color: var(--swbs-ink);
	}

	/* Die gewaehlte Haelfte bleibt im Hover, was sie ist: voll gruen. */
	.swbs .swbs__tab--active:hover {
		background: var(--swbs-green) !important;
		color: var(--swbs-on-green) !important;
		-webkit-text-fill-color: var(--swbs-on-green);
	}
}

/* --- 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;
	/*
	 * Seit 1.0.0 mittig - auf derselben Achse wie die Popup-Ueberschrift
	 * darueber. Die Ueberschrift ordnet ein, sie ist keine Arbeitsflaeche:
	 * Beschriftungen, Felder, Trefferdaten und laengere Erklaerungen bleiben
	 * ausdruecklich linksbuendig (D-134).
	 */
	text-align: center !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.
	 *
	 * Ausdruecklich OHNE Silbentrennung. Sie stand hier, solange die
	 * Ueberschrift auf einer schmalen Spalte stand, und erzeugte dort das
	 * gemeldete "FUER WELCHE ADRESSE SU-CHEN SIE?". Seit der Inhalt mobil
	 * wieder die volle Breite hat, ist der Trennstrich weder noetig noch
	 * gewollt: normaler Wortumbruch (D-143).
	 */
	overflow-wrap: break-word !important;
}

/*
 * 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;
}

/*
 * Die kurze Zeile unmittelbar unter der Schrittueberschrift gehoert zur
 * Orientierung und steht deshalb auf derselben Achse - aber nur sie.
 *
 * Der Ausschluss ist kein Schoenheitsfehler, sondern die Regel selbst: Der
 * Nichttrefferfall setzt an dieselbe Stelle einen mehrzeiligen Handlungstext
 * ("Bitte pruefen Sie zunaechst noch einmal Strasse, Hausnummer ..."). Zentriert
 * gesetzt ist so ein Absatz schlechter lesbar, weil jede Zeile an einer anderen
 * Stelle beginnt. Er traegt deshalb swbs__lead--flow und bleibt linksbuendig
 * (D-134).
 */
.swbs .swbs__headline + .swbs__lead:not(.swbs__lead--flow) {
	text-align: center !important;
}

/*
 * Die kleine Hilfszeile unter einem Eingabefeld.
 *
 * Sie ist ausdruecklich keine Ueberschrift und keine Erklaerzeile: Sie steht
 * unter dem Feld, in der kleinsten Groesse des Kanons, in Grau - und sie kostet
 * keinen zusaetzlichen Abstand. Das Feld darueber gibt seinen unteren Abstand
 * dafuer ab (D-146).
 *
 * Kennt ein Browser :has() nicht, faellt nur die Abstandskorrektur aus. Dann
 * steht die Zeile etwas tiefer - schlechter, aber nicht kaputt.
 */
.swbs .swbs__field:has(+ .swbs__hint) {
	margin-bottom: 6px;
}

.swbs .swbs__hint {
	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.4 !important;
	text-align: left !important;
	color: var(--swbs-muted) !important;
	-webkit-text-fill-color: var(--swbs-muted);
}

.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;
}

/*
 * Eine Ausnahme, aus demselben Grund wie beim Eingabefeld (D-99): Die beiden
 * Felder liegen im Rahmen der Leiste. Eine Kontur mit 3 px Abstand nach aussen
 * laege dort auf dem Rahmen und im Nachbarfeld. Sie rueckt deshalb in den
 * Innenabstand der Leiste - gleich sichtbar, ohne zweite aeussere Linie.
 */
.swbs .swbs__tab:focus-visible {
	outline-offset: 1px !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;
}

/*
 * Waehrend Vorschlaege geladen werden, ist die Liste kein Kasten, sondern nur
 * ein Drehrad. Ohne diese Regel erbte der Wartezustand den Rahmen der Liste und
 * erschien als leere weisse Pille unter dem Feld (D-125).
 */
.swbs .swbs__listbox--loading {
	border: 0 !important;
	background: none !important;
	overflow: visible;
}

.swbs .swbs__listbox-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Dieselbe Hoehe wie eine Trefferzeile: kein Sprung beim Umschalten. */
	min-height: 44px;
	padding: 0 !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 {
	/* Abstandskanon 1.0.0: 16 px darueber, 8 px zur Liste darunter. */
	margin: var(--swbs-gap) 0 8px !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;
	/* Karten untereinander: 16 px (Abstandskanon 1.0.0). */
	gap: var(--swbs-gap);
	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;
	/* Das Drehrad steht allein und mittig - es gibt keinen Text daneben. */
	justify-content: 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;
	/* Etwas groesser, seit es allein steht. */
	width: 26px;
	height: 26px;
	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 --------------------------------------------- */

/*
 * Der Statusbereich verschwindet vom Bildschirm und bleibt fuer Hilfsmittel da.
 *
 * Diese Regel setzt sich durch, egal was Theme oder Seitenbaukasten danach
 * laden. Das ist der Unterschied zur Regel darunter, die ohne Nachdruck
 * arbeitet und sich von fremdem CSS aushebeln laesst - auf einer fremden
 * Innungsseite ist nicht vorhersehbar, was dort noch kommt (D-123).
 *
 * "clip" ist veraltet, "clip-path" der heutige Weg. Beide stehen hier, weil
 * beide fuer sich genommen genuegen und keiner der beiden ueberall gilt.
 *
 * Ausdruecklich NICHT "display: none" oder "visibility: hidden": Damit waere
 * der Status auch fuer eine Sprachausgabe fort.
 *
 * Zwei Wege zum selben Element, und das mit Absicht: ueber die Klasse und ueber
 * das Attribut. Die Vorlage wird serverseitig gerendert - liefert ein
 * Seitenzwischenspeicher noch das HTML einer aelteren Fassung, fehlt dort die
 * Klasse, waehrend das neue Stylesheet bereits geladen ist. Das Attribut
 * "data-swbs-live" traegt der Statusbereich dagegen seit jeher (D-124).
 */
.swbs .swbs__sr-only,
.swbs [data-swbs-live] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/*
 * Dieselbe Aufgabe, dieselbe Durchsetzungskraft. Diese Klasse steht in jedem
 * bisher ausgelieferten HTML; ohne Nachdruck war sie die einzige Regel des
 * Stylesheets, die sich von fremdem CSS aushebeln liess (D-123, D-124).
 */
.swbs .swbs__sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* --- 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;

		/*
		 * Feinere Kontur auf kleinen Displays.
		 *
		 * Die 3-px-Kontur ist die Markensprache und bleibt auf dem Schreibtisch
		 * unveraendert. Auf 320 bis 430 px Breite liegen dieselben Konturen
		 * jedoch ungleich dichter beieinander - Feld, Liste, Karte, Schalter -,
		 * und die Flaeche wirkt schwer. 2 px halten die Sprache und nehmen ihr
		 * das Gewicht (D-135).
		 *
		 * Ausdruecklich nicht 1 px: Eine Haarlinie waere ein anderer Stil, kein
		 * feinerer. Und ausdruecklich ueber die Variable: Damit ziehen alle
		 * Komponenten derselben Familie gemeinsam mit, statt einzeln
		 * auseinanderzulaufen. Der Radius bleibt bei 15 px.
		 */
		--swbs-border-width: 2px;
	}

	/*
	 * Der Suchwegschalter und die Aktionen nutzen die volle Contentbreite.
	 *
	 * Die Moduswahl steht dabei nicht mehr untereinander: Sie ist seit 1.0.1
	 * ein zweigeteilter Schalter und braucht als Ganzes eine Zeile statt zwei.
	 * Das ist zugleich die Antwort auf D-136 - die 104 px, die zwei gestapelte
	 * Schalter kosteten, sind auf eine Zeile zusammengefallen (D-142).
	 */
	.swbs .swbs__tabs,
	.swbs .swbs__button {
		flex: 1 1 100%;
		width: 100%;
	}

	/*
	 * Bedienhoehe bleibt ueber dem 44-px-Mindestmass, ohne dass jede
	 * Schaltflaeche zum Block wird (D-136).
	 */
	.swbs .swbs__button {
		min-height: 48px;
	}

	/*
	 * Eingabefelder etwas leichter.
	 *
	 * Nur die senkrechte Polsterung und die Mindesthoehe geben nach; die
	 * Schriftgroesse bleibt bei 18 px. Unter 16 px zoomt iOS Safari beim
	 * Antippen in das Feld hinein und verschiebt die ganze Seite - das ist der
	 * Grund fuer die Untergrenze, nicht die Lesbarkeit allein (D-137).
	 */
	.swbs .swbs__input,
	.swbs .swbs__textarea {
		padding: 12px var(--swbs-pad) !important;
	}

	.swbs .swbs__input {
		min-height: 50px;
	}

	/*
	 * Die Schrittueberschrift darf auch bei sehr langen Woertern nicht
	 * ueberlaufen. Versalien und feste Laufweite machen sie breiter, als die
	 * Zeichenzahl vermuten laesst - die Laufweite faellt deshalb mobil auf 0.
	 *
	 * Die Silbentrennung, die hier bis 1.0.1 stand, ist entfallen: Sie war die
	 * Ursache des gemeldeten "SU-CHEN" und mit voller Contentbreite auch nicht
	 * mehr noetig (D-143).
	 */
	.swbs h2.swbs__headline,
	.swbs .swbs__headline {
		letter-spacing: 0 !important;
	}

	.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%;
	}

	/* Unterhalb von 600 px traegt die Moduswahl die kurze Beschriftung. */
	.swbs .swbs__tab-long {
		display: none;
	}

	.swbs .swbs__tab-short {
		display: inline;
	}

	/*
	 * Alles, was Inhalt traegt, laeuft ueber die volle Contentbreite.
	 *
	 * Die Angabe ist auf einem Blockelement folgenlos - und genau deshalb steht
	 * sie hier: Sie haelt fest, dass mobil keine dieser Flaechen mehr Breite
	 * reserviert oder abgibt. Ergebniskarte, Auswahlkarte, Vorschlagsliste,
	 * Eingabefeld und Innungsblock enden alle an derselben rechten Kante
	 * (D-140).
	 */
	.swbs .swbs__panel,
	.swbs .swbs__input,
	.swbs .swbs__textarea,
	.swbs .swbs__listbox,
	.swbs .swbs__option,
	.swbs .swbs__result,
	.swbs .swbs__guild {
		width: 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;
	}
}

/* --- Eigene Dialoghuelle ---------------------------------------------- */

/*
 * Warum das Plugin einen eigenen Dialog mitbringt.
 *
 * Bis 1.0.5 lieferte ihn der Seitenbaukasten, und das Plugin richtete seine
 * Geometrie unterhalb von 600 px nach. Das war viermal die falsche Reihenfolge:
 * Eine Popup-Vorlage kann auf mindestens fuenf Arten mehrspaltig sein, und jede
 * davon musste einzeln entschaerft werden (D-147).
 *
 * Diese Huelle hat diese Bauformen nicht. Es gibt keine Spalte, keine Rail und
 * kein Raster - es gibt eine Flaeche und darin eine Spalte. Die Suche steht
 * unveraendert darin (D-148).
 *
 * Die Regeln der Huelle beginnen mit ".swbs-modal", nicht mit ".swbs__": Sie
 * gehoert nicht in den Container, sie umschliesst ihn.
 */

/*
 * Die Marke, ein zweites Mal.
 *
 * Die Huelle liegt ausserhalb von ".swbs" und erbt deren Werte deshalb nicht.
 * Wiederholt wird ausdruecklich nur, was die Huelle selbst braucht - Kontur,
 * Radius, Flaeche, Schrift. Die Groessen und alle uebrigen Farben bleiben
 * dort, wo sie hingehoeren.
 */
.swbs-modal-overlay {
	--swbs-black: #050505;
	--swbs-white: #ffffff;
	--swbs-ink: var(--swbs-black);
	--swbs-surface: var(--swbs-white);
	--swbs-border-width: 3px;
	--swbs-radius: 15px;
	--swbs-font: "Barlow", "Barlow Semi Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	/* Dieselbe Groesse wie eine Bereichsueberschrift - es ist eine. */
	--swbs-size-head: 26px;
	--swbs-weight-strong: 700;

	/*
	 * Mindestens 5 px Luft zum sichtbaren Rand, auf jeder Seite einzeln. Wo das
	 * Geraet eine Aussparung meldet, gilt der groessere der beiden Werte. Die
	 * Ersatzangabe 0px in env() ist Absicht: Ohne sie faellt max() mitsamt der
	 * ganzen Angabe aus, wenn ein Browser den Aussparungsbegriff nicht kennt.
	 */
	--swbs-modal-top: max(5px, env(safe-area-inset-top, 0px));
	--swbs-modal-right: max(5px, env(safe-area-inset-right, 0px));
	--swbs-modal-bottom: max(5px, env(safe-area-inset-bottom, 0px));
	--swbs-modal-left: max(5px, env(safe-area-inset-left, 0px));

	position: fixed;
	inset: 0;
	z-index: 100000;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: var(--swbs-modal-top) var(--swbs-modal-right) var(--swbs-modal-bottom) var(--swbs-modal-left);
	box-sizing: border-box;

	background: rgba(5, 5, 5, 0.7);
}

/*
 * Geschlossen heisst geschlossen - auch gegen ein Theme, das [hidden] mit einer
 * eigenen Anzeigeart ueberschreibt.
 */
.swbs-modal-overlay[hidden] {
	display: none !important;
}

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

/*
 * Der Dialog selbst: eine Spalte, nicht mehr.
 *
 * "flex-direction: column" ist hier kein Layoutmittel fuer nebeneinander
 * stehende Teile, sondern das Gegenteil - es gibt genau drei Baender
 * untereinander: Kopf, Inhalt, nichts. Der Inhalt bekommt den Rest und scrollt
 * darin.
 */
.swbs-modal {
	position: relative;

	display: flex;
	flex-direction: column;

	width: 100%;
	/*
	 * Auf dem Schreibtisch nicht breiter als noetig. Der Wert folgt der
	 * Lesebreite der Suche (660 px) zuzueglich des Innenabstands der Huelle.
	 */
	max-width: 700px;
	max-height: 100%;

	border: var(--swbs-border-width) solid var(--swbs-ink);
	border-radius: var(--swbs-radius);
	background: var(--swbs-surface);

	font-family: var(--swbs-font);
	/* Kein Schatten - die Gestaltung kennt keinen. */
	box-shadow: none;
}

/*
 * Der Dialog nimmt den Fokus auf, ist aber kein Bedienelement.
 *
 * Beim Oeffnen geht der Fokus auf den Dialog selbst - nicht ins Eingabefeld,
 * das oeffnete auf dem Telefon sofort die Tastatur. Ein sichtbarer Rahmen um
 * den ganzen Dialog waere dann irrefuehrend: Er verspricht ein Bedienelement,
 * das es nicht gibt. Dieselbe Begruendung wie bei der Ergebnisueberschrift, und
 * dieselbe Grenze: Jedes wirklich bedienbare Element behaelt seinen Indikator.
 */
.swbs-modal:focus,
.swbs-modal:focus-visible {
	outline: none;
}

/*
 * Der Schliessen-Schalter schwebt.
 *
 * Genau das war der Kern des Mobilbefunds von 1.0.0: Ein Bedienziel von 44 px
 * im Layoutfluss belegt eine Spalte (D-140). Hier steht er von vornherein
 * ausserhalb des Flusses und kostet keine Contentbreite - insbesondere nimmt
 * er der Ueberschrift nichts weg.
 *
 * Er ist eine Flaeche ohne Flaeche: keine Fuellung, kein Rahmen, kein Radius,
 * kein Kreis - auch nicht im Hover. Sichtbar sind zwei Linien, bedienbar sind
 * 44 x 44 px (D-149).
 */
.swbs-modal-close {
	/*
	 * Der Gruenton des Originals. Er steht hier und nicht bei den uebrigen
	 * Farben, weil er ausschliesslich zu diesem Schalter gehoert - wie der
	 * Symbolton der Kontaktaktionen.
	 */
	--swbs-close-green: #76b629;

	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	/* Unsichtbare Bedienflaeche. */
	width: 44px;
	height: 44px;

	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;

	color: var(--swbs-close-green);
	line-height: 1;

	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
	transition: color 0.2s ease;
}

/* Das sichtbare Zeichen: gross, ohne Flaeche dahinter. */
.swbs-modal-close-icon {
	display: block;
	width: 32px;
	height: 32px;
	pointer-events: none;
}

@media (hover: hover) {
	.swbs-modal-close:hover {
		color: var(--swbs-ink);
		background: none;
	}
}

.swbs-modal-close:focus-visible,
.swbs-modal-close:focus {
	color: var(--swbs-ink);
	background: none;
}

/*
 * Der Fokus ist am Zeichen selbst schon zu sehen - es wechselt die Farbe. Die
 * Kontur bleibt trotzdem: Ein Farbwechsel allein traegt einen Zustand nicht.
 * Sie liegt eng am Bedienziel und zeichnet ausdruecklich keine Flaeche.
 */
.swbs-modal-close:focus-visible {
	outline: var(--swbs-border-width) solid var(--swbs-ink);
	outline-offset: -4px;
}

/*
 * Der Kopf.
 *
 * Er ist das einzige Band im Dialog, das dem X ausweichen muss - und er tut es
 * symmetrisch: links wie rechts derselbe Freiraum, damit die Ueberschrift ueber
 * die volle Breite optisch mittig bleibt. Unterhalb des Kopfes wird nichts
 * reserviert (D-148).
 */
.swbs-modal-header {
	/*
	 * Bezugspunkt fuer das schwebende X - und sonst nichts.
	 *
	 * Der Kopf haelt ausdruecklich KEINE Breite fuer den Schalter frei: Die
	 * Ueberschrift steht auf der Mittelachse des ganzen Dialogs, nicht auf der
	 * eines um 56 px verengten Bandes. Freigehalten wird nur senkrecht, damit
	 * die erste Zeile nicht unter dem Schalter liegt (D-149).
	 */
	position: relative;
	flex: 0 0 auto;
	/*
	 * Der Abstand zum Inhalt liegt bewusst NICHT hier, sondern im Inhalt: So
	 * ist er auch dann derselbe, wenn der Kopf einmal mehrzeilig wird.
	 */
	padding: 56px 16px 0;
	border-bottom: 0;
}

.swbs-modal-title {
	margin: 0;
	padding: 0;
	border: 0;

	font-family: var(--swbs-font);
	font-size: var(--swbs-size-head);
	font-weight: var(--swbs-weight-strong);
	/* Eng gesetzt, weil die Ueberschrift mehrzeilig ist. */
	line-height: 1.08;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.01em;

	color: var(--swbs-ink);
	-webkit-text-fill-color: var(--swbs-ink);
	text-decoration: none;

	/*
	 * "BEZIRKSSCHORNSTEINFEGER" wird niemals zerrissen.
	 *
	 * Alle drei Angaben zusammen sagen dasselbe von drei Seiten: nicht
	 * trennen, nicht im Wort umbrechen, nicht notumbrechen. Das Wort ist 23
	 * Zeichen lang und in Versalien breiter, als die Zeichenzahl vermuten
	 * laesst - auf einem 320-px-Telefon passt es nur, wenn die Schrift
	 * mitgeht. Deshalb faellt sie dort auf 18 px statt das Wort zu brechen
	 * (D-149).
	 */
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
	-webkit-hyphens: none;
}

/*
 * Der Inhalt.
 *
 * Er bekommt die Resthoehe und scrollt darin - nicht die Seite dahinter. Am
 * oberen und unteren Ende hoert das Scrollen auf, statt sich zu uebertragen.
 *
 * "min-height: 0" ist die eigentliche Arbeit dieser Zeile: Ohne sie weigert
 * sich ein Flexelement, kleiner zu werden als sein Inhalt - und scrollt dann
 * nicht, sondern waechst.
 */
.swbs-modal-content {
	flex: 1 1 auto;
	min-height: 0;

	/* 24 px zum Kopf - der obere Wert des Abstandskanons (D-132). */
	padding: 24px 16px 16px;

	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/*
 * Die Suche darin nutzt die volle Innenbreite. Ihre eigene Lesebreite bleibt
 * die Obergrenze, und sie steht mittig.
 */
.swbs-modal-content > .swbs {
	width: 100%;
}

@media (max-width: 599px) {
	.swbs-modal-overlay {
		/* Feinere Kontur auf kleinen Displays - wie ueberall (D-135). */
		--swbs-border-width: 2px;
		/* Und dieselbe Ueberschriftengroesse wie im Inhalt (D-116). */
		--swbs-size-head: 18px;
	}

	.swbs-modal-header {
		/* Senkrecht enger, waagerecht weiterhin ohne Reserve. */
		padding: 52px 14px 0;
	}

	.swbs-modal-overlay {
		/*
		 * Auf schmalen Geraeten geht die Schrift mit, statt das Wort
		 * "BEZIRKSSCHORNSTEINFEGER" zu brechen (D-149).
		 */
		--swbs-size-head: 20px;
	}

	.swbs-modal-content {
		padding: 24px 14px 14px;
	}
}

/*
 * Unter 380 px passt "BEZIRKSSCHORNSTEINFEGER" auch bei 20 px nicht mehr in
 * eine Zeile. Bevor das Wort bricht, geht die Schrift auf 18 px - die
 * Untergrenze der Gestaltung fuer eine Ueberschrift (D-149).
 */
@media (max-width: 379px) {
	.swbs-modal-overlay {
		--swbs-size-head: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.swbs-modal-overlay,
	.swbs-modal {
		transition-duration: 0.001ms !important;
	}

	.swbs-modal-close {
		transition-duration: 0.001ms !important;
	}
}

/* --- 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;
}

/*
 * --- Popup-Geometrie auf kleinen Geraeten -----------------------------
 *
 * Warum das Plugin hier ueberhaupt Masse setzt.
 *
 * Auf einem 320-px-Telefon entscheidet nicht die Suchmaske ueber den nutzbaren
 * Platz, sondern der Dialog, in dem sie steckt. Die Standardmasse eines
 * Elementor-Popups lassen dort Raender stehen, die auf dem Schreibtisch richtig
 * aussehen und auf dem Telefon einen erheblichen Teil der Breite kosten -
 * waehrend der Inhalt darunter abgeschnitten wird (D-138).
 *
 * Die Regel ist so eng gefasst wie die Vorgaengerregel darueber:
 *
 * - Sie greift nur unterhalb des Mobil-Umbruchs. Schreibtisch und Tablet
 *   behalten die vorhandenen Proportionen unveraendert.
 * - Sie greift nur fuer einen Dialog, der tatsaechlich eine Suchmaske enthaelt.
 *   Fremde Popups derselben Seite bleiben unberuehrt.
 * - Sie setzt Masse und Ueberlauf, sonst nichts: keine Farbe, keine Schrift,
 *   keine Position, kein Oeffnen und kein Schliessen. Die Ablauflogik des
 *   Popups gehoert dem Seitenbaukasten und bleibt bei ihm.
 *
 * Kennt ein Browser :has() nicht, faellt die Regel ersatzlos aus - dann gelten
 * die Masse des Seitenbaukastens wie bisher.
 */
@media (max-width: 599px) {
	.elementor-popup-modal:has(.swbs) .dialog-widget-content {
		/*
		 * Mindestens 5 px Luft zum sichtbaren Rand, auf jeder Seite einzeln.
		 *
		 * Ohne Aussparung sind es genau 5 px. Wo das Geraet eine Aussparung
		 * meldet - Kamerainsel, abgerundete Ecke, Griffleiste -, gilt der
		 * groessere der beiden Werte. Der Rand wird also nie kleiner als 5 px
		 * und in einer Aussparung so viel groesser, wie noetig ist.
		 *
		 * Die Ersatzangabe 0px in env() ist Absicht: Ein Browser ohne
		 * Aussparungsbegriff liefert sonst gar keinen Wert, und max() faellt
		 * mitsamt der ganzen Angabe aus.
		 */
		--swbs-modal-top: max(5px, env(safe-area-inset-top, 0px));
		--swbs-modal-right: max(5px, env(safe-area-inset-right, 0px));
		--swbs-modal-bottom: max(5px, env(safe-area-inset-bottom, 0px));
		--swbs-modal-left: max(5px, env(safe-area-inset-left, 0px));

		width: calc(100vw - var(--swbs-modal-left) - var(--swbs-modal-right)) !important;
		max-width: calc(100vw - var(--swbs-modal-left) - var(--swbs-modal-right)) !important;

		/*
		 * Zwei Angaben, mit Absicht in dieser Reihenfolge.
		 *
		 * 100vh ist auf dem Telefon die Hoehe MIT ausgefahrener Adresszeile -
		 * der Dialog waere beim Scrollen zu hoch und sein unterer Rand laege
		 * unter der Leiste. 100dvh ist die tatsaechlich sichtbare Hoehe. Ein
		 * Browser, der dvh nicht kennt, ueberliest die zweite Zeile und behaelt
		 * die erste; alle anderen nehmen die zweite.
		 */
		max-height: calc(100vh - var(--swbs-modal-top) - var(--swbs-modal-bottom)) !important;
		max-height: calc(100dvh - var(--swbs-modal-top) - var(--swbs-modal-bottom)) !important;

		margin: auto !important;
		box-sizing: border-box;

		/*
		 * Der Dialog steht in einem waagerechten Flexcontainer des
		 * Seitenbaukastens. Ein Flexelement gibt seine Breite her, sobald ein
		 * Geschwister daneben Platz beansprucht - genau so verlor der Kasten in
		 * 1.0.0 die Breite an den Schliessen-Schalter. Er gibt sie nicht mehr
		 * her (D-140).
		 */
		flex: 0 0 auto;

		/*
		 * Bezugspunkt fuer den schwebenden Schliessen-Schalter. Steht er
		 * innerhalb des Kastens, haengt er damit an dessen oberer rechter Ecke;
		 * steht er ausserhalb, bleibt er am Dialog verankert wie bisher.
		 */
		position: relative;

		/*
		 * Der Inhalt soll innerhalb dieser Hoehe scrollen, nicht ueber sie
		 * hinauslaufen. Dafuer muss der Kasten seine Hoehe an den Inhaltsbereich
		 * weitergeben - als Spalte, deren mittleres Feld den Rest bekommt.
		 */
		display: flex;
		flex-direction: column;
	}

	.elementor-popup-modal:has(.swbs) .dialog-message {
		/*
		 * min-height: 0 ist die eigentliche Arbeit dieser Zeile: Ohne sie
		 * weigert sich ein Flex-Element, kleiner zu werden als sein Inhalt -
		 * und scrollt dann nicht, sondern waechst.
		 */
		flex: 1 1 auto;
		min-height: 0;
		max-height: none !important;
		overflow-y: auto;

		/*
		 * Am oberen und unteren Ende der Liste hoert das Scrollen auf, statt
		 * sich auf die Seite dahinter zu uebertragen. Die Sperre des
		 * Hintergrunds liegt weiterhin im Skript und wird hier nicht angefasst.
		 */
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;

		/*
		 * Innenabstand auf kleinen Geraeten: 16 px. Der Wert stammt aus
		 * demselben Abstandskanon wie der Rest und ersetzt die
		 * Schreibtischpolsterung, die hier bis zu einem Drittel der Breite
		 * gekostet hat. Waagerecht - senkrecht bleibt, was eingestellt ist.
		 */
		padding-left: 16px !important;
		padding-right: 16px !important;
		box-sizing: border-box;
	}

	/*
	 * Und die Ebene dazwischen: Das Popup ist auf dem Telefon EINE Spalte.
	 *
	 * Hier lag der Rest des Befunds, und er lag ausserhalb dessen, was 1.0.1
	 * und 1.0.2 angefasst haben. Zwischen dem Dialog und der Suchmaske liegt
	 * die Wrapperkette des Seitenbaukastens: Sektion, Container, Spalte,
	 * Widget-Wrap, Widget. Der Container ist ein waagerechter Flexcontainer,
	 * und seine Spalten behalten ihre Prozentbreite - auch auf 390 px. Eine
	 * zweispaltig angelegte Popup-Sektion bleibt dort zweispaltig: Die Maske
	 * bekommt zwei Drittel, rechts steht eine leere Spalte, und die schwarzen
	 * Konturen der zusammengedrueckten Karten stehen als zwei durchgehende
	 * senkrechte Linien im Bild.
	 *
	 * Gemessen bei 390 px: Die Maske fiel dadurch von 328 auf 212 px - und das
	 * Schliessen-X hatte daran nachweislich keinen Anteil (D-144).
	 *
	 * Die Regel bleibt so eng gefasst wie ihre Vorgaenger: nur unterhalb des
	 * Mobil-Umbruchs, nur innerhalb eines Dialogs, der tatsaechlich eine
	 * Suchmaske enthaelt, und nur Breite und Umbruch. Sie sagt genau eines:
	 * In diesem Popup steht auf dem Telefon nichts nebeneinander.
	 *
	 * Beide Bauformen des Seitenbaukastens sind genannt - die klassische aus
	 * Sektion und Spalten und die neuere aus Flex-Containern. Welche eine
	 * Innung einsetzt, entscheidet sie, nicht das Plugin.
	 */
	.elementor-popup-modal:has(.swbs) .dialog-message .elementor-container,
	.elementor-popup-modal:has(.swbs) .dialog-message .elementor-widget-wrap {
		flex-wrap: wrap !important;
	}

	.elementor-popup-modal:has(.swbs) .dialog-message .elementor-column,
	.elementor-popup-modal:has(.swbs) .dialog-message .elementor-widget-wrap > .elementor-element {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	/*
	 * Die neuere Bauform: Flex- und Rastercontainer.
	 *
	 * Zwei Dinge sind hier noetig, nicht eines. Die Richtung allein genuegt
	 * nicht: Ein Container gibt seinen Kindern die Breite ueber die
	 * Eigenschaft --width, und die vererbt sich. Ein Kind mit 66 Prozent bleibt
	 * auch untereinander gestapelt 66 Prozent breit - und ein Enkel erbt die
	 * 66 Prozent noch einmal.
	 *
	 * Und der Container muss nicht Flex sein. Seit 3.16 kann er ein Raster
	 * sein; dort richtet "flex-direction" gar nichts aus, die Spalten stehen in
	 * "grid-template-columns" (D-147).
	 */
	.elementor-popup-modal:has(.swbs) .dialog-message .e-con,
	.elementor-popup-modal:has(.swbs) .dialog-message .e-con-inner {
		--width: 100%;
		--flex-direction: column;
		--grid-template-columns: 1fr;

		flex-direction: column !important;
		flex-wrap: nowrap !important;
		grid-template-columns: 1fr !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.elementor-popup-modal:has(.swbs) .dialog-message .e-con > .elementor-widget,
	.elementor-popup-modal:has(.swbs) .dialog-message .e-con-inner > .elementor-widget {
		width: 100% !important;
		max-width: 100% !important;
	}

	/*
	 * Ein waagerechter Innenabstand, nicht zwei.
	 *
	 * Der Dialoginhalt bekommt oben 16 px. Die Spalte des Seitenbaukastens
	 * legt ihren Spaltenabstand von 10 px daneben - zusammen 26 px je Seite.
	 * Auf einem 320-px-Telefon sind das ueber 16 Prozent der Popupbreite, und
	 * die Ergebniskarte wird schmaler, als sie sein muesste.
	 *
	 * Waagerecht gilt deshalb der eine, vorhersagbare Wert. Senkrecht bleibt
	 * unangetastet, was eingestellt ist - der Abstand zwischen den Bloecken
	 * gehoert weiter dem Seitenbaukasten (D-144).
	 */
	.elementor-popup-modal:has(.swbs) .dialog-message .elementor-element-populated {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}


	/*
	 * Der Schliessen-Schalter schwebt - er ist kein Teil des Layouts.
	 *
	 * Hier lag der Fehler von 1.0.0. Die Fassung gab dem Schalter ein
	 * ausreichendes Bedienziel (44 x 44 px) in der Annahme, er sei ohnehin
	 * absolut positioniert. Auf dem realen Geraet ist er das nicht: Er steht im
	 * Fluss, wird durch die Mindestmasse zu einem vollwertigen Layoutkasten und
	 * belegt im waagerechten Flexcontainer des Dialogs eine eigene rechte
	 * Spalte. Der Inhalt daneben verliert diese Breite, die schwarzen Konturen
	 * von Feldern, Karten und Schaltern ruecken zusammen und stehen als lange
	 * senkrechte Linien im Bild (D-140).
	 *
	 * Die Annahme wird deshalb nicht mehr gemacht, sondern hergestellt: Der
	 * Schalter wird aus dem Fluss genommen und oben rechts im Popup verankert.
	 * Das Bedienziel bleibt, es kostet nur keine Inhaltsbreite mehr.
	 *
	 * Position und Schliesslogik des Seitenbaukastens bleiben unberuehrt: Was
	 * hier gesetzt wird, ist ausschliesslich Geometrie, und nur unterhalb des
	 * Mobil-Umbruchs.
	 */
	.elementor-popup-modal:has(.swbs) .dialog-close-button {
		position: absolute !important;
		top: 12px;
		right: 12px;
		bottom: auto;
		left: auto;
		/* Ueber dem Inhalt, damit er ihn nicht verdeckt bekommt. */
		z-index: 2;

		display: inline-flex;
		align-items: center;
		justify-content: center;

		/* Bedienziel wie bisher - jetzt ohne Breitenreserve. */
		width: 44px;
		height: 44px;
		min-width: 44px;
		min-height: 44px;

		/*
		 * Ein Aussenabstand des Seitenbaukastens wuerde den Schalter aus der
		 * Ecke schieben; ein Innenabstand sein Zeichen verschieben. Beides
		 * entfaellt, die 44 px sind das Ziel.
		 */
		margin: 0 !important;
		padding: 0 !important;

		/* Und er schrumpft nichts mehr, falls er doch im Fluss landet. */
		flex: 0 0 auto;
	}
}

/* --- 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;
}

/*
 * Der Innungsblock im Nichttrefferfall.
 *
 * Bewusst derselbe Rahmen wie die uebrigen Datenbloecke: Es ist kein
 * Sonderzustand, sondern eine Auskunft. Die Schaltflaeche darunter ist die
 * vorhandene Kontaktaktion und braucht keine eigenen Regeln.
 */
.swbs .swbs__guild {
	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__guild-heading {
	margin: 0 0 4px !important;
	font-family: var(--swbs-font) !important;
	font-size: var(--swbs-size-label) !important;
	font-weight: var(--swbs-weight-strong) !important;
	line-height: 1.3 !important;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--swbs-ink) !important;
	-webkit-text-fill-color: var(--swbs-ink);
}

.swbs .swbs__guild-name {
	margin: 0 0 var(--swbs-gap) !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 Innungsbezeichnungen brechen um, statt zu schrumpfen. */
	overflow-wrap: break-word;
}

/* Erkannt, aber ohne hinterlegte Adresse: eine Aussage, keine Schaltflaeche. */
.swbs .swbs__guild-note {
	margin: 0 !important;
	font-family: var(--swbs-font) !important;
	font-size: var(--swbs-size-text) !important;
	font-weight: var(--swbs-weight-normal) !important;
	line-height: 1.5 !important;
	color: var(--swbs-ink) !important;
	-webkit-text-fill-color: var(--swbs-ink);
}

/* --- Mobile Mittelachse der Ergebniskarte ------------------------------ */

/*
 * Portrait, Name und Berufsbezeichnung bilden einen Block - mobil auf einer
 * Achse.
 *
 * Bis 1.1.0 stand das Bild links und der Name daneben. Auf einem Telefon
 * kippte die Reihe zwar, aber alles blieb linksbuendig: Das Portrait klebte an
 * der linken Kante, und rechts daneben blieb eine grosse leere Flaeche stehen.
 * Zusammen gehoerende Angaben sahen dadurch wie zwei Spalten aus, die es nicht
 * gibt.
 *
 * Zentriert wird ausdruecklich NUR dieser Profilblock. Ab "Kehrbezirk" sind es
 * Daten, die man liest und vergleicht - die bleiben linksbuendig, weil jede
 * Zeile sonst an einer anderen Stelle beginnt (D-134, D-150).
 *
 * Die Grenze liegt hier bei 767 px und nicht bei den sonst ueblichen 599 px:
 * Auch auf einem Tablet im Hochformat steht das Portrait ueber den Daten, und
 * dort gilt dasselbe Bild.
 */
@media (max-width: 767px) {
	.swbs .swbs__result-head {
		flex-direction: column;
		align-items: center;
	}

	.swbs .swbs__result-photo {
		margin-left: auto;
		margin-right: auto;
	}

	.swbs .swbs__result-body {
		width: 100%;
	}

	.swbs .swbs__result-name,
	.swbs .swbs__result-role {
		text-align: center;
	}

	/*
	 * Und ab hier wieder linksbuendig - am Block, nicht an jeder Zelle.
	 *
	 * Der Block stellt die Achse einmal wieder her; die Zeilen darin erben sie.
	 * Sie einzeln auszurichten hiesse, jeder Zelle eine Ausrichtung zu geben,
	 * die sie gar nicht braucht - und genau das verbietet D-134.
	 */
	.swbs .swbs__data,
	.swbs .swbs__hours {
		text-align: left;
	}

	/*
	 * Die Aktionsschalter stehen untereinander ueber die volle Breite. Sie
	 * nebeneinander zu quetschen kostet jede Beschriftung eine zweite Zeile.
	 */
	.swbs .swbs__contact-action {
		flex: 1 1 100%;
	}
}