/* ==========================================================================
   Stralsund Homes – Buchungsleiste (Suche)
   Referenz-Implementierung zu DESIGN.md. Keine Abhängigkeiten.
   Alle Klassen mit Präfix .shb- , damit Theme-CSS nichts überschreibt.
   ========================================================================== */

.shb {
  --sh-green: #4c808e;
  --sh-green-50: #a6c0c7;
  --sh-green-25: #d2dfe2;
  --sh-green-dark: #2a4651;
  --teal-deep: #1e3640;
  --teal-tint: #e8eff1;
  --cream: #faf8f4;
  --sand: #f4e9d8;
  --white: #ffffff;
  --text-dark: #1a2a30;
  --text-mid: #4a6470;
  --text-disabled: #8a9ca3;
  --gold: #c9a84c;
  --border: rgba(74, 120, 134, 0.14);
  --border-md: rgba(74, 120, 134, 0.22);
  --control-border: #4a6470;
  --overlay: rgba(30, 54, 64, 0.55);
  --shadow-sticky: 0 -4px 24px rgba(0, 0, 0, 0.2);
  --font: boreal, "Fira Sans", system-ui, sans-serif;

  position: relative;
  font-family: var(--font);
  font-weight: 300;
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
}

/* Reset gegen Theme-CSS: alles innerhalb der Leiste ist eckig und erbt die Schrift */
.shb *,
.shb *::before,
.shb *::after { box-sizing: border-box; border-radius: 0; }
.shb button,
.shb select { font-family: inherit; margin: 0; -webkit-appearance: none; appearance: none; }
.shb button { cursor: pointer; }
.shb button:disabled { cursor: default; }
.shb [hidden] { display: none !important; }
.shb :focus-visible { outline: 2px solid var(--sh-green-dark); outline-offset: 2px; }

/* ---------- Gemeinsame Bausteine ---------- */

.shb-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mid);
}

.shb-value {
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 24px;
  border: 0;
  background: var(--sh-green-dark);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.shb-btn:hover { background: var(--teal-deep); transform: translateY(-1px); }
.shb-btn--block { width: 100%; min-height: 48px; }

.shb-link {
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--sh-green-dark);
  font-size: 14px;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.shb-icon-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--text-dark);
}
.shb-icon-btn:disabled { color: var(--text-disabled); }
.shb-icon-btn svg { width: 16px; height: 16px; }

/* ---------- Desktop-Leiste ---------- */

.shb-bar-wrap { position: relative; }

.shb-bar {
  display: flex;
  align-items: stretch;
  min-height: 76px;
  background: var(--white);
}

.shb-field {
  flex: 1 1 0;
  min-width: 0;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  text-align: left;
  background: var(--white);
  border: 0;
  border-right: 1px solid var(--border-md);
  color: inherit;
}
.shb-field--house { flex-grow: 1.3; cursor: pointer; }
.shb-field--last { border-right: 0; }
.shb-field.is-active { box-shadow: inset 0 -3px 0 var(--sh-green-dark); }

.shb-select {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-dark);
  cursor: pointer;
}

.shb-cta {
  flex: 0 0 auto;
  padding: 0 32px;
  border: 0;
  background: var(--sh-green-dark);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background-color 0.15s ease;
}
.shb-cta:hover { background: var(--teal-deep); }

/* ---------- Popover (Desktop) ---------- */

.shb-pop {
  position: absolute;
  top: calc(100% + 8px);
  z-index: 50;
  background: var(--white);
  border: 1px solid var(--border-md);
  padding: 24px;
}
.shb-pop--dates { width: 660px; display: flex; flex-direction: column; gap: 20px; }
.shb-pop--guests { width: 340px; padding-top: 8px; }
.shb-pop--guests .shb-btn--block { margin-top: 20px; }
.shb-pop--house { width: 280px; padding: 8px; }

.shb-house-list { display: flex; flex-direction: column; }
.shb-house-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  background: transparent;
  color: var(--text-dark);
  font-size: 15px;
  font-weight: 400;
  text-align: left;
}
.shb-house-opt:hover { background: var(--teal-tint); }
.shb-house-opt.is-selected { font-weight: 700; color: var(--sh-green-dark); }
.shb-house-opt svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--sh-green-dark); }

.shb-pop-foot {
  border-top: 1px solid var(--border-md);
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.shb-status { font-size: 15px; font-weight: 400; margin: 0; }
.shb-actions { display: flex; gap: 8px; align-items: center; }

/* ---------- Kalender ---------- */

.shb-cal { display: flex; gap: 32px; }
.shb-month { flex: 1 1 0; min-width: 0; }
.shb-month-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
}
.shb-month-title { font-size: 15px; font-weight: 700; }
.shb-month-spacer { width: 44px; height: 44px; }

.shb-weekdays,
.shb-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.shb-weekdays {
  padding: 8px 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-mid);
  text-align: center;
}
.shb-days { row-gap: 2px; }

.shb-day {
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--text-dark);
  font-size: 15px;
  font-weight: 300;
}
.shb-day:hover:not(:disabled):not(.is-edge) { background: var(--teal-tint); }
.shb-day:disabled { color: var(--text-disabled); text-decoration: line-through; }
.shb-day.is-range { background: var(--teal-tint); }
.shb-day.is-edge { background: var(--sh-green-dark); color: var(--white); font-weight: 700; }

/* ---------- Gäste ---------- */

.shb-guest {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.shb-guest-name { display: block; font-size: 15px; font-weight: 700; }
.shb-guest-hint { display: block; font-size: 13px; color: var(--text-mid); margin-top: 2px; }
.shb-stepper { display: flex; align-items: center; gap: 4px; }
.shb-step {
  width: 44px;
  height: 44px;
  border: 1px solid var(--control-border);
  background: var(--white);
  color: var(--text-dark);
  font-size: 20px;
  line-height: 1;
}
.shb-step:disabled { opacity: 0.4; }
.shb-count { width: 32px; text-align: center; font-size: 16px; font-weight: 700; }

/* ---------- Mobil: Sticky-Bar ---------- */

.shb-sticky {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 800;
  gap: 12px;
  align-items: stretch;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--teal-deep);
  color: var(--cream);
  box-shadow: var(--shadow-sticky);
}

.shb-sticky-summary {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
  padding: 6px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--cream);
  text-align: left;
}
.shb-sticky-top { display: block; font-size: 15px; font-weight: 700; }
.shb-sticky-sub { display: block; font-size: 13px; font-weight: 400; color: var(--sh-green-50); margin-top: 2px; }
.shb-sticky-summary svg { flex: 0 0 auto; width: 16px; height: 16px; }

.shb-cta--sand {
  flex: 0 0 150px;
  min-height: 52px;
  padding: 0 12px;
  background: var(--sand);
  color: var(--teal-deep);
  line-height: 1.4;
}
.shb-cta--sand:hover { background: #e8d5b8; }

/* ---------- Mobil: Bottom-Sheet ---------- */

.shb-sheet-wrap { position: fixed; inset: 0; z-index: 850; }
.shb-overlay { position: absolute; inset: 0; background: var(--overlay); }
.shb-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 48px;
  background: var(--white);
  display: flex;
  flex-direction: column;
}
.shb-sheet-head {
  flex: 0 0 auto;
  padding: 8px 8px 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.shb-sheet-title { margin: 0; font-size: 20px; font-weight: 700; }
.shb-sheet-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.shb-sheet-body .shb-status { font-size: 14px; margin-top: 10px; }
.shb-sheet-body .shb-guest { border-bottom: 0; border-top: 1px solid var(--border); padding: 14px 0; }
.shb-sheet-field { display: flex; flex-direction: column; gap: 6px; }
.shb-sheet-field .shb-select {
  height: 48px;
  padding: 0 12px;
  border: 1px solid var(--control-border);
  background: var(--white);
}
.shb-sheet-foot {
  flex: 0 0 auto;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-md);
  display: flex;
  align-items: center;
  gap: 12px;
}
.shb-sheet-foot .shb-btn { flex: 1 1 auto; min-height: 52px; }

/* ---------- Umschaltung Desktop / Mobil ---------- */

@media (max-width: 899px) {
  .shb-bar-wrap { display: none; }
  .shb-sticky { display: flex; }
  body.shb-has-sticky { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  body.shb-locked { overflow: hidden; }
}
@media (min-width: 900px) {
  .shb-sheet-wrap { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .shb-btn, .shb-cta { transition: none; }
  .shb-btn:hover { transform: none; }
}

/* ==========================================================================
   Erweiterungen (DESIGN.md §7–10): Hund, Kinderalter, Hinweis, dunkle Variante,
   zweite Instanz ohne Sticky-Bar
   ========================================================================== */

/* ---------- Schalter "Mit Hund" (Zeile in der Gästeauswahl) ---------- */

.shb-switch {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.shb-switch-track {
  position: relative;
  width: 44px;
  height: 24px;
  border: 1px solid var(--control-border);
  background: var(--white);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.shb-switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--control-border);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.shb-switch[aria-checked="true"] .shb-switch-track { background: var(--sh-green-dark); border-color: var(--sh-green-dark); }
.shb-switch[aria-checked="true"] .shb-switch-track::after { transform: translateX(20px); background: var(--white); }

/* ---------- Kinderalter (erscheint unter "Kinder", ein Select pro Kind) ---------- */

.shb-ages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 12px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--border);
}
.shb-age { display: flex; flex-direction: column; gap: 4px; }
.shb-age-label { font-size: 13px; font-weight: 400; color: var(--text-mid); }
.shb-age select {
  height: 44px;
  padding: 0 10px;
  border: 1px solid var(--control-border);
  background: var(--white);
  font-size: 16px;
  font-weight: 400;
  color: var(--text-dark);
}
.shb-age select[aria-invalid="true"] { border: 2px solid var(--text-dark); }
.shb-age-error { font-size: 13px; font-weight: 700; color: var(--text-dark); }

/* ---------- Hinweis (z. B. Hund + Am Alten Markt) ---------- */

.shb-hint {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--sand);
  color: var(--text-dark);
  font-size: 14px;
  line-height: 1.5;
}
.shb-hint strong { font-weight: 700; }
.shb-hint a { color: var(--sh-green-dark); text-decoration: underline; text-underline-offset: 3px; }
.shb-hint-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.shb-hint-link {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sh-green-dark);
  font-size: 14px;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Dunkle Variante: <form class="shb shb--dark"> auf teal-deep ---------- */

.shb--dark .shb-bar { background: transparent; border: 1px solid rgba(250, 248, 244, 0.25); }
.shb--dark .shb-field { background: transparent; border-right-color: rgba(250, 248, 244, 0.25); }
.shb--dark .shb-label { color: var(--sh-green-50); }
.shb--dark .shb-value,
.shb--dark .shb-bar .shb-select { color: var(--cream); }
.shb--dark .shb-bar .shb-select option { color: var(--text-dark); background: var(--white); }
.shb--dark .shb-field.is-active { box-shadow: inset 0 -3px 0 var(--sand); }
.shb--dark .shb-cta { background: var(--sand); color: var(--teal-deep); }
.shb--dark .shb-cta:hover { background: #e8d5b8; }
.shb--dark :focus-visible { outline-color: var(--sand); }
/* Popover und Sheet bleiben hell, damit Kalender und Stepper lesbar sind */
.shb--dark .shb-pop :focus-visible,
.shb--dark .shb-sheet :focus-visible { outline-color: var(--sh-green-dark); }

/* ---------- Zweite Leiste auf derselben Seite: <form class="shb shb--no-sticky"> ---------- */
/* Mobil steht hier statt der festen Leiste ein normaler Block im Seitenfluss. */

@media (max-width: 899px) {
  .shb--no-sticky .shb-sticky {
    position: static;
    box-shadow: none;
    padding: 0;
    background: transparent;
    flex-direction: column;
  }
  .shb--no-sticky .shb-sticky-summary {
    border: 1px solid rgba(250, 248, 244, 0.25);
    padding: 10px 14px;
  }
  .shb--no-sticky .shb-cta--sand { flex: 0 0 auto; }
  .shb:not(.shb--dark).shb--no-sticky .shb-sticky-summary { border-color: var(--border-md); color: var(--text-dark); }
  .shb:not(.shb--dark).shb--no-sticky .shb-sticky-sub { color: var(--text-mid); }
}

@media (prefers-reduced-motion: reduce) {
  .shb-switch-track, .shb-switch-track::after { transition: none; }
}

/* ---------- Kompakte Variante: Buchungsleiste in einer schmalen Karte
   (z. B. Sticky-Buchungskarte auf der Objektdetailseite). Das horizontale
   Kalender-Popover (660px) passt dort auf keiner Bildschirmbreite hinein –
   die Instanz zeigt deshalb bei <form class="shb shb--compact"> immer die
   Zusammenfassung + das Sheet, unabhängig von der Fensterbreite
   (siehe useSheet() in booking-bar.js). Werte identisch zur bestehenden
   .shb--no-sticky-Variante, nur ohne Beschränkung auf die 899px-Media-Query. */
.shb--compact .shb-bar-wrap { display: none; }
.shb--compact .shb-sticky {
  display: flex;
  position: static;
  box-shadow: none;
  padding: 0;
  background: transparent;
  flex-direction: column;
}
.shb--compact .shb-sticky-summary {
  border: 1px solid rgba(250, 248, 244, 0.25);
  padding: 10px 14px;
}
.shb--compact .shb-cta--sand { flex: 0 0 auto; }
.shb:not(.shb--dark).shb--compact .shb-sticky-summary { border-color: var(--border-md); color: var(--text-dark); }
.shb:not(.shb--dark).shb--compact .shb-sticky-sub { color: var(--text-mid); }
/* Helle Buchungskarte: CTA in Markenfarbe statt Sand, damit er auf weißem
   Grund nicht wie ein deaktivierter Button wirkt. */
.shb--compact .shb-cta--sand { background: var(--sh-green-dark); color: #fff; }
.shb--compact .shb-cta--sand:hover { background: var(--teal-deep); }

/* Natives <dialog> statt div+hidden (siehe showModal()/close() in
   booking-bar.js): rendert im Top-Layer des Browsers, unabhängig vom
   Stacking-Context der position:sticky-Buchungskarte – sonst läge das
   Auswahlfenster dort unter Header/Sticky-Elementen. Esc und Fokus-Trap
   kommen dadurch nativ vom Dialog, kein eigener JS-Code mehr nötig. */
.shb--compact dialog.shb-sheet-wrap {
  position: fixed;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  max-width: none;
  max-height: none;
}
.shb--compact dialog.shb-sheet-wrap::backdrop { background: var(--overlay); }
@media (max-width: 899px) {
  .shb--compact dialog.shb-sheet-wrap { inset: 0; width: 100vw; height: 100vh; }
}
@media (min-width: 900px) {
  /* Das Sheet wird ab 900px sonst mit !important ausgeblendet (siehe oben,
     Umschaltung Desktop/Mobil) – für kompakte Instanzen hier gezielt wieder
     einblenden, solange das <dialog> offen ist (open-Attribut). */
  .shb--compact dialog.shb-sheet-wrap[open] {
    display: flex !important;
    inset: 0;
    margin: auto;
    width: min(720px, 100vw - 48px);
    height: fit-content;
    max-height: 85vh;
  }
  .shb--compact dialog.shb-sheet-wrap .shb-sheet {
    position: static;
    inset: auto;
    width: 100%;
    max-height: 85vh;
  }
}

/* ---------- Fix: Popover und Sheet erben keine Textfarbe/-größe aus Hero oder Theme ---------- */
.shb .shb-pop,
.shb .shb-sheet { color: var(--text-dark); }
.shb .shb-status { margin: 0; color: var(--text-dark); font-size: 15px; font-weight: 400; line-height: 1.4; }
.shb .shb-sheet-body .shb-status { margin-top: 10px; font-size: 14px; }
.shb .shb-ages { padding-top: 12px; }

/* ---------- Fixes Mobil (Prüfung Startseite, 07.11.2026) ---------- */

/* Sheet über dem Site-Header (z-header 900) */
.shb-sheet-wrap { z-index: 1000; }

/* Sticky-Bar hebt sich auch auf dunklen Sektionen ab */
.shb-sticky { border-top: 1px solid rgba(250, 248, 244, 0.16); }

/* Sticky-Bar ausblenden, solange eine zweite Leiste (Schluss-CTA) sichtbar ist */
.shb-sticky { transition: transform 0.2s ease; }
.shb-sticky.is-hidden { transform: translateY(110%); }
@media (prefers-reduced-motion: reduce) { .shb-sticky { transition: none; } }