/*
 * Seitenbreites Motiv auf den Leistungsseiten.
 *
 * Nicht in energy-overrides.css, weil die Datei mit ?v=6 in ZEHN Seiten haengt:
 * eine Regel fuer drei Seiten haette zehn Versionsnummern nach oben gezogen.
 * Dieselbe Ueberlegung wie bei formular.css.
 *
 * Die vorhandene .service-shot passt hier nicht - sie hat eine feste Hoehe von
 * 9,5rem und ist auf die kleinen Karten der Startseite gemuenzt.
 */

.seitenbild {
  margin: 0;
  padding-top: 2.6rem;
}

.seitenbild img {
  display: block;
  width: 100%;
  /* height:auto ist hier NICHT optional. Das <img> traegt width="800" und
     height="450" als Attribute - die wirken als Vorgabe wie CSS-Regeln und
     schlagen aspect-ratio, solange die Hoehe nicht ausdruecklich auf auto
     steht. Ohne diese Zeile stand das Bild bei 1060px Breite auf 450px Hoehe,
     also im Verhaeltnis 2,36:1 statt 16:9 - nachgemessen, nicht vermutet.
     Die Attribute bleiben trotzdem stehen: Sie verhindern, dass das Layout
     beim Laden springt. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 1rem;
  background: #0d1118;
  border: 1px solid rgba(240, 243, 247, .08);
}

/* Die KI-Kennzeichnung. Sie steht bewusst IM figure-Element, damit
   Screenreader sie dem Bild zuordnen - Art. 50 Abs. 5 KI-VO verlangt
   "klar und unterscheidbar" und barrierefrei. Ein Hinweis irgendwo auf der
   Seite erfuellt das nicht. */
.seitenbild figcaption {
  margin: .55rem 0 0;
  font-size: .68rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .56;
}