/* ==========================================================================
Betriebsdatenerfassung (BDE) – seitenspezifische Regeln.

Wiederverwendbare Bausteine dieser Seite liegen in eigenen Dateien und werden
in bde.html einzeln eingebunden:
  css/buttons.css        .btn / .btn.btn-outline / .btn-row
  css/carousel.css       .carousel …
  css/hotspot-figure.css .hotspot-figure …
  css/screenshots.css    .screenshots
  css/lightbox.css       .lightbox
  css/testimonials.css   .testimonials / .testimonial
  css/timeline.css       ol.timeline
  css/faq.css            .faq / details.faq-item

base.css liefert .inner(.dual), .sec-label / .sec-title / .sec-body,
.sec-sub-body, ul.checklist / ul.benefit-list sowie die Modifier
.accent / .dark / .very-dark.
css/photo-hero.css     Foto-Hero-Layout für section#bde; Bild hier per
                        --hero-image gesetzt.
========================================================================== */

/* --- Einstieg ------------------------------------------------------- */
section#bde {
    --hero-image: url('../img/bde.webp');
}

/* --- Praxis / Screenshots -------------------------------------------- */
section#bde-praxis .sec-body {
    text-align: center;
}

section#bde-praxis .screenshots img {
    aspect-ratio: 16 / 9;
}

/* --- Bilder: Seitenverhältnis vorab reservieren (verhindert Layout-Sprung
   beim Laden, da .sec-sub-body img/.hotspot-figure img per width:100%/
   max-width:100% skalieren und die Höhe sonst erst nach dem Laden feststeht). */
section#bde-potenzial img {
    aspect-ratio: 1085 / 1024;
}

section#bde-abteilungen .hotspot-figure img {
    aspect-ratio: 2303 / 1538;
}

section#bde-werkerfuehrung img {
    aspect-ratio: 899 / 800;
}

section#bde-datendrehscheibe img {
    aspect-ratio: 1067 / 800;
}

section#bde-endgeraete img {
    aspect-ratio: 1220 / 889;
    height: auto;
    margin-top: 1em;
    filter: drop-shadow(0.2em 0.2em 0.8em rgba(0, 0, 0, 0.3));
}