/* ========================================================================= Bildnachweis im Kopfbereich — zwei Zeilen ========================================================================= Der Kasten am unteren Bildrand trägt seit dem 05.08.2026 zwei Angaben: oben den Ortsbezug zu Hildegard („Rupertsberg — hier gründete Hildegard ihr Kloster, 1147"), darunter wie bisher den Bildnachweis. Wer die Luftaufnahme sieht, weiß sonst nicht einmal, welcher Ort das ist. Die Grundform des Kastens (Lage, Bordeaux-Fläche, weiße Schrift, Radius) steht weiterhin in hildegard.css unter `.hero__credit`. Hier kommt nur dazu, was die zweite Zeile braucht. Diese Datei wird NACH hildegard.css geladen und ergänzt sie, statt sie zu ersetzen. Der deckende Bordeaux-Grund ist eine behobene WCAG-Beanstandung: Das Titelbild wird gewürfelt, über hellen Bildstellen kam ein halbtransparenter Kasten nur auf 4,3:1. Weiß auf #780231 liefert unabhängig vom Foto 11,3:1. Diese Kombination bleibt unangetastet — beide Zeilen erben Farbe und Fläche vom Kasten. ========================================================================= */ .hero__credit { /* Zeilen untereinander, INNEN linksbündig. Der Kasten selbst hängt weiterhin am rechten Bildrand und wächst nach links — nur sein Inhalt beginnt jetzt an einer gemeinsamen linken Kante. Bis zum 05.08.2026 war beides rechtsbündig. Das trug, solange die Bezugszeile eine Zeile war. Seit Ort und Erläuterung untereinander stehen (Teamtermin 05.08.), fransen rechtsbündige Zeilen links aus: Der kurze Ortsname stünde eingerückt über dem langen Erläuterungstext. Sarah wörtlich: „dass das Fleck linksbündig dann ausgefüllt ist". */ display: flex; flex-direction: column; align-items: flex-start; /* KEIN gap — und das ist der ganze Trick. Der Kasten trägt drei Zeilen: Ort, Erläuterung, Fotonachweis. Die ersten beiden stecken zusammen in `.hero__bezug`, der Fotonachweis steht daneben als zweites Flex-Kind. Ein `gap` trifft deshalb nur die Fuge zwischen Erläuterung und Fotonachweis, nicht die zwischen Ort und Erläuterung — die Abstände liefen auseinander. Gemessen am 05.08.2026 mit `gap: 0.1rem` und line-height 1.25 auf der Erläuterung: 4,13 px zwischen Ort und Erläuterung, 5,42 px zwischen Erläuterung und Fotonachweis. Ein Drittel Unterschied, und man sieht es. Ohne gap ergibt sich der Abstand allein aus der Zeilenhöhe, also überall gleich — auch zwischen zwei Zeilen einer umbrechenden Erläuterung, die ein gap gar nicht erreicht. Wer hier wieder Luft hineingeben will, gibt sie über `line-height`, nicht über gap. */ gap: 0; text-align: left; /* Etwas mehr Luft als bei der früheren Einzeile. ACHTUNG — das Innenmaß des Bildnachweises steht NUR hier. In hildegard.css ist es am 05.08.2026 entfernt worden: Dort war es wirkungslos, weil diese Datei später lädt und es überschrieb. Wer das Innenmaß ändert, ändert es an dieser einen Stelle. Das war heute der dritte Fall desselben Musters (Widerrufsknopf in der Fußzeile, Bildnachweis). Zwei Dateien, dieselbe Klasse, eine Eigenschaft doppelt — die spätere gewinnt still, und wer an der früheren dreht, sucht lange. Faustregel für dieses Projekt: Eine Eigenschaft gehört genau einer Datei. Ergänzt eine zweite Datei eine Klasse, dann nur um Eigenschaften, die die erste nicht kennt. */ padding: 0.35rem 0.6rem; line-height: 1.3; /* Der Kasten ist absolut positioniert und rechts verankert, wächst also nach links. Ohne Deckel liefe die lange Bezugszeile auf schmalen Geräten aus dem Bild. Mit dem Deckel bricht sie stattdessen um. `.hero__media` schneidet zwar ab (overflow: hidden), aber abgeschnitten ist nicht lesbar — deshalb hier begrenzen, nicht dort abfangen. */ max-width: calc(100% - 1rem); } /* Leere Angaben werden ausgeblendet, nicht geleert: So entsteht weder ein leerer Kasten noch ein Abstand ins Nichts. Ein Element mit `display: none` ist kein Flex-Kind mehr, der `gap` fällt also mit weg. */ .hero__credit > [hidden] { display: none; } /* Der Ortsbezug ist die wichtigere der beiden Angaben und steht deshalb oben, eine Stufe größer und kräftiger als der Fotonachweis. */ .hero__bezug { font-size: var(--font-size-body-sm); font-weight: 500; } /* Ort und Erläuterung stehen seit dem 05.08.2026 in zwei Zeilen. Den Umbruch macht `display: block`, nicht ein
im PHP — so bricht nur, wo wirklich zwei Angaben vorliegen, und ohne Stylesheet bleibt die Zeile trotzdem lesbar. Archivo ist eine Variable Font von 400 bis 700 — 400 und 700 sind also echte Schnitte und keine vom Browser gefetteten. Sie liegen weit genug auseinander, dass der Ort auch auf dem Telefon sofort heraussticht. */ .hero__ort { display: block; font-weight: 700; } .hero__erlaeuterung { display: block; font-weight: 400; /* KEINE eigene line-height. Sie stand hier bis zum 05.08.2026 auf 1.25, eine Spur enger als die 1.3 des Kastens — und war damit der zweite Grund für die ungleichen Abstände: Die Erläuterung brachte weniger halbe Zeilenluft mit als ihre Nachbarn. Sie erbt jetzt die 1.3, und damit stehen alle drei Zeilen im selben Takt. Der Kasten wächst dadurch um 0,75 px — das trägt auch das flache Titelbild. */ } /* Der Bildnachweis behält die kleine Größe aus hildegard.css. */ .hero__foto { font-size: var(--font-size-body-xs); } /* Auf schmalen Geräten bricht die Bezugszeile innerhalb des Kastens um — und jede zusätzliche Zeile frisst Titelbild. Nachgemessen bei 320 px mit dem längsten der vier Nachweise („Bacharach / Von hier kam Unterstützung für den Rupertsberg / Foto: Dominik K…"): Der Kasten wurde 304 × 102 px groß und verdeckte damit 40 % des Bildes. Das ist der Fall, um den es geht — die kürzeren Nachweise blieben schon vorher unauffällig, und weil das Titelbild gewürfelt wird, trifft der ungünstigste jeden vierten Aufruf. Zwei Stellschrauben, beide nur hier unten: Die Bezugszeile fällt auf dieselbe Größe wie der Fotonachweis — auf drei Zeilen Kleingedrucktem trägt die Abstufung ohnehin nicht mehr, und sie spart eine ganze Zeile. Dazu ein knapperer Zeilenabstand und Innenrand. Fett bleibt der Ortsname, er hebt sich weiter ab. Die andere Hälfte der Lösung steht in hildegard.css: Das Titelbild wird auf schmalen Fenstern hochformatiger, damit überhaupt mehr Bild da ist, das der Kasten nicht bedecken kann. */ @media (max-width: 30rem) { .hero__credit { padding: 0.25rem 0.45rem; line-height: 1.25; } .hero__bezug { font-size: var(--font-size-body-xs); } } /* ========================================================================= Dieselbe Angabe am Eintragsfoto — als Bildunterschrift ========================================================================= Anlass: Feedback 2026-08-05-2312-jzwcrp. Unter den Fotos in den Ausklapp-Einträgen stand nur der Urheber. Carlo wörtlich: „die Fotos haben zwar die Quelle stehen, aber es fehlt irgendwie so ein guter Bezug … man kann sich gar nicht richtig erklären, worum es sich handelt", und dazu: „ähnlich wie oben bei dem Bild". „Oben" ist wörtlich zu nehmen. Die Felder `ort` und `bezug` gibt es im Blueprint längst — sie wurden nur im Kopfbereich ausgegeben und in der Bildreihe, nicht am Eintragsfoto. Deshalb kein neues Feld und keine zweite Systematik, sondern dieselben zwei Angaben an einer dritten Stelle. WAS HIER ANDERS IST ALS OBEN. Der Störer über dem Titelbild ist ein Kasten AUF dem Foto: bordeaux hinterlegt, weiße Schrift, absolut positioniert, damit er auf jedem Bildmotiv lesbar bleibt. Hier unten steht die Angabe UNTER dem Bild auf ruhigem Grund — sie braucht weder Fläche noch Deckkraft, nur Rangfolge. Gleiche Daten, gleiche Pflege, anderes Gestaltungselement. ZUSTÄNDIGKEIT DER EIGENSCHAFTEN (Hausregel weiter oben in dieser Datei): In hildegard.css stehen an `.figure__caption` margin-top, font-size und color, an `.figure__credit` font-size und color. Davon wird hier nichts angefasst. Neu sind drei eigene Klassen sowie am Nachweis nur `display` und `margin-top` — beides kennt hildegard.css dort nicht. Die Schriftgröße der Bezugszeile wird bewusst NICHT gesetzt: Sie erbt --font-size-body-sm vom figcaption und liegt damit von selbst zwischen Fließtext (größer) und Bildnachweis (--font-size-body-xs, kleiner). Genau diese Staffelung war gewünscht — eine eigene Größe hier wäre dieselbe Eigenschaft ein zweites Mal. ========================================================================= */ .figure__bezug { display: block; line-height: 1.35; color: var(--color-text); } /* Der Ort trägt die Rangfolge, nicht die Größe. Archivo ist eine Variable Font von 400 bis 700 — 600 ist also ein echter Schnitt und kein vom Browser gefetteter. Dieselbe Überlegung wie oben bei `.hero__ort`. */ .figure__ort { font-weight: 600; } .figure__erlaeuterung { font-weight: 400; } /* Der Gedankenstrich zwischen Ort und Erläuterung entsteht in der Ausgabe, nicht im Feldinhalt — wie der Doppelpunkt und die Fettung im Kopfbereich. Zwei Gründe: Wer im Panel pflegt, muss sich um kein Satzzeichen kümmern, und wenn eine der beiden Angaben fehlt, steht kein einzelner Strich herum. Der Nachbarschaftswähler sorgt dafür, dass er nur erscheint, wenn wirklich beides da ist. */ .figure__ort + .figure__erlaeuterung::before { content: " — "; } /* Der Nachweis stand bisher als einziges Kind im figcaption und brauchte keinen Umbruch. Jetzt kann die Bezugszeile davor stehen — ohne `display: block` liefen beide in derselben Zeile ineinander. Der Abstand hängt am Nachweis und wird abgeschaltet, sobald dieser das erste Element ist. Ein `gap` am figcaption könnte das nicht: Er griffe nur zwischen zwei vorhandenen Kindern, ein pauschales margin-top wäre bei fehlender Bezugszeile dagegen fälschlich da. So entsteht bei leeren Feldern weder eine Zeile noch ein Abstand. */ .figure__credit { display: block; margin-top: 0.15rem; } .figure__credit:first-child { margin-top: 0; } /* Auf schmalen Geräten eine Stufe kleiner — dasselbe Mittel, das der Störer über dem Titelbild weiter oben in dieser Datei benutzt, und aus demselben Grund. Gemessen am 06.08.2026 im gleichherkünftigen iframe (resize_window wirkt in dieser Umgebung nicht): Bei 320 px Fensterbreite ist die Textspalte unter dem Foto nur 280 px breit — rund 39 Zeichen je Zeile bei 15 px. Damit lief die Bezugszeile reihenweise auf drei Zeilen. Auf 13 px passen rund 45 Zeichen, und die Rangfolge zum Nachweis geht nicht verloren: Sie hängt hier an Strichstärke und Farbe, nicht an der Größe. Grenze bei 30rem wie oben. */ @media (max-width: 30rem) { .figure__bezug { font-size: var(--font-size-body-xs); line-height: 1.3; } }