/* ----- Countdown Styling ----- */

.countdown-container {
	
	/* 1. POSITIONIERUNG (Mit !important erzwungen) */
  position: fixed !important; 
  right: 20px !important;   /* Zwingt es nach rechts */
  bottom: 80px !important;  /* Startet 80px von unten */
  z-index: 9997 !important;
  /* Positioniert den Container unten links */
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 9997; /* Unter den Lichtern, aber über dem Inhalt */
  
  /* Sorgt dafür, dass man "durch" den Container klicken kann, 
     falls er über Links schwebt. */
  pointer-events: none; 

  /* Mehrere Boxen nebeneinander */
  display: flex;
  flex-direction: column; /* Stapelt die Boxen vertikal (untereinander) */	
  gap: 15px; /* Abstand zwischen den Boxen */
  flex-wrap: wrap; /* Falls kein Platz, untereinander */
  align-items: flex-end;	
}

.countdown-box {
  background: rgba(30, 30, 30, 0.9); /* Dunkler, transparenter Hintergrund */
  border: 1px solid #555;
  border-radius: 8px;
  padding: 10px -20px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  color: #fff;
  min-width: 180px; /* Mindestbreite für die Box */
}

.countdown-box h2 {
  margin: 0 0 8px 0;
  font-size: 1.1em;
  color: #fff;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.countdown-box .timer {
  font-family: 'Consolas', 'Courier New', monospace; /* Für einen "digitalen" Look */
  font-size: 1.3em;
  font-weight: bold;
  color: #f1c40f; /* Goldene Zahlen */
}

/* Die Einheiten (Tage, Std., etc.) */
.countdown-box .timer small {
  font-size: 0.5em;
  color: #ccc;
  margin-right: 8px; /* Abstand zur nächsten Zahl */
}

/* Zahlenblöcke */
.countdown-box .timer span {
  display: inline-block;
  min-width: 40px; /* Hält die Zahlen in einer Linie */
  text-align: right;
}

/* Kleine Farbakzente */
.christmas-countdown {
  border-left: 5px solid #c0392b; /* Roter Akzent */
}
.newyear-countdown {
  border-left: 5px solid #3498db; /* Blauer Akzent */
}