/**
 * Schlaflabor-Einzelseiten — Ergänzungen zum Design-System der Standortseiten.
 *
 * Die Typografie kommt vollständig aus standorte.css. Hier stehen ausschließlich
 * Layout-Regeln und die drei Bausteine, die es auf Standortseiten nicht gibt:
 * die Karte "Ihr Weg ins Schlaflabor", der Nacht-Zeitplan und die Öffnungszeiten
 * als Freitext. Deren Schriftwerte sind bewusst von den Standort-Pendants
 * übernommen und nicht neu erfunden.
 */

/* ---------- Karte "Ihr Weg ins Schlaflabor" ---------- */

.st-page .sl-weg__kicker {
	margin-bottom: 6px;
}

/* Entspricht .st-buchung__titel der Standortseiten. */
.st-page .sl-weg__titel {
	margin: 0 0 12px;
	font-family: var(--st-display);
	font-weight: 500;
	font-size: 24px;
	line-height: 1;
	letter-spacing: -.005em;
	color: var(--st-blau);
}

/* Entspricht .st-prosa der Standortseiten. */
.st-page .sl-weg__text {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.47;
	color: var(--st-text);
}

.st-page .sl-weg__text p {
	margin: 0 0 1.1em;
}

.st-page .sl-weg__text p:last-child {
	margin-bottom: 0;
}

/* Entspricht .st-btn, ergänzt um den Pfeil rechts. */
.st-page .sl-btn {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr) 16px;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
	padding: 14px 18px;
	border-radius: var(--st-radius-pill);
	background: var(--st-blau);
	color: var(--st-weiss);
	font-family: var(--st-text-font);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.47;
	text-decoration: none;
	transition: background-color .18s ease;
}

.st-page .sl-btn:hover {
	background: var(--st-blau-tief);
	color: var(--st-weiss);
}

.st-page .sl-btn .st-icon {
	width: 22px;
	height: 22px;
}

.st-page .sl-btn .st-icon:last-child {
	width: 16px;
	height: 16px;
}

.st-page .sl-weg__daten {
	margin-top: 20px;
	padding-top: 24px;
}

.st-page .sl-weg__zeiten-label,
.st-page .sl-weg__zeiten-zeile {
	display: block;
}

/* ---------- Ablauf der Nacht ---------- */

.sl-ablauf__grid {
	display: grid;
	grid-template-columns: minmax(0, 725fr) minmax(0, 580fr);
	gap: 56px;
	align-items: start;
}

@media (max-width: 960px) {
	.sl-ablauf__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
}

.st-page .sl-zeitplan {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	border-top: 1px solid var(--st-linie);
}

.st-page .sl-zeitplan__eintrag {
	display: grid;
	grid-template-columns: 174px minmax(0, 1fr);
	gap: 0 24px;
	padding: 20px 0;
	border-bottom: 1px solid var(--st-linie);
}

.st-page .sl-zeitplan__eintrag:last-child {
	border-bottom: 0;
}

/* Schriftwerte wie .st-ablauf__nr / __titel / __text der Standortseiten. */
.st-page .sl-zeitplan__zeit {
	margin: 0;
	padding-top: 4px;
	font-family: var(--st-display);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.09;
	color: var(--st-blau);
}

.st-page .sl-zeitplan__titel {
	margin: 0 0 5px;
	font-family: var(--st-display);
	font-weight: 500;
	font-size: 20px;
	line-height: 1.33;
	color: var(--st-text);
}

.st-page .sl-zeitplan__text {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.21;
	color: var(--st-text);
}

@media (max-width: 560px) {
	.st-page .sl-zeitplan__eintrag {
		grid-template-columns: minmax(0, 1fr);
		gap: 6px;
	}
}

/* Die Checkliste bleibt beim Lesen der langen Zeitleiste im Blick. */
.st-page .sl-ablauf__check {
	position: sticky;
	top: 24px;
}

@media (max-width: 960px) {
	.st-page .sl-ablauf__check {
		position: static;
	}
}

/* ---------- Kontakt: Öffnungszeiten als Freitext ---------- */

/* Tage links, Zeiten direkt daneben statt rechtsbündig wie bei den Sprechzeiten. */
.st-page .sl-zeiten {
	width: auto;
}

.st-page .sl-zeiten th {
	padding-right: 40px;
}

.st-page .sl-zeiten td {
	text-align: left;
}

/* ---------- Verbund ---------- */

.st-page.sl-page .sl-verbund {
	padding-bottom: 80px;
}

.st-page.sl-page .sl-verbund__liste {
	border-top: 1px solid var(--st-linie);
}

.st-page.sl-page .sl-verbund__liste li:last-child .st-verbund__item {
	border-bottom: 1px solid var(--st-linie);
}

/* ---------- CTA: Hinweiszeile unter den Buttons ---------- */

.st-page .sl-cta__hinweis {
	margin: 8px 0 0;
	padding-left: 12px;
	font-family: var(--st-display);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.1;
	color: var(--st-weiss);
}