/*
	DER BEREICH COVER BORGT SICH DAS BAUTEIL-SET DES ESSAYS.

	`essay.css` traegt bereits alles, was ein erklaerender Text braucht:
	Kapitelkopf, Lead, Quellenkasten, Notiz, Merksatz, Tabelle, Abbildung mit
	Methodenzeile, Inhaltsverzeichnis und die Stufenleiste. Ein zweites
	Stilblatt daneben waere eine zweite Wahrheit ueber dasselbe Aussehen - und
	zwei Stilblaetter laufen auseinander, genau wie zwei Textdateien.

	Deshalb hier nur der Import und Platz fuer das, was NUR dieser Bereich
	braucht. Die Seiten tragen entsprechend `class="essay"`; der Klassenname
	beschreibt das Aussehen, nicht die Textsorte.

	Wenn sich die beiden Bereiche spaeter gestalterisch trennen sollen, wird
	hier ueberschrieben - nicht drueben kopiert.

	`essay.css` wird NICHT von hier importiert, sondern steht als eigenes
	<link> im Seitenkopf, direkt vor diesem. Ein @import waere ein zweiter
	Aufruf, von dem der Browser erst erfaehrt, wenn diese Datei da und
	geparst ist - bis dahin stuende die Seite ohne Spaltenraster, ohne
	Kaesten und ohne Tabellen. Zwei <link> holt er nebeneinander.

	Die Reihenfolge der beiden <link> ist die Kaskade: erst essay.css,
	dann diese Datei. Wer sie vertauscht, verliert die Ueberschreibungen.
*/

/*
	`.essay` haelt unten 104px frei fuer den Abspieler des Beitrags. Hier gibt
	es keinen, also weg damit - sonst endet jede Seite mit einem leeren Block.
*/
.essay { padding-bottom: 0; }
@media (min-width: 640px) { .essay { padding-bottom: 0; } }

/* Die Uebersichtsseiten: eine Liste aus Eintraegen, je Titel, Satz, Weg. */
.essay .liste { list-style: none; margin: 1.6rem auto 0; padding: 0; }
.essay .liste li { border-top: 1px solid var(--linie); padding: 1.1rem 0; }
.essay .liste li:last-child { border-bottom: 1px solid var(--linie); }
.essay .liste-titel { font-size: 1.12rem; font-weight: 600; color: var(--text-hell); }
.essay .liste-titel a { color: inherit; text-decoration: none; }
.essay .liste-titel a:hover { text-decoration: underline; text-underline-offset: 3px; }
.essay .liste-satz { margin: 0.35rem 0 0; color: var(--text); }
/*
	Noch nicht geschrieben: sichtbar als Vorhaben, nicht als toter Verweis.
	Derzeit NICHT in Gebrauch - alle angekuendigten Artikel stehen. Die
	Regeln bleiben, damit der naechste Eintrag, der noch fehlt, wieder so
	ausgezeichnet werden kann, ohne dass jemand das Aussehen neu erfindet.
*/
.essay .liste-offen .liste-titel { color: var(--text-meta); font-weight: 500; }
.essay .liste-offen .liste-satz { color: var(--text-meta); }
.essay .bald {
	font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--text-marke); border: 1px solid var(--linie);
	padding: 2px 7px; border-radius: 3px; margin-left: 10px; white-space: nowrap;
}

/*
	Die Stufenleiste drueben zeigt kurze Beschriftungen nebeneinander. Hier
	traegt jede Stufe einen ganzen Satz, und fuenf schmale Spalten waeren
	unlesbar. Deshalb dieselben Bauteile, nur untereinander.
*/
.essay .stufen-lang { flex-direction: column; gap: 8px; }
.essay .stufen-lang .stufe { flex: 1 1 auto; }

/* Nummerierte Aufzaehlung fuer Ablaeufe, bei denen die Reihenfolge zaehlt. */
.essay .liste-nr { margin: 1.2rem auto 0; padding-left: 1.4rem; color: var(--text); }
.essay .liste-nr li { margin-bottom: 0.7rem; padding-left: 0.3rem; }
.essay .liste-nr li::marker { color: var(--text-marke); font-size: 0.9em; }

/*
	Im Essay steht unter <article> nur Kopf, Inhaltsverzeichnis und Kapitel;
	das Spaltenraster drueben greift deshalb erst eine Ebene tiefer. Hier
	haengen Kaesten und einzelne Saetze auch direkt darunter - ohne diese
	Regel waeren sie breiter als der Text, auf den sie sich beziehen.
*/
.essay > aside,
.essay > p { max-width: var(--spalte); margin-left: auto; margin-right: auto; }