/* Linkship – Animation der Schaubilder in Magazinbeitraegen.
   Reines CSS, kein JavaScript. Die SVGs tragen nur Klassen; die Bewegung steht hier.
   Ohne dieses Stylesheet bleiben die Schaubilder vollstaendig sichtbar und korrekt. */

.ls-visual { margin: 2.5rem auto; }
.lsv-napkin { --lsv-dy: 8px; }
.ls-visual figcaption { font-size: .82rem; line-height: 1.5; color: #475467; text-align: center; margin-top: .7rem; }

/* ---------------------------------------------------------- Keyframes */
@keyframes lsv-fade  { from { opacity: 0 }                              to { opacity: var(--lsv-o, 1) } }
@keyframes lsv-rise  { from { opacity: 0; translate: 0 var(--lsv-dy, 14px) } to { opacity: var(--lsv-o, 1); translate: 0 0 } }
@keyframes lsv-grow  { from { opacity: .35; scale: 1 0 }                to { opacity: var(--lsv-o, 1); scale: 1 1 } }
@keyframes lsv-pop   { from { opacity: 0; scale: .45 }                  to { opacity: var(--lsv-o, 1); scale: 1 } }
@keyframes lsv-growx { from { opacity: .35; scale: 0 1 }                to { opacity: var(--lsv-o, 1); scale: 1 1 } }
@keyframes lsv-draw  { from { stroke-dashoffset: 1 }                    to { stroke-dashoffset: 0 } }

/* ------------------------------------------------- Grundzustand (Fallback)
   Browser ohne Scroll-Timeline spielen die Bewegung beim Laden ab. */
.lsv-anim .lsv-fade,
.lsv-anim .lsv-card,
.lsv-anim .lsv-bar,
.lsv-anim .lsv-barx,
.lsv-anim .lsv-node,
.lsv-anim .lsv-draw,
.lsv-anim .lsv-grp {
	animation-duration: .62s;
	animation-timing-function: cubic-bezier(.22, 1, .36, 1);
	animation-fill-mode: both;
	animation-delay: calc(var(--lsv-i, 0) * 45ms);
}

.lsv-anim .lsv-fade { animation-name: lsv-fade; }
.lsv-anim .lsv-grp  { animation-name: lsv-rise; }
.lsv-anim .lsv-card { animation-name: lsv-rise; transform-box: fill-box; }
.lsv-anim .lsv-node { animation-name: lsv-pop;  transform-box: fill-box; transform-origin: 50% 50%; }
.lsv-anim .lsv-bar  { animation-name: lsv-grow; transform-box: fill-box; transform-origin: 50% 100%; animation-duration: .8s; }
.lsv-anim .lsv-barx { animation-name: lsv-growx; transform-box: fill-box; transform-origin: 0% 50%; animation-duration: .8s; }
.lsv-anim .lsv-draw { animation-name: lsv-draw; stroke-dasharray: 1; animation-duration: .9s; animation-timing-function: ease-in-out; }

/* --------------------------------------------- Scroll-gesteuerte Variante
   Der Fortschritt haengt an der Scrollposition: das Schaubild baut sich auf,
   waehrend es ins Bild kommt – egal, wie weit unten im Beitrag es steht. */
@supports (animation-timeline: view()) {
	.lsv-anim .lsv-fade,
	.lsv-anim .lsv-card,
	.lsv-anim .lsv-bar,
	.lsv-anim .lsv-barx,
	.lsv-anim .lsv-node,
	.lsv-anim .lsv-draw,
	.lsv-anim .lsv-grp {
		animation-timeline: view();
		animation-duration: auto;
		animation-delay: 0s;
		animation-range: cover 6% cover 30%;
	}
	.lsv-anim .lsv-s1 { animation-range: cover 9%  cover 33%; }
	.lsv-anim .lsv-s2 { animation-range: cover 12% cover 36%; }
	.lsv-anim .lsv-s3 { animation-range: cover 15% cover 39%; }
	.lsv-anim .lsv-s4 { animation-range: cover 18% cover 42%; }
	.lsv-anim .lsv-s5 { animation-range: cover 21% cover 45%; }
}

/* ------------------------------------------------------------ Ruhebeduerfnis */
@media (prefers-reduced-motion: reduce) {
	.lsv-anim .lsv-fade,
	.lsv-anim .lsv-card,
	.lsv-anim .lsv-bar,
	.lsv-anim .lsv-barx,
	.lsv-anim .lsv-node,
	.lsv-anim .lsv-grp {
		animation: none !important;
		opacity: var(--lsv-o, 1) !important;
		translate: none !important;
		scale: none !important;
	}
	.lsv-anim .lsv-draw {
		animation: none !important;
		stroke-dasharray: none !important;
		stroke-dashoffset: 0 !important;
	}
}

@media print {
	.lsv-anim .lsv-fade,
	.lsv-anim .lsv-card,
	.lsv-anim .lsv-bar,
	.lsv-anim .lsv-barx,
	.lsv-anim .lsv-node,
	.lsv-anim .lsv-grp { animation: none !important; opacity: var(--lsv-o, 1) !important; translate: none !important; scale: none !important; }
	.lsv-anim .lsv-draw { animation: none !important; stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}

/* -------------------------------------------------- Schmale Bildschirme
   Ein 880 bis 1080 Einheiten breites Schaubild in eine 340px-Spalte zu quetschen
   macht die Beschriftung unlesbar. Breite Schaubilder (lsv-wide, ab 720 Einheiten)
   bleiben deshalb mindestens 640px breit und werden seitlich gewischt.
   Schmale passen ohnehin und bleiben unveraendert. */
@media (max-width: 720px) {
	.ls-visual.lsv-wide > div {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		padding-bottom: 6px;
		overscroll-behavior-x: contain;
	}
	.ls-visual.lsv-wide > div > svg { min-width: 640px; }
	.ls-visual.lsv-wide::after {
		content: "Seitlich wischen, um das ganze Schaubild zu sehen";
		display: block;
		text-align: center;
		font-size: .72rem;
		color: #94A3B8;
		margin-top: .4rem;
	}
}

/* -------------------------------------------- Tabellen und Code auf dem Telefon
   Gefunden beim Live-Durchlauf: im Beitrag „Ankertext" schob eine vierspaltige
   Tabelle (621px) die Seite ueber den Bildschirm, dazu eine lange Codezeile.
   Beides ist Beitragsinhalt, nicht Schaubild – die Regel aendert nichts, solange
   die Tabelle ohnehin passt. Zum Zuruecknehmen diesen Block entfernen. */
@media (max-width: 720px) {
	.wp-block-table { overflow-x: auto; }
	/* Mehrspaltige Ranglisten scrollen seitlich – ohne Hinweis sieht der Leser nur
	   die ersten vier Spalten und haelt die Tabelle fuer unvollstaendig. */
	figure.ls-breit::after {
		content: "Seitlich wischen, um alle Spalten zu sehen";
		display: block;
		text-align: center;
		font-size: .72rem;
		color: #94A3B8;
		margin-top: .4rem;
	}
	.wp-block-table table { margin-bottom: 0; }
	code, kbd, samp { overflow-wrap: anywhere; }
}

/* ======================================================================
   0.2.7 – Schaubilder in Beiträgen sichtbar animieren
   Statt an die Scrollposition gekoppelt (fiel kaum auf) startet der Aufbau jetzt zeitgesteuert,
   sobald das Schaubild ins Bild kommt (Klasse .lsv-in, gesetzt von rubrik-visuals.js). Danach läuft
   eine ruhige Dauerbewegung: ein Spotlight wandert Stufe für Stufe über die Karten, Knoten pulsieren,
   Balken bekommen einen Lichtreflex, Gruppen schweben. Eigene Keyframe-Namen (lsv2-*), damit der
   Browser frische Animationen auf der Dokument-Zeitachse startet. Höhere Spezifität als die
   Inline-Kopie im Beitrag. Ohne JavaScript bleibt alles wie bisher.
   ====================================================================== */
html.lsr-js figure.ls-visual.lsv-anim{--st:0}
html.lsr-js figure.ls-visual.lsv-anim .lsv-s1{--st:1}
html.lsr-js figure.ls-visual.lsv-anim .lsv-s2{--st:2}
html.lsr-js figure.ls-visual.lsv-anim .lsv-s3{--st:3}
html.lsr-js figure.ls-visual.lsv-anim .lsv-s4{--st:4}
html.lsr-js figure.ls-visual.lsv-anim .lsv-s5{--st:5}
html.lsr-js figure.ls-visual.lsv-anim:not(.lsv-in) :is(.lsv-fade,.lsv-grp,.lsv-card,.lsv-node,.lsv-bar,.lsv-barx,.lsv-draw){animation:none!important;opacity:0}
html.lsr-js figure.ls-visual.lsv-anim.lsv-in :is(.lsv-fade,.lsv-grp,.lsv-card,.lsv-node,.lsv-bar,.lsv-barx,.lsv-draw){--d:calc(var(--st) * 160ms + var(--lsv-i,0) * 35ms)}
html.lsr-js figure.ls-visual.lsv-anim.lsv-in .lsv-fade{animation:lsv2-fade .8s cubic-bezier(.22,1,.36,1) var(--d) both;animation-timeline:auto}
html.lsr-js figure.ls-visual.lsv-anim.lsv-in .lsv-card{transform-box:fill-box;animation:lsv2-rise .8s cubic-bezier(.22,1,.36,1) var(--d) both,lsv2-spot 7.5s ease-in-out calc(2.2s + var(--st) * 1.25s) infinite;animation-timeline:auto,auto}
html.lsr-js figure.ls-visual.lsv-anim.lsv-in .lsv-grp{animation:lsv2-rise .8s cubic-bezier(.22,1,.36,1) var(--d) both,lsv2-float 6s ease-in-out calc(1.6s + var(--lsv-i,0) * 400ms) infinite;animation-timeline:auto,auto}
html.lsr-js figure.ls-visual.lsv-anim.lsv-in .lsv-node{transform-box:fill-box;transform-origin:50% 50%;animation:lsv2-pop .8s cubic-bezier(.22,1,.36,1) var(--d) both,lsv2-pulse 2.8s ease-in-out calc(2s + var(--lsv-i,0) * 90ms) infinite;animation-timeline:auto,auto}
html.lsr-js figure.ls-visual.lsv-anim.lsv-in .lsv-bar{transform-box:fill-box;transform-origin:50% 100%;animation:lsv2-grow 1.3s cubic-bezier(.22,1,.36,1) var(--d) both,lsv2-shine 5s ease-in-out calc(2.2s + var(--lsv-i,0) * 250ms) infinite;animation-timeline:auto,auto}
html.lsr-js figure.ls-visual.lsv-anim.lsv-in .lsv-barx{transform-box:fill-box;transform-origin:0% 50%;animation:lsv2-growx 1.3s cubic-bezier(.22,1,.36,1) var(--d) both,lsv2-shine 5s ease-in-out calc(2.2s + var(--lsv-i,0) * 250ms) infinite;animation-timeline:auto,auto}
html.lsr-js figure.ls-visual.lsv-anim.lsv-in .lsv-draw{stroke-dasharray:1;animation:lsv2-draw 1.5s ease-in-out var(--d) both;animation-timeline:auto}
@keyframes lsv2-fade{from{opacity:0}to{opacity:var(--lsv-o,1)}}
@keyframes lsv2-rise{from{opacity:0;translate:0 var(--lsv-dy,16px)}to{opacity:var(--lsv-o,1);translate:0 0}}
@keyframes lsv2-pop{from{opacity:0;scale:.4}to{opacity:var(--lsv-o,1);scale:1}}
@keyframes lsv2-grow{from{opacity:.3;scale:1 0}to{opacity:var(--lsv-o,1);scale:1 1}}
@keyframes lsv2-growx{from{opacity:.3;scale:0 1}to{opacity:var(--lsv-o,1);scale:1 1}}
@keyframes lsv2-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes lsv2-spot{12%,26%{stroke:#FFB454;stroke-width:2.5px;filter:drop-shadow(0 0 7px rgba(255,180,84,.55))}}
@keyframes lsv2-pulse{50%{scale:1.14;filter:drop-shadow(0 0 6px rgba(61,123,255,.5))}}
@keyframes lsv2-shine{8%,16%{filter:brightness(1.22) drop-shadow(0 0 8px rgba(255,180,84,.45))}}
@keyframes lsv2-float{50%{translate:0 -4px}}
html.lsr-js figure.ls-visual.lsv-anim.lsr-paused *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
	html.lsr-js figure.ls-visual.lsv-anim :is(.lsv-fade,.lsv-grp,.lsv-card,.lsv-node,.lsv-bar,.lsv-barx,.lsv-draw){animation:none!important;opacity:var(--lsv-o,1)!important;translate:none!important;scale:none!important;stroke-dasharray:none!important}
}