/* Button-Styling */
.open-form-button {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #C31320;
    color:white;
    
    border-width: 0px;
    
    border: 2px solid #C31320;

    width:100%;

    border-radius: 8px;
    cursor: pointer;
  }
  
  .open-form-button:hover {
    background-color: white;
    border: 2px solid #C31320;
    color: black;
  }
  
  /* Das Formular ist standardmäßig versteckt */
  .popup-form {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    background-color: white;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 1000;
  }
  
  
  /* Hintergrund abgedunkelt & Unschärfe */
  .allstar-content.dimmed::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  /*   background: rgba(0, 0, 0, 0.2); */
    will-change: transform;
    transform: translateZ(0);
   /*  backdrop-filter: blur(6px);  */
  /*   transition: backdrop-filter 1s ease-in-out, background 1s ease-in-out; */
    
    z-index: 900; /* Muss unter dem Popup liegen */
  }
  
  /* Sicherstellen, dass der Hintergrund-Effekt entfernt wird, wenn das Formular geschlossen wird */
  .allstar-content:not(.dimmed)::before {
    backdrop-filter: blur(0px);
    background: rgba(0, 0, 0, 0);
  }
  
  
  
  
  
  /* Formular-Elemente */
  .popup-form h3 {
    text-align: center;
    margin-bottom: 16px;
  }
  
  .popup-form label {
    display: block;
    margin-top: 12px;
    font-size: 14px;
    color: #333;
  }
  
  .popup-form input[type="text"],
  .popup-form input[type="email"],
  .popup-form input[type="tel"] {
    width: 100%;
    padding: 8px;
    margin-top: 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  .popup-form .checkbox-group {
    margin-top: 16px;
  }
  
  .popup-form .checkbox-group label {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-top: 8px;
  }
  
  .popup-form button {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: 12px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }
  
  .popup-form button[type="submit"] {
    background-color: #C31320;
    color: white;
  }
  
  .popup-form button[type="submit"]:hover {
    background-color: #a0101c;
  }
  
  .popup-form button[type="button"] {
    background-color: #ccc;
  }
  
  .popup-form button[type="button"]:hover {
    background-color: #bbb;
  }
  
  
  
  
  /* checkboxen */
  
  
  /* Standard-Checkbox ausblenden */
  .checkbox-group input[type="checkbox"] {
    appearance: none; /* Entfernt das Standard-Design */
    width: 24px; /* Größe der Checkbox */
    height: 24px;
    border: 2px solid #C31320; /* Rote Umrandung */
    border-radius: 50%; /* Macht sie rund */
    background-color: white;
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    margin-right: 8px;
  }
  
  /* Stil für aktivierte Checkbox */
  .checkbox-group input[type="checkbox"]:checked {
    background-color: #C31320; /* Roter Hintergrund */
    border: 2px solid #C31320;
  }
  
  /* Weißes Häkchen anzeigen, wenn die Checkbox aktiviert ist */
  .checkbox-group input[type="checkbox"]::after {
    content: "✔"; /* Unicode für ein Häkchen */
    font-size: 16px;
    color: white; /* Weißer Haken */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    display: none; /* Standardmäßig ausgeblendet */
  }
  
  /* Wenn Checkbox aktiviert, Haken anzeigen */
  .checkbox-group input[type="checkbox"]:checked::after {
    display: block;
  }