/*
 * shaping.css - der Rhythmus über dem bestehenden Inhalt (Spec 2, §3 bis §9).
 *
 * Gestaltet wird ausschließlich über die Hüllen, die shaping.php um die
 * vorhandenen Knoten gelegt hat. Kein Text, keine Reihenfolge, keine Links
 * werden hier verändert - CSS kann das auch gar nicht.
 */

:root {
	--mass-lesebreite: 54ch;
	--mass-lead: 34ch;
	--mass-schmal: 52ch;
}

/* -- Grundlesbarkeit (Spec 2, §9 - der größte Hebel) --------------------- */

.entry-content p {
	font-size: 18px;
	font-weight: 300;
	line-height: 1.75;
	color: var(--text);
	max-width: var(--mass-lesebreite);
	margin: 0 0 1.35em;
	text-wrap: pretty;
	hyphens: auto;
	-webkit-hyphens: auto;
}

.entry-content h2 {
	/*
	 * Vorher clamp(30px, 3.75vw, 54px) - auf einem breiten Bildschirm 54px.
	 * Das war eine Plakatgroesse: Die Ueberschrift stand als eigene Flaeche
	 * neben dem Text, statt ihn anzufuehren. 42px bleibt deutlich groesser
	 * als der Text und laesst ihn wieder zum Hauptdarsteller werden.
	 */
	font-size: clamp(27px, 2.9vw, 42px);
	font-weight: 300;
	letter-spacing: -.025em;
	line-height: 1.06;
	margin: 0 0 .6em;
	max-width: 26ch;
	text-wrap: balance;
}

/* Keine Kursivschrift, kein Blocksatz (Spec 2, §9) */
.entry-content em,
.entry-content i { font-style: normal; font-weight: 400; }
.entry-content p { text-align: left; }

/* -- Einleitung: der Absatz vor der ersten Überschrift ------------------- */

.kk-einleitung { margin-bottom: 88px; }

/*
 * Der vergrößerte erste Absatz - nur noch auf der Startseite.
 *
 * Vorher galt er für jede Seite: Was vor der ersten Zwischenüberschrift
 * stand, bekam für seinen ersten Absatz 22 statt 18 Pixel. Gedacht war das
 * für einen kurzen Auftakt von einem Satz. Gemessen auf dem Bestand:
 * Von 92 Seiten haben elf so eine Einleitung, und bei allen elf ist der
 * erste Absatz lang - 210 bis 770 Zeichen -, bei mehreren folgen noch
 * weitere. Auf »Long Covid« stand damit ein Absatz in 22 Pixeln und
 * direkt darunter zwei in 18: die Schrift sprang mitten in der Einleitung.
 *
 * Auf der Startseite ist der größere Willkommenstext gewollt. Überall
 * sonst gilt jetzt dieselbe Größe für allen Fließtext. Wer auf einer
 * Unterseite doch einen Auftakt möchte, wählt im Editor den Stil
 * »Lead-Absatz« - dann ist es eine Entscheidung und kein Zufall der
 * Reihenfolge.
 *
 * »:where()« um die Startseiten-Klasse, und das ist nicht Kosmetik: Ein
 * einfaches ».ist-startseite« davor hebt das Gewicht von 0,2,1 auf 0,3,1
 * - und damit über den Stil »Über die volle Breite« (0,3,0), den der
 * Willkommenstext trägt. Die max-width hier hätte ihn wieder auf 34 Zeichen
 * zusammengeschoben. :where() zählt nicht mit; das Gewicht bleibt, wie es
 * war.
 */
:where(.ist-startseite) .kk-einleitung > p:first-of-type {
	font-size: 22px;
	font-weight: 300;
	line-height: 1.65;
	max-width: var(--mass-lead);
	color: var(--text);
}

/* Die beiden Knöpfe der Startseite (Spec 2, §5) */
.kk-einleitung > p > a[href],
.entry-content > p > a.wp-element-button {
	display: inline-block;
}

/* -- Abschnitte: Rhythmus statt Textwand (Spec 2, §3) -------------------- */

.kk-abschnitt {
	position: relative;
	z-index: 1;
	margin-bottom: var(--sektionsabstand);
}

/* Die Nummer ist Dekoration - sie steht nicht im Text (Spec 2, §0) */
.kk-abschnitt__kopf::before {
	content: "0" attr(data-nummer);
	display: block;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: .26em;
	color: var(--gold-mittel);
	margin-bottom: 16px;
}
.kk-abschnitt[data-index="1"] .kk-abschnitt__kopf::before { content: "01"; }
.kk-abschnitt[data-index="2"] .kk-abschnitt__kopf::before { content: "02"; }
.kk-abschnitt[data-index="3"] .kk-abschnitt__kopf::before { content: "03"; }
.kk-abschnitt[data-index="4"] .kk-abschnitt__kopf::before { content: "04"; }
.kk-abschnitt[data-index="5"] .kk-abschnitt__kopf::before { content: "05"; }
.kk-abschnitt[data-index="6"] .kk-abschnitt__kopf::before { content: "06"; }
.kk-abschnitt[data-index="7"] .kk-abschnitt__kopf::before { content: "07"; }
.kk-abschnitt[data-index="8"] .kk-abschnitt__kopf::before { content: "08"; }
.kk-abschnitt[data-index="9"] .kk-abschnitt__kopf::before { content: "09"; }

/* Unterabschnitte unter einer h3 tragen keine Nummer - siehe shaping.php. */
.kk-abschnitt[data-ebene="3"] .kk-abschnitt__kopf::before { content: none; }

/*
 * Der automatische Rhythmus.
 *
 * Der Takt wird in shaping.php gezählt und steht als »data-takt« am
 * Abschnitt - nicht mit :nth-of-type() im CSS. Der Grund ist der Zähler:
 * nth-of-type zählt auch die Abschnitte mit eigenem Design mit und
 * verschöbe den Takt für alles Folgende. Ein Handgriff an einer einzigen
 * Überschrift hätte damit das Aussehen der halben Seite geändert.
 *
 * Wer sein eigenes Design hat, bekommt gar kein data-takt und fällt so aus
 * beidem heraus - aus der Zählung und aus der Gestaltung.
 */

/*
 * 1, 4, 7 - zweispaltig asymmetrisch: Überschrift links stehenbleibend,
 * Text rechts.
 */
@media (min-width: 1025px) {
	.kk-abschnitt[data-takt="1"] {
		display: grid;
		grid-template-columns: 380px minmax(0, 1fr);
		gap: 72px;
		align-items: start;
	}
	.kk-abschnitt[data-takt="1"] .kk-abschnitt__kopf {
		position: sticky;
		top: 140px;
	}
	.kk-abschnitt[data-takt="1"] .kk-abschnitt__kopf h2 {
		font-size: clamp(26px, 2.4vw, 38px);
	}
}

/*
 * 2, 5, 8 - zentriert schmal, mit einer Goldlinie über der Überschrift.
 */
.kk-abschnitt[data-takt="2"] {
	text-align: center;
	max-width: 760px;
	margin-inline: auto;
}
.kk-abschnitt[data-takt="2"] .kk-abschnitt__kopf { position: relative; padding-top: 32px; }
.kk-abschnitt[data-takt="2"] .kk-abschnitt__kopf::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 44px;
	height: 2px;
	background: var(--gold);
}
.kk-abschnitt[data-takt="2"] h2 { margin-inline: auto; }
.kk-abschnitt[data-takt="2"] p {
	max-width: var(--mass-schmal);
	margin-inline: auto;
	text-align: left;
}

/*
 * Und alles Übrige ebenso.
 *
 * »text-align: center« am Abschnitt trifft jedes Kind, das keine eigene
 * Ausrichtung mitbringt. Für Absätze steht sie eine Zeile höher zurück auf
 * links - für Listen stand sie nirgends. Jede Zeile eines
 * Aufzählungspunktes stand damit mittig, während die Punkte selbst am
 * linken Rand des Abschnitts hingen: gemessen der Punkt bei 155 Pixeln,
 * der Text der Absätze darüber bei 243. Bei mehrzeiligen Einträgen ist das
 * nicht mehr zu lesen.
 *
 * Die Ausrichtung allein genügt nicht. Die Liste braucht auch dasselbe Maß
 * wie der Absatz - sonst läuft sie über die vollen 760 Pixel, während der
 * Text darüber bei 52 Zeichen aufhört, und die beiden fluchten nicht.
 */
.kk-abschnitt[data-takt="2"] :is(ul, ol, blockquote, dl, table, figcaption) {
	text-align: left;
}
.kk-abschnitt[data-takt="2"] :is(ul, ol, blockquote, dl) {
	max-width: var(--mass-schmal);
	margin-inline: auto;
}

/*
 * 3, 6, 9 - auf Sandfläche, volle Breite. Die Fläche bricht bewusst aus
 * dem Inhaltsraster aus; genau eine davon soll gleichzeitig sichtbar sein,
 * dafür sorgt der Sektionsabstand.
 */
.kk-abschnitt[data-takt="3"] {
	background: var(--sand);
	border-radius: var(--radius-sektion) var(--radius-sektion) 0 0;
	padding: 96px var(--rand);
	margin-inline: calc(var(--rand) * -1);
}
@media (max-width: 768px) {
	.kk-abschnitt[data-takt="3"] { padding: 56px var(--rand); }
}
@media (min-width: 1200px) {
	/* Zwei Spalten nur, wenn wirklich Text da ist - sonst wirkt es zerrissen */
	.kk-abschnitt[data-takt="3"] .kk-abschnitt__text {
		column-count: 2;
		column-gap: 64px;
	}
	.kk-abschnitt[data-takt="3"] .kk-abschnitt__text p { max-width: none; }
	.kk-abschnitt[data-takt="3"] .kk-abschnitt__text:has(> p:only-child) {
		column-count: 1;
	}
}

/*
 * Pull-Quote in Abschnitt 4 und 7 (Spec 2, §3): derselbe Satz, nur größer
 * gesetzt und mit Goldkante. Kein neuer Text, keine Verschiebung.
 *
 * Seit 4.46 nur noch, wenn shaping.php den Absatz als kurz markiert hat
 * (»kk-zitat-auto«, höchstens 160 Zeichen). Vorher traf die Regel jeden
 * ersten Absatz dieser Abschnitte, auch einen mit 550 Zeichen.
 */
.kk-abschnitt[data-index="4"] .kk-abschnitt__text > p.kk-zitat-auto:first-child,
.kk-abschnitt[data-index="7"] .kk-abschnitt__text > p.kk-zitat-auto:first-child {
	font-size: 28px;
	font-weight: 300;
	line-height: 1.4;
	letter-spacing: -.02em;
	color: var(--tinte);
	border-left: 2px solid var(--gold);
	padding-left: 28px;
	max-width: 34ch;
}

/* -- Kartenraster (Spec 2, §4) ------------------------------------------ */

/* -- Therapieschwerpunkte: rahmenlose Karte mit Kontur (Spec 4, §1) ------ *
 *
 * Entschieden gegen das 1px-Gitter und gegen das Register. Kein Duoton mehr:
 * die Bilder tragen den Markenfilter von Anfang an, der Duoton bleibt anderen
 * Rastern im System vorbehalten.
 */

.kk-kartenraster {
	display: grid;
	/*
	 * Das Raster rechnet selbst, wie viele Kacheln nebeneinander passen.
	 * Feste zwei Spalten ergaben auf 864px Inhaltsbreite Kacheln von 408px
	 * mit einem 180px hohen Bildstreifen darin - zu breit fuer das, was
	 * darin steht.
	 */
	grid-template-columns: repeat(auto-fill, minmax(var(--kk-kachel-min, 240px), 1fr));
	gap: 56px 32px;
	margin: var(--sektionsabstand) 0;
	padding-top: 64px;
	border-top: 1px solid var(--sand-linie);
	counter-reset: karte;
	/*
	 * Der Bereich beginnt bewusst ohne Ueberschrift: im Inhalt steht keine,
	 * und eine zu erfinden waere Inhalt. Die Oberkante und 64px Luft setzen
	 * ihn ab (Spec 4, §1).
	 */
}

.kk-karte {
	position: relative;
	counter-increment: karte;
	margin: 0;
	padding: 16px 16px 30px;
	box-sizing: border-box;
	background: transparent;
	border: 1px solid var(--sand-linie);
	border-radius: var(--kk-radius-karte, 16px);
	transition: border-color .35s var(--ease), background .35s var(--ease);
}

.kk-karte:hover { border-color: #C9BB9C; background: #F4F0E8; }

.kk-karte figure { margin: 0; overflow: hidden; border-radius: 10px; }

.kk-karte img {
	display: block;
	width: 100%;
	height: auto;
	/*
	 * 4:5 statt 3:2. Die Bilder aus dem Bestand sind fast alle quadratisch;
	 * im Querformat wurde ihnen oben und unten ein Viertel abgeschnitten -
	 * dort steht bei einem Motiv meist das Wesentliche. Hochkant faellt
	 * stattdessen links und rechts etwas weg.
	 */
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 45%;
	filter: var(--bildfilter);
	transition: transform .8s var(--ease);
}
.kk-karte:hover img { transform: scale(1.035); }

/*
 * Kopfzeile der Karte: 22px Goldstrich, daneben die Nummer.
 *
 * Beides in einem einzigen Pseudo-Element - der Strich als Hintergrund-
 * verlauf, die Nummer als Inhalt. So bleibt es eine Zeile, der Strich kann
 * beim Ueberfahren wachsen, und es braucht kein zusaetzliches Markup.
 * Die Nummer kommt aus einem CSS-Zaehler und steht damit nicht im Text:
 * fuer Screenreader und fuer Google ist sie nicht vorhanden.
 */
.kk-karte > p:first-of-type {
	margin: 22px 0 0;
	padding: 0 12px;
	/*
	 * Hier stand »position: relative«. Es hat den Bezugsrahmen für die
	 * Klickfläche weiter unten auf DIESEN Absatz verengt - deshalb war nur
	 * der Titel anklickbar und das Bild darüber nicht. Gebraucht wurde es
	 * nicht: Die Nummer davor ist ein Blockelement im normalen Fluss, kein
	 * absolut gesetztes. Ohne die Zeile ist die Karte der Bezugsrahmen,
	 * und die Fläche deckt sie ganz ab.
	 */
	font-size: 26px;
	font-weight: 400;
	letter-spacing: -.018em;
	line-height: 1.24;
	color: var(--tinte);
	text-wrap: pretty;
}

.kk-karte > p:first-of-type::before {
	content: counter(karte, decimal-leading-zero);
	display: block;
	margin-bottom: 14px;
	padding-left: 34px;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 10.5px;
	font-weight: 400;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--gold-mittel);
	background: linear-gradient(var(--gold), var(--gold)) left .45em / 22px 2px no-repeat;
	transition: background-size .35s var(--ease), padding-left .35s var(--ease);
}

.kk-karte:hover > p:first-of-type::before {
	background-size: 46px 2px;
	padding-left: 58px;
}

.kk-karte > p a {
	color: inherit;
	text-decoration: none;
	transition: color .35s var(--ease);
}
.kk-karte:hover > p a { color: var(--gold-tief); }
.kk-karte > p strong { font-weight: 400; }

/*
 * Die ganze Karte klickbar - über den vorhandenen Link, ohne einen zweiten
 * ins DOM zu setzen.
 *
 * Warum kein zweiter Link um das Bild: Am Inhalt wird nichts geändert, und
 * zwei Links auf dasselbe Ziel wären für Screenreader zwei Einträge in der
 * Linkliste, von denen einer keinen Text hat. So bleibt es ein Link mit
 * seinem Titel als Text - nur seine Fläche reicht über die ganze Karte.
 *
 * Vorausgesetzt, der Bezugsrahmen stimmt: Eine absolut gesetzte Fläche
 * richtet sich am nächsten positionierten Vorfahren aus. Das war bis 4.28
 * der Titelabsatz, nicht die Karte - und genau deshalb war das Bild nicht
 * anklickbar.
 */
.kk-karte > p:first-of-type a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.kk-karte:focus-within { outline: 2px solid var(--gold); outline-offset: 3px; }

.kk-karte__unterzeile {
	margin: 8px 0 0;
	padding: 0 12px;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-leise);
}
.kk-karte__unterzeile strong { font-weight: 400; }

@media (max-width: 600px) {
	.kk-kartenraster { grid-template-columns: 1fr; gap: 40px; }
}
.kk-karte > p:first-of-type { font-size: clamp(19px, 1.6vw, 23px); }

@media (prefers-reduced-motion: reduce) {
	.kk-karte, .kk-karte img, .kk-karte > p:first-of-type::before { transition: none; }
	.kk-karte:hover img { transform: none; }
}

/* -- Hero (Spec 2, §5) --------------------------------------------------- */

.ist-startseite .seitenkopf .seitentitel {
	font-size: clamp(38px, 5.2vw, 76px);
	font-weight: 300;
	letter-spacing: -.032em;
	line-height: 1.04;
	max-width: 22ch;
	color: var(--tinte);
	text-wrap: balance;
}

/* Goldlinie statt erfundener Eyebrow-Text (Spec 2, §5) */
.ist-startseite .seitenkopf .seitentitel::before {
	content: "";
	display: block;
	width: 44px;
	height: 2px;
	background: var(--gold);
	margin-bottom: 28px;
}

/* Die beiden Knöpfe: der erste gefüllt, der zweite mit Umrandung */
.ist-startseite .kk-einleitung > p:nth-of-type(1) > a,
.ist-startseite .kk-einleitung > p:nth-of-type(2) > a {
	display: inline-block;
	border-radius: var(--radius-pill);
	padding: 19px 34px;
	line-height: 1;
	text-decoration: none;

	/*
	 * Beide Knoepfe gleich breit.
	 *
	 * Von allein richtet sich die Breite nach der Beschriftung - »Online
	 * Termin buchen« ergab 276 Pixel, »Rueckruf vereinbaren« 289. Dreizehn
	 * Pixel Unterschied liest man nicht als Zufall, sondern als Unordnung:
	 * Zwei Knoepfe untereinander bilden eine Kante, und die soll gerade
	 * sein.
	 *
	 * Ein Mindestmass statt einer festen Breite - so waechst der Knopf mit,
	 * falls eine Beschriftung einmal laenger wird.
	 */
	min-width: 300px;
	text-align: center;

	/*
	 * Groesse und Gewicht der Schrift stehen bewusst NICHT hier.
	 *
	 * Sie kommen aus .kk-knopf, und dort sind sie 19px/700 - nicht aus
	 * Geschmack, sondern weil erst das die weisse Schrift auf dem Gold
	 * zulaessig macht (siehe base.css). Diese Regel wiegt 0,3,2 und
	 * ueberstimmte sie mit 16px/500: Der Knopf der Startseite sah nicht nur
	 * anders aus, er unterschritt den Kontrast.
	 */

	/*
	 * Kein »background-image: none« mehr.
	 *
	 * Die Zeile sollte die wachsende Unterstreichung der Linkregel
	 * abschalten - die arbeitet mit einem Verlauf als Hintergrundbild.
	 * Seit die Links .kk-knopf tragen, nimmt jene Regel sie ohnehin aus,
	 * und die Zeile hat nur noch geschadet: Sie loeschte den hellen Glanz
	 * des Glasknopfes, der ebenfalls ein Verlauf ist. Auf der Startseite
	 * sah der Knopf dadurch anders aus als auf jeder anderen Seite.
	 */
	transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
/*
 * Farbe und Flaeche kommen aus .kk-knopf, hier steht nur die Groesse.
 *
 * Zwei Stellen fuer dieselbe Farbe waren genau der Fehler: diese Regel ist
 * (0,3,2) spezifisch, die allgemeine Linkregel in content.css (0,4,1) -
 * sie gewann und faerbte die Schrift golden auf goldenem Grund. Statt die
 * Spezifitaet hochzuschrauben tragen die Links jetzt .kk-knopf, und die
 * Linkregel nimmt diese Klasse aus.
 */
.ist-startseite .kk-einleitung > p:nth-of-type(2) > a:hover {
	border-color: var(--gold-mittel);
}

/* Das Telefonzeichen im zweiten Knopf dämpfen, nicht ersetzen */
.ist-startseite .kk-einleitung > p:nth-of-type(2) > a { font-variant-emoji: text; }

/*
 * Nebeneinander, sobald Platz ist.
 *
 * Die beiden Knoepfe stehen in getrennten Absaetzen - so kamen sie aus
 * Jimdo, und am Inhalt wird nichts geaendert. Absaetze sind Blockelemente
 * und stapeln sich; »inline-block« stellt sie nebeneinander, ohne dass
 * dafuer eine Huelle noetig waere.
 *
 * Der Abstand kommt als margin und nicht als gap: Es gibt keinen
 * gemeinsamen Behaelter, den man auf flex stellen koennte, ohne den
 * uebrigen Inhalt der Einleitung mit hineinzuziehen.
 */
@media (min-width: 561px) {
	.ist-startseite .kk-einleitung > p:nth-of-type(1),
	.ist-startseite .kk-einleitung > p:nth-of-type(2) {
		display: inline-block;
		vertical-align: top;
	}
	.ist-startseite .kk-einleitung > p:nth-of-type(1) { margin-right: 14px; }
}

/*
 * Auf dem Telefon untereinander und über die ganze Breite. Das ist nicht
 * nur gleichmäßiger, sondern auch die groessere Flaeche zum Antippen - und
 * 300 Pixel Mindestbreite passten in eine 295 Pixel schmale Spalte
 * ohnehin nicht.
 */
@media (max-width: 560px) {
	.ist-startseite .kk-einleitung > p:nth-of-type(1) > a,
	.ist-startseite .kk-einleitung > p:nth-of-type(2) > a {
		display: block;
		width: 100%;
		min-width: 0;
	}
}

/* Das erste Bild der Startseite ist das Hero-Bild */
.ist-startseite .kk-einleitung > figure.wp-block-image {
	margin: 44px 0 0;
	position: relative;
	border-radius: var(--radius-block);
	overflow: hidden;
}
.ist-startseite .kk-einleitung > figure.wp-block-image img {
	width: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	border-radius: 0;
}
.ist-startseite .kk-einleitung > figure.wp-block-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(250, 248, 245, .06), rgba(38, 40, 44, .42));
	pointer-events: none;
}
@media (max-width: 768px) {
	.ist-startseite .kk-einleitung > figure.wp-block-image img { aspect-ratio: 4 / 3; }
}

/* -- Video (Spec 2, §7) -------------------------------------------------- */

.kk-video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-block);
	background: var(--nacht);
	margin: 32px 0;
}

/* ======================================================================= *
 * Abschnittsdesigns von Hand (Spec: eigenes Design je Abschnitt)
 * ======================================================================= *
 *
 * Gewählt wird im Editor an der Überschrift unter »Stile«. shaping.php
 * setzt daraus »kk-abschnitt--eigen« plus die Variante; »--eigen« nimmt
 * den Abschnitt zugleich aus dem automatischen Rhythmus oben heraus.
 *
 * Die vier Varianten sind bewusst dieselben, die der Rhythmus verteilt,
 * plus eine Fläche. Nichts Neues zu lernen - nur selbst bestimmt, welcher
 * Abschnitt welche bekommt.
 */

/*
 * Warum überall ».entry-content« davorsteht:
 *
 * base.css hebt mit ».seite--lesen .entry-content > *« die Breitenbegrenzung
 * auf - Gewicht 0,2,0. Ein bloßes ».kk-abschnitt--schmal« wiegt 0,1,0 und
 * verlöre; der Abschnitt bliebe breit. Mit ».entry-content« davor steht es
 * 0,2,0 zu 0,2,0, und diese Datei wird nach base.css geladen.
 *
 * Das ist einmal danebengegangen: »schmal« sah im Browser aus wie »breit«.
 */

/* -- Zweispaltig: Überschrift links stehenbleibend ----------------------- */

@media (min-width: 1025px) {
	.entry-content .kk-abschnitt--zweispaltig {
		display: grid;
		grid-template-columns: 380px minmax(0, 1fr);
		gap: 72px;
		align-items: start;
	}
	.entry-content .kk-abschnitt--zweispaltig .kk-abschnitt__kopf {
		position: sticky;
		top: 140px;
	}
	.entry-content .kk-abschnitt--zweispaltig .kk-abschnitt__kopf :is(h2, h3) {
		font-size: clamp(26px, 2.4vw, 38px);
	}
}

/* -- Schmal und mittig, mit Goldlinie ------------------------------------ */

.entry-content .kk-abschnitt--schmal {
	text-align: center;
	max-width: 760px;
	margin-inline: auto;
}
.entry-content .kk-abschnitt--schmal .kk-abschnitt__kopf { position: relative; padding-top: 32px; }
.entry-content .kk-abschnitt--schmal .kk-abschnitt__kopf::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 1px;
	background: var(--gold);
}
.entry-content .kk-abschnitt--schmal :is(h2, h3) { margin-inline: auto; }

/*
 * Mittig ist hier die Überschrift, nicht der Text.
 *
 * Derselbe Fall wie beim automatischen Takt 2: »text-align: center« am
 * Abschnitt vererbt sich auf alles, was keine eigene Ausrichtung hat.
 * Absätze fängt .entry-content p weiter oben ab, Listen und Zitate nicht -
 * die standen mittig, mit den Aufzählungspunkten weit links daneben.
 *
 * Kein »margin-inline: auto« wie beim Takt 2: Dort steht der Absatz mittig
 * im Abschnitt, hier steht er am linken Rand. Die Liste folgt dem Absatz,
 * mit dem sie zusammen gelesen wird.
 */
.entry-content .kk-abschnitt--schmal :is(ul, ol, blockquote, dl, table, figcaption) {
	text-align: left;
}

/* -- Über die volle Breite ----------------------------------------------- */

/*
 * Hier steht bewusst mehr als »max-width: none«: Die Überschriftenbreite
 * von 26 Zeichen und die Lesebreite der Absätze sind an anderer Stelle
 * gesetzt und müssen mit aufgehoben werden, sonst bleibt der Abschnitt
 * breit und sein Inhalt schmal.
 */
.entry-content .kk-abschnitt--breit {
	max-width: none;
	margin-inline: 0;
	text-align: left;
}
.entry-content .kk-abschnitt--breit > .kk-abschnitt__kopf :is(h2, h3) { max-width: none; margin-inline: 0; }

/*
 * Und der Text darin ebenso.
 *
 * Ohne diese Regel war der Abschnitt zwar breit, die Absätze darin blieben
 * aber bei 54 Zeichen stehen - gemessen 590 von 1216 Pixeln. Der Abschnitt
 * sah dann breit aus und leer.
 *
 * Zum Preis: Über die ganze Spalte werden aus 54 Zeichen rund 140. Wer
 * einen langen Fließtext breit setzen will, ohne die Zeile so lang werden
 * zu lassen, gibt dem Absatz zusätzlich den Stil »Volle Breite,
 * zweispaltig« - dann ist jede Spalte wieder normal breit.
 */
.entry-content .kk-abschnitt--breit :is(p, li, blockquote) { max-width: none; }

/* -- Auf einer Sandfläche ------------------------------------------------- */

.entry-content .kk-abschnitt--flaeche {
	max-width: none;
	margin-inline: 0;
	text-align: left;
	background: var(--sand);
	border-radius: 16px;
	padding: clamp(28px, 4vw, 56px);
}
.entry-content .kk-abschnitt--flaeche > .kk-abschnitt__kopf :is(h2, h3) { max-width: none; margin-inline: 0; }
.entry-content .kk-abschnitt--flaeche :is(p, li, blockquote) { max-width: none; }
.entry-content .kk-abschnitt--flaeche > .kk-abschnitt__kopf { margin-bottom: 8px; }

/* Zwei Sandflächen hintereinander sollen sich nicht berühren. */
.entry-content .kk-abschnitt--flaeche + .kk-abschnitt--flaeche { margin-top: 24px; }

/* ----------------------------------------------------------------------- *
 * Vier weitere Abschnittsdesigns (4.23)
 * ----------------------------------------------------------------------- *
 *
 * Die vier bestehenden bleiben unangetastet. Diese hier kommen dazu und
 * folgen demselben Weg: an der Überschrift wählen, shaping.php setzt die
 * Klasse, »--eigen« nimmt den Abschnitt aus dem automatischen Rhythmus.
 */

/* -- Dunkle Fläche -------------------------------------------------------
 *
 * Für einen Abschnitt, der sich vom Rest lösen soll - ein Zitat, ein
 * Grundsatz, ein Hinweis von Gewicht. Sparsam einsetzen: Zwei dunkle
 * Flächen auf einer Seite heben sich gegenseitig auf.
 *
 * Die Farben sind gerechnet: Creme auf Nacht kommt auf 13,9, das helle
 * Gold der Überschrift auf 6,2. Das gewöhnliche Gold käme nur auf 4,6 und
 * wäre für die grosse Überschrift zwar zulässig, aber matt.
 */
.entry-content .kk-abschnitt--nacht {
	max-width: none;
	margin-inline: 0;
	text-align: left;
	background: var(--nacht);
	border-radius: 16px;
	padding: clamp(32px, 4.5vw, 64px);
	color: var(--sand);
}
.entry-content .kk-abschnitt--nacht > .kk-abschnitt__kopf :is(h2, h3) {
	max-width: none;
	margin-inline: 0;
	color: var(--gold-hell);
}
.entry-content .kk-abschnitt--nacht :is(p, li) { color: var(--sand); max-width: none; }
.entry-content .kk-abschnitt--nacht li::marker { color: var(--gold-hell); }
.entry-content .kk-abschnitt--nacht a:not(.kk-knopf) { color: var(--gold-hell); }
.entry-content .kk-abschnitt--nacht .kk-abschnitt__kopf::before { color: var(--gold-hell); }

/* -- Umrandet -------------------------------------------------------------
 *
 * Wie die Sandfläche, nur leiser: eine Linie statt einer Füllung. Für
 * Abschnitte, die zusammengehören, ohne sich vorzudrängen - Checklisten,
 * Voraussetzungen, Ablauf.
 */
.entry-content .kk-abschnitt--rahmen {
	max-width: none;
	margin-inline: 0;
	text-align: left;
	border: 1px solid var(--sand-linie);
	border-radius: 16px;
	padding: clamp(28px, 4vw, 56px);
}
.entry-content .kk-abschnitt--rahmen > .kk-abschnitt__kopf :is(h2, h3) {
	max-width: none;
	margin-inline: 0;
}
.entry-content .kk-abschnitt--rahmen :is(p, li) { max-width: none; }

/* -- Betont ---------------------------------------------------------------
 *
 * Kein Kasten, nur ein Strich: eine kräftige Goldlinie links, wie am Rand
 * angestrichen. Nimmt am wenigsten Platz weg und fällt trotzdem auf -
 * gut für einen einzelnen wichtigen Absatz mitten im Text.
 */
.entry-content .kk-abschnitt--akzent {
	max-width: none;
	margin-inline: 0;
	text-align: left;
	border-left: 3px solid var(--gold);
	padding-left: clamp(20px, 2.5vw, 40px);
}
.entry-content .kk-abschnitt--akzent > .kk-abschnitt__kopf :is(h2, h3) {
	max-width: none;
	margin-inline: 0;
}

/* -- Kompakt --------------------------------------------------------------
 *
 * Kleinere Überschrift, engere Abstände, volle Breite. Für Seiten mit
 * vielen kurzen Abschnitten hintereinander - häufige Fragen, Ablaufpunkte.
 * Der grosse Rhythmus mit 120 Pixeln Abstand wirkt dort zerrissen.
 *
 * Die Nummer entfällt: Wo zwölf Abschnitte untereinander stehen, zählt
 * niemand mit.
 */
.entry-content .kk-abschnitt--kompakt {
	max-width: none;
	margin-inline: 0;
	margin-bottom: 44px;
	text-align: left;
}
.entry-content .kk-abschnitt--kompakt > .kk-abschnitt__kopf {
	margin-bottom: 4px;
}
.entry-content .kk-abschnitt--kompakt > .kk-abschnitt__kopf::before { content: none; }
.entry-content .kk-abschnitt--kompakt > .kk-abschnitt__kopf :is(h2, h3) {
	max-width: none;
	margin-inline: 0;
	margin-bottom: .35em;
	font-size: clamp(21px, 1.9vw, 27px);
}

/* Zwei kompakte Abschnitte hintereinander bekommen eine feine Trennlinie. */
.entry-content .kk-abschnitt--kompakt + .kk-abschnitt--kompakt {
	border-top: 1px solid var(--sand-linie);
	padding-top: 36px;
}


/* ====================================================================== *
 * Die Bühne der Startseite (seit 4.53)
 *
 * Ein stehendes Foto hinter der Einleitung, davor eine Milchglasscheibe.
 * Das Karussell bleibt im Vordergrund, wo es immer war.
 *
 * Bewusst ohne Scroll-Effekt: Die erste Fassung liess die Scheibe beim
 * Scrollen aufklaren und das Karussell dahinter laufen - zu unruhig fuer
 * einen Text, den man lesen soll.
 * ====================================================================== */

.ist-startseite .kk-buehne {
	position: relative;
	isolation: isolate;
	padding: 48px 0 56px;
}

/*
 * Die Rückseite reicht über die Einleitung hinaus: seitlich bis an den
 * Rand des Inhalts und nach oben hinter den Seitentitel. Wie weit nach
 * oben, misst buehne.js - die Höhe des Titels hängt an seiner Länge.
 */
.kk-buehne__grund {
	position: absolute;
	inset: calc(-1 * var(--kk-buehne-oben, 0px) - 40px) calc(var(--rand) * -1) 0;
	z-index: 0;
	overflow: hidden;
	border-radius: 0;
	background-color: var(--sand);
	background-image: var(--kk-buehne-foto);
	background-size: cover;
	background-position: center 42%;
	/*
	 * Das Bild steht still, während der Text darüber wegzieht. Auf dem
	 * Telefon nicht: Dort ist »fixed« bei mehreren Browsern unzuverlässig
	 * und kostet Bildrate.
	 */
	background-attachment: fixed;
}

/*
 * Die Scheibe.
 *
 * Zwei Schichten in einer: die Unschärfe über »backdrop-filter« und ein
 * Cremeton darüber. Die Unschärfe allein genügt nicht - ein unscharfes
 * Foto ist immer noch bunt, und dunkler Text darauf wäre Glückssache.
 * Der Ton trägt den Kontrast, die Unschärfe macht daraus Glas.
 */
.kk-buehne__glas {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--creme) 82%, transparent);
	-webkit-backdrop-filter: blur(20px) saturate(1.06);
	backdrop-filter: blur(20px) saturate(1.06);
}

/* Browser ohne Milchglas: deckende Fläche. Lesbar vor schön. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.kk-buehne__glas { background: color-mix(in srgb, var(--creme) 95%, transparent); }
}

/* Nach unten läuft die Fläche weich in die Seitenfarbe aus. */
.kk-buehne__grund::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 120px;
	background: linear-gradient(180deg, transparent, var(--creme));
}

/* Alles Sichtbare liegt vor der Scheibe. */
.ist-startseite .kk-buehne > *:not(.kk-buehne__grund) {
	position: relative;
	z-index: 1;
}

/* Der Titel ebenso - er steht in der Vorlage vor der Einleitung. */
.ist-startseite .seitenkopf { position: relative; z-index: 1; }

/* Auf Glas verlieren Flächen ihre Kante - die Knöpfe bekommen Schatten. */
.ist-startseite .kk-buehne > p > a {
	box-shadow: 0 14px 30px -18px rgba(60, 44, 12, .55);
}

@media (max-width: 900px) {
	.kk-buehne__grund {
		background-attachment: scroll;
	}
	.kk-buehne__glas {
		-webkit-backdrop-filter: blur(14px) saturate(1.06);
		backdrop-filter: blur(14px) saturate(1.06);
	}
}