/**
 * Wiederkehrende Bauteile (Markup aus zelenka-core/includes/ui.php).
 * Module bauen darauf auf und bringen ihr eigenes CSS mit (blocks/<slug>/style.css).
 */

/* Gepunktete Linie unter Überschriften */
.zel-dotted {
	display: inline-block;
	padding-bottom: 0.625rem;
	border-bottom: var(--zel-dot) dotted currentColor;
}

.zel-heading {
	margin-bottom: 1.5rem;
}

.zel-heading--h1 {
	font-size: var(--zel-fs-h1);
}

.zel-heading--h2 {
	font-size: var(--zel-fs-h2);
}

.zel-heading--h3 {
	font-size: var(--zel-fs-h3);
}

/* Unterzeile „» …“ */
.zel-lead {
	margin: 0 0 1.75rem;
	color: var(--zel-schwarz);
	font-family: var(--zel-font-text);
	font-size: var(--zel-fs-lead);
	font-style: italic;
	font-weight: 500;
	line-height: 1.45;
}

.zel-lead::before {
	content: "» ";
}

.zel-lead a {
	color: inherit;
}

/* Runder schwarzer Button mit Symbol */
.zel-bubble {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	flex: 0 0 auto;
	width: var(--zel-bubble);
	height: var(--zel-bubble);
	padding: 1rem;
	border: 0;
	border-radius: 50%;
	background: var(--zel-schwarz);
	color: var(--zel-weiss);
	font-family: var(--zel-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.zel-bubble:hover {
	transform: scale(1.04);
	text-decoration: none;
	box-shadow: var(--zel-shadow);
}

.zel-bubble:focus-visible {
	outline: 3px solid var(--zel-weiss);
	outline-offset: -8px;
	box-shadow: 0 0 0 3px var(--zel-schwarz);
}

.zel-bubble__icon {
	width: 1.375rem;
	height: 1.375rem;
	stroke-width: 1.75;
}

@media (max-width: 767.98px) {
	.zel-bubble {
		font-size: 1.0625rem;
		padding: 0.75rem;
	}
}

/* Eckiger Button */
.zel-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 3rem;
	padding: 1.125rem 1.5rem;
	border: 0;
	background: var(--zel-schwarz);
	color: var(--zel-weiss);
	font-family: var(--zel-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease;
}

.zel-btn:hover {
	background: var(--zel-anthrazit);
	text-decoration: none;
}

.zel-btn--hell {
	background: var(--zel-weiss);
	color: var(--zel-schwarz);
}

.zel-btn--hell:hover {
	background: var(--zel-papier);
}

.zel-btn--kontur {
	border: 2px solid currentColor;
	background: transparent;
	color: inherit;
}

.zel-btn--kontur:hover {
	background: rgba(0, 0, 0, 0.06);
}

/* Textlink mit » */
.zel-arrow-link {
	color: inherit;
	font-size: var(--zel-fs-lead);
	font-style: italic;
	font-weight: 500;
}

.zel-arrow-link::before {
	content: "» ";
}

.zel-arrow-link {
	display: inline-block;
	padding-block: 0.5rem;
}

/* Illustrationen (dekorativ) */
.zel-illu {
	pointer-events: none;
	user-select: none;
	mix-blend-mode: multiply;
}

/* Eyebrow: kleine kursive Zeile über Kartentiteln („Für dich“) */
.zel-eyebrow {
	display: block;
	margin-bottom: 0.125rem;
	color: var(--zel-anthrazit);
	font-family: var(--zel-font-display);
	font-size: var(--zel-fs-eyebrow);
	font-style: italic;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

/* Formularfeld auf Beige: sichtbare Beschriftung, gepunktete Linie */
.zel-field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-bottom: 1.25rem;
}

.zel-field label {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 500;
}

.zel-field input,
.zel-field select,
.zel-field textarea {
	border: 0;
	border-bottom: var(--zel-dot) dotted var(--zel-schwarz);
	background: rgba(255, 255, 255, 0.35);
	padding: 0.625rem 0.5rem;
}

.zel-field input:focus,
.zel-field textarea:focus,
.zel-field select:focus {
	background: rgba(255, 255, 255, 0.7);
}

.zel-field--error input,
.zel-field--error textarea {
	border-bottom-color: var(--zel-rot);
}

.zel-field__error {
	color: var(--zel-rot);
	font-size: var(--zel-fs-small);
	font-weight: 500;
}

/* Meldungen */
.zel-message {
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--zel-gruen);
	background: rgba(255, 255, 255, 0.7);
	color: var(--zel-schwarz);
}

.zel-message--error {
	border-left-color: var(--zel-rot);
}

/* Platzhalter im Editor (Plugin liefert zel_placeholder) */
.zel-placeholder {
	padding: 1rem 1.25rem;
	border: 1px dashed rgba(0, 0, 0, 0.45);
	background: rgba(255, 255, 255, 0.5);
	color: var(--zel-schwarz);
	font-family: var(--zel-font-text);
	font-size: 0.875rem;
}

/* Hinweisfenster (Einstellungen → Hinweise) */
.zel-popup {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--zel-gutter);
	background: rgba(0, 0, 0, 0.55);
}

.zel-popup[hidden] {
	display: none;
}

.zel-popup__box {
	position: relative;
	width: min(34rem, 100%);
	max-height: 90vh;
	overflow-y: auto;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	background: var(--zel-beige);
	color: var(--zel-schwarz);
	box-shadow: var(--zel-shadow);
}

.zel-popup__title {
	margin-bottom: 1rem;
}

.zel-popup__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	background: none;
	cursor: pointer;
}

/* ------------------------------------------------------------------ */
/* Karte (Angebote, Produkte im Karussell, Projekte)                  */
/* Bild oben, runder Button überlappt die untere rechte Ecke,         */
/* darunter kursive Zeile und Titel in Versalien.                     */
/* ------------------------------------------------------------------ */

.zel-card {
	--zel-card-ratio: 10 / 11;
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	color: var(--zel-schwarz);
}

.zel-card__media {
	position: relative;
	margin-bottom: 1.5rem;
}

.zel-card__image {
	display: block;
	width: 100%;
	aspect-ratio: var(--zel-card-ratio);
	overflow: hidden;
	background: var(--zel-papier);
}

.zel-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.zel-card--produkt .zel-card__image img {
	object-fit: contain;
	padding: 8%;
}

.zel-card:hover .zel-card__image img {
	transform: scale(1.03);
}

.zel-card__bubble {
	position: absolute;
	right: clamp(0.75rem, 2vw, 1.25rem);
	bottom: calc(var(--zel-bubble) * -0.5);
	z-index: 2;
}

.zel-card__body {
	padding-right: calc(var(--zel-bubble) + 1rem);
}

.zel-card__eyebrow {
	display: block;
	color: var(--zel-anthrazit);
	font-family: var(--zel-font-display);
	font-size: 1.25rem;
	font-style: italic;
	font-weight: 600;
	line-height: 1.15;
	text-transform: uppercase;
}

.zel-card__title {
	margin: 0;
	hyphens: auto;
	-webkit-hyphens: auto;
	hyphenate-limit-chars: 10 4 4;
	color: var(--zel-schwarz);
	font-family: var(--zel-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
}

.zel-card__title a {
	color: inherit;
	text-decoration: none;
}

/* Ganze Karte klickbar über den Titel-Link (Button bleibt eigener Link) */
.zel-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.zel-card__price {
	margin-top: 0.25rem;
	font-size: 0.9375rem;
}

.zel-card__legal {
	display: block;
	color: var(--zel-anthrazit);
	font-size: 0.75rem;
}

.zel-cards {
	display: grid;
	grid-template-columns: repeat(var(--zel-cards-columns, 3), minmax(0, 1fr));
	gap: calc(var(--zel-bubble) * 0.5 + 2.5rem) var(--zel-gap);
}

@media (max-width: 991.98px) {
	.zel-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 575.98px) {
	.zel-cards {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Sichtbarer Fokus auf Kartentiteln (die ganze Karte ist über den Titel-Link klickbar) */
.zel-card__title a:focus-visible {
	outline: 3px solid var(--zel-schwarz);
	outline-offset: 4px;
}

.zel-card:focus-within .zel-card__image {
	box-shadow: 0 0 0 3px var(--zel-schwarz);
}