/* ==========================================================
   VAF Template - Custom Styles
   Datei: /templates/vaf/css/custom.css
   Zweck: Erweiterung & Feinanpassung für Karriere/Ausbildung
   ========================================================== */

/* === Benefits Abschnitt (Layout) === */
.vaf-benefits-section,
.cont-block.white_bg {
  background-color: #fff;
}

.vaf-benefits-section .main-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.vaf-benefits-section h2,
.vaf-benefits-section h3,
.vaf-benefits-section h4,
.vaf-benefits-section .blue {
  color: #0076b8;
}

.vaf-benefits-section p.lead {
  color: #333;
  font-size: 1.15rem;
  font-weight: 400;
}

/* --- Allgemeines Bildverhalten --- */
.vaf-benefits-section img {
  transition: transform 0.3s ease;
  border-radius: 4px;
}

.vaf-benefits-section img:hover {
  transform: scale(1.02);
}

/* --- Fix für das rechts zu breite Bild --- */
.vaf-benefits-section .row img.img-fluid {
  width: auto !important;
  max-width: 100%;
  height: auto;
  display: inline-block;
}

.vaf-benefits-section .col-lg-6.text-center {
  text-align: center;
}

.vaf-benefits-section .col-lg-6.order-lg-1 {
  text-align: left;
}

.vaf-benefits-section .row.align-items-center {
  align-items: center;
}

/* --- Textausrichtung & Abstände --- */
.vaf-benefits-section .d-flex {
  margin-bottom: 8px;
}

.vaf-benefits-section .row .col {
  margin-bottom: 10px;
  text-align: left;
}

.vaf-benefits-section strong {
  color: #004d75;
}

/* --- Buttons --- */
.vaf-benefits-section .btn-primary {
  background-color: #0076b8;
  border: none;
  padding: 10px 24px;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.vaf-benefits-section .btn-primary:hover {
  background-color: #005d93;
}

/* --- Bilder / Schatten --- */
.vaf-benefits-section .shadow {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* --- Responsive Verhalten --- */
@media (max-width: 991px) {
  .vaf-benefits-section .row.align-items-center {
    text-align: center;
  }

  .vaf-benefits-section .col-lg-6.order-lg-1,
  .vaf-benefits-section .col-lg-6.order-lg-2 {
    text-align: center !important;
  }

  .vaf-benefits-section .row img.img-fluid {
    margin-bottom: 20px;
  }
}

/* --- Zusätzliche visuelle Tiefe zwischen Blöcken --- */
.vaf-benefits-section {
  padding-top: 40px;
  padding-bottom: 40px;
}

.vaf-benefits-section h3,
.vaf-benefits-section h4 {
  margin-bottom: 20px;
}

.vaf-benefits-section .text-center.mt-5 {
  margin-top: 60px !important;
}

/* --- QR-Code Karte --- */
.vaf-benefits-section .card {
  border: none;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  display: inline-block;
}

.vaf-benefits-section .card img {
  max-width: 200px;
  height: auto;
}

/* --- Sanfter Abstand zwischen Benefits und Lehrwerkstatt --- */
.vaf-benefits-section + .cont-block {
  margin-top: 40px;
}

/* Fix: Bild rechts darf nicht über ganze Breite gehen */
.cont-block.white_bg.nooverflow .main-container.narrow.center.contstyles .row.align-items-center .col-lg-6 img.img-fluid {
  width: auto !important;
  max-width: 100%;
  height: auto !important;
  display: inline-block;
}

/* Fallback für jede img innerhalb des Benefits-Blocks */
.vaf-benefits-section img.img-fluid {
  width: auto !important;
  max-width: 100%;
  height: auto !important;
  display: inline-block !important;
}

/* === Zentrierung & Layout für Benefits-Block === */
.vaf-benefits-section .main-container {
  max-width: 1020px;       /* identisch mit Lehrwerkstatt */
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding-left: 15px;
  padding-right: 15px;
}

/* Bild-Text-Reihe sauber mittig */
.vaf-benefits-section .row.align-items-center {
  justify-content: center;
}

/* Textausrichtung */
.vaf-benefits-section .col-lg-6.order-lg-1 {
  text-align: left;
}
.vaf-benefits-section .col-lg-6.order-lg-2 {
  text-align: center;
}

/* Kleinere Bildschirme */
@media (max-width: 991px) {
  .vaf-benefits-section .col-lg-6.order-lg-1,
  .vaf-benefits-section .col-lg-6.order-lg-2 {
    text-align: center !important;
  }

  .vaf-benefits-section .main-container {
    max-width: 100%;
    padding: 0 15px;
  }
}

/* Leichte optische Trennung zu nachfolgendem Block */
.vaf-benefits-section {
  padding-top: 40px;
  padding-bottom: 40px;
}