/* ==========================================================================
   Betriebe ohne eigene Medien: Initialen statt Linien-Symbol (Aufgabe #232)

   Die Suchkarte, der Logo-Platz im Profil und das Profilband zeigten fuer
   jeden Betrieb ohne eigenes Bild dasselbe duenne Funktionssymbol seiner
   Art - in drei Groessen, als unfertiger Platzhalter. Jetzt entscheidet
   BusinessMedia je Feld: eigenes Bild, sonst das Kategorie-Bild der Art
   (#186, sobald gesetzt), sonst die Initialen als HTML-Text auf der ruhigen
   Farbe der Art. Hier stehen die Farben der Arten und die Kachel; das Band
   steht in profile.css bei den anderen Baendern.

   Farben laut Grafik-Lead (04.10.2026), Hintergrund / Initialenfarbe, hell
   und dunkel. BusinessMedia::PALETTE traegt dieselben Werte;
   BusinessMediaTest haelt beide zusammen und misst jedes Paar mit
   mindestens 4,5:1. Dunkel nur ueber den Umschalter, nie ueber das Geraet.
   ========================================================================== */

.vb-tone--vet      { --vb-tone-bg: #F3E2E7; --vb-tone-ink: #68192E; }
.vb-tone--walker   { --vb-tone-bg: #F5E6DA; --vb-tone-ink: #68192E; }
.vb-tone--sitter   { --vb-tone-bg: #EFE6EC; --vb-tone-ink: #68192E; }
.vb-tone--boarding { --vb-tone-bg: #F2EBE3; --vb-tone-ink: #68192E; }
.vb-tone--groomer  { --vb-tone-bg: #F2E7DF; --vb-tone-ink: #68192E; }
.vb-tone--trainer  { --vb-tone-bg: #F2E7DF; --vb-tone-ink: #68192E; }
.vb-tone--therapy  { --vb-tone-bg: #F3E2E7; --vb-tone-ink: #68192E; }

:root[data-theme="dark"] .vb-tone--vet      { --vb-tone-bg: #432530; --vb-tone-ink: #F2B3C3; }
:root[data-theme="dark"] .vb-tone--walker   { --vb-tone-bg: #3D2D25; --vb-tone-ink: #F2B3C3; }
:root[data-theme="dark"] .vb-tone--sitter   { --vb-tone-bg: #3A2A36; --vb-tone-ink: #F2B3C3; }
:root[data-theme="dark"] .vb-tone--boarding { --vb-tone-bg: #3A3026; --vb-tone-ink: #F2B3C3; }
:root[data-theme="dark"] .vb-tone--groomer  { --vb-tone-bg: #3A2C26; --vb-tone-ink: #F2B3C3; }
:root[data-theme="dark"] .vb-tone--trainer  { --vb-tone-bg: #3A2C26; --vb-tone-ink: #F2B3C3; }
:root[data-theme="dark"] .vb-tone--therapy  { --vb-tone-bg: #432530; --vb-tone-ink: #F2B3C3; }

/* Die Ruhige Ansicht haelt eine Akzentfarbe fuer die ganze Seite (Teil C
   §38): jede Art in den Farben der Tierarztpraxis. */
:root[data-focus="reduced"] [class*="vb-tone--"] {
	--vb-tone-bg: #F3E2E7;
	--vb-tone-ink: #68192E;
}

:root[data-focus="reduced"][data-theme="dark"] [class*="vb-tone--"] {
	--vb-tone-bg: #432530;
	--vb-tone-ink: #F2B3C3;
}

/* ----- Die Kachel ----------------------------------------------------------
   Gesetzter Text in der lokal geladenen Hausschrift, kein Bild: kein
   „Symbolbild“-Hinweis, keine Fremdquelle, im Screenreader still (der Name
   steht daneben). Groesse und Schrift setzt der Platz, an dem sie steht. */
.vb-initials {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	overflow: hidden;
	border-radius: var(--vb-radius-sm, 11px);
	background: var(--vb-tone-bg, #f3e2e7);
	color: var(--vb-tone-ink, #68192e);
	font-family: var(--vb-display, inherit);
	font-size: 26px;
	font-weight: 700;
	font-style: normal;
	line-height: 32px;
	letter-spacing: 0;
	text-align: center;
	white-space: nowrap;
	-webkit-user-select: none;
	user-select: none;
}

/* Hinter einem Bild liegt die Kachel nur bereit: faellt das Bild aus,
   nimmt business-media.js es heraus und setzt data-media="initials". */
[data-media="own"] > .vb-initials,
[data-media="category"] > .vb-initials {
	display: none;
}

/* ----- Die Suchkarte ------------------------------------------------------
   Ohne eigenes Foto ein Quadrat: die Initialen-Kachel oder, sobald gesetzt,
   das Kategorie-Bild der Art (#186) in denselben Massen - Telefon 64 x 64
   neben dem Namen, „Details“ und Telefon darunter ueber die volle Breite;
   ab 48rem 112 x 112. Der Kasten selbst ist nur eine Spalte: das Quadrat
   oben, darunter (ausserhalb des Quadrats) „Symbolbild“ bzw. „Heute
   verfügbar“. Mit eigenem Foto bleibt die Bildspalte, wie sie war.
   Jede Karte traegt data-media, daher reichen die Regeln hier ueber die
   gleich gewichteten in search.css, die nach diesem Blatt geladen werden. */
.vb-find .vb-practice-card[data-media] {
	padding: 16px;
	row-gap: 12px;
}

.vb-find .vb-practice-card[data-media="initials"],
.vb-find .vb-practice-card[data-media="category"] {
	grid-template-columns: 64px minmax( 0, 1fr );
}

.vb-find .vb-practice-card__media[data-media="initials"],
.vb-find .vb-practice-card__media[data-media="category"] {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-self: start;
	width: 64px;
	height: auto;
	min-height: 0;
	aspect-ratio: auto;
	overflow: visible;
	border-radius: 0;
	background: none;
}

.vb-find .vb-practice-card__media[data-media="initials"] .vb-initials,
.vb-find .vb-practice-card__media[data-media="category"] .vb-practice-card__img {
	flex: none;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: var(--vb-radius-sm, 11px);
}

/* Quadratisch beschnitten, nie verzerrt. */
.vb-find .vb-practice-card__media[data-media="category"] .vb-practice-card__img {
	object-fit: cover;
	object-position: 50% 50%;
}

/* Auf 64px passt „Heute verfügbar“ nicht; dieselbe Auskunft steht in der
   Terminleiste der Karte. */
.vb-find .vb-practice-card__media[data-media="initials"] .vb-practice-card__today,
.vb-find .vb-practice-card__media[data-media="category"] .vb-practice-card__today {
	display: none;
}

@media ( min-width: 48rem ) {
	.vb-find .vb-practice-card[data-media="initials"],
	.vb-find .vb-practice-card[data-media="category"] {
		grid-template-columns: 112px minmax( 0, 1fr ) 184px;
	}

	.vb-find .vb-practice-card__media[data-media="initials"],
	.vb-find .vb-practice-card__media[data-media="category"] {
		gap: 6px;
		width: 112px;
	}

	.vb-find .vb-practice-card__media[data-media="initials"] .vb-initials {
		font-size: 40px;
		line-height: 48px;
	}

	/* Unter dem Quadrat statt darauf: kein Text ueber Initialen oder Bild. */
	.vb-find .vb-practice-card__media[data-media="initials"] .vb-practice-card__today,
	.vb-find .vb-practice-card__media[data-media="category"] .vb-practice-card__today {
		position: static;
		display: inline-flex;
		align-self: flex-start;
		max-width: 100%;
		border: 1px solid var(--vb-line, #d9c7c1);
		box-shadow: none;
	}
}

/* Ab 900px die Masse des Grafik-Leads fuer jede Karte: Mindesthoehe 168,
   Innen- und Spaltenabstand 20. */
@media ( min-width: 56.25rem ) {
	.vb-find .vb-practice-card[data-media] {
		min-height: 168px;
		padding: 20px;
		column-gap: 20px;
	}
}

/* Ein Kategorie-Bild (#186) ist fuer jeden Betrieb der Art dasselbe und
   sagt es: „Symbolbild“ als Zeile unmittelbar unter dem Quadrat, in HTML,
   mindestens 12px - nie auf dem Bild. */
.vb-practice-card__symbol {
	display: block;
	flex: none;
	color: var(--vb-muted, #6b5b60);
	font-size: 12px;
	line-height: 16px;
	overflow-wrap: anywhere;
}

[data-media="initials"] > .vb-practice-card__symbol {
	display: none;
}

/* Eigenes Foto (#350): „Heute verfügbar“ steht nie auf dem Bild. Auf dem
   Telefon war die Pille zweizeilig 100x47 px auf einem 104 px großen Foto -
   vom Bild blieb kaum etwas. Dort sagt es die Terminzeile der Karte
   („Heute 10:30 …“); ab 48rem steht die Pille unter dem Foto. Das Foto
   behält seine Fläche: die Pille hängt unter der Bildspalte, und die Karte
   bekommt unten so viel Raum dazu, wie die Pille braucht. */
.vb-find .vb-practice-card__media[data-media="own"] .vb-practice-card__today {
	display: none;
}

@media ( min-width: 48rem ) {
	.vb-find .vb-practice-card:has( .vb-practice-card__media[data-media="own"] .vb-practice-card__today ) {
		padding-bottom: calc( 16px + 6px + 2.25rem );
	}

	.vb-find .vb-practice-card__media[data-media="own"]:has( .vb-practice-card__today ) {
		overflow: visible;
	}

	.vb-find .vb-practice-card__media[data-media="own"]:has( .vb-practice-card__today ) .vb-practice-card__img {
		border-radius: inherit;
	}

	.vb-find .vb-practice-card__media[data-media="own"] .vb-practice-card__today {
		inset: calc( 100% + 6px ) auto auto 0;
		display: inline-flex;
		max-width: 100%;
		border: 1px solid var(--vb-line, #d9c7c1);
		box-shadow: none;
	}
}