/*
    Bauteile des öffentlichen Teils (Konzept 15.2): Schaltflächen, Karten,
    Formulare, Meldungen.

    Abgrenzung zu layout.css: Dort steht, was es auf einer Seite genau
    einmal gibt – Kopfbereich, Raster, Fußbereich. Hier steht, was überall
    auftauchen kann. Eine Karte ist ein Bauteil, ein Kopfbereich nicht.

    Diese Datei hat das Übergangsstylesheet wwwroot/app.css abgelöst; dessen
    Regeln für die Formularvalidierung und die Blazor-Fehlerleiste stehen
    jetzt hier, mit Tokens statt fester Farbwerte.
*/

/* ----------------------------------------------------------------------
   Schaltflächen

   Zwei Ausprägungen genügen: eine, die zur Handlung auffordert
   („Mitglied werden"), und eine zurückhaltende für alles andere
   („Weiter lesen"). Beide sind auch als Link verwendbar – im Markup
   entscheidet die Bedeutung, ob <a> oder <button> richtig ist: Wer
   irgendwohin führt, ist ein Link; wer etwas auslöst, eine Schaltfläche.
   ---------------------------------------------------------------------- */

.schaltflaeche {
    display: inline-block;
    padding: var(--raum-1) var(--raum-3);
    border: 2px solid var(--farbe-primaer);
    border-radius: 2px;
    background-color: var(--farbe-primaer);
    color: var(--farbe-flaeche);
    font-family: var(--schrift-titel);
    font-size: var(--groesse-basis);
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;

    /* Fingerkuppengröße nach WCAG 2.5.5. 44 px sind das Mindestmaß, unter
       dem eine Schaltfläche auf dem Telefon schwer zu treffen ist. */
    min-height: 44px;

    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.schaltflaeche:hover {
    background-color: var(--farbe-primaer-mittel);
    border-color: var(--farbe-primaer-mittel);
    color: var(--farbe-flaeche);
}

/* Zurückhaltende Ausprägung: nur Umriss. Der Text steht im Waldgrün und
   erreicht auf Weiß 9,77:1, der Rahmen ebenso – über den 3:1, die WCAG
   1.4.11 für die Umrandung eines Bedienelements verlangt. */
.schaltflaeche--leise {
    background-color: transparent;
    color: var(--farbe-primaer);
}

.schaltflaeche--leise:hover {
    background-color: var(--farbe-primaer);
    color: var(--farbe-flaeche);
}

/* Auf dem waldgrünen Fußbereich kehrt sich das um. */
.fuss .schaltflaeche {
    background-color: var(--farbe-akzent);
    border-color: var(--farbe-akzent);
    color: var(--farbe-text);
}

.fuss .schaltflaeche:hover {
    background-color: var(--farbe-flaeche);
    border-color: var(--farbe-flaeche);
    color: var(--farbe-primaer);
}

/* ----------------------------------------------------------------------
   Karten

   Für die Gebäudeübersicht auf /geschichte und später für Nachrichten und
   Termine. Die ganze Karte ist anklickbar, ohne dass der Link das Bild und
   die Überschrift umschließt: Der Verweis in der Überschrift wird über ein
   Pseudoelement auf die Fläche gespannt. Das hält den Vorlesetext kurz –
   ein Screenreader liest sonst Bild, Titel und Anrisstext als einen
   einzigen, endlosen Link.
   ---------------------------------------------------------------------- */

.karte {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--farbe-flaeche);
    border: 1px solid var(--farbe-primaer-hell);
    border-radius: 2px;
    overflow: hidden;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.karte:hover {
    border-color: var(--farbe-primaer-mittel);

    /* Nur transform, kein box-shadow: Beides zusammen kostet Rechenzeit,
       und transform läuft auf der Grafikkarte (Konzept 15.3). */
    transform: translateY(-2px);
}

.karte:focus-within {
    border-color: var(--farbe-primaer);
}

.karte__bild {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.karte__inhalt {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: var(--raum-3);
}

.karte__titel {
    margin-top: 0;
    margin-bottom: var(--raum-1);
    font-size: var(--groesse-titel-3);
}

.karte__titel a {
    color: inherit;
    text-decoration: none;
}

/* Spannt den Link über die ganze Karte. */
.karte__titel a::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* Datum einer News- oder Terminkarte. Kleiner und zurückgenommen, damit die
   Überschrift die Karte trägt. */
.karte__datum {
    margin-top: 0;
    margin-bottom: var(--raum-2);
    font-size: var(--groesse-klein);
    color: var(--farbe-text-leise);
}

/* ----------------------------------------------------------------------
   Terminkarte: Titel und Zeitangabe stehen mittig, Datum und Uhrzeit
   untereinander und größer als bei einer Newskarte (Änderungswunsch vom
   19.09.2026). Deshalb eigene Regeln statt einer Änderung an
   .karte__datum – das Datum einer Newskarte bleibt klein und links.
   ---------------------------------------------------------------------- */

.karte--termin .karte__titel,
.karte--termin .karte__datum {
    text-align: center;
}

.karte--termin .karte__datum {
    font-size: var(--groesse-basis);
    color: var(--farbe-text);
}

/* Zwei Zeilen aus zwei span: block bricht sie um, ohne dass ein br im
   Markup steht. Beide liegen im selben time-Element. */
.karte--termin .karte__datum-tag,
.karte--termin .karte__datum-zeit {
    display: block;
}

/* Ort links, "Mehr Infos" rechts. margin-top:auto drückt die Zeile an den
   unteren Rand, damit die Karten einer Reihe gleich aussehen. */
.karte__fuss {
    display: flex;
    align-items: baseline;
    gap: var(--raum-2);
    margin-top: auto;
    margin-bottom: 0;
}

/* auto statt space-between: Ohne Ortsangabe steht "Mehr Infos" sonst
   links, weil es dann das einzige Kind ist. */
.karte__fuss .karte__mehr {
    margin-left: auto;

    /* Beides nötig, und beides nachgemessen: Ohne flex-shrink staucht die
       Zeile bei einem langen Ortsnamen den Verweis, bis "Mehr" und "Infos"
       untereinander stehen – bei 343 px Kachelbreite schrumpft er von 81 auf
       55 px. Umbrechen soll der Ort, nicht der Verweis. */
    flex-shrink: 0;
    white-space: nowrap;

    /* Nimmt das margin-top:auto der Grundregel zurück. Dort drückt es den
       Verweis in der Newskarte nach unten; hier ist die Fußzeile selbst
       schon unten, und ein auto-Rand würde die Grundlinie zerreißen. */
    margin-top: 0;

    /* Hebt den Verweis über das Overlay, das .karte__titel a::after über die
       ganze Karte spannt. Ohne das läge er darunter und wäre nicht
       anklickbar – der Klick ginge an den Titel. */
    position: relative;
    z-index: 1;
}

.karte__text {
    flex-grow: 1;
    margin-bottom: var(--raum-2);
}

/* Sitzt unten bündig, damit die Karten einer Reihe gleich aussehen, auch
   wenn ihre Anrisstexte verschieden lang sind. */
.karte__mehr {
    margin-top: auto;
    font-family: var(--schrift-titel);
    font-weight: 600;
    color: var(--farbe-primaer-mittel);
}

/* ----------------------------------------------------------------------
   Termine

   Abgesagte Termine werden gekennzeichnet, nicht gelöscht (Konzept 4.2) –
   wer den Termin im Kalender hat, soll die Absage sehen.
   ---------------------------------------------------------------------- */

/* Die Karte wird nicht ausgegraut – das unterschritte die 4,5:1 aus
   Konzept 6.4 – sondern über die Randfarbe gekennzeichnet. */
.karte--abgesagt {
    border-color: var(--farbe-fehler);
}

/* „Termin entfällt“. Steht über dem Titel, damit es beim Überfliegen vor dem
   Termin selbst gelesen wird. Farbe allein trägt die Aussage nicht
   (WCAG 1.4.1) – deshalb steht der Sachverhalt im Wortlaut da. */
.termin__absage {
    margin: 0 0 var(--raum-1);

    font-family: var(--schrift-titel);
    font-size: var(--groesse-klein);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--farbe-fehler);
}

/* Ort und Veranstalter auf der Einzelseite. */
.termin__daten {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--raum-1) var(--raum-3);
    margin-block: var(--raum-3);
}

.termin__daten dt {
    font-family: var(--schrift-titel);
    font-weight: 600;
    color: var(--farbe-text-leise);
}

.termin__daten dd {
    margin: 0;
}

/* ----------------------------------------------------------------------
   Kartenraster
   ---------------------------------------------------------------------- */

.kartenraster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
    gap: var(--raum-3);
}

/* ----------------------------------------------------------------------
   Formulare

   Die Felder selbst entstehen mit dem Mitgliedsantrag und dem
   Kontaktformular in Paket F. Hier steht die Grundform, damit ein Feld
   nicht nackt dasteht, sobald das erste gebraucht wird.
   ---------------------------------------------------------------------- */

.feld {
    margin-bottom: var(--raum-3);
}

.feld label {
    display: block;
    margin-bottom: var(--raum-1);
    font-family: var(--schrift-titel);
    font-weight: 600;
}

.feld input,
.feld textarea,
.feld select {
    width: 100%;
    padding: var(--raum-1) var(--raum-2);
    border: 2px solid var(--farbe-primaer-mittel);
    border-radius: 2px;
    background-color: var(--farbe-flaeche);

    /* 44 px Mindesthöhe wie bei den Schaltflächen. */
    min-height: 44px;
}

/* Der Honigtopf aus Konzept 8.3. Nicht display:none – manche Bots
   überspringen, was so versteckt ist. Aus dem Bild geschoben wirkt
   unauffälliger und ist für Screenreader ohnehin über aria-hidden fort.

   Die Regel steht hier und nicht als style="" an der Seite: Die CSP kommt
   ohne unsafe-inline aus (Konzept 8.1). */
.honigtopf {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Erklärender Text unter einer Beschriftung, etwa das Format eines Datums. */
.feld__hinweis {
    display: block;
    margin-top: var(--raum-1);
    color: var(--farbe-text-leise);
    font-size: var(--groesse-klein);
}

/*
    Kontrollkästchen. Die Regel für .feld input weiter oben setzt die volle
    Breite ohne Ausnahme – ein Kästchen würde damit bildschirmbreit. Bis zum
    Mitgliedsantrag hatte kein Formular eines, deshalb fiel es nicht auf.

    Eine eigene Regel statt :not([type=checkbox]) oben: Das :not höbe die
    Spezifität der Grundregel an, und input.invalid weiter unten verlöre
    dagegen – ein fehlerhaftes Feld behielte seinen grünen Rahmen.
*/
.feld input[type=checkbox] {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    min-height: 0;
    margin: 0.15em 0 0;
    padding: 0;
    accent-color: var(--farbe-primaer);
}

/* Kästchen und Satz nebeneinander. Die ganze Beschriftung ist anklickbar,
   die Trefferfläche damit größer als das Kästchen selbst (WCAG 2.5.8). Die
   Sätze einer Einwilligung sind lang; halbfett gesetzt wären sie mühsam zu
   lesen. */
.feld--kasten label {
    display: flex;
    align-items: flex-start;
    gap: var(--raum-1);
    font-family: var(--schrift-text);
    font-weight: normal;
}

/*
    Feldgruppen, etwa die Angaben zum Ehepartner. Die legend sagt, wann die
    Gruppe auszufüllen ist – sie ist deshalb Text, keine bloße Zierzeile.

    min-inline-size: 0 hebt die Vorgabe der Browser auf, nach der ein
    fieldset mindestens so breit ist wie sein Inhalt. Auf schmalen
    Fenstern schöbe es sonst die Seite seitlich auf.
*/
fieldset {
    min-inline-size: 0;
    margin: 0 0 var(--raum-3);
    padding: var(--raum-2) var(--raum-3) 0;
    border: 1px solid var(--farbe-primaer-hell);
    border-radius: 2px;
}

legend {
    padding-inline: var(--raum-1);
    font-family: var(--schrift-titel);
    font-weight: 600;
    color: var(--farbe-primaer);
}

@media (max-width: 40rem) {
    fieldset {
        padding-inline: var(--raum-2);
    }
}

/* Informationsteil über dem Antragsformular (Konzept 5.2): Beitrag,
   Satzung, Vorstand. Abgesetzt wie .hinweis, aber in normaler Schriftgröße –
   wer den Beitrag nicht liest, stellt den Antrag ohne ihn zu kennen. */
.antrag__hinweise {
    margin-bottom: var(--raum-4);
    padding: var(--raum-3);
    border-left: 3px solid var(--farbe-primaer);
    background-color: var(--farbe-flaeche-alt);
}

.antrag__hinweise h2 {
    margin-top: 0;
}

.antrag__hinweise > :last-child {
    margin-bottom: 0;
}

/* ----------------------------------------------------------------------
   Rückmeldung der Formularvalidierung

   Konzept 6.4: Ein Fehler darf nicht allein über die Farbe angezeigt
   werden – Menschen mit Farbsehschwäche sähen sonst nur ein Feld wie jedes
   andere. Der Rahmen ist deshalb nur die Begleitmusik; die Meldung im
   Klartext daneben trägt die Information.
   ---------------------------------------------------------------------- */

/*
    Die Auswahl ist absichtlich so genau: `.invalid` allein hat eine
    geringere Spezifität als `.feld input` weiter oben und bliebe wirkungslos
    – das Feld behielte trotz Fehler seinen normalen grünen Rahmen. Blazor
    setzt diese Klassen auf das Eingabeelement selbst, deshalb genügt es,
    den Elementnamen mit aufzunehmen.
*/
input.valid.modified:not([type=checkbox]),
textarea.valid.modified,
select.valid.modified {
    border-color: var(--farbe-primaer-mittel);
}

input.invalid,
textarea.invalid,
select.invalid {
    border-color: var(--farbe-fehler);

    /* Zweites, farbunabhängiges Merkmal: Der Rahmen ist zusätzlich dicker.
       Damit ist der Fehler auch ohne Farbwahrnehmung erkennbar – die
       Klartextmeldung darunter bleibt davon unberührt. */
    border-width: 3px;
}

.validation-message {
    display: block;
    margin-top: var(--raum-1);
    color: var(--farbe-fehler);
    font-family: var(--schrift-titel);
    font-size: var(--groesse-klein);
}

/* ----------------------------------------------------------------------
   Meldungen
   ---------------------------------------------------------------------- */

.meldung {
    padding: var(--raum-2) var(--raum-3);
    border-left: 4px solid var(--farbe-akzent);
    background-color: var(--farbe-flaeche-alt);
    margin-bottom: var(--raum-3);
}

/* Ein Fehler braucht eine eigene Randfarbe – die Farbe allein trägt die
   Aussage nicht (WCAG 1.4.1), der Text steht im Klartext ohnehin daneben.

   Stand bis zum Mitgliedsantrag in anmeldung.css. Die öffentlichen Seiten
   laden diese Datei nicht, die Fehlerliste des Antrags stand deshalb
   ungestaltet da. */
.meldung--fehler {
    border-left-color: var(--farbe-fehler);

    /* Rot mit weißer Schrift statt heller Fläche mit rotem Rand: Beim
       Durchgang zu Etappe 3 (14.09.2026) war der Kasten „im ersten
       Augenblick nicht erkennbar". Weiß auf #B00000 hat rund 7,4 : 1 und
       erfüllt damit WCAG AA wie AAA. */
    background-color: var(--farbe-fehler);
    color: #FFFFFF;
}

.meldung--fehler ul {
    margin-bottom: 0;
}

/* Ein Verweis in seiner üblichen Farbe wäre auf Rot nicht lesbar. */
.meldung--fehler a {
    color: inherit;
}

/* ----------------------------------------------------------------------
   Fehlerleiste von Blazor

   Das Framework blendet sie per JavaScript ein. Das verstößt nicht gegen
   die CSP, weil dabei kein style-Attribut im Markup entsteht.
   ---------------------------------------------------------------------- */

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: var(--raum-2) var(--raum-3);
    background-color: var(--farbe-akzent);
    color: var(--farbe-text);
    font-family: var(--schrift-titel);
    box-shadow: 0 -1px 4px rgb(0 0 0 / 0.2);
}

#blazor-error-ui .dismiss {
    position: absolute;
    right: var(--raum-2);
    top: var(--raum-1);
    cursor: pointer;
}

/* ----------------------------------------------------------------------
   Hilfsklassen
   ---------------------------------------------------------------------- */

/* Für Text, der nur vorgelesen werden soll – etwa eine Überschrift, die
   der Gliederung dient, aber gestalterisch nicht auftauchen darf. Nicht
   display:none verwenden: Das nähme ihn auch dem Screenreader. */
/* ----------------------------------------------------------------------
   Bildrahmen

   Home/Bauplan.pdf zeigt die Fotos der Hero-Sektionen als lose hingelegte
   Abzüge: weißer Rand, Schlagschatten, leicht aus der Achse gedreht.

   Die Drehung steht auf der figure, nicht auf einem Element mit
   data-reveal. wwwroot/js/reveal.js animiert transform, und beides auf
   demselben Element hieße, dass die Animation die Drehung überschreibt –
   das Bild ruckte beim Erscheinen gerade. Deshalb umschließt die Seite
   jede figure mit einem eigenen div für das Erscheinen.
   ---------------------------------------------------------------------- */

.bildrahmen {
    margin: 0;

    /* Der weiße Rand ist im Bauplan gut sichtbar, etwa ein Fünfzigstel der
       Bildbreite. Ein schmalerer Rand sähe nach Versehen aus. */
    padding: var(--raum-2);
    background-color: var(--farbe-flaeche);

    /* Weich und tief statt hart und nah: Der Abzug soll aufliegen, nicht
       kleben. */
    box-shadow: 0 12px 28px rgb(0 0 0 / 18%);
}

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

/* Quadratische Vorlagen werden auf das Querformat des Bauplans
   beschnitten. Der Ausschnitt bleibt mittig – dort liegt das Motiv. */
.bildrahmen--quer img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.bildrahmen--links  { transform: rotate(-1.2deg); }
.bildrahmen--rechts { transform: rotate(1.2deg); }

/* Auf schmalen Fenstern gerade stellen: Die Drehung kostet dort seitlich
   Platz, den die Abzüge nicht haben. */
@media (max-width: 40rem) {
    .bildrahmen {
        padding: var(--raum-1);
    }

    .bildrahmen--links,
    .bildrahmen--rechts {
        transform: none;
    }
}

/* ----------------------------------------------------------------------
   Kontaktkarte und Logokarte

   Aus dem Entwurfsbild der Kontakt-Sektion: links die Angaben einer Person
   mit ihrem Anfangsbuchstaben in einem Kreis, rechts eine weiße Karte mit
   dem Vereinslogo und dem Leitsatz.
   ---------------------------------------------------------------------- */

.kontaktkarte {
    display: flex;
    align-items: flex-start;
    gap: var(--raum-2);
    margin-top: var(--raum-4);
}

/* Das Porträt der genannten Person. Abgerundetes Rechteck statt Kreis: Der
   Entwurf zeigt es so, und ein Hochformat verliert im Kreis die Schultern. */
.kontaktkarte__bild {
    flex-shrink: 0;
    width: 110px;
    height: auto;
    border-radius: 6px;
}

.kontaktkarte__name {
    font-family: var(--schrift-titel);
    font-size: var(--groesse-vorspann);
    font-weight: 600;
    color: var(--farbe-primaer);
    margin-bottom: 0;
}

.kontaktkarte__rolle {
    color: var(--farbe-text-leise);
    margin-bottom: var(--raum-2);
}

.kontaktkarte address {
    font-style: normal;
    line-height: 1.6;
}

.logokarte {
    padding: var(--raum-4);
    border-radius: 8px;
    background-color: var(--farbe-flaeche);
    box-shadow: 0 12px 28px rgb(0 0 0 / 10%);
    text-align: center;
}

.logokarte img {
    width: 320px;
    max-width: 100%;
    height: auto;
    margin-inline: auto;

    /* Das Logo ist freigestellt; die Platzhalterfläche aus base.css würde
       durch die durchsichtigen Stellen scheinen. */
    background-color: transparent;
}

.logokarte p {
    margin: var(--raum-3) 0 0;
    color: var(--farbe-text-leise);
}

/* ----------------------------------------------------------------------
   Aufruf

   Das waldgrüne Band aus HeroSektion 4: links Überschrift und Vorspann,
   rechts die Schaltfläche, über die Ecke rechts läuft ein heller Keil.

   Der Keil ist ein Verlauf mit hartem Übergang, kein zusätzliches Element –
   das spart Markup, das nichts bedeutet. Auf schmalen Fenstern entfällt er:
   Dort stehen Text und Schaltfläche untereinander, und der Keil liefe quer
   durch beide.
   ---------------------------------------------------------------------- */

.aufruf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--raum-4);

    padding: var(--raum-5) var(--raum-4);
    border-radius: 8px;
    overflow: hidden;

    background-color: var(--farbe-primaer);
    color: var(--farbe-flaeche);
}

@media (min-width: 52rem) {
    .aufruf {
        padding-inline: var(--raum-5);
        background-image: linear-gradient(105deg,
                          transparent 0 74%,
                          var(--farbe-primaer-mittel) 74%);
    }
}

/* base.css setzt Überschriften in Waldgrün – auf Waldgrün wären sie
   unsichtbar. */
.aufruf h2 {
    margin-top: 0;
    color: var(--farbe-flaeche);
}

.aufruf p {
    max-width: 34rem;
    margin-bottom: 0;
}

/* Gold auf Waldgrün, wie im Fußbereich: 14,4:1 mit dunkler Schrift. Die
   runde Form stammt aus dem Bauplan und gilt nur hier. */
.aufruf .schaltflaeche {
    flex-shrink: 0;
    border-radius: 2rem;
    padding-inline: var(--raum-4);

    background-color: var(--farbe-akzent);
    border-color: var(--farbe-akzent);
    color: var(--farbe-text);
}

.aufruf .schaltflaeche:hover {
    background-color: var(--farbe-flaeche);
    border-color: var(--farbe-flaeche);
    color: var(--farbe-primaer);
}

/* Kurze Zeile über einer Überschrift, im Bauplan gesperrt und in Waldgrün.
   Das Gegenstück zur goldenen Plakette der Hero-Sektionen: dieselbe
   Aufgabe, aber auf hellem Grund, wo Gold als Schrift mit 1,53:1 nicht
   zulässig wäre. Waldgrün erreicht dort 9,77:1. */
.uebertitel {
    margin: 0 0 var(--raum-1);

    font-family: var(--schrift-titel);
    font-size: var(--groesse-klein);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--farbe-primaer);
}

/* Einleitender Absatz unter einem Kopfbild, das seinen Titel selbst trägt.
   Etwas größer als der Fließtext und in der Textbreite gehalten, damit er
   die Rolle des früheren Hero-Untertitels übernimmt. */
.einleitung {
    max-width: var(--breite-text);
    margin-bottom: var(--raum-4);
    font-size: var(--groesse-vorspann);
    line-height: 1.5;
    color: var(--farbe-text-leise);
}

.nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ----------------------------------------------------------------------
   Aufsatzseiten der historischen Gebäude

   Acht Seiten, die alle demselben Muster folgen: Titelband, Verfasser,
   Fließtext mit Abbildungen, Quellenangabe, Rückweg zur Übersicht.

   Die Spalte ist breiter als die Lesebreite, der Text darin aber nicht:
   38 rem sind für Fließtext das Richtige (tokens.css), ein Foto wirkt in
   dieser Breite auf einem großen Bildschirm verloren. Deshalb trägt die
   Spalte 52 rem, und die Textelemente werden darin mittig auf Lesebreite
   zurückgenommen. Abbildungen nutzen die volle Spalte.
   ---------------------------------------------------------------------- */

.aufsatz {
    width: min(52rem, 100%);
    margin-inline: auto;
}

.aufsatz > p,
.aufsatz > h2,
.aufsatz > h3,
.aufsatz > ul,
.aufsatz > ol,
.aufsatz > .quellen,
.aufsatz > .rueckweg {
    max-width: var(--breite-text);
    margin-inline: auto;
}

/* Verfasserzeile unter dem Titel. Die Texte stammen von namentlich
   genannten Personen aus dem Dorf und sind keine anonyme Redaktionsprosa –
   der Name gehört deshalb sichtbar an den Anfang, nicht in eine Fußnote. */
.verfasser {
    margin: 0;

    font-family: var(--schrift-titel);
    font-size: var(--groesse-klein);
    color: var(--farbe-text-leise);
}

/* ----------------------------------------------------------------------
   Abbildung im Aufsatz
   ---------------------------------------------------------------------- */

.abbildung {
    margin-block: var(--raum-4);
}

/* Steht die Abbildung gleich am Anfang, trägt der Abschnitt den Abstand
   bereits. Beide zusammen rissen ein Loch zwischen Titelband und Bild. */
.aufsatz > .abbildung:first-child {
    margin-top: 0;
}

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

/*
    Hochformate bekommen eine Deckelung. Das Kreuzfoto misst 1618 × 2544 px;
    über die volle Spaltenbreite gezogen wäre es mehr als zwei
    Bildschirmhöhen hoch und der Text darunter für niemanden mehr
    auffindbar. Die Breite folgt dann der Höhe, das Bild bleibt mittig.
*/
.abbildung--hoch img {
    width: auto;
    max-width: 100%;
    max-height: 32rem;
    margin-inline: auto;
}

/* Die Bildunterschrift folgt dem Bild in die Mitte. Links ausgerichtet stünde
   sie am Rand der Spalte und damit weit neben dem Bild, zu dem sie gehört. */
.abbildung--hoch figcaption {
    max-width: var(--breite-text);
    margin-inline: auto;
    text-align: center;
}

/* ----------------------------------------------------------------------
   Chronologie

   Jahreszahl und Eintrag als Beschreibungsliste – dieselbe Überlegung wie
   bei .datenliste in hero.css: Die beiden gehören paarweise zusammen, und
   genau dafür ist dl gedacht. Auf schmalen Fenstern stehen sie
   untereinander, sonst bliebe für den Eintrag zu wenig Platz.
   ---------------------------------------------------------------------- */

.chronik {
    margin: var(--raum-4) 0 0;
}

.chronik > div {
    padding-block: var(--raum-3);
    border-bottom: 1px solid var(--farbe-primaer-hell);
}

.chronik > div:last-child {
    border-bottom: 0;
}

.chronik dt {
    font-family: var(--schrift-titel);
    font-size: var(--groesse-titel-3);
    font-weight: 700;
    line-height: var(--zeilenhoehe-titel);
    color: var(--farbe-primaer);
}

.chronik dd {
    margin: 0;
}

@media (min-width: 40rem) {
    .chronik > div {
        display: grid;
        grid-template-columns: 7rem 1fr;
        gap: var(--raum-3);
    }

    /* Die Jahreszahl sitzt auf der Grundlinie der ersten Textzeile statt
       am oberen Rand der Zelle – sonst schwebt sie über dem Eintrag. */
    .chronik dt {
        padding-top: 0.1em;
    }
}

/* ----------------------------------------------------------------------
   Quellenangabe

   Die Aufsätze stützen sich auf Heimatblätter und unveröffentlichte
   Manuskripte. Diese Angaben sind der Beleg für alles darüber und werden
   deshalb mitgeführt, auch wenn sie klein gesetzt sind.
   ---------------------------------------------------------------------- */

.quellen {
    margin-top: var(--raum-5);
    padding-top: var(--raum-3);
    border-top: 1px solid var(--farbe-primaer-hell);

    font-size: var(--groesse-klein);
    line-height: 1.5;
    color: var(--farbe-text-leise);
}

.quellen h2 {
    margin: 0 0 var(--raum-1);

    font-size: var(--groesse-klein);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--farbe-text-leise);
}

.quellen p {
    margin: 0 0 var(--raum-1);
}

/* Rückweg zur Übersicht. Steht am Fuß jeder Aufsatzseite, weil viele
   Besucher über den QR-Code am Schild kommen und nicht über das Menü –
   ohne ihn hätten sie keinen Weg in den Rest der Website. */
.rueckweg {
    margin-top: var(--raum-5);
}

/* Rechtlicher Hinweis, abgesetzt vom Fließtext. Generisch und nicht
   .galerie__hinweis: Der Widerrufshinweis der Galerie (Konzept 6.3) ist der
   erste Fall, Paket F bringt mit Mitgliedsantrag und Kontakt weitere. Zwei
   Klassen desselben Zwecks liefen auseinander. */
.hinweis {
    margin-top: var(--raum-4);
    padding: var(--raum-3);

    border-left: 3px solid var(--farbe-primaer);
    background: var(--farbe-flaeche-alt);

    font-size: var(--groesse-klein);
    color: var(--farbe-text-leise);
}