/**
 * Bausteine aus der Feedbackrunde: Audio, Referenzen, Story-Box,
 * Zwischenbalken, Social-Icons, Terminbuchung.
 */

/* =====================================================================
   Audio – zentriert, in Markenfarben
   Elementor-Struktur: section > .elementor-container > .elementor-column
   ===================================================================== */
.cz-audio {
	max-width: 34rem;
	margin: 0 auto;
	padding: 1.4rem 1.5rem 1.2rem;
	border-radius: var(--cz-radius-m);
	background: var(--cz-weiss);
	box-shadow: var(--cz-schatten-s);
	text-align: center;
}

.cz-audio__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 0.6rem;
	border-radius: 50%;
	background: var(--cz-verlauf-orange-weich);
	color: var(--cz-weiss);
}

.cz-audio__icon svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.cz-audio__label,
.cz-audio__titel {
	display: block;
	margin-bottom: 0.35rem;
	font-family: "Quicksand", sans-serif;
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--cz-orange-braun);
}

.cz-audio__text {
	margin: 0 0 0.9rem;
	font-size: var(--cz-text-klein);
	color: var(--cz-warmgrau);
	line-height: 1.55;
}

.cz-audio audio {
	width: 100%;
	height: 42px;
	border-radius: var(--cz-radius-pill);
}

/* Wiedergabeleiste in Chromium/Safari einfaerben */
.cz-audio audio::-webkit-media-controls-panel {
	background: var(--cz-flaeche);
}

.cz-audio audio::-webkit-media-controls-play-button {
	filter: hue-rotate(-15deg) saturate(1.4);
}

/* =====================================================================
   Referenzen im Zickzack

   Die Zeilen sind Elementor-Sektionen mit zwei Spalten. Die Drehung
   passiert bereits in der Reihenfolge der Spalten (siehe cz6_referenz),
   hier steht nur noch die Optik.
   ===================================================================== */
.cz-referenz-kopf .elementor-heading-title {
	margin-bottom: 0.2em;
}

.cz-referenz > .elementor-container {
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
}

.cz-referenz + .cz-referenz > .elementor-container {
	border-top: 1px solid var(--cz-linie);
	padding-top: clamp(1.4rem, 3vw, 2.2rem);
}

.cz-referenz__bild img {
	width: auto;
	max-width: 180px;
	max-height: 120px;
	object-fit: contain;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Portraets in der Referenzliste bleiben rund */
.cz-referenz__bild img[src*="Portraet"],
.cz-referenz__bild img[src*="ortrait"] {
	width: 120px;
	height: 120px;
	max-width: 120px;
	max-height: 120px;
	object-fit: cover;
	border-radius: 50% !important;
}

.cz-referenz__institut .elementor-heading-title {
	font-family: "Quicksand", sans-serif;
	font-weight: 600;
	font-size: 17px;
	line-height: 1.35;
	color: var(--cz-orange-braun);
	text-align: center;
}

.cz-referenz__zeitraum,
.cz-referenz__zeitraum p {
	font-size: var(--cz-text-klein);
	color: var(--cz-warmgrau-hell);
	text-align: center;
	margin: 0.2rem 0 0;
}

.cz-referenz__zitat {
	position: relative;
}

.cz-referenz__zitat--echt {
	padding-left: 2.6rem;
}

.cz-referenz__zitat--echt::before {
	content: "„";
	position: absolute;
	left: 0;
	top: -0.15em;
	font-family: "Quicksand", sans-serif;
	font-size: 3rem;
	line-height: 1;
	color: var(--cz-orange-hell);
	opacity: 0.55;
}

/* Das Anführungszeichen bleibt links am Text – rechts stünde es in der
 * gedrehten Zeile weit vom Zitat entfernt am Spaltenrand. */

.cz-referenz__zitat .cz-referenz__quelle {
	margin-top: 0.7rem;
	font-size: var(--cz-text-klein);
	font-style: normal;
	color: var(--cz-warmgrau);
}

@media (max-width: 768px) {
	/* Auf schmalen Schirmen steht das Logo immer oben – der Zickzack
	   hätte sonst zwei Zeilen mit Bild unten hintereinander. */
	.cz-referenz--gedreht > .elementor-container {
		flex-direction: column-reverse;
	}
	.cz-referenz__zitat,
	.cz-referenz--gedreht .cz-referenz__zitat {
		padding-left: 1.8rem;
		padding-right: 0;
	}
	.cz-referenz--gedreht .cz-referenz__zitat--echt::before {
		left: 0;
		right: auto;
		content: "„";
	}
}

/* =====================================================================
   Story-Box: links Bild, rechts blaue Box
   ===================================================================== */
.cz-story > .elementor-container {
	align-items: stretch;
	gap: clamp(1.2rem, 3vw, 2.2rem);
}

.cz-story__bild img {
	width: 100%;
	height: 100%;
	min-height: 260px;
	object-fit: cover;
	border-radius: var(--cz-radius-l);
}

.cz-story__bild,
.cz-story__bild .elementor-widget-container,
.cz-story__bild .elementor-image,
.cz-story__bild figure {
	height: 100%;
}

.cz-story__box > .elementor-widget-wrap {
	padding: clamp(1.6rem, 3vw, 2.4rem);
	border-radius: var(--cz-radius-l);
	background: var(--cz-verlauf-blau);
	color: var(--cz-weiss);
	align-content: center;
}

.cz-story__box .elementor-heading-title,
.cz-story__box p,
.cz-story__box li {
	color: var(--cz-weiss);
}

.cz-story__titel .elementor-heading-title {
	margin: 0 0 0.5em;
	font-size: var(--cz-h3);
}

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

@media (max-width: 768px) {
	.cz-story__bild img {
		min-height: 200px;
	}
}

/* =====================================================================
   Zwischenbalken mit Verlauf, Text und Button
   ===================================================================== */
.cz-balken {
	position: relative;
	background: var(--cz-verlauf-orange);
	color: var(--cz-weiss);
	text-align: center;
	overflow: hidden;
	border-radius: var(--cz-radius-l);
}

.cz-balken--blau {
	background: var(--cz-verlauf-blau);
}

.cz-balken .elementor-heading-title,
.cz-balken p {
	color: var(--cz-weiss);
	position: relative;
}

.cz-balken__titel .elementor-heading-title {
	margin: 0 0 0.35em;
}

.cz-balken__text p {
	max-width: 42rem;
	margin: 0 auto 1.4rem;
	font-size: var(--cz-text-gross);
}

/* Auf dem Verlauf braucht der Button den umgekehrten Kontrast. */
.cz-balken__btn .elementor-button {
	background: var(--cz-weiss) !important;
	background-image: none !important;
	color: var(--cz-orange-braun) !important;
	box-shadow: 0 6px 20px rgba(58, 52, 47, 0.18);
}

.cz-balken--blau .cz-balken__btn .elementor-button {
	color: var(--cz-petrol) !important;
}

.cz-balken__btn .elementor-button:hover,
.cz-balken__btn .elementor-button:focus-visible {
	background: var(--cz-flaeche) !important;
	color: var(--cz-orange-braun) !important;
	transform: translateY(-2px);
	text-decoration: none;
}

/* =====================================================================
   Social-Icons
   ===================================================================== */
.cz-social-liste {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin: 1.2rem 0 0;
	padding: 0;
	list-style: none;
}

.cz-social-liste li {
	margin: 0;
	padding: 0;
}

.cz-social-liste li::before {
	display: none;
}

.cz-social-liste a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--cz-verlauf-orange-weich);
	color: var(--cz-weiss);
	transition: transform var(--cz-dauer) var(--cz-easing), box-shadow var(--cz-dauer) var(--cz-easing);
}

.cz-social-liste a:hover {
	transform: translateY(-3px);
	box-shadow: var(--cz-schatten-farbig);
}

.cz-social-liste svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* Im Footer heller auf dem blauen Grund */
.site-primary-footer-wrap .cz-social-liste a {
	background: rgba(255, 255, 255, 0.18);
}

.site-primary-footer-wrap .cz-social-liste a:hover {
	background: var(--cz-weiss);
	color: var(--cz-petrol);
}

/* =====================================================================
   Terminbuchung und Formular – Platzhalter bis zur Einbindung
   ===================================================================== */
.cz-einbettung {
	margin: 2rem 0;
	padding: clamp(1.5rem, 3vw, 2.2rem);
	border: 2px dashed var(--cz-linie);
	border-radius: var(--cz-radius-m);
	background: var(--cz-flaeche);
	text-align: center;
}

.cz-einbettung__titel {
	display: block;
	margin-bottom: 0.5rem;
	font-family: "Quicksand", sans-serif;
	font-weight: 600;
	color: var(--cz-orange-braun);
}

.cz-einbettung p {
	margin: 0 auto;
	max-width: 34rem;
	color: var(--cz-warmgrau);
	font-size: var(--cz-text-klein);
}

.cz-einbettung iframe {
	width: 100%;
	min-height: 640px;
	border: 0;
	border-radius: var(--cz-radius-m);
}

/* =====================================================================
   Icon-Boxen auf der Startseite: gleiche Groesse
   ===================================================================== */
.cz-einstieg {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.2rem, 3vw, 2.5rem);
	max-width: 56rem;
	margin: 0 auto;
}

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

.cz-einstieg__punkt {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1.2rem 1.3rem;
	border-radius: var(--cz-radius-m);
	background: var(--cz-weiss);
	box-shadow: var(--cz-schatten-s);
	text-decoration: none;
	transition: transform var(--cz-dauer) var(--cz-easing), box-shadow var(--cz-dauer) var(--cz-easing);
}

.cz-einstieg__punkt:hover {
	transform: translateY(-4px);
	box-shadow: var(--cz-schatten-m);
	text-decoration: none;
}

/* Feste Kantenlaenge, damit beide Icons gleich gross sind – auch wenn
   spaeter ein Bild statt eines Zeichens eingesetzt wird. */
.cz-einstieg__icon {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--cz-verlauf-orange-weich);
	color: var(--cz-weiss);
	font-size: 24px;
	overflow: hidden;
}

.cz-einstieg__icon img,
.cz-einstieg__icon svg {
	width: 28px;
	height: 28px;
	object-fit: contain;
	border-radius: 0 !important;
	box-shadow: none !important;
	fill: currentColor;
}

.cz-einstieg__titel {
	display: block;
	font-family: "Quicksand", sans-serif;
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--cz-orange-braun);
	margin-bottom: 0.2rem;
}

.cz-einstieg__text {
	display: block;
	font-size: var(--cz-text-klein);
	color: var(--cz-text);
	line-height: 1.55;
}

/* =====================================================================
   Icons als CSS-Maske

   Inline-SVG überlebt das Speichern im Elementor-HTML-Widget nicht –
   WordPress filtert die Tags heraus. Die Zeichen kommen deshalb als
   Maske aus dem Stylesheet und lassen sich über currentColor einfärben.
   ===================================================================== */
.cz-einstieg__icon::before,
.cz-audio__icon::before {
	content: "";
	display: block;
	width: 26px;
	height: 26px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.cz-audio__icon::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%203a1%201%200%20011%201v16a1%201%200%2001-1.7.7L6.6%2016H4a1%201%200%2001-1-1V9a1%201%200%20011-1h2.6l4.7-4.7A1%201%200%200112%203zm5.5%203.4a1%201%200%20011.4%200A8%208%200%200121%2012a8%208%200%2001-2.1%205.6%201%201%200%2011-1.5-1.3A6%206%200%200019%2012a6%206%200%2000-1.6-4.2%201%201%200%20010-1.4zm-2.6%202.8a1%201%200%20011.4.1A4%204%200%200117%2012a4%204%200%2001-.7%202.3%201%201%200%2011-1.6-1.2A2%202%200%200015%2012a2%202%200%2000-.3-1.1%201%201%200%2001.2-1.4z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%203a1%201%200%20011%201v16a1%201%200%2001-1.7.7L6.6%2016H4a1%201%200%2001-1-1V9a1%201%200%20011-1h2.6l4.7-4.7A1%201%200%200112%203zm5.5%203.4a1%201%200%20011.4%200A8%208%200%200121%2012a8%208%200%2001-2.1%205.6%201%201%200%2011-1.5-1.3A6%206%200%200019%2012a6%206%200%2000-1.6-4.2%201%201%200%20010-1.4zm-2.6%202.8a1%201%200%20011.4.1A4%204%200%200117%2012a4%204%200%2001-.7%202.3%201%201%200%2011-1.6-1.2A2%202%200%200015%2012a2%202%200%2000-.3-1.1%201%201%200%2001.2-1.4z%22%2F%3E%3C%2Fsvg%3E");
}

.cz-einstieg__icon--audio::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%203a1%201%200%20011%201v16a1%201%200%2001-1.7.7L6.6%2016H4a1%201%200%2001-1-1V9a1%201%200%20011-1h2.6l4.7-4.7A1%201%200%200112%203zm5.5%203.4a1%201%200%20011.4%200A8%208%200%200121%2012a8%208%200%2001-2.1%205.6%201%201%200%2011-1.5-1.3A6%206%200%200019%2012a6%206%200%2000-1.6-4.2%201%201%200%20010-1.4zm-2.6%202.8a1%201%200%20011.4.1A4%204%200%200117%2012a4%204%200%2001-.7%202.3%201%201%200%2011-1.6-1.2A2%202%200%200015%2012a2%202%200%2000-.3-1.1%201%201%200%2001.2-1.4z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%203a1%201%200%20011%201v16a1%201%200%2001-1.7.7L6.6%2016H4a1%201%200%2001-1-1V9a1%201%200%20011-1h2.6l4.7-4.7A1%201%200%200112%203zm5.5%203.4a1%201%200%20011.4%200A8%208%200%200121%2012a8%208%200%2001-2.1%205.6%201%201%200%2011-1.5-1.3A6%206%200%200019%2012a6%206%200%2000-1.6-4.2%201%201%200%20010-1.4zm-2.6%202.8a1%201%200%20011.4.1A4%204%200%200117%2012a4%204%200%2001-.7%202.3%201%201%200%2011-1.6-1.2A2%202%200%200015%2012a2%202%200%2000-.3-1.1%201%201%200%2001.2-1.4z%22%2F%3E%3C%2Fsvg%3E");
}

.cz-einstieg__icon--person::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2012a4.5%204.5%200%20100-9%204.5%204.5%200%20000%209zm0%202c-3.9%200-7.5%202.1-7.5%204.7V21h15v-2.3c0-2.6-3.6-4.7-7.5-4.7z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2012a4.5%204.5%200%20100-9%204.5%204.5%200%20000%209zm0%202c-3.9%200-7.5%202.1-7.5%204.7V21h15v-2.3c0-2.6-3.6-4.7-7.5-4.7z%22%2F%3E%3C%2Fsvg%3E");
}

/* Setzt Christoph später ein eigenes Bild ein, weicht die Maske. */
.cz-einstieg__icon:has(img)::before {
	display: none;
}

/* Marke, Name und Zeitraum gehören zusammen – Elementors Widget-Abstand
 * von 20 px trieb sie auseinander. */
.cz-referenz__bild .elementor-widget-container {
	margin-bottom: 0.6rem;
}

.cz-referenz > .elementor-container .cz-referenz__bild,
.cz-referenz > .elementor-container .cz-referenz__institut {
	margin-bottom: 0;
}

.cz-referenz__institut .elementor-heading-title {
	margin-bottom: 0.15rem;
}

/* Social-Zeichen als Maske – dieselbe Begründung wie oben: Inline-SVG
 * überlebt das Speichern in Elementor-Widgets nicht. */
.cz-social-liste a::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Enthält der Link bereits ein SVG (Footer-Widget), bleibt es dabei. */
.cz-social-liste a:has(svg)::before {
	display: none;
}

.cz-social-liste a[href*="linkedin"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4.98%203.5a2.5%202.5%200%2011-.02%205%202.5%202.5%200%2001.02-5zM3%209h4v12H3zM9%209h3.8v1.7h.06c.53-.95%201.83-1.95%203.76-1.95%204.02%200%204.76%202.5%204.76%205.76V21h-4v-5.6c0-1.34-.03-3.07-1.9-3.07-1.9%200-2.19%201.46-2.19%202.97V21H9z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4.98%203.5a2.5%202.5%200%2011-.02%205%202.5%202.5%200%2001.02-5zM3%209h4v12H3zM9%209h3.8v1.7h.06c.53-.95%201.83-1.95%203.76-1.95%204.02%200%204.76%202.5%204.76%205.76V21h-4v-5.6c0-1.34-.03-3.07-1.9-3.07-1.9%200-2.19%201.46-2.19%202.97V21H9z%22%2F%3E%3C%2Fsvg%3E");
}

.cz-social-liste a[href*="instagram"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202.2c3.2%200%203.58.01%204.85.07%203.25.15%204.77%201.69%204.92%204.92.06%201.27.07%201.65.07%204.85s-.01%203.58-.07%204.85c-.15%203.23-1.66%204.77-4.92%204.92-1.27.06-1.64.07-4.85.07s-3.58-.01-4.85-.07c-3.26-.15-4.77-1.7-4.92-4.92-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85C2.38%203.96%203.89%202.42%207.15%202.27%208.42%202.21%208.8%202.2%2012%202.2zm0%205.6a4.2%204.2%200%20100%208.4%204.2%204.2%200%20000-8.4zm0%206.93a2.73%202.73%200%20110-5.46%202.73%202.73%200%20010%205.46zm4.37-7.1a.98.98%200%20100%201.96.98.98%200%20000-1.96z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202.2c3.2%200%203.58.01%204.85.07%203.25.15%204.77%201.69%204.92%204.92.06%201.27.07%201.65.07%204.85s-.01%203.58-.07%204.85c-.15%203.23-1.66%204.77-4.92%204.92-1.27.06-1.64.07-4.85.07s-3.58-.01-4.85-.07c-3.26-.15-4.77-1.7-4.92-4.92-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85C2.38%203.96%203.89%202.42%207.15%202.27%208.42%202.21%208.8%202.2%2012%202.2zm0%205.6a4.2%204.2%200%20100%208.4%204.2%204.2%200%20000-8.4zm0%206.93a2.73%202.73%200%20110-5.46%202.73%202.73%200%20010%205.46zm4.37-7.1a.98.98%200%20100%201.96.98.98%200%20000-1.96z%22%2F%3E%3C%2Fsvg%3E");
}

.cz-social-liste a[href*="facebook"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.5%2021v-8h2.7l.4-3.1h-3.1V7.9c0-.9.25-1.5%201.54-1.5h1.65V3.6c-.29-.04-1.27-.12-2.4-.12-2.38%200-4.01%201.45-4.01%204.12v2.3H7.5V13h2.78v8z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.5%2021v-8h2.7l.4-3.1h-3.1V7.9c0-.9.25-1.5%201.54-1.5h1.65V3.6c-.29-.04-1.27-.12-2.4-.12-2.38%200-4.01%201.45-4.01%204.12v2.3H7.5V13h2.78v8z%22%2F%3E%3C%2Fsvg%3E");
}

.cz-social-liste a[href*="youtube"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M21.6%207.2s-.19-1.36-.78-1.96c-.75-.79-1.59-.79-1.98-.84C16.1%204.2%2012%204.2%2012%204.2h-.01s-4.1%200-6.84.2c-.38.05-1.22.05-1.97.84-.6.6-.78%201.96-.78%201.96S2.2%208.8%202.2%2010.4v1.5c0%201.6.2%203.2.2%203.2s.19%201.36.78%201.96c.75.79%201.73.76%202.17.84%201.57.15%206.66.2%206.66.2s4.1-.01%206.84-.21c.38-.05%201.22-.05%201.97-.84.6-.6.78-1.96.78-1.96s.2-1.6.2-3.2v-1.5c0-1.6-.2-3.2-.2-3.2zM9.94%2014.2V8.9l5.27%202.66z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M21.6%207.2s-.19-1.36-.78-1.96c-.75-.79-1.59-.79-1.98-.84C16.1%204.2%2012%204.2%2012%204.2h-.01s-4.1%200-6.84.2c-.38.05-1.22.05-1.97.84-.6.6-.78%201.96-.78%201.96S2.2%208.8%202.2%2010.4v1.5c0%201.6.2%203.2.2%203.2s.19%201.36.78%201.96c.75.79%201.73.76%202.17.84%201.57.15%206.66.2%206.66.2s4.1-.01%206.84-.21c.38-.05%201.22-.05%201.97-.84.6-.6.78-1.96.78-1.96s.2-1.6.2-3.2v-1.5c0-1.6-.2-3.2-.2-3.2zM9.94%2014.2V8.9l5.27%202.66z%22%2F%3E%3C%2Fsvg%3E");
}


/* Bleibt nur eine Einstiegskachel übrig, säße sie im zweispaltigen
   Raster linksbündig in der halben Breite. */
.cz-einstieg--einzeln {
	grid-template-columns: 1fr;
	max-width: 34rem;
}

/* =====================================================================
   Linkliste („Link in Bio")

   Jeder Eintrag ist ein Elementor-Icon-Box-Widget mit der Klasse
   cz-linkkachel. So bleiben Symbol, Titel, Text und Ziel im Panel
   bearbeitbar und eine Kachel laesst sich per Rechtsklick duplizieren –
   die Gestaltung steht hier, nicht in den Widget-Einstellungen.
   ===================================================================== */
.cz-linkliste .elementor-widget-wrap {
	gap: 0.85rem;
}

.cz-linkkachel {
	width: 100%;
}

.cz-linkkachel .elementor-icon-box-wrapper {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	padding: 1.05rem 3rem 1.05rem 1.2rem;
	border: 1px solid var(--cz-linie);
	border-radius: var(--cz-radius-m);
	background: var(--cz-weiss);
	box-shadow: var(--cz-schatten-s);
	text-align: left;
	position: relative;
	transition: transform var(--cz-dauer) var(--cz-easing),
		box-shadow var(--cz-dauer) var(--cz-easing),
		border-color var(--cz-dauer) var(--cz-easing);
}

/* Das Icon-Box-Widget verlinkt Symbol und Titel einzeln. Damit die
   ganze Kachel klickbar wirkt, wird der Titel-Link aufgespannt. */
.cz-linkkachel .elementor-icon-box-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--cz-radius-m);
}

.cz-linkkachel:hover .elementor-icon-box-wrapper,
.cz-linkkachel:focus-within .elementor-icon-box-wrapper {
	transform: translateY(-2px);
	box-shadow: var(--cz-schatten-m);
	border-color: var(--cz-orange-hell);
}

/* Pfeil am rechten Rand, der beim Hover nachrueckt. */
.cz-linkkachel .elementor-icon-box-wrapper::after {
	content: "";
	position: absolute;
	right: 1.2rem;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	background-color: var(--cz-orange-braun);
	-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);
}

.cz-linkkachel:hover .elementor-icon-box-wrapper::after {
	transform: translateX(4px);
}

/* Symbol im Verlaufskreis – dieselbe Groesse wie die Einstiegs-Icons
   auf der Startseite. */
.cz-linkkachel .elementor-icon-box-icon {
	flex: 0 0 52px;
	margin: 0;
}

/* Elementor faerbt das Symbol ueber eine eigene Regel am Widget orange –
   auf dem orangen Kreis waere es unsichtbar. Der Klassenname des Widgets
   steht deshalb mit im Selektor, damit diese Regel gewinnt. */
.cz-linkkachel.elementor-widget-icon-box .elementor-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--cz-verlauf-orange-weich);
	color: var(--cz-weiss);
	font-size: 21px;
}

.cz-linkkachel.elementor-widget-icon-box .elementor-icon svg,
.cz-linkkachel.elementor-widget-icon-box .elementor-icon svg path,
.cz-linkkachel.elementor-widget-icon-box .elementor-icon i {
	width: 21px;
	height: 21px;
	color: var(--cz-weiss);
	fill: var(--cz-weiss);
}

.cz-linkkachel .elementor-icon-box-content {
	flex: 1 1 auto;
}

.cz-linkkachel .elementor-icon-box-title {
	margin: 0 0 0.15rem;
	font-family: "Quicksand", sans-serif;
	font-size: 1.08rem;
	font-weight: 600;
	line-height: 1.3;
}

.cz-linkkachel .elementor-icon-box-title,
.cz-linkkachel .elementor-icon-box-title a {
	color: var(--cz-orange-braun);
	text-decoration: none;
}

.cz-linkkachel .elementor-icon-box-description {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--cz-warmgrau);
}

@media (max-width: 480px) {
	.cz-linkkachel .elementor-icon-box-wrapper {
		gap: 0.85rem;
		padding: 0.95rem 2.4rem 0.95rem 0.95rem;
	}
	.cz-linkkachel .elementor-icon-box-icon,
	.cz-linkkachel .elementor-icon {
		flex-basis: 44px;
		width: 44px;
		height: 44px;
		font-size: 18px;
	}
	.cz-linkkachel .elementor-icon-box-description {
		font-size: 14px;
	}
}