/* Pro-Fenster (lino/pro-fenster): clean, im Stellio-Design, aber mit Bewegung */
.pt-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, 0); transition: background .2s ease; overflow-y: auto; }
.pt-overlay.is-open { background: rgba(15, 23, 42, .55); }
body.pt-open { overflow: hidden; }

.pt-card { position: relative; width: min(560px, 100%); margin: auto; padding: 28px 26px 18px; border-radius: 26px; background: var(--card-bg, #fff); color: var(--text); box-shadow: 0 30px 80px rgba(15, 23, 42, .35); transform: translateY(14px) scale(.98); opacity: 0; transition: transform .25s cubic-bezier(.2, .8, .2, 1), opacity .2s ease; overflow: hidden; }
.pt-overlay.is-open .pt-card { transform: none; opacity: 1; }
.pt-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 170px; background: radial-gradient(120% 100% at 15% 0%, rgba(37, 99, 235, .16), transparent 60%), radial-gradient(90% 90% at 100% 0%, rgba(14, 165, 233, .14), transparent 60%); pointer-events: none; }

.pt-x { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--text-muted); opacity: .55; display: grid; place-items: center; cursor: pointer; z-index: 2; }
.pt-x:hover { opacity: 1; background: var(--bg-second); }

.pt-head { position: relative; text-align: center; padding: 4px 8px 6px; }
.pt-kicker { display: inline-block; padding: 4px 12px; border-radius: 100px; background: var(--gold, #2563EB); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pt-head h2 { margin: 22px 0 6px; font-size: 25px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
.pt-head h2 .pw-accent { color: var(--gold, #2563EB); }
.pt-sub { margin: 0 auto; max-width: 420px; font-size: 14.5px; line-height: 1.5; color: var(--text-muted); }

.pt-price { position: absolute; top: -6px; left: -4px; display: flex; flex-direction: column; align-items: center; padding: 8px 12px; border-radius: 14px; background: #FDE68A; color: #3B2F05; transform: rotate(-9deg); box-shadow: 0 8px 18px rgba(180, 140, 20, .25); line-height: 1.05; animation: ptWiggle 4s ease-in-out infinite; }
.pt-price span { font-size: 11px; font-weight: 600; }
.pt-price b { font-size: 17px; font-weight: 800; white-space: nowrap; }
@keyframes ptWiggle { 0%, 90%, 100% { transform: rotate(-9deg); } 94% { transform: rotate(-4deg) scale(1.04); } 97% { transform: rotate(-11deg); } }

.pt-cats { display: grid; gap: 10px; margin: 18px 0 16px; }
.pt-cat { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 18px; background: var(--bg-second); opacity: 0; transform: translateY(8px); animation: ptIn .35s ease forwards; animation-delay: calc(.12s + var(--i) * .09s); }
@keyframes ptIn { to { opacity: 1; transform: none; } }
.pt-art { flex: none; width: 108px; height: 76px; border-radius: 14px; background: var(--card-bg); display: grid; place-items: center; overflow: hidden; }
.pt-art svg { width: 100%; height: 100%; }
.pt-cat-text b { display: block; font-size: 15.5px; line-height: 1.3; margin-bottom: 3px; }
.pt-cat-text p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-muted); }

/* Animation 1: Lebenslauf-Seiten fächern sich auf */
.pt-page rect { fill: #fff; stroke: #CBD5E1; stroke-width: 1.5; }
.pt-page path { stroke: #94A3B8; stroke-width: 2.4; stroke-linecap: round; fill: none; }
.pt-page circle { fill: #BFDBFE; }
.pt-page .pt-band { fill: #2563EB; stroke: none; }
.pt-page { transform-origin: 60px 70px; transform-box: view-box; animation: ptFan 4.5s ease-in-out infinite; }
.pt-p1 { --r: -16deg; --x: -14px; }
.pt-p2 { --r: 0deg; --x: 0px; }
.pt-p3 { --r: 16deg; --x: 14px; }
@keyframes ptFan { 0%, 12% { transform: none; } 35%, 75% { transform: translateX(var(--x)) rotate(var(--r)); } 100% { transform: none; } }

/* Animation 2: Balken wachsen, Trendlinie zeichnet sich */
.pt-axis { stroke: #CBD5E1; stroke-width: 2; }
.pt-bar { fill: #93C5FD; transform-box: fill-box; transform-origin: bottom; animation: ptGrow 4.5s ease-in-out infinite; }
.pt-b1 { --h: .35; } .pt-b2 { --h: .5; } .pt-b3 { --h: .7; fill: #60A5FA; } .pt-b4 { --h: 1; fill: #2563EB; }
@keyframes ptGrow { 0% { transform: scaleY(.08); } 40%, 85% { transform: scaleY(var(--h)); } 100% { transform: scaleY(.08); } }
.pt-trend { fill: none; stroke: #F59E0B; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: ptDraw 4.5s ease-in-out infinite; }
@keyframes ptDraw { 0%, 25% { stroke-dashoffset: 100; } 60%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 100; } }

/* Animation 3: Papierflieger fliegt los */
.pt-path { fill: none; stroke: #CBD5E1; stroke-width: 2; stroke-dasharray: 3 5; }
.pt-plane path { fill: #2563EB; }
.pt-plane { offset-path: path('M10 70 C 40 70, 46 30, 78 32 S 108 18, 112 12'); offset-rotate: auto; animation: ptFly 4.5s ease-in-out infinite; }
@keyframes ptFly { 0%, 10% { offset-distance: 0%; opacity: 0; } 18% { opacity: 1; } 80% { offset-distance: 100%; opacity: 1; } 90%, 100% { offset-distance: 100%; opacity: 0; } }
.pt-env rect { fill: #fff; stroke: #94A3B8; stroke-width: 1.5; }
.pt-env path { fill: none; stroke: #94A3B8; stroke-width: 1.5; }

.pt-foot { text-align: center; }
.pt-cta { width: 100%; min-height: 52px; font-size: 16.5px; border-radius: 16px; }
.pt-trial { margin: 8px 0 0; font-size: 13px; color: var(--text-muted); }
.pt-free { margin-top: 10px; border: 0; background: none; padding: 6px; font: inherit; font-size: 12px; color: var(--text-muted); opacity: .6; cursor: pointer; }
.pt-free:hover { opacity: 1; text-decoration: underline; }

@media (max-width: 520px) {
  .pt-card { padding: 24px 16px 14px; border-radius: 22px; }
  .pt-head h2 { font-size: 21px; margin-top: 30px; }
  .pt-price { top: -10px; left: -2px; }
  .pt-art { width: 84px; height: 64px; }
  .pt-cat { gap: 10px; padding: 10px; }
  .pt-cat-text b { font-size: 14.5px; }
  .pt-cat-text p { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .pt-page, .pt-bar, .pt-trend, .pt-plane, .pt-price, .pt-cat { animation: none !important; }
  .pt-cat { opacity: 1; transform: none; }
  .pt-bar { transform: scaleY(var(--h)); }
  .pt-trend { stroke-dashoffset: 0; }
  .pt-plane { offset-distance: 80%; }
}