/* ============================================================
   Plug-and-Play – Theme-Override für eingebettete Plugin-Widgets
   (Suchleiste, Buchungsstrecke, Belegungskalender, Ergebnis-Karten).

   Diese Datei wird NACH dem Plugin-CSS geladen; "!important" überschreibt
   die Original-Optik der Widgets. Die Plugin-API selbst bleibt unangetastet.

   Design-Tokens: DM Sans · Beige #f0eeea · Petrol #1a6b7c · Navy #0d2f4a
                  · Aktion (Grün) #2d9e50
   ============================================================ */

/* --- Schrift überall im Karten-Inhalt --- */
.ff-card * { font-family: 'DM Sans', system-ui, sans-serif !important; }

/* --- Eingabefelder --- */
.ff-card input[type=text], .ff-card input[type=date], .ff-card input[type=number],
.ff-card input[type=email], .ff-card input[type=tel], .ff-card select,
.ff-card textarea, .ff-card .date, .ff-card .selectpicker, .ff-card .chkbox {
  border: 1.5px solid #9ca3af !important;
  border-radius: 9px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  color: #0d2f4a !important;
  background: #fff !important;
  box-shadow: none !important;
}
.ff-card input:focus, .ff-card select:focus, .ff-card textarea:focus {
  outline: none !important;
  border-color: #1a6b7c !important;
  box-shadow: 0 0 0 3px rgba(26, 107, 124, .15) !important;
}

/* Material-Feld (.input-container) = DAS Feld-Kästchen mit schwebendem Label.
   Es bleibt der EINE Rahmen (modern umgefärbt); der Input darin ist rahmenlos
   (kein Doppel-Rahmen, kein überlappendes Label). */
.ff-card .input-container {
  border: 1.5px solid #9ca3af !important;
  border-radius: 9px !important;
  background: #fff !important;
}
.ff-card .input-container:focus-within {
  border-color: #1a6b7c !important;
  box-shadow: 0 0 0 3px rgba(26, 107, 124, .15) !important;
}
.ff-card .input-container input,
.ff-card .input-container select,
.ff-card .input-container textarea {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.ff-card .input-container .input-underline { display: none !important; }

/* --- Primäre Aktionsbuttons: grün ---
   WICHTIG: nur echte Buttons/Links ansprechen, KEINE Container-Klassen
   (z. B. .buchungStep ist der Schritt-Container, kein Button!). */
.ff-card button,
.ff-card a.button,
.ff-card input[type=submit],
.ff-card input[type=button],
.ff-card .stagesearchstart,
.ff-card .button2020 {
  background: #2d9e50 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 11px !important;
  padding: 11px 22px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-decoration: none !important;
}
.ff-card button:hover,
.ff-card .stagesearchstart:hover,
.ff-card .button2020:hover { background: #258544 !important; }

/* --- Links in Petrol --- */
.ff-card a,
.ff-card .objektliste-links,
.ff-card .objektliste-links a { color: #1a6b7c !important; }

/* ===================== Suchleiste (Mockup-Stil) ===================== */
/* Auf der Suchseite den äußeren Karten-Wrapper auflösen – Suchleiste und
   Ergebnisse sind eigene Karten (wie im Mockup). */
.ff-card:has(#FewoflowSearchBar) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Suchleiste = eigene weiße Karte */
#FewoflowSearchBar {
  background: #fff !important;
  border: 1px solid #e9edf1 !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 28px rgba(13, 47, 74, .09) !important;
  padding: 20px 26px !important;
  display: block !important;
  margin-bottom: 30px !important;
}

/* Horizontale Felder-Reihe */
.stagesearch-inner { display: flex !important; align-items: flex-end !important; gap: 18px !important; flex-wrap: wrap !important; }
.stagesearch-inner > div { display: flex !important; flex-direction: column !important; align-items: stretch !important; flex: 1 1 150px !important; min-width: 140px !important; }
.stagesearch-inner > .filterzeitraum { flex: 2 1 320px !important; flex-direction: row !important; gap: 18px !important; align-items: flex-end !important; }
.stagesearch-inner > .filterzeitraum > .filteranreise, .stagesearch-inner > .filterzeitraum > .filterabreise { display: flex !important; flex-direction: column !important; flex: 1 1 0 !important; min-width: 0 !important; }

/* Feld-Labels per ::before (Plugin liefert keine) */
.filterort::before, .filteranreise::before, .filterabreise::before, .filterperson::before {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #9ca3af; margin-bottom: 6px; display: block;
}
.filterort::before { content: 'Reiseziel'; }
.filteranreise::before { content: 'Anreise'; }
.filterabreise::before { content: 'Abreise'; }
.filterperson::before { content: 'Personen'; }

/* Felder */
.stagesearch-inner .selectpicker, .stagesearch-inner .date {
  width: 100% !important; min-width: 0 !important;
  border: 1.5px solid #9ca3af !important; border-radius: 9px !important;
  padding: 10px 14px !important; font-size: 14px !important; color: #0d2f4a !important; background: #fff !important;
}
.stagesearch-inner .selectpicker:focus, .stagesearch-inner .date:focus { border-color: #1a6b7c !important; }

/* Haustier-Option als Box */
.stagesearch-inner > .filterhaustier {
  flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  border: 1.5px solid #9ca3af !important; border-radius: 9px !important;
  padding: 12px 14px !important; background: #fff !important; flex: 1 1 150px !important;
}
.filterhaustier label { font-size: 14px !important; color: #0d2f4a !important; cursor: pointer !important; margin: 0 !important; }

/* Suchen-Button */
.stagesearch-inner > .filterbutton { flex: 0 0 auto !important; align-self: flex-end !important; align-items: stretch !important; }
.stagesearchstart { white-space: nowrap !important; height: 44px !important; }

/* ===================== Suchergebnisse ===================== */
.suchergebnis-resultat-counter { font-size: 14px !important; font-weight: 600 !important; color: #6b7280 !important; margin: 0 0 16px !important; }
.objektliste { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important; gap: 22px !important; justify-content: start !important; }
.objektliste-item {
  width: auto !important; margin: 0 !important;
  border: 1px solid #e9edf1 !important; border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(13, 47, 74, .06) !important;
  overflow: hidden !important; background: #fff !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.objektliste-item:hover { box-shadow: 0 8px 24px rgba(13, 47, 74, .10) !important; transform: translateY(-2px) !important; }
.a-objektbild-cm {
  /* The generated markup adds u-flexGrow-1 to this link. On cards with less
     text that puts the spare card height below the aspect-ratio image and
     therefore looks like an empty line above the title. */
  flex-grow: 0 !important;
}
.wohnungsbild { width: 100% !important; padding-top: 58% !important; background-size: cover !important; background-position: center !important; }
.objektliste-links {
  font-size: 18px !important; font-weight: 700 !important; padding: 16px 18px 2px !important;
  line-height: 1.35 !important;
  /* Reserve exactly three title lines (plus vertical padding). A two-line
     title therefore leaves its empty line below the text, and every card's
     description starts on the same baseline. The flex-basis is necessary
     because this element is a direct child of the flex card. */
  box-sizing: border-box !important;
  min-height: calc(4.05em + 18px) !important;
  flex: 0 0 calc(4.05em + 18px) !important;
}
.objektliste-links, .objektliste-links a { color: #1a6b7c !important; text-decoration: none !important; }
.objektliste-beschreibung { font-size: 14px !important; color: #6b7280 !important; padding: 0 18px 14px !important; }
.objektliste-infos { padding: 14px 18px !important; border-top: 1px solid #f0f2f5 !important; align-items: center !important; }
.objekteliste-merkmale { gap: 18px !important; }
.objekteliste-merkmale li { color: #0d2f4a !important; }
.objektliste-preis { color: #1a6b7c !important; font-weight: 700 !important; }

/* ===================== Buchung ===================== */

/* Schritt-Container NICHT einfärben (Bugfix: war versehentlich grün) */
.buchungStep,
.buchung-wrapper-cm,
.buchung-schritt-cm,
.buchung-schritt-zwei-cm,
.buchung-formular-cm {
  background: transparent !important;
  color: inherit !important;
}

/* Sektions-Labels wie im Mockup (Versalien, Petrol, linker Balken) */
.buchung-abschnittstitel-cm,
.buchung-abschnittstitel-null-cm,
.buchung-abschnittstitel-eins-cm,
.buchung-abschnittstitel-drei-cm,
.buchung-abschnittstitel-vier-cm {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  color: #1a6b7c !important;
  padding-left: 11px !important;
  border-left: 3px solid #1a6b7c !important;
  margin-bottom: 16px !important;
}
.buchung-titel-cm, .ContentBoxHeader { font-weight: 700 !important; color: #0d2f4a !important; }

/* Info-/Personen-Panels: helle, abgerundete Flächen */
.buchung-info-block-cm,
.buchung-info-wrapper-cm,
.buchung-mitreisende-cm,
.u-bg-lightGrey {
  background: #f8f9fb !important;
  border: 1px solid #e8ecf1 !important;
  border-radius: 12px !important;
}

/* Schritt-Indikator (falls als Liste gerendert) */
.buchung-navi-cm { display: flex !important; gap: 10px !important; flex-wrap: wrap !important; margin-bottom: 24px !important; }
.buchung-navi-item-cm {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  font-size: 13px !important; font-weight: 600 !important; color: #6b7280 !important;
}
.buchung-navi-item-cm.aktiv,
.buchung-navi-item-cm.active,
.buchung-navi-item-cm.current,
.buchung-navi-item-cm.selected { color: #1a6b7c !important; }