/* =================================================== */
/* ----- ANPASSUNGEN FÜR MOBILGERÄTE (HANDY) ----- */
/* =================================================== */

/* Wendet diese Regeln an, wenn der Bildschirm 768px oder schmaler ist */
@media (max-width: 768px) {

  /* --- 1. Lichterkette (wird kleiner) --- */
  
  .lichterkette li {
    width: 8px;  /* Lichter werden kleiner */
    height: 16px;
    margin: 0 4px; /* Lichter rücken enger zusammen */
  }
  
  /* Schatten-Effekt verkleinern, um performanter zu sein */
  .lichterkette li:nth-child(4n+1) { box-shadow: 0 0 8px 2px #ff0000; }
  .lichterkette li:nth-child(4n+2) { box-shadow: 0 0 8px 2px #00ff00; }
  .lichterkette li:nth-child(4n+3) { box-shadow: 0 0 8px 2px #0000ff; }
  .lichterkette li:nth-child(4n+4) { box-shadow: 0 0 8px 2px #ffff00; }

  
  /* --- 2. Countdowns (werden komplett ausgeblendet) --- */
  
  /* Das ist der beste Weg, da sie zu viel Platz wegnehmen 
     und !important wird gebraucht, um die Desktop-Regeln zu überschreiben. */
  .countdown-container {
    display: none !important; 
  }

  
  /* --- 3. Musik-Button (wird kleiner) --- */
  
  .weihnachts-musik-knopf {
    padding: 8px 12px !important; /* Kleinerer Button */
    font-size: 12px !important;   /* Kleinere Schrift */
    
    /* Etwas näher an die Kante, um Platz zu sparen */
    bottom: 15px !important;
    right: 15px !important;
  }
}