/*
 * Eigene Story „Walnuss-Roggi.“ – alles im Namensraum .koeck-roggi (Präfix kr-), Vorlage template-parts/stories/eigen/roggi.php.
 *
 * Raster: derselbe Köck-Raster wie in der Übersicht (.sm-raster: Feld --u, Zelle --c = 2 Felder, ein Feld Rand, Farbe --g
 * aus der Übersicht), nie auf Schwarz. Er trägt Kopf und Text (.kr-flaeche) und schließt danach mit einer Linie.
 * Text im Raster wie in der Übersicht (stories-magazin.css „Titel, Unterzeile … genau im Raster“): Beginn auf einer
 * senkrechten Linie (ungerades Feld), jede Grundlinie auf einer Rasterlinie (Grundlinie = Zeilenhöhe/2 + 0,34 em; Titel
 * 0,3375 em), Blöcke ganze Zellen hoch (roggi.js rundet, data-kr-zelle).
 * Handy zuerst (bis 820 px, 8 Zellen breit); ab 821 px wie das Kärtchen der Übersicht (24 Zellen), darüber zwei weiße
 * Zeilen für Logo und Schließen – so wächst beim Öffnen der Raster aus dem Kärtchen, und alles bleibt an seinem Platz.
 */
.koeck-roggi { background: #fff; color: #000; }
.koeck-roggi p { margin: 0; }

/* ---------- Rasterfläche ---------- */
.koeck-roggi .kr-flaeche { position: relative; isolation: isolate; padding-bottom: calc(var(--c) * 2); }
.koeck-roggi .kr-gitter { position: absolute; inset: calc(var(--c) * 2) 0 0; z-index: -1; }
.koeck-roggi .kr-gitter::before { -webkit-mask-repeat: repeat; mask-repeat: repeat; } /* Zellen nie stauchen oder dehnen – die Höhe rundet roggi.js */ /* nur der Raster (Übergang: wächst aus dem Kärtchen und wird mehr); oben eine Zelle weiß für Logo und Schließen */

/* ---------- 1 · Kopf ---------- */
.koeck-roggi .kr-held { padding-top: calc(var(--c) * 2); --kh: clamp(calc(var(--c) * 8), round(down, calc(100svh - var(--c) * 3), var(--c)), calc(var(--c) * 11)); } /* Roggi groß: fast so hoch wie das Fenster (ab dem Titel scrollt man hinein) */
.koeck-roggi .kr-kopf { padding: 0 var(--u) 0 calc(var(--u) * 3); } /* links auf Feld 3, rechts bis an den Rand: mehr Platz für den großen Titel */
/* Titel groß über zwei Rasterzeilen je Zeile („Walnuss-“ / „Roggi.“), Grundlinien auf Linien */
.koeck-roggi .kr-titel { position: relative; top: calc(var(--c) - .3375em); margin: 0; padding: 0; font: 300 calc(var(--c) * 1.6)/calc(var(--c) * 2) var(--serif); letter-spacing: -.02em; text-transform: none; hyphens: manual; }
/* Unterzeile in der Acumin, größer – halbe Zelle Zeilenabstand */
.koeck-roggi .kr-unter { position: relative; top: calc(var(--c) * 3 / 4 - .34em); max-width: 16em; font: 400 clamp(16px, var(--c) * .41, 20px)/calc(var(--c) / 2) var(--sans); text-wrap: pretty; }

/* Bühne: das Roggi (ganze Zellen hoch, oben auf einer Linie) mit den Punkten; die Wippe kippt beides um die Spitze */
.koeck-roggi .kr-buehne { display: flex; justify-content: center; margin-top: var(--c); }
.koeck-roggi .kr-wippe { position: relative; height: var(--kh); aspect-ratio: 1060 / 1800; transform-origin: 52% 92%; translate: calc(var(--kh) * 1060 / 1800 * -.12) 0; } /* das Brot sitzt im freigestellten Foto rechts der Mitte – so steht es mittig */
.koeck-roggi .kr-roggi { display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.koeck-roggi .kr-roggi:focus-visible { outline: 2px solid #000; outline-offset: 6px; }
.koeck-roggi .kr-roggi-bild, .koeck-roggi .kr-roggi-bild img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Punkte am Brot: 44 px Tippfläche, sichtbar ein weißer Punkt mit Ring – zeigt „hier gibt es mehr“ */
.koeck-roggi .kr-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-roggi .kr-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-roggi .kr-punkt::after { content: ""; position: absolute; inset: 13px; border-radius: 50%; border: 1.5px solid #fff; opacity: 0; pointer-events: none; }
.koeck-roggi .kr-punkt:active::before { transform: scale(.85); }
.koeck-roggi .kr-punkt[aria-expanded="true"]::before { background: #000; box-shadow: 0 0 0 1.5px #fff, 0 1px 6px rgba(0, 0, 0, .25); }
.koeck-roggi .kr-punkt:focus-visible { outline: 2px solid #000; outline-offset: 2px; box-shadow: 0 0 0 2px #fff; } /* Doppelring: auch auf dunkler Kruste sichtbar */
@media (hover: hover) and (pointer: fine) { .koeck-roggi .kr-punkt:hover::before { transform: scale(1.25); } }

/* Seite wechseln, wenn links zu wenig Platz ist (roggi.js setzt kr-punkt--um und --kr-max) */
.koeck-roggi .kr-punkt--um .kr-info { right: auto; left: calc(50% + 22px); }
.koeck-roggi .kr-punkt--um .kr-info::after { left: auto; right: 100%; }
.koeck-roggi .kr-punkt--um:not([aria-expanded="true"]) .kr-info { transform: translate(-6px, calc(-50% + var(--kr-dy, 0px))); }
/* Overlay mit der Beschriftung aus dem Heft: neben dem Punkt, auf Weiß, mit kurzem Strich zum Punkt */
.koeck-roggi .kr-info { position: absolute; top: 50%; right: calc(50% + 22px); width: max-content; max-width: min(var(--kr-max, 100vw), 58vw, 15em); 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; transform: translate(6px, calc(-50% + var(--kr-dy, 0px))); pointer-events: none; transition: opacity .2s ease, transform .25s var(--ease-out); }
.koeck-roggi .kr-info::after { content: ""; position: absolute; top: calc(50% - var(--kr-dy, 0px)); left: 100%; width: 13px; height: 1.5px; background: #000; } /* Strich zum Punkt */
.koeck-roggi .kr-punkt[aria-expanded="true"] .kr-info { opacity: 1; transform: translate(0, calc(-50% + var(--kr-dy, 0px))); pointer-events: auto; }
/* ohne JavaScript: Beschriftung beim Darüberfahren bzw. Fokus */
.koeck-roggi:not(.kr-js) .kr-punkt:is(:hover, :focus) .kr-info { opacity: 1; transform: translate(0, -50%); }
.koeck-roggi .kr-punkt[aria-expanded="true"] { z-index: 3; }

/* ---------- 2 · Text, noch im Raster ---------- */
.koeck-roggi .kr-text { padding: var(--c) var(--u) 0 calc(var(--u) * 3); }
.koeck-roggi .kr-h2 { position: relative; top: calc(var(--c) - .3375em); margin: 0; padding: 0; font: 300 calc(var(--c) * 1.4)/calc(var(--c) * 2) var(--serif); letter-spacing: -.02em; text-transform: none; hyphens: manual; }
.koeck-roggi .kr-h2 { --sm-streifen: calc(var(--c) / 2); } /* Hervorhebung (stories-magazin.css) genau im Raster: halbe Zelle, von der Grundlinie bis zur halben Linie */
.koeck-roggi .kr-spalten { margin-top: var(--c); margin-right: calc(var(--u) / 2); } /* Fließtext endet vor der Randlinie */
.koeck-roggi .kr-spalten p { position: relative; top: calc(var(--c) * 3 / 4 - .34em); font: 400 clamp(15px, var(--c) * .35, 17px)/calc(var(--c) / 2) var(--sans); hyphens: auto; }
.koeck-roggi .kr-spalten p + p { margin-top: calc(var(--c) / 2); }

/* ---------- 3 · Fotos auf Weiß ---------- */
.koeck-roggi .kr-fotos { display: grid; gap: 16px; justify-items: center; margin: 56px max(16px, var(--u)) 0; }
.koeck-roggi .kr-foto { margin: 0; }
.koeck-roggi .kr-foto img { display: block; width: auto; max-width: 100%; height: auto; max-height: 92svh; } /* Hochformat: ganz im Fenster */
.koeck-roggi .sm-naechste { margin-top: 96px; }
@media (min-width: 600px) { .koeck-roggi .kr-fotos--paar { grid-template-columns: 1fr 1fr; align-items: start; } } /* zwei Roggis nebeneinander: jedes ein Unikat */

/* ---------- Tablet hoch (große Zellen) ---------- */
@media (min-width: 600px) and (max-width: 820px) {
	.koeck-roggi .kr-titel { font-size: calc(var(--c) * 1.05); line-height: var(--c); top: calc(var(--c) / 2 - .3375em); } /* eine Zelle pro Zeile – die Zeilen gehören zusammen */
	.koeck-roggi .kr-held { padding-top: calc(var(--c) * 2); --kh: clamp(calc(var(--c) * 4), round(down, calc(100svh - var(--c) * 5), var(--c)), calc(var(--c) * 8)); /* Titel im Raster: der beginnt zwei Zellen tiefer */ }
	.koeck-roggi .kr-h2 { font-size: calc(var(--c) * 1.05); line-height: var(--c); top: calc(var(--c) / 2 - .3375em); } /* so groß wie der Titel, nicht größer */
	.koeck-roggi .kr-spalten { max-width: 32em; }
	.koeck-roggi .kr-unter { font-size: 30px; max-width: 18em; } /* große Zellen (halbe Zelle 38–51 px): größere Schrift, sonst wirkt der Zeilenabstand leer */
	.koeck-roggi .kr-spalten p { font-size: 23px; }
}
/* Handy quer / niedrige Fenster: Roggi ganz im Fenster */
@media (max-height: 520px) and (max-width: 820px) {
	.koeck-roggi .kr-held { --kh: max(calc(var(--c) * 4), round(down, calc(100svh - var(--c) * 1.5), var(--c))); }
	.koeck-roggi .kr-titel { font-size: var(--c); line-height: var(--c); top: calc(var(--c) / 2 - .3375em); }
}

/* ---------- ab 821 px: wie das Kärtchen in der Übersicht ---------- */
@media (min-width: 821px) {
	.koeck-roggi .kr-gitter { top: calc(var(--c) * 2); } /* zwei weiße Zeilen für Logo und Schließen, wie über dem Kärtchen */
	.koeck-roggi .kr-held { --kh: clamp(calc(var(--c) * 8), round(down, calc(100svh - var(--c) * 1.5), var(--c)), calc(var(--c) * 14)); position: relative; height: calc(var(--kh) + var(--c) * 2); padding: 0; } /* wie im Kärtchen 14 Zellen – in niedrigen Fenstern weniger, damit das Roggi ganz zu sehen ist */
	.koeck-roggi .kr-kopf { position: absolute; left: calc(var(--u) * 3); top: calc(var(--c) * 3); width: calc(var(--u) * 18); padding: 0; } /* wie .sm-text im Kärtchen: Feld 4 bis 21, ab der zweiten Rasterzeile */
	.koeck-roggi .kr-titel { top: calc(var(--c) / 2 - .3375em); font-size: calc(var(--c) * 16 / 15); line-height: var(--c); }
	.koeck-roggi .kr-unter { font-size: clamp(16px, var(--c) * .37, 22px); }
	/* das Roggi wie im Kärtchen: 14 Zellen hoch, rechts bündig auf Feld 36, ragt 1,5 Zellen über den Raster */
	.koeck-roggi .kr-buehne { position: absolute; top: calc(var(--c) / 2); left: calc(var(--u) * 36 - var(--kh) * 1060 / 1800); margin: 0; display: block; }
	.koeck-roggi .kr-info { right: auto; left: calc(50% + 22px); transform: translate(-6px, calc(-50% + var(--kr-dy, 0px))); max-width: min(var(--kr-max, 100vw), var(--u) * 11); font-size: 20px; } /* rechts vom Punkt: dort ist Platz */
	.koeck-roggi .kr-punkt[aria-expanded="true"] .kr-info { transform: translate(0, calc(-50% + var(--kr-dy, 0px))); }
	.koeck-roggi .kr-info::after { left: auto; right: 100%; }
	.koeck-roggi .kr-punkt--um .kr-info { left: auto; right: calc(50% + 22px); }
	.koeck-roggi .kr-punkt--um .kr-info::after { right: auto; left: 100%; }
	.koeck-roggi .kr-punkt--um:not([aria-expanded="true"]) .kr-info { transform: translate(6px, calc(-50% + var(--kr-dy, 0px))); }
	/* Text: Überschrift ab Feld 4, Absätze ab Feld 26 (20 Felder ≈ 65–75 Zeichen) */
	.koeck-roggi .kr-text { display: grid; grid-template-columns: repeat(48, var(--u)); align-items: start; padding: 0; }
	.koeck-roggi .kr-h2 { grid-column: 4 / 24; font-size: calc(var(--c) * 32 / 15); }
	.koeck-roggi .kr-spalten { grid-column: 26 / 46; margin: 0; }
	.koeck-roggi .kr-spalten p { font-size: clamp(15px, var(--c) * .33, 19px); } /* bei kleinen Zellen kleiner, damit die halbe Zelle als Zeilenabstand reicht */
	.koeck-roggi .kr-fotos { margin: 120px calc(var(--u) * 3) 0; }
	.koeck-roggi .kr-fotos--paar { column-gap: var(--c); }
	.koeck-roggi .sm-naechste { margin-top: 160px; }
}
@media (min-width: 821px) and (max-width: 1180px) {
	/* der Titel steht hier wie im Kärtchen in einer Zeile – die Zwischenüberschrift nicht größer als er */
	.koeck-roggi .kr-h2 { font-size: calc(var(--c) * 16 / 15); line-height: var(--c); top: calc(var(--c) / 2 - .3375em); }
}
/* Kurzer Titel über zwei Rasterzeilen wie in der Übersicht (ab 1181 px) */
@media (min-width: 1181px) {
	.koeck-roggi .kr-titel { top: calc(var(--c) - .3375em); font-size: calc(var(--c) * 32 / 15); line-height: calc(var(--c) * 2); letter-spacing: -.025em; }
}

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: no-preference) {
	/* direkt geöffnet: das Roggi wird hingestellt (senkt sich, wackelt einmal nach); beim Übergang fliegt es schon */
	html:not(.sm-vt) .koeck-roggi.kr-js .kr-wippe { animation: kr-hin 1.1s cubic-bezier(.2, .8, .2, 1) both; }
	html:not(.sm-vt) .koeck-roggi.kr-js .kr-titel, html:not(.sm-vt) .koeck-roggi.kr-js .kr-unter { opacity: 0; transition: opacity .6s ease; } /* nur einblenden, nicht schieben: die Zeilen stehen immer auf dem Raster */
	html:not(.sm-vt) .koeck-roggi.kr-js .kr-unter { transition-delay: .1s; }
	html .koeck-roggi.kr-js.kr-da .kr-titel, html .koeck-roggi.kr-js.kr-da .kr-unter { opacity: 1; } /* „html“: muss die Regel darüber (html:not(.sm-vt) …) überstimmen */
	/* die Punkte erscheinen nach dem Hinstellen bzw. dem Flug und pulsieren zweimal: „hier gibt es mehr“ */
	.koeck-roggi.kr-js .kr-punkt { opacity: 0; transform: scale(.4); transition: opacity .3s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(.6s + var(--n) * .15s); }
	.koeck-roggi.kr-js.kr-da .kr-punkt { opacity: 1; transform: none; }
	.koeck-roggi.kr-js.kr-da .kr-punkt::after { animation: kr-puls 1.6s ease-out calc(1.1s + var(--n) * .15s) 2; }
	/* Einblenden beim Scrollen – nur wenn roggi.js läuft (kr-io); sonst bleibt alles sichtbar */
	/* An der Leselinie (roggi.js → jhSmAuf): hinein ruhig und gestaffelt, zurück zügig ohne Verzögerung (1.57.0) */
	.koeck-roggi.kr-io .kr-auf { opacity: 0; transition: opacity .45s cubic-bezier(.23, 1, .32, 1); transition-delay: 0s; } /* nur einblenden – geschoben stünde der Text kurz neben den Rasterlinien */
	.koeck-roggi.kr-io .kr-auf.kr-sicht { opacity: 1; transition-duration: 1.1s; transition-delay: calc(var(--sm-stufe, 0) * 100ms); }
}
@keyframes kr-hin {
	0% { opacity: 0; transform: translateY(-28px) rotate(-3deg); }
	45% { opacity: 1; transform: translateY(0) rotate(2.4deg); }
	65% { transform: rotate(-1.4deg); }
	82% { transform: rotate(.6deg); }
	100% { transform: none; }
}
@keyframes kr-puls { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }

/* Drucken: Raster weg, Beschriftungen sichtbar unter dem Roggi */
@media print {
	.koeck-roggi .kr-gitter, .koeck-roggi .sm-naechste, .koeck-roggi .kr-punkt::before, .koeck-roggi .kr-punkt::after { display: none !important; }
	.koeck-roggi .kr-titel, .koeck-roggi .kr-unter, .koeck-roggi .kr-auf, .koeck-roggi .kr-punkt { opacity: 1 !important; transform: none !important; }
	.koeck-roggi .kr-wippe { animation: none !important; rotate: none !important; height: 50vh; }
	.koeck-roggi .kr-held { height: auto !important; break-inside: avoid-page; }
	.koeck-roggi .kr-kopf, .koeck-roggi .kr-buehne { position: static !important; }
	.koeck-roggi .kr-punkt { position: static; display: block; width: auto; height: auto; margin: 8px 0 0; }
	.koeck-roggi .kr-info { position: static; opacity: 1; transform: none; box-shadow: none; padding: 0; max-width: none; }
	.koeck-roggi .kr-info::after { 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-roggi .kr-unter { top: calc(var(--c) * 3 / 4 - .34em); max-width: 16em; font: 400 clamp(calc(16px * var(--sm-x, 1)), var(--c) * .41, calc(20px * var(--sm-x, 1)))/calc(var(--c) / 2) var(--sans); font-size: clamp(calc(16px * var(--sm-x, 1)), var(--c) * .37, calc(22px * var(--sm-x, 1))); }
	.koeck-roggi .kr-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-roggi .kr-punkt::before { inset: calc(13px * var(--sm-x, 1)); }
	.koeck-roggi .kr-punkt::after { inset: calc(13px * var(--sm-x, 1)); }
	.koeck-roggi .kr-info { top: 50%; 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); right: auto; left: calc(50% + calc(22px * var(--sm-x, 1))); max-width: min(var(--kr-max, 100vw), var(--u) * 11); font-size: calc(20px * var(--sm-x, 1)); }
	.koeck-roggi .kr-info::after { top: calc(50% - var(--kr-dy, 0px)); width: calc(13px * var(--sm-x, 1)); height: 1.5px; left: auto; right: 100%; }
	.koeck-roggi .kr-spalten p { top: calc(var(--c) * 3 / 4 - .34em); font: 400 clamp(calc(15px * var(--sm-x, 1)), var(--c) * .35, calc(17px * var(--sm-x, 1)))/calc(var(--c) / 2) var(--sans); font-size: clamp(calc(15px * var(--sm-x, 1)), var(--c) * .33, calc(19px * var(--sm-x, 1))); }
	.koeck-roggi .kr-fotos { gap: calc(16px * var(--sm-x, 1)); margin: calc(120px * var(--sm-x, 1)) calc(var(--u) * 3) 0; }
	.koeck-roggi .kr-punkt--um .kr-info { left: auto; right: calc(50% + calc(22px * var(--sm-x, 1))); }
	.koeck-roggi .sm-naechste { margin-top: calc(160px * var(--sm-x, 1)); }
}