/* ==========================================================================
Produktionsplanung / Feinplanung – seitenspezifische Regeln.

Wiederverwendbare Bausteine dieser Seite liegen in eigenen Dateien und werden
in planung.html einzeln eingebunden:
  css/buttons.css      .btn / .btn.btn-outline / .btn-row
  css/cards.css        .tile-cards / .tile-card
  css/screenshots.css  .screenshots
  css/lightbox.css     .lightbox
  css/faq.css          .faq / details.faq-item
  css/ansprechpartner.css .ansprechpartner … (über ansprechpartner-solo.html)

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#planung; Bild hier per
                      --hero-image gesetzt.
========================================================================== */

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

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

section#planung-praxis .screenshots img[src$="grobplanung.webp"] {
    aspect-ratio: 1920 / 1030;
}

section#planung-praxis .screenshots img[src$="feinplanung.webp"],
section#planung-praxis .screenshots img[src="img/screenshot.webp"] {
    aspect-ratio: 16 / 9;
}

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

/* --- Entscheiden statt schätzen ------------------------------------
   Zwischenüberschrift innerhalb des Fließtexts von der Hauptüberschrift
   absetzen. */
section#planung-entscheiden h3.sec-title {
    margin-top: 2.5rem;
}