:root{
    --search-h: 54px;
    --search-radius: 22px;
    --gap: 12px;
  }
  


/* ===== Compact mobile card ===== */
@media (max-width: 980px){
  :root{
    --search-h: 48px;       /* kleiner */
    --gap: 10px;
  }

  .search-bar{
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
    box-shadow: 0 6px 22px rgba(0,0,0,.06);
  }

  .search-item label{
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: #6b7280;
  }




  .search-item input,
  .search-item select{
    height: var(--search-h);
    border-radius: 12px;
    padding: 0 12px;
    font-size: 16px; /* iOS Zoom vermeiden */
  }

  /* Date-Inputs visuell als 'Chips' */
  #checkin, #checkout{
    text-align: center;
    letter-spacing: .2px;
    font-variant-numeric: tabular-nums;
  }

  /* Button: voller Breite, etwas flacher */
  .search-btn{
    height: 52px;
    border-radius: 10px;
    font-size: 17px;
  }

  /* Nights-Pill näher an den Button */
  .form-hints{ margin-top: -6px; }
  .nights-pill{ height: 26px; font-size: .8rem; padding: 0 8px; }
}

/* iOS Safari – Remove default inner shadows on inputs */
.search-item input,
.search-item select{
  -webkit-appearance: none;
  appearance: none;
}


  .flatpickr-calendar{ z-index: 9999; }
  /* Container: 2 Zeilen (Labels | Controls) */
.search-bar{
  display:grid;
  grid-template-columns: 1.3fr 1px 1fr 1fr 1px 1.1fr auto;
  grid-template-rows: auto var(--search-h);
    gap: 8px var(--gap);
    padding: 12px;
    background:#fff;
    border-radius: 22px;
    margin: 0 auto;
    text-align:left;
  }
  
  /* Divider nimmt beide Zeilen ein */
  .divider{ grid-row:1 / span 2; }
  
  /* Feld: Label in Zeile 1, Control in Zeile 2 */
  .search-item{
    display:contents; /* erlaubt, Label & Input separat in die zwei Zeilen zu legen */
  }
  
  /* Label */
  .search-item label{
    grid-row: 1;
    align-self:end;
    font-size:.72rem; font-weight:600; color:#6b7280;
    padding: 0 2px;
  }
  
  /* Input/Select */
  .search-item input,
  .search-item select{
    grid-row: 2;
    height: var(--search-h);
    border:1px solid #e9e9e9;
    background:#f7f7f7;
    border-radius: 10px;
    padding: 0 14px;
    font-size:.95rem;
    color:#111827;
    outline:0; width:100%;
    transition: background .15s, border-color .15s, box-shadow .15s;
  }
  .search-item input:focus,
  .search-item select:focus{
    background:#fff;
    border-color:#e3b556;
    box-shadow:0 0 0 4px rgba(227,181,86,.18);
  }
  
  /* Button sitzt nur in Zeile 2 → gleiche Unterkante wie die Inputs */
  .search-btn{
    grid-row: 2;
    align-self: stretch;                   /* exakt gleiche Höhe wie var(--search-h) */
    height: var(--search-h);
    width: var(--search-h);
    border-radius: 16px;
    display:grid; place-items:center;
    border:0; cursor:pointer;
    background: var(--main-highlight-color);
    color:#fff;
    transition: transform .06s, filter .2s, background .2s;
  }

  .search-btn:hover{ filter: saturate(110%); }
  .search-btn:active{ transform: translateY(1px); }
  .search-btn[disabled],
  .search-btn[aria-disabled="true"] {
    pointer-events: none;
    opacity: .5;
  }
  
  /* Guests */
  .guests-dropdown-wrapper{ position:relative; }
  #guests-input{ cursor:pointer; }
  
  .guests-dropdown.show{ display:block !important; } /* <- gewinnt immer */
  
  .guest-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .counter{ display:flex; align-items:center; gap:10px; }
  .counter button{
    width:34px; height:34px; border-radius: 12px;
    border:1px solid #eee; background:#f7f7f7;
    font-size:18px; line-height:1; cursor:pointer;
  }
  .counter button:active{ transform: translateY(1px); }
  .counter .count{ min-width:24px; text-align:center; font-variant-numeric: tabular-nums; }
  
  .close-dropdown{
    width:100%; height:44px; border-radius:12px; border:none;
    background: var(--main-highlight-color); color:#fff; font-weight:600; cursor:pointer;
  }
  
  /* Hinweise */
  .form-hints{ grid-column: 1 / 2;
    grid-row: 3; }
  .nights-pill{
    display:inline-flex; align-items:center; height:28px; padding:0 10px;
    border-radius:999px; font-size:.85rem; font-weight:600;
    background:#f3f4f6; color:#111827;
  }
  #nights-pill[hidden], #error-inline[hidden]{ display:none !important; }
  
  .hint.error{
    background: rgba(227,181,86,.12);
    color: #b7791f;
    border:1px solid rgba(227,181,86,.6);
    padding:8px 10px; border-radius:10px; font-size:.9rem;
  }
  
  /* Invalid-Styling – wird NUR vom JS gesetzt */
  .search-bar .lg-invalid{
    border-color:#f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245,158,11,.18) !important;
  }
  .search-bar label.invalid{ color:#f59e0b; }
  
  /* Flatpickr Feinschliff (kompakt) */
  .fp-custom-title{ text-align:left; font-size:10px; font-weight:500; color:#374151; padding:.5em 1.25em .25em; }
  .flatpickr-months{ display:flex; align-items:center; justify-content:flex-start; padding:0 1em; }
  .flatpickr-current-month{ order:1; margin-right:auto; font-size:.9rem; font-weight:600; }
  .flatpickr-prev-month{ order:2; margin-left:.5em; }
  .flatpickr-next-month{ order:3; margin-left:.25em; }
  .flatpickr-day.inRange{ background: rgba(227,181,86,.2) !important; border:0 !important; }
  .flatpickr-day.startRange,
  .flatpickr-day.selected{ background: var(--main-highlight-color) !important; color:#fff !important; }
  


  .search-bar, .search-item, .search-item label { text-align: left !important; }


/* Der Anker liegt in Reihe 2 (wo sonst die Inputs sind) */
.guests-anchor{
  grid-row: 2;
  position: relative;              /* Bezug für das absolute Dropdown */
}

/* Input füllt die Breite innerhalb des Ankers */
.guests-anchor > #guests-input{
  width: 100%;
  height: var(--search-h);
  border:1px solid #e9e9e9;
  background:#f7f7f7;
  border-radius:14px;
  padding:0 14px;
}

/* Dropdown relativ zum Anker positionieren */
.guests-dropdown{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 300px;
  background:#fff;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  padding: 14px;
  z-index: 9998;
  display: none;
}
  
  /* Dropdown sicher oben drüber */
  .guests-dropdown{
    z-index: 9999;
  }
  
  /* falls nicht schon gesetzt */
  .search-bar{ overflow: visible; }
  
  /* Sicherheit: alles linksbündig */
  .search-bar, .search-item, .search-item label{
    text-align: left !important;
  }
  
  /* Reset aller Browser/Global-Styles für invalid in der Search-Bar */
.search-bar input:invalid,
.search-bar select:invalid,
.search-bar input:required:invalid,
.search-bar select:required:invalid,
.search-bar input:user-invalid,
.search-bar select:user-invalid,
.search-bar input:-moz-ui-invalid,
.search-bar select:-moz-ui-invalid {
  border-color: #e9e9e9 !important;
  box-shadow: none !important;
  background: #f7f7f7 !important;
}

/* 1) Saubere Breitenberechnung nur innerhalb der Search-Bar */
.search-bar, .search-bar * { box-sizing: border-box; }

/* 2) Auf Mobile weg vom Grid -> simple Column-Layout.
      Kein Overflow der Karte. */
@media (max-width: 980px){
  .search-bar{
    display: flex;            /* statt grid */
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    overflow: hidden;         /* verhindert „Überstehen“ */
    border-radius: 22px;
  }

  .search-bar{ overflow:hidden; }                 /* Standard */
  .search-bar.guests-open{ overflow:visible !important; }  /* beim Öffnen */


  .divider{ display:none !important; }

  .search-item{ display:block; }
  .search-item label{ display:block; margin-bottom:8px; }

  .search-item input,
  .search-item select{
    width: 100%;
    height: 56px;
    border-radius: 16px;
  }

  /* der Submit-Button nimmt volle Breite */
  .search-btn{
    width: 100%;
    height: 56px;
    margin-top: 15px;
    border-radius: 16px;
    align-self: stretch;
  }

  /* Guests-Dropdown ist bei dir bereits fixed – overflow:hidden stört so nicht */
  .guests-dropdown{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: min(92vw, 420px);
    bottom: 24px;
    top: auto;
    z-index: 9999;
  }
}

/* Karte: softer Glassmorphism-Look */
.search-bar{
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  border: 1px solid rgba(255,255,255,.7);
}

/* Labels dezenter & klar */
.search-item label{
  font-weight: 700;
  letter-spacing: .02em;
  color: #6b7280;
}

/* Inputs: „Karten“-Feeling, klare Focus-Ringe */
.search-item input,
.search-item select{
  background: #f7f7f9;
  border: 1px solid #ececf2;
  border-radius: 16px;
  padding: 0 14px;
  transition: background .15s, box-shadow .2s, border-color .15s, transform .06s;
}
.search-item input:focus,
.search-item select:focus{
  background: #fff;
  border-color: #e3b556;
  box-shadow: 0 0 0 4px rgba(227,181,86,.18);
}
.hero-title{ position:relative; z-index: 10000; }
.hero-booking .search-bar{ position:relative; z-index: 2; }
/* Karte über die Headline legen */
.hero-booking .search-bar{
  position: relative;
  z-index: 20;
}

/* Headline soll keine Pointer-Events abfangen (mobile) */
@media (max-width: 980px){
  .hero-title,
  .hero-title *{
    pointer-events: none;     /* Taps gehen „durch“ zur Suchkarte */
  }
}

/* Button: „kräftig, aber soft“ */
.search-btn{
  font-size: 18px;
}
.search-btn:hover{ filter: saturate(108%); transform: translateY(-1px); }
.search-btn:active{ transform: translateY(0); }

/* Nights-Pill freundlicher */
.nights-pill{
  background: #f5efe0;
  color: #7a5a10;
  font-weight: 700;
}

/* Fehlhinweis weniger „Alarm“, mehr „Hint“ */
.hint.error{
  background: #fff7e6;
  border-color: #f3d49a;
  color: #8a6a20;
}

/* Optionale Mini-Icons in Inputs (nur Styling, kein HTML nötig) */
.search-item input#checkin{ background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23888"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>');
  background-repeat:no-repeat; background-position:14px center; padding-left:42px;
}
.search-item input#checkout{ background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23888"><path d="M21 12a9 9 0 1 1-9-9"/><polyline points="21 3 21 12 12 12"/></svg>');
  background-repeat:no-repeat; background-position:14px center; padding-left:42px;
}
.search-item select#destination{ background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23888"><path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 1 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>');
  background-repeat:no-repeat; background-position:14px center; padding-left:42px;
}