/**
 * Inhaltsaufwertung und Korrekturen.
 *
 * Lange Textstrecken bekommen Rhythmus: Lead-Absatz, Listen als Karten,
 * nummerierte Zwischenschritte, hervorgehobene Zitate. Dazu die
 * Korrekturen an Shop-Raster, Blog-Kacheln und Seitenabschluss.
 */

/* =====================================================================
   Shop: Clearfix-Pseudoelemente belegen Grid-Zellen
   WooCommerce/Astra setzen ::before und ::after mit display:table –
   im Grid zaehlen die als Items und schieben die Produkte nach rechts.
   ===================================================================== */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	display: none !important;
	content: none !important;
}

/* =====================================================================
   Seitenabschluss
   Der CTA liegt jetzt in der Blau-Familie, dunkler als der Footer.
   Das ergibt heller Inhalt -> dunkles Petrol -> helles Blau statt
   eines harten Farbsprungs von Gold auf Blau.
   ===================================================================== */
.cz-abschluss {
	background: linear-gradient(120deg, #2d8cb7 0%, #1d5f80 100%);
}

.cz-abschluss::before {
	background: radial-gradient(circle at 28% 35%, rgba(245, 147, 15, 0.3), transparent 58%);
}

/* Der Button darin traegt den Orange-Akzent. */
.cz-abschluss .cz-button--hell {
	background: var(--cz-verlauf-orange-weich);
	color: var(--cz-weiss);
	--cz-btn-farbe: var(--cz-weiss);
}

.cz-abschluss .cz-button--hell::before {
	background: linear-gradient(135deg, var(--cz-orange-braun) 0%, #8f4b01 100%);
}

/* =====================================================================
   Blog-Uebersicht als Kacheln
   ===================================================================== */
.blog .site-main > .ast-row,
.archive .site-main > .ast-row,
.search .site-main > .ast-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
	margin: 0;
}

@media (max-width: 1024px) {
	.blog .site-main > .ast-row,
	.archive .site-main > .ast-row,
	.search .site-main > .ast-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.blog .site-main > .ast-row,
	.archive .site-main > .ast-row,
	.search .site-main > .ast-row {
		grid-template-columns: 1fr;
	}
}

.blog .ast-article-post,
.archive .ast-article-post,
.search .ast-article-post {
	display: flex;
	flex-direction: column;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0;
	background: var(--cz-weiss);
	border-radius: var(--cz-radius-m);
	overflow: hidden;
	box-shadow: var(--cz-schatten-s);
}

.blog .ast-article-post .post-thumb,
.archive .ast-article-post .post-thumb {
	margin: 0;
	overflow: hidden;
}

.blog .ast-article-post .post-thumb img,
.archive .ast-article-post .post-thumb img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
	transition: transform var(--cz-dauer-lang) var(--cz-easing);
}

.blog .ast-article-post:hover .post-thumb img,
.archive .ast-article-post:hover .post-thumb img {
	transform: scale(1.06);
}

.blog .ast-article-post .ast-blog-featured-section + .entry-header,
.blog .ast-article-post .entry-header,
.archive .ast-article-post .entry-header {
	padding: 1.3rem 1.4rem 0;
	margin: 0;
}

.blog .ast-article-post .entry-content,
.archive .ast-article-post .entry-content {
	padding: 0 1.4rem 1.4rem;
	margin: 0.6rem 0 0;
	flex: 1;
}

.blog .ast-article-post .entry-title,
.archive .ast-article-post .entry-title {
	font-size: 1.15rem;
	line-height: 1.35;
	margin: 0 0 0.4rem;
}

.blog .ast-article-post .entry-meta,
.archive .ast-article-post .entry-meta {
	font-size: var(--cz-text-meta);
}

.blog .ast-article-post .read-more,
.archive .ast-article-post .read-more {
	display: inline-block;
	margin-top: 0.6rem;
	font-family: "Quicksand", sans-serif;
	font-weight: 600;
}

/* =====================================================================
   Textstrecken: Rhythmus statt Wüste
   ===================================================================== */

/* Erster Absatz einer Sektion als Lead. */
.cz-lesespalte > p:first-of-type,
.cz-lead {
	font-size: clamp(1.12rem, 1rem + 0.6vw, 1.35rem);
	line-height: 1.6;
	color: var(--cz-warmgrau);
}

/* Listen mit mehreren Punkten werden zu Karten. */
.cz-lesespalte ul.cz-liste-karten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem;
	margin: 1.6rem 0 2rem;
}

.cz-lesespalte ul.cz-liste-karten li {
	margin: 0;
	padding: 1.1rem 1.2rem 1.1rem 3rem;
	background: var(--cz-weiss);
	border-radius: var(--cz-radius-m);
	box-shadow: var(--cz-schatten-s);
	font-size: var(--cz-text-basis);
	line-height: 1.6;
	transition: transform var(--cz-dauer) var(--cz-easing), box-shadow var(--cz-dauer) var(--cz-easing);
}

.cz-lesespalte ul.cz-liste-karten li:hover {
	transform: translateY(-4px);
	box-shadow: var(--cz-schatten-m);
}

.cz-lesespalte ul.cz-liste-karten li::before {
	left: 1.2rem;
	top: 1.55rem;
	width: 0.7rem;
	height: 0.7rem;
}

/* Nummerierte Schritte aus H3-Folgen. */
.cz-schritte {
	counter-reset: cz-schritt;
	display: grid;
	gap: 1.2rem;
	margin: 1.8rem 0 2.4rem;
}

.cz-schritt {
	position: relative;
	padding: 1.3rem 1.5rem 1.3rem 4.2rem;
	background: var(--cz-weiss);
	border-radius: var(--cz-radius-m);
	box-shadow: var(--cz-schatten-s);
}

.cz-schritt::before {
	counter-increment: cz-schritt;
	content: counter(cz-schritt);
	position: absolute;
	left: 1.2rem;
	top: 1.15rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	background: var(--cz-verlauf-orange-weich);
	color: var(--cz-weiss);
	font-family: "Quicksand", sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
}

.cz-schritt h3 {
	margin: 0 0 0.3rem;
	font-size: 1.1rem;
}

.cz-schritt p {
	margin: 0;
	font-size: var(--cz-text-basis);
}

/* Hervorgehobenes Zitat. */
.cz-zitat {
	position: relative;
	margin: 2.2rem 0;
	padding: 1.8rem 2rem 1.8rem 3.4rem;
	border-radius: var(--cz-radius-m);
	background: linear-gradient(120deg, var(--cz-flaeche) 0%, var(--cz-flaeche-2) 100%);
	font-family: "Quicksand", sans-serif;
	font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem);
	font-weight: 600;
	line-height: 1.45;
	color: var(--cz-orange-braun);
}

.cz-zitat::before {
	content: "„";
	position: absolute;
	left: 1rem;
	top: 0.35em;
	font-size: 3.4rem;
	line-height: 1;
	color: var(--cz-orange-hell);
	opacity: 0.55;
}

/* Farbiger Akzentblock zwischen Textstrecken. */
.cz-akzent {
	margin: 2.4rem 0;
	padding: clamp(1.6rem, 3vw, 2.4rem);
	border-radius: var(--cz-radius-l);
	background: var(--cz-verlauf-blau);
	color: var(--cz-weiss);
}

.cz-akzent h2,
.cz-akzent h3,
.cz-akzent p,
.cz-akzent li {
	color: var(--cz-weiss);
}

.cz-akzent > :first-child { margin-top: 0; }
.cz-akzent > :last-child { margin-bottom: 0; }

/* Abwechselnde Flaechen bei aufeinanderfolgenden Textsektionen. */
.cz-textblock {
	padding-block: var(--cz-raum-sektion);
}

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

/* =====================================================================
   Newsletter-Anmeldebox

   Vorteilsliste und Formular stehen untereinander, nicht nebeneinander:
   Das Brevo-Formular bringt rund 1100 px eigenen Inhalt mit, eine kurze
   Liste daneben wurde auf dieselbe Höhe gezogen und stand größtenteils
   leer. Untereinander bleibt die Liste kompakt und das Formular breit –
   und breit heißt hier auch flacher (siehe 96-formular.css).
   ===================================================================== */
.cz-anmeldung {
	margin: 2.5rem auto 1.8rem;
	padding: clamp(1.5rem, 3.5vw, 2.4rem) clamp(1.5rem, 4vw, 3rem);
	max-width: 62rem;
	border-radius: var(--cz-radius-l);
	background: var(--cz-verlauf-blau);
	color: var(--cz-weiss);
}

.cz-anmeldung h2,
.cz-anmeldung p,
.cz-anmeldung li {
	color: var(--cz-weiss);
}

.cz-anmeldung__titel {
	margin: 0 0 1rem;
	text-align: center;
}

/* Vier kurze Punkte nebeneinander statt untereinander – das hält die
   Leiste flach. */
.cz-anmeldung__vorteile {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6rem clamp(1.5rem, 4vw, 2.5rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

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

.cz-anmeldung__vorteile li {
	position: relative;
	margin: 0;
	padding-left: 2rem;
	font-size: var(--cz-text-basis);
	line-height: 1.5;
}

.cz-anmeldung__vorteile li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.28em;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	background: var(--cz-weiss);
	-webkit-mask-image: var(--cz-icon-haken);
	mask-image: var(--cz-icon-haken);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* Auch Astras .ast-row traegt Clearfix-Pseudoelemente – im Grid
   belegen sie sonst die erste Zelle und schieben die Kacheln nach
   rechts. Gleiche Ursache wie im Shop-Raster. */
.blog .site-main > .ast-row::before,
.blog .site-main > .ast-row::after,
.archive .site-main > .ast-row::before,
.archive .site-main > .ast-row::after,
.search .site-main > .ast-row::before,
.search .site-main > .ast-row::after {
	display: none !important;
	content: none !important;
}

/* Astra verschachtelt den Kachelinhalt in .ast-post-format- – die
   Abstaende muessen dort greifen, nicht am aeusseren <article>. */
.blog .ast-article-post > .blog-layout-1,
.archive .ast-article-post > .blog-layout-1 {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.blog .ast-article-post .post-content,
.archive .ast-article-post .post-content {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.3rem 1.4rem 1.5rem;
	flex: 1;
}

.blog .ast-article-post .entry-title,
.archive .ast-article-post .entry-title {
	font-size: 1.15rem;
	line-height: 1.35;
	margin: 0;
}

.blog .ast-article-post .entry-content,
.archive .ast-article-post .entry-content {
	margin: 0;
	padding: 0;
	font-size: var(--cz-text-klein);
}

.blog .ast-article-post .ast-excerpt-container p,
.archive .ast-article-post .ast-excerpt-container p {
	font-size: var(--cz-text-klein);
	line-height: 1.6;
	margin: 0;
}

/* =====================================================================
   Wellenuebergang zum Footer
   Liegt im normalen Fluss zwischen Inhalt und Footer und traegt den
   Footer-Verlauf. Dadurch ist der Uebergang unabhaengig davon, welche
   Farbe die Sektion darueber hat.
   ===================================================================== */
:root {
	--cz-welle-hoehe: clamp(64px, 7.5vw, 126px);
}

.cz-footer-welle {
	display: block;
	width: 100%;
	line-height: 0;
	position: relative;
	z-index: 2;
	/* Der obere Teil des SVG ist transparent. Laege die Welle unter dem
	   vorherigen Bereich, saehe man dort den Seitenhintergrund als
	   Streifen. Deshalb zieht sie sich um ihre volle Hoehe nach oben und
	   legt sich ueber das Ende des Bereichs darueber. */
	margin-top: calc(-1 * var(--cz-welle-hoehe));
	/* schliesst die Subpixel-Linie zwischen SVG und Footer */
	margin-bottom: -1px;
	pointer-events: none;
}

.cz-footer-welle svg {
	display: block;
	width: 100%;
	height: var(--cz-welle-hoehe);
}

/* Genug Luft, damit Inhalte nicht unter die Welle geraten. */
.cz-abschluss {
	padding-bottom: calc(var(--cz-welle-hoehe) + clamp(2rem, 3vw, 3rem));
}

.site-content > .ast-container:last-child,
#content > .ast-container {
	padding-bottom: 0;
}

/* Der Footer selbst braucht keinen eigenen Aufsatz mehr. */
#colophon .site-primary-footer-wrap::before {
	content: none;
}

/* =====================================================================
   Blog-Kacheln: Astra polstert .post-content, dadurch stand das Bild
   nicht randlos in der Kachel. Padding wandert auf die Textelemente.
   ===================================================================== */
.blog .ast-article-post .post-content,
.archive .ast-article-post .post-content,
.search .ast-article-post .post-content {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0 !important;
	margin: 0 !important;
}

.blog .ast-article-post .ast-blog-featured-section,
.archive .ast-article-post .ast-blog-featured-section {
	margin: 0 !important;
	overflow: hidden;
}

.blog .ast-article-post .entry-title,
.archive .ast-article-post .entry-title {
	padding: 1.2rem 1.3rem 0 !important;
	margin: 0 !important;
	font-size: 1.1rem !important;
	line-height: 1.32;
}

.blog .ast-article-post .entry-header,
.archive .ast-article-post .entry-header {
	padding: 0.45rem 1.3rem 0 !important;
	margin: 0 !important;
	border: 0;
}

.blog .ast-article-post .ast-excerpt-container,
.archive .ast-article-post .ast-excerpt-container {
	padding: 0.55rem 1.3rem 0 !important;
	margin: 0 !important;
	flex: 1;
}

.blog .ast-article-post .ast-excerpt-container p,
.archive .ast-article-post .ast-excerpt-container p {
	margin: 0;
	font-size: var(--cz-text-klein);
	line-height: 1.6;
	color: var(--cz-text);
}

.blog .ast-article-post .ast-read-more-container,
.archive .ast-article-post .ast-read-more-container {
	padding: 0.9rem 1.3rem 1.4rem !important;
	margin: 0 !important;
}

.blog .ast-article-post .ast-read-more-container a,
.archive .ast-article-post .ast-read-more-container a {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-family: "Quicksand", sans-serif;
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--cz-orange);
	text-decoration: none;
}

.blog .ast-article-post .ast-read-more-container a::after,
.archive .ast-article-post .ast-read-more-container a::after {
	content: "";
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask-image: var(--cz-icon-pfeil);
	mask-image: var(--cz-icon-pfeil);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	transition: transform var(--cz-dauer) var(--cz-easing);
}

.blog .ast-article-post:hover .ast-read-more-container a::after,
.archive .ast-article-post:hover .ast-read-more-container a::after {
	transform: translateX(4px);
}

/* Meta-Zeile: Kategorie und Datum sind zwar Links, sollen die Kachel
   aber nicht dominieren. Warmgrau statt Blau, Orange beim Hover. */
.blog .ast-article-post .entry-meta,
.archive .ast-article-post .entry-meta,
.blog .ast-article-post .entry-meta *,
.archive .ast-article-post .entry-meta * {
	color: var(--cz-warmgrau) !important;
	font-size: var(--cz-text-meta) !important;
	font-weight: 400;
}

.blog .ast-article-post .entry-meta a:hover,
.archive .ast-article-post .entry-meta a:hover {
	color: var(--cz-orange) !important;
	text-decoration: underline;
}

/* Der leere entry-content-Rest von Astra braucht keinen Platz. */
.blog .ast-article-post > .blog-layout-1 > .post-content > .entry-content:empty,
.archive .ast-article-post > .blog-layout-1 > .post-content > .entry-content:empty {
	display: none;
}

/* --- Paginierung ------------------------------------------------------ */
.ast-pagination {
	margin-top: 2.5rem;
}

.ast-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.7rem;
	border-radius: var(--cz-radius-pill);
	background: var(--cz-weiss);
	color: var(--cz-orange-braun);
	font-family: "Quicksand", sans-serif;
	font-weight: 600;
	text-decoration: none;
	box-shadow: var(--cz-schatten-s);
	transition: background-color var(--cz-dauer-kurz) var(--cz-easing), color var(--cz-dauer-kurz) var(--cz-easing), transform var(--cz-dauer-kurz) var(--cz-easing);
}

.ast-pagination .page-numbers:hover {
	transform: translateY(-2px);
	color: var(--cz-orange);
}

.ast-pagination .page-numbers.current {
	background: var(--cz-verlauf-orange-weich);
	color: var(--cz-weiss);
}

/* =====================================================================
   Blog-Detailseite: Feinschliff
   ===================================================================== */

/* Der Banner steht in der schmaleren Textspalte – die globale
   H1-Groesse (69 px) sprengt sie auf vier Zeilen. */
.cz-beitragsbanner h1 {
	font-size: clamp(1.55rem, 1rem + 1.9vw, 2.5rem);
	line-height: 1.2;
	max-width: 22ch;
}

.cz-beitragsbanner {
	min-height: clamp(240px, 30vh, 380px);
}

/* Inhaltsverzeichnis: Sprungmarken sollen den Text nicht dominieren. */
.cz-inhaltsverzeichnis a {
	color: var(--cz-text) !important;
	text-decoration: none !important;
	transition: color var(--cz-dauer-kurz) var(--cz-easing);
}

.cz-inhaltsverzeichnis a:hover,
.cz-inhaltsverzeichnis a:focus-visible {
	color: var(--cz-orange) !important;
	text-decoration: underline !important;
}

.cz-inhaltsverzeichnis ol {
	counter-reset: cz-ivz;
	list-style: none;
	padding-left: 0;
}

.cz-inhaltsverzeichnis li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: 0.45rem;
}

.cz-inhaltsverzeichnis li::before {
	counter-increment: cz-ivz;
	content: counter(cz-ivz);
	position: absolute;
	left: 0;
	top: 0.1em;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	background: var(--cz-orange-hell);
	color: var(--cz-weiss);
	font-family: "Quicksand", sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
}

/* Sidebar: Vorschaubilder waren unterschiedlich breit. */
.cz-beliebt li {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	margin-bottom: 0.9rem;
	line-height: 1.4;
}

.cz-beliebt li > a:first-child {
	flex: 0 0 56px;
	display: block;
	width: 56px;
	height: 56px;
	border-radius: var(--cz-radius-s);
	overflow: hidden;
}

.cz-beliebt img {
	width: 56px !important;
	height: 56px !important;
	max-width: none;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
	display: block;
}

/* Eintrag ohne Beitragsbild bekommt einen Platzhalter, damit die
   Liste nicht ausfranst. */
.cz-beliebt li:not(:has(img))::before {
	content: "";
	flex: 0 0 56px;
	height: 56px;
	border-radius: var(--cz-radius-s);
	background: var(--cz-verlauf-blau);
	opacity: 0.35;
}

.cz-sidebar .cz-beliebt a:not(:first-child) {
	font-size: var(--cz-text-klein);
	line-height: 1.45;
}

/* Kommentarbereich in die Gestaltung holen. */
#comments,
.comment-respond {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding: clamp(1.5rem, 3vw, 2.2rem);
	border-radius: var(--cz-radius-m);
	background: var(--cz-flaeche);
}

.comment-respond .comment-reply-title {
	margin-top: 0;
	font-size: var(--cz-h3);
	color: var(--cz-orange-braun);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	border: 1px solid var(--cz-linie);
	border-radius: var(--cz-radius-s);
	background: var(--cz-weiss);
	padding: 0.7em 0.9em;
}

.comment-form input:focus,
.comment-form textarea:focus {
	border-color: var(--cz-orange);
	outline: none;
}

/* Beitragsnavigation */
.post-navigation {
	margin-top: 2rem;
}

.post-navigation .nav-links {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.post-navigation a {
	color: var(--cz-orange-braun);
	text-decoration: none;
	font-family: "Quicksand", sans-serif;
	font-weight: 600;
	font-size: var(--cz-text-klein);
}

.post-navigation a:hover {
	color: var(--cz-orange);
}

/* Das Beitragsbild steckt im Banner. Astra gibt es zusaetzlich im
   entry-header aus – frueher als .ast-single-post-featured-section,
   inzwischen als .post-thumb-img-content. Beide Varianten abdecken. */
.single-post .entry-header .post-thumb-img-content,
.single-post .entry-header .post-thumb,
.single-post .ast-single-post-featured-section {
	display: none !important;
}

.single-post .entry-header.ast-no-title {
	margin: 0;
	padding: 0;
	min-height: 0;
}

/* Titel der Sidebar-Liste sollen an Wortgrenzen umbrechen. */
.cz-beliebt a {
	overflow-wrap: anywhere;
	word-break: normal;
	hyphens: auto;
}

/* Bildlink in der Liste: nur wenn er wirklich ein Bild traegt, sonst
   wuerde der Titel-Link auf 56 px gequetscht. */
.cz-beliebt li > a:first-child:not(:has(img)) {
	flex: 1 1 auto;
	width: auto;
	height: auto;
}

.cz-beliebt a {
	hyphens: manual;
	overflow-wrap: break-word;
}