/* Buttons */
.button-next,
.button-previous {
  border-radius: 15px;
  color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 16px;
  margin: 16px 0;
  min-width: 80px;
  padding: 12px;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}

.button-next {
  background-color: #c60b1e;
  border: 5px solid #c60b1e;
}

.button-previous {
  background-color: #c7c7c7;
  border: 5px solid #c7c7c7;
}

.button-previous:hover,
.button-next:hover {
  background-color: #ffffff;
  color: #c60b1e;
}

.button-box {
  display: flex;
  justify-content: space-between;
  width: 35%; /*Buttons nehmen auf grossem Bildschirm nur 35% der Breite ein*/
}

@media (max-width: 767px) {
  .button-box {
    width: 100%; /*Buttons nehmen auf kleinerem Bildschirm die volle Breite ein*/
  }
}

/* Radio Button Styles */
.radio-and-label {
  align-items: center;
  display: flex;
}

input[type="radio"] {
  margin: 10px 16px;
  transform: scale(1.7);
  vertical-align: middle;
}

/* Input-Feld Styles */
input[type="number"]:focus,
input[type="text"]:focus,
input[type="date"]:focus {
  border-color: #ffcccc;
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.5);
}

input[type="tel"],
input[type="email"],
input[type="text"],
input[type="number"],
input[type="date"],
textarea {
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  font-size: 16px;
  outline: none;
  padding: 12px;
  width: 100%;
}

input[type="checkbox"] {
  margin: 8px 16px;
  transform: scale(1.5);
}

input[type="number"] .plz {
  width: 25%;
}

input[type="text"] .place {
  width: 75%;
}

textarea {
  border-radius: 6.4px;
  border: 1px solid #ccc;
  min-height: 240px;
  padding: 12.8px;
  width: 100%;
}

/* Das Eingabefeld von PLZ soll kleiner sein als das von Ort */
.input-group {
  display: flex;
  justify-content: space-between;
}

.input-group .plz {
  width: 20%;
  margin-right: 10px;
}

.input-group .place {
  width: 75%;
}

@media (max-width: 768px) {
  .input-group .plz,
  .input-group .place {
    width: 100%;
    margin-bottom: 15px;
  }
}

/* Form-Group (Eingabefeld + Label) */
.form-group {
  align-items: center;
  display: flex;
  margin-bottom: 16px;
}

.form-group label {
  margin-right: 16px;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .form-group {
    align-items: flex-start;
    flex-direction: column;
  }
  .form-group label {
    margin-bottom: 8px;
  }
}

@media (min-width: 768px) {
  .form-group {
    align-items: center;
    flex-direction: row;
  }
  .form-group label {
    margin-right: 16px;
  }
}

/* Slider + Beschriftung */
.hotelstarslider {
  accent-color: red;
}

.slider-container,
.range-container {
  margin-bottom: 32px;
  position: relative;
  width: 60%;
}

@media (max-width: 768px) {
  .slider-container {
    width: 100%;
  }
}

.slider-container input[type="range"] {
  width: 100%;
}

.slider-container .star-labels,
.labels-top,
.labels-bottom {
  display: flex;
  justify-content: space-between;
}

.slider-container .star-labels span {
  color: #000000;
  font-size: 16px;
  position: relative;
  top: 0px;
}

.slider-container .star-labels span:before {
  content: "";
  left: 50%;
  position: absolute;
  top: -8px;
  transform: translateX(-50%);
}

/* Budget Slider (ChatGPT) */
.double-slider-box {
  width: 80%;
}

@media (max-width: 768px) {
  .double-slider-box {
    width: 100%;
  }
}

.range-slider {
  background-color: #d3d3d3;
  border-radius: 8px;
  height: 9.6px;
  margin: 24px 0;
  position: relative;
}

.slider-track {
  background-color: red;
  border-radius: 8px;
  height: 100%;
  position: absolute;
}

.range-slider input {
  appearance: none;
  background: none;
  position: absolute;
  pointer-events: none;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

.range-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  background: red;
  border: 8px solid red;
  border-radius: 50%;
  box-shadow: 2px 9px -2px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  height: 24px;
  width: 24px;
  pointer-events: auto;
  vertical-align: middle;
}

.range-slider input[type="range"]::-moz-range-thumb {
  background: red;
  border: 8px solid red;
  border-radius: 50%;
  box-shadow: 2px 9px -2px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  height: 24px;
  -moz-appearance: none;
  pointer-events: auto;
  width: 24px;
  vertical-align: middle;
}

.input-box,
.input-box-range-label {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

/* Auf kleinerem Screen werden die Eingabeboxen des Budgets untereinander dargestellt */
@media screen and (max-width: 780px) {
  .input-box {
    display: block;
    justify-content: space-between;
    width: 100%;
  }
}
.input-wrap {
  align-items: center;
  display: flex;
}
.input-field {
  background-clip: padding-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 8px;
  margin-left: 32px;
  min-width: 0;
  width: 50%;
}
.input-field {
  outline: none;
}
.input-currency {
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  border-radius: 0 4px 4px 0;
  margin: 0 32px 0 -16px;
  min-width: 40px;
  padding: 12px 16px;
  text-align: center;
}