/* Begrüßung (mit Vorschau) beim Anmelden und Verabschiedung beim Abmelden im Kundenportal – gehört zu portal-welcome.js.
   Bewusst anders als die Studio-Begrüßung (studio-welcome.css, dunkel mit Gold): hier helles Glas über dem Portal,
   dunkle Schrift, kleine Vorschau-Karten. Es bewegen sich nur transform und opacity (flüssig, auch während geladen wird). */
.pw{position:fixed;inset:0;z-index:2147482000;display:grid;place-items:center;overflow:hidden;cursor:progress;color:#1d1d1f;
  background:rgba(244,245,248,.8);-webkit-backdrop-filter:blur(34px) saturate(180%);backdrop-filter:blur(34px) saturate(180%);
  font-family:'Instrument Sans',system-ui,sans-serif;animation:pw-in .4s ease both;contain:strict}
.pw::before{content:"";position:absolute;inset:-25%;pointer-events:none;
  background:radial-gradient(38% 38% at 22% 22%,rgba(27,45,91,.18),transparent 70%),radial-gradient(38% 38% at 78% 76%,rgba(176,127,60,.2),transparent 70%);
  animation:pw-drift 10s ease-in-out infinite alternate}
.pw.pw-out{animation:pw-out .6s cubic-bezier(.7,0,.3,1) forwards;pointer-events:none}
.pw-card{position:relative;display:grid;justify-items:center;gap:8px;text-align:center;padding:36px 32px 30px;max-width:min(780px,94vw)}
.pw-logo{width:76px;height:76px;border-radius:24px;background:#fff;display:grid;place-items:center;
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(16,24,40,.06),0 14px 36px rgba(16,24,40,.14);
  animation:pw-pop .7s cubic-bezier(.2,1.3,.4,1) .1s both}
.pw-logo img{width:48px;height:48px;object-fit:contain}
.pw-loading .pw-logo{animation:pw-pop .7s cubic-bezier(.2,1.3,.4,1) .1s both,pw-pulse 1.6s ease-in-out .9s infinite}
.pw-eyebrow{margin:14px 0 0;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#8a6a3a;animation:pw-up .6s ease .35s both}
.pw-title{margin:0;font:700 clamp(30px,6vw,56px)/1.08 'Schibsted Grotesk','Instrument Sans',sans-serif;letter-spacing:-.04em;color:#1d1d1f;animation:pw-up .7s cubic-bezier(.2,.9,.3,1) .45s both}
.pw-sub{margin:2px 0 0;font-size:clamp(15px,2.4vw,18px);color:#6e6e73;line-height:1.5;animation:pw-up .6s ease .6s both}
.pw-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:16px}
.pw-chip{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:150px;padding:12px 16px;border-radius:16px;text-align:left;
  background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(16,24,40,.04),0 10px 26px rgba(16,24,40,.09);
  animation:pw-up .55s cubic-bezier(.2,.9,.3,1.1) both;animation-delay:.8s}
.pw-chip:nth-child(2){animation-delay:.92s}.pw-chip:nth-child(3){animation-delay:1.04s}.pw-chip:nth-child(4){animation-delay:1.16s}
.pw-chip small{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#6e6e73}
.pw-chip b{font-size:17px;letter-spacing:-.02em;color:#1d1d1f}
.pw-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(0,0,0,.06)}
.pw-bar b{display:block;height:100%;transform:scaleX(0);transform-origin:left center;will-change:transform;
  background:linear-gradient(90deg,#1b2d5b,#b07f3c);animation:pw-bar var(--pw-dur,3.4s) linear forwards}
.pw-loading .pw-bar b{animation:pw-bar-slow 12s cubic-bezier(.1,.6,.3,1) forwards}
/* Verabschiedung: ruhiger, etwas dunkler getönt */
.pw-bye{background:rgba(236,239,246,.84)}
.pw-bye .pw-title{animation-delay:.2s}
.pw-bye .pw-sub{animation-delay:.35s}
.pw-bye .pw-bar b{background:linear-gradient(90deg,#b07f3c,#1b2d5b);animation-duration:2.2s}
/* Solange die Begrüßung läuft: Lade-Fenster der Seite unsichtbar (liegen sonst darüber), Seite nicht scrollbar */
html.pw-active body{overflow:hidden}
html.pw-active dialog[open]{visibility:hidden}
html.pw-active dialog::backdrop{background:transparent}
@keyframes pw-in{from{opacity:0}to{opacity:1}}
@keyframes pw-out{to{opacity:0;transform:scale(1.03)}}
@keyframes pw-pop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
@keyframes pw-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes pw-up{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}
@keyframes pw-drift{from{transform:translate3d(-2%,-2%,0)}to{transform:translate3d(2%,3%,0)}}
@keyframes pw-bar{to{transform:scaleX(1)}}
@keyframes pw-bar-slow{to{transform:scaleX(.9)}}
/* „Bewegung reduzieren“: alles sofort sichtbar, nur die Linie unten läuft */
.pw-reduced,.pw-reduced::before,.pw-reduced .pw-logo,.pw-reduced .pw-eyebrow,.pw-reduced .pw-title,.pw-reduced .pw-sub,.pw-reduced .pw-chip{animation:none;opacity:1;transform:none}
@media (max-width:600px){.pw-card{padding:24px 18px}.pw-chip{min-width:calc(50% - 5px);flex:1 1 calc(50% - 5px)}}