.elementor-1061 .elementor-element.elementor-element-eff768d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1061 .elementor-element.elementor-element-a59b938{--display:flex;}/* Start custom CSS for html, class: .elementor-element-1c9636c *//* Styling für die Fehlerkategorie */
.error-box {
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 5px;
  margin-top: 15px;
  background: #f9f9f9;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Jedes Element hat eine fixe Struktur mit 50% Text und 50% Checkbox */
.issue-item {
  display: grid;
  grid-template-columns: 50% 50%; /* Exakte Mitte */
  align-items: center;
  padding: 12px 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background: #fff;
  font-weight: bold;
  font-size: 14px;
  width: 100%;
}

/* Text linksbündig */
.issue-text {
  text-align: left;
}

/* Checkbox rechtsbündig, immer exakt an der gleichen Stelle */
.issue-item input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: #0073e6;
  cursor: pointer;
  justify-self: end; /* Immer am rechten Rand */
}

/* Kennzeichnet Pflichtfelder visuell */
.required-star {
  color: red;
  font-size: 16px;
  margin-left: 2px;
}
/* Styling für die Bestätigungsbox */
.confirmation-box {
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 5px;
  margin-top: 20px;
  background: #f9f9f9;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Styling für die Checkbox-Labels */
.checkbox-label {
  display: flex;
  flex-direction: column; /* Damit der Text oben und die Checkbox unten ist */
  font-weight: bold;
  font-size: 14px;
  color: #333;
  padding: 10px 15px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #ddd;
  width: 100%;
  text-align: left;
}

/* Checkboxen immer unter dem Text */
.checkbox-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 5px; /* Abstand zum Text */
  accent-color: #0073e6;
  cursor: pointer;
}

/* Links in Blau für bessere Sichtbarkeit */
.checkbox-label a {
  color: #0073e6;
  font-weight: bold;
  text-decoration: none;
}

.checkbox-label a:hover {
  text-decoration: underline;
}

/* Hintergrund abgedunkelt & verschwommen */
#progress-overlay {
  display: none;               /* Standard: versteckt */
  position: fixed;             /* Über dem gesamten Fenster */
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.3); /* Abdunkeln */
  backdrop-filter: blur(4px);  /* Hintergrund unscharf */
  z-index: 9999;
  display: flex;               /* Zentrieren der .overlay-content */
  align-items: center;
  justify-content: center;
}

/* Kleines Pop-up in der Mitte */
.overlay-content {
  background: #fff;
  padding: 30px 40px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  width: 320px;
}

/* Fortschrittsbalken-Styling */
.progress-bar {
  width: 100%;
  max-width: 300px;
  height: 20px;
  background: #e0e0e0;
  border-radius: 10px;
  margin: 20px auto 0; /* Abstand nach oben */
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
  position: relative;
}
.progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(to right, #2e8b57 20%, #3cac66 50%, #2e8b57 80%);
  background-size: 200% 100%;
  animation: fill 2s ease forwards, shine 1.5s linear infinite;
  border-radius: 10px;
}
@keyframes fill {
  0%   { width: 0%; }
  100% { width: 100%; }
}
@keyframes shine {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}/* End custom CSS */