/* Essays: Übersicht, Essayseite, Autorenseite
 *
 * Gemessen an der Blog-Vorlage des Webflow-Stands (1280 px):
 *   Kopf: Label „Essays“ 20/500 bei x 81 · Titel 50/65 px, Versalien, zentriert,
 *         700 px breit bei y 282 · Sektion 483 hoch
 *   Text: Bild 1200 × 633 volle Breite · Lesetext 800 px zentriert (x 240),
 *         20/30 px Gewicht 500 · h3 28/36,4 · Sektion 140 px oben und unten
 *   Übersicht: Zeilen 1198 × 100, Abstand 30 · Titel 30 px · Autor 20 px · Knopf 147 × 56
 *   Autor: Name 26 px bei y 140 · Rolle 20 px · Bio 490 px breit
 */

/* ---------------------------------------------------- Essaykopf */
.essay-kopf { padding: var(--abstand-kopf) 0 0; }        /* Sektion 483 hoch, Bild bei y 623 */
.essay-krume {
  display: flex; align-items: center; gap: 0; height: 71px;
  border: 1px solid var(--dunkel-rand); border-bottom: 0;
}
.essay-krume a {
  display: flex; align-items: center; height: 100%; padding: 0 40px;
  font-size: 20px; font-weight: 500; color: var(--dunkel-text); text-decoration: none;
}
.essay-krume a:hover { color: var(--akzent); }
.essay-krume::after {                /* schräger Abschluss wie im Original */
  content: ""; width: 70px; height: 100%;
  border-right: 1px solid var(--dunkel-rand); transform: skewX(-24deg); transform-origin: bottom;
}
.essay-titelblock {
  border: 1px solid var(--dunkel-rand); border-top: 1px solid var(--dunkel-rand);
  padding: 70px 40px; text-align: center;
}
.essay-titel {
  max-width: 700px; margin: 0 auto;
  font-size: 50px; line-height: 1.2; font-weight: 700; text-transform: uppercase;
  letter-spacing: .01em; text-wrap: balance;
}
@media screen and (max-width: 991px) { .essay-titel { font-size: 38px; } .essay-titelblock { padding: 48px 24px; } }
@media screen and (max-width: 479px) { .essay-titel { font-size: 28px; } .essay-krume a { padding: 0 20px; } }

/* ---------------------------------------------------- Essaytext */
.essay-hauptteil { padding-block: 140px; }
@media screen and (max-width: 767px) { .essay-hauptteil { padding-block: 80px; } }
.essay-bild { margin: 0 0 10px; text-align: center; }   /* schmalere Vorlagen mittig, nie hochskaliert */
.essay-bild img {
  display: inline-block; width: 100%; height: auto; aspect-ratio: 1200 / 633; object-fit: cover;
  max-width: min(100%, var(--eigen, 100%)); background: var(--dunkel-sektion);
}
.essay-bild figcaption { padding-top: 10px; }
.essay-text { max-width: 800px; margin: 0 auto; font-size: 20px; line-height: 30px; font-weight: 500; color: var(--dunkel-text); }
.essay-bild + .essay-text { margin-top: 0; }
.essay-text h2, .essay-text h3 { font-size: 28px; line-height: 1.3; font-weight: 500; margin: 30px 0 17px; }
.essay-text > h2:first-child, .essay-text > h3:first-child { margin-top: 0; }
.essay-text p { margin: 0 0 20px; }
.essay-text figure { margin: 30px 0; }
.essay-text figcaption { font-size: 16px; font-weight: 400; color: var(--dunkel-text-leise); padding-top: 8px; }
.essay-text a { color: var(--akzent); }
@media screen and (max-width: 767px) { .essay-text { font-size: 18px; line-height: 28px; } }

.essay-autorzeile {
  max-width: 800px; margin: 40px auto 0; padding-top: 24px;
  border-top: 1px solid var(--dunkel-rand);
  display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: baseline;
}
.essay-autorzeile a { color: var(--dunkel-text); font-weight: 600; display: inline-block; padding-block: 9px; margin-block: -9px; }   /* 44 px Trefffläche */
.essay-autorzeile .rolle { color: var(--dunkel-text-leise); }

.essay-fehlt {
  max-width: 800px; margin: 0 auto; padding: 28px 30px;
  border: 1px dashed var(--dunkel-rand); color: var(--dunkel-text-leise); font-size: 18px;
}

/* ---------------------------------------------------- Weitere Essays / Übersicht */
.essay-liste-abschnitt { padding: 100px 0 140px; }
.essay-liste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 30px; }
.essay-zeile {
  display: grid; grid-template-columns: 1fr auto auto; gap: 16px 30px; align-items: center;
  min-height: 100px; padding: 0 40px; border: 1px solid var(--dunkel-rand);
}
.essay-zeile h3 { font-size: 30px; line-height: 1.3; font-weight: 500; margin: 0; }
.essay-zeile { position: relative; }
/* Ganze Zeile klickbar: Link der Überschrift gestreckt; Autor-Link und Knopf liegen darüber */
.essay-zeile h3 a { color: var(--dunkel-text); text-decoration: none; display: block; padding-block: 12px; }
.essay-zeile h3 a::after { content: ""; position: absolute; inset: 0; }
.essay-zeile:hover h3 a { color: var(--akzent); }
.essay-zeile .von a, .essay-zeile .knopf { position: relative; z-index: 1; }
.essay-zeile h3 a:hover { color: var(--akzent); }
.essay-zeile .von { font-size: 20px; color: var(--dunkel-text-leise); white-space: nowrap; }
.essay-zeile .von a { color: var(--dunkel-text); text-decoration: none; display: inline-block; padding-block: 12px; }
.essay-zeile .von a:hover { color: var(--akzent); }
.essay-zeile .knopf { min-width: 147px; justify-content: center; }
.essay-zeile .ausstehend { font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: var(--dunkel-text-leise); }
@media screen and (max-width: 767px) {
  .essay-zeile { grid-template-columns: 1fr; padding: 20px; gap: 8px; }
  .essay-zeile h3 { font-size: 24px; }
  .essay-zeile .von { white-space: normal; }
}

/* ---------------------------------------------------- Autorenseite */
.autor-kopf { padding: var(--abstand-kopf) 0 100px; display: grid; grid-template-columns: minmax(0, 520px) 1fr; gap: 40px; }
@media screen and (max-width: 767px) { .autor-kopf { grid-template-columns: 1fr; padding-bottom: 60px; } }
.autor-name { font-size: 26px; line-height: 1; font-weight: 500; margin: 0 0 6px; }
.autor-rolle { font-size: 20px; line-height: 30px; color: var(--dunkel-text-leise); margin: 0 0 16px; }
.autor-bio { max-width: 490px; margin: 0; font-size: 18px; line-height: 1.6; }
.autor-bio .quelle { display: block; margin-top: 10px; font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--dunkel-text-leise); }
.autor-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.autor-karte { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 24px 0; border-top: 1px solid var(--dunkel-rand); text-decoration: none; color: inherit; }
.autor-liste li:last-child .autor-karte { border-bottom: 1px solid var(--dunkel-rand); }
.autor-karte h2 { font-size: 26px; margin: 0 0 4px; transition: color .2s ease; }
.autor-karte:hover h2 { color: var(--akzent); }
.autor-karte .rolle { color: var(--dunkel-text-leise); }
.autor-karte .anzahl { font-variant-numeric: tabular-nums; color: var(--dunkel-text-leise); white-space: nowrap; }

/* Essay-Einzelseite nach dem Schema der Einzelseiten (23.09.2026): Lesetext wie auf Projekt- und Veranstaltungsseiten */
.essayseite .essay-text { max-width: none; margin: 0; font-weight: 400; }
.essayseite .essay-text figure { margin: 30px 0; }
.essayseite .projekt-hero img { width: 100%; }   /* bis zum Rand der Spalte, auf Wunsch auch leicht hochskaliert */
.essayseite .essay-text { margin-top: 40px; }
/* Abbildung mittig mit Lupe: Regeln .essay-abbildung/.lupe-einzel stehen in projekt.css (auch Projektseiten) */

/* Autorenseite nach dem Schema der Einzelseiten (23.09.2026) */
.autorseite .autor-text { margin: 0; max-width: 760px; }
.autorseite .autor-text .quelle { margin-top: 10px; }
.autorseite .serien { margin-top: 0; }
.autorseite .serien ul { border-top: 0; }   /* Linie kommt schon von der Überschrift */

/* Längere Essays mit Apparat (30.09.2026, Teresa von Ávila aus dem Katalog „Schach und Religion“) */
.essayseite .essay-text h2 + h3 {            /* Unterzeile einer Zwischenüberschrift (im Katalog blau) */
  margin: -6px 0 18px; font-family: var(--schrift-text); font-style: normal; font-size: 20px; line-height: 1.4;
  font-weight: 500; color: var(--dunkel-text-leise);
}
.essay-text sup.anm { font-size: .62em; line-height: 0; vertical-align: super; }
.essay-text sup.anm a { color: var(--akzent); text-decoration: none; padding: 6px 1px; }   /* etwas größere Trefffläche */
.essay-text sup.anm a:hover { text-decoration: underline; }
.essay-text [id^="ref-"], .essay-text [id^="anm-"] { scroll-margin-top: 120px; }
.essay-text .essay-signatur { margin-top: 30px; }
.essay-text .anmerkungen { margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--dunkel-rand); }
.essay-text .anmerkungen h2 { font-size: 24px; margin: 0 0 16px; }
.essay-text .anmerkungen ol { margin: 0; padding-left: 2.2em; font-size: 16px; line-height: 24px; color: var(--dunkel-text-leise); }
.essay-text .anmerkungen li { margin-bottom: 6px; padding-left: 4px; }
.essay-text .anmerkungen li::marker { font-variant-numeric: tabular-nums; }
.essay-text .anmerkungen li:target { color: var(--dunkel-text); }
.essay-text .anm-zurueck { color: var(--akzent); text-decoration: none; margin-left: 4px; }
.essay-text .quelle { margin-top: 24px; }
.essay-text .quelle a { color: inherit; }

/* Hinweis unter den Essay-Listen (Startseite, Übersicht) */
.essay-ausblick { margin: 24px 0 0; font-size: 18px; line-height: 27px; color: var(--dunkel-text-leise); }
.kasten-inhalt .essay-ausblick { padding: 32px 40px; margin: 0; }   /* mittig zwischen letzter Zeile und Leiste */   /* Startseite: Zeilen laufen randlos, Hinweis auf der Textkante der Zeilen */
@media screen and (max-width: 991px) { .kasten-inhalt .essay-ausblick { padding-block: 26px; } }
@media screen and (max-width: 767px) { .kasten-inhalt .essay-ausblick { padding-inline: 20px; } }