/**
 * Weihnachts-Design – wird nur auf Seiten mit dem Template "Weihnachten" (xmas) geladen.
 * Alle Regeln sind zusätzlich auf .page-template-xmas beschränkt.
 */

/* Titelschrift wie auf dem Weihnachts-Flyer (SIL Open Font License, selbst gehostet) */
@font-face {
	font-family: "Cherry Bomb One";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/cherry-bomb-one/cherry-bomb-one-400-normal.woff2") format("woff2");
}

.page-template-xmas {
	--x-green: #2c5f3f;
	--x-pink: #f088b4;
	--x-gold: #d7b341;
	--x-gold-line: #d7b34180;
	--x-ink: #183b28;
	/* Theme-Farben umstellen, damit z. B. die Navigationsleiste dunkel wird. */
	--wp--preset--color--base: var(--x-green);
	--wp--preset--color--contrast: #fff;
	background: var(--x-green) !important;
	color: #fff !important;
	font-size: 18px !important;
	line-height: 1.65 !important;
}

.page-template-xmas a {
	color: inherit;
}

.page-template-xmas a:focus-visible,
.page-template-xmas button:focus-visible,
.page-template-xmas input:focus-visible,
.page-template-xmas [tabindex="0"]:focus-visible {
	outline: 3px solid var(--x-gold) !important;
	outline-offset: 5px;
}

.page-template-xmas ::selection {
	background: var(--x-gold);
	color: var(--x-ink);
}

.page-template-xmas h1,
.page-template-xmas h2,
.page-template-xmas h3 {
	color: var(--x-pink) !important;
	font-weight: 400 !important;
	letter-spacing: -.04em !important;
	line-height: 1.12 !important;
}

.page-template-xmas .entry-content p {
	margin: 0;
}

/* Header */
.page-template-xmas .site-header > div {
	padding: 26px 24px 20px !important;
}

.page-template-xmas .site-header .custom-logo {
	width: 158px !important;
	height: auto !important;
	/* Rosa SVG-Logo einfarbig weiss darstellen */
	filter: brightness(0) invert(1);
}

/* Inhaltsspalte */
.page-template-xmas .entry-content {
	width: calc(100% - 44px) !important;
	max-width: 600px !important;
	margin-inline: auto !important;
	padding: 0 !important;
}

.page-template-xmas .entry-content > * {
	max-width: none !important;
	margin-inline: 0 !important;
}

.page-template-xmas .entry-content > * + * {
	margin-block-start: 0 !important;
}

/* Hero */
.page-template-xmas .xmas-hero {
	padding: 18px 0 36px;
}

.page-template-xmas .xmas-hero h1 {
	font-family: "Cherry Bomb One", var(--wp--preset--font-family--instrument-sans), sans-serif !important;
	color: #fff !important;
	letter-spacing: 0 !important;
	font-size: clamp(2.4rem, 10vw, 3.8rem) !important;
	text-align: center !important;
	margin: 0 auto 22px !important;
	max-width: 590px !important;
	text-wrap: balance;
}

.page-template-xmas .xmas-hero > p:not(.xmas-caption) {
	text-align: center;
	font-size: 18px;
	max-width: 440px;
	margin: 0 auto !important;
}

.page-template-xmas .xmas-hero .xmas-photo-stack {
	margin: 35px 0 0 !important;
}

.page-template-xmas .xmas-caption {
	color: #fff !important;
	opacity: .82;
	font-size: 13px !important;
	line-height: 1.5 !important;
	text-align: center;
	max-width: 390px;
	margin: 14px auto 0 !important;
}

/* Bildstapel (wird per xmas.js aus einem Galerie-Block aufgebaut) */
.page-template-xmas .photo-gallery {
	max-width: 390px;
	margin: 35px auto 0;
	padding: 8px 12px 0;
	outline-offset: 10px;
}

.page-template-xmas .photo-gallery .xmas-photo-stack {
	margin: 0 !important;
}

.page-template-xmas .wp-block-gallery.photo-stack {
	display: block !important;
	position: relative;
	aspect-ratio: 4 / 5;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
	cursor: grab;
	margin: 4px 0 19px !important;
	gap: 0 !important;
}

.page-template-xmas .wp-block-gallery.photo-stack.is-dragging {
	cursor: grabbing;
}

/* Geringe Spezifität, damit die Tiefen-Regeln und Inline-Styles beim Wischen greifen;
   Galerie-Layoutwerte aus dem Core werden per !important übersteuert. */
.page-template-xmas .photo-card {
	position: absolute !important;
	display: block !important;
	inset: 0;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 5px;
	background: var(--x-gold);
	border: 1px solid var(--x-gold);
	border-radius: 5px;
	box-shadow: 0 9px 25px #102b202c;
	transition: transform .3s ease, opacity .3s ease;
	transform-origin: 50% 65%;
	overflow: hidden;
	pointer-events: none;
	z-index: 1;
	transform: scale(.94);
	opacity: 0;
}

.page-template-xmas .photo-card img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 2px;
}

.page-template-xmas .photo-card[data-depth="0"] {
	z-index: 5;
	transform: translate(0, 0) rotate(-1.5deg);
	opacity: 1;
}

.page-template-xmas .photo-card[data-depth="1"] {
	z-index: 4;
	transform: translate(7px, -4px) rotate(3deg) scale(.98);
	opacity: 1;
}

.page-template-xmas .photo-card[data-depth="2"] {
	z-index: 3;
	transform: translate(-5px, -3px) rotate(-4deg) scale(.97);
	opacity: 1;
}

.page-template-xmas .photo-stack.is-dragging .photo-card[data-depth="0"] {
	transition: none;
}

/* Lichtreflex beim Blättern */
.page-template-xmas .photo-card::after {
	content: "";
	position: absolute;
	inset: -15% -20%;
	pointer-events: none;
	background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, .08) 42%, rgba(255, 248, 220, .48) 49%, rgba(255, 255, 255, .64) 51%, rgba(215, 179, 65, .14) 57%, transparent 67%);
	transform: translateX(-130%);
	opacity: 0;
}

.page-template-xmas .photo-card.is-shining::after {
	animation: xmas-photo-shine 780ms cubic-bezier(.2, .55, .35, 1) both;
}

@keyframes xmas-photo-shine {
	0% { transform: translateX(-110%); opacity: 0; }
	12% { opacity: 1; }
	85% { opacity: 1; }
	100% { transform: translateX(110%); opacity: 0; }
}

.page-template-xmas .photo-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 25px;
}

.page-template-xmas .photo-controls button {
	display: grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 1px solid var(--x-gold-line);
	color: var(--x-gold);
	background: transparent;
	border-radius: 50%;
	font: 24px/1 var(--wp--preset--font-family--instrument-sans), Arial, sans-serif;
	cursor: pointer;
}

.page-template-xmas .photo-controls button:hover {
	background: var(--x-gold);
	color: var(--x-green);
}

.page-template-xmas .photo-pagination {
	color: var(--x-gold);
	font-size: 14px;
	letter-spacing: .1em;
	min-width: 50px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.page-template-xmas .photo-hint {
	text-align: center;
	font-size: 13px;
	color: #fff;
	opacity: .75;
	margin: 8px 0 0 !important;
}

/* Sektionen */
.page-template-xmas .xmas-intro {
	border-block: 1px solid var(--x-gold-line);
	padding: 28px 0;
	font-size: 19px;
	line-height: 1.65;
}

.page-template-xmas .xmas-experience {
	padding: 42px 0 32px;
}

.page-template-xmas .xmas-experience h2,
.page-template-xmas .xmas-wishes h2,
.page-template-xmas .xmas-contact h2 {
	font-size: clamp(2rem, 8vw, 2.65rem) !important;
	margin: 0 0 20px !important;
}

.page-template-xmas .xmas-steps {
	margin-top: 28px !important;
}

.page-template-xmas .xmas-steps > p {
	margin: 0 0 25px !important;
	font-size: 18px;
	line-height: 1.65;
}

.page-template-xmas .xmas-steps strong {
	color: var(--x-pink);
	font-size: 21px;
	font-weight: 400;
	display: block;
	margin-bottom: 6px;
	letter-spacing: -.015em;
}

.page-template-xmas .xmas-wishes {
	border-block: 1px solid var(--x-gold-line);
	padding: 30px 0 34px;
}

.page-template-xmas .xmas-gold-decoration {
	margin: 0 auto 25px !important;
	text-align: center;
}

.page-template-xmas .xmas-gold-decoration img {
	display: block;
	width: 132px !important;
	height: auto !important;
	margin: 0 auto;
}

.page-template-xmas .xmas-contact {
	padding: 42px 0 48px;
}

.page-template-xmas .xmas-contact > p {
	margin-bottom: 28px !important;
}

/* Gravity Forms */
.page-template-xmas .xmas-contact .gform_wrapper {
	margin: 0 !important;
	padding: 0 !important;
}

.page-template-xmas .gform_wrapper .gfield {
	grid-column: 1 / -1 !important;
}

.page-template-xmas .gform_wrapper .gfield--type-date {
	min-width: 0;
}

.page-template-xmas .gform_wrapper label,
.page-template-xmas .gform_wrapper legend,
.page-template-xmas .gform_wrapper .gfield_description {
	color: #fff !important;
}

.page-template-xmas .gform_wrapper label,
.page-template-xmas .gform_wrapper legend {
	font-size: 17px !important;
	font-weight: 400 !important;
}

.page-template-xmas .gform_wrapper .gfield_required,
.page-template-xmas .gform_wrapper .gfield_required_text {
	font-size: 12px !important;
	opacity: .7;
	color: #fff !important;
}

.page-template-xmas .gform_wrapper input:not([type=hidden]):not([type=submit]),
.page-template-xmas .gform_wrapper select:not(.nav),
.page-template-xmas .gform_wrapper textarea {
	color: #fff !important;
	background: transparent !important;
	border: 1px solid #d7b3419c !important;
	border-radius: 0 !important;
	min-height: 52px !important;
	padding: 10px 14px !important;
	font-size: 17px !important;
	box-shadow: none !important;
}

.page-template-xmas .gform_wrapper ::placeholder {
	color: rgba(255, 255, 255, .55) !important;
	opacity: 1 !important;
}

/* Telefonfeld: Platz für die Länderflagge freihalten */
.page-template-xmas .gform_wrapper .iti input[type=tel] {
	padding-left: 58px !important;
}

.page-template-xmas .gform_wrapper select option {
	color: var(--x-ink);
}

.page-template-xmas .gform_wrapper input:focus,
.page-template-xmas .gform_wrapper select:focus,
.page-template-xmas .gform_wrapper textarea:focus {
	border-color: var(--x-pink) !important;
}

.page-template-xmas .gform_wrapper .gform_fields {
	row-gap: 24px !important;
}

.page-template-xmas .gform_wrapper .gfield_description {
	font-size: 13px !important;
}

.page-template-xmas .gform_wrapper .gform_footer {
	margin-top: 32px !important;
}

.page-template-xmas .gform_wrapper .gform_footer .gform_button,
.page-template-xmas .gform_wrapper button[type=submit],
.page-template-xmas .gform_wrapper input[type=submit] {
	background: var(--x-pink) !important;
	color: var(--x-ink) !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-size: 18px !important;
	padding: 17px 36px !important;
	width: 100% !important;
	cursor: pointer;
	transition: background .2s;
}

.page-template-xmas .gform_wrapper .gform_footer .gform_button:hover,
.page-template-xmas .gform_wrapper button[type=submit]:hover,
.page-template-xmas .gform_wrapper input[type=submit]:hover {
	background: #ffa8cc !important;
}

.page-template-xmas .gform_wrapper .iti__selected-dial-code {
	color: #fff !important;
}

.page-template-xmas .gform_wrapper .iti__country-list {
	color: #233d2b !important;
}

/* Kalender von Gravity Forms 3 (Inline-Datepicker), auf volle Feldbreite vergrössert */
.page-template-xmas .gform_wrapper .gpld-inline-datepicker {
	width: 100% !important;
	max-width: none !important;
}

.page-template-xmas .gform-datepicker-calendar {
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box;
	padding: 18px !important;
	background: #244f34 !important;
	color: #fff !important;
	border: 1px solid var(--x-gold-line) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.page-template-xmas .gform-datepicker-calendar th,
.page-template-xmas .gform-datepicker-calendar th span,
.page-template-xmas .gform-datepicker-calendar td,
.page-template-xmas .gform-datepicker-calendar td span {
	color: #fff !important;
}

.page-template-xmas .gform-datepicker-calendar .nav.btn span,
.page-template-xmas .gform-datepicker-calendar .nav.current.btn {
	color: var(--x-gold) !important;
	border-color: var(--x-gold-line) !important;
}

.page-template-xmas .gform-datepicker-calendar .nav.current.btn {
	background: transparent !important;
	border-radius: 0 !important;
}

.page-template-xmas .gform-datepicker-calendar .nav.disabled span {
	opacity: .35;
}

.page-template-xmas .gform-datepicker-calendar table.calendar {
	width: 100% !important;
	table-layout: fixed;
}

.page-template-xmas .gform-datepicker-calendar th span {
	font-size: 15px !important;
}

.page-template-xmas .gform-datepicker-calendar .day span {
	display: block !important;
	width: 100% !important;
	height: 46px !important;
	line-height: 46px !important;
	padding: 0 !important;
	font-size: 17px !important;
	text-align: center;
	border-radius: 0 !important;
}

.page-template-xmas .gform-datepicker-calendar .nav.current.btn,
.page-template-xmas .gform-datepicker-calendar select.nav {
	font-size: 16px !important;
	min-height: 42px !important;
}

.page-template-xmas .gform-datepicker-calendar .day:not(.disabled):hover span {
	background: #ffffff1a !important;
}

.page-template-xmas .gform-datepicker-calendar .day.selected span {
	background: var(--x-pink) !important;
	border-color: var(--x-pink) !important;
	color: var(--x-ink) !important;
}

.page-template-xmas .gform-datepicker-calendar .day.disabled span {
	opacity: .35;
}

.page-template-xmas .gform-datepicker-calendar select.nav {
	color: var(--x-gold) !important;
	background-color: transparent !important;
	border: 1px solid var(--x-gold-line) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.page-template-xmas .gform-datepicker-calendar select.nav option {
	color: var(--x-ink);
	background: #fff;
}

.page-template-xmas .gform-datepicker-calendar .monthMessage,
.page-template-xmas .gform-datepicker-calendar .monthMessage p {
	color: #fff !important;
	opacity: .6;
}

/* Klassischer jQuery-UI-Datepicker (Fallback) */
.page-template-xmas .ui-datepicker {
	background: #244f34 !important;
	color: #fff !important;
	border: 1px solid var(--x-gold-line) !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 12px !important;
}

.page-template-xmas .ui-datepicker .ui-datepicker-header {
	background: none !important;
	color: var(--x-gold) !important;
}

.page-template-xmas .ui-datepicker .ui-datepicker-title,
.page-template-xmas .ui-datepicker .ui-datepicker-title select {
	color: var(--x-gold) !important;
}

.page-template-xmas .ui-datepicker-calendar th {
	color: #fff !important;
}

.page-template-xmas .ui-datepicker-calendar td a {
	background: transparent !important;
	color: #fff !important;
	border-radius: 0 !important;
}

.page-template-xmas .ui-datepicker-calendar .ui-state-active {
	background: var(--x-pink) !important;
	color: #173725 !important;
}

.page-template-xmas .ui-datepicker-calendar .ui-state-disabled {
	opacity: .35 !important;
}

.page-template-xmas .ui-datepicker-prev,
.page-template-xmas .ui-datepicker-next {
	filter: brightness(0) invert(1);
}

/* Footer: Welle auf dem Seitengrün, darunter der rosa Footer wie gewohnt */
.page-template-xmas footer.site-footer {
	background: var(--x-green) !important;
	color: #fff !important;
	margin-top: 0 !important;
}

.page-template-xmas footer.site-footer footer {
	padding-bottom: 90px !important;
}

.page-template-xmas footer p,
.page-template-xmas footer a {
	color: #fff !important;
}

/* Schneefall – liegt über der Seite, fängt aber keine Klicks ab */
.xmas-snowfall {
	position: fixed;
	inset: 0;
	z-index: 99999;
	overflow: hidden;
	pointer-events: none !important;
	contain: strict;
	user-select: none;
}

.xmas-snowflake {
	position: absolute;
	top: -12px;
	left: var(--snow-left);
	width: var(--snow-size);
	height: var(--snow-size);
	border-radius: 50%;
	background: #fff;
	opacity: var(--snow-opacity);
	animation: xmas-snow-fall var(--snow-duration) var(--snow-delay) linear infinite;
	pointer-events: none;
}

.xmas-snowfall[data-paused="true"] .xmas-snowflake {
	animation-play-state: paused;
}

@keyframes xmas-snow-fall {
	0% { transform: translate3d(0, -12px, 0); }
	50% { transform: translate3d(var(--snow-drift), 50vh, 0); }
	100% { transform: translate3d(calc(var(--snow-drift) * -.35), calc(100vh + 24px), 0); }
}

@supports (height: 100dvh) {
	@keyframes xmas-snow-fall {
		0% { transform: translate3d(0, -12px, 0); }
		50% { transform: translate3d(var(--snow-drift), 50dvh, 0); }
		100% { transform: translate3d(calc(var(--snow-drift) * -.35), calc(100dvh + 24px), 0); }
	}
}

@media (min-width: 700px) {
	.page-template-xmas .site-header > div {
		padding-top: 36px !important;
	}

	.page-template-xmas .site-header .custom-logo {
		width: 180px !important;
	}

	.page-template-xmas .xmas-hero {
		padding-top: 24px;
	}

	.page-template-xmas .photo-gallery {
		margin-top: 42px;
	}

	.page-template-xmas .xmas-intro {
		padding: 35px 0;
	}

	.page-template-xmas .xmas-experience,
	.page-template-xmas .xmas-contact {
		padding-top: 48px;
	}

	.page-template-xmas .xmas-wishes {
		padding-block: 36px;
	}
}

@media (max-width: 650px) {
	.xmas-snowflake:nth-child(n+27) {
		display: none;
	}
}

@media (max-width: 360px) {
	.page-template-xmas .entry-content {
		width: calc(100% - 36px) !important;
	}

	.page-template-xmas .photo-gallery {
		padding-inline: 10px;
	}

	.page-template-xmas .xmas-hero h1 {
		font-size: 2.4rem !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.page-template-xmas .photo-card,
	.page-template-xmas .photo-controls button {
		transition: none !important;
	}

	.xmas-snowfall,
	.page-template-xmas .photo-card::after {
		display: none;
	}
}