/*
 * BGL Leitbild – Joomla-Fassung
 * Grundlage: Webflow-Export (css/bgl-leitbild.webflow.css), auf .bgl-leitbild eingegrenzt.
 * normalize.css, webflow.css, jQuery, webflow.js und Lenis werden nicht gebraucht.
 * Schrift: Titillium Web 300 kommt aus dem Template.
 * Einbindung: FlexiContent-Layout "themenseite", Parameter "CSS-Datei" = medien/leitbild/css/leitbild-joomla.css
 */

/* Seitenhintergrund weiß (Template setzt --bs-body-bg: #e7f0f5) */
body:has(.bgl-leitbild),
body:has(.bgl-leitbild) main {
  --bs-body-bg: #fff;
  --bs-body-bg-rgb: 255, 255, 255;
  background-color: #fff;
}

.bgl-leitbild {
  --lb-blau: #34a4d9;
  --lb-gruen: #afc90b;
  --lb-text: #333;
  --bs-body-color: var(--lb-text);
  padding-top: 40px;
  padding-bottom: 84px;
  background-color: #fff;
  color: var(--lb-text);
}

/* Container (ersetzt .w-layout-blockcontainer / .w-container / .con-max) */
.bgl-leitbild .lb-container {
  max-width: 1444px;
  margin-left: auto;
  margin-right: auto;
}

.bgl-leitbild .lb-container-text {
  max-width: 1390px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 129px;
  padding-left: 20px;
  padding-right: 20px;
}

/* Bänder mit Farbverlauf */
.bgl-leitbild .lb-band-gruen {
  background-image: linear-gradient(0deg, #fff, #f7f9e7 26% 68%, #fff);
}

.bgl-leitbild .lb-band-blau {
  background-image: linear-gradient(0deg, #fff, #ecf7fd 23%, #fff);
}

/* Grafiken (Desktop/Mobil schaltet <picture> um) */
.bgl-leitbild .lb-grafik,
.bgl-leitbild .lb-grafik img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
  border-radius: 0;
  background: none;
}

/* Typografie */
.bgl-leitbild .lb-titel {
  margin: 20px 0 10px;
  padding: 0;
  color: var(--lb-blau);
  text-transform: uppercase;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: 67px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: normal;
}

.bgl-leitbild .lb-titel.lb-gruen {
  color: var(--lb-gruen);
}

.bgl-leitbild .lb-text {
  margin: 0 0 10px;
  color: var(--lb-text);
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: 21px;
  font-weight: 300;
  line-height: 1.6;
}

.bgl-leitbild .lb-zentriert {
  text-align: center;
}

/* Einleitung: Text + Workshop-Foto */
.bgl-leitbild .lb-intro {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 79px;
}

.bgl-leitbild .lb-intro-text,
.bgl-leitbild .lb-intro-bild {
  width: 50%;
  min-width: 0;
}

/* Das Bild-Plugin kann das Foto in a.simplelightbox > picture einpacken
   und eine feste Breite (style="width: …px") setzen – hier abfangen */
.bgl-leitbild .lb-intro-bild a,
.bgl-leitbild .lb-intro-bild picture {
  display: block;
  width: 100%;
  border-radius: 30px;
  overflow: hidden;
}

.bgl-leitbild .lb-intro-bild img {
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 30px;
  background: none;
}

.bgl-leitbild .lb-intro-bild .hinweis-vergr {
  display: none !important;
}

.bgl-leitbild .lb-abstand {
  height: 140px;
}

.bgl-leitbild .lb-schluss {
  margin-bottom: 0;
}

@media screen and (max-width: 991px) {
  .bgl-leitbild .lb-titel {
    font-size: 35px;
  }

  .bgl-leitbild .lb-intro {
    flex-direction: column;
    gap: 34px;
  }

  .bgl-leitbild .lb-intro-text,
  .bgl-leitbild .lb-intro-bild {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  /* Webflow: 70px – auf schmalen Geräten zu breit für „UNSER LEITBILD“, daher begrenzt */
  .bgl-leitbild .lb-titel {
    font-size: 50px;
  }

  .bgl-leitbild .lb-intro {
    margin-top: 101px;
  }
}

@media screen and (max-width: 479px) {
  .bgl-leitbild {
    padding-bottom: 0;
  }

  .bgl-leitbild .lb-container-text {
    margin-bottom: 26px;
  }

  .bgl-leitbild .lb-titel {
    font-size: 38px;
  }

  .bgl-leitbild .lb-intro {
    margin-top: 69px;
  }

  .bgl-leitbild .lb-abstand {
    height: 100px;
  }
}