/**
 * Tagesablauf — Tab-Switch und Schritte-Liste
 *
 * Mobile (< 768px): keine Tabs, beide Listen untereinander gestapelt mit
 * Mobile-Heading (DESIGN.md §12.2).
 * Desktop: Tab-Buttons, JS schaltet Panels.
 *
 * Plus: Betreuungszeiten-Block oberhalb der Tabs.
 */

/* ── Betreuungszeiten ─────────────────────────────────────────────────── */

.betreuungszeiten {
	background-color: color-mix(in oklab, var(--color-cream) 92%, var(--color-deep-brown));
	border-block-end: 1px solid var(--color-border-subtle);
}

.betreuungszeiten__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.betreuungszeiten__header {
	max-width: var(--container-narrow);
	margin-block-end: var(--space-8);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.betreuungszeiten__eyebrow {
	font-family: var(--font-sans);
	font-size: var(--font-size-eyebrow);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-tertiary);
}

.betreuungszeiten__heading {
	font-size: var(--font-size-h2);
	color: var(--color-midnight);
	line-height: var(--line-height-snug);
}

.betreuungszeiten__intro {
	font-size: var(--font-size-body);
	color: var(--color-text-body);
	line-height: var(--line-height-relaxed);
	max-width: 60ch;
}

.betreuungszeiten__list {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}

@media (min-width: 640px) {
	.betreuungszeiten__list {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-4);
	}
}

@media (min-width: 1024px) {
	.betreuungszeiten__list {
		grid-template-columns: repeat(4, 1fr);
	}
}

.betreuungszeiten__item {
	background-color: var(--color-cream);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-md);
	padding: var(--space-5) var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.betreuungszeiten__item--primary {
	border-color: var(--color-honey);
	border-width: 1px;
	background-color: color-mix(in oklab, var(--color-honey) 6%, var(--color-cream));
}

.betreuungszeiten__zeit {
	font-family: var(--font-sans);
	font-size: var(--font-size-body-lg);
	font-weight: var(--font-weight-semibold);
	color: var(--color-midnight);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--letter-spacing-snug);
}

.betreuungszeiten__label {
	font-size: var(--font-size-body-sm);
	color: var(--color-text-body);
	font-weight: var(--font-weight-medium);
}

.betreuungszeiten__hinweis {
	font-size: var(--font-size-caption);
	color: var(--color-text-secondary);
	font-style: italic;
}

.tagesablauf-tabs {
	background-color: var(--color-cream);
}

.tagesablauf-tabs__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

/* Tab-Navigation */
.tagesablauf-tabs__nav {
	display: none;
	gap: var(--space-2);
	margin-block-end: var(--space-10);
	border-block-end: 1px solid var(--color-border-subtle);
}

@media (min-width: 768px) {
	.tagesablauf-tabs__nav {
		display: flex;
	}
}

.tagesablauf-tabs__tab {
	background-color: transparent;
	border: none;
	padding: var(--space-4) var(--space-6);
	font-family: var(--font-sans);
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-secondary);
	cursor: pointer;
	border-block-end: 3px solid transparent;
	margin-block-end: -1px;
	transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-1);
}

.tagesablauf-tabs__tab[aria-selected="true"] {
	color: var(--color-midnight);
	border-block-end-color: var(--color-honey);
}

.tagesablauf-tabs__tab:hover,
.tagesablauf-tabs__tab:focus-visible {
	color: var(--color-midnight);
}

.tagesablauf-tabs__alter {
	font-size: var(--font-size-caption);
	color: var(--color-text-tertiary);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-snug);
}

.tagesablauf-tabs__heading-mobile {
	font-size: var(--font-size-h2);
	color: var(--color-midnight);
	margin-block-end: var(--space-6);
}

@media (min-width: 768px) {
	.tagesablauf-tabs__heading-mobile {
		display: none;
	}
}

/* Mobile: beide Panels sichtbar, Trennung über Heading */
@media (max-width: 767.98px) {
	.tagesablauf-tabs__panel {
		display: block !important;
		margin-block-end: var(--space-16);
	}
	.tagesablauf-tabs__panel:last-child {
		margin-block-end: 0;
	}
}

@media (min-width: 768px) {
	.tagesablauf-tabs__panel[hidden] {
		display: none;
	}
}

/* Schritte-Liste */
.tagesablauf-list {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	max-width: var(--container-narrow);
	margin-inline: auto;
}

.tagesablauf-step {
	display: grid;
	/* Feste Zeit-Spalte (passt für "07:00–09:00", längster Slot) — alle Steps alignen sauber */
	grid-template-columns: 12ch 1fr;
	gap: var(--space-6);
	padding-block: var(--space-5);
	border-block-end: 1px solid var(--color-border-subtle);
	align-items: baseline;
}

@media (min-width: 768px) {
	.tagesablauf-step {
		grid-template-columns: 13ch 1fr;
		gap: var(--space-8);
	}
}

.tagesablauf-step:last-child {
	border-block-end: none;
}

.tagesablauf-step__zeit {
	font-family: var(--font-sans);
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-bold);
	color: var(--color-honey);
	letter-spacing: var(--letter-spacing-tight);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.tagesablauf-step__titel {
	font-size: var(--font-size-h4);
	color: var(--color-midnight);
	line-height: var(--line-height-snug);
	margin: 0 0 var(--space-2) 0;
}

.tagesablauf-step__inhalt {
	font-size: var(--font-size-body);
	line-height: var(--line-height-relaxed);
	color: var(--color-text-body);
	text-wrap: pretty;
	max-width: 60ch;
}

/* Schließtage-Block */
.schliesstage-block {
	background-color: color-mix(in oklab, var(--color-cream) 92%, var(--color-deep-brown));
}

.schliesstage-block__inner {
	max-width: var(--container-narrow);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.schliesstage-block__heading {
	font-size: var(--font-size-h2);
	color: var(--color-midnight);
	margin-block-end: var(--space-4);
}

.schliesstage-block__text {
	font-size: var(--font-size-body);
	line-height: var(--line-height-relaxed);
	color: var(--color-text-body);
}