/*
  Ausrichtung und Größe der Bilder in News-Artikeln.

  Diese sechs Klassen sind die einzigen, die die serverseitige Säuberung
  an einem <img> durchlässt. Wer hier eine hinzufügt, muss sie auch in
  Inhaltssaeuberung.ErlaubteKlassen eintragen – sonst verschwindet sie beim
  nächsten Speichern.

  Die Abstände kommen aus tokens.css. Dort heißen sie --raum-1 bis --raum-6;
  der Umsetzungsplan nannte --abstand-s und --abstand-m, die es im Projekt
  nicht gibt.
*/
.bild--links { float: left; margin: 0 var(--raum-2) var(--raum-1) 0; }
.bild--rechts { float: right; margin: 0 0 var(--raum-1) var(--raum-2); }
.bild--mittig { display: block; margin: var(--raum-2) auto; }

.bild--klein { max-width: 240px; }
.bild--mittelgross { max-width: 480px; }
.bild--gross { max-width: 100%; }

/* Auf schmalen Geräten stehen umflossene Bilder im Weg. */
@media (max-width: 40rem) {
    .bild--links, .bild--rechts {
        float: none;
        display: block;
        margin: var(--raum-2) auto;
        max-width: 100%;
    }
}