/*
 * Bauvorhaben – eigene Design-Anpassungen
 * ----------------------------------------
 * Hier kleine Frontend-Korrekturen eintragen. Diese Datei wird auf allen Seiten geladen
 * (Versionierung per filemtime, also Cache-Bust beim Speichern automatisch).
 *
 * Nuetzliche Hooks/Klassen:
 *   .bv-uebersicht            Wrapper der Uebersicht (Shortcode)
 *   .bv-card                  einzelne Karte (sofern im Template verwendet)
 *   .bv-img-square            quadratischer Bild-Wrap
 *   .bv-row-alt               jede zweite Karte (Zickzack)
 *   .e_teaser                 Teaser-Ueberschrift auf der Detailseite
 *   .bv-listings              Wohnungsliste auf der Detailseite
 */

.bv-bauvorhaben h1,
.bv-bauvorhaben h2,
.bv-bauvorhaben .bv-listings.listing-view.list-view {
  padding-top: 5rem;
}

.bv-bauvorhaben .e_teaser {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

.bv-bauvorhaben h1.elementor-heading-title.elementor-size-default,
.bv-bauvorhaben h2.elementor-heading-title.elementor-size-default {
  font-family: var(--e-global-typography-7865264-font-family);
  font-size: var(--e-global-typography-7865264-font-size);
  text-transform: var(--e-global-typography-7865264-text-transform);
  line-height: var(--e-global-typography-7865264-line-height);
  letter-spacing: var(--e-global-typography-7865264-letter-spacing);
  color: var(--e-global-color-4a5871a);
  text-align: center;
}

.bv-bauvorhaben .e_teaser h2.elementor-heading-title.elementor-size-default {
  padding-top: 0;
  font-family: var(--e-global-typography-aa03175-font-family);
  font-size: var(--e-global-typography-aa03175-font-size);
  line-height: var(--e-global-typography-aa03175-line-height);
  letter-spacing: var(--e-global-typography-aa03175-letter-spacing);
  text-transform: none;
  color: #000000;
}

.bv-bauvorhaben .e_teaser {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

/********************* Table Start *********************/

.bv-detail-table {
  background-color: #fff;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-collapse: collapse;
}

.bv-detail-table tr th {
  font-family: var(--e-global-typography-e7a3cf2-font-family);
  font-size: var(--e-global-typography-e7a3cf2-font-size);
  line-height: var(--e-global-typography-e7a3cf2-line-height);
  color: var(--e-global-color-7265778);
}

.bv-detail-table tr td {
  font-family: var(--e-global-typography-35e8d38-font-family);
  font-size: var(--e-global-typography-35e8d38-font-size);
  line-height: var(--e-global-typography-35e8d38-line-height);
  color: var(--e-global-color-7265778);
}

.bv-detail-table {
  margin-left: auto;
  margin-right: auto;
}

/* Alle alten Linien restlos entfernen */
.bv-detail-table,
.bv-detail-table tr,
.bv-detail-table th,
.bv-detail-table td {
  border: none !important;
  box-shadow: none !important;
}

@media (min-width: 60rem) {
  /* Der Tabellen-Body wird zu einem Grid mit 3 Spalten */
  .bv-detail-table tbody {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 gleich breite Spalten */
    gap: 10px 40px; /* 10px Abstand nach unten, 40px Abstand zwischen den Blöcken */
  }

  /* Macht die Zeilen-Inhalte (th und td) intern zu einer Reihe */
  .bv-detail-table tr {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* SGE-REGELUNG: Zeilen explizit in die richtige Spalte zwingen */

  /* Reihe 1 (Objekte) & Reihe 2 (Preis) -> Bleiben in Spalte 1 */
  .bv-detail-table tr:nth-child(1),
  .bv-detail-table tr:nth-child(2) {
    grid-column: 1;
  }

  /* Reihe 3 (Wohnungsgroesse) & Reihe 4 (Zimmer) -> Wandern in Spalte 2 */
  .bv-detail-table tr:nth-child(3),
  .bv-detail-table tr:nth-child(4) {
    grid-column: 2;
  }

  /* Reihe 5 (Art) & Reihe 6 (Fertigstellung) -> Wandern in Spalte 3 */
  .bv-detail-table tr:nth-child(5),
  .bv-detail-table tr:nth-child(6) {
    grid-column: 3;
  }

  /* Zeilenumbruch korrigieren: Zeile 2, 4 und 6 in die zweite Reihe des Grids zwingen */
  .bv-detail-table tr:nth-child(2),
  .bv-detail-table tr:nth-child(4),
  .bv-detail-table tr:nth-child(6) {
    grid-row: 2;
  }

  /* 1. Das Tabellen-Haupt-Element komplett als Block-Element erzwingen */
  .bv-detail-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box !important;
  }

  /* 2. Das Grid füllt die Box nun garantiert zu 100% aus */
  .bv-detail-table tbody {
    display: grid !important;
    grid-template-columns: repeat(
      3,
      1fr
    ) !important; /* 3 exakt gleich große Spalten */
    gap: 15px 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 3. Zeilen strecken sich über die gesamte Breite ihrer jeweiligen Grid-Zelle */
  .bv-detail-table tr {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .bv-detail-table tr {
    padding-bottom: 0.25rem !important;
    border-bottom: #d9d9d9 1px solid !important;
  }

  .bv-detail-table {
    padding-bottom: 1rem !important;
  }
}

/* Optisches Tuning für Texte */
.bv-detail-table th {
  text-align: left;
  font-weight: bold;
  padding-right: 15px;
  white-space: nowrap; /* Verhindert unschöne Zeilenumbrüche im Label */
}

.bv-detail-table td {
  text-align: right;
  white-space: nowrap;
}

/* 4. Labels und Werte flexibel machen */
.bv-detail-table th,
.bv-detail-table td {
  border: none !important;
  box-shadow: none !important;
  background: none !important; /* Entfernt eventuelle Theme-Hintergründe */
}

.bv-detail-table th {
  text-align: left !important;
  font-weight: bold;
}

.bv-detail-table td {
  text-align: right !important;
}

.bv-detail-table {
  border-radius: 0.5rem;
  padding: 0.5rem;
}

/********************* Table End *********************/

.bv-bauvorhaben
  .bv-listings.listing-view.list-view
  .item-listing-wrap
  .item-body
  .item-author,
.bv-bauvorhaben
  .bv-listings.listing-view.list-view
  .item-listing-wrap
  .item-body
  .item-date {
  display: none;
  visibility: hidden;
}

.bv-bauvorhaben .bv-listings + div {
  --divider-border-style: solid;
  --divider-color: var(--e-global-color-4a5871a);
  --divider-border-width: 1px;
  --divider-icon-size: 40px;
  --divider-element-spacing: 20px;
}

.bv-bauvorhaben .bv-listings + div .elementor-divider {
  text-align: center;
  padding-block-start: 100px;
  padding-block-end: 100px;
}

.bv-bauvorhaben
  .bv-listings
  + div
  .elementor-divider
  .elementor-divider-separator {
  margin: 0 auto;
  align-items: center;
  direction: ltr;
  display: flex;
  margin: 0;

  --divider-border-style: solid;
  --divider-color: var(--e-global-color-4a5871a);
  --divider-border-width: 1px;
  --divider-icon-size: 40px;
  --divider-element-spacing: 20px;

  width: 20%;
  margin-left: auto;
  margin-right: auto;
}

.bv-bauvorhaben
  .bv-listings
  + div
  .elementor-divider
  .elementor-divider-separator:before {
  border-block-end: 0;
  border-block-start: var(--divider-border-width) var(--divider-border-style)
    var(--divider-color);
  content: "";
  display: inline-flex;
  flex-grow: 1;
  box-sizing: border-box;

  vertical-align: center;
  align-items: center;
  justify-content: center;
  align-self: center;
}

.bv-bauvorhaben
  .bv-listings
  + div
  .elementor-divider
  .elementor-divider-separator:after {
  border-block-end: 0;
  border-block-start: var(--divider-border-width) var(--divider-border-style)
    var(--divider-color);
  content: "";
  display: inline-flex;
  flex-grow: 1;
  box-sizing: border-box;

  vertical-align: center;
  align-items: center;
  justify-content: center;
  align-self: center;
}

.bv-bauvorhaben
  .bv-listings
  + div
  .elementor-divider
  .elementor-divider-separator:after,
.bv-listings + div .elementor-divider .elementor-divider-separator:before {
  margin-left: 0;
  margin-right: 0;
}

.bv-bauvorhaben
  .bv-listings
  + div
  .elementor-divider
  .elementor-divider-separator:after {
  margin-left: 1rem;
}

.bv-bauvorhaben
  .bv-listings
  + div
  .elementor-divider
  .elementor-divider-separator:before {
  margin-right: 1rem;
}

.bv-bauvorhaben
  .bv-listings
  + div
  .elementor-divider
  .elementor-divider-separator:after {
}

.bv-bauvorhaben .elementor-icon {
  color: #69727d;
  display: inline-block;
  font-size: 50px;
  line-height: 1;
  text-align: center;
  transition: all 0.3s;

  --divider-border-style: solid;
  --divider-color: var(--e-global-color-4a5871a);
  --divider-border-width: 1px;
  --divider-icon-size: 40px;
  --divider-element-spacing: 20px;
}

.bv-bauvorhaben .elementor-icon svg {
  display: block;
  height: 1em;
  position: relative;
  width: 1em;
  font-size: var(--divider-icon-size);
  --divider-border-style: solid;
  --divider-color: var(--e-global-color-4a5871a);
  --divider-border-width: 1px;
  --divider-icon-size: 40px;
  --divider-element-spacing: 20px;
}

.tax-bauvorhaben footer .elementor-widget-spacer:first-of-type {
  padding-top: 100px;
}

/* Orts-Label ("BAD VILBEL" usw., Heading direkt nach dem Spacer aus uebersicht-city.html).
   14px = gleiche Groesse wie das baugleiche Label "Experte der Region" ausserhalb der
   Uebersicht; alle uebrigen Werte stimmten bereits ueberein (line-height 19px bleibt,
   passt fuer 14px). Betrifft NICHT die 24px-Karten-/Unterueberschriften. */
.bv-uebersicht
  .elementor-widget-spacer
  + .elementor-widget-heading
  .elementor-heading-title.elementor-size-default {
  font-family: "TASA Orbiter Bold";
  font-size: 14px;
  line-height: 19px;
  letter-spacing: 1.3px;
  text-align: center;
  text-transform: uppercase;
  color: rgb(207, 21, 45);
  height: 19px;
  margin: 0px;
  border: 0px none rgb(207, 21, 45);
}

.bv-uebersicht
  .e-grid
  .elementor-widget-heading
  .elementor-heading-title.elementor-size-default {
  font-size: 24px;
  line-height: 27px;
  letter-spacing: -0.2px;
  text-align: start;
  width: 423px;
  height: 27px;
  margin: 0px;
}

.bv-uebersicht
  .e-grid
  .elementor-widget-heading
  + .elementor-widget-heading
  .elementor-heading-title.elementor-size-default {
  font-size: 24px;
  line-height: 27px;
  letter-spacing: -0.2px;
  text-align: start;
  color: rgb(115, 115, 115);
  width: 423px;
  height: 27px;
  margin: 0px;
  border: 0px none rgb(115, 115, 115);
}

.bv-uebersicht
  .elementor-element.elementor-element-71d9326.e-con-full.e-flex.e-con.e-child.e-entry-column-alternate,
.bv-uebersicht
  .elementor-element.elementor-element-09f1b53.e-con-full.e-flex.e-con.e-child {
  display: flex;
  /* Vertikale Zentrierung */
  justify-content: center; /* Optionale horizontale Zentrierung */
}

.bv-uebersicht
  .elementor-element.elementor-element-09f1b53.e-con-full.e-flex.e-con.e-child {
  display: block;

  padding: 0 !important;
  margin: 0 !important;
}

.bv-uebersicht .elementor-widget-text-editor p {
  font-size: 16px;
  line-height: 20px;
  text-align: start;
}

.bv-uebersicht
  .elementor-element.elementor-element-dc0d416.e-grid.e-con-full.e-con.e-child {
  gap: 0px 100px;
}

@media (max-width: 767.98px) {
  .bv-uebersicht
    .elementor-element.elementor-element-dc0d416.e-grid.e-con-full.e-con.e-child {
    display: block;
  }
}

.bv-uebersicht .elementor-button.elementor-button-link.elementor-size-sm {
  font-family: "TASA Orbiter Bold";
  font-size: 13px;
  line-height: 19px;
  letter-spacing: 1.3px;
  text-align: center;
  text-transform: uppercase;

  background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box
    border-box;
  color: rgb(207, 21, 45);
  width: 195.609px;
  height: 47px;
  padding: 13px 15px 13px 18px;
  border: 1px solid rgb(207, 21, 45);
  border-style: solid;
  border-radius: 6px;
  display: inline-block;
  cursor: pointer;
  transition: 0.3s;
}

.bv-uebersicht .elementor-button.elementor-button-link.elementor-size-sm svg {
  fill: rgb(207, 21, 45);
}

.bv-uebersicht .elementor-button.elementor-button-link.elementor-size-sm:hover {
  font-family: "TASA Orbiter Bold";
  font-size: 13px;
  line-height: 19px;
  letter-spacing: 1.3px;
  text-align: center;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
  background: rgb(207, 21, 45) none repeat scroll 0% 0% / auto padding-box
    border-box;
  background-color: rgb(207, 21, 45);
  width: 195.609px;
  height: 47px;
  padding: 13px 15px 13px 18px;
  border: 1px solid rgb(207, 21, 45);
  border-style: solid;
  border-radius: 6px;
  display: inline-block;
  cursor: pointer;
  transition: 0.3s;
}

.bv-uebersicht
  .elementor-button.elementor-button-link.elementor-size-sm:hover
  svg {
  fill: rgb(255, 255, 255);
}

.bv-uebersicht .elementor-button-content-wrapper {
  flex-direction: row-reverse;
}

.bv-uebersicht .banner-image-module .banner-image-module-link,
.bv-uebersicht .banner-image-module:hover .banner-image-module-link {
  background-color: rgba(0, 0, 0, 0) !important;
}

/* =====================================================================
 *  MOBILE-FIX Uebersicht (<768px) — verifiziert im Browser 2026-07-22
 *  Ergaenzt die bestehende Mobile-Regel oben (e-grid -> display:block),
 *  die allein NICHT reicht.
 * ===================================================================== */
@media (max-width: 767.98px) {
  /* 1) "Text auf Bild": Die Bild-Spalte ist display:flex/column, dadurch
   *    kollabiert das Houzez-Banner-Widget als Flex-Item auf height:0
   *    (der Padding-Hack gibt nur dem inneren .bv-img-square Hoehe, nicht
   *    dem Widget-Wrapper). Bild-Spalte aus dem Flex-Kontext nehmen ->
   *    Widget wird normaler Block und uebernimmt die Bildhoehe. */
  .bv-uebersicht
    .e-grid
    > .e-con-full:has(> .elementor-widget-Houzez_Banner_Image) {
    display: block;
  }

  /* 2) Horizontaler Overflow: Ueber-/Unterueberschrift haben oben eine feste
   *    width:423px (breiter als das Viewport). Auf Mobile aufheben.
   *    Beide Selektoren noetig — die Unterueberschrift-Regel (+ ...) hat
   *    hoehere Spezifitaet. */
  .bv-uebersicht
    .e-grid
    .elementor-widget-heading
    .elementor-heading-title.elementor-size-default,
  .bv-uebersicht
    .e-grid
    .elementor-widget-heading
    + .elementor-widget-heading
    .elementor-heading-title.elementor-size-default {
    width: auto;
    height: auto;
  }
}

/* =====================================================================
 *  MOBILE: Kurz-Variante (.bv-kurz) — Thumbs groesser (verifiziert 2026-07-22)
 *  Das Shortcode-Widget ist ein Flex-Item im Elementor-Container und
 *  schrumpft auf seine Inhaltsbreite (~222px, bestimmt durch die laengste
 *  Textzeile) statt die volle Spaltenbreite zu fuellen -> Bilder zu klein.
 *  Widget auf volle Breite zwingen -> Bild fuellt die Spalte
 *  (gemessen 222x148 -> 335x223 px bei 375er-Viewport).
 * ===================================================================== */
@media (max-width: 767.98px) {
  .elementor-widget-shortcode:has(.bv-kurz) {
    width: 100%;
  }
}