/* ==========================================================================
Maschinendatenerfassung (MDE) – seitenspezifische Regeln.

Wiederverwendbare Bausteine dieser Seite liegen in eigenen Dateien und werden
in mde.html einzeln eingebunden:
css/buttons.css      .btn / .btn.btn-outline / .btn-row
css/screenshots.css  .screenshots
css/lightbox.css     .lightbox
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#mde; Bild hier per
                     --hero-image gesetzt.
========================================================================== */

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

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

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

/* --- Belastbare Kennzahlen / Störgrundkatalog ---------------------
In der rechten Spalte (Störgrundkatalog) steht ein Screenshot über dem
Fließtext; die linke Spalte nutzt stattdessen .sec-title-icon (base.css). */
section#mde-kennzahlen .sec-body img {
    aspect-ratio: 1732 / 908;
}

section#mde-kennzahlen .screenshots {
    margin: 1.5rem 0;
}

/* --- Bilder: Seitenverhältnis vorab reservieren (verhindert Layout-Sprung
   beim Laden, siehe css/bde.css für dasselbe Muster). */
section#mde-verlustanalyse img {
    aspect-ratio: 640 / 800;
}

section#mde-energie img {
    aspect-ratio: 1200 / 800;
}

section#mde-retrofit img {
    aspect-ratio: 946 / 800;
}

section#mde-wartung .sec-sub-body img {
    aspect-ratio: 579 / 1024;
}

/* --- Wartung / Informationsfluss --------------------------------------- */
section#mde-wartung .inner {
    display: grid;
    grid-template-columns: 3fr 1.4fr;
    gap: 4em;

    > div {
        &:first-child {
            grid-column: 1 / 3;
        }
    }
}

@media (max-width: 1280px) {
    section#mde-wartung .inner {
        grid-template-columns: 1fr;
        gap: 2rem;

        > div:first-child {
            grid-column: auto;
        }
    }
}

@media (max-width: 512px) {
    section#mde {
        &:before {
            background-size: cover;
        }
    }
}