/* __________________________________________________________________________________ */
/* ______________________________[[[  Unterseiten  ]]]_______________________________ */
/* __________________________________________________________________________________ */

/* Ergänzt index.css: Von dort kommen Reset, Farben, Schriften und Kopfzeile.
   Hier steht nur, was die Unterseiten zusätzlich brauchen.

   Haltung nach der Design-Datenbank („Exaggerated Minimalism“): übergroße
   Typo, viel Weißraum, ein einziger Akzent, keine Dekoration. Bewusst anders
   gebaut als der Textblock der Startseite — dort eine Spalte, hier ein
   asymmetrisches Raster mit durchgehend farbigen Bändern. */


/* ====================[[[  Grundgerüst  ]]]==================== */


body {
    align-items: stretch; /* Bänder laufen über die volle Breite */
    min-height: 100svh;   /* sonst blitzt unter kurzen Seiten der Grund durch */
}

/* Der Inhalt dehnt sich, die Fußzeile sitzt am unteren Fensterrand. Auf
   kurzen Seiten wächst also das blaue Band, nicht die Fußzeile. */
.page-main {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    width: 100%;
}

/* Farbige Bänder geben den Seiten Rhythmus, statt alles auf eine Fläche
   zu legen. Rot und Blau sind die beiden Flächenfarben der Karte. */
.band {
    width: 100%;
    padding: clamp(2.25rem, 4.5vh, 3.75rem) clamp(1.5rem, 5vw, 4rem);
    background: var(--blue);
}

.band--red {
    background: var(--red);
}

.band--grey {
    /* Trägt nur die Weiter-Navigation und grenzt an die ebenfalls graue
       Fußzeile — deshalb flach statt in voller Bandhöhe. */
    padding-block: clamp(1.25rem, 2.5vh, 1.85rem);
    background: var(--grey);
}

.band-inner {
    width: 100%;
    max-width: 68rem;
    margin: 0 auto;
}


/* ====================[[[  Seitenkopf  ]]]==================== */


.page-head {
    padding-top: clamp(1.75rem, 3.5vh, 2.75rem);
    padding-bottom: clamp(1.75rem, 3.5vh, 2.75rem);
}

/* Kennzeichnung über dem Titel — Stationsnummer oder Rubrik */
.page-kicker {
    display: block;
    margin-bottom: clamp(0.9rem, 2vh, 1.5rem);
    font-family: "dml-bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--yellow);
}

/* Der Titel ist das Plakat der Seite: so groß wie er sich trägt */
.page-title {
    max-width: 18em;
    font-family: "dml-bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 5.2vw, 4.5rem);
    line-height: 1.03;
    letter-spacing: -0.03em;
    color: var(--yellow-bright);
    text-wrap: balance;
}

.page-standfirst {
    max-width: 46ch;
    margin-top: clamp(1.25rem, 3vh, 2rem);
    font-size: clamp(1.05rem, 1.35vw, 1.35rem);
    line-height: 1.5;
    color: var(--offwhite);
    text-wrap: pretty;
}


/* ====================[[[  Text  ]]]==================== */


.section-title {
    max-width: 20em;
    margin-bottom: clamp(1rem, 2.5vh, 1.75rem);
    font-family: "dml-bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(1.35rem, 2.2vw, 2rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--yellow-bright);
}

/* Folgt eine Überschrift auf einen Textblock, braucht sie Luft nach oben —
   sonst klebt sie am Absatz davor und wirkt dadurch größer, als sie ist.
   Das Doppelte des unteren Abstands: Die Überschrift gehört sichtbar zu dem,
   was unter ihr steht. */
.prose + .section-title,
.media-grid + .section-title,
.galerie + .section-title {
    margin-top: clamp(2rem, 5vh, 3.5rem);
}

/* Zeilenmaß in ch hält den Fließtext bei rund 66 Zeichen, Trennung fängt
   die langen deutschen Komposita ab. */
.prose p {
    max-width: 66ch;
    line-height: 1.6;
    text-wrap: pretty;
    hyphens: auto;
}

.prose p + p {
    margin-top: 1em;
}

.prose a {
    color: var(--yellow-bright);
    cursor: pointer;
    border-bottom: 1px solid rgba(232, 196, 0, 0.45);
    transition: border-color 0.2s ease;
}

.prose a:hover {
    border-color: var(--yellow-bright);
}


/* ====================[[[  Asymmetrisches Raster  ]]]==================== */


/* Breite Spalte Text, schmale Spalte Angaben — das Grundmuster eines
   Ausstellungskatalogs und klar unterschieden vom Satz der Startseite. */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 4rem);
    align-items: start;
}

.split--even {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* ====================[[[  Angaben  ]]]==================== */


/* Gepunktete Linie oben — dasselbe Vokabular wie die Wegführung der Karte */
.meta {
    padding-top: clamp(0.8rem, 1.8vh, 1.2rem);
    border-top: 2px dotted var(--yellow);
}

.meta-row + .meta-row {
    margin-top: 1.1rem;
}

.meta-label {
    display: block;
    margin-bottom: 0.25rem;
    font-family: "dml-bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--yellow);
}

.meta-value {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--offwhite);
}


.meta a {
    color: var(--yellow-bright);
    cursor: pointer;
    border-bottom: 1px solid rgba(232, 196, 0, 0.45);
    transition: border-color 0.2s ease;
}

.meta a:hover {
    border-color: var(--yellow-bright);
}


/* ====================[[[  Bilder  ]]]==================== */


.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: clamp(0.75rem, 1.6vw, 1.25rem);
}

/* Gelber Rahmen wie um die Karte — der Platzhalter sagt offen, dass das
   Bild noch fehlt, statt ein graues Feld zu zeigen. */
.media-frame {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    outline: 3px solid var(--yellow);
    outline-offset: -3px;
    background: rgba(0, 0, 0, 0.16);
    font-family: "dml-bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--yellow);
    text-align: center;
    padding: 1rem;
}

.media-frame--wide {
    aspect-ratio: 16 / 9;
    grid-column: 1 / -1;
}


/* ====================[[[  Listen  ]]]==================== */


.plain-list {
    list-style: none;
    padding: 0;
    max-width: 70ch;
}

.plain-list li {
    padding-left: 1.1rem;
    text-indent: -1.1rem;
    line-height: 1.5;
}

.plain-list li + li {
    margin-top: 0.6rem;
}

/* Quellen und Literatur. Einspaltig als Grundfall — mehrspaltig nur dort,
   wo die Liste lang genug ist, dass sich das lohnt. */
.source-list {
    max-width: none;
}

/* Zwei Spalten für lange Verzeichnisse: einspaltig über die volle Bandbreite
   ergäbe rund 130 Zeichen je Zeile, beim Zurückspringen verliert das Auge
   dann die Zeile. Ein Eintrag darf dabei nicht über die Spaltenkante brechen. */
.source-list--two {
    columns: 2;
    column-gap: clamp(2rem, 4.5vw, 4.5rem);
}

.source-list--two li {
    break-inside: avoid;
}

/* Kein hängender Einzug mehr: Autor und Jahr stehen auf einer eigenen Zeile,
   der Nachweis darunter nutzt die ganze Spaltenbreite und bricht seltener um.
   Die gelbe Autorenzeile trennt die Einträge, dafür braucht es keinen Einzug. */
.source-list li {
    padding-left: 0;
    text-indent: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--offwhite);
}

.source-list li + li {
    margin-top: 1.15rem;
}

.source-author {
    display: block;
    font-family: "dml-bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: var(--yellow-bright);
}

.source-list a {
    color: var(--yellow-bright);
    cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.source-list a:hover {
    border-color: var(--yellow-bright);
}

/* Folgt eine Überschrift direkt auf eine Quellenliste, braucht sie Abstand
   und eine Trennung — sonst klebt sie am letzten Eintrag. */
.source-list + .section-title {
    max-width: none; /* die Trennlinie läuft über die ganze Breite, nicht nur
                        über das Textmaß der Überschrift */
    margin-top: clamp(2.5rem, 5.5vh, 4rem);
    padding-top: clamp(1.1rem, 2.4vh, 1.75rem);
    border-top: 2px dotted var(--yellow);
}


/* Die Schritte des Semesters als nummerierte Folge */
.step-list {
    list-style: none;
    padding: 0;
    counter-reset: step;
}

.step-list li {
    position: relative;
    counter-increment: step;
    padding-left: 3.2rem;
    max-width: 62ch;
    line-height: 1.55;
}

.step-list li + li {
    margin-top: 1.4rem;
}

.step-list li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0.05em;
    font-family: "dml-bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    color: var(--yellow);
}


/* ====================[[[  Weiter-Navigation  ]]]==================== */


.page-nav {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding-top: clamp(1rem, 2.5vh, 1.75rem);
    border-top: 2px dotted var(--yellow);
}

.page-nav a {
    font-family: "dml-bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: var(--yellow-bright);
    cursor: pointer;
    padding-bottom: 0.15em;
    border-bottom: 3px solid transparent;
    transition: border-color 0.25s ease;
}

.page-nav a:hover {
    border-color: var(--yellow-bright);
}


/* ====================[[[  Fußzeile  ]]]==================== */


.page-footer {
    width: 100%;
    padding: clamp(2rem, 5vh, 3.5rem) clamp(1.5rem, 5vw, 4rem);
    background: var(--grey);
}

.page-footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
    max-width: 68rem;
    margin: 0 auto;
}

.page-footer p {
    max-width: 52ch;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--yellow);
}

.page-footer ul {
    display: flex;
    gap: 1.4rem;
    list-style: none;
    padding: 0;
}

.page-footer a {
    font-size: 0.82rem;
    color: var(--yellow-bright);
    cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s ease;
}

.page-footer a:hover {
    border-color: var(--yellow-bright);
}


/* ====================[[[  Untermenü  ]]]==================== */


/* Die Projekttitel sind lang — das Feld richtet sich nach ihnen, statt sie
   umbrechen zu lassen. Rechts verankert, sonst liefe es aus dem Fenster. */
.submenu {
    right: 0;
    left: auto;
    min-width: 0;
    white-space: nowrap;
}


/* ====================[[[  Aktiver Menüpunkt  ]]]==================== */


/* UX-Vorgabe: Der aktuelle Ort muss in der Navigation ablesbar sein. */
.nav-list a[aria-current="page"] {
    color: var(--offwhite);
}

.nav-list a[aria-current="page"]::after {
    transform: scaleX(1);
    background: var(--offwhite);
}


/* ====================[[[  Platzhalter  ]]]==================== */


/* Sichtbar als Lücke markiert, damit nichts Unfertiges übersehen wird */
.todo {
    display: inline-block;
    padding: 0.1em 0.45em;
    background: var(--yellow-bright);
    font-family: "dml-bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 0.82em;
    letter-spacing: 0.04em;
    color: var(--red);
}


/* ====================[[[  Prüfhilfe  ]]]==================== */


/* VORÜBERGEHEND. Markiert jeden Inhaltstext, der nicht im Inhaltsdokument
   steht — also von mir formuliert oder aus dem gedruckten Flyer übernommen.
   Nicht markiert sind Schaltflächen, Menü, Weiter-Navigation und die
   Angabenspalte.

   Ändert ausschließlich die Textfarbe: kein Hintergrund, keine Polsterung,
   keine Breite — sonst verschiebt die Prüfhilfe das Layout.

   Zum Entfernen: diese Regel löschen und die Klasse "nicht-im-dokument"
   aus dem HTML nehmen. */
html:not(.lang-en) .nicht-im-dokument,
html:not(.lang-en) .nicht-im-dokument strong,
html:not(.lang-en) .nicht-im-dokument em,
html:not(.lang-en) .nicht-im-dokument a,
html:not(.lang-en) .nicht-im-dokument::before {
    color: #4ADE80;
}


/* Selbst übersetzt — im Dokument gibt es dafür keine englische Fassung.
   Wie beim Grün nur die Textfarbe, damit nichts verrutscht. */
.selbst-uebersetzt,
.selbst-uebersetzt strong,
.selbst-uebersetzt em,
.selbst-uebersetzt a,
.selbst-uebersetzt::before {
    color: #FF9ECF;
}


/* __________________________________________________________________________________ */
/* ________________________________[[[  Spuren  ]]]__________________________________ */
/* __________________________________________________________________________________ */


/* Die Strichzeichnungen aus dem Flyer — im InDesign-Dokument als „Spuren des
   Kolonialismus" verknüpft. Jedes Projekt hat seine eigene.

   Zur Farbe: Alle Dateien tragen dieselbe Füllung rgb(201,163,2), also
   var(--yellow). Das steht in den Dateien und nicht hier, obwohl es hier
   schöner stünde — dafür müsste die Zeichnung als Maske eingebunden werden,
   und Masken aus separaten Dateien blockiert der Browser, solange die Seite
   lokal geöffnet wird. Sobald sie auf einem Server liegt, lässt sich das
   umstellen; bis dahin wäre auf deinem Rechner nichts zu sehen.

   „cover" füllt das Band vollständig und behält das Seitenverhältnis — was
   nicht hineinpasst, wird beschnitten, mittig von beiden Seiten gleich viel.
   Den Ausschnitt bestimmt damit die Zeichnung selbst, nicht das Stylesheet. */
.spur {
    position: relative;
}

/* Der Inhalt liegt über der Zeichnung */
.spur > * {
    position: relative;
    z-index: 1;
}

.spur::before {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    /* Die einzige Stellschraube für die Zurückhaltung der Zeichnungen */
    opacity: 0.75;
    pointer-events: none;
}

.spur--baakenhafen::before {
    background-image: url("images/spuren-baakenhafen.svg");
}

.spur--echoes::before {
    background-image: url("images/spuren-echoes.svg");
}

.spur--einsichtsturm::before {
    background-image: url("images/spuren-einsichtsturm.svg");
}

.spur--elphi::before {
    background-image: url("images/spuren-elphi.svg");
}

.spur--house::before {
    background-image: url("images/spuren-house.svg");
}

.spur--kaffee::before {
    background-image: url("images/spuren-kaffee.svg");
}

.spur--lagerhaus::before {
    background-image: url("images/spuren-lagerhaus.svg");
}

.spur--sound::before {
    background-image: url("images/spuren-sound.svg");
}

.spur--stockmeyer::before {
    background-image: url("images/spuren-stockmeyer.svg");
}

.spur--strassennamen::before {
    background-image: url("images/spuren-strassennamen.svg");
}



/* __________________________________________________________________________________ */
/* ______________________________[[[  Breakpoint  ]]]________________________________ */
/* __________________________________________________________________________________ */


/* Steht am Dateiende, damit die Regeln hier die Grundregeln überschreiben —
   weiter oben im Stylesheet käme etwa .source-list--two zu früh und würde von
   seiner eigenen Grundregel wieder überstimmt.

   52rem und nicht 68rem wie in index.css: Dort geht es um die Kopfzeile, die
   eher an ihre Grenze kommt. Die Textspalten stehen bis hierhin gut. */
@media (max-width: 52rem) {

    .split,
    .split--even {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Zwei Spalten sind schmal keine 170 px breit, die Titel brechen dann nach
       zwei Wörtern um. Eingespart wird dabei nichts: einspaltig ist der Block
       nur 107 px höher, weil zweispaltig ohnehin fast jede Zeile umbricht. */
    .source-list--two {
        columns: 1;
    }
}


/* ====================[[[  Galerie  ]]]==================== */


/* Ein waagerechter Streifen: Das mittlere Bild steht ganz da, von den
   Nachbarn ragt ein Stück herein. Dadurch sieht man, dass es weitergeht,
   statt es raten zu müssen. Am Anfang und am Ende schließt der Streifen
   bündig ab — dort ist kein Nachbar mehr, also steht auch kein Platz für
   einen dahin. Das Einrasten macht der Browser über
   scroll-snap — auf die Mitte des jeweiligen Bildes, nicht auf feste
   Schritte. Die unterschiedlichen Bildbreiten sind dem Verfahren egal.

   Ohne JavaScript stehen die Bilder schlicht untereinander und sind
   vollständig zu sehen; pages.js baut daraus den Streifen. */
.galerie {
    --buehne: clamp(18rem, 70svh, 46rem);
    display: grid;
    gap: 0.75rem;
}

/* Steht ein Video darüber, braucht die Galerie Abstand — sonst kleben die
   beiden gelben Rahmen aneinander und wirken wie ein Block. */
.media-grid + .galerie {
    margin-top: clamp(0.75rem, 1.75vh, 1.25rem);
}

.galerie img {
    display: block;
    width: 100%;
    height: auto;
}

.galerie--bereit {
    display: block;
    position: relative;
}

.galerie-streifen {
    /* Muss positioniert sein: Sonst misst offsetLeft der Bilder gegen die
       Galerie statt gegen den Streifen, und die Rechnung „welches Bild steht
       in der Mitte" liefert Unsinn. */
    position: relative;

    display: flex;
    align-items: center;
    gap: 0.6rem;

    /* --buehne ist die Obergrenze, --buehne-ist der tatsächliche Wert.
       Den rechnet pages.js aus dem breitesten Bild der Galerie aus, damit
       auch ein Querformat bei voller Höhe noch in den Streifen passt. */
    height: var(--buehne-ist, var(--buehne));

    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;   /* kein Zurückschwappen der Seite */
    scrollbar-width: none;
}

.galerie-streifen::-webkit-scrollbar {
    display: none;
}

.galerie--bereit img {
    flex: 0 0 auto;
    scroll-snap-align: center;

    /* Die Höhe ist gesetzt, die Breite folgt dem Verhältnis — dadurch
       stehen alle Bilder einer Galerie immer exakt gleich hoch.

       Keine Breitengrenze: Sie würde bei einem Querformat zuerst greifen,
       der Browser klemmte dann die Breite ab und ließe die Höhe stehen —
       das Bild wäre gestaucht. Stattdessen ist die Höhe so gewählt, dass
       auch das breiteste Bild noch hineinpasst (siehe pages.js). */
    height: var(--buehne-ist, var(--buehne));
    width: auto;
    max-width: none;

    outline: 3px solid var(--yellow);
    outline-offset: -3px;
}

/* Bedienzeile unter dem Streifen statt darüber: Pfeile über dem Bild
   verdecken genau die Ränder, in denen bei Hochformaten der Inhalt steht. */
.galerie-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.6rem;
}

.galerie-knopf {
    display: grid;
    place-items: center;
    width: 44px;         /* Untergrenze für eine Daumenfläche */
    height: 44px;
    flex: 0 0 auto;
    background: none;
    outline: 2px solid var(--yellow-bright);
    outline-offset: 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.galerie-knopf:hover {
    background: rgba(232, 196, 0, 0.25);
}

.galerie-knopf:disabled {
    opacity: 0.35;
    cursor: default;
}

.galerie-knopf:disabled:hover {
    background: none;
}

/* Winkel aus zwei Kanten, wie der Scroll-Anzeiger auf der Startseite */
.galerie-knopf span {
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    border-top: 2px solid var(--yellow-bright);
    border-right: 2px solid var(--yellow-bright);
}

.galerie-knopf--zurueck span { transform: rotate(-135deg); margin-left: 0.2rem; }
.galerie-knopf--weiter span  { transform: rotate(45deg);   margin-right: 0.2rem; }

.galerie-stand {
    font-family: "dml-bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    color: var(--yellow);
    font-variant-numeric: tabular-nums;   /* Zahlen springen nicht */
}

/* Bei einem einzigen Bild braucht es keine Bedienung — und es steht mittig
   statt links am Anschlag: Ohne Nachbarn gibt es nichts anzuschneiden, also
   auch keinen Grund, zu einer Seite hin auszurichten. */
.galerie--einzeln .galerie-zeile {
    display: none;
}

.galerie--einzeln .galerie-streifen {
    justify-content: center;
}


/* ====================[[[  Logoreihe  ]]]==================== */


/* Träger, Partner und Förderer. Eine Zeile, alle Logos auf dieselbe Höhe
   gebracht statt auf dieselbe Breite — sonst wirkt ein breites Querlogo
   neben einem gedrungenen viel größer, als es ist.

   Alle drei stehen weiß auf dem Blau der Seite (Kontrast 10,9:1). Das
   KLIMASTRÖME-Logo lag nur in Violett vor und ist hier eingefärbt; es
   besteht zu 100 % aus einer einzigen Farbe, die Form steckt allein im
   Alphakanal — der Ton ändert sich, die Zeichnung nicht. */
.logo-reihe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
}

/* Nicht alle auf dieselbe Höhe: Ein Schriftzug wird über seine Zeilenhöhe
   wahrgenommen, ein quadratisches Zeichen über seine Fläche. Bei gleicher
   Höhe ist das HfMT-Zeichen nur 44 px breit, der KLIMASTRÖME-Schriftzug
   107 — es wirkt dadurch halb so groß, obwohl beide gleich hoch sind.
   Die Höhen sind deshalb einzeln gesetzt, bis die drei optisch gleich
   schwer stehen. */
.logo-reihe img {
    display: block;
    width: auto;
    height: clamp(1.9rem, 4vw, 2.75rem);
}

/* Nur das quadratische Zeichen tanzt aus der Reihe — es braucht rund das
   Anderthalbfache. Die beiden Schriftzüge stehen auf derselben Höhe. */
.logo-reihe img[src$="hfmt-kmm.webp"] {
    height: clamp(3rem, 6.2vw, 4.25rem);
}


/* ====================[[[  Video  ]]]==================== */


/* Gelber Rahmen wie um die Bilder, damit Video und Galerie zusammengehören.
   Das Seitenverhältnis steht fest, bevor die Datei geladen ist — dadurch
   springt beim Abspielen nichts. */
.video {
    margin: 0;
}

.prose + .video {
    margin-top: clamp(0.75rem, 1.75vh, 1.25rem);
}

.video video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background: rgba(0, 0, 0, 0.35);
    outline: 3px solid var(--yellow);
    outline-offset: -3px;
}

.video figcaption {
    margin-top: 0.7rem;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--yellow);
}