.accordion-content {
    display: none;  /* Akkordeon anfangs geschlossen */
}
.required {
  color: red;
  margin-left: 5px;
  font-weight: bold;
  font-size: 1.2em;
}



  .logo {
      max-width: 180px; /* Größe des Logos anpassen */
      height: auto; /* Höhe wird automatisch angepasst */
      margin: 0 auto 20px; /* Mittig und Abstand nach unten */
      display: block;
    }
   html, body {
    height: auto;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}


   /* Standard-Container für größere Bildschirme */
.container {
	max-width: 1000px;
    margin: 0 auto;
    width: 90%;
    padding: 20px;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    min-height: auto; /* Entfernt den festen Höhenwert */
}

/* Für kleine Bildschirme oder mobile Geräte */
@media (max-width: 768px) {
    .container {
        width: 95%;  /* Breite anpassen */
        padding: 15px; /* Weniger Abstand auf kleineren Geräten */
    }
}

/* Für sehr kleine Bildschirme */
@media (max-width: 480px) {
    .container {
        width: 100%;  /* Breite anpassen für kleinere Geräte */
        padding: 10px; /* Noch weniger Abstand */
    }
}


    h2 {
      color: #333;
      text-align: center;
    }

    /* Stil für die Accordion-Schaltfläche */
.accordion {
    background-color: #f8f9fa; /* Helles Grau für den Hintergrund */
    color: #333; /* Dunkle Textfarbe für besseren Kontrast */
    padding: 12px 20px; /* Mehr Innenabstand für eine größere Schaltfläche */
    width: 100%; /* Breite auf 100% setzen */
    border: 2px solid #ddd; /* Heller Rand */
    border-radius: 10px; /* Abgerundete Ecken */
    text-align: left; /* Text links ausrichten */
    font-size: 16px; /* Schriftgröße */
    font-weight: bold; /* Text fett */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Übergangseffekte */
    box-sizing: border-box; /* Sorgt dafür, dass Padding und Rand bei der Breite berücksichtigt werden */
    margin-bottom: 10px; /* Abstand nach unten */
}

/* Hover-Effekt für die Accordion-Schaltfläche */
.accordion:hover {
    background-color: #e2e6ea; /* Etwas dunklerer Hintergrund bei Hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sanfter Schatten bei Hover */
}

/* Stil für den Accordion-Inhalt */
.accordion-content {
    padding: 15px; /* Innenabstand für den Inhalt */
    background-color: #ffffff; /* Weißer Hintergrund für den Inhalt */
    border: 1px solid #ddd; /* Heller Rand um den Inhalt */
    border-radius: 8px; /* Abgerundete Ecken */
    display: none; /* Standardmäßig ausblenden */
    margin-top: 8px; /* Abstand nach oben */
}

/* Aktivierung des Accordion-Inhalts, wenn geöffnet */
.accordion-content.active {
    display: block; /* Inhalt wird angezeigt */
}

    .form-section {
      margin-top: 20px;
    }

    .form-section label {
      display: block;
      margin-top: 10px;
    }

    .form-section input, .form-section select {
      width: 100%;
      padding: 4px;
      margin-top: 10px;
      box-sizing: border-box;
    }

    .form-section button {
      background-color: #28a745;
      color: white;
      padding: 10px;
      border: none;
      cursor: pointer;
      margin-top: 15px;
      width: 100%;
      border-radius: 5px;
    }

    .form-section button:disabled {
      background-color: #ccc;
    }

    .form-container {
  width: 100%;
  padding: 15px; /* identisch mit .accordion-content */
  box-sizing: border-box;
}


.form-container label {
    margin-bottom: 0px; /* Verringere den Abstand unter dem Label */
}
.form-container input, .form-container select {
    margin-top: 0px; /* Verringere den Abstand über dem Input */
    padding: 8px; /* Optional, für etwas Innenabstand */
    width: 100%; /* Stellt sicher, dass das Input-Feld die volle Breite einnimmt */
    box-sizing: border-box; /* Verhindert, dass Padding die Breite beeinflusst */
}




/* Toggle Switch Style */
.toggle-container {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
}

.toggle-label {
  font-size: 18px; /* Kleinere Schriftgröße für das Label */
  text-align: left; /* Text nach links ausrichten */
  flex: 1; /* Label nimmt den gesamten verfügbaren Raum ein */
}

.toggle-checkbox {
  appearance: none;
  -webkit-appearance: none;
  background-color: #ccc;
  border-radius: 20px;
  /*width: 40px;  Einheitliche Breite für beide Toggle-Switches */
  height: 20px; /* Einheitliche Höhe */
  position: relative;
  transition: background-color 0.3s;
  max-width:35px;
}

.toggle-checkbox:checked {
  background-color: #28a745;
}

.toggle-checkbox:checked::after {
  left: 14px; /* Position des Schaltknopfs anpassen */
}

.toggle-checkbox::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 20px; /* Einheitliche Größe des Schaltknopfs */
  height: 18px;
  background-color: white;
  border-radius: 50%;
  transition: left 0.3s;
}

button[type="submit"] {
  width: 100%; /* Volle Breite für den Bestätigungsbutton */
  padding: 10px;
  
}
    @media (max-width: 768px) {
      .container {
        padding: 15px;
      }

      h2 {
        font-size: 1.2rem;
      }
    }
	.toggle-container {
    border: 2px solid #007bff; /* Blaue Umrandung */
    padding: 10px; /* Innenabstand für ein wenig Puffer */
    border-radius: 8px; /* Abgerundete Ecken */
    margin: 10px 0; /* Abstand nach oben und unten */
    display: flex; /* Flexbox-Layout, um den Inhalt nebeneinander zu platzieren */
    align-items: center; /* Vertikale Ausrichtung des Inhalts */
}

.toggle-label {
    margin-right: 10px; /* Abstand zwischen dem Label und dem Checkbox */
    font-size: 16px; /* Schriftgröße des Labels */
    color: #333; /* Textfarbe */
}

.toggle-checkbox {
    width: 20px; /* Breite der Checkbox */
    height: 20px; /* Höhe der Checkbox */
}

/* neu
/* Gleicher Toggle-Style wie in richtlinien.php */
.toggle-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 0.5rem 0;
}

.toggle-label {
    margin-right: 1rem;
    font-weight: 500;
}

/* Toggle Switch Design */
.toggle-checkbox {
    width: 0;
    height: 0;
    opacity: 0;
    position: absolute;
}

.toggle-checkbox + .custom-toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
    background-color: #ccc;
    border-radius: 34px;
    transition: background-color 0.3s;
    cursor: pointer;
}

.toggle-checkbox + .custom-toggle::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 3px;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s;
}

.toggle-checkbox:checked + .custom-toggle {
    background-color: #4caf50;
}

.toggle-checkbox:checked + .custom-toggle::before {
    transform: translateX(24px);
}