/* 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 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.

   16 zu 9 statt eines Höhenbandes nach Fensterhöhe. Das Band schnitt bei
   jedem Fenster anders zu; ein festes Verhältnis zeigt immer denselben
   Ausschnitt. Es kostet hier auch nichts: die beiden Kopfbilder im
   Bestand haben 1862x1048 und 800x450, also 1.777 und 1.778 - beide sind
   schon 16 zu 9 und werden damit erstmals vollständig gezeigt. */
.kopfbild img,
.flaechig img {
    border-radius: 0;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
}

/* Titelbild: dasselbe flaechige Bild, aber die Ueberschrift liegt darauf.
   Die h1 bleibt im Inhalt und damit im Zugriff des Editors; sie steht nur
   im Markup innerhalb des Bausteins und wird hier darueber gelegt. */
.titelbild {
    /* Die Bildhoehe steht hier und nicht an der Bildregel, weil die
       Ueberschrift sie mitbenutzt. Eine Zahl, zwei Verwender: so koennen
       Bild und Schrift nicht auseinanderlaufen. */
    --kopfbildhoehe: clamp(18rem, 62vh, 44rem);
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    margin-block: 0 var(--space-2xl);
}

.titelbild picture,
.titelbild img {
    display: block;
    width: 100%;
}

/* Die Marke steht im Inhalt als eigener Block und wird deshalb zu einem
   Absatz. Dessen Abstand machte den Titelblock hoeher als das Bild, und
   die Ueberschrift lag zum Teil darunter statt darauf. */
.titelbild > p {
    margin: 0;
}

/* Ein Höhenband, nicht ein festes Verhältnis. Der Grund steckt im
   Bestand: das Titelbild von /reise-zu-dir-selbst ist ein Banner mit
   2365 zu 665, also Verhältnis 3.56. In 16 zu 9 gezwungen wird es um drei
   Viertel aufgeblasen und stark beschnitten. */
.titelbild img {
    border-radius: 0;
    height: var(--kopfbildhoehe);
    object-fit: cover;
}

/* Angebunden an data-slug, das die Vorlage ohnehin für den Editor setzt:
   kein neuer Haken im Markup. */
body[data-slug=""] .titelbild {
    /* Das Kopfbild der Startseite wird vollstaendig gezeigt, so verlangt.
       Das Motiv ist 2400 zu 1336; über die ganze Fensterbreite gezeigt ist
       es damit genau 1336/2400 davon hoch. Vorher stand hier ein Band mit
       56.25vw, also 16 zu 9 - das beschnitt schon auf breiten Schirmen ein
       wenig, und auf 390px hielt die Untergrenze von 24rem das Bild auf
       384px, wo es von sich aus nur 217px hoch ist: dort fehlte fast die
       Hälfte. Die Zahl steht weiter an einer Stelle, weil die Überschrift
       sie mitbenutzt. */
    --kopfbildhoehe: calc(100vw * 1336 / 2400);
}

body[data-slug=""] .titelbild img {
    /* Keine feste Hoehe: damit hat object-fit nichts zu beschneiden, und
       die Hoehe folgt dem Bild selbst. Wird das Motiv einmal getauscht,
       bleibt es vollstaendig - nur die Zahl oben ist dann nachzufuehren. */
    height: auto;
}

/* Ein Schleier von unten, damit die Überschrift jedes Motiv trägt.

   Gemessen an Farbproben aus dem Foto der Startseite: der
   Überschriftenton allein trug 4.08 auf hellem Himmel, 4.01 auf Sand,
   3.35 auf Wasser und nur 2.34 am dunklen Wolkenrand - unter den 3.0,
   die 96-barrierefreiheit.yaml für große Schrift verlangt. Weiß allein
   wäre schlechter (1.21 auf hellem Himmel). Weiß auf diesem Schleier
   trägt 10.60, unabhängig vom Motiv.

   Der Zusatz hell nimmt den Schleier zurück: ein helles, ruhiges Motiv
   wie das Papierbanner auf /reise-zu-dir-selbst wird davon grau, und
   dort trägt der Überschriftenton von sich aus. Voreinstellung ist der
   Schleier, weil er der sichere Fall ist - ein Foto ist die Regel, das
   ruhige Papier die Ausnahme. */
.titelbild::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 62%;
    background: linear-gradient(to top,
        rgba(20, 16, 15, 0.78) 0%,
        rgba(20, 16, 15, 0.55) 38%,
        rgba(20, 16, 15, 0) 100%);
    pointer-events: none;
}

.titelbild h1 {
    position: absolute;
    z-index: 1;
    inset-inline-start: clamp(var(--space-lg), 6vw, var(--space-3xl));
    inset-inline-end: var(--space-lg);
    bottom: var(--space-xl);
    margin: 0;
    text-align: left;
    color: var(--color-white);
}

/* Die abweichende Titelposition der Startseite steht in start.css. */

/* Der Umbruch im Inhalt ist neben den beiden Blockzeilen doppelt gesetzt.
   Er erzeugte ein eigenes leeres Zeilenfeld und riss die kleine Zeile
   gemessene 122 Pixel von der grossen weg, wo 53 zu erwarten waren. */
.titelbild h1 br {
    display: none;
}

.titelbild.hell::after {
    content: none;
}

.titelbild.hell h1 {
    color: var(--color-heading);
    /* Die eigene Stufe für Titelseiten: hier trägt die Überschrift die
       erste Ansicht, deshalb eine Stufe über allem anderen. hyphens gegen
       lange Wörter, die auf 320px sonst aus dem Bild laufen. */
    font-size: var(--font-size-4xl);
    hyphens: auto;
}

/* 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(min(100%, 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(min(100%, 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 {
    padding-top: 0;
}