.webstra-single-navitem {
  padding-right: 20px !important;
}

#unsere-kompetenzen,
#notdienst {
  scroll-margin-top: 100px;
}

.form-control {
  text-overflow: ellipsis;
  display: block;
  width: 100%;
  padding: 0.9375rem 2.5rem 0.9375rem 1.1875rem;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.225;
  color: #1e306e;
  background-color: #f6f7f9;
  background-clip: padding-box;
  border: 1px solid #f6f7f9;
  appearance: none;
  border-radius: 8px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.was-validated .form-control:valid,
.form-control.is-valid {
  padding-right: calc(1.125em + 1.775rem) !important; /* Adjust padding for valid state */
}

.was-validated .form-control:valid ~ .dropdown-icon,
.form-control.is-valid ~ .dropdown-icon,
.form-control-has-validation.has-error ~ .dropdown-icon {
  right: calc(1.125em + 1.775rem) !important; /* Move dropdown icon when valid or has error */
}

.form-control-has-validation.has-error {
  padding-right: calc(1.125em + 1.775rem) !important;
}

.form-control-wrap {
  position: relative;
  margin-bottom: 1.5rem;
}

.form-control-wrap select {
  width: 100%;
  padding-right: 2.5rem;
}

.dropdown-icon {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #bce0f7;
}

.form-control-has-validation.has-error {
  border-color: #e57373;
}

.form-control-has-validation.is-valid {
  border-color: #81c784;
}

.form-validation {
  color: #e57373;
  margin-top: 0.5rem;
  display: block;
}

.validation-icon {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 1.25rem;
}

/* Date picker styling */
.datepicker {
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  padding: 10px;
  display: none;
  z-index: 10;
  border-radius: 8px;
}

.datepicker-header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: #f6f7f9;
  border-bottom: 1px solid #ccc;
}

.datepicker-table {
  width: 100%;
  border-collapse: collapse;
}

.datepicker th,
.datepicker td {
  text-align: center;
  padding: 5px;
  cursor: pointer;
}

.datepicker th {
  background: #f0f0f0;
}

.datepicker td:hover {
  background: #e0e0e0;
}

.datepicker-prev,
.datepicker-next {
  cursor: pointer;
}

.webstra-background-home {
  background-image: url("/images/background-home.jpg");background-image:image-set(url(/bilder/background-home-92e49ebe-1920.avif) type("image/avif") 1x, url(/bilder/background-home-92e49ebe-1920.webp) type("image/webp") 1x);
  background-size: cover;
  background-position: right top;
}

@media (max-width: 767px) {
  .webstra-background-home {
    background-image: none;
    background-color: #e1f3fd;
  }
}

.bg-webstra-video {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bg-webstra-video video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  /* Größe wie bisher (Video in Originalgröße, mindestens so groß wie der Abschnitt), aber fest statt aus der Datei:
     Die Seite ist sofort sichtbar, sonst sprang das Video, sobald Vorschaubild oder Video geladen waren. video.mp4 hat
     1280 × 720 Bildpunkte mit Seitenverhältnis 16:15 je Bildpunkt, angezeigt also 1365,33 × 720 (256:135). Bei einem
     anderen Video die Maße anpassen (auch images/video-poster.jpg, das erste Bild in Anzeigegröße). */
  width: max(1365.33px, 100%);
  aspect-ratio: 256 / 135;
  object-fit: cover;
  z-index: -2;
  transform: translate(-50%, -50%);
  background-size: cover;
}

.bg-webstra-video .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* Semi-transparent black overlay */
  z-index: -1;
}

.bg-webstra-video .container {
  position: relative;
  z-index: 1;
}

/* Custom styles for the multi-select dropdown */
.dropdown {
  position: relative;
}
.dropdown .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f7f9;
  min-width: 100%;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
  padding: 0.5rem;
  z-index: 1000;
  border-radius: 8px;
}
.dropdown.show .dropdown-content {
  display: block;
}
.dropdown .dropdown-item {
  display: block;
  padding: 0.5rem;
  color: #1e306e;
  cursor: pointer;
}
.dropdown .dropdown-item:hover {
  background-color: #e9ecef;
}
.dropdown .dropdown-item input[type="checkbox"] {
  margin-right: 0.5rem;
}

/* Adjust the dropdown button to match form-control */
#wunschtagDropdown {
  display: block;
  width: 100%;
  padding: 0.9375rem 2.5rem 0.9375rem 1.1875rem;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.225;
  color: #1e306e;
  background-color: #f6f7f9;
  background-clip: padding-box;
  border: 1px solid #f6f7f9;
  border-radius: 8px;
  text-align: left;
  position: relative;
  overflow: hidden;
  /* Ensure consistent width */
  max-width: 100%;
  flex-shrink: 0;
  padding-right: 70px !important;
}

#contact-1-time-of-day {
  padding-right: 70px !important;
}

#wunschtagDropdown:focus {
  color: #1e306e;
  background-color: #fff;
  border-color: #bce0f7;
  outline: 0;
  box-shadow: none;
}
#selected-days {
  display: block;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.form-control-wrap {
  position: relative;
}

.dropdown-icon {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #bce0f7;
  transition: right 0.3s;
}

.validation-icon {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: none;
  color: #81c784; /* Green color */
}

.form-control.is-valid ~ .validation-icon {
  display: block;
}

.form-control.is-valid ~ .dropdown-icon {
  right: 2.5rem;
}

/* Ensure the button doesn't expand and affect other elements */
.d-lg-flex .form-group {
  flex: 1 1 0;
  max-width: 100%;
}

/* Prevent the button from expanding when content changes */
#wunschtagDropdown {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Validation States */
#wunschtagDropdown.is-valid {
  border-color: #198754; /* Green border for valid */
}

#wunschtagDropdown.has-error {
  border-color: #dc3545; /* Red border for invalid */
}

/* Adjust Dropdown Icon Position when Validation Icon is Visible */
#wunschtagDropdown.is-valid ~ .dropdown-icon,
#wunschtagDropdown.has-error ~ .dropdown-icon {
  right: 2.5rem; /* Move dropdown icon to the left to make space for the validation icon */
}

/* Erster Moment: Die Seite steht sofort da, die Skripte des Templates laufen erst nach window.load
   (public/components/base/script.js). Bis dahin (html ohne .components-ready) sehen Komponenten, die ein Skript
   aufbaut, schon so aus wie danach, damit nichts springt. */

/* Akkordeon: geschlossen wie nach dem Start (script.js setzt dann display: none an die Inhalte) */
html:not(.components-ready) .accordion-item:not(.active) > .accordion-body {
  display: none;
}

/* Owl Carousel blendet sich bis .owl-loaded aus. Bis dahin die ersten Bilder nebeneinander wie danach: Abstand 30px
   wie in script.js, Anzahl aus data-items (bis 575px), data-sm-items (ab 576px) und data-md-items (ab 768px) wie
   auf den Seiten (1, 2, 3). Andere Anzahlen hier ergänzen. */
html:not(.components-ready) .owl-carousel:not(.owl-loaded) {
  --owl-n: 1;
  --owl-punkte-abstand: 1.875rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 30px * (var(--owl-n) - 1)) / var(--owl-n));
  column-gap: 30px;
  align-items: start;
  overflow: hidden;
}

/* Danach steckt jedes Bild allein in einem .owl-item, Abstände für Geschwister (.image + .image) gelten dort nicht */
html:not(.components-ready) .owl-carousel:not(.owl-loaded) > * + * {
  margin-top: 0;
}

/* Platz für die Punkte, die Owl darunter setzt, wenn es mehr Bilder als sichtbare gibt (wie .owl-dots in
   owl.carousel.css: Abstand oben, 10px Punkte, margin-bottom -1.75rem) */
html:not(.components-ready) .owl-carousel[data-owl*='"dots":true']:not(.owl-loaded):has(> :nth-child(2)) {
  padding-bottom: calc(var(--owl-punkte-abstand) + 10px + 1.75rem);
  margin-bottom: -1.75rem;
}

@media (min-width: 576px) {
  html:not(.components-ready) .owl-carousel[data-sm-items="2"]:not(.owl-loaded) {
    --owl-n: 2;
  }
  html:not(.components-ready) .owl-carousel[data-sm-items="2"]:not(.owl-loaded):not(:has(> :nth-child(3))) {
    padding-bottom: 0;
    margin-bottom: 0;
  }
}

@media (min-width: 768px) {
  html:not(.components-ready) .owl-carousel[data-md-items="3"]:not(.owl-loaded) {
    --owl-n: 3;
  }
  html:not(.components-ready) .owl-carousel[data-md-items="3"]:not(.owl-loaded):not(:has(> :nth-child(4))) {
    padding-bottom: 0;
    margin-bottom: 0;
  }
}

@media (min-width: 992px) {
  html:not(.components-ready) .owl-carousel:not(.owl-loaded) {
    --owl-punkte-abstand: 2.625rem;
  }
}

@media (min-width: 1600px) {
  html:not(.components-ready) .owl-carousel:not(.owl-loaded) {
    --owl-punkte-abstand: 3.75rem;
  }
}