/* Strudel in sechs Schritten (Frontend und Editor) – nach .spirale-erklaert/.phase/.windung im Prototyp (fk.css) */

.fk-spirale-erklaert { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; }

/* Bühne: die Spirale bleibt stehen, während die Schritte vorbeiziehen */
.fk-spirale-erklaert__buehne { position: sticky; top: calc(var(--header-hoehe) + 2rem); box-sizing: border-box; aspect-ratio: 1; max-height: 78vh; }
.admin-bar .fk-spirale-erklaert__buehne { top: calc(var(--header-hoehe) + 32px + 2rem); }
.fk-spirale-erklaert__buehne svg { display: block; width: 100%; height: 100%; overflow: visible; }

.fk-windung { fill: none; stroke: var(--linie-stark); stroke-width: 1.2; transition: stroke .6s, stroke-width .6s, opacity .6s; }
.fk-windung.ist-aktiv { stroke: var(--akzent); stroke-width: 2.4; }
.fk-windung-punkt { fill: var(--navy); opacity: .25; transition: fill .6s, opacity .6s; }
.fk-windung-punkt.ist-aktiv { fill: var(--akzent); opacity: 1; }
.fk-windung-punkt.ist-vorbei { opacity: .7; }
.fk-windung-mitte { fill: var(--akzent); }
.fk-windung-label { font-family: var(--etikett-schrift); font-size: calc(11px * var(--etikett-mass)); letter-spacing: calc(.08em * var(--sperrung)); fill: var(--text-leise); text-transform: var(--versalien); opacity: 0; transition: opacity .5s; }
.fk-windung-label.ist-aktiv { opacity: 1; fill: var(--akzent); }

/* Klickbare Spirale: unsichtbare Trefferflächen über der Zeichnung (render.php). Überfahren oder
   Fokus zeigt die Beschriftung und hebt Punkt und Windung hervor (view.js setzt .ist-hover). */
.fk-windung-link { cursor: pointer; outline: none; }
.fk-windung-treffer { fill: transparent; stroke: transparent; pointer-events: all; }
path.fk-windung-treffer { fill: none; stroke-width: 16; pointer-events: stroke; }
text.fk-windung-treffer { font-family: var(--etikett-schrift); font-size: calc(11px * var(--etikett-mass)); letter-spacing: calc(.08em * var(--sperrung)); text-transform: var(--versalien); }
.fk-windung-link:focus-visible .fk-windung-treffer--punkt { stroke: var(--akzent); stroke-width: 2; }
.fk-windung.ist-hover:not(.ist-aktiv) { stroke: var(--text-leise); }
.fk-windung-punkt.ist-hover { opacity: 1; }
.fk-windung-label.ist-hover { opacity: 1; }
.fk-phase:focus { outline: none; } /* Ziel der Spirale-Links, selbst nicht bedienbar */

/* Die sechs Schritte – ohne JavaScript (und im Editor) eine Liste untereinander */
.fk-spirale-erklaert__rechts { min-width: 0; }
.fk-spirale-erklaert__phasen { list-style: none; margin: 0; padding: 0; }
.fk-phase { display: flex; flex-direction: column; justify-content: center; margin: 0; padding-block: var(--s-6); }

/* Mit JavaScript ein Stapel: alle Karten in derselben Rasterzelle, sichtbar ist nur die aktive. Beim
   Wechsel gleitet sie in Scrollrichtung herein, die alte hinaus. Die Höhe richtet sich nach der längsten
   Karte, die Knöpfe darunter springen also nicht. Der Stapel hängt an „fk-js“ (setzt der <head> vor dem
   ersten Bild), nicht erst an .ist-stapel aus view.js: Sonst stünde beim Laden kurz die lange Liste da und
   die Seite würde um weit über 1000 px kürzer. Die erste Karte ist schon in render.php aktiv. Hat view.js den
   Stapel bis zum load-Ereignis nicht eingerichtet (Ladefehler), setzt der <head> ohne-stapel: wieder die Liste. */
:is(.fk-js .fk-strudel-schritte:not(.ohne-stapel), .fk-strudel-schritte.ist-stapel) .fk-spirale-erklaert { align-items: center; }
:is(.fk-js .fk-strudel-schritte:not(.ohne-stapel), .fk-strudel-schritte.ist-stapel) .fk-spirale-erklaert__buehne { position: relative; top: auto; }
:is(.fk-js .fk-strudel-schritte:not(.ohne-stapel), .fk-strudel-schritte.ist-stapel) .fk-spirale-erklaert__rechts { touch-action: pan-y; }
:is(.fk-js .fk-strudel-schritte:not(.ohne-stapel), .fk-strudel-schritte.ist-stapel) .fk-spirale-erklaert__phasen { display: grid; }
:is(.fk-js .fk-strudel-schritte:not(.ohne-stapel), .fk-strudel-schritte.ist-stapel) .fk-phase {
	grid-area: 1 / 1; justify-content: flex-start; padding-block: 0;
	opacity: 0; transform: translateY(1.75rem); visibility: hidden;
	transition: opacity .45s var(--bewegung), transform .6s var(--bewegung), visibility 0s .6s;
}
:is(.fk-js .fk-strudel-schritte:not(.ohne-stapel), .fk-strudel-schritte.ist-stapel) .fk-phase.ist-vorbei { transform: translateY(-1.75rem); }
:is(.fk-js .fk-strudel-schritte:not(.ohne-stapel), .fk-strudel-schritte.ist-stapel) .fk-phase.ist-aktiv {
	opacity: 1; transform: none; visibility: visible;
	transition: opacity .45s var(--bewegung) .1s, transform .6s var(--bewegung), visibility 0s;
}

/* Blättern: zwei runde Pfeilknöpfe unter der Karte */
.fk-schritt-steuerung { display: flex; gap: var(--s-2); margin: var(--s-6) 0 0; }
/* Ohne JavaScript blättert nichts – dann keine Knöpfe (die Liste steht vollständig da) */
html:not(.fk-js) .fk-strudel-schritte:not(.ist-stapel) .fk-schritt-steuerung, .fk-strudel-schritte.ohne-stapel .fk-schritt-steuerung { display: none; }
.fk-schritt-knopf {
	display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; cursor: pointer;
	font-size: 1.1rem; line-height: 1; color: var(--titel); background: var(--karte);
	border: 1px solid var(--linie-stark); border-radius: 50%; box-shadow: var(--schatten-karte);
	transition: border-color .2s, color .2s;
}
.fk-schritt-knopf:hover:not(:disabled) { border-color: var(--akzent); color: var(--akzent); }
.fk-schritt-knopf:disabled { opacity: .35; cursor: default; }
.fk-phase__nr { font-family: var(--etikett-schrift); font-size: calc(.8rem * var(--etikett-mass)); line-height: 1.4; color: var(--akzent); letter-spacing: calc(.1em * var(--sperrung)); margin: 0 0 var(--s-3); }
.fk-phase h3 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1.12; margin: 0 0 var(--s-3); }
.fk-phase__text { color: var(--text); max-width: 30rem; margin: 0 0 var(--s-4); }
.fk-phase__merkmale { display: flex; flex-wrap: wrap; gap: .4rem; margin: var(--s-2) 0 0; padding: 0; list-style: none; }
.fk-phase__merkmale li { font-family: var(--etikett-schrift); font-size: calc(.72rem * var(--etikett-mass)); line-height: 1.5; border: 1px solid var(--linie-stark); padding: .25rem .55rem; border-radius: 99px; color: var(--text-leise); margin: 0; }
.fk-phase__link { margin: var(--s-4) 0 0; }
/* Direkt unter dem Text reicht dessen Abstand (in der Flex-Spalte fallen Ränder nicht zusammen) –
   so steht der Link überall gleich weit über dem, was davor kommt, ob Text oder Merkmale. */
.fk-phase__text + .fk-phase__link { margin-top: 0; }

/* Schmale Bildschirme: Spirale klein oben angeheftet (Scheibe in --flaeche auf einem Band in der
   Farbe des Abschnitts, --flaeche-alt), die Schritte laufen darunter durch und verschwinden sauber unter dem Band */
@media (max-width: 56rem) {
	.fk-spirale-erklaert { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.fk-spirale-erklaert__buehne {
		--d: calc(min(38vh, 22rem) - 2rem); /* Durchmesser der Scheibe */
		top: var(--header-hoehe); z-index: 1;
		aspect-ratio: auto; max-height: none; height: calc(var(--d) + 2rem);
		margin-inline: calc(-1 * var(--rand));
		background: linear-gradient(to bottom, var(--flaeche-alt) calc(100% - 1.25rem), transparent);
	}
	.fk-spirale-erklaert__buehne::before {
		content: ''; position: absolute; top: .75rem; left: 50%;
		width: var(--d); height: var(--d); margin-left: calc(var(--d) / -2);
		border-radius: 50%; background: var(--flaeche); box-shadow: var(--schatten-karte);
	}
	.fk-spirale-erklaert__buehne svg {
		position: absolute; top: calc(.75rem + var(--d) * .06); left: 50%;
		width: calc(var(--d) * .88); height: calc(var(--d) * .88); margin-left: calc(var(--d) * -.44);
	}
	.admin-bar .fk-spirale-erklaert__buehne { top: calc(var(--header-hoehe) + 46px); }
	/* Die Scheibe ist klein – Beschriftung etwas größer, damit sie gerendert noch rund 10 px hat */
	.fk-windung-label, text.fk-windung-treffer { font-size: calc(14px * var(--etikett-mass)); }

	/* Stapel: Spirale oben als ruhiges Bild (nicht angeheftet), die Karte darunter */
	:is(.fk-js .fk-strudel-schritte:not(.ohne-stapel), .fk-strudel-schritte.ist-stapel) .fk-spirale-erklaert { gap: var(--s-5); }
	:is(.fk-js .fk-strudel-schritte:not(.ohne-stapel), .fk-strudel-schritte.ist-stapel) .fk-spirale-erklaert__buehne {
		height: auto; aspect-ratio: 1; width: min(100%, 20rem, 42svh); margin-inline: auto; background: none; z-index: auto;
	}
	:is(.fk-js .fk-strudel-schritte:not(.ohne-stapel), .fk-strudel-schritte.ist-stapel) .fk-spirale-erklaert__buehne::before { display: none; }
	:is(.fk-js .fk-strudel-schritte:not(.ohne-stapel), .fk-strudel-schritte.ist-stapel) .fk-spirale-erklaert__buehne svg { position: static; width: 100%; height: 100%; margin: 0; }
	:is(.fk-js .fk-strudel-schritte:not(.ohne-stapel), .fk-strudel-schritte.ist-stapel) .fk-spirale-erklaert__buehne :is(.fk-windung-label, text.fk-windung-treffer) { font-size: calc(12px * var(--etikett-mass)); }
	.fk-schritt-steuerung { justify-content: center; margin-top: var(--s-5); }
}
@media (min-width: 783px) and (max-width: 56rem) {
	.admin-bar .fk-spirale-erklaert__buehne { top: calc(var(--header-hoehe) + 32px); }
}

@media (prefers-reduced-motion: reduce) {
	.fk-phase, .fk-windung, .fk-windung-punkt, .fk-windung-label { transition: none; }
	:is(.fk-js .fk-strudel-schritte:not(.ohne-stapel), .fk-strudel-schritte.ist-stapel) .fk-phase, :is(.fk-js .fk-strudel-schritte:not(.ohne-stapel), .fk-strudel-schritte.ist-stapel) .fk-phase.ist-aktiv { transition: none; transform: none; }
}

/* Editor: Schritte untereinander ohne Leerraum, Spirale zeigt den Schritt, in dem der Cursor steht */
.fk-strudel-schritte--editor .fk-phase { min-height: 0; padding-block: var(--s-5); border-top: 1px var(--strich-art) var(--linie); }
.fk-strudel-schritte--editor .fk-phase:first-child { border-top: 0; }
.fk-strudel-schritte--editor .fk-phase.ist-aktiv { box-shadow: inset 3px 0 0 var(--akzent); padding-left: var(--s-4); }
.fk-strudel-schritte--editor .fk-spirale-erklaert__buehne { top: var(--s-5); }
.fk-strudel-schritte--editor .fk-phase__nr [data-rich-text-placeholder] { letter-spacing: 0; }
.fk-strudel-schritte__hinweis { font-family: var(--etikett-schrift); font-size: calc(.68rem * var(--etikett-mass)); color: var(--text-leise); margin: var(--s-2) 0 0; }