/*
 * Eigene Story „Brot braucht kein Doping“ (Heft 4, S. 4–5) – alles im Namensraum .koeck-doping (Präfix kd-).
 * 1.91.0 – Welt „Ein Brot entsteht – Station für Station, mit Zeit“ (vorher 1.89.0 „Dopingkontrolle“ – Rückmeldung
 * Dominik Köck: die Story handelt davon, was ein Brot braucht). Einstieg wie die linke Heftseite, dann die Stationen
 * (Nummer, Linie füllt sich beim Lesen), Zeitvorsprung, Hände im Teig, Klopftest, Kreislauf des Aroma-Recyclings, Zitat.
 * Größen in px × --kz (1; über 1440 px = --sm-x). Keine Schatten, keine Verläufe; Grün nur für Flächen, Linien, Nummern.
 */
.koeck-doping {
	--kz: 1;
	--kd-ink: #111;          /* 18,9:1 auf Weiß */
	--kd-grau: #595959;      /* 7,0:1 auf Weiß */
	--kd-g: #557d4a;         /* Nummern, Linien, Kreis: 4,8:1 mit Weiß */
	--kd-linie: #e2e2dc;
	--kd-rand: 20px;
	background: #fff; color: var(--kd-ink);
	font: 400 calc(18px * var(--kz))/1.55 var(--sans); -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
.koeck-doping img { display: block; width: 100%; height: 100%; object-fit: cover; }
.koeck-doping figure { margin: 0; }

/* 1 · Kopf (Handy): Titel auf Weiß, darunter das Foto randlos (Kopf bis Teig), dann die Einleitung */
.koeck-doping .kd-held { width: calc(100vw - var(--scrollbar-width, 0px)); margin-left: calc(50% - (100vw - var(--scrollbar-width, 0px)) / 2); padding-top: calc(92px + env(safe-area-inset-top, 0px)); background: #fff; }
.koeck-doping .kd-h { margin: 0 var(--kd-rand); max-width: 6.1em; color: var(--kd-ink); font: 300 clamp(32px, min(16.5vw, 20svh), 80px)/.98 var(--serif); letter-spacing: -.02em; text-wrap: balance; hyphens: manual; overflow-wrap: break-word; }
.koeck-doping .kd-held-bild { margin-top: 32px; height: min(125vw, 85svh); overflow: hidden; background: #d9d9d9; }
.koeck-doping .kd-held-bild img { object-position: 52% 30%; }
.koeck-doping .kd-intro { margin: 28px var(--kd-rand) 0; max-width: 30em; font: 400 20px/1.45 var(--sans); text-wrap: pretty; }

/* 2 · Auftakt und Stationen: links eine Linie mit Nummern, die sich beim Lesen füllt */
.koeck-doping .kd-seite { margin: calc(56px * var(--kz)) auto 0; padding: 0 var(--kd-rand); max-width: 26em; box-sizing: content-box; }
.koeck-doping .kd-auftakt p, .koeck-doping .kd-punkt > p { margin: 0 0 1em; hyphens: auto; overflow-wrap: break-word; }
.koeck-doping .kd-punkt { --kd-sp: calc(40px * var(--kz)); position: relative; margin-top: calc(56px * var(--kz)); padding-left: var(--kd-sp); }
.koeck-doping .kd-nr { position: absolute; left: 0; top: .1em; z-index: 1; display: grid; place-items: center; width: calc(26px * var(--kz)); height: calc(26px * var(--kz)); box-sizing: border-box; border: 1.5px solid var(--kd-ink); border-radius: 50%; background: #fff; font: 600 calc(13px * var(--kz))/1 var(--sans); font-variant-numeric: tabular-nums; transition: background-color .45s ease, color .45s ease, border-color .45s ease; }
.koeck-doping .kd-punkt h2 { margin: 0 0 calc(14px * var(--kz)); font: 300 clamp(26px, 7.4vw, calc(34px * var(--kz)))/1.1 var(--serif); letter-spacing: -.01em; text-transform: none; text-wrap: balance; hyphens: manual; }
/* Linie zwischen den Stationen (doping.js setzt --f am Scrollen, kd-ok an der Leselinie; ohne Script: voll) */
.koeck-doping .kd-punkt::before, .koeck-doping .kd-punkt::after { content: ""; position: absolute; left: calc(12px * var(--kz)); top: calc(30px * var(--kz)); bottom: calc(-56px * var(--kz) + 4px); width: 2px; background: var(--kd-linie); }
.koeck-doping .kd-punkt::after { background: var(--kd-g); transform-origin: top center; transform: scaleY(var(--f, 1)); }
.koeck-doping.kd-js .kd-punkt::after { transform: scaleY(var(--f, 0)); } /* mit JS leer beginnen, kein Aufblitzen */
.koeck-doping .kd-punkt:has(+ .kd-zitat)::before, .koeck-doping .kd-punkt:has(+ .kd-zitat)::after { bottom: 0; } /* vor einem Zitat endet die Linie mit der Station */
.koeck-doping .kd-punkt::before, .koeck-doping .kd-punkt::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.koeck-doping .kd-punkt:last-of-type::before, .koeck-doping .kd-punkt:last-of-type::after { bottom: 0; }
.koeck-doping:not(.kd-js) .kd-nr, .koeck-doping .kd-ok > .kd-nr { border-color: var(--kd-g); background: var(--kd-g); color: #fff; } /* Station erreicht */

/* Zitat aus dem Heft */
.koeck-doping .kd-zitat { margin: calc(72px * var(--kz)) 0 0; padding: 0; border: 0; }
.koeck-doping .kd-zitat p, .koeck-doping .kd-schluss p { margin: 0; color: var(--kd-ink); font: 300 clamp(28px, 7.6vw, calc(40px * var(--kz)))/1.1 var(--serif); letter-spacing: -.012em; text-indent: -.4em; text-wrap: pretty; hyphens: manual; }

/* Zeitvorsprung: zwei Bahnen */
.koeck-doping .kd-lauf { margin: calc(24px * var(--kz)) 0 calc(8px * var(--kz)); padding-top: calc(12px * var(--kz)); border-top: 1px solid var(--kd-ink); }
.koeck-doping .kd-lauf figcaption { font: 600 calc(12px * var(--kz))/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.koeck-doping .kd-bahnen { margin: calc(14px * var(--kz)) 0 0; padding: 0; list-style: none; }
.koeck-doping .kd-bahn { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: calc(10px * var(--kz)); align-items: center; margin-top: calc(8px * var(--kz)); font-size: calc(15px * var(--kz)); line-height: 1.2; }
.koeck-doping .kd-spur { position: relative; display: block; height: calc(26px * var(--kz)); border-block: 1px solid #cfcfc8; background: #ecece6; }
.koeck-doping .kd-spur i { position: absolute; top: 25%; bottom: 25%; display: block; transform-origin: left center; transform: scaleX(var(--f, 1)); }
.koeck-doping .kd-lauf-a { left: 0; width: var(--w); background: var(--kd-g); }
.koeck-doping .kd-lauf-b { left: var(--l); right: 0; background: var(--kd-ink); }
.koeck-doping .kd-lauf-b::after { content: ""; position: absolute; right: 0; top: -50%; bottom: -50%; width: 2px; background: #ecece6; } /* offenes Ende: „noch einmal Zeit“ */
.koeck-doping .kd-achse { position: relative; height: calc(26px * var(--kz)); margin: calc(6px * var(--kz)) 0 0 calc(118px * var(--kz)); /* Breite der Namen (7,2 em × 15 px) + Abstand */ font: 400 calc(12px * var(--kz))/1 var(--sans); color: var(--kd-grau); }
.koeck-doping .kd-achse span { position: absolute; top: calc(6px * var(--kz)); left: var(--x); transform: translateX(-50%); white-space: nowrap; }
.koeck-doping .kd-achse span:first-child { transform: none; }

/* Hände im Teig */
.koeck-doping .kd-haende { margin-top: calc(24px * var(--kz)); aspect-ratio: 1; overflow: hidden; background: #d9d9d9; }

/* Klopftest: der ganze Laib zum Antippen */
.koeck-doping .kd-klopf { margin: calc(24px * var(--kz)) 0 0; }
.koeck-doping .kd-klopf-knopf { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; overflow: hidden; background: #2a2a2a; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.koeck-doping .kd-klopf-knopf:focus-visible { outline: 3px solid var(--kd-ink); outline-offset: 3px; }
.koeck-doping .kd-klopf-knopf img { transition: filter .25s ease; }
.koeck-doping .kd-klopf-knopf.kd-tock img { filter: brightness(.82); }
.koeck-doping .kd-klopf-ring { position: absolute; left: var(--kx, 50%); top: var(--ky, 50%); width: 84px; height: 84px; margin: -42px 0 0 -42px; border: 2px solid #fff; border-radius: 50%; opacity: 0; pointer-events: none; }
.koeck-doping .kd-klopf-hinweis { margin-top: 10px; font-size: calc(15px * var(--kz)); line-height: 1.4; color: var(--kd-grau); }
.koeck-doping .kd-klopf-hinweis[hidden] { display: none; }

/* Aroma-Recycling: Kreislauf */
.koeck-doping .kd-kreis { margin: calc(28px * var(--kz)) auto 0; max-width: calc(480px * var(--kz)); } /* Ansicht 520 breit: Platz für die Wörter links und rechts */
.koeck-doping .kd-kreis svg { display: block; width: 100%; height: auto; overflow: visible; }
.koeck-doping .kd-kreis-bahn { fill: none; stroke: var(--kd-linie); stroke-width: 2; }
.koeck-doping .kd-kreis-linie { fill: none; stroke: var(--kd-g); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--k, 1) * 100); transform: rotate(-90deg); transform-origin: 180px 180px; }
.koeck-doping .kd-kreis-punkt circle { fill: #fff; stroke: var(--kd-g); stroke-width: 3; }
.koeck-doping .kd-kreis-punkt text { font: 300 27px/1 var(--serif); fill: var(--kd-ink); } /* Einheiten der Zeichnung: am Handy (390) ≈ 18 px */
.koeck-doping .kd-kreis-mitte { font: 600 20px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; fill: var(--kd-grau); }

/* 3 · Schluss: Zitat aus dem Heft */
.koeck-doping .kd-ende { margin: calc(88px * var(--kz)) auto 0; padding: 0 var(--kd-rand); max-width: 26em; box-sizing: content-box; }
.koeck-doping .kd-schluss { margin: 0; padding: 0; border: 0; }

.koeck-doping .sm-naechste { margin-top: 96px; }

/* ---------- Bewegung (Startzustände erst, wenn js/stories/doping.js läuft) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.koeck-doping.kd-js .kd-held-bild img { transform: scale(1.06); transition: transform 2.4s cubic-bezier(.16, 1, .3, 1); }
	.koeck-doping.kd-js.kd-da .kd-held-bild img { transform: none; }
	.koeck-doping.kd-js .kd-w { display: inline-block; opacity: 0; transform: translateY(.3em); transition: opacity .7s ease, transform .9s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i) * 70ms + 150ms); }
	.koeck-doping.kd-js.kd-da .kd-w { opacity: 1; transform: none; }
	.koeck-doping.kd-js .kd-intro { opacity: 0; transition: opacity .8s ease .7s; }
	.koeck-doping.kd-js.kd-da .kd-intro { opacity: 1; }
	.koeck-doping.kd-js .kd-auf { opacity: 0; transform: translateY(20px); transition: opacity .45s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1); }
	.koeck-doping.kd-js .kd-auf.kd-sicht { opacity: 1; transform: none; transition-duration: 1.1s, 1.4s; transition-delay: calc(var(--sm-stufe, 0) * 100ms); }
	/* Kreislauf: Punkte erscheinen mit der Linie (doping.js setzt --k von 0 bis 1) */
	.koeck-doping.kd-js .kd-kreis-punkt { opacity: clamp(0, calc((var(--k, 1) * 5 - var(--i)) * 2), 1); }
	.koeck-doping .kd-klopf-knopf.kd-tock img { animation: kd-tock .32s cubic-bezier(.3, 0, .2, 1); }
	.koeck-doping .kd-klopf-knopf.kd-tock .kd-klopf-ring { animation: kd-ring .6s cubic-bezier(.16, 1, .3, 1); }
}
@keyframes kd-tock { 0% { transform: scale(1); } 30% { transform: scale(.985); } 100% { transform: scale(1); } }
@keyframes kd-ring { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.6); } }

/* Tablet */
@media (min-width: 600px) {
	.koeck-doping { --kd-rand: 48px; }
	.koeck-doping .kd-intro { max-width: 25em; }
}

/* ---------- ab 900 px: Kopf wie die linke Heftseite, Text mittig in Lesebreite ---------- */
@media (min-width: 900px) {
	.koeck-doping { --kd-rand: 56px; font-size: calc(19px * var(--kz)); }
	.koeck-doping .kd-held { display: grid; grid-template-columns: minmax(0, 1fr) 58%; grid-template-rows: 1fr auto auto 1.3fr; grid-template-areas: ". bild" "h bild" "intro bild" ". bild"; min-height: max(100svh, 640px); padding: calc(96px + env(safe-area-inset-top, 0px)) 0 0; --kd-kopf: clamp(56px, 6vw, 160px); }
	.koeck-doping .kd-held--ohne { grid-template-columns: 1fr; grid-template-areas: "." "h" "intro" "."; min-height: 0; padding: 160px 0 0; }
	.koeck-doping .kd-h { grid-area: h; position: relative; z-index: 1; margin: 0 48px 0 var(--kd-kopf); font-size: clamp(56px, calc((42vw - var(--kd-kopf) - 48px) / 4.8), 136px); }
	.koeck-doping .kd-held-bild { grid-area: bild; position: relative; height: auto; min-height: 0; margin: calc(-96px - env(safe-area-inset-top, 0px)) 0 0; }
	.koeck-doping .kd-held-bild img { position: absolute; inset: 0; object-position: 50% 32%; }
	body:has(.koeck-doping.sm-welt--hell) .sm-leiste { background: none; }
	.koeck-doping .kd-intro { grid-area: intro; margin: 40px 48px 0 var(--kd-kopf); max-width: 23em; font-size: clamp(20px, 1.1vw, 26px); }
	.koeck-doping .kd-seite { margin-top: calc(140px * var(--kz)); max-width: 26em; }
	.koeck-doping .kd-zitat { margin: calc(120px * var(--kz)) calc(-4em) calc(48px * var(--kz)); } /* ragt wie im Heft über die Textspalte hinaus */
	.koeck-doping .kd-zitat p { font-size: clamp(38px, 3.2vw, calc(48px * var(--kz))); }
	/* Fotos und Grafiken dürfen breiter sein als die Textspalte */
	.koeck-doping .kd-haende, .koeck-doping .kd-klopf { margin-right: -4em; } /* breiter als die Textspalte, links bündig mit dem Text */
	.koeck-doping .kd-haende { aspect-ratio: 4 / 3; }
	.koeck-doping .kd-ende { max-width: calc(780px * var(--kz)); margin-top: calc(140px * var(--kz)); }
	.koeck-doping .kd-schluss p { font-size: clamp(40px, 3.6vw, calc(56px * var(--kz))); }

}
@media (min-width: 900px) and (max-width: 1099px) { .koeck-doping .kd-zitat { margin-inline: -1.5em; } .koeck-doping .kd-haende, .koeck-doping .kd-klopf { margin-right: 0; } }
@media (min-width: 1000px) { .koeck-doping .sm-naechste { margin-top: 160px; } }
@media (min-width: 1900px) { .koeck-doping .kd-held-bild img { object-position: 50% 42%; } }
/* Große Bildschirme: alles wächst mit --sm-x */
@media (min-width: 1441px) {
	.koeck-doping { --kz: var(--sm-x, 1); --kd-rand: calc(56px * var(--kz)); }
	.koeck-doping .kd-held { min-height: max(100svh, calc(640px * var(--kz))); padding-top: calc(96px * var(--kz) + env(safe-area-inset-top, 0px)); --kd-kopf: clamp(calc(56px * var(--kz)), 6vw, calc(160px * var(--kz))); }
	.koeck-doping .kd-h { margin: 0 calc(48px * var(--kz)) 0 var(--kd-kopf); font-size: clamp(calc(56px * var(--kz)), calc((42vw - var(--kd-kopf) - 48px * var(--kz)) / 4.8), calc(136px * var(--kz))); }
	.koeck-doping .kd-held-bild { margin-top: calc(-96px * var(--kz) - env(safe-area-inset-top, 0px)); }
	.koeck-doping .kd-intro { margin: calc(40px * var(--kz)) calc(48px * var(--kz)) 0 var(--kd-kopf); font-size: clamp(calc(20px * var(--kz)), 1.1vw, calc(26px * var(--kz))); }
	.koeck-doping .kd-klopf-ring { width: calc(84px * var(--kz)); height: calc(84px * var(--kz)); margin: calc(-42px * var(--kz)) 0 0 calc(-42px * var(--kz)); }
	.koeck-doping .sm-naechste { margin-top: calc(160px * var(--sm-x, 1)); }
}
/* Zoom 200 % am Handy */
@media (max-width: 259px) {
	.koeck-doping { --kd-rand: 14px; }
	.koeck-doping .kd-bahn { grid-template-columns: minmax(0, 1fr); }
	.koeck-doping .kd-achse { margin-left: 0; }
	.koeck-doping .kd-achse span:nth-child(2), .koeck-doping .kd-achse span:nth-child(3) { display: none; }
	.koeck-doping .kd-punkt h2 { hyphens: auto; overflow-wrap: anywhere; }
	.koeck-doping .kd-h { font-size: 26px; }
}
@media (max-width: 359px) { .koeck-doping .kd-achse span:nth-child(2), .koeck-doping .kd-achse span:nth-child(3) { display: none; } }

/* Drucken: alles sichtbar, alle Stationen erreicht */
@media print {
	.koeck-doping .kd-held-bild img { position: static; }
	.koeck-doping .kd-w, .koeck-doping .kd-auf, .koeck-doping .kd-intro, .koeck-doping .kd-held-bild img, .koeck-doping .kd-kreis-punkt { opacity: 1 !important; transform: none !important; }
	.koeck-doping .kd-spur i { transform: none !important; }
	.koeck-doping .kd-kreis-linie { stroke-dashoffset: 0 !important; }
	.koeck-doping .kd-nr { background: var(--kd-g) !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.koeck-doping .kd-punkt::after { transform: none !important; }
	.koeck-doping .kd-held { min-height: 0; }
	.koeck-doping .kd-punkt, .koeck-doping .kd-kreis { break-inside: avoid; }
}