/* ============================================================
   Gast-Vorschau der Einrichtungen (Marc, 03.10.2026)
   ============================================================
   Was ein Gast auf der Seite einer Einrichtung oder auf der
   Anbieterseite /company/ sieht, baut Inklusio_Vorschau (PHP);
   hier steht nur, wie es aussieht. Der Kasten nimmt die Regeln
   von .ink-vorschau-kasten aus components.css (orange, weisse
   Knopfschrift – Marcs Entscheidung), die Eckdaten die von
   .ink-eckdaten, die Plaketten die von .ink-maskiert. Neu sind
   der gekürzte Text und der Satz darunter.

   Farben nur über --ink-*-Variablen. Kontrast gerechnet (WCAG):
   --ink-text-muted (#545C6B) auf Weiss 6,67 : 1, auf dem Sand der
   Seite (#FDFAF5) 6,46 : 1. Handy-Regeln am Ende, in einer
   max-width-Abfrage (47.99em), wie in mobil.css.
   ------------------------------------------------------------ */

/* Der gekürzte, maskierte Text: ruhig, lesbar, ohne Unschärfe –
   was fehlt, steht darunter als Satz, nicht als Rätsel. */
.ink-gasttext {
	position: relative;
}

.ink-gasttext > p:first-child {
	margin-top: 0;
}

/* Der Satz unter dem Text: dezent abgesetzt, wie die Fusszeile
   unter einem Stellentext (.ink-stellenfuss). */
.ink-gasttext__hinweis {
	margin: var(--ink-space-3) 0 0;
	padding-top: var(--ink-space-3);
	border-top: 1px solid var(--ink-border-subtle);
	font-size: var(--ink-text-sm);
	line-height: 1.5;
	color: var(--ink-text-muted);
}

/* Der Kasten auf der Einrichtungsseite: unter Bereich und Datum,
   mit Luft nach beiden Seiten – wie auf dem Fachkraft-Profil. */
.ink-vorschau-kasten--einrichtung {
	margin: var(--ink-space-4) 0 var(--ink-space-5);
}

/* Auf der Anbieterseite sitzt er in der Seitenspalte unter der
   Zusammenfassung; dort ist die Spalte schmal, also untereinander. */
.hp-vendor--view-page .ink-vorschau-kasten--einrichtung,
.ink-gastvorschau .hp-vendor__summary .ink-vorschau-kasten--einrichtung {
	flex-direction: column;
	align-items: flex-start;
	margin-top: var(--ink-space-4);
}

.ink-gastvorschau .hp-vendor__summary .ink-vorschau-kasten--einrichtung .ink-vorschau-kasten__weg {
	width: 100%;
}

/* Die Eckdaten (Träger) unter dem Ort: dasselbe Mint-Symbol wie bei
   den Eckdaten einer Stelle (components.css, .ink-eckdaten .hp-icon). */
.ink-eckdaten--einrichtung .hp-icon {
	color: var(--ink-mint-600);
}

/* Fokusring auf dem leisen zweiten Weg („Anmelden") im Kasten –
   weiss auf Orange, 3 px, wie die übrigen Fokusringe auf farbigem Grund. */
.ink-vorschau-kasten--einrichtung .ink-vorschau-kasten__anmelden:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
	border-radius: var(--ink-radius-sm);
}

/* ------------------------------------------------------------
   Handy
   ------------------------------------------------------------ */
@media (max-width: 47.99em) {
	.ink-vorschau-kasten--einrichtung {
		margin: var(--ink-space-4) 0;
	}

	.ink-vorschau-kasten--einrichtung .ink-vorschau-kasten__weg {
		width: 100%;
	}

	.ink-vorschau-kasten--einrichtung .ink-vorschau-kasten__weg .ink-btn {
		flex: 1 1 auto;
	}

	.ink-gasttext__hinweis {
		font-size: var(--ink-text-xs);
	}
}