/* =====================================================================
   FlowFact Connector – Dark-Mode Override (Deckert / Entwurf 3)
   Passt die FlowFact-Immobilienliste, -Detailseite, Suche & das
   Kontakt-Popup an das neue dunkle Layout an.

   Einbindung: als CSS-Snippet via WPCode ODER im Child-Theme nach der
   Plugin-CSS laden (Priorität > 20). Greift nur FlowFact-Klassen
   (.FFestateview-* / .FFestateReference-*), berührt also den Rest der
   Seite (The7) nicht.
   ===================================================================== */

:root {
  --ff-bg-base:        #0d0e11;
  --ff-bg-elevated:    #15161a;
  --ff-bg-card:        #1a1c20;
  --ff-bg-card-hover:  #20232a;
  --ff-border:         #2a2c33;
  --ff-border-soft:    #232529;
  --ff-text-strong:    #f5f2e9;
  --ff-text-body:      #b3b0a6;
  --ff-text-muted:     #7e7c74;
  --ff-text-brand:     #d5b896;
  --ff-accent:         #83b82a;
  --ff-accent-hover:   #94cc36;
  --ff-accent-soft:    rgba(131, 184, 42, 0.12);
  --ff-radius-sm:      5px;
  --ff-radius-md:      10px;
  --ff-shadow-card:    0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 24px rgba(0,0,0,0.35);
  --ff-shadow-hover:   0 1px 0 rgba(255,255,255,0.05) inset, 0 16px 40px rgba(0,0,0,0.5);
}

/* ---------------------------------------------------------------------
   1) Listen-Container / Grundflächen
   ------------------------------------------------------------------- */
.FFestateview-default-overview-list,
.FFestateReference-default-overview-list,
.FFestateview-default-details {
  background: transparent;
  color: var(--ff-text-body);
}

/* ---------------------------------------------------------------------
   2) Objekt-Karten (Liste estateView + Referenzen estateReference)
   ------------------------------------------------------------------- */
.FFestateview-default-overview-estate,
.FFestateReference-default-overview-estate {
  background: var(--ff-bg-card) !important;
  border: 1px solid var(--ff-border) !important;
  border-radius: var(--ff-radius-md) !important;
  overflow: hidden;
  box-shadow: var(--ff-shadow-card);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.FFestateview-default-overview-estate:hover,
.FFestateReference-default-overview-estate:hover {
  transform: translateY(-4px);
  box-shadow: var(--ff-shadow-hover);
  border-color: var(--ff-accent) !important;
}

/* Bildbereich */
.FFestateview-default-overview-estate-image,
.FFestateview-default-overview-estate-image > div,
.FFestateReference-default-overview-estate-image,
.FFestateReference-default-overview-estate-image > div {
  background-color: #0a0b0d !important;
}

/* Überschrift / Objekttyp */
.FFestateview-default-overview-estate-type,
.FFestateview-default-overview-estate-type span,
.FFestateReference-default-overview-estate-type,
.FFestateReference-default-overview-estate-type span {
  background: var(--ff-bg-card) !important;
  color: var(--ff-text-strong) !important;
  font-weight: 600;
}

/* Adresse */
.FFestateview-default-overview-estate-addresses,
.FFestateReference-default-overview-estate-addresses {
  background: var(--ff-bg-card) !important;
  color: var(--ff-text-body) !important;
  border-bottom: 1px solid var(--ff-border-soft) !important;
}

/* Preis – Signaturgrün statt FlowFact-Blau */
.FFestateview-default-overview-estate-price,
.FFestateview-default-overview-estate-price *,
.FFestateReference-default-overview-estate-price,
.FFestateReference-default-overview-estate-price * {
  background: var(--ff-bg-card) !important;
  color: var(--ff-accent) !important;
}
.FFestateview-default-overview-estate-price,
.FFestateReference-default-overview-estate-price {
  border-top: 1px solid var(--ff-border-soft) !important;
  font-weight: 700;
}

/* Detail-Zeilen (Zimmer, Fläche …) */
.FFestateview-default-overview-estate-details,
.FFestateReference-default-overview-estate-details {
  background: var(--ff-bg-card) !important;
  color: var(--ff-text-body) !important;
}
.FFestateview-default-overview-estate-details-values span:first-child,
.FFestateReference-default-overview-estate-details-values span:first-child {
  color: var(--ff-text-muted) !important;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: .72rem;
}
.FFestateview-default-overview-estate-details-values span:last-child,
.FFestateview-default-overview-estate-details-values i,
.FFestateReference-default-overview-estate-details-values span:last-child,
.FFestateReference-default-overview-estate-details-values i {
  color: var(--ff-text-strong) !important;
  font-weight: 600;
  font-style: normal;
}
.FFestateview-default-overview-estate-details-icon svg,
.FFestateReference-default-overview-estate-details-icon svg,
.FFestateview-default-overview-estate-details-icon path,
.FFestateReference-default-overview-estate-details-icon path {
  fill: var(--ff-text-muted) !important;
}

/* Status-Badge „Verkauft / Vermietet" */
.FFestateReference-default-overview-estate-salestype,
.FFestateReference-default-overview-estate-type-sold {
  background: var(--ff-accent) !important;
  color: #0d0e11 !important;
  font-weight: 600;
  border-radius: var(--ff-radius-sm);
}

/* ---------------------------------------------------------------------
   3) Suche / Filter / Sortierung
   ------------------------------------------------------------------- */
/* Glasmorphismus-Suchleiste (gleicher Look wie der Städte-Filter §12).
   Container + innere Wrapper transparent machen – der Connector rendert ein
   weißes Wrapper-div, das früher von den opaken Inputs verdeckt war und bei
   transparenten Glas-Inputs sonst durchscheint. */
.FFestateview-default-overview-search,
.FFestateview-default-overview-search-bar,
.FFestateview-default-overview-search-primary,
.FFestateview-default-overview-search-secondary,
.FFestateview-default-overview-search-hidden,
.FFestateReference-default-overview-search-hidden,
.FFestateview-default-overview-search-primary > div,
.FFestateview-default-overview-search-primary-type,
.FFestateview-default-overview-search-primary-price,
.FFestateview-default-overview-search-primary-location,
.FFestateview-default-overview-search .chosen-container {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--ff-text-body) !important;
}

/* Glas-Eingaben: Typ-Dropdown (chosen), Preis, Ort */
.FFestateview-default-overview-search input[type="text"],
.FFestateview-default-overview-search input[type="number"],
.FFestateview-default-overview-search select,
.FFestateview-default-overview-search-primary-location input,
.FFestateview-default-overview-search-primary-price input,
.FFestateview-default-overview-search .chosen-container .chosen-single {
  background: rgba(255,255,255,.06) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08) !important;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.FFestateview-default-overview-search input::placeholder { color: rgba(255,255,255,.5) !important; }
.FFestateview-default-overview-search input[type="text"]:focus,
.FFestateview-default-overview-search input[type="number"]:focus,
.FFestateview-default-overview-search-primary-price input:focus,
.FFestateview-default-overview-search-primary-location input:focus {
  outline: none !important;
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(140,190,58,.7) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.4), 0 0 0 3px rgba(140,190,58,.25), inset 0 1px 0 rgba(255,255,255,.1) !important;
}

.FFestateview-default-overview-search-count,
.FFestateview-default-overview-search-sort,
.FFestateReference-default-overview-search-sort,
.FFestateview-default-overview-counts,
.FFestateReference-default-overview-counts {
  color: var(--ff-text-muted) !important;
}

/* „Chosen" Dropdown-Panel als Glas – NUR innerhalb der FF-Suche (sonst würde es
   fremde Chosen-Dropdowns, z. B. WooCommerce, sitewide einfärben) */
.FFestateview-default-overview-search .chosen-container .chosen-drop,
.FFestateview-default-overview-search .chosen-container .chosen-results {
  background: rgba(22,24,30,.82) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.55) !important;
}
.FFestateview-default-overview-search .chosen-container.chosen-with-drop .chosen-single {
  border-radius: 14px 14px 0 0 !important;
}
.FFestateview-default-overview-search .chosen-container .chosen-results li.highlighted {
  background: linear-gradient(90deg, rgba(140,190,58,.92), rgba(140,190,58,.68)) !important;
  color: #0d0e11 !important;
}
.FFestateview-default-overview-search .chosen-container .chosen-search input {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #fff !important;
  border-radius: 8px !important;
}

/* Buttons (Suche / Filter umschalten / Absenden) – grün, gleiche Rundung + Glow */
.FFestateview-default-overview-search-submit-button,
.FFestateview-default-overview-search-filter-button,
.FFestateview-default-overview-search-submit {
  background: var(--ff-accent) !important;
  color: #0d0e11 !important;
  border: 1px solid var(--ff-accent) !important;
  border-radius: 14px !important;
  font-weight: 600;
  box-shadow: 0 8px 30px rgba(140,190,58,.25) !important;
  transition: background .2s ease, box-shadow .2s ease;
}
.FFestateview-default-overview-search-submit-button:hover,
.FFestateview-default-overview-search-filter-button:hover {
  background: var(--ff-accent-hover) !important;
  border-color: var(--ff-accent-hover) !important;
  box-shadow: 0 10px 34px rgba(140,190,58,.4) !important;
}
/* „Suchen"-Button: weiße Schrift (statt dunkel) für besseren Kontrast auf Grün.
   Deckt den Wrapper (.search-submit) UND den Button inkl. aller Kindknoten ab –
   der sichtbare Text kann als Textknoten direkt im Wrapper liegen und würde sonst
   das dunkle #0d0e11 aus der Basis-Button-Regel oben erben. */
.FFestateview-default-overview-search-submit,
.FFestateview-default-overview-search-submit *,
.FFestateview-default-overview-search-submit-button,
.FFestateview-default-overview-search-submit-button * {
  color: #fff !important;
}

/* Einheitliche Höhe (50px) für alle Such-Pillen.
   Das Chosen-Dropdown ist ab Werk niedriger (40px) als Preisfeld/Button. */
.FFestateview-default-overview-search .chosen-container,
.FFestateview-default-overview-search .chosen-container .chosen-single {
  height: 50px !important;
  line-height: 48px !important;
  box-sizing: border-box !important;
  display: block !important;
}
.FFestateview-default-overview-search .chosen-container .chosen-single { padding: 0 16px !important; }
/* Connector setzt am Span height:36px + padding-top:6px → Text saß zu tief.
   Überschreiben und exakt in der Pille zentrieren. */
.FFestateview-default-overview-search .chosen-container .chosen-single span {
  padding-top: 0 !important;
  height: 50px !important;
  line-height: 50px !important;
  margin-top: 0 !important;
}
.FFestateview-default-overview-search .chosen-container .chosen-single div {
  height: 48px !important; display: flex !important; align-items: center !important;
}

/* Abstand: nur am mittleren Preisfeld links + rechts (sauberer als ein globales
   flex-gap, das auch das Haus-Icon vom Typ-Feld gelöst hätte). */
.FFestateview-default-overview-search-primary-price {
  margin-left: 20px !important;
  margin-right: 20px !important;
}

/* ---------------------------------------------------------------------
   3b) Mobile-Layout der Suchleiste (≤ 700 px)
   Auf dem Desktop steht die Leiste horizontal und sitzt gut. Auf Mobil
   bricht der Connector die Felder um. Ziel hier: sauberer Einspalten-Stack
   mit EINHEITLICHER 46-px-Leitspalte – das „Stadt"-Label, das Haus-Icon und
   das Münz-Icon sitzen alle in dieser Leitspalte, die drei Feld-Boxen
   („Stadt suchen", „Alle Immobilien", Preis) starten linksbündig darunter.
   Die FF-Icons sind vom Connector absolut positioniert (kein Flow-Element),
   werden also per left/absolute in die Leitspalte gesetzt statt als Flex-Spalte.
   Greift nur ≤ 700 px – Desktop bleibt unberührt.
   ------------------------------------------------------------------- */
@media (max-width: 700px) {

  /* Beide Zeilen-Container – die (per JS gefüllte) Städte-Leiste und die native
     FF-Suche – teilen sich dieselbe linke Kante und volle Breite. Nur so fluchten
     die 46-px-Leitspalten und die Feld-Kanten beider Blöcke exakt übereinander
     und die vertikalen Abstände bleiben einheitlich. */
  .FFestateview-default-overview-search,
  .FFestateview-default-overview-search-bar,
  .FFestateview-default-overview-search-primary {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Städte-Filter: „Stadt" = 46-px-Leitspalte, Feld füllt den Rest */
  .imw-stadtfilter-bar { margin: 0 0 12px !important; padding: 0 !important; }
  .imw-cityfilter {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
    align-items: center !important;
  }
  .imw-cityfilter-label {
    flex: 0 0 46px !important; width: 46px !important;
    padding-left: 11px !important; box-sizing: border-box !important;
    margin: 0 !important;
  }
  .imw-cityfilter-field { flex: 1 1 auto !important; display: block !important; min-width: 0 !important; }
  .imw-cityfilter-input {
    width: 100% !important;
    max-width: 100% !important;
    height: 50px !important;
    box-sizing: border-box !important;
  }
  .imw-cityfilter-list { width: 100% !important; max-width: 100% !important; left: 0 !important; }

  /* FF-Suchfelder: vertikaler Stack mit gleichem 12-px-Abstand */
  .FFestateview-default-overview-search-primary > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* Feld-Wrapper volle Breite; Icon-<label> ist absolut (Connector-Vorgabe)
     und wird in die 46-px-Leitspalte gesetzt (wie das „Stadt"-Label). */
  .FFestateview-default-overview-search-primary-type,
  .FFestateview-default-overview-search-primary-price {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
  }
  .FFestateview-default-overview-search-primary-type > label,
  .FFestateview-default-overview-search-primary-price > label {
    position: absolute !important;
    left: 11px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    z-index: 2 !important;
  }

  /* Felder starten bei 46 px (bündig mit dem Städte-Feld) und füllen den Rest */
  .FFestateview-default-overview-search .chosen-container {
    display: block !important;
    width: calc(100% - 46px) !important;
    margin-left: 46px !important;
    min-width: 0 !important;
  }
  .FFestateview-default-overview-search-primary-price input {
    display: block !important;
    width: calc(100% - 46px) !important;
    margin-left: 46px !important;
    min-width: 0 !important;
    height: 50px !important;
    box-sizing: border-box !important;
    padding-left: 16px !important;
  }

  /* „Suchen"-Button: volle Breite + Look des Header-CTAs „Jetzt Termin
     vereinbaren" (grüner Vertikal-Gradient, 3-px-3D-Unterkante, 5-px-Radius). */
  .FFestateview-default-overview-search-submit { width: 100% !important; margin: 0 !important; }
  .FFestateview-default-overview-search-submit-button {
    display: block !important;
    width: 100% !important;
    height: 50px !important;
    margin: 0 !important;
    background: linear-gradient(rgb(131,184,42) 0%, rgb(106,154,31) 100%) !important;
    box-shadow: 0 3px 0 0 rgb(74,112,16) !important;
    border: 0 !important;
    border-radius: 5px !important;
    color: #fff !important;
    font-weight: 600 !important;
  }
  .FFestateview-default-overview-search-submit-button:hover {
    background: linear-gradient(rgb(139,193,48) 0%, rgb(116,166,36) 100%) !important;
    box-shadow: 0 3px 0 0 rgb(74,112,16) !important;
  }
}

/* ---------------------------------------------------------------------
   4) Paginierung
   ------------------------------------------------------------------- */
.FFestateview-default-overview-estate-paging,
.FFestateReference-default-overview-estate-paging {
  color: var(--ff-text-body) !important;
}
.FFestateview-default-overview-estate-paging a,
.FFestateReference-default-overview-estate-paging a {
  background: var(--ff-bg-card) !important;
  border: 1px solid var(--ff-border) !important;
  color: var(--ff-text-body) !important;
  border-radius: var(--ff-radius-sm) !important;
}
.FFestateview-default-overview-estate-paging a:hover,
.FFestateview-default-overview-estate-paging .active,
.FFestateReference-default-overview-estate-paging a:hover,
.FFestateReference-default-overview-estate-paging .active {
  background: var(--ff-accent) !important;
  border-color: var(--ff-accent) !important;
  color: #0d0e11 !important;
}

/* Kein-Ergebnis */
.FFestateview-default-overview-no-result,
.FFestateReference-default-overview-estate ~ .no-result,
.FFestateview-default-overview-no-result * {
  color: var(--ff-text-muted) !important;
}

/* ---------------------------------------------------------------------
   5) Detailseite (Einzelobjekt)
   ------------------------------------------------------------------- */
.FFestateview-default-details-main,
.FFestateview-default-details-main-image,
.FFestateview-default-details-main-nav,
.FFestateview-default-details-slider {
  background: #0a0b0d !important;
}
.FFestateview-default-details-main-nav-image { border-color: var(--ff-border) !important; }

/* Inhaltskarten / Sektionen */
.FFestateview-default-details-content,
.FFestateview-default-details-content-description,
.FFestateview-default-details-content-details,
.FFestateview-default-details-content-facts,
.FFestateview-default-details-content-main-details,
.FFestateview-default-details-content-equipments,
.FFestateview-default-details-content-energyUsage,
.FFestateview-default-details-content-energyUsage-new,
.FFestateview-default-details-content-documents,
.FFestateview-default-details-content-location,
.FFestateview-default-details-content-legal,
.FFestateview-default-details-content-tab-content {
  background: var(--ff-bg-card) !important;
  border: 1px solid var(--ff-border) !important;
  border-radius: var(--ff-radius-md) !important;
  color: var(--ff-text-body) !important;
}
.FFestateview-default-details-content h1,
.FFestateview-default-details-content h2,
.FFestateview-default-details-content h3,
.FFestateview-default-details-content h4,
.FFestateview-default-details-content strong,
.FFestateview-default-details-content-facts strong {
  color: var(--ff-text-strong) !important;
}

/* Tabs */
.FFestateview-default-details-content-tabs,
.FFestateview-default-details-nav {
  background: var(--ff-bg-elevated) !important;
  border-bottom: 1px solid var(--ff-border) !important;
}
.FFestateview-default-details-content-tabs a,
.FFestateview-default-details-nav a { color: var(--ff-text-body) !important; }
.FFestateview-default-details-content-tabs a.active,
.FFestateview-default-details-content-tabs a:hover,
.FFestateview-default-details-nav a.active {
  color: var(--ff-accent) !important;
  border-bottom-color: var(--ff-accent) !important;
}

/* Faktentabellen / Energieausweis – Zebrastreifen dunkel */
.FFestateview-default-details-content-facts tr:nth-child(even),
.FFestateview-default-details-content-details tr:nth-child(even) {
  background: var(--ff-bg-card-hover) !important;
}
.FFestateview-default-details-content-facts td,
.FFestateview-default-details-content-details td { border-color: var(--ff-border-soft) !important; }

/* Makler-Kontaktbox */
.FFestateview-default-details-agent,
.FFestateview-default-details-agent-details,
.FFestateview-default-details-content-facts-contact {
  background: var(--ff-bg-elevated) !important;
  border: 1px solid var(--ff-border) !important;
  border-radius: var(--ff-radius-md) !important;
  color: var(--ff-text-body) !important;
}
.FFestateview-default-details-agent-name { color: var(--ff-text-strong) !important; }
.FFestateview-default-details-agent-addresses,
.FFestateview-default-details-agent-contact { color: var(--ff-text-body) !important; }
.FFestateview-default-details-agent-image img {
  border: 2px solid var(--ff-border) !important;
  border-radius: 50%;
}
.FFestateview-default-details-agent-contact-email,
.FFestateview-default-details-agent-contact a { color: var(--ff-accent) !important; }

/* „Anfragen"-Button öffnet Popup */
.FFestateview-default-popup-open {
  background: var(--ff-accent) !important;
  color: #0d0e11 !important;
  border: 1px solid var(--ff-accent) !important;
  border-radius: var(--ff-radius-sm) !important;
  font-weight: 600;
}
.FFestateview-default-popup-open:hover {
  background: var(--ff-accent-hover) !important;
  border-color: var(--ff-accent-hover) !important;
}

/* Teilen / Share */
.FFestateview-default-details-share,
.FFestateview-default-details-share a { color: var(--ff-text-muted) !important; }
.FFestateview-default-details-share a:hover { color: var(--ff-accent) !important; }

/* Verwandte Objekte */
.FFestateview-default-details-related-estate-list { background: transparent !important; }

/* ---------------------------------------------------------------------
   6) Kontakt-Popup (Anfrageformular auf der Detailseite)
   ------------------------------------------------------------------- */
.FFestateview-default-popup { background: rgba(13,14,17,0.82) !important; }
.FFestateview-default-popup-content {
  background: var(--ff-bg-card) !important;
  border: 1px solid var(--ff-border) !important;
  border-radius: var(--ff-radius-md) !important;
  box-shadow: var(--ff-shadow-hover);
  color: var(--ff-text-body) !important;
}
.FFestateview-default-popup-content-header,
.FFestateview-default-popup-content-header * {
  color: var(--ff-text-strong) !important;
  border-bottom: 1px solid var(--ff-border-soft) !important;
}
.FFestateview-default-popup-content-body input,
.FFestateview-default-popup-content-body select,
.FFestateview-default-popup-content-body textarea {
  background: var(--ff-bg-base) !important;
  border: 1px solid var(--ff-border) !important;
  color: var(--ff-text-body) !important;
  border-radius: var(--ff-radius-sm) !important;
}
.FFestateview-default-popup-content-body input::placeholder,
.FFestateview-default-popup-content-body textarea::placeholder { color: var(--ff-text-muted) !important; }
.FFestateview-default-popup-content-body input:focus,
.FFestateview-default-popup-content-body select:focus,
.FFestateview-default-popup-content-body textarea:focus {
  border-color: var(--ff-accent) !important;
  outline: none;
  box-shadow: 0 0 0 2px var(--ff-accent-soft) !important;
}
.FFestateview-default-popup-legal,
.FFestateview-default-popup-legal * { color: var(--ff-text-muted) !important; }
.FFestateview-default-popup-legal a { color: var(--ff-accent) !important; }

/* Absende-Button im Popup */
.FFestateview-default-popup-content-action button,
.FFestateview-default-popup-content-action input[type="submit"],
.FFestateview-default-popup-content-action .validateDontSubmit {
  background: var(--ff-accent) !important;
  color: #0d0e11 !important;
  border: 1px solid var(--ff-accent) !important;
  border-radius: var(--ff-radius-sm) !important;
  font-weight: 600;
}
.FFestateview-default-popup-content-action button:hover {
  background: var(--ff-accent-hover) !important;
  border-color: var(--ff-accent-hover) !important;
}
.FFestateview-default-popup-close { color: var(--ff-text-body) !important; }
.FFestateview-default-popup-close:hover { color: var(--ff-accent) !important; }
.FFestateview-default-popup-success,
.FFestateview-default-popup-success * { color: var(--ff-text-strong) !important; }

/* ---------------------------------------------------------------------
   7) Karte (Leaflet) – dezenter dunkler Rahmen
   ------------------------------------------------------------------- */
.FFestateview-default-map,
.FFestateview-default-map-card {
  background: var(--ff-bg-card) !important;
  border: 1px solid var(--ff-border) !important;
  border-radius: var(--ff-radius-md) !important;
}
.FFestateview-default-map-card-estate-type { color: var(--ff-text-strong) !important; }
.FFestateview-default-map-card-estate-price { color: var(--ff-accent) !important; }
.FFestateview-default-map-card-estate-link { color: var(--ff-accent) !important; }

/* ---------------------------------------------------------------------
   8) Feinschliff: keine hellen Restflächen in den Objektkarten
      (z. B. leere zweite Preiszeile -> sonst weißer Balken)
   ------------------------------------------------------------------- */
/* Nur background-COLOR auf transparent -> Hintergrundbilder bleiben erhalten */
.FFestateview-default-overview-estate *,
.FFestateReference-default-overview-estate * {
  background-color: transparent !important;
}
/* Bildbereich behält dunklen Fallback (höhere Spezifität -> gewinnt) */
.FFestateview-default-overview-estate-image > div,
.FFestateReference-default-overview-estate-image > div {
  background-color: #0a0b0d !important;
}

/* Sortier-Dropdown & Treffer-Zähle oben dunkel */
.FFestateview-default-overview-search-sort,
.FFestateview-default-overview-search-sort *,
.FFestateview-default-overview-search-count {
  background-color: var(--ff-bg-card) !important;
  color: var(--ff-text-body) !important;
  border-color: var(--ff-border) !important;
}
.FFestateview-default-overview-search-count { background-color: transparent !important; }

/* ---------------------------------------------------------------------
   9) Detailseite (Einzelobjekt) – durchgehend dunkel
      Robust: Grundfläche dunkel, alle Restflächen transparent (Bilder
      bleiben, da nur background-COLOR überschrieben wird).
   ------------------------------------------------------------------- */
.FFestateview-default-details {
  background-color: var(--ff-bg-base) !important;
  color: var(--ff-text-body) !important;
}
.FFestateview-default-details * { background-color: transparent !important; }

/* Inhalts-Blöcke transparent (wie live – sitzen direkt auf der Seite, keine Kästen) */
.FFestateview-default-details-content,
.FFestateview-default-details-content-description,
.FFestateview-default-details-content-details,
.FFestateview-default-details-content-main-details,
.FFestateview-default-details-content-facts,
.FFestateview-default-details-content-equipments,
.FFestateview-default-details-content-energyUsage,
.FFestateview-default-details-content-energyUsage-new,
.FFestateview-default-details-content-documents,
.FFestateview-default-details-content-legal,
.FFestateview-default-details-content-blank,
.FFestateview-default-details-nav {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}
/* Nur die Makler-Box ist eine Karte (wie live's weiße Karte – hier dunkel) */
.FFestateview-default-details-agent {
  background-color: var(--ff-bg-card) !important;
  border: 1px solid var(--ff-border) !important;
  border-radius: var(--ff-radius-md) !important;
  overflow: hidden !important;
  margin-left: 30px !important;
}
/* Innen-Trenner der Makler-Box (wie live's Linien) */
.FFestateview-default-details-content-facts-contact,
.FFestateview-default-details-agent-details {
  border-bottom: 1px solid var(--ff-border-soft) !important;
}
/* FF-Detail-Rahmen sichtbar lassen (Energieausweis-Skala A+…H, Tabellen, Boxen)
   – nur dunkel-theme-tauglich einfärben statt entfernen */
.FFestateview-default-details * { border-color: var(--ff-border) !important; }
/* NUR die Eckdaten-Spalten-Trennlinien entfernen (waren als heller linker Strich sichtbar) */
.FFestateview-default-details-content-details ul { border-color: transparent !important; }
/* Aktive Energieeffizienzklasse grün hervorheben – variiert je Immobilie,
   erkannt am grünen inline-Style rgb(140,190,58), den der Connector setzt */
.FFestateview-default-details-content-energyUsage div[style*="190, 58"],
.FFestateview-default-details-content-energyUsage div[style*="190,58"] {
  border-color: rgb(140, 190, 58) !important;
  color: rgb(140, 190, 58) !important;
}
.FFestateview-default-details-content-energyUsage div[style*="190, 58"] *,
.FFestateview-default-details-content-energyUsage div[style*="190,58"] * {
  color: rgb(140, 190, 58) !important;
}
/* Karten-Outlines behalten (Makler-Box + Eckdaten-Box) */
.FFestateview-default-details-agent,
.FFestateview-default-details-content-details { border: 1px solid var(--ff-border) !important; }
.FFestateview-default-details-content-facts-contact,
.FFestateview-default-details-agent-details { border-bottom: 1px solid var(--ff-border) !important; }
/* Slider-/Bildrand sauber abschneiden (gegen helle Rand-Sliver) */
.FFestateview-default-details-main,
.FFestateview-default-details-slider,
.slider-wrapper { overflow: hidden !important; }

/* Eckdaten (ul/li): Label gedämpft, Wert hell & fett → besserer Kontrast */
.FFestateview-default-details-content-details li span:first-child { color: var(--ff-text-muted) !important; }
.FFestateview-default-details-content-details li span:last-child,
.FFestateview-default-details-content-details li span:last-child i {
  color: var(--ff-text-strong) !important;
  font-weight: 600 !important;
  font-style: normal;
}
.FFestateview-default-details-content-details li { padding: 9px 14px !important; }

/* Bild / Galerie / Grundriss: dunkler Fallback (Bild bleibt erhalten) */
.FFestateview-default-details-main,
.FFestateview-default-details-main-image,
.FFestateview-default-details-slider,
.FFestateview-default-multimedia,
.FFestateview-default-groundplot {
  background-color: #0a0b0d !important;
}

/* Fließtext */
.FFestateview-default-details,
.FFestateview-default-details p,
.FFestateview-default-details td,
.FFestateview-default-details th,
.FFestateview-default-details li,
.FFestateview-default-details span,
.FFestateview-default-details div,
.FFestateview-default-details label {
  color: var(--ff-text-body) !important;
}

/* Überschriften / Hervorhebungen */
.FFestateview-default-details h1,
.FFestateview-default-details h2,
.FFestateview-default-details h3,
.FFestateview-default-details h4,
.FFestateview-default-details h5,
.FFestateview-default-details strong,
.FFestateview-default-details b,
.FFestateview-default-details-agent-name {
  color: var(--ff-text-strong) !important;
}

/* Preise / primärfarbene Elemente bleiben grün */
.FFestateview-default-details .ff-color-primary,
.FFestateview-default-details .ff-color-primary * {
  color: var(--ff-accent) !important;
}

/* Links & Makler-Kontakt grün */
.FFestateview-default-details a,
.FFestateview-default-details-agent-contact a,
.FFestateview-default-details-agent-contact-email {
  color: var(--ff-accent) !important;
}

/* Fakten-/Energietabellen: dunkle Linien + Zebra */
.FFestateview-default-details table { border-color: var(--ff-border) !important; }
.FFestateview-default-details td,
.FFestateview-default-details th { border-color: var(--ff-border-soft) !important; }
.FFestateview-default-details tr:nth-child(even) { background-color: var(--ff-bg-card-hover) !important; }

/* Tabs / Navigation */
.FFestateview-default-details-nav a { color: var(--ff-text-body) !important; }
.FFestateview-default-details-nav a:hover,
.FFestateview-default-details-nav a.active {
  color: var(--ff-accent) !important;
  border-bottom-color: var(--ff-accent) !important;
}

/* Makler-Bild rund mit Rahmen */
.FFestateview-default-details-agent-image img {
  border: 2px solid var(--ff-border) !important;
  border-radius: 50%;
}

/* Buttons (Anfragen / Senden) grün */
.FFestateview-default-popup-open,
.FFestateview-default-details button,
.FFestateview-default-details input[type="submit"],
.FFestateview-default-details .validateDontSubmit {
  background-color: var(--ff-accent) !important;
  color: #0d0e11 !important;
  border: 1px solid var(--ff-accent) !important;
  border-radius: var(--ff-radius-sm) !important;
}

/* Formularfelder (Anfrage-Popup auf der Detailseite) */
.FFestateview-default-details input,
.FFestateview-default-details select,
.FFestateview-default-details textarea {
  background-color: var(--ff-bg-base) !important;
  border: 1px solid var(--ff-border) !important;
  color: var(--ff-text-body) !important;
  border-radius: var(--ff-radius-sm) !important;
}
.FFestateview-default-details input::placeholder,
.FFestateview-default-details textarea::placeholder { color: var(--ff-text-muted) !important; }

/* ---------------------------------------------------------------------
   10) Header-Fix NUR für die virtuellen FlowFact-Seiten (body.page-id-0)
       Der Divi-Theme-Builder-Header bekommt auf der virtuellen
       Connector-Seite kein Modul-CSS -> Menü vertikal + Mobilmenü doppelt.
       Scope `body.page-id-0` trifft ausschließlich die FF-Routen
       (/ff/immobilien*), echte Divi-Seiten (page-id-1234) bleiben unberührt.
   ------------------------------------------------------------------- */
body.page-id-0 .et_pb_menu_inner_container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  padding: 10px 0 !important;
}
body.page-id-0 .et_pb_menu__wrap { display: flex !important; align-items: center !important; }

/* Logo exakt wie Hauptseite (160px) */
body.page-id-0 .et_pb_menu__logo-wrap { width: auto !important; height: auto !important; max-width: 180px !important; }
body.page-id-0 .et_pb_menu__logo { width: auto !important; height: auto !important; }
body.page-id-0 .et_pb_menu__logo img { display: block !important; width: 160px !important; max-width: 160px !important; height: auto !important; }

/* Desktop-Menü horizontal, Werte exakt wie Hauptseite */
body.page-id-0 .et_pb_menu__menu > ul,
body.page-id-0 #menu-main-menu {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  align-items: center !important;
}
body.page-id-0 #menu-main-menu > li {
  display: inline-block !important;
  float: none !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 11px !important;
}
body.page-id-0 #menu-main-menu > li > a {
  color: #c4af91 !important;
  font-weight: 300 !important;
  font-size: 17.6px !important;
  font-family: "Manrope", Helvetica, Arial, sans-serif !important;
  text-transform: none !important;
  text-decoration: none !important;
}
body.page-id-0 #menu-main-menu > li > a:hover { color: var(--ff-accent) !important; }

/* Doppeltes Mobilmenü + Hamburger auf Desktop ausblenden */
body.page-id-0 .et_mobile_nav_menu,
body.page-id-0 .mobile_nav,
body.page-id-0 .mobile_menu_bar { display: none !important; }

/* Auf kleinen Screens: Desktop-Menü aus, Hamburger an (Divi-JS bleibt funktionsfähig) */
@media (max-width: 980px) {
  body.page-id-0 .et_pb_menu__menu > ul,
  body.page-id-0 #menu-main-menu { display: none !important; }
  body.page-id-0 .et_mobile_nav_menu,
  body.page-id-0 .mobile_nav,
  body.page-id-0 .mobile_menu_bar { display: block !important; }
}

/* ---------------------------------------------------------------------
   11) Volle Breite für die FlowFact-Seiten (Sidebar entfernen)
       Die FF-Seite nutzt Divis rechtes Sidebar-Layout -> Inhalt nur 855px.
       Auf den virtuellen FF-Seiten Sidebar ausblenden + Container breiter.
   ------------------------------------------------------------------- */
body.page-id-0 #sidebar { display: none !important; }
body.page-id-0 #left-area { width: 100% !important; padding-right: 0 !important; }
body.page-id-0 #content-area { width: 100% !important; max-width: 100% !important; }
body.page-id-0 .container { width: 92% !important; max-width: 1280px !important; }

/* Divi-Trennlinie (.container::before = 1px, hellgrau #e2e2e2, volle Höhe, position:absolute)
   auf den FF-Seiten ausblenden – das war der hartnäckige „weiße Strich" links. */
body.page-id-0 #main-content .container::before,
body.page-id-0 .container::before { display: none !important; }

/* Seiten-Hintergrund durchgehend dunkel – sonst weiße Ränder links/rechts
   (body + #main-content sind sonst weiß und voller Breite) */
body.page-id-0,
body.page-id-0 #page-container,
body.page-id-0 #et-boc,
body.page-id-0 #et-main-area,
body.page-id-0 #main-content,
body.page-id-0 #content-area,
body.page-id-0 #left-area,
body.page-id-0 .entry-content,
body.page-id-0 article.post-0,
body.page-id-0 #et-main-area .container {
  background-color: var(--ff-bg-base) !important;
}

/* Theme-Überschrift (Post-Titel) auf den FF-Seiten hell */
body.page-id-0 .entry-title,
body.page-id-0 h1.main_title,
body.page-id-0 .entry-title a {
  color: var(--ff-text-strong) !important;
}

/* ---------------------------------------------------------------------
   12) Städte-Filter-Dropdown ([deckert_immobilien stadtfilter="on"])
   ------------------------------------------------------------------- */
.imw-stadtfilter-bar { margin: 0 0 24px; }
.imw-cityfilter {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  max-width: 100%;
}
.imw-cityfilter-label {
  color: var(--ff-text-body); font-weight: 500; letter-spacing: .02em;
}
.imw-cityfilter-field { position: relative; display: inline-block; }

/* Lupen-Icon */
.imw-cityfilter-icon {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  fill: none; stroke: rgba(255,255,255,.55); stroke-width: 2; stroke-linecap: round;
  pointer-events: none; z-index: 2;
}
.imw-cityfilter-field:focus-within .imw-cityfilter-icon { stroke: var(--ff-accent, #8cbe3a); }

/* Glasmorphismus-Eingabefeld */
.imw-cityfilter-input {
  width: 300px; max-width: 70vw; font-family: inherit; font-size: 1rem;
  color: #fff !important;
  padding: 13px 44px 13px 46px !important;
  background: rgba(255,255,255,.06) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.imw-cityfilter-input::placeholder { color: rgba(255,255,255,.5); }
.imw-cityfilter-input:hover { background: rgba(255,255,255,.09) !important; }
.imw-cityfilter-input:focus {
  outline: none;
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(140,190,58,.7) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.4), 0 0 0 3px rgba(140,190,58,.25), inset 0 1px 0 rgba(255,255,255,.1);
}
.imw-cityfilter-input[disabled] { opacity: .55; }

/* Zurücksetzen-Button */
.imw-cityfilter-clear {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; line-height: 24px; text-align: center;
  background: rgba(255,255,255,.1); border: 0; color: #fff;
  font-size: 18px; cursor: pointer; padding: 0; border-radius: 50%; z-index: 2;
  transition: background .15s, color .15s;
}
.imw-cityfilter-clear:hover { background: rgba(140,190,58,.9); color: #0d0e11; }

/* Glas-Dropdown */
.imw-cityfilter-list {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 9999;
  width: 300px; max-width: 80vw; max-height: 340px; overflow-y: auto; padding: 6px;
  background: rgba(22,24,30,.72);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.55);
}
.imw-cityfilter-list[hidden] { display: none; }
.imw-cityfilter-list::-webkit-scrollbar { width: 8px; }
.imw-cityfilter-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 8px; }
.imw-cityfilter-opt {
  padding: 10px 14px; cursor: pointer; color: rgba(255,255,255,.82);
  font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-radius: 10px; transition: background .12s, color .12s;
}
.imw-cityfilter-opt:first-child { margin-bottom: 4px; color: #fff; font-weight: 600; }
.imw-cityfilter-opt:hover {
  background: linear-gradient(90deg, rgba(140,190,58,.92), rgba(140,190,58,.68)); color: #0d0e11;
}

/* ---------------------------------------------------------------------
   13) Header/Footer-Angleichung für die virtuellen FlowFact-Seiten
       Auf den virtuellen Connector-Routen (body.page-id-0) gibt Divi das
       seitenspezifische Theme-Builder-Modul-CSS (dunkle Sektions-Hintergründe
       + Hell-Text-Behandlung) nicht aus. Folge: die obere Kontaktleiste und
       der komplette Footer-Text fallen auf dunkle Default-Farben zurück
       (schwarz/dunkel auf dunklem Grund = unsichtbar) und das Hauptmenü war
       beige statt weiß. Diese Regeln stellen den Look der restlichen Website
       wieder her. Live verifiziert auf Desktop UND Mobile.

       Farbwerte an die Hauptseite angelehnt: Top-Leiste #e6e3da (hellgrau),
       Menü #fff (aktiv/hover grün), Footer-Text #f5f5f5. Bei künftigen Divi-
       Designänderungen hier nachziehen.
   ------------------------------------------------------------------- */

/* Obere Kontaktleiste (E-Mail | Telefon) hell – wie auf der Hauptseite */
body.page-id-0 .et-l--header .et_pb_text,
body.page-id-0 .et-l--header .et_pb_text p,
body.page-id-0 .et-l--header .et_pb_text span,
body.page-id-0 .et-l--header .et_pb_text a {
  color: #e6e3da !important;
}

/* Hauptmenü: Ruhefarbe weiß (Desktop-Menü UND mobiles Menü), aktiv/hover grün */
body.page-id-0 #menu-main-menu > li > a,
body.page-id-0 .et_pb_menu__menu > ul > li > a,
body.page-id-0 .et_mobile_menu li a,
body.page-id-0 .et-l--header .et_mobile_menu a {
  color: #ffffff !important;
  opacity: 1 !important;
}
body.page-id-0 #menu-main-menu > li.current-menu-item > a,
body.page-id-0 #menu-main-menu > li > a:hover,
body.page-id-0 .et_pb_menu__menu > ul > li > a:hover,
body.page-id-0 .et_mobile_menu li a:hover {
  color: var(--ff-accent) !important;
}

/* Footer: Überschriften + Text hell wie auf der Hauptseite.
   Links (a) bleiben absichtlich unangetastet → behalten ihr Theme-Blau. */
body.page-id-0 .et-l--footer,
body.page-id-0 .et-l--footer p,
body.page-id-0 .et-l--footer li,
body.page-id-0 .et-l--footer span,
body.page-id-0 .et-l--footer h1,
body.page-id-0 .et-l--footer h2,
body.page-id-0 .et-l--footer h3,
body.page-id-0 .et-l--footer h4,
body.page-id-0 .et-l--footer h5,
body.page-id-0 .et-l--footer h6,
body.page-id-0 .et-l--footer .et_pb_text {
  color: #f5f5f5 !important;
}

/* ---------------------------------------------------------------------
   14) Mobiles Hamburger-Menü + Footer-Social-Icon (virtuelle FF-Seiten)
       Divi rendert auf den virtuellen Routen zwar das Menü-Markup und der
       native jQuery-Toggle funktioniert, aber das zugehörige Modul-CSS wird
       nicht ausgegeben. Folge ohne diese Regeln: Hamburger-Glyph fehlt, das
       Menü hängt offen (statt zu, hinterm Hamburger) und ungestylt, und das
       Instagram-Icon im Footer zeigt den Rohtext „Follow". Wir liefern nur
       das fehlende CSS nach – Divis Klick-Handler übernimmt das Auf/Zu, es
       ist KEIN eigenes JS nötig. Alle Werte 1:1 vom Original übernommen.
   ------------------------------------------------------------------- */

/* --- Hamburger-Menü (nur mobil ≤980px, wie Divis Breakpoint) --- */
@media (max-width: 980px) {

  /* Hamburger-Icon PER CSS GEZEICHNET (3 weiße Linien) statt via ETmodules-
     Glyph. Der Glyph rendert auf den virtuellen FF-Seiten unzuverlässig
     (Font-Timing) und war in Original-Braun kaum sichtbar → Menü wirkte
     „verschwunden". Gezeichnet ist es schriftunabhängig und immer sichtbar. */
  body.page-id-0 .et-l--header .mobile_menu_bar { position: relative !important; height: 32px !important; margin-top: -9px !important; }
  body.page-id-0 .et-l--header .mobile_menu_bar:before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 26px !important;
    height: 3px !important;
    background: #fff !important;
    border-radius: 2px !important;
    box-shadow: 0 -8px 0 #fff, 0 8px 0 #fff !important;
    font-size: 0 !important;
  }

  /* Menü standardmäßig zu; Divis Toggle schaltet .opened/.closed am .mobile_nav */
  body.page-id-0 .et-l--header .mobile_nav.closed .et_mobile_menu { display: none; }
  body.page-id-0 .et-l--header .mobile_nav.opened .et_mobile_menu { display: block; }

  /* Panel: absolut unter dem Header, volle Modulbreite, Look wie Original */
  body.page-id-0 .et-l--header .et_pb_menu,
  body.page-id-0 .et-l--header .et_pb_menu_inner_container { position: relative !important; }
  body.page-id-0 .et-l--header .et_mobile_menu {
    position: absolute !important;
    top: 100% !important; left: 0 !important; right: 0 !important;
    width: 100% !important; box-sizing: border-box !important;
    z-index: 9999 !important;
    background: #5c4a3e !important;
    border-top: 3px solid var(--ff-accent) !important;
    padding: 0 !important;
    text-align: left !important;
  }
  body.page-id-0 .et-l--header .et_mobile_menu li a {
    color: #fff !important;
    padding: 10px 20px !important;
    border-bottom: 1px solid rgba(0,0,0,.03) !important;
    font-size: 16px !important;
    text-align: left !important;
    display: block !important;
  }
  body.page-id-0 .et-l--header .et_mobile_menu li.current-menu-item > a,
  body.page-id-0 .et-l--header .et_mobile_menu li a:hover {
    color: var(--ff-accent) !important;
  }
}

/* --- Footer-Social-Icon: „Follow"-Rohtext ausblenden, Instagram-Icon zeigen ---
   Gilt auf allen Breiten (Desktop-FF-Seite hat dasselbe Problem). */
body.page-id-0 .et-l--footer .et_pb_social_media_follow a.icon {
  background: var(--ff-accent) !important;
  width: 40px !important; height: 40px !important;
  border-radius: 8px !important;
  display: inline-block !important; position: relative !important;
}
body.page-id-0 .et-l--footer .et_pb_social_media_follow_network_name {
  position: absolute !important; width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important;
}
body.page-id-0 .et-l--footer .et_pb_social_media_follow a.icon:before {
  content: "\e09a" !important;   /* Instagram-Glyph im ETmodules-Font */
  font-family: 'ETmodules' !important;
  color: #fff !important; font-size: 20px !important;
  line-height: 40px !important; text-align: center !important;
  display: block !important; width: 40px !important;
}



/* ---------------------------------------------------------------------
   16) Footer-Inhalt zentrieren (nicht bündig am Bildschirmrand)
       Divis Row-Zentrierung (margin:auto) greift auf den virtuellen FF-
       Seiten nicht → die Footer-Zeile hing mit margin-left:0 am linken Rand,
       der Text klebte an der Bildschirmkante. Wieder zentrieren wie im
       Original (gleiche Gutter links/rechts).
   ------------------------------------------------------------------- */
body.page-id-0 .et-l--footer .et_pb_row {
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ---------------------------------------------------------------------
   17) Footer-Feinschliff (virtuelle FF-Seiten): einzelne Divi-Modul-Styles,
       die auf den virtuellen Seiten fehlen, 1:1 wie im Original nachziehen.
   ------------------------------------------------------------------- */
/* Footer-Listen ohne Aufzählungspunkte (Social-Icon-Liste + Legal-Menü) –
   sonst schlägt der Theme-Default li{list-style:disc} durch. */
body.page-id-0 .et-l--footer ul { list-style: none !important; padding-left: 0 !important; }
body.page-id-0 .et-l--footer li { list-style: none !important; }
body.page-id-0 .et-l--footer .et_pb_social_media_follow li { display: inline-block !important; }

/* Kontakt-Blurbs: Icon links, 15px Abstand zum Text, mittig ausgerichtet. */
body.page-id-0 .et-l--footer .et_pb_blurb .et_pb_blurb_content { align-items: center !important; }
body.page-id-0 .et-l--footer .et_pb_blurb .et_pb_blurb_container { padding-left: 15px !important; }

/* Kontakt-Icons grün wie im Original (Abschnitt 13 färbt Footer-Text hell –
   hier für die Icons gezielt überschreiben). */
body.page-id-0 .et-l--footer .et_pb_blurb .et-pb-icon { color: var(--ff-accent) !important; }


/* ---------------------------------------------------------------------
   18) Desktop-Layout der Header-/Footer-Zeilen (virtuelle FF-Seiten)
       Divis Spalten-Layout (Row = Flex-Zeile mit nebeneinanderliegenden
       Spalten) fehlt auf den virtuellen Seiten → die Spalten stapeln als
       Block: im Header rutscht der „Termin"-Button mittig unter das Menü
       statt rechts daneben; im Footer stapeln „© MP-Webdesign" und die
       Legal-Links statt in einer Zeile. Nur Desktop (>=981px) – mobil gilt
       weiter der Hamburger-/Stack-Zustand aus Abschnitt 10.
   ------------------------------------------------------------------- */
@media (min-width: 981px) {

  /* Header-Zeile: Logo/Menü links, „Termin vereinbaren"-Button rechts daneben */
  body.page-id-0 .et-l--header .et_pb_row_1_tb_header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }
  body.page-id-0 .et-l--header .et_pb_row_1_tb_header > .et_pb_column {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
  }
  body.page-id-0 .et-l--header .et_pb_row_1_tb_header > .et_pb_column:first-child { flex: 1 1 auto !important; }
  body.page-id-0 .et-l--header .et_pb_row_1_tb_header > .et_pb_column:last-child  { flex: 0 0 auto !important; }

  /* Footer-Bottom-Bar: „© MP-Webdesign" links, Legal-Links rechts – eine Zeile */
  body.page-id-0 .et-l--footer .et_pb_row_1_tb_footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }
  body.page-id-0 .et-l--footer .et_pb_row_1_tb_footer > .et_pb_column {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
  }
}


/* ---------------------------------------------------------------------
   19) Mobile-Header-Layout (virtuelle FF-Seiten): Logo links, „Termin"-
       Button + Hamburger rechts auf EINER Zeile (wie Original). Divis Flex-
       Row samt absolut positionierter Button-Spalte fehlt auf den virtuellen
       Seiten → der Button stapelte mittig/über dem Logo. Zusätzlich das
       mobile Logo auf Original-Größe (~105px) verkleinern, damit es nicht
       mit dem Button überlappt. Nur mobil (<=980px).
   ------------------------------------------------------------------- */
@media (max-width: 980px) {
  body.page-id-0 .et-l--header .et_pb_row_1_tb_header {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
  }
  body.page-id-0 .et-l--header .et_pb_row_1_tb_header > .et_pb_column:first-child {
    position: relative !important;
    width: 100% !important;
    flex: 1 1 auto !important;
  }
  body.page-id-0 .et-l--header .et_pb_row_1_tb_header > .et_pb_column:last-child {
    position: absolute !important;
    right: 58px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    margin: 0 !important;
  }
  /* Logo auf Original-Größe – verhindert Überlappung mit dem Button */
  body.page-id-0 .et-l--header .et_pb_menu__logo img {
    width: 105px !important;
    max-width: 105px !important;
  }
  /* Footer-Bottom-Bar (mobil gestapelt): „© MP-Webdesign" mittig */
  body.page-id-0 .et-l--footer .et_pb_column_3_tb_footer,
  body.page-id-0 .et-l--footer .et_pb_column_3_tb_footer .et_pb_text,
  body.page-id-0 .et-l--footer .et_pb_column_3_tb_footer p {
    text-align: center !important;
  }
}