/* ProgVenture-Uebersicht: Dorf-Deko und Weihnachtsbanner (cv-seite.js, laufband) */
/* Dorf: abwechselnd vorn und hinten, damit die Deko dicht zusammen steht und trotzdem jede zu sehen ist */
.cv-station.ist-hinten { bottom: 13px; width: 56px; height: 56px; z-index: 0; filter: saturate(.92) brightness(.97); }
.cv-station.ist-hinten svg { width: 56px; height: 56px; }
.cv-laeufer { z-index: 3; }

/* Weihnachtszeit (body[data-weihnacht], Klassen-Einstellung oder Vorschau der Lehrkraft): Winterhimmel, Schnee, Rand-Deko */
body[data-weihnacht] .cv-titel { position: relative; background: linear-gradient(180deg, #6f93bd 0%, #bcd4ea 100%); }
body[data-weihnacht] .cv-titel > * { position: relative; z-index: 1; }
body[data-weihnacht] .cv-titel::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .9;
  background-image:
    radial-gradient(circle, #fff 1.6px, transparent 2.4px), radial-gradient(circle, #fff 1.2px, transparent 2px), radial-gradient(circle, #fff 2.2px, transparent 3px);
  background-size: 120px 120px, 80px 80px, 170px 170px; background-position: 0 0, 35px 20px, 70px 60px;
  animation: cv-schnee 14s linear infinite;
}
@keyframes cv-schnee { to { background-position: 14px 120px, 30px 100px, 60px 230px; } }
body[data-weihnacht] .cv-laufband { background: linear-gradient(#f6f9fd, #dfe9f4); border-top-color: #c3d4e6; }
.cv-saison { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.cv-saison-teil { position: absolute; bottom: 2px; line-height: 0; }
.cv-saison-teil[data-huette] { bottom: 0; }
.cv-saison-teil svg { display: block; }
@container (max-width: 780px) { .cv-saison { display: none; } }
/* Weihnachtspunsch: die dampfende Tasse schwebt kurz ueber dem Avatar an der Gluehweinhuette */
.cv-tasse { position: absolute; left: 50%; top: -14px; display: none; padding: 1px; border-radius: 50%; background: rgba(255, 255, 255, .85);
  transform: translateX(-50%); z-index: 4; line-height: 0; }
.cv-laeufer.holt-punsch .cv-tasse { display: block; animation: cv-tasse-hoch .6s ease-out; }
@keyframes cv-tasse-hoch { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { body[data-weihnacht] .cv-titel::before { animation: none; } }