/* Störer-Karte "Tag der offenen Tür" — Port von .offen (index.astro) */

.kids-open-day {
	position: relative;
	background: var(--c-bg-cream);
	border-radius: 2.5rem;
	padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
	transform: rotate(-1deg);
	box-shadow: 0 12px 0 rgba(58, 52, 44, 0.08);
	overflow: hidden;
}

.kids-open-day__inner {
	position: relative;
	transform: rotate(1deg); /* Inhalt gegenrotieren, damit der Text gerade steht */
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-7);
	align-items: center;
}

@media (max-width: 800px) {
	.kids-open-day {
		transform: rotate(-0.5deg);
		border-radius: 2rem;
	}
	.kids-open-day__inner {
		transform: rotate(0.5deg);
		grid-template-columns: 1fr;
		gap: var(--s-6);
	}
}

.kids-open-day__lead h2 {
	margin: 0 0 var(--s-4);
}
/*
 * Astro hebt "Tür auf." im Störer mit .offen__hl hervor — nur orange Schrift,
 * in der Display-Schrift der h2 und ohne Balken. Das Rich-Text-Format
 * "Highlight …" (.hero__hl--*) ist dagegen der Hero-Stil: Black-Schnitt plus
 * farbiger Unterstreich-Balken (bei Orange lila). Im Editor ist es der
 * naheliegende Knopf, gehört hier aber nicht hin — deshalb hier zurückgesetzt.
 */
.kids-open-day__lead h2 [class*="hero__hl--"] {
	display: inline;
	font-family: inherit;
}
.kids-open-day__lead h2 [class*="hero__hl--"]::after {
	content: none;
}

.kids-open-day__lead p {
	margin: 0 0 var(--s-3);
	max-width: 32rem;
	color: var(--c-ink);
}
.kids-open-day__lead p:last-child {
	margin-bottom: 0;
}

.kids-open-day__panel {
	background: #fff;
	border-radius: var(--r-lg);
	padding: var(--s-6) var(--s-5);
	box-shadow: var(--shadow-md);
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}
.kids-open-day__panel-eyebrow {
	font-family: var(--font-display);
	font-size: 1.6rem;
	line-height: 1;
	color: var(--c-ink);
	margin: 0;
	max-width: none;
}
.kids-open-day__panel-sub {
	font-size: 0.95rem;
	color: var(--c-ink-soft);
	margin: calc(var(--s-3) * -1) 0 0; /* Abstand zum Aufhänger verkleinern */
	line-height: 1.4;
	max-width: none;
}

.kids-open-day__termine {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	text-align: left;
}
.kids-open-day__termin time {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	padding: var(--s-3) var(--s-4);
	background: var(--c-bg);
	border-radius: var(--r-md);
}
.kids-open-day__termin-badge {
	flex: 0 0 auto;
	width: 3.5rem;
	height: 3.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--c-gelb);
	border-radius: var(--r-md);
	transform: rotate(-3deg);
	line-height: 1;
}
.kids-open-day__termin-num {
	font-family: var(--font-display-black);
	font-size: 1.6rem;
	color: var(--c-ink);
}
.kids-open-day__termin-mon {
	font-size: 0.65rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-ink);
	margin-top: 0.15rem;
}
.kids-open-day__termin-text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.kids-open-day__termin-day {
	font-weight: 800;
	color: var(--c-ink);
	line-height: 1.2;
}
.kids-open-day__termin-time {
	font-size: 0.9rem;
	color: var(--c-ink-soft);
	line-height: 1.2;
}

.kids-open-day__panel-ctas {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-4);
	margin-top: var(--s-2);
}
.kids-open-day__panel-ctas .btn {
	width: 100%;
	justify-content: center;
	white-space: normal;
}
.kids-open-day__panel-foot {
	margin: var(--s-2) 0 0;
	padding-top: var(--s-3);
	border-top: 1px solid color-mix(in srgb, var(--c-ink) 12%, transparent);
	font-size: 0.85rem;
	color: var(--c-ink-soft);
	line-height: 1.45;
	max-width: none;
}
.kids-open-day__panel-foot strong {
	color: var(--c-ink);
	font-weight: 800;
}