/* ------------------------------------------------------------------
   Kacheln "Die vier Prinzipien"
   Shortcode: [prinzipien]
   ------------------------------------------------------------------ */

.prinzipien {
	--pz-accent: #94cbf0;
	--pz-ink: #fff;
	--pz-radius: 28px;
	--pz-gap: clamp(24px, 6vw, 90px);
	--pz-speed: .3s;

	width: 100%;
}

.prinzipien *,
.prinzipien *::before,
.prinzipien *::after {
	box-sizing: border-box;
}

.prinzipien__heading {
	margin: 0 0 clamp(32px, 5vw, 60px);
	text-align: center;
}

.prinzipien__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pz-gap);
}

/* --- Kachel -------------------------------------------------------- */

.prinzipien__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--pz-radius) var(--pz-radius) 0 0;
	background: #fff;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .06);
	outline: none;
	transition: background-color var(--pz-speed) ease, border-radius var(--pz-speed) ease, box-shadow var(--pz-speed) ease;
}

.prinzipien__title {
	margin: 0;
	padding: 22px 24px;
	background: var(--pz-accent);
	color: var(--pz-ink);
	font-size: clamp(20px, 2vw, 26px);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
}

/* Bild und Text liegen im selben Rasterfeld: die Kachel ist immer so hoch
   wie der längere von beiden, dadurch springt beim Hover nichts. */
.prinzipien__body {
	display: grid;
	flex: 1;
	aspect-ratio: 1 / .9;
}

.prinzipien__image,
.prinzipien__text {
	grid-area: 1 / 1;
	transition: opacity var(--pz-speed) ease, visibility var(--pz-speed);
}

/* Höhere Spezifität, weil Elementor ".elementor img { height: auto }" setzt. */
.prinzipien .prinzipien__body img.prinzipien__image {
	display: block;
	max-width: none;
	margin: 0;
	width: 100%;
	height: 100%;
	padding: 24px 0;
	object-fit: contain;
}

.prinzipien__text {
	visibility: hidden;
	opacity: 0;
	padding: 4px clamp(20px, 3vw, 36px) 32px;
	color: var(--pz-ink);
	font-size: clamp(16px, 1.6vw, 20px);
	line-height: 1.3;
	text-align: center;
}

.prinzipien__text p {
	margin: 0 0 .6em;
}

.prinzipien__text p:last-child {
	margin-bottom: 0;
}

/* --- Aktiver Zustand (Hover, Tastatur, Tippen) --------------------- */

.prinzipien__card:hover,
.prinzipien__card:focus-within {
	background: var(--pz-accent);
	border-radius: var(--pz-radius);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}

.prinzipien .prinzipien__card:hover img.prinzipien__image,
.prinzipien .prinzipien__card:focus-within img.prinzipien__image {
	visibility: hidden;
	opacity: 0;
}

.prinzipien__card:hover .prinzipien__text,
.prinzipien__card:focus-within .prinzipien__text {
	visibility: visible;
	opacity: 1;
}

.prinzipien__card:focus-visible {
	box-shadow: 0 0 0 3px #1a1a18;
}

/* --- Mobil --------------------------------------------------------- */

@media (max-width: 767px) {
	.prinzipien__grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.prinzipien__card,
	.prinzipien__image,
	.prinzipien__text {
		transition: none;
	}
}