/*
 * sections.css - Bausteine, die die Patterns (Spec 8) benutzen.
 *
 * Alles reine Klassen, keine Blockabhängigkeit: Wer ein Pattern einfügt und
 * danach umbaut, verliert nichts.
 */

.kk-sektion { padding-block: var(--sektionsabstand); position: relative; z-index: 1; }

/* -- Hero ---------------------------------------------------------------- */

.kk-hero { padding-top: 64px; }
.kk-hero-bild {
	position: relative;
	height: 640px;
	overflow: hidden;
	border-radius: var(--radius-block);
	margin: 0;
}
.kk-hero-bild img { width: 100%; height: 100%; object-fit: cover; }
.kk-hero-bild::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(250, 248, 245, .06), rgba(38, 40, 44, .42));
	pointer-events: none;
}
.kk-hero-bildtext {
	position: absolute;
	left: 36px;
	bottom: 30px;
	z-index: 1;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(250, 248, 245, .9);
}

.kk-hero-text {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 60px;
	padding-block: 44px;
	border-bottom: 1px solid var(--sand-linie);
}

.kk-bildpaar {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px;
	margin-top: 44px;
}
.kk-bildpaar figure { position: relative; height: 340px; overflow: hidden; margin: 0; }
.kk-bildpaar figure:first-child { border-radius: var(--radius-karte) 0 0 var(--radius-karte); }
.kk-bildpaar figure:last-child { border-radius: 0 var(--radius-karte) var(--radius-karte) 0; }
.kk-bildpaar img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1024px) { .kk-hero-bild { height: 460px; } }
@media (max-width: 768px) {
	.kk-hero-bild { height: 320px; }
	.kk-hero-text { flex-direction: column; align-items: flex-start; gap: 28px; }
	.kk-bildpaar { grid-template-columns: 1fr; }
	.kk-bildpaar figure { height: 240px; border-radius: var(--radius-karte); }
}

/* -- Ticker -------------------------------------------------------------- */

.kk-ticker {
	border-block: 1px solid var(--sand-linie);
	padding-block: 22px;
	overflow: hidden;
	margin-top: 96px;
}
.kk-ticker-spur {
	display: flex;
	gap: 56px;
	width: max-content;
	animation: tick 38s linear infinite;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 12px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--text-leise);
}
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.kk-ticker-spur { animation: none; flex-wrap: wrap; width: auto; }
}

/* -- Dreischritt --------------------------------------------------------- */

.kk-dreischritt {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 64px;
}
.kk-schritt-nummer {
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 12px;
	letter-spacing: .22em;
	color: var(--gold-mittel);
	margin-bottom: 18px;
}
@media (max-width: 1024px) { .kk-dreischritt { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; } }
@media (max-width: 768px)  { .kk-dreischritt { grid-template-columns: 1fr; } }

/* -- Statement ----------------------------------------------------------- */

.kk-statement {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	background: var(--nacht);
	border-radius: var(--radius-block);
	overflow: hidden;
	color: #F4F1EB;
}
.kk-statement-bild { position: relative; min-height: 440px; margin: 0; }
.kk-statement-bild img { width: 100%; height: 100%; object-fit: cover; }
.kk-statement-bild::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(38, 40, 44, .12), rgba(38, 40, 44, .55));
}
.kk-statement-text { padding: clamp(32px, 4vw, 64px); }
.kk-statement-text :is(h2, h3) { color: #F4F1EB; }
.kk-statement-text .eyebrow { color: var(--gold-hell); }
.kk-kennzahlen { margin-top: 36px; }
.kk-kennzahl {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	padding: 20px 0;
	border-top: 1px solid rgba(244, 241, 235, .18);
}
.kk-kennzahl-wert { font-size: clamp(30px, 2.8vw, 40px); font-weight: 300; line-height: 1; }
.kk-kennzahl-text { font-size: 15px; color: rgba(244, 241, 235, .74); text-align: right; }
@media (max-width: 768px) { .kk-statement { grid-template-columns: 1fr; } .kk-statement-bild { min-height: 260px; } }

/* -- Schwerpunkte-Raster ------------------------------------------------- */

.kk-raster {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--sand-linie);
	border: 1px solid var(--sand-linie);
}
/*
 * Die Kartenregeln stehen in shaping.css - dort seit Spec 4 §1 neu gefasst
 * (rahmenlose Karte mit Kontur, Markenfilter statt Duoton).
 *
 * Hier stand bis zuletzt eine aeltere Fassung mit »height: 180px« und
 * Duoton. Da sections.css NACH shaping.css geladen wird, hat sie die neuen
 * Regeln stillschweigend ueberstimmt: das Bild blieb ein 180px hoher
 * Streifen, und der Farbfilter kam ueber einen zweiten Weg zurueck, obwohl
 * er abgeschaltet war.
 */

.kk-karte-nummer {
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 11.5px;
	letter-spacing: .22em;
	color: var(--gold-mittel);
	margin: 18px 0 8px;
}
.kk-karte h3 { margin: 0 0 8px; font-size: 21px; }
.kk-karte-tag { font-size: 14px; color: var(--text-leise); }

@media (max-width: 1024px) { .kk-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .kk-raster { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {  }

/* -- Methodenliste ------------------------------------------------------- */

.kk-liste { border-top: 1px solid var(--sand-linie); }
.kk-zeile {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 36px;
	padding: 44px 0;
	border-bottom: 1px solid var(--sand-linie);
	transition: padding-left .35s var(--ease);
}
.kk-zeile:hover { padding-left: 10px; }
.kk-zeile-nummer { font-size: 52px; font-weight: 300; color: #DCD5C8; line-height: 1; }
.kk-zeile h3 { margin: 0 0 12px; font-size: 26px; font-weight: 400; letter-spacing: -.01em; }
.kk-zeile p { margin: 0; font-size: 17px; max-width: 52ch; }
@media (max-width: 640px) {
	.kk-zeile { grid-template-columns: 56px minmax(0, 1fr); gap: 18px; padding: 28px 0; }
	.kk-zeile-nummer { font-size: 32px; }
}

/* -- Infusionen-Tabelle -------------------------------------------------- */

.kk-tabelle { border-top: 1px solid var(--sand-linie); }
.kk-tabellenzeile {
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr) 100px;
	gap: 32px;
	align-items: baseline;
	padding: 22px 0;
	border-bottom: 1px solid var(--sand-linie);
}
.kk-tabellenzeile .kategorie {
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gold-mittel);
}
.kk-tabellenzeile .dauer {
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 12px;
	color: var(--text-leise);
	text-align: right;
}
@media (max-width: 768px) {
	.kk-tabellenzeile { grid-template-columns: 1fr; gap: 6px; }
	.kk-tabellenzeile .dauer { text-align: left; }
}

/* -- Galerie ------------------------------------------------------------- */

.kk-galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.kk-galerie figure { margin: 0; }
.kk-galerie img { width: 100%; height: 400px; object-fit: cover; border-radius: var(--radius-karte); }
.kk-streifen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.kk-streifen img { width: 100%; height: 220px; object-fit: cover; border-radius: var(--radius-karte); }
@media (max-width: 1024px) {
	.kk-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kk-streifen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kk-galerie img { height: 300px; }
}
@media (max-width: 640px) {
	.kk-galerie, .kk-streifen { grid-template-columns: 1fr; }
}

/* -- Kontakt ------------------------------------------------------------- */

.kk-kontakt {
	background: var(--sand);
	border-radius: var(--radius-sektion) var(--radius-sektion) 0 0;
	padding: var(--sektionsabstand) var(--rand);
	margin-top: var(--sektionsabstand);
}
.kk-kontakt-raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 80px;
	max-width: var(--inhalt);
	margin: 0 auto;
}
.kk-kontaktweg {
	display: block;
	padding: 18px 0;
	border-bottom: 1px solid var(--sand-linie);
	text-decoration: none;
	color: var(--tinte);
	transition: padding-left .35s var(--ease);
}
.kk-kontaktweg:hover { padding-left: 10px; }
.kk-kontaktweg .art {
	display: block;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 10.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--text-leise);
	margin-bottom: 4px;
}
@media (max-width: 900px) { .kk-kontakt-raster { grid-template-columns: 1fr; gap: 48px; } }

/* ====================================================================== *
 * Infusionskarten (Spec Blockmodus §16, Fassung 2a »Glas auf Licht«)
 *
 * Die Attribute des Blocks setzen ausschließlich Klassen; im Markup steht
 * kein einziger Inline-Stil. Wer die Darstellung ändern will, ändert sie
 * hier – nicht im PHP.
 * ====================================================================== */

.kk-infusionen {
	position: relative;
	display: grid;
	gap: 24px;
	margin: var(--sektionsabstand) 0;
	padding: 56px var(--rand);
	border-radius: var(--radius-sektion);
	background: var(--sand);
	isolation: isolate;
}

.kk-infusionen--sp2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kk-infusionen--sp3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kk-infusionen--sp4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1180px) { .kk-infusionen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .kk-infusionen { grid-template-columns: 1fr; padding: 40px 20px; } }

/* -- Die Lichtfläche hinter den Karten ---------------------------------- */

.kk-infusionen__licht {
	position: absolute;
	inset: -10%;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(42% 38% at 22% 18%, color-mix(in oklab, var(--gold) 26%, transparent), transparent 70%),
		radial-gradient(38% 34% at 78% 72%, color-mix(in oklab, var(--gold-hell) 22%, transparent), transparent 72%);
	filter: blur(28px);
	animation: kk-licht 34s var(--ease) infinite alternate;
}

@keyframes kk-licht {
	from { transform: translate3d(-2%, -1%, 0) scale(1); }
	to   { transform: translate3d(2%, 1%, 0) scale(1.06); }
}

/* Bei »Alle Bewegung aus« bleibt die Fläche stehen – das Glas bleibt. */
body.kk-keine-bewegung .kk-infusionen__licht,
body.kk-keine-kreise .kk-infusionen__licht { animation: none; }
@media (prefers-reduced-motion: reduce) { .kk-infusionen__licht { animation: none; } }

/* -- Die dunkle Fassung ------------------------------------------------- */

.kk-infusionen--nacht { background: var(--anthrazit); }
.kk-infusionen--nacht .kk-infusion { color: var(--creme); }
.kk-infusionen--nacht .kk-infusion__name { color: #fff; }
.kk-infusionen--nacht .kk-infusion__text,
.kk-infusionen--nacht .kk-infusion__stoffe { color: rgba(250, 248, 245, .78); }

/* -- Die Karte ---------------------------------------------------------- */

.kk-infusion {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
	border: 1px solid var(--linie-hell);
	border-radius: var(--kk-radius-karte, 16px);
	background: var(--creme);
	color: var(--text);
	text-decoration: none;
	transition: border-color .35s var(--ease), transform .35s var(--ease),
		box-shadow .35s var(--ease);
}

.kk-infusion:hover {
	border-color: #C9BB9C;
	transform: translateY(-3px);
	box-shadow: 0 26px 44px -34px rgba(58, 45, 20, .5);
}
.kk-infusion:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

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

/* Milchglas – nur wo der Browser es kann. */
@supports (backdrop-filter: blur(1px)) {
	.kk-infusionen--glas .kk-infusion {
		background: rgba(250, 248, 245, .62);
		backdrop-filter: blur(16px) saturate(130%);
		-webkit-backdrop-filter: blur(16px) saturate(130%);
		border-color: rgba(255, 255, 255, .55);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
	}
	.kk-infusionen--glas.kk-infusionen--nacht .kk-infusion {
		background: rgba(38, 40, 44, .55);
		border-color: rgba(255, 255, 255, .14);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
	}
}

/* -- Die Teile der Karte ------------------------------------------------ */

.kk-infusion__bild { display: block; border-radius: 10px; overflow: hidden; }
.kk-infusion__bild img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	filter: var(--bildfilter);
}

.kk-infusion__ziel {
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 10.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--gold-mittel);
}

.kk-infusion__name {
	font-size: 22px;
	font-weight: 400;
	letter-spacing: -.014em;
	line-height: 1.22;
	color: var(--tinte);
	text-wrap: pretty;
}

.kk-infusion__text {
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--text-leise);
}

/* Stoff und Menge sind eine Zuordnung, keine Tabelle und keine Liste. */
.kk-infusion__stoffe { font-size: 14px; color: var(--text-leise); }
.kk-infusion__stoffe dl { margin: 0; }
.kk-infusion__stoff {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 5px 0;
	border-bottom: 1px solid var(--sand-linie);
}
.kk-infusion__stoff dt { font-weight: 400; }
.kk-infusion__stoff dd { margin: 0; font-variant-numeric: tabular-nums; }
.kk-infusion__rest { display: block; margin-top: 8px; font-style: italic; }

.kk-infusion__fuss {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--sand-linie);
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 11.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.kk-infusion__preis { color: var(--gold-mittel); }

/* Fakten auf der Detailseite: Überschrift über der Stoffliste */
.kk-fakten__titel {
	margin: 28px 0 8px;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gold-mittel);
}

/* ====================================================================== *
 * Abschnitte als Kacheln
 *
 * Der Text der Seite bleibt Wort für Wort stehen; hier bekommt er nur eine
 * Form. Eingeschaltet wird das je Seite im Editor unter »Darstellung« –
 * nicht durch eine Regel im Code, die irgendwann die falsche Seite trifft.
 * ====================================================================== */

.kk-kachelraster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 24px;
	margin: 40px 0 var(--sektionsabstand);
	max-width: none;
}

.kk-kachel {
	display: flex;
	flex-direction: column;
	padding: 32px;
	background: var(--creme);
	border: 1px solid var(--linie-hell);
	border-radius: var(--kk-radius-karte, 16px);
	transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.kk-kachel:hover {
	border-color: #C9BB9C;
	box-shadow: 0 26px 44px -34px rgba(58, 45, 20, .45);
}
@media (prefers-reduced-motion: reduce) { .kk-kachel { transition: none; } }

/*
 * Trägt die Überschrift Name und Preis in einem, bleibt das so. Den Preis
 * herauszulösen wäre eine Inhaltsänderung, und bei »ab 90 €« oder
 * »55 € / 75 €« ginge sie schief.
 */
.kk-kachel > h3 {
	margin: 0 0 16px;
	font-size: 21px;
	font-weight: 400;
	letter-spacing: -.012em;
	line-height: 1.3;
	color: var(--tinte);
	text-wrap: pretty;
}
.kk-kachel > h3 strong { font-weight: 400; }

.kk-kachel p {
	margin: 0 0 12px;
	max-width: none;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--text);
}

/* »Wofür?« steht fett am Satzanfang – als Marke gesetzt, nicht als Fettung */
.kk-kachel p > strong:first-child {
	display: block;
	margin-bottom: 2px;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 10.5px;
	font-weight: 400;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gold-mittel);
}

.kk-kachel ul {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
	max-width: none;
}
.kk-kachel li {
	padding: 6px 0;
	border-bottom: 1px solid var(--sand-linie);
	font-size: 14.5px;
	color: var(--text-leise);
	font-variant-numeric: tabular-nums;
}
.kk-kachel li:last-child { border-bottom: 0; }

/*
 * Der Knopf steht unten bündig, egal wie lang der Text darüber ist.
 *
 * Mit ».entry-content« und doppelter Klasse: ».kk-kachel p« setzte den
 * Außenabstand oben sonst auf 0 zurück, und die Knöpfe nebeneinander
 * stehender Kacheln standen auf verschiedener Höhe - bis zu 480 Pixel.
 */
.entry-content .kk-kachel > .kk-kachel__knopf.kk-kachel__knopf,
.kk-kachel__knopf {
	margin: auto 0 0;
	padding-top: 24px;
}
/* Gestaltet ueber .kk-knopf - hier nur die Groesse in der Kachel. */
.kk-kachel__knopf a.kk-knopf { padding: 15px 32px; font-size: 15px; }

@media (max-width: 700px) {
	.kk-kachelraster { grid-template-columns: 1fr; }
	.kk-kachel { padding: 24px; }
}

/* -- Kacheln mit Bild (seit 4.49) ---------------------------------------
 *
 * Gehört eine Unterseite zur Kachel, steht ihr Bild oben, randlos bis an
 * die Kante. Das Raster steht dann über die volle Breite, zwei Kacheln
 * nebeneinander.
 */
.kk-kachelraster:has(.hat-bild) {
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 28px;
}
.kk-kachel.hat-bild { overflow: hidden; }
.entry-content .kk-kachel__bild {
	display: block;
	margin: -32px -32px 24px;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--sand);
	background-image: none;
}
.entry-content .kk-kachel__bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	filter: var(--bildfilter);
	transition: transform .6s var(--ease);
}
.kk-kachel.hat-bild:hover .kk-kachel__bild img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
	.kk-kachel.hat-bild:hover .kk-kachel__bild img { transform: none; }
}

/* Der Titel einer ergänzten Kachel sieht aus wie die Überschrift der übrigen. */
.entry-content .kk-kachel > .kk-kachel__titel {
	margin: 0 0 16px;
	font-size: 21px;
	font-weight: 400;
	letter-spacing: -.012em;
	line-height: 1.3;
	color: var(--tinte);
}

/* Knopf und »Mehr erfahren« in einer Zeile. */
.kk-kachel.hat-bild .kk-kachel__knopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 20px;
}
.entry-content .kk-kachel__mehr.kk-kachel__mehr {
	display: inline-block;
	padding: 6px 0;
	font-size: 15px;
	color: var(--gold-tief);
	background-image: none;
	text-decoration: none;
	white-space: nowrap;
}
.entry-content .kk-kachel__mehr:hover span[aria-hidden] { margin-left: 4px; }
.kk-kachel__mehr span[aria-hidden] { transition: margin .25s var(--ease); }

@media (max-width: 700px) {
	.entry-content .kk-kachel__bild { margin: -24px -24px 20px; }
}

/* ====================================================================== *
 * Bilderkarussell
 *
 * Alle Bilder liegen übereinander; sichtbar ist das mit .ist-aktiv. Der
 * Übergang ist eine reine Deckkraft-Änderung, die langsame Bildbewegung
 * eine Animation auf transform. Beides rechnet der Browser auf der
 * Grafikkarte — alles andere ruckelt bei dieser Bildgröße.
 * ====================================================================== */

.kk-karussell {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	background: var(--sand);
	isolation: isolate;
	/* Die Werte setzt der Block je Vorkommen. */
	--kk-uebergang: 1600ms;
	--kk-standzeit: 7600ms;
}

/*
 * Das Seitenverhältnis sitzt am Rahmen, nicht an der Bühne.
 *
 * Zuerst stand es an der Bühne, zusammen mit »height: 116%« für die
 * Tiefenbewegung - und eine gesetzte Höhe hebt aspect-ratio auf. Der
 * Rahmen hält jetzt das Format, die Bühne steht oben und unten darüber
 * hinaus und hat damit Platz zum Wandern.
 */
.kk-karussell--219 { aspect-ratio: 21 / 9; }
.kk-karussell--169 { aspect-ratio: 16 / 9; }
.kk-karussell--32  { aspect-ratio: 3 / 2; }
.kk-karussell--43  { aspect-ratio: 4 / 3; }
.kk-karussell--11  { aspect-ratio: 1 / 1; }

.kk-karussell__buehne {
	position: absolute;
	inset: 0;
	will-change: transform;
}

/*
 * Der Überstand wird aus der eingestellten Stärke gerechnet, nicht fest
 * gesetzt: Er muss immer größer sein als der Ausschlag der Bewegung, sonst
 * schiebt sich beim Scrollen die Kante des Bildes ins Bild.
 *
 * Der Faktor 1,3 ist der Sicherheitsabstand. Der Ausschlag beträgt
 * höchstens Stärke × (Fensterhöhe + Bildhöhe) / 2, der Überstand
 * Stärke × 1,3 × Bildhöhe - bei üblichen Fensterhöhen reicht das.
 */
.kk-karussell.hat-tiefe .kk-karussell__buehne {
	inset: calc(var(--kk-tiefe, .18) * -130%) 0;
}

/* -- Die Spur: alle Bilder nebeneinander ------------------------------- */

/*
 * Beim Schieben liegen die Bilder nebeneinander und die Spur wandert.
 * Beim Blenden liegen sie übereinander und nur die Deckkraft wechselt.
 * Zwei Aufbauten, ein Markup.
 */
.kk-karussell__spur {
	position: absolute;
	inset: 0;
	display: flex;
	will-change: transform;
}

.kk-karussell.ist-schieben .kk-karussell__spur {
	transition: transform var(--kk-uebergang) cubic-bezier(.37, 0, .27, 1);
}

.kk-karussell.ist-blende .kk-karussell__spur { display: block; }

.kk-karussell__bild {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
}

.kk-karussell.ist-blende .kk-karussell__bild {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--kk-uebergang) cubic-bezier(.37, 0, .27, 1);
	will-change: opacity;
}
.kk-karussell.ist-blende .kk-karussell__bild.ist-aktiv { opacity: 1; z-index: 1; }

/*
 * Die Lage trägt den Versatz - sie wandert langsamer als die Spur. Genau
 * diese Differenz ist der räumliche Eindruck: der Rahmen zieht schnell
 * vorbei, das Bild darin bleibt zurück.
 */
.kk-karussell__lage {
	position: absolute;
	inset: 0;
	display: block;
	will-change: transform;
}

.kk-karussell.ist-schieben .kk-karussell__lage {
	transition: transform var(--kk-uebergang) cubic-bezier(.37, 0, .27, 1);
}

.kk-karussell__foto {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 45%;
	filter: var(--bildfilter);
	transform-origin: 50% 50%;
}

/* -- Die langsame Bildbewegung ----------------------------------------- */

/*
 * Sie läuft über die Standzeit plus den Übergang, damit sie beim Wechsel
 * nicht stehenbleibt. Jedes zweite Bild wandert in die andere Richtung -
 * sonst wirkt eine Folge wie ein einziger langer Zoom.
 */
.kk-karussell.ist-bewegt .kk-karussell__bild.laeuft .kk-karussell__foto {
	animation: kk-wandern var(--kk-standzeit) cubic-bezier(.33, 0, .5, 1) forwards;
}

.kk-karussell.ist-bewegt .kk-karussell__bild:nth-child(even).laeuft .kk-karussell__foto {
	animation-name: kk-wandern-zurueck;
}

@keyframes kk-wandern {
	from { transform: scale(1.03) translate3d(0, 0.4%, 0); }
	to   { transform: scale(1.10) translate3d(0, -0.6%, 0); }
}

@keyframes kk-wandern-zurueck {
	from { transform: scale(1.10) translate3d(0, -0.5%, 0); }
	to   { transform: scale(1.03) translate3d(0, 0.5%, 0); }
}

/* -- Pfeile -------------------------------------------------------------- */

.kk-karussell__pfeil {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 46px;
	height: 46px;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	background: rgba(250, 248, 245, .82);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	cursor: pointer;
	opacity: 0;
	transition: opacity .3s var(--ease), background .25s var(--ease);
}

.kk-karussell__pfeil--zurueck { left: 18px; }
.kk-karussell__pfeil--vor     { right: 18px; }

.kk-karussell:hover .kk-karussell__pfeil,
.kk-karussell:focus-within .kk-karussell__pfeil { opacity: 1; }
.kk-karussell__pfeil:hover { background: #fff; }
.kk-karussell__pfeil:focus-visible { opacity: 1; outline: 2px solid var(--gold); outline-offset: 3px; }

.kk-karussell__pfeil::before {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 9px; height: 9px;
	border-right: 1.5px solid var(--tinte);
	border-bottom: 1.5px solid var(--tinte);
}
.kk-karussell__pfeil--vor::before     { transform: translate(-65%, -50%) rotate(-45deg); }
.kk-karussell__pfeil--zurueck::before { transform: translate(-35%, -50%) rotate(135deg); }

/* Auf Geräten ohne Zeiger sind die Pfeile dauerhaft da. */
@media (hover: none) {
	.kk-karussell__pfeil { opacity: 1; }
}

/* -- Punkte -------------------------------------------------------------- */

.kk-karussell__punkte {
	position: absolute;
	left: 0; right: 0; bottom: 18px;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 9px;
}

.kk-karussell__punkt {
	width: 8px; height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(250, 248, 245, .55);
	cursor: pointer;
	transition: background .25s var(--ease), width .3s var(--ease);
}
.kk-karussell__punkt.ist-aktiv { background: var(--creme); width: 22px; border-radius: 4px; }
.kk-karussell__punkt:focus-visible { outline: 2px solid var(--creme); outline-offset: 3px; }

/* -- Beschriftung -------------------------------------------------------- */

.kk-karussell__beschriftung {
	margin: 12px 0 0;
	font-size: 14px;
	color: var(--text-leise);
	min-height: 1.4em;
}

/* -- Ruhe ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.kk-karussell__bild { transition: none; }
	.kk-karussell .kk-karussell__foto { animation: none !important; transform: none !important; }
	.kk-karussell__spur, .kk-karussell__lage { transition: none !important; }
	.kk-karussell .kk-karussell__buehne { transform: none !important; inset: 0; }
}

body.kk-keine-bewegung .kk-karussell__foto { animation: none !important; transform: none !important; }
body.kk-keine-bewegung .kk-karussell__buehne { transform: none !important; inset: 0; }

/*
 * Auf schmalen Geräten kein Überstand und keine Tiefe beim Scrollen.
 *
 * Die Adressleiste fährt dort beim Scrollen ein und aus; die Fensterhöhe
 * ändert sich dabei, und mit ihr der Bezugspunkt der Rechnung. Das Bild
 * springt dann. Der Effekt beim Bildwechsel bleibt - der hängt nicht am
 * Scrollen.
 */
@media (max-width: 900px) {
	.kk-karussell.hat-tiefe .kk-karussell__buehne { inset: 0; }
}

@media (max-width: 600px) {
	.kk-karussell__pfeil { width: 38px; height: 38px; }
	.kk-karussell__pfeil--zurueck { left: 10px; }
	.kk-karussell__pfeil--vor { right: 10px; }
}

/* ======================================================================= *
 * Eigene Blöcke im Fließtext: die Lesespalte verlassen
 * ======================================================================= */

/*
 * Die Breite regelt jetzt shaping.php: Ein Abschnitt, in dem ein breiter
 * Block steht, bekommt dort »kk-abschnitt--eigen kk-abschnitt--breit« und
 * fällt damit aus dem Rhythmus für Fließtext heraus. Die frühere Regel mit
 * :has() an dieser Stelle ist entfallen - zwei Mechanismen für dieselbe
 * Sache waren einer zu viel, und der Wettlauf um die Spezifität mit
 * :nth-of-type() war nicht zu gewinnen, sondern nur zu vermeiden.
 *
 * Erweitert wird die Liste in kissel_breite_bloecke() in shaping.php.
 */

.entry-content .wp-block-kissel-patientenstimmen {
	text-align: left;
}

/*
 * Noch breiter - wenn im Editor oben in der Werkzeugleiste »Breite
 * Ansicht« gewählt ist.
 *
 * Der Block wächst dann über die Inhaltsspalte hinaus bis fast an den Rand
 * des Hauptbereichs. Gerechnet wird gegen die Mitte des Elternteils, damit
 * er mittig bleibt, egal wie breit die Spalte darum gerade ist.
 */
.entry-content .wp-block-kissel-patientenstimmen.alignwide {
	--kk-breit: min(1400px, calc(100vw - 40px));

	width: var(--kk-breit);
	max-width: none;
	margin-inline: calc(50% - var(--kk-breit) / 2);
}

/* Unterhalb der Inhaltsbreite gäbe es nichts zu gewinnen - dort steht der
   Block ohnehin schon so breit wie die Spalte. */
@media (max-width: 1280px) {
	.entry-content .wp-block-kissel-patientenstimmen.alignwide {
		width: auto;
		margin-inline: 0;
	}
}

/*
 * Die Überschrift des Blocks steht links, nicht mittig.
 *
 * Zwei Regeln stehen dem im Weg, beide aus shaping.css und beide für
 * Fließtext richtig: `.entry-content h2` kappt jede Überschrift auf 26
 * Zeichen, und der schmale Abschnitt zentriert diesen gekappten Kasten mit
 * `margin-inline: auto`. Das Ergebnis war eine linksbündige Überschrift in
 * einem mittig stehenden Kasten - sie rückte um 52 Pixel ein.
 *
 * Drei Klassen, weil die Regeln des Rhythmus in shaping.css zwei wiegen.
 */
.entry-content .kk-stimmen .kk-stimmen__titel {
	max-width: none;
	margin-inline: 0;
	text-align: left;
}

/*
 * Die Figuren im Karussell tragen keinen Abstand.
 *
 * ».kk-karussell__bild { margin: 0 }« steht weiter oben, wiegt aber nur
 * 0,1,0 - und ».entry-content figure { margin: 2.4em 0 }« wiegt 0,1,1 und
 * gewinnt. Das Ergebnis waren 39 Pixel Luft ueber dem Foto, gemessen bei
 * 16px Schriftgroesse.
 *
 * Auf breiten Bildschirmen fiel das nicht auf: Dort ragt die Buehne ueber
 * den Rahmen hinaus und schluckt den Abstand. Auf dem Telefon steht sie
 * buendig - und das Bild rutschte sichtbar nach unten, oben blieb ein
 * Streifen.
 */
.entry-content .kk-karussell figure,
.entry-content .kk-karussell__bild { margin: 0; }

/* ======================================================================= *
 * Empfehlungen: Bücher, DVDs und Artikel (Block »kissel/empfehlungen«)
 *
 * Zurückhaltend gesetzt: kein Kasten, eine feine Linie zwischen den
 * Einträgen, die Hülle klein links neben dem Text, Schrift eine Stufe unter
 * dem Fließtext.
 *
 * Jede Regel beginnt mit ».entry-content«, und das ist hier der Kern der
 * Sache. Der Block steht im Seiteninhalt, und dort gelten die allgemeinen
 * Regeln für Absätze und Listen mit dem Gewicht 0,1,1 - 18 Pixel Schrift,
 * 1,35 Zeilen Abstand nach jedem Absatz, 1,3 Geviert Einrückung für jede
 * Liste. Eine Regel wie ».kk-empfehlung__art« wiegt nur 0,1,0 und verlor:
 * Gemessen stand die kleine Kennzeichnung »BUCH« in 18 statt 10 Pixeln mit
 * 24 Pixeln Luft darunter, und die Liste war eingerückt. Das waren rund
 * 50 Pixel je Eintrag, die niemand wollte - ein guter Teil dessen, was die
 * Empfehlungen so viel Raum nehmen ließ.
 * ======================================================================= */

.entry-content .kk-empfehlungen {
	margin-block: 1.6em;
	max-width: none;
}

/* Eine eigene Überschrift im Block ist die Ausnahme - und dann eine kleine. */
.entry-content .kk-empfehlungen__ueberschrift {
	margin: 0 0 .4em;
	font-size: clamp(20px, 1.8vw, 24px);
	max-width: none;
}

.entry-content .kk-empfehlungen__einleitung {
	margin: 0 0 .8em;
	font-size: 16px;
	line-height: 1.6;
	color: var(--text-leise);
}

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

/* -- Ein Eintrag --------------------------------------------------------- */

.entry-content .kk-empfehlung {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin: 0;
	padding: 12px 0;
	border-top: 1px solid var(--sand-linie);
	font-size: 15px;
	line-height: 1.5;
}

.entry-content .kk-empfehlung__umschlag {
	flex: none;
	width: 48px;
	margin: 2px 0 0;
}
.entry-content .kk-empfehlung__umschlag img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border-radius: 2px;
	box-shadow: 0 4px 10px -6px rgba(58, 45, 20, .5);
	filter: none;
}

/*
 * Der Textteil als umbrechende Reihe: Kennzeichnung und Titel je eine
 * ganze Zeile, darunter Autor und Link NEBENEINANDER, die Notiz zuletzt.
 * Im Markup steht die Notiz vor dem Link; »order« stellt sie ans Ende,
 * ohne dass sich an der Reihenfolge für Vorleseprogramme etwas ändert -
 * die lesen Titel, Autor, Notiz, Link, wie es sinnvoll ist.
 */
.entry-content .kk-empfehlung__text {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 12px;
	min-width: 0;
}
.entry-content .kk-empfehlung__art    { order: 1; flex-basis: 100%; }
.entry-content .kk-empfehlung__titel  { order: 2; flex-basis: 100%; }
.entry-content .kk-empfehlung__von    { order: 3; }
.entry-content .kk-empfehlung__link   { order: 4; }
.entry-content .kk-empfehlung__notiz  { order: 5; flex-basis: 100%; }

.entry-content .kk-empfehlung__art {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 2px;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 10px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gold-mittel);
	max-width: none;
}

/*
 * »Anzeige« ist Pflicht bei Werbelinks (§ 5a Abs. 4 UWG) und muss
 * erkennbar bleiben - kleiner ja, weg nie.
 */
.entry-content .kk-empfehlung__anzeige {
	padding: 0 7px;
	border: 1px solid var(--sand-linie);
	border-radius: var(--radius-pill);
	font-size: 9.5px;
	letter-spacing: .1em;
	color: var(--text-leise);
}

.entry-content .kk-empfehlung__titel {
	margin: 0 0 2px;
	font-size: 16.5px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -.005em;
	color: var(--tinte);
	max-width: none;
}

.entry-content .kk-empfehlung__von {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-leise);
	max-width: none;
}

.entry-content .kk-empfehlung__link {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	max-width: none;
}

.entry-content .kk-empfehlung__notiz {
	margin: 4px 0 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--text);
	max-width: var(--lesebreite);
}

/* -- Zwei nebeneinander ------------------------------------------------- */

.entry-content .kk-empfehlungen--karten .kk-empfehlungen__liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	column-gap: 32px;
}

/* -- Einer unter dem anderen -------------------------------------------- */

.entry-content .kk-empfehlungen--liste .kk-empfehlung:last-child {
	border-bottom: 1px solid var(--sand-linie);
}
.entry-content .kk-empfehlungen--liste .kk-empfehlung__text { max-width: var(--lesebreite); }

/* ====================================================================== *
 * Reiter (seit 4.52)
 *
 * Zwei oder drei Abschnitte, die man nacheinander liest, stehen an
 * derselben Stelle. Der erste hat den Vortritt. Gebaut in reiter.js; ohne
 * JavaScript steht alles untereinander, wie vorher.
 * ====================================================================== */

.kk-reiter {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0 40px;
	padding-bottom: 0;
	border-bottom: 1px solid var(--sand-linie);
}

.kk-reiter__knopf {
	position: relative;
	bottom: -1px;
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: 12px 4px 14px;
	margin-right: 28px;
	font-family: inherit;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--text-leise);
	cursor: pointer;
	transition: color .25s var(--ease), border-color .25s var(--ease);
}
.kk-reiter__knopf:last-child { margin-right: 0; }
.kk-reiter__knopf:hover { color: var(--gold-tief); }
.kk-reiter__knopf.ist-aktiv {
	color: var(--tinte);
	border-bottom-color: var(--gold);
}
.kk-reiter__knopf:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
	border-radius: 4px;
}

/*
 * Im Reiterfeld beginnt der Inhalt oben - die Überschrift steht am Reiter.
 * Auch die Abschnittsnummer entfällt: Sie zählt die Abschnitte einer
 * durchlaufenden Seite, und hier liegen sie übereinander.
 */
.entry-content .kk-abschnitt.kk-reiter__feld { margin-top: 0; padding-top: 0; }
.entry-content .kk-reiter__feld > .kk-abschnitt__kopf { margin-bottom: 0; }
.entry-content .kk-reiter__feld > .kk-abschnitt__kopf::before { content: none; }

@media (max-width: 600px) {
	.kk-reiter__knopf { font-size: 16px; margin-right: 18px; }
}

/* ====================================================================== *
 * Mitgliedschaften: Siegel mit Erklaerung
 * ====================================================================== */

.entry-content .kk-mitgliedschaften { gap: 44px; margin-block: 8px 0; }
.entry-content .kk-mitgliedschaft .wp-block-image,
.entry-content .kk-mitgliedschaften figure.wp-block-image {
	margin: 0 0 18px;
	max-width: none;
}
.entry-content .kk-mitgliedschaften figure.wp-block-image img {
	width: auto;
	height: 58px;
	max-width: 190px;
	object-fit: contain;
	object-position: left center;
	aspect-ratio: auto;
	border-radius: 0;
	filter: none;
}
.entry-content .kk-mitgliedschaften h3 {
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--tinte);
}
.entry-content .kk-mitgliedschaften p { margin: 0; font-size: 16px; }


/* ====================================================================== *
 * Kennzahlen (seit 4.54)
 *
 * Drei Zahlen nebeneinander, getrennt durch feine Linien. Die Zahl gross
 * und leicht, die Beschriftung klein und leise - wie die Preiszeile in der
 * Infusionskarte, damit beides zusammengehoert.
 * ====================================================================== */

.entry-content .kk-kennzahlen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 28px 48px;
	margin: var(--sektionsabstand) 0;
	padding: 44px 0 4px;
	border-top: 1px solid var(--sand-linie);
	max-width: none;
}

/* »display: block«: Der Absatzstil ».is-style-kennzahl« in content.css
   trifft dieselbe Klasse und macht daraus sonst eine Zeile. */
.entry-content .kk-kennzahl { position: relative; display: block; }

/* Eine Haarlinie zwischen den Zahlen, aber nicht vor der ersten. */
@media (min-width: 760px) {
	.kk-kennzahl + .kk-kennzahl::before {
		content: "";
		position: absolute;
		left: -24px;
		top: 4px;
		bottom: 8px;
		width: 1px;
		background: var(--sand-linie);
	}
}

.entry-content .kk-kennzahl__wert {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 10px;
	max-width: none;
	font-size: clamp(38px, 4.4vw, 58px);
	font-weight: 200;
	line-height: 1;
	letter-spacing: -.03em;
	/* Gold, und zwar der dunkle Ton: Auf Creme trägt er auch bei leichter
	   Schrift genug Kontrast (4,9:1), das helle Gold nicht. */
	color: var(--gold-tief);
	font-variant-numeric: tabular-nums;
}

.kk-kennzahl__vorsatz,
.kk-kennzahl__nachsatz {
	font-size: clamp(17px, 1.5vw, 21px);
	font-weight: 300;
	letter-spacing: 0;
	color: var(--gold-mittel);
}

.entry-content .kk-kennzahl__text {
	margin: 0;
	max-width: 22ch;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 11.5px;
	line-height: 1.6;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--text-leise);
}

@media (max-width: 600px) {
	.entry-content .kk-kennzahlen {
		gap: 26px;
		margin: 72px 0;
		padding-top: 32px;
	}
	.entry-content .kk-kennzahl__wert { font-size: 40px; }
}

/*
 * Auf dem Telefon untereinander und mittig.
 *
 * Das Raster bricht von selbst auf eine Spalte um, aber erst unter etwa
 * 526 Pixeln; davor stehen zwei Spalten zu gut 210 Pixeln nebeneinander,
 * was für die Beschriftung zu eng wird. Deshalb hier ausdrücklich eine
 * Spalte - und weil eine einzelne Zahl linksbündig verloren aussieht,
 * rückt alles in die Mitte.
 *
 * Die Zahl selbst ist ein Flexkasten (Vorsatz, Ziffer, Nachsatz auf
 * gemeinsamer Grundlinie); »text-align« allein erreicht sie nicht, sie
 * braucht »justify-content«. Und der Beschriftungstext hat eine
 * Breitenbegrenzung von 22 Zeichen, die ohne »margin-inline: auto« am
 * linken Rand kleben bliebe.
 */
@media (max-width: 560px) {
	.entry-content .kk-kennzahlen {
		grid-template-columns: 1fr;
		gap: 0;
		padding-top: 28px;
	}

	/* Statt Abstand eine Haarlinie zwischen den Zahlen - wie am Computer,
	   nur liegend. Ohne sie zerfiel der Block in drei lose Zeilen. */
	.entry-content .kk-kennzahl { text-align: center; padding: 18px 0; }
	.entry-content .kk-kennzahl + .kk-kennzahl { border-top: 1px solid var(--sand-linie); }

	.entry-content .kk-kennzahl__wert { justify-content: center; margin-bottom: 6px; }

	/*
	 * »text-align« muss hier am Absatz selbst stehen: In shaping.css setzt
	 * ».entry-content p« linksbündig, und eine Angabe am Element schlägt
	 * jede Vererbung vom Elternteil - die Zahl war zentriert, die
	 * Beschriftung darunter blieb links.
	 */
	.entry-content .kk-kennzahl__text {
		text-align: center;
		margin-inline: auto;
		max-width: 26ch;
	}
}