/*
 * Kid(z) & Co. – Gestaltung 2026
 * Startseite (Einstiegskarten), Buttons und Hintergrundwellen auf allen Seiten.
 * Wird im Master-Template nach style.css eingebunden.
 */

:root {
	--kidz-blau: #0b4ea2;
	--kidz-blau-dunkel: #083b80;
	--kidz-blau-hell: #eef4fc;
	--kidz-orange: #ffa200;
	--kidz-orange-dunkel: #ff7e00;
}

/* ---------- Hintergrundwellen (alle Seiten) ---------- */

main.page-content {
	background-color: #fbfdff;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%23eef4fc' d='M0 0h1440v150c-180 60-420 85-720 30S180 110 0 190z'/%3E%3Cpath fill='%23e2ecf9' fill-opacity='.6' d='M0 0h1440v70c-260 90-560 70-800 15S200 30 0 110z'/%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='.9' d='M0 225c260-95 520-40 760-5s460 25 680-55'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%23eef4fc' d='M0 320V170c240-80 520-70 780-10s460 60 660-20v180z'/%3E%3Cpath fill='%23e2ecf9' fill-opacity='.6' d='M0 320V250c300-70 560-40 820 10s420 30 620-30v90z'/%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='3' stroke-opacity='.9' d='M0 140c280-70 540-30 800 25s440 30 640-40'/%3E%3C/svg%3E");
	background-repeat: no-repeat, no-repeat;
	background-position: center top, center bottom;
	background-size: 100% 320px, 100% 320px;
}

/* blaue Linie unter der Kopfzeile wie im Entwurf */
.rd-navbar-static {
	box-shadow: 0 6px 0 var(--kidz-blau);
}

/* ---------- Buttons ---------- */

.btn-primary,
.btn.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	padding: .75em 1.9em;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--kidz-orange) 0%, var(--kidz-orange-dunkel) 100%);
	color: #fff;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: none;
	box-shadow: 0 6px 16px rgba(255, 126, 0, .3);
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active {
	color: #fff;
	background: linear-gradient(180deg, var(--kidz-orange) 0%, var(--kidz-orange-dunkel) 100%);
	filter: brightness(1.05);
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(255, 126, 0, .38);
}

.btn-primary a,
.btn-primary a:hover,
.btn-primary .icon {
	color: #fff;
}

.btn-primary .fa-arrow-right {
	transition: transform .2s ease;
}

.btn-primary:hover .fa-arrow-right,
.kidz-card:hover .btn-primary .fa-arrow-right {
	transform: translateX(4px);
}

/* ---------- Startseite: Einstieg ---------- */

.kidz-start {
	padding: 60px 0 40px;
}

.kidz-start-title {
	margin: 0;
	color: var(--kidz-blau);
	font-size: 44px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.01em;
}

.kidz-start-lead {
	margin: 14px auto 40px;
	max-width: 720px;
	color: #24375a;
	font-size: 19px;
}

.kidz-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: 14px;
	background: var(--kidz-blau-dunkel);
	box-shadow: 0 14px 34px rgba(11, 78, 162, .18);
	text-align: left;
	text-decoration: none;
	transition: transform .25s ease, box-shadow .25s ease;
}

.kidz-card:hover,
.kidz-card:focus {
	text-decoration: none;
	transform: translateY(-4px);
	box-shadow: 0 20px 44px rgba(11, 78, 162, .26);
}

.kidz-card-img {
	height: 320px;
	overflow: hidden;
}

.kidz-card-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.kidz-card:hover .kidz-card-img img {
	transform: scale(1.04);
}

.kidz-card-body {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-top: 0;
	padding: 0 30px 30px;
	background: linear-gradient(180deg, #0d58b6 0%, var(--kidz-blau-dunkel) 100%);
	color: #fff;
}

/*
 * Welle als Übergang vom Bild in die blaue Fläche:
 * hinten eine durchscheinende hellere Welle, die nach rechts ansteigt (mit feiner Lichtkante),
 * davor die blaue Fläche, die links hoch beginnt und nach rechts im Bogen abfällt.
 */
.kidz-card-body::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -59px;
	height: 60px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 60' preserveAspectRatio='none'%3E%3Cpath fill='%235c9be4' fill-opacity='.5' d='M0 60V28C150 24 300 32 420 39C500 43 560 45 600 46V60z'/%3E%3Cpath fill='none' stroke='%23ffffff' stroke-opacity='.55' stroke-width='1.5' d='M300 32C410 38 520 44 600 46'/%3E%3Cpath fill='%231e64bb' d='M0 60V12C80 4 170 4 260 14C380 28 500 50 600 58V60z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}

/* hellerer Schwung innerhalb der blauen Fläche */
.kidz-card-body::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 1px;
	height: 220px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 220' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' fill-opacity='.07' d='M0 0H600V40C450 52 300 92 180 140C110 168 50 190 0 200z'/%3E%3C/svg%3E") center top / 100% 100% no-repeat;
	pointer-events: none;
}

.kidz-card-body > * {
	position: relative;
	z-index: 1;
}

.kidz-card-icon {
	position: absolute;
	top: -89px;
	left: 24px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	border: 4px solid #fff;
	border-radius: 50%;
	background: var(--kidz-blau);
	color: #fff;
	font-size: 32px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
}

.kidz-card-title {
	margin: 18px 0 8px;
	color: #fff;
	font-size: 36px;
	font-weight: 800;
	line-height: 1.1;
	text-transform: uppercase;
}

.kidz-card-text {
	margin: 0 0 22px;
	color: rgba(255, 255, 255, .92);
	font-size: 17px;
	line-height: 1.5;
}

.kidz-card .btn-primary {
	margin-top: auto;
	align-self: center;
	min-width: 60%;
	font-size: 16px;
}

/* ausführliche Texte unter den Karten */
.kidz-start-texte {
	padding: 10px 0 40px;
	text-align: left;
}

.kidz-start-texte h2 {
	margin-bottom: 14px;
	color: var(--kidz-blau);
	font-size: 24px;
	font-weight: 700;
}

.kidz-start-texte h3 {
	margin-top: 22px;
	color: var(--kidz-blau);
	font-size: 18px;
	font-weight: 700;
}

@media (max-width: 767px) {
	.kidz-start {
		padding: 36px 0 24px;
	}
	.kidz-start-title {
		font-size: 32px;
	}
	.kidz-start-lead {
		margin-bottom: 28px;
		font-size: 17px;
	}
	.kidz-card-img {
		height: 260px;
	}
	.kidz-card-title {
		font-size: 30px;
	}
	.kidz-card .btn-primary {
		min-width: 0;
		width: 100%;
	}
}