/* ---------------------------------------------------------------------------
   Illustrationen auf den Leistungsseiten

   Ein Muster, zwei Anwendungen: Text links, freigestelltes Bild rechts. Das
   Bild steht ohne Rahmen und ohne eigene Fläche direkt auf dem Untergrund des
   Abschnitts — deshalb sind die Dateien freigestellt und deshalb muss ihr
   Hintergrund exakt `--surface-tint` (#ECEBFD im Band) oder `--nws-mist`
   (#F7F8FC sonst) gewesen sein. Motive, Prompt und Ablage:
   `NWS-CI/New Work Studio Design System/Illustrations-Prompt.md`.

   `.illu-head`   — umschließt einen `.section-head` / `.w-head` und das Bild.
   `.illu-stance` — dasselbe für das Zitat am Ende des Hebel-Abschnitts.

   Der Abschnittskopf verliert dabei sein eigenes `max-width`: die Spalte
   begrenzt ihn jetzt. Deshalb steht hier eine Breite und keine Prozentangabe —
   sonst wird die Zeile auf großen Bildschirmen wieder zu lang.

   WARUM DIE BILDER HIER STEHEN UND NICHT ALS <img> IM HTML
   Sie sollen auf dem Telefon nicht erscheinen. Der erste Bau löste das mit
   `<img loading="lazy">` plus `display: none` — und am 10.08.2026 im
   Netzwerkprotokoll gegengeprüft: Chrome lädt die Datei trotzdem. Ein
   ausgeblendetes Bild, für das das Telefon 100 KB zahlt, ist das Gegenteil
   dessen, was gewollt war. Als Hintergrundbild in einer `min-width`-Abfrage
   existiert die Regel unterhalb der Schwelle gar nicht, und es wird nichts
   angefragt. Die Bilder sind reine Zier (`alt=""` wäre der HTML-Fall), also
   geht dabei nichts an Bedeutung verloren.

   Die Pfade unten sind relativ zu DIESER Datei, nicht zur Seite — deshalb
   funktioniert dieselbe Zeile für `/leistungen.html` und `/wissen/index.html`.
--------------------------------------------------------------------------- */

.illu-head,
.illu-stance {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: var(--space-8);
  align-items: center;
}

/* Zwischen 1001 und 1200 px wird die Bildspalte schmaler. Bei 1024 px stand
   sonst ein 480 px breites Bild neben 424 px Text — die Zier war breiter als
   die Aussage. Oberhalb bleibt es bei 480 px, dem freigegebenen Stand. */
@media (max-width: 1200px) {
  .illu-head,
  .illu-stance { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
}

.illu-head .section-head,
.illu-head .w-head {
  margin: 0;
  max-width: 620px;
}

.illu-stance blockquote { margin: 0; }

/* Das Seitenverhältnis hält den Platz frei, bevor die Datei da ist — sonst
   springt das Layout beim Nachladen. Alle Motive sind 1200 × 800 erzeugt, nur
   der Hebel-Anlass ist niedriger. */
.illu {
  margin: 0;
  aspect-ratio: 1200 / 800;
  background: center / contain no-repeat;
}

.illu-anlass { aspect-ratio: 1200 / 725; }

@media (min-width: 1001px) {
  .illu-anlass       { background-image: url("img/illu/ki-einfuehrung-anlass-v1.webp"); }
  .illu-mappe        { background-image: url("img/illu/angebote-leere-mappe-v3.webp"); }
  .illu-begruendung  { background-image: url("img/illu/wissen-begruendung-v2.webp"); }
  .illu-medienwechsel{ background-image: url("img/illu/expertise-medienwechsel-v5.webp"); }
}

/* Unter 1000 px verschwindet das Bild — dieselbe Schwelle, an der auch
   `.hero-split` und `.grid-praxis` einspaltig werden (`site.css`). Es wird
   nicht untergeschoben, sondern ausgeblendet: gestapelt wäre es reine Zier,
   die den Inhalt nach unten schiebt. */
@media (max-width: 1000px) {
  .illu-head,
  .illu-stance { grid-template-columns: 1fr; }
  .illu { display: none; }
}