/* Cozy: Comic-Hütte vor dem Wilden Kaiser, Schneefall, Geschenke. Creme, Tannengrün, Rot. */
html[data-theme="cozy"] {
  --grund: #f7fbff;
  --text: #fdf6e3;
  --kopf-text: #fdf6e3;
  --flaeche: #fdf6e3;
  --flaeche-text: #2b1a10;
  --knopf: #2f6b4f;
  --knopf-text: #fdf6e3;
  --rand: #2b1a10;
  --fokus: #e8c35a;
  --fehler: #a4242a;
  --radius: 14px;
  --schrift: Georgia, "Iowan Old Style", "Palatino Linotype", "DejaVu Serif", serif;
}

/* Hütte und Kaiser stehen oben im Bild, die Päckchen liegen davor im Schnee */
html[data-theme="cozy"] .kulisse { position: absolute; bottom: auto; height: 62dvh; }
html[data-theme="cozy"] .kopf { min-height: calc(62dvh - 10px); }
html[data-theme="cozy"] .link-knopf { color: #2b1a10; }

html[data-theme="cozy"] .kopf h1 { color: #fdf6e3; text-shadow: 3px 3px 0 #2b1a10; }
html[data-theme="cozy"] .kopf h1 em { color: #e8c35a; }
html[data-theme="cozy"] .unterzeile, html[data-theme="cozy"] .countdown { text-shadow: 1px 1px 0 #2b1a10; }
html[data-theme="cozy"] .countdown { color: #ffe9b0; }

/* Fenster und Kerze flackern warm */
html[data-theme="cozy"] .fenster { animation: flackern 4s ease-in-out infinite alternate; }
@keyframes flackern {
  from { fill: #ffd27a; }
  to { fill: #ffbe55; }
}
html[data-theme="cozy"] .rauch circle { animation: rauch 6s ease-in-out infinite alternate; }
html[data-theme="cozy"] .rauch circle:nth-child(2) { animation-delay: -2s; }
html[data-theme="cozy"] .rauch circle:nth-child(3) { animation-delay: -4s; }
@keyframes rauch {
  to { transform: translate(10px, -14px); opacity: .35; }
}

/* Geschenkpäckchen: Band über Kreuz */
html[data-theme="cozy"] .tuer {
  --papier: #c8373d;
  --band: #e8c35a;
  color: #fdf6e3; background:
    linear-gradient(var(--band), var(--band)) center / 100% 14px no-repeat,
    linear-gradient(var(--band), var(--band)) center / 14px 100% no-repeat,
    var(--papier);
  border: 4px solid #2b1a10; border-radius: 12px; box-shadow: 0 5px 0 #2b1a10;
}
html[data-theme="cozy"] li:nth-child(3n) .tuer { --papier: #2f6b4f; --band: #fdf6e3; }
html[data-theme="cozy"] li:nth-child(3n+1) .tuer { --papier: #8e2b30; --band: #fdf6e3; }
html[data-theme="cozy"] li:nth-child(5n) .tuer { --papier: #d9a441; --band: #8e2b30; }
html[data-theme="cozy"] .tuer-nummer {
  width: 66px; height: 66px; display: grid; place-items: center; font-size: 1.9rem;
  color: #2b1a10; background: #fdf6e3; border: 3px solid #2b1a10; border-radius: 50%; position: relative;
}
html[data-theme="cozy"] .tuer-datum, html[data-theme="cozy"] .tuer-stempel {
  position: relative; padding: 0 8px; color: #2b1a10; background: #fdf6e3; border-radius: 8px; opacity: 1;
}
html[data-theme="cozy"] .tuer-stempel { text-transform: none; letter-spacing: 0; }
html[data-theme="cozy"] .tuer.zu { filter: saturate(.55) brightness(.85); }
html[data-theme="cozy"] .tuer.offen { animation: wackeln 2.6s ease-in-out infinite; }
html[data-theme="cozy"] .tuer.gesehen { --papier: #efe3c6 !important; --band: #d8c8a3 !important; }
@keyframes wackeln {
  0%, 86%, 100% { transform: rotate(0); }
  90% { transform: rotate(-2.5deg); }
  95% { transform: rotate(2.5deg); }
}
html[data-theme="cozy"] .tuer.vorband { min-height: 110px; }
html[data-theme="cozy"] .tuer.headliner { min-height: 180px; --papier: #2f6b4f; --band: #e8c35a; }
html[data-theme="cozy"] .tuer.headliner .tuer-nummer { width: 86px; height: 86px; font-size: 2.6rem; }

/* Dialog: Deckel hebt ab */
html[data-theme="cozy"] .deckel {
  background:
    linear-gradient(#e8c35a, #e8c35a) center / 100% 26px no-repeat,
    linear-gradient(#e8c35a, #e8c35a) center / 26px 100% no-repeat,
    #c8373d;
}
html[data-theme="cozy"] .dialog-tag { color: #8e2b30; }
html[data-theme="cozy"] .buehne { box-shadow: 0 0 50px rgb(255 190 85 / .55); }
html[data-theme="cozy"] .ist-headliner .kugeln circle { animation: funkeln 1.6s ease-in-out infinite alternate; }
html[data-theme="cozy"] .ist-headliner .kugeln circle:nth-child(2n) { animation-delay: -.8s; }
@keyframes funkeln {
  to { opacity: .45; }
}

/* Einfache Seiten */
html[data-theme="cozy"] .seite-mitte { background: linear-gradient(#1b2a49, #4a5f86 65%, #e8b98a); }
html[data-theme="cozy"] .karte h1 em { color: #8e2b30; }
html[data-theme="cozy"] .karte { box-shadow: 0 8px 0 #2b1a10; }