/* Practice search ([vb_search]) - mobile-first. Tokens from site.css. */

/* The form is a FLEX row - see the filter-bar block further down, which sets
   display:flex at the same specificity and later in the sheet, so it wins at
   every width. This block used to declare a grid here and a five-column
   template at 720px; measured in both engines, the computed display was
   "flex" at 375px and at 1280px and the grid template resolved to something
   that changed nothing. Whoever edited those rules was editing dead code.
   Only the margin survives, because the flex block does not set one. */
.vb-search-form {
	margin-bottom: 28px;
}

.vb-search-form__q input {
	padding: 10px 12px;
	font-size: var(--vb-text-body, 1rem);
	color: var(--vb-ink, #30272b);
	background: var(--vb-base, #fbf7f2);
	border: 1px solid var(--vb-field-line, #8c716e);
	border-radius: var(--vb-radius-sm, 11px);
}

.vb-search-form__q input:focus {
	outline: 2px solid transparent;
	border-color: var(--vb-accent-text, #68192e);
	box-shadow: var(--vb-focus, 0 0 0 2px var(--vb-raised, #fffcf8), 0 0 0 5px var(--vb-focus-color, #205f9c));
}

.vb-search-form__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: var(--vb-text-small, 0.85rem);
	font-weight: 600;
	color: var(--vb-muted, #6b5b60);
}

.vb-search-form__field select {
	padding: 10px 12px;
	font-size: var(--vb-text-body, 1rem);
	color: var(--vb-ink, #30272b);
	background: var(--vb-base, #fbf7f2);
	border: 1px solid var(--vb-field-line, #8c716e);
	border-radius: var(--vb-radius-sm, 11px);
	cursor: pointer;
	appearance: none;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235a6b67' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 34px;
}

.vb-search-form__field select:hover {
	border-color: var(--vb-primary, #b66a80);
}

.vb-search-form__checkbox {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	color: var(--vb-ink, #30272b);
}

.vb-search-form__checkbox input {
	/* 18x18 by user-agent default, with 13px between neighbours - under the
	   WCAG 2.5.8 minimum and under its spacing exception too. The old
	   width/height pair is gone rather than left below the minimum: two
	   declarations disagreeing about one box is how somebody later "tidies"
	   the wrong one away. */
	min-width: var(--vb-tap-min);
	min-height: var(--vb-tap-min);
	accent-color: var(--vb-accent-text, #68192e);
}

/* The submit is a .vb-btn (M-109); what is left of it here is where it sits. */

/* ----- Map ------------------------------------------------------------------ */
/* The list stands before the map in the source. On a phone that is the
   order on screen too (M-010: a reader scrolled 3.1 screens of form and map
   before the first business); from 40rem the map is pulled back above the
   list, where the desktop has always had it. `order` needs a flex parent,
   which is what .vb-search-body is for. */
.vb-search-body {
	display: flex;
	flex-direction: column;
}

.vb-search-map {
	margin: 28px 0 0;
}

@media ( min-width: 40.01rem ) {
	.vb-search-body > .vb-search-map {
		order: -1;
		margin: 0 0 28px;
	}
}

.vb-search-list {
	min-width: 0;
}

.vb-search-map__canvas {
	/* Leaflet paints its own #ddd until the first tile decodes. On a phone
	   that is a plain grey rectangle for a second or two, which reads as
	   broken rather than loading. */
	background: var(--vb-primary-soft, #f3e2e7);
	height: 420px;
	border: 1px solid var(--vb-line, #d9c7c1);
	border-radius: var(--vb-radius, 16px);
	overflow: hidden;
	box-shadow: var(--vb-shadow, 0 2px 6px -2px rgba(48, 39, 43, 0.10), 0 18px 40px -26px rgba(48, 39, 43, 0.40));
}

@media ( min-width: 45rem ) {
	.vb-search-map__canvas {
		height: 360px;
	}
}

/* Between the phone and the split view the map is a strip, not a screen.
   Measured 7.9. after the filters went behind their button: the first result
   card still began at y=789 on a 768px screen and y=804 at 1024px, and 388 of
   those pixels were the map standing above the list at full height. It keeps
   its place - a tablet reader should see where the businesses are - at a
   height that leaves room for the first two of them. From 80rem it is a
   column of its own and takes the screen it is given. */
@media ( min-width: 40.01rem ) and ( max-width: 79.99rem ) {
	.vb-search-map__canvas {
		height: 220px;
	}
}

/* ----- Split view (M-047) ---------------------------------------------------
   From 80rem the list and the map stand side by side, the map sticky in its
   column so it is still there at card twelve. The offset is the header's
   height, the same 84px the profile's aside sticks under. Below the 720px
   height rule on purpose: same specificity, and the later one wins - placed
   above it, the canvas measured 422px on a 800px window. */
@media ( min-width: 80rem ) {
	.vb-search-body {
		display: grid;
		grid-template-columns: minmax( 0, 1fr ) minmax( 360px, 38% );
		gap: 28px;
		align-items: start;
	}

	/* Aus der Kopfhoehe, nicht 84px: der Kopf ist seit dem 23.09.2026 als
	   Karte 91px hoch, und die Karte lag 7px darunter (Nachpruefung W10).
	   Seit #212 auch unter dem Band der Pfotenspur (site.css). */
	.vb-search-body > .vb-search-map {
		order: 0;
		margin: 0;
		position: sticky;
		top: calc( var(--vb-header-h, 63px) + var(--vb-progress-h, 0px) + 16px );
	}

	.vb-search-map__canvas {
		height: calc( 100vh - var(--vb-header-h, 63px) - var(--vb-progress-h, 0px) - 40px );
		min-height: 420px;
		max-height: 720px;
	}
}

/* ----- The filter column (>= 80rem) -----------------------------------------
   Measured on 7.9. at 1440x900: the first result card began at y=720, and 356
   of those pixels were the filter panel, open, above the list. The same panel
   on a phone sits behind a button (M-010) and the first card begins at y=422 -
   the wide screen was the one paying for the filters.

   `.vb-search-cols` wraps the form, the active chips and the body, because a
   grid cannot span two parents. Below 80rem it is an ordinary block and
   nothing about the phone changes; from 80rem the form becomes the left
   column - it keeps its own surface and radius, so what was a card above the
   results is the same card beside them. It does not stick: the map in the
   third column does, and two sticky columns fight over one screen.

   The column is 300px because the form's own fields are flex items with a
   170px basis; below that they wrap into a second line inside the sidebar. */
@media ( min-width: 80rem ) {
	.vb-search-cols {
		display: grid;
		grid-template-columns: 300px minmax( 0, 1fr );
		column-gap: 28px;
		align-items: start;
	}

	.vb-search-cols > .vb-search-form {
		grid-column: 1;
		grid-row: 1 / span 2;
		margin-bottom: 0;
	}

	.vb-search-cols > .vb-search-active,
	.vb-search-cols > .vb-search-body {
		grid-column: 2;
	}

	/* Auf .vb-search-cols gescopt, nicht wegen der Verschachtelung, sondern
	   wegen der Kaskade: beide Regeln hier standen frueher im Blatt als
	   .vb-search-form__field (flex: 1 1 170px) und .vb-search-form__panel
	   (flex-wrap: wrap; align-items: flex-end), und @media traegt keine
	   Spezifitaet bei. Von diesem Block ueberlebte genau EINE Deklaration -
	   flex-direction: column - weil die spaetere Regel sie nicht setzt. Und
	   ausgerechnet die macht aus dem ueberlebenden flex-basis: 170px eine
	   HOEHE: gemessen fuenf Felder von je 170px mit 61px Inhalt, 109px leer,
	   Panel 1582px hoch in einer 300px-Spalte, deren Inhalt keine 450px
	   misst. Dazu rechtsbuendig und unterschiedlich breit (187/150/214/190/
	   169 in 264), weil auch align-items: stretch verlor.
	   0-2-0 schlaegt 0-1-0 an jeder Stelle des Blatts. */
	.vb-search-cols .vb-search-form__panel {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}

	/* auto, nicht 100%: in einem Spalten-Container loest flex-basis: 100%
	   gegen eine unbestimmte Hauptachse auf und wird als content behandelt -
	   es waere nur zufaellig richtig. Die Breite macht align-items: stretch. */
	.vb-search-cols .vb-search-form__field,
	.vb-search-cols .vb-search-form__q {
		flex: 0 0 auto;
	}
}

/* ----- Results ------------------------------------------------------------- */
.vb-search-results {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

@media ( min-width: 35rem ) {
	.vb-search-results {
		/* 360px, not 280: at 280 the split view fitted two columns of 312px
		   into its 642px list - narrower than the 369px a phone gives the same
		   card, so the business name wrapped more often and the card grew from
		   251px on a phone to 307px on a desktop. Measured across the widths,
		   360 gives one column in the split view, two at 1024 (was three at
		   322px) and leaves 768 and the phone as they were. */
		grid-template-columns: repeat( auto-fill, minmax( 360px, 1fr ) );
	}
}

/* An h2 since the outline was measured (h1 straight to twelve h3 cards),
   and it must go on looking like the quiet line it was - a result count is
   not a section title. */
.vb-search-results__count {
	grid-column: 1 / -1;
	margin: 0;
	font-size: var(--vb-text-body, 1rem);
	font-weight: 600;
	line-height: 1.4;
	color: var(--vb-muted, #6b5b60);
}

.vb-practice-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	background: var(--vb-base, #fbf7f2);
	border: 1px solid var(--vb-line, #d9c7c1);
	border-radius: var(--vb-radius, 16px);
	box-shadow: var(--vb-shadow, 0 2px 6px -2px rgba(48, 39, 43, 0.10), 0 18px 40px -26px rgba(48, 39, 43, 0.40));
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Ueberfahren aendert Rahmen und Schatten, nicht die Lage: der Sprung um 5px
   kam auch bei reduzierter Bewegung, und der gruene Schwebeschatten war eine
   vierte Schattenebene (Nachpruefung S13, S15). */
.vb-practice-card:hover {
	border-color: var(--vb-primary, #b66a80);
	box-shadow: var(--vb-shadow, 0 2px 6px -2px rgba(48, 39, 43, 0.10), 0 18px 40px -26px rgba(48, 39, 43, 0.40));
}

@media (prefers-reduced-motion: reduce) {
	.vb-practice-card,
	.vb-search-results .vb-practice-card {
		animation: none !important;
		transition: none !important;
	}
}

.vb-practice-card__title {
	margin: 0;
	/* An <h3> that renders SMALLER than the text around it is not a heading,
	   it is a label - and this one did, twelve times per result page: 16.8px
	   against a 17px body (M-027). The size is set once, further down, where
	   the rule that used to win lives. */
	line-height: 1.3;
	/* Ein Wort laenger als die Spalte lief unter das Herz (gemessen
	   03.10.2026, 390 px); gebrochen wird nur, wo es sonst nicht passt. */
	overflow-wrap: break-word;
}

.vb-practice-card__title a {
	color: var(--vb-ink, #30272b);
	text-decoration: none;
}

.vb-practice-card__title a:hover {
	color: var(--vb-accent-text, #68192e);
}

.vb-practice-card__address,
.vb-practice-card__species {
	margin: 0;
	font-size: var(--vb-text-label, 0.9rem);
	color: var(--vb-muted, #6b5b60);
}

.vb-practice-card__species {
	font-size: var(--vb-text-small, 0.85rem);
}

.vb-practice-card__badge--bookable {
	align-self: flex-start;
	margin-top: 4px;
	padding: 4px 12px;
	border-radius: var(--vb-radius-pill, 999px);
	/* --vb-success is a FILL colour (white text on it); as chip text on a
	   tinted ground it reads 2.49:1 in dark. The chip gets the accent-text
	   token, the ground the primary-soft one - both turn with the scheme. */
	background: var(--vb-primary-soft, #f3e2e7);
	color: var(--vb-accent-text, #68192e);
	font-size: var(--vb-text-caption, 0.78rem);
	font-weight: 700;
}

.vb-practice-card__nobooking {
	margin-top: 4px;
	font-size: var(--vb-text-caption, 0.78rem);
	color: var(--vb-muted, #6b5b60);
	opacity: 0.85;
}

.vb-practice-card__phone {
	margin-top: 4px;
	font-size: var(--vb-text-label, 0.9rem);
	font-weight: 600;
	color: var(--vb-accent-text, #68192e);
	text-decoration: none;
}

.vb-practice-card__phone:hover {
	text-decoration: underline;
}

/* ----- Next-availability slot bar (T30) ------------------------------------- */
.vb-practice-card__slots {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 8px;
	margin: 4px 0 0;
	font-size: var(--vb-text-small, 0.85rem);
}

.vb-practice-card__slots-day {
	font-weight: 700;
	color: var(--vb-accent-text, #68192e);
	text-transform: capitalize;
}

.vb-practice-card__slots-times {
	color: var(--vb-ink, #30272b);
	font-variant-numeric: tabular-nums;
}

.vb-practice-card__slots-more {
	font-size: var(--vb-text-caption, 0.78rem);
	font-weight: 600;
	color: var(--vb-muted, #6b5b60);
}

/* Emergency / on-call badge (T43) */
.vb-practice-card__emergency {
	align-self: flex-start;
	padding: 3px 10px;
	border-radius: var(--vb-radius-pill, 999px);
	background: rgba(220, 38, 38, 0.12);
	color: var(--vb-danger-text-strong, #b52216);
	font-size: var(--vb-text-caption, 0.78rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* ----- Live filters (P4) ---------------------------------------------------- */
.vb-search-results.is-loading {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.vb-search-more {
	margin-top: 28px;
	text-align: center;
}

.vb-search-more__shown {
	margin: 0 0 10px;
	font-size: var(--vb-text-label, 0.9rem);
	color: var(--vb-muted, #6b5b60);
}

/* .vb-btn--secondary (M-109). */
.vb-search-more__btn:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* ----- Pagination ---------------------------------------------------------- */
.vb-search-pagination {
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: center;
	margin-top: 32px;
}

.vb-search-pagination__prev,
.vb-search-pagination__next {
	padding: 8px 16px;
	border: 1px solid var(--vb-field-line, #8c716e);
	border-radius: var(--vb-radius-sm, 11px);
	text-decoration: none;
	font-weight: 600;
	color: var(--vb-accent-text, #68192e);
}

.vb-search-pagination__prev:hover,
.vb-search-pagination__next:hover {
	background: var(--vb-primary-soft, #f3e2e7);
}

.vb-search-pagination__current {
	font-size: var(--vb-text-label, 0.9rem);
	color: var(--vb-muted, #6b5b60);
}

/* ----- Landing pages (reuse cards) ---------------------------------------- */
.vb-landing__intro {
	margin: 0 0 28px;
	font-size: 1.15rem;
	line-height: 1.6;
	color: var(--vb-muted, #6b5b60);
}

.vb-landing__all {
	margin-top: 28px;
}

.vb-landing__all a {
	font-weight: 600;
}

/* ----- Sponsored / featured (Task 16) ------------------------------------- */
.vb-sponsored {
	margin-bottom: 28px;
	padding: 18px;
	border: 1px solid var(--vb-line, #d9c7c1);
	border-radius: var(--vb-radius, 16px);
	background: linear-gradient( 160deg, var(--vb-tint-warm, #fbf7f2), var(--vb-base, #fbf7f2) );
}

.vb-sponsored__label {
	margin: 0 0 12px;
	font-size: var(--vb-text-caption, 0.78rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vb-warn-text, #86520a);
}

.vb-featured__title {
	margin: 0 0 16px;
}

.vb-practice-card__sponsored {
	align-self: flex-start;
	margin-bottom: 2px;
	padding: 2px 9px;
	border-radius: var(--vb-radius-pill, 999px);
	background: rgba( 245, 158, 11, 0.16 );
	color: var(--vb-warn-text, #86520a);
	font-size: var(--vb-text-caption, 0.78rem);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* ----- "Near me" location bar + distance (T62) ------------------------------ */
.vb-search-loc {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	/* width, not grid-column: the form is a flex row, so the declaration that
	   used to sit here spanned a grid that has not existed since the filter
	   bar was rewritten. width:100% is what actually makes this bar its own
	   line. */
	width: 100%;
	margin-bottom: 12px;
}

/* .vb-btn--secondary (M-109). */
.vb-search-loc__near:disabled {
	opacity: 0.6;
	cursor: wait;
}

.vb-search-loc__addr {
	flex: 1 1 200px;
	min-width: 0;
	padding: 9px 12px;
	font: inherit;
	/* Grund, Schrift und Erscheinung selbst gesetzt wie beim Suchfeld
	   darueber. Bis zum 23.09.2026 fehlten sie hier als einzigem Feld der
	   Suche, und das Feld nahm den Grund des Browsers: auf dem iPhone
	   (Brave, WebKit) dunkelgrau zwischen lauter weissen Feldern - gemeldet
	   vom Inhaber mit der Frage "Warum dunkelgrau?". 16px, sonst zoomt iOS
	   beim Antippen hinein. */
	font-size: var(--vb-text-body, 1rem);
	color: var(--vb-ink, #30272b);
	background: var(--vb-base, #fbf7f2);
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid var(--vb-field-line, #8c716e);
	border-radius: var(--vb-radius-sm, 11px);
}

.vb-search-loc__addr:focus {
	outline: 2px solid transparent;
	border-color: var(--vb-accent-text, #68192e);
	box-shadow: var(--vb-focus, 0 0 0 2px var(--vb-raised, #fffcf8), 0 0 0 5px var(--vb-focus-color, #205f9c));
}

/* Wo "In meiner Naehe" den Leser verortet hat, mit Genauigkeit - eine
   eigene Zeile direkt unter dem Knopf (Inhaber, 23.09.2026). */
.vb-search-loc__where {
	display: flex;
	flex-basis: 100%;
	align-items: flex-start;
	gap: 6px;
	margin: 0;
	font-size: var(--vb-text-small, 0.85rem);
	color: var(--vb-ink, #30272b);
}

.vb-search-loc__where .vb-ic {
	flex: 0 0 auto;
	margin-block-start: 0.15em;
	color: var(--vb-accent-text, #68192e);
}

.vb-search-loc__radius {
	padding: 9px 10px;
	font: inherit;
	border: 1px solid var(--vb-field-line, #8c716e);
	border-radius: var(--vb-radius-sm, 11px);
}

.vb-search-loc__clear {
	padding: 6px 12px;
	font: inherit;
	color: var(--vb-muted, #6b5b60);
	background: transparent;
	border: 1px solid var(--vb-line, #d9c7c1);
	border-radius: var(--vb-radius-pill, 999px);
	cursor: pointer;
}

.vb-search-loc__msg {
	flex-basis: 100%;
	font-size: var(--vb-text-small, 0.85rem);
	color: var(--vb-muted, #6b5b60);
}

.vb-practice-card__distance {
	margin: 0;
	font-size: var(--vb-text-small, 0.85rem);
	font-weight: 700;
	color: var(--vb-accent-text, #68192e);
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Design refresh (DSGN pass): richer cards, chips, CTA, decluttered filters.
   Appended so these rules win over the base styles above.
   ========================================================================== */

.vb-ic {
	display: inline-block;
	vertical-align: -0.18em;
	flex: none;
}

/* ----- Filter bar: flex rows, toggle-chip checkboxes ----------------------- */
.vb-search-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	padding: 18px;
	background: var(--vb-surface, #f2e7df);
	border: none;
	border-radius: var(--vb-radius-lg, 22px);
}

.vb-search-form__field {
	flex: 1 1 170px;
	/* A flex item defaults to min-width:auto, so it cannot shrink below its
	   min-content width - and a <select>'s min-content width is its LONGEST
	   option, not the selected one. With 44 specialties the French
	   "Service vétérinaire d'urgence à domicile" pushed the field straight
	   out of the card on a phone. */
	min-width: 0;
}

/* Text-entry controls only. A checkbox stretched to 100% of its field turns
   into a giant pill and shoves its own label off the row, which is exactly
   what happened when this first went in. */
.vb-search-form__field select,
.vb-search-form__field input[type="text"],
.vb-search-form__field input[type="search"] {
	/* Without this the control keeps its intrinsic width even though its
	   container is now allowed to shrink. */
	max-width: 100%;
	width: 100%;
}

.vb-search-form__q {
	flex-basis: 100%;
}

.vb-search-form__checkbox {
	flex: 0 0 auto;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 9px 14px;
	background: var(--vb-base, #fbf7f2);
	border: 1px solid var(--vb-line, #d9c7c1);
	border-radius: var(--vb-radius-pill, 999px);
	cursor: pointer;
	white-space: nowrap;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.vb-search-form__checkbox:has( input:checked ) {
	border-color: var(--vb-accent-text, #68192e);
	background: var(--vb-primary-soft, #f3e2e7);
	color: var(--vb-accent-text, #68192e);
}

.vb-search-form__submit {
	flex: 0 0 auto;
	margin-left: auto;
}

.vb-search-loc {
	flex-basis: 100%;
}

/* ----- The fold (M-010) ---------------------------------------------------
   Everything but the search box lives in the panel. Wider than 40rem the
   panel is a full-width flex row inside the form - same gap, same wrapping,
   so nothing moves - and the toggle is not drawn. On a phone the toggle is
   the row and the panel opens under it. No transparent-box trick (the
   `contents` display value) anywhere in this: measured, it unfolds a
   <details> without unfolding its content. */
.vb-search-form__panel {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	flex-basis: 100%;
	min-width: 0;
}

.vb-search-form__toggle {
	display: none;
}

/* ----- Card layout --------------------------------------------------------- */
.vb-practice-card {
	position: relative;
	gap: 10px;
	padding: 18px;
	border-radius: var(--vb-radius-lg, 22px);
	/* No hard line — soft shadow + whitespace define the card. */
	border: none;
	box-shadow: var(--vb-shadow, 0 2px 6px -2px rgba(48, 39, 43, 0.10), 0 18px 40px -26px rgba(48, 39, 43, 0.40));
}

/* Featured tier keeps a soft teal ring as a deliberate highlight. */

.vb-practice-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.vb-practice-card__badges:empty {
	display: none;
}

/* Auf der Suche nebeneinander: Zeichen links, Titel daneben. */
.vb-practice-card__head {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Auf der Startseite untereinander: die Initialenkachel schob den Titel um
   58px ein, wo die Vorlage ihn buendig an der Innenkante der Karte fuehrt,
   und sie sitzt dort auf der Kante des Bildbands. Bis zum 23.09.2026 galt
   das fuer jede Karte und machte die Suchkarten 19 % hoeher (Nachpruefung
   Nr. 46, W7) - gemeint war nur die Startseite. */
.vb-providers__grid .vb-practice-card__head {
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.vb-practice-card__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	flex: none;
	border-radius: var(--vb-radius, 16px);
	background: var(--vb-primary-soft, #f3e2e7);
	color: var(--vb-accent-text, #68192e);
	font-family: var(--vb-display);
	font-weight: 700;
	font-size: var(--vb-text-lead, 1.0625rem);
}

.vb-practice-card__headtext {
	min-width: 0;
}

/* The later of the two rules on this selector, and therefore the one that
   decided: 1.05rem = 16.8px. The clamp above it never applied - which is why
   a first attempt at M-027 changed nothing measurable. One rule now. */
.vb-practice-card__title {
	font-size: clamp( 1.125rem, 1rem + 0.4vw, 1.35rem );
}

.vb-practice-card__address {
	margin-top: 2px;
}

/* Species tags as chips */
.vb-practice-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.vb-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: var(--vb-radius-pill, 999px);
	background: var(--vb-surface, #f2e7df);
	border: 1px solid var(--vb-line, #d9c7c1);
	color: var(--vb-muted, #6b5b60);
	font-size: var(--vb-text-caption, 0.78rem);
	font-weight: 500;
}

.vb-chip svg {
	color: var(--vb-primary, #b66a80);
}

.vb-practice-card__status {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vb-practice-card__badge--bookable {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

/* De-emphasise "no online booking": a quiet chip, not a shouting line. */
.vb-practice-card__nobooking {
	align-self: flex-start;
	margin-top: 0;
	padding: 4px 10px;
	border-radius: var(--vb-radius-pill, 999px);
	background: var(--vb-surface, #f2e7df);
	color: var(--vb-muted, #6b5b60);
	font-size: var(--vb-text-caption, 0.78rem);
	font-weight: 600;
	opacity: 1;
}

.vb-practice-card__phone {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

/* A .vb-btn (M-109), pinned to the bottom so cards align in the grid. */
/* Gefuellt und nur leicht gerundet, wie die Vorlage ihn zeigt: dort
   316x37 CSS-px mit einem Eckradius von rund 10px, hier gemessen eine
   durchsichtige 312x44-Pille mit 999px. Die Ghost-Fassung (kein Betrieb
   ohne Buchung bekommt einen gefuellten Knopf) bleibt unberuehrt. */
.vb-practice-card__cta {
	margin-top: auto;
}

a.vb-practice-card__cta,
.vb-practice-card__cta {
	/* Der Radius gilt beiden Fassungen: die Form ist eine Frage der Karte,
	   nicht des Nachdrucks. Gefuellt oder Umriss entscheidet weiter, ob der
	   Betrieb online Termine vergibt. */
	border-radius: var(--vb-radius-sm, 11px);
}

/* Emergency badge: align icon + label inline. */
.vb-practice-card__emergency {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* Video consultation (#298): a fact about the business, not an alarm -
   the calm accent instead of the emergency red. */
.vb-practice-card__video {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	align-self: flex-start;
	padding: 3px 10px;
	border-radius: var(--vb-radius-pill, 999px);
	background: var(--vb-surface, #f2e7df);
	color: var(--vb-ink, #30272b);
	font-size: var(--vb-text-caption, 0.78rem);
	font-weight: 700;
}

/* Card entrance (respects reduced-motion via the global theme rule). */
/* Nur Deckkraft und 0.18s: keine Einfahrbewegung (Nachpruefung S12). */
@keyframes vb-card-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.vb-search-results .vb-practice-card {
	animation: vb-card-in 0.18s ease both;
}

/* ----- Branded map pins + teal clusters ------------------------------------ */
.vb-mappin {
	background: transparent;
	border: 0;
}

.vb-mappin svg {
	filter: drop-shadow( 0 3px 4px rgba(48, 39, 43, 0.35) );
}

.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
	background: rgba( 104, 25, 46, 0.25 );
}

.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
	background: var(--vb-primary-dark, #68192e);
	color: #fff;
}

.marker-cluster span {
	color: #fff;
	font-weight: 700;
}

/* The pin a hovered card names, or the cluster it is folded into. On the
   inner element, never on .leaflet-marker-icon: Leaflet positions that one
   with an inline transform, and a transform here would move it to 0,0. */
.vb-mappin svg,
.marker-cluster div {
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.vb-mappin.is-hot svg {
	transform: scale( 1.25 );
	transform-origin: 50% 100%;
}

.marker-cluster.is-hot div {
	transform: scale( 1.12 );
	box-shadow: 0 0 0 4px var(--vb-primary-soft, #f3e2e7);
}

/* What a pin says when tapped: name, kind, open or closed, one thing to do. */
.vb-mappop {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 180px;
	font-family: var(--vb-body, inherit);
}

.leaflet-container a.vb-mappop__name {
	font-weight: 700;
	color: var(--vb-ink, #30272b);
	text-decoration: none;
}

.vb-mappop__meta {
	margin: 0;
	font-size: var(--vb-text-small, 0.85rem);
	color: var(--vb-muted, #6b5b60);
}

.leaflet-container a.vb-mappop__cta {
	align-self: flex-start;
	padding: 6px 12px;
	font-size: var(--vb-text-label, 0.9rem);
	font-weight: 600;
	color: #fff;
	background: var(--vb-primary-dark, #68192e);
	border-radius: var(--vb-radius-sm, 11px);
	text-decoration: none;
}

/* Untagged-species fallback (DIR-1) */
.vb-search-untagged {
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px solid var(--vb-border, #d9c7c1);
}
.vb-search-untagged__title {
	font-size: 1.15rem;
	margin: 0 0 .25rem;
}
.vb-search-untagged__hint {
	margin: 0 0 1rem;
	color: var(--vb-muted, #6b5b60);
	font-size: var(--vb-text-body, 1rem);
}

/* "You are here": a pulsing dot, never a pin. A pin on this map means a
   practice, and mistaking your own position for a vet is the one confusion
   it must not create. */
.vb-mapme {
	position: relative;
}
.vb-mapme__dot {
	position: absolute;
	inset: 5px;
	border-radius: 50%;
	background: #1d6fe0;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.vb-mapme__halo {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba(29, 111, 224, 0.25);
	animation: vb-mapme-pulse 2.4s ease-out infinite;
}
@keyframes vb-mapme-pulse {
	0%   { transform: scale(0.6); opacity: 0.9; }
	70%  { transform: scale(1.4); opacity: 0; }
	100% { transform: scale(1.4); opacity: 0; }
}
@media ( prefers-reduced-motion: reduce ) {
	.vb-mapme__halo { animation: none; opacity: 0.5; }
}


/* Services and equipment: one checkbox per badge the chosen kind of business
   can carry. A fieldset rather than loose checkboxes, because the legend is
   what tells a reader these belong together - and because the list changes
   with the kind of business selected above it. */
/* No border on the box. A <legend> sits IN the top border line, and this one
   grew past the width it can occupy: measured on a phone in Luxembourgish it
   is 307px of two-line text in a 333px fieldset, so the border ran straight
   through the words. And the box drew a second problem: one checkbox inside a
   frame, four identical ones loose underneath it, which read as two kinds of
   control for one kind of choice. The legend is a heading above the rows now,
   and every checkbox below it looks like every other. */
.vb-search-form__badges {
	/* border-box, for the same reason the hero card needed it: these labels
	   are 100% wide with their own padding and border, and under content-box
	   that lands two pixels past the group they belong to. */
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
}


/* Said once, where the missing rows would be: with no kind of business
   chosen the panel offers only what every kind can answer, and a reader who
   expected more should learn that it is one choice away rather than that the
   filters are gone. */
.vb-search-form__hint {
	margin: 0;
	font-size: var(--vb-text-label, 0.9rem);
	color: var(--vb-muted, #6b5b60);
}


.vb-search-form__badges .vb-search-form__checkbox {
	box-sizing: border-box;
	max-width: 100%;
}


.vb-search-form__badges legend {
	/* float + full width takes the legend out of the border cut-out and puts
	   it on its own line, where it may wrap as long as it likes. */
	float: left;
	width: 100%;
	padding: 0 0 6px;
	font-size: var(--vb-text-caption, 0.78rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vb-muted, #6b5b60);
}


/* ----- The search form on a phone --------------------------------------- */
/* Below 80rem the panel is behind its button, not above the results.

   M-010 measured this on a phone and set the fold at 40rem, on the reasoning
   that "wider than 40rem the panel is always open" - which left 640 to 1279px
   with the panel standing open above the list. Measured on 7.9.: the first
   result card began at y=1241 on a 768px screen and y=1115 at 1024px, with
   ZERO cards in the first screen at either width. The panel is now a column
   from 80rem (M-132); between the two it is what it is on a phone. */
@media ( max-width: 79.99rem ) {

	/* The toggle is a row of the form, and a tap target: the folded summary
	   this replaces measured 75 x 27px, the smallest thing in a form that
	   lifts its checkboxes to 44. */
	.vb-search-form__toggle {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		min-height: var(--vb-tap-primary, 44px);
		padding: 0 14px;
		font: inherit;
		font-weight: 600;
		color: var(--vb-ink, #30272b);
		background: var(--vb-base, #fbf7f2);
		border: 1px solid var(--vb-field-line, #8c716e);
		border-radius: var(--vb-radius-sm, 11px);
		cursor: pointer;
	}

	.vb-search-form__toggle:focus-visible {
		outline: 2px solid transparent;
		border-color: var(--vb-accent-text, #68192e);
		box-shadow: var(--vb-focus, 0 0 0 2px var(--vb-raised, #fffcf8), 0 0 0 5px var(--vb-focus-color, #205f9c));
	}

	.vb-search-form__togglecount {
		color: var(--vb-accent-text, #68192e);
	}

	.vb-search-form__chev {
		margin-left: auto;
		transition: transform 0.15s ease;
	}

	.vb-search-form__toggle[aria-expanded="true"] .vb-search-form__chev {
		transform: rotate( 180deg );
	}

	.vb-search-form:not( .is-open ) .vb-search-form__panel {
		display: none;
	}

	/* A submit button that ends mid-row reads as one more field. On a phone
	   it is the end of the form and should look like it. */
	.vb-search-form__submit {
		width: 100%;
		min-height: var(--vb-tap-primary, 44px);
	}

	/* The checkbox rows sat as narrow inline blocks, so the label wrapped
	   under its own box. A full-width row keeps the box and its words on
	   one line and puts a finger's worth of space between neighbours. */
	.vb-search-form__checkbox {
		width: 100%;
		min-height: var(--vb-tap-min, 24px);
		padding: 2px 0;
	}
}

/* ----- Nothing found -----------------------------------------------------
   "0 businesses found" states a fact and offers nothing: the reader cannot
   see which of five choices emptied the list. The block names each active
   filter and links the same search without it. */
.vb-search-empty {
	/* The list is a grid; without this the block - now the only one, with
	   suggestion, chips and two links in it - becomes a single 280px cell. */
	grid-column: 1 / -1;
	margin: 8px 0 0;
	padding: 18px;
	border: 1px solid var(--vb-line, #d9c7c1);
	border-radius: var(--vb-radius, 16px);
	background: var(--vb-surface, #f2e7df);
}


.vb-search-empty__suggest {
	margin: 8px 0 0;
	font-weight: 600;
}


.vb-search-empty__reset {
	margin: 10px 0 0;
}


.vb-search-empty__lead {
	margin: 0;
	font-weight: 600;
}


.vb-search-empty__hint {
	margin: 10px 0 6px;
	color: var(--vb-muted, #6b5b60);
}


.vb-search-empty__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}


.vb-search-empty__all {
	margin: 12px 0 0;
}


/* ----- Active filters ----------------------------------------------------
   Eleven rows of controls scroll away, and after that the only evidence of
   a choice was a result count nobody was looking at. Every filter that is
   on says so here, and every one of them can be taken off from here. */
.vb-search-active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin: 0 0 18px;
}

.vb-search-active__label {
	margin: 0;
	font-size: var(--vb-text-small, 0.85rem);
	font-weight: 700;
	color: var(--vb-muted, #6b5b60);
}

.vb-search-active__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vb-chip--active {
	gap: 7px;
	min-height: var(--vb-tap-min, 24px);
	padding: 5px 10px 5px 12px;
	font: inherit;
	font-size: var(--vb-text-caption, 0.78rem);
	color: var(--vb-ink, #30272b);
	background: var(--vb-base, #fbf7f2);
	border: 1px solid var(--vb-field-line, #8c716e);
	cursor: pointer;
	text-decoration: none;
}

.vb-chip--active:hover {
	background: var(--vb-primary-soft, #f3e2e7);
}

.vb-chip__key {
	color: var(--vb-muted, #6b5b60);
	font-weight: 500;
}

.vb-chip__val {
	font-weight: 700;
}

.vb-chip__x {
	font-size: 1.05em;
	line-height: 1;
	color: var(--vb-accent-text, #68192e);
}

.vb-search-active__reset {
	font-size: var(--vb-text-small, 0.85rem);
	font-weight: 600;
	color: var(--vb-accent-text, #68192e);
}

/* The theme is not guaranteed to ship the core utility, and an unstyled
   copy of it would print the word "Remove" inside every chip. */
.vb-search-active .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ----- Card v2: what it is, whether it is open, what it treats -----------
   A directory of five kinds of business showed none of them on a card. */
.vb-practice-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0;
	font-size: var(--vb-text-small, 0.85rem);
	color: var(--vb-muted, #6b5b60);
}

.vb-practice-card__type {
	font-weight: 600;
}

.vb-practice-card__open {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: 700;
}

.vb-practice-card__open::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.vb-practice-card__open.is-open {
	color: var(--vb-accent-text, #68192e);
}

.vb-practice-card__open.is-closed {
	color: var(--vb-muted, #6b5b60);
}

/* A field of veterinary medicine reads differently from an animal. */
.vb-chip--field {
	background: var(--vb-base, #fbf7f2);
}

.vb-chip--more {
	font-weight: 700;
}

/* ----- Two offers, two weights ------------------------------------------
   Twelve identical filled buttons meant the one business a reader can book
   with right now looked exactly like the eleven they would have to ring. */
.vb-practice-card__cta--ghost {
	/* The edge comes from .vb-btn--ghost (M-109); an inset shadow on top
	   of it drew the line twice. */
	background: transparent;
	color: var(--vb-accent-text, #68192e);
}


/* ----- Waiting ----------------------------------------------------------
   The list used to dim, which says "wait" without saying what for. */
.vb-search-results.is-loading {
	opacity: 0.7;
}

.vb-card-skeleton {
	min-height: 210px;
	border-radius: var(--vb-radius, 16px);
	background: linear-gradient(
		100deg,
		var(--vb-surface, #f2e7df) 30%,
		var(--vb-base, #fbf7f2) 50%,
		var(--vb-surface, #f2e7df) 70%
	);
	background-size: 300% 100%;
	animation: vb-skeleton 1.3s ease-in-out infinite;
}

@keyframes vb-skeleton {
	from { background-position: 150% 0; }
	to { background-position: -50% 0; }
}

@media ( prefers-reduced-motion: reduce ) {
	.vb-card-skeleton {
		animation: none;
		background: var(--vb-surface, #f2e7df);
	}
}

/* The link to the ranking explanation, beside the count. Its own element
   rather than inside the count's paragraph: that one is aria-live, and a
   link repeated there would be announced on every filter change. */
.vb-search-results__why {
	margin: -0.4rem 0 0.9rem;
	font-size: var(--vb-text-label, 0.9rem);
}

.vb-search-results__why a {
	display: inline-flex;
	align-items: center;
	min-height: var(--vb-tap-min, 24px);
	color: var(--vb-muted, #6b5b60);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.vb-search-results__why a:hover,
.vb-search-results__why a:focus-visible {
	color: var(--vb-accent-text, #68192e);
}

/* The slot bar is a link to the day. Not one link per time: the times are
   computed with the practice's first active service while the widget loads
   them for whichever service the reader picks, so a single time would look
   like a promise the calendar cannot keep. */
.vb-practice-card__slots--link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	color: inherit;
	border-radius: var(--vb-radius-sm, 11px);
}

.vb-practice-card__slots--link:hover,
.vb-practice-card__slots--link:focus-visible {
	background: var(--vb-primary-soft, #f3e2e7);
	color: var(--vb-accent-text, #68192e);
}

/* The cluster tile. Leaflet's own default is white on rgba(110,204,57,0.7) -
   measured 1.52:1, a number nobody can read on a map they are squinting at.
   Stated explicitly so it does not depend on a vendor stylesheet. */
.vb-map-cluster {
	display: grid;
	place-items: center;
	background: var(--vb-primary-darker, #300b17);
	color: #fff;
	border: 2px solid #fff;
	border-radius: var(--vb-radius-pill, 999px);
	font-weight: 700;
	font-size: var(--vb-text-small, 0.85rem);
	box-shadow: 0 2px 8px -2px rgba(48, 39, 43, 0.5 );
}

/* The line that says this page is in claim mode. Without it a business owner
   sees the pet-owner search with a claim button on every card and no reason
   why the two disagree. */
.vb-search-claimlead {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	font-size: var(--vb-text-body, 1rem);
	color: var(--vb-accent-text, #68192e);
	background: var(--vb-primary-soft, #f3e2e7);
	border-radius: var(--vb-radius-sm, 11px);
}

/* ----- The map in the dark scheme -------------------------------------------
   The tiles are OpenStreetMap's own raster and arrive light; a CSS filter
   turns them dark in the browser, so the recipient of the tile request stays
   the OpenStreetMap Foundation named in ADR 0007 - no second tile provider,
   no second processor. The classic "dark OSM" recipe: darken, invert, pull
   the contrast back, rotate the hue so water stays blue-ish, desaturate.
   Leaflet's own chrome (zoom buttons, attribution, popups) gets the page's
   tokens instead of staying a white island. */
:root[data-theme="dark"] .vb-search-map__canvas .leaflet-tile-pane {
	filter: brightness( 0.6 ) invert( 1 ) contrast( 3 ) hue-rotate( 200deg ) saturate( 0.3 ) brightness( 0.7 );
}

:root[data-theme="dark"] .vb-search-map__canvas .leaflet-control-zoom a,
:root[data-theme="dark"] .vb-search-map__canvas .leaflet-control-attribution,
:root[data-theme="dark"] .vb-search-map__canvas .leaflet-popup-content-wrapper,
:root[data-theme="dark"] .vb-search-map__canvas .leaflet-popup-tip {
	background: var(--vb-base, #191418);
	color: var(--vb-ink, #f8f0ea);
}

:root[data-theme="dark"] .vb-search-map__canvas .leaflet-control-zoom a {
	border-color: var(--vb-line, #56434d);
}

/* Leaflet's attribution links keep their own #0078a8, and the site's dark
   link rule leaves .leaflet-container alone on purpose. On the page's dark
   ground that blue measured 3.05:1 - two of the only two findings on the
   search and the profile once the tiles were dark. */
:root[data-theme="dark"] .vb-search-map__canvas .leaflet-control-attribution a {
	color: var(--vb-accent-text, #f2b3c3);
}

/* ---------------------------------------------------------------------------
   Type-ahead for the long filter lists (M-053)
   The native select stays in the form and keeps the value; it is taken out of
   the picture visually and out of the tab order, never out of the DOM - it is
   what submits, and what every other script reads.
--------------------------------------------------------------------------- */

.vb-combo__native {
	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;
}

.vb-combo {
	position: relative;
	display: block;
}

.vb-search-form__field .vb-combo__input {
	width: 100%;
	max-width: 100%;
	/* Dieses Blatt hat keinen border-box-Reset (site.css sagt es an seiner
	   einen Ausnahme selbst), und ein <input type="text"> ist ohne ihn
	   content-box. Gemessen bei 1400px: 214px Feld, 262px Eingabe - 48px
	   ueber die Kante, exakt 34 + 12 + 2. Die Selects daneben entkommen nur,
	   weil das UA-Blatt ihnen border-box gibt; das ist kein Verdienst dieser
	   Datei. Zweites Symptom aus derselben Ursache: das Loeschkreuz sitzt am
	   .vb-combo-Rand und stand damit 48px INNERHALB der sichtbaren Kante. */
	box-sizing: border-box;
	padding: 10px 34px 10px 12px;
	font-size: var(--vb-text-body, 1rem);
	font-weight: 400;
	color: var( --vb-ink, #30272b );
	background: var( --vb-base, #fbf7f2 );
	border: 1px solid var( --vb-field-line, #8c716e );
	border-radius: var(--vb-radius-sm, 11px);
}

.vb-search-form__field .vb-combo__input:hover {
	border-color: var( --vb-primary, #b66a80 );
}

.vb-combo__clear {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	/* The tap target the rest of the page is measured against. */
	min-width: 44px;
	min-height: 44px;
	font-size: 1.1rem;
	line-height: 1;
	color: var( --vb-muted, #6b5b60 );
	cursor: pointer;
	background: none;
	border: 0;
}

.vb-combo__clear:hover {
	color: var( --vb-ink, #30272b );
}

.vb-combo__list {
	position: absolute;
	z-index: 40;
	top: calc( 100% + 4px );
	right: 0;
	left: 0;
	max-height: 16rem;
	margin: 0;
	padding: 4px;
	overflow-y: auto;
	list-style: none;
	background: var( --vb-base, #fbf7f2 );
	border: 1px solid var( --vb-line, #d9c7c1 );
	border-radius: var(--vb-radius-sm, 11px);
	box-shadow: var(--vb-shadow, 0 2px 6px -2px rgba(48, 39, 43, 0.10), 0 18px 40px -26px rgba(48, 39, 43, 0.40));
}

.vb-combo__option {
	padding: 10px 12px;
	font-size: var(--vb-text-body, 1rem);
	font-weight: 400;
	color: var( --vb-ink, #30272b );
	cursor: pointer;
	border-radius: var(--vb-radius-sm, 11px);
}

.vb-combo__option.is-current {
	font-weight: 600;
}

.vb-combo__option.is-active {
	color: var( --vb-base, #fbf7f2 );
	background: var( --vb-primary-dark, #68192e );
}

/* The instruction and the "n options" line: read out, not drawn. Two lines of
   help above eleven controls is help nobody asked for.

   Hidden by clipping alone - no `overflow: hidden` and no `white-space:
   nowrap`. Both are in the usual screen-reader-text recipe, and together they
   make a 1px box whose scrollWidth is the width of the sentence: the design
   audit reported ten "GEKLEMMT +475px" findings for exactly that, on every
   page and viewport. `clip-path` (with the legacy `clip` beside it) stops the
   painting on its own, which is all this needs. */
.vb-combo__hint {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	border: 0;
}

/* ----- Die Merkliste auf der Karte ---------------------------------------
   Die Vorlage setzt ein Herz in die obere rechte Ecke jeder Karte. Es ist
   dieselbe Funktion, die bisher nur auf dem Profil stand - dort findet sie
   niemand, der die Liste durchsieht.

   Ueber dem gedehnten Titel-Link: auf der Startseite spannt sich dieser ueber
   die ganze Karte, und ohne eigene Ebene laege das Herz darunter und waere
   nicht drueckbar. */
.vb-practice-card {
	position: relative;
}

.vb-favorite--compact {
	position: absolute;
	z-index: 2;
	inset: 10px 10px auto auto;
	margin: 0;
}

.vb-favorite--compact .vb-favorite__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--vb-line, #d9c7c1);
	border-radius: var(--vb-radius-pill, 999px);
	background: var(--vb-base, #fbf7f2);
	color: var(--vb-muted, #6b5b60);
	cursor: pointer;
}

.vb-favorite--compact .vb-favorite__btn:hover,
.vb-favorite--compact .vb-favorite__btn:focus-visible {
	border-color: var(--vb-accent-text, #68192e);
	color: var(--vb-accent-text, #68192e);
}

/* Gemerkt: gefuellt und in der Markenfarbe, nicht in Rot - rot heisst auf
   dieser Seite Notfall, und eine Merkliste ist kein Alarm. */
.vb-favorite--compact .vb-favorite__btn.is-active {
	border-color: var(--vb-accent-text, #68192e);
	color: var(--vb-accent-text, #68192e);
}


/* Zwei Pillenreihen, die byteweise gleich aussahen und Verschiedenes sagen:
   .vb-chip ist ein Merkmal des Betriebs (Tierart, Sprache), .__nobooking ist
   ein Zustand ("nimmt keine Online-Termine"). Gemessen waren Grund, Radius
   und Schriftgrad identisch. Der Zustand traegt jetzt die neutrale Flaeche
   und keinen Rahmen - er ist kein Filter, den man anfassen kann. */
.vb-practice-card__nobooking {
	background: var(--vb-neutral-soft, #efe9e6);
	color: var(--vb-muted, #6b5b60);
	border-radius: var(--vb-radius-xs, 6px);
	font-weight: 500;
}

/* Die Ortsmarke vor der Adresse (Vorschaugrafik). */
.vb-practice-card__address {
	display: flex;
	align-items: center;
	gap: 5px;
}

.vb-practice-card__address svg {
	flex: none;
	color: var(--vb-muted, #6b5b60);
}

/* ----- Wo der Leser wohnt (Suchkarte) ------------------------------------
   Eine dritte Marke neben dem Praxis-Pin und dem Standortpunkt, und sie
   muss von beiden unterscheidbar sein: ein Pin heisst "hier ist ein
   Betrieb", der Punkt mit Hof heisst "hier sind Sie gerade". Das Haus in
   einer hellen Scheibe heisst "hier wohnen Sie" - dieselbe Lesart, die eine
   Landkarte seit jeher benutzt. */
.vb-maphome {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 30px;
	block-size: 30px;
	border-radius: var(--vb-radius-pill, 999px);
	background: var(--vb-base, #fbf7f2);
	border: 2px solid var(--vb-accent-text, #68192e);
	color: var(--vb-accent-text, #68192e);
	box-shadow: 0 2px 8px -2px rgba(48, 39, 43, 0.45 );
}

.vb-maphome svg {
	inline-size: 16px;
	block-size: 16px;
}

/* Adresse und Umkreis mit sichtbarer Beschriftung (Nr. 28). Die Reihe
   richtet sich an der Unterkante aus, damit der Standort-Knopf neben den
   Feldern steht und nicht neben ihren Beschriftungen. */
.vb-search-loc {
	align-items: flex-end;
}

.vb-search-loc__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.vb-search-loc__field--addr {
	flex: 1 1 200px;
}

.vb-search-loc__field .vb-search-loc__addr {
	flex: none;
	inline-size: 100%;
	box-sizing: border-box;
}

.vb-search-loc__label {
	font-size: var(--vb-text-label, 0.9rem);
	font-weight: 600;
	color: var(--vb-ink, #30272b);
}

.vb-search-loc__addr,
.vb-search-loc__radius {
	box-sizing: border-box;
	min-height: var(--vb-tap-primary, 44px);
}

/* WebKit rechnet min-height auf einem nativen select nicht mit (vgl. die
   Buchungsfelder, A8) - der Pfeil kommt als Bild zurueck. */
.vb-search-loc__radius {
	appearance: none;
	-webkit-appearance: none;
	padding-inline-end: 2.2rem;
	background: var(--vb-base, #fbf7f2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2351635a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E") no-repeat right 0.75rem center / 16px 16px;
	color: var(--vb-ink, #30272b);
}

:root[data-theme="dark"] .vb-search-loc__radius {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a3b1b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
}

/* Die Karte sagt, wenn das Land des Besuchers noch keine Betriebe hat
   (Inhaber 23.09.2026). */
.vb-map-country {
	margin: 0 0 8px;
	padding: 8px 12px;
	border-radius: var(--vb-radius-sm, 11px);
	background: var(--vb-surface, #f2e7df);
	color: var(--vb-muted, #6b5b60);
	font-size: var(--vb-text-label, 0.9rem);
}

/* ==========================================================================
   „Betreuung finden" nach der Vorschaugrafik (Inhaber, 23.09.2026)
   --------------------------------------------------------------------------
   Kopf mit Suchleiste (Was / Wo / Welches Tier), links die Filterspalte
   („Ergebnisse filtern", einklappbare Gruppen), rechts die Leiste mit Zahl,
   Reihenfolge und „Liste | Karte", darunter breite Ergebniskarten. Die Karte
   ist eine eigene Ansicht, keine dritte Spalte mehr (Entscheidung 1).
   Unter 80rem ist die Filterspalte ein Blatt hinter dem Knopf „Filter".
   Plan und Entscheidungen: docs/SUCHE-REDESIGN.md.
   ========================================================================== */

.vb-find {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	grid-template-areas:
		"head"
		"main";
	gap: 20px;
	/* Die Farbe der Betriebsart, wie auf dem Profil: nur in kleinen Zeichen
	   und im Bildgrund ohne Foto, nie als Kartenfläche (§72). */
	--vb-cat: var(--vb-accent-text, #68192e);
	--vb-cat-soft: var(--vb-primary-soft, #f3e2e7);
}

/* Die Seite traegt ihren Titel im Suchkopf; der leere Kopf des Themes geht. */
.vb-has-search .vb-page-head {
	display: none;
}

/* Kopf und Spalte stehen in EINEM Formular, das selbst keine Box ist: so
   greifen beide in das Raster der Seite. */
.vb-find > .vb-search-form {
	display: contents;
}

.vb-find__head {
	grid-area: head;
}

.vb-find__main {
	grid-area: main;
	min-width: 0;
}

/* ----- Der Kopf ----------------------------------------------------------- */
.vb-find__head {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp( 18px, 1rem + 1vw, 30px ) clamp( 16px, 0.75rem + 1.5vw, 34px );
	background: var(--vb-surface, #f2e7df);
	border-radius: var(--vb-radius-lg, 22px);
}

.vb-find__headtext {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.vb-find__crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--vb-text-small, 0.85rem);
	color: var(--vb-muted, #6b5b60);
}

.vb-find__crumbs li + li::before {
	content: "›";
	margin-inline-end: 4px;
	color: var(--vb-muted, #6b5b60);
}

.vb-find__crumbs a {
	color: var(--vb-muted, #6b5b60);
	text-decoration: none;
}

.vb-find__crumbs a:hover {
	color: var(--vb-accent-text, #68192e);
	text-decoration: underline;
}

.vb-find__crumbs [aria-current] {
	font-weight: 600;
	color: var(--vb-ink, #30272b);
}

.vb-find__title {
	margin: 0;
	font-family: var(--vb-display);
	font-size: clamp( 1.75rem, 1.3rem + 1.4vw, 2.6rem );
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-wrap: balance;
	color: var(--vb-ink, #30272b);
}

.vb-find__lead {
	margin: 0;
	max-width: 46ch;
	font-size: var(--vb-text-lead, 1.0625rem);
	color: var(--vb-muted, #6b5b60);
}

/* Das Bild rechts, zur Mitte hin ausgeblendet, damit Leiste und Text davor
   lesbar bleiben. Erst ab 48rem: auf dem Telefon zeigt die Vorlage keins. */
.vb-find__visual {
	display: none;
}

@media ( min-width: 48rem ) {
	.vb-find__visual {
		position: absolute;
		z-index: 0;
		inset: 0 0 0 auto;
		display: block;
		width: 50%;
		-webkit-mask-image: linear-gradient( 90deg, transparent 0, #000 38% );
		mask-image: linear-gradient( 90deg, transparent 0, #000 38% );
	}

	.vb-find__visual .vb-photo,
	.vb-find__visual .vb-photo--empty {
		width: 100%;
		height: 100%;
		margin: 0;
		aspect-ratio: auto !important;
		border-radius: 0;
	}

	.vb-find__visual img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* Die Suchleiste: eine weisse Flaeche mit drei Feldern und dem Knopf. */
.vb-find__bar {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: 8px;
	max-width: 860px;
	background: var(--vb-base, #fbf7f2);
	border: 1px solid var(--vb-line, #d9c7c1);
	border-radius: var(--vb-radius, 16px);
	box-shadow: var(--vb-shadow, 0 2px 6px -2px rgba(48, 39, 43, 0.10), 0 18px 40px -26px rgba(48, 39, 43, 0.40));
}

.vb-find__field {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	padding: 10px 14px;
	border-bottom: 1px solid var(--vb-line, #d9c7c1);
}

.vb-find__label {
	font-size: var(--vb-text-small, 0.85rem);
	font-weight: 700;
	color: var(--vb-ink, #30272b);
}

.vb-find__control {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 32px;
	color: var(--vb-muted, #6b5b60);
}

.vb-find__control > .vb-ic {
	flex: none;
	color: var(--vb-accent-text, #68192e);
}

/* Die Felder in der Leiste tragen keinen eigenen Rahmen: die Leiste ist das
   Feld. 16px, sonst zoomt iOS beim Antippen hinein. */
.vb-find .vb-find__control input,
.vb-find .vb-find__control select {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	min-height: 32px;
	margin: 0;
	padding: 2px 26px 2px 0;
	font: inherit;
	font-size: var(--vb-text-body, 1rem);
	color: var(--vb-ink, #30272b);
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
}

.vb-find .vb-find__control select {
	background: transparent url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2351635a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E" ) no-repeat right 2px center / 16px 16px;
	cursor: pointer;
}

.vb-find .vb-find__control input:focus,
.vb-find .vb-find__control select:focus {
	/* Der Ring sitzt auf dem ganzen Feld (:focus-within unten); transparent,
	   nicht none, damit er in erzwungenen Farben zurueckkommt. */
	outline: 2px solid transparent;
}

.vb-find__field:focus-within {
	box-shadow: inset 0 0 0 2px var(--vb-focus-color, #205f9c);
	border-radius: var(--vb-radius-sm, 11px);
}

.vb-find__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 10px;
	min-height: 48px;
	white-space: nowrap;
}

/* „Was suchen Sie?": mehrere Betriebsarten, eine Häkchenliste im Aufklappfeld. */
.vb-typepick {
	position: static;
}

.vb-typepick > summary {
	list-style: none;
	cursor: pointer;
}

.vb-typepick > summary::-webkit-details-marker {
	display: none;
}

.vb-typepick__value {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--vb-text-body, 1rem);
	color: var(--vb-ink, #30272b);
}

.vb-typepick__chev {
	transition: transform 0.15s ease;
}

.vb-typepick[open] .vb-typepick__chev {
	transform: rotate( 180deg );
}

.vb-typepick__list {
	position: absolute;
	z-index: 30;
	top: calc( 100% + 6px );
	left: 0;
	min-width: min( 320px, calc( 100vw - 32px ) );
	margin: 0;
	padding: 6px;
	background: var(--vb-base, #fbf7f2);
	border: 1px solid var(--vb-line, #d9c7c1);
	border-radius: var(--vb-radius, 16px);
	box-shadow: var(--vb-shadow, 0 2px 6px -2px rgba(48, 39, 43, 0.10), 0 18px 40px -26px rgba(48, 39, 43, 0.40));
}

.vb-typepick__opt {
	display: grid;
	grid-template-columns: auto auto minmax( 0, 1fr ) auto;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 4px 10px;
	border-radius: var(--vb-radius-sm, 11px);
	color: var(--vb-ink, #30272b);
	cursor: pointer;
}

.vb-typepick__opt:hover {
	background: var(--vb-surface, #f2e7df);
}

.vb-typepick__opt input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--vb-accent-text, #68192e);
}

.vb-typepick__icon {
	display: inline-flex;
	color: var(--vb-accent-text, #68192e);
}

.vb-typepick__n,
.vb-fchoice__n {
	font-size: var(--vb-text-small, 0.85rem);
	color: var(--vb-muted, #6b5b60);
	font-variant-numeric: tabular-nums;
}

/* Unter der Leiste: der eigene Standort und der Notfallweg. */
.vb-find__aside {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 22px;
	margin-top: 4px;
}

.vb-find__near,
.vb-find__urgent {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-size: var(--vb-text-label, 0.9rem);
	font-weight: 600;
	text-decoration: none;
}

.vb-find__near {
	color: var(--vb-ink, #30272b);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.vb-find__near:hover,
.vb-find__urgent:hover {
	text-decoration: underline;
}

.vb-find__urgent {
	color: var(--vb-danger-text-strong, #b52216);
}

.vb-find__disc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--vb-radius-pill, 999px);
	background: var(--vb-primary-soft, #f3e2e7);
	color: var(--vb-accent-text, #68192e);
}

.vb-find__urgent .vb-find__disc {
	background: rgba( 220, 38, 38, 0.12 );
	color: var(--vb-danger-text-strong, #b52216);
}

.vb-find__aside .vb-search-loc__where {
	flex-basis: auto;
}

/* Die leere Statuszeile unter „In meiner Naehe“ (#201): das Skript haengt
   sie an, und als leere Zeile der umbrechenden Leiste brachte sie deren
   Zeilenabstand mit - 4px, um die auf dem Telefon alles darunter nach dem
   ersten Bild rutschte. Leer steht sie dort ausserhalb des Flusses, bleibt
   aber eine Live-Region (kein display: none, sonst wird die erste Meldung
   nicht angesagt). Nur wo die Leiste faltet: auf dem Desktop bleibt das
   Bild, wie es war. */
@media all and (display-mode: standalone), ( max-width: 39.99rem ) {
	.vb-find__aside .vb-search-loc__msg:empty {
		position: absolute;
	}
}

/* Ab 48rem liegt die Leiste waagerecht: Felder nebeneinander, getrennt
   durch eine Linie, der Knopf rechts. */
@media ( min-width: 48rem ) {
	.vb-find__bar {
		flex-direction: row;
		align-items: stretch;
	}

	.vb-find__field {
		flex: 1 1 0;
		border-bottom: 0;
		border-right: 1px solid var(--vb-line, #d9c7c1);
	}

	.vb-find__field.vb-search-form__q {
		flex-grow: 1.3;
	}

	.vb-find__submit {
		align-self: center;
		margin: 8px;
	}
}

/* ----- Die Leiste über den Ergebnissen ------------------------------------ */
.vb-find__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin: 0 0 12px;
}

.vb-find__countwrap {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 12px;
	flex: 1 1 auto;
	min-width: 0;
}

.vb-find .vb-search-results__count {
	margin: 0;
	font-family: var(--vb-display);
	font-size: clamp( 1.1rem, 1rem + 0.35vw, 1.3rem );
	font-weight: 600;
	color: var(--vb-ink, #30272b);
}

.vb-find .vb-search-results__why {
	margin: 0;
	font-size: var(--vb-text-small, 0.85rem);
}


.vb-find__sort {
	flex-direction: row !important;
	align-items: center;
	gap: 8px !important;
	margin: 0;
	white-space: nowrap;
}

.vb-find__sort select {
	min-height: 40px;
	padding-block: 6px;
}

.vb-find__view {
	display: inline-flex;
	padding: 3px;
	background: var(--vb-surface, #f2e7df);
	border: 1px solid var(--vb-line, #d9c7c1);
	border-radius: var(--vb-radius-sm, 11px);
}

.vb-find__viewbtn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 38px;
	padding: 0 14px;
	font: inherit;
	font-size: var(--vb-text-label, 0.9rem);
	font-weight: 600;
	color: var(--vb-muted, #6b5b60);
	background: transparent;
	border: 0;
	border-radius: var(--vb-radius-xs, 6px);
	cursor: pointer;
}

/* Gewählt: gefüllt und in der Markenfarbe - nicht nur eine andere Farbe
   (§95); aria-pressed sagt es dem Screenreader. */
.vb-find__viewbtn[aria-pressed="true"] {
	color: #fff;
	background: var(--vb-primary-dark, #68192e);
}

.vb-find__filterbtn {
	gap: 8px;
}

/* Die aktiven Filter unter der Leiste: ruhig, eine Zeile (§21). */
.vb-find .vb-search-active {
	margin: 0 0 14px;
}

.vb-find .vb-search-active__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

.vb-find .vb-chip--active {
	background: var(--vb-surface, #f2e7df);
	border-color: var(--vb-line, #d9c7c1);
}

/* ----- Die Filterspalte ---------------------------------------------------- */
.vb-find__filters {
	/* Die alte Faltregel (M-010) und die Zeilenregeln greifen hier nicht:
	   die Spalte ist eine Spalte. */
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
	box-sizing: border-box;
	padding: 18px;
	background: var(--vb-base, #fbf7f2);
	border: 1px solid var(--vb-line, #d9c7c1);
	border-radius: var(--vb-radius-lg, 22px);
}

.vb-find__filtershead {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--vb-line, #d9c7c1);
}

.vb-find__filterstitle {
	flex: 1 1 auto;
	margin: 0;
	font-family: var(--vb-display);
	font-size: 1.15rem;
	color: var(--vb-ink, #30272b);
}

.vb-find__reset {
	font-size: var(--vb-text-small, 0.85rem);
	font-weight: 600;
	color: var(--vb-accent-text, #68192e);
}

.vb-find__close {
	display: none;
}

.vb-fgroup {
	border-bottom: 1px solid var(--vb-line, #d9c7c1);
}

.vb-fgroup > summary {
	list-style: none;
}

.vb-fgroup > summary::-webkit-details-marker {
	display: none;
}

.vb-fgroup__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 48px;
	font-weight: 700;
	color: var(--vb-ink, #30272b);
	cursor: pointer;
}

.vb-fgroup__chev {
	transition: transform 0.15s ease;
}

.vb-fgroup[open] .vb-fgroup__chev {
	transform: rotate( 180deg );
}

.vb-fgroup__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0 0 14px;
}

/* Die Felder der Spalte stehen untereinander, ganze Breite. */
.vb-find__filters .vb-search-form__field {
	flex: 0 0 auto;
	width: 100%;
}

.vb-fchoices {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	border: 0;
}

.vb-fchoice {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr ) auto;
	align-items: center;
	gap: 10px;
	min-height: 40px;
	font-size: var(--vb-text-label, 0.9rem);
	font-weight: 500;
	color: var(--vb-ink, #30272b);
	cursor: pointer;
}

/* Die Häkchen der Spalte: Kästchen mit Wort, keine Pillen - die Pillenform
   der alten Filterleiste gehört nicht in eine Liste. */
.vb-find__filters .vb-search-form__checkbox {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	padding: 0;
	white-space: normal;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.vb-find__filters .vb-search-form__checkbox:has( input:checked ) {
	background: transparent;
	color: var(--vb-ink, #30272b);
}

.vb-fchoice input,
.vb-find__filters .vb-search-form__checkbox input {
	width: 20px;
	height: 20px;
	min-width: 20px;
	min-height: 20px;
	margin: 0;
	accent-color: var(--vb-accent-text, #68192e);
}

.vb-fchoice .vb-stars {
	letter-spacing: 1px;
}

.vb-find__filters .vb-search-form__badges legend {
	float: none;
	width: auto;
}

.vb-find__sheetfoot {
	display: none;
}

/* ----- Ab 80rem: Spalte links, Ergebnisse rechts ------------------------- */
@media ( min-width: 80rem ) {
	.vb-find {
		grid-template-columns: 272px minmax( 0, 1fr );
		grid-template-areas:
			"head head"
			"filters main";
		column-gap: 28px;
		row-gap: 24px;
		align-items: start;
	}

	.vb-find__filters {
		grid-area: filters;
	}

	.vb-find__filterbtn {
		display: none !important;
	}
}

/* ----- Unter 80rem: die Spalte ist ein Blatt ------------------------------ */
@media ( max-width: 79.99rem ) {
	.vb-find .vb-search-form:not( .is-open ) .vb-find__filters {
		display: none;
	}

	.vb-find__filterbtn {
		width: auto;
		padding: 0 14px;
	}

	/* Über dem Seitenkopf (100) und der App-Leiste (1000): darunter lagen
	   Schließen-Knopf und „Ergebnisse anzeigen“ verdeckt, und wer das Blatt
	   offen fand, kam nicht mehr heraus (Inhaber, iPhone, 23.09.2026). Unter
	   dem Einwilligungsdialog (1002) und dem Hilfefeld. */
	.vb-find .vb-search-form.is-open .vb-find__filters {
		position: fixed;
		z-index: 1001;
		inset: 0 0 0 auto;
		width: min( 440px, 100% );
		padding: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		border: 0;
		border-radius: 0;
		box-shadow: -18px 0 50px -20px rgba(48, 39, 43, 0.45 );
	}

	.vb-find .vb-search-form.is-open .vb-find__filtershead {
		position: sticky;
		top: 0;
		z-index: 1;
		padding: 14px 18px;
		background: var(--vb-base, #fbf7f2);
	}

	.vb-find .vb-search-form.is-open .vb-fgroup {
		margin: 0 18px;
	}

	.vb-find__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		color: var(--vb-ink, #30272b);
		background: transparent;
		border: 0;
		border-radius: var(--vb-radius-pill, 999px);
		cursor: pointer;
	}

	.vb-find .vb-search-form.is-open .vb-find__sheetfoot {
		position: sticky;
		bottom: 0;
		display: block;
		margin-top: auto;
		padding: 12px 18px calc( 12px + env( safe-area-inset-bottom ) );
		background: var(--vb-base, #fbf7f2);
		border-top: 1px solid var(--vb-line, #d9c7c1);
	}

	.vb-find__apply {
		width: 100%;
		min-height: 48px;
	}

	/* Der abgedunkelte Grund hinter dem Blatt. */
	.vb-find .vb-search-form.is-open::before {
		content: "";
		position: fixed;
		z-index: 1001;
		inset: 0;
		background: rgba( 25, 20, 24, 0.42 );
	}

	/* Der Grund hinter dem Blatt scrollt nicht mit (kein verschachteltes
	   Scrollen, §51). */
	html.vb-sheet-open,
	html.vb-sheet-open body {
		overflow: hidden;
	}
}

/* ----- Die Ergebnisse: breite Karten, eine je Zeile ----------------------- */
.vb-find .vb-search-body {
	display: block;
}

.vb-find .vb-search-results {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.vb-find .vb-search-results .vb-practice-card {
	animation: none;
}

.vb-practice-card[data-type="vet"]      { --vb-cat: #68192e; --vb-cat-soft: #f3e2e7; }
.vb-practice-card[data-type="groomer"]  { --vb-cat: #68192e; --vb-cat-soft: #f2e7df; }
.vb-practice-card[data-type="walker"]   { --vb-cat: #68192e; --vb-cat-soft: #f5e6da; }
.vb-practice-card[data-type="sitter"]   { --vb-cat: #68192e; --vb-cat-soft: #efe6ec; }
.vb-practice-card[data-type="boarding"] { --vb-cat: #68192e; --vb-cat-soft: #f2ebe3; }
.vb-practice-card[data-type="therapy"]  { --vb-cat: #68192e; --vb-cat-soft: #f3e2e7; }
.vb-practice-card[data-type="trainer"]  { --vb-cat: #68192e; --vb-cat-soft: #f2e7df; }

:root[data-theme="dark"] .vb-practice-card[data-type="vet"]      { --vb-cat: #d9a9b7; --vb-cat-soft: #432530; }
:root[data-theme="dark"] .vb-practice-card[data-type="groomer"]  { --vb-cat: #d9a9b7; --vb-cat-soft: #3a2c26; }
:root[data-theme="dark"] .vb-practice-card[data-type="walker"]   { --vb-cat: #d9a9b7; --vb-cat-soft: #3d2d25; }
:root[data-theme="dark"] .vb-practice-card[data-type="sitter"]   { --vb-cat: #d9a9b7; --vb-cat-soft: #3a2a36; }
:root[data-theme="dark"] .vb-practice-card[data-type="boarding"] { --vb-cat: #d9a9b7; --vb-cat-soft: #3a3026; }
:root[data-theme="dark"] .vb-practice-card[data-type="therapy"]  { --vb-cat: #d9a9b7; --vb-cat-soft: #432530; }
:root[data-theme="dark"] .vb-practice-card[data-type="trainer"]  { --vb-cat: #d9a9b7; --vb-cat-soft: #3a2c26; }

/* The dark tones are light: they carry dark text, as on the profile
   (profile.css, "Dark mode turns the relationship round"). White on them was
   1.5-2.7:1 on every kind of business (axe color-contrast, EVIDENCE-DEBT #2).
   Not in the calm view: there --vb-cat is the deep green again, which needs
   the white text it keeps. */
:root[data-theme="dark"]:not([data-focus="reduced"]) .vb-practice-card[data-type] {
	--vb-cat-ink: var(--vb-surface, #261e23);
}

/* Die Ruhige Ansicht hält eine Akzentfarbe für die ganze Seite (Teil C §38). */
:root[data-focus="reduced"] .vb-practice-card[data-type] {
	--vb-cat: var(--vb-accent-text, #68192e);
	--vb-cat-soft: var(--vb-primary-soft, #f3e2e7);
}

.vb-find .vb-practice-card {
	display: grid;
	grid-template-columns: 104px minmax( 0, 1fr );
	grid-template-areas:
		"media body"
		"actions actions";
	gap: 12px 14px;
	padding: 14px;
	border: 1px solid var(--vb-line, #d9c7c1);
	border-radius: var(--vb-radius, 16px);
	box-shadow: 0 1px 2px rgba(48, 39, 43, 0.06 );
}

.vb-find .vb-practice-card:hover {
	border-color: var(--vb-cat, #68192e);
	box-shadow: 0 1px 2px rgba(48, 39, 43, 0.06 );
}

/* Nur auf der Suchseite. Startseite und Landingpages ziehen dieselbe
   Kartenvorlage in schmale Raster mit eigenem Bildband; dort stand der
   Block als 330px-Quadrat über dem Kartenkopf (Inhaber, iPhone, 23.09.2026). */
.vb-practice-card__media {
	display: none;
}

.vb-find .vb-practice-card__media {
	display: block;
}

.vb-practice-card__media {
	position: relative;
	grid-area: media;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border-radius: var(--vb-radius-sm, 11px);
	background: var(--vb-cat-soft, #f3e2e7);
}

.vb-practice-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vb-practice-card__glyph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--vb-cat, #68192e);
}

.vb-practice-card__today {
	position: absolute;
	inset: 6px auto auto 6px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	max-width: calc( 100% - 12px );
	padding: 3px 8px;
	font-size: var(--vb-text-caption, 0.78rem);
	font-weight: 700;
	color: var(--vb-accent-text, #68192e);
	background: var(--vb-base, #fbf7f2);
	border-radius: var(--vb-radius-pill, 999px);
	box-shadow: 0 1px 4px rgba(48, 39, 43, 0.18 );
}

.vb-practice-card__body {
	grid-area: body;
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
	padding-inline-end: 34px;
}

.vb-find .vb-practice-card__avatar {
	display: none;
}

.vb-find .vb-practice-card__title {
	font-size: clamp( 1.05rem, 1rem + 0.3vw, 1.25rem );
}

.vb-practice-card__where {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 8px;
}

.vb-practice-card__where .vb-practice-card__distance {
	font-weight: 700;
}

.vb-practice-card__where > * + *::before {
	content: "·";
	margin-inline-end: 8px;
	color: var(--vb-muted, #6b5b60);
	font-weight: 400;
}

.vb-find .vb-practice-card__type {
	color: var(--vb-cat, #68192e);
}

.vb-practice-card__tagline {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	font-size: var(--vb-text-small, 0.85rem);
	color: var(--vb-muted, #6b5b60);
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.vb-find .vb-practice-card__status {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
}

.vb-find .vb-practice-card__nobooking {
	padding: 0;
	background: none;
	font-size: var(--vb-text-caption, 0.78rem);
	font-weight: 500;
}

.vb-practice-card__actions {
	grid-area: actions;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.vb-find .vb-practice-card__actions .vb-favorite--compact {
	inset: 10px 10px auto auto;
}

.vb-practice-card__actions .vb-btn {
	flex: 1 1 140px;
	justify-content: center;
	min-height: 44px;
	margin: 0;
}

.vb-practice-card__actions .vb-practice-card__phone {
	flex: 1 1 100%;
	margin: 0;
}

/* Ab 48rem: Bild links, Text in der Mitte, die Aktionen rechts gestapelt -
   so zeigt es die Vorlage. */
@media ( min-width: 48rem ) {
	.vb-find .vb-practice-card {
		grid-template-columns: 176px minmax( 0, 1fr ) 172px;
		grid-template-areas: "media body actions";
		gap: 18px;
		padding: 16px;
	}

	.vb-practice-card__media {
		aspect-ratio: auto;
		min-height: 150px;
		height: 100%;
	}

	.vb-practice-card__actions {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: flex-end;
		padding-top: 44px;
	}

	.vb-practice-card__actions .vb-btn {
		flex: 0 0 auto;
	}

	.vb-practice-card__actions .vb-practice-card__phone {
		flex: 0 0 auto;
		justify-content: center;
		text-align: center;
	}
}

/* ----- Liste oder Karte ---------------------------------------------------
   Mit Skript entscheidet der Umschalter, welche der beiden gezeichnet wird;
   ohne steht die Karte unter der Liste wie bisher. */
.vb-find--views:not( .is-map ) .vb-search-map {
	display: none;
}

.vb-find--views.is-map .vb-search-list {
	display: none;
}

.vb-find .vb-search-map {
	margin: 0;
}

.vb-find--views.is-map .vb-search-map__canvas {
	height: calc( 100vh - var(--vb-header-h, 63px) - 140px );
	min-height: 420px;
	max-height: 860px;
}

/* ----- Telefon und App ------------------------------------------------------ */
@media all and (display-mode: standalone), ( max-width: 39.99rem ) {
	.vb-find__head {
		padding: 16px;
	}

	.vb-find__lead {
		display: none;
	}

	.vb-find__crumbs {
		display: none;
	}

	.vb-find__toolbar {
		gap: 8px;
	}

	.vb-find__countwrap {
		flex-basis: 100%;
	}

	.vb-find__sort > span {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip-path: inset( 50% );
		white-space: nowrap;
	}

	.vb-find__viewbtn {
		padding: 0 10px;
	}
}

/* Die Ruhige Ansicht: weniger auf der Karte, das Bild kleiner (§63, §65). */
:root[data-focus="reduced"] .vb-find__visual,
:root[data-focus="reduced"] .vb-find__lead,
:root[data-focus="reduced"] .vb-practice-card__tagline {
	display: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.vb-typepick__chev,
	.vb-fgroup__chev {
		transition: none;
	}
}

/* „In diesem Bereich suchen" über der Karte (Vorschaugrafik). */
.vb-find .vb-search-map {
	position: relative;
}

.vb-map-area {
	position: absolute;
	z-index: 500;
	top: 12px;
	left: 50%;
	transform: translateX( -50% );
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 16px;
	font: inherit;
	font-size: var(--vb-text-label, 0.9rem);
	font-weight: 700;
	color: var(--vb-accent-text, #68192e);
	background: var(--vb-base, #fbf7f2);
	border: 1px solid var(--vb-line, #d9c7c1);
	border-radius: var(--vb-radius-pill, 999px);
	box-shadow: var(--vb-shadow, 0 2px 6px -2px rgba(48, 39, 43, 0.10), 0 18px 40px -26px rgba(48, 39, 43, 0.40));
	cursor: pointer;
}

/* ----- Nachschliff nach der ersten Messung (23.09.2026) --------------------
   Gemessen live: auf dem Tablet quetschte die alte Regel .vb-search-form__q
   { flex-basis: 100% } die drei Felder der Leiste auf je ~30px, und der
   Knopf nahm mit width: 100% (alte Faltregel unter 80rem) die ganze Zeile.
   Auf dem Telefon begann das erste Ergebnis bei y=734; „Details anzeigen“
   brach auf dem Desktop um; „Ergebnisse filtern“ lief über zwei Zeilen. */
.vb-find .vb-find__bar .vb-find__field {
	flex-basis: auto;
}

@media ( min-width: 48rem ) {
	.vb-find .vb-find__bar .vb-find__field {
		flex: 1 1 0;
	}

	.vb-find .vb-find__bar .vb-find__field--what,
	.vb-find .vb-find__bar .vb-search-form__q {
		flex-grow: 1.25;
	}

	.vb-find .vb-find__submit {
		flex: 0 0 auto;
		width: auto;
	}
}

.vb-find__filterstitle {
	font-size: var(--vb-text-lead, 1.0625rem);
	white-space: nowrap;
}

/* Passt „Zurücksetzen“ nicht mehr daneben, rückt es in die nächste Zeile,
   statt über den Rand der Spalte zu laufen. */
.vb-find__filtershead {
	flex-wrap: wrap;
}

.vb-practice-card__actions .vb-btn {
	padding-inline: 14px;
	font-size: var(--vb-text-label, 0.9rem);
	white-space: nowrap;
}

@media ( min-width: 48rem ) {
	.vb-find .vb-practice-card {
		grid-template-columns: 168px minmax( 0, 1fr ) 184px;
	}
}

/* Ohne Foto ein ruhiger Grund: das Zeichen sagt die Art, der Grund soll
   nicht lauter sein als eine Karte mit Bild (§106). */
.vb-practice-card__media:has( .vb-practice-card__glyph ) {
	background: color-mix( in srgb, var(--vb-cat-soft, #f3e2e7) 55%, var(--vb-base, #fbf7f2) );
}

.vb-practice-card__glyph {
	opacity: 0.85;
}

/* Die Zahl und „Warum diese Reihenfolge?“ untereinander - so passt die
   Reihenfolge mit „Liste | Karte“ in dieselbe Zeile. */
.vb-find__countwrap {
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

/* Kurz- und Langform der beiden Wege unter der Leiste. */
.vb-find__short {
	display: none;
}

/* Die Zusammenfassung der Suche, nur wo die Leiste faltet. */
.vb-find__summary {
	display: none;
}

@media all and (display-mode: standalone), ( max-width: 39.99rem ) {
	/* Hidden from sight only, as on the home page (.vb-herosearch__long):
	   the short form is aria-hidden, so with display:none the link had no
	   name at all for a screen reader (axe link-name, EVIDENCE-DEBT #1). */
	.vb-find__long {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset( 50% );
		white-space: nowrap;
	}

	.vb-find__short {
		display: inline;
	}

	.vb-find__aside {
		justify-content: space-between;
		gap: 4px 12px;
	}

	.vb-find__head--foldable .vb-find__summary {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		min-height: 48px;
		margin-top: 6px;
		padding: 0 14px;
		font: inherit;
		font-size: var(--vb-text-body, 1rem);
		text-align: start;
		color: var(--vb-ink, #30272b);
		background: var(--vb-base, #fbf7f2);
		border: 1px solid var(--vb-line, #d9c7c1);
		border-radius: var(--vb-radius, 16px);
		box-shadow: 0 1px 2px rgba(48, 39, 43, 0.06 );
		cursor: pointer;
	}

	.vb-find__summary > .vb-ic:first-child {
		color: var(--vb-accent-text, #68192e);
	}

	.vb-find__summarytext {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.vb-find__summarychev {
		transition: transform 0.15s ease;
	}

	.vb-find__head--foldable.is-open .vb-find__summarychev {
		transform: rotate( 180deg );
	}

	.vb-find__head--foldable:not( .is-open ) .vb-find__bar {
		display: none;
	}

	.vb-find__head {
		padding: 14px 16px 10px;
	}

	.vb-find__title {
		font-size: 1.6rem;
	}

	/* Zwei Zeilen: die Zahl und „Liste | Karte“, darunter Filter und
	   Reihenfolge (PWA-Grafik: „Filter · Sortieren · Karte“). */
	.vb-find__toolbar {
		display: grid;
		grid-template-columns: auto minmax( 0, 1fr ) auto;
		grid-template-areas:
			"count count view"
			"filter sort sort";
		align-items: center;
	}

	.vb-find__countwrap {
		grid-area: count;
	}

	.vb-find__view {
		grid-area: view;
	}

	.vb-find__filterbtn {
		grid-area: filter;
	}

	.vb-find__sort {
		grid-area: sort;
		min-width: 0;
	}

	.vb-find__sort select {
		width: 100%;
		min-width: 0;
	}

	.vb-find__viewbtn {
		padding: 0 9px;
	}

	.vb-find .vb-search-results__why {
		font-size: var(--vb-text-caption, 0.78rem);
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.vb-find__summarychev {
		transition: none;
	}
}

/* Die Kartenansicht ist keine Spalte mehr: die alte Split-Regel (ab 80rem
   klebte die Karte unter dem Kopf) liess sie in der eigenen Ansicht erst
   bei y=712 beginnen, gemessen auf 1440x900. */
.vb-find .vb-search-body > .vb-search-map {
	position: static;
	order: 0;
	margin: 0;
}

/* ----- Die Wege im Suchkopf auf eigenem Grund (23.09.2026) -----------------
   Wie auf der Startseite: auf dem Tablet (820px) stand "Notfall? Jetzt Hilfe
   finden" auf dem Foto des Kopfes, gemessen 3,9:1 hell und 2,0:1 dunkel
   (scripts/text-over-image.mjs). Dieselbe Glasflaeche wie dort - und nur,
   wo das Foto des Kopfes gezeigt wird (.vb-find__visual ab 48rem, nicht in
   der Ruhigen Ansicht); sonst stuende eine leere Flaeche da. */
@media (min-width: 48rem) {
	.vb-find__aside .vb-find__near,
	.vb-find__aside .vb-find__urgent {
		padding: 0 14px 0 8px;
		border-radius: var(--vb-radius-pill, 999px);
		background: color-mix( in srgb, var(--vb-base, #fbf7f2) 86%, transparent );
		-webkit-backdrop-filter: saturate( 160% ) blur( 8px );
		backdrop-filter: saturate( 160% ) blur( 8px );
	}
}

@media (min-width: 48rem) {
	:root[data-focus="reduced"] .vb-find__aside .vb-find__near,
	:root[data-focus="reduced"] .vb-find__aside .vb-find__urgent {
		padding: 0;
		border-radius: 0;
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* ----- ?vb_near=1: die Liste wartet auf den Standort (#192) ----------------
   Mit dem Wunsch "in meiner Naehe" stand zuerst die Tagesreihenfolge da und
   wurde eine Sekunde spaeter durch die Liste nach Entfernung ersetzt: die
   oberste Karte und ihr Foto sprangen um (Inhaber, 03.10.2026). Der Server
   markiert den Suchblock, diese Regeln halten die Ergebnisse (Leiste,
   Filterchips, Liste) ab dem ersten Bild verborgen - visibility statt
   display, damit sie ihren Platz behalten und beim Erscheinen nichts
   verschieben -, und eine ruhige Zeile steht ueber ihnen. search-filters.js
   nimmt die Markierung weg; ohne JavaScript hebt die <noscript>-Regel im
   Kopf sie sofort auf. */
.vb-near-status {
	display: none;
}

/* Der ganze Ergebnisblock unsichtbar, nur die Zeile sichtbar (visibility
   erbt, das Kind darf sie zuruecknehmen). Unsichtbare Flaechen zaehlen
   nicht als Verschiebung: was der Standort unter der Suchleiste ergaenzt
   (wo, "Standort entfernen"), darf den Block auf dem Telefon nach unten
   ruecken, solange er wartet - als nur seine Kinder verborgen waren,
   zaehlte der Block selbst, gemessen CLS 0,05. */
[data-vb-near-wait] .vb-find__main {
	position: relative;
	min-height: 4rem;
	visibility: hidden;
}

[data-vb-near-wait] .vb-find__main > .vb-near-status {
	visibility: visible;
}

/* ... und erscheint im selben Bild wie die Liste, nicht vor ihr. */
[data-vb-near-wait] .vb-find__aside .vb-search-loc__where,
[data-vb-near-wait] .vb-find__aside .vb-search-loc__clear {
	display: none !important;
}

[data-vb-near-wait] .vb-near-status,
.vb-near-status.is-note {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	padding: 14px 16px;
	font-size: var(--vb-text-body, 1rem);
	line-height: 1.4;
	color: var(--vb-ink, #30272b);
	background: var(--vb-primary-soft, #f3e2e7);
	border-radius: var(--vb-radius-sm, 11px);
}

/* Ueber den verborgenen Ergebnissen, nicht vor ihnen: so nimmt die Zeile
   keinen Platz, und die Liste erscheint genau dort, wo sie schon lag. */
[data-vb-near-wait] .vb-near-status {
	position: absolute;
	inset: 0 0 auto;
	z-index: 1;
}

/* Der Hinweis danach (kein Standort, keine Entfernungen) steht im Fluss
   ueber der Liste des Servers und bleibt still. */
.vb-near-status.is-note {
	font-size: var(--vb-text-small, 0.85rem);
	color: var(--vb-muted, #6b5b60);
	background: transparent;
	padding: 0;
}

.vb-near-status__pin {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--vb-accent-text, #68192e);
}

.vb-near-status.is-note .vb-near-status__pin {
	display: none;
}

/* Bewegung nur, wo sie niemand abbestellt hat: weder im System noch mit
   der Ruhigen Ansicht oder dem Bewegungsschalter der Seite. */
@media (prefers-reduced-motion: no-preference) {
	:root:not([data-focus="reduced"]):not([data-motion="reduced"]) [data-vb-near-wait] .vb-near-status__pin {
		animation: vb-near-breathe 1.6s ease-in-out infinite;
	}
}

@keyframes vb-near-breathe {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.45;
	}
}