/*
 * unterseiten.css - Spec 3.
 *
 * Die Startseite trug schon, die Unterseiten nicht. Hier steht, was dort
 * gefehlt hat: die Rubrikliste als rechte Spalte, die Brotkrume, die
 * Oeffnungszeiten-Tabelle, der Hinweisblock, die Bildbehandlung und das
 * Kontaktformular.
 *
 * Nichts davon aendert Inhalt. Verschoben wird ausschliesslich visuell
 * ueber flex-order; die Reihenfolge im Dokument bleibt, wie sie ist.
 */

/* ====================================================================== *
 * Seitenkopf: Brotkrume, Eyebrow, Ueberschrift (Spec 3, §A1 und §B3)
 * ====================================================================== */

.seitenkopf {
	max-width: var(--inhalt);
	margin: 0 auto;
	padding: 72px var(--rand) 0;
}

.brotkrumen {
	margin-bottom: 28px;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--text-leise);
}
.brotkrumen a { color: var(--gold); text-decoration: none; }
.brotkrumen a:hover { color: var(--gold-tief); text-decoration: underline; }
.brotkrumen [aria-current="page"] { color: var(--text-leise); }
.brotkrumen-trenner { color: #CFC5B2; margin: 0 .35em; }

.eyebrow {
	margin: 0 0 14px;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--gold-mittel);
}

/*
 * Fehlt die Eyebrow - weil die Elternseite eine technische Wurzelseite ist -,
 * tritt an ihre Stelle die Goldlinie. Kein Platzhaltertext (Spec 3, §A1).
 */
.seitenkopf:not(:has(.eyebrow)) .seitentitel::before {
	content: "";
	display: block;
	width: 44px;
	height: 2px;
	margin-bottom: 22px;
	background: var(--gold);
}

.seitentitel {
	margin: 0;
	font-size: clamp(34px, 4.4vw, 56px);
	font-weight: 300;
	letter-spacing: -.02em;
	line-height: 1.12;
	color: var(--tinte);
	text-wrap: balance;
}

/* ====================================================================== *
 * Zweispaltig: Inhalt und Rubrikliste (Spec 3, §A2)
 * ====================================================================== */

.seite--lesen {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	column-gap: 72px;
	align-items: start;
	max-width: var(--inhalt);
	margin: 0 auto;
	padding: 0 var(--rand) var(--sektionsabstand);
}

/*
 * Der Kopf steht in der Textspalte, nicht über beiden.
 *
 * Bis 4.28 lief er über die ganze Breite - und weil ein Rasterelement erst
 * unterhalb des vorigen anfangen kann, begann die rechte Spalte damit
 * zwangsläufig UNTER dem Titel. Der Termin-Knopf stand dadurch auf Höhe
 * des ersten Absatzes.
 *
 * Jetzt teilen sich Kopf und Spalte die erste Zeile: links Brotkrume,
 * Kennzeichnung und Titel, rechts der Knopf. Der Titel wird dadurch um die
 * Spaltenbreite schmaler - er fluchtet dafür mit dem Text darunter.
 */
.seite--lesen > .seitenkopf {
	grid-column: 1;
	grid-row: 1;
	padding-left: 0;
	padding-right: 0;
	max-width: none;
}

/*
 * Das Titelbild dagegen steht in der Textspalte und fluchtet mit den
 * Abschnitten darunter. Ueber beide Spalten gelegt war es breiter als
 * alles, was danach kommt - eine Kante, die zu nichts gehoert.
 *
 * Auf Seiten ohne Menuespalte faellt das Raster ohnehin auf eine Spalte
 * zusammen; dort fuellt es weiterhin die ganze Breite.
 */
.seite--lesen > .seitenbild {
	grid-column: 1;
	padding-left: 0;
	padding-right: 0;
	max-width: none;
}

.seite--lesen > .entry-content { grid-column: 1; min-width: 0; }
.seite--lesen > .unterseiten   { grid-column: 1 / -1; }

/*
 * Die rechte Spalte.
 *
 * Ein einziges Element statt mehrerer nebeneinander - und das ist der
 * Punkt. Ein Rasterelement wird in die erste freie Zelle ab der Stelle des
 * vorigen gesetzt und rutscht nie wieder nach oben. Standen Terminknopf,
 * Rechtshinweis und Menü einzeln im Raster, belegte der Knopf die Zelle
 * rechts, der Hinweis eröffnete eine neue Zeile - und das Menü landete
 * ganz unten. Genau so war es.
 *
 * »align-self: start« ist Voraussetzung für das Klebenbleiben: Ein
 * Rasterelement wird sonst so hoch wie seine Zeile, und ein Element, das
 * so hoch ist wie sein Behälter, kann nirgends kleben.
 */
.seite--lesen > .seitenspalte {
	grid-column: 2;
	/*
	 * Von der ersten Zeile an - damit der Knopf oben neben dem Titel steht
	 * und nicht erst neben dem Text beginnt.
	 *
	 * Die drei Zeilen sind Kopf, Titelbild und Inhalt. Warum nicht »1 / -1«:
	 * Rechtshinweis und Kachelübersicht laufen darunter über beide Spalten,
	 * und ein klebendes Element, dessen Bereich bis ganz nach unten reicht,
	 * wandert bis in diese hinein. Fehlt eine der drei Zeilen - eine Seite
	 * ohne Titelbild -, bleibt sie ohne Höhe: Zeilenabstand ist keiner
	 * gesetzt.
	 */
	grid-row: 1 / 4;
	align-self: start;
	position: sticky;
	top: 140px;
}

/* In der Spalte beginnt der Knopf oben, nicht 56 Pixel darunter. */
.seite--lesen > .seitenspalte > .kk-aktionen--vorlage:first-child { margin-top: 0; }

/* Alles Übrige läuft über beide Spalten - und hinter der Spalte. */
.seite--lesen > .kk-rechtshinweis,
.seite--lesen > .kk-fakten { grid-column: 1 / -1; }

/*
 * Der rechtliche Hinweis als festes Element der Vorlage.
 *
 * Zurückgenommen im Ton: Er muss dastehen, aber er ist nicht die Botschaft
 * der Seite. Die feine Linie darüber trennt ihn vom Inhalt, ohne einen
 * Kasten um ihn zu ziehen.
 */
.seite--lesen > .kk-rechtshinweis--vorlage {
	margin-top: 8px;
	padding-top: 28px;
	border-top: 1px solid var(--sand-linie);
	max-width: 82ch;
}

.kk-rechtshinweis__titel {
	margin: 0 0 10px;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 10.5px;
	font-weight: 400;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gedaempft);
}

.kk-rechtshinweis--vorlage p:not(.kk-rechtshinweis__titel) {
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--gedaempft);
	max-width: none;
	margin: 0 0 10px;
}
.kk-rechtshinweis--vorlage p:last-child { margin-bottom: 0; }

/*
 * Eine leere Spalte bleibt nicht als Loch stehen.
 *
 * Bis 4.28 hing das am Menü: Ohne Rubrikliste fiel die Spalte weg. Seit
 * der Termin-Knopf auf jeder Seite über dem Menü steht, ist das die
 * falsche Bedingung - auf einer Seite ohne Menü verschwand mit der Spalte
 * auch der Knopf.
 *
 * Jetzt zählt, ob überhaupt etwas darin steht. »:has(.seitenspalte > *)«
 * und nicht »:empty«: Der Gruppenblock hinterlässt Zeilenumbrüche in der
 * Hülle, und für :empty ist ein Leerzeichen schon Inhalt.
 */
.seite--lesen:not(:has(.seitenspalte > *)) { grid-template-columns: minmax(0, 1fr); }

/*
 * Steht in der Spalte nur der Termin-Knopf und kein Menü, genügen ihr 190
 * Pixel. Die vollen 280 sind für eine Liste von Unterseiten gedacht; auf
 * »Qualifikationen« nahmen sie dem Zeitstrahl 90 Pixel weg, ohne selbst
 * etwas zu zeigen.
 */
.seite--lesen:has(.seitenspalte > .kk-aktionen--vorlage:only-child) {
	grid-template-columns: minmax(0, 1fr) 190px;
}

/*
 * Und der Text laeuft darunter ueber beide Spalten. Der Knopf braucht die
 * Spalte nur in der ersten Zeile, auf Hoehe des Titels; danach stuende
 * dort bis zum Seitenende nichts als Luft - auf »Qualifikationen« waren
 * das 190 von 1168 Pixeln, die dem Zeitstrahl fehlten.
 */
.seite--lesen:has(.seitenspalte > .kk-aktionen--vorlage:only-child) > .seitenspalte {
	grid-row: 1;
	position: static;
	top: auto;
}
.seite--lesen:has(.seitenspalte > .kk-aktionen--vorlage:only-child) > .entry-content,
.seite--lesen:has(.seitenspalte > .kk-aktionen--vorlage:only-child) > .seitenbild {
	grid-column: 1 / -1;
	/*
	 * Rechts bleibt ein Rand stehen - so breit wie die Knopfspalte. Über
	 * die volle Breite gesetzt lief der Text bis an die Kante und passte
	 * nicht mehr zu den übrigen Seiten.
	 */
	padding-right: 190px;
	/* Merkposten für Bausteine, die den Rand nutzen dürfen - die Galerie. */
	--kk-inhalt-rechts: 190px;
}

@media (max-width: 1180px) {
	.seite--lesen:has(.seitenspalte > .kk-aktionen--vorlage:only-child) > .entry-content,
	.seite--lesen:has(.seitenspalte > .kk-aktionen--vorlage:only-child) > .seitenbild {
		padding-right: 0;
	}
}
.seite--lesen:not(:has(.seitenspalte > *)) > .seitenspalte { display: none; }
.seite--lesen:not(:has(.seitenspalte > *)) > .entry-content { grid-column: 1 / -1; }

.geschwister { margin-top: 72px; }

/* Steht das Menü einmal ohne Spalte da, klebt es weiterhin selbst. */
.seite--lesen > .geschwister {
	grid-column: 2;
	align-self: start;
	position: sticky;
	top: 140px;
}

.geschwister-titel {
	margin: 0 0 18px;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--gold-mittel);
}

.geschwister ul { margin: 0; padding: 0; list-style: none; }

.geschwister li + li { border-top: 1px solid var(--sand-linie); }

.geschwister a {
	display: block;
	padding: 11px 0;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.45;
	color: var(--text);
	text-decoration: none;
	transition: padding-left .25s var(--ease), color .25s var(--ease);
}
.geschwister a:hover { padding-left: 10px; color: var(--gold-tief); }
.geschwister .ist-aktiv > a { color: var(--gold); font-weight: 400; }

/*
 * Umbruch bei 1180px, nicht erst bei 1024: darunter bleiben von der
 * Inhaltsspalte nur noch 604px - gemessen, nicht geschaetzt. Fuer 54 Zeichen
 * Lesebreite reicht das gerade so, fuer ein Titelbild im 21:9 nicht mehr.
 */
@media (max-width: 1180px) {
	.seite--lesen { grid-template-columns: minmax(0, 1fr); }

	/*
	 * Jedes Kind muss hier stehen, das oben eine feste Spalte bekommt.
	 *
	 * Fehlt eines, legt der Browser eine zweite Spalte an, die es gar nicht
	 * geben soll - »grid-column: 2« verlangt eine zweite Spalte, und wenn
	 * die Vorlage nur eine nennt, wird sie eben erfunden. Beim Hinzufuegen
	 * der Seitenspalte habe ich genau das uebersehen: Auf dem Telefon blieben
	 * dem Text dadurch 29 von 335 Pixeln, das Menue nahm den Rest.
	 */
	.seite--lesen > .seitenkopf,
	.seite--lesen > .entry-content,
	.seite--lesen > .seitenbild,
	.seite--lesen > .seitenspalte,
	.seite--lesen > .geschwister { grid-column: 1 / -1; }

	/*
	 * Und keine feste Zeile mehr. Kopf und Spalte teilen sich oben die
	 * erste Zeile - untereinander gestellt muessen beide dorthin, wo sie
	 * im Dokument stehen, sonst schoebe sich die Spalte vor den Titel.
	 */
	.seite--lesen > .seitenkopf,
	.seite--lesen > .seitenspalte { grid-row: auto; }

	/* Die Spalte ist keine Spalte mehr - also klebt sie auch nicht. */
	.seite--lesen > .seitenspalte {
		position: static;
		top: auto;
	}

	.geschwister {
		position: static;
		margin-top: 72px;
		padding-top: 40px;
		border-top: 1px solid var(--gold);
	}
	.geschwister ul { columns: 2; column-gap: 40px; }
	.geschwister li { break-inside: avoid; }
	.geschwister li + li { border-top: 0; }
	.geschwister a { border-top: 1px solid var(--sand-linie); }
}
@media (max-width: 600px) {
	.geschwister ul { columns: 1; }
}

/* ====================================================================== *
 * Inhalt: Bilder, Hinweisblock, Buttons, leere Links
 * ====================================================================== */

/* -- B6: Bildbehandlung auf JEDER Seite, nicht nur der Startseite ------- */

.entry-content img:not(.kk-siegel__bild):not(.custom-logo):not([src$=".svg"]) {
	border-radius: 6px;
	filter: var(--bildfilter);
}

/*
 * Das feste Seitenverhaeltnis regeln jetzt die Spec-5-Regeln weiter unten:
 * 21:9 fuer das Titelbild, 3:2 fuer alles Weitere im Fliesstext. Hier stand
 * frueher 21:9 fuer jedes Bild - das hat auch Abbildungen mitten im Text
 * breitgezogen.
 */

/* Karten behalten ihr eigenes Verhaeltnis aus shaping.css */
.kk-karte img { aspect-ratio: 4 / 5 !important; }

/* Logos und Siegel bleiben immer ungefiltert - fest, nicht einstellbar */
.kk-siegel__bild,
.custom-logo,
.footer-logo,
.entry-content img[src$=".svg"] { filter: none !important; }

body.kk-kein-bildfilter .entry-content img { filter: none; }

/* -- B1: der rechtliche Hinweis im Inhalt ------------------------------ */

/*
 * Er steht auf manchen Seiten im Inhalt UND im Fussbereich. Beides bleibt
 * stehen (Inhalt ist tabu). Damit die Doppelung nicht wie ein Versehen
 * wirkt, wird die Fassung im Inhalt sichtbar zum Fussnotenapparat.
 */
.kk-rechtlicher-hinweis {
	margin: 64px 0 0;
	padding: 32px;
	max-width: 80ch;
	background: #EFEAE1;
	border-top: 1px solid var(--gold);
	font-size: 14px;
	line-height: 1.65;
	color: var(--text-leise);
}
.kk-rechtlicher-hinweis > :first-child { margin-top: 0; }
.kk-rechtlicher-hinweis > :last-child { margin-bottom: 0; }
.kk-rechtlicher-hinweis h1,
.kk-rechtlicher-hinweis h2,
.kk-rechtlicher-hinweis h3 {
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gold-mittel);
	margin: 0 0 14px;
}

/* -- B2: die beiden Aktionsknoepfe ------------------------------------- */

/*
 * Auf Unterseiten standen sie direkt unter der Ueberschrift - noch bevor
 * jemand den Inhalt gesehen hat. Sie werden visuell ans Ende der Spalte
 * gesetzt. Die Reihenfolge im Dokument bleibt unveraendert, deshalb ist das
 * fuer Suchmaschinen folgenlos. Auf der Startseite bleiben sie oben.
 */
/*
 * Absichtlich nur auf Seiten, die einen solchen Block ueberhaupt haben.
 *
 * »display: flex« hebt das Zusammenfallen benachbarter Aussenabstaende auf.
 * Auf .entry-content allgemein gesetzt, wuerde es den Textrhythmus jeder
 * Unterseite veraendern - fuer eine Umstellung, die nur zwei Seiten brauchen.
 * Deshalb per :has() eingegrenzt und die Abstaende dort ausdruecklich gesetzt.
 */
body:not(.home) .entry-content:has(> .kk-aktionen) {
	display: flex;
	flex-direction: column;
}
body:not(.home) .entry-content:has(> .kk-aktionen) > * { order: 5; margin-top: 0; }
body:not(.home) .entry-content:has(> .kk-aktionen) > h2 { margin-top: 1.8em; }
body:not(.home) .entry-content:has(> .kk-aktionen) > h3 { margin-top: 1.6em; }
body:not(.home) .entry-content:has(> .kk-aktionen) > .kk-aktionen {
	order: 90;
	margin-top: 56px;
}

.entry-content .wp-block-buttons { gap: 14px; }

.entry-content .wp-block-button__link {
	border-radius: var(--radius-pill);
	padding: 19px 40px;
	font-size: 16px;
	font-weight: 500;
	background: var(--gold-dunkel);
	color: #fff;
	text-decoration: none;
	transition: background .25s var(--ease);
}
.entry-content .wp-block-button__link:hover { background: var(--gold-tief); color: #fff; }

/* Wie die zurückhaltende Knopfform des Themes: feine Linie in Gold. */
.entry-content .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--gold-tief);
	border: 1px solid var(--gold);
}
.entry-content .is-style-outline .wp-block-button__link:hover,
.entry-content .is-style-outline .wp-block-button__link:focus-visible {
	background: color-mix(in srgb, var(--gold) 12%, transparent);
	color: var(--gold-tief);
	border-color: var(--gold-dunkel);
}

/* Das Telefon-Emoji bleibt im Text, wird aber gedaempft */
.entry-content .wp-block-button__link { font-variant-emoji: text; }

/* -- B7: leere Links --------------------------------------------------- */

/*
 * Drei Links ohne Ankertext stehen im Inhalt der Startseite. Entfernen
 * waere eine Inhaltsaenderung - sie werden nur unsichtbar. Im DOM und
 * damit fuer Suchmaschinen bleiben sie vorhanden.
 */
.entry-content a:empty { display: none; }

/* ====================================================================== *
 * B4: Die Oeffnungszeiten-Tabelle
 * ====================================================================== */

.entry-content table,
.kk-zeiten {
	border-collapse: collapse;
	width: 100%;
	max-width: 620px;
	margin: 32px 0;
	border: 0;
}

.entry-content table td,
.entry-content table th,
.kk-zeiten td,
.kk-zeiten th {
	border: 0;
	border-bottom: 1px solid var(--sand-linie);
	padding: 14px 12px 14px 0;
	text-align: left;
	vertical-align: baseline;
}

.entry-content table tr:nth-child(even),
.kk-zeiten tr:nth-child(even) { background: #F7F3EC; }

.entry-content table td:first-child,
.entry-content table th:first-child,
.kk-zeiten th[scope="row"] {
	width: 180px;
	font-weight: 500;
	color: var(--tinte);
}

.entry-content table td:last-child,
.kk-zeiten td {
	font-size: 18px;
	font-weight: 300;
	color: var(--text);
	font-variant-numeric: tabular-nums;
}

.kk-zeiten__zweit { display: block; }

/* Die beiden Trennlinien um die Tabelle werden zu Goldlinien */
.entry-content hr {
	width: 50%;
	height: 1px;
	margin: 48px auto;
	border: 0;
	background: var(--gold);
	opacity: .55;
}

@media (max-width: 480px) {
	.entry-content table td,
	.entry-content table th,
	.kk-zeiten td,
	.kk-zeiten th {
		display: block;
		width: auto;
		padding: 0 0 4px;
		border-bottom: 0;
	}
	.entry-content table tr,
	.kk-zeiten tr {
		display: block;
		padding: 12px 0;
		border-bottom: 1px solid var(--sand-linie);
	}
}

/* ====================================================================== *
 * H: Das Kontaktformular
 * ====================================================================== */

.wpcf7 {
	max-width: 720px;
	margin: 0;
	padding: 56px;
	background: #FAF8F5;
	border: 1px solid var(--linie-hell);
}

@media (max-width: 600px) { .wpcf7 { padding: 32px 24px; } }

/*
 * Die Felder ins Raster, ohne ein einziges umzubenennen.
 *
 * Zwei Spalten statt zwoelf: bei 606px Formularbreite verschlingen zwoelf
 * Spalten mit je 32px Abstand elf Zwischenraeume - mehr als die Haelfte der
 * Breite. Gemessen blieben fuer »Name« 238px statt 286px. Das Ergebnis ist
 * dasselbe (Name und Telefon nebeneinander, E-Mail und Nachricht ueber die
 * volle Breite), nur ohne die Rechnerei.
 */
.wpcf7 form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 32px;
	row-gap: 28px;
	/*
	 * Das Formular bringt einen eigenen Innenabstand von 48px mit. Zusammen
	 * mit den 56px der Karte waren das 104px auf jeder Seite - der Grund,
	 * warum die Felder so schmal wirkten. Der Abstand gehoert der Karte.
	 */
	padding: 0;
}
.wpcf7 form > * { grid-column: 1 / -1; }
.wpcf7 form > p:nth-of-type(1) { grid-column: 1; }
.wpcf7 form > p:nth-of-type(2) { grid-column: 2; }

/* Ein technisches Feldbuendel von Contact Form 7 - unsichtbar, aber es
 * belegt sonst eine Rasterzeile und reisst eine Luecke. */
.wpcf7 form > .hidden-fields-container { display: none; }

/*
 * Die Lesebreite von 54 Zeichen gilt dem Fliesstext, nicht Formularfeldern.
 * Jedes Feld steckt bei Contact Form 7 in einem Absatz und wurde dadurch
 * mitgekappt.
 */
.entry-content .wpcf7 p { max-width: none; margin: 0; }

@media (max-width: 768px) {
	.wpcf7 form > p:nth-of-type(1),
	.wpcf7 form > p:nth-of-type(2) { grid-column: 1 / -1; }
}

.wpcf7 label {
	display: block;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 10.5px;
	font-weight: 400;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--text-leise);
}

/* Das Sternchen der Pflichtfelder in Gold - es bleibt im Label stehen */
.wpcf7 label { --stern: var(--gold); }

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 textarea {
	width: 100%;
	box-sizing: border-box;
	height: 40px;
	margin-top: 10px;
	padding: 0 2px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid #D8D2C7;
	border-radius: 0;
	font-family: inherit;
	font-size: 18px;
	font-weight: 300;
	color: var(--text);
	transition: border-color .25s var(--ease);
}

.wpcf7 textarea {
	height: 160px;
	padding-top: 10px;
	resize: vertical;
	line-height: 1.6;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus {
	border-bottom: 2px solid var(--gold);
	outline: 2px solid var(--gold);
	outline-offset: 4px;
}

.wpcf7 input[type="submit"] {
	display: block;
	margin-left: auto;
	padding: 19px 40px;
	background: var(--gold-dunkel);
	border: 0;
	border-radius: var(--radius-pill);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: background .25s var(--ease);
}
.wpcf7 input[type="submit"]:hover { background: var(--gold-dunkel); }

/* Der Absenden-Bereich bekommt eine Abschlusslinie */
.wpcf7 form > p:last-of-type {
	margin-top: 12px;
	padding-top: 40px;
	border-top: 1px solid var(--linie-hell);
}

/* Datenschutz- und Hinweiszeile als leiser Fussbereich der Karte */
.wpcf7 form > p:nth-last-of-type(2),
.wpcf7 form > p:nth-last-of-type(3) {
	font-size: 13px;
	line-height: 1.6;
	color: var(--text-leise);
}
.wpcf7 form > p strong {
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gold-mittel);
}

/* Meldungen des Plugins mitgestalten - sonst wirken sie wie ein Bruch */
.wpcf7 .wpcf7-not-valid { border-bottom: 2px solid #9C0006; }
.wpcf7 .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 14px;
	color: #9C0006;
}
.wpcf7 .wpcf7-response-output {
	grid-column: 1 / -1;
	margin: 24px 0 0;
	padding: 18px 22px;
	background: #EFEAE1;
	border: 0;
	border-left: 3px solid var(--gold);
	font-size: 16px;
	font-weight: 300;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-left-color: #9C0006; color: #9C0006; }

/* Die Ueberschrift ueber dem Formular als Kartenkopf */
.entry-content .kk-formularkopf,
.entry-content h2:has(+ .wpcf7),
.entry-content h2:has(+ p .wpcf7) {
	margin-bottom: 0;
	font-size: 27px;
	font-weight: 300;
}

/* ====================================================================== *
 * Schalter aus dem Customizer (Spec 4, §5)
 * ====================================================================== */

body.kk-keine-bewegung .drift-flaeche,
body.kk-keine-kreise .drift-flaeche { display: none; }

body.kk-keine-bewegung .ticker,
body.kk-kein-ticker .ticker { display: none; }

body.kk-keine-bewegung .js-reveal,
body.kk-kein-reveal .js-reveal {
	opacity: 1 !important;
	transform: none !important;
}

body.kk-keine-bewegung *,
body.kk-keine-bewegung *::before,
body.kk-keine-bewegung *::after {
	animation-duration: .001s !important;
	transition-duration: .001s !important;
}

body.kk-kein-fortschritt .fortschritt { display: none; }

body.kk-header-solide .kopfbalken {
	background: rgba(250, 248, 245, .96);
	border-bottom-color: var(--sand-linie);
}

/* Trennlinie vor dem Hinweisblock: bleibt im Dokument, wird nicht gezeigt */
.entry-content hr.kk-linie-verborgen { display: none; }

/* Tabellen im Block-Editor tragen eine figure-Hülle */
.entry-content .wp-block-table { margin: 32px 0; }
.entry-content .wp-block-table table { margin: 0; }
.entry-content table strong { font-weight: 500; }

/* Der Aktionsblock: die beiden Absätze nebeneinander statt untereinander */
.kk-aktionen { display: flex; flex-wrap: wrap; gap: 14px; }
.kk-aktionen > p { margin: 0; }
/* Gestaltet ueber .kk-knopf - hier nur die Groesse. */
.kk-aktionen > p > a { padding: 19px 40px; font-size: 16px; }

/* Das Praxisvideo */
.kk-video { width: 100%; height: auto; border-radius: 6px; background: #26282C; }

/* ====================================================================== *
 * Spec 5 - Spaltengeometrie, Seitenkopf, Titelbild
 * ====================================================================== */

/*
 * §1 · Die Ueberlappung kam NICHT von der Rubrikliste.
 *
 * Gemessen bei 1440px: die Inhaltsspalte reicht von x112 bis x976, die Liste
 * beginnt bei x1048 - dazwischen liegt der Spaltenabstand, nichts kollidiert.
 * Ueber beide lief das erste Bild: 1100px breit mit -140px Aussenabstand,
 * bis x1072. Diese Regel stammt aus base.css und war fuer die alte,
 * einspaltige Fassung mit 820px Lesebreite gedacht. Im Raster laesst sie das
 * Bild in die Nachbarspalte wandern.
 *
 * Deshalb wird der Ausbruch innerhalb des Rasters zurueckgenommen. Die
 * Regeln in base.css bleiben stehen - sie gelten weiter fuer Vorlagen ohne
 * Rubrikspalte.
 */
.seite--lesen {
	max-width: var(--inhalt);
	margin-inline: auto;
}

.seite--lesen .entry-content > .wp-block-image.ist-gross,
.seite--lesen .seitenbild.ist-gross {
	width: 100%;
	margin-inline: 0;
}

/*
 * §2 · Der Seitenkopf war zentriert - und zwar durch »margin: 0 auto« aus
 * dieser Datei. Auf einem Rasterelement bedeutet das nicht »zentrieren«,
 * sondern »auf Inhaltsbreite schrumpfen und dann zentrieren«: der Kopf war
 * 396px breit in einer 1328px-Spalte. Linksbuendig, ohne Ausnahme.
 */
.seite--lesen > .seitenkopf {
	margin-inline: 0;
	text-align: left;
}
.seite--lesen > .seitenkopf > * { margin-inline: 0; }

/*
 * Auch wenn im Editor eine Ausrichtung gesetzt wurde: im Seitenkopf gilt
 * linksbuendig. Die Klasse bleibt im Markup stehen - entfernt wird nichts.
 */
.seite--lesen > .seitenkopf .has-text-align-center,
.seite--lesen > .seitenkopf .aligncenter { text-align: left; margin-inline: 0; }

/*
 * Die H1 der Unterseiten ist kleiner als die der Startseite. Sonst
 * konkurriert sie mit dem Titelbild direkt darunter.
 */
.seite--lesen .seitentitel {
	font-size: clamp(34px, 4.2vw, 58px);
	font-weight: 300;
	letter-spacing: -.028em;
	line-height: 1.06;
	max-width: 24ch;
	text-wrap: balance;
}

/* ---------------------------------------------------------------------- *
 * §3 · Das Titelbild
 * ---------------------------------------------------------------------- */

.entry-content > .kk-seitenbild,
.entry-content > .kk-einleitung > .kk-seitenbild {
	margin: 40px 0 72px;
	border-radius: 12px;
	overflow: hidden;
	max-width: none;
	width: 100%;
}

/*
 * Auch in der Einleitungshülle: Die Shaping-Schicht fasst alles vor der
 * ersten Überschrift in ».kk-einleitung«. Mit »>« allein griff die Regel
 * dort nicht - die Titelbilder der Infusionen standen in ihrer eigenen
 * Höhe, zwischen 344 und 1050 Pixeln.
 */
.entry-content > .kk-seitenbild img,
.entry-content > .kk-einleitung > .kk-seitenbild img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	object-position: 50% 42%;
	border-radius: 0;
	filter: var(--bildfilter);
}

/* Alle weiteren Bilder bleiben in der Textspalte und nicht breiter als er */
.entry-content > figure:not(.kk-seitenbild),
.entry-content > .wp-block-image:not(.kk-seitenbild) {
	max-width: var(--lesebreite);
	margin: 48px 0;
}
.entry-content > figure:not(.kk-seitenbild) img,
.entry-content > .wp-block-image:not(.kk-seitenbild) img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 12px;
}

@media (max-width: 768px) {
	.entry-content > .kk-seitenbild,
	.entry-content > .kk-einleitung > .kk-seitenbild { margin: 28px 0 48px; }
	.entry-content > .kk-seitenbild img,
	.entry-content > .kk-einleitung > .kk-seitenbild img { aspect-ratio: 4 / 3; }
}

/* Ausgenommen bleiben Logos, Siegel und SVG - ohne Filter, ohne Zuschnitt */
.entry-content img.kk-siegel__bild,
.entry-content img[src$=".svg"] {
	aspect-ratio: auto !important;
	object-fit: contain;
	filter: none !important;
}

/* ---------------------------------------------------------------------- *
 * §4a · Listen, die nur aus Links bestehen (die elf Labore)
 * ---------------------------------------------------------------------- */

.entry-content .kk-linkliste {
	list-style: none;
	margin: 32px 0;
	padding: 0;
	max-width: none;
}

@media (min-width: 900px) {
	.entry-content .kk-linkliste { columns: 2; column-gap: 48px; }
}

.entry-content .kk-linkliste li {
	break-inside: avoid;
	margin: 0;
	border-bottom: 1px solid var(--sand-linie);
}

.entry-content .kk-linkliste a {
	display: block;
	padding: 13px 0;
	font-size: 16px;
	font-weight: 400;
	color: var(--gold);
	text-decoration: none;
	transition: padding-left .25s var(--ease), color .25s var(--ease);
}
.entry-content .kk-linkliste a:hover {
	padding-left: 8px;
	color: var(--gold-tief);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/*
 * Der Pfeil kennzeichnet ein Ziel ausserhalb der Website. Er steht im CSS
 * und nicht im Linktext - der bleibt unveraendert, so wie er indexiert ist.
 */
.entry-content .kk-linkliste a[href^="http"]:not([href*="s851004541.online.de"]):not([href*="heilpraktikerin-kissel.de"])::after {
	content: " \2197";
	color: #CFC5B2;
}


/* ====================================================================== *
 * Nachtrag: zwei gemessene Fehler
 * ====================================================================== */

/*
 * 1 · Die Rubrikliste stand zweispaltig in einer 280px-Spalte.
 *
 * base.css setzt »display: grid« mit zwei Spalten auf die Liste - richtig
 * fuer die alte, breite Fassung unter dem Text, falsch in der schmalen
 * Seitenspalte: gemessen zwei Spalten zu je 120px, in die sich Titel wie
 * »Chelattherapie (Schwermetallausleitung)« quetschen mussten. Genau das
 * sah nach Ueberlappung aus.
 *
 * Untereinander, ueber die volle Spaltenbreite. Zwei Spalten erst wieder,
 * wenn die Liste unter den Text rutscht.
 */
.seite--lesen .geschwister ul {
	display: block;
	columns: auto;
}
.seite--lesen .geschwister li { border-bottom: 0; }

@media (max-width: 1180px) {
	.seite--lesen .geschwister ul { columns: 2; column-gap: 40px; }
	.seite--lesen .geschwister li { border-bottom: 0; }
}
@media (max-width: 600px) {
	.seite--lesen .geschwister ul { columns: 1; }
}

/*
 * 2 · Das Kontaktformular stand in einer halben Spalte.
 *
 * Die Ueberschrift »Ihre Nachricht an mich:« bildet einen Abschnitt, und der
 * erste Abschnitt einer Seite wird zweispaltig gesetzt: Ueberschrift links
 * stehenbleibend, Inhalt rechts. Fuer Fliesstext ist das richtig, fuer ein
 * Formular nicht - es blieb 390px breit.
 *
 * Ein Abschnitt mit einem Formular bekommt deshalb nie die zweispaltige
 * Behandlung.
 */
/*
 * »:has(form)« allein reicht nicht: die Gewichtung von :has() richtet sich
 * nach ihrem Inhalt, und »form« ist ein Typ (0,0,1). Die Rasterregel nutzt
 * :nth-of-type(), das wie eine Klasse zaehlt - zusammen (0,2,0) und damit
 * staerker. Der zusaetzliche Vorfahr hebt diese Regel auf (0,2,1).
 */
.entry-content .kk-abschnitt:has(form) { display: block; }
.entry-content .kk-abschnitt:has(form) .kk-abschnitt__kopf { position: static; top: auto; }
.entry-content .kk-abschnitt:has(form) .kk-abschnitt__text { max-width: none; }


/*
 * Die Rubrikliste ist laenger als der Bildschirm.
 *
 * Sie blieb zwar oben kleben, war aber 863px hoch bei 900px Fensterhoehe -
 * die untersten Eintraege wurden erst sichtbar, wenn die ganze Seite unten
 * angekommen war. Jetzt bekommt sie eine eigene Hoehe und rollt in sich
 * selbst: alle Eintraege sind ab dem ersten Bildschirm erreichbar.
 */
@media (min-width: 1181px) {
	.seite--lesen > .geschwister {
		max-height: calc(100vh - 180px);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: var(--sand-linie) transparent;
		padding-right: 10px;
	}

	.seite--lesen > .geschwister::-webkit-scrollbar { width: 6px; }
	.seite--lesen > .geschwister::-webkit-scrollbar-thumb {
		background: var(--sand-linie);
		border-radius: 3px;
	}
	.seite--lesen > .geschwister::-webkit-scrollbar-track { background: transparent; }
}

/* ====================================================================== *
 * Übersichtsseiten - drei austauschbare Darstellungen
 *
 * Gemeinsam ist allen dreien das Markup aus template-parts/uebersicht.php.
 * Was sie unterscheidet, steht ausschliesslich hier. Eine vierte Form
 * braucht einen Eintrag in kissel_uebersicht_arten(), eine Vorlagendatei
 * und einen Block an dieser Stelle - sonst nichts.
 * ====================================================================== */

.kk-uebersicht {
	grid-column: 1;
	margin: 0 0 var(--sektionsabstand);
	padding-top: 56px;
	border-top: 1px solid var(--sand-linie);
}

@media (max-width: 1180px) {
	.kk-uebersicht { grid-column: 1 / -1; }
}

/* -- 1 · Kacheln, zwei Spalten (Spec 4 §1) ----------------------------- */

.kk-uebersicht--kacheln {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--kk-kachel-min, 240px), 1fr));
	gap: 56px 32px;
	counter-reset: karte;
}

/* -- 2 · Raster, drei Spalten ------------------------------------------ */

.kk-uebersicht--raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 40px 24px;
	counter-reset: karte;
}

.kk-uebersicht--raster .kk-karte { padding: 12px 12px 24px; }
.kk-uebersicht--raster .kk-karte > p:first-of-type { font-size: 20px; }



/* -- 3 · Liste mit kleinem Bild ---------------------------------------- */

/*
 * Fuer Rubriken mit vielen Eintraegen: eine Zeile je Thema, das Bild klein
 * daneben. Achtzehn Kacheln sind eine Bilderwand, achtzehn Zeilen liest
 * man in Sekunden.
 */
.kk-uebersicht--liste {
	display: block;
	counter-reset: karte;
}

.kk-uebersicht--liste .kk-karte {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	align-items: center;
	gap: 24px;
	padding: 18px 12px;
	border: 0;
	border-bottom: 1px solid var(--sand-linie);
	border-radius: 0;
}
.kk-uebersicht--liste .kk-karte:first-child { border-top: 1px solid var(--sand-linie); }
.kk-uebersicht--liste .kk-karte:hover { background: #F4F0E8; border-color: #C9BB9C; }

.kk-uebersicht--liste .kk-karte figure { border-radius: 6px; }
.kk-uebersicht--liste .kk-karte img { aspect-ratio: 1 / 1 !important; }
.kk-uebersicht--liste .kk-karte__ohne-bild { aspect-ratio: 1 / 1; }

.kk-uebersicht--liste .kk-karte > p:first-of-type {
	margin: 0;
	padding: 0;
	font-size: 21px;
}
.kk-uebersicht--liste .kk-karte > p:first-of-type::before {
	display: inline-block;
	margin: 0 0 6px;
}

@media (max-width: 600px) {
	.kk-uebersicht--liste .kk-karte { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; }
	.kk-uebersicht--liste .kk-karte > p:first-of-type { font-size: 18px; }
}

/* -- Gemeinsam: eine Kachel ohne Bild ---------------------------------- */

/*
 * Kein graues Rechteck und kein Platzhalterbild - beides sieht nach Fehler
 * aus. Die Flaeche behaelt das Seitenverhaeltnis, damit die Reihe nicht
 * verspringt, und traegt nur einen Goldstrich.
 */
.kk-karte__ohne-bild {
	aspect-ratio: 4 / 5;
	border-radius: 10px;
	background:
		linear-gradient(var(--gold), var(--gold)) 24px calc(100% - 26px) / 32px 2px no-repeat,
		var(--sand);
}

/*
 * Bausteine, die aus der Vorlage kommen statt aus dem Seiteninhalt.
 * Gleiche Gestaltung wie die Fassungen im Inhalt - der Unterschied soll
 * niemandem auffallen.
 */
.kk-aktionen--vorlage { margin: 56px 0 0; }
/* Die sekundaere Fassung regelt .kk-knopf--sekundaer am Link selbst. */

/* Preis und Fakten einer Angebotsseite */
.kk-fakten {
	margin: 56px 0 0;
	max-width: 620px;
	border-top: 1px solid var(--gold);
}
.kk-fakten dl { margin: 0; }
.kk-fakten__zeile {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: 24px;
	padding: 14px 0;
	border-bottom: 1px solid var(--sand-linie);
}
.kk-fakten dt {
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gold-mittel);
}
.kk-fakten dd {
	margin: 0;
	font-size: 18px;
	font-weight: 300;
	color: var(--text);
	font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
	.kk-fakten__zeile { grid-template-columns: 1fr; gap: 4px; }
}

/* -- Infusionskarte -----------------------------------------------------
 *
 * Inhaltsstoffe, Preis und »Jetzt buchen« einer Infusion in einer Karte.
 * Gebaut in shaping.php aus dem Kasten unter »Inhaltsstoffe«. Die Stoffe
 * stehen als Liste mit der Menge rechtsbündig - wie auf einer Rezeptur,
 * nicht wie Fließtext mit Strichen davor.
 *
 * Die Selektoren tragen ».entry-content«: ».entry-content p/li« (0,1,1)
 * schlüge jede einfache Klasse.
 */
.entry-content .kk-infusionskarte.kk-infusionskarte {
	max-width: 680px;
	padding: clamp(24px, 3.4vw, 44px) clamp(22px, 3.4vw, 48px) 0;
	overflow: hidden;
}
/* Nie über zwei Textspalten verteilen - die Karte ist eine Einheit. */
.kk-abschnitt__text:has(> .kk-infusionskarte) { column-count: 1 !important; }
.kk-infusionskarte { break-inside: avoid; }
/* Die Karte steht immer mittig - in jedem Abschnittsdesign. */
.entry-content .kk-infusionskarte.kk-infusionskarte { margin-inline: auto; }

.entry-content .kk-stoffliste {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
}
.entry-content .kk-stoffliste > li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 28px;
	margin: 0;
	padding: 13px 0;
	border-bottom: 1px solid var(--linie-hell);
	font-size: 17px;
	line-height: 1.5;
	max-width: none;
}
.entry-content .kk-stoffliste > li:first-child { padding-top: 0; }
.entry-content .kk-stoffliste > li:last-child { border-bottom: 0; }
.kk-stoffliste .kk-stoff { min-width: 0; hyphens: auto; }
.kk-stoffliste .kk-menge {
	flex: none;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--gold-tief);
	font-weight: 500;
}

/* Ein Hinweis in der Karte - leiser, ohne eigenen Kasten im Kasten. */
.entry-content .kk-infusionskarte .is-style-hinweis.is-style-hinweis {
	background: none;
	padding: 14px 0 0;
	margin: 6px 0 0;
	border-top: 1px solid var(--linie-hell);
	border-radius: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--text-leise);
	max-width: none;
}

/* Der Fuß: Satz, Preis, Knopf - auf Sand, randlos bis an die Kante. */
.kk-infusionskarte__fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	margin: clamp(22px, 3vw, 32px) calc(clamp(22px, 3.4vw, 48px) * -1) 0;
	padding: clamp(20px, 2.6vw, 28px) clamp(22px, 3.4vw, 48px);
	background: var(--sand);
	border-top: 1px solid var(--linie-hell);
}
.entry-content .kk-infusionskarte__fuss > p { margin: 0; max-width: none; }
.entry-content .kk-infusionskarte__satz.kk-infusionskarte__satz {
	flex: 1 1 100%;
	font-size: 15px;
	line-height: 1.6;
	color: var(--text-leise);
}
.entry-content .kk-infusionskarte__preis.kk-infusionskarte__preis {
	display: flex;
	align-items: baseline;
	gap: 14px;
	font-size: 16px;
}
.kk-infusionskarte__marke {
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gold-mittel);
}
.kk-infusionskarte__preis strong {
	font-size: clamp(26px, 2.4vw, 32px);
	font-weight: 300;
	letter-spacing: -.01em;
	color: var(--tinte);
	font-variant-numeric: tabular-nums;
}
.kk-infusionskarte__knopf { margin-left: auto; }

/* Leere Absätze aus Jimdo: nur Abstand, und den gibt das CSS. */
.entry-content .kk-leerabsatz { display: none; }

/*
 * Der oberste »Jetzt buchen«: nur solange keine rechte Spalte daneben
 * steht. Mit Spalte übernimmt der Knopf dort, auf Höhe des Titels.
 */
.entry-content .kk-buchen--oben { margin: 0 0 28px; }
@media (min-width: 1181px) {
	.seite--lesen:has(.seitenspalte .kk-aktionen--vorlage) .kk-buchen--oben { display: none; }
}
.entry-content .kk-buchen:not(.kk-buchen--oben):not(.kk-infusionskarte__knopf) { margin-top: 1.2em; }

@media (max-width: 520px) {
	.entry-content .kk-stoffliste > li { font-size: 16px; gap: 16px; }
	.kk-infusionskarte__knopf { margin-left: 0; width: 100%; }
	.kk-infusionskarte__knopf .kk-knopf { display: block; text-align: center; }
}

/* Vorlage 4: breitere Inhaltsspalte für Karte, Formular und Zeiten */
.entry-content--breit > * { max-width: none; }
.entry-content--breit p { max-width: var(--lesebreite); }

/* ======================================================================= *
 * Titelbild (4.12) — ein Format für alle Seiten
 * ======================================================================= *
 *
 * Vorher war das »Titelbild« das erste Bild im Fließtext. Es hatte auf
 * jeder Seite ein anderes Seitenverhältnis, eine andere Größe, und auf 56
 * von 92 Seiten fehlte es ganz. Jetzt ist es das Beitragsbild von
 * WordPress: ein Feld je Seite, ein Erscheinungsbild für alle.
 *
 * 3:2 ist das klassische Fotoformat — das Verhältnis, in dem die meisten
 * Kameras aufnehmen. Bilder anderer Formate werden darauf beschnitten,
 * nicht verzerrt: »cover« füllt die Fläche und schneidet den Überschuss
 * an den Rändern ab.
 *
 * Der Zuschnitt geht von der Mitte aus. Bei einem Porträt, dessen Kopf
 * oben sitzt, kann das ungünstig sein — dafür gibt es die Klasse
 * »ist-oben« weiter unten.
 */

.seite--lesen > .seitenbild,
.seite > .seitenbild {
	/*
	 * Der Abstand nach unten war der Sektionsabstand - 120 Pixel. Das ist
	 * das Mass zwischen zwei Abschnitten und hier zu viel: Titelbild und
	 * der Text darunter gehoeren zusammen, sie sind kein neues Kapitel.
	 * 56 Pixel setzen es ab, ohne es abzuschneiden.
	 */
	margin: 0 0 56px;
	border-radius: var(--radius-block);
	overflow: hidden;
	background: var(--sand);
}

.seite > .seitenbild img,
.seite--lesen > .seitenbild img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--kk-titelbild, 4 / 1);
	object-fit: cover;

	/*
	 * Fokuspunkt und Zoom kommen aus den Einstellungen der Seite. Sie
	 * stehen hier und nicht in einer eigenen Regel weiter unten: Diese hier
	 * wiegt 0,2,1 und haette jede leichtere ueberstimmt - genau das ist
	 * einmal passiert, der Regler blieb wirkungslos.
	 *
	 * »object-position« bestimmt, welcher Teil des Bildes im Rahmen landet,
	 * wenn beschnitten wird. »scale« zoomt darueber hinaus hinein, und der
	 * Ursprung der Vergroesserung ist derselbe Punkt - sonst wanderte das
	 * Motiv beim Zoomen aus dem Bild.
	 *
	 * Unter 100 Prozent gibt es nichts: Bei »object-fit: cover« ist 100
	 * bereits die weiteste Einstellung, in der der Rahmen noch gefuellt
	 * ist. Wer weiter herauszoomte, bekaeme Raender.
	 */
	object-position: var(--kk-fokus-x, 50%) var(--kk-ausschnitt, 50%);
	transform: scale(var(--kk-zoom, 1));
	transform-origin: var(--kk-fokus-x, 50%) var(--kk-ausschnitt, 50%);
	border-radius: 0;
}

/*
 * Verkleinert: das ganze Bild im Rahmen - Größe UND Lage gerechnet.
 *
 * Unter 100 Prozent wird nichts mehr weggeschnitten. Das Bild steht
 * vollständig im Rahmen, lässt dort Platz, und der Fokuspunkt verteilt
 * diesen Platz: Er verschiebt jetzt das Bild, statt einen Ausschnitt zu
 * wählen - beschnitten wird ja nichts mehr.
 *
 * Alle vier Werte kommen als Prozentzahlen aus PHP (kissel_bildlage).
 * Warum dort und nicht hier: Die Rechnung braucht das Verhältnis des
 * Bildes, und das kennt CSS nicht.
 *
 * Und warum überhaupt gerechnet, statt »object-fit: contain« mit
 * »object-position« zu nehmen - das könnte beides auch: Dann bliebe das
 * ELEMENT so groß wie der Rahmen und nur das Bild darin kleiner. Der
 * weiche Saum sitzt am Element und läge damit im leeren Raum statt an der
 * Bildkante. So ist das Element genau das Bild.
 */
.seite > .seitenbild.ist-verkleinert,
.seite--lesen > .seitenbild.ist-verkleinert {
	position: relative;
	aspect-ratio: var(--kk-titelbild, 4 / 1);
}

.seite > .seitenbild.ist-verkleinert img,
.seite--lesen > .seitenbild.ist-verkleinert img {
	position: absolute;
	left: var(--kk-bild-links, 0%);
	top: var(--kk-bild-oben, 0%);
	width: var(--kk-bildbreite, 100%);
	height: var(--kk-bildhoehe, 100%);
	max-width: none;
	max-height: none;
	aspect-ratio: auto;

	/*
	 * »contain« und nicht »fill«: Der Kasten hat zwar genau das Verhältnis
	 * des Bildes, aber die Prozentzahlen sind gerundet. Bei »fill« würden
	 * die letzten Tausendstel als Verzerrung sichtbar, bei »contain«
	 * bleiben sie ein unsichtbarer Bruchteil eines Pixels.
	 */
	object-fit: contain;
	object-position: center;
	transform: none;
}

/*
 * Der weiche Auslauf - nur dort, wo wirklich Platz bleibt.
 *
 * Welche Achse das ist, entscheidet PHP anhand des freien Platzes. Bleibt
 * auf beiden etwas übrig, laufen beide aus; dann müssen die zwei Verläufe
 * mit »intersect« verrechnet werden, sonst ergänzen sie sich zu einer
 * Maske, die nichts mehr wegnimmt.
 */
.seite > .seitenbild.saum-quer img,
.seite--lesen > .seitenbild.saum-quer img {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
}

.seite > .seitenbild.saum-hoch img,
.seite--lesen > .seitenbild.saum-hoch img {
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
}

.seite > .seitenbild.saum-quer.saum-hoch img,
.seite--lesen > .seitenbild.saum-quer.saum-hoch img {
	-webkit-mask-image:
		linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
		linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
	mask-image:
		linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
		linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

/*
 * Die Ausbruchregel gilt dem Fließtext, nicht dem Titelbild.
 *
 * Auch ein kleines oder quadratisches Bild füllt den Rahmen und wird
 * beschnitten. Der frühere Weg - kleine Bilder vollständig hineinstellen -
 * hielt sie zwar scharf, gab dem Titelbild aber je nach Vorlage ein
 * anderes Erscheinungsbild. Eine gleiche Höhe auf allen Seiten wiegt
 * schwerer; was fehlt, ist ein besseres Bild, nicht eine andere Regel.
 */
.seite > .seitenbild.ist-klein img,
.seite--lesen > .seitenbild.ist-klein img {
	width: 100%;
	object-fit: cover;
}
.seite--lesen > .seitenbild.ist-gross {
	width: auto;
	margin-inline: 0;
}

/*
 * Der Ausschnitt.
 *
 * »--kk-ausschnitt« steht als Zahl am Rahmen und kommt aus der Einstellung
 * »Bildausschnitt« der jeweiligen Seite: 0 zeigt den oberen Rand, 100 den
 * unteren, 50 die Mitte. Als Variable und nicht als Klassenpaar
 * »oben/unten«, weil der richtige Ausschnitt selten genau oben oder genau
 * unten liegt - bei einem Porträt sind es meist 25 bis 35 Prozent.
 */
/* Steht das Bild einmal ausserhalb von .seite, gilt dasselbe. */
.seitenbild img { object-position: center var(--kk-ausschnitt, 50%); }

/*
 * Auf schmalen Geräten wird ein flaches Band zum Strich: Bei 375 Pixeln
 * Breite blieben von 5:2 noch 150 Pixel Höhe. Dort gilt deshalb ein
 * eigenes, höheres Verhältnis - unabhängig von der Einstellung.
 */
@media (max-width: 900px) {
	.seite > .seitenbild img,
	.seite--lesen > .seitenbild img { aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
	.seite > .seitenbild img,
	.seite--lesen > .seitenbild img { aspect-ratio: 4 / 3; }
}

/* Ohne Beitragsbild gibt der Block nichts aus - kein leerer Kasten. */
.seitenbild:empty { display: none; }


/* ----------------------------------------------------------------------
 * Portraitbild im Fließtext (».kk-portraet«)
 *
 * Für Seiten wie »Über mich«, wo ein Foto der Person gehört und nicht
 * ein Band über die ganze Breite. Das Bild steht rechts, der Text läuft
 * daneben weiter - so liest sich die Seite wie ein Vorstellungstext und
 * nicht wie ein Prospekt.
 *
 * Der Ausschnitt entsteht hier und nicht in der Mediathek: Die Vorlage
 * ist querformatig (1024 zu 769), ein echtes Hochformat gäbe es nur mit
 * einer zweiten Datei. »object-fit: cover« in einem 4:5-Rahmen schneidet
 * die Seiten weg; »object-position« hält dabei das Gesicht in der Mitte,
 * das im Original links der Bildmitte sitzt.
 * ------------------------------------------------------------------- */

/*
 * Die Auswahl trägt »> figure«, nicht nur die Klasse: Direkt darüber
 * steht ».entry-content > figure:not(.kk-seitenbild)« mit Rändern und
 * einem 3:2-Ausschnitt für alle übrigen Bilder. Bei gleichem Gewicht
 * gewinnt die spätere Regel - mit bloßem ».kk-portraet« verlöre sie.
 * Und ».seite--lesen« davor, weil ».seite--lesen .entry-content >
 * .wp-block-image« die seitlichen Ränder auf Null setzt: drei Klassen
 * schlagen zwei, und damit wäre »margin: 0 auto« wirkungslos geblieben -
 * auf dem Telefon stand das Bild deshalb links statt mittig.
 */
.seite--lesen .entry-content > figure.kk-portraet {
	float: right;
	width: min(300px, 42%);
	margin: 6px 0 1.4rem 2rem;
	max-width: none;
}

.seite--lesen .entry-content > figure.kk-portraet img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 38% 20%;
	border-radius: 14px;
	box-shadow: 0 14px 34px -18px rgba(58, 61, 66, .5);
}

/*
 * Auf dem Telefon gibt es kein Nebeneinander: Bei 375 Pixeln blieben dem
 * Text neben dem Bild keine 200 Pixel, das ergäbe zerrissene Zeilen. Das
 * Bild steht dann über dem Text, mittig und kleiner.
 */
@media (max-width: 700px) {
	.seite--lesen .entry-content > figure.kk-portraet {
		float: none;
		width: min(260px, 70%);
		margin: 0 auto 1.6rem;
	}
}