/* 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: 140px 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.3; font-weight: 500; 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 h3 a { color: var(--dunkel-text); text-decoration: none; display: block; padding-block: 12px; }
.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: 140px 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; }