/**
 * M13 Event Theme — Custom CSS
 * Ergänzende Styles: erweiterte Animationen, Sondereffekte, Utilities.
 *
 * @version 1.0.0
 */

/* ==========================================================================
   WhatsApp-Button: Spezieller Hover-Effekt
   ========================================================================== */
.m13-btn--whatsapp {
	border-color: hsl(38, 60%, 55%);
	color: hsl(340, 20%, 20%);
}

.m13-btn--whatsapp:hover {
	background-color: hsl(38, 50%, 80%);
	border-color: hsl(38, 60%, 55%);
}

/* ==========================================================================
   Lucide Icons via CDN — Fallback SVG-Stile
   ========================================================================== */
[data-lucide] {
	display: inline-block;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ==========================================================================
   Form: Verbesserte Date-Input Darstellung
   ========================================================================== */
input[type="date"].m13-form__input {
	color-scheme: light;
}

input[type="date"].m13-form__input::-webkit-calendar-picker-indicator {
	opacity: 0.5;
	cursor: pointer;
}

/* ==========================================================================
   Scroll Indicator Animation
   ========================================================================== */
@keyframes m13-scroll-pulse {
	0%   { opacity: 1; transform: scaleY(1); transform-origin: top; }
	50%  { opacity: 0.4; transform: scaleY(0.6); transform-origin: top; }
	100% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

.m13-scroll-indicator__line {
	animation: m13-scroll-pulse 2s ease-in-out infinite;
}

/* ==========================================================================
   Service Card Icon — Glow-Effekt beim Hover
   ========================================================================== */
.m13-service-card:hover .m13-service-card__icon {
	box-shadow: 0 8px 20px hsl(340, 45%, 65%, 0.25);
}

/* ==========================================================================
   FAQ Accordion — Smooth Height Animation
   ========================================================================== */
.m13-accordion details[open] .m13-accordion__answer {
	animation: m13-fade-down 0.25s ease-out forwards;
}

@keyframes m13-fade-down {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================================
   Hero: Subtle Parallax via CSS
   ========================================================================== */
@supports (background-attachment: fixed) {
	@media (min-width: 768px) {
		.m13-hero__bg img {
			/* Kein echtes Parallax — zu Performance-intensiv auf mobil */
		}
	}
}

/* ==========================================================================
   Fokus-Styles für Accessibility
   ========================================================================== */
:focus-visible {
	outline: 2px solid hsl(340, 45%, 65%);
	outline-offset: 3px;
	border-radius: 4px;
}

button:focus-visible,
a:focus-visible {
	outline: 2px solid hsl(340, 45%, 65%);
	outline-offset: 3px;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
	.m13-navbar,
	.m13-scroll-indicator,
	.m13-form__submit {
		display: none !important;
	}
}

/* ==========================================================================
   Reduced Motion: Animationen deaktivieren
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.m13-animate {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.m13-scroll-indicator {
		animation: none !important;
	}

	.m13-service-card,
	.m13-event-card {
		transition: none !important;
	}
}

/* ==========================================================================
   Watercolor-Divider (extra Varianten)
   ========================================================================== */
.watercolor-divider--left {
	margin-inline-start: 0;
	margin-inline-end: auto;
}

/* ==========================================================================
   Gutenberg Editor Overrides
   ========================================================================== */
.editor-styles-wrapper {
	font-family: 'Raleway', sans-serif;
}

.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3 {
	font-family: 'Cormorant Garamond', serif;
}