/* =====================================================================
   Signalweg als Simulation (journey.js, FS.sims.pedal)
   .jys        Ansicht, liegt absolut über dem Container der Galerie
   .jys-prev   Vorschau in der Kachel: nur Bild, keine Bedienung; bis zum ersten Bild bleibt das Plakat
               der Galerie sichtbar (durchsichtig), danach deckend wie die Bühne der Kachel
   .jys-full   ganze Geschichte in der Detail-Kachel: Bildunterschrift je Takt, Kapitelpunkte, Knöpfe.
               Hat der Container keine eigene Höhe (.is-flow), nimmt die Ansicht die Höhe seines
               Scroll-Bereichs an (journey.js setzt --jys-h).
   Beide Themen über die Seiten-Tokens; Bewegung nach den Easing-Tokens, bei reduzierter Bewegung ohne.
   ===================================================================== */
:root{
  --j-ease-out:cubic-bezier(.23,1,.32,1);
  --j-cove:#141921;--j-cove2:#0b0e13;
  --j-scrim:rgba(5,7,10,.78);
  --j-amber:#ffb454;
}
:root[data-theme="light"]{
  --j-cove:#ffffff;--j-cove2:#f4f5f7;
  --j-scrim:rgba(247,248,250,.86);
  --j-amber:#b35f00;
}

.jys{position:absolute;inset:0;z-index:1;overflow:hidden;isolation:isolate;border-radius:inherit;color:var(--fg);container-type:size}
.jys-cv,.jys-poster{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;max-width:none}
.jys-poster{visibility:hidden}
.jys-wait{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;max-width:none;transition:opacity .45s var(--j-ease-out)}
.jys.is-ready .jys-wait{opacity:0;visibility:hidden;transition:opacity .45s var(--j-ease-out),visibility 0s .45s}
.jys.is-poster .jys-poster{visibility:visible}
.jys.is-poster .jys-cv{visibility:hidden}
/* Bühne: Studio-Lichthof, im Hellen weißes Studio; die Galerie kann sie über --jys-bg vorgeben */
.jys-full,.jys-prev.is-ready{background:var(--jys-bg,radial-gradient(70% 72% at 50% 44%,var(--j-cove) 0%,var(--j-cove2) 62%,var(--sim-stage,var(--bg)) 100%))}
.jys-full.is-flow{position:relative;inset:auto;width:100%;height:var(--jys-h,clamp(400px,calc(100dvh - 150px),880px));border-radius:calc(var(--r-xl,28px) - 8px)}

/* Laden: feiner Ring in der Mitte (nur volle Ansicht; die Kachel zeigt solange ihr Plakat) */
.jys-full.is-loading::after{content:"";position:absolute;left:50%;top:44%;width:26px;height:26px;margin:-13px;border-radius:50%;
  border:1.5px solid color-mix(in srgb,var(--fg) 16%,transparent);border-top-color:var(--acc);animation:jys-spin .9s linear infinite}
@keyframes jys-spin{to{transform:rotate(1turn)}}

/* Beschriftungen an den Objekten: Punkt, Haarstrich, Wert in Mono (Lage und Deckkraft setzt journey.js) */
.jy-tags{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;contain:strict}
.jy-tag{position:absolute;left:0;top:0;display:flex;align-items:center;gap:8px;white-space:nowrap;opacity:0;visibility:hidden;will-change:transform,opacity}
.jy-tag::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}
.jy-tag.l{flex-direction:row-reverse}
.jy-tag b{font:600 12px/1.2 var(--mono);letter-spacing:.01em;color:var(--fg);font-variant-numeric:tabular-nums;text-shadow:0 0 6px var(--bg),0 0 2px var(--bg)}
.jy-tag small{font:500 9.5px/1.2 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--mut);text-shadow:0 0 6px var(--bg),0 0 2px var(--bg)}
.jy-tag span{display:flex;flex-direction:column;gap:3px}
.jy-tag.l span{align-items:flex-end;text-align:right}
.jy-tag.big b{font:850 30px/.9 var(--dots);letter-spacing:.02em}
.jy-tag.big b::after{content:"%";margin-left:5px;font:500 12px/1 var(--mono);color:var(--fg2)}
/* Wert am Arbeitspunkt des Kennfelds: Punktmatrix wie das Pedal, Einheit klein; FS-Applikation im Akzent */
.jy-tag.vb b{font:850 28px/.9 var(--dots);letter-spacing:.02em}
.jy-tag.vb b::after{content:"Nm";margin-left:5px;font:500 12px/1 var(--mono);color:var(--fg2)}
.jy-tag.vb.on small{color:var(--acc)}
/* über dem Arbeitspunkt (den markiert der Leuchtpunkt im Bild): Haarlinie links, schräger Ansatz zum Punkt */
.jy-tag.vb::before{display:none}
.jy-tag.vb span{padding:2px 0 2px 10px;border-left:1px solid color-mix(in srgb,var(--acc) 70%,transparent)}
.jy-tag.vb::after{content:"";position:absolute;left:-17px;top:calc(100% - 1px);width:17px;height:1px;background:color-mix(in srgb,var(--acc) 70%,transparent);transform-origin:100% 50%;transform:rotate(-45deg)}
/* Achsen des Kennfelds: Teilung als kleine Mono-Zahlen ohne Punkt, Achstitel etwas kräftiger */
.jy-tag.ax::before{display:none}
.jy-tag.ax b{font:500 10px/1 var(--mono);letter-spacing:.02em;color:var(--mut)}
.jy-tag.ax.ti b{font:600 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg2)}
.jy-tag.ax small{display:none}
.jy-tag.c{justify-content:center}
.jy-tag.c span{align-items:center;text-align:center}
/* Gangwahl: acht Zellen, Gang 4 im Akzent, darunter Gang und Übersetzung */
.jy-tag.gears::before{display:none}
.jy-tag.gears{flex-direction:column;gap:6px}
.jy-tag.gears .g{display:flex;flex-direction:row;gap:3px}
.jy-tag.gears .g b{display:grid;place-items:center;width:15px;height:19px;border-radius:4px;font:600 10px/1 var(--mono);color:var(--mut);text-shadow:none;
  background:color-mix(in srgb,var(--bg) 55%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 14%,transparent)}
.jy-tag.gears .g b.on{background:var(--acc);color:var(--acc-fg);box-shadow:0 0 12px var(--acc-glow)}
.jy-tag.gears small{color:var(--fg2)}
/* Bauteil-Hinweis wie in der technischen Zeichnung: feiner Punkt, Haarstrich, kleine Versalien */
.jy-tag.co{gap:6px}
.jy-tag.co::before{width:5px;height:5px;background:var(--fg);box-shadow:0 0 0 2px color-mix(in srgb,var(--bg) 70%,transparent)}
.jy-tag.co i{flex:none;width:22px;height:1px;background:color-mix(in srgb,var(--fg) 45%,transparent)}
.jy-tag.co small{color:var(--fg2)}
.jy-tag.co.am::before{background:var(--j-amber);box-shadow:0 0 0 2px color-mix(in srgb,var(--j-amber) 25%,transparent)}
.jy-tag.co.am i{background:color-mix(in srgb,var(--j-amber) 60%,transparent)}
.jy-tag.co.am small{color:var(--j-amber)}
/* Werte der drei Ströme als kleine Tabelle mit Haarlinie (ohne Punkt) */
.jy-tag.tbl::before{display:none}
.jy-tag.tbl span{display:grid;grid-template-columns:auto auto;gap:4px 14px;padding:2px 0 2px 12px;border-left:1px solid color-mix(in srgb,var(--acc) 60%,transparent)}
.jy-tag.tbl i{font:500 9.5px/1.25 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);font-style:normal;text-shadow:0 0 6px var(--bg),0 0 2px var(--bg)}
.jy-tag.tbl em{font:600 11.5px/1.25 var(--mono);color:var(--fg);font-style:normal;text-align:right;font-variant-numeric:tabular-nums;text-shadow:0 0 6px var(--bg),0 0 2px var(--bg)}

/* Schlussbild: die Bits sammeln sich in der Zahl */
.jy-out{position:absolute;left:0;top:0;z-index:3;display:flex;flex-direction:column;align-items:center;gap:9px;opacity:0;pointer-events:none;white-space:nowrap;will-change:transform,opacity}
.jy-o-r{display:flex;align-items:baseline;gap:10px}
.jy-o-v{font-size:clamp(52px,9cqw,104px);color:var(--fg);font-variant-numeric:tabular-nums;text-shadow:0 0 40px var(--acc-glow)}
.jy-o-u{font:500 clamp(12px,1.2cqw,15px)/1 var(--mono);letter-spacing:.04em;color:var(--fg2)}
.jy-o-s{font:500 10.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}

/* ---------- Volle Ansicht: Kopfzeile, Bildunterschrift, Leiste ---------- */
.jys-full::before{content:"";position:absolute;left:0;right:0;bottom:0;z-index:2;height:min(240px,46%);pointer-events:none;
  background:linear-gradient(0deg,var(--j-scrim) 0%,var(--j-scrim) 38%,transparent 100%)}
.jys-kick{position:absolute;z-index:4;left:18px;top:14px;margin:0;font:500 10px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.jys-cap{position:absolute;z-index:4;left:18px;right:18px;bottom:66px;display:flex;flex-direction:column;gap:5px;max-width:560px;
  transition:opacity .34s var(--j-ease-out),transform .34s var(--j-ease-out)}
.jys-cap.is-out{opacity:0;transform:translate3d(0,6px,0);transition-duration:.16s}
.jys-cap p,.jys-cap h3{margin:0}
.jys-n{font:600 10px/1 var(--mono);letter-spacing:.14em;color:var(--acc)}
.jys-n i{font-style:normal;color:var(--mut)}
.jys-h{font:680 clamp(18px,2.3cqw,25px)/1.1 var(--font);font-stretch:106%;letter-spacing:-.022em;color:var(--fg);text-wrap:balance}
.jys-p{font-size:clamp(13px,1.35cqw,15px);line-height:1.42;color:var(--fg2);max-width:54ch;text-wrap:pretty}
.jys-d{font:500 10.5px/1.4 var(--mono);letter-spacing:.02em;color:var(--acc);font-variant-numeric:tabular-nums}

.jys-bar{position:absolute;z-index:4;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:6px;height:40px}
.jys-btn{flex:none;display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:50%;cursor:pointer;color:var(--fg);
  background:color-mix(in srgb,var(--fg) 7%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 10%,transparent);
  transition:transform .16s var(--j-ease-out),background-color .2s var(--j-ease-out)}
.jys-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.jys-pp svg path[d^="M8.5"]{fill:currentColor;stroke-width:1.2}
.jys-btn:active{transform:scale(.95)}
.jys.is-ended .jys-re{background:var(--acc);color:var(--acc-fg)}
.jys-steps{flex:1;display:flex;gap:2px;min-width:0}
.jys-step{position:relative;flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 8px;border:0;border-radius:999px;
  background:none;color:var(--mut);cursor:pointer;transition:color .2s var(--j-ease-out),background-color .2s var(--j-ease-out)}
.jys-sn{flex:none;font:600 10px/1 var(--mono);letter-spacing:.06em}
.jys-sl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 12px/1 var(--font);letter-spacing:-.005em}
.jys-sf{position:absolute;left:12px;right:12px;bottom:5px;height:1.5px;border-radius:2px;overflow:hidden;background:color-mix(in srgb,var(--fg) 11%,transparent)}
.jys-sf::after{content:"";position:absolute;inset:0;background:var(--acc);transform-origin:0 50%;transform:scaleX(var(--k,0))}
.jys-step.is-done{color:var(--fg2)}
.jys-step.is-done .jys-sf::after{transform:scaleX(1)}
.jys-step.is-on{color:var(--fg);background:color-mix(in srgb,var(--fg) 6%,transparent)}
.jys-step.is-on .jys-sn{color:var(--acc)}
.jys.is-still .jys-step.is-on .jys-sf::after{transform:scaleX(1)}
.jys-btn:focus-visible,.jys-step:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.jys-step:hover{color:var(--fg)}.jys-btn:hover{background:color-mix(in srgb,var(--fg) 12%,transparent)}}

/* schmale Ansicht (Handy, kleine Panels): Kapitel nur als Nummern, Text kompakter */
@container (max-width:620px){
  .jys-sl{display:none}
  .jys-step{padding:0}
  .jys-sf{left:30%;right:30%}
  .jys-cap{left:14px;right:14px;bottom:60px;gap:4px}
  .jys-h{font-size:clamp(17px,5.2cqw,20px)}
  .jys-p{font-size:13px;line-height:1.38}
  .jys-kick{left:14px;top:12px}
  .jys-bar{left:8px;right:8px;bottom:8px}
  .jy-tag b{font-size:11px}
  .jy-tag small{font-size:9px;letter-spacing:.1em}
  .jy-tag.big b{font-size:24px}
  .jy-tag.vb b{font-size:23px}
  .jy-tag.gears .g b{width:13px;height:17px;font-size:9px}
}

/* ohne WebGL: lesbare Liste der sieben Kapitel (volle Ansicht) bzw. ruhiges Bild (Vorschau) */
.jys-fb{position:absolute;inset:0;z-index:4;overflow:auto;padding:18px}
.jys-fbl{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.jys-fbl li{display:grid;gap:4px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.jys-fbl h3{margin:0;font-size:17px}
.jys-fbl p{margin:0;color:var(--fg2);font-size:14px}
.jys-fbl .jys-d{color:var(--acc)}
.jys-fb-pedal{position:absolute;left:44%;top:16%;width:14%;height:60%;border-radius:10px 10px 6px 6px;transform:rotate(-20deg);
  background:repeating-linear-gradient(0deg,transparent 0 6px,rgba(255,255,255,.07) 6px 8px),linear-gradient(100deg,#15171a,#2b2f35 46%,#121417)}

@media (prefers-reduced-motion:reduce){.jys-full.is-loading::after{animation:none}.jys-cap,.jys-step,.jys-btn{transition:none}}
:root.motion-reduce .jys-full.is-loading::after{animation:none}
:root.motion-reduce .jys-cap{transition:none}