/* --- Bookingform (nahtlos, 800px) --- */
.bookingform-outer{
  width:100%;
  display:flex;
  justify-content:center;
  margin:18px 0 0 0;

}
.bookingform{
  width:800px;
  max-width:100%;
  background:#f5f5f5;
  border:1.5px solid #7a7a7a;
  border-radius:9999px;     /* Außen: links/rechts rund */
  overflow:hidden;          /* schneidet Kinder sauber */
  box-sizing:border-box;
  padding:0;                /* kein Innenabstand */
    margin-bottom: 50px;
}
.bookingform .bf-inner{
  display:flex;
  width:100%;
  height:44px;              /* Leistenhöhe */
}

/* Basestyle Inputs/Select */
.bookingform .bf-input,
.bookingform .bf-select{
  height:100%;
  border:0;
  margin:0;
  padding:0 14px;
  background:#fff;
  color:#333;
  font:400 1rem/1.2 inherit;
  outline:none;
  border-radius:0;          /* eckig als Standard */
  box-sizing:border-box;
}

/* Anreise → Abreise (links: rund) */
.bookingform .bf-date{
  flex:1 1 auto;
  border-right:1px solid #cfcfcf;  /* feine Trennlinie */
  border-radius:9999px 0 0 9999px; /* nur links rund */
}
.bookingform .bf-date::placeholder{ color:#9aa0a6; }

/* Personen (mittig: eckig) */
.bookingform .bf-select{
  flex:0 0 160px;
  appearance:none;                 /* saubere Optik */
  border-right:1px solid #cfcfcf;  /* feine Trennlinie */
  background:#fff;
}

/* Button (rechts: rund) */
.bookingform .bf-btn{
  flex:0 0 auto;
  padding:0 22px;
  border:0;
  background:#6b6f76;
  color:#fff;
  font-weight:600;
  font-size:1rem;
  cursor:pointer;
  border-radius:0 9999px 9999px 0; /* nur rechts rund */
  transition:background .15s;
}
.bookingform .bf-btn:hover{ background:#4d5055; }

/* Fokus-Feedback (grautöne) */
.bookingform .bf-input:focus,
.bookingform .bf-select:focus{
  box-shadow: inset 0 0 0 1.5px #7a7a7a;
}

/* Responsiv: stapeln ohne Lücken, mit feinen Linien */
@media (max-width:900px){
  .bookingform{ border-radius:0; }
  .bookingform .bf-inner{ flex-direction:column; height:auto; }
  .bookingform .bf-date,
  .bookingform .bf-select{
    width:100%;
    border-right:0;
    border-bottom:1px solid #cfcfcf;
    border-radius:0; /* mobil eckig */
  }
  .bookingform .bf-btn{
    width:100%;
    border-radius:0;
  }
}


/* Datumsfeld schmaler + 1-Zeilen-Layout bis Handybreite */
.bookingform .bf-inner {
  display: flex;
  width: 100%;
  height: 44px;
}

.bookingform .bf-date {                 /* nur links abgerundet */
  flex: 1 1 360px;                      /* Standardbreite */
  min-width: 220px;                     /* nicht zu klein */
  border-right: 1px solid #cfcfcf;
  border-radius: 9999px 0 0 9999px;
}

.bookingform .bf-select {               /* Mitte, eckig */
  flex: 0 1 180px;
  min-width: 120px;
  border-right: 1px solid #cfcfcf;
}

.bookingform .bf-btn {                  /* rechts abgerundet */
  flex: 0 0 180px;
  min-width: 140px;
  border-radius: 0 9999px 9999px 0;
}

/* Tablets: noch etwas kompakter */
@media (max-width: 900px) {
  .bookingform { border-radius: 9999px; }             /* Pillenform beibehalten */
  .bookingform .bf-inner { flex-direction: row; }     /* NICHT stapeln */
  .bookingform .bf-date   { flex-basis: 50%;  min-width: 180px; }
  .bookingform .bf-select { flex-basis: 25%;  min-width: 120px; }
  .bookingform .bf-btn    { flex-basis: 25%;  min-width: 120px; }
}

/* Phones: noch schmaler, weiterhin eine Zeile */
@media (max-width: 600px) {
  .bookingform .bf-date   { flex-basis: 45%; min-width: 150px; }
  .bookingform .bf-select { flex-basis: 28%; min-width: 100px; }
  .bookingform .bf-btn    { flex-basis: 27%; min-width: 100px; }
}

/* Override: Button breiter, Datum schmaler */
.bookingform .bf-date {
  flex: 1 1 260px;      /* vorher 360px -> schmaler */
  min-width: 130px;
}

.bookingform .bf-select {
  flex: 0 1 160px;
  min-width: 110px;
}

.bookingform .bf-btn {
  flex: 0 0 220px;      /* Button breiter */
  min-width: 150px;
}

/* Tablet */
@media (max-width: 900px) {
  .bookingform .bf-date   { flex-basis: 42%; min-width: 130px; }
  .bookingform .bf-select { flex-basis: 23%; min-width: 105px; }
  .bookingform .bf-btn    { flex-basis: 35%; min-width: 150px; }
}

/* Phone */
@media (max-width: 600px) {
  .bookingform .bf-date   { flex-basis: 38%; min-width: 120px; }
  .bookingform .bf-select { flex-basis: 24%; min-width: 95px; }
  .bookingform .bf-btn    { flex-basis: 38%; min-width: 140px; }
}