/*
 * Bauvorhaben – BASIS-Stile (Plugin-eigen, NICHT direkt editieren)
 * ----------------------------------------------------------------
 * Diese Datei liefert das Grunddesign fuer die Uebersicht [bauvorhaben_uebersicht] und die
 * Kurzversion [bauvorhaben_kurz] – unabhaengig vom seiten-spezifischen Elementor-CSS.
 * Werte stammen aus dem Original-Design (globale Elementor-Variablen) mit Fallback.
 *
 * ANPASSEN bitte in assets/css/style.css (laedt DANACH und ueberschreibt hier alles) oder
 * per Theme. Diese Datei kann ein Plugin-Update ersetzen.
 */

/* =====================================================================
 *  UEBERSICHT  [bauvorhaben_uebersicht]
 * ===================================================================== */

/* Layout: grosse Karten (Bild | Inhalt), untereinander */
.bv-uebersicht .e-parent {
  max-width: 100%;
  margin: 0 0 2.5rem;
}
.bv-uebersicht .e-con-inner {
  width: 100%;
  max-width: 100%;
  padding: 0;
}
/* 2 Spalten, automatische Zeilenhoehe erzwingen: die seiten-spezifische Elementor-CSS
   (var(--e-con-grid-template-columns/-rows)) erzeugt auf /bauvorhaben/ sonst eine ueberfluessige
   3. Spalte bzw. eine absurde Grid-Hoehe -> daher !important. */
.bv-uebersicht .e-grid {
  display: grid;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: auto !important;
  grid-auto-rows: auto !important;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (max-width: 767px) {
  .bv-uebersicht .e-grid {
    grid-template-columns: 1fr !important;
  }
}
.bv-uebersicht .e-entry-column-alternate {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Zickzack: jede zweite Karte tauscht Bild/Inhalt (Klasse setzt der Shortcode) */
.bv-uebersicht .bv-row-alt .e-entry-column-alternate:first-child {
  order: 1;
}

/* Bild quadratisch (Padding-Hack -> feste Hoehe unabhaengig von aspect-ratio/Flex/Theme). */
.bv-uebersicht .bv-img-square {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}
.bv-uebersicht .bv-img-square::before {
  content: "";
  display: block;
  padding-top: 100%;
}
.bv-uebersicht .bv-img-square img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bv-uebersicht .bv-img-square .banner-image-module-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Ueberschriften: Ort + Unterueberschrift (globale Typo "aa03175") */
.bv-uebersicht .elementor-heading-title {
  margin: 0 0 0.35rem;
  font-family: var(--e-global-typography-aa03175-font-family, inherit);
  font-size: var(--e-global-typography-aa03175-font-size, 24px);
  line-height: var(--e-global-typography-aa03175-line-height, 1.2);
  letter-spacing: var(--e-global-typography-aa03175-letter-spacing, normal);
}
/* Zweite Ueberschrift (Unterueberschrift) grau */
.bv-uebersicht
  .elementor-widget-heading
  + .elementor-widget-heading
  .elementor-heading-title {
  color: var(--e-global-color-e2c776a, #737373);
}

/* Beschreibung (globale Typo "35e8d38") */
.bv-uebersicht .elementor-widget-text-editor {
  margin: 0.25rem 0 1.25rem;
  font-family: var(--e-global-typography-35e8d38-font-family, inherit);
  font-size: var(--e-global-typography-35e8d38-font-size, 1rem);
  line-height: var(--e-global-typography-35e8d38-line-height, 1.6);
}

/* Button "Jetzt entdecken" (globale Typo "7865264", Rot #CF152D) */
.bv-uebersicht .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: start;
  background: #fff;
  color: var(--e-global-color-4a5871a, #cf152d);
  fill: var(--e-global-color-4a5871a, #cf152d);
  font-family: var(--e-global-typography-7865264-font-family, inherit);
  font-size: var(--e-global-typography-7865264-font-size, 13px);
  text-transform: var(--e-global-typography-7865264-text-transform, uppercase);
  line-height: var(--e-global-typography-7865264-line-height, 1.4);
  letter-spacing: var(--e-global-typography-7865264-letter-spacing, 1px);
  border: 1px solid var(--e-global-color-4a5871a, #cf152d);
  border-radius: 6px;
  padding: 13px 18px;
  text-decoration: none;
  transition:
    background 0.2s,
    color 0.2s,
    fill 0.2s;
}
.bv-uebersicht .elementor-button:hover {
  background: var(--e-global-color-4a5871a, #cf152d);
  color: #fff;
  fill: #fff;
}
.bv-uebersicht .elementor-button-icon svg {
  width: 1em;
  height: 1em;
}

/* =====================================================================
 *  KURZVERSION  [bauvorhaben_kurz]
 * ===================================================================== */

.bv-kurz {
  display: grid;
  grid-template-columns: repeat(var(--bv-kurz-cols, 4), 1fr);
  gap: 1.75rem;
}
.bv-kurz-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
/* Feste 3:2-Box per Padding-Hack -> alle Bilder exakt gleich hoch, unabhaengig von aspect-ratio/Flex/Theme. */
.bv-kurz-img {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}
.bv-kurz-img::before {
  content: "";
  display: block;
  padding-top: 66.6667%;
}
.bv-kurz-img img {
  position: absolute;
  inset: 0;
  max-width: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

.bv-kurz-card:hover .bv-kurz-img img {
  transform: scale(1.04);
}
.bv-kurz-city {
  margin-top: 0.7rem;
  font-family: var(--e-global-typography-aa03175-font-family, inherit);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
}
.bv-kurz-sub {
  font-family: var(--e-global-typography-aa03175-font-family, inherit);
  font-size: 0.95rem;
  opacity: 0.7;
  line-height: 1.3;
}
@media (max-width: 1024px) {
  .bv-kurz {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .bv-kurz {
    grid-template-columns: 1fr;
  }
}

/*
 * Fade-In der Bauvorhaben-Inhalte: beim Laden opacity 0, im Viewport opacity 1.
 *
 * Ausgangslage: Unser statisches Elementor-Markup (Templates + bv_heading_html) traegt
 * "animated fadeInUp" bereits beim Parsen und bewusst KEIN "elementor-invisible" --
 * Elementors Frontend-JS verarbeitet dieses Markup nicht (verifiziert), es wuerde
 * "elementor-invisible" also nie entfernen und der Inhalt bliebe dauerhaft unsichtbar.
 * Es gibt hier also weder einen Viewport-Trigger noch einen sauberen Startzustand.
 *
 * Elementors Keyframe-Weg hat sich dafuer als zu fragil erwiesen (fill-mode, Delay-Phase,
 * Pause/Resume, teils verschachtelte Wrapper aus eingefuegtem Markup). Deshalb steuern wir
 * das Einblenden bewusst NICHT ueber die Keyframes, sondern ueber eine simple Transition:
 * "bv-js" (von bv_print_reveal_flag noch vor dem ersten Paint ins <html> gesetzt) haelt die
 * Elemente auf opacity 0, bv_print_reveal_script setzt beim Viewport-Eintritt "bv-inview".
 * Ein Zustand, ein Uebergang -- kein Restart, keine Delay-Phase, kein Aufblitzen.
 *
 * Failsafe: Bleibt das Reveal-Script aus, entfernt ein Timer das "bv-js"-Flag; damit
 * greifen alle Regeln unten nicht mehr und die Inhalte sind normal sichtbar.
 * Bewusst nur auf unsere eigenen Wrapper gescoped, damit echte, von Elementors JS
 * gesteuerte Widgets unberuehrt bleiben.
 *
 * Distanz/Dauer als Custom Properties -- anpassbar, ohne die Regeln zu aendern.
 * (Houzez nutzt fuer seine Einblender ebenfalls feste Pixelwerte, z. B. 16px, statt
 * Elementors translate3d(0,100%,0) = 100 % der Elementhoehe -> beim 364px hohen Bild
 * ein sichtbar zu langer Weg.)
 */
.bv-uebersicht,
.bv-detail-header {
  --bv-fade-distance: 24px;
  --bv-fade-duration: 0.6s;
}

.bv-js .bv-uebersicht .animated,
.bv-js .bv-detail-header .animated {
  /* Elementors fadeInUp komplett abschalten -- wir animieren selbst. */
  animation: none;
  opacity: 0;
  transform: translate3d(0, var(--bv-fade-distance, 24px), 0);
  transition:
    opacity var(--bv-fade-duration, 0.6s) ease,
    transform var(--bv-fade-duration, 0.6s) ease;
}

.bv-js .bv-uebersicht .animated.bv-inview,
.bv-js .bv-detail-header .animated.bv-inview {
  opacity: 1;
  transform: none;
}

/*
 * Verschachtelte Wrapper stilllegen.
 * In mehreren Bauvorhaben-Textfeldern steckt eingefuegtes Elementor-Markup, das ein
 * komplettes Widget MIT "animated fadeInUp" mitbringt. Es landet ueber {{TEXT}} innerhalb
 * unseres eigenen Widgets -> zwei ineinander verschachtelte Einblender auf demselben Text
 * (die Opacity multipliziert sich): "erst da, weg, wieder einfaden". Nur der aeussere
 * Wrapper animiert; der innere bleibt statisch. Sauber ist, das Markup aus den Textfeldern
 * zu entfernen (siehe templates/README.md).
 */
.bv-js .bv-uebersicht .animated .animated,
.bv-js .bv-detail-header .animated .animated {
  animation: none;
  opacity: 1;
  transform: none;
  transition: none;
}

/*
 * Fallback ohne JS: Elementors Keyframe laeuft beim Laden. Wenigstens Startzustand
 * (fill-mode) und Laufweg/Dauer geradeziehen, damit auch dieser Pfad sauber aussieht.
 */
@keyframes bv-fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, var(--bv-fade-distance, 24px), 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

html:not(.bv-js) .bv-uebersicht .animated.fadeInUp,
html:not(.bv-js) .bv-detail-header .animated.fadeInUp {
  animation-name: bv-fadeInUp;
  animation-duration: var(--bv-fade-duration, 0.6s);
  animation-fill-mode: both;
}