/*
 * content.css - der Layer über bestehendem Inhalt (Spec 7).
 *
 * Alles hier ist auf .entry-content gescopet. Bestehende Seiten sollen ohne
 * eine einzige Änderung am Markup richtig aussehen: die 89 importierten
 * Jimdo-Seiten bringen gewöhnliche Absätze, Überschriften, Listen und Bilder
 * mit, mehr braucht es nicht.
 */

.entry-content {
	max-width: var(--inhalt);
}

/* -- Text ---------------------------------------------------------------- */

.entry-content > * { max-width: var(--lesebreite); }

/* Breite Elemente dürfen ausbrechen */
.entry-content > .alignwide,
.entry-content > .alignfull,
.entry-content > .wp-block-image,
.entry-content > .wp-block-gallery,
.entry-content > .wp-block-cover,
.entry-content > .wp-block-table,
.entry-content > .wp-block-columns,
.entry-content > .wp-block-embed,
.entry-content > .wp-block-group { max-width: none; }

.entry-content > *:first-child { margin-top: 0; }

.entry-content h2 { margin-top: 1.8em; }
.entry-content h3 { margin-top: 1.6em; }

.entry-content p,
.entry-content li {
	font-size: 18px;
	line-height: 1.75;
	color: var(--text);
}

@media (max-width: 480px) {
	.entry-content p,
	.entry-content li { font-size: 17px; }
}

.entry-content .is-style-lead,
.entry-content .lead {
	font-size: 19px;
	line-height: 1.7;
	color: var(--text);
}

/* -- Über die volle Breite ------------------------------------------------
 *
 * Kein »>« im Selektor: Die Shaping-Schicht legt Hüllen um die vorhandenen
 * Knoten (.kk-einleitung, .kk-abschnitt), der Absatz ist deshalb kein
 * direktes Kind von .entry-content. Ein Kindselektor griffe genau dort
 * nicht, wo der Stil am ehesten gebraucht wird.
 *
 * Die Klasse steht zweimal im Selektor. Das ist kein Versehen: Die Breite
 * wird an drei Stellen begrenzt, die stärkste davon ist
 * ».kk-einleitung > p:first-of-type« mit dem Gewicht 0,2,1 - ein
 * Pseudo-Klassen-Selektor zählt wie eine Klasse. Einmal .is-style-… ergäbe
 * 0,2,0 und verlöre. Zweimal ergibt 0,3,0 und gewinnt.
 *
 * Der Stil ist eine ausdrückliche Entscheidung im Editor. Er soll die
 * Vorgaben des Themes überstimmen - dafür ist er da.
 */
.entry-content .is-style-volle-breite.is-style-volle-breite,
.entry-content .is-style-volle-breite-zwei.is-style-volle-breite-zwei {
	max-width: none;
}

/* Die zweispaltige Fassung braucht orphans/widows: sonst reisst die
   Spaltenkante einzelne Zeilen ab und der Absatz sieht zerbrochen aus. */
.entry-content .is-style-volle-breite-zwei.is-style-volle-breite-zwei {
	columns: 2;
	column-gap: clamp(32px, 4vw, 64px);
	orphans: 2;
	widows: 2;
}

/* Unter der Umbruchbreite bleibt nur eine Spalte übrig - zwei Spalten auf
   einem Telefon wären je 150 Pixel breit. */
@media (max-width: 900px) {
	.entry-content .is-style-volle-breite-zwei.is-style-volle-breite-zwei {
		columns: 1;
	}
}

/* -- Weitere Formen über die volle Breite ---------------------------------
 *
 * Die beiden oben - schlicht breit und zweispaltig - sind unverändert
 * geblieben. Hier stehen die Fälle, für die es bisher keine Wahl gab.
 */

/*
 * Dreispaltig. Über die ganze Spalte gerechnet sind das je rund 48
 * Zeichen - kürzer als die gewöhnliche Zeile und für Aufzählendes gut.
 * Für Fließtext ist zweispaltig die bessere Wahl.
 */
.entry-content .is-style-volle-breite-drei.is-style-volle-breite-drei {
	max-width: none;
	columns: 3;
	column-gap: clamp(28px, 3.4vw, 56px);
	orphans: 2;
	widows: 2;
}
@media (max-width: 1180px) {
	.entry-content .is-style-volle-breite-drei.is-style-volle-breite-drei { columns: 2; }
}
@media (max-width: 900px) {
	.entry-content .is-style-volle-breite-drei.is-style-volle-breite-drei { columns: 1; }
}

/* Hinweiskasten über die ganze Breite - für den Kasten, der eine Seite
   eröffnet oder beschließt, statt neben dem Text zu stehen. */
.entry-content .is-style-hinweis-breit.is-style-hinweis-breit {
	max-width: none;
	background: var(--sand);
	border-radius: var(--radius-block);
	padding: clamp(20px, 2.4vw, 30px) clamp(22px, 3vw, 40px);
	margin-block: 1.9em;
}

/* Merksatz über die ganze Breite. */
.entry-content .is-style-merksatz-breit.is-style-merksatz-breit {
	max-width: none;
	border-left: 3px solid var(--gold);
	padding-left: clamp(18px, 1.8vw, 26px);
	font-size: 20px;
	line-height: 1.6;
	margin-block: 1.9em;
}

/*
 * Aussage - ein Satz, mittig über die ganze Breite, größer gesetzt.
 *
 * Bewusst ohne Zeilenlängenbegrenzung, aber mit »text-wrap: balance«: Ein
 * einzelner Satz soll auf zwei ähnlich lange Zeilen fallen und nicht auf
 * eine volle und ein angehängtes Wort. Für mehr als zwei, drei Zeilen ist
 * diese Form nicht gedacht - mittiger Fließtext lässt das Auge den
 * Zeilenanfang jedes Mal neu suchen.
 */
.entry-content .is-style-aussage.is-style-aussage {
	max-width: none;
	text-align: center;
	font-size: clamp(21px, 2vw, 27px);
	font-weight: 300;
	line-height: 1.4;
	text-wrap: balance;
	margin-block: 1.9em;
}

@media (max-width: 480px) {
	.entry-content .is-style-merksatz-breit.is-style-merksatz-breit { font-size: 18px; }
}

/* -- Weitere Stile für gewöhnliche Absätze --------------------------------
 *
 * Angemeldet an core/paragraph, im Editor rechts unter »Stile« wählbar.
 * Die vier vorhandenen - Eyebrow, Lead, volle Breite, volle Breite
 * zweispaltig - sind unverändert geblieben.
 *
 * Die Klasse steht überall doppelt im Selektor, aus demselben Grund wie
 * einen Abschnitt weiter oben: In einem mittigen Abschnitt wiegt
 * ».kk-abschnitt[data-takt="2"] p« 0,2,1 und überstimmte ein einfaches
 * .is-style-… mit 0,2,0. Doppelt ergibt 0,3,0 und gewinnt. Ein im Editor
 * ausdrücklich gewählter Stil soll die Vorgaben schlagen - dafür ist er da.
 */

/*
 * Hinweiskasten - für das, was neben dem Text steht statt in ihm:
 * eine Vorbereitung auf den Termin, ein Hinweis zur Kostenerstattung.
 *
 * Etwas breiter als die Lesebreite, damit der Text INNERHALB des Kastens
 * wieder auf sein Maß kommt. Ohne den Zuschlag zieht der Innenabstand die
 * Zeile auf 46 Zeichen zusammen.
 */
.entry-content .is-style-hinweis.is-style-hinweis {
	background: var(--sand);
	border-radius: var(--radius-block);
	padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.6vw, 32px);
	margin-block: 1.9em;
	max-width: calc(var(--mass-lesebreite) + 4em);
}

/* Merksatz - ein Satz, der herausgehoben gehört, ohne einen Kasten zu
   brauchen. Die Goldlinie links ist dieselbe wie beim Abschnittsdesign
   »mit Goldlinie«, damit beides zusammengehört. */
.entry-content .is-style-merksatz.is-style-merksatz {
	border-left: 3px solid var(--gold);
	padding-left: clamp(18px, 1.8vw, 26px);
	font-size: 20px;
	line-height: 1.6;
	margin-block: 1.9em;
	max-width: calc(var(--mass-lesebreite) + 2em);
}

/* Kleingedruckt - Quellenangabe, Fußnote, Nachsatz. Gedämpft, aber nicht
   grau: #5F5C57 auf Creme kommt auf 6,3 und bleibt damit auch in dieser
   Größe lesbar. Unter 16px geht es nicht, das ist die Untergrenze. */
.entry-content .is-style-klein.is-style-klein {
	font-size: 16px;
	line-height: 1.65;
	color: var(--text-leise);
}

/* Mittig - für den einen Satz, der allein stehen soll. Schmaler als die
   Lesebreite: Mittig gesetzter Text ist nur kurz gut zu lesen, weil das
   Auge den Zeilenanfang jedes Mal neu suchen muss. */
.entry-content .is-style-mittig.is-style-mittig {
	text-align: center;
	max-width: 46ch;
	margin-inline: auto;
}

/*
 * Pille - der Absatz, der über dem Text steht und ihn benennt.
 *
 * Gemeint ist der kurze Absatz, der wie eine kleine Überschrift wirkt:
 * ein Wort, ein Begriff, eine Kennzeichnung. Er bekommt eine goldene
 * Fläche in Pillenform und sitzt eng über dem Absatz, zu dem er gehört.
 *
 * »inline-block«, damit die Pille nur so breit wird wie ihr Text. Als
 * Blockelement liefe die Fläche über die ganze Zeile, und aus der Pille
 * würde ein Balken.
 *
 * Der Grundton ist mit --creme gemischt, nicht mit »transparent«: Eine
 * durchscheinende Fläche nimmt die Farbe dessen an, was darunter liegt -
 * auf der Sandfläche eines Abschnitts käme der Kontrast auf 4,3 und läge
 * damit unter den geforderten 4,5. Mit festem Grund sind es überall 4,8.
 */
.entry-content .is-style-pille.is-style-pille {
	display: inline-block;
	margin: 0 0 .5em;
	padding: 9px 22px;
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--gold) 15%, var(--creme));
	color: var(--gold-tief);
	font-size: 16.5px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .01em;
	max-width: none;
}

/*
 * Zitat - als Absatzstil: kursiv, über die volle Breite, mit goldenen
 * Anführungszeichen vorn und hinten.
 *
 * Dritter Anlauf, und diesmal nach Vorgabe statt nach Vermutung. Die
 * Fassungen davor - erst plakativ mit riesigem Zeichen, dann zurückhaltend
 * mit Linie - sind entfallen.
 *
 * Kursiv ist hier die bewusste Ausnahme. Sonst setzt das Theme keine
 * Kursive (siehe shaping.css, »Keine Kursivschrift«) - gerade deshalb hebt
 * sie das Zitat ab, ohne dass es größer oder lauter werden muss. Seit 4.43
 * mit echtem Kursivschnitt (work-sans-italic-*.woff2, in theme.json
 * angemeldet) - vorher neigte der Browser die aufrechte Schrift nur.
 *
 * Die Anführungszeichen sind Pseudo-Elemente. Stünden sie im Text, läse das
 * Vorleseprogramm sie mit, und beim Wechsel auf einen anderen Stil blieben
 * sie als Zeichen im Absatz stehen. Als ::before und ::after fließen sie mit
 * dem Text: das schließende steht am Ende der letzten Zeile.
 */
.entry-content .is-style-zitat.is-style-zitat {
	max-width: none;
	margin-block: 1.8em;
	/*
	 * Dieselbe Größe wie der Fließtext. 20 Pixel waren zu groß - die
	 * Kursive und die goldenen Zeichen heben das Zitat schon ab, die
	 * Größe muss das nicht auch noch tun.
	 */
	font-size: 18px;
	font-style: italic;
	font-weight: 300;
	line-height: 1.65;
	color: var(--tinte);
}
.entry-content .is-style-zitat.is-style-zitat::before,
.entry-content .is-style-zitat.is-style-zitat::after {
	color: var(--gold);
	font-style: normal;
	font-weight: 400;
}
.entry-content .is-style-zitat.is-style-zitat::before {
	content: "\201E";   /* „ */
	margin-right: .08em;
}
.entry-content .is-style-zitat.is-style-zitat::after {
	content: "\201C";   /* “ */
	margin-left: .06em;
}

@media (max-width: 480px) {
	.entry-content .is-style-zitat.is-style-zitat { font-size: 17px; }
}

/*
 * Initial - der große Anfangsbuchstabe für den ersten Absatz eines
 * Kapitels.
 *
 * Das dunklere Gold, nicht das gewöhnliche: Der Buchstabe ist ein Teil des
 * Textes und muss lesbar sein. #B08A32 auf Creme kommt auf 3,03 und läge
 * damit haarscharf an der Grenze für große Schrift; #8F6E26 kommt auf 4,47.
 */
.entry-content .is-style-initial.is-style-initial::first-letter {
	float: left;
	font-size: 3.4em;
	line-height: .82;
	padding: .04em .1em 0 0;
	font-weight: 300;
	color: var(--gold-dunkel);
}

@media (max-width: 480px) {
	.entry-content .is-style-merksatz.is-style-merksatz { font-size: 18px; }
	.entry-content .is-style-initial.is-style-initial::first-letter { font-size: 2.8em; }
}

/* -- Laborpartner (Seite Labordiagnostik) ---------------------------------
 *
 * Eine Liste, keine Gruppen nach Ländern - so gewünscht. Auf einer Karte,
 * zweispaltig, jeder Eintrag mit feiner Linie darunter.
 *
 * Im Text steht »Name<br>Ort«. Der ganze Eintrag ist klein und gedämpft,
 * die erste Zeile - der Name, ein Link - wird über ::first-line wieder
 * normal groß. So braucht der Editor kein Sonderelement, und ein Eintrag
 * ohne Ort ist einfach nur ein Name.
 *
 * Zwei Spalten und nicht drei: Der längste Name (»BNITM (Institut für
 * Tropenmedizin Hamburg)«) passt so in eine Zeile. Bräche er um, stünde
 * sein zweiter Teil in der kleinen Schrift des Ortes.
 *
 * Linie UNTER jedem Eintrag statt darüber: In zwei Spalten hätte sonst nur
 * die rechte Spalte unten einen Abschluss.
 */
.entry-content .kk-laborpartner {
	margin-top: 1.2em;
}
.entry-content .kk-laborpartner .is-style-getrennt.is-style-getrennt {
	columns: 2;
	column-gap: 44px;
}
.entry-content .kk-laborpartner .is-style-getrennt.is-style-getrennt > li {
	break-inside: avoid;
	padding: 11px 0;
	border-top: 0;
	border-bottom: 1px solid var(--sand-linie);
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: .01em;
	color: var(--text-leise);
}
.entry-content .kk-laborpartner .is-style-getrennt.is-style-getrennt > li::first-line {
	font-size: 16.5px;
	line-height: 1.6;
	letter-spacing: 0;
}
@media (max-width: 700px) {
	.entry-content .kk-laborpartner .is-style-getrennt.is-style-getrennt { columns: 1; }
}

/* -- Links: Unterstreichung wächst beim Überfahren ----------------------- */

.entry-content a:not(.wp-block-button__link):not(.wp-element-button):not(.kk-knopf) {
	color: var(--gold);
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size .35s var(--ease), color .25s var(--ease);
}

.entry-content a:not(.wp-block-button__link):not(.kk-knopf):hover,
.entry-content a:not(.wp-block-button__link):not(.kk-knopf):focus-visible {
	background-size: 100% 1px;
	color: var(--gold-dunkel);
}

@media (prefers-reduced-motion: reduce) {
	.entry-content a:not(.wp-block-button__link) { transition: none; }
	.entry-content a:not(.wp-block-button__link):hover { background-size: 100% 1px; }
}

/* -- Listen -------------------------------------------------------------- */

.entry-content ul,
.entry-content ol { padding-left: 1.3em; }
.entry-content li { margin-bottom: .5em; }
.entry-content li::marker { color: var(--gold); }

.entry-content .is-style-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0;
	list-style: none;
}
.entry-content .is-style-chips li {
	margin: 0;
	padding: 8px 16px;
	border: 1px solid var(--sand-linie);
	border-radius: var(--radius-pill);
	font-size: 14px;
}
.entry-content .is-style-chips li::marker { content: ""; }

/* -- Weitere Stile für Aufzählungen und Listen ----------------------------
 *
 * Angemeldet an core/list, im Editor rechts unter »Stile« wählbar. Die
 * Schlagwort-Liste darüber ist unverändert geblieben.
 *
 * Alle Farben kommen aus der Palette; die Goldflächen sind mit color-mix
 * aus var(--gold) gemischt, so wie bei den Absatz- und Gruppenstilen.
 *
 * Warum die Klasse doppelt im Selektor steht, gilt hier wie dort: In einem
 * Abschnitt mit eigenem Design wiegt die Vorgabe 0,2,1 und überstimmte ein
 * einfaches .is-style-… mit 0,2,0.
 */

/*
 * Haken statt Punkt - für das, was jemand bekommt oder mitbringt.
 *
 * Der Haken ist ein Pseudo-Element und kein Zeichen im Text: Ein Häkchen
 * im Listeneintrag würde von Vorleseprogrammen mitgelesen und stünde in
 * der Suchmaschine.
 */
.entry-content .is-style-haken.is-style-haken {
	list-style: none;
	padding-left: 0;
}
.entry-content .is-style-haken.is-style-haken > li {
	position: relative;
	padding-left: 32px;
	margin-bottom: .7em;
}
.entry-content .is-style-haken.is-style-haken > li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .42em;
	width: 13px;
	height: 7px;
	border-left: 2px solid var(--gold);
	border-bottom: 2px solid var(--gold);
	transform: rotate(-45deg);
}

/* Getrennt - eine feine Linie zwischen den Einträgen, wie im Seitenmenü. */
.entry-content .is-style-getrennt.is-style-getrennt {
	list-style: none;
	padding-left: 0;
}
.entry-content .is-style-getrennt.is-style-getrennt > li {
	margin: 0;
	padding: 12px 0;
	border-top: 1px solid var(--sand-linie);
}
.entry-content .is-style-getrennt.is-style-getrennt > li:last-child {
	border-bottom: 1px solid var(--sand-linie);
}

/* Karten - jeder Eintrag auf eigener Sandfläche. Für kurze Einträge. */
.entry-content .is-style-listenkarten.is-style-listenkarten {
	list-style: none;
	padding-left: 0;
	display: grid;
	gap: 10px;
}
.entry-content .is-style-listenkarten.is-style-listenkarten > li {
	margin: 0;
	padding: 14px 18px;
	background: var(--sand);
	border-radius: var(--radius-block);
}

/*
 * Zweispaltig - für lange Aufzählungen kurzer Einträge.
 *
 * »break-inside: avoid« an den Einträgen: Ohne das reißt die Spaltenkante
 * mitten durch einen mehrzeiligen Eintrag, und die Aufzählung sieht
 * zerbrochen aus.
 */
.entry-content .is-style-zweispaltig.is-style-zweispaltig {
	columns: 2;
	column-gap: clamp(28px, 3.4vw, 56px);
}
.entry-content .is-style-zweispaltig.is-style-zweispaltig > li {
	break-inside: avoid;
}
@media (max-width: 700px) {
	.entry-content .is-style-zweispaltig.is-style-zweispaltig { columns: 1; }
}

/* Kompakt - enger gesetzt, für Aufzählungen aus einzelnen Wörtern. */
.entry-content .is-style-kompaktliste.is-style-kompaktliste > li {
	margin-bottom: .18em;
}

/*
 * Große Zahlen - für nummerierte Schritte.
 *
 * Der Zähler kommt aus CSS und steht damit nicht im Text; die Nummern der
 * ol selbst werden abgeschaltet, sonst stünden sie doppelt da.
 */
.entry-content .is-style-schritte.is-style-schritte {
	list-style: none;
	padding-left: 0;
	counter-reset: schritt;
}
.entry-content .is-style-schritte.is-style-schritte > li {
	position: relative;
	counter-increment: schritt;
	padding-left: 54px;
	margin-bottom: 1em;
	min-height: 34px;
}
.entry-content .is-style-schritte.is-style-schritte > li::before {
	content: counter(schritt, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: .1em;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 13px;
	letter-spacing: .1em;
	color: var(--gold-mittel);
}

/* -- Zitate -------------------------------------------------------------- */

.entry-content blockquote,
.entry-content .wp-block-quote {
	margin: 2em 0;
	padding: 0 0 0 24px;
	border-left: 2px solid var(--gold);
	font-style: normal;
	font-weight: 300;
	font-size: 21px;
	line-height: 1.6;
	color: var(--tinte);
}
.entry-content blockquote cite {
	display: block;
	margin-top: 12px;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 11.5px;
	font-style: normal;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--text-leise);
}

/* -- Tabellen ------------------------------------------------------------ */

.entry-content .wp-block-table,
.entry-content figure.wp-block-table { overflow-x: auto; }

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}
.entry-content th {
	background: var(--anthrazit);
	color: var(--creme);
	font-weight: 500;
	text-align: left;
}
.entry-content th,
.entry-content td {
	padding: 14px 18px;
	border: 1px solid var(--sand-linie);
}
.entry-content tbody tr:nth-child(even) { background: #F7F3EC; }

/* -- Zeitstrahl ----------------------------------------------------------
 *
 * Eine Tabelle aus Jahreszahl und Text - die Vita - wird zur Zeitleiste:
 * eine Linie, ein Punkt je Station, das Jahr links, der Text rechts.
 * Markiert wird sie in shaping.php; im Editor bleibt sie eine Tabelle.
 *
 * Die Tabellenelemente bekommen dafür eine andere Darstellung als die
 * Tabelle. Das ist Absicht: So bleibt der Inhalt unverändert, und wer die
 * Seite pflegt, arbeitet weiter in vertrauten Zeilen.
 *
 * Die Klasse steht zweimal im Selektor und »table« ebenfalls. Sonst
 * gewinnt die allgemeine Tabellenregel aus unterseiten.css, die der
 * ersten Spalte feste 180 Pixel gibt: Beide Selektoren wogen gleich
 * schwer, und unterseiten.css wird später geladen. Die Jahreszahl schob
 * sich dadurch über den Text.
 */
/*
 * Kein Scrollbalken: ».entry-content figure.wp-block-table« gibt jeder
 * Tabelle »overflow-x: auto«, damit breite Tabellen das Raster nicht
 * sprengen. Der Zeitstrahl bricht von selbst um und braucht das nicht -
 * mit Balken liess er sich seitwaerts schieben, was nach einem Fehler aussah.
 */
.entry-content figure.kk-zeitstrahl.kk-zeitstrahl,
.entry-content .kk-zeitstrahl {
	overflow: visible;
	margin: 48px 0;
	max-width: none;
}
.entry-content .kk-zeitstrahl.kk-zeitstrahl table { display: block; font-size: inherit; }
.entry-content .kk-zeitstrahl.kk-zeitstrahl table tbody { display: block; }

/* »max-width: none«: Die Oeffnungszeiten-Regel in unterseiten.css deckelt
   jede Tabelle bei 620 Pixeln - der Zeitstrahl blieb dadurch schmal,
   obwohl seine Flaeche 1056 Pixel breit war. */
.entry-content .kk-zeitstrahl.kk-zeitstrahl table {
	width: 100%;
	max-width: none;
}
.entry-content .kk-zeitstrahl.kk-zeitstrahl table tr {
	position: relative;
	border: 0;
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	column-gap: 30px;
	padding: 0 0 34px;
	background: none;
}
.entry-content .kk-zeitstrahl.kk-zeitstrahl table tr:last-child { padding-bottom: 0; }

/* Die Linie läuft von Punkt zu Punkt, nicht über das letzte Jahr hinaus. */
.entry-content .kk-zeitstrahl.kk-zeitstrahl table tr::before {
	content: "";
	position: absolute;
	left: 107px;
	top: 14px;
	bottom: -6px;
	width: 1px;
	background: linear-gradient(180deg, var(--gold-hell), var(--sand-linie));
}
.entry-content .kk-zeitstrahl.kk-zeitstrahl table tr:last-child::before { display: none; }

/*
 * »width: 100%« und »min-width: 0«: Eine Tabellenzelle bringt aus dem
 * Tabellensatz eine eigene Breite mit. Als Rasterelement blieb die erste
 * damit 180 statt 116 Pixel breit und schob sich über den Text.
 */
.entry-content .kk-zeitstrahl.kk-zeitstrahl table td {
	display: block;
	border-bottom: 0;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	border: 0;
	padding: 0;
}

/* Das Jahr: rechtsbündig an der Linie, der Zusatz »seit« bleibt leiser. */
.entry-content .kk-zeitstrahl.kk-zeitstrahl table td:first-child {
	text-align: right;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-leise);
	font-variant-numeric: tabular-nums;
	padding-top: 2px;
}
.entry-content .kk-zeitstrahl.kk-zeitstrahl table td:first-child strong {
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--gold-tief);
}

/* Der Punkt sitzt auf der Linie, in der Höhe der ersten Zeile. */
.entry-content .kk-zeitstrahl.kk-zeitstrahl table td:first-child::after {
	content: "";
	position: absolute;
	left: 102px;
	top: 7px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--creme);
	border: 2px solid var(--gold);
	box-shadow: 0 0 0 4px var(--creme);
}
/* Die jüngste Station ist gefüllt - dort steht die Praxis heute. */
.entry-content .kk-zeitstrahl.kk-zeitstrahl table tr:first-child td:first-child::after {
	background: var(--gold);
}

.entry-content .kk-zeitstrahl.kk-zeitstrahl table td:last-child {
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--text);
	/* Keine Lesebreite: Die Einträge sind Aufzählungen, keine Fließtexte,
	   und jede Begrenzung liess den Zeitstrahl schmal wirken. */
	max-width: none;
}

@media (max-width: 700px) {
	.entry-content .kk-zeitstrahl.kk-zeitstrahl table tr {
		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
		padding-left: 30px;
		padding-bottom: 28px;
	}
	.entry-content .kk-zeitstrahl.kk-zeitstrahl table tr::before { left: 5px; top: 16px; }
	.entry-content .kk-zeitstrahl.kk-zeitstrahl table td:first-child {
		text-align: left;
		margin-bottom: 4px;
		padding-top: 0;
	}
	.entry-content .kk-zeitstrahl.kk-zeitstrahl table td:first-child::after { left: 0; top: 6px; }
	.entry-content .kk-zeitstrahl.kk-zeitstrahl table td:last-child { font-size: 16px; }
}

/* -- Knöpfe -------------------------------------------------------------- */

.entry-content .wp-block-button__link,
.entry-content .wp-element-button,
.suchknopf,
input[type="submit"],
button.knopf {
	display: inline-block;
	background: var(--gold-dunkel);
	color: #fff;
	border: 0;
	border-radius: var(--radius-pill);
	padding: 19px 34px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background .25s var(--ease);
}

.entry-content .wp-block-button__link:hover,
.suchknopf:hover,
input[type="submit"]:hover { background: var(--gold-tief); color: #fff; }

.entry-content .is-style-sekundaer .wp-block-button__link {
	background: transparent;
	color: var(--tinte);
	border: 1px solid #D8D2C7;
}
.entry-content .is-style-sekundaer .wp-block-button__link:hover {
	border-color: var(--gold-mittel);
	color: var(--gold-mittel);
	background: transparent;
}

@media (max-width: 480px) {
	.entry-content .wp-block-button { width: 100%; }
	.entry-content .wp-block-button__link { display: block; text-align: center; }
}

/* -- Bilder: der Markenfilter (Spec 6) ----------------------------------- */

.entry-content img,
.wp-block-image img,
.wp-block-gallery img,
.wp-block-cover__image-background,
.wp-block-post-featured-image img,
.seitenbild img,
.eintrag-bild img { filter: var(--bildfilter); }

/* Ausnahmen: Logos, Siegel, Grafiken, ausdrückliche Abwahl */
.site-logo img,
.custom-logo,
.footer-logo,
.footer-siegel img,
.entry-content img[src$=".svg"],
.entry-content .is-style-unfiltered img,
.entry-content figure.no-filter img,
.wp-block-image.is-style-unfiltered img { filter: none; }

.entry-content .is-style-duoton img,
.wp-block-image.is-style-duoton img { filter: var(--duoton); }

.entry-content figure { margin: 2.4em 0; }
.entry-content figcaption,
.wp-element-caption {
	margin-top: 12px;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--text-leise);
}

/* -- Flächen ------------------------------------------------------------- */

.is-style-sektion-sand {
	background: var(--sand);
	border-radius: var(--radius-sektion) var(--radius-sektion) 0 0;
	padding: var(--sektionsabstand) var(--rand);
}

.is-style-sektion-nacht {
	position: relative;
	background: var(--nacht);
	color: #F4F1EB;
	border-radius: var(--radius-block);
	padding: clamp(36px, 5vw, 72px);
	overflow: hidden;
}
.is-style-sektion-nacht :is(h1, h2, h3, h4, h5, h6) { color: #F4F1EB; }
.is-style-sektion-nacht .eyebrow { color: var(--gold-hell); }
.is-style-sektion-nacht::after {
	content: "";
	position: absolute;
	right: -40px;
	bottom: -40px;
	width: 320px;
	height: 320px;
	background: url("../img/mark-ochre.png") no-repeat center / contain;
	opacity: .14;
	pointer-events: none;
}

/* -- Weitere Stile für Gruppen --------------------------------------------
 *
 * Dieselbe Sprache wie die Abschnittsdesigns an der Überschrift, nur für
 * eine Gruppe: Was dort ein Abschnitt bis zur nächsten Überschrift ist,
 * ist hier genau das, was in der Gruppe steht. Der Unterschied liegt in
 * der Wahl - die Überschrift gestaltet einen gewachsenen Textabschnitt,
 * die Gruppe eine bewusst zusammengestellte Einheit.
 *
 * »Sandfläche« und »Dunkler Statement-Block« darüber sind unverändert
 * geblieben.
 */

/* Mit Umrandung - eine Einheit, die zusammengehört, ohne farbige Fläche. */
.is-style-sektion-rahmen {
	border: 1px solid var(--sand-linie);
	border-radius: var(--radius-block);
	padding: clamp(28px, 4vw, 56px);
	background: transparent;
}

/* Goldlinie links - dieselbe wie beim Abschnittsdesign »mit Goldlinie«
   und beim Absatz »Merksatz«, damit die drei zusammengehören. */
.is-style-sektion-akzent {
	border-left: 3px solid var(--gold);
	padding-left: clamp(22px, 3vw, 40px);
}

/* Karte - abgehoben statt eingerahmt. Der Schatten ist weich und tief
   angesetzt: eine Karte, die auf dem Papier liegt, nicht schwebt. */
.is-style-sektion-karte {
	background: var(--creme);
	border: 1px solid var(--linie-hell);
	border-radius: var(--radius-block);
	padding: clamp(28px, 4vw, 52px);
	box-shadow: 0 18px 40px -28px rgba(60, 44, 12, .35);
}

/* Schmal und mittig - für den Einschub zwischen zwei langen Passagen.
   Die Überschrift steht mittig, der Text bleibt linksbündig: mittig
   gesetzter Fließtext lässt das Auge den Zeilenanfang jedes Mal suchen. */
.is-style-sektion-schmal {
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
}
.is-style-sektion-schmal :is(p, ul, ol, blockquote, dl, table, figcaption) {
	text-align: left;
}
.is-style-sektion-schmal :is(p, ul, ol, blockquote, dl) {
	max-width: var(--mass-schmal);
	margin-inline: auto;
}

/*
 * Über die volle Breite.
 *
 * Wie beim Abschnittsdesign reicht »max-width: none« an der Gruppe nicht:
 * Die Lesebreite steht an den Absätzen selbst, sonst wäre die Gruppe breit
 * und ihr Inhalt schmal. Der Preis ist derselbe - aus 54 Zeichen je Zeile
 * werden über die ganze Spalte rund 140.
 */
.is-style-sektion-breit {
	max-width: none;
	margin-inline: 0;
}
.is-style-sektion-breit :is(p, li, blockquote) { max-width: none; }
.is-style-sektion-breit :is(h2, h3) { max-width: none; }

.is-style-kennzahl {
	font-size: clamp(30px, 2.8vw, 40px);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.02em;
}

.is-style-sand.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--sand-linie);
	opacity: 1;
}

/* -- Formulare (Contact Form 7, WPForms, Gravity Forms) ------------------ */

.wpcf7-form,
.wpforms-form,
.gform_wrapper form {
	background: #FAF8F5;
	border: 1px solid var(--linie-hell);
	padding: 48px;
	border-radius: 0;
}

@media (max-width: 640px) {
	.wpcf7-form,
	.wpforms-form,
	.gform_wrapper form { padding: 28px 20px; }
}

.wpcf7-form label,
.wpforms-field-label,
.gform_wrapper .gfield_label {
	display: block;
	margin-bottom: 6px;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--text-leise);
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpforms-field input,
.wpforms-field select,
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.suchfeld {
	width: 100%;
	height: 36px;
	padding: 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid #D8D2C7;
	border-radius: 0;
	font-family: inherit;
	font-size: 16px;
	color: var(--tinte);
	transition: border-color .25s var(--ease);
}

.wpcf7-form textarea,
.wpforms-field textarea,
.gform_wrapper textarea {
	width: 100%;
	height: 96px;
	padding: 8px 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid #D8D2C7;
	border-radius: 0;
	font-family: inherit;
	font-size: 16px;
	resize: vertical;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus,
.suchfeld:focus {
	outline: none;
	border-bottom: 2px solid var(--gold);
}

.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"] {
	width: 17px;
	height: 17px;
	border: 1px solid #C9C1B3;
	accent-color: var(--gold);
}

.wpcf7-form p { margin-bottom: 24px; }
.wpcf7-not-valid-tip { color: #B4362F; font-size: 13px; }
.wpcf7-response-output {
	border: 1px solid var(--sand-linie) !important;
	padding: 14px 18px !important;
	margin: 20px 0 0 !important;
	font-size: 15px;
}

/* -- Suche --------------------------------------------------------------- */

.suchform { max-width: 480px; margin: 32px 0; }
.suchlabel {
	display: block;
	margin-bottom: 8px;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 10.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--text-leise);
}
.suchzeile { display: flex; gap: 16px; align-items: flex-end; }
.suchknopf { flex: none; padding: 13px 24px; font-size: 15px; }

/* -- Unterseiten-Liste --------------------------------------------------- */

.unterseiten {
	list-style: none;
	margin: 64px 0 0;
	padding: 0;
	border-top: 1px solid var(--sand-linie);
	max-width: none;
}
.unterseite { margin: 0; border-bottom: 1px solid var(--sand-linie); }
.unterseite a {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 36px;
	align-items: baseline;
	padding: 26px 0;
	text-decoration: none;
	color: var(--tinte);
	transition: padding-left .35s var(--ease), background .35s var(--ease);
}
.unterseite a:hover { padding-left: 10px; background: #F2EEE7; }
.unterseite .nummer {
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 12px;
	letter-spacing: .2em;
	color: var(--gold-mittel);
}
.unterseite .titel { font-size: clamp(19px, 2vw, 24px); font-weight: 400; }

@media (max-width: 640px) {
	.unterseite a { grid-template-columns: 56px minmax(0, 1fr); gap: 18px; }
}

/* -- Einbettungen (Buchung, Video, Karte) -------------------------------- *
 *
 * Die Maße stehen bewusst hier und nicht als style-Attribut im Inhalt:
 * WordPress filtert style-Attribute je nach Benutzerrecht heraus, und ein
 * iframe ohne Höhe fällt auf 150 px zusammen - genau daran ist die
 * Terminbuchung nach dem Umzug gescheitert.
 */

.kk-einbettung {
	margin: var(--abstand-block, 48px) 0;
	border-radius: var(--radius-karte);
	overflow: hidden;
	background: var(--sand, #f2ede5);
}

.kk-einbettung > iframe {
	display: block;
	width: 100%;
	border: 0;
}

/* Buchung: hoch genug für Kalender und Formular, aber nie höher als der Schirm. */
.kk-einbettung--buchung > iframe {
	height: 700px;
	max-height: 100vh;
}

@media (max-width: 600px) {
	.kk-einbettung--buchung > iframe { height: 82vh; min-height: 520px; }
}

/* Video: festes Seitenverhältnis statt fester Höhe. */
.kk-einbettung--video > iframe {
	aspect-ratio: 16 / 9;
	height: auto;
}

/*
 * Die Karte: ein gestaltetes Element, kein nackter Rahmen.
 *
 * Festes Seitenverhaeltnis statt fester Hoehe, Goldkante und Schatten wie
 * bei den Karten im Inhalt. Der leichte Filter nimmt dem bunten
 * Kartenbild die Haerte; beim Ueberfahren zeigt sie sich in voller Farbe,
 * damit nichts an Lesbarkeit verlorengeht.
 */
.entry-content .kk-einbettung--karte {
	margin: 40px 0 0;
	border: 1px solid var(--linie-hell);
	border-radius: 16px;
	box-shadow: 0 26px 50px -34px rgba(58, 45, 20, .45);
	max-width: none;
}
.kk-einbettung--karte > iframe {
	height: auto;
	aspect-ratio: 21 / 9;
	filter: saturate(.78) contrast(1.02) sepia(.14);
	transition: filter .5s var(--ease);
}
.kk-einbettung--karte:hover > iframe,
.kk-einbettung--karte:focus-within > iframe { filter: none; }
@media (prefers-reduced-motion: reduce) {
	.kk-einbettung--karte > iframe { transition: none; }
}
@media (max-width: 700px) {
	.kk-einbettung--karte > iframe { aspect-ratio: 4 / 3; }
}

/* Anschrift und Wegbeschreibung unter der Karte. */
.entry-content .kk-karte__fuss.kk-karte__fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 24px;
	margin: 14px 0 0;
	max-width: none;
	font-size: 15px;
	color: var(--text-leise);
}

/*
 * Kontaktangaben als Karte, zweispaltig: links die Praxis, rechts, wie man
 * sie erreicht. Unter 782 Pixeln stellt der Blockeditor die Spalten von
 * selbst untereinander.
 */
.entry-content .kk-kontaktkarte.kk-kontaktkarte {
	gap: 24px 56px;
	margin-block: 40px;
}
.entry-content .kk-kontaktkarte p { margin-block: 0 10px; max-width: none; }
.entry-content .kk-kontaktkarte p:last-child { margin-bottom: 0; }
.entry-content .kk-kontaktkarte strong { font-weight: 500; }
/*
 * Der Name der Praxis ist ein Satz und wird auch als einer gesetzt.
 *
 * Vorher stand »NATURHEILPRAXIS« als kleine Marke in einer eigenen Zeile -
 * dadurch las es sich, als gehoere das Wort nicht zu »fuer Funktionelle
 * Medizin & Stressmedizin«.
 */
.entry-content .kk-kontaktkarte .wp-block-column:first-child p:first-child {
	font-size: 19px;
	line-height: 1.45;
	color: var(--tinte);
}
.entry-content .kk-kontaktkarte .wp-block-column:first-child p:first-child em {
	display: inline-block;
	margin-top: 6px;
	font-size: 15px;
	color: var(--text-leise);
}

/* Der Knopf oben steht fuer sich, nicht mitten im Text. */
.entry-content .kk-buchen { margin: 0 0 8px; }

/*
 * Auffangnetz: ein eingebetteter Rahmen ohne eigene Maßangabe bekommt
 * trotzdem eine brauchbare Größe, statt zu einem Streifen zu schrumpfen.
 */
.entry-content iframe:not([height]):not([style*="height"]) {
	width: 100%;
	min-height: 420px;
	border: 0;
}

/* Ersatzdarstellung, wenn der Anbieter die Einbettung ablehnt */
.kk-einbettung.ist-gesperrt { background: var(--sand, #f2ede5); }

.kk-einbettung__hinweis {
	padding: 40px clamp(20px, 5vw, 56px);
	text-align: center;
}
.kk-einbettung__hinweis p { margin: 0 0 12px; }
.kk-einbettung__hinweis p:last-child { margin: 24px 0 0; }

.kk-einbettung__ausweg {
	margin-top: -28px;
	font-size: 15px;
	color: var(--text-leise, #6b6255);
}

/*
 * Die eine Knopfdefinition des Themes.
 *
 * Zwei gemessene Fehler stecken in dieser Regel:
 *
 * 1. Jeder vom Theme erzeugte Knopf traegt .kk-knopf, und die allgemeine
 *    Linkregel weiter oben nimmt diese Klasse ausdruecklich aus. Ohne das
 *    gewann dort »color: var(--gold)« - goldene Schrift auf goldenem
 *    Grund, gemessener Kontrast 1,0.
 *
 * 2. Die Flaeche ist --gold-dunkel und nicht --gold. Weisse Schrift auf
 *    dem Markengold erreicht nur 3,22 - unter den 4,5, die normaler Text
 *    braucht. Auf --gold-dunkel sind es 5,17. Beide Toene werden aus der
 *    Akzentfarbe berechnet; die Umstellung gilt also auch fuer die drei
 *    Alternativpaletten.
 *
 * Wer einen neuen Knopf baut, setzt diese Klasse und braucht sich um
 * nichts weiter zu kuemmern.
 */
/*
 * Der Knopf aus Glas.
 *
 * Drei Dinge machen den Eindruck aus, und nur eines davon ist die
 * Durchsichtigkeit:
 *
 *   1. Der Grund scheint durch - 86 Prozent Deckkraft.
 *   2. Was durchscheint, ist unscharf. »backdrop-filter« ist der Teil, der
 *      aus »etwas durchsichtig« erst Glas macht.
 *   3. Eine helle Kante oben und ein Schatten unten geben ihm Dicke.
 *
 * Die Groesse der Beschriftung ist keine Geschmacksfrage: 19px und fett
 * machen sie zu »grossem Text«, und erst dafuer genuegen die 3,22, die
 * Weiss auf diesem Gold erreicht. Wer sie kleiner oder leichter setzt,
 * nimmt dem Knopf die Grundlage. Die Rechnung steht in base.css.
 */
.kk-knopf,
.entry-content a.kk-knopf {
	display: inline-block;
	padding: 15px 30px;
	border-radius: var(--radius-pill);

	background-color: color-mix(in srgb, var(--gold-glas) 86%, transparent);
	background-image: linear-gradient(
		180deg,
		rgba(255, 255, 255, .30) 0%,
		rgba(255, 255, 255, .08) 46%,
		rgba(255, 255, 255, 0) 100%
	);

	-webkit-backdrop-filter: blur(12px) saturate(1.2);
	backdrop-filter: blur(12px) saturate(1.2);

	border: 1px solid rgba(255, 255, 255, .38);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .46),
		0 10px 26px -10px rgba(90, 68, 22, .45);

	color: var(--gold-glas-schrift);
	text-decoration: none;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: .005em;

	/* Hebt die Schrift von der Flaeche ab. Zaehlt bei der Richtlinie
	   nicht mit - der Knopf erfuellt sie schon ohne. */
	text-shadow: 0 1px 2px rgba(60, 44, 12, .28);

	/*
	 * Ein Knopf mit zwei Zeilen sieht aus wie ein Versehen. Die Beschriftung
	 * bleibt deshalb in einer Zeile - kuerzen ist die Loesung, nicht
	 * umbrechen. Auf sehr schmalen Geraeten weicht stattdessen der
	 * Innenabstand (siehe unten); die Schriftgroesse darf nicht weichen,
	 * sie traegt den Kontrast.
	 */
	white-space: nowrap;
	transition: background-color .25s var(--ease), box-shadow .25s var(--ease),
		transform .25s var(--ease);
}

.kk-knopf:hover,
.entry-content a.kk-knopf:hover {
	background-color: color-mix(in srgb, var(--gold-glas) 96%, transparent);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .55),
		0 14px 30px -10px rgba(90, 68, 22, .5);
	color: var(--gold-glas-schrift);
}

.kk-knopf:active,
.entry-content a.kk-knopf:active { transform: translateY(1px); }

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

/*
 * Ohne »backdrop-filter« gibt es kein Glas - dann lieber die volle Farbe
 * als eine blasse Flaeche, durch die man alles scharf hindurchsieht.
 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.kk-knopf,
	.entry-content a.kk-knopf {
		background-color: var(--gold);
		background-image: none;
	}
}

/* Weniger Bewegung heisst auch: kein Nachgeben beim Druecken. */
@media (prefers-reduced-motion: reduce) {
	.kk-knopf, .entry-content a.kk-knopf { transition: none; }
	.kk-knopf:active, .entry-content a.kk-knopf:active { transform: none; }
}

/* Auf schmalen Geraeten weicht der Innenabstand, nicht die Schrift. */
@media (max-width: 420px) {
	.kk-knopf,
	.entry-content a.kk-knopf { padding-inline: 22px; }
}

/* Der zweite Knopf einer Reihe: Kontur statt Flaeche. */
/*
 * Die zurückhaltende Knopfform - der Rückruf.
 *
 * Eine feine Linie in Gold statt der sandgrauen: Der Knopf soll als
 * Angebot erkennbar sein, ohne dem gefüllten Termin-Knopf daneben die
 * Aufmerksamkeit zu nehmen. Gefüllt heißt »Termin buchen«, umrandet
 * »Rückruf«.
 *
 * Die Schrift steht in »gold-tief«, nicht im hellen Gold: Auf Creme
 * erreicht der dunkle Ton 4,9:1 und ist damit auch in normaler Größe
 * lesbar. Die Linie darf heller sein, sie trägt keinen Text.
 */
.kk-knopf--sekundaer,
.entry-content a.kk-knopf--sekundaer {
	background-color: transparent;
	background-image: none;
	color: var(--gold-tief);
	border: 1px solid var(--gold);
	box-shadow: none;
	text-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.kk-knopf--sekundaer:hover,
.entry-content a.kk-knopf--sekundaer:hover,
.kk-knopf--sekundaer:focus-visible,
.entry-content a.kk-knopf--sekundaer: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 gedämpft. */
.kk-knopf--sekundaer { font-variant-emoji: text; }

/* Der Absatz mit dem Rückruf-Knopf steht für sich. */
.entry-content .kk-rueckruf { margin: 1.6em 0; max-width: none; }

/*
 * Ausgenommen die Knopfzeile der Startseite: Dort stehen Termin- und
 * Rückruf-Knopf nebeneinander, und der Abstand von oben schob den zweiten
 * um 29 Pixel nach unten.
 */
.ist-startseite .kk-buehne__text .kk-rueckruf,
.ist-startseite .kk-einleitung .kk-rueckruf { margin-block: 0; }

/*
 * Sobald die Zeile zu schmal wird, rutscht der Rückruf-Knopf unter den
 * Termin-Knopf - und damit unmittelbar auf das Karussell darunter, ohne
 * einen Pixel dazwischen. Nebeneinander entsteht der Abstand von selbst
 * aus der Zeilenhöhe; untereinander fällt er weg, weil der Absatz oben
 * von seinen Rändern befreit wurde.
 *
 * Die 880 Pixel stammen aus der Messung: Beide Knöpfe sind 300 Pixel
 * breit, nebeneinander brauchen sie mit Zwischenraum gut 615 - die
 * Inhaltsspalte unterschreitet das bei etwa 840 Pixeln Fensterbreite.
 */
@media (max-width: 880px) {
	.ist-startseite .kk-buehne__text .kk-rueckruf,
	.ist-startseite .kk-einleitung .kk-rueckruf { margin-block-end: 1.5rem; }
}


/* -- Bildergalerie als Mosaik --------------------------------------------
 *
 * Die Standardgalerie stellt die Bilder in eine Reihe und macht sie gleich
 * hoch - auf »Impressionen aus der Praxis« waren das sechs Briefmarken von
 * 180 mal 120 Pixeln in der schmalen Textspalte.
 *
 * Hier liegt ein Raster darüber: das erste Foto groß über zwei Felder, die
 * übrigen als Kacheln daneben. Alle im selben Format, damit die Reihen
 * fluchten - die Fotos sind gemischt 4:3 und 16:9, der Zuschnitt nimmt
 * ihnen nur einen Streifen.
 *
 * »:not(#kk)« hebt das Gewicht über die Regeln von WordPress: Deren
 * Stilblatt steht im Kopf nach diesem hier, bei gleichem Gewicht gewinnt
 * also der Standard. Mit ihm blieben die Bilder in einer flexiblen Reihe
 * und wurden 1500 Pixel hoch gezogen.
 */
.entry-content .wp-block-gallery.has-nested-images:not(#kk) {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	max-width: none;
	margin: 40px 0;
	/* Bis an den rechten Rand, dort, wo sonst die Knopfspalte Platz hält. */
	margin-right: calc(-1 * var(--kk-inhalt-rechts, 0px));
}

.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#kk) {
	display: block;
	width: auto;
	max-width: none;
	margin: 0;
	overflow: hidden;
	border-radius: 12px;
	background: var(--sand);
	aspect-ratio: 4 / 3;
}

/* Das erste Foto trägt die Fläche: zwei mal zwei Felder. */
.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#kk):first-child {
	grid-column: span 2;
	grid-row: span 2;
}

.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#kk) img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	filter: var(--bildfilter);
	transition: transform .6s var(--ease);
}

.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#kk):hover img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#kk) img {
		transition: none;
	}
	.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#kk):hover img {
		transform: none;
	}
}

@media (max-width: 1180px) {
	.entry-content .wp-block-gallery.has-nested-images:not(#kk) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 600px) {
	.entry-content .wp-block-gallery.has-nested-images:not(#kk) {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
		margin-right: 0;
	}
	.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#kk):first-child {
		grid-column: auto;
		grid-row: auto;
	}
}


/* -- Die Lupe an der Galerie ---------------------------------------------
 *
 * WordPress setzt zum Vergrößern ein kleines schwarzes Kästchen in die
 * Ecke. Hier ist stattdessen die ganze Kachel anklickbar, und der
 * Mauszeiger wird darüber zur goldenen Lupe.
 *
 * Die Lupe trägt einen weißen Rand: Ein Zeiger, der nur aus Gold besteht,
 * verschwindet über einem hellen Foto. Der Punkt, auf den der Zeiger
 * zeigt, liegt in der Mitte der Linse (die beiden Zahlen hinter der
 * Adresse).
 *
 * Fällt der eigene Zeiger aus - manche Systeme lehnen Bildzeiger ab -,
 * bleibt »zoom-in«, die eingebaute Lupe des Browsers.
 */
.entry-content .wp-block-gallery figure.wp-block-image:not(#kk) button.lightbox-trigger,
.entry-content .wp-block-gallery .lightbox-trigger {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	/* Ohne das Gewicht hier legt der graue Grund von WordPress einen
	   Schleier über jedes Bild. */
	background-color: transparent;
	background-image: none;
	/*
	 * Und ohne diese beiden Zeilen ist das Foto darunter unscharf: Der
	 * Knopf von WordPress bringt »backdrop-filter: blur(16px)« mit. Als
	 * kleines Kästchen in der Ecke fällt das nicht auf - über die ganze
	 * Kachel gelegt macht es das ganze Bild milchig, bis auf den Streifen
	 * oben, den der Knopf frei lässt.
	 */
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
	opacity: 1;
	cursor: var(--kk-lupe-zeiger), zoom-in;
}

/* Das Symbol von WordPress wird nicht gebraucht. */
.entry-content .wp-block-gallery .lightbox-trigger svg { display: none; }

/* Auch über dem Bild selbst zeigt der Zeiger die Lupe. */
.entry-content .wp-block-gallery figure.wp-block-image:not(#kk) img {
	cursor: var(--kk-lupe-zeiger), zoom-in;
}

.entry-content .wp-block-gallery .lightbox-trigger:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: -4px;
}


/* -- Das geöffnete Bild ---------------------------------------------------
 *
 * Im geöffneten Bild zeigt WordPress den eingebauten Zeiger »zoom-out«, ein
 * schwarzes Lupensymbol. Hier steht dieselbe Lupe wie auf der Galerie, nur
 * mit Minus - und in hellerem Gold, weil sie auf dunklem Grund liegt.
 */
.wp-lightbox-overlay,
.wp-lightbox-overlay .scrim,
.wp-lightbox-overlay .lightbox-image-container,
.wp-lightbox-overlay img {
	cursor: var(--kk-lupe-zu), zoom-out;
}

/* Die Knöpfe darin bleiben Knöpfe. */
.wp-lightbox-overlay button {
	cursor: pointer;
}
.wp-lightbox-overlay button:focus-visible {
	outline: 2px solid var(--gold-hell);
	outline-offset: 3px;
}


/* -- Videofassade ---------------------------------------------------------
 *
 * Steht anstelle des YouTube-Rahmens, bis jemand auf Abspielen drückt.
 * Sieht aus wie ein Video mit Abspielknopf, holt aber nichts von Google.
 */
.entry-content .kk-video-fassade {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	margin: 40px 0;
	max-width: none;
	overflow: hidden;
	border-radius: 12px;
	background: var(--sand) center / cover no-repeat;
}
.entry-content .kk-video-fassade.hat-bild::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20,16,8,.18), rgba(20,16,8,.42));
}

.kk-video-fassade__knopf {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 15px 28px 15px 20px;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--gold-glas) 88%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #fff;
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	cursor: pointer;
	transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.kk-video-fassade__knopf:hover { transform: scale(1.03); }
.kk-video-fassade__knopf:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Das Dreieck: gezeichnet, kein Zeichensatz und keine Grafikdatei. */
.kk-video-fassade__pfeil {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent #fff;
}

/* Der Hinweis steht am unteren Rand, klein und lesbar. */
.entry-content .kk-video-fassade__hinweis {
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 10px 16px;
	max-width: none;
	background: rgba(20, 16, 8, .55);
	color: #EDE8DF;
	font-size: 13px;
	line-height: 1.45;
	text-align: center;
}

/* Ist das Video geladen, füllt es die Fläche. */
.kk-video-fassade.ist-geladen { background: #000; }
.kk-video-fassade iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/*
 * Der Lageplan.
 *
 * Das Bild ist selbst ein Link: Ein Klick öffnet Google Maps mit der
 * Praxis als Ziel. Darunter steht derselbe Weg noch einmal als Knopf -
 * dass ein Bild anklickbar ist, sieht man ihm sonst nicht an.
 */
.entry-content .kk-lageplan { margin: 40px 0 0; max-width: none; }
.entry-content .kk-lageplan img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	filter: none;
	transition: filter .3s var(--ease);
}
.entry-content .kk-lageplan a {
	display: block;
	background-image: none;
	border-radius: 12px;
	overflow: hidden;
}
.entry-content .kk-lageplan a:hover img { filter: saturate(1.08) brightness(1.03); }

.entry-content .kk-routenknopf { margin: 18px 0 40px; max-width: none; }

@media (prefers-reduced-motion: reduce) {
	.entry-content .kk-lageplan img { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
	.kk-video-fassade__knopf { transition: none; }
	.kk-video-fassade__knopf:hover { transform: none; }
}