#panelMedPrxn {
  font-family: "Times New Roman", serif;
  text-align: center;
  /* margin-top: 200px; */
}

#counterPanelMedPrxn {
  text-align: center;
  /* height: 300px; */
  font-size: 120px;
  color: #000000; /* Startfarbe, wird von Animation überschrieben, wenn .zoom aktiv */
  margin-top: 10px;
  font-weight: bold;   /* NEU von Ihnen */
}

#roomPanelMedPrxn {
  text-align: center;
  font-size: 60px;
  color: #000000;
  /* margin-top: -20px; */
}

/* Keyframes für den Farbblitz */
@keyframes flash-colors {
  0%   { color: #000000; } /* Schwarz */
  50%  { color: #FFFFFF; } /* Weiß   */
  100% { color: #000000; } /* Zurück zu Schwarz */
}

/* Keyframes für die Zoom-Animation */
@keyframes zoom-animation {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}

/*
  .zoom Klasse steuert beide Animationen:
  1. zoom-animation: Dauer 1s, startet sofort.
  2. flash-colors:
     - Dauer eines Blitz-Zyklus (Schwarz-Weiß-Schwarz): 0.3s
     - Timing-Funktion: steps(1, end) für einen harten Wechsel (Blinken)
     - Verzögerung (animation-delay): 1s (startet, nachdem zoom-animation fertig ist)
     - Wiederholungen (animation-iteration-count): 10 (10 Blitze * 0.3s/Blitz = 3 Sekunden Gesamt-Blitzdauer)
*/
/* .zoom {
  animation:
    zoom-animation 1s   ease-in-out,  
    flash-colors   1.3s steps(1, end) 1s 4; 
} */

.zoom {
  /* Stellen Sie sicher, dass die Textfarbe schwarz ist, falls nicht geerbt */
  animation:
    zoom-animation 1s ease-in-out, /* Animation 1: Zoom */
    white-text-shadow-fade 1.3s ease-in-out 1s 6; /* Animation 2: Weißer Text-Schatten (1s Verzögerung, 4 Durchläufe) */
  /* Format für jede Animation: name | duration | timing-function | delay | iteration-count | direction | fill-mode */
}

/* Behalte deine zoom-animation Keyframes bei, z.B.: */
@keyframes zoom-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes white-text-shadow-fade {
  0%, 100% {
    /* Absolut kein Schatten am Anfang und Ende für den Fade-Effekt */
    text-shadow: none;
  }
  50% {
    /* TEXT-SCHATTEN - SO STARK WIE MÖGLICH */
    text-shadow:
      /* Solider, heller Kern - mehrfach um maximale Dichte zu erreichen */
      0 0 5px rgba(255, 255, 255, 1),
      0 0 10px rgba(255, 255, 255, 1),
      0 0 15px rgba(255, 255, 255, 1),
      /* Massive, extrem ausgedehnte und voll deckende Leuchtschichten */
      0 0 30px rgba(255, 255, 255, 1),
      0 0 50px rgba(255, 255, 255, 1),
      0 0 80px rgba(255, 255, 255, 1),
      /* Eine letzte, gigantische Schicht für maximale Ausdehnung, fast wie ein Hintergrundleuchten */
      0 0 120px rgba(255, 255, 255, 0.95); /* Leichte Transparenz hier kann die Form noch etwas andeuten, sonst auch 1 */
  }
}

/* Media Queries */
@media (max-width: 767px) {
  #customerPreviewPrxn {
    width: 500px;
    height: 200px;
    border: none;
    overflow: hidden;
  }
  #counterPanelMedPrxn {
    text-align: center;
    font-size: 120px;
    color: #000000;
    margin-top: 10px;
    font-weight: bold;   /* NEU von Ihnen */
  }
  #roomPanelMedPrxn {
    text-align: center;
    font-size: 50px;
    color: #000000;
    /* margin-top: -20px; */
  }
}

@media (max-width: 575px) {
  #customerPreviewPrxn {
    width: 400px;
    height: 200px;
    border: none;
    overflow: hidden;
  }
  #counterPanelMedPrxn {
    text-align: center;
    font-size: 80px;
    color: #000000;
    margin-top: 10px;
    font-weight: bold;   /* NEU von Ihnen */
  }
  #roomPanelMedPrxn {
    text-align: center;
    font-size: 40px;
    color: #000000;
    /* margin-top: -20px; */
  }
}