/* Bilder im Inhalt: flächige Stimmungsbilder, Bildreihen und das Bild, das
   der Text umfließt. Eigene Datei, weil inhalt.css an ihrer Grenze steht und
   die Bildregeln eine geschlossene Sache sind.
   Wird nach inhalt.css geladen. Nur vorhandene Custom Properties. */

/* ==========================================================================
   Bild im Textfluss
   ========================================================================== */

.abschnitt-bilder > p {
    margin-block: var(--space-md);
}

.abschnitt-bilder > p:first-child {
    margin-top: 0;
}

/* Ab Desktop gleitet das Bild im Text, im Wechsel rechts und links: der Text
   fließt darum herum und läuft darunter weiter. Zwei starre Spalten ließen
   neben dem längeren Text eine leere Fläche in Bildhöhe stehen.
   Auf Mobil bleibt alles einspaltig untereinander. */
@media (min-width: 56rem) {
    /* Der Textbereich schließt die Gleitkante ein, sonst ragt das Bild in den
       nächsten Abschnitt. */
    .abschnitt-text {
        display: flow-root;
    }

    /* Der Abschnitt mit Bild bleibt schmal genug, dass die Zeilen unter dem
       Bild lesbar bleiben: 80 Zeichen darunter, etwa 47 daneben. Das Maß
       hängt an der Schrift (ch) und nicht am Fenster, weil Lesbarkeit von
       der Zeichenzahl abhängt. --container-narrow sind 66ch. */
    .abschnitt:has(.abschnitt-bilder) {
        max-width: 80ch;
        margin-inline: auto;
    }

    /* Hier gilt die Breite des Abschnitts, nicht die des Textblocks: sonst
       bliebe neben einem links gleitenden Bild nur ein Streifen übrig. */
    .abschnitt:has(.abschnitt-bilder) .abschnitt-text > p,
    .abschnitt:has(.abschnitt-bilder) .abschnitt-text > ul,
    .abschnitt:has(.abschnitt-bilder) .abschnitt-text > ol,
    .abschnitt:has(.abschnitt-bilder) .abschnitt-text > blockquote {
        max-width: none;
    }

    /* Ein Abschnitt mit Regler bleibt einspaltig: der Regler braucht die
       ganze Breite, sonst steht er gequetscht neben einem Bild. */
    .abschnitt:not(:has(.stufen)) .abschnitt-bilder {
        float: right;
        width: 38%;
        margin: var(--space-xs) 0 var(--space-lg) var(--space-2xl);
    }

    .abschnitt:nth-of-type(even):not(:has(.stufen)) .abschnitt-bilder {
        float: left;
        margin: var(--space-xs) var(--space-2xl) var(--space-lg) 0;
    }
}

/* ==========================================================================
   Flächige Bilder über die volle Fensterbreite
   ========================================================================== */

/* Bricht aus jedem Container aus und nimmt die ganze Fensterbreite ein.
   50% ist die Mitte des Containers, 50vw die halbe Fensterbreite; die
   Differenz ist genau der Abstand zum Fensterrand. */
.kopfbild,
.flaechig {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    margin-block: 0 var(--space-2xl);
}

.kopfbild img,
.kopfbild picture,
.flaechig img,
.flaechig picture {
    display: block;
    width: 100%;
    height: auto;
}

/* Ein Stimmungsbild trägt keine runden Ecken: es soll die Fläche halten,
   nicht als Kachel wirken. */
.kopfbild img,
.flaechig img {
    border-radius: 0;
    height: clamp(16rem, 52vh, 40rem);
    object-fit: cover;
}

/* Mehrere Stimmungsbilder ohne Text dazwischen ergeben sonst eine Bilderwand:
   das erste behält die ganze Breite, die übrigen stehen nebeneinander in
   einer Reihe. Siehe Bildreihe. */
.bildreihe {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    margin-block: 0 var(--space-2xl);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 2px;
}

.bildreihe .flaechig {
    width: auto;
    max-width: none;
    margin: 0;
}

.bildreihe .flaechig img {
    height: clamp(12rem, 32vh, 24rem);
}

/* ==========================================================================
   Zertifikate
   ========================================================================== */

/* Eine Urkunde will ganz gesehen werden: sie wird eingepasst und nicht
   zugeschnitten - anders als ein Stimmungsbild. Die Reihe ordnet sich
   selbst, die Spaltenzahl entsteht aus der Breite. */
.zertifikate {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-xl);
    align-items: end;
    margin-block: var(--space-2xl);
}

.zertifikate figure {
    margin: 0;
}

.zertifikate img {
    width: 100%;
    height: auto;
    max-height: 20rem;
    object-fit: contain;
    border: 1px solid var(--color-primary-light);
    border-radius: var(--radius-md);
    background: var(--color-white);
}

/* Ein Zeichen wie das Mitgliedszeichen ist klein und soll nicht auf
   Urkundengröße gezogen werden. */
.zertifikate .zeichen img {
    max-width: 10rem;
    border: 0;
    background: none;
}

.zertifikate figcaption {
    margin-top: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    text-align: center;
}

/* Der Inhalt folgt dicht auf ein flächiges Bild. */
.kopfbild + .lesebereich,
.kopfbild + .startbereich {
    padding-top: 0;
}