/*
 * Mein Abrufschein — Site-Plugin, eigene Gestaltung.
 *
 * Bewusst hier und nicht im Theme: Mitgliedsantrag, Händlerverzeichnis und
 * Karte gehören zum Plugin und sollen einen Theme-Wechsel überstehen. Was das
 * Theme mitbringt (Farben, Abstände, Feldrahmen), wird nicht wiederholt —
 * hier steht nur, was ohne das Plugin sinnlos wäre.
 */

/* ---------- Mitgliedsantrag: halbbreite Felder ----------

   Vorher trugen diese Felder ein eingebettetes
   `display:inline-block; width:calc(50% - 8px); margin-right:8px`.
   Zwei davon addierten sich exakt auf 100 % — dazwischen blieben acht Pixel,
   und die Felder klebten sichtbar aneinander.

   Warum jetzt Flex und nicht wieder feste Breiten: Inline-Block-Elemente
   erben den Zeilenumbruch aus dem Quelltext als zusätzliches Leerzeichen.
   Zwei Felder mit je 50 % passen damit nie in eine Zeile, egal wie man
   rechnet — man umgeht das sonst mit `font-size:0` am Formular, was jede
   Schriftgröße darin von Hand zurücksetzen müsste. Ein Flex-Container
   erzeugt diesen Leerraum gar nicht erst.

   Das Formular enthält neben den Feldern auch Abschnittsüberschriften,
   versteckte Eingaben, den Honigtopf und die Schaltfläche. Sie alle bleiben
   deshalb ausdrücklich volle Breite; nur `.field--halb` teilt sich die Zeile. */
.ma-antrag {
	--ma-feld-abstand: 20px;

	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	/* Nur waagerecht. Den senkrechten Abstand macht `.field` weiterhin
	   selbst — sonst käme er zum vorhandenen margin-bottom hinzu. */
	gap: 0 var(--ma-feld-abstand);
}

.ma-antrag > * {
	flex: 0 0 100%;
	min-width: 0;
}

/* Kein flex-grow: Steht ein halbes Feld allein in seiner Zeile (drei halbe
   Felder hintereinander), bleibt es halb breit statt aufzuklappen. */
.ma-antrag > .field--halb {
	flex: 0 1 calc(50% - (var(--ma-feld-abstand) / 2));
}

/* Auf schmalen Geräten steht jedes Feld für sich. Zwei halbe Spalten mit
   Beschriftung, Hinweis und Fehlermeldung sind unter 640px nicht mehr
   lesbar. */
@media (max-width: 640px) {
	.ma-antrag > .field--halb {
		flex: 0 0 100%;
	}
}

/* ---------- Händlerverzeichnis ----------

   Bis Juli 2026 standen alle Händler auf einer Seite und ein Skript blendete
   im Browser aus, was nicht zur Eingabe passte. Mit 1660 statt 288 Einträgen
   trägt das nicht mehr: Gesucht und geblättert wird jetzt auf dem Server.
   Die Regel für `.dealer[hidden]` ist damit hinfällig und entfallen. */

#ma-dealer-count {
	font-size: .9rem;
}

/* Das Suchfeld sitzt jetzt in einem Formular mit Schaltflächen daneben.
   `.finder-bar` ist bereits Flex mit Umbruch; die Schaltflächen sollen nur
   nicht mitwachsen, sondern das Feld die freie Breite bekommen. */
.finder-bar > .btn {
	flex: 0 0 auto;
	padding: 12px 22px;
}

/* ---------- Seitenblätter ----------

   `paginate_links()` liefert eine flache Folge aus `<a>` und `<span>`, alle
   mit der Klasse `page-numbers`, die aktuelle zusätzlich mit `current` und
   die Auslassung mit `dots`. Ohne eigene Angaben stehen sie als nackte,
   linksbündige Linkkette da.

   Gestaltet wie die übrigen Bedienelemente: weisse Fläche, dieselbe
   Linienfarbe, dieselbe Radius- und Schattenlogik wie `.btn-ghost`. */
.ma-dealer-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
}

.ma-dealer-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--line, #e4eaf1);
	border-radius: 10px;
	background: #fff;
	color: var(--ink, #17222f);
	font-weight: 700;
	font-size: .95rem;
	line-height: 1;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease,
		border-color .15s ease, background .15s ease;
}

.ma-dealer-pagination a.page-numbers:hover {
	border-color: var(--navy, #0F2C4C);
	transform: translateY(-2px);
	box-shadow: var(--shadow, 0 10px 30px rgba(15, 44, 76, .08));
}

.ma-dealer-pagination .page-numbers.current {
	background: var(--navy, #0F2C4C);
	border-color: var(--navy, #0F2C4C);
	color: #fff;
}

/* Die Auslassung ist keine Schaltfläche und soll auch nicht so aussehen. */
.ma-dealer-pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
	color: var(--muted, #5b6b7e);
	min-width: 0;
	padding: 0 4px;
}

/* „Zurück" und „Weiter" tragen Text statt einer Ziffer und brauchen Luft. */
.ma-dealer-pagination .prev,
.ma-dealer-pagination .next {
	padding: 0 18px;
}

.ma-dealer-pagination .page-numbers:focus-visible {
	outline: 2px solid var(--blue, #1B63C4);
	outline-offset: 2px;
}

/* Auf schmalen Geräten bleiben Richtung und aktuelle Seite stehen, die
   übrigen Ziffern verschwinden. 28 Seitenzahlen umbrechen sonst in drei
   Reihen und schieben die Liste nach unten aus dem Bild. */
@media (max-width: 480px) {
	.ma-dealer-pagination .page-numbers:not(.current):not(.prev):not(.next):not(.dots) {
		display: none;
	}
}

/* Auf schmalen Geräten bricht die Händlerzeile um.

   Ohne das ist sie 470px breit und sprengt einen 390px-Bildschirm: Anschrift
   und die beiden Schaltflächen stehen in einer nicht umbrechenden Flex-Zeile,
   und die ganze Seite bekommt dadurch einen waagerechten Bildlauf — gemessen
   124px Überstand. Die Schaltflächen rücken deshalb unter die Anschrift und
   teilen sich die Zeile. */
@media (max-width: 640px) {
	#ma-dealer-list .dealer {
		flex-wrap: wrap;
		align-items: flex-start;
	}

	#ma-dealer-list .dealer > div + div {
		width: 100%;
	}

	#ma-dealer-list .dealer > div + div > .btn {
		flex: 1 1 auto;
		text-align: center;
	}
}

/* ---------- Rückmeldung des Kontaktformulars ----------
   Die Warnvariante erbt das Gold aus `.notice` des Themes. Eine erfolgreiche
   Absendung bekommt Grün — sonst liest sich „Vielen Dank" wie ein Hinweis auf
   ein Problem. */
.notice-gut {
	background: #e7f7ee;
	border-color: #bde9d0;
	color: #0d6b38;
}

/* ---------- Verbandslogo auf /verein/ ----------
   Das gelieferte Logo hat weißen Grund. In der Karte steht es deshalb auf
   Weiß und bekommt Luft, statt randlos an die Kartenkante zu stoßen. */
/* `max-width: 320px` allein genügt hier nicht: Die Datei ist 640px breit, das
   Deckelmaß greift also immer — auch dann, wenn die Karte auf einem
   390px-Bildschirm nur noch 286px Innenraum hat. Genau ein Pixel Überstand
   reichte für einen waagerechten Bildlauf auf der ganzen Seite. `min()`
   deckelt zusätzlich auf die tatsächlich verfügbare Breite. */
.ufb-logo img {
	display: block;
	max-width: min(320px, 100%);
	height: auto;
	margin: 0 auto;
}