/* Begrüßung und Verabschiedung zwischen Kundenportal und JP Studio – gehört zu studio-welcome.js (Portal und Studio).
   Flüssig auch während die Seite dahinter lädt: Es bewegen sich nur transform und opacity (die zeichnet die Grafikkarte,
   nicht das beschäftigte Programm der Seite). Breiten werden nicht animiert, sondern mit scaleX.
   Nahtlos über den Seitenwechsel: studio-welcome.js setzt --o = vergangene Zeit seit dem Klick. Jede Verzögerung ist
   „Startzeit – --o“, also läuft jede Bewegung auf der neuen Seite genau an derselben Stelle weiter. */
.jw-overlay{--o:0ms;position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;overflow:hidden;color:#fff;cursor:progress;
  background:radial-gradient(120% 90% at 20% 10%,#2a4a8a 0%,#16264d 45%,#0b1424 100%);font-family:inherit;
  animation:jw-in .5s ease calc(0s - var(--o)) both;contain:strict}
.jw-overlay.jw-out{animation:jw-out .7s cubic-bezier(.7,0,.3,1) forwards;pointer-events:none}
.jw-bg{position:absolute;inset:0;pointer-events:none}
.jw-shape{position:absolute;display:block;border-radius:50%;opacity:0;will-change:transform,opacity;
  animation:jw-float var(--d,6s) ease-in-out calc(0s - var(--o)) infinite,jw-fade .9s ease calc(var(--f,0s) - var(--o)) forwards}
.jw-s1{--d:7s;--f:0s;width:340px;height:340px;left:-80px;top:-60px;background:radial-gradient(circle,#b07f3c55,transparent 70%)}
.jw-s2{--d:8s;--f:.2s;width:420px;height:420px;right:-120px;bottom:-140px;background:radial-gradient(circle,#4f7fd655,transparent 70%)}
.jw-s3{--d:5s;--f:.5s;width:18px;height:18px;left:22%;top:28%;background:#d4a556;border-radius:4px}
.jw-s4{--d:6s;--f:.7s;width:12px;height:12px;right:24%;top:22%;background:#fff}
.jw-s5{--d:6.5s;--f:.9s;width:26px;height:26px;right:18%;bottom:26%;border:3px solid #d4a556;background:transparent}
.jw-s6{--d:5.5s;--f:1s;width:10px;height:10px;left:30%;bottom:22%;background:#8fb3e0}
.jw-s7{--d:7.5s;--f:1.1s;width:60px;height:3px;left:14%;top:62%;background:#d4a556;border-radius:3px}
/* Handy: Die Formen liegen sonst mitten im Text (z. B. der goldene Strich neben „Gestalten wir etwas Schönes.“) */
@media (max-width:700px){.jw-s7{left:12%;top:80%}.jw-s3{top:20%}.jw-s4{top:16%}.jw-s5{bottom:16%}.jw-s6{bottom:12%}}
.jw-center{position:relative;display:grid;justify-items:center;gap:10px;text-align:center;padding:24px;max-width:min(680px,92vw)}
.jw-logo{width:74px;height:auto;opacity:0;will-change:transform,opacity;animation:jw-pop .8s cubic-bezier(.2,1.4,.4,1) calc(.15s - var(--o)) forwards}
.jw-line{display:block;width:min(260px,60vw);height:3px;border-radius:3px;transform:scaleX(0);will-change:transform;
  background:linear-gradient(90deg,transparent,#d4a556,#f1d29a,#d4a556,transparent);animation:jw-line 1s ease calc(.5s - var(--o)) forwards}
.jw-kicker{margin:6px 0 0;font-size:clamp(14px,2.4vw,18px);letter-spacing:.32em;text-transform:uppercase;color:#d9c49b;opacity:0;will-change:transform,opacity;
  animation:jw-up .7s ease calc(.7s - var(--o)) forwards}
.jw-title{margin:0;font-size:clamp(40px,9vw,84px);font-weight:800;letter-spacing:-.02em;line-height:1.05}
.jw-ch{--t:.9s;display:inline-block;opacity:0;transform:translateY(28px) rotate(6deg);will-change:transform,opacity;
  animation:jw-ch .6s cubic-bezier(.2,1.2,.3,1) calc(var(--t) - var(--o)) forwards;
  background:linear-gradient(180deg,#fff 30%,#f1d29a);-webkit-background-clip:text;background-clip:text;color:transparent}
.jw-d1{--t:.96s}.jw-d2{--t:1.02s}.jw-d3{--t:1.08s}.jw-d4{--t:1.14s}.jw-d5{--t:1.2s}.jw-d6{--t:1.26s}.jw-d7{--t:1.32s}.jw-d8{--t:1.38s}.jw-d9{--t:1.44s}.jw-d10{--t:1.5s}.jw-d11{--t:1.56s}.jw-d12{--t:1.62s}
.jw-sub{margin:4px 0 0;font-size:clamp(15px,2.6vw,19px);color:#c8d3e8;opacity:0;will-change:transform,opacity;animation:jw-up .7s ease calc(1.7s - var(--o)) forwards}
/* Nur wenn das Laden länger dauert als die Einblendung (studio-welcome.js setzt jw-waiting) – kein Überspringen mehr */
.jw-wait{position:fixed;bottom:28px;left:0;right:0;text-align:center;font-size:12px;color:#8fa0bf;opacity:0;transition:opacity .4s ease}
.jw-waiting .jw-wait{opacity:1}
.jw-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:#ffffff14;overflow:hidden}
.jw-bar b{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left center;will-change:transform;
  background:linear-gradient(90deg,#b07f3c,#f1d29a);animation:jw-bar 2.6s linear calc(0s - var(--o)) forwards}
.jw-bye .jw-bar b{animation-duration:1.6s}
/* Verabschiedung: kürzere Einblendung */
.jw-bye .jw-logo{animation-delay:calc(0s - var(--o))}
.jw-bye .jw-line{animation-delay:calc(.15s - var(--o))}
.jw-bye .jw-title-bye{opacity:0;will-change:transform,opacity;background:linear-gradient(180deg,#fff 30%,#f1d29a);-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:jw-up .6s ease calc(.25s - var(--o)) forwards}
.jw-bye .jw-sub{animation-delay:calc(.5s - var(--o))}
html.jw-active body{overflow:hidden}
@keyframes jw-in{from{opacity:0}to{opacity:1}}
@keyframes jw-out{to{opacity:0;transform:scale(1.04)}}
@keyframes jw-fade{to{opacity:1}}
@keyframes jw-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(12px,-16px,0)}}
@keyframes jw-pop{from{opacity:0;transform:scale(.4) rotate(-12deg)}to{opacity:1;transform:none}}
@keyframes jw-line{to{transform:scaleX(1)}}
@keyframes jw-up{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes jw-ch{to{opacity:1;transform:none}}
@keyframes jw-bar{to{transform:scaleX(1)}}
/* „Bewegung reduzieren“: alles sofort sichtbar, nur die Linie unten läuft */
.jw-reduced .jw-shape,.jw-reduced .jw-logo,.jw-reduced .jw-line,.jw-reduced .jw-kicker,.jw-reduced .jw-ch,.jw-reduced .jw-sub,.jw-reduced .jw-title-bye{animation:none;opacity:1;transform:none}
.jw-reduced{animation:none}
/* Solange die Animation läuft: Lade-Fenster und andere Fenster der Seite unsichtbar (sie liegen sonst darüber). */
html.jw-active dialog[open]{visibility:hidden}
html.jw-active dialog::backdrop{background:transparent}

/* Aussehen wie der Ladebildschirm (jpload.css, 27.10.2026, Johannes): weiße Fläche ohne Formen, das JP-Logo in Originalfarben baut sich
   mit denselben Zeiten auf, darunter der Ladebalken Lila → Rot; „Willkommen im JP Studio“ bzw. „Auf Wiedersehen“ in Dunkelblau.
   Alle Verzögerungen laufen ab --o weiter, damit das Logo auf der neuen Seite an derselben Stelle weiterzeichnet.
   Beim Ausblenden zoomt das Logo leicht nach vorne und verschwimmt – wie der Abschluss des Ladebildschirms. */
.jw-overlay{background:#fff;color:#16264d}
.jw-overlay .jw-bg,.jw-overlay .jw-bar{display:none}
.jw-center{gap:14px}
.jw-mark-wrap{display:block;width:118px;height:118px;will-change:transform,opacity,filter;transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .7s ease,opacity .6s ease}
.jw-mark{width:100%;height:100%;overflow:visible;display:block}
.jw-mark .b0{--i:0}.jw-mark .b1{--i:1}.jw-mark .b2{--i:2}.jw-mark .b3{--i:3}.jw-mark .b4{--i:4}
.jw-mark .ring{stroke-dasharray:1;stroke-dashoffset:1;animation:jw-draw 1.1s cubic-bezier(.65,0,.35,1) calc(.05s - var(--o)) forwards}
.jw-mark .b{opacity:0;transform-box:fill-box;transform-origin:50% 100%;animation:jw-band .55s cubic-bezier(.2,.7,.2,1) calc(.25s + var(--i) * .08s - var(--o)) forwards}
.jw-mark .jpl path{stroke-dasharray:1;stroke-dashoffset:1;animation:jw-draw .9s cubic-bezier(.65,0,.35,1) calc(.55s - var(--o)) forwards}
.jw-mark .jpl path+path{animation-delay:calc(.7s - var(--o))}
.jw-overlay .jw-logo{width:96px}
/* Ladebalken statt der goldenen Linie */
.jw-overlay .jw-line{position:relative;width:168px;height:3px;border-radius:3px;background:#f0f0ee;overflow:hidden;transform:none;opacity:0;animation:jw-fadein .5s ease calc(.4s - var(--o)) forwards}
.jw-overlay .jw-line::after{content:"";position:absolute;top:0;left:0;height:100%;width:40%;border-radius:inherit;background:linear-gradient(90deg,#5a0fb4,#f0102a);animation:jw-sweep 1.2s cubic-bezier(.65,0,.35,1) calc(0s - var(--o)) infinite}
.jw-overlay .jw-kicker{color:#6b6d78;margin-top:10px}
.jw-overlay .jw-ch,.jw-bye .jw-title-bye{background:linear-gradient(180deg,#16264d 40%,#2a4a8a);-webkit-background-clip:text;background-clip:text;color:transparent}
.jw-overlay .jw-sub{color:#6b6d78}
.jw-overlay .jw-wait{color:#8a8d98}
.jw-out .jw-mark-wrap{transform:scale(1.12);filter:blur(10px);opacity:0}
@keyframes jw-draw{to{stroke-dashoffset:0}}
@keyframes jw-band{from{opacity:0;transform:translateY(14px) scaleY(.6)}to{opacity:1;transform:none}}
@keyframes jw-fadein{to{opacity:1}}
@keyframes jw-sweep{from{transform:translateX(-110%)}to{transform:translateX(260%)}}
.jw-reduced .jw-mark .ring,.jw-reduced .jw-mark .b,.jw-reduced .jw-mark .jpl path{animation:none;opacity:1;stroke-dashoffset:0;transform:none}
.jw-reduced .jw-line{animation:none;opacity:1}
.jw-bye .jw-title-bye{margin-top:12px}
/* Ankunft nach einem Wechsel: der Übergang ersetzt den normalen Ladebildschirm (studio-welcome.js, jw-noload) */
html.jw-noload .jpload{display:none!important}