/* ═══ Baustein Text ═════════════════════════════════════════
   Ein Abschnitt Fliesstext. Der Abstand nach oben ist klein, der
   nach unten gross: aufeinanderfolgende Textabschnitte gehoeren
   zusammen und sollen nicht als Kette einzelner Sektionen lesen.
   ═══════════════════════════════════════════════════════════ */

/* Zwei Textabschnitte hintereinander sind ein Fluss, kein
   Themenwechsel. Sie ruecken naeher zusammen. */

.text__innen { max-width: 1100px; }


.text__liste {
	margin-top: var(--s4);
	max-width: 62ch;
	columns: 2;
	column-gap: var(--r-mittel);
	font-size: var(--t-mittel);
	color: var(--mu);
}
.text__liste li {
	break-inside: avoid;
	padding: var(--s1) 0 var(--s1) 20px;
	position: relative;
	border-bottom: 1px solid var(--ln);
	line-height: 1.55;
}
.text__liste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 18px;
	width: 8px;
	height: 1px;
	background: var(--tx);
}

/* ── Bruecke zurueck zum Haus ───────────────────────────── */
/* Kein Kasten mit Schatten, nur eine Linie links. Die Brücke
   soll als Nachsatz lesen, nicht als Werbebanner. */
.text--bruecke .fliesstext {
	border-left: 1px solid var(--tx);
	padding-left: clamp(18px, 2.4vw, 34px);
	color: var(--tx);
	max-width: 62ch;
}
/* Die Verweisreihe steht auf derselben Kante wie der Text, nicht auf
   der Linie. Der eine Pixel ist die Linie selbst. */
.text--bruecke .text__wege { margin-left: calc(clamp(18px, 2.4vw, 34px) + 1px); }

/* Bruecke ohne Satz. Sie schliesst den Text darueber ab, statt eine
   eigene Flaeche zu beanspruchen: keine Polsterung nach oben, nur
   die Haarlinie und die Verweise darunter. */
.text--nurwege .text__innen {
	border-top: 1px solid var(--ln);
	padding-top: var(--s4);
}
.text--nurwege .text__wege { margin: 0; }

@media (max-width: 760px) {
	.text__liste { columns: 1; }

	/* Am Handy sind die Verweise der Bruecke Tastflaechen und keine
	   Woerter im Satz. Als Zeile im Fluss waren sie 22 Pixel hoch. */
	.text__wege a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/* ── Rechtstexte ────────────────────────────────────────── */
/* Schmale Spalte. 68 Zeichen sind die Grenze, ab der das Auge die
   naechste Zeile nicht mehr sicher findet, und Rechtstexte liest
   niemand freiwillig zweimal. */
.text--schmal .text__innen,
.text--schmal .fliesstext,
.text--schmal .text__liste { max-width: 68ch; }
.text--schmal .text__liste { columns: 1; }


/* Was noch fehlt, steht sichtbar da. Eine Erklaerung mit einer
   offenen Stelle darf nicht fertig aussehen. */
.offen {
	background: rgba(12, 13, 15, .08);
	color: var(--tx);
	padding: 1px 6px;
	font-size: .94em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* ── Faktenblock einer Veranstaltungsseite ──────────────── */
/* Ein Absatz in Satzform mit allem Belegten: Zeitraum, Ort, Zahlen.
   Groesser als der Fliesstext darunter und auf einer Haarlinie, weil
   er die Antwort auf die Frage ist, mit der jemand hier ankommt.
   TEXTE_VERANSTALTUNGEN_DE_EN.md, 4. September. */

/* --s3, nicht --s4: mit 24 ergaben Linie und Polster 48 Pixel bis zum
   ersten Satz, und der Abstand zum Absatz darunter war 24. Zwei
   Werte fuer denselben Zweck. Mit 16 landet er auf 40, das die Seite
   ohnehin hat. */
.text--fakten .text__innen {
	border-top: 1px solid var(--tx);
	padding-top: var(--s3);
}

.text--fakten .fliesstext p {
	font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
	line-height: 1.6;
	max-width: 62ch;
}