/*
 * SP LSDB-Einzelseiten – Kartenstil (Vault: 00 Kontext/Branding, „Designsprache Sammelkarte“;
 * Gestaltung aus dem Prototyp „LSDB Inhaltsseiten Prototyp.html“).
 * Jeder Block ist ein eigener Container (sple), Maße relativ zur Blockbreite (cqi).
 */

.sple {
	--sple-blau: var(--wp--preset--color--accent-1, #2a7de1);
	--sple-kiste: #387be8;
	--sple-orange: var(--wp--preset--color--accent-2, #ffc000);
	--sple-navy: #101129;
	--sple-text: #e9eefb;
	--sple-muted: #9fb3d6;
	--sple-panel: rgba(16, 17, 41, .72);
	--sple-linie: rgba(100, 160, 255, .3);
	--sple-max: 1180px;
	--sple-rand: 2rem;
	--sple-bleed: max(var(--sple-rand), (100cqi - var(--sple-max)) / 2 + var(--sple-rand));
	container: sple / inline-size;
	color: var(--sple-text);
	font-family: var(--wp--preset--font-family--barlow-condensed, "Barlow Condensed", sans-serif);
}
.sple *, .sple *::before, .sple *::after { box-sizing: border-box; }
.sple a { color: #8fc0ff; }
.sple img { max-width: 100%; height: auto; }

.sple-wrap { max-width: var(--sple-max); margin: 0 auto; padding: 0 var(--sple-rand); }
@container sple (max-width: 700px) {
	.sple { --sple-rand: 1rem; }
}

/* ---------- Schrift ---------- */
.sple .sple-h1, .sple .sple-h2, .sple .sple-h3 { font-family: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin: 0; line-height: 1; color: #fff; }
.sple .sple-h1 { font-size: clamp(2.4rem, 6cqi, 4.4rem); overflow-wrap: anywhere; }
.sple .sple-h2 { font-size: 2rem; margin-bottom: 1rem; }
.sple .sple-h3 { font-size: 1.2rem; }
.sple p, .sple .sple-text li { font-size: 1.16rem; line-height: 1.55; font-style: italic; letter-spacing: .025em; }
.sple p { margin: 0 0 .9rem; }
.sple-kicker { color: var(--sple-orange); text-transform: uppercase; letter-spacing: .12em; font-size: .9rem !important; font-weight: 700; font-style: normal !important; margin: 0 0 .4rem !important; }
.sple-unter { color: var(--sple-muted); font-size: 1.3rem !important; margin: .3rem 0 0 !important; }
.sple-lead { color: var(--sple-muted); margin-bottom: 1.2rem !important; }

.sple-crumb { display: inline-flex; gap: .4rem; align-items: center; margin: 1.2rem 0 .4rem; color: #c8d6f0 !important; text-decoration: none; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; background: rgba(255, 255, 255, .06); border: 1px solid var(--sple-linie); border-radius: 999px; padding: .35rem .9rem; }
.sple-crumb:hover, .sple-crumb:focus-visible { background: rgba(100, 160, 255, .18); }

.sple-mod { padding: 3.2rem 0 1rem; scroll-margin-top: calc(var(--sple-oben, 0px) + 60px); }
#sple-ueberblick { scroll-margin-top: calc(var(--sple-oben, 0px) + 60px); }
@container sple (max-width: 700px) { .sple-mod { padding: 2.4rem 0 .5rem; } }

/* ---------- Bausteine ---------- */
.sple-badge { display: inline-block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; padding: .18rem .55rem; border-radius: 6px; background: rgba(42, 125, 225, .22); border: 1px solid rgba(100, 160, 255, .45); color: #d6e6ff; font-style: normal; }
.sple-badge--orange, .sple-badge--quelle { background: transparent; border-color: var(--sple-orange); color: var(--sple-orange); }
.sple-pille { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255, 255, 255, .08); border: 1px solid rgba(100, 160, 255, .35); color: #e6efff !important; border-radius: 999px; padding: .5rem 1.1rem; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; cursor: pointer; text-decoration: none; font-family: inherit; }
.sple-pille:hover, .sple-pille:focus-visible { background: rgba(100, 160, 255, .2); }
.sple-rund { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(100, 160, 255, .4); background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer; font-size: 1.1rem; font-family: inherit; }
.sple-rund:hover, .sple-rund:focus-visible { background: rgba(100, 160, 255, .2); }

/* Kiste: links rund, rechts bündig über den Rand */
.sple-kiste { background: var(--sple-kiste); border-radius: 16px 0 0 16px; margin: 0 calc(-1 * var(--sple-bleed)) 0 0; display: flex; overflow-x: auto; scrollbar-width: none; padding: 0; }
.sple-kiste__k { padding: .75rem 1.4rem; white-space: nowrap; display: flex; flex-direction: column; justify-content: center; margin: 0; }
.sple-kiste__k + .sple-kiste__k { border-left: 1px solid rgba(255, 255, 255, .35); }
.sple-kiste__l { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; opacity: .85; font-style: italic; margin: 0; }
.sple-kiste__v { font-size: 1.35rem; font-weight: 700; font-style: italic; letter-spacing: .025em; margin: 0; color: #fff; }
.sple-kiste__v a { color: #fff; }
@container sple (max-width: 700px) { .sple-kiste__k { padding: .6rem 1rem; } .sple-kiste__v { font-size: 1.1rem; } }
.sple-kiste--senkrecht { flex-direction: column; }
.sple-kiste--senkrecht .sple-kiste__k { flex-direction: row; justify-content: space-between; gap: 2rem; align-items: baseline; padding-right: calc(var(--sple-bleed) + 1rem); white-space: normal; }
.sple-kiste--senkrecht .sple-kiste__v { text-align: right; font-size: 1.15rem; }
.sple-kiste--senkrecht .sple-kiste__k + .sple-kiste__k { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .3); }
.sple-technik { max-width: 780px; }

/* Textbox: links bündig über den Rand, rechts rund */
.sple-textbox { background: var(--sple-kiste); border-radius: 0 16px 16px 0; margin-left: calc(-1 * var(--sple-bleed)); padding: 1.4rem 1.8rem 1rem var(--sple-bleed); color: #fff; }
.sple-textbox .sple-h3 { margin-bottom: .6rem; font-size: 1.5rem; }
.sple-text > :last-child { margin-bottom: 0; }
.sple-text a { color: #fff; text-decoration: underline; }
.sple-text ul, .sple-text ol { margin: 0 0 .9rem; padding-left: 1.2rem; }
@container sple (max-width: 700px) { .sple-textbox { padding: 1.1rem 1.1rem .6rem var(--sple-bleed); } }

/* Griff mit flachem Schein in Klingenfarbe (wie LSDB und Teaser) */
.sple-griff { position: relative; aspect-ratio: 1000 / 616; }
.sple-griff__bild { position: relative; width: 100%; height: 100%; object-fit: contain; z-index: 1; display: block; }
.sple-griff__glow { position: absolute; left: 8%; right: 8%; top: 38%; height: 26%; border-radius: 50%; background: linear-gradient(90deg, var(--sple-c1), var(--sple-c2, var(--sple-c1))); filter: blur(26px); opacity: .75; }

/* ---------- Einblenden: nur mit JS, nur einmal ---------- */
.sple-js .sple-rv { opacity: 0; transform: translateY(24px); transition: opacity .45s ease, transform .45s ease; transition-delay: var(--d, 0s); }
.sple-js .sple-rv.sple-in { opacity: 1; transform: none; }
/* Notfall: Skript lädt nicht → nach 2,5 s alles sichtbar */
.sple-js:not(.sple-bereit) .sple-rv { animation: sple-notfall 0s 2.5s forwards; }
@keyframes sple-notfall { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.sple-js .sple-rv { opacity: 1; transform: none; transition: none; }
}

/* ---------- Kopf (Schwert) ---------- */
/* Der Griff fliegt von rechts ein: ohne clip kurz seitlicher Überlauf am Handy */
.wp-block-sp-lsdb-kopf { overflow-x: clip; }
.sple-hero { display: grid; grid-template-columns: 1fr 1.25fr; gap: 2rem; align-items: center; padding-top: 1rem; padding-bottom: 1.6rem; }
.sple-hero > * { min-width: 0; }
.sple-hero__griff { filter: drop-shadow(0 10px 30px #000); }
.sple-js .sple-hero__griff { animation: sple-griff-rein .9s ease both; }
@keyframes sple-griff-rein { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
.sple-person { display: flex; align-items: center; gap: .8rem; margin-top: 1.2rem; }
.sple-plakette { width: 74px; height: 74px; border-radius: 50%; border: 4px solid var(--sple-blau); overflow: hidden; background: #0b0c1e; box-shadow: 0 0 20px rgba(255, 255, 255, .2); flex: none; display: block; }
/* Ausschnitt aus den Feldern „Mitte waagerecht/senkrecht“ und „Zoom“ */
.sple-plakette img { width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; object-position: var(--sple-px, 50%) var(--sple-py, 50%); transform: scale(var(--sple-pz, 1)); transform-origin: var(--sple-px, 50%) var(--sple-py, 50%); display: block; }
.sple-person__l { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sple-muted); }
.sple-person__v { font-size: 1.4rem; font-weight: 700; text-transform: uppercase; color: #fff; }
.sple-person__v a { color: #fff; text-decoration: none; }
.sple-person__v a:hover, .sple-person__v a:focus-visible, .sple-zeitstrahl__name a:hover, .sple-zeitstrahl__name a:focus-visible { text-decoration: underline; }
.sple .sple-zeitstrahl__name a { color: inherit; text-decoration: none; }
@container sple (max-width: 700px) {
	.sple-hero { grid-template-columns: 1fr; gap: .6rem; }
	.sple-hero__griff { order: -1; }
	.sple-plakette { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) { .sple-js .sple-hero__griff { animation: none; } }

/* ---------- Kapitel-Leiste + Fortschritt ---------- */
/* Unter dem mitlaufenden Seitenkopf (Theme: z-index 10), sonst verdeckt die Leiste dessen Untermenüs */
.wp-block-sp-lsdb-kapitel-nav { position: sticky; top: var(--sple-oben, 0px); z-index: 9; }
.sple-fortschritt { height: 3px; }
.sple-fortschritt i { display: block; height: 100%; width: 0; background: var(--sple-blau); box-shadow: 0 0 8px var(--sple-blau); }
.sple-kapitel { background: rgba(16, 17, 41, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(100, 160, 255, .18); }
.sple-kapitel__zeile { display: flex; align-items: center; gap: .5rem; }
.sple-kapitel__spur { position: relative; flex: 1 1 auto; min-width: 0; display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; padding: .5rem 0; }
.sple-kapitel a { flex: none; color: var(--sple-muted); text-decoration: none; text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; padding: .3rem .75rem; border-radius: 7px; border: 1px solid transparent; }
.sple-kapitel a:hover, .sple-kapitel a:focus-visible { color: #fff; }
.sple-kapitel a[aria-current="true"] { color: #fff; background: rgba(42, 125, 225, .3); border-color: rgba(100, 160, 255, .6); }
/* Zurück zur Datenbank: rechts neben der Spur (schmal: Pfeil links) */
.sple-kapitel a.sple-kapitel__zurueck { flex: none; color: #c8d6f0; border-color: rgba(100, 160, 255, .3); background: rgba(16, 17, 41, .95); }
/* Spur läuft weich aus, wo es weitergeht (Klassen per JS) */
.sple-kapitel__spur.sple-rand-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.sple-kapitel__spur.sple-rand-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); }
.sple-kapitel__spur.sple-rand-l.sple-rand-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
/* Schmal: Zurück nur als Pfeil links (Text für Screenreader bleibt, oben steht ohnehin „Zurück zu …“) */
@container sple (max-width: 700px) {
	.sple-kapitel a.sple-kapitel__zurueck { order: -1; padding: .3rem .65rem; font-size: 1rem; line-height: 1.1; }
	.sple-kapitel__zurueck-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.sple-kapitel a.sple-kapitel__zurueck:hover, .sple-kapitel a.sple-kapitel__zurueck:focus-visible { color: #fff; background: rgba(42, 125, 225, .3); }

/* ---------- Geschichte ---------- */
.sple-story { display: grid; grid-template-columns: .9fr 1.1fr; gap: 2.5rem; }
.sple-story > * { min-width: 0; }
.sple-story--einzeln { grid-template-columns: 1fr; }
.sple-story__griff { position: sticky; top: calc(var(--sple-oben, 0px) + 90px); align-self: start; }
.sple-story__cap { margin-top: .6rem !important; color: var(--sple-muted); text-align: center; }
.sple-story__kaesten { display: flex; flex-direction: column; gap: 1.4rem; }
.sple-story:not(.sple-story--einzeln) .sple-textbox { margin-left: 0; border-radius: 16px; padding: 1.4rem 1.8rem 1rem; }
@container sple (max-width: 700px) {
	.sple-story { grid-template-columns: 1fr; }
	.sple-story__griff { display: none; }
	.sple-story:not(.sple-story--einzeln) .sple-textbox { margin-left: calc(-1 * var(--sple-bleed)); border-radius: 0 16px 16px 0; padding: 1.1rem 1.1rem .6rem var(--sple-bleed); }
}

/* ---------- Filmstreifen ---------- */
/* Zähler als kleines Schild unten rechts auf dem Streifen, ohne eigene Zeile (Tim, 08.11.2026) */
.sple-streifen { position: relative; }
.sple-streifen__ctl { position: absolute; right: .6rem; bottom: 1.1rem; z-index: 2; pointer-events: none; padding: .1rem .55rem; border-radius: 999px; background: rgba(16, 17, 41, .8); color: #fff; font-size: .8rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.sple-streifen__ctl[hidden] { display: none; }
.sple-streifen__spur { display: flex; gap: .7rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: .6rem; }
/* Drei Bilder nebeneinander, gemeinsames Format des Streifens (--sple-format, serverseitig) */
.sple-streifen__spur .sple-bild { width: calc((100% - 1.4rem) / 3); height: auto; max-width: none; aspect-ratio: var(--sple-format, 16 / 9); object-fit: cover; flex: none; scroll-snap-align: start; border-radius: 10px; cursor: zoom-in; background: #0b0c1e; }
@container sple (max-width: 700px) { .sple-streifen__spur .sple-bild { width: 82%; } }

/* ---------- Wischleisten (Streifen, Regale): Pfeile links/rechts, Ziehen mit der Maus (JS) ---------- */
.sple-wisch { position: relative; }
.sple-wisch > :first-child { cursor: grab; }
.sple-wisch > .sple-zieht { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.sple-wisch > .sple-zieht * { pointer-events: none; }
.sple .sple-wisch__pfeil { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; background: rgba(16, 17, 41, .9); border-color: rgba(100, 160, 255, .6); box-shadow: 0 4px 18px rgba(0, 0, 0, .5); }
.sple .sple-wisch__pfeil:hover, .sple .sple-wisch__pfeil:focus-visible { background: rgba(42, 125, 225, .85); }
.sple-wisch__pfeil--l { left: .5rem; }
.sple-wisch__pfeil--r { right: .5rem; }
.sple-wisch__pfeil[hidden], .sple-wisch--fest .sple-wisch__pfeil { display: none; }
@media (hover: none) and (pointer: coarse) { .sple-wisch__pfeil { display: none; } }
.sple-bildbereich + .sple-bildbereich { margin-top: 1.6rem; }
.sple-bildbereich__titel { margin-bottom: .6rem !important; }
.sple-js .sple-bildbereich[hidden] { display: none; }

/* Chips (Bildbereiche, Hersteller-Filter) */
.sple-chips { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: 1rem; }
.sple-chip { background: rgba(255, 255, 255, .06); color: var(--sple-muted); border: 1px solid rgba(100, 160, 255, .25); border-radius: 7px; padding: .35rem .8rem; text-transform: uppercase; letter-spacing: .04em; font-size: .8rem; cursor: pointer; font-family: inherit; }
.sple-chip[aria-pressed="true"] { background: rgba(42, 125, 225, .3); color: #fff; border-color: rgba(100, 160, 255, .7); }
.sple-chip__zahl { opacity: .7; }

/* ---------- Auftritte (Zeitstrahl) ---------- */
.sple-zeitstrahl { position: relative; height: 150px; margin: 1rem 1rem 0; padding: 0; list-style: none; }
.sple-zeitstrahl__linie { position: absolute; left: 0; right: 0; top: 56px; height: 2px; background: rgba(100, 160, 255, .25); }
.sple-zeitstrahl__linie i { display: block; height: 100%; width: 0; background: var(--sple-blau); box-shadow: 0 0 8px var(--sple-blau); transition: width 1.4s ease; }
.sple-zeitstrahl.sple-in .sple-zeitstrahl__linie i, html:not(.sple-js) .sple-zeitstrahl__linie i { width: 100%; }
.sple-zeitstrahl__pt { position: absolute; top: 0; transform: translateX(-50%); text-align: center; width: 150px; display: flex; flex-direction: column; }
.sple-zeitstrahl__jahr { color: var(--sple-orange); font-weight: 700; font-size: 1.5rem; font-style: italic; height: 44px; }
.sple-zeitstrahl__punkt { width: 16px; height: 16px; border-radius: 50%; margin: 0 auto; background: #1b2140; border: 2px solid rgba(100, 160, 255, .5); transition: all .3s ease; transition-delay: var(--d); }
.sple-zeitstrahl.sple-in .sple-zeitstrahl__punkt { background: var(--sple-blau); border-color: #cfe2ff; box-shadow: 0 0 12px var(--sple-blau); }
.sple-zeitstrahl__name { margin-top: .6rem; font-weight: 700; text-transform: uppercase; font-size: 1.05rem; color: #fff; }
.sple-zeitstrahl__gruppe { color: var(--sple-muted); font-style: italic; font-size: .9rem; }
@container sple (max-width: 700px) {
	.sple-zeitstrahl { height: auto; margin: 0; padding-left: 1.4rem; }
	.sple-zeitstrahl__linie { left: 7px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
	.sple-zeitstrahl__linie i { width: 100% !important; height: 0; transition: height 1.4s ease; }
	.sple-zeitstrahl.sple-in .sple-zeitstrahl__linie i, html:not(.sple-js) .sple-zeitstrahl__linie i { height: 100%; }
	.sple-zeitstrahl__pt { position: relative; left: auto !important; transform: none; width: auto; text-align: left; display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; padding: .4rem 0; }
	.sple-zeitstrahl__punkt { position: absolute; left: -1.4rem; top: .8rem; margin: 0; }
	.sple-zeitstrahl__jahr { height: auto; font-size: 1.3rem; grid-row: span 2; }
	.sple-zeitstrahl__name { margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .sple-zeitstrahl__linie i { transition: none; } }

/* ---------- Karten ---------- */
.sple-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 1rem; }
.sple-karte { background: var(--sple-panel); border-radius: 16px; overflow: hidden; border: 1px solid rgba(100, 160, 255, .15); transition: transform .2s, border-color .2s; text-decoration: none !important; color: inherit !important; display: flex; flex-direction: column; }
.sple-karte:hover, .sple-karte:focus-visible { transform: translateY(-4px); border-color: rgba(100, 160, 255, .55); }
.sple-karte__im { aspect-ratio: 4 / 3; background: #0b0c1e; overflow: hidden; }
.sple-karte__im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sple-karte__bd { padding: .8rem 1rem 1rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; align-items: flex-start; }
.sple .sple-karte__titel { font-size: 1.15rem; line-height: 1.1; margin: 0; font-weight: 700; text-transform: uppercase; color: #fff; font-family: inherit; }
.sple-karte__meta { color: var(--sple-muted); font-style: italic; font-size: .95rem; }
.sple-karte__specs { margin-top: auto; align-self: stretch; display: flex; flex-wrap: wrap; background: var(--sple-kiste); border-radius: 10px 0 0 10px; margin-right: -1rem; font-style: italic; color: #fff; }
.sple-karte__specs span { padding: .3rem .7rem; font-size: .9rem; }
.sple-karte__specs span + span { border-left: 1px solid rgba(255, 255, 255, .35); }
.sple-karte--schwert .sple-griff { margin: .5rem; }
.sple-karte--db .sple-karte__bd { justify-content: center; min-height: 160px; }
@container sple (max-width: 700px) {
	.sple-karten { grid-template-columns: 1fr 1fr; gap: .6rem; }
	.sple .sple-karte__titel { font-size: 1rem; }
	.sple-karte__bd { padding: .6rem .7rem .8rem; }
	.sple-karte__specs { margin-right: -.7rem; }
	.sple-karte__specs span { font-size: .8rem; padding: .25rem .5rem; }
}

/* ---------- Repliken (Regal nach Jahr) ---------- */
.sple-regal { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x proximity; padding: .4rem 0 1rem; scrollbar-width: thin; }
.sple-regal__jahr { flex: none; display: flex; flex-direction: column; gap: .5rem; scroll-snap-align: start; }
.sple-regal__y { color: var(--sple-orange); font-weight: 700; font-style: italic; font-size: 1.5rem; border-bottom: 2px solid rgba(255, 192, 0, .35); padding-bottom: .2rem; }
.sple-regal__reihe { display: flex; gap: .8rem; }
.sple-regal .sple-karte { width: 220px; }
.sple-regal [hidden] { display: none; }
@container sple (max-width: 700px) { .sple-regal .sple-karte { width: 170px; } }

/* ---------- Weiter ---------- */
.sple-weiter { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 1rem; }

/* ---------- Video (Klick zum Laden) ---------- */
.sple-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 1rem; }
.sple-video { aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .8rem; border: 1px solid var(--sple-linie); }
.sple-video iframe { width: 100%; height: 100%; border: 0; }
.sple-video__hinweis { color: var(--sple-muted); font-style: italic; }
.sple-videofig { margin: 0; }
.sple-video__unter { margin-top: .5rem; color: var(--sple-muted); font-style: italic; letter-spacing: .025em; }
.sple-video__unter strong { color: #fff; font-style: normal; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- 360° (Shortcode) ---------- */
.sple-spin { max-width: 900px; margin: 0 auto; }

/* ---------- Chronik (Customs) ---------- */
.sple-chronik { position: relative; margin-top: 1rem; }
.sple-chronik__schiene { position: absolute; left: 50%; top: 2rem; bottom: 0; width: 2px; background: rgba(100, 160, 255, .2); transform: translateX(-50%); }
.sple-chronik__schiene i { display: block; width: 100%; height: 0; background: var(--sple-blau); box-shadow: 0 0 10px var(--sple-blau); }
.sple-chronik__koepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-bottom: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sple-muted); font-size: .85rem; }
.sple-chronik__koepfe div:first-child { text-align: right; }
.sple-ev { position: relative; width: calc(50% - 2rem); margin: 0 0 1.1rem; }
.sple-ev--l { margin-right: auto; }
.sple-ev--r { margin-left: auto; }
.sple-ev::before { content: ""; position: absolute; top: 1.1rem; width: 14px; height: 14px; border-radius: 50%; background: #1b2140; border: 2px solid rgba(100, 160, 255, .6); }
.sple-ev--l::before { right: calc(-2rem - 8px); }
.sple-ev--r::before { left: calc(-2rem - 8px); }
.sple-ev.sple-in::before { background: var(--sple-blau); border-color: #cfe2ff; box-shadow: 0 0 10px var(--sple-blau); }
.sple-ev__box { background: var(--sple-panel); border: 1px solid rgba(100, 160, 255, .18); border-radius: 14px; padding: .8rem 1rem; }
.sple-ev--station .sple-ev__box { background: var(--sple-kiste); border: 0; color: #fff; }
.sple-ev__wann { color: var(--sple-orange); font-weight: 700; font-style: italic; font-size: 1.15rem; }
.sple-ev--station .sple-ev__wann { color: #fff; }
.sple-ev .sple-h3 { font-size: 1.15rem; margin: .15rem 0 .35rem; }
.sple-ev ul { margin: .2rem 0 0; padding-left: 1.1rem; font-style: italic; letter-spacing: .025em; line-height: 1.45; }
.sple-ev__tx { font-style: italic; letter-spacing: .025em; line-height: 1.45; }
.sple-ev__th { display: flex; gap: .35rem; margin-top: .6rem; overflow-x: auto; scrollbar-width: none; }
.sple-ev__th .sple-bild { height: 58px; width: auto; max-width: none; border-radius: 6px; cursor: zoom-in; flex: none; }
.sple-ev__mehr { flex: none; height: 58px; min-width: 58px; border-radius: 6px; background: rgba(42, 125, 225, .25); border: 0; color: #fff; font-weight: 700; cursor: pointer; font-family: inherit; }
.sple-ev__vids { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }
.sple-ev__vids .sple-pille { padding: .3rem .8rem; }
.sple-ev__tag { display: none; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-left: .4rem; padding: .05rem .4rem; border-radius: 4px; background: rgba(255, 255, 255, .15); font-style: normal; vertical-align: middle; color: #fff; }
.sple-chronik--einseitig .sple-chronik__schiene { left: 7px; top: 0; transform: none; }
.sple-chronik--einseitig .sple-ev { width: auto; margin: 0 0 .9rem 1.6rem; }
.sple-chronik--einseitig .sple-ev::before { left: calc(-1.6rem + 1px); right: auto; }
@container sple (max-width: 700px) {
	.sple-chronik__schiene { left: 7px; top: 0; transform: none; }
	.sple-chronik__koepfe { display: none; }
	.sple-ev, .sple-ev--l, .sple-ev--r { width: auto; margin: 0 0 .9rem 1.6rem; }
	.sple-ev--l::before, .sple-ev--r::before { left: calc(-1.6rem + 1px); right: auto; }
	.sple-ev__tag { display: inline-block; }
}

/* ---------- Review-Seite: Kopf ---------- */
.sple-rkopf { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: start; padding-top: .6rem; padding-bottom: 1.4rem; }
.sple-rkopf > * { min-width: 0; }
.sple-rkopf--galerie { grid-template-columns: 1.4fr 1fr; align-items: end; }
.sple .sple-h1--review { font-size: clamp(2rem, 4.6cqi, 3.4rem); }
.sple-rahmen { border: 7px solid var(--sple-blau); border-radius: 18px; box-shadow: 0 0 34px rgba(255, 255, 255, .14), 0 0 18px rgba(42, 125, 225, .55); overflow: hidden; background: #0b0c1e; }
.sple-rahmen__bild { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; cursor: zoom-in; }
.sple-rkopf__lead { margin-top: .8rem; color: var(--sple-muted); }
.sple-rkopf__lead p { font-size: 1.2rem; }
.sple-rkopf__seite { display: flex; flex-direction: column; gap: .8rem; }
.sple-quelle { margin: .8rem 0 0 !important; }
.sple-quelle .sple-badge { font-size: .8rem; padding: .3rem .7rem; text-decoration: none; }
.sple-vintage { display: flex; gap: .7rem; align-items: flex-start; border: 1px solid rgba(255, 192, 0, .45); border-radius: 12px; padding: .6rem .9rem; margin-top: 1rem; color: #ffe2a0; font-style: italic; letter-spacing: .025em; }
.sple-vintage b { color: var(--sple-orange); font-style: normal; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; white-space: nowrap; }
/* „Gehört zu“: Schwert mit Glow */
.sple-gehoert { display: flex; align-items: center; gap: .8rem; margin-top: 1.2rem; background: var(--sple-panel); border-radius: 16px; padding: .5rem 1rem .5rem .5rem; border: 1px solid rgba(100, 160, 255, .25); text-decoration: none !important; color: inherit !important; }
.sple-gehoert:hover, .sple-gehoert:focus-visible { border-color: rgba(100, 160, 255, .6); }
.sple-gehoert .sple-griff { width: 150px; flex: none; }
.sple-gehoert__l { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sple-muted); }
.sple-gehoert__v { display: block; font-weight: 700; text-transform: uppercase; font-size: 1.15rem; color: #fff; }
.sple-rkopf__seite .sple-gehoert { margin-top: 0; }
/* Viele Schwerter (Sammlungen): wischbare Leiste mit einer Beschriftung */
.sple-gehoert-gruppe { margin-top: 1.2rem; min-width: 0; }
.sple-gehoert-gruppe > .sple-gehoert__l { margin: 0 0 .5rem; }
.sple-gehoert-leiste { display: flex; gap: .7rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; padding-bottom: .5rem; }
.sple .sple-gehoert-leiste .sple-gehoert { flex: none; width: 250px; margin-top: 0; scroll-snap-align: start; }
.sple-gehoert-leiste .sple-gehoert .sple-griff { width: 100px; }
.sple-gehoert-leiste .sple-gehoert__v { font-size: 1rem; }
@container sple (max-width: 700px) {
	.sple-rkopf, .sple-rkopf--galerie { grid-template-columns: 1fr; }
	.sple-gehoert .sple-griff { width: 110px; }
}

/* ---------- Review: Kapitel mit Bildern ---------- */
.sple-kap { padding: 1.6rem 0; scroll-margin-top: calc(var(--sple-oben, 0px) + 60px); }
.sple-kap__raster { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.6rem; align-items: start; }
.sple-kap--ohne-bilder .sple-kap__raster { grid-template-columns: minmax(0, 860px); }
.sple-kap__panel { background: var(--sple-panel); border-radius: 18px; padding: 1.4rem 1.6rem; }
.sple .sple-kap__lbl { display: inline-block; background: var(--sple-kiste); border-radius: 0 12px 12px 0; padding: .35rem 1.1rem .35rem 1rem; margin: 0 0 .9rem -1.6rem; font-family: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 1.3rem; line-height: 1.1; color: #fff; }
.sple-kap__bilder { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.sple-kap__bilder .sple-bild { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; cursor: zoom-in; }
.sple-kap__bilder .sple-bild:first-child { grid-column: span 2; aspect-ratio: 16 / 10; }
.sple-kap--fazit .sple-kap__panel { background: var(--sple-kiste); color: #fff; }
.sple .sple-kap--fazit .sple-kap__lbl { background: var(--sple-navy); }
@container sple (max-width: 700px) {
	.sple-kap { padding: 1rem 0; }
	.sple-kap__raster { grid-template-columns: 1fr; gap: .8rem; }
	.sple-kap__panel { padding: 1.1rem 1rem; }
	.sple .sple-kap__lbl { margin-left: -1rem; }
	.sple-kap__bilder { grid-template-columns: repeat(3, 1fr); }
	.sple-kap__bilder .sple-bild:first-child { grid-column: auto; aspect-ratio: 1; }
}

/* ---------- Bilder: Raster (Review, Props) und Mauer (Galerie) ---------- */
.sple-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.sple-raster .sple-bild { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; cursor: zoom-in; }
.sple-mauer { columns: 3 260px; column-gap: .8rem; }
.sple-mauer .sple-bild { width: 100%; margin: 0 0 .8rem; border-radius: 12px; display: block; break-inside: avoid; cursor: zoom-in; background: #0b0c1e; }
@container sple (max-width: 700px) {
	.sple-raster { grid-template-columns: repeat(3, 1fr); gap: .35rem; }
	.sple-mauer { columns: 2; column-gap: .5rem; }
	.sple-mauer .sple-bild { margin-bottom: .5rem; }
}

/* ---------- Props: Filmzitat und Originaltext ---------- */
.sple-text blockquote { margin: 1rem 0; padding: 1rem 1.2rem; border-left: 4px solid var(--sple-orange); background: rgba(16, 17, 41, .45); border-radius: 0 12px 12px 0; }
.sple-text blockquote p { font-size: 1.05rem; }
.sple-text details { margin: 1rem 0 0; background: rgba(16, 17, 41, .45); border-radius: 12px; padding: .6rem 1rem; }
.sple-text details > summary { cursor: pointer; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; }
.sple-text details[open] > summary { margin-bottom: .6rem; }
.sple-text details blockquote { background: transparent; }

/* ---------- Lightbox (per JS an body) ---------- */
.sple-lb { position: fixed; inset: 0; z-index: 100000; background: rgba(3, 4, 12, .94); display: flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--barlow-condensed, "Barlow Condensed", sans-serif); }
.sple-lb[hidden] { display: none; }
/* Bildwechsel: altes Bild gleitet hinaus (JS), liegt dabei mittig über dem neuen */
.sple-lb { overflow: hidden; }
.sple-lb .sple-lb__alt { position: absolute; pointer-events: none; }
.sple-lb img { max-width: 92vw; max-height: 84vh; border-radius: 10px; }
.sple-lb iframe { width: min(92vw, 1100px); aspect-ratio: 16 / 9; border: 0; border-radius: 10px; }
.sple-lb button { position: absolute; background: rgba(255, 255, 255, .08); border: 1px solid rgba(100, 160, 255, .4); color: #fff; width: 46px; height: 46px; border-radius: 50%; font-size: 1.3rem; cursor: pointer; font-family: inherit; }
.sple-lb button:hover, .sple-lb button:focus-visible { background: rgba(100, 160, 255, .25); }
.sple-lb__z { left: 2vw; }
.sple-lb__w { right: 2vw; }
.sple-lb__x { top: 2vh; right: 2vw; }
.sple-lb__n { position: absolute; bottom: 2.5vh; color: var(--sple-muted, #9fb3d6); font-style: italic; }
html.sple-lb-offen { overflow: hidden; }

/* Editor-Platzhalter */
.sple-editor-platzhalter .components-placeholder { min-height: 0; }

/* Huyang-Kasten des Templates (Gruppe „Huyang-Rahmen“, Klasse sple-huyang): Kartenecken wie die Module */
.sple-huyang > .wp-block-group { border-radius: 16px; overflow: hidden; border: 1px solid rgba(100, 160, 255, .15); }

/* ---------- Archivseiten (Charakter, Film, Hersteller, Typ) ---------- */
.sple-akopf { display: flex; align-items: center; gap: 1.6rem; padding-top: .8rem; padding-bottom: 1.6rem; }
.sple-akopf__text { min-width: 0; }
.sple-akopf .sple-plakette { width: 132px; height: 132px; border-width: 5px; }
.sple-akopf .sple-lead { max-width: 60ch; margin-top: .8rem !important; }
.sple-akiste { margin-bottom: .6rem; }
.sple-achips { margin: 1.4rem 0 0; }
.sple a.sple-chip { text-decoration: none; display: inline-block; }
.sple a.sple-chip:hover, .sple a.sple-chip:focus-visible { color: #fff; border-color: rgba(100, 160, 255, .7); background: rgba(42, 125, 225, .3); }
#sple-weiter .sple-achips { margin: 0 0 1.2rem; }
@container sple (max-width: 700px) {
	.sple-akopf { flex-direction: column; align-items: flex-start; gap: 1rem; }
	.sple-akopf .sple-plakette { width: 96px; height: 96px; }
}