/* === Minimal-Reset gegen Kubio/Astra-Overrides (nur Form-Elemente im Wrapper) === */
#buchungsWrapper select,
#buchungsWrapper input,
#buchungsWrapper textarea,
#buchungsWrapper button,
#buchungsWrapper label,
#buchungsWrapper a {
  font: inherit;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
  filter: none;
  backdrop-filter: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* === Wrapper im KFM-Look === */
#buchungsWrapper {
  position: relative;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
  max-width: 800px;
  margin: 0rem auto;
  font-family: inherit;
  color: white;
}

/* === Überschriften === */
#buchungsWrapper .buchung-step h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #b2db18;
}

/* === Labels (nur im Buchungsbereich) === */
#buchungsWrapper .buchung-step label {
  display: block;
  margin: 0.5rem 0;
  color: white;
  text-align: left;
}

/* === Radio Buttons === */
#buchungsWrapper form input[type="radio"] {
  vertical-align: middle;
  margin-right: 6px;
  accent-color: #b2db18;
  transform: scale(1.2);
}

/* === Eingabefelder & Selects (wunschdatum ausgenommen) === */
#buchungsWrapper .buchung-step input[type="text"],
#buchungsWrapper .buchung-step input[type="email"],
#buchungsWrapper .buchung-step input[type="tel"],
#buchungsWrapper .buchung-step input[type="number"],
#buchungsWrapper .buchung-step textarea,
#buchungsWrapper .buchung-step select:not(#wunschdatum) {
  width: 100%;
  max-width: 100%;
  padding: 0.6rem 1rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  background: rgba(0, 0, 0, 0.5) !important;
  color: white !important;
  border: 2px solid #b2db18 !important;
  font-size: 1rem;
  box-sizing: border-box;
  outline: none;
  box-shadow: none;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Safari/Chromium: Text im geschlossenen Select sichtbar halten */
#buchungsWrapper .buchung-step select:not(#wunschdatum) {
  -webkit-text-fill-color: #fff !important;
}

/* Fokus-Glow */
#buchungsWrapper .buchung-step input:focus,
#buchungsWrapper .buchung-step textarea:focus,
#buchungsWrapper .buchung-step select:not(#wunschdatum):focus {
  box-shadow: 0 0 8px #b2db18 !important;
  border-color: #b2db18 !important;
}

/* Placeholder Farbe */
#buchungsWrapper .buchung-step input::placeholder,
#buchungsWrapper .buchung-step textarea::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

/* Dropdown-Einträge */
#buchungsWrapper .buchung-step select:not(#wunschdatum) option {
  background: #111 !important;
  color: #fff !important;
}

/* Hover/Active für Dropdowns */
#buchungsWrapper .buchung-step select:not(#wunschdatum):hover,
#buchungsWrapper .buchung-step select:not(#wunschdatum):active {
  background: rgba(0, 0, 0, 0.5) !important;
  color: white !important;
  -webkit-text-fill-color: #fff !important;
  border: 2px solid #b2db18 !important;
  box-shadow: 0 0 8px #b2db18 !important;
}

/* Wunschdatum bleibt wie es ist */
#buchungsWrapper #wunschdatum {
  width: 100%;
  max-width: 100%;
  padding: 0.5rem;
  font-size: 1rem;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 2px;
}

/* === Buttons === */
#buchungsWrapper .buchung-step button {
  background: transparent;
  color: white;
  border: 2px solid #b2db18;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 100% !important;
}
#buchungsWrapper .buchung-step button:hover {
  box-shadow: 0 0 20px #b2db18;
  transform: translateY(-4px);
}

/* === Termin-Vorschläge Grid === */
#buchungsWrapper #terminVorschlaege {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
#buchungsWrapper #terminVorschlaege label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.8rem;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid #b2db18;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  box-sizing: border-box;
}
#buchungsWrapper #terminVorschlaege label:hover {
  box-shadow: 0 0 20px #b2db18;
  transform: translateY(-4px);
}

/* === Termin-Hinweis === */
#buchungsWrapper .termin-hinweis-wrapper {
  grid-column: 1 / -1;
  text-align: center;
  margin-bottom: 0.5rem;
}
#buchungsWrapper .termin-info {
  font-size: 1.1rem;
  font-weight: 500;
  color: #b2db18;
  margin: 0;
}

/* === Progressbar im KFM-Stil === */
#buchungsWrapper #progressbar {
  display: flex;
  justify-content: space-between;
  margin: 1.5rem auto 2rem;
  max-width: 800px;
  counter-reset: step;
  font-family: inherit;
}
#buchungsWrapper #progressbar .step {
  position: relative;
  flex: 1;
  padding: 0.6rem;
  text-align: center;
  color: white;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid #b2db18;
  transition: all 0.3s ease;
}
#buchungsWrapper #progressbar .step:first-child {
  border-radius: 25px 0 0 5px;
}
#buchungsWrapper #progressbar .step:last-child {
  border-radius: 0 5px 25px 0;
}
#buchungsWrapper #progressbar .step.aktiv {
  background: #b2db18;
  color: black;
  box-shadow: 0 0 20px #b2db18;
  z-index: 1;
}

/* === Responsive Anpassung === */
@media (max-width: 600px) {
  #buchungsWrapper #terminVorschlaege {
    grid-template-columns: 1fr;
  }
}
/* ===== BUCHUNG: Selects exakt wie Kontakt ===== */
#buchungsWrapper #kategorieSelect,
#buchungsWrapper #dienstleistungSelect,
#buchungsWrapper #mitarbeiterSelect {
  width: 100%;
  min-height: 2.6rem;
  padding: 0.6rem 1rem;
  margin: 0.5rem 0 1rem;
  background: rgba(0,0,0,0.5) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important; /* Safari fix */
  border: 2px solid #b2db18 !important;
  font-size: 1rem;
  box-sizing: border-box;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  transition: box-shadow .3s, border-color .3s;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><polyline points="5,7 10,12 15,7" fill="none" stroke="%23b2db18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 1rem;
}
#buchungsWrapper #kategorieSelect:hover,
#buchungsWrapper #dienstleistungSelect:hover,
#buchungsWrapper #mitarbeiterSelect:hover,
#buchungsWrapper #kategorieSelect:focus,
#buchungsWrapper #dienstleistungSelect:focus,
#buchungsWrapper #mitarbeiterSelect:focus {
  border-color: #b2db18 !important;
  box-shadow: 0 0 8px #b2db18 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
/* Dropdownliste dunkel */
#buchungsWrapper #kategorieSelect option,
#buchungsWrapper #dienstleistungSelect option,
#buchungsWrapper #mitarbeiterSelect option {
  background: #111 !important;
  color: #fff !important;
}
/* Platzhalter (wenn value="") dezenter */
#buchungsWrapper #kategorieSelect:invalid,
#buchungsWrapper #dienstleistungSelect:invalid,
#buchungsWrapper #mitarbeiterSelect:invalid {
  color: rgba(255,255,255,0.8) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.8) !important;
}

/* ===== BUCHUNG: Date-Feld wie Kontakt ===== */
#buchungsWrapper input[type="date"]#wunschdatum {
  width: 100%;
  padding: 0.6rem 1rem;
  margin: 0.5rem 0 1rem;
  background: rgba(0,0,0,0.5) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 2px solid #b2db18 !important;
  font-size: 1rem;
  box-sizing: border-box;
  transition: box-shadow .3s, border-color .3s;
}
#buchungsWrapper input[type="date"]#wunschdatum:focus {
  box-shadow: 0 0 8px #b2db18 !important;
  border-color: #b2db18 !important;
}
/* Kalender-Icon sichtbar machen */
#buchungsWrapper input[type="date"]#wunschdatum::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: .9;
  cursor: pointer;
}
/* Datums-Text weiß (WebKit) */
#buchungsWrapper input[type="date"]#wunschdatum::-webkit-datetime-edit,
#buchungsWrapper input[type="date"]#wunschdatum::-webkit-datetime-edit-fields-wrapper,
#buchungsWrapper input[type="date"]#wunschdatum::-webkit-datetime-edit-text,
#buchungsWrapper input[type="date"]#wunschdatum::-webkit-datetime-edit-month-field,
#buchungsWrapper input[type="date"]#wunschdatum::-webkit-datetime-edit-day-field,
#buchungsWrapper input[type="date"]#wunschdatum::-webkit-datetime-edit-year-field {
  color: #fff;
}
/* ===== Dropdowns im Buchungsformular – exakter KFM-Look ===== */
#buchungsWrapper select#kategorieSelect,
#buchungsWrapper select#dienstleistungSelect,
#buchungsWrapper select#mitarbeiterSelect {
  display: block;
  width: 100%;
  height: 48px;
  line-height: 48px;                 /* vertikal mittig */
  padding: 0 1rem !important;
  margin: 0.5rem 0 1rem !important;

  background-color: rgba(0,0,0,0.85) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;   /* Safari */
  border: 2px solid #b2db18 !important;
  border-radius: 2px !important;

  font-size: 1rem !important;
  font-weight: 500;
  box-sizing: border-box;
  cursor: pointer;

  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  /* Pfeil wie im Kontaktformular */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"><polyline points="4,6 9,11 14,6" fill="none" stroke="%23b2db18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 1rem;

  transition: box-shadow .25s ease, border-color .25s ease, transform .1s ease;
}

#buchungsWrapper select#kategorieSelect:hover,
#buchungsWrapper select#dienstleistungSelect:hover,
#buchungsWrapper select#mitarbeiterSelect:hover,
#buchungsWrapper select#kategorieSelect:focus,
#buchungsWrapper select#dienstleistungSelect:focus,
#buchungsWrapper select#mitarbeiterSelect:focus {
  border-color: #b2db18 !important;
  box-shadow: 0 0 20px #b2db18 !important;   /* Glow wie im Screenshot */
  outline: none !important;
}

/* geöffnete Liste dunkel + lesbar */
#buchungsWrapper select#kategorieSelect option,
#buchungsWrapper select#dienstleistungSelect option,
#buchungsWrapper select#mitarbeiterSelect option {
  background: #111 !important;
  color: #fff !important;
}

/* Platzhalter-Optik, falls value="" */
#buchungsWrapper select#kategorieSelect:invalid,
#buchungsWrapper select#dienstleistungSelect:invalid,
#buchungsWrapper select#mitarbeiterSelect:invalid {
  color: rgba(255,255,255,0.9) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.9) !important;
}

/* ==== NATIVE SELECTS (IDs aus deinem HTML) ==== */
#buchungsWrapper select#kategorieSelect,
#buchungsWrapper select#dienstleistungSelect,
#buchungsWrapper select#mitarbeiterSelect {
  width: 100% !important;
  height: 48px !important;
  padding: 0 1rem !important;
  margin: 0.5rem 0 1rem !important;
  background: rgba(0,0,0,0.85) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 2px solid #b2db18 !important;
  border-radius: 2px !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  box-sizing: border-box !important;
  appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"><polyline points="4,6 9,11 14,6" fill="none" stroke="%23b2db18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: right .8rem center !important;
  background-size: 1rem !important;
  transition: box-shadow .2s, border-color .2s !important;
}
#buchungsWrapper select#kategorieSelect:hover,
#buchungsWrapper select#dienstleistungSelect:hover,
#buchungsWrapper select#mitarbeiterSelect:hover,
#buchungsWrapper select#kategorieSelect:focus,
#buchungsWrapper select#dienstleistungSelect:focus,
#buchungsWrapper select#mitarbeiterSelect:focus {
  box-shadow: 0 0 20px #b2db18 !important;
  border-color: #b2db18 !important;
  outline: none !important;
}
#buchungsWrapper select#kategorieSelect option,
#buchungsWrapper select#dienstleistungSelect option,
#buchungsWrapper select#mitarbeiterSelect option {
  background: #111 !important;
  color: #fff !important;
}

/* ==== SELECT2 (falls aktiv) ==== */
#buchungsWrapper .select2-container .select2-selection--single {
  background: rgba(0,0,0,0.85) !important;
  border: 2px solid #b2db18 !important;
  border-radius: 2px !important;
  height: 48px !important;
}
#buchungsWrapper .select2-selection__rendered {
  color: #fff !important;
  line-height: 46px !important;
  padding: 0 2rem 0 1rem !important;
}
#buchungsWrapper .select2-selection__arrow b {
  border-color: #b2db18 transparent transparent transparent !important;
}
#buchungsWrapper .select2-container--open .select2-selection--single {
  box-shadow: 0 0 20px #b2db18 !important;
}
#buchungsWrapper .select2-dropdown {
  background: #111 !important;
  border: 2px solid #b2db18 !important;
}
#buchungsWrapper .select2-results__option { color: #fff !important; }

/* ==== CHOICES.JS (falls aktiv) ==== */
#buchungsWrapper .choices__inner {
  background: rgba(0,0,0,0.85) !important;
  color: #fff !important;
  border: 2px solid #b2db18 !important;
  border-radius: 2px !important;
  min-height: 48px !important;
}
#buchungsWrapper .choices__list--dropdown,
#buchungsWrapper .choices__list--dropdown .choices__item {
  background: #111 !important;
  color: #fff !important;
  border-color: #b2db18 !important;
}
#buchungsWrapper .choices__inner:focus,
#buchungsWrapper .choices__inner:hover {
  box-shadow: 0 0 20px #b2db18 !important;
  border-color: #b2db18 !important;
}
#buchungsWrapper #terminVorschlaege label:has(input[type="radio"]:checked) {
  background: rgba(178, 219, 24, 0.15);
  box-shadow: 0 0 15px rgba(178, 219, 24, 0.6);
  border-color: #b2db18;
}
/* Nur in Step 3, nur unsere Checkbox */
#step-3 .agb-row input[type="checkbox"]{
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  display: inline-block !important;
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  clip: auto !important;
  width: 1.1em; height: 1.1em;
  margin-right: .5rem; vertical-align: -2px;
}
#step-3 .agb-row label{ display:inline; }
/* Nur Step 3, nur unsere Links */
#step-3 .agb-row .agb-link {
  color: #2ecc71 !important;       /* grün */
  text-decoration: underline;
  cursor: pointer;
}
#step-3 .agb-row .agb-link:hover { text-decoration: none; }

/* Popup (Modal) — gekapselt */
.agb-modal-overlay {
  position: fixed; inset: 0; display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.6); z-index: 9999;
}
.agb-modal {
  background: #fff; color: #b2db18;
  width: min(800px, 90vw); max-height: 80vh; overflow: auto;
  padding: 16px 20px; border-radius: 8px;
}
.agb-modal header { display:flex; align-items:center; justify-content:space-between; margin-bottom: 8px; }
.agb-modal .close { background: transparent; border: 0; font-size: 22px; line-height: 1; cursor: pointer; }
html.agb-modal-open { overflow: hidden; }