/* ==========================================================================
   Feiertags-Design – Frontend
   ========================================================================== */

.ftd-layer {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 99990;
	overflow: hidden;
	--ftd-scale: 1;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.ftd-layer.ftd-size-klein { --ftd-scale: .75; }
.ftd-layer.ftd-size-gross { --ftd-scale: 1.3; }
@media (max-width: 640px) {
	.ftd-layer { --ftd-scale: .66; }
	.ftd-layer.ftd-size-klein { --ftd-scale: .55; }
	.ftd-layer.ftd-size-gross { --ftd-scale: .8; }
}

.ftd-layer svg { overflow: visible; }
.ftd-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Oberer Rand – unter der Admin-Leiste */
.ftd-top { position: absolute; left: 0; right: 0; top: 0; line-height: 0; }
body.admin-bar .ftd-top { top: 32px; }
@media (max-width: 782px) { body.admin-bar .ftd-top { top: 46px; } }

/* Deko-Ecke */
.ftd-corner {
	position: absolute;
	bottom: 14px;
	right: 14px;
	width: calc(190px * var(--ftd-scale));
	display: flex;
	flex-direction: column;
	align-items: flex-end; /* langer Grußtext wächst nach innen, nicht aus dem Bild */
	gap: calc(6px * var(--ftd-scale));
	animation: ftd-pop .8s cubic-bezier(.2, 1.4, .4, 1) both;
}
.ftd-pos-left .ftd-corner { right: auto; left: 14px; align-items: flex-start; }
.ftd-figure { width: 100%; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .3)); }
.ftd-figure svg { width: 100%; height: auto; display: block; }

.ftd-label {
	font-weight: 700;
	font-size: calc(15px * var(--ftd-scale));
	padding: .38em 1em;
	border-radius: 999px;
	white-space: nowrap;
	line-height: 1.2;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
	font-variant-numeric: tabular-nums;
}

.ftd-close {
	pointer-events: auto;
	position: absolute;
	top: -4px;
	right: -4px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	margin: 0;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font: 700 16px/26px system-ui, sans-serif;
	text-align: center;
	cursor: pointer;
	opacity: .55;
	transition: opacity .2s, transform .2s;
}
.ftd-close:hover, .ftd-close:focus-visible { opacity: 1; transform: scale(1.1); outline: 2px solid #fff; }

@keyframes ftd-pop { from { transform: translateY(40px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* ==========================================================================
   Halloween
   ========================================================================== */

.ftd-halloween .ftd-label {
	background: #1a0b2e;
	color: #ff8a2a;
	border: 1px solid #ff7518;
	text-shadow: 0 0 8px rgba(255, 138, 42, .75);
	letter-spacing: .04em;
}

.ftd-vignette {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 45%, transparent 52%, rgba(26, 6, 40, var(--ftd-vig, .4)) 100%);
	animation: ftd-breathe 9s ease-in-out infinite alternate;
}
@keyframes ftd-breathe { from { opacity: .8; } to { opacity: 1; } }

.ftd-web { position: absolute; top: 0; left: 0; }
.ftd-pos-left .ftd-web { left: auto; right: 0; transform: scaleX(-1); }

.ftd-spider {
	position: absolute;
	top: -320px;
	width: calc(30px * var(--ftd-scale));
	animation: ftd-dangle 7s ease-in-out infinite alternate;
}
.ftd-spider::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 60%;
	width: 1px;
	height: 330px;
	background: linear-gradient(rgba(120, 120, 130, .25), rgba(120, 120, 130, .8));
}
.ftd-spider svg { position: relative; display: block; width: 100%; height: auto; }
@keyframes ftd-dangle {
	0%   { transform: translateY(var(--ftd-from, 380px)); }
	100% { transform: translateY(var(--ftd-to, 440px)); }
}

.ftd-bat-x {
	position: absolute;
	left: 0;
	will-change: transform;
	animation: ftd-fly var(--ftd-dur, 9s) linear forwards;
}
.ftd-bat-x.ftd-rtl { animation-direction: reverse; }
.ftd-bat-y { animation: ftd-bob 1.6s ease-in-out infinite alternate; }
.ftd-bat-x.ftd-rtl .ftd-bat-y svg { transform: scaleX(-1); }
.ftd-bat-y svg { display: block; width: var(--ftd-bw, 54px); height: auto; }
.ftd-wing { transform-box: view-box; transform-origin: 50px 22px; animation: ftd-flap .32s ease-in-out infinite; }
@keyframes ftd-fly { from { transform: translateX(-120px); } to { transform: translateX(calc(100vw + 120px)); } }
@keyframes ftd-bob { from { transform: translateY(-14px) rotate(-4deg); } to { transform: translateY(16px) rotate(5deg); } }
@keyframes ftd-flap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(-.45); } }

.ftd-fog {
	position: absolute;
	left: 0;
	bottom: -3vh;
	width: 200%;
	height: 24vh;
	background-image: radial-gradient(ellipse 48% 55% at 50% 70%, rgba(205, 195, 228, .78), rgba(205, 195, 228, 0) 72%);
	background-size: 25% 100%;
	background-repeat: repeat-x;
	filter: blur(14px);
	opacity: .65;
	animation: ftd-drift 46s linear infinite;
}
.ftd-fog.ftd-fog2 {
	height: 17vh;
	background-size: 16.666% 100%;
	opacity: .5;
	animation-duration: 31s;
	animation-direction: reverse;
}
@keyframes ftd-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.ftd-eyes {
	position: absolute;
	bottom: 5vh;
	left: 9vw;
	width: calc(56px * var(--ftd-scale));
	animation: ftd-eyes-fade 13s ease-in-out infinite;
}
.ftd-pos-left .ftd-eyes { left: auto; right: 9vw; }
.ftd-eyes svg { display: block; width: 100%; height: auto; }
.ftd-eye { transform-box: fill-box; transform-origin: center; animation: ftd-blink 4.3s infinite; }
@keyframes ftd-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes ftd-eyes-fade { 0%, 100% { opacity: 0; } 15%, 70% { opacity: 1; } 85% { opacity: 0; } }

.ftd-pk-glow { animation: ftd-flicker 2.6s infinite; }
@keyframes ftd-flicker {
	0%, 100% { opacity: 1; }
	12% { opacity: .78; } 18% { opacity: .95; } 41% { opacity: .7; } 47% { opacity: 1; } 72% { opacity: .85; }
}

/* ==========================================================================
   Advent
   ========================================================================== */

.ftd-advent .ftd-label {
	background: #7a1018;
	color: #fff6e0;
	border: 1px solid #e6c36a;
}

.ftd-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: ftd-flame 1.3s ease-in-out infinite alternate; }
@keyframes ftd-flame {
	0%   { transform: scale(1, 1) skewX(0); }
	30%  { transform: scale(.94, 1.07) skewX(2.5deg); }
	60%  { transform: scale(1.04, .95) skewX(-2deg); }
	100% { transform: scale(.97, 1.04) skewX(1deg); }
}
.ftd-halo { animation: ftd-halo 1.8s ease-in-out infinite alternate; }
@keyframes ftd-halo { from { opacity: .55; } to { opacity: .95; } }

/* ==========================================================================
   Weihnachten
   ========================================================================== */

.ftd-christmas .ftd-label {
	background: #0f5132;
	color: #fff;
	border: 1px solid #e6c36a;
}
.ftd-bulb { animation: ftd-twinkle 1.7s ease-in-out infinite alternate; }
@keyframes ftd-twinkle { from { opacity: 1; } to { opacity: .35; } }
.ftd-star { transform-box: fill-box; transform-origin: center; animation: ftd-star 3s ease-in-out infinite; }
@keyframes ftd-star { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.12) rotate(8deg); } }

/* ==========================================================================
   Silvester / Neujahr
   ========================================================================== */

.ftd-newyear .ftd-label {
	background: linear-gradient(135deg, #1b1f3a, #2d1b4e);
	color: #ffd76a;
	border: 1px solid #d4af37;
	text-shadow: 0 0 6px rgba(255, 215, 106, .5);
}
.ftd-bubble { transform-box: fill-box; animation: ftd-bubble 2.4s linear infinite; }
@keyframes ftd-bubble { from { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(-38px); opacity: 0; } }
.ftd-sparkle { transform-box: fill-box; transform-origin: center; animation: ftd-sparkle 1.6s ease-in-out infinite; }
@keyframes ftd-sparkle { 0%, 100% { transform: scale(.2); opacity: 0; } 50% { transform: scale(1); opacity: 1; } }
.ftd-label.ftd-cheer { animation: ftd-cheer .6s ease-in-out 3; }
@keyframes ftd-cheer { 50% { transform: scale(1.18); } }

/* ==========================================================================
   Farbakzente auf der eigentlichen Website (abschaltbar)
   ========================================================================== */

body.ftd-accent.ftd-theme-halloween ::selection { background: #ff7518; color: #1a0b2e; }
body.ftd-accent.ftd-theme-halloween :is(h1, h2) { text-shadow: 0 0 18px rgba(255, 117, 24, .45); }
body.ftd-accent.ftd-theme-halloween a:hover { color: #ff7518; }
body.ftd-accent.ftd-theme-halloween :is(.wp-block-button__link, .button, button[type="submit"], input[type="submit"]) {
	background-color: #ff7518; border-color: #ff7518; color: #1a0b2e;
	box-shadow: 0 0 14px rgba(255, 117, 24, .45);
}
html:has(body.ftd-accent.ftd-theme-halloween) { scrollbar-color: #ff7518 #1a0b2e; }

body.ftd-accent.ftd-theme-advent ::selection { background: #b71c1c; color: #fff6e0; }
body.ftd-accent.ftd-theme-advent :is(h1, h2) { text-shadow: 0 0 16px rgba(230, 195, 106, .5); }
body.ftd-accent.ftd-theme-advent a:hover { color: #b71c1c; }
html:has(body.ftd-accent.ftd-theme-advent) { scrollbar-color: #b71c1c #f6ead2; }

body.ftd-accent.ftd-theme-christmas ::selection { background: #c62828; color: #fff; }
body.ftd-accent.ftd-theme-christmas :is(h1, h2) { text-shadow: 0 0 16px rgba(230, 195, 106, .55); }
body.ftd-accent.ftd-theme-christmas a:hover { color: #c62828; }
body.ftd-accent.ftd-theme-christmas :is(.wp-block-button__link, .button, button[type="submit"], input[type="submit"]) {
	background-color: #c62828; border-color: #c62828; color: #fff;
}
html:has(body.ftd-accent.ftd-theme-christmas) { scrollbar-color: #c62828 #e8f5e9; }

body.ftd-accent.ftd-theme-newyear ::selection { background: #d4af37; color: #1b1f3a; }
body.ftd-accent.ftd-theme-newyear :is(h1, h2) { text-shadow: 0 0 16px rgba(212, 175, 55, .55); }
body.ftd-accent.ftd-theme-newyear a:hover { color: #b8901f; }
html:has(body.ftd-accent.ftd-theme-newyear) { scrollbar-color: #d4af37 #1b1f3a; }

/* ==========================================================================
   Barrierefreiheit: keine Bewegung
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.ftd-layer *, .ftd-layer *::before { animation: none !important; transition: none !important; }
	.ftd-bat-x, .ftd-fog, .ftd-eyes { display: none; }
}

@media print {
	.ftd-layer { display: none !important; }
}