/**
 * Home / landing styles for the [vb_home] markup (hero, sections, how-it-works
 * steps, CTA band, footer nav).
 *
 * Portability (audit P3): these rules used to live only in vetbook-theme, so
 * the plugin's own homepage markup rendered unstyled on any other theme. They
 * are ported here 1:1 with the theme's --wp--preset--* design tokens rewritten
 * to the plugin's self-contained --vb-* tokens (defined in site.css :root), so
 * the page renders fully styled on Twenty Twenty-Five or any standard theme.
 */

/* ----- Motion tokens ------------------------------------------------------
 * Every duration and easing on this page was a literal, six of them spread
 * over 400 lines, so "the hero moves a bit slower" meant finding all six and
 * hoping none was missed - and nothing could be turned down in one place. The
 * durations are named after what they do, not after their length: the two
 * blobs drift, the card bobs, the copy rises once on load.
 */
:root {
	--vb-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--vb-motion-hover: 0.15s;
	--vb-motion-settle: 0.5s;
	/* 0.18s und nur Deckkraft: die Vorgabe erlaubt hoechstens eine sehr kurze
	   Einblendung, keine Einfahrbewegung (Nachpruefung S12). Gemessen stand die
	   Suchflaeche mit 350ms und Staffelung erst nach rund 570ms still. */
	--vb-motion-entrance: 0.18s;

	/* The content width of this page. 1080px is the theme's, and it was set
	   for an article column; a marketplace hero carrying a headline, a photo
	   and a four-segment search surface reads cramped in it at 1440 and
	   1920. Only the home page widens - the article pages keep the measure
	   that was chosen for reading. */
	--vb-home-max: 1180px;

	/* The search surface is one control, so it has one height. */
	--vb-search-h: 78px;
}

/* ----- Hero ---------------------------------------------------------------- */
.vb-hero {
	/* The pause control for the looping hero motion is placed against this
	   band, so the band has to be the thing it is positioned against. */
	position: relative;
	background:
		radial-gradient(55% 75% at 88% -5%, rgba(174, 230, 58, 0.18), transparent 60%),
		radial-gradient(70% 90% at -5% 105%, rgba(104, 25, 46, 0.16), transparent 58%),
		linear-gradient(160deg, var(--vb-tint, #f3e2e7) 0%, var(--vb-cream, #f2e7df) 58%, var(--vb-base, #fbf7f2) 100%);
	margin-block-start: 0 !important;
	/* Was clamp(2.6rem, 1.8rem + 5vw, 5rem) - 160px of air at 1024px, set
	   when the search sat inside the copy column and cost the hero no height
	   of its own. With the surface below both columns the hero grew 100px
	   and the search button fell 16px below the fold on a 1024x768 tablet in
	   landscape. */
	padding-block: clamp(2.2rem, 1.5rem + 3.2vw, 3.6rem);
	overflow: clip;
}

.vb-hero__inner {
	display: grid;
	/* minmax(0, …) rather than a bare fr: "1fr" means "minmax(auto, 1fr)",
	   and auto is the MIN-CONTENT width - which a grid track will not go
	   below. The min-content of this column is its longest unbreakable word,
	   so on the Luxembourgish home page "Déierendokteschverzeechnes" sized
	   the track at 422px inside a 375px phone and everything in the hero -
	   heading, lead, search form, chips, trust line - was cut off at the
	   right. overflow-wrap: break-word does not help here: it breaks a word
	   once the box is narrow, but it does not reduce min-content. */
	/* 1.5fr : 1fr. Die verbindliche visuelle Referenz nennt 58-62 % fuer
	   Text und Suche und 38-42 % fuer das Bild, und das Foto soll weniger
	   visuelles Gewicht haben als die Suchflaeche. Gemessen bei 1.05 : 0.95
	   waren es 48 % zu 43 % - das Bild also fast gleichberechtigt. */
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
	max-width: var(--vb-home-max);
	margin-inline: auto;
	padding-inline: 1.5rem;
	width: 100%;
	/* Without this the inline padding adds to the 100% width, so the hero
	   grew wider than the viewport and .vb-hero (overflow-x: clip) cut the
	   headline off mid-word on phones. */
	box-sizing: border-box;
}

/* Ohne Pille: die Vorlage setzt hier eine schlichte Zeile ohne Flaeche.
   Gemessen an der Grafik - rings um die Zeile laeuft durchgehend der
   Seitenverlauf, ohne Kante und ohne Gruenstich; live war es eine gefuellte
   107x37-Pille mit Rahmen. */
.vb-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 0.75rem;
	padding: 0;
	border-radius: 0;
	/* Tokens, not three brand-green literals: the tint, the line and the
	   glow all stayed light-scheme values under [data-theme="dark"]. */
	background: none;
	border: 0;
	color: var(--vb-accent-text, #68192e);
	font-size: var(--vb-text-small, 0.85rem);
	font-weight: 600;
	letter-spacing: 0.01em;
	box-shadow: var(--vb-glow, 0 18px 44px -18px rgba(104, 25, 46, 0.30));
}

.vb-hero__title {
	margin: 0 0 0.8rem;
	/* Since 7.9. the display face is only where it is a decision: theme.json
	   puts headings on General Sans, and the hero asks for Clash Display by
	   name. Measured before: every heading on the site was Clash, down to the
	   12.8px footer titles. */
	font-family: var(--vb-display);
	/* The headline names five kinds of business and then makes a promise -
	   about a hundred characters. At 56px in a 16ch column that is SEVEN
	   lines in French and Portuguese, 439px of headline, and the measured
	   consequence was not aesthetic: on a 1280x800 desktop the search button
	   sat at y=882, below the fold, in two of five languages. Measured
	   again after this: the worst language now lands at 683 on that screen,
	   686 at 900px, 614 on a phone and 668 on a 320x700 one - above the
	   fold at every width, in every language.
	   The floor also came down a notch, because 320px was the width where
	   French and Portuguese still ran to seven lines. */
	/* Was 28ch and clamp(1.6rem, …, 2.75rem), both set when the headline
	   named five kinds of business and then made a promise - about a hundred
	   characters, seven lines at 320px in French and Portuguese. The
	   headline is a short sentence since 7.9.2026 and the floor could come
	   back up: measured at 390px it read 25.6px, which is smaller than the
	   lead beneath it on a tablet.
	   The ladder now: 29.6px at 390, 33.7 at 768, 39 at 1024, 47.8 at 1440,
	   capped at 48. */
	/* Die Vorlage bricht die Schlagzeile in ZWEI Zeilen, nach "fuer". Live
	   waren es drei - weil die Zeile bis zum 18.09.2026 die Ortsklausel
	   mittrug. Mit der kurzen Fassung gab 20ch eine EINzeilige Schlagzeile
	   (gemessen), 16ch gibt den Umbruch der Vorlage.
	   Der Deckel stieg von 3rem auf 3.5rem. Er stand bei 3rem aus einer
	   Messung - bei 56px sass der Suchknopf auf 1280x800 in zwei von fuenf
	   Sprachen unter dem Falz -, und diese Messung ist wiederholt statt
	   angenommen: der Knopf sitzt jetzt bei y=493 (lb/de), 508 (en), 558
	   (pt) und 589 (fr), in allen fuenf Sprachen ueber dem Falz, und auf
	   dem Telefon liest die Schlagzeile unveraendert 29,6px. */
	max-width: 16ch;
	font-size: clamp(1.85rem, 1.1rem + 2.35vw, 3.5rem);
	line-height: 1.05;
	/* The brief asked for -0.035em. Looked at on the rendered page, Clash
	   Display is already tightly spaced by design and at that value the
	   words touch: "für Ihr" and "in Ihrer" read as one word each at 48px.
	   A display face does not need borrowing from the tracking of a text
	   face. */
	letter-spacing: -0.012em;
}

/* The copy column stops before the grid track does. A 1180px hero gives the
   left track about 600px, and a line of running text past that reads as a
   paragraph in a document rather than a proposition on a page. */
.vb-hero__copy {
	max-width: 620px;
}

.vb-hero__lead {
	margin: 0 0 1.6rem;
	max-width: 46ch;
	color: var(--vb-muted);
	font-size: 1.25rem;
	line-height: 1.55;
}

/* Hero search bar */
/* border-box for the card and its fields. Measured on a phone: the card ends
   at x=366 and every field ended at x=383 - seventeen pixels past the box it
   sits in. flex-basis: 100% resolves against the card's CONTENT width, and
   under content-box the field's own padding and border are then added
   OUTSIDE that, so each field came out about 22px too wide. The fields had
   no border until today, so the overflow had nothing to draw and nobody saw
   it; giving them one made a geometry error visible rather than causing it. */
.vb-herosearch,
.vb-herosearch__field,
.vb-herosearch__control {
	box-sizing: border-box;
}

/* One surface, not four boxes in a box. Each field used to draw its own
   1px edge inside a card that drew one too, which is the "Box in Box"
   reading the review named. The segments are open now and separated by a
   single hairline; the card is the only thing with an outline. */
.vb-herosearch {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	min-height: var(--vb-search-h);
	gap: 0;
	padding: 8px;
	background: var(--vb-base, #fbf7f2);
	/* A container, not a control. It used --vb-field-line, the strong edge
	   reserved for things you can operate, and then held a select with the
	   same edge - a box inside an identical box. The card recedes on its
	   shadow; the controls inside keep the contrast they are required to
	   have. */
	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));
}

/* Die Vorlage zeigt drei einzeln umrandete, gerundete Kaesten IN der Karte -
   gemessen: geschlossene Kontur 388x76px, weisse Fuellung, und daneben noch
   eine Gruppen-Haarlinie. Bis zum 18.09.2026 stand hier das Gegenteil ("One
   surface, not four boxes in a box"), aus einer frueheren Pruefung. Der
   Inhaber hat entschieden, dass die Grafik gewinnt. */
.vb-herosearch__control {
	/* 0.45rem und nicht 0.6: mit 0.6 brauchte "Jede Art von Betrieb" 158px
	   und hatte 144, "Alle Tierarten" 103 gegen 95 - gemessen ueber die
	   echte Textbreite, denn ein <select> schneidet ohne Ueberlauf und
	   meldet scrollWidth == clientWidth. */
	padding: 0 0.45rem;
	background: var(--vb-base, #fbf7f2);
	border: 1px solid var(--vb-field-line, #8c716e);
	border-radius: var(--vb-radius-sm, 11px);
}

.vb-herosearch__field {
	display: flex;
	/* A column since the fields were given visible labels. As a row, the
	   label became a flex item beside the control and rendered to its LEFT
	   - which is how it shipped, and what the review caught. The icon and
	   the input keep their own row inside .vb-herosearch__control. */
	flex-direction: column;
	justify-content: center;
	flex: 1 1 0;
	min-width: 0;
	padding: 0.35rem 1rem;
	color: var(--vb-muted);
	border-radius: var(--vb-radius-sm, 11px);
	/* A hairline between neighbours, not a box around each. It is drawn on
	   the segment's own end so the last one before the button has none. */
	border-inline-end: 1px solid var(--vb-line, #d9c7c1);
}

.vb-herosearch__field:last-of-type {
	border-inline-end: 0;
}

/* The place is the field people type in, so it gets the room - but not at
   the cost of the kind of business, whose longest value ("Jede Art von
   Betrieb") is the longest word in the card. Measured after the hero became
   a band and the card lost a third of its width: that value came out as
   "Jede Art von l". */
.vb-herosearch__field--where {
	flex: 1 1 0;
}

.vb-herosearch__field--provider {
	flex: 1.45 1 0;
}

/* Die Tierart traegt "Alle Tierarten" und brauchte dafuer 103px bei 92
   Platz - gemessen ueber die echte Textbreite. Der Ort kam mit der kurzen
   Fassung "Ort oder PLZ" aus und gibt ab. */
.vb-herosearch__field--species {
	flex: 1.3 1 0;
}

.vb-herosearch__field input,
.vb-herosearch__field select {
	width: 100%;
	border: 0;
	background: transparent;
	padding: 0.75rem 0;
	font: inherit;
	color: var(--vb-ink);
	outline: 2px solid transparent;
	cursor: pointer;
}

/* The border-less inputs delegate focus visibility to their field wrapper
   (WCAG 2.4.7): an inset ring in the focus blue (#408), and the segment
   lifts onto the soft brand tint so the active one is legible as a shape and
   not only as a colour. */
.vb-herosearch__field:focus-within {
	background: var(--vb-primary-soft);
	box-shadow: inset 0 0 0 2px var(--vb-focus-color, #205f9c);
	/* Its own divider would sit on top of the ring. */
	border-inline-end-color: transparent;
}

/* The calm view takes away decoration, not the ability to see where you are. */
:root[data-focus="reduced"] .vb-herosearch__field:focus-within {
	background: transparent;
}

.vb-herosearch__btn:focus-visible {
	outline: 2px solid transparent;
	/* Spelled out, it was the focus token with one colour token missing its
	   fallback - and in the dark scheme the white ring stays white. */
	box-shadow: var(--vb-focus, 0 0 0 2px var(--vb-raised, #fffcf8), 0 0 0 5px var(--vb-focus-color, #205f9c));
}

.vb-herosearch__field input {
	cursor: text;
}

/* WebKit rechnet Hoehe, min-height und Innenabstand auf einem <select> im
   Zustand "menulist" nicht mit: dieselbe Regel ergab in Chromium ein 47px
   hohes Feld und in WebKit ein 26px hohes - und auf iOS ist jeder Browser
   WebKit, also war das Fingerziel dort ueberall zu klein. appearance: none
   nimmt den Systemknopf weg; der Pfeil kommt danach als Bild, wie ihn die
   Suchmaske seit jeher zeichnet (search.css), damit das Feld weiter als
   Aufklappfeld zu erkennen ist. */
.vb-herosearch__field select {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	min-height: 44px;
	/* 18 statt 22: der laengste Wert der Reihe, "Jede Art von Betrieb",
	   brauchte 158px und hatte 155. Der Pfeil ist 12px breit, es bleibt
	   also Luft zwischen ihm und dem letzten Buchstaben. */
	padding-inline-end: 18px;
	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 2px center;
}

/* Der Pfeil ist ein festes Bild und dreht nicht mit dem Schema; im dunklen
   faerbt ihn dieselbe Helligkeit, die auch die Beschriftungen tragen. */
:root[data-theme="dark"] .vb-herosearch__field select {
	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='%23a9bdb6' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E" );
}

/* Said to a signed-in reader and to nobody else (M-116). Above the hero,
   quiet, one line - it answers "what was I doing here" before the page
   starts selling the search. */
.vb-home__you {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	max-width: 70ch;
	margin: 0 auto 12px;
	padding: 10px 16px;
	font-size: var(--vb-text-body, 1rem);
	color: var(--vb-ink, #30272b);
	background: var(--vb-primary-soft, #f3e2e7);
	border-radius: var(--vb-radius-pill, 999px);
}

.vb-home__you-label {
	font-weight: 700;
}

.vb-home__you-when {
	color: var(--vb-muted, #6b5b60);
}

.vb-home__you-all {
	margin-left: auto;
	color: var(--vb-accent-text, #68192e);
	font-weight: 600;
}

/* The two ways out sit on one line under the surface. */
.vb-herosearch__aside {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1.4rem;
	margin: 0.75rem 0 0;
}

.vb-herosearch__btn {
	/* A .vb-btn--lg (M-109). Fused into the field row, so it keeps the
	   row's corner rather than the pill, and the display face. */
	flex: 0 0 auto;
	border-radius: var(--vb-radius-sm, 11px);
}

/* Four facts on one line, not one grey sentence and not four cards. Every
   item is measured or a property of the site; a fifth claim ("direct
   contact") was left out because 153 of 176 real entries carry neither a
   phone number nor a website. */
.vb-home-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
	/* Ueber der Karte statt darunter (Vorlage). */
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	color: var(--vb-muted);
	font-size: var(--vb-text-label, 0.9rem);
	font-variant-numeric: tabular-nums;
}

.vb-home-trust li {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
}

/* Die Plakette der Vorlage: ein getoenter Kreis mit einem Zeichen darin,
   nicht der gezeichnete Haken, der hier bis zum 19.09.2026 stand. An der
   Grafik gemessen ist sie 48 Bildpunkte gross (rund 30 CSS-px) und traegt
   ein dunkelgruenes Piktogramm auf hellgruenem Grund. */
.vb-home-trust__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: 28px;
	block-size: 28px;
	border-radius: var(--vb-radius-pill, 999px);
	background: var(--vb-primary-soft, #f3e2e7);
	color: var(--vb-accent-text, #68192e);
}



/* Hero decorative visual (right column) */
.vb-hero__visual {
	position: relative;
	min-height: 320px;
}

/* Hero photo slot (swappable via the vb_hero_image option). */
.vb-hero__photo {
	position: relative;
	z-index: 1;
	/* Wider and shorter than the 400px portrait it was. A 4/5 crop at 400px
	   is 500px tall, and that height is what the hero pays for twice now
	   that the search sits underneath rather than beside it. */
	max-width: 460px;
	margin-inline: auto;
	border-radius: var(--vb-radius-lg, 22px);
	transform: rotate(-2deg);
	box-shadow:
		0 2px 0 2px rgba(255, 255, 255, 0.6),
		0 34px 70px -34px rgba(48, 39, 43, 0.55),
		0 0 0 1px rgba(48, 39, 43, 0.06);
	transition: transform var(--vb-motion-settle) var(--vb-ease);
}

.vb-hero__visual:hover .vb-hero__photo {
	transform: rotate(0deg) translateY(-4px);
}

/* Luxembourgish and German compounds get long; wrapping beats clipping. */
.vb-eyebrow,
.vb-hero__title,
.vb-hero__lead,
.vb-home-trust {
	overflow-wrap: break-word;
}

/* The search surface has the content width, not the copy column's. */
.vb-hero__search {
	max-width: var(--vb-home-max);
	margin-inline: auto;
	margin-block-start: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	padding-inline: 1.5rem;
	width: 100%;
	box-sizing: border-box;
}

/* Ab der Desktopbreite haelt --vb-home-max die Karte schon; die 1.5rem
   Aussenabstand sind dort 48px, die den drei Feldern fehlen. Gemessen mit
   ihnen: Franzoesisch und Portugiesisch schnitten drei Werte ab, Englisch
   einen - und die Vorlage gibt der Karte ohnehin 73% der Seite gegen 63%
   live. Auf dem Telefon bleibt der Abstand, dort ist er der Seitenrand. */
@media (min-width: 62.5rem) {
	.vb-hero__search {
		padding-inline: 0;
	}
}

/* Belt to the grid's braces: the copy column must be allowed to shrink even
   where a future rule reintroduces an auto-sized track. */
.vb-hero__copy {
	min-width: 0;
}

/* One short fade on arrival, all at once - no rise, no stagger. */
.vb-hero__copy > *,
.vb-hero__visual,
.vb-hero__search {
	animation: vb-rise var(--vb-motion-entrance) var(--vb-ease) both;
}

@keyframes vb-rise {
	from {
		opacity: 0;
	}
}

/*
 * The hero headline is the LCP element. Fading it in from opacity 0 means
 * the largest paint cannot be reported until the animation has run, so the
 * title stays as it is from the first frame. It used to rise 18px instead;
 * without the rise there is nothing left for it to do.
 */
.vb-hero__title {
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.vb-hero__copy > *,
	.vb-hero__visual {
		animation: none !important;
	}

	.vb-hero__photo {
		transition: none;
	}
}

/* ----- The hero on a phone -------------------------------------------------
 * Measured at 320px: the search card sat at y=717 and the species chips at
 * y=1104, both below the first screen, so the one tool the page exists for
 * was reachable only by scrolling. Nothing is hidden here that carries
 * meaning - the badge, the headline and the lead all still say what they
 * said, in the sizes a 320px column can afford.
 */
/* 56rem statt 40rem seit dem 18.09.2026. Zwischen 640 und 896px galt bisher
   das Desktop-Layout: auf einem 820er-Tablet im Hochformat stand das Bild
   NEBEN dem Text und quetschte H1 und Vorspann auf 439 von 820px, und die
   einzeilige Suchkarte gab dem Ortsfeld 191px fuer einen 209px langen
   Platzhalter - "Ort, PLZ oder Betriebsn". §56 verbietet das Bild neben dem
   Text im Hochformat ausdruecklich, und die Vorlage stapelt die Felder. */
@media (max-width: 55.99rem) {
	/* The real phone fassung. Two columns stop here, not at 56rem: a 640px
	   screen has no room for a picture beside a headline, but a 768px tablet
	   does. */
	.vb-hero__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.vb-hero__visual {
		display: none;
	}

	.vb-hero__search {
		padding-inline: 1rem;
	}

	/* Stacked, the hairline between neighbours has to move to the block end
	   or it draws a line where there is no neighbour. */
	.vb-herosearch {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
	}

	.vb-herosearch__field {
		flex: 1 1 auto;
		border-inline-end: 0;
		border-block-end: 1px solid var(--vb-line, #d9c7c1);
	}

	.vb-herosearch__field:focus-within {
		border-block-end-color: transparent;
	}

	.vb-herosearch__btn {
		width: 100%;
		min-height: var(--vb-tap-primary, 44px);
		justify-content: center;
		margin-block-start: 8px;
	}

	.vb-hero {
		/* clamp() gave 45px of air above the badge before the reader had seen
		   a single word. */
		padding-block: 1.5rem 2rem;
	}

	.vb-eyebrow {
		/* The badge wrapped to two lines on every phone, because "Pet care
		   directory - Luxembourg & Greater Region" cannot be one. The region
		   is the half that is not repeated anywhere else above the fold, so
		   the category - which the headline names in full - steps aside. */
		margin-bottom: 0.6rem;
		padding: 0.3rem 0.8rem;
		font-size: var(--vb-text-caption, 0.78rem);
	}

	.vb-hero__title {
		/* The cap is measured in characters, so on a phone it is wider than
		   the column anyway; dropped here so it can never cost a line. */
		max-width: none;
		margin-bottom: 0.6rem;
	}

	.vb-hero__lead {
		font-size: var(--vb-text-lead, 1.0625rem);
		line-height: 1.5;
		margin-bottom: 1.1rem;
	}

	.vb-herosearch {
		padding: 6px;
	}

	.vb-herosearch__field {
		padding-block: 0.35rem;
	}

	.vb-home-trust {
		gap: 0.4rem 1.1rem;
		margin-top: 0.9rem;
	}
}

/* The narrowest screens, where the longest languages run out of fold.
 * Measured 9.9.2026 at 320x700 in WebKit: German and Luxembourgish put the
 * search button at 646, English at 666, but French and Portuguese at 728 -
 * 28px under. Their headline and their lead each take one line more, and at
 * this size a line is 30px. Nothing is hidden to fix it; the air between the
 * five things above the button is what gives way, because at 320px there is
 * no room for air AND for the thing the air is around. */
@media (max-width: 22.5rem) {
	.vb-hero {
		padding-block: 1rem 1.6rem;
	}

	.vb-eyebrow {
		margin-bottom: 0.45rem;
	}

	.vb-hero__title {
		margin-bottom: 0.45rem;
	}

	.vb-hero__lead {
		margin-bottom: 0.8rem;
	}

	.vb-hero__search {
		margin-block-start: 0.9rem;
	}

	.vb-herosearch__field {
		padding-block: 0.25rem;
	}

	.vb-home-trust {
		margin-top: 0.7rem;
	}
}

/* Bis zum 23.09.2026 stand hier eine Regel, die das Feld "Tierart" zwischen
   56 und 64rem verbarg - begruendet mit 834px, wo seit dem 18.09. ohnehin
   gestapelt wird. Sie traf nur noch 1024px, wo die Karte so breit ist wie bei
   1280 und alle drei Werte passen (Nachpruefung KH5). */

/* The hero holds still. Until 18.09.2026 two blobs drifted (9s, 11s) and a
   card bobbed (6s) - three loops that started by themselves, ran far longer
   than five seconds and never stopped, which is why there was a checkbox to
   pause them (WCAG 2.2.2). The redesign brief removes the loops instead, and
   a pause control with nothing to pause is one more thing in the tab order.
   What moves now is one 0.35s fade on arrival, and the global calm view
   still turns that off with everything else. */

/* The photo's first shadow is a 2px white halo - the paper edge of a print.
   In the dark scheme that halo was the brightest thing on the page: a white
   frame around the hero photo on a near-black band, which is what the audit
   saw as "the hero photo stays a bright block". The dark scheme only ever
   arrives through the switch (never through prefers-color-scheme), so this
   follows the switch. */
:root[data-theme="dark"] .vb-hero__photo {
	box-shadow:
		0 2px 0 2px rgba(255, 255, 255, 0.08),
		0 34px 70px -34px rgba(0, 0, 0, 0.75),
		0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* Below the seam the hero keeps its photo but loses the decoration around
   it. Until 9.9.2026 this query hid the visual outright, which is why the
   photo was gone on every common tablet - 768, 820 and 834 are all under
   896px - and the tablet read as a phone that had been stretched. What
   needed the room around the picture was the decoration, not the picture;
   since 18.09.2026 there is no decoration. */
@media (max-width: 55.99rem) {

	.vb-hero__visual {
		min-height: 0;
	}
}

/* ----- Chips (button variant) ---------------------------------------------- */
.vb-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.vb-chips .wp-block-button__link {
	padding: 0.45rem 1rem;
	border-radius: var(--vb-radius-pill, 999px);
	font-size: var(--vb-text-body, 1rem);
	border: 1.5px solid var(--vb-field-line, #8c716e);
	background: transparent;
	color: var(--vb-ink);
}

.vb-chips .wp-block-button__link:hover {
	border-color: var(--vb-primary);
	background: rgba(104, 25, 46, 0.08);
	color: var(--vb-accent-text, #68192e);
}

/* ----- Sections ------------------------------------------------------------ */
/* The theme constrains its children to 1080px, the measure it chose for
   reading an article. This page is not an article; its hero and its search
   already take 1180, and a 100px step between them and everything below
   reads as a mistake rather than as a rhythm. Only the home page widens. */
.vb-section {
	max-width: var(--vb-home-max);
	margin-inline: auto;
	padding-block: clamp(2rem, 1.4rem + 2vw, 3.25rem);
}

/* ----- Section grounds -----------------------------------------------------
 * Six sections on one ground read as one long list. Each band below is a
 * full-bleed colour with the content still on the page measure, so the eye
 * gets a horizon between one idea and the next. The three tints are the
 * ones the token set already carries; no new colour was invented for this. */
.vb-section--alt {
	background: var(--vb-surface);
}

/* Warm, for the reading section. */
.vb-section--warm {
	background: var(--vb-tint-warm);
}

/* The faintest of the three, for a row of chips that needs separating from
   the photo grid under it without competing with it. */
.vb-section--tint {
	background: var(--vb-tint);
}

.vb-section--alt,
.vb-section--warm,
.vb-section--tint {
	/* A band is edge to edge, so the page measure moves from the element to
	   its padding. Without this the cap above would hold the band at 1180
	   and the full-bleed margin would then drag it sideways. */
	max-width: none;
}

.vb-section--warm,
.vb-section--tint {
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
}

:root[data-theme="dark"] .vb-section--warm {
	background: var(--vb-surface);
}

.vb-section__title {
	margin: 0 0 1.5rem;
	font-family: var(--vb-display);
}

/* ----- How it works steps -------------------------------------------------- */

/* One line under the heading, because the three steps never said whose
   businesses they are about or that none of it needs an account. Left, not
   centred: since 18.09.2026 the steps sit in the right-hand column of a
   two-column block, and a centred line above a left-aligned list reads as
   belonging to neither. */
.vb-steps__lead {
	max-width: 62ch;
	margin: 0 0 1.1rem;
	color: var(--vb-muted);
}


/* ----- CTA band ------------------------------------------------------------ */
.vb-cta {
	/* White type on a gradient has to clear 4.5:1 at BOTH ends, and no gradient
	   that starts at --vb-primary can: white on #14b870 is 2.59:1. Flipping to
	   dark text does not help either - it fails at the dark end (2.86:1). The
	   band itself has to sit in the darker half of the brand. */
	padding-block: clamp(2.6rem, 1.8rem + 4vw, 4.5rem);
	background: linear-gradient(135deg, var(--vb-primary-dark), var(--vb-primary-darker));
	color: #fff;
	text-align: center;
}

/* Full-bleed bands: the page is a vertical stack of edge-to-edge bands. */
.vb-hero,
.vb-section--alt,
.vb-cta {
	margin-inline: calc(50% - 50vw);
}

/* Der Inhalt der Baender ist die Spalte der Seite: der Innenabstand hebt
   den negativen Aussenabstand genau auf. Bis zum 23.09.2026 stand hier
   max(1.5rem, 50vw - 590px) - auf dem Desktop 50px links der Abschnitte
   dazwischen, auf dem Telefon 13px rechts davon (Nachpruefung KH3). */
.vb-section--alt,
.vb-cta {
	padding-inline: calc(50vw - 50%);
}

.vb-cta :where(h2, p) {
	color: #fff;
}

/* The band runs the full width of the window, so its sentence ran with it:
   127 characters a line, measured at 1280px. Centred text is harder to read
   than left-aligned to begin with, and a centred line that long gives the
   eye no reliable way back to the start of the next one. */
.vb-cta :where(h2, p) {
	max-width: 60ch;
	margin-inline: auto;
}

/* And the links inside them. The rule above paints the PARAGRAPH white; an
   anchor inside it kept the site link colour, which is --vb-primary-dark -
   the exact colour this band's gradient starts with. Measured: 1.00:1. The
   button beside it carries a comment about the identical fault, measured the
   same way, and this link was added next to it anyway. Underlined, because on
   a coloured band colour alone is not what marks a link. */
.vb-cta a:not(.wp-block-button__link) {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vb-cta .wp-block-button__link {
	/* Not --vb-base. The band above is a fixed dark-green gradient in BOTH
	   themes (primary-dark → primary-darker), so the button sitting on it
	   is not a surface that should follow the theme: in dark mode
	   --vb-base becomes #122b22, which is the band's own colour, and the
	   button melted into it - measured 1.00:1, invisible as a control,
	   readable only as green text. Paper on a green band is paper in both
	   themes. */
	background: #ffffff;
	color: var(--vb-primary-darker, #300b17);
}

.vb-cta .wp-block-button__link:hover {
	background: var(--vb-accent);
	color: var(--vb-primary-darker);
}

/* ----- Footer link columns (emitted by [vb_home]) -------------------------- */

/* CNT-1 — guide teaser on the homepage */

/* Which of the four groups, above the headline - the one thing that lets a
   reader tell three cards apart before reading all three. */

/* Pushed to the foot of the card so three cards of different length still
   end on the same line. */

/*
 * Three teaser cards were 1706px tall on a 390px phone - two whole screens of
 * homepage spent on a link to three articles, most of it the 3:2 cover images
 * (240px each) and excerpts running to five lines. The covers keep their job
 * of telling the three cards apart at a glance without taking a screen each,
 * and the excerpt says as much as a teaser has to.
 */
@media (max-width: 40rem) {

}

/*
 * The header carries a "Find a vet" button and the hero carries a search
 * whose button says the same words, about 300px apart. On a phone both are
 * in the first screen at once and the reader has to work out whether they
 * do different things. The header is not sticky, so hiding it here on the
 * front page costs nothing: the search below is the better of the two, and
 * it comes back on every other page.
 */
@media (max-width: 40rem) {
	.home .vb-nav__cta,
	.front-page .vb-nav__cta {
		display: none;
	}
}

/* ----- The five kinds of business ----------------------------------------
   The first thing under the hero, because four of the five had no way in at
   all: the page offered species chips, regions and photographs of animals,
   every one of them a veterinary reading of a directory that lists walkers,
   sitters, salons and kennels too. A grid rather than a carousel - five is a
   number a reader can take in at once, and a row that scrolls hides the last
   two on the phone where it matters most. */
/* Five across where there is room, three on a tablet, two on a phone. Not
   auto-fit: with five tiles auto-fit produced four and one, and a row that
   ran out reads as a mistake rather than as a set. */
.vb-typetiles {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 40rem) {
	.vb-typetiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.vb-typetiles {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

.vb-typetile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 4px;
	/* 120px, from the brief's 110-135. It was 148, which on five tiles in a
	   row is 140px of front page for a strip whose job is to say how wide
	   the platform is. */
	min-height: 126px;
	padding: 14px 14px;
	/* Kein Rahmen: an zwanzig Kanten der Vorlage gemessen laeuft das Profil
	   ausnahmslos monoton vom Seitenweiss in den Kachelton, kein Pixel ist
	   dunkler. Live trug jede der fuenf denselben gruengrauen Strich, auch
	   die rosa und die violette. Durchsichtig statt entfernt, damit die
	   Kachel beim Ueberfahren nicht um 2px springt. */
	border: 1px solid transparent;
	border-radius: var(--vb-radius, 16px);
	background: var(--vb-base, #fbf7f2);
	color: var(--vb-ink, #30272b);
	text-align: center;
	text-decoration: none;
}

.vb-typetile:hover,
.vb-typetile:focus-visible {
	border-color: var(--vb-field-line, #8c716e);
	background: var(--vb-surface, #f2e7df);
}

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

.vb-typetile__short {
	display: none;
}

.vb-typetile__label {
	margin-top: 4px;
	font-weight: 700;
	line-height: 1.25;
	text-wrap: balance;
}

/* The line the label cannot carry: "Pet sitter" does not say whether
   somebody comes to the flat or the animal goes somewhere. */
.vb-typetile__desc {
	flex: 1 1 auto;
	color: var(--vb-muted, #6b5b60);
	font-size: var(--vb-text-small, 0.85rem);
	line-height: 1.35;
}

.vb-typetile__count {
	/* Secondary, deliberately: the count sells the category or it undersells
	   it, and it is never the reason to press the tile. Accent green and 700
	   made it the loudest thing on a tile whose job is the word above it. */
	margin-top: 8px;
	color: var(--vb-muted, #6b5b60);
	font-size: var(--vb-text-caption, 0.78rem);
	font-weight: 500;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
}

/* ----- Species: one card leads ---------------------------------------------
 * Nine cards of one size read as a table of contents. The first animal is
 * also the biggest by a distance - 204 of 212 entries take dogs - so the
 * grid says that instead of hiding it in a row of equals. */
@media (min-width: 64rem) {

}

/* An animal with no photo yet: its own drawn mark on a tinted field, not a
   frame saying "Photo follows" - which is a note to ourselves printed over
   the product. */

@media (min-width: 64rem) {
}

/* ----- "Weiter entdecken" -------------------------------------------------
   Three short columns in one block, in place of three full-width sections
   that were 1 400px of the front page between them. Lists, not cards: what
   the reader needs here is the name and how many, and a photograph of a dog
   does not help them choose a region. */
.vb-discover__cols {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
	gap: 1.4rem 2rem;
	align-items: start;
}

.vb-discover__head {
	margin: 0 0 0.5rem;
	font-size: var(--vb-text-label, 0.9rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vb-muted, #6b5b60);
}

.vb-discover__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vb-discover__list a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	/* box-sizing on this rule because the project has no border-box reset:
	   without it min-height is the CONTENT height and the padding lands on
	   top, which is how a "40px" row measured 54 in the language menu. */
	box-sizing: border-box;
	min-height: 40px;
	padding: 0.35rem 0.4rem;
	border-radius: var(--vb-radius-xs, 6px);
	color: var(--vb-ink);
	text-decoration: none;
}

.vb-discover__list a:hover,
.vb-discover__list a:focus-visible {
	background: var(--vb-surface, #f2e7df);
}

.vb-discover__n {
	margin-left: auto;
	padding-left: 0.6rem;
	color: var(--vb-muted, #6b5b60);
	font-size: var(--vb-text-caption, 0.78rem);
	font-variant-numeric: tabular-nums;
}

.vb-discover__all {
	margin: 0.5rem 0 0;
	padding-left: 0.4rem;
	font-size: var(--vb-text-label, 0.9rem);
}

.vb-discover__thumb {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: var(--vb-radius-xs, 6px);
	object-fit: cover;
}

/* An animal without a photograph keeps the same 36px footprint, so the four
   rows line up whether or not somebody has uploaded one. */
.vb-discover__thumb--glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--vb-surface, #f2e7df);
	color: var(--vb-accent-text, #68192e);
}

/* ----- Trade colours ------------------------------------------------------
   One hue per trade, and only as an accent: the icon, the hairline at the
   top of the tile and the hover border. Not a full-colour card - five
   saturated cards in a row is a toy shelf, and the brief says so.

   Defined as a token per trade so the dark scheme can restate them without
   any component rule knowing which scheme it is in. The light values are
   pulled down in saturation on purpose: they sit on white, beside each
   other, five at a time. */
.vb-typetile {
	--vb-trade: var(--vb-accent-text, #68192e);
	position: relative;
	overflow: hidden;
}

/* Buntheit an der Vorlage gemessen (Histogramm im Symbolband): dort
   96/160/224/192/160, live 108/95/134/107/76 - vier der fuenf rund halb so
   bunt. Angehoben, aber nicht bis zu den Werten der Vorlage: --vb-trade
   faerbt hier auch Text, und der muss auf der getoenten Kachel lesbar
   bleiben. Nach der Aenderung gemessen. */
.vb-typetile[data-type="vet"]      { --vb-trade: #68192e; --vb-trade-soft: #f3e2e7; }
.vb-typetile[data-type="groomer"]  { --vb-trade: #68192e; --vb-trade-soft: #f2e7df; }
.vb-typetile[data-type="walker"]   { --vb-trade: #68192e; --vb-trade-soft: #f5e6da; }
.vb-typetile[data-type="sitter"]   { --vb-trade: #68192e; --vb-trade-soft: #efe6ec; }
.vb-typetile[data-type="boarding"] { --vb-trade: #68192e; --vb-trade-soft: #f2ebe3; }
.vb-typetile[data-type="therapy"]  { --vb-trade: #68192e; --vb-trade-soft: #f3e2e7; }
.vb-typetile[data-type="trainer"]  { --vb-trade: #68192e; --vb-trade-soft: #f2e7df; }

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

/* The tile carries its trade as a very pale wash, which is how the binding
   reference graphic (§176) shows it - and it is still the "dezenter Akzent"
   §20 asks for rather than the full-colour card §20 forbids: 7% of the hue
   against the base, 14% in the dark scheme where the same mix reads weaker.
   Measured after: every label and every description on all five tiles stays
   above 4.5:1 in both schemes.

   The 3px hairline this replaces was the first attempt, from before the
   reference section was read. Two markers for one property is one too many. */
/* AniLevia (#408): every kind carries the brand's Bordeaux, so the kinds
   differ by their own tinted ground (rosé, beige, rose gold, mauve, sand),
   set per kind above; the wash of the trade is the fallback. */
.vb-typetile {
	background: var(--vb-trade-soft, color-mix( in srgb, var(--vb-trade) 7%, var(--vb-base, #fbf7f2) ));
}

:root[data-theme="dark"] .vb-typetile {
	background: var(--vb-trade-soft, color-mix( in srgb, var(--vb-trade) 14%, var(--vb-base, #191418) ));
}

/* Forced colours discard the mix; the border keeps the boundary. */
@media (forced-colors: active) {
	.vb-typetile {
		background: Canvas;
	}
}

/* The chevron the reference puts in the corner: this is a link and the arrow
   says so without a second line of words. */
.vb-typetile__go {
	margin-top: auto;
	align-self: flex-end;
	/* Ein weisses rundes Abzeichen mit weichem Schatten, wie die Vorlage es
	   zeigt - dort 49 Bildpunkte Durchmesser (25 CSS-px), waagrecht
	   zentriert, und das Zeichen darin bei allen fuenf Kacheln dasselbe
	   Dunkelblau statt der Kachelfarbe. Hier bleibt es --vb-ink: ein
	   Dunkelblau gaebe es im Token-System nicht. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	inline-size: 26px;
	block-size: 26px;
	border-radius: var(--vb-radius-pill, 999px);
	background: var(--vb-base, #fbf7f2);
	color: var(--vb-ink, #30272b);
	box-shadow: 0 2px 6px -2px rgba(48, 39, 43, 0.28 );
}

.vb-typetile__go svg,
.vb-typetile__go .vb-ic {
	inline-size: 15px;
	block-size: 15px;
	/* Das Zeichen erbt die Tinte des Abzeichens; die Grundregel fuer
	   .vb-typetile .vb-ic faerbte es sonst gruen. */
	color: inherit;
}

/* ">" und nicht " ": das Pfeilzeichen im Abzeichen traegt ebenfalls
   .vb-ic, und mit dem Nachfahren-Selektor wurde es mit 44px gezeichnet -
   ein Pfeil, der aus seiner 26px-Scheibe ueber die Beschreibung ragte
   (Nachpruefung 23.09., SM2). Das Motiv ist das erste Kind der Kachel. */
.vb-typetile > .vb-ic {
	color: var(--vb-trade);
	/* Die Vorlage gibt dem Symbol 23,1% der Kachelbreite, live waren es
	   10,2% - Faktor 2,25, gemessen an beiden Bildern im selben Massstab.
	   44px auf 204px Kachel sind 21,6%. Das Attribut am <svg> bleibt bei 26,
	   die Groesse gehoert ins Blatt. */
	width: 44px;
	height: 44px;
}

/* Hover and focus: a stronger border and a hint of ground, and the hairline
   comes up to full. No lift, no scale, no shadow - the brief forbids all
   three, and a tile that moves under the cursor is a tile that is harder to
   press. */
.vb-typetile:hover,
.vb-typetile:focus-visible {
	border-color: var(--vb-trade);
	/* Its own ground on hover too - darker, the description fell to 4.45:1
	   (review of #424); the border marks the hover. */
	background: var(--vb-trade-soft, color-mix( in srgb, var(--vb-trade) 14%, var(--vb-base, #fbf7f2) ));
}

:root[data-theme="dark"] .vb-typetile:hover,
:root[data-theme="dark"] .vb-typetile:focus-visible {
	background: var(--vb-trade-soft, color-mix( in srgb, var(--vb-trade) 22%, var(--vb-base, #191418) ));
}


/* ----- "Anbieter entdecken" ----------------------------------------------
   Three cards, and the same card the search page draws - a second card for
   the same thing would be a second set of rules about what a business may
   claim. The grid is capped at three columns: the search results grid this
   inherits from fills as many as fit, and on a wide screen that put five
   entries on the front page where the brief asks for three. */
.vb-providers__grid {
	grid-template-columns: repeat( auto-fit, minmax( 16rem, 1fr ) );
}

/* Zwei je Reihe auf dem Tablet, drei erst auf dem Desktop. §58 nennt "Nicht
   3 gequetschte Cards" und §164 "maximal 2 Provider Cards pro Reihe";
   gemessen bei 1024px waren es drei zu je 322px. */
@media (min-width: 48rem) {
	.vb-providers__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media (min-width: 80rem) {
	.vb-providers__grid {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

.vb-providers__all {
	margin: 1rem 0 0;
}

/* ----- "Warum" + "So funktioniert's" -------------------------------------
   Two columns, one block. They were two full-width sections answering one
   question between them: why here, and what happens if I start. Icon and
   text, no cards - six boxes for six short sentences is the shape the brief
   calls flat and this one is not. */
.vb-why__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem 3rem;
	align-items: start;
}

/* Die Vorlage zeigt hier zwei weisse, abgerundete Karten auf hellem Grund -
   live war es ein durchgehendes Farbband ohne jede Karte. Das ist nicht nur
   Optik: die blassen Scheiben vor Symbolen und Zahlen trugen exakt
   --vb-surface, und das Band trug dasselbe. Gemessen mit Pixelabgriff, alle
   sechs Scheiben: rgb(238,246,240) innen wie aussen, Kontrast null. Auf
   weisser Karte hat dieselbe Scheibe wieder einen Rand. */
.vb-why__col {
	box-sizing: border-box;
	padding: clamp( 1.25rem, 1rem + 1vw, 2rem );
	background: var(--vb-base, #fbf7f2);
	border: 1px solid var(--vb-line, #d9c7c1);
	border-radius: var(--vb-radius-lg, 22px);
}

@media (min-width: 56rem) {
	.vb-why__cols {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

.vb-why__list,
.vb-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 1.1rem;
}

.vb-why__point,
.vb-step {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

/* Das Symbol sitzt in einer blassen Scheibe, wie die Referenzgrafik es
   zeigt - ein blankes Symbol neben fettem Text verschwindet, eine Scheibe
   gibt der Zeile einen Anfang. */
.vb-why__point .vb-ic {
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 34px;
	height: 34px;
	padding: 6px;
	border-radius: var(--vb-radius-pill, 999px);
	/* --vb-primary-soft, nicht --vb-surface: das Band trug --vb-surface, und
	   eine Scheibe in der Farbe ihres Grundes ist keine Scheibe. */
	background: var(--vb-primary-soft, #f3e2e7);
	color: var(--vb-accent-text, #68192e);
	overflow: visible;
}

.vb-why__point strong,
.vb-step strong {
	display: block;
	margin-bottom: 0.15rem;
	line-height: 1.3;
}

.vb-why__text,
.vb-step__text {
	display: block;
	color: var(--vb-muted, #6b5b60);
	font-size: var(--vb-text-small, 0.85rem);
	line-height: 1.5;
}

/* The number is the marker of an ordered list, so it stays a circle and not
   a heading: three steps read as a sequence or they read as three headings
   that happen to be numbered. */
.vb-step__num {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 26px;
	height: 26px;
	border-radius: var(--vb-radius-pill, 999px);
	/* Eine helle Scheibe mit dunkler Zahl, wie die Referenzgrafik sie zeigt -
	   und damit stellt sich die Frage nach weisser Schrift auf einer Fuellung
	   gar nicht erst, an der ich mich heute dreimal verlaufen habe: gold
	   2,14:1, --vb-accent-text im dunklen Schema 1,77:1. Dunkles Gruen auf
	   der blassen Scheibe misst in beiden Schemata ueber 7:1. */
	background: var(--vb-primary-soft, #f3e2e7);
	color: var(--vb-accent-text, #68192e);
	font-size: var(--vb-text-caption, 0.78rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.vb-why__more {
	margin: 1rem 0 0;
	font-size: var(--vb-text-label, 0.9rem);
}

.vb-steps__lead {
	margin: 0 0 1rem;
	color: var(--vb-muted, #6b5b60);
}

/* ----- Die Anbieterkarte auf der Startseite --------------------------------
   Dieselbe Karte wie auf der Suchseite - sie darf nicht zwei verschiedene
   Dinge ueber denselben Betrieb behaupten - und mit demselben Inhalt.

   Der erste Anlauf hatte Tierart-Chips und Buchen-Knopf hier ausgeblendet
   und stattdessen den Titel-Link ueber die ganze Karte gespannt, weil §179
   "nicht mehr als 1-2 kleine Metaelemente" schreibt. Die verbindliche
   Vorschaugrafik zeigt beides, und §176 erklaert sie fuer die Kartendichte
   fuer verbindlich - bei einem Widerspruch zwischen Bild und Fliesstext
   gewinnt hier das Bild. Der gedehnte Link geht mit: neben einem eigenen
   Knopf ist er eine zweite, unsichtbare Handlung auf derselben Flaeche. */
@media (hover: hover) {
	.vb-providers__grid .vb-practice-card:hover {
		border-color: var(--vb-accent-text, #68192e);
	}
}

/* ----- "Mehr entdecken" ---------------------------------------------------
   Nur Tierarten, Regionen und Ratgeber klappen ein - auf dem Telefon, in der
   installierten App (§68) und in der Ruhigen Ansicht (Fokus: "Weitere
   Suchmoeglichkeiten [Oeffnen]"). "So funktioniert es" und die Karte fuer
   Betriebe bleiben stehen. Offen ist der Klappteil display: contents, damit
   die vier Kaesten ein Raster bleiben.

   Der Knopf ist ohne JavaScript unsichtbar, und eingeklappt wird nur, was das
   Skript vorher als klappbar markiert hat. */
.vb-more__body {
	display: contents;
}

.vb-more__toggle {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: 52px;
	margin: 0 0 1rem;
	padding: 0.6rem 1rem;
	border: 1px solid var(--vb-line, #d9c7c1);
	border-radius: var(--vb-radius, 16px);
	background: var(--vb-base, #fbf7f2);
	color: var(--vb-ink);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.vb-more__toggle .vb-ic {
	transition: transform var(--vb-motion-hover) ease;
}

.vb-more[data-open] .vb-more__toggle .vb-ic {
	transform: rotate(180deg);
}

@media all and (display-mode: standalone), (max-width: 39.99rem) {
	.vb-more--collapsible .vb-more__toggle {
		display: flex;
	}

	.vb-more--collapsible:not([data-open]) .vb-more__body {
		display: none;
	}

	.vb-more--collapsible:not([data-open]) .vb-bizcard {
		grid-column: 1 / -1;
	}
}

:root[data-focus="reduced"] .vb-more--collapsible .vb-more__toggle {
	display: flex;
}

:root[data-focus="reduced"] .vb-more--collapsible:not([data-open]) .vb-more__body {
	display: none;
}

/* Eingeklappt steht die Betriebskarte allein im Zweierraster des Tablets -
   ohne diese Zeile als halbe Breite neben einer leeren Haelfte. */
:root[data-focus="reduced"] .vb-more--collapsible:not([data-open]) .vb-bizcard {
	grid-column: 1 / -1;
}

@media all and (display-mode: standalone) {
	/* §65: kein grosses Hero-Foto in der App - auf jeder Breite, nicht nur
	   unterhalb der Telefon-Naht. Ein installiertes Tablet zeigte es sonst. */
	.vb-hero__visual {
		display: none;
	}

	.vb-hero__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

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

/* ----- Die Zeile fuer Angemeldete ----------------------------------------
   §141: auf dem Desktop eine kleine Kontextzeile ueber dem Hero, keine
   eigene Section - §140 und §144 sagen es zweimal, und Personalisierung darf
   die Suche nicht verdraengen. */
.vb-home__you-pet {
	font-weight: 600;
}

.vb-home__you-go {
	font-weight: 600;
	white-space: nowrap;
}

/* §142: in der installierten App darf aus derselben Zeile eine Karte werden,
   weil die App staerker konto-orientiert ist. Dieselbe Auszeichnung, andere
   Behandlung - ein zweiter Renderer waere ein zweiter Satz Regeln darueber,
   was hier stehen darf. */
@media all and (display-mode: standalone) {
	.vb-home__you {
		display: grid;
		gap: 0.15rem;
		box-sizing: border-box;
		margin: 0.75rem clamp( 0.75rem, 4vw, 1.5rem ) 0;
		padding: 0.9rem 1rem;
		border: 1px solid var(--vb-line, #d9c7c1);
		border-radius: var(--vb-radius, 16px);
		background: var(--vb-base, #fbf7f2);
	}

	.vb-home__you-label {
		color: var(--vb-muted, #6b5b60);
		font-size: var(--vb-text-caption, 0.78rem);
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}

	.vb-home__you-pet {
		font-size: var(--vb-text-lead, 1.0625rem);
	}

	.vb-home__you-go {
		justify-self: start;
		margin-top: 0.4rem;
		min-height: 40px;
		display: inline-flex;
		align-items: center;
		padding: 0.3rem 0.9rem;
		border: 1px solid var(--vb-line, #d9c7c1);
		border-radius: var(--vb-radius-pill, 999px);
	}
}

/* ----- Hero in der Ruhigen Ansicht ---------------------------------------
   §9: ohne Bild steht der Text in einer Spalte von hoechstens 900-1000px,
   zentriert. Gemessen ohne diese Regel: das Foto war weg, die Textspalte
   blieb 620px breit am linken Rand, und die rechte Haelfte des Heros war
   leer - eine Ansicht, die Reize reduzieren soll, sah aus wie eine kaputte. */
:root[data-focus="reduced"] .vb-hero__inner,
:root[data-focus="reduced"] .vb-hero__search {
	grid-template-columns: minmax(0, 1fr);
	max-width: 60rem;
}

/* ----- Zielgroesse der Abschluss-Links ------------------------------------
   WCAG 2.5.8 verlangt 24x24 CSS-Pixel, und die Ausnahme fuer Links im
   Fliesstext greift hier nicht: diese stehen allein in ihrem Absatz, sind
   also keine Inline-Links in einem Satz. Gemessen mit der Tastaturprobe:
   18-21px hoch. Padding statt min-height allein, damit die Flaeche auch
   wirklich zum Ziel gehoert und nicht nur die Zeile hoeher wird. */
.vb-discover__all a,
.vb-providers__all a,
.vb-cta__second a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding-block: 0.15rem;
}

/* ----- Der Hero als Bildbahn ---------------------------------------------
   Die verbindliche Referenzgrafik zeigt EINE durchgehende Bahn: das Foto
   laeuft ueber die volle Hoehe bis an den rechten Rand, Text und Suchkarte
   liegen darueber, und die Suchkarte ist das hellste und kontraststaerkste
   Objekt der ersten Bildhoehe. Bis hierher waren es zwei Spalten mit einer
   gerundeten, gekippten Fotokarte und der Suche darunter - strukturell etwas
   anderes, und der Inhaber hat das zweimal gesagt.

   §177 bleibt erfuellt: "das Hero-Foto soll weniger visuelles Gewicht als die
   Search Surface besitzen" - in der Referenz erreicht das nicht die Groesse
   des Fotos, sondern der Kontrast der weissen Karte darauf. */
@media (min-width: 56rem) {
	.vb-hero__visual {
		position: absolute;
		inset: 0 0 0 auto;
		/* 66 %, nicht 52: die Bahn muss dort beginnen, wo der Verlauf darueber
		   noch voll deckt (34 %), sonst faengt bei ihrer linken Kante die
		   Textur schlagartig an. Gemessen an der Kante bei 52 %: der Verlauf
		   arbeitete sauber (202 -> 169 ueber 260 px), aber links davon lag
		   glatte Flaeche und rechts sofort Bild - die Naht war nicht der
		   Helligkeitssprung, sondern der Texturbeginn. */
		width: 66%;
		min-height: 0;
		margin: 0;
		z-index: 0;
	}

	.vb-hero__photo {
		max-width: none;
		width: 100%;
		height: 100%;
		margin: 0;
		border-radius: 0;
		transform: none;
		box-shadow: none;
		aspect-ratio: auto !important;
	}

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

	/* Der Uebergang ins Helle, damit die Schrift links auf Grund steht und
	   nicht auf einem Fell.
	   Auf dem HERO, nicht auf der Bahn: gemessen mit ihm auf der Bahn hatte
	   das Foto bei x=691 eine harte Kante - ein Verlauf, der erst dort
	   beginnt, wo das Bild beginnt, verdeckt genau die Stelle nicht, um die
	   es geht. Ueber die ganze Breite gelegt, blendet er das Bild dort aus,
	   wo der Text steht. */
	.vb-hero::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		/* Jede Stufe aus demselben Token. Vorher waren die letzten beiden
		   fest eingetragenes Hellminz - im Dunkelmodus lief der Verlauf
		   damit von Dunkelgruen ueber ein HELLES Band zurueck ins Nichts,
		   und die helle H1 stand mittendrin darauf. Gemessen:
		   rgb(230,244,236) auf rgb(128,150,139).
		   Meine eigene Kontrastpruefung hat das nicht gesehen, weil sie
		   Elemente ueber einem Verlauf ueberspringt - die Ausnahme, die ich
		   gegen ein Messartefakt eingebaut hatte, verdeckte einen echten
		   Befund. */
		background: linear-gradient(
			to right,
			var(--vb-tint, #f3e2e7) 0%,
			var(--vb-tint, #f3e2e7) 34%,
			color-mix( in srgb, var(--vb-tint, #f3e2e7) 55%, transparent ) 52%,
			color-mix( in srgb, var(--vb-tint, #f3e2e7) 0%, transparent ) 68%
		);
	}

	/* Eine Spalte, weil die zweite jetzt hinter dem Text liegt.
	   OHNE position: relative - gemessen mit ihr: die Bahn verankert sich am
	   naechsten positionierten Vorfahren, das waere dann dieser Behaelter
	   gewesen, und sie kam 335px hoch statt ueber die vollen 684. Der Anker
	   muss .vb-hero sein; die Reihenfolge regeln die Kinder selbst. */
	.vb-hero__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.vb-hero__copy {
		position: relative;
		z-index: 2;
		max-width: 34rem;
	}

	/* Die Suchkarte sitzt auf der Bahn und nimmt nicht die ganze Breite -
	   in der Referenz endet sie deutlich vor dem rechten Rand. */
	.vb-hero__search {
		position: relative;
		z-index: 2;
	}

	/* 56rem, nicht 46: gemessen bei 46rem brach "Wonach suchen Sie?" auf zwei
	   Zeilen um und zwei Feldwerte standen abgeschnitten da ("Jede Ar…",
	   "Alle Tie…"). Die Karte darf ueber die Bahn ragen - in der Referenz tut
	   sie genau das -, aber sie darf ihre eigenen Woerter nicht abschneiden. */
	.vb-hero__search .vb-herosearch,
	.vb-herosearch__aside,
	.vb-home-trust {
		max-width: 56rem;
		margin-inline: 0;
	}

	/* Bis zum 23.09.2026 stand hier: ohne Foto keine Bahn, der Text mittig.
	   Seitdem fuellt ein illustrierter Platzhalter die Bahn (Inhaber:
	   "falls Grafiken fehlen, benutze Platzhaltergrafiken"), und der Hero
	   behaelt den Aufbau der Vorlage - Text links, Bild rechts - ob das Foto
	   schon da ist oder nicht. */
}

/* ----- "Weiter entdecken" als vier Kaesten --------------------------------
   Die verbindliche Referenzgrafik zeigt die letzte Bahn der Seite als EINE
   Reihe aus vier Kaesten: drei helle, umrandete und rechts daneben die
   dunkelgruene Anbieterkarte. Bis zum 18.09.2026 waren es drei blanke
   Spalten und darunter ein Band ueber die volle Breite - 390px Seite fuer
   ein Angebot, das §96 ausdruecklich als zweitrangigen Trichter fuehrt. */
.vb-discover__cols {
	grid-template-columns: repeat( auto-fit, minmax( 13rem, 1fr ) );
	align-items: stretch;
}

.vb-discover__col {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding: 1.1rem 1.1rem 1rem;
	border: 1px solid var(--vb-line, #d9c7c1);
	border-radius: var(--vb-radius, 16px);
	background: var(--vb-surface, #f2e7df);
}

.vb-discover__col .vb-discover__all {
	margin-top: auto;
	padding-top: 0.6rem;
}

/* Die vierte: dieselbe Form, dunkler Grund. Weiss auf --vb-primary-darker
   misst 13,9:1, und der Knopf darin ist weiss auf weiss gerahmt statt gruen
   auf gruen - der Fehler, den :where() an anderer Stelle schon einmal
   verursacht hat. */
.vb-bizcard {
	border-color: transparent;
	background: var(--vb-primary-darker, #300b17);
	color: #fff;
}

.vb-bizcard .vb-bizcard__head {
	color: #fff;
}

.vb-bizcard__lead {
	margin: 0 0 0.8rem;
	font-size: var(--vb-text-small, 0.85rem);
	line-height: 1.5;
	color: rgba( 255, 255, 255, 0.86 );
}

.vb-bizcard__list {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.45rem;
	font-size: var(--vb-text-small, 0.85rem);
}

.vb-bizcard__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.vb-bizcard__list .vb-ic {
	flex: 0 0 auto;
	margin-top: 2px;
	color: #ddb79f;
}

.vb-bizcard__go {
	margin: auto 0 0.5rem;
}

a.vb-bizcard__go .vb-btn,
.vb-bizcard__go .vb-btn {
	background: #fff;
	border-color: #fff;
	color: var(--vb-primary-darker, #300b17);
}

.vb-bizcard__second {
	margin: 0;
	font-size: var(--vb-text-caption, 0.78rem);
}

.vb-bizcard__second a {
	color: rgba( 255, 255, 255, 0.86 );
}

/* ----- Abschnittskopf: Ueberschrift links, Weg nach rechts -----------------
   So zeigt es die Referenzgrafik. Der Leser, der mehr davon will, muss dann
   nicht an drei Karten vorbeiscrollen, um den Weg dorthin zu finden. */
.vb-section__bar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.vb-section__bar .vb-section__title {
	margin-bottom: 0;
}

.vb-section__more {
	margin: 0;
	font-size: var(--vb-text-label, 0.9rem);
	white-space: nowrap;
}

.vb-section__more a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 24px;
	padding-block: 0.15rem;
	font-weight: 600;
	/* Ohne Unterstrich, wie die Vorlage ihn zeigt: dort laeuft das Profil
	   dunkler Pixel bis y=120 und bricht ab, ein Strich darunter fehlt.
	   Der Pfeil daneben traegt die Bedeutung "fuehrt weiter", und beim
	   Ueberfahren kommt der Strich zurueck. */
	text-decoration: none;
}

.vb-section__more a:hover,
.vb-section__more a:focus-visible {
	text-decoration: underline;
}

/* Auf dem Telefon bricht die Leiste um, und der Weiterverweis landete
   ZWISCHEN Ueberschrift und ihrem Leadsatz - gemessen Titel y=1703,6, Link
   y=1746,5, Lead y=1780,9. Er gehoert hinter den Satz, den er ergaenzt. */
.vb-section__bar .vb-section__lead {
	/* Der Satz gehoert unter die Ueberschrift, nicht neben sie. flex-basis
	   allein reichte nicht: die Grundregel deckelt den Satz auf 60ch, und
	   mit kurzen Ueberschriften (lb, en) passten Titel, Verweis und Satz
	   dann doch in EINE Zeile (Nachpruefung 23.09., SM1). Die Lesebreite
	   haelt jetzt ein eigener Innenabstand, nicht die Box. */
	flex: 0 0 100%;
	max-width: none;
	order: 2;
	/* Und der Abstand zu den Karten darunter, den der Satz als Kind der
	   Leiste verloren hatte (SM4). */
	margin-block: 0.35rem 1.4rem;
	padding-inline-end: max( 0px, calc( 100% - 60ch ) );
	box-sizing: border-box;
}

@media (max-width: 47.99rem) {
	.vb-section__bar {
		flex-wrap: wrap;
	}

	.vb-section__bar .vb-section__title {
		flex-basis: 100%;
		order: 1;
	}

	.vb-section__bar .vb-section__more {
		order: 3;
		flex-basis: 100%;
	}
}

/* Die Zeile unter der Ueberschrift, die die Vorlage jedem Abschnitt gibt. */
.vb-section__lead {
	max-width: 60ch;
	margin: 0.35rem 0 1.4rem;
	color: var(--vb-muted, #6b5b60);
}

/* ----- Tablet: die Kachelreihe steht mittig ------------------------------
   Gemessen im Hochformat bei 820px: drei Kacheln, dann zwei linksbuendig in
   einem Drei-Spalten-Raster mit leerer dritter Zelle - §57 verlangt die
   zweite Reihe "zentriert / sauber ausbalanciert". Ein Raster kann eine
   halbe letzte Reihe nicht zentrieren, ein umbrechendes Flexbett schon. */
/* box-sizing zuerst: die Kachel hat 14px Innenabstand je Seite und einen
   Rahmen, und ohne border-box legt content-box beides AUSSEN um die
   Flex-Basis. Aus "ein Drittel" wurde ein Drittel plus 30px, aus 3+2 wurde
   2+2+1 und auf dem Telefon aus 2+2+1 sogar 1+1+1+1+1. Das Blatt hat keinen
   globalen Reset - jede Flaeche, die einen Prozentsatz als Basis bekommt,
   braucht die Zeile selbst. */
.vb-typetile {
	box-sizing: border-box;
	min-width: 0;
}

/* Tablet quer: EINE Reihe zu fuenf wie in der Grafik, nicht 3 + 2
   (Nachpruefung SM12/M14). Bis 63.99rem stand hier ein umbrechender
   Dreierblock. */
@media (min-width: 56rem) and (max-width: 63.99rem) {
	.vb-typetiles {
		grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
		gap: 10px;
	}

	.vb-typetiles .vb-typetile {
		padding: 12px 8px;
	}
}

/* Auf dem Telefon EINE Reihe zu fuenf, wie die Vorlage sie zeigt: dort
   fuenf farbige Laeufe nebeneinander ueber die volle Breite, Raster rund
   67 CSS-px, Streifenhoehe 83. Live war es ein 587px hoher Kartenblock in
   zwei Spalten mit Beschreibung und Zaehlung.
   Das widerspricht §77 und §2521 des Fliesstextes ("2 + 2 + 1", "Icon, Name,
   kurzer Kontext") - der Inhaber hat am 18.09.2026 entschieden, dass die
   Grafik gewinnt (K-01). Die Beschreibung ist nicht geloescht, nur auf dem
   Telefon verborgen; ab 40rem steht sie wieder da. */
@media (max-width: 55.99rem) {
	.vb-typetiles {
		display: grid;
		grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
		gap: 6px;
	}

	.vb-typetiles .vb-typetile {
		min-height: 0;
		padding: 10px 4px;
		gap: 2px;
	}

	.vb-typetiles .vb-typetile > .vb-ic {
		inline-size: 26px;
		block-size: 26px;
	}

	/* Der volle Name bleibt im Markup - er ist der Name, den ein
	   Vorleseprogramm nennt -, auf dem Schirm steht die Kurzform. */
	.vb-typetiles .vb-typetile__label {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset( 50% );
		white-space: nowrap;
	}

	/* Silbentrennung statt Bruch an beliebiger Stelle: "anywhere" trennte
	   "Vétérinaire" als "Vétérinai / re" (Nachpruefung M2). Die Seite traegt
	   ihr lang-Attribut, also trennt der Browser nach der Sprache. */
	.vb-typetiles .vb-typetile__short {
		display: block;
		max-inline-size: 100%;
		font-size: var(--vb-text-caption, 0.78rem);
		font-weight: 600;
		line-height: 1.15;
		hyphens: auto;
		-webkit-hyphens: auto;
		overflow-wrap: break-word;
	}

	.vb-typetiles .vb-typetile__desc,
	.vb-typetiles .vb-typetile__go {
		display: none;
	}
}

/* Die Kachel war innen widerspruechlich ausgerichtet: align-items auf
   flex-start bei text-align:center, deshalb zentrierte sich eine
   umbrechende Unterzeile unter einem linksbuendigen Titel. Die Vorlage
   zeigt sie durchgehend zentriert. */
.vb-typetile {
	align-items: center;
	text-align: center;
}

.vb-typetile__go {
	align-self: center;
}

/* ----- Tablet: Fingerziele ------------------------------------------------
   §59 verlangt 44-48px. Gemessen: Auswahlfeld-Zeile 26px, "In meiner Naehe
   suchen" 24px, "Notfall?" 27px. */
/* Das Ziel ist das Feld, nicht die Huelle: .vb-herosearch__control ist ein
   <span>, der die 44px bekam, waehrend das <select> darin 25-26px hoch
   blieb - und der Finger trifft das select. Gilt an jeder Breite, nicht nur
   auf dem Tablet: ein 26px hohes Auswahlfeld ist auch mit der Maus eine
   duenne Zielflaeche und sieht nicht aus wie die Vorlage. */
.vb-herosearch__control > select,
.vb-herosearch__control > input,
.vb-herosearch__control > .vb-herosearch__input {
	box-sizing: border-box;
	min-height: 44px;
}

@media (max-width: 79.99rem) {
	.vb-herosearch__control {
		min-height: 44px;
	}

	.vb-herosearch__aside a {
		min-height: 44px;
	}
}

/* Der Ausgang unter den drei Schritten (Vorschaugrafik). */
.vb-steps__more {
	margin: 1.25rem 0 0;
}

/* ----- Hero nach der Nachpruefung vom 23.09.2026 --------------------------
   Gegen die Vorschaugrafik gemessen, fuenf Sprachen, vier Breiten. Die
   Befunde, auf die sich die Regeln hier beziehen, stehen jeweils dabei. */

/* KH2: zwei ausgewogene Zeilen statt einem einzelnen Wort in Zeile zwei
   ("Betreuung fuer Ihr Tier / finden."). */
.vb-hero__title {
	text-wrap: balance;
}

/* Tablet hoch: die Grafik bricht die Schlagzeile auch hier zweizeilig;
   ohne Deckel stand sie bei 820px auf einer Zeile. 18ch statt 16, weil
   Franzoesisch und Portugiesisch sonst dreizeilig wuerden. */
@media (min-width: 40rem) and (max-width: 55.99rem) {
	.vb-hero__title {
		max-width: 18ch;
	}
}

/* KH17: die Augenbraue ist seit dem 18.09. keine Pille mehr; ihr
   Innenabstand stand aber im Telefon-Block noch da und rueckte den Text
   13px rechts von der Schlagzeile ein. Auf dem Telefon zeigt die Grafik
   keine Augenbraue. */
@media (max-width: 55.99rem) {
	.vb-eyebrow {
		padding: 0;
	}
}

@media (max-width: 39.99rem) {
	.vb-eyebrow {
		display: none;
	}
}

/* KH18: Vorspann -> Vertrauenszeile eng, Vertrauenszeile -> Karte weiter
   (Grafik ~37 und ~47px). Live war es umgekehrt: 66 und 16. */
.vb-hero__lead {
	margin-bottom: 1.5rem;
}

.vb-hero__search {
	margin-block-start: 0.75rem;
}

.vb-home-trust {
	margin: 0 0 1.25rem;
}

@media (min-width: 56rem) {
	.vb-home-trust {
		margin-bottom: 2.75rem;
	}
}

/* KH3 und KH13: eine gemeinsame linke Kante. Der Hero ist ab dem Tablet
   quer ein Band, dessen INHALT genau die Spalte der Abschnitte darunter
   ist: der Innenabstand hebt den negativen Aussenabstand auf, beide in
   Prozent des Elternblocks - also der Inhaltsspalte. Text, Vertrauenszeile,
   Karte und naechste Ueberschrift stehen damit auf demselben x.
   Ab 80rem wird das Band zur eingerueckten, gerundeten Flaeche, buendig mit
   der Kopfkarte darueber (gleiche Tokens). */
.vb-hero {
	--vb-hero-frame: 100vw;
	margin-inline: calc( 50% - var(--vb-hero-frame) / 2 );
	padding-inline: calc( var(--vb-hero-frame) / 2 - 50% );
}

/* Auf jeder Breite, nicht erst ab dem Tablet: auf dem Telefon standen
   Text bei 24, Karte bei 16 und Abschnitte bei 11px - drei Kanten in 390px. */
.vb-hero__inner,
.vb-hero__search {
	max-width: none;
	padding-inline: 0;
}

@media (min-width: 56rem) {
	.vb-hero {
		/* Etwas weniger Luft oben und unten: mit dem einzeiligen Vorspann
		   passt so die erste Kachelreihe auf 1440x900 und 1280x800 noch
		   ueber den Falz (KH4). */
		padding-block: clamp( 2rem, 1.2rem + 2.2vw, 3rem );
	}
}

@media (min-width: 80rem) {
	.vb-hero {
		--vb-hero-frame: min( 100vw - 2 * var(--vb-frame-gap), var(--vb-frame-max) );
		border-radius: var(--vb-radius-lg, 22px);
	}
}

/* KH22: auf dem Desktop und dem Tablet quer stehen die Werte in der Grafik
   ohne Zeichen davor; nur die gestapelten Felder des Telefons tragen eins.
   Die 28px, die das Zeichen samt Abstand kostete, gehen an den Wert - der
   laengste ("Jede Art von Betrieb", pt "Salao de tosquia") passt damit. */
@media (min-width: 56rem) {
	.vb-herosearch__control > .vb-ic {
		display: none;
	}
}

/* KH12: die Zeile unter der Karte wie in der Grafik - zwei gleich gebaute
   Wege, jeder mit einer getoenten Scheibe, halbfett, ohne Unterstrich; der
   Notfallweg beginnt auf halber Kartenbreite. Gemessen vorher: 14,4px,
   Gewicht 400, unterstrichen, nackte Nadel, "Notfall?" bei 19,7 %. */
.vb-herosearch__aside {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 0.5rem 1rem;
	align-items: center;
}

.vb-herosearch__aside a {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	justify-self: start;
	margin: 0;
	font-size: var(--vb-text-label, 0.9rem);
	font-weight: 600;
	text-decoration: none;
}

.vb-herosearch__aside a:hover,
.vb-herosearch__aside a:focus-visible {
	text-decoration: underline;
}

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

.vb-herosearch__disc {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	inline-size: 30px;
	block-size: 30px;
	border-radius: var(--vb-radius-pill, 999px);
	background: var(--vb-primary-soft, #f3e2e7);
}

.vb-herosearch__urgent .vb-herosearch__disc {
	background: var(--vb-danger-soft, #ffece6);
}

/* Auf dem schmalen Telefon stehen beide noch nebeneinander (Grafik), der
   Notfallweg dann nur mit "Notfall?" und Pfeil waere eine andere Zeile als
   auf dem Desktop - also darf er umbrechen statt abgeschnitten zu werden. */
@media (max-width: 22.5rem) {
	.vb-herosearch__aside {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* Tablet hoch: der Streifen des Telefons, mit groesseren Zeichen - die
   Grafik zeigt dort fuenf quadratische Kacheln in einer Reihe. */
@media (min-width: 40rem) and (max-width: 55.99rem) {
	.vb-typetiles {
		gap: 12px;
	}

	.vb-typetiles .vb-typetile {
		padding: 14px 6px;
		gap: 6px;
	}

	.vb-typetiles .vb-typetile > .vb-ic {
		inline-size: 34px;
		block-size: 34px;
	}

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

/* Unter dem Desktop zeigt die Grafik weder die Vertrauenszeile noch die
   Ueberschrift ueber den Kacheln: Kopf, Schlagzeile, Suche, Kachelstreifen,
   dann "Anbieter in Ihrer Naehe". Gemessen vorher auf 390x844: erste Kachel
   bei y=931, unter dem Falz und unter der App-Leiste. Die Ueberschrift
   bleibt fuer Vorleseprogramme im Dokument, sie ist die Gliederung. */
@media (max-width: 79.99rem) {
	.vb-home-trust {
		display: none;
	}

	.vb-typetiles__section > .vb-section__title,
	.vb-typetiles__section > .vb-section__lead {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		margin: 0;
		overflow: hidden;
		clip-path: inset( 50% );
		white-space: nowrap;
	}

	.vb-section.vb-typetiles__section {
		padding-block-start: 1.25rem;
	}
}

/* Gestapelt sind es drei umrandete Kaesten (Grafik), keine Kaesten mit einer
   Haarlinie darunter - die Linie zog unter jedem Kasten eine zweite Kante. */
@media (max-width: 55.99rem) {
	.vb-herosearch__field {
		border-block-end: 0;
	}

	.vb-hero {
		padding-block-end: 1.25rem;
	}
}

@media (max-width: 39.99rem) {
	.vb-section.vb-typetiles__section {
		padding-block-start: 1rem;
	}
}

/* ----- Seitenmitte nach der Nachpruefung vom 23.09.2026 -------------------- */

/* SM15: die Abstaende zwischen den Abschnitten waren 2,5- bis 5-mal so gross
   wie in der Grafik. */
.vb-section {
	padding-block: clamp( 1.5rem, 1rem + 1.4vw, 2.5rem );
}

/* SM16: die Unterzeile steht dicht unter ihrer Ueberschrift. */
.vb-section__title:has( + .vb-section__lead ) {
	margin-bottom: 0;
}

/* SM5: die beiden Karten "Warum" und "So funktioniert es" gleich hoch. */
.vb-why__cols {
	align-items: stretch;
}

.vb-why__col {
	display: flex;
	flex-direction: column;
}

/* SM21: Schrittscheiben wie die Symbolscheiben daneben, der Knopf ueber die
   Spaltenbreite am Fuss der Karte, mit dem Radius der Kartenknoepfe. */
.vb-step__num {
	width: 38px;
	height: 38px;
	font-size: var(--vb-text-body, 1rem);
}

.vb-why__point .vb-ic {
	width: 38px;
	height: 38px;
	padding: 8px;
}

.vb-steps__more {
	margin-top: auto;
	padding-top: 1.25rem;
}

.vb-steps__more .vb-btn {
	justify-content: center;
	inline-size: 100%;
	border-radius: var(--vb-radius-sm, 11px);
}

/* SM22: Beschreibungen nicht unter 14px. */
.vb-why__text,
.vb-step__text,
.vb-typetile__desc,
.vb-bizcard__lead,
.vb-bizcard__list,
.vb-bizcard__second {
	font-size: var(--vb-text-label, 0.9rem);
}

/* S9, SM12, M11: zwei Anbieterkarten auf Tablet und Telefon - drei standen
   dort als 2 + 1 bzw. 950px untereinander. Die dritte bleibt im Markup (die
   Suche dahinter hat sie ohnehin). */
@media (max-width: 79.99rem) {
	.vb-providers__grid > :nth-child( n + 3 ) {
		display: none;
	}

	/* Hier faltet die Ruhige Ansicht nichts zusaetzlich: zwei Karten stehen
	   in beiden Ansichten. Ein "Mehr anzeigen" ohne Wirkung waere ein
	   Versprechen, das die Seite nicht haelt (Gegenpruefung PR #150, m2);
	   der Weg zu allen ist "Alle Betriebe" ueber den Karten. */
	:root[data-focus="reduced"] .vb-providers .vb-calm-more {
		display: none;
	}
}

/* SM13: auf dem Tablet zwei und zwei statt drei und die Betriebskarte allein
   in einer Reihe mit zwei Dritteln Leere. */
@media (min-width: 40rem) and (max-width: 79.99rem) {
	.vb-discover__cols {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

/* SM19: die Koepfe der Kaesten als Ueberschriften, nicht als Versalienzeile,
   und die Abschlusslinks in der Form von "Alle Betriebe ansehen". */
.vb-discover__head {
	font-size: var(--vb-text-body, 1rem);
	letter-spacing: 0;
	text-transform: none;
	color: var(--vb-ink, #30272b);
}

.vb-discover__all a {
	gap: 0.35rem;
	font-weight: 600;
	text-decoration: none;
}

.vb-discover__all a:hover,
.vb-discover__all a:focus-visible {
	text-decoration: underline;
}

.vb-discover__n {
	white-space: nowrap;
}

/* SM9: die Karte fuer Betriebe ist der letzte starke Abschnitt - grosser
   Titel, einzeiliger Knopf ueber die Breite. */
.vb-bizcard .vb-bizcard__head {
	margin-bottom: 0.6rem;
	font-family: var(--vb-display);
	font-size: 1.35rem;
	line-height: 1.2;
}

.vb-bizcard__go .vb-btn {
	justify-content: center;
	inline-size: 100%;
	border-radius: var(--vb-radius-sm, 11px);
	text-wrap: balance;
}

/* S17: die Wege weiter sind auf Beruehrungsgeraeten 44px hoch. */
@media (pointer: coarse) {
	.vb-section__more a,
	.vb-discover__all a,
	.vb-providers__all a,
	.vb-discover__list a {
		min-height: 44px;
	}
}

/* DF7: der Platzhalter "Ort oder PLZ" war im Dunkelmodus die Browserfarbe
   #757575 auf dunklem Feld, 3,27:1. */
.vb-herosearch__field input::placeholder {
	color: var(--vb-muted, #6b5b60);
	opacity: 1;
}

/* DF6: der Fokusring der Felder in dunklem Gruen hatte im Dunkelmodus 2,3:1
   gegen die Flaeche. Dort traegt ihn das helle Markengruen. */
:root[data-theme="dark"] .vb-herosearch__field:focus-within {
	box-shadow: inset 0 0 0 2px var(--vb-primary, #d9a9b7);
}

/* ----- Ruhige Ansicht auf der Startseite (DF1-DF5, DF10, S1, M13) ---------
   Die Grafik zeigt im Fokusmodus fuenf Hauptbloecke: Suche, Betreuungsart,
   Anbieter, So funktioniert es, Fuer Betriebe - alles Weitere hinter einer
   Zeile. Gemessen vorher: Standard und Fokus gleich lang, 3330 zu 3330px.

   Region, Vorspann und die drei Fakten sind Information, keine Deko: sie
   bleiben ueber "Mehr anzeigen" erreichbar (Aufgabe #146). Jede Regel, die
   Information verbirgt, gilt nur, solange ihr Block nicht aufgeklappt ist
   ([data-vb-calm-open]); docs/RUHIGE-ANSICHT.md fuehrt die Liste. */
:root[data-focus="reduced"] [data-vb-calm]:not([data-vb-calm-open]) .vb-eyebrow,
:root[data-focus="reduced"] [data-vb-calm]:not([data-vb-calm-open]) .vb-hero__lead,
:root[data-focus="reduced"] [data-vb-calm]:not([data-vb-calm-open]) .vb-home-trust {
	display: none;
}

:root[data-focus="reduced"] .vb-hero::before {
	display: none;
}

:root[data-focus="reduced"] .vb-providers:not([data-vb-calm-open]) .vb-providers__grid > :nth-child( n + 3 ) {
	display: none;
}

:root[data-focus="reduced"] .vb-providers__grid .vb-practice-card {
	box-shadow: none;
}

:root[data-focus="reduced"] [data-vb-calm]:not([data-vb-calm-open]) .vb-why__text,
:root[data-focus="reduced"] [data-vb-calm]:not([data-vb-calm-open]) .vb-step__text,
:root[data-focus="reduced"] [data-vb-calm]:not([data-vb-calm-open]) .vb-why__more {
	display: none;
}

:root[data-focus="reduced"] .vb-why__list,
:root[data-focus="reduced"] .vb-steps {
	gap: 0.6rem;
}

:root[data-focus="reduced"] .vb-why__point,
:root[data-focus="reduced"] .vb-step {
	align-items: center;
}

/* Kompakte Kacheln: Symbol und Kurzname, wie der Streifen des Telefons -
   nur das Symbol wie in der Grafik waere ohne sichtbaren Namen unsinnig. */
:root[data-focus="reduced"] .vb-typetiles__section:not([data-vb-calm-open]) .vb-typetiles {
	grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
	gap: 10px;
}

:root[data-focus="reduced"] .vb-typetiles__section:not([data-vb-calm-open]) .vb-typetiles .vb-typetile {
	min-height: 0;
	padding: 12px 6px;
	gap: 6px;
}

:root[data-focus="reduced"] .vb-typetiles__section:not([data-vb-calm-open]) .vb-typetiles .vb-typetile > .vb-ic {
	inline-size: 30px;
	block-size: 30px;
}

:root[data-focus="reduced"] .vb-typetiles__section:not([data-vb-calm-open]) .vb-typetiles .vb-typetile__label {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

:root[data-focus="reduced"] .vb-typetiles__section:not([data-vb-calm-open]) .vb-typetiles .vb-typetile__short {
	display: block;
	font-size: var(--vb-text-label, 0.9rem);
	font-weight: 600;
	hyphens: auto;
	-webkit-hyphens: auto;
}

:root[data-focus="reduced"] .vb-typetiles__section:not([data-vb-calm-open]) .vb-typetiles .vb-typetile__desc,
:root[data-focus="reduced"] .vb-typetiles__section:not([data-vb-calm-open]) .vb-typetiles .vb-typetile__go,
:root[data-focus="reduced"] .vb-typetiles__section:not([data-vb-calm-open]) > .vb-section__lead {
	display: none;
}

/* ----- Bildflaechen der Vorlage als Platzhalter (Inhaber 23.09.2026) ------ */

/* Das Bildband links neben "Warum" - nur auf dem Desktop, wie die Grafik es
   zeigt; darunter waere es eine dritte Karte ohne Inhalt. */
.vb-why__art {
	display: none;
}

@media (min-width: 80rem) {
	.vb-why__cols {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr ) minmax( 0, 1fr );
		gap: 1.5rem;
	}

	.vb-why__art {
		display: block;
	}

	.vb-why__art .vb-photo {
		block-size: 100%;
		aspect-ratio: auto !important;
		border-radius: var(--vb-radius-lg, 22px);
		overflow: hidden;
	}

	.vb-why__art .vb-photo img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
	}
}

/* Der Kopf der Anbieterkarten der Startseite (#395, AniLevia #408): statt
   104px Kreisflaeche, die jede Karte ohne eigenes Foto leer und hoch machte,
   der Kartenkopf-Streifen des Markenpakets je Betriebsart - 56px, hell und
   dunkel, eine Symbolgrafik ohne Aussage (alt leer, die Art steht als Text
   auf der Karte). Als Pseudo-Element, damit die Suchseite unberuehrt bleibt.
   Arten ohne eigenen Streifen bekommen die getoente Flaeche ihrer Art. */
.vb-providers__grid .vb-practice-card {
	overflow: hidden;
	padding-top: 0;
}

.vb-providers__grid .vb-practice-card::before {
	content: "";
	display: block;
	block-size: 56px;
	margin: 0 -18px 0;
	/* Rechtsbuendig: das Symbol steht rechts im Streifen und bleibt ganz;
	   cover statt fester Hoehe, sonst bleibt links ein Rand in anderem Ton. */
	background: var(--vb-cat-soft, #f3e2e7) right center / cover no-repeat;
}

/* Das Merken-Herz stand oben rechts genau auf dem Symbol: unter den
   Streifen, neben das Zeichen. */
.vb-providers__grid .vb-practice-card .vb-favorite--compact {
	inset-block-start: 66px;
}

.vb-providers__grid .vb-practice-card[data-type="vet"]::before { background-image: url("../brand/cards/vet-light.svg"); }
.vb-providers__grid .vb-practice-card[data-type="groomer"]::before { background-image: url("../brand/cards/groomer-light.svg"); }
.vb-providers__grid .vb-practice-card[data-type="walker"]::before { background-image: url("../brand/cards/walker-light.svg"); }
.vb-providers__grid .vb-practice-card[data-type="sitter"]::before { background-image: url("../brand/cards/sitter-light.svg"); }
.vb-providers__grid .vb-practice-card[data-type="boarding"]::before { background-image: url("../brand/cards/boarding-light.svg"); }
:root[data-theme="dark"] .vb-providers__grid .vb-practice-card[data-type="vet"]::before { background-image: url("../brand/cards/vet-dark.svg"); }
:root[data-theme="dark"] .vb-providers__grid .vb-practice-card[data-type="groomer"]::before { background-image: url("../brand/cards/groomer-dark.svg"); }
:root[data-theme="dark"] .vb-providers__grid .vb-practice-card[data-type="walker"]::before { background-image: url("../brand/cards/walker-dark.svg"); }
:root[data-theme="dark"] .vb-providers__grid .vb-practice-card[data-type="sitter"]::before { background-image: url("../brand/cards/sitter-dark.svg"); }
:root[data-theme="dark"] .vb-providers__grid .vb-practice-card[data-type="boarding"]::before { background-image: url("../brand/cards/boarding-dark.svg"); }

/* Ruhige Ansicht: keine Schmuckgrafik, nur die Flaeche. Mit [data-type],
   damit die Regel auch die Dunkel-Regeln oben (gleiche Spezifitaet, spaeter
   im Text) schlaegt. */
:root[data-focus="reduced"] .vb-providers__grid .vb-practice-card::before,
:root[data-focus="reduced"] .vb-providers__grid .vb-practice-card[data-type]::before,
:root[data-focus="reduced"][data-theme="dark"] .vb-providers__grid .vb-practice-card[data-type]::before {
	background-image: none;
}

/* Leere Abzeichenzeile ohne eigenen Abstand; das Zeichen ruecke auf die
   Bildkante, mit weissem Ring wie das Logo auf dem Profil. */
.vb-providers__grid .vb-practice-card__badges:empty {
	display: none;
}

.vb-providers__grid .vb-practice-card__avatar {
	margin-top: -20px;
	box-shadow: 0 0 0 3px var(--vb-base, #fbf7f2);
}

.vb-providers__grid .vb-practice-card__head {
	align-items: flex-start;
}

/* "Weiter entdecken" (SM8): die Kaesten waren doppelt so hoch wie in der
   Grafik, weil die Artikeltitel in Fliesstextgroesse mit weitem Zeilenabstand
   standen und Tierart und Region darunter Leere liessen. */
.vb-discover__list {
	font-size: var(--vb-text-label, 0.9rem);
}

.vb-discover__list a {
	line-height: 1.35;
}

/* ----- Kurzformen auf dem Telefon (OB2, OB3, M10) -------------------------
   Die Grafik setzt auf dem Telefon "Standort verwenden", "Notfall? ->" und
   "Alle ->" - kurz, je eine Zeile. Die lange Form bleibt fuer Vorleseprogramme
   im Dokument (die kurze ist aria-hidden), sie wird nur abgeblendet. */
.vb-herosearch__short,
.vb-section__more-short {
	display: none;
}

@media (max-width: 47.99rem) {
	.vb-section__more-long {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset( 50% );
		white-space: nowrap;
	}

	.vb-section__more-short {
		display: inline;
	}

	/* Ueberschrift und "Alle ->" in einer Zeile, der Satz darunter. */
	.vb-section__bar .vb-section__title {
		flex: 1 1 0;
		min-width: 0;
		order: 1;
	}

	.vb-section__bar .vb-section__more {
		flex: 0 0 auto;
		order: 2;
	}

	.vb-section__bar .vb-section__lead {
		order: 3;
	}
}

@media (max-width: 39.99rem) {
	.vb-herosearch__long {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset( 50% );
		white-space: nowrap;
	}

	.vb-herosearch__short {
		display: inline;
	}

	.vb-herosearch__aside a {
		white-space: nowrap;
	}

	/* Der Notfallweg rechtsbuendig, wie in der Grafik. */
	.vb-herosearch__urgent {
		justify-self: end;
	}
}

/* ----- Warum / So funktioniert es naeher an der Grafik (OB12-OB14) -------- */
@media (min-width: 80rem) {
	.vb-why__cols {
		grid-template-columns: minmax( 0, 1.3fr ) minmax( 0, 1fr ) minmax( 0, 1fr );
	}
}

/* Weisse Karten mit weichem Schatten statt Rahmen. */
.vb-why__col {
	border-color: transparent;
	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));
}

/* Die Schrittnummer groesser als die Symbolscheiben daneben, die Ziffer
   groesser als der Schritttitel. */
.vb-step__num {
	width: 44px;
	height: 44px;
	font-size: 1.25rem;
}

/* Kachelsymbole: die gezeichnete Flaeche war 17 % der Kachelbreite, die
   Grafik zeigt rund 23 % (OB7). */
@media (min-width: 64rem) {
	.vb-typetile > .vb-ic {
		inline-size: 52px;
		block-size: 52px;
	}
}

/* ----- Telefon, PWA und Tablet hoch: der Kopf wie das Profil --------------
   Inhaber 23.09.2026: das Profil in der PWA - Titelbild als abgerundete
   Flaeche, die Karte darunter auf der Kante - soll auch der Startseite den
   Kopf geben, nach der mobilen Vorschaugrafik (Schlagzeile auf dem Bild, das
   Tier rechts, die Suchkarte ueberlappt die Unterkante). Bis hierher war der
   Hero auf dem Telefon ein blanker Verlauf ohne Bild. Das Bild ist das Foto
   aus dem Customizer oder, solange keins belegt ist, die Platzhaltergrafik.
   Auch in der installierten App: die Grafik zeigt das Bild dort ausdruecklich
   ("Mobile - Startseite (PWA-optimiert)"), und es ist ein Band, kein
   bildschirmfuellendes Foto. */
@media (max-width: 55.99rem) {
	.vb-hero {
		background: none;
		padding-block: 0.75rem 1rem;
		overflow: visible;
	}

	.vb-hero__inner {
		position: relative;
		isolation: isolate;
		overflow: hidden;
		padding: 1.5rem 1.25rem 4.5rem;
		border-radius: var(--vb-radius-lg, 22px);
		background:
			radial-gradient(55% 75% at 88% -5%, rgba(174, 230, 58, 0.18), transparent 60%),
			linear-gradient(160deg, var(--vb-tint, #f3e2e7) 0%, var(--vb-cream, #f2e7df) 58%, var(--vb-base, #fbf7f2) 100%);
	}

	.vb-hero__visual {
		display: block;
		position: absolute;
		inset: 0 0 0 auto;
		z-index: -1;
		inline-size: 62%;
		min-height: 0;
		margin: 0;
	}

	.vb-hero__photo {
		inline-size: 100%;
		block-size: 100%;
		max-width: none;
		margin: 0;
		border-radius: 0;
		transform: none;
		box-shadow: none;
		aspect-ratio: auto !important;
	}

	.vb-hero__photo img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
	}

	/* Der Uebergang ins Helle, damit die Schrift auf Grund steht und nicht
	   auf dem Bild - derselbe Verlauf wie auf dem Desktop, aus Tokens. */
	.vb-hero__inner::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		pointer-events: none;
		background: linear-gradient(
			to right,
			var(--vb-tint, #f3e2e7) 0%,
			var(--vb-tint, #f3e2e7) 38%,
			color-mix( in srgb, var(--vb-tint, #f3e2e7) 55%, transparent ) 62%,
			color-mix( in srgb, var(--vb-tint, #f3e2e7) 0%, transparent ) 88%
		);
	}

	.vb-hero__copy {
		position: relative;
	}

	/* Die Suchkarte auf der Kante der Bildflaeche, wie die Kennkarte auf dem
	   Titelbild des Profils. */
	.vb-hero__search {
		position: relative;
		z-index: 2;
		margin-block-start: -3.5rem;
		padding-inline: 0.625rem;
	}

	/* Die Platzhaltergrafik legt ihr Zeichen oben rechts ab, nicht in die
	   Mitte der Bahn - dort stuende es unter der Unterzeile. Ein Foto fuellt
	   die Bahn ohnehin. */
	.vb-hero__visual .vb-photo--art {
		place-items: start end;
		padding: 18px 18px 0 0;
		box-sizing: border-box;
	}

	.vb-hero__visual .vb-photo__motif {
		inline-size: 64px;
	}
}

/* Ruhige Ansicht: das Band bleibt, das Bild tritt zurueck. */
:root[data-focus="reduced"] .vb-hero__inner::after {
	background: var(--vb-tint, #f3e2e7);
	opacity: 0.85;
}

/* Telefon: die beiden Wege als Zeile mit Luft dazwischen statt zweier fester
   Spalten - "Standort verwenden" stiess an die Notfall-Scheibe. */
@media (min-width: 22.51rem) and (max-width: 39.99rem) {
	.vb-herosearch__aside {
		display: flex;
		justify-content: space-between;
		gap: 12px;
	}
}

/* ----- Text ueber dem Bild bleibt lesbar (Inhaber 23.09.2026) -------------
   Gemessen am Pixel unter jeder Zeile, schlechteste 10 %: der Vorspann lief
   auf dem Telefon rechts ueber die Bildkachel (2,7:1 hell, 2,1:1 dunkel, auf
   Franzoesisch 2,3:1), "Notfall? Jetzt Hilfe finden" stand auf 1024 und 1440
   auf dem Foto (2,2 bis 4,0:1), "Meinen Standort verwenden" auf 1440 knapp
   darunter (4,47:1). Verlangt sind 4,5:1.

   Eine Unterlage nur dort, wo wirklich ein Bild hinter dem Text liegt
   (Inhaber: "Transparenz hinter dem Text? Sieht in der PWA nicht gut aus").
   Die beiden Wege liegen nur ab 56rem auf dem Foto - darunter stehen sie
   unter der Suchkarte auf einfarbigem Grund -, und in der App ab 56rem zeigt
   der Kopf kein Foto (§65): dort waeren die Flaechen leere Kaesten. */
@media (min-width: 56rem) {
	.vb-herosearch__aside a {
		padding: 3px 12px 3px 3px;
		border-radius: var(--vb-radius-pill, 999px);
		background: color-mix( in srgb, var(--vb-base, #fbf7f2) 92%, transparent );
		-webkit-backdrop-filter: saturate( 160% ) blur( 8px );
		backdrop-filter: saturate( 160% ) blur( 8px );
	}
}

@media all and (display-mode: standalone) {
	.vb-herosearch__aside a {
		padding: 0;
		border-radius: 0;
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}



/* Die Vertrauenszeile stand so breit wie die Suchkarte (bis x=1076 bei
   1440px) und endete nur auf Deutsch vor dem Foto (716). "Pour tous les
   animaux" lief bis 890, "Para todos os animais" bis 822 - im Dunkelmodus
   helle Schrift auf weissem Fell, gemessen 2,4 bis 4,3:1. Sie bekommt die
   Breite der Textspalte: in laengeren Sprachen bricht die dritte Aussage in
   eine zweite Reihe um, statt ins Bild zu laufen. */
@media (min-width: 56rem) {
	.vb-home-trust {
		max-inline-size: 34rem;
	}
}

/* ----- Der Kopf nach der Vorschaugrafik (Inhaber 24.09.2026) -------------
   "Ich moechte, dass du ihn so baust, wie er in der Vorschaugrafik gezeigt
   wurde." Schlagzeile marineblau (#0f1c45, an der Grafik gemessen) in einer
   schlichten Grotesk. Damit ist KH19 fuer die Schlagzeile entschieden; die
   Wortmarke bleibt. */
.vb-hero__title {
	/* AniLevia (#408): the one public display line in Cormorant Garamond,
	   as the brand package's drafts set it - in place of the plain grotesque
	   of the earlier reference graphic (KH19, 24.09.2026). */
	font-family: var(--vb-serif, "Cormorant Garamond", Georgia, serif);
	font-weight: 600;
	letter-spacing: 0;
	color: var(--vb-hero-ink);
}

/* ----- Das Foto fuellt die ganze Box, ohne Schleier (24.09.2026) ----------
   Inhaber: "Diese Transparenz im Header gefaellt mir nicht" - und auf die
   Frage nach den Varianten: "Komplette Box", auch auf dem Telefon. Kein
   Nebel, keine Maske, keine Glasflaeche: die Schrift steht direkt auf dem
   Foto. Lesbar ist sie, weil die Fotos dafuer ausgewaehlt und zugeschnitten
   sind - links hell und ruhig, wie in der Vorlage -, nicht weil etwas
   darueber liegt. Gemessen am Pixel unter jeder Zeile (scripts/
   text-over-image.mjs), 320 bis 1920px, hell und dunkel. Vorspann,
   Oberzeile und Vertrauenszeile deshalb im Marineblau der Schlagzeile: der
   Schieferton kam auf dem Foto nur auf 3,1 bis 4,2:1. */
.vb-hero__lead,
.vb-hero .vb-eyebrow__where,
.vb-home-trust {
	color: var(--vb-hero-ink);
}

.vb-hero::before,
.vb-hero__inner::after {
	display: none;
}

@media (min-width: 56rem) {
	.vb-hero__visual {
		width: 100%;
	}
}

@media (max-width: 55.99rem) {
	.vb-hero__inner {
		background: var(--vb-hero-fog);
	}

	.vb-hero__visual {
		inline-size: 100%;
	}

	/* Vor den Tieren umbrechen, wie in der Grafik ("In Ihrer Naehe. In
	   Ihrer Sprache. / Mit Herz."): in einer Zeile lief er auf 390px ueber
	   die Katze (4,2:1). */
	.vb-hero__lead {
		max-inline-size: 15em;
	}

	/* Lichthof um die Schrift (Inhaber 24.09.2026, Variante B): auf dem
	   Telefon liegt die Schrift ueber Pflanze, Korb und Schnauze - der
	   Kontrast reichte gemessen, lesen liess es sich trotzdem schwer. Das
	   Foto bleibt unberuehrt; ein weicher Schein in der Farbe des Grundes
	   loest die Buchstaben vom Bild, der Vorspann wird kraeftiger. Im
	   Dunkelmodus ist der Grund dunkel und der Schein mit ihm. */
	.vb-hero__title,
	.vb-hero__lead {
		text-shadow:
			0 0 1px var(--vb-hero-fog),
			0 0 6px var(--vb-hero-fog),
			0 0 12px var(--vb-hero-fog),
			0 0 20px color-mix( in srgb, var(--vb-hero-fog) 80%, transparent );
	}

	.vb-hero__lead {
		font-weight: 500;
	}
}

/* Die Bilder der Rotation liegen uebereinander und blenden ineinander
   (hero-rotation.js). Wo jedes steht, sagt es selbst: Brennpunkt und - ab
   Tablet - ein etwas engerer Ausschnitt, gemessen je Foto. */
.vb-hero__slide {
	position: absolute;
	inset: 0;
	overflow: hidden;
	opacity: 0;
	transition: opacity 1.6s ease-in-out;
}

.vb-hero__slide.is-active {
	z-index: 2;
	opacity: 1;
}

/* Das gehende Bild bleibt deckend unter dem kommenden, bis dieses ganz da
   ist - sonst schien beim Wechsel der helle Grund durch. */
.vb-hero__slide.is-leaving {
	z-index: 1;
	opacity: 1;
	transition: none;
}

/* Die alte Hover-Regel (0,3,0) hob die Fotokarte um 4px; im randlosen Kopf
   blitzte darunter ein Streifen Grund auf. */
.vb-hero__visual:hover .vb-hero__slide .vb-hero__photo {
	transform: none;
}

.vb-hero__slide .vb-hero__photo img {
	object-position: var(--vb-slide-pos, 50% 40%);
}

@media (min-width: 56rem) {
	.vb-hero__slide .vb-hero__photo img {
		transform: scale( var(--vb-slide-zoom, 1) );
		/* Links verankert: der Zoom schiebt die Tiere nach rechts, weg von
		   Schlagzeile und Suchkarte, und legt mehr ruhigen Raum unter den
		   Text (Probe 1440px: beim Trio lag das Hundegesicht sonst hinter
		   der Suchkarte). */
		transform-origin: left center;
	}
}

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

/* Dunkelmodus: helle Schrift auf abgedunkeltem Foto - dieselbe Messung,
   0,42 ist die hellste Stufe, auf der jede Zeile 4,5:1 erreicht. */
:root[data-theme="dark"] .vb-hero__photo img {
	filter: brightness( 0.42 );
}

/* Die Oberzeile ("Luxemburg") ist die kleinste Schrift auf dem Foto
   (13,6px) und liegt oben links, wo Fotos am ehesten Pflanzen, Rahmen und
   Moebel zeigen: beim Trio 2,7 bis 4,4:1 auf Tablet und bis 1280px, bei
   jedem Ausschnitt. Sie bekommt dieselbe deckende Pille wie die Wege unter
   der Suche - keine Glasflaeche, lesbar auf jedem Foto der Rotation.
   Abweichung von KH17 (Vorlage ohne Pille): die Vorlage liegt auf Nebel,
   hier liegt sie auf dem Foto. Auf dem Telefon zeigt sie die Grafik nicht. */
.vb-hero .vb-eyebrow {
	padding: 4px 12px;
	border-radius: var(--vb-radius-pill, 999px);
	background: var(--vb-base, #fbf7f2);
	box-shadow: none;
}

/* Die zwei Wege unter der Suchkarte liegen ab 56rem auf dem Foto: eine
   deckende Unterlage, keine Glasflaeche. */
@media (min-width: 56rem) {
	.vb-herosearch__aside a {
		padding: 3px 12px 3px 3px;
		border-radius: var(--vb-radius-pill, 999px);
		background: var(--vb-base, #fbf7f2);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* Installierte App ab 56rem: der Kopf zeigt kein Foto (§65). Dann auch
   keine Unterlagen, die nur auf einem Foto Sinn haben, und kein Knopf. */
@media all and (display-mode: standalone) and (min-width: 56rem) {
	.vb-hero .vb-herosearch__aside a,
	.vb-hero .vb-eyebrow {
		padding: 0;
		border-radius: 0;
		background: none;
	}
}