/* INTERSTATE FONT FAMILY */
@font-face {
	font-family: "Interstate";
	src: url("assets/font/InterstateHairline.woff") format("woff");
	font-weight: 100;font-style: normal;font-display: swap;}
@font-face {
	font-family: "Interstate";
	src: url("assets/font/InterstateThin.woff") format("woff");
	font-weight: 200;font-style: normal;font-display: swap;}
@font-face {
	font-family: "Interstate";
	src: url("assets/font/InterstateExtraLight.woff") format("woff");
	font-weight: 250;font-style: normal;font-display: swap;}
@font-face {
	font-family: "Interstate";
	src: url("assets/font/InterstateLight.woff") format("woff");
	font-weight: 300;font-style: normal;font-display: swap;}
@font-face {
	font-family: "Interstate";
	src: url("assets/font/InterstateRegular.woff") format("woff");
	font-weight: 400;font-style: normal;font-display: swap;}
@font-face {
	font-family: "Interstate";
	src: url("assets/font/InterstateBold.woff") format("woff");
	font-weight: 700;font-style: normal;font-display: swap;}
@font-face {
	font-family: "Interstate";
	src: url("assets/font/InterstateBlack.woff") format("woff");
	font-weight: 900;font-style: normal;font-display: swap;}
@font-face {
	font-family: "Interstate";
	src: url("assets/font/InterstateUltraBlack.woff") format("woff");
	font-weight: 950;font-style: normal;font-display: swap;}

:root {
	--winter: #1f4364;
	--winter-dark: #112538;
	--winter-light: #eaf2f4;
	--text-color: #17323a;
	--white: #ffffff;
	--border-color: rgba(255, 255, 255, 0.25);

	--accent-gold: #c79a56;

	/* Kachel-Farben */
	--blue: #284261;
	--red: #a3271f;
	--green: #6d6e3a;
	--orange: #e8a03a;

	--page-padding: clamp(1rem, 3vw, 3rem);
	--card-gap: clamp(1rem, 2vw, 2rem);
	--radius: 0;

	--font-head: "Interstate", Arial, sans-serif;
	--font-body: var(--font-head);
	/*--font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;*/
	--font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--font-tile: "Overpass", "Helvetica Neue", Arial, sans-serif;

	--font-family: var(--font-body);
}

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {min-width: 320px;margin: 0;color: var(--text-color);background: var(--winter);line-height: 1.6;font-family: var(--font-body)}
img { max-width: 100%; }
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; }
h1,h2,h3,h4,h5,h6{font-family: var(--font-head);}
p{font-family: var(--font-body);}

.visually-hidden {position: absolute;width: 1px;height: 1px;margin: -1px;padding: 0;overflow: hidden;clip: rect(0 0 0 0);clip-path: inset(50%);white-space: nowrap;border: 0;}
.skip-link {position: fixed;z-index: 1000;top: 1rem;left: 1rem;padding: 0.75rem 1rem;color: var(--white);background: var(--winter-dark);transform: translateY(-200%);}
.skip-link:focus {transform: translateY(0);}

.site-header {position: relative;color: var(--winter);background: var(--white);z-index: 1;box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);margin-bottom: 35px;}
.site-header::after {content: "";position: absolute;left: 0;bottom: -34px;width: 100%;height: 35px;background: var(--white);
	/* Wellenkante die aussehen soll wie Schnee ❄️ */
	clip-path: polygon(0 0,4% 18%,8% 42%,12% 62%,16% 48%,20% 20%,24% 8%,28% 28%,32% 58%,36% 76%,40% 62%,44% 30%,48% 12%,52% 22%,56% 52%,60% 72%,64% 58%,68% 30%,72% 8%,76% 18%,80% 48%,84% 68%,88% 52%,92% 25%,96% 12%,100% 28%,100% 0);
	filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.12));
}

/* Lichterkette */
.site-header__lights {
	height: clamp(1.75rem, 4vw, 2.75rem);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 40'%3E%3Cpath d='M-5 4 C 12 30, 33 30, 45 6 C 57 30, 78 30, 95 4' fill='none' stroke='%23174451' stroke-opacity='0.35' stroke-width='1.5'/%3E%3Ccircle cx='45' cy='25' r='4.5' fill='%23c79a56'/%3E%3Ccircle cx='45' cy='25' r='4.5' fill='none' stroke='%23174451' stroke-opacity='0.3' stroke-width='0.75'/%3E%3C/svg%3E");
	background-repeat: repeat-x;background-position: top center;background-size: 90px 40px;
}

.site-header__inner {max-width: 60rem;margin: 0 auto;padding: clamp(1rem, 4vw, 2.5rem) var(--page-padding) clamp(3rem, 8vw, 6rem);text-align: center;}
.topper {margin: 0 0 0.5rem;color: var(--accent-gold);font-size: 0.8rem;font-weight: 700;letter-spacing: 0.12em;text-transform: uppercase;}

.site-header h1,
.calendar__intro h2 {margin: 0;line-height: 1.05;text-wrap: balance;}

.site-header h1 {font-size: clamp(2.6rem, 6vw, 5rem);font-weight: 600;}
.site-header__inner > p:last-child {margin: 1.25rem auto 0;font-size: clamp(1.05rem, 2vw, 1.25rem);}

.calendar {padding: clamp(3rem, 8vw, 8rem) var(--page-padding);}

.calendar__intro {max-width: 65rem;margin: 0 auto clamp(2rem, 5vw, 5rem);text-align: center;}
.calendar__intro h2 {color: var(--winter);font-size: clamp(2.5rem, 6vw, 5rem);}
.calendar__intro > p:last-child {margin: 1rem auto 0;max-width: 42rem;}

.cal-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));gap: var(--card-gap);width: 100%;margin: 0;padding: 0;list-style: none;}
.cal-grid > li {aspect-ratio: 1 / 1;}


/* Footer */
.site-footer {position: relative;z-index: 100;padding: 2rem var(--page-padding);color: var(--white);background: var(--winter-dark);margin-top: 35px;}
.site-footer::before {content: "";position: absolute;left: 0;top: -34px;width: 100%;height: 35px;background: var(--winter-dark);
	/* Welle identisch mit oben */
	clip-path: polygon(0 100%,4% 82%,8% 58%,12% 38%,16% 52%,20% 80%,24% 92%,28% 72%,32% 42%,36% 24%,40% 38%,44% 70%,48% 88%,52% 78%,56% 48%,60% 28%,64% 42%,68% 70%,72% 92%,76% 82%,80% 52%,84% 32%,88% 48%,92% 75%,96% 88%,100% 72%,100% 100%
	);filter: drop-shadow(0 -8px 6px rgba(0, 0, 0, 0.12));
}
.site-footer nav {display: flex;flex-wrap: wrap;justify-content: center;gap: 1.5rem;}
.site-footer a {text-underline-offset: 0.2em;}

.snowfall {position: fixed;inset: 0;z-index: 40;overflow: hidden;pointer-events: none;}
.snowfall::before,
.snowfall::after {
	content: "";position: absolute;inset: -20% -10%;
	background-repeat: repeat;
	background-image:
		radial-gradient(2px 2px at 8% 12%, #fff 99%, transparent 100%),
		radial-gradient(2.5px 2.5px at 24% 38%, #fff 99%, transparent 100%),
		radial-gradient(2px 2px at 42% 8%, #fff 99%, transparent 100%),
		radial-gradient(3px 3px at 58% 52%, #fff 99%, transparent 100%),
		radial-gradient(2px 2px at 74% 22%, #fff 99%, transparent 100%),
		radial-gradient(2.5px 2.5px at 90% 62%, #fff 99%, transparent 100%),
		radial-gradient(2px 2px at 12% 72%, #fff 99%, transparent 100%),
		radial-gradient(3px 3px at 96% 18%, #fff 99%, transparent 100%);
	background-size: 320px 320px;animation: snow-fall 14s linear infinite;opacity: 0.9;
}
.snowfall::after {background-size: 220px 220px;background-position: 40px 0;animation-duration: 9s;animation-delay: -3s;opacity: 0.55;filter: blur(0.4px);}
@keyframes snow-fall {
	from {transform: translate3d(0, -10%, 0);}
	to {transform: translate3d(-60px, 100%, 0);}
}

@media (max-width: 480px) {
	.calendar {padding-right: 1rem;padding-left: 1rem;}
	.cal-grid {grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));gap: 0.75rem;}
	.day__back {padding: 1rem;}
	.day__back h3 {font-size: 1.1rem;}
	.day__back p {font-size: 0.9rem;}
	.day__close {top: 0.5rem;right: 0.5rem;width: 2.2rem;height: 2.2rem;}
}
@media (max-width: 360px) {.cal-grid {grid-template-columns: 1fr;}}
@media (prefers-reduced-motion: reduce) {
	html {scroll-behavior: auto;}
	.day__front,.day__back {transition: none;}
	.snowfall::before,
	.snowfall::after {animation: none;}
}


/* COUNTDOWN Gedöns - Funktionalität in der kalender.js*/
.countdown {position: relative;padding: clamp(3rem, 8vw, 7rem) 1rem;text-align: center;color: var(--white);background: var(--winter);}
.countdown__inner {max-width: 75rem;margin: 0 auto;}
.countdown h2 {margin: 0 0 2.5rem;font-size: clamp(2rem, 5vw, 3.5rem);line-height: 1.1;}

.flip-clock {display: flex;justify-content: center;align-items: flex-start;flex-wrap: wrap;gap: clamp(.75rem, 3vw, 2rem);}
.countdown-unit {display: flex;flex-direction: column;align-items: center;gap: .8rem;}
.countdown-unit > span {font-size: clamp(.75rem, 1.5vw, 1rem);font-weight: 700;letter-spacing: .12em;text-transform: uppercase;color: var(--white);}
.flip-group {display: flex;gap: clamp(2px, .5vw, 6px);}

/* Einzelnes Zahlenblättchen */
.flip-digit {position: relative;display: grid;place-items: center;
	width: clamp(1.55rem, 7vw, 3.8rem);height: clamp(2.6rem, 11vw, 5.2rem);
	overflow: hidden;border-radius: 5px;
	color: var(--white);
	background: linear-gradient(to bottom,#263d43 0%,#263d43 49.5%,#101f24 50%,#101f24 100%);
	box-shadow: 0 5px 8px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .12);
	font-family: "Courier New", monospace;font-size: clamp(1.3rem, 5vw, 3.4rem);font-weight: 700;line-height: 1;
}

/* Horizontale Trennlinie */
.flip-digit::after {content: "";position: absolute;top: 50%;left: 0;right: 0;height: 1px;background: rgba(0, 0, 0, .65);box-shadow: 0 1px 0 rgba(255, 255, 255, .08);}
.flip-digit.is-flipping {animation: flip-number .28s ease-in-out;transform-origin: center center;}

@keyframes flip-number {
	0% {transform: perspective(300px) rotateX(0);}
	50% {transform: perspective(300px) rotateX(-90deg);opacity: .5;}
	100% {transform: perspective(300px) rotateX(0);opacity: 1;}
}
.countdown__note {margin: 2rem 0 0;font-size: clamp(1rem, 2vw, 1.3rem);}

@media (max-width: 480px) {
	.countdown {padding: 3rem .5rem;}
	.flip-clock {gap: .65rem;}
	.countdown-unit {gap: .5rem;}
}
@media (prefers-reduced-motion: reduce) {.flip-digit.is-flipping {animation: none;}}