/*
 * Eigene Story „Bon appétit mon chéri!“ (Mandelcroissant) – Namensraum .koeck-mandel, Präfix km-,
 * Vorlage template-parts/stories/eigen/mandel.php, Script js/stories/mandel.js.
 *
 * Raster wie Roggi und Steirer Loab: Feld --u, Zelle --c = 2 Felder, Farbe --g aus der Übersicht, nie auf Schwarz.
 * Die Bühne (km-buehne) bleibt beim Scrollen stehen (sticky) und hat ihren eigenen Raster – so stehen Titel und Schritte
 * immer auf den Linien. Ihre Höhe und die Länge der Strecke (km-lauf) sind ganze Zellen (mandel.js), darum trifft der
 * Bühnen-Raster genau den Raster darunter, wenn die Bühne weiterzieht. Handy zuerst; ab 821 px wie das Kärtchen.
 */
.koeck-mandel { background: #fff; color: #000; }
.koeck-mandel p, .koeck-mandel figure, .koeck-mandel ol, .koeck-mandel ul { margin: 0; }

/* ---------- Rasterfläche ---------- */
.koeck-mandel .km-flaeche { position: relative; isolation: isolate; padding-bottom: calc(var(--c) * 2); overflow-x: clip; }
.koeck-mandel .km-gitter { position: absolute; inset: calc(var(--c) * 2) 0 0; z-index: -1; } /* oben zwei Zellen weiß: Logo und Schließen hängen nicht im Raster */
.koeck-mandel .km-gitter::before { -webkit-mask-repeat: repeat; mask-repeat: repeat; } /* Höhe rundet mandel.js auf ganze Zellen */

/* ---------- 1 · Bühne ---------- */
.koeck-mandel .km-lauf { position: relative; }
.koeck-mandel .km-buehne { position: sticky; top: 0; height: var(--km-h, 100svh); background: #fff; overflow: hidden; isolation: isolate; }
.koeck-mandel .km-gitter--buehne { z-index: -1; bottom: auto; height: calc(var(--km-h, 100svh) - var(--c) * 2); }
.koeck-mandel .km-gitter--buehne::after { border-bottom: 0; } /* unten schließt der Raster darunter an – sonst doppelte Linie */

.koeck-mandel .km-kopf { position: relative; z-index: 2; padding: calc(var(--c) * 2) var(--u) 0 calc(var(--u) * 3); } /* Titel über dem Croissant, das groß hinausragen darf */
.koeck-mandel .km-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-mandel .km-unter { position: relative; top: calc(var(--c) * 3 / 4 - .34em); font: 400 clamp(16px, calc(var(--c) * .41), 20px)/calc(var(--c) / 2) var(--sans); text-wrap: pretty; }

/* die Handgriffe: übereinander, einer sichtbar (mandel.js setzt km-an); zwei Zeilen Platz */
.koeck-mandel .km-schritte { position: relative; height: calc(var(--c) * 2); margin: calc(var(--c) / 2) calc(var(--u) * 2) 0 calc(var(--u) * 3); padding: 0; list-style: none; }
.koeck-mandel .km-schritt { position: absolute; left: 0; right: 0; top: calc(var(--c) / 2 - .3375em); font: 300 clamp(26px, calc(var(--c) * .66), 34px)/var(--c) var(--serif); letter-spacing: -.015em; text-wrap: balance; opacity: 0; transition: opacity .35s ease-in; }
.koeck-mandel .km-schritt.km-an { opacity: 1; transition: opacity .45s ease-out .12s; } /* das alte geht zuerst, dann kommt das neue */

/* das Croissant: Lage und Größe setzt mandel.js (ganze bzw. halbe Zellen), die Ebenen bewegen sich nur mit transform */
.koeck-mandel .km-croissant { position: absolute; left: 0; top: 0; width: 60%; aspect-ratio: var(--km-ar); container-type: size; }
.koeck-mandel .km-zoom { position: absolute; inset: 0; transform-origin: 0 0; }
.koeck-mandel .km-ebene { position: absolute; display: block; max-width: none; will-change: transform; backface-visibility: hidden; }

/* Beschriftungen wie in einer technischen Zeichnung: feine Linie, das Wort dahinter (Lage setzt mandel.js) */
/* Sterne aus dem Heft: feine Linie in der Rasterfarbe, hinter dem Croissant; gehen beim Auffächern auf */
.koeck-mandel .km-stern { position: absolute; display: block; overflow: visible; fill: none; stroke: var(--g); stroke-width: clamp(1.25px, .35vw, 2px); vector-effect: non-scaling-stroke; opacity: 0; transform: scale(.4) rotate(-30deg); }
/* Beschriftungen wie im Heft: geschwungene Linie von der Schicht zum Wort, das Wort darunter bzw. darüber, mittig */
.koeck-mandel .km-linien { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.koeck-mandel .km-linien path { fill: none; stroke: #000; stroke-width: .9px; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .35s ease-in; }
.koeck-mandel .km-linien path.km-an { stroke-dashoffset: 0; transition: stroke-dashoffset .7s var(--ease-out, ease-out); }
.koeck-mandel .km-labels { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.koeck-mandel .km-label { position: absolute; left: 0; top: 0; width: min-content; /* ein Wort je Zeile, wie im Heft */ font: 400 clamp(15px, calc(var(--c) * .34), 24px)/calc(var(--c) / 2) var(--serif); text-align: center; text-shadow: 0 0 3px #fff, 0 0 6px #fff, 0 0 10px #fff; /* weißer Hof: lesbar auch über den Mandelblättchen */ text-wrap: balance; opacity: 0; transform: translateY(4px); transition: opacity .3s ease-in, transform .3s ease-in; }
.koeck-mandel .km-label span { display: block; }
.koeck-mandel .km-label.km-an { opacity: 1; transform: none; transition: opacity .4s ease-out .35s, transform .5s var(--ease-out, ease-out) .35s; } /* erst die Linie, dann das Wort */
/* Störer wie im Heft: abgerundete Raute in der Rasterfarbe mit feinem weißem Innenrand, leicht gedreht */
.koeck-mandel .km-stoerer { position: absolute; left: 0; top: 0; width: var(--km-sw, 120px); height: var(--km-sw, 120px); display: grid; place-items: center; place-content: center; pointer-events: none; opacity: 0; transform: rotate(-7deg) scale(.6); transition: opacity .25s ease-in, transform .3s ease-in; }
.koeck-mandel .km-stoerer::before, .koeck-mandel .km-stoerer::after { content: ""; position: absolute; inset: 14.6%; border-radius: 10%; transform: rotate(45deg); }
.koeck-mandel .km-stoerer::before { background: var(--g); }
.koeck-mandel .km-stoerer::after { inset: 16.8%; border: 1px solid #fff; border-radius: 7%; }
.koeck-mandel .km-stoerer span { position: relative; z-index: 1; font: 400 calc(var(--km-sw, 120px) * .15)/1.05 var(--serif); letter-spacing: -.01em; text-align: center; color: #000; }
.koeck-mandel .km-stoerer.km-an { opacity: 1; transform: rotate(-7deg); transition: opacity .3s ease-out, transform .6s cubic-bezier(.34, 1.56, .64, 1); } /* springt kurz auf */

.koeck-mandel .km-scrollen { transition: opacity .3s ease; }

/* ---------- 2 · Text im Raster ---------- */
.koeck-mandel .km-text { padding: 0 var(--u) 0 calc(var(--u) * 3); } /* unter der Bühne ist schon Luft (Schatten, Rand) */
.koeck-mandel .km-absatz { position: relative; top: calc(var(--c) * 3 / 4 - .34em); max-width: 36em; font: 400 clamp(15px, calc(var(--c) * .35), 17px)/calc(var(--c) / 2) var(--sans); hyphens: manual; text-wrap: pretty; } /* keine Silbentrennung („be-streut“, „unwidersteh-lich“ sahen schlecht aus) */
.koeck-mandel .km-absatz + .km-absatz { margin-top: calc(var(--c) / 2); }
.koeck-mandel .km-absatz strong { --sm-streifen: calc(var(--c) / 4); }

/* Video im Hochformat, über ganze Zellen (erst da, wenn es hochgeladen ist) */
.koeck-mandel .km-video { width: calc(var(--c) * 5); height: calc(var(--c) * 9); margin-top: var(--c); background: #fff; box-shadow: 0 0 0 1px var(--g); } /* Hochformat über 5 × 9 ganze Zellen (9:16 fast genau, „cover“ schneidet höchstens 1–2 %) */
.koeck-mandel .km-video video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Tablet hoch: große Zellen (75–102 px) – Unterzeile größer, Schritte und Text mit halben bzw. Viertel-Linien wie beim Steirer Loab */
@media (min-width: 600px) and (max-width: 820px) {
	.koeck-mandel .km-unter { font-size: clamp(20px, calc(var(--c) * .27), 26px); max-width: 20em; }
	.koeck-mandel .km-schritte { height: var(--c); }
	.koeck-mandel .km-schritt { top: calc(var(--c) / 4 - .3375em); font-size: calc(var(--c) * .4); line-height: calc(var(--c) / 2); }
	.koeck-mandel .km-absatz { top: calc(var(--c) * 3 / 8 - .34em); font-size: clamp(15px, calc(var(--c) * .195), 19px); line-height: calc(var(--c) / 4); max-width: 30em; }
	.koeck-mandel .km-absatz + .km-absatz { margin-top: calc(var(--c) / 4); }
	.koeck-mandel .km-absatz strong { --sm-streifen: calc(var(--c) / 8); }
}

/* ---------- Desktop: wie das Kärtchen in der Übersicht ---------- */
@media (min-width: 821px) {
	.koeck-mandel .km-kopf { position: absolute; left: calc(var(--u) * 3); top: calc(var(--c) * 3); width: calc(var(--u) * 16); padding: 0; }
	.koeck-mandel .km-titel { font-size: calc(var(--c) * 1.8); line-height: calc(var(--c) * 2); top: calc(var(--c) - .3375em); } /* wie im Kärtchen: zwei große Zeilen, je zwei Zellen */
	.koeck-mandel .km-unter { font-size: clamp(15px, calc(var(--c) * .37), 22px); }
	.koeck-mandel .km-schritte { position: absolute; left: calc(var(--u) * 3); top: var(--km-st, calc(var(--c) * 8)); width: calc(var(--u) * 15); margin: 0; }
	.koeck-mandel .km-schritt { font-size: clamp(30px, calc(var(--c) * .72), 46px); }
	.koeck-mandel .km-text { display: grid; grid-template-columns: repeat(48, var(--u)); align-items: start; padding: 0; }
	.koeck-mandel .km-absatz { grid-column: 4 / 22; grid-row: 1; max-width: 30em; } /* höchstens rund 72 Zeichen je Zeile */
	.koeck-mandel .km-absatz + .km-absatz { grid-column: 26 / 44; margin-top: 0; }
	.koeck-mandel .km-video { grid-column: 26 / 36; grid-row: 2; width: auto; margin-top: calc(var(--c) * 2); }
}
/* Querformat am Handy: niedrige Bühne – Schritte direkt unter dem Titel */
@media (min-width: 821px) and (max-height: 520px) {
	.koeck-mandel .km-kopf { top: calc(var(--c) * 2); }
	.koeck-mandel .km-titel { top: calc(var(--c) / 2 - .3375em); font-size: calc(var(--c) * 1.05); line-height: var(--c); } /* niedrige Fenster: eine Zelle je Zeile */
}

/* Querformat bis 820 px (Handy quer, Zoom 200 %): die großen Handy-Zellen passen nicht übereinander – feinerer Raster
   (32 Felder) und Bühne nebeneinander wie am Desktop; mandel.js setzt km-quer */
@media (max-width: 820px) {
	.koeck-mandel.km-quer { --u: calc((100vw - var(--scrollbar-width, 0px)) / 32); }
	.koeck-mandel.km-quer .km-kopf { position: absolute; left: calc(var(--u) * 3); top: calc(var(--c) * 2); width: calc(var(--u) * 13); padding: 0; }
	.koeck-mandel.km-quer .km-titel { font-size: calc(var(--c) * 1.05); }
	.koeck-mandel.km-quer .km-unter { font-size: clamp(15px, calc(var(--c) * .37), 20px); }
	.koeck-mandel.km-quer .km-schritte { position: absolute; left: calc(var(--u) * 3); top: var(--km-st, calc(var(--c) * 6)); width: calc(var(--u) * 13); height: var(--c); margin: 0; }
	.koeck-mandel.km-quer .km-schritt { font-size: clamp(22px, calc(var(--c) * .6), 30px); }
	.koeck-mandel.km-quer .km-absatz { top: calc(var(--c) * 3 / 4 - .34em); max-width: 30em; font-size: clamp(15px, calc(var(--c) * .35), 17px); line-height: calc(var(--c) / 2); } /* nicht die Viertel-Linien vom Tablet hoch */
	.koeck-mandel.km-quer .km-absatz + .km-absatz { margin-top: calc(var(--c) / 2); }
	.koeck-mandel.km-quer .km-absatz strong { --sm-streifen: calc(var(--c) / 4); }
}

/* Tablet hoch (600–820 px): feinerer Raster (32 Felder) statt der großen Handy-Zellen, Aufbau wie am Handy; mandel.js setzt km-fein */
@media (min-width: 600px) and (max-width: 820px) {
	.koeck-mandel.km-fein { --u: calc((100vw - var(--scrollbar-width, 0px)) / 32); }
	.koeck-mandel.km-fein .km-titel { top: calc(var(--c) - .3375em); font-size: calc(var(--c) * 1.8); line-height: calc(var(--c) * 2); }
	.koeck-mandel.km-fein .km-unter { max-width: none; font-size: clamp(16px, calc(var(--c) * .41), 20px); }
	.koeck-mandel.km-fein .km-schritte { height: calc(var(--c) * 2); }
	.koeck-mandel.km-fein .km-schritt { top: calc(var(--c) / 2 - .3375em); font-size: clamp(26px, calc(var(--c) * .66), 34px); line-height: var(--c); }
	.koeck-mandel.km-fein .km-absatz { top: calc(var(--c) * 3 / 4 - .34em); font-size: clamp(15px, calc(var(--c) * .35), 17px); line-height: calc(var(--c) / 2); max-width: 30em; }
	.koeck-mandel.km-fein .km-absatz + .km-absatz { margin-top: calc(var(--c) / 2); }
	.koeck-mandel.km-fein .km-absatz strong { --sm-streifen: calc(var(--c) / 4); }
}

/* ---------- Bewegung reduzieren: das fertige Bild, die Schritte als ruhige Liste ---------- */
.koeck-mandel.km-ruhig .km-buehne { position: relative; height: auto; min-height: var(--km-h, 100svh); overflow: visible; background: none; }
.koeck-mandel.km-ruhig .km-gitter--buehne { visibility: hidden; } /* steht nicht: der Raster der Fläche läuft durch */
.koeck-mandel.km-ruhig .km-schritte { height: auto; }
.koeck-mandel.km-ruhig .km-schritt { position: relative; top: calc(var(--c) * 3 / 4 - .34em); opacity: 1; font: 400 clamp(16px, calc(var(--c) * .37), 19px)/calc(var(--c) / 2) var(--sans); transition: none; }
.koeck-mandel.km-ruhig .km-schritt::before { content: counter(list-item) "  "; }
.koeck-mandel.km-ruhig .km-label, .koeck-mandel.km-ruhig .km-stern { opacity: 1; transform: none; transition: none; }
.koeck-mandel.km-ruhig .km-stoerer { opacity: 1; transform: rotate(-7deg); transition: none; }
.koeck-mandel.km-ruhig .km-linien path { stroke-dashoffset: 0; transition: none; }
.koeck-mandel.km-ruhig .km-scrollen { display: none; }

@media print {
	.koeck-mandel .km-buehne { position: relative; height: auto; }
	.koeck-mandel .km-scrollen { 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) {
	.koeck-mandel .km-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); font-size: clamp(calc(15px * var(--sm-x, 1)), calc(var(--c) * .37), calc(22px * var(--sm-x, 1))); }
	.koeck-mandel .km-schritt { left: 0; right: 0; top: calc(var(--c) / 2 - .3375em); font: 300 clamp(calc(26px * var(--sm-x, 1)), calc(var(--c) * .66), calc(34px * var(--sm-x, 1)))/var(--c) var(--serif); font-size: clamp(calc(30px * var(--sm-x, 1)), calc(var(--c) * .72), calc(46px * var(--sm-x, 1))); }
	.koeck-mandel .km-label { left: 0; top: 0; width: min-content; font: 400 clamp(calc(15px * var(--sm-x, 1)), calc(var(--c) * .34), calc(24px * var(--sm-x, 1)))/calc(var(--c) / 2) var(--serif); }
	.koeck-mandel .km-stoerer { left: 0; top: 0; width: var(--km-sw, calc(120px * var(--sm-x, 1))); height: var(--km-sw, calc(120px * var(--sm-x, 1))); }
	.koeck-mandel .km-stoerer span { font: 400 calc(var(--km-sw, calc(120px * var(--sm-x, 1))) * .15)/1.05 var(--serif); }
	.koeck-mandel .km-absatz { 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); max-width: 30em; }
	.koeck-mandel.km-ruhig .km-schritt { top: calc(var(--c) * 3 / 4 - .34em); font: 400 clamp(calc(16px * var(--sm-x, 1)), calc(var(--c) * .37), calc(19px * var(--sm-x, 1)))/calc(var(--c) / 2) var(--sans); }
}