/* =========================
   home.css – CLEAN OVERRIDES
   Ziel: NUR Optik, keine Funktion
   ========================= */

/* Debug ggf. später löschen */
/*
body::before{
  content:"HOME.CSS GELADEN";
  position:fixed; top:10px; left:10px;
  z-index:99999; padding:6px 10px;
  border-radius:10px; background:#16a34a;
  color:#fff; font:700 14px/1 system-ui;
}
*/

/* Keine Top-Navigation auf der Startseite */
.header, .nav, .navlinks{
  display:none !important;
}

/* ---------- NUR: Info-Pills rechts untereinander ---------- */
/* WICHTIG: keine Änderungen an .heroInner / Text / Filter */
.badges{
  display:flex !important;
  flex-direction:column !important;    /* untereinander */
  align-items:flex-end !important;     /* rechts bündig */
  gap:8px !important;

  width:fit-content !important;        /* eigene Breite */
  margin-left:auto !important;         /* nach rechts schieben */
  margin-right:0 !important;

  /* keine wilden Abstände erzwingen */
  padding:0 !important;
}

.badges span{
  max-width:fit-content;
}

/* ---------- Labels (Anreise/Abreise/Personen) kompakt ---------- */
#homeFilter label{
  display:block;
  font-size:12px;
  font-weight:700;
  margin:0 0 4px;
  color:rgba(11,18,32,.75);
}

/* ---------- Villa wählen: Buttons in 1 Zeile ---------- */
#houseQuickBtns{
  display:flex !important;
  flex-direction:row !important;
  justify-content:center;
  gap:12px;
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:6px;
}

#houseQuickBtns .btn{
  width:auto !important;
  flex:0 0 auto;
  white-space:nowrap;
}
/* BADGES: zurück in 1 Zeile unter dem Text (kompakt) */
.badges{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:8px !important;

  width:auto !important;
  margin:6px 0 0 !important;
  padding:0 !important;
}

.badges span{
  max-width:none !important;
  padding:6px 10px !important;
  font-size:13px !important;
}
/* Filterzeile nivellieren: gleiche Höhe + gleiche Ausrichtung */
.availRow{
  align-items: end !important;   /* bleibt, aber wir geben allen gleiche Höhe */
  gap: 10px !important;
}

/* Einheitliche Komponentenhöhe */
:root{
  --hf-h: 40px;                  /* eine Höhe für alles */
}

/* Inputs */
.availRow input{
  height: var(--hf-h) !important;
  padding: 8px 10px !important;
  line-height: calc(var(--hf-h) - 2px) !important;
}

/* Button (egal ob <button> oder <a class="btn">) */
.availRow button,
.availRow .btn{
  height: var(--hf-h) !important;
  line-height: var(--hf-h) !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap;
}

/* Labels kompakt, damit nichts „drückt“ */
#homeFilter label{
  margin: 0 0 3px !important;
  line-height: 1.1 !important;
}
/* Filterzeile nivellieren: gleiche Höhe + gleiche Ausrichtung */
.availRow{
  align-items: end !important;   /* bleibt, aber wir geben allen gleiche Höhe */
  gap: 10px !important;
}

/* Einheitliche Komponentenhöhe */
:root{
  --hf-h: 40px;                  /* eine Höhe für alles */
}

/* Inputs */
.availRow input{
  height: var(--hf-h) !important;
  padding: 8px 10px !important;
  line-height: calc(var(--hf-h) - 2px) !important;
}

/* Button (egal ob <button> oder <a class="btn">) */
.availRow button,
.availRow .btn{
  height: var(--hf-h) !important;
  line-height: var(--hf-h) !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap;
}

/* Labels kompakt, damit nichts „drückt“ */
#homeFilter label{
  margin: 0 0 3px !important;
  line-height: 1.1 !important;
}
/* Filterzeile nivellieren: gleiche Höhe + gleiche Ausrichtung */
.availRow{
  align-items: end !important;   /* bleibt, aber wir geben allen gleiche Höhe */
  gap: 10px !important;
}

/* Einheitliche Komponentenhöhe */
:root{
  --hf-h: 40px;                  /* eine Höhe für alles */
}

/* Inputs */
.availRow input{
  height: var(--hf-h) !important;
  padding: 8px 10px !important;
  line-height: calc(var(--hf-h) - 2px) !important;
}

/* Button (egal ob <button> oder <a class="btn">) */
.availRow button,
.availRow .btn{
  height: var(--hf-h) !important;
  line-height: var(--hf-h) !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap;
}

/* Labels kompakt, damit nichts „drückt“ */
#homeFilter label{
  margin: 0 0 3px !important;
  line-height: 1.1 !important;
}
/* Filterzeile nivellieren: gleiche Höhe + gleiche Ausrichtung */
.availRow{
  align-items: end !important;   /* bleibt, aber wir geben allen gleiche Höhe */
  gap: 10px !important;
}

/* Einheitliche Komponentenhöhe */
:root{
  --hf-h: 40px;                  /* eine Höhe für alles */
}

/* Inputs */
.availRow input{
  height: var(--hf-h) !important;
  padding: 8px 10px !important;
  line-height: calc(var(--hf-h) - 2px) !important;
}

/* Button (egal ob <button> oder <a class="btn">) */
.availRow button,
.availRow .btn{
  height: var(--hf-h) !important;
  line-height: var(--hf-h) !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap;
}

/* Labels kompakt, damit nichts „drückt“ */
#homeFilter label{
  margin: 0 0 3px !important;
  line-height: 1.1 !important;
}
/* Filterzeile nivellieren: Inputs + Button exakt gleich hoch */
:root{ --hf-h: 40px; }

.availRow{
  gap:10px !important;
  align-items:end !important;
}

/* Inputs */
.availRow input{
  height: var(--hf-h) !important;
  padding: 8px 10px !important;
  line-height: calc(var(--hf-h) - 2px) !important;
}

/* Button (egal ob <button> oder <a class="btn"> oder submit) */
.availRow button,
.availRow .btn,
.availRow input[type="submit"]{
  height: var(--hf-h) !important;
  padding: 0 14px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
}

/* Labels kompakt */
#homeFilter label{
  margin: 0 0 3px !important;
  line-height: 1.1 !important;
}
/* S1: Beschriftung ÜBER dem Feld anzeigen */
.availRow .field{
  display:flex !important;
  flex-direction:column-reverse !important;  /* dreht Reihenfolge: fieldUnder nach oben */
  gap:6px !important;
}

/* Button-Feld nicht „umdrehen“ */
.availRow .btnField{
  display:block !important;
}

/* Beschriftung (Anreise/Abreise/Personen) schwarz und klar */
.availRow .fieldUnder{
  color:#000 !important;
  font-weight:700 !important;
  font-size:12px !important;
  line-height:1.1 !important;
}
/* Date-Feld Anzeige (TT.MM.JJJJ) groß schreiben */
#hf_from, #hf_to {
  text-transform: uppercase;
}

/* Chrome/Edge/Safari: Date-Editor-Teile ebenfalls groß */
#hf_from::-webkit-datetime-edit,
#hf_to::-webkit-datetime-edit,
#hf_from::-webkit-datetime-edit-text,
#hf_to::-webkit-datetime-edit-text,
#hf_from::-webkit-datetime-edit-day-field,
#hf_to::-webkit-datetime-edit-day-field,
#hf_from::-webkit-datetime-edit-month-field,
#hf_to::-webkit-datetime-edit-month-field,
#hf_from::-webkit-datetime-edit-year-field,
#hf_to::-webkit-datetime-edit-year-field {
  text-transform: uppercase;
}
/* ===== Verfügbarkeits-Badge im Hausbild ===== */

.houseCard__media{
  display:block !important;
  position:relative !important;
}

.houseCard__offer{
  position:absolute !important;
  top:12px !important;
  left:12px !important;
  display:inline-block !important;
  background:#ffffff !important;
  color:#1f7a1f !important;
  font-weight:600 !important;
  font-size:14px !important;
  padding:6px 12px !important;
  border-radius:999px !important;
  box-shadow:0 4px 12px rgba(0,0,0,.15) !important;
  z-index:9999 !important;
  pointer-events:none !important;
}

.houseCard__offer[aria-hidden="true"]{
  display:none !important;
}