/*
 * Eigene Story „Wie die Bäckerei Köck das Weltgeschehen veränderte …“ (Kolumne Werner Schwaiger, Heft 3) –
 * Namensraum .koeck-welt, Präfix kw-. Vorlage template-parts/stories/eigen/welt.php (+ welt-grafik.php), Script js/stories/welt.js.
 * Wie im Heft: blassblauer Rahmen (Pantone 2113 U ≈ #cbd4eb), Blau für Jahreszahlen und Akzente. Aufbau wie die zweite
 * Schwaiger-Kolumne (schwaiger.css): Rahmen fest am Bildschirmrand, Seite bis an den Rand (viewport-fit=cover).
 * Handy zuerst; ab 1000 px: Jahreszahl groß links und läuft mit, Text in Lesebreite, Grafik daneben.
 */
body:has(.koeck-welt) { --kw-rb: 12px; --kw-so: env(safe-area-inset-top, 0px); --kw-su: env(safe-area-inset-bottom, 0px); --kw-ss: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); --kw-ro: calc(var(--kw-rb) + var(--kw-so)); --kw-rs: calc(var(--kw-rb) + var(--kw-ss)); }
@media (min-width: 600px) { body:has(.koeck-welt) { --kw-rb: 16px; } }
@media (min-width: 1000px) { body:has(.koeck-welt) { --kw-rb: 22px; } }
.koeck-welt {
	--kw-hell: #cbd4eb;  /* Rahmen, Unterstreichung, Flächen */
	--kw-mittel: #98a9d7; /* Grafik-Akzent (wie im Heft) */
	--kw-blau: #6f84c0;  /* Jahreszahlen (dunkler, damit lesbar) */
	--kw-rand: calc(var(--kw-rs, 12px) + 18px);
	background: #fff; color: #111;
	font: 400 18px/1.62 var(--sans); -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
.koeck-welt p, .koeck-welt figure, .koeck-welt blockquote { margin: 0; }
.koeck-welt img { display: block; max-width: 100%; height: auto; }

/* Rahmen (wie schwaiger.css) */
.koeck-welt .kw-rahmen { position: fixed; top: 0; left: 0; right: 0; height: 100vh; z-index: 60; border-inline: var(--kw-rs) solid var(--kw-hell); pointer-events: none; }
@supports (-webkit-touch-callout: none) { .koeck-welt .kw-rahmen { height: 100lvh; } }
.koeck-welt .kw-rahmen-o, .koeck-welt .kw-rahmen-u { position: fixed; left: 0; right: 0; background-color: var(--kw-hell); pointer-events: auto; }
.koeck-welt .kw-rahmen-o { top: 0; height: var(--kw-ro); }
.koeck-welt .kw-rahmen-u { bottom: 0; height: calc(var(--kw-rb) + var(--kw-su)); }
body:has(.koeck-welt) .sm-leiste { top: var(--kw-ro); left: var(--kw-rs); right: var(--kw-rs); padding-top: 16px; padding-inline: 18px; }
body:has(.koeck-welt) .sm-leiste { background: linear-gradient(to bottom, #fff 52%, rgba(255, 255, 255, 0) 74%); } /* taste-skill-ignore: Schutzverlauf – Text läuft nicht halb sichtbar unter Logo und Schließen */
body:has(.koeck-welt) .sm-fortschritt { top: var(--kw-ro); left: var(--kw-rs); right: var(--kw-rs); width: auto; }
body:has(.koeck-welt) .sm-fortschritt i { background: var(--kw-mittel, #98a9d7); }

/* ---------- 1 · Kopf ---------- */
.koeck-welt .kw-held { padding: calc(84px + var(--kw-ro)) var(--kw-rand) 0; text-align: center; }
.koeck-welt .kw-kicker { font: 600 12px/1.2 var(--sans); letter-spacing: .32em; text-transform: uppercase; }
.koeck-welt .kw-titel { margin: 18px auto 0; max-width: 15em; padding: 0; font: 300 clamp(34px, 9.4vw, 84px)/1.02 var(--serif); letter-spacing: -.015em; text-transform: none; text-wrap: balance; hyphens: manual; }
.koeck-welt .kw-vorspann-zeile { margin: 30px auto 0; max-width: 30em; }
.koeck-welt .kw-vorspann { font: 400 clamp(21px, 5.6vw, 27px)/1.32 var(--serif); text-wrap: pretty; }
.koeck-welt .kw-g--mehl { width: 120px; margin: 18px auto 0; }

/* Breaddancer */
.koeck-welt .kw-tanz { margin: 36px var(--kw-rand) 0; text-align: center; }
.koeck-welt .kw-tanzer { display: block; width: min(78%, 420px); margin: 0 auto; padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.koeck-welt .kw-tanzer img { width: 100%; transform-origin: 62% 82%; will-change: transform; } /* dreht sich um die Hand am Boden */
.koeck-welt .kw-tanzer:focus-visible { outline: 3px solid var(--kw-blau); outline-offset: 6px; }
.koeck-welt .kw-bu { max-width: 18em; margin: 14px auto 0; font: 400 clamp(21px, 5.6vw, 26px)/1.18 var(--serif); text-wrap: balance; }

/* ---------- 2 · Text ---------- */
.koeck-welt .kw-vor { padding: 0 var(--kw-rand); margin: 56px auto 0; max-width: calc(24em + 2 * var(--kw-rand)); } /* Schmalschrift: 24em ≈ 65–72 Zeichen je Zeile */
.koeck-welt .kw-p { hyphens: manual; text-wrap: pretty; overflow-wrap: break-word; }
.koeck-welt .kw-p + .kw-p, .koeck-welt .kw-platon + .kw-p { margin-top: 1.1em; }
.koeck-welt .kw-pointe { text-decoration: underline var(--kw-hell); text-decoration-thickness: .42em; text-underline-offset: -.28em; text-decoration-skip-ink: none; }
/* Platon */
.koeck-welt .kw-platon { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; margin: 40px 0; }
.koeck-welt .kw-platon blockquote { margin: 0; padding: 0; border: 0; }
.koeck-welt .kw-platon blockquote p { font: 300 clamp(23px, 6vw, 36px)/1.14 var(--serif); letter-spacing: -.005em; text-wrap: pretty; color: #111; }
.koeck-welt .kw-platon blockquote::before { content: none; }

/* Wörter zum Antippen: fein punktiert unterstrichen, wie ein Wörterbuch */
.koeck-welt .kw-wort { display: inline; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: inherit; cursor: help; text-decoration: underline dotted currentColor; text-decoration-thickness: 1.5px; text-underline-offset: .22em; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.koeck-welt .kw-wort:has(.kw-morph) { text-decoration: none; border-bottom: 1.5px dotted currentColor; } /* Buchstaben als Blöcke: Linie durchgehend */
.koeck-welt .kw-nw { white-space: nowrap; }
.koeck-welt .kw-wort[aria-expanded="true"] { background: var(--kw-hell); text-decoration-style: solid; }
.koeck-welt .kw-wort:focus-visible { outline: 2px solid var(--kw-blau); outline-offset: 2px; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) { .koeck-welt .kw-wort:hover { background: color-mix(in srgb, var(--kw-hell) 55%, transparent); } }
.koeck-welt .kw-karte { position: fixed; z-index: 70; left: 0; top: 0; width: max-content; max-width: min(19em, calc(100vw - 2 * var(--kw-rand))); padding: 10px 13px 11px; background: #fff; border: 1.5px solid #111; box-shadow: 5px 5px 0 var(--kw-hell); font: 400 16px/1.4 var(--sans); color: #111; opacity: 0; transform: translateY(4px); transition: opacity .18s ease, transform .22s var(--ease-out, ease-out); pointer-events: none; }
.koeck-welt .kw-karte.kw-an { opacity: 1; transform: none; }
.koeck-welt .kw-karte b { display: block; margin-bottom: 2px; font: 600 12px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
/* „Ur Laiband“ → „Ur Leiwand“: zwei Buchstaben kippen um */
.koeck-welt .kw-m { position: relative; display: inline-block; }
.koeck-welt .kw-m b, .koeck-welt .kw-m::before { font-style: normal; font-weight: inherit; display: inline-block; transition: transform .45s var(--ease-out, ease-out), opacity .3s ease; }
.koeck-welt .kw-m::before { content: attr(data-alt); position: absolute; left: 0; right: 0; top: 0; text-align: center; }
/* Vor dem Wechsel trägt der alte Buchstabe die Breite (kein Loch in „Laiband“), danach der neue */
.koeck-welt.kw-js .kw-morph:not(.kw-an) .kw-m::before { position: static; }
.koeck-welt.kw-js .kw-morph:not(.kw-an) .kw-m b { position: absolute; left: 0; top: 0; }
.koeck-welt.kw-js .kw-morph:not(.kw-an) .kw-m b { opacity: 0; transform: translateY(.45em); }
.koeck-welt .kw-morph.kw-an .kw-m::before, .koeck-welt:not(.kw-js) .kw-m::before { opacity: 0; transform: translateY(-.45em); }
.koeck-welt .kw-morph.kw-an .kw-m b, .koeck-welt .kw-morph.kw-an .kw-m::before { transition-delay: .4s; } /* 1.57.0: an der Leselinie erst kurz „Laiband“ lesen lassen; zurück ohne Pause */
.koeck-welt .kw-morph.kw-an .kw-m:nth-of-type(2) b, .koeck-welt .kw-morph.kw-an .kw-m:nth-of-type(2)::before { transition-delay: .65s; }

/* ---------- 3 · Zeitreise ---------- */
.koeck-welt .kw-reise { position: relative; margin-top: 64px; padding: 0 var(--kw-rand); }
/* am Handy: schmaler Streifen unter der Leiste, Jahreszahl als Zählwerk und vier Punkte */
.koeck-welt .kw-zeit { position: sticky; top: var(--kw-ro); z-index: 5; display: flex; align-items: center; gap: 16px; margin: 0 calc(var(--kw-rand) * -1 + var(--kw-rs)); padding: 64px calc(var(--kw-rand) - var(--kw-rs)) 10px; background: #fff; border-bottom: 1.5px solid #111; }
.koeck-welt .kw-zahl { font: 300 44px/1 var(--serif); color: var(--kw-blau); font-variant-numeric: tabular-nums; min-width: 2.2em; }
.koeck-welt .kw-bahn { position: relative; flex: 1; height: 1.5px; background: #111; }
.koeck-welt .kw-bahn i { position: absolute; top: 50%; left: calc(var(--i) / (var(--n) - 1) * (100% - 14px)); width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px #111; transition: background-color .3s ease; }
.koeck-welt .kw-bahn i.kw-an { background: var(--kw-mittel); }
.koeck-welt .kw-bahn b { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); font: 600 10px/1 var(--sans); letter-spacing: .04em; color: #555; display: none; }

.koeck-welt .kw-st { margin: 64px auto 0; max-width: 24em; scroll-margin-top: 150px; }
.koeck-welt .kw-jahr { font: 300 clamp(80px, 24vw, 120px)/.8 var(--serif); color: var(--kw-blau); letter-spacing: -.02em; }
.koeck-welt .kw-st-titel { margin: 10px 0 0; padding: 0; font: 300 clamp(30px, 8.4vw, 40px)/1.06 var(--serif); letter-spacing: -.01em; text-transform: none; text-wrap: balance; hyphens: manual; }
.koeck-welt .kw-st-grafik { margin: 26px auto 26px; width: min(62%, 240px); }
.koeck-welt .kw-st-text .kw-p + .kw-p { margin-top: 1.1em; }

/* Grafiken: feiner Strich */
.koeck-welt .kw-g svg { display: block; width: 100%; height: auto; overflow: visible; }
.koeck-welt .kw-l { fill: none; stroke: #111; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.koeck-welt .kw-l.kw-weiss, .koeck-welt .kw-weiss rect { fill: #fff; }
.koeck-welt .kw-blass { opacity: .45; }
.koeck-welt .kw-blau, .koeck-welt .kw-l.kw-blau { stroke: var(--kw-mittel); }
.koeck-welt .kw-bl { fill: var(--kw-mittel); }
.koeck-welt .kw-bh { fill: var(--kw-hell); }
.koeck-welt .kw-k { fill: #111; }
.koeck-welt [pathLength] { stroke-dasharray: 1; }
.koeck-welt .kw-svg-s { font: 300 11px var(--serif); fill: var(--kw-blau); }
.koeck-welt .kw-svg-c { font: 600 5.5px var(--sans); letter-spacing: .25em; fill: #111; }
.koeck-welt [data-a="laib"], .koeck-welt [data-a="siegel"], .koeck-welt [data-a="laib25"], .koeck-welt [data-a="zirkel"] { transform-box: fill-box; transform-origin: center; }
.koeck-welt .kw-ranftl { fill: #f3efe6; } /* heller Rand rund um den Krapfen */
.koeck-welt .kw-mitte { transform-box: view-box; transform-origin: 50% 50%; }
.koeck-welt [data-a="marmelade"], .koeck-welt [data-a="zucker"] { transform-box: fill-box; transform-origin: center; }
.koeck-welt [data-a="haufen"] { transform-box: fill-box; transform-origin: 50% 100%; }

/* Mond-Schalter: Kipferl | Krapfen */
.koeck-welt .kw-schalter { display: flex; justify-content: center; margin: 14px auto 0; width: max-content; border: 1.5px solid #111; border-radius: 999px; padding: 3px; }
.koeck-welt .kw-schalter button { min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: none; font: 400 18px/1 var(--serif); color: #111; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color .2s ease; }
.koeck-welt .kw-schalter button[aria-pressed="true"] { background: var(--kw-hell); }
.koeck-welt .kw-schalter button:active { transform: scale(.97); }
.koeck-welt .kw-schalter button:focus-visible { outline: 2px solid var(--kw-blau); outline-offset: 2px; }

/* Schluss: „70 Jahre Köck“ */
.koeck-welt .kw-ende { margin: 80px auto 0; max-width: 24em; padding-bottom: 32px; }
.koeck-welt .kw-70 { position: relative; display: grid; justify-items: center; text-align: center; padding: 10px 0 0; }
.koeck-welt .kw-strahlen { position: absolute; left: 50%; top: 0; width: min(100%, 420px); transform: translateX(-50%); height: auto; }
.koeck-welt .kw-70-zahl { font: 300 clamp(110px, 34vw, 190px)/.82 var(--serif); color: var(--kw-blau); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.koeck-welt .kw-70-jahre { font: 300 clamp(34px, 9vw, 52px)/1 var(--serif); margin-top: 4px; }
.koeck-welt .kw-70-koeck { margin-top: 10px; font: 600 15px/1 var(--sans); letter-spacing: .42em; text-transform: uppercase; padding-left: .42em; }
.koeck-welt .kw-70-zeit { margin-top: 16px; padding-top: 10px; border-top: 1.5px dashed #111; font: 400 15px/1 var(--sans); color: #444; font-variant-numeric: tabular-nums; }
.koeck-welt .kw-bio { margin-top: 56px; padding-top: 14px; border-top: 1.5px solid #111; font: 400 15px/1.5 var(--sans); color: #333; }
.koeck-welt .sm-naechste { margin-top: 64px; }

/* ---------- ab 600 px (Tablet): Lesebreite mittig ---------- */
@media (min-width: 600px) {
	.koeck-welt { --kw-rand: calc(var(--kw-rs) + 40px); }
	.koeck-welt .kw-bahn b { display: block; }
	.koeck-welt .kw-zeit { padding-bottom: 26px; }
}
/* Handy quer / niedrige Fenster: Streifen niedriger */
@media (max-height: 520px) and (max-width: 999px) {
	.koeck-welt .kw-held { padding-top: calc(64px + var(--kw-ro)); }
	.koeck-welt .kw-zeit { padding-top: 68px; padding-bottom: 6px; }
	.koeck-welt .kw-zahl { font-size: 28px; }
	.koeck-welt .kw-bahn b { display: none; }
	.koeck-welt .kw-tanzer { width: min(60%, 60svh); }
}

/* ---------- ab 1000 px: Kopf wie im Heft, Zeitreise mit großer Jahreszahl links ---------- */
@media (min-width: 1000px) {
	.koeck-welt { --kw-rand: clamp(64px, 6vw, 110px); font-size: 19px; }
	.koeck-welt .kw-held { padding-top: calc(110px + var(--kw-ro)); }
	.koeck-welt .kw-vorspann-zeile { display: grid; grid-template-columns: 1fr 140px; gap: 32px; align-items: center; max-width: 38em; text-align: left; }
	.koeck-welt .kw-g--mehl { width: 140px; margin: 0; }
	.koeck-welt .kw-tanz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; max-width: 1100px; margin: 56px auto 0; padding: 0 var(--kw-rand); text-align: left; }
	.koeck-welt .kw-tanzer { width: 100%; max-width: 480px; justify-self: end; }
	.koeck-welt .kw-bu { margin: 0; max-width: 12em; font-size: 34px; }
	.koeck-welt .kw-vor { margin-top: 80px; }
	.koeck-welt .kw-platon { grid-template-columns: 150px 1fr; gap: 32px; margin: 56px -6em; }
	.koeck-welt .kw-platon blockquote p { font-size: 38px; }
	.koeck-welt .kw-reise { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 24em) minmax(180px, 240px); column-gap: clamp(32px, 4vw, 64px); max-width: 1440px; margin: 100px auto 0; }
	.koeck-welt .kw-zeit { grid-column: 1; grid-row: 1 / span 20; align-self: start; position: sticky; top: calc(var(--kw-ro) + 110px); display: block; margin: 64px 0 0; padding: 0; border: 0; background: none; }
	.koeck-welt .kw-zahl { display: block; font-size: clamp(100px, 9vw, 150px); line-height: .85; }
	.koeck-welt .kw-bahn { display: block; width: 1.5px; height: 260px; margin: 28px 0 0 7px; }
	.koeck-welt .kw-bahn i { left: -6.25px; top: calc(var(--i) / (var(--n) - 1) * (100% - 14px)); margin-top: 0; }
	.koeck-welt .kw-bahn b { display: block; top: 50%; left: 26px; transform: translateY(-50%); font-size: 12px; }
	.koeck-welt .kw-st { grid-column: 2 / 4; display: grid; grid-template-columns: minmax(0, 24em) minmax(180px, 240px); column-gap: clamp(32px, 4vw, 64px); margin: 72px 0 0; max-width: none; }
	.koeck-welt .kw-st-kopf { grid-column: 1; }
	.koeck-welt .kw-jahr { display: none; } /* steht groß links im Zählwerk */
	.koeck-welt .kw-st-titel { margin: 0; font-size: 46px; }
	.koeck-welt .kw-st-grafik { grid-column: 2; grid-row: 1 / span 2; align-self: start; position: sticky; top: calc(var(--kw-ro) + 130px); width: 100%; margin: 0; }
	.koeck-welt .kw-st-text { grid-column: 1; margin-top: 22px; }
	.koeck-welt .kw-ende { grid-column: 2 / 4; max-width: 24em; margin: 120px 0 0; }
}

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: no-preference) {
	.koeck-welt.kw-js .kw-held > * { opacity: 0; transform: translateY(10px); transition: opacity .7s ease, transform .8s var(--ease-out, ease-out); }
	.koeck-welt.kw-js.kw-da .kw-held > * { opacity: 1; transform: none; }
	.koeck-welt.kw-js.kw-da .kw-held > :nth-child(2) { transition-delay: .08s; }
	.koeck-welt.kw-js.kw-da .kw-held > :nth-child(3) { transition-delay: .18s; }
}
@media print {
	.koeck-welt .kw-rahmen, .koeck-welt .kw-zeit, .koeck-welt .kw-karte, .koeck-welt .kw-schalter { display: none !important; }
	.koeck-welt .kw-m::before { display: none; }
}

/* ---------- Große Bildschirme (1.54.0, erzeugt): ab 1441 px wachsen alle Größen mit --sm-x (stories-magazin.css) ---------- */
@media (min-width: 1441px) {
	body:has(.koeck-welt) { --kw-so: env(safe-area-inset-top, 0px); --kw-su: env(safe-area-inset-bottom, 0px); --kw-ss: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); --kw-rb: calc(22px * var(--sm-x, 1)); }
	.koeck-welt { font: 400 calc(18px * var(--sm-x, 1))/1.62 var(--sans); --kw-rand: clamp(calc(64px * var(--sm-x, 1)), 6vw, calc(110px * var(--sm-x, 1))); font-size: calc(19px * var(--sm-x, 1)); }
	body:has(.koeck-welt) .sm-leiste { top: var(--kw-ro); left: var(--kw-rs); right: var(--kw-rs); padding-top: calc(16px * var(--sm-x, 1)); padding-inline: calc(18px * var(--sm-x, 1)); }
	.koeck-welt .kw-held { padding: calc(calc(84px * var(--sm-x, 1)) + var(--kw-ro)) var(--kw-rand) 0; padding-top: calc(calc(110px * var(--sm-x, 1)) + var(--kw-ro)); }
	.koeck-welt .kw-kicker { font: 600 calc(12px * var(--sm-x, 1))/1.2 var(--sans); }
	.koeck-welt .kw-titel { margin: calc(18px * var(--sm-x, 1)) auto 0; max-width: 15em; padding: 0; font: 300 clamp(calc(34px * var(--sm-x, 1)), 9.4vw, calc(84px * var(--sm-x, 1)))/1.02 var(--serif); }
	.koeck-welt .kw-vorspann-zeile { margin: calc(30px * var(--sm-x, 1)) auto 0; grid-template-columns: 1fr calc(140px * var(--sm-x, 1)); gap: calc(32px * var(--sm-x, 1)); max-width: 38em; }
	.koeck-welt .kw-vorspann { font: 400 clamp(calc(21px * var(--sm-x, 1)), 5.6vw, calc(27px * var(--sm-x, 1)))/1.32 var(--serif); }
	.koeck-welt .kw-tanzer { margin: 0 auto; padding: 0; width: 100%; max-width: calc(480px * var(--sm-x, 1)); }
	.koeck-welt .kw-bu { font: 400 clamp(calc(21px * var(--sm-x, 1)), 5.6vw, calc(26px * var(--sm-x, 1)))/1.18 var(--serif); margin: 0; max-width: 12em; font-size: calc(34px * var(--sm-x, 1)); }
	.koeck-welt .kw-vor { padding: 0 var(--kw-rand); margin: calc(56px * var(--sm-x, 1)) auto 0; max-width: calc(24em + 2 * var(--kw-rand)); margin-top: calc(80px * var(--sm-x, 1)); }
	.koeck-welt .kw-platon blockquote p { font: 300 clamp(calc(23px * var(--sm-x, 1)), 6vw, calc(36px * var(--sm-x, 1)))/1.14 var(--serif); font-size: calc(38px * var(--sm-x, 1)); }
	.koeck-welt .kw-karte { left: 0; top: 0; width: max-content; max-width: min(19em, calc(100vw - 2 * var(--kw-rand))); padding: calc(10px * var(--sm-x, 1)) calc(13px * var(--sm-x, 1)) calc(11px * var(--sm-x, 1)); font: 400 calc(16px * var(--sm-x, 1))/1.4 var(--sans); }
	.koeck-welt .kw-karte b { margin-bottom: 2px; font: 600 calc(12px * var(--sm-x, 1))/1.3 var(--sans); }
	.koeck-welt .kw-reise { margin-top: calc(64px * var(--sm-x, 1)); padding: 0 var(--kw-rand); grid-template-columns: minmax(calc(200px * var(--sm-x, 1)), 1fr) minmax(0, 24em) minmax(calc(180px * var(--sm-x, 1)), calc(240px * var(--sm-x, 1))); column-gap: clamp(calc(32px * var(--sm-x, 1)), 4vw, calc(64px * var(--sm-x, 1))); max-width: calc(1440px * var(--sm-x, 1)); margin: calc(100px * var(--sm-x, 1)) auto 0; }
	.koeck-welt .kw-zeit { gap: calc(16px * var(--sm-x, 1)); padding-bottom: calc(26px * var(--sm-x, 1)); top: calc(var(--kw-ro) + calc(110px * var(--sm-x, 1))); margin: calc(64px * var(--sm-x, 1)) 0 0; padding: 0; }
	.koeck-welt .kw-zahl { font: 300 calc(44px * var(--sm-x, 1))/1 var(--serif); min-width: 2.2em; font-size: clamp(calc(100px * var(--sm-x, 1)), 9vw, calc(150px * var(--sm-x, 1))); }
	.koeck-welt .kw-bahn { flex: 1; width: 1.5px; height: calc(260px * var(--sm-x, 1)); margin: calc(28px * var(--sm-x, 1)) 0 0 calc(7px * var(--sm-x, 1)); }
	.koeck-welt .kw-bahn i { width: calc(14px * var(--sm-x, 1)); height: calc(14px * var(--sm-x, 1)); left: calc(-6.25px * var(--sm-x, 1)); top: calc(var(--i) / (var(--n) - 1) * (100% - calc(14px * var(--sm-x, 1)))); margin-top: 0; }
	.koeck-welt .kw-bahn b { font: 600 calc(10px * var(--sm-x, 1))/1 var(--sans); top: 50%; left: calc(26px * var(--sm-x, 1)); font-size: calc(12px * var(--sm-x, 1)); }
	.koeck-welt .kw-jahr { font: 300 clamp(calc(80px * var(--sm-x, 1)), 24vw, calc(120px * var(--sm-x, 1)))/.8 var(--serif); }
	.koeck-welt .kw-st-titel { padding: 0; font: 300 clamp(calc(30px * var(--sm-x, 1)), 8.4vw, calc(40px * var(--sm-x, 1)))/1.06 var(--serif); margin: 0; font-size: calc(46px * var(--sm-x, 1)); }
	.koeck-welt .kw-svg-s { font: 300 calc(11px * var(--sm-x, 1)) var(--serif); }
	.koeck-welt .kw-svg-c { font: 600 calc(5.5px * var(--sm-x, 1)) var(--sans); }
	.koeck-welt .kw-schalter { margin: calc(14px * var(--sm-x, 1)) auto 0; width: max-content; padding: 3px; }
	.koeck-welt .kw-schalter button { min-height: calc(40px * var(--sm-x, 1)); padding: 0 calc(18px * var(--sm-x, 1)); font: 400 calc(18px * var(--sm-x, 1))/1 var(--serif); }
	.koeck-welt .kw-ende { padding-bottom: calc(32px * var(--sm-x, 1)); max-width: 24em; margin: calc(120px * var(--sm-x, 1)) 0 0; }
	.koeck-welt .kw-70 { padding: calc(10px * var(--sm-x, 1)) 0 0; }
	.koeck-welt .kw-strahlen { left: 50%; top: 0; width: min(100%, calc(420px * var(--sm-x, 1))); height: auto; }
	.koeck-welt .kw-70-zahl { font: 300 clamp(calc(110px * var(--sm-x, 1)), 34vw, calc(190px * var(--sm-x, 1)))/.82 var(--serif); }
	.koeck-welt .kw-70-jahre { font: 300 clamp(calc(34px * var(--sm-x, 1)), 9vw, calc(52px * var(--sm-x, 1)))/1 var(--serif); margin-top: 4px; }
	.koeck-welt .kw-70-koeck { margin-top: calc(10px * var(--sm-x, 1)); font: 600 calc(15px * var(--sm-x, 1))/1 var(--sans); padding-left: .42em; }
	.koeck-welt .kw-70-zeit { margin-top: calc(16px * var(--sm-x, 1)); padding-top: calc(10px * var(--sm-x, 1)); font: 400 calc(15px * var(--sm-x, 1))/1 var(--sans); }
	.koeck-welt .kw-bio { margin-top: calc(56px * var(--sm-x, 1)); padding-top: calc(14px * var(--sm-x, 1)); font: 400 calc(15px * var(--sm-x, 1))/1.5 var(--sans); }
	.koeck-welt .sm-naechste { margin-top: calc(64px * var(--sm-x, 1)); }
	.koeck-welt .kw-g--mehl { width: calc(140px * var(--sm-x, 1)); margin: 0; }
	.koeck-welt .kw-tanz { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(48px * var(--sm-x, 1)); max-width: calc(1100px * var(--sm-x, 1)); margin: calc(56px * var(--sm-x, 1)) auto 0; padding: 0 var(--kw-rand); }
	.koeck-welt .kw-platon { grid-template-columns: calc(150px * var(--sm-x, 1)) 1fr; gap: calc(32px * var(--sm-x, 1)); margin: calc(56px * var(--sm-x, 1)) -6em; }
	.koeck-welt .kw-st { grid-template-columns: minmax(0, 24em) minmax(calc(180px * var(--sm-x, 1)), calc(240px * var(--sm-x, 1))); column-gap: clamp(calc(32px * var(--sm-x, 1)), 4vw, calc(64px * var(--sm-x, 1))); margin: calc(72px * var(--sm-x, 1)) 0 0; max-width: none; }
	.koeck-welt .kw-st-grafik { top: calc(var(--kw-ro) + calc(130px * var(--sm-x, 1))); width: 100%; margin: 0; }
	.koeck-welt .kw-st-text { margin-top: calc(22px * var(--sm-x, 1)); }
}