/* Krisenmodell (Frontend und Editor) – nach dem Modell-Teil von theorie.css im Prototyp.
   Schriftgrößen im Schaubild wie dort: Titel 16,5 px, Punkte 13,5 px, Rahmen-Beschriftung 13,5 px. */

/* ---------- Raster ---------- */
.fk-modell { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(18rem, 1fr); gap: var(--s-5); align-items: start; }
.fk-modell__flaeche { padding: var(--s-4); }
.fk-modell__flaeche svg { display: block; width: 100%; height: auto; overflow: visible; }
.fk-modell__werkzeug {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3);
	padding: var(--s-3) var(--s-5); border-top: 1px solid var(--buehne-linie);
	font-family: var(--etikett-schrift); font-size: calc(.7rem * var(--etikett-mass)); letter-spacing: calc(.06em * var(--sperrung)); color: var(--buehne-leise); text-transform: var(--versalien);
}
.fk-modell__legende { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.fk-modell__legende span { display: inline-flex; gap: .4rem; align-items: center; }
/* Randbreite und -art einzeln, nicht als „border: 1.5px solid“: Die Kurzschreibweise (0,1,1) setzte die Randfarbe
   auf currentColor zurück und schlug -ind/-team (0,1,0) – die Legende war in beiden Stilen grau statt grün und blau */
.fk-modell__legende i { width: .7rem; height: .7rem; border-radius: 2px; border-width: 1.5px; border-style: solid; box-sizing: border-box; }
.fk-modell__legende-ind { border-color: var(--buehne-akzent); background: color-mix(in srgb, var(--buehne-akzent) 12%, transparent); }
.fk-modell__legende-team { border-color: var(--team-tief); background: color-mix(in srgb, var(--team-tief) 12%, transparent); }
.fk-modell__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
/* Eigener Pause-Knopf, nur wenn die Seite sonst keinen hat (view.js) */
.fk-modell .fk-modell__pause { position: static; backdrop-filter: none; background: transparent; }
.fk-modell .fk-knopf--klein { padding: .55rem .9rem; font-size: .8rem; text-transform: none; letter-spacing: .01em; }
/* Text auf der Bernstein-Füllung: --auf-warnung (--auf-akzent wäre im Stil „Klinisch“ weiß, 3,1 : 1) */
.fk-modell .fk-knopf[aria-pressed='true'] { background: var(--warnung); border-color: var(--warnung); color: var(--auf-warnung); }
/* Ohne Skript tun Knopf und Leiste nichts – dann nicht zeigen (im Editor schon). Mit Skript stehen sie
   schon im ersten Bild (Klasse fk-js aus dem <head>), nicht erst, wenn view.js gelaufen ist. */
html:not(.fk-js) .fk-modell:not(.ist-interaktiv):not(.fk-modell--editor) [data-abspielen] { display: none; }

/* ---------- Elemente im Schaubild ---------- */
.fk-modell .fk-m-rahmen { fill: none; stroke: color-mix(in srgb, var(--buehne-leise) 28%, transparent); stroke-width: 1.2; stroke-dasharray: 3 5; }
.fk-modell .fk-m-rahmen--innen { fill: color-mix(in srgb, var(--buehne) 55%, transparent); stroke-dasharray: none; stroke: color-mix(in srgb, var(--buehne-leise) 20%, transparent); }
.fk-modell .fk-m-label-flaeche { fill: var(--buehne-hoch); stroke: color-mix(in srgb, var(--buehne-leise) 25%, transparent); stroke-width: 1; transition: fill .25s, stroke .25s; }
.fk-modell .fk-m-label { font-family: var(--schrift-titel); font-size: 13.5px; font-weight: 450; fill: var(--buehne-leise); }
.fk-modell .fk-m-label__titel { font-weight: calc(700 * var(--gewicht-mass)); fill: var(--buehne-titel); }
.fk-modell .fk-m-ebene { font-family: var(--etikett-schrift); font-size: calc(13px * var(--etikett-mass)); font-weight: 500; letter-spacing: calc(.16em * var(--sperrung)); text-transform: var(--versalien); }
.fk-modell .fk-m-ebene--ind { fill: var(--buehne-akzent); }
.fk-modell .fk-m-ebene--team { fill: var(--team); }

.fk-modell .fk-knoten { cursor: pointer; outline: none; }
.fk-modell .fk-knoten rect { stroke-width: 1.4; transition: fill .3s, stroke .3s, filter .3s; }
.fk-modell .fk-knoten__titel { font-family: var(--schrift-titel); font-weight: calc(650 * var(--gewicht-mass)); font-size: 16.5px; fill: var(--buehne-titel); pointer-events: none; }
.fk-modell .fk-knoten__punkt { font-family: var(--schrift-titel); font-size: 13.5px; font-weight: 400; fill: var(--buehne-text); pointer-events: none; }
.fk-modell .fk-knoten--ind rect { fill: color-mix(in srgb, var(--buehne-akzent) 7%, transparent); stroke: color-mix(in srgb, var(--buehne-akzent) 70%, transparent); }
.fk-modell .fk-knoten--team rect { fill: color-mix(in srgb, var(--team-tief) 8%, transparent); stroke: color-mix(in srgb, var(--team) 75%, transparent); }
/* Leuchten um die Kästen: nur auf der dunklen Bühne (--schmuck) */
.fk-modell .fk-knoten:hover rect { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--buehne-akzent) calc(35% * var(--schmuck)), transparent)); }
.fk-modell .fk-knoten--team:hover rect { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--team) calc(35% * var(--schmuck)), transparent)); }
.fk-modell .fk-knoten--ind[aria-pressed='true'] rect { fill: var(--buehne-akzent); stroke: var(--buehne-akzent); filter: drop-shadow(0 0 16px color-mix(in srgb, var(--buehne-akzent) calc(55% * var(--schmuck)), transparent)); }
.fk-modell .fk-knoten--team[aria-pressed='true'] rect { fill: var(--team); stroke: var(--team); filter: drop-shadow(0 0 16px color-mix(in srgb, var(--team) calc(50% * var(--schmuck)), transparent)); }
.fk-modell .fk-knoten[aria-pressed='true'] :is(.fk-knoten__titel, .fk-knoten__punkt) { fill: var(--auf-akzent); }
/* Bernstein als Linie und Fokusrahmen: --warnung-linie (≥ 3 : 1 auch auf der hellen Bühne); Füllungen bleiben --warnung */
.fk-modell .fk-knoten:focus-visible rect,
.fk-modell .fk-knoten:focus-visible .fk-m-label-flaeche { stroke: var(--warnung-linie); stroke-width: 2.5; }
.fk-modell .fk-knoten--ebene:focus-visible .fk-m-ebene { text-decoration: underline; text-decoration-color: var(--warnung-linie); text-underline-offset: 4px; }
.fk-modell .fk-knoten--rahmen:hover .fk-m-label-flaeche { stroke: var(--buehne-akzent); }
/* Gewählte Rahmen-Beschriftung: Bühnenfarben umgekehrt (Dunkel: weiß auf Nacht, Klinisch: Navy mit hellem Text) */
.fk-modell .fk-knoten--rahmen[aria-pressed='true'] .fk-m-label-flaeche { fill: var(--buehne-titel); stroke: var(--buehne-titel); }
/* Fokus bleibt sichtbar, auch wenn die Rahmen-Beschriftung gewählt ist (die Regel davor überschrieb ihn) */
.fk-modell .fk-knoten--rahmen[aria-pressed='true']:focus-visible .fk-m-label-flaeche { stroke: var(--warnung-linie); stroke-width: 2.5; }
.fk-modell .fk-knoten--rahmen[aria-pressed='true'] :is(.fk-m-label, .fk-m-label__titel) { fill: var(--buehne-tief); }
.fk-modell .fk-knoten--ebene:hover .fk-m-ebene,
.fk-modell .fk-knoten--ebene[aria-pressed='true'] .fk-m-ebene { text-decoration: underline; text-underline-offset: 4px; }
/* Der Kreis um den Strudel ist die Fläche des Zentrum-Knotens (anklickbar, zeigt die Auswahl) – kein Schmuck */
.fk-modell .fk-zentrum-halo { fill: color-mix(in srgb, var(--buehne-akzent) 6%, transparent); stroke: color-mix(in srgb, var(--buehne-akzent) 25%, transparent); stroke-width: 1; stroke-dasharray: 2 4; transition: fill .3s; transform-origin: 500px 330px; }
.fk-modell .fk-knoten--zentrum[aria-pressed='true'] .fk-zentrum-halo { fill: color-mix(in srgb, var(--buehne-akzent) 16%, transparent); stroke: var(--buehne-akzent); }
.fk-modell .fk-knoten--zentrum:focus-visible .fk-zentrum-halo { stroke: var(--warnung-linie); stroke-width: 2.5; stroke-dasharray: none; }
.fk-modell .fk-zentrum-spirale { transform-origin: 500px 330px; }
/* Drehen nur im Frontend (im Editor steht das Schaubild still) */
.fk-modell.ist-interaktiv .fk-zentrum-halo { animation: fk-modell-drehen 40s linear infinite; }
.fk-modell.ist-interaktiv .fk-zentrum-spirale { animation: fk-modell-drehen 60s linear infinite reverse; }
@keyframes fk-modell-drehen { to { transform: rotate(360deg); } }

.fk-modell .fk-pfeile path { stroke: var(--buehne-leise); stroke-width: 1.8; fill: none; transition: stroke .3s, stroke-width .3s; }
.fk-modell .fk-pfeile path.ist-heiss { stroke: var(--warnung-linie); stroke-width: 2.6; }
.fk-modell .fk-modell__spitze path { fill: var(--buehne-leise); }
.fk-modell .fk-fluss__linie { fill: none; stroke: var(--buehne-akzent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 16; opacity: 0; pointer-events: none; animation: fk-modell-fliessen linear infinite; animation-play-state: paused; }
@keyframes fk-modell-fliessen { to { stroke-dashoffset: -36; } }
.fk-modell.ist-fertig .fk-fluss__linie { opacity: .55; animation-play-state: running; }
.fk-modell .fk-fluss__linie.ist-heiss { stroke: var(--warnung-linie); opacity: 1; stroke-width: 3; }

/* ---------- Aufbau-Animation (nur mit Skript; .ist-fertig nimmt sie wieder weg) ---------- */
.fk-modell.ist-interaktiv:not(.ist-aufgebaut) :is(.fk-m-rahmen, .fk-knoten, .fk-zentrum-spirale circle) { opacity: 0; }
/* Schon ab dem ersten Bild ausgeblendet (fk-js aus dem <head>), nicht erst mit .ist-interaktiv aus view.js: Sonst stand
   das Schaubild im ersten Bild da und verschwand 150 ms später bis zum Aufbau. Die Pfeile bis dahin unsichtbar, denn
   ihre Länge für das Zeichnen misst erst view.js. Bei „Bewegung reduzieren“ baut view.js sofort fertig auf, dann bleibt
   es sichtbar. Hat view.js bis zum load-Ereignis nicht eingerichtet, setzt der <head> ohne-aufbau (inc/assets.php). */
@media (prefers-reduced-motion: no-preference) {
	.fk-js .fk-modell[data-modell]:not(.ist-aufgebaut):not(.ohne-aufbau):not(.fk-modell--editor) :is(.fk-m-rahmen, .fk-knoten, .fk-zentrum-spirale circle) { opacity: 0; }
	.fk-js .fk-modell[data-modell]:not(.ist-interaktiv):not(.ohne-aufbau):not(.fk-modell--editor) .fk-pfeile path { opacity: 0; }
}
.fk-modell.ist-interaktiv:not(.ist-aufgebaut) .fk-pfeile path { stroke-dasharray: var(--laenge); stroke-dashoffset: var(--laenge); }
.fk-modell.ist-aufgebaut:not(.ist-fertig) .fk-m-rahmen { animation: fk-modell-auftauchen .8s var(--bewegung) both; }
.fk-modell.ist-aufgebaut:not(.ist-fertig) .fk-knoten { animation: fk-modell-auftauchen .7s var(--bewegung) both; animation-delay: calc(.25s + var(--n, 0) * 90ms); }
.fk-modell.ist-aufgebaut:not(.ist-fertig) .fk-pfeile path { stroke-dasharray: var(--laenge); stroke-dashoffset: var(--laenge); animation: fk-modell-zeichnen .9s var(--bewegung) forwards; animation-delay: calc(1.1s + var(--n, 0) * 110ms); }
.fk-modell.ist-aufgebaut:not(.ist-fertig) .fk-zentrum-spirale circle { animation: fk-modell-auftauchen .5s var(--bewegung) both; animation-delay: calc(2.2s + var(--n, 0) * 45ms); }
@keyframes fk-modell-auftauchen { from { opacity: 0; } to { opacity: 1; } }
@keyframes fk-modell-zeichnen { to { stroke-dashoffset: 0; } }
/* „Animation anhalten“ gilt nicht für den einmaligen Aufbau – den schließt view.js dann sofort ab */

/* ---------- Erklärtexte ---------- */
.fk-modell__panels { position: sticky; top: calc(var(--header-hoehe) + 1.5rem); }
.admin-bar .fk-modell__panels { top: calc(var(--header-hoehe) + 32px + 1.5rem); }
.fk-modell-panel { padding: var(--s-6); min-height: 20rem; }
.fk-modell-panel[hidden] { display: none; }
/* „Kreislauf abspielen“ wechselt die Erklärung alle paar Sekunden von selbst. Ab dem ersten Abspielen
   (view.js: .hat-gespielt) liegen darum alle Erklärungen in einer Rasterzelle, die verborgenen unsichtbar
   statt ohne Platz: Der Bereich ist dann so hoch wie die längste, und was darunter steht, springt nicht im Takt. */
.fk-modell.hat-gespielt .fk-modell__panels { display: grid; }
.fk-modell.hat-gespielt .fk-modell-panel { grid-area: 1 / 1; }
.fk-modell.hat-gespielt .fk-modell-panel[hidden] { display: block; visibility: hidden; }
.fk-modell.ist-interaktiv .fk-modell-panel.ist-aktiv { animation: fk-modell-panel-ein .5s var(--bewegung); }
@keyframes fk-modell-panel-ein { from { opacity: 0; transform: translateY(10px); } }
/* Mit .fk-modell-panel davor (0,2,0): sonst schlägt „.fk-modell-panel p“ (0,1,1) den Kicker, und alle 13 Kicker
   stehen in Fließtextgröße und -farbe. Die [data-ebene]-Regeln (0,3,0) färben weiter Team blau, Rahmen bernstein. */
.fk-modell-panel .fk-modell-panel__kicker { font-family: var(--etikett-schrift); font-size: calc(.7rem * var(--etikett-mass)); line-height: 1.5; letter-spacing: calc(.14em * var(--sperrung)); text-transform: var(--versalien); color: var(--buehne-akzent); margin: 0 0 var(--s-3); display: flex; gap: .6rem; align-items: center; }
.fk-modell-panel[data-ebene='team'] .fk-modell-panel__kicker { color: var(--team); }
.fk-modell-panel[data-ebene='faktor'] .fk-modell-panel__kicker { color: var(--warnung-text); }
.fk-modell-panel h3 { color: var(--buehne-titel); font-size: 1.55rem; line-height: 1.12; margin: 0 0 var(--s-4); }
.fk-modell-panel p { color: var(--buehne-text); font-size: 1rem; margin: 0 0 var(--s-4); }
.fk-modell-panel ul { margin: var(--s-4) 0 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.fk-modell-panel li { position: relative; margin: 0; padding-left: 1.3rem; color: var(--buehne-text); font-size: .96rem; line-height: 1.5; }
.fk-modell-panel li::before { content: ''; position: absolute; left: 0; top: .62em; width: .55rem; height: 1px; background: var(--buehne-akzent); }
.fk-modell-panel > :last-child { margin-bottom: 0; }
/* Verweis aufs Kapitel unter dem Erklärtext (render.php): kleiner Textlink, Farbe aus grundlagen.css
   (.fk-sektion--dunkel .fk-textlink); die Haarlinie trennt ihn vom änderbaren Text darüber */
.fk-modell-panel .fk-modell-panel__weiter { margin: var(--s-5) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--buehne-linie); line-height: 1.45; }
/* Fließend statt inline-flex: Bricht der lange Kapiteltitel um, bleibt der Pfeil am Textende (sonst stand er
   abgesetzt am rechten Rand); die Unterstreichung beim Darüberfahren läuft dann über alle Zeilen */
.fk-modell-panel__weiter .fk-textlink { display: inline; }
/* Im Editor nur zur Ansicht: fest eingestellt, kein Klickziel */
.fk-modell--editor .fk-modell-panel__weiter .fk-textlink { cursor: default; background: none; }
/* Bildunterschrift direkt unter der Abbildungskarte: render.php/editor.js stellen beide in .fk-modell__abb (linke
   Spalte), damit sie am Schaubild bleibt – nicht unter dem oft höheren Erklärtext rechts (1280 px: 24–422 px Abstand
   je nach Station) und auf dem Handy nicht erst unter dem Erklärtext */
.fk-modell__quelle { margin: var(--s-3) 0 0; font-family: var(--etikett-schrift); font-size: calc(.72rem * var(--etikett-mass)); line-height: 1.6; color: var(--buehne-quelle); /* heller als --buehne-gedaempft (2,5 : 1), lesbar in beiden Stilen */ letter-spacing: calc(.02em * var(--sperrung)); }
.fk-sektion--dunkel .fk-modell__quelle { color: var(--buehne-quelle); }
.fk-modell__quelle a { color: var(--buehne-leise); }

/* ---------- Stationen-Leiste: auf schmalen Bildschirmen die bequemere Bedienung ---------- */
.fk-modell__stationen { display: none; flex-wrap: wrap; gap: .35rem; padding: var(--s-4) var(--s-5) 0; }
.fk-modell__stationen button { font-family: var(--schrift-titel); font-size: .82rem; font-weight: calc(600 * var(--gewicht-mass)); line-height: 1.2; background: transparent; color: var(--buehne-text); border: 1px solid var(--buehne-linie); border-radius: 99px; padding: .45rem .8rem; cursor: pointer; }
.fk-modell__stationen button:hover { border-color: var(--buehne-leise); }
.fk-modell__stationen button[aria-pressed='true'] { background: var(--buehne-akzent); color: var(--auf-akzent); border-color: var(--buehne-akzent); }
/* Gewählte Station in der Farbe ihrer Ebene wie der gewählte Kasten im Schaubild (data-ebene aus render.php/editor.js):
   Team blau, Rahmenbedingung umgekehrt wie das gewählte Rahmenschild */
.fk-modell__stationen button[data-ebene='team'][aria-pressed='true'] { background: var(--team); border-color: var(--team); }
.fk-modell__stationen button[data-ebene='faktor'][aria-pressed='true'] { background: var(--buehne-titel); border-color: var(--buehne-titel); color: var(--buehne-tief); }
@media (max-width: 70rem) {
	.fk-modell { grid-template-columns: minmax(0, 1fr); }
	.fk-modell__panels { position: static; }
	/* An „fk-js“ (setzt der <head> vor dem ersten Bild), nicht erst an .ist-interaktiv aus view.js: sonst
	   käme die Leiste nach dem Laden dazu und schöbe alles darunter um bis zu 240 px */
	:is(.fk-js .fk-modell, .fk-modell.ist-interaktiv) .fk-modell__stationen { display: flex; }
}
@media (max-width: 40rem) {
	.fk-modell__flaeche { padding: var(--s-2); }
	.fk-modell-panel { padding: var(--s-5); min-height: 0; }
	.fk-modell__werkzeug { padding-inline: var(--s-4); }
	.fk-modell__stationen { padding-inline: var(--s-4); }
}

@media (prefers-reduced-motion: reduce) {
	.fk-modell .fk-zentrum-halo, .fk-modell .fk-zentrum-spirale, .fk-modell .fk-fluss__linie, .fk-modell .fk-modell-panel { animation: none !important; }
	.fk-modell .fk-knoten rect, .fk-modell .fk-pfeile path { transition: none; }
}

/* ---------- Editor ---------- */
.fk-modell--editor .fk-modell__stationen { display: flex; }
.fk-modell--editor .fk-modell__flaeche svg { cursor: pointer; }
.fk-modell--editor .fk-knopf[disabled] { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.fk-modell__laden { min-height: 18rem; display: grid; place-items: center; font-family: var(--etikett-schrift); font-size: calc(.75rem * var(--etikett-mass)); color: var(--buehne-leise); text-align: center; padding: var(--s-5); }
.fk-modell-editor__zeile { display: flex; align-items: flex-start; gap: .4rem; }
.fk-modell-editor__zeile > :first-child { flex: 1; min-width: 0; }
.fk-modell-editor__weg.components-button { color: var(--buehne-leise); min-width: 0; height: 1.6rem; padding: 0 .3rem; }
.fk-modell-editor__weg.components-button:hover { color: var(--warnung-linie); }
.fk-modell-editor__neu { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: var(--s-4); }
.fk-modell-editor__neu .components-button { color: var(--buehne-text); border: 1px var(--strich-art) var(--buehne-linie); border-radius: 99px; height: auto; padding: .3rem .7rem; font-size: .75rem; }
.fk-modell-editor__neu .components-button:hover { color: var(--buehne-akzent); border-color: var(--buehne-akzent); }
/* Mit .fk-modell-panel davor (0,2,0): sonst gewann „.fk-modell-panel p“ (0,1,1), der Hinweis stand in Fließtextgröße und -farbe */
.fk-modell-panel .fk-modell-editor__hinweis { font-family: var(--etikett-schrift); font-size: calc(.66rem * var(--etikett-mass)); line-height: 1.5; color: var(--buehne-quelle); margin: var(--s-3) 0 0 !important; }

/* ---------- Felix, 12.11.2026: ohne Stationen-Leiste und ohne Bildzeile; am Handy das Schaubild größer ---------- */
/* Gewählt wird im Schaubild selbst; die Leiste darunter (bis 70rem) fällt weg, ebenso die Zeile „Schaubild nach …“
   (die Quelle steht im Kopf der Abbildung: „Jekauc et al. (2024)“). Im Editor bleibt beides. */
.fk-modell:not(.fk-modell--editor) .fk-modell__stationen { display: none !important; }
.fk-modell:not(.fk-modell--editor) .fk-modell__quelle { display: none; }
@media (max-width: 40rem) {
	/* Abbildung über die ganze Bildschirmbreite, ohne Seitenrand und Innenabstand; vom Schaubild bleibt der äußere
	   Rahmen (x 40–960 von 1000) mit wenig Luft sichtbar, der leere Rand links und rechts fällt weg */
	.fk-modell:not(.fk-modell--editor) .fk-modell__abb { margin-inline: calc(50% - 50vw); }
	.fk-modell:not(.fk-modell--editor) .fk-modell__abb > .fk-instrument { border-radius: 0; border-left: 0; border-right: 0; }
	.fk-modell:not(.fk-modell--editor) .fk-modell__flaeche { padding: var(--s-2) 0; overflow: hidden; }
	.fk-modell:not(.fk-modell--editor) .fk-modell__flaeche svg { width: 106.4%; margin-left: -3.2%; }
}
@media (max-width: 40rem) {
	/* „Kreislauf abspielen“ in derselben Zeile wie die Legende (Felix, 12.11.2026): die zwei Ebenen untereinander links,
	   der Knopf rechts daneben */
	.fk-modell .fk-modell__werkzeug { flex-wrap: nowrap; gap: var(--s-3); }
	.fk-modell .fk-modell__legende { flex-direction: column; gap: .35rem; }
	.fk-modell .fk-modell__knoepfe { flex: 0 0 auto; flex-wrap: nowrap; }
	.fk-modell .fk-knopf--klein { white-space: nowrap; }
}