/* JP-Design Lade-Animation (24.10.2026) – Vorlage von Johannes (vorlagen-dashboard/docs/jp-logo-ladeanimation.html), ohne Kundenwappen.
   Große Variante: ganze Seite beim Öffnen von Kundenportal, Studio-Startseite, Design- und Videoeditor (Markup als erstes
   Element in <body>, Steuerung /jpload.js, mindestens 2 s, höchstens 4,5 s). Kleine Variante „jpload-mini“ für Bereiche,
   die nachladen (z. B. Kacheln, deren Vorschau noch kommt). Wegen der CSP keine style-Attribute: die Streifen heißen b0…b4. */
.jpload{position:fixed;inset:0;z-index:99999;background:#fff;display:grid;place-items:center;transition:opacity .7s ease .15s,visibility 0s linear .9s}
/* Die Fläche gibt es nur, solange jpload.js sie führt (html.jpload-on). Ohne JavaScript oder wenn das Skript fehlt, bleibt sie unsichtbar
   – sonst stünde eine leere weiße Fläche für immer über der Seite. */
html:not(.jpload-on) .jpload{display:none}
/* Kundenportal: der ältere Lade-Dialog (#loading, oberste Ebene per showModal) bleibt unsichtbar, solange die Animation läuft */
html.jpload-on:not(.jpload-done) #loading.loading-overlay,html.jpload-on:not(.jpload-done) #loading.loading-overlay::backdrop{opacity:0;transition:none}
.jpload-inner{display:grid;justify-items:center;gap:22px;transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .7s ease,opacity .6s ease}
.jpload-logo{width:118px;height:118px;overflow:visible;display:block}
.jpload-logo .b0{--i:0}.jpload-logo .b1{--i:1}.jpload-logo .b2{--i:2}.jpload-logo .b3{--i:3}.jpload-logo .b4{--i:4}
/* Ring zeichnet sich, Pyramiden-Streifen wachsen von unten, dann J und P */
.jpload-logo .ring{stroke-dasharray:1;stroke-dashoffset:1;animation:jpload-draw 1.1s cubic-bezier(.65,0,.35,1) .05s forwards}
.jpload-logo .b{opacity:0;transform-box:fill-box;transform-origin:50% 100%;animation:jpload-band .55s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.25s + var(--i) * .08s)}
.jpload-logo .jpl path{stroke-dasharray:1;stroke-dashoffset:1;animation:jpload-draw .9s cubic-bezier(.65,0,.35,1) .55s forwards}
.jpload-logo .jpl path+path{animation-delay:.7s}
/* Kundenlogo neben dem JP-Logo (wie eine Kooperation): Trennstrich, Einblenden mit Lichtschein */
.jpload-logos{display:flex;align-items:center;gap:26px}
.jpload-x{width:1px;height:84px;background:linear-gradient(transparent,#c9cdd8,transparent);opacity:0;animation:jpload-fade .5s ease .6s forwards}
.jpload-kw{position:relative;display:inline-block;line-height:0;border-radius:14px;overflow:hidden;opacity:0;transform:translateX(10px);animation:jpload-kwin .8s cubic-bezier(.2,.7,.2,1) .7s forwards}
.jpload-kw img{display:block;height:104px;width:auto;max-width:150px;object-fit:contain}
.jpload-kw::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.9) 50%,transparent 62%) no-repeat;background-size:300% 100%;background-position:120% 0;animation:jpload-shine 1.3s ease 1.1s 1 forwards}
@keyframes jpload-kwin{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@keyframes jpload-shine{from{background-position:120% 0}to{background-position:-120% 0}}
/* Ladebalken im Logo-Verlauf + Text */
.jpload-bar{width:168px;height:3px;border-radius:3px;background:#f0f0ee;overflow:hidden;opacity:0;animation:jpload-fade .5s ease .4s forwards;display:block}
.jpload-bar i{display:block;height:100%;width:40%;border-radius:inherit;background:linear-gradient(90deg,#5a0fb4,#f0102a);animation:jpload-sweep 1.2s cubic-bezier(.65,0,.35,1) infinite}
.jpload-txt{color:#6b6d78;font:500 13px "Instrument Sans",system-ui,-apple-system,sans-serif;letter-spacing:.02em;opacity:0;animation:jpload-fade .5s ease .5s forwards}
/* Auflösen: Logo zoomt leicht nach vorne, wird unscharf, Fläche blendet aus */
html.jpload-done .jpload{opacity:0;visibility:hidden;pointer-events:none}
html.jpload-done .jpload-inner{transform:scale(1.12);filter:blur(10px);opacity:0}
html.jpload-on:not(.jpload-done) body{overflow:hidden}
@keyframes jpload-draw{to{stroke-dashoffset:0}}
@keyframes jpload-band{from{opacity:0;transform:translateY(14px) scaleY(.6)}to{opacity:1;transform:none}}
@keyframes jpload-sweep{from{transform:translateX(-110%)}to{transform:translateX(260%)}}
@keyframes jpload-fade{from{opacity:0}to{opacity:1}}

/* Mini-Variante (Schleife) für nachladende Bereiche: <div class="jpload-mini"> SVG + Balken + Text </div> */
.jpload-mini{display:grid;justify-items:center;gap:10px;color:#6b6d78;font:500 13px "Instrument Sans",system-ui,sans-serif;text-align:center}
.jpload-mini .jpload-logo{width:48px;height:48px}
.jpload-mini .jpload-logo .ring,.jpload-mini .jpload-logo .jpl path{stroke-dasharray:1;animation:jpload-drawloop 2.4s cubic-bezier(.65,0,.35,1) infinite}
.jpload-mini .jpload-logo .jpl path{animation-delay:.25s}
.jpload-mini .jpload-logo .b{opacity:.3;transform:none;animation:jpload-bandloop 2.4s ease-in-out infinite;animation-delay:calc(var(--i) * .12s)}
.jpload-mini .jpload-bar{width:84px;opacity:1;animation:none}
.jpload-mini .jpload-txt{opacity:1;animation:none}
@keyframes jpload-drawloop{0%{stroke-dashoffset:1}45%,70%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
@keyframes jpload-bandloop{0%,100%{opacity:.25}45%,70%{opacity:1}}
.jpload-nobar .jpload-bar{display:none}
.jpload-notext .jpload-txt{display:none}
/* Kundenlogo in der kleinen Variante: sofort da, Lichtschein läuft in der Schleife; ruhige Variante ohne Lichtschein */
.jpload-mini .jpload-logos{display:flex;align-items:center;gap:8px}
.jpload-mini .jpload-x{height:28px;opacity:1;animation:none}
.jpload-mini .jpload-kw{opacity:1;transform:none;animation:none;border-radius:8px}
.jpload-mini .jpload-kw img{height:34px;max-width:52px}
.jpload-mini .jpload-kw::after{animation:jpload-shine 2.4s ease .6s infinite}
.jpload-still .jpload-kw::after{animation:none;display:none}
/* Ruhige Variante ohne Schleife: Logo fertig gezeichnet (z. B. „Vorschau folgt“) */
.jpload-still .jpload-logo .ring,.jpload-still .jpload-logo .jpl path,.jpload-still .jpload-logo .b{animation:none;stroke-dashoffset:0;opacity:1;transform:none}

/* Bewegung reduzieren: Logo sofort fertig, nur der Balken läuft langsam */
@media (prefers-reduced-motion:reduce){
  .jpload-logo .ring,.jpload-logo .b,.jpload-logo .jpl path{animation:none;opacity:1;stroke-dashoffset:0;transform:none}
  .jpload-bar i{animation-duration:2.4s}
  .jpload,.jpload-inner{transition:opacity .3s}
}