/* Zauberhaus Profile – Frontend
   Dunkles, edles Design mit Pink-Verlauf-Akzenten und Gold-Highlights für Premium-Inhalte. */

.zh-grid,
.zh-modal,
.zh-lightbox,
.zh-countdown,
.zh-filter-bar,
.zh-week-range {
	--zh-bg: #0d0b10;
	--zh-surface: #17141c;
	--zh-surface-2: #1f1a24;
	--zh-border: rgba(255, 255, 255, 0.08);
	--zh-text: #f5f2f0;
	--zh-text-muted: #a89aa8;
	--zh-accent: #e0247c;
	--zh-accent-2: #ff4fa3;
	--zh-glow: #e0247c;
	--zh-badge-this-week: #e0247c;
	--zh-gold: #d4af37;
	--zh-gold-soft: #f5d787;
	--zh-star: #f5c518;
	--zh-radius: 16px;
	--zh-font-display: "Playfair Display", Georgia, serif;
	--zh-font-script: "Alex Brush", cursive;
	--zh-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.zh-grid *,
.zh-filter-bar *,
.zh-filter-bar *::before,
.zh-filter-bar *::after,
.zh-modal *,
.zh-modal *::before,
.zh-modal *::after {
	box-sizing: border-box;
}

/* ---------- Grid & Karten ---------- */

.zh-grid {
	display: grid;
	grid-template-columns: repeat(var(--zh-columns, 4), 1fr);
	gap: 24px;
	font-family: var(--zh-font-body);
}

@media (max-width: 1100px) {
	.zh-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 780px) {
	.zh-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 460px) {
	.zh-grid { grid-template-columns: 1fr; }
	/* Bei einer Spalte gibt es keine Nachbarkarte mehr, deren Höhe
	   angeglichen werden müsste – die Mindesthöhe würde bei Profilen ohne
	   Bewertung nur unnötig leeren Platz in der Karte erzeugen. */
	.zh-card-body { min-height: 0; }
}

/*
 * ROOT CAUSE (verifiziert per Live-Messung auf der tatsächlichen Seite,
 * nicht nur vermutet): Elementors Flexbox-Container (".e-con", seit 3.6
 * Standard, ersetzt die klassischen Sections/Columns) setzen für die
 * mobile Ansicht (<=767px) standardmäßig `--flex-wrap-mobile: wrap`,
 * wodurch der innere Flex-Wrapper ".e-con-inner" auf Mobile
 * `flex-wrap: wrap` bekommt – gedacht für Container mit
 * flex-direction:ROW, die auf schmalen Bildschirmen umbrechen sollen.
 *
 * Liegt unser Widget aber (wie üblich) in einem Container mit
 * flex-direction:COLUMN, führt genau diese Kombination
 * ("column" + "wrap") zu einem bekannten Flexbox-Layout-Bug: Die Höhe
 * des Flex-Items wird von der Renderengine falsch berechnet (an
 * ac6e6d8/zh-grid gemessen: 604px statt der tatsächlichen ~2950px
 * Kartenhöhe), unabhängig vom tatsächlichen Inhalt. Dadurch beginnt die
 * nächste Section zu früh und überlappt die eigentlich noch sichtbaren
 * Karten. `height:auto`/`overflow:visible`-Overrides allein wirken NICHT,
 * weil nicht `height`, sondern der Flexbox-Sizing-Algorithmus selbst
 * betroffen ist – erst `flex-wrap:nowrap` auf dem Elternflexcontainer
 * behebt es zuverlässig (live gegen die Seite verifiziert).
 */
.e-con-inner:has(.zh-grid),
.e-con-inner:has(.zh-countdown) {
	flex-wrap: nowrap !important;
}

/* Zusätzliche Absicherung: das umschließende Widget/den Widget-Container
   nie clippen, falls doch einmal eine feste Höhe/overflow von außen kommt. */
.elementor-widget-container:has(> .zh-grid),
.elementor-widget-container:has(> .zh-countdown),
.elementor-widget-zauberhaus_profiles_grid,
.elementor-widget-zauberhaus_countdown {
	height: auto !important;
	overflow: visible !important;
}

/* Fallback für klassische Elementor-Sections/-Spalten (vor 3.6 bzw. wenn
   im Editor "Legacy"-Layout aktiv ist) mit ähnlichem Height/Overflow-Problem. */
.elementor-column:has(.zh-grid),
.elementor-container:has(.zh-grid),
.elementor-section:has(.zh-grid) {
	overflow: visible !important;
}

@media (max-width: 1100px) {
	.elementor-column:has(.zh-grid),
	.elementor-container:has(.zh-grid),
	.elementor-section:has(.zh-grid) {
		height: auto !important;
		min-height: 0 !important;
	}
}

/*
 * Die Karte ist bewusst zweigeteilt:
 * .zh-card        trägt NUR die Hover-Transform-Animation (kein overflow/radius).
 * .zh-card-inner   trägt border-radius + overflow:hidden + Border/Background.
 * Beides auf demselben Element zu kombinieren löst in Chrome/Safari bei der
 * Hover-Transform zuverlässig eine 1px-Nahtlinie an Kind-Grenzen aus – daher
 * die Aufteilung auf zwei Elemente.
 */
.zh-card {
	position: relative;
	cursor: pointer;
	transition: transform 220ms ease;
}

.zh-card:hover,
.zh-card:focus-visible {
	transform: translateY(-4px);
}

.zh-card:focus-visible {
	outline: 2px solid var(--zh-accent-2);
	outline-offset: 2px;
}

.zh-card-inner {
	position: relative;
	background: #050505;
	border: 1px solid transparent;
	border-radius: 0;
	overflow: hidden;
	transition: box-shadow 220ms ease, border-color 220ms ease;
	/* Eigener Stacking-/Compositing-Kontext: verhindert, dass beim Hover
	   (transform auf dem Eltern-Element .zh-card) an Kindgrenzen durch
	   Subpixel-Rundung kurz die Seitenhintergrundfarbe durchscheint. */
	isolation: isolate;
	container-type: inline-size;
}

.zh-card:hover .zh-card-inner,
.zh-card:focus-visible .zh-card-inner {
	border-color: color-mix(in srgb, var(--zh-glow) 55%, transparent);
	box-shadow: 0 12px 32px color-mix(in srgb, var(--zh-glow) 18%, transparent), 0 2px 8px rgba(0, 0, 0, 0.5);
}

.zh-card-media {
	position: relative;
	/* Das schmale Hochformat entspricht der ruhigen Editorial-Wirkung
	   der Referenz und gibt dem Portrait deutlich mehr Gewicht. */
	aspect-ratio: 5 / 8;
	overflow: hidden;
	background: var(--zh-surface-2);
}

.zh-card-media img,
.zh-card-media img:hover,
.zh-card-media img:focus,
.zh-card-media a,
.zh-card-media a:hover {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 400ms ease;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	text-decoration: none !important;
}

.zh-card:hover .zh-card-media img {
	transform: scale(1.04);
}

.zh-card-media-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(160deg, #241d2b, #17141c);
}

.zh-card-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(5, 5, 5, 0.44) 0%, rgba(5, 5, 5, 0.08) 17%, transparent 34%);
	pointer-events: none;
}

.zh-card-hover-scrim {
	position: absolute;
	inset: 0;
	background: rgba(13, 11, 16, 0.45);
	opacity: 0;
	transition: opacity 220ms ease;
	pointer-events: none;
	z-index: 2;
}

.zh-card:hover .zh-card-hover-scrim,
.zh-card:focus-visible .zh-card-hover-scrim {
	opacity: 1;
}

.zh-card-badges {
	position: absolute;
	top: 12px;
	left: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 4;
}

.zh-badge {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 999px;
	backdrop-filter: blur(4px);
	color: #fff;
}

.zh-badge--this_week {
	background: var(--zh-badge-this-week);
}

.zh-badge--next_week {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.25);
}

.zh-card-info-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 46px;
	height: 46px;
	transform: translate(-50%, -50%) scale(0.8);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--zh-accent), var(--zh-accent-2));
	color: #fff;
	box-shadow: 0 8px 24px color-mix(in srgb, var(--zh-glow) 45%, transparent);
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease, transform 200ms ease;
	z-index: 3;
}

.zh-card-info-icon svg {
	width: 20px;
	height: 20px;
}

.zh-card:hover .zh-card-info-icon,
.zh-card:focus-visible .zh-card-info-icon {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.zh-card-info-icon { transition: opacity 120ms ease; }
}

/*
 * Der Name ist bewusst KEIN absolut positioniertes, vom Bild geclipptes
 * Element mehr. Er steht als normales Element direkt nach .zh-card-media
 * im Dokumentfluss und wird per negativem margin-top über das Bild
 * gezogen. Dadurch:
 * - kann er nie vom Bild abgeschnitten werden (kein overflow:hidden-Konflikt),
 * - ist der Bereich darunter (.zh-card-body) garantiert nicht transparent,
 *   weil er ganz normal im Fluss direkt danach beginnt.
 */
.zh-card-name {
	position: relative;
	z-index: 2;
	/* Die Bildkante läuft ungefähr mittig durch die Schrift. */
	margin: -0.58em 0 0;
	padding: 0 18px;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-family: var(--zh-font-script, "Alex Brush", cursive);
	font-size: clamp(42px, 16cqi, 78px);
	font-weight: 400;
	line-height: 1.08;
	color: #fff;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.5);
	pointer-events: none;
}

.zh-card-body {
	position: relative;
	z-index: 1;
	background: #050505;
	min-height: clamp(116px, 39cqi, 194px);
	padding: clamp(10px, 4cqi, 20px) 18px clamp(18px, 6cqi, 30px);
	display: flex;
	flex-direction: column;
	align-items: center;
	border-top: none !important;
	box-shadow: none !important;
}

.zh-card-origin {
	margin: 0 0 clamp(8px, 2.8cqi, 14px);
	font-size: clamp(15px, 5cqi, 24px);
	line-height: 1.3;
	text-align: center;
	color: var(--zh-text-muted);
}

.zh-card-availability-text {
	margin: -4px 0 clamp(9px, 3cqi, 15px);
	font-size: clamp(11px, 3.2cqi, 14px);
	line-height: 1.4;
	font-weight: 500;
	color: var(--zh-accent-2);
	opacity: 0.85;
	text-align: center;
}

.zh-card-availability-text.is-empty {
	visibility: hidden;
}

.zh-card-rating {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(8px, 2.5cqi, 12px);
	margin-top: auto;
}

.zh-card-rating-value {
	font-size: clamp(16px, 4.8cqi, 24px);
	line-height: 1;
	color: var(--zh-text);
	font-weight: 700;
}

/* ---------- Sterne ---------- */

.zh-stars {
	display: inline-flex;
	gap: 2px;
}

.zh-star {
	width: clamp(18px, 5.8cqi, 28px);
	height: clamp(18px, 5.8cqi, 28px);
	display: inline-block;
	background-color: rgba(255, 255, 255, 0.15);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.6 1.7 7-6.3-3.9-6.3 3.9 1.7-7L2 9.2l7.1-.6L12 2z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.6 1.7 7-6.3-3.9-6.3 3.9 1.7-7L2 9.2l7.1-.6L12 2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.zh-card-rating .zh-stars {
	gap: clamp(3px, 1.2cqi, 6px);
}

.zh-star--full { background-color: var(--zh-star); }
.zh-star--half {
	background: linear-gradient(90deg, var(--zh-star) 50%, rgba(255,255,255,0.15) 50%);
}

.zh-stars--sm .zh-star { width: 13px; height: 13px; }

/* ---------- Modal ---------- */

.zh-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	font-family: var(--zh-font-body);
}

.zh-modal.is-open {
	display: block;
}

.zh-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(5, 4, 7, 0.82);
	backdrop-filter: blur(3px);
}

.zh-modal-dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	max-width: 760px;
	width: calc(100% - 32px);
	margin: 4vh auto;
	max-height: 92vh;
	overflow: hidden;
	background: var(--zh-bg);
	border: 1px solid var(--zh-border);
	border-radius: 20px;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
	animation: zh-modal-in 240ms cubic-bezier(.2,.9,.3,1);
}

@keyframes zh-modal-in {
	from { opacity: 0; transform: translateY(16px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.zh-modal-dialog { animation: none; }
	.zh-card { transition: none; }
}

.zh-modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--zh-border);
	background: rgba(23, 20, 28, 0.9);
	color: var(--zh-text);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.zh-modal-close:hover { background: var(--zh-accent); border-color: var(--zh-accent); }

.zh-modal-content {
	padding: 32px;
	color: var(--zh-text);
	overflow-y: auto;
	flex: 1 1 auto;
}

.zh-modal-loading,
.zh-modal-error {
	padding: 64px 32px;
	text-align: center;
	color: var(--zh-text-muted);
}

/* ---------- Lightbox (Galerie-Bild vergrößert) ---------- */
/* Höherer z-index als .zh-modal (100000), damit sie immer darüber liegt,
   unabhängig von evtl. vorhandenen Theme-/Elementor-eigenen Lightboxen. */

.zh-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100050;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.zh-lightbox.is-open {
	display: flex;
}

.zh-lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.92);
}

.zh-lightbox-figure {
	position: relative;
	z-index: 1;
	max-width: min(92vw, 1100px);
	max-height: 92vh;
	display: flex;
	animation: zh-modal-in 200ms cubic-bezier(.2,.9,.3,1);
}

.zh-lightbox-figure img {
	max-width: 100%;
	max-height: 92vh;
	width: auto;
	height: auto;
	display: block;
	border-radius: 8px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.zh-lightbox-close {
	position: fixed;
	top: 20px;
	right: 24px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(23, 20, 28, 0.85);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
}

.zh-lightbox-close:hover {
	background: var(--zh-accent);
	border-color: var(--zh-accent);
}

.zh-lightbox-prev,
.zh-lightbox-next {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(23, 20, 28, 0.85);
	color: #fff;
	cursor: pointer;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
}

.zh-lightbox-prev svg,
.zh-lightbox-next svg {
	width: 22px;
	height: 22px;
}

.zh-lightbox-prev { left: 20px; }
.zh-lightbox-next { right: 20px; }

.zh-lightbox-prev:hover,
.zh-lightbox-next:hover {
	background: var(--zh-accent);
	border-color: var(--zh-accent);
}

.zh-lightbox[data-zh-single="1"] .zh-lightbox-prev,
.zh-lightbox[data-zh-single="1"] .zh-lightbox-next {
	display: none;
}

@media (max-width: 560px) {
	.zh-lightbox-prev,
	.zh-lightbox-next {
		width: 40px;
		height: 40px;
	}
	.zh-lightbox-prev { left: 8px; }
	.zh-lightbox-next { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.zh-lightbox-figure { animation: none; }
}

/* ---------- Profil-Popup ---------- */

.zh-profile-header {
	display: flex;
	gap: 24px;
	margin-bottom: 8px;
}

.zh-profile-photo {
	flex: 0 0 200px;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--zh-border);
}

.zh-profile-photo img {
	width: 100%;
	display: block;
	object-fit: cover;
}

.zh-profile-name {
	font-family: var(--zh-font-display);
	font-size: 30px;
	margin: 0 0 4px;
}

.zh-profile-availability-text {
	color: var(--zh-accent-2);
	font-weight: 600;
	margin: 0 0 4px;
}

.zh-profile-origin {
	color: var(--zh-text-muted);
	margin: 0 0 10px;
}

.zh-profile-locations {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}

.zh-pill--location {
	padding: 4px 12px;
	font-size: 12px;
}

.zh-profile-badges {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
}

.zh-profile-rating {
	display: flex;
	align-items: center;
	gap: 8px;
}

.zh-profile-rating-text {
	font-size: 13px;
	color: var(--zh-text-muted);
}

.zh-profile-section {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--zh-border);
}

.zh-profile-section-title {
	font-family: var(--zh-font-display);
	font-size: 18px;
	margin: 0 0 16px;
	color: var(--zh-text);
}

.zh-steckbrief {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 24px;
	margin: 0;
}

.zh-steckbrief-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px dashed var(--zh-border);
}

.zh-steckbrief-row dt {
	color: var(--zh-text-muted);
	font-size: 14px;
}

.zh-steckbrief-row dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
}

@media (max-width: 560px) {
	.zh-profile-header { flex-direction: column; }
	.zh-profile-photo { flex-basis: auto; }
	.zh-steckbrief { grid-template-columns: 1fr; }
}

/* ---------- Service Pills ---------- */

.zh-service-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.zh-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--zh-surface);
	border: 1px solid var(--zh-border);
	color: var(--zh-text);
}

.zh-pill--premium {
	background: linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0.05));
	border-color: var(--zh-gold);
	color: var(--zh-gold-soft);
	font-weight: 600;
}

.zh-pill-star {
	color: var(--zh-gold);
}

/* ---------- Galerie ---------- */

.zh-gallery {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.zh-gallery-row {
	display: grid;
	gap: 10px;
}

.zh-gallery-row--1 { grid-template-columns: 1fr; }
.zh-gallery-row--2 { grid-template-columns: 1fr 1fr; }

.zh-gallery-item {
	appearance: none;
	-webkit-appearance: none;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	font: inherit;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--zh-border);
	background: none;
	cursor: pointer;
	transition: opacity 150ms ease;
}

.zh-gallery-item:hover,
.zh-gallery-item:focus-visible {
	opacity: 0.9;
}

/* Feste Seitenverhältnisse sorgen dafür, dass zwei nebeneinander stehende
   Hochformat-Bilder immer gleich hoch sind, egal welche Ausgangsgröße
   das Originalbild hatte. */
.zh-gallery-row--2 .zh-gallery-item { aspect-ratio: 3 / 4; }
.zh-gallery-row--1 .zh-gallery-item { aspect-ratio: 16 / 10; }

.zh-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 560px) {
	.zh-gallery-row--2 { grid-template-columns: 1fr 1fr; }
	.zh-gallery-row--2 .zh-gallery-item { aspect-ratio: 3 / 4.4; }
}

/* ---------- Bewertungen ---------- */

.zh-reviews-list {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.zh-review {
	background: var(--zh-surface);
	border: 1px solid var(--zh-border);
	border-radius: 12px;
	padding: 14px 16px;
}

.zh-review-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 6px;
}

.zh-review-author {
	font-weight: 600;
	font-size: 14px;
}

.zh-review-comment {
	margin: 0;
	color: var(--zh-text-muted);
	font-size: 14px;
	line-height: 1.6;
}

.zh-no-reviews {
	color: var(--zh-text-muted);
	font-size: 14px;
}

/* ---------- Bewertungsformular ---------- */

.zh-rating-form {
	background: var(--zh-surface);
	border: 1px solid var(--zh-border);
	border-radius: 14px;
	padding: 20px;
}

.zh-rating-form h4 {
	margin: 0 0 12px;
	font-size: 15px;
}

.zh-rating-stars-input {
	display: flex;
	gap: 6px;
	margin-bottom: 16px;
}

.zh-star-btn {
	width: 32px;
	height: 32px;
	border: none;
	background-color: rgba(255, 255, 255, 0.15);
	cursor: pointer;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.6 1.7 7-6.3-3.9-6.3 3.9 1.7-7L2 9.2l7.1-.6L12 2z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.6 1.7 7-6.3-3.9-6.3 3.9 1.7-7L2 9.2l7.1-.6L12 2z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: background-color 120ms ease;
}

.zh-star-btn:hover,
.zh-star-btn:focus-visible {
	background-color: var(--zh-gold-soft);
}

.zh-star-btn.is-active {
	background-color: var(--zh-star);
}

.zh-form-label {
	display: block;
	font-size: 13px;
	color: var(--zh-text-muted);
	margin-bottom: 6px;
}

.zh-rating-form textarea,
.zh-rating-form input[type="text"] {
	width: 100%;
	background: var(--zh-bg);
	border: 1px solid var(--zh-border);
	border-radius: 8px;
	padding: 10px 12px;
	color: var(--zh-text);
	font-family: inherit;
	font-size: 14px;
	margin-bottom: 14px;
	resize: vertical;
}

.zh-rating-form textarea:focus,
.zh-rating-form input:focus {
	outline: 2px solid var(--zh-accent-2);
	outline-offset: 1px;
}

.zh-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	margin-bottom: 14px;
	cursor: pointer;
}

.zh-btn {
	appearance: none;
	border: none;
	border-radius: 999px;
	padding: 11px 26px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: transform 150ms ease, box-shadow 150ms ease;
}

.zh-btn--primary {
	background: linear-gradient(135deg, var(--zh-accent), var(--zh-accent-2));
	color: #fff;
}

.zh-btn--primary:hover {
	box-shadow: 0 8px 20px color-mix(in srgb, var(--zh-glow) 35%, transparent);
	transform: translateY(-1px);
}

.zh-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.zh-form-message {
	margin: 12px 0 0;
	font-size: 13px;
	min-height: 1em;
}

.zh-form-message.is-success { color: #4ade80; }
.zh-form-message.is-error { color: #f87171; }

.zh-empty-state {
	color: var(--zh-text-muted);
	font-family: var(--zh-font-body);
	grid-column: 1 / -1;
}

/* ---------- Filter-Leiste ("Alle Profile") ---------- */

.zh-filter-bar {
	font-family: var(--zh-font-body);
	background: transparent;
	border: 0;
	padding: 0;
	margin-bottom: 28px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.zh-filter-search {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 66px;
	background: var(--zh-surface);
	border: 1px solid color-mix(in srgb, var(--zh-gold) 42%, var(--zh-border));
	border-radius: 18px;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.zh-filter-search-icon {
	position: absolute;
	left: 20px;
	width: 23px;
	height: 23px;
	color: var(--zh-gold, var(--zh-accent));
	pointer-events: none;
}

.zh-filter-search input {
	width: 100%;
	background: transparent;
	border: none;
	color: var(--zh-text);
	font-family: inherit;
	font-size: 17px;
	line-height: 1.4;
	padding: 19px 22px 19px 56px;
}

.zh-filter-search:focus-within {
	border-color: var(--zh-accent-2);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--zh-glow) 16%, transparent);
}

.zh-filter-search input:focus {
	outline: none;
}

.zh-filter-search input::placeholder {
	color: var(--zh-text-muted);
}

.zh-filter-row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.zh-filter-field {
	min-width: 0;
	position: relative;
}

.zh-filter-field select {
	width: 100%;
	appearance: none;
	min-height: 56px;
	background: var(--zh-surface);
	border: 1px solid color-mix(in srgb, var(--zh-gold) 42%, var(--zh-border));
	border-radius: 999px;
	color: var(--zh-text);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.35;
	padding: 16px 48px 16px 18px;
	cursor: pointer;
}

.zh-filter-field select:focus {
	outline: 2px solid var(--zh-accent-2);
	outline-offset: 1px;
}

.zh-filter-field:not(.zh-filter-services)::after {
	content: "";
	position: absolute;
	right: 21px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--zh-gold);
	border-bottom: 2px solid var(--zh-gold);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

.zh-filter-services {
	overflow: visible;
}

.zh-filter-services-toggle {
	width: 100%;
	min-height: 56px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--zh-surface);
	border: 1px solid color-mix(in srgb, var(--zh-gold) 42%, var(--zh-border));
	border-radius: 999px;
	color: var(--zh-text);
	font-family: inherit;
	font-size: 16px;
	padding: 15px 20px 15px 18px;
	cursor: pointer;
}

.zh-filter-services-toggle svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--zh-gold);
	transition: transform 150ms ease;
}

.zh-filter-services-toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.zh-filter-services-toggle:focus-visible {
	outline: 2px solid var(--zh-accent-2);
	outline-offset: 2px;
}

.zh-filter-services-panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	min-width: 220px;
	background: var(--zh-surface);
	border: 1px solid var(--zh-border);
	border-radius: 14px;
	padding: 10px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
	z-index: 10;
	max-height: 260px;
	overflow-y: auto;
}

.zh-filter-services-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 8px;
	font-size: 13px;
	color: var(--zh-text);
	cursor: pointer;
}

.zh-filter-services-option:hover {
	background: var(--zh-bg);
}

.zh-filter-services-option input {
	accent-color: var(--zh-accent);
}

.zh-filter-status {
	display: none;
	margin: -8px 4px 0;
	color: var(--zh-accent-2);
	font-size: 13px;
}

.zh-filter-status:not(:empty) {
	display: block;
}

.zh-grid[aria-busy="true"] {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 150ms ease;
}

@media (max-width: 900px) {
	.zh-filter-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.zh-filter-bar { gap: 12px; margin-bottom: 20px; }
	.zh-filter-search { min-height: 56px; border-radius: 16px; }
	.zh-filter-search input { font-size: 15px; padding: 15px 16px 15px 48px; }
	.zh-filter-search-icon { left: 17px; width: 20px; height: 20px; }
	.zh-filter-row {
		grid-template-columns: 1fr;
		gap: 10px;
	}
}

/* ---------- Wochen-Zeitraum über dem Grid ---------- */

.zh-week-range {
	margin: 0 0 24px;
	font-family: var(--zh-font-script);
	font-size: clamp(22px, 3vw, 30px);
	line-height: 1.2;
	text-align: center;
	color: var(--zh-text);
}

/* ---------- Countdown (Montags-Wechsel) ---------- */

.zh-countdown {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: clamp(10px, 2.5vw, 28px);
	font-family: var(--zh-font-body);
	padding: 8px 0;
}

.zh-countdown-segment {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 2.4em;
}

.zh-countdown-value {
	font-family: var(--zh-font-display);
	font-size: clamp(28px, 6vw, 56px);
	font-weight: 700;
	line-height: 1;
	color: var(--zh-text);
	font-variant-numeric: tabular-nums;
}

.zh-countdown-label {
	margin-top: 6px;
	font-size: clamp(10px, 1.6vw, 13px);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--zh-text-muted);
}

.zh-countdown-sep {
	font-family: var(--zh-font-display);
	font-size: clamp(28px, 6vw, 56px);
	font-weight: 700;
	line-height: 1;
	color: var(--zh-accent);
	align-self: flex-start;
}

@media (max-width: 460px) {
	.zh-countdown {
		gap: 8px;
	}
	.zh-countdown-value,
	.zh-countdown-sep {
		font-size: 26px;
	}
}

/* ---------- Ambiente-Galerie ---------- */

.zh-agallery-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 28px;
}

.zh-agallery-pill {
	appearance: none;
	-webkit-appearance: none;
	font-family: var(--zh-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--zh-text-muted);
	background: var(--zh-surface);
	border: 1px solid var(--zh-border);
	border-radius: 999px;
	padding: 10px 22px;
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.zh-agallery-pill:hover {
	border-color: var(--zh-accent);
	color: var(--zh-text);
}

.zh-agallery-pill.is-active {
	background: linear-gradient(135deg, var(--zh-gold), var(--zh-gold-soft));
	border-color: transparent;
	color: #221a0a;
}

.zh-agallery {
	columns: var(--zh-agallery-columns, 4);
	column-gap: 14px;
}

.zh-agallery-item {
	appearance: none;
	-webkit-appearance: none;
	display: block;
	width: 100%;
	margin: 0 0 14px;
	padding: 0;
	font: inherit;
	break-inside: avoid;
	border-radius: var(--zh-radius);
	overflow: hidden;
	border: 1px solid var(--zh-border);
	background: none;
	cursor: pointer;
	transition: opacity 150ms ease;
}

.zh-agallery-item[hidden] {
	display: none;
}

.zh-agallery-item:hover,
.zh-agallery-item:focus-visible {
	opacity: 0.9;
}

.zh-agallery-item img {
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 900px) {
	.zh-agallery { columns: 3; }
}

@media (max-width: 620px) {
	.zh-agallery { columns: 2; }
	.zh-agallery-pills { gap: 8px; margin-bottom: 20px; }
	.zh-agallery-pill { padding: 8px 16px; font-size: 11px; }
}

@media (max-width: 420px) {
	.zh-agallery { columns: 1; }
}

/* Theme-Schutz für Buttons
   Hello Elementor (und viele andere Themes) färben jeden <button> bei
   :hover/:focus global im Theme-Pink (#c36) ein – mit gleicher Spezifität
   wie unsere Regeln, sodass je nach Ladereihenfolge das Theme gewinnt. Bei
   den Galerie-Bildern scheint der pinke Hintergrund durch das leicht
   transparente Bild als Rahmen durch. Hier werden deshalb alle Zustände der
   Plugin-Buttons mit Container-Präfix festgezurrt, damit immer die
   (Standort-)Farb-Tokens greifen. */

.zh-modal .zh-modal-close,
.zh-modal .zh-modal-close:focus {
	background: rgba(23, 20, 28, 0.9);
	border-color: var(--zh-border);
	color: var(--zh-text);
}

.zh-lightbox .zh-lightbox-close,
.zh-lightbox .zh-lightbox-close:focus,
.zh-lightbox .zh-lightbox-prev,
.zh-lightbox .zh-lightbox-prev:focus,
.zh-lightbox .zh-lightbox-next,
.zh-lightbox .zh-lightbox-next:focus {
	background: rgba(23, 20, 28, 0.85);
	border-color: rgba(255, 255, 255, 0.2);
	color: #fff;
}

.zh-modal .zh-modal-close:hover,
.zh-modal .zh-modal-close:focus-visible,
.zh-lightbox .zh-lightbox-close:hover,
.zh-lightbox .zh-lightbox-close:focus-visible,
.zh-lightbox .zh-lightbox-prev:hover,
.zh-lightbox .zh-lightbox-prev:focus-visible,
.zh-lightbox .zh-lightbox-next:hover,
.zh-lightbox .zh-lightbox-next:focus-visible {
	background: var(--zh-accent);
	border-color: var(--zh-accent);
	color: #fff;
}

.zh-modal .zh-gallery-item,
.zh-modal .zh-gallery-item:hover,
.zh-modal .zh-gallery-item:focus,
.zh-agallery-group .zh-agallery-item,
.zh-agallery-group .zh-agallery-item:hover,
.zh-agallery-group .zh-agallery-item:focus {
	background: none;
	border-color: var(--zh-border);
	color: inherit;
}

.zh-modal .zh-star-btn,
.zh-modal .zh-star-btn:focus {
	background-color: rgba(255, 255, 255, 0.15);
}

.zh-modal .zh-star-btn:hover,
.zh-modal .zh-star-btn:focus-visible {
	background-color: var(--zh-gold-soft);
}

.zh-modal .zh-star-btn.is-active {
	background-color: var(--zh-star);
}

.zh-modal .zh-btn--primary,
.zh-modal .zh-btn--primary:hover,
.zh-modal .zh-btn--primary:focus {
	background: linear-gradient(135deg, var(--zh-accent), var(--zh-accent-2));
	color: #fff;
}

.zh-filter-bar .zh-filter-services-toggle,
.zh-filter-bar .zh-filter-services-toggle:hover,
.zh-filter-bar .zh-filter-services-toggle:focus {
	background: var(--zh-surface);
	color: var(--zh-text);
}

.zh-agallery-group .zh-agallery-pill,
.zh-agallery-group .zh-agallery-pill:focus {
	background: var(--zh-surface);
	border-color: var(--zh-border);
	color: var(--zh-text-muted);
}

.zh-agallery-group .zh-agallery-pill:hover,
.zh-agallery-group .zh-agallery-pill:focus-visible {
	background: var(--zh-surface);
	border-color: var(--zh-accent);
	color: var(--zh-text);
}

.zh-agallery-group .zh-agallery-pill.is-active {
	background: linear-gradient(135deg, var(--zh-gold), var(--zh-gold-soft));
	border-color: transparent;
	color: #221a0a;
}