/**
 * ZASO Suite Pro – öffentliche Ausgabe.
 *
 * Ausschließlich eigene Custom Properties, keine festen Farben: Das
 * Corporate Design lässt sich damit im Theme setzen, ohne das Plugin
 * anzufassen.
 *
 * Farbe ist nie der einzige Bedeutungsträger – jede farblich markierte
 * Angabe steht zusätzlich im Text.
 */

.zaso {
	--zaso-space: 1rem;
	--zaso-radius: 4px;
	--zaso-border: #d0d3d6;
	--zaso-muted: #f5f6f7;
	--zaso-text: inherit;
	--zaso-subtle: #5b6165;
	--zaso-accent: #005a9c;
	--zaso-accent-contrast: #fff;

	color: var(--zaso-text);
}

/* -------------------------------------------------- Grundbausteine */

.zaso-button {
	display: inline-block;
	padding: .6em 1.2em;
	border: 1px solid var(--zaso-accent);
	border-radius: var(--zaso-radius);
	background: var(--zaso-accent);
	color: var(--zaso-accent-contrast);
	text-decoration: none;
	font: inherit;
	cursor: pointer;
}

.zaso-button:hover,
.zaso-button:focus {
	filter: brightness(.9);
	color: var(--zaso-accent-contrast);
}

.zaso-button-secondary {
	background: transparent;
	color: var(--zaso-accent);
}

.zaso a:focus-visible,
.zaso button:focus-visible,
.zaso input:focus-visible,
.zaso [tabindex]:focus-visible {
	outline: 3px solid var(--zaso-accent);
	outline-offset: 2px;
}

.zaso-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: var(--zaso-space) 0 0;
}

.zaso-empty {
	padding: var(--zaso-space);
	background: var(--zaso-muted);
	border: 1px dashed var(--zaso-border);
	border-radius: var(--zaso-radius);
}

.zaso-empty-hint {
	color: var(--zaso-subtle);
	font-size: .9em;
	margin-bottom: 0;
}

.zaso-source-notice {
	margin-top: var(--zaso-space);
	font-size: .85em;
	color: var(--zaso-subtle);
}

.zaso-note {
	display: block;
	font-size: .85em;
	color: var(--zaso-note-color, var(--zaso-subtle));
}

/* -------------------------------------------------- Einwilligung */

.zaso-shield {
	border-style: solid;
	border-width: var(--zaso-shield-border-width, 1px);
	border-color: var(--zaso-shield-border-color, var(--zaso-border));
	border-radius: var(--zaso-shield-radius, var(--zaso-radius));
	background: var(--zaso-shield-bg, var(--zaso-muted));
	color: var(--zaso-shield-color, inherit);
}

.zaso-shield-placeholder {
	padding: calc(var(--zaso-space) * 1.5);
	text-align: center;
}

.zaso-shield-title {
	margin-top: 0;
}

.zaso-shield-notice {
	max-width: 60ch;
	margin: 0 auto var(--zaso-space);
}

/* Der Knopf des Platzhalters ist das Erste, was ein Besucher der Kartenseite
   sieht – und bis zum Klick das Einzige. Er trägt eigene Eigenschaften, damit
   er sich unabhängig von den Filterknöpfen einstellen lässt. */
.zaso-shield-button {
	padding: var(--zaso-shieldbtn-padding, .6em 1.2em);
	border-style: solid;
	border-width: var(--zaso-shieldbtn-border-width, 1px);
	border-color: var(--zaso-shieldbtn-border-color, var(--zaso-shieldbtn-bg, var(--zaso-accent)));
	border-radius: var(--zaso-shieldbtn-radius, var(--zaso-radius));
	background: var(--zaso-shieldbtn-bg, var(--zaso-accent));
	color: var(--zaso-shieldbtn-color, var(--zaso-accent-contrast));
	font: inherit;
	cursor: pointer;
}

.zaso-shield-button:hover,
.zaso-shield-button:focus-visible {
	border-color: var(--zaso-shieldbtn-border-color-hover, var(--zaso-shieldbtn-bg-hover, var(--zaso-shieldbtn-border-color, var(--zaso-accent))));
	background: var(--zaso-shieldbtn-bg-hover, var(--zaso-shieldbtn-bg, var(--zaso-accent)));
	color: var(--zaso-shieldbtn-color-hover, var(--zaso-shieldbtn-color, var(--zaso-accent-contrast)));
}

.zaso-shield-hint {
	margin-bottom: 0;
	font-size: .85em;
	color: var(--zaso-subtle);
}

.zaso-shield.is-released {
	background: none;
	border: 0;
}

/* -------------------------------------------------- Tabellen und Listen */

/* Auf einem Telefon gemessen: In einer Spalte von 295 Pixeln wird die
   Terminliste 381 Pixel breit – auch ohne Sinnbilder. Drei Spalten mit Datum,
   Abfallart und einem Standort wie „Saalfeld Ködlitz, Platz Am Taubenhügel –
   11:15 – 11:45 Uhr" lassen sich nicht weiter schrumpfen, ohne Wörter
   buchstabenweise zu zerreißen. Ohne diesen Bereich schob die Tabelle die
   ganze Seite zur Seite. */
.zaso-table-scroll {
	overflow-x: auto;
	outline-offset: 2px;
}

.zaso-table-scroll:focus-visible {
	outline: 3px solid var(--zaso-accent);
}

.zaso-table {
	width: 100%;
	min-width: var(--zaso-table-min-width, 0);
	border-collapse: collapse;
}

.zaso-table th,
.zaso-table td {
	padding: var(--zaso-cell-padding, .6em .8em);
	border-bottom: 1px solid var(--zaso-border);
	text-align: left;
	vertical-align: top;
}

.zaso-table th {
	background: var(--zaso-head-bg, transparent);
	color: var(--zaso-head-color, inherit);
}

/* Der Wechselstreifen ist standardmäßig durchsichtig – erst wer ihn im
   Baukasten setzt, bekommt ihn. Eine Tabelle mit drei Zeilen braucht ihn
   nicht, eine mit dreißig sehr wohl. */
.zaso-table tbody tr:nth-child(even) {
	background: var(--zaso-row-alt-bg, transparent);
}

.zaso-weekday {
	display: inline-block;
	min-width: var(--zaso-weekday-width, 2.5em);
	color: var(--zaso-weekday-color, var(--zaso-subtle));
}

/* -------------------------------------------------- Monatskalender

   Ein Kalenderblatt, kein Kachelfeld: alle Tage des Monats, die Abfuhrtage
   darin hervorgehoben.

   Sieben Spalten passen auf einem Telefon nicht nebeneinander, ohne dass die
   Bezeichnung der Abfallart verschwindet – und die darf nicht verschwinden,
   sonst trüge allein die Farbe die Bedeutung. Deshalb eine Mindestbreite und
   ein Rollbereich, der auch mit der Tastatur zu bedienen ist. */

.zaso-calendar-grid .zaso-month {
	margin-bottom: var(--zaso-month-gap, calc(var(--zaso-space) * 1.5));
}

.zaso-month-scroll {
	overflow-x: auto;
	/* Rollbereiche sind Tabstopps; ohne sichtbaren Fokus wäre der Tabstopp
	   für Tastaturnutzer unsichtbar. */
	outline-offset: 2px;
}

.zaso-month-scroll:focus-visible {
	outline: 3px solid var(--zaso-accent);
}

.zaso-month-table {
	width: 100%;
	min-width: var(--zaso-month-min-width, 38rem);
	border-collapse: collapse;
	table-layout: fixed;
}

.zaso-month-title {
	caption-side: top;
	padding-bottom: .5rem;
	text-align: var(--zaso-month-title-align, left);
	font-size: var(--zaso-month-title-size, 1.15em);
	font-weight: 700;
	color: var(--zaso-month-title-color, inherit);
}

.zaso-month-table th {
	padding: .35em .5em;
	border-bottom: 1px solid var(--zaso-border);
	text-align: left;
	font-size: .85em;
	font-weight: 600;
	background: var(--zaso-month-head-bg, transparent);
	color: var(--zaso-month-head-color, var(--zaso-subtle));
}

/* Die Abkürzung ist im Markup mit `title` hinterlegt. Ohne diese Regel malte
   der Browser eine gepunktete Unterstreichung unter jeden Wochentag. */
.zaso-month-table th abbr {
	text-decoration: none;
	cursor: help;
}

.zaso-day {
	height: var(--zaso-day-height, 5.5rem);
	padding: var(--zaso-day-padding, .3rem .4rem);
	border: var(--zaso-day-border-width, 1px) solid var(--zaso-day-border-color, var(--zaso-border));
	border-radius: var(--zaso-radius);
	vertical-align: top;
	background: var(--zaso-day-bg, transparent);
}

/* Tage außerhalb des Monats tragen keine Umrandung – sie sind nicht „leer",
   sie gehören nicht dazu. */
.zaso-day-blank {
	border: 0;
	background: none;
}

.zaso-day-number {
	display: block;
	font-size: .95em;
	font-weight: 700;
	color: var(--zaso-daynum-color, var(--zaso-subtle));
}

.zaso-day-collection {
	background: var(--zaso-day-bg-collection, var(--zaso-muted));
}

/* Auf der getönten Fläche eines Abfuhrtags steht die Ziffer in der Textfarbe –
   die gedämpfte Farbe der übrigen Tage ginge darauf unter. Eine im Baukasten
   gesetzte Farbe gilt trotzdem für alle Tage: Sonst bliebe der Regler
   ausgerechnet dort wirkungslos, wo hingeschaut wird. */
.zaso-day-collection .zaso-day-number {
	color: var(--zaso-daynum-color, inherit);
}

/* Vergangene Tage treten zurück, verschwinden aber nicht: Wer am 20. auf den
   Kalender schaut, will auch sehen, dass am 3. der Gelbe Sack dran war. */
.zaso-day-past {
	opacity: var(--zaso-day-past-opacity, .55);
}

/* Der heutige Tag ist nicht nur farblich markiert – der Rahmen ist auch
   dicker. Bei erzwungenen Farben bleibt er dadurch erkennbar. */
.zaso-day-today {
	/* Immer eine Stufe kräftiger als die übrigen Tage – auch dann, wenn deren
	   Randstärke im Baukasten hochgesetzt wurde. Ein fester Wert von 2px wäre
	   bei 3px Grundstärke dünner als der Rest. */
	border-width: calc(var(--zaso-day-border-width, 1px) + 1px);
	border-color: var(--zaso-day-today-color, var(--zaso-accent));
	font-weight: 700;
}

.zaso-day-list {
	list-style: none;
	margin: .2rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .15rem;
}

.zaso-day-fraction {
	display: flex;
	align-items: center;
	gap: .3em;
	font-size: .8em;
	line-height: 1.25;
}

/* `anywhere` zerriss „Schadstoffmobil" buchstabenweise („Sc/ha/ds/tof/fm/ob/il").
   `break-word` bricht erst, wenn es sein muss, und die Silbentrennung sorgt
   dafür, dass es an einer sinnvollen Stelle geschieht. */
.zaso-day-fraction-name {
	overflow-wrap: break-word;
	hyphens: auto;
}

.zaso-month-empty {
	margin: .25rem 0 0;
}

/* -------------------------------------------------- Hinweise unter dem Blatt

   Am echten Bestand tragen nur die Termine des Schadstoffmobils eine
   Bemerkung – im Schnitt 65 Zeichen, bis zu 107. In einer Tagesspalte von gut
   100 Pixeln zerreißt das jede Zeile; hier hat es Platz. */

.zaso-month-notes {
	margin-top: .75rem;
	font-size: .9em;
}

.zaso-month-notes-title {
	margin: 0 0 .25rem;
	font-size: 1em;
	font-weight: 600;
}

.zaso-month-notes-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .35rem;
}

.zaso-month-notes-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .1rem .5rem;
}

.zaso-month-notes-date {
	min-width: 6em;
	font-weight: 600;
}

.zaso-month-notes-list .zaso-note {
	flex: 1 1 18rem;
}

.zaso-next-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.zaso-next-item {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	align-items: baseline;
	padding: .6rem .75rem;
	border-bottom: 1px solid var(--zaso-border);
	border-left: 5px solid var(--zaso-border);
}

.zaso-next-distance {
	margin-left: auto;
	font-size: .85em;
	color: var(--zaso-subtle);
}

.zaso-legend {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

.zaso-legend-item {
	display: flex;
	align-items: center;
	gap: .4rem;
}

/* Für Abfallarten ohne eigenes Sinnbild. Sie tragen dieselbe Farbe wie die
   übrigen – sonst wäre eine im Baukasten gesetzte Farbe ausgerechnet dort
   nicht zu sehen, wo das Plättchen das einzige farbige Element ist. */
.zaso-legend-marker {
	width: var(--zaso-fraktion-size, 1em);
	height: var(--zaso-fraktion-size, 1em);
	border-radius: 2px;
	border: 1px solid var(--zaso-border);
	background: var(--zaso-fraktion, var(--zaso-muted));
}

/* -------------------------------------------------- Suche */

.zaso-search .zaso-field {
	margin-bottom: var(--zaso-space);
	position: relative;
}

/* -------------------------------------------------- Suche in einer Zeile */

/*
 * Ort, Straße und Knopf nebeneinander. Mobil bleibt es untereinander – drei
 * Felder in einer Zeile wären auf einem Telefon unbedienbar.
 *
 * Das Raster liegt auf einem eigenen Behälter, nicht auf dem Formular: Der
 * Hausnummernbereich und die Statusmeldung sollen darunter stehen, nicht in
 * die Zeile gequetscht werden.
 */
/*
 * Ausrichtung des ganzen Suchblocks.
 *
 * Zentrieren wirkt nur, wenn der Block schmaler ist als sein Umfeld – sonst
 * gibt es nichts zu zentrieren. Deshalb gehören beide Stellschrauben
 * zusammen: eine Obergrenze für die Breite und die Ausrichtung darin.
 *
 * Voreinstellung ist `none`: Ohne gesetzte Obergrenze verhält sich der Block
 * wie bisher und füllt die Spalte, in der er steht.
 */
/*
 * Zwei Klassen im Selektor, und das mit Absicht: Block-Themes begrenzen jedes
 * direkte Kind des Inhaltsbereichs auf die Textbreite –
 *
 *   .is-layout-constrained > :where(:not(.alignfull)) { max-width: … }
 *
 * `:where()` zählt bei der Spezifität null, die Regel wiegt also nur eine
 * Klasse und käme später als diese Datei. Bei 4K bleibt ein Suchformular
 * dadurch bei 645 Pixeln stehen, während das farbige Band ringsum 3.840
 * Pixel breit ist – es sieht aus, als sei etwas verrutscht.
 *
 * Ein Suchformular ist kein Fließtext. Für Lesbarkeit gibt es die Textbreite,
 * für Bedienelemente nicht. Wer den Block dennoch schmaler will, setzt im
 * Elementor-Regler eine Höchstbreite; die trägt dann `--zaso-search-max`.
 */
.zaso.zaso-search {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--zaso-search-max, 100%);
	margin-inline: var(--zaso-search-inline, 0);
}

.zaso-search-fields {
	display: grid;
	gap: .75rem;
	justify-content: var(--zaso-search-justify, stretch);
}

/*
 * Untereinander – auch auf dem Telefon – ist der Knopf so breit wie sein
 * Text. Ohne diese Zeile klebte er am linken Rand, während die Felder die
 * volle Breite füllen; das sieht nach Versehen aus.
 */
.zaso-search .zaso-actions {
	display: flex;
	align-items: center;
	justify-content: var(--zaso-search-actions, flex-start);
}

@media (min-width: 48em) {
	.zaso-search-zeile .zaso-search-fields {
		grid-template-columns: 1fr 1fr auto;
		/*
		 * Alle drei auf einer Mittelachse. `start` hieß: oben bündig – und
		 * weil der Knopf höher ist als die Eingabefelder, stand er unten
		 * über. Das sah aus, als sei er verrutscht.
		 */
		align-items: center;
		gap: 1rem;
	}

	/* Ist der Block begrenzt, füllt das Raster diese Breite – die Zentrierung
	   übernimmt dann `margin-inline` am Formular. Innerhalb des Rasters
	   bleiben die Felder gleich breit; ungleiche Felder nebeneinander lesen
	   sich wie ein Fehler. */
	.zaso-search-zeile .zaso-search-fields {
		width: 100%;
	}

	.zaso-search-zeile .zaso-search-fields .zaso-field,
	.zaso-search-zeile .zaso-actions {
		margin: 0;
	}

	/* In der Zeile füllt das Feld seine Spalte – die Begrenzung von 26rem
	   gilt nur für die einspaltige Anordnung. */
	.zaso-search-zeile .zaso-search-fields input {
		max-width: none;
	}

	/* Die Vorschlagsliste legt sich über das Nachbarfeld, statt die Zeile
	   auseinanderzuziehen – sonst wanderte der Knopf beim Tippen nach unten. */
	.zaso-search-zeile .zaso-suggestions {
		position: absolute;
		left: 0;
		right: 0;
		max-width: none;
		box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
	}
}

/*
 * Nur für das Auge verborgen – für Screenreader und Spracheingabe weiterhin
 * da. Die meisten Themes bringen diese Klasse mit; verlassen kann man sich
 * nicht darauf, und ohne sie stünden die Beschriftungen mitten im Bild.
 */
.zaso .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Beim Tastaturfokus wieder sichtbar: Ein Hinweis, den man mit der Tastatur
   erreicht, muss auch zu sehen sein – sonst springt der Fokus ins Nichts. */
.zaso .screen-reader-text:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
}

/* Gesperrt, solange kein Ort mit Straßenauswahl gewählt ist. Sichtbar, damit
   der Knopf nicht springt, sobald das Feld gebraucht wird. */
.zaso-search input:disabled {
	background: var(--zaso-muted);
	color: var(--zaso-subtle);
	cursor: not-allowed;
}

.zaso-search label,
.zaso-abc-lookup label {
	display: block;
	margin-bottom: .25rem;
	font-weight: 600;
}

.zaso-search input,
.zaso-abc-filter input,
.zaso-abc-lookup input {
	/* Volle Breite, keine Obergrenze: Die Felder sollen sich der Spalte
	   anpassen, in der sie stehen – im Seitenkopf, in einer schmalen
	   Seitenleiste und auf dem Telefon. Wer sie schmaler braucht, gibt dem
	   umgebenden Container eine Breite; das ist die Stelle, an der die
	   Entscheidung hingehört.

	   `border-box` gehört zwingend dazu: Sonst kommen Innenabstand und
	   Rahmen zu den 100 % **hinzu**, und das Feld ragt um gut 25 Pixel aus
	   seiner Spalte. Viele Themes setzen das global – verlassen darf sich
	   das Plugin darauf nicht. */
	box-sizing: border-box;
	width: 100%;
	padding: var(--zaso-input-padding, .5em .7em);
	border-style: solid;
	border-width: var(--zaso-input-border-width, 1px);
	border-color: var(--zaso-input-border-color, var(--zaso-border));
	border-radius: var(--zaso-input-radius, var(--zaso-radius));
	background: var(--zaso-input-bg, transparent);
	color: var(--zaso-input-color, inherit);
	font: inherit;
}

/*
 * Der Platzhalter ist das, was im leeren Feld tatsächlich zu sehen ist –
 * „Ort eingeben …". Ohne eigene Angabe bleibt die Vorgabe des Browsers, die
 * je nach Umgebung unterschiedlich ausfällt und auf dunklen Flächen leicht
 * unlesbar wird. Beide Schreibweisen: `::placeholder` ist die heutige,
 * `::-webkit-input-placeholder` fangen ältere WebKit-Fassungen ab.
 *
 * Getrennte Regeln, kein Komma: Ein Browser, der eine der beiden nicht
 * kennt, verwirft sonst die ganze Regel und der Platzhalter bliebe ungefärbt.
 */
.zaso-search input::placeholder,
.zaso-abc-filter input::placeholder,
.zaso-abc-lookup input::placeholder {
	color: var(--zaso-input-placeholder, var(--zaso-subtle));
	opacity: 1;
}

.zaso-search input::-webkit-input-placeholder,
.zaso-abc-filter input::-webkit-input-placeholder,
.zaso-abc-lookup input::-webkit-input-placeholder {
	color: var(--zaso-input-placeholder, var(--zaso-subtle));
	opacity: 1;
}

/*
 * Der Fokuszustand des Feldes ist das Gegenstück zum Hover des Knopfes. Ein
 * Eingabefeld hat keinen sinnvollen Hover – bedient wird es über die
 * Schreibmarke, und genau dann muss erkennbar sein, wo man steht. Ohne eigene
 * Angaben bleibt die Darstellung des Normalzustands; wer nichts einstellt,
 * behält den Fokusumriss des Browsers.
 */
.zaso-search input:focus,
.zaso-abc-filter input:focus,
.zaso-abc-lookup input:focus {
	border-color: var(--zaso-input-border-color-focus, var(--zaso-input-border-color, var(--zaso-border)));
	background: var(--zaso-input-bg-focus, var(--zaso-input-bg, transparent));
	color: var(--zaso-input-color-focus, var(--zaso-input-color, inherit));
}

/*
 * Feld und Knopf nebeneinander, auf einer Mittelachse.
 *
 * Vorher war das ein `flex` mit `flex-wrap`. Weil die Suchfelder `width: 100%`
 * tragen, füllte das Feld die Zeile vollständig – und der Knopf rutschte
 * darunter. Zu sehen war das an beiden ABC-Suchen: 69 beziehungsweise 56
 * Pixel Versatz. Ein Raster mit `1fr auto` kann das nicht passieren, weil die
 * Spaltenbreite vom Raster kommt und nicht vom Inhalt.
 *
 * Untereinander bleibt es auf schmalen Geräten – dort ist nebeneinander
 * ohnehin nicht zu bedienen.
 */
.zaso-field-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: .5rem;
	align-items: center;
}

@media (min-width: 48em) {
	.zaso-field-row {
		grid-template-columns: 1fr auto;
	}
}

/*
 * Die Vorschlagsliste gehört zum Feld, aus dem sie aufklappt – sie folgt
 * deshalb dessen Einstellungen, statt eigene zu verlangen. Wer dem Feld eine
 * dunkle Fläche gibt, bekäme sonst eine weiße Liste darunter: `#fff` stand
 * hier fest verdrahtet, und keine Einstellung kam daran vorbei.
 */
.zaso-suggestions {
	z-index: 20;
	list-style: none;
	margin: .25rem 0 0;
	padding: 0;
	max-width: 26rem;
	max-height: 16rem;
	overflow-y: auto;
	border: 1px solid var(--zaso-input-border-color, var(--zaso-border));
	border-radius: var(--zaso-input-radius, var(--zaso-radius));
	background: var(--zaso-input-bg, #fff);
	color: var(--zaso-input-color, inherit);
}

.zaso-suggestions li {
	padding: .45em .7em;
	cursor: pointer;
}

.zaso-suggestions li:hover,
.zaso-suggestions li:focus {
	background: var(--zaso-muted);
}

.zaso-hint {
	font-size: .85em;
	color: var(--zaso-subtle);
}

/* -------------------------------------------------- Abfall-ABC */

.zaso-alphabet ul {
	list-style: none;
	margin: 0 0 var(--zaso-space);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--zaso-alpha-gap, .25rem);
}

.zaso-alphabet a {
	display: inline-block;
	box-sizing: border-box;
	min-width: var(--zaso-alpha-min-width, 2.2em);
	padding: var(--zaso-alpha-padding, .3em .5em);
	border-style: solid;
	border-width: var(--zaso-alpha-border-width, 1px);
	border-color: var(--zaso-alpha-border-color, var(--zaso-border));
	border-radius: var(--zaso-alpha-radius, var(--zaso-radius));
	background: var(--zaso-alpha-bg, transparent);
	color: var(--zaso-alpha-color, inherit);
	text-align: center;
	text-decoration: none;
}

/*
 * Bis 3.1.7 hatte die Leiste **keinen** Hover-Zustand: Wer mit der Maus
 * darüberfuhr, sah nichts. Bei 27 gleich aussehenden Schaltflächen ist das
 * eine Zumutung – man erkennt nicht, welche man gleich trifft.
 */
.zaso-alphabet a:hover,
.zaso-alphabet a:focus {
	background: var(--zaso-alpha-bg-hover, var(--zaso-muted));
	color: var(--zaso-alpha-color-hover, var(--zaso-alpha-color, inherit));
	border-color: var(--zaso-alpha-border-color-hover, var(--zaso-alpha-border-color, var(--zaso-border)));
}

/*
 * Der gewählte Buchstabe steht **nach** dem Hover, damit die Auswahl sichtbar
 * bleibt, während der Zeiger darüberliegt – sonst verlöre man beim Hinfahren
 * die Anzeige, wo man gerade steht.
 */
.zaso-alphabet a[aria-current="page"],
.zaso-alphabet a[aria-current="page"]:hover,
.zaso-alphabet a[aria-current="page"]:focus {
	background: var(--zaso-alpha-bg-active, var(--zaso-accent));
	color: var(--zaso-alpha-color-active, var(--zaso-accent-contrast));
	border-color: var(--zaso-alpha-border-color-active, var(--zaso-alpha-bg-active, var(--zaso-accent)));
}

.zaso-abc-list {
	list-style: none;
	margin: var(--zaso-space) 0 0;
	padding: 0;
}

.zaso-abc-item {
	padding: .6rem 0;
	border-bottom: 1px solid var(--zaso-border);
}

.zaso-abc-term {
	font-weight: 600;
}

.zaso-abc-fraction {
	display: inline-block;
	margin-left: .5rem;
	padding: .1em .6em;
	border: 1px solid var(--zaso-border);
	border-radius: 999px;
	font-size: .8em;
}

.zaso-abc-synonyms {
	display: block;
	font-size: .85em;
	color: var(--zaso-subtle);
}

.zaso-abc-result {
	padding: var(--zaso-space);
	margin-top: var(--zaso-space);
	border: 1px solid var(--zaso-border);
	border-radius: var(--zaso-radius);
}

.zaso-chain ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.zaso-chain li {
	padding: .3rem 0;
	border-bottom: 1px solid var(--zaso-muted);
}

/* -------------------------------------------------- Anlagen, Meldungen, Markt */

.zaso-facility-list,
.zaso-news-list,
.zaso-market-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.zaso-facility {
	padding: var(--zaso-space) 0;
	border-bottom: 1px solid var(--zaso-border);
}

.zaso-facility-name {
	margin: 0 0 .25rem;
}

.zaso-facility-types,
.zaso-news-kind,
.zaso-market-meta {
	margin: 0 0 .25rem;
	font-size: .85em;
	color: var(--zaso-subtle);
}

.zaso-layout-grid .zaso-news-list,
.zaso-market-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--zaso-space);
}

.zaso-layout-liste .zaso-news-list {
	display: block;
}

.zaso-news-item,
.zaso-market-item {
	border: 1px solid var(--zaso-border);
	border-radius: var(--zaso-radius);
	overflow: hidden;
}

.zaso-news-body,
.zaso-market-body {
	padding: var(--zaso-space);
}

.zaso-news-image img,
.zaso-market-image img,
.zaso-facility-image img {
	display: block;
	width: 100%;
	height: auto;
}

.zaso-market-price {
	font-weight: 600;
}

.zaso-market-contact-hint {
	font-size: .9em;
	color: var(--zaso-subtle);
}

/* -------------------------------------------------- Suchblock

   Die Fläche **um** Feld und Knopf – nicht das Feld selbst, das trägt seine
   eigenen `--zaso-input-*`. Im Beispiel des Betreibers war genau das gemeint:
   ein weißes Feld auf einer hellgrünen Fläche.

   Ohne Angabe bleibt alles wie bisher: durchsichtig, ohne Innenabstand, ohne
   Rand. Der Block soll nicht plötzlich einen Kasten bekommen, nur weil es die
   Regel gibt.

   `box-sizing: border-box`, damit ein Innenabstand die Breite nicht sprengt –
   dieselbe Falle wie seinerzeit beim Suchfeld des Kalenders. */

.zaso-abc-lookup,
.zaso-abc-filter {
	box-sizing: border-box;
	padding: var(--zaso-block-padding, 0);
	border-style: solid;
	border-width: var(--zaso-block-border-width, 0);
	border-color: var(--zaso-block-border-color, transparent);
	border-radius: var(--zaso-block-radius, 0);
	background: var(--zaso-block-bg, transparent);
}

/* -------------------------------------------------- Karte */

/* Leaflet braucht eine ausgemessene Höhe – ohne sie bleibt die Karte leer.

   Zwei Klassen, nicht eine: Leaflet setzt `.leaflet-container { background:
   #ddd }`, und sein Stylesheet wird **nach** diesem geladen. Bei gleicher
   Spezifität entscheidet die Reihenfolge – die eingestellte Hintergrundfarbe
   kam deshalb nie an. Im Browser nachgemessen: `rgb(221,221,221)` statt der
   gewählten Farbe. */
.zaso-map .zaso-map-canvas {
	width: 100%;
	height: var(--zaso-map-height, 24rem);
	border-style: solid;
	border-width: var(--zaso-map-border-width, 1px);
	border-color: var(--zaso-map-border-color, var(--zaso-border));
	border-radius: var(--zaso-map-radius, var(--zaso-radius));
	background: var(--zaso-map-bg, var(--zaso-muted));
}

/* -------------------------------------------------- Markierungen

   Eigene Markierung statt Leaflets Standard-PNG: Ein Bild lässt sich nicht
   einfärben, eine Fläche schon. Erst dadurch ist die Farbe je Anlagentyp im
   Baukasten einstellbar – und Gelbe Säcke und Hausmüllsäcke sind auf einer
   gemeinsamen Karte auseinanderzuhalten. */

.zaso-marker {
	display: block;
}

.zaso-marker-dot {
	display: block;
	width: var(--zaso-marker-size, 22px);
	height: var(--zaso-marker-size, 22px);
	box-sizing: border-box;
	border: var(--zaso-marker-border-width, 2px) solid var(--zaso-marker-border-color, #fff);
	/* Tropfenform: rund, mit einer Spitze unten links gedreht. */
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	background: var(--zaso-marker-bg, var(--zaso-accent));
	box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

.zaso-map .zaso-marker:focus-visible .zaso-marker-dot,
.zaso-map .zaso-marker:hover .zaso-marker-dot {
	background: var(--zaso-marker-bg-hover, var(--zaso-marker-bg, var(--zaso-accent)));
}

/* -------------------------------------------------- Ortswahl der Karte

   Sie steht **unter** der Karte, zwischen Karte und Ergebnisliste, und nutzt
   dieselben Merkmale wie die Suchfelder der Suite – ein Betreiber, der das
   Abfall-ABC eingerichtet hat, erwartet dieselben Regler an derselben Stelle.

   Der Abstand zur Karte sitzt jetzt an ihr: Sie ist das erste, was unter der
   Karte folgt, und erbt damit den Weißraum, der vorher der Liste gehörte.
   Derselbe Regler steuert beide Fälle – ob die Ortswahl gezeigt wird oder
   nicht, der Abstand unter der Karte bleibt derselbe. */

.zaso-map-place {
	margin: var(--zaso-maplist-gap, 2rem) 0 var(--zaso-mapplace-gap, var(--zaso-space));
}

.zaso-map-place label {
	display: block;
	margin-bottom: .25rem;
	font-weight: 600;
}

.zaso-map-place select {
	box-sizing: border-box;
	width: 100%;
	padding: var(--zaso-input-padding, .5em .7em);
	border-style: solid;
	border-width: var(--zaso-input-border-width, 1px);
	border-color: var(--zaso-input-border-color, var(--zaso-border));
	border-radius: var(--zaso-input-radius, var(--zaso-radius));
	background: var(--zaso-input-bg, transparent);
	color: var(--zaso-input-color, inherit);
	font: inherit;
}

.zaso-map-place select:focus {
	border-color: var(--zaso-input-border-color-focus, var(--zaso-input-border-color, var(--zaso-border)));
	background: var(--zaso-input-bg-focus, var(--zaso-input-bg, transparent));
	color: var(--zaso-input-color-focus, var(--zaso-input-color, inherit));
}

/* -------------------------------------------------- Filterleiste der Karte */

.zaso-map-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--zaso-mapfilter-gap, .5rem);
	margin-bottom: var(--zaso-space);
}

.zaso-map-filter-button {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	padding: var(--zaso-mapfilter-padding, .45em .9em);
	border-style: solid;
	border-width: var(--zaso-mapfilter-border-width, 1px);
	border-color: var(--zaso-mapfilter-border-color, var(--zaso-border));
	border-radius: var(--zaso-mapfilter-radius, var(--zaso-radius));
	background: var(--zaso-mapfilter-bg, transparent);
	color: var(--zaso-mapfilter-color, inherit);
	font: inherit;
	cursor: pointer;
}

.zaso-map-filter-button:hover,
.zaso-map-filter-button:focus-visible {
	border-color: var(--zaso-mapfilter-border-color-hover, var(--zaso-mapfilter-border-color, var(--zaso-border)));
	background: var(--zaso-mapfilter-bg-hover, var(--zaso-mapfilter-bg, transparent));
	color: var(--zaso-mapfilter-color-hover, var(--zaso-mapfilter-color, inherit));
}

/* Der ausgeschaltete Zustand darf nicht allein an der Farbe hängen – eine
   Rot-Grün-Schwäche würde ihn sonst nicht erkennen. Deshalb zusätzlich die
   Deckkraft und die durchgestrichene Farbfläche. */
.zaso-map-filter-button[aria-pressed="false"] {
	opacity: .55;
}

.zaso-map-filter-button[aria-pressed="false"] .zaso-map-swatch {
	background: transparent;
	border-style: dashed;
}

.zaso-map-swatch {
	width: .9em;
	height: .9em;
	flex: none;
	border-radius: 50%;
	border: 2px solid var(--zaso-marker-bg, var(--zaso-accent));
	background: var(--zaso-marker-bg, var(--zaso-accent));
}

/* Der Fokus muss auf einer Markierung sichtbar sein, sonst ist die Karte per
   Tastatur nicht bedienbar. Leaflet bringt dafür nichts Ausreichendes mit. */
.zaso-map .zaso-map-canvas .leaflet-marker-icon:focus-visible {
	outline: 3px solid var(--zaso-accent);
	outline-offset: 2px;
}

.zaso-map-list-title {
	margin: var(--zaso-space) 0 .5rem;
	font-size: 1.05em;
}

/*
 * Der Abstand zur Karte sitzt an der Liste, nicht mehr an der Überschrift.
 *
 * Die Überschrift ist nur noch für Screenreader da; sie steht `absolute` und
 * trägt deshalb keinen Abstand mehr bei. Ohne eigene Angabe klebten die
 * Ergebnisse unmittelbar unter der Karte.
 */
.zaso-map-list {
	list-style: none;
	margin: var(--zaso-maplist-gap, 2rem) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: .5rem;
}

/*
 * Steht die Ortswahl dazwischen, trägt sie den Abstand zur Karte.
 *
 * Ohne diese Regel käme der Weißraum zweimal vor – einmal unter der Karte,
 * einmal unter der Ortswahl –, und die Bedienung stünde einsam in der Mitte,
 * statt bei den Ergebnissen, auf die sie wirkt.
 */
.zaso-map-place ~ .zaso-map-list {
	margin-top: 0;
}

.zaso-map-list li {
	padding: var(--zaso-maplist-padding, .5rem .75rem);
	border-style: solid;
	border-width: var(--zaso-maplist-border-width, 1px);
	border-color: var(--zaso-maplist-border-color, var(--zaso-border));
	border-radius: var(--zaso-maplist-radius, var(--zaso-radius));
	background: var(--zaso-maplist-bg, transparent);
	color: var(--zaso-maplist-color, inherit);
}

.zaso-map-list span {
	display: block;
	font-size: .85em;
	color: var(--zaso-maplist-meta-color, var(--zaso-subtle));
}

/* Eine Stelle ohne Lage ist kein Nebensatz: Sie fehlt auf der Karte, und der
   Bürger muss erfahren, warum – sonst hält er die Auskunft für unvollständig. */
.zaso-map-nolocation {
	font-style: italic;
}

/* -------------------------------------------------- Sprechblasenfenster */

.zaso-popup-title {
	margin: 0 0 .4rem;
	font-size: 1em;
	color: var(--zaso-popup-title-color, inherit);
}

.zaso-popup-line {
	margin: 0 0 .3rem;
	font-size: .9em;
}

.zaso-popup-link {
	display: inline-block;
	margin-top: .3rem;
	font-weight: 600;
	color: var(--zaso-popup-link-color, var(--zaso-accent));
}

/* Leaflet setzt seine Sprechblase selbst zusammen; die Fläche und die
   Schriftfarbe sitzen deshalb an Leaflets eigenen Klassen. Ohne diese Regel
   bliebe das Fenster weiß, auch wenn ringsum alles dunkel eingestellt ist. */
.zaso-map .leaflet-popup-content-wrapper,
.zaso-map .leaflet-popup-tip {
	background: var(--zaso-popup-bg, #fff);
	color: var(--zaso-popup-color, inherit);
}

.zaso-map .leaflet-popup-content-wrapper {
	border-radius: var(--zaso-popup-radius, var(--zaso-radius));
}

/* -------------------------------------------------- Seitennavigation */

.zaso-pagination ul {
	list-style: none;
	margin: var(--zaso-space) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
}

/* -------------------------------------------------- Druck */

@media print {
	.zaso-actions,
	.zaso-alphabet,
	.zaso-search,
	.zaso-abc-filter,
	.zaso-shield,
	.zaso-map-canvas {
		display: none !important;
	}

	/* Auf Papier ist die Karte wertlos, die Liste nicht – sie wird zur
	   einspaltigen Aufstellung mit allen Anschriften. */
	.zaso-map-list {
		display: block;
	}

	.zaso-map-list li {
		border: 0;
		border-bottom: 1px solid #000;
		padding-left: 0;
		break-inside: avoid;
	}

	.zaso-table th,
	.zaso-table td {
		border-bottom: 1px solid #000;
	}

	.zaso-day {
		break-inside: avoid;
	}

	/* Auf Papier gibt es nichts zu rollen – die Mindestbreite würde das Blatt
	   nur über den Rand schieben. */
	.zaso-month-scroll {
		overflow: visible;
	}

	.zaso-month-table {
		min-width: 0;
	}

	.zaso-month {
		break-inside: avoid;
	}
}

/* -------------------------------------------------- Bewegungsreduktion */

@media (prefers-reduced-motion: reduce) {
	.zaso * {
		transition: none !important;
		animation: none !important;
	}
}

/* -------------------------------------------------- Bekanntmachungen */

.zaso-announcement-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.zaso-announcement {
	padding: var(--zaso-space) 0;
	border-bottom: 1px solid var(--zaso-border);
}

.zaso-announcement-type {
	margin: 0 0 .25rem;
	font-size: .85em;
	color: var(--zaso-subtle);
}

.zaso-announcement-title {
	margin: 0 0 .25rem;
}

.zaso-announcement-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: 0 0 .5rem;
	font-size: .9em;
	color: var(--zaso-subtle);
}

.zaso-announcement-version {
	padding: .05em .6em;
	border: 1px solid var(--zaso-border);
	border-radius: 999px;
}

.zaso-versions-title {
	margin-top: 0;
}

.zaso-versions-integrity,
.zaso-versions-hint {
	font-size: .9em;
	color: var(--zaso-subtle);
}

/* -------------------------------------------------- Soziale Netzwerke */

/* Plattformneutral: keine Markenfarben, keine Logos, kein nachgebautes
   Erscheinungsbild. Ein Beitrag, der aussieht wie ein Instagram-Beitrag,
   weckt die Erwartung, dass man ihn kommentieren kann. */

.zaso-social-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--zaso-space);
}

@media (min-width: 48em) {
	.zaso-social-list {
		grid-template-columns: repeat(var(--zaso-social-columns, 3), 1fr);
	}
}

.zaso-social-post {
	height: 100%;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--zaso-border);
	border-radius: var(--zaso-radius);
	padding: var(--zaso-space);
}

.zaso-social-title {
	margin: 0 0 .25rem;
	font-size: 1.05em;
}

.zaso-social-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0 0 .5rem;
	font-size: .85em;
	color: var(--zaso-subtle);
}

.zaso-social-figure {
	margin: 0 0 var(--zaso-space);
}

.zaso-social-figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--zaso-radius);
}

.zaso-social-body {
	flex: 1 1 auto;
}

.zaso-social-body p:last-child {
	margin-bottom: 0;
}

.zaso-social-source {
	margin: var(--zaso-space) 0 0;
	font-size: .9em;
}

@media print {
	.zaso-social-list {
		display: block;
	}

	.zaso-social-post {
		break-inside: avoid;
		border: 0;
		border-bottom: 1px solid #000;
		padding-left: 0;
	}
}

/* -------------------------------------------------- Sinnbilder */

/*
 * Die Sinnbilder nehmen Textfarbe und Schriftgröße an. Damit skalieren sie
 * mit der Zoomstufe des Nutzers, ohne dass hier etwas nachgestellt werden
 * muss – und bei erzwungenen Farben bleiben sie sichtbar.
 */
.zaso-icon {
	width: 1.25em;
	height: 1.25em;
	flex: 0 0 auto;
	vertical-align: -.2em;
}

/* -------------------------------------------------- Farben je Fraktion

   Vier Fraktionen bekommen eine eigene Farbe. Das sind nicht irgendwelche
   vier: Am echten Bestand tragen Hausmüll (48.336), Gelber Sack (42.754),
   Schadstoffmobil (25.321) und Altpapier (21.315) zusammen **99,87 %** aller
   137.905 Termine. Die übrigen sechs Fraktionen behalten die Textfarbe – eine
   erfundene Farbe für neun Termine Altglas hülfe niemandem und machte die
   Legende bunter, als sie Bedeutung hat.

   Farbe bleibt Zugabe: Der Name der Fraktion steht neben jedem Sinnbild im
   Text, die Sinnbilder tragen `aria-hidden`. Es gibt hier also keine Angabe,
   die nur über die Farbe zu haben wäre.

   Zwei Ebenen zum Übersteuern: `--zaso-fraktion-<slug>` setzt eine einzelne
   Farbe (im Theme, in einem Elementor-Container, überall), `--zaso-fraktion`
   setzt sie für einen ganzen Zweig. */

.zaso-icon-fraction {
	width: var(--zaso-fraktion-size, 1.25em);
	height: var(--zaso-fraktion-size, 1.25em);
	color: var(--zaso-fraktion, currentColor);
}

.zaso-fraction-hausmuell {
	--zaso-fraktion: var(--zaso-fraktion-hausmuell, #9aa0a6);
}

.zaso-fraction-gelber-sack {
	--zaso-fraktion: var(--zaso-fraktion-gelber-sack, #b58900);
}

.zaso-fraction-altpapier {
	--zaso-fraktion: var(--zaso-fraktion-altpapier, #1a5fb4);
}

.zaso-fraction-schadstoffmobil {
	--zaso-fraktion: var(--zaso-fraktion-schadstoffmobil, #1faa00);
}

.zaso-day-fraction,
.zaso-legend-item,
.zaso-fraction-cell,
.zaso-next-fraction {
	display: inline-flex;
	align-items: center;
	gap: .4em;
}

/* -------------------------------------------------- In der Nähe */

.zaso-nearby {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .75rem;
	margin-bottom: var(--zaso-space);
}

.zaso-hint {
	color: var(--zaso-subtle);
	font-size: .9em;
}

.zaso-facility-distance {
	margin: .2rem 0;
	font-weight: 600;
}

/*
 * Die Hervorhebung der Ausgabestellen ist eine Zugabe, keine Aussage: Die
 * Beschriftung darüber trägt die Bedeutung und wird auch vorgelesen.
 */
.zaso-facility-outlet {
	border-left: 4px solid var(--zaso-accent);
	padding-left: .75rem;
}

.zaso-facility-badge {
	display: inline-block;
	margin: 0 0 .3rem;
	padding: .15em .6em;
	border-radius: 999px;
	background: var(--zaso-accent);
	color: var(--zaso-accent-contrast);
	font-size: .85em;
	font-weight: 600;
}

.zaso-housenumber-dates {
	margin-top: var(--zaso-space);
}

/* -------------------------------------------------- Seitennavigation */

.zaso-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: var(--zaso-space) 0 0;
	padding: 0;
	list-style: none;
}

.zaso-pagination a,
.zaso-pagination span {
	display: inline-block;
	min-width: 2.4em;
	padding: .4em .7em;
	border: 1px solid var(--zaso-border);
	border-radius: var(--zaso-radius);
	text-align: center;
	text-decoration: none;
}

.zaso-pagination .current {
	background: var(--zaso-accent);
	border-color: var(--zaso-accent);
	color: var(--zaso-accent-contrast);
	font-weight: 600;
}

/* -------------------------------------------------- Suchfelder in voller Breite */

.zaso-search .zaso-field,
.zaso-search .zaso-actions {
	width: 100%;
}

.zaso-search select,
.zaso-search .zaso-search-housenumber {
	box-sizing: border-box;
	width: 100%;
	padding: .5em .7em;
	border: 1px solid var(--zaso-border);
	border-radius: var(--zaso-radius);
	font: inherit;
}

/*
 * Der Knopf trägt eigene Custom Properties, damit die Oberfläche von
 * Elementor Rundung, Innenabstand und beide Hintergründe einzeln setzen kann,
 * ohne die Regel selbst zu überschreiben.
 */
/*
 * Dieselbe Regel für beide Suchen: Der Abfallkalender und das Abfall-ABC
 * zeigen denselben Knopf, und im Elementor-Widget stehen für beide dieselben
 * Regler. Zwei getrennte Regeln würden früher oder später auseinanderlaufen.
 *
 * Seit 3.17.3 auch für den Knopf „Anzeigen" der Ortswahl unter der
 * Anlagen-Karte. Er stand bis dahin nicht in dieser Liste und trug deshalb
 * nur die Grundform von `.zaso-button` – ein Regler im Widget hätte nichts
 * bewirkt, weil hier niemand seine Eigenschaften las.
 */
.zaso-search .zaso-button,
.zaso-abc-lookup .zaso-button,
.zaso-abc-filter .zaso-button,
.zaso-map-place .zaso-button {
	border-radius: var(--zaso-btn-radius, var(--zaso-radius));
	padding: var(--zaso-btn-padding, .6em 1.2em);
	background: var(--zaso-btn-bg, var(--zaso-accent));
	color: var(--zaso-btn-color, var(--zaso-accent-contrast));
	border-style: solid;
	border-width: var(--zaso-btn-border-width, 1px);
	/* Ohne eigene Randfarbe folgt der Rand dem Hintergrund – dann ist er
	   unsichtbar, und der Knopf sieht aus wie zuvor. */
	border-color: var(--zaso-btn-border-color, var(--zaso-btn-bg, var(--zaso-accent)));
}

.zaso-search .zaso-button:hover,
.zaso-search .zaso-button:focus,
.zaso-abc-lookup .zaso-button:hover,
.zaso-abc-lookup .zaso-button:focus,
.zaso-abc-filter .zaso-button:hover,
.zaso-abc-filter .zaso-button:focus,
.zaso-map-place .zaso-button:hover,
.zaso-map-place .zaso-button:focus {
	background: var(--zaso-btn-bg-hover, var(--zaso-btn-bg, var(--zaso-accent)));
	color: var(--zaso-btn-color-hover, var(--zaso-btn-color, var(--zaso-accent-contrast)));

	/*
	 * Die Randstärke fällt auf die des Normalzustands zurück, nicht auf 1px:
	 * Ein Rand, der beim Überfahren die Breite wechselt, vergrößert den Knopf
	 * und schiebt die Nachbarfelder – der Kasten zuckt unter dem Mauszeiger.
	 * Wer nur die Farbe wechselt (der übliche Fall), bekommt keine Bewegung.
	 */
	border-width: var(--zaso-btn-border-width-hover, var(--zaso-btn-border-width, 1px));
	border-color: var(--zaso-btn-border-color-hover, var(--zaso-btn-border-color, var(--zaso-btn-bg-hover, var(--zaso-btn-bg, var(--zaso-accent)))));

	/* Ist eine eigene Hover-Farbe gesetzt, wäre das Abdunkeln doppelt – die
	   gewählte Farbe käme um 10 % gedämpft heraus. */
	filter: var(--zaso-btn-filter, brightness(.9));
}