/********************************************************
 * YOOsite Forms – Fallback (wie Reviews, 2 Spalten, CSS-only)
 ********************************************************/

/* Formular-Container als Grid */
.yoosite-form{
  display:block;
  gap:12px;
  padding:16px 18px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  margin-bottom:18px;
  width:100%;
  box-sizing:border-box;
  font-size:0px;
}
/* Jedes Feld ist ein Grid-Item */
.yoosite-form p{ margin:0; }

/* Labels */
.yoosite-form label{
  display:block;
  margin: 0px 0px 5px 0px;
  font-weight:400;
  font-size:17px;
}


/* Inputs/Textareas/Selects – 100% Breite, ~30% höher */
.yoosite-form input[type="text"],
.yoosite-form input[type="email"],
.yoosite-form input[type="number"],
.yoosite-form input[type="tel"],
.yoosite-form input[type="url"],
.yoosite-form input[type="search"],
.yoosite-form select,
.yoosite-form textarea,
.yoosite-form .uk-input,
.yoosite-form .uk-select,
.yoosite-form .uk-textarea{
  display:block;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box;
  padding:14px 14px !important;
  border:1px solid #d1d5db !important;
  border-radius:10px !important;
  background:#fff !important;
  font-size:16px;
  color:#111827;
  transition:border-color .2s, box-shadow .2s;
  margin: 5px 0px 20px 0px;
}
.yoosite-form textarea,
.yoosite-form .uk-textarea{ min-height:260px; resize:vertical; }

/* Fokus-Effekt */
.yoosite-form input:focus,
.yoosite-form select:focus,
.yoosite-form textarea:focus,
.yoosite-form .uk-input:focus,
.yoosite-form .uk-select:focus,
.yoosite-form .uk-textarea:focus{
  border-color:#60a5fa !important;
  box-shadow:0 0 0 3px rgba(59,130,246,.15);
  outline:none;
}

/* Submit-Button  */
.yoosite-form-submit .yoosite-button,
.yoosite-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:10px;
  border:1px solid #2563eb;
  background:#2563eb;
  color:#fff;
  font-weight:600;
  font-size:15px;
  cursor:pointer;
  transition:filter .15s ease, transform .02s ease;
  width:200px;              /* feste, harmonische Breite */
  box-sizing:border-box;
  justify-self:start;
}
.yoosite-form-submit .yoosite-button:hover,
.yoosite-button:hover{ filter:brightness(1.05); }
.yoosite-form-submit .yoosite-button:active,
.yoosite-button:active{ transform:translateY(1px); }

/********************************************************
 * Select Box CSS – Logik unverändert, nur Optik angeglichen
 ********************************************************/
.select-wrapper{ display:block; width:100%; position:relative; z-index:1; overflow:visible; }

.select-toggle{
  display:flex; justify-content:space-between; align-items:center; cursor:pointer;
  padding:10px 12px; background:#f9fafb; border:1px solid #d1d5db; border-radius:10px;
  user-select:none; margin-bottom:10px; font-size:16px; transition:border-color .2s, box-shadow .2s;
}
.select-toggle:focus-within{ border-color:#60a5fa; box-shadow:0 0 0 3px rgba(59,130,246,.15); }
.select-icon{ transition:transform .3s ease; }
.select-icon.open{ transform:rotate(180deg); }

.select-box{
  display:none; margin-top:5px; position:absolute; z-index:9999; background:#fff;
  width:100%; border:1px solid #d1d5db; border-radius:10px; font-size:16px; box-shadow:0 2px 6px rgba(0,0,0,.1);
}
.select-box.visible{ display:block; }
.select-box select{
  display:block; width:100%; min-height:100px; max-height:260px; overflow-y:auto;
  padding:8px 12px; font-size:16px; background:#fff; border:none; outline:none;
}

/* Select-Dropdown: inneren UIkit-Rahmen abschalten */
.yoosite-form .select-box select,
.yoosite-form .select-box .uk-select{
  border: none !important;
  box-shadow: none !important;
  outline: none;
  border-radius: 0 !important;   /* damit nur der äußere Radius wirkt */
  background: #fff;               /* volle Abdeckung */
}

/* falls Fokus-Outline vom Browser durchscheint */
.yoosite-form .select-box{ 
  overflow: hidden;               /* clippt evtl. Fokusrahmen innen */
}


/* Mobile-Multi-Select-Fix */
@media (max-width:768px){
  select[data-original-type="multiple"]:not([multiple]){
    padding:10px; font-size:16px; line-height:1.4;
    height:auto !important; min-height:auto !important; box-shadow:none; appearance:none;
  }
}

/********************************************************
 * Range-Slider Anzeige – CSS-only, ohne JavaScript
 ********************************************************/


.yoorange-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  font-size: 14px;
  color: #374151;
}

.yoorange-meta span {
  flex: 1;
  text-align: center;
}

.yoorange-meta span:first-child {
  text-align: left;
}

.yoorange-meta span:last-child {
  text-align: right;
}

.yoorange-meta span#current {
  font-weight: 600;
  color: #111827;
}