/*
 * Eigene Story „Langsam mit den jungen Teigen.“ – Namensraum .koeck-teige, Präfix kt-.
 * Vorlage template-parts/stories/eigen/teige.php (+ teige-grafik.php), Script js/stories/teige.js.
 * Eine Story, die sich Zeit lässt: weiß wie die Heftseite, Reportage „Gehzeit“ in Schwarz-Weiß, Köck-Raster grün (#b0c7a6)
 * als Marker und Spur des Teigs, ein kühles Blau nur für die kühle Gare, ein warmes Orange nur für den üblichen Gärraum.
 * Handy zuerst; ab 1000 px zweispaltig. Bewegung nur über transform, opacity und clip-path; die Bewegungen sind
 * absichtlich langsam (Thema), Bedienung bleibt sofort. „Bewegung reduzieren“ zeigt alles fertig und still.
 */
.koeck-teige {
	--kt-ink: #111;
	--kt-grau: #50566a;    /* Nebentexte auf Weiß: 7,2:1 */
	--kt-gruen: #b0c7a6;   /* Köck-Raster grün */
	--kt-gruen-d: #4f6b44; /* Grün für Schrift/Linien auf Weiß: 6,0:1 */
	--kt-gruen-h: #eef3eb; /* Fläche Gut zu wissen */
	--kt-kalt: #345f7c;    /* kühle Gare: 6,1:1 auf ihrer Fläche */
	--kt-kalt-h: #e8f0f5;
	--kt-warm: #8f4616;    /* üblicher Gärraum: 6,0:1 auf ihrer Fläche */
	--kt-warm-h: #f8ece2;
	--kt-teig: #f4efe5;
	--kt-rand: 20px;
	--kt-abstand: 104px;
	--kt-text: 26em;       /* ca. 65–72 Zeichen (schmale Schrift) */
	--kt-ease: cubic-bezier(.23, 1, .32, 1);
	--kt-ease-io: cubic-bezier(.77, 0, .175, 1);
	background: #fff; color: var(--kt-ink);
	font: 400 18px/1.6 var(--sans); -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
	overflow-x: clip;
}
.koeck-teige p, .koeck-teige figure, .koeck-teige h1, .koeck-teige h2, .koeck-teige h3, .koeck-teige ol, .koeck-teige dl, .koeck-teige dd, .koeck-teige blockquote { margin: 0; padding: 0; }
.koeck-teige ol { list-style: none; }
.koeck-teige img { display: block; width: 100%; height: auto; }
.koeck-teige .sm-naechste img { height: 100%; }
.koeck-teige a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.koeck-teige svg { display: block; overflow: visible; }
.koeck-teige .kt-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.koeck-teige .kt-strich { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.koeck-teige .kt-fein { stroke-width: 2; }
.koeck-teige .kt-punkt { fill: currentColor; }
@media (min-width: 600px) { .koeck-teige { --kt-rand: 40px; --kt-abstand: 136px; } }
@media (min-width: 1000px) { .koeck-teige { --kt-rand: clamp(48px, 5.5vw, 96px); --kt-abstand: 168px; font-size: 19px; } }

.koeck-teige .kt-h { font: 300 clamp(32px, 8.6vw, 60px)/1.04 var(--serif); letter-spacing: -.01em; text-wrap: balance; margin-bottom: 24px; }
.koeck-teige .kt-h3 { font: 400 clamp(26px, 6.6vw, 38px)/1.1 var(--serif); text-wrap: balance; margin-bottom: 20px; }
.koeck-teige .kt-spalte { padding: 0 var(--kt-rand); max-width: calc(var(--kt-text) + 2 * var(--kt-rand)); box-sizing: border-box; }
.koeck-teige .kt-spalte p + p { margin-top: 1em; }

/* Einblenden beim Hineinscrollen – ruhig, ein wenig langsamer als üblich */
.koeck-teige [data-kt-auf] { transition: opacity 1.1s var(--kt-ease), transform 1.4s var(--kt-ease); transition-delay: calc(var(--sm-stufe, 0) * 100ms); } /* ruhig, ab 75 % der Höhe, geht beim Zurückscrollen wieder (1.57.0) */
.koeck-teige.kt-js:not(.kt-da) [data-kt-auf]:not(.kt-auf), .koeck-teige.kt-lauf [data-kt-auf]:not(.kt-auf) { opacity: 0; transform: translateY(18px); }
.koeck-teige.kt-lauf [data-kt-auf]:not(.kt-auf) { transition-duration: .45s, .6s; transition-delay: 0s; } /* zurück: zügiger als hinein (Emil: asymmetrisch) */

/* ---------- 1 · Einstieg ---------- */
.koeck-teige .kt-held { padding-bottom: 56px; }
.koeck-teige .kt-held-bild { position: relative; aspect-ratio: 4 / 4.4; max-height: 74svh; width: 100%; overflow: hidden; background: #1a1a1a; }
.koeck-teige .kt-held-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 26% 30%; filter: grayscale(1); }
@media (orientation: landscape) and (max-width: 999px) { .koeck-teige .kt-held-bild img { object-position: 26% 14%; } }
/* das Licht kommt langsam: eine dunkle Schicht weicht */
.koeck-teige .kt-held-dunkel { position: absolute; inset: 0; background: #0b0b0b; opacity: 0; pointer-events: none; }
.koeck-teige.kt-js .kt-held-dunkel { opacity: .62; transition: opacity 1.8s cubic-bezier(.33, 0, .2, 1) .1s; }
.koeck-teige.kt-js.kt-start .kt-held-dunkel, .koeck-teige.kt-js.kt-da .kt-held-dunkel { opacity: 0; }
.koeck-teige .kt-held-text { padding: 32px var(--kt-rand) 0; }
.koeck-teige .kt-titel { font: 300 clamp(40px, 11.6vw, 112px)/.98 var(--serif); letter-spacing: -.012em; text-wrap: balance; }
.koeck-teige .kt-lang { display: inline-block; white-space: nowrap; }
.koeck-teige .kt-lang span { display: inline-block; }
/* „Langsam“ steht zuerst weit auseinander und rückt in Ruhe zusammen */
.koeck-teige.kt-js .kt-lang span { transform: translateX(calc(var(--kt-i) * .2em)); opacity: .35; transition: transform 2.8s var(--kt-ease) .5s, opacity 1.6s var(--kt-ease) .5s; }
.koeck-teige.kt-js.kt-start .kt-lang span, .koeck-teige.kt-js.kt-da .kt-lang span { transform: none; opacity: 1; }
.koeck-teige .kt-vor { margin-top: 24px; max-width: var(--kt-text); font-size: 19px; line-height: 1.55; }
.koeck-teige.kt-js .kt-vor { opacity: 0; transform: translateY(12px); transition: opacity 1s var(--kt-ease) 1.4s, transform 1.2s var(--kt-ease) 1.4s; }
.koeck-teige.kt-js.kt-start .kt-vor, .koeck-teige.kt-js.kt-da .kt-vor { opacity: 1; transform: none; }

@media (min-width: 1000px) {
	.koeck-teige .kt-held { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 clamp(40px, 4.5vw, 88px); align-items: end; padding: 0 var(--kt-rand) 0 0; min-height: 100svh; box-sizing: border-box; margin-bottom: 96px; }
	.koeck-teige .kt-held-bild { aspect-ratio: auto; height: 100svh; max-height: none; }
	.koeck-teige .kt-held-text { padding: 0 0 clamp(40px, 8svh, 96px); }
	.koeck-teige .kt-titel { font-size: clamp(56px, 5.4vw, 112px); }
	.koeck-teige .kt-vor { font-size: clamp(18px, 1.25vw, 22px); }
}

/* ---------- 2 · Zwei Spuren ---------- */
.koeck-teige .kt-spuren { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin: 16px var(--kt-rand) var(--kt-abstand); max-width: 760px; }
.koeck-teige .kt-spur { position: relative; padding-left: 22px; }
.koeck-teige .kt-spur-kopf { font: 600 16px/1.2 var(--sans); color: var(--kt-grau); margin: 0 0 20px; }
.koeck-teige .kt-spur--teig .kt-spur-kopf { color: var(--kt-gruen-d); }
.koeck-teige .kt-spur li { position: relative; min-height: 5.2em; font: 300 clamp(18px, 5vw, 26px)/1.18 var(--serif); color: #6d717c; transition: color .8s var(--kt-ease); }
.koeck-teige .kt-spur li::before { content: ""; position: absolute; left: -27px; top: .32em; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #c9ccd3; transition: background-color .6s var(--kt-ease), box-shadow .6s var(--kt-ease); }
.koeck-teige .kt-spur li.kt-hier { color: var(--kt-ink); }
.koeck-teige .kt-spur--story li.kt-hier::before { background: var(--kt-ink); box-shadow: inset 0 0 0 2px var(--kt-ink); }
.koeck-teige .kt-spur--teig li.kt-hier::before { background: var(--kt-gruen); box-shadow: inset 0 0 0 2px var(--kt-gruen-d); }
.koeck-teige .kt-spur li:last-child { min-height: 0; }
.koeck-teige .kt-spur-linie { display: none; position: absolute; left: 5px; top: 0; width: 2px; background: #e4e6ea; } /* Lage setzt teige.js */
.koeck-teige.kt-lauf .kt-spur-linie { display: block; }
.koeck-teige .kt-spur li { z-index: 1; }
.koeck-teige .kt-spur-linie b { position: absolute; inset: 0; background: var(--kt-ink); transform-origin: 50% 0; transform: scaleY(var(--kt-p0, 0)); }
.koeck-teige .kt-spur--teig .kt-spur-linie b { background: var(--kt-gruen-d); }
.koeck-teige:not(.kt-lauf) .kt-spur li { color: var(--kt-ink); }
.koeck-teige:not(.kt-lauf) .kt-spur-linie b { transform: none; }
@media (min-width: 1000px) { .koeck-teige .kt-spuren { margin-left: auto; margin-right: auto; gap: 0 80px; } }

/* ---------- 3 · Geduld und die 24 ---------- */
.koeck-teige .kt-geduld { padding: 0 var(--kt-rand); margin-bottom: var(--kt-abstand); display: grid; gap: 40px; }
.koeck-teige .kt-erst { max-width: var(--kt-text); font-size: clamp(19px, 2vw, 22px); line-height: 1.55; }
.koeck-teige .kt-24 { display: flex; flex-direction: column; gap: 10px; }
.koeck-teige .kt-24-zahl { display: block; width: max-content; font: 300 clamp(150px, 46vw, 300px)/.8 var(--serif); letter-spacing: -.03em; color: var(--kt-ink); }
.koeck-teige .kt-24-text { font: 400 16px/1.4 var(--sans); color: var(--kt-grau); max-width: 18em; }
/* die Zahl zeichnet sich – deutlich langsamer als alles andere */
.koeck-teige.kt-lauf .kt-24-zahl { clip-path: inset(0 100% 0 0); } /* teige.js zeichnet sie beim Scrollen (1.57.0) */
@media (min-width: 1000px) {
	.koeck-teige .kt-geduld { grid-template-columns: minmax(0, var(--kt-text)) auto; justify-content: space-between; align-items: end; gap: 80px; }
}

/* ---------- 4 · Kalt gestellt ---------- */
.koeck-teige .kt-kalt { padding: 0 var(--kt-rand); margin-bottom: var(--kt-abstand); }
.koeck-teige .kt-vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 32px; }
.koeck-teige .kt-v { border-radius: 4px; padding: 16px 14px 18px; display: flex; flex-direction: column; min-width: 0; }
.koeck-teige .kt-v--warm { background: var(--kt-warm-h); color: var(--kt-warm); }
.koeck-teige .kt-v--kalt { background: var(--kt-kalt-h); color: var(--kt-kalt); }
.koeck-teige .kt-v figcaption { font: 600 15px/1.25 var(--sans); min-height: 2.5em; }
.koeck-teige .kt-v-teig { display: block; margin: 18px 0 14px; color: var(--kt-ink); }
.koeck-teige .kt-svg-teigling { width: 100%; max-width: 220px; height: auto; margin-inline: auto; }
.koeck-teige .kt-teig { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(var(--kt-s, 1)); }
.koeck-teige .kt-teig-f { fill: var(--kt-teig); }
.koeck-teige .kt-blech-d { stroke-width: 1.6; opacity: .45; }
.koeck-teige .kt-v dl div { padding: 7px 0; border-top: 1px solid currentColor; border-top-color: color-mix(in srgb, currentColor 22%, transparent); }
.koeck-teige .kt-v dt { font: 400 14px/1.3 var(--sans); color: var(--kt-grau); }
.koeck-teige .kt-v dd { font: 400 clamp(17px, 4.6vw, 22px)/1.2 var(--serif); color: var(--kt-ink); }
.koeck-teige .kt-v--warm dd:first-of-type, .koeck-teige .kt-v--kalt dd:first-of-type { color: inherit; }
.koeck-teige .kt-v dl div:first-child dd { font-size: clamp(26px, 7.6vw, 40px); color: inherit; }
.koeck-teige .kt-kalt-text { max-width: var(--kt-text); margin-bottom: 64px; }
.koeck-teige .kt-schritte { display: grid; gap: 28px; counter-reset: kt; }
.koeck-teige .kt-schritte li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; }
.koeck-teige .kt-ico { width: 56px; height: 56px; color: var(--kt-ink); padding: 4px; box-sizing: border-box; background: var(--kt-gruen-h); border-radius: 50%; }
.koeck-teige .kt-schritte strong { display: block; font: 400 21px/1.2 var(--serif); margin-bottom: 4px; }
@media (min-width: 700px) { .koeck-teige .kt-schritte { grid-template-columns: 1fr 1fr; gap: 40px 48px; } }
@media (min-width: 1000px) {
	.koeck-teige .kt-kalt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "h h" "t v" "h3 h3" "s s"; gap: 0 clamp(48px, 6vw, 120px); align-items: start; }
	.koeck-teige .kt-kalt > .kt-h { grid-area: h; }
	.koeck-teige .kt-vergleich { grid-area: v; margin: 0; gap: 16px; }
	.koeck-teige .kt-v { padding: 24px 22px 26px; }
	.koeck-teige .kt-kalt-text { grid-area: t; margin: 0; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.55; }
	.koeck-teige .kt-kalt > .kt-h3 { grid-area: h3; margin-top: 120px; }
	.koeck-teige .kt-schritte { grid-area: s; grid-template-columns: repeat(4, 1fr); gap: 40px; }
	.koeck-teige .kt-schritte li { grid-template-columns: 1fr; }
	.koeck-teige .kt-ico { width: 72px; height: 72px; padding: 8px; }
}

/* ---------- 5 · Daumenkino: die Hand reicht den Teigling entgegen ---------- */
.koeck-teige .kt-pionier { margin-bottom: var(--kt-abstand); }
.koeck-teige .kt-daumen { position: relative; height: 210svh; }
.koeck-teige .kt-daumen--still, .koeck-teige:not(.kt-lauf) .kt-daumen { height: auto; }
.koeck-teige .kt-daumen-buehne { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: max(64px, env(safe-area-inset-top)) 0 28px; box-sizing: border-box; }
.koeck-teige .kt-daumen--still .kt-daumen-buehne, .koeck-teige:not(.kt-lauf) .kt-daumen-buehne { position: static; height: auto; }
.koeck-teige .kt-daumen-bild { position: relative; flex: 0 1 auto; height: min(56svh, 125vw); min-height: 220px; overflow: hidden; background: #1a1a1a; }
.koeck-teige .kt-fr { position: absolute; inset: 0; opacity: 0; transition: opacity .32s ease; }
.koeck-teige .kt-fr--an { opacity: 1; }
.koeck-teige .kt-fr img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; filter: grayscale(1); }
.koeck-teige .kt-daumen-text { padding: 0 var(--kt-rand); }
.koeck-teige .kt-daumen-text .kt-h { margin-bottom: 14px; }
.koeck-teige .kt-calm { font: italic 300 clamp(26px, 7.4vw, 56px)/1.08 var(--serif); color: var(--kt-gruen-d); text-wrap: balance; }
.koeck-teige .kt-pionier > .kt-spalte { margin-top: 48px; }
@media (min-width: 1000px) {
	.koeck-teige .kt-daumen { height: 220svh; }
	.koeck-teige .kt-daumen-buehne { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 0 clamp(40px, 5vw, 96px); padding: 72px var(--kt-rand) 48px; }
	.koeck-teige .kt-daumen-bild { height: min(78svh, 46vw); }
	.koeck-teige .kt-daumen-text { padding: 0; }
	.koeck-teige .kt-pionier > .kt-spalte { margin-top: 72px; margin-left: calc(var(--kt-rand) + (100% - 2 * var(--kt-rand)) * 7 / 12 + clamp(40px, 5vw, 96px) * 7 / 12); }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 999px) {
	.koeck-teige .kt-daumen-buehne { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 0 24px; padding: 56px var(--kt-rand) 16px; }
	.koeck-teige .kt-daumen-bild { height: calc(100svh - 72px); min-height: 0; }
	.koeck-teige .kt-daumen-text { padding: 0; }
	.koeck-teige .kt-daumen-text .kt-h { font-size: 30px; }
	.koeck-teige .kt-calm { font-size: 26px; }
}

/* Gut zu wissen: FODMAPs */
.koeck-teige .kt-fodmap { margin: 56px var(--kt-rand) 0; padding: 28px 22px 30px; background: var(--kt-gruen-h); border-radius: 4px; display: grid; gap: 28px; max-width: 980px; }
.koeck-teige .kt-fm-text p { font-size: 17px; line-height: 1.6; max-width: var(--kt-text); }
.koeck-teige .kt-fm-link { display: inline-flex; align-items: center; gap: .35em; min-height: 44px; margin-top: 10px; color: var(--kt-gruen-d); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.koeck-teige .kt-fm-link:focus-visible { outline: 2px solid var(--kt-gruen-d); outline-offset: 3px; border-radius: 2px; }
.koeck-teige .kt-fm-link { transition: opacity 120ms ease-out; -webkit-user-select: none; user-select: none; }
.koeck-teige .kt-fm-link:active { opacity: .6; } /* Rückmeldung beim Antippen */
.koeck-teige .kt-fm-grafik { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 18px; align-items: end; }
.koeck-teige .kt-fm-saeule { grid-row: 1 / span 2; position: relative; height: 150px; border-bottom: 2px solid var(--kt-ink); }
.koeck-teige .kt-fm-saeule i { position: absolute; left: 8px; right: 8px; bottom: 0; height: 100%; background: #d4e0ce; } /* so hoch war es vorher */
.koeck-teige .kt-fm-saeule b { z-index: 1; position: absolute; left: 8px; right: 8px; bottom: 0; height: 100%; background: var(--kt-gruen-d); transform-origin: 50% 100%; transform: scaleY(.25); }
.koeck-teige.kt-lauf .kt-fm-saeule b { transform: scaleY(1); } /* teige.js lässt sie beim Scrollen sinken (1.57.0) */
.koeck-teige .kt-fm-wert { font: 300 clamp(34px, 9vw, 52px)/1 var(--serif); color: var(--kt-gruen-d); white-space: nowrap; }
.koeck-teige .kt-fm-was { font: 400 14px/1.3 var(--sans); color: var(--kt-grau); padding-bottom: 2px; }
@media (min-width: 700px) {
	.koeck-teige .kt-fodmap { grid-template-columns: minmax(0, 1fr) 260px; align-items: center; gap: 48px; padding: 40px 44px; }
	.koeck-teige .kt-fm-grafik { grid-template-columns: 1fr; justify-items: start; row-gap: 10px; }
	.koeck-teige .kt-fm-saeule { grid-row: auto; width: 88px; height: 200px; }
}
@media (min-width: 1000px) { .koeck-teige .kt-fodmap { margin: 96px auto 0; } }

/* ---------- 6 · Neue Technik ---------- */
.koeck-teige .kt-technik { margin-bottom: var(--kt-abstand); }
.koeck-teige .kt-raum { display: block; margin-top: 48px; aspect-ratio: 4 / 3.4; overflow: hidden; }
.koeck-teige .kt-raum img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; filter: grayscale(1); transform-origin: 55% 50%; }
.koeck-teige.kt-lauf .kt-raum img { transform: scale(1.1); } /* Startwert, teige.js fährt zurück (kein Sprung beim Hereinkommen) */
@media (min-width: 1000px) {
	.koeck-teige .kt-technik .kt-spalte { margin-left: auto; margin-right: auto; }
	.koeck-teige .kt-raum { margin: 72px var(--kt-rand) 0; aspect-ratio: 3 / 1.6; }
}

/* ---------- 7 · Geduld, die man schmeckt ---------- */
.koeck-teige .kt-ged { margin-bottom: var(--kt-abstand); }
.koeck-teige .kt-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 48px var(--kt-rand) 0; }
.koeck-teige .kt-paar > span { display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.koeck-teige .kt-paar img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.koeck-teige .kt-paar-a img { object-position: 42% 50%; }
.koeck-teige .kt-paar-b img { object-position: 68% 50%; }
@media (min-width: 1000px) {
	.koeck-teige .kt-ged { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(40px, 5vw, 96px); align-items: center; padding: 0 var(--kt-rand); }
	.koeck-teige .kt-ged .kt-spalte { padding: 0; }
	.koeck-teige .kt-paar { margin: 0; grid-template-columns: 5fr 7fr; gap: 16px; align-items: end; }
	.koeck-teige .kt-paar-a { aspect-ratio: 4 / 5.2 !important; }
	.koeck-teige .kt-paar-b { aspect-ratio: 4 / 4.2 !important; }
}

/* ---------- 8 · Schluss: wer hetzt, sieht unscharf ---------- */
.koeck-teige .kt-ende { padding-bottom: var(--kt-abstand); }
.koeck-teige .kt-ende-bild { position: relative; aspect-ratio: 4 / 4.6; overflow: hidden; background: #e9e9e9; }
.koeck-teige .kt-ende-bild > img, .koeck-teige .kt-ende-wisch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 60%; filter: grayscale(1); }
.koeck-teige .kt-ende-wisch { position: absolute; inset: -24px; opacity: 0; pointer-events: none; }
.koeck-teige .kt-ende-wisch img { inset: 24px; width: calc(100% - 48px); height: calc(100% - 48px); filter: grayscale(1) blur(12px); transform: scale(1.04); }
.koeck-teige .kt-schluss { padding: 36px var(--kt-rand) 0; }
.koeck-teige .kt-schluss p { font: 300 clamp(24px, 6.2vw, 36px)/1.2 var(--serif); max-width: 17em; text-wrap: pretty; }
@media (min-width: 1000px) {
	.koeck-teige .kt-ende { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 clamp(40px, 5vw, 96px); align-items: center; padding: 0 var(--kt-rand) var(--kt-abstand); }
	.koeck-teige .kt-ende-bild { aspect-ratio: 3 / 2.3; }
	.koeck-teige .kt-schluss { padding: 0; }
}
.koeck-teige .kt-ende--ohne .kt-schluss { display: block; grid-column: 1 / -1; }

/* ---------- Große Bildschirme (1.56.0, erzeugt): ab 1441 px wachsen alle Größen mit --sm-x (stories-magazin.css) ---------- */
@media (min-width: 1441px) {
	.koeck-teige { font: 400 calc(18px * var(--sm-x, 1))/1.6 var(--sans); --kt-rand: clamp(calc(48px * var(--sm-x, 1)), 5.5vw, calc(96px * var(--sm-x, 1))); --kt-abstand: calc(168px * var(--sm-x, 1)); font-size: calc(19px * var(--sm-x, 1)); }
	.koeck-teige .kt-h { font: 300 clamp(calc(32px * var(--sm-x, 1)), 8.6vw, calc(60px * var(--sm-x, 1)))/1.04 var(--serif); margin-bottom: calc(24px * var(--sm-x, 1)); }
	.koeck-teige .kt-h3 { font: 400 clamp(calc(26px * var(--sm-x, 1)), 6.6vw, calc(38px * var(--sm-x, 1)))/1.1 var(--serif); margin-bottom: calc(20px * var(--sm-x, 1)); }
	.koeck-teige .kt-held { padding-bottom: calc(56px * var(--sm-x, 1)); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 clamp(calc(40px * var(--sm-x, 1)), 4.5vw, calc(88px * var(--sm-x, 1))); padding: 0 var(--kt-rand) 0 0; min-height: 100svh; margin-bottom: calc(96px * var(--sm-x, 1)); }
	.koeck-teige .kt-titel { font: 300 clamp(calc(40px * var(--sm-x, 1)), 11.6vw, calc(112px * var(--sm-x, 1)))/.98 var(--serif); font-size: clamp(calc(56px * var(--sm-x, 1)), 5.4vw, calc(112px * var(--sm-x, 1))); }
	.koeck-teige .kt-vor { margin-top: calc(24px * var(--sm-x, 1)); max-width: var(--kt-text); font-size: clamp(calc(18px * var(--sm-x, 1)), 1.25vw, calc(22px * var(--sm-x, 1))); }
	.koeck-teige .kt-held-text { padding: 0 0 clamp(calc(40px * var(--sm-x, 1)), 8svh, calc(96px * var(--sm-x, 1))); }
	.koeck-teige .kt-spuren { grid-template-columns: 1fr 1fr; margin: calc(16px * var(--sm-x, 1)) var(--kt-rand) var(--kt-abstand); max-width: calc(760px * var(--sm-x, 1)); margin-left: auto; margin-right: auto; gap: 0 calc(80px * var(--sm-x, 1)); }
	.koeck-teige .kt-spur { padding-left: calc(22px * var(--sm-x, 1)); }
	.koeck-teige .kt-spur-kopf { font: 600 calc(16px * var(--sm-x, 1))/1.2 var(--sans); margin: 0 0 calc(20px * var(--sm-x, 1)); }
	.koeck-teige .kt-spur li { min-height: 5.2em; font: 300 clamp(calc(18px * var(--sm-x, 1)), 5vw, calc(26px * var(--sm-x, 1)))/1.18 var(--serif); }
	.koeck-teige .kt-spur li::before { left: calc(-27px * var(--sm-x, 1)); top: .32em; width: calc(12px * var(--sm-x, 1)); height: calc(12px * var(--sm-x, 1)); }
	.koeck-teige .kt-spur-linie { left: calc(5px * var(--sm-x, 1)); top: 0; width: 2px; }
	.koeck-teige .kt-geduld { padding: 0 var(--kt-rand); margin-bottom: var(--kt-abstand); grid-template-columns: minmax(0, var(--kt-text)) auto; gap: calc(80px * var(--sm-x, 1)); }
	.koeck-teige .kt-erst { max-width: var(--kt-text); font-size: clamp(calc(19px * var(--sm-x, 1)), 2vw, calc(22px * var(--sm-x, 1))); }
	.koeck-teige .kt-24 { gap: calc(10px * var(--sm-x, 1)); }
	.koeck-teige .kt-24-zahl { width: max-content; font: 300 clamp(calc(150px * var(--sm-x, 1)), 46vw, calc(300px * var(--sm-x, 1)))/.8 var(--serif); }
	.koeck-teige .kt-24-text { font: 400 calc(16px * var(--sm-x, 1))/1.4 var(--sans); max-width: 18em; }
	.koeck-teige .kt-kalt { padding: 0 var(--kt-rand); margin-bottom: var(--kt-abstand); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(calc(48px * var(--sm-x, 1)), 6vw, calc(120px * var(--sm-x, 1))); }
	.koeck-teige .kt-vergleich { grid-template-columns: 1fr 1fr; margin: 0; gap: calc(16px * var(--sm-x, 1)); }
	.koeck-teige .kt-v { min-width: 0; padding: calc(24px * var(--sm-x, 1)) calc(22px * var(--sm-x, 1)) calc(26px * var(--sm-x, 1)); }
	.koeck-teige .kt-v figcaption { font: 600 calc(15px * var(--sm-x, 1))/1.25 var(--sans); min-height: 2.5em; }
	.koeck-teige .kt-v-teig { margin: calc(18px * var(--sm-x, 1)) 0 calc(14px * var(--sm-x, 1)); }
	.koeck-teige .kt-v dl div { padding: calc(7px * var(--sm-x, 1)) 0; }
	.koeck-teige .kt-v dt { font: 400 calc(14px * var(--sm-x, 1))/1.3 var(--sans); }
	.koeck-teige .kt-v dd { font: 400 clamp(calc(17px * var(--sm-x, 1)), 4.6vw, calc(22px * var(--sm-x, 1)))/1.2 var(--serif); }
	.koeck-teige .kt-v dl div:first-child dd { font-size: clamp(calc(26px * var(--sm-x, 1)), 7.6vw, calc(40px * var(--sm-x, 1))); }
	.koeck-teige .kt-kalt-text { max-width: var(--kt-text); margin-bottom: calc(64px * var(--sm-x, 1)); margin: 0; font-size: clamp(calc(19px * var(--sm-x, 1)), 1.5vw, calc(23px * var(--sm-x, 1))); }
	.koeck-teige .kt-schritte li { gap: calc(16px * var(--sm-x, 1)); grid-template-columns: 1fr; }
	.koeck-teige .kt-schritte strong { font: 400 calc(21px * var(--sm-x, 1))/1.2 var(--serif); margin-bottom: 4px; }
	.koeck-teige .kt-kalt > .kt-h3 { margin-top: calc(120px * var(--sm-x, 1)); }
	.koeck-teige .kt-schritte { grid-template-columns: repeat(4, 1fr); gap: calc(40px * var(--sm-x, 1)); }
	.koeck-teige .kt-ico { width: calc(72px * var(--sm-x, 1)); height: calc(72px * var(--sm-x, 1)); padding: calc(8px * var(--sm-x, 1)); }
	.koeck-teige .kt-daumen-buehne { top: 0; height: 100svh; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 clamp(calc(40px * var(--sm-x, 1)), 5vw, calc(96px * var(--sm-x, 1))); padding: calc(72px * var(--sm-x, 1)) var(--kt-rand) calc(48px * var(--sm-x, 1)); }
	.koeck-teige .kt-daumen-bild { flex: 0 1 auto; min-height: calc(220px * var(--sm-x, 1)); height: min(78svh, 46vw); }
	.koeck-teige .kt-daumen-text .kt-h { margin-bottom: calc(14px * var(--sm-x, 1)); }
	.koeck-teige .kt-calm { font: italic 300 clamp(calc(26px * var(--sm-x, 1)), 7.4vw, calc(56px * var(--sm-x, 1)))/1.08 var(--serif); }
	.koeck-teige .kt-pionier > .kt-spalte { margin-top: calc(72px * var(--sm-x, 1)); margin-left: calc(var(--kt-rand) + (100% - 2 * var(--kt-rand)) * 7 / 12 + clamp(calc(40px * var(--sm-x, 1)), 5vw, calc(96px * var(--sm-x, 1))) * 7 / 12); }
	.koeck-teige .kt-fodmap { max-width: calc(980px * var(--sm-x, 1)); grid-template-columns: minmax(0, 1fr) calc(260px * var(--sm-x, 1)); gap: calc(48px * var(--sm-x, 1)); padding: calc(40px * var(--sm-x, 1)) calc(44px * var(--sm-x, 1)); margin: calc(96px * var(--sm-x, 1)) auto 0; }
	.koeck-teige .kt-fm-text p { font-size: calc(17px * var(--sm-x, 1)); max-width: var(--kt-text); }
	.koeck-teige .kt-fm-link { gap: .35em; min-height: calc(44px * var(--sm-x, 1)); margin-top: calc(10px * var(--sm-x, 1)); }
	.koeck-teige .kt-fm-grafik { grid-template-rows: auto auto; column-gap: calc(18px * var(--sm-x, 1)); grid-template-columns: 1fr; row-gap: calc(10px * var(--sm-x, 1)); }
	.koeck-teige .kt-fm-saeule i { left: calc(8px * var(--sm-x, 1)); right: calc(8px * var(--sm-x, 1)); bottom: 0; height: 100%; }
	.koeck-teige .kt-fm-saeule b { left: calc(8px * var(--sm-x, 1)); right: calc(8px * var(--sm-x, 1)); bottom: 0; height: 100%; }
	.koeck-teige .kt-fm-wert { font: 300 clamp(calc(34px * var(--sm-x, 1)), 9vw, calc(52px * var(--sm-x, 1)))/1 var(--serif); }
	.koeck-teige .kt-fm-was { font: 400 calc(14px * var(--sm-x, 1))/1.3 var(--sans); padding-bottom: 2px; }
	.koeck-teige .kt-fm-saeule { width: calc(88px * var(--sm-x, 1)); height: calc(200px * var(--sm-x, 1)); }
	.koeck-teige .kt-raum { margin-top: calc(48px * var(--sm-x, 1)); margin: calc(72px * var(--sm-x, 1)) var(--kt-rand) 0; }
	.koeck-teige .kt-ged { margin-bottom: var(--kt-abstand); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(calc(40px * var(--sm-x, 1)), 5vw, calc(96px * var(--sm-x, 1))); padding: 0 var(--kt-rand); }
	.koeck-teige .kt-paar { margin: 0; grid-template-columns: 5fr 7fr; gap: calc(16px * var(--sm-x, 1)); }
	.koeck-teige .kt-ende { padding-bottom: var(--kt-abstand); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 clamp(calc(40px * var(--sm-x, 1)), 5vw, calc(96px * var(--sm-x, 1))); padding: 0 var(--kt-rand) var(--kt-abstand); }
	.koeck-teige .kt-ende-wisch { inset: calc(-24px * var(--sm-x, 1)); }
	.koeck-teige .kt-ende-wisch img { inset: calc(24px * var(--sm-x, 1)); width: calc(100% - calc(48px * var(--sm-x, 1))); height: calc(100% - calc(48px * var(--sm-x, 1))); }
	.koeck-teige .kt-schluss p { font: 300 clamp(calc(24px * var(--sm-x, 1)), 6.2vw, calc(36px * var(--sm-x, 1)))/1.2 var(--serif); max-width: 17em; }
}

/* große Bildschirme: Einstiegsfoto bis zum linken Rand (wie Robert) */
@media (min-width: 1441px) {
	.koeck-teige { --kt-aussen: calc((100vw - var(--scrollbar-width, 0px) - var(--sm-b)) / 2); }
	.koeck-teige .kt-held-bild { margin-left: calc(var(--kt-aussen) * -1); width: calc(100% + var(--kt-aussen)); }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
	.koeck-teige [data-kt-auf], .koeck-teige .kt-lang span, .koeck-teige .kt-vor, .koeck-teige .kt-held-dunkel, .koeck-teige .kt-24-zahl, .koeck-teige .kt-fm-saeule b { transition: opacity .3s ease !important; transform: none !important; clip-path: none !important; }
	.koeck-teige.kt-js [data-kt-auf], .koeck-teige.kt-js .kt-lang span, .koeck-teige.kt-js .kt-vor { opacity: 1 !important; }
	.koeck-teige .kt-held-dunkel { opacity: 0 !important; }
	.koeck-teige .kt-fm-saeule b { transform: scaleY(.25) !important; }
	.koeck-teige .kt-daumen { height: auto; }
	.koeck-teige .kt-daumen-buehne { position: static; height: auto; }
	.koeck-teige .kt-fr { opacity: 0 !important; }
	.koeck-teige .kt-fr:last-child { opacity: 1 !important; }
	.koeck-teige .kt-ende-wisch { display: none; }
	.koeck-teige .kt-raum img { transform: none !important; }
}