/*** KOMBOBOX STYLES ***/

.js-select.combo *,
.js-select.combo *::before,
.js-select.combo *::after {
  box-sizing: border-box;
}

.js-select.combo {
  display: block;
  /*max-width: 400px;*/
  position: relative;
}
.js-select.combo::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 40%;

    width: 12px;
    height: 12px;

    border-right: 1px solid var(--valid-input-border-color);
    border-bottom: 1px solid var(--valid-input-border-color);

    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
}

.js-select .combo-input[data-value=""] {
  color: #363636B3 !important;
}
.js-select .combo-input[aria-invalid="true"]{
    border: 2px solid var(--invalid-input-border-color) !important;
}
.js-select .combo-input {
    display: flex;
    align-items: center;
    width: 100%;
    border-radius: 4px !important;
    border: 1px solid var(--valid-input-border-color); /* #363636 */
    background: #fff;

    color: var(--dark-gray) !important; /* #363636 */
    font-size: 17px !important;
    gap: 12px;
    min-height: 40px !important;

    font-style: normal;
    font-weight: 300;
    line-height: 24px !important;
    /* font-weight: 300; */
    /*line-height: 24px !important;*/
    cursor: pointer;
}


.js-select .combo-input:focus {
  /** focus: no changes */
  /** border: 2px solid var(--invalid-input-border-color) !important; **/
/* Erhöhte Spezifität durch das Anhängen von :focus an die genaue CSS-Kette */
    /*border: 2px solid var(--dark-blue) !important;*/
    /*outline: none;*/
    appearance: none;
    -webkit-appearance: none;
    outline: 2px solid var(--dark-blue);
}

.js-select .combo-label {
  display: block;
  font-weight: 100;
  margin-bottom: 0.25em;
  font-size: 1.2em;
}



.option-placeholder {
    display: none;
}











/* AUSGEKLAPPTE EINTRAEGE (Jetzt identisch mit COMBO1) */
.js-select .combo-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  margin: 0 0 0 0; /* Abstand nach oben wie Combo1 */
  padding: 0;
  list-style: none;
  background: white;
  border: 1px solid var(--lighter-gray);
  border-radius: 4px;
  max-height: 250px; /* Begrenzung aus Combo1 (vorher 300px) */
  overflow-y: auto;
  z-index: 100;
  display: none;
}

/* EINZELNE OPTIONEN */
.js-select .combo-option {
  position: relative; /* Wichtig für die Positionierung des Hakens */
  padding: 8px 35px 8px 8px; /* Exakte Abstände aus Combo1 (Rechts Platz für Haken) */
  cursor: pointer;
  color: var(--black);
  font-size: 16px; /* Passt sich dem kompakteren Combo1-Stil an */
}

/* HOVER & CURRENT STATE (Hellgrauer Hintergrund aus Combo1) */
.js-select .combo-option:hover{
  background-color: var(--gray);
}
.js-select .combo-option.option-current {
  /*background-color: var(--lighter-gray);
  color: var(--black);*/
  /*border: 2px solid var(--dark-blue) !important;*/
  appearance: none;
  -webkit-appearance: none;
  outline: 2px solid var(--dark-blue) !important;
  outline-offset: -2px;
  /*outline: none;*/
}

/* GEWÄHLTER ZUSTAND (ARIA) */
.js-select .combo-option[aria-selected="true"] {
  /* Behält Textfarbe und Layout bei */
}

/* DER AUSWAHL-HAKEN (Exakter Nachbau aus COMBO1) */
.js-select .combo-option[aria-selected="true"]::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  width: 8px;
  height: 16px;
  border-right: 1px solid currentColor; /* Nutzt Textfarbe, flexibler als #000 */
  border-bottom: 1px solid currentColor;
  transform: translateY(-60%) rotate(45deg); /* Exakte Neigung/Höhe aus Combo1 */
}

/* DISPLAY STEUERUNG (Bleibt wie von Ihrem Skript benötigt) */
.selectOpen .combo-menu {
  display: block;
}
.selectOpen .combo-input {
  /* Falls der Input bei offener Liste unten eckig werden soll, 
     diese Zeile auskommentieren, da Combo1 den Abstand (margin: 4px) nutzt */
  border-radius: 0 0 4px 4px;
}

.js-select [aria-expanded="true"]{
  border-radius: 4px 4px 0 0 !important;
}

.combo-is-empty{
  opacity: 0.2;
  cursor:not-allowed !important;
}

/* hidden focus on disable input */

.combo:has(.combo-is-empty) > *:focus {
    outline: none !important;
    box-shadow: none !important;
}

.combo:has(.combo-is-empty[aria-expanded="true"]) > .combo-menu {
    visibility: hidden !important;
}