/* Basis & Hintergrund */
:root{
	--bg1:#071726;
	--bg2:#0b3528;
	--accent:#c01f2f;
	--gold:#ffd27a;
	--card1:#ffefdb;
	--red:#b71c1c;
	--green:#0a7a44;
	--badge:#ffd27a;
	--logo-img: url(data:image/png;base64,DEIN_BASE64_STRING);
}

*{box-sizing:border-box}
html,body{height:100%}
body {
	font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial;
	background: radial-gradient(circle at 10% 10%, rgba(255,255,255,0.02), transparent 10%),
                linear-gradient(180deg, #071726 0%, #0b3a2f 100%);
	color: #fff;
	margin: 0;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100vh;
	overflow-x: hidden;
}

/* Header */
.page-header { 
	text-align:center; 
	margin-bottom:1rem; 
	position:relative; 
	z-index:3; 
	padding-right: 150px; /* Platz für Logo rechts */
}
.page-header h1 {
	font-family: "Mountains of Christmas", cursive;
	font-size:2.2rem;
	margin:0;
	color: var(--gold);
	text-shadow: 0 2px 6px rgba(0,0,0,0.6), 0 0 10px rgba(255,210,120,0.06);
	letter-spacing: 0.6px;
}
.page-header .sub {
	color: rgba(255,255,255,0.75);
	font-size:0.95rem;
	margin-top:6px;
}

/* kleines Baum-Deko links */
.header-deco { position: absolute; left: 8px; top: -4px; opacity: 0.95; }
.header-deco .tree { filter: drop-shadow(0 3px 4px rgba(0,0,0,0.5)); }

/* Schneefall (entfernt die punktförmigen Muster, ersetzt durch dezente Überlagerung) */
.snow {
	pointer-events: none;
	position: fixed;
	inset: 0;
	z-index:1;
	/* keine Punkte mehr — sanfte, gleichmäßige Überlagerung */
	background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00) 60%);
	opacity: 0.85;
	mix-blend-mode: screen;
	animation: drift 18s linear infinite;
}
@keyframes drift {
	0% { transform: translateY(-2%); }
	50% { transform: translateY(2%); }
	100% { transform: translateY(-2%); }
}

/* Sterne/Glanz: keine punktförmigen Radial-Gradients mehr, nur sanfte Lichtflecken */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	background-image:
		radial-gradient(ellipse at 12% 12%, rgba(255,230,150,0.03), transparent 8%),
		radial-gradient(ellipse at 82% 38%, rgba(255,255,255,0.015), transparent 6%);
	z-index:0;
}

/* --- Neue Tannenbaum-Hintergründe (zwei Ebenen für Tiefe) --- */

/* dunklere, größere Vordergrund-Bäume */
body::after {
	content: "";
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 36vh;
	pointer-events: none;
	z-index: 0; /* hinter .snow (z-index:1) und .calendar (z-index:2) */
	/* kleine, kachelbare Baum-Silhouette als Data-URI SVG (Farbwerte URL-encoded) */
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 200'><g fill='%230b3a2f' fill-rule='evenodd'><rect x='52' y='152' width='16' height='28' fill='%238b5a2b' rx='2'/><path d='M60 10 L26 76 L40 76 L20 120 L50 94 L60 94 L110 152 L80 76 L94 76 Z' /></g></svg>");
	background-repeat: repeat-x;
	background-position: left bottom;
	background-size: 180px 100%;
	opacity: 0.95;
	transform-origin: center bottom;
	animation: trees-sway-front 8s ease-in-out infinite;
	mix-blend-mode: multiply;
}

/* hellere, kleinere Hintergrund-Bäume für Tiefenwirkung */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	background-image:
		radial-gradient(ellipse at 12% 12%, rgba(255,230,150,0.03), transparent 8%),
		radial-gradient(ellipse at 82% 38%, rgba(255,255,255,0.015), transparent 6%);
	z-index:0;
}

/* zusätzliche Ebene: kleinere, entfernte Bäume über dem body, unter snow */
html::after {
	content: "";
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 28vh;
	pointer-events: none;
	z-index: 0; /* gleicher Layer, aber rendered after body::after so appears slightly above (subtle depth) */
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 200'><g fill='%230a7a44' fill-opacity='0.45' fill-rule='evenodd'><rect x='52' y='152' width='16' height='28' fill='%238b5a2b' rx='2'/><path d='M60 14 L30 80 L42 80 L22 120 L50 98 L60 98 L100 150 L78 80 L94 80 Z' /></g></svg>");
	background-repeat: repeat-x;
	background-position: left bottom;
	background-size: 140px 100%;
	opacity: 0.72;
	transform-origin: center bottom;
	animation: trees-sway-back 12s ease-in-out infinite;
	mix-blend-mode: screen;
}

/* --- Detailreichere Tannenbäume im Hintergrund (zwei Ebenen) --- */

/* Vordergrund-Bäume: größer, mit Schnee und Kugeln */
body::after {
    content: "";
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 38vh;
    pointer-events: none;
    z-index: 0;
    background-image:
        url("data:image/svg+xml;utf8,<svg width='160' height='120' viewBox='0 0 160 120' xmlns='http://www.w3.org/2000/svg'><g><polygon points='80,10 30,80 55,80 35,110 65,90 80,90 125,120 105,80 130,80' fill='%231e7c3a' stroke='%230b3a2f' stroke-width='2'/><ellipse cx='80' cy='90' rx='18' ry='7' fill='%23fff' opacity='0.7'/><ellipse cx='55' cy='80' rx='7' ry='3' fill='%23fff' opacity='0.7'/><ellipse cx='105' cy='80' rx='7' ry='3' fill='%23fff' opacity='0.7'/><circle cx='70' cy='70' r='4' fill='%23ffd700'/><circle cx='90' cy='85' r='3' fill='%23e41e3f'/><circle cx='110' cy='100' r='3' fill='%23fff'/></g></svg>");
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: 220px 100%;
    opacity: 0.92;
    animation: trees-sway-front 10s ease-in-out infinite;
    mix-blend-mode: multiply;
}

/* Hintergrund-Bäume: kleiner, bläulich, mit Schnee */
html::after {
    content: "";
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 26vh;
    pointer-events: none;
    z-index: 0;
    background-image:
        url("data:image/svg+xml;utf8,<svg width='110' height='80' viewBox='0 0 110 80' xmlns='http://www.w3.org/2000/svg'><g><polygon points='55,8 20,50 35,50 22,70 45,56 55,56 95,80 80,50 100,50' fill='%230a7a44' stroke='%230b3a2f' stroke-width='1.5'/><ellipse cx='55' cy='56' rx='12' ry='4' fill='%23fff' opacity='0.6'/><ellipse cx='35' cy='50' rx='5' ry='2' fill='%23fff' opacity='0.5'/><ellipse cx='80' cy='50' rx='5' ry='2' fill='%23fff' opacity='0.5'/></g></svg>");
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: 140px 100%;
    opacity: 0.65;
    animation: trees-sway-back 16s ease-in-out infinite;
    mix-blend-mode: screen;
}

/* sanftes Wippen der Bäume */
@keyframes trees-sway-front {
    0% { transform: translateY(0) rotate(0deg);}
    35% { transform: translateY(-1.2%) rotate(-0.6deg);}
    70% { transform: translateY(0.6%) rotate(0.4deg);}
    100% { transform: translateY(0) rotate(0deg);}
}
@keyframes trees-sway-back {
    0% { transform: translateY(0) rotate(0deg) scale(1);}
    50% { transform: translateY(-0.8%) rotate(-0.4deg) scale(1.02);}
    100% { transform: translateY(0) rotate(0deg) scale(1);}
}

/* leichte Feinabstimmung: sicherstellen, dass die Bäume unter Header/Calendar liegen */
.page-header { position: relative; z-index: 3; }
.calendar { position: relative; z-index: 2; }

/* Kalender-Grid */
.calendar {
	display: grid;
	grid-template-columns: repeat(6, minmax(80px, 1fr));
	gap: 18px;
	width: min(980px, 100%);
	max-width: 980px;
	margin: 1rem auto;
	position:relative;
	z-index:2;
}

/* --- Tannenbaum als Karte --- */
.card {
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    width: 70px;
    height: 110px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
    transition: transform .14s cubic-bezier(.2,.9,.3,1), box-shadow .14s;
    outline: none;
}

.card:active, .card:hover {
    transform: scale(1.04) translateY(-4px);
    z-index: 10;
}

/* Baumstruktur */
.card .tree-shape {
    width: 56px;
    height: 80px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.card .tree-part {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #1e7c3a 0%, #0b3a2f 100%);
    border-radius: 50% 50% 60% 60%/60% 60% 100% 100%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

.card .tree-part.t1 {
    width: 38px; height: 22px; top: 8px; z-index: 3;
}
.card .tree-part.t2 {
    width: 48px; height: 26px; top: 22px; z-index: 2;
}
.card .tree-part.t3 {
    width: 56px; height: 32px; top: 40px; z-index: 1;
}

/* Stamm */
.card .tree-stem {
    position: absolute;
    left: 50%;
    bottom: -12px;
    transform: translateX(-50%);
    width: 12px;
    height: 18px;
    background: linear-gradient(180deg, #8b5a2b 60%, #5a3a1a 100%);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.18);
    z-index: 0;
}

/* Kugeln */
.card .tree-ball {
    position: absolute;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.card .tree-ball.b1 { width: 8px; height: 8px; background: #ffd700; left: 12px; top: 18px; }
.card .tree-ball.b2 { width: 7px; height: 7px; background: #e41e3f; left: 32px; top: 30px; }
.card .tree-ball.b3 { width: 7px; height: 7px; background: #fff; left: 22px; top: 48px; }
.card .tree-ball.b4 { width: 6px; height: 6px; background: #ffd700; left: 40px; top: 56px; }
.card .tree-ball.b5 { width: 6px; height: 6px; background: #e41e3f; left: 8px; top: 60px; }

/* Stern an der Spitze */
.card .tree-star {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 22px;
    color: #ffd700;
    filter: drop-shadow(0 0 6px #fff7b0);
    z-index: 10;
    pointer-events: none;
}

/* Zahl mittig auf dem Baum */
.card .tree-day {
    position: absolute;
    left: 50%;
    top: 38px;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.92);
    color: #1e7c3a;
    font-weight: 900;
    font-size: 1.1rem;
    padding: 2px 10px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.10);
    z-index: 12;
    pointer-events: auto;
    cursor: pointer;
    border: 1.5px solid #ffd700;
}

/* Geöffnet: Baum leicht "leuchtend" */
.card.open .tree-shape {
    filter: drop-shadow(0 0 16px #fff7b0) brightness(1.12);
}
.card.locked { 
	opacity: 0.6; 
	filter: grayscale(12%); 
	cursor: not-allowed; 
	position: relative;
}
.card.locked .tree-day { background: #eee; color: #aaa; border-color: #ccc; }

/* Schloss-Symbol für gesperrte Türchen */
.card.locked::after {
	content: "🔒";
	position: absolute;
	bottom: 8px;
	right: 8px;
	font-size: 1.2rem;
	opacity: 0.85;
	pointer-events: none;
}

/* Shake-Animation bei Klick auf gesperrtes Türchen */
@keyframes shake {
	0%, 100% { transform: translateX(0); }
	10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
	20%, 40%, 60%, 80% { transform: translateX(8px); }
}

.card.shake {
	animation: shake 0.35s ease-in-out;
}

/* Gesperrte (disabled) Türchen wirklich blockieren */
.card:disabled {
	opacity: 0.6;
	filter: grayscale(12%);
	cursor: not-allowed;
}
.card:disabled .tree-day {
	pointer-events: none;
	cursor: not-allowed;
}
.card:disabled:hover,
.card:disabled:active {
	transform: none;
}

/* Label und Tag ausblenden */
.card .label, .card .slot-tag, .card .slot-icon, .card .slot-day { display: none !important; }

/* --- Hintergrund: großer Stern und 5 einzelne Schneeflocken --- */
body::before {
    content: "";
    position: fixed;
    left: 0; right: 0; top: 0; bottom: 0;
    z-index: 0;
    pointer-events: none;
    /* großer Stern oben mittig */
    background:
        url("data:image/svg+xml;utf8,<svg width='180' height='180' xmlns='http://www.w3.org/2000/svg'><g><polygon points='90,10 104,70 170,70 116,110 134,170 90,135 46,170 64,110 10,70 76,70' fill='%23ffd700' stroke='%23fff7b0' stroke-width='4'/></g></svg>") center 40px no-repeat,
        /* Schneeflocke 1 */
        url("data:image/svg+xml;utf8,<svg width='48' height='48' xmlns='http://www.w3.org/2000/svg'><g stroke='%23fff' stroke-width='2'><circle cx='24' cy='24' r='10' fill='none'/><line x1='24' y1='4' x2='24' y2='44'/><line x1='4' y1='24' x2='44' y2='24'/><line x1='10' y1='10' x2='38' y2='38'/><line x1='38' y1='10' x2='10' y2='38'/></g></svg>") 8% 18% no-repeat,
        /* Schneeflocke 2 */
        url("data:image/svg+xml;utf8,<svg width='54' height='54' xmlns='http://www.w3.org/2000/svg'><g stroke='%23e0f7fa' stroke-width='2'><circle cx='27' cy='27' r='12' fill='none'/><line x1='27' y1='6' x2='27' y2='48'/><line x1='6' y1='27' x2='48' y2='27'/><line x1='14' y1='14' x2='40' y2='40'/><line x1='40' y1='14' x2='14' y2='40'/></g></svg>") 80% 22% no-repeat,
        /* Schneeflocke 3 */
        url("data:image/svg+xml;utf8,<svg width='60' height='60' xmlns='http://www.w3.org/2000/svg'><g stroke='%23fff' stroke-width='2'><circle cx='30' cy='30' r='14' fill='none'/><line x1='30' y1='8' x2='30' y2='52'/><line x1='8' y1='30' x2='52' y2='30'/><line x1='16' y1='16' x2='44' y2='44'/><line x1='44' y1='16' x2='16' y2='44'/><line x1='30' y1='30' x2='52' y2='8'/><line x1='30' y1='30' x2='8' y2='52'/></g></svg>") 18% 70% no-repeat,
        /* Schneeflocke 4 */
        url("data:image/svg+xml;utf8,<svg width='44' height='44' xmlns='http://www.w3.org/2000/svg'><g stroke='%23e0f7fa' stroke-width='2'><circle cx='22' cy='22' r='9' fill='none'/><line x1='22' y1='2' x2='22' y2='42'/><line x1='2' y1='22' x2='42' y2='22'/><line x1='8' y1='8' x2='36' y2='36'/><line x1='36' y1='8' x2='8' y2='36'/></g></svg>") 60% 80% no-repeat,
        /* Schneeflocke 5 */
        url("data:image/svg+xml;utf8,<svg width='38' height='38' xmlns='http://www.w3.org/2000/svg'><g stroke='%23fff' stroke-width='2'><circle cx='19' cy='19' r='7' fill='none'/><line x1='19' y1='2' x2='19' y2='36'/><line x1='2' y1='19' x2='36' y2='19'/><line x1='8' y1='8' x2='30' y2='30'/><line x1='30' y1='8' x2='8' y2='30'/></g></svg>") 88% 72% no-repeat;
    background-size:
        180px 180px,
        48px 48px,
        54px 54px,
        60px 60px,
        44px 44px,
        38px 38px;
    opacity: 0.92;
    animation: snow-float 30s linear infinite;
}

@keyframes snow-float {
    0% { background-position:
        center 40px,
        8% 18%,
        80% 22%,
        18% 70%,
        60% 80%,
        88% 72%;
    }
    100% { background-position:
        center 40px,
        8% 23%,
        80% 27%,
        18% 75%,
        60% 85%,
        88% 77%;
    }
}

/* Entferne alte Hintergrund-Tannenbäume, falls noch vorhanden */
body::after,
html::after {
    display: none !important;
    content: none !important;
}

/* Zwei große Weihnachtsbäume links und rechts, optisch verbunden durch einen Boden */
.big-trees-bg {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

/* Bäume */
.big-trees-bg .big-tree {
    position: absolute;
    bottom: 0;
    width: 200px;
    height: 360px;
    opacity: 0.95;
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.18));
}
.big-trees-bg .big-tree.left {
    left: -30px;
    transform: scale(1.08);
}
.big-trees-bg .big-tree.right {
    right: -30px;
    transform: scale(1.08) scaleX(-1);
}

/* Neuer: Boden verbindet die Bäume optisch */
.big-trees-bg::after {
    content: "";
    position: absolute;
    left: 8vw;
    right: 8vw;
    bottom: 0;
    height: 70px;
    background: radial-gradient(ellipse at 50% 60%, #e6f7fa 60%, #b6d6c6 100%);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    box-shadow: 0 0 32px 8px #b6d6c6;
    z-index: 2;
    opacity: 0.85;
    pointer-events: none;
}

/* Optional: dezente Schneehügel für mehr Verbindung */
.big-trees-bg::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 50px;
    background: radial-gradient(ellipse at 20% 100%, #fff 60%, transparent 100%),
                radial-gradient(ellipse at 80% 100%, #fff 60%, transparent 100%);
    opacity: 0.7;
    z-index: 3;
    pointer-events: none;
}

/* Kalender und Header überlagern die Bäume */
.page-header, .calendar, main {
    position: relative;
    z-index: 2;
}

/* Design für das Overlay-Hinweis bei gesperrtem Türchen */
.locked-hint {
    animation: lockedHintFadeIn 0.3s;
}
@keyframes lockedHintFadeIn {
    from { opacity: 0; transform: scale(0.95);}
    to   { opacity: 1; transform: scale(1);}
}

/* Modal-Fallback für Audio */
.modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2000;
}
.modal {
	position: relative;
	background: #ffffff;
	color: #1e7c3a;
	border-radius: 12px;
	padding: 16px 16px 12px;
	width: min(520px, 92vw);
	box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
.modal-close {
	position: absolute;
	top: 6px;
	right: 10px;
	background: transparent;
	border: none;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: #0b3a2f;
	opacity: 0.75;
}
.modal-close:hover { opacity: 1; }

/* Modal nur sichtbar, wenn nicht hidden */
.modal-overlay[hidden] {
	display: none !important;
}

/* Locked-Hinweis Popup */
.locked-hint-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.55);
	backdrop-filter: blur(2px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3000;
	animation: lockedOverlayFade .18s ease-out;
}
.locked-hint-box {
	position: relative;
	background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(255,255,255,0.94));
	color: #2b1b00;
	border-radius: 14px;
	padding: 18px 20px 16px;
	box-shadow: 0 14px 40px rgba(0,0,0,0.28);
	border: 1px solid rgba(255,210,122,0.6);
	max-width: 320px;
	text-align: center;
	animation: lockedBoxPop .2s ease-out;
}
.locked-hint-title {
	font-weight: 800;
	font-size: 1.05rem;
	color: #e41e3f;
	margin-bottom: 8px;
}
.locked-hint-text {
	font-size: 0.95rem;
	line-height: 1.4;
	color: #2b1b00;
}
.locked-hint-text small {
	display: block;
	margin-top: 8px;
	font-size: 0.85rem;
	color: #666;
}
.locked-hint-close {
	position: absolute;
	top: 6px;
	right: 8px;
	background: transparent;
	border: none;
	color: #0b3a2f;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.8;
}
.locked-hint-close:hover { opacity: 1; }

@keyframes lockedOverlayFade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes lockedBoxPop {
	from { transform: scale(0.96); opacity: 0; }
	to   { transform: scale(1); opacity: 1; }
}

/* Locked Door Pop-up Styles */
.locked-modal {
	background: linear-gradient(135deg, #fff9e6, #ffe8b3);
	border: 3px solid #d4af37;
	box-shadow: 0 20px 60px rgba(0,0,0,0.4);
	animation: lockedBoxPop 0.3s ease-out;
}

.locked-modal h2 {
	color: #c41e3a;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
	font-family: "Mountains of Christmas", cursive;
}

.locked-modal p {
	color: #2b1b00;
	font-family: "Roboto", sans-serif;
	line-height: 1.6;
}

.locked-modal-close {
	position: absolute;
	top: 10px;
	right: 12px;
	background: transparent;
	border: none;
	font-size: 28px;
	color: #c41e3a;
	cursor: pointer;
	opacity: 0.8;
	transition: opacity 0.2s;
}

.locked-modal-close:hover {
	opacity: 1;
}

/* Neues Logo oben rechts im Header – jetzt mit echter Data-URI */
.page-header .logo {
	position: absolute;
	top: -4px;
	right: 0;
	width: 140px;
	height: 140px;
	background: var(--logo-img) center/contain no-repeat;
	user-select: none;
	image-rendering: crisp-edges;
	filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
.page-header .logo:hover {
	filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6)) brightness(1.05);
}
@media (max-width: 640px) {
	.page-header { padding-right: 110px; }
	.page-header .logo { width: 100px; height: 100px; top: -6px; }
}
@media (max-width: 420px) {
	.page-header { padding-right: 0; }
	.page-header .logo {
		position: static;
		display: block;
		margin: 0 auto 8px;
		width: 120px;
		height: 120px;
	}
}

/* Hinweis: Markup <div class="logo" aria-label="Advent Logo"></div> */