/* Einheitliche Feldhöhe für alle einzeiligen Controls */
:root{ --ctrl-h: 52px; }

main{padding-bottom:20px}

/* Formular-Grundlayout */
form{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
}
.full{grid-column:1/-1}
label{display:block;font-weight:600;margin-bottom:6px}

/* Einzeilige Controls (gemeinsames Boxmodell) */
input,select{
  width:100%;
  height:var(--ctrl-h);
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  font:inherit;
  background:#fff;
  box-sizing:border-box;
  vertical-align:middle;
}
textarea{
  width:100%;
  padding:12px;
  border:1px solid var(--border);
  border-radius:8px;
  font:inherit;
  background:#fff;
  box-sizing:border-box;
  min-height:110px; height:auto; resize:vertical;
}

input:focus,select:focus,textarea:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(45,92,45,.2);
  outline:none;
}

/* Layout-Gruppen */
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:12px}
.rowDates{display:grid;grid-template-columns:1fr 1fr minmax(130px,220px);gap:12px}

/* Personen + Jugendliche + Kinder nebeneinander */
.rowPersons {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 Spalten: Personen | Jugendliche | Kinder */
  gap: 12px;
  align-items: end;
}

/* "davon" ausblenden */
.davonBox {
  display: contents; /* lässt die Felder direkt ins Grid fließen */
}

.davonTitle {
  display: none; /* "davon" ausblenden */
}

.davonBox .field {
  display: flex;
  flex-direction: column;
}

/* Hinweis unter Personen komplett entfernt — keine muted Styles nötig */

@media (min-width: 1200px){
  .row,.row3{ gap:16px }
  .rowDates{ grid-template-columns:1fr 1fr minmax(160px,220px); gap:16px }
  .rowPersons{ gap:16px }
}

/* Hinweise */
.err{
  color:#7a2f16;
  background:#fff7ed;
  border:1px solid #f4d0a0;
  padding:12px 14px;
  border-radius:10px;
  display:none;
  font-weight:600;
  margin-bottom:6px
}
.datehint{
  color:#7a2f16;
  background:#fff7ed;
  border:1px solid #f4d0a0;
  padding:10px 12px;
  border-radius:10px;
  display:none;
  font-weight:600;
  margin-top:6px
}

/* --- ÜBERNACHTUNGEN: jetzt 1:1 wie Inputs --- */
.nightsBox label{display:block;font-weight:600;margin-bottom:6px}

#nightsOut.nightsOutInput{
  -webkit-appearance:none;
  appearance:none;
  height:var(--ctrl-h) !important;
  padding:10px 12px !important;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
  box-sizing:border-box;
  font:inherit;
  font-weight:700;
  text-align:center;
  vertical-align:middle;
}

/* Checkboxen größer */
.checkrow{
  display:flex;
  align-items:flex-start;
  gap:14px;
  line-height:1.5;
  margin-top:10px
}
.checkrow label{flex:1}
.checkrow input[type="checkbox"]{
  transform:scale(1.5);
  transform-origin:top left;
  margin-top:2px;
  inline-size:18px;
  block-size:18px
}

/* Zimmer-UI */
.roomsCard{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px
}
.roomsHeader{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap
}
.roomsHeader .spacer{flex:1}
.roomsHeader .btnMini{
  padding:8px 12px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#f6f8f6;
  cursor:pointer
}
.roomsHeader .btnMini:disabled{
  opacity:.5;
  cursor:not-allowed
}
.roomGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px;
  margin-top:10px
}
.roomCard{
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px;
  background:#fdfdfd
}
.roomCard h4{
  margin:0 0 8px 0;
  font-size:1rem;
  color:#2e3a2e
}

/* --- Browser-Angleich für <input type="date"> --- */
input[type="date"]{ height:var(--ctrl-h); padding:10px 12px; }
input[type="date"]::-webkit-datetime-edit{ padding:0 2px }
input[type="date"]::-webkit-calendar-picker-indicator{ margin-right:6px }
@-moz-document url-prefix(){
  input[type="date"]{ height:var(--ctrl-h); padding:10px 12px; }
}