.ev_container {
   display: flex;
   flex-wrap: wrap;
 }

 .ev_image-container {
   flex: 0 0 20%;
   /* Set the width of the image container */
 }

 .ev_image-container img {
   width: 50%;
   /* Make the image responsive */
 }

 .ev_text-container {
   flex: 1;
   /* Make the text container fill the remaining width */
   padding: 0 10px;
   /* Add some spacing between the image and text */
 }

 /* Custom styles.css */
 .form-control,
 .custom-select {
   height: 38px;
   /* Stelle die Höhe nach Bedarf ein */
   margin-bottom: 10px;
   /* Abstand nach jedem Feld */
 }

 .btn {
   width: 100%;
   /* Button nimmt die volle Breite des Containers ein */
   padding: 8px;
   /* Padding für bessere Lesbarkeit */
   margin-bottom: 10px;
   /* Abstand nach dem Button */
 }

 /* Spezielle Styles für das Datum-Feld, falls nötig */
 .form-control[type="date"] {
   line-height: 1.2;
   /* Anpassung der Zeilenhöhe */
 }

 /* Falls Dropdowns eine andere Optik haben sollen */
 .custom-select {
   -webkit-appearance: none;
   /* Entfernt standardmäßiges Browser-Styling */
   -moz-appearance: none;
   appearance: none;
   /* Dropdown ohne Pfeil, falls gewünscht */
   padding-right: 30px;
   /* Platz für den Pfeil */
   // background: url('path-to-your-custom-arrow-image.svg') no-repeat right 10px center;
   /* Eigenes Pfeil-Icon */
   background-size: 12px;
   /* Größe des Icons anpassen */
 }

 .grid-container {
   display: grid;
   /* Definiere hier die Anzahl und die Breite der Spalten */
   grid-template-columns: repeat(5, 1fr) minmax(90px, auto);
   /* Beispiel: 3 gleich große Spalten und eine schmalere für den Button */
   gap: 0.5rem;
   /* Abstand zwischen den Spalten */
 }

 .grid-item {
   /* Optional: Beschränke die Breite der input-Felder, falls gewünscht */
 }

 .save-btn {
   /* Optional: Wenn du die Breite des Buttons anpassen möchtest */
   width: 100%;
   /* Der Button füllt die Zelle aus */
 }

 @media (max-width: 768px) {
   .grid-container {
     grid-template-columns: 1fr;
     /* Auf kleinen Bildschirmen alles untereinander */
   }

   .save-btn {
     /* Optional: Anpassungen für den Button auf kleinen Bildschirmen */
   }
 }

 /* Basis-Styling für das Overlay */
 .overlay {
   display: none;
   /* Standardmäßig versteckt */
   position: fixed;
   /* Über dem restlichen Inhalt */
   left: 0;
   top: 0;
   width: 100%;
   /* Vollbild auf kleineren Geräten */
   height: 100%;
   background: rgba(0, 0, 0, 0.7);
   /* Leicht transparenter Hintergrund */
   z-index: 1000;
   /* Stellt sicher, dass es über anderen Elementen liegt */
 }

 .overlay-content {
   position: relative;
   width: 70%;
   /* Standardbreite */
   margin: 10% auto;
   /* Zentriert das Overlay */
   padding: 20px;
   background: white;
   border-radius: 5px;
   /* Abgerundete Ecken */
 }

 .close {
   position: absolute;
   top: 10px;
   right: 15px;
   font-size: 30px;
   cursor: pointer;
 }

 /* Stil für kleinere Elemente im Overlay */
 .overlay-content h2,
 .overlay-content form {
   margin-bottom: 20px;
 }

 /* Button-Styling */
 .overlay-content button {
   padding: 10px 20px;
   background-color: #4CAF50;
   color: white;
   border: none;
   border-radius: 4px;
   cursor: pointer;
 }

 .overlay-content button:hover {
   background-color: #45a049;
 }

 /* Stil für das Auswahlfeld */
 .overlay-content select {
   width: 100%;
   padding: 10px;
   margin-bottom: 20px;
 }

 /* Für Bildschirme, die schmaler als 600px sind */
 @media (max-width: 600px) {
   .overlay-content {
     width: 100%;
     /* Nutzt die volle Breite auf kleinen Geräten */
     margin-top: 20%;
     /* Anpassung der oberen Margin für kleinere Bildschirme */
   }
 }


 .ev_text-container .event-teilnehmer-buttons {
   display: flex;
   align-items: center;
 }

 .ev_text-container .event-teilnehmer-buttons h4 {
   margin-right: 10px;
 }

 .event-anmelden-button,
 .event-abmelden-button {
   margin-left: 5px;
 }

 .date-options-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-top: 10px;
 }

 .date-option {
   flex: 1 1 150px;
   /* Sorgt dafür, dass jede Option mindestens 200px breit ist, aber auch flexibel sein kann */
   display: flex;
   align-items: center;
 }

 .date-option input[type="checkbox"] {
   margin-right: 5px;
 }

 .date-option label {
   white-space: nowrap;
   /* Verhindert, dass der Text des Labels umbricht */
 }

 .participant-name {
   padding: 5px;
   display: inline-flex;
   margin-right: 5px;
   cursor: pointer;
   /* Verändert den Mauszeiger, um Klickbarkeit zu signalisieren */
   transition: background-color 0.3s, color 0.3s;
   /* Weiche Übergänge für die Farbänderung */
 }

 .participant-name:hover {
   background-color: #f0f0f0;
   /* Hintergrundfarbe beim Hovern */
   color: #333;
   /* Textfarbe beim Hovern */
 }

 .participant-name {
  cursor: pointer; /* Verändert den Mauszeiger, um Klickbarkeit zu signalisieren */
  transition: background-color 0.3s, color 0.3s; /* Weiche Übergänge für die Farbänderung */
}

.participant-name:hover {
  background-color: #f0f0f0; /* Hintergrundfarbe beim Hovern */
  color: #333; /* Textfarbe beim Hovern */
}

.info-popup {
  position: fixed; /* Fixierte Position, damit das Popup immer im Sichtfeld bleibt */
  left: 50%; /* Zentriert das Popup horizontal */
  top: 50%; /* Zentriert das Popup vertikal */
  transform: translate(-50%, -50%); /* Verschiebung um die eigene Hälfte, um genau zu zentrieren */
  width: 80%; /* Breite des Popups */
  max-width: 400px; /* Maximale Breite des Popups */
  padding: 20px; /* Innenabstand */
  background-color: white; /* Hintergrundfarbe */
  border: 1px solid #ccc; /* Rahmen */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Schlagschatten für einen "schwebenden" Effekt */
  z-index: 1000; /* Hoher z-index, um über anderen Elementen zu sein */
}

.info-popup p {
  margin: 0 0 10px; /* Abstand unten für jeden Absatz */
}

.info-popup button {
  display: block; /* Blockelement, um die volle Breite einzunehmen */
  width: 100%; /* Volle Breite */
  padding: 10px; /* Innenabstand */
  margin-top: 10px; /* Abstand oben */
  background-color: #f44336; /* Hintergrundfarbe */
  color: white; /* Textfarbe */
  border: none; /* Kein Rahmen */
  cursor: pointer; /* Cursor als Zeiger */
  box-shadow: none; /* Kein Schatten */
  border-radius: 5px; /* Abgerundete Ecken */
}

.info-popup button:hover {
  background-color: #d32f2f; /* Dunklere Hintergrundfarbe beim Hovern */
}
.event_titel{
float: left;
  font-weight: bold;
  padding-right: 15px;
}

.newsticker {
    background-color: #f0f0f0; /* Hintergrundfarbe des Newstickers */
    overflow: hidden;
    white-space: nowrap;
}

.newsticker ul {
    display: inline-block;
    padding-left: 100%; /* Startposition außerhalb des Bildschirms */
    animation: ticker 90s linear infinite; /* Animationsdauer und Wiederholung */
}

.newsticker li {
    display: inline; /* Elemente in einer Zeile anzeigen */
    margin-right: 50px; /* Abstand zwischen den Einträgen */
}

@keyframes ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}