/**
 * Sektionen: Seitenbanner, Wellen-Uebergaenge, Wasserzeichen, Rhythmus.
 *
 * Das Banner ist ein einziges Muster fuer alle Seitentypen. Vorher hatte
 * jede Seite ihre eigene Elementor-Sektion – strukturell zwar gleich,
 * aber ohne gemeinsame Quelle und mit sehr unterschiedlichen Motiven.
 */

/* =====================================================================
   Seitenbanner
   ===================================================================== */
.cz-banner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(380px, 48vh, 580px);
	padding: clamp(3rem, 8vw, 6rem) 1.25rem clamp(4rem, 9vw, 7rem);
	overflow: hidden;
	isolation: isolate;
	text-align: center;
	color: var(--cz-weiss);
}

/* Bildebene liegt separat, damit sie sich fuer Parallax verschieben
   laesst, ohne das Overlay mitzunehmen. */
.cz-banner__bild {
	position: absolute;
	inset: -12% 0 -12% 0;
	z-index: -2;
	background-position: center center;
	background-size: cover;
	will-change: transform;
}

.cz-banner__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(100deg, var(--cz-thema-a) 0%, var(--cz-thema-b) 100%);
	/* 0.82 liess vom Foto praktisch nichts uebrig. 0.66 plus eine
	   dunkle Vignette haelt den Text lesbar und zeigt das Motiv. */
	opacity: 0.66;
}

/* Zusaetzliche Vignette von unten – sichert den Text ab, ohne das
   Motiv flaechig zuzukleistern. */
.cz-banner__vignette {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(58, 52, 47, 0) 35%, rgba(58, 52, 47, 0.4) 100%);
}

/* Ohne Foto traegt der Verlauf allein – dann darf er voll decken. */
.cz-banner--ohne-bild .cz-banner__overlay {
	opacity: 1;
}

.cz-banner--ohne-bild .cz-banner__vignette {
	display: none;
}

.cz-banner__inhalt {
	position: relative;
	max-width: 54rem;
	margin-inline: auto;
}

.cz-banner h1 {
	color: var(--cz-weiss);
	margin: 0.35em 0 0.3em;
	text-shadow: 0 2px 18px rgba(58, 52, 47, 0.25);
}

.cz-banner__subline {
	font-size: var(--cz-text-gross);
	color: rgba(255, 255, 255, 0.94);
	margin: 0 auto 1.6rem;
	max-width: 42rem;
}

.cz-banner .cz-eyebrow {
	color: rgba(255, 255, 255, 0.85);
}

/* Wellenabschluss nach unten */
.cz-banner__welle {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	z-index: 1;
	width: 100%;
	height: clamp(38px, 5vw, 74px);
	display: block;
}

.cz-banner__welle path {
	fill: var(--cz-folgefarbe, var(--cz-weiss));
}

/* =====================================================================
   Wellen zwischen Sektionen
   ===================================================================== */
.cz-welle {
	display: block;
	width: 100%;
	height: clamp(34px, 4.5vw, 66px);
	margin-bottom: -1px;
}

.cz-welle--oben {
	margin-bottom: 0;
	margin-top: -1px;
	transform: rotate(180deg);
}

/* =====================================================================
   Wasserzeichen – nutzt die bislang brachliegenden Logo-Varianten
   ===================================================================== */
.cz-wasserzeichen {
	position: relative;
	isolation: isolate;
}

.cz-wasserzeichen::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	right: -6%;
	width: min(52vw, 620px);
	aspect-ratio: 1;
	transform: translateY(-50%);
	background-image: var(--cz-wasserzeichen-bild);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	opacity: 0.06;
	pointer-events: none;
}

.cz-wasserzeichen--links::before {
	right: auto;
	left: -8%;
}

@media (max-width: 921px) {
	.cz-wasserzeichen::before {
		width: 80vw;
		opacity: 0.04;
	}
}

/* =====================================================================
   Sektionsrhythmus
   ===================================================================== */
.cz-sektion {
	padding-block: var(--cz-raum-sektion);
}

.cz-sektion--flaeche {
	background: var(--cz-flaeche);
}

.cz-sektion--weiss {
	background: var(--cz-weiss);
}

.cz-sektion--verlauf-orange {
	background: var(--cz-verlauf-orange);
	color: var(--cz-weiss);
}

.cz-sektion--verlauf-blau {
	background: var(--cz-verlauf-blau);
	color: var(--cz-weiss);
}

/* Elementor-Sektionen an denselben Rhythmus binden, damit bestehende
   Seiten mitziehen ohne einzeln angefasst zu werden. */
.elementor-top-section > .elementor-container {
	max-width: var(--cz-inhaltsbreite);
}

/* =====================================================================
   Blog-Teaser (Startseite)
   ===================================================================== */
.cz-teaser-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	margin-block: 2.5rem;
}

@media (max-width: 921px) {
	.cz-teaser-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.cz-teaser-grid { grid-template-columns: 1fr; }
}

.cz-teaser__kat {
	/* war mittleres Blau – als Label kein Link, deshalb Gold */
	color: var(--cz-gold);
	font-family: "Quicksand", sans-serif;
	font-weight: 600;
	font-size: var(--cz-text-meta);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cz-teaser__titel {
	font-size: 1.15rem;
	line-height: 1.35;
	margin: 0;
}

.cz-teaser__titel a {
	color: var(--cz-orange-braun);
	text-decoration: none;
	transition: color var(--cz-dauer-kurz) var(--cz-easing);
}

/* Kein Unterstreichen – die ganze Karte ist die Interaktionsflaeche.
   Zwei Klassen, damit Astras generische a:hover-Farbe nicht gewinnt. */
.cz-teaser .cz-teaser__titel a:hover,
.cz-teaser:hover .cz-teaser__titel a,
.cz-karte .cz-teaser__titel a:hover,
.cz-karte:hover .cz-teaser__titel a {
	color: var(--cz-orange);
	text-decoration: none;
}

.cz-teaser__text-auszug {
	color: var(--cz-text);
	font-size: 0.95rem;
	margin: 0;
	flex: 1;
}

.cz-teaser__mehr {
	align-self: flex-start;
	margin-top: 0.4rem;
	font-family: "Quicksand", sans-serif;
	font-weight: 600;
	color: var(--cz-orange);
	text-decoration: none;
}

.cz-teaser__mehr::after {
	content: " →";
	display: inline-block;
	transition: transform var(--cz-dauer) var(--cz-easing);
}

.cz-teaser:hover .cz-teaser__mehr {
	color: var(--cz-orange-braun);
	text-decoration: none;
}

.cz-teaser:hover .cz-teaser__mehr::after {
	transform: translateX(5px);
}

/* =====================================================================
   Zahlen-Counter
   ===================================================================== */
.cz-counter-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1.5rem;
	margin-block: 2rem;
}

.cz-counter {
	text-align: center;
}

.cz-counter__wert {
	display: block;
	font-family: "Quicksand", sans-serif;
	font-weight: 600;
	font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem);
	line-height: 1;
	background: var(--cz-verlauf-orange);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.cz-counter__label {
	display: block;
	margin-top: 0.4rem;
	color: var(--cz-warmgrau);
	font-size: var(--cz-text-klein);
}