/*
 * Eigene Story „Unser Teig geht … Und geht jetzt zu BILLA.“ (Steirer Loab) – Namensraum .koeck-loab, Präfix kl-,
 * Vorlage template-parts/stories/eigen/loab.php, Script js/stories/loab.js.
 *
 * Raster wie beim Roggi (roggi.css): Feld --u, Zelle --c = 2 Felder, Farbe --g aus der Übersicht, nie auf Schwarz.
 * Text im Raster: Beginn auf einer senkrechten Linie (ungerades Feld), Grundlinien auf Rasterlinien (Zeilenhöhe eine Zelle
 * bzw. eine halbe), Blöcke ganze Zellen hoch (loab.js rundet, data-kl-zelle, und schiebt Grundlinien der Adobe-Schriften
 * nach). Handy zuerst (bis 820 px: 8 Zellen breit, Text ab Feld 3); ab 821 px wie das Kärtchen der Übersicht (24 Zellen).
 */
.koeck-loab { background: #fff; color: #000; }
.koeck-loab p, .koeck-loab figure, .koeck-loab ul, .koeck-loab ol { margin: 0; }

/* ---------- Rasterfläche ---------- */
.koeck-loab .kl-flaeche { position: relative; isolation: isolate; padding-bottom: calc(var(--c) * 2); overflow-x: clip; } /* versteckte Overlays dürfen nicht seitlich scrollen lassen */
.koeck-loab .kl-gitter { position: absolute; inset: calc(var(--c) * 2) 0 0; z-index: -1; } /* oben zwei Zellen weiß: Logo und Schließen hängen nicht in den Raster */
.koeck-loab .kl-gitter::before { -webkit-mask-repeat: repeat; mask-repeat: repeat; } /* Zellen nie stauchen – die Höhe rundet loab.js */

/* ---------- 1 · Kopf ---------- */
.koeck-loab .kl-held { padding-top: calc(var(--c) * 2); }
.koeck-loab .kl-kopf { padding: 0 var(--u) 0 calc(var(--u) * 3); }
/* langer Titel: eine Zelle je Zeile, groß; Grundlinien auf den Linien */
.koeck-loab .kl-titel { position: relative; top: calc(var(--c) / 2 - .3375em); margin: 0; padding: 0; font: 300 calc(var(--c) * 1.05)/var(--c) var(--serif); letter-spacing: -.02em; text-transform: none; hyphens: manual; text-wrap: balance; }
.koeck-loab .kl-unter { position: relative; top: calc(var(--c) * 3 / 4 - .34em); max-width: 18em; font: 400 clamp(16px, calc(var(--c) * .41), 20px)/calc(var(--c) / 2) var(--sans); text-wrap: pretty; }

/* die Tüte: am Handy über die ganze Breite (das freigestellte Foto hat rundum Luft), Höhe ganze Zellen */
.koeck-loab .kl-tuete { position: relative; width: calc(100% - var(--u) * 2); aspect-ratio: 1200 / 876; margin: var(--c) var(--u) 0; } /* Höhe des Kopfs rundet loab.js auf ganze Zellen */
.koeck-loab .kl-tuete-bild, .koeck-loab .kl-tuete-bild img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Punkte auf der Tüte – wie beim Roggi: 44 px Tippfläche, weißer Punkt mit Ring */
.koeck-loab .kl-punkt { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; z-index: 2; }
.koeck-loab .kl-punkt::before { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px #000, 0 1px 6px rgba(0, 0, 0, .25); transition: transform .2s var(--ease-out); }
.koeck-loab .kl-punkt::after { content: ""; position: absolute; inset: 13px; border-radius: 50%; border: 1.5px solid #fff; opacity: 0; pointer-events: none; }
.koeck-loab .kl-punkt:active::before { transform: scale(.85); }
.koeck-loab .kl-punkt[aria-expanded="true"]::before { background: #000; box-shadow: 0 0 0 1.5px #fff, 0 1px 6px rgba(0, 0, 0, .25); }
.koeck-loab .kl-punkt:focus-visible { outline: 2px solid #000; outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }
@media (hover: hover) and (pointer: fine) { .koeck-loab .kl-punkt:hover::before { transform: scale(1.25); } }
/* Beschriftung als Overlay neben dem Punkt (Seite und Breite setzt loab.js, damit es im Fenster bleibt) */
.koeck-loab .kl-info { position: absolute; top: 50%; left: calc(50% + 22px); width: max-content; max-width: min(var(--kl-max, 100vw), 58vw, 14em); padding: 10px 14px 11px; background: #fff; box-shadow: 0 0 0 1.5px #000; font: 400 18px/1.3 var(--serif); text-align: left; text-wrap: pretty; color: #000; opacity: 0; visibility: hidden; transform: translate(-6px, calc(-50% + var(--kl-dy, 0px))); pointer-events: none; transition: opacity .2s ease, transform .25s var(--ease-out), visibility 0s .25s; }
.koeck-loab .kl-info::after { content: ""; position: absolute; top: calc(50% - var(--kl-dy, 0px)); right: 100%; width: 13px; height: 1.5px; background: #000; }
.koeck-loab .kl-punkt--links .kl-info { left: auto; right: calc(50% + 22px); transform: translate(6px, calc(-50% + var(--kl-dy, 0px))); }
.koeck-loab .kl-punkt--links .kl-info::after { right: auto; left: 100%; }
.koeck-loab .kl-punkt[aria-expanded="true"] { z-index: 3; }
.koeck-loab .kl-punkt[aria-expanded="true"] .kl-info { opacity: 1; visibility: visible; transform: translate(0, calc(-50% + var(--kl-dy, 0px))); pointer-events: auto; transition-delay: 0s; }
.koeck-loab:not(.kl-js) .kl-punkt:is(:hover, :focus) .kl-info { opacity: 1; visibility: visible; transform: translate(0, -50%); }

/* ---------- 2 · Text im Raster ---------- */
.koeck-loab .kl-text { padding: var(--c) var(--u) 0 calc(var(--u) * 3); }
.koeck-loab .kl-text > * + * { margin-top: var(--c); }
.koeck-loab .kl-text > .kl-abschnitt:has(> .kl-h) { margin-top: calc(var(--c) * 2); }
.koeck-loab .kl-text > .kl-abschnitt:first-child { margin-top: 0; }
/* Zwischentitel klein (nur der Titel ist groß): eine Zelle je Zeile */
.koeck-loab .kl-h { position: relative; top: calc(var(--c) / 2 - .3375em); margin: 0 0 calc(var(--c) / 2); padding: 0; font: 300 clamp(28px, calc(var(--c) * .7), 40px)/var(--c) var(--serif); letter-spacing: -.015em; text-transform: none; text-wrap: balance; }
.koeck-loab .kl-abschnitt p, .koeck-loab .kl-liste li { position: relative; top: calc(var(--c) * 3 / 4 - .34em); font: 400 clamp(15px, calc(var(--c) * .35), 17px)/calc(var(--c) / 2) var(--sans); hyphens: auto; text-wrap: pretty; }
.koeck-loab .kl-abschnitt p + p, .koeck-loab .kl-abschnitt .kl-liste, .koeck-loab .kl-liste + p { margin-top: calc(var(--c) / 2); }
.koeck-loab .kl-liste { list-style: none; padding: 0; }
.koeck-loab .kl-liste li { padding-left: 1.2em; }
.koeck-loab .kl-liste li::before { content: ""; position: absolute; left: 0; top: .62em; width: .7em; height: 1.5px; background: currentColor; }
.koeck-loab .kl-h strong { font-weight: inherit; }

/* Die sechs Zutaten: Fotokacheln im Raster – am Handy 2 × 3 Kacheln zu je 3 × 4 Zellen */
.koeck-loab .kl-zutaten { display: grid; grid-template-columns: repeat(2, calc(var(--c) * 3)); grid-auto-rows: calc(var(--c) * 5); list-style: none; padding: 0; }
.koeck-loab .kl-zutat { position: relative; }
.koeck-loab .kl-zutat-knopf { position: absolute; inset: 0; display: block; width: 100%; padding: 0; border: 0; background: #fff; box-shadow: inset 0 0 0 1.5px #000; overflow: hidden; cursor: pointer; text-align: left; color: #000; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.koeck-loab .kl-zutat + .kl-zutat .kl-zutat-knopf { box-shadow: inset 0 0 0 1.5px #000; }
.koeck-loab .kl-zutat { --kl-txt: calc(var(--c) * 2); } /* Höhe des Textfelds: das Foto füllt nur den Teil darüber */
.koeck-loab .kl-zutat-knopf img { position: absolute; top: 1.5px; left: 1.5px; width: calc(100% - 3px); height: calc(100% - 1.5px - var(--kl-txt)); object-fit: cover; object-position: var(--kl-pos, 50% 50%); filter: grayscale(1) contrast(1.02); transition: filter .5s ease; } /* nicht zoomen: der schwarze Rahmen bleibt immer ganz */
.koeck-loab .kl-zutat-text { position: absolute; left: 1.5px; right: 1.5px; bottom: 1.5px; box-sizing: border-box; height: var(--kl-txt); padding: 8px 10px 9px; background: #fff; border-top: 1.5px solid #000; font: 400 clamp(15px, calc(var(--c) * .33), 17px)/1.2 var(--serif); text-wrap: pretty; hyphens: auto; } /* Textfeld überall gleich hoch: die Fotos enden in einer Reihe auf gleicher Höhe */
.koeck-loab .kl-zutat-knopf[aria-pressed="true"] img { filter: none; }
.koeck-loab .kl-zutat-knopf:focus-visible { outline: 3px solid #000; outline-offset: 2px; z-index: 2; }
@media (hover: hover) and (pointer: fine) { .koeck-loab .kl-zutat-knopf:hover img { filter: none; } }

/* Zutat groß (Handy, Tablet): ganzes Foto, darunter der Text – wie ein Blatt, das sich über die Seite legt */
.koeck-loab .kl-gross { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: max(56px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); border: 0; background: #fff; color: #000; overscroll-behavior: contain; }
.koeck-loab .kl-gross[open] { display: flex; align-items: center; justify-content: center; }
.koeck-loab .kl-gross::backdrop { background: transparent; }
.koeck-loab .kl-gross-figur { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; margin: 0; }
.koeck-loab .kl-gross-bild { display: block; max-width: 100%; max-height: calc(100svh - 190px); width: auto; height: auto; box-shadow: 0 0 0 1.5px #000; }
.koeck-loab .kl-gross-text { max-width: 22em; font: 400 20px/1.25 var(--serif); text-align: center; text-wrap: balance; }
.koeck-loab .kl-gross-zu { position: absolute; top: max(8px, env(safe-area-inset-top)); right: 8px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #000; cursor: pointer; touch-action: manipulation; }
.koeck-loab .kl-gross-zu:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
html:has(.kl-gross[open]) { overflow: hidden; } /* die Seite dahinter scrollt nicht mit */
/* Handy quer (niedrig): Foto und Text nebeneinander, Foto so hoch wie möglich */
@media (max-height: 500px) {
	.koeck-loab .kl-gross { padding: 12px 64px 12px 16px; }
	.koeck-loab .kl-gross-figur { flex-direction: row; gap: 20px; }
	.koeck-loab .kl-gross-bild { max-height: calc(100svh - 24px); max-width: 60vw; }
	.koeck-loab .kl-gross-text { max-width: 14em; text-align: left; }
}
@media (prefers-reduced-motion: no-preference) {
	.koeck-loab .kl-gross[open] { animation: kl-auf .22s ease-out; }
	.koeck-loab .kl-gross[open] .kl-gross-figur { animation: kl-gross-auf .32s cubic-bezier(.2, .8, .2, 1); }
}
@keyframes kl-auf { from { opacity: 0; } }
@keyframes kl-gross-auf { from { opacity: 0; transform: scale(.94); } }

/* Die Zeit: 18 Zellen = 18 Stunden; am Handy 6 × 3, die Zahl darunter */
.koeck-loab .kl-abschnitt .kl-zeit-satz { top: calc(var(--c) / 2 - .3375em); font: 300 calc(var(--c) * .52)/var(--c) var(--serif); letter-spacing: -.01em; hyphens: manual; } /* wie ein Zitat: eine Zelle je Zeile – nie enger als die Schrift */
.koeck-loab .kl-zeit-legende { position: relative; top: calc(var(--c) * 3 / 4 - .34em); height: var(--c); font: 600 13px/calc(var(--c) / 2) var(--sans); letter-spacing: .08em; text-transform: uppercase; } /* Grundlinie auf der Linie (loab.js) */
.koeck-loab .kl-zeit-legende i { display: inline-block; width: 1.1em; height: 1.1em; margin-right: .5em; vertical-align: -.2em; background: color-mix(in srgb, var(--g) 70%, transparent); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); }
.koeck-loab .kl-stunden { display: grid; grid-template-columns: repeat(6, var(--c)); grid-auto-rows: var(--c); padding: 0; list-style: none; }
.koeck-loab .kl-stunden li { position: relative; }
/* Füllung als eigenes Element: loab.js blendet sie beim Scrollen über opacity ein (1.57.0); ohne Script und bei „Bewegung reduzieren“ voll */
.koeck-loab .kl-stunden li i { position: absolute; inset: 0; background: color-mix(in srgb, var(--g) 70%, transparent); }
.koeck-loab .kl-stunden li span { position: absolute; left: 5px; top: 3px; font: 600 clamp(13px, calc(var(--c) * .2), 18px)/1 var(--sans); letter-spacing: .04em; color: #000; }
.koeck-loab .kl-zeit-zahl { position: relative; top: calc(var(--c) - .3375em); font: 300 calc(var(--c) * 1.6)/calc(var(--c) * 2) var(--serif); letter-spacing: -.02em; white-space: nowrap; }
.koeck-loab .kl-zeit-zahl b { font-weight: inherit; }
.koeck-loab .kl-zeit-zahl span { margin-left: .2em; font: 600 14px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }

/* Fotos im Text: ganze Zellen hoch */
.koeck-loab .kl-foto { margin-left: calc(var(--u) * -3); margin-right: calc(var(--u) * -1); } /* Handy: von Rand zu Rand – das Foto unterbricht den Raster als Band, oben und unten auf einer Linie */
.koeck-loab .kl-foto img { display: block; width: 100%; object-fit: cover; }
.koeck-loab .kl-foto--haende img { height: calc(var(--c) * 5); object-position: 40% 60%; }
.koeck-loab .kl-foto--regal img { height: calc(var(--c) * 9); object-position: 50% 50%; }

/* ---------- 3 · Bildstrecke auf Weiß ---------- */
.koeck-loab .kl-galerie { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 56px max(16px, var(--u)) 0; }
.koeck-loab .kl-g img { display: block; width: 100%; height: 100%; object-fit: cover; }
.koeck-loab .kl-g1 { grid-column: 1 / -1; aspect-ratio: 4 / 5; }
.koeck-loab .kl-g:not(.kl-g1) { aspect-ratio: 2 / 3; }
.koeck-loab .sm-naechste { margin-top: 96px; }

/* Tablet hoch: große Zellen */
@media (min-width: 600px) and (max-width: 820px) {
	/* große Zellen (75–102 px): Zwischentitel zwei Zeilen je Zelle, Text vier Zeilen je Zelle – sonst zerfällt der Zeilenabstand */
	.koeck-loab .kl-unter { font-size: clamp(20px, calc(var(--c) * .27), 26px); max-width: 20em; }
	.koeck-loab .kl-h { top: calc(var(--c) / 4 - .3375em); font-size: calc(var(--c) * .36); line-height: calc(var(--c) / 2); }
	.koeck-loab .kl-abschnitt p, .koeck-loab .kl-liste li { top: calc(var(--c) * 3 / 8 - .34em); font-size: clamp(15px, calc(var(--c) * .195), 19px); line-height: calc(var(--c) / 4); max-width: 34em; }
	.koeck-loab .kl-abschnitt p + p, .koeck-loab .kl-abschnitt .kl-liste, .koeck-loab .kl-liste + p { margin-top: calc(var(--c) / 4); }
	.koeck-loab .kl-abschnitt .kl-zeit-satz { top: calc(var(--c) / 4 - .3375em); font-size: calc(var(--c) * .3); line-height: calc(var(--c) / 2); max-width: 22em; }
	.koeck-loab .kl-zutaten { grid-auto-rows: calc(var(--c) * 4); }
	.koeck-loab .kl-zutat { --kl-txt: var(--c); }
	.koeck-loab .kl-zutat-text { font-size: clamp(18px, calc(var(--c) * .22), 22px); }
}

/* ---------- ab 821 px: wie das Kärtchen der Übersicht ---------- */
@media (min-width: 821px) {
	.koeck-loab .kl-gitter { top: calc(var(--c) * 2); }
	/* Kopf wie das Kärtchen: Text Feld 3–19 ab der zweiten Rasterzeile, Tüte Feld 18–48, ragt zwei Zeilen über den Raster */
	.koeck-loab .kl-held { position: relative; height: calc(var(--c) * 11); padding: 0; }
	.koeck-loab .kl-kopf { position: absolute; left: calc(var(--u) * 3); top: calc(var(--c) * 3); width: calc(var(--u) * 16); padding: 0; }
	.koeck-loab .kl-titel { font-size: calc(var(--c) * 16 / 15); }
	.koeck-loab .kl-unter { max-width: none; font-size: clamp(15px, calc(var(--c) * .37), 22px); }
	.koeck-loab .kl-tuete { position: absolute; left: calc(var(--u) * 18); top: 0; width: calc(var(--u) * 29); margin: 0; }
	.koeck-loab .kl-info { font-size: 20px; max-width: min(var(--kl-max, 100vw), var(--u) * 11); }
	/* Text: zwei Spalten (Feld 3–21 und 25–45), Kacheln und Zeit über die ganze Breite */
	.koeck-loab .kl-text { display: grid; grid-template-columns: repeat(48, var(--u)); align-items: start; row-gap: calc(var(--c) * 2); padding: 0; }
	.koeck-loab .kl-text > * + *, .koeck-loab .kl-text > .kl-abschnitt:has(> .kl-h) { margin-top: 0; }
	.koeck-loab .kl-text > * { grid-column: 4 / 22; }
	.koeck-loab .kl-a1 { grid-row: 1; }
	.koeck-loab .kl-a2 { grid-row: 1; grid-column: 26 / 46; padding-top: calc(var(--c) * 1.5); }
	.koeck-loab .kl-a3 { grid-row: 2; }
	.koeck-loab .kl-zutaten { grid-row: 3; grid-column: 4 / 46; grid-template-columns: repeat(3, calc(var(--c) * 7)); grid-auto-rows: calc(var(--c) * 4); }
	/* die Zeit: Satz links, daneben 9 × 2 Stunden-Zellen und die Zahl */
	.koeck-loab .kl-a4 { grid-row: 4; }
	.koeck-loab .kl-zeit { grid-row: 4; grid-column: 26 / 46; }
	.koeck-loab .kl-stunden { grid-template-columns: repeat(9, var(--c)); }
	.koeck-loab .kl-foto--haende { grid-row: 5; grid-column: 4 / 24; margin: 0; }
	.koeck-loab .kl-a5 { grid-row: 5; grid-column: 26 / 46; }
	.koeck-loab .kl-a6 { grid-row: 6; }
	.koeck-loab .kl-foto--regal { grid-row: 6; grid-column: 30 / 44; margin: 0; }
	/* Herkunft und Schluss nebeneinander: Überschrift und erster Absatz links, der BILLA-Absatz rechts */
	.koeck-loab .kl-a7 { grid-row: 7; grid-column: 4 / 46; display: grid; grid-template-columns: calc(var(--u) * 18) calc(var(--u) * 4) calc(var(--u) * 20); align-items: start; align-content: start; } /* die aufgerundete Höhe (loab.js) geht nach unten, nicht in die Zeilen */
	.koeck-loab .kl-a7 > * { grid-column: 1; }
	.koeck-loab .kl-a7 > p:last-child { grid-column: 3; grid-row: 2; margin-top: 0; } /* gleiche Zeile wie der erste Absatz links – beide Grundlinien auf derselben Linie */
	.koeck-loab .kl-foto--haende img { height: calc(var(--c) * 7); }
	.koeck-loab .kl-foto--regal img { height: calc(var(--c) * 10); }
	.koeck-loab .kl-abschnitt p, .koeck-loab .kl-liste li { font-size: clamp(15px, calc(var(--c) * .33), 19px); }
	.koeck-loab .kl-h { font-size: clamp(24px, calc(var(--c) * .6), 38px); }
	.koeck-loab .kl-zutat { --kl-txt: var(--c); }
	.koeck-loab .kl-zutat-knopf img { object-position: var(--kl-pos-d, 50% 50%); } /* breiter Ausschnitt: das Motiv in der Mitte des sichtbaren Streifens */
	.koeck-loab .kl-zutaten { grid-auto-rows: calc(var(--c) * 5); } /* Kacheln eine Zelle höher: mehr vom Foto */
	.koeck-loab .kl-galerie { grid-template-columns: repeat(4, 1fr); gap: calc(var(--c) / 4); margin: 120px calc(var(--u) * 3) 0; }
	.koeck-loab .kl-g1 { grid-column: 1 / 3; grid-row: span 2; aspect-ratio: auto; }
	.koeck-loab .sm-naechste { margin-top: 160px; }
}
/* 821–1099 px (iPad hoch/quer, Handy quer): mit 48 Feldern wäre eine halbe Zelle nur 17–22 px – zu eng für den Fließtext.
   Hier 40 Felder (Zelle 41–55 px); die Spalten rücken entsprechend zusammen. */
@media (min-width: 821px) and (max-width: 1099px) {
	.koeck-loab { --u: calc((100vw - var(--scrollbar-width, 0px)) / 40); }
	.koeck-loab .kl-text { grid-template-columns: repeat(40, var(--u)); }
	.koeck-loab .kl-text > * { grid-column: 4 / 21; } /* ab Feld 3 (ungerade): Beginn auf einer senkrechten Linie */
	.koeck-loab .kl-a2, .koeck-loab .kl-a5 { grid-column: 22 / 38; } /* rechts wie links zwei Felder Rand zum Rahmen */
	.koeck-loab .kl-zutaten { grid-column: 4 / 38; grid-template-columns: repeat(3, calc(var(--c) * 5)); }
	.koeck-loab .kl-zeit { grid-column: 22 / 38; }
	.koeck-loab .kl-stunden { grid-template-columns: repeat(6, var(--c)); }
	.koeck-loab .kl-foto--haende { grid-column: 4 / 21; }
	.koeck-loab .kl-foto--regal { grid-column: 24 / 36; }
	.koeck-loab .kl-a7 { grid-column: 4 / 38; grid-template-columns: calc(var(--u) * 16) calc(var(--u) * 2) calc(var(--u) * 16); }
	.koeck-loab .kl-kopf { width: calc(var(--u) * 15); }
	.koeck-loab .kl-tuete { left: calc(var(--u) * 17); width: calc(var(--u) * 22); }
	.koeck-loab .kl-held { height: calc(var(--c) * 9); }
	.koeck-loab .kl-zutat-text { font-size: 16px; }
	.koeck-loab .kl-zutat { --kl-txt: calc(var(--c) * 1.5); }
}
@media (min-width: 1100px) and (max-width: 1180px) {
	.koeck-loab .kl-zutat-text { font-size: 16px; }
}

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: no-preference) {
	/* direkt geöffnet: Titel und Unterzeile blenden ein (nicht geschoben: die Zeilen stehen immer auf dem Raster), die Tüte legt sich hin */
	html:not(.sm-vt) .koeck-loab.kl-js .kl-titel, html:not(.sm-vt) .koeck-loab.kl-js .kl-unter { opacity: 0; transition: opacity .6s ease; }
	html:not(.sm-vt) .koeck-loab.kl-js .kl-unter { transition-delay: .1s; }
	html .koeck-loab.kl-js.kl-da .kl-titel, html .koeck-loab.kl-js.kl-da .kl-unter { opacity: 1; }
	html:not(.sm-vt) .koeck-loab.kl-js .kl-tuete-bild { animation: kl-hin .9s cubic-bezier(.2, .8, .2, 1) both; }
	/* Punkte erscheinen nach dem Flug bzw. dem Hinlegen und pulsieren zweimal: „hier gibt es mehr“ */
	.koeck-loab.kl-js .kl-punkt { opacity: 0; transform: scale(.4); transition: opacity .3s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(.5s + var(--n) * .15s); }
	.koeck-loab.kl-js.kl-da .kl-punkt { opacity: 1; transform: none; }
	.koeck-loab.kl-js.kl-da .kl-punkt::after { animation: kl-puls 1.6s ease-out calc(1s + var(--n) * .15s) 2; }
	/* Einblenden an der Leselinie (loab.js → jhSmAuf), nur wenn loab.js läuft (kl-io): nur Deckkraft – geschoben stünden die
	   Zeilen kurz neben dem Raster. Hinein ruhig, gleichzeitig Kommendes gestaffelt; zurück zügig ohne Verzögerung (1.57.0) */
	.koeck-loab.kl-io .kl-auf { opacity: 0; transition: opacity .45s cubic-bezier(.23, 1, .32, 1); transition-delay: 0s; }
	.koeck-loab.kl-io .kl-auf.kl-sicht { opacity: 1; transition-duration: 1.1s; transition-delay: calc(var(--sm-stufe, 0) * 100ms); }
	/* 18 Stunden: die Füllungen setzt loab.js beim Scrollen (1.57.0) */
	.koeck-loab.kl-js .kl-stunden li i { opacity: 0; }
	.koeck-loab.kl-js .kl-stunden li span { opacity: .6; }
}
@keyframes kl-hin { 0% { opacity: 0; transform: translateY(-18px) rotate(-1.5deg); } 60% { opacity: 1; transform: translateY(2px) rotate(.3deg); } 100% { transform: none; } }
@keyframes kl-puls { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
@media (prefers-reduced-motion: reduce) {
	.koeck-loab .kl-zutat-knopf img { transition: none; }
}

/* Drucken: Raster und Punkte weg, alles sichtbar */
@media print {
	.koeck-loab .kl-gitter, .koeck-loab .kl-punkt, .koeck-loab .sm-naechste { display: none !important; }
	.koeck-loab .kl-auf, .koeck-loab .kl-titel, .koeck-loab .kl-unter, .koeck-loab .kl-stunden li i, .koeck-loab .kl-stunden li span { opacity: 1 !important; }
	.koeck-loab .kl-held { height: auto !important; }
	.koeck-loab .kl-kopf, .koeck-loab .kl-tuete { position: static !important; }
	.koeck-loab .kl-zutat-knopf img { filter: 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) {
	.koeck-loab .kl-unter { top: calc(var(--c) * 3 / 4 - .34em); font: 400 clamp(calc(16px * var(--sm-x, 1)), calc(var(--c) * .41), calc(20px * var(--sm-x, 1)))/calc(var(--c) / 2) var(--sans); max-width: none; font-size: clamp(calc(15px * var(--sm-x, 1)), calc(var(--c) * .37), calc(22px * var(--sm-x, 1))); }
	.koeck-loab .kl-punkt { left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: calc(44px * var(--sm-x, 1)); height: calc(44px * var(--sm-x, 1)); margin: calc(-22px * var(--sm-x, 1)) 0 0 calc(-22px * var(--sm-x, 1)); padding: 0; }
	.koeck-loab .kl-punkt::before { inset: calc(13px * var(--sm-x, 1)); }
	.koeck-loab .kl-punkt::after { inset: calc(13px * var(--sm-x, 1)); }
	.koeck-loab .kl-info { top: 50%; left: calc(50% + calc(22px * var(--sm-x, 1))); width: max-content; padding: calc(10px * var(--sm-x, 1)) calc(14px * var(--sm-x, 1)) calc(11px * var(--sm-x, 1)); font: 400 calc(18px * var(--sm-x, 1))/1.3 var(--serif); font-size: calc(20px * var(--sm-x, 1)); max-width: min(var(--kl-max, 100vw), var(--u) * 11); }
	.koeck-loab .kl-info::after { top: calc(50% - var(--kl-dy, 0px)); right: 100%; width: calc(13px * var(--sm-x, 1)); height: 1.5px; }
	.koeck-loab .kl-punkt--links .kl-info { left: auto; right: calc(50% + calc(22px * var(--sm-x, 1))); }
	.koeck-loab .kl-h { top: calc(var(--c) / 2 - .3375em); margin: 0 0 calc(var(--c) / 2); padding: 0; font: 300 clamp(calc(28px * var(--sm-x, 1)), calc(var(--c) * .7), calc(40px * var(--sm-x, 1)))/var(--c) var(--serif); font-size: clamp(calc(24px * var(--sm-x, 1)), calc(var(--c) * .6), calc(38px * var(--sm-x, 1))); }
	.koeck-loab .kl-abschnitt p, .koeck-loab .kl-liste li { top: calc(var(--c) * 3 / 4 - .34em); font: 400 clamp(calc(15px * var(--sm-x, 1)), calc(var(--c) * .35), calc(17px * var(--sm-x, 1)))/calc(var(--c) / 2) var(--sans); font-size: clamp(calc(15px * var(--sm-x, 1)), calc(var(--c) * .33), calc(19px * var(--sm-x, 1))); }
	.koeck-loab .kl-zutat-text { left: 1.5px; right: 1.5px; bottom: 1.5px; height: var(--kl-txt); padding: calc(8px * var(--sm-x, 1)) calc(10px * var(--sm-x, 1)) calc(9px * var(--sm-x, 1)); font: 400 clamp(calc(15px * var(--sm-x, 1)), calc(var(--c) * .33), calc(17px * var(--sm-x, 1)))/1.2 var(--serif); }
	.koeck-loab .kl-gross { inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: max(calc(56px * var(--sm-x, 1)), env(safe-area-inset-top)) calc(16px * var(--sm-x, 1)) max(calc(24px * var(--sm-x, 1)), env(safe-area-inset-bottom)); }
	.koeck-loab .kl-gross-figur { gap: calc(14px * var(--sm-x, 1)); max-width: 100%; margin: 0; }
	.koeck-loab .kl-gross-bild { max-width: 100%; max-height: calc(100svh - calc(190px * var(--sm-x, 1))); width: auto; height: auto; }
	.koeck-loab .kl-gross-text { max-width: 22em; font: 400 calc(20px * var(--sm-x, 1))/1.25 var(--serif); }
	.koeck-loab .kl-gross-zu { top: max(calc(8px * var(--sm-x, 1)), env(safe-area-inset-top)); right: calc(8px * var(--sm-x, 1)); width: calc(44px * var(--sm-x, 1)); height: calc(44px * var(--sm-x, 1)); padding: 0; }
	.koeck-loab .kl-zeit-legende { top: calc(var(--c) * 3 / 4 - .34em); height: var(--c); font: 600 calc(13px * var(--sm-x, 1))/calc(var(--c) / 2) var(--sans); }
	.koeck-loab .kl-stunden li span { left: calc(5px * var(--sm-x, 1)); top: 3px; font: 600 clamp(calc(13px * var(--sm-x, 1)), calc(var(--c) * .2), calc(18px * var(--sm-x, 1)))/1 var(--sans); }
	.koeck-loab .kl-zeit-zahl span { margin-left: .2em; font: 600 calc(14px * var(--sm-x, 1))/1 var(--sans); }
	.koeck-loab .kl-galerie { grid-template-columns: repeat(4, 1fr); gap: calc(var(--c) / 4); margin: calc(120px * var(--sm-x, 1)) calc(var(--u) * 3) 0; }
	.koeck-loab .sm-naechste { margin-top: calc(160px * var(--sm-x, 1)); }
}