/* Belegerl Intro — dunkle Bühne im A2-Look: Raster, Lichtschwenk, Belegerl landet, Scan-Strahl über den Bon,
   Bon dreht sich zum PDF „abgelegt“, Funken, Marke. Eine Zeitachse (--bi-dur, Standard 4,4 s). */
.bi-stage {
  position: fixed; inset: 0; z-index: 9999; overflow: hidden; cursor: pointer; -webkit-user-select: none; user-select: none; touch-action: none;
  background: radial-gradient(120% 90% at 50% 40%, #13213A 0%, #0B1320 55%, #070C15 100%); color: #F7F8FA;
  --bi-h: clamp(170px, 34vh, 320px); --bi-dur: 4400ms;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.bi-stage *, .bi-stage *::before, .bi-stage *::after { box-sizing: border-box; }

.bi-grid { position: absolute; inset: -10%; opacity: 0;
  background-image: linear-gradient(rgba(147,197,253,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(147,197,253,.07) 1px, transparent 1px);
  background-size: 48px 48px; transform: perspective(700px) rotateX(58deg) translateY(18%); transform-origin: 50% 100%;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 70%, #000, transparent); mask-image: radial-gradient(60% 60% at 50% 70%, #000, transparent); }
.bi-sweep { position: absolute; top: -20%; bottom: -20%; width: 40vw; left: -50vw; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(59,130,246,.16), rgba(147,197,253,.22), rgba(59,130,246,.16), transparent); transform: skewX(-18deg); filter: blur(8px); }

.bi-scene { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); display: flex; align-items: flex-end; gap: clamp(28px, 7vw, 110px); }
.bi-bot { position: relative; height: var(--bi-h); width: calc(var(--bi-h) * .745); opacity: 0; transform-origin: 50% 100%; }
.bi-bot img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 20px 26px rgba(0,0,0,.5)); }
.bi-shadow { position: absolute; left: 12%; right: 12%; bottom: -6px; height: 16px; border-radius: 50%; background: rgba(0,0,0,.65); filter: blur(7px); transform: scale(.2); opacity: 0; }
.bi-beam { position: absolute; z-index: 1; left: 66%; top: 18%; width: calc(clamp(28px, 7vw, 110px) + var(--bi-h) * .6); height: calc(var(--bi-h) * .7); transform-origin: 0 14%; transform: scaleX(0); opacity: 0;
  background: linear-gradient(90deg, rgba(147,197,253,.85), rgba(59,130,246,.28) 60%, rgba(59,130,246,0)); clip-path: polygon(0 10%, 0 18%, 100% 100%, 100% 0); filter: blur(1px); mix-blend-mode: screen; }

.bi-doc { position: relative; width: calc(var(--bi-h) * .52); height: calc(var(--bi-h) * .74); perspective: 900px; opacity: 0; }
.bi-bon, .bi-pdf { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 6px; }
.bi-bon { background: #FFFDF7; color: #1F2937; padding: 10% 10% 12%; display: flex; flex-direction: column; gap: 7%; font: 700 clamp(8px, 1.3vh, 12px)/1 "JetBrains Mono", ui-monospace, Consolas, monospace;
  box-shadow: 0 24px 40px -18px rgba(0,0,0,.7); }
.bi-bon::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 8px; background: radial-gradient(circle at 6px 0, transparent 4.5px, #FFFDF7 5px) repeat-x; background-size: 12px 8px; }
.bi-bon b { text-align: center; letter-spacing: .08em; }
.bi-bon i { display: block; height: 7%; max-height: 7px; border-radius: 4px; background: #DDD6C6; }
.bi-bon i:nth-child(3n) { width: 64%; }
.bi-bon em { font-style: normal; display: flex; justify-content: space-between; border-top: 2px solid #1F2937; padding-top: 6%; margin-top: auto; }
.bi-pdf { background: #fff; color: #0B1320; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9%; overflow: hidden; transform: rotateY(-180deg);
  box-shadow: 0 24px 40px -18px rgba(0,0,0,.7), 0 0 0 1px rgba(37,99,235,.25); }
.bi-pdf-top { position: absolute; top: 0; left: 0; right: 0; height: 22%; display: grid; place-items: center; color: #fff; font: 700 clamp(12px, 2vh, 18px)/1 "Space Grotesk", "Inter", sans-serif; background: linear-gradient(90deg, #2563EB, #3B82F6); }
.bi-pdf-no { margin-top: 14%; font: 700 clamp(9px, 1.4vh, 13px)/1 "JetBrains Mono", ui-monospace, monospace; color: #334155; }
.bi-pdf-ok { font: 700 clamp(10px, 1.6vh, 14px)/1 "Inter", sans-serif; color: #16A34A; padding: 6% 10%; border-radius: 999px; background: #DCFCE7; }
.bi-sparks { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.bi-sparks i { position: absolute; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #93C5FD; box-shadow: 0 0 10px #3B82F6; opacity: 0; transform: rotate(var(--a)) translateX(0); }
.bi-sparks i:nth-child(3n) { background: #86EFAC; box-shadow: 0 0 10px #22C55E; }

.bi-brand { position: absolute; left: 50%; bottom: 11%; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; opacity: 0; text-align: center; pointer-events: none; }
.bi-brand img { height: clamp(26px, 4.4vh, 40px); width: auto; filter: drop-shadow(0 6px 18px rgba(37,99,235,.45)); }
.bi-brand strong { font: 700 clamp(22px, 3.6vh, 34px)/1 "Space Grotesk", "Inter", sans-serif; letter-spacing: -.02em;
  background: linear-gradient(120deg, #F7F8FA 30%, #93C5FD 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bi-brand small { font-size: clamp(12px, 1.6vh, 14px); color: rgba(247,248,250,.6); letter-spacing: .02em; }

.bi-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.06); }
.bi-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2563EB, #93C5FD); box-shadow: 0 0 12px #3B82F6; }
.bi-skip { position: absolute; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); font: 500 .8rem/1 "Inter", system-ui, sans-serif;
  color: rgba(247,248,250,.7); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 9px 14px; cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .2s, color .2s; }
.bi-skip:hover { background: rgba(255,255,255,.12); color: #fff; }
.bi-skip:focus-visible { outline: 2px solid #93C5FD; outline-offset: 2px; }

/* ── Zeitachse ── */
.bi-run .bi-grid { animation: bi-grid var(--bi-dur) ease-out forwards; }
.bi-run .bi-sweep { animation: bi-sweep var(--bi-dur) linear forwards; }
.bi-run .bi-bot { animation: bi-bot var(--bi-dur) forwards; }
.bi-run .bi-shadow { animation: bi-shadow var(--bi-dur) forwards; }
.bi-run .bi-beam { animation: bi-beam var(--bi-dur) forwards; }
.bi-run .bi-doc { animation: bi-doc var(--bi-dur) forwards; }
.bi-run .bi-bon i { animation: bi-line var(--bi-dur) forwards; animation-delay: calc(var(--l) * 120ms); }
.bi-run .bi-bon { animation: bi-flip-a var(--bi-dur) forwards; }
.bi-run .bi-pdf { animation: bi-flip-b var(--bi-dur) forwards; }
.bi-run .bi-sparks i { animation: bi-spark var(--bi-dur) forwards; }
.bi-run .bi-brand { animation: bi-brand var(--bi-dur) forwards; }
.bi-run .bi-progress i { animation: bi-progress var(--bi-dur) linear forwards; }
.bi-exit { animation: bi-exit .6s cubic-bezier(.4,0,.2,1) forwards; pointer-events: none; }

@keyframes bi-grid { 0% { opacity: 0; } 18%, 100% { opacity: 1; } }
@keyframes bi-sweep { 0%, 4% { opacity: 0; left: -50vw; } 8% { opacity: 1; } 34% { opacity: 1; left: 110vw; } 35%, 100% { opacity: 0; left: 110vw; } }
@keyframes bi-bot {
  0%, 5%  { opacity: 0; transform: translateY(-70vh) rotate(-8deg); animation-timing-function: cubic-bezier(.55,0,.9,.5); }
  6%      { opacity: 1; }
  19%     { transform: translateY(0) rotate(0) scale(1.08, .88); animation-timing-function: cubic-bezier(.2,.8,.3,1); }
  24%     { transform: translateY(-4%) scale(.97, 1.04); }
  28%     { transform: none; opacity: 1; }
  70%     { transform: none; animation-timing-function: cubic-bezier(.3,0,.3,1); }
  75%     { transform: translateY(-9%) rotate(4deg) scale(1.03); }
  80%     { transform: translateY(0) scale(1.05, .95); }
  84%, 100% { transform: none; opacity: 1; }
}
@keyframes bi-shadow { 0%, 6% { opacity: 0; transform: scale(.2); } 19% { opacity: .9; transform: scale(1.15, 1); } 28%, 70% { opacity: .75; transform: scale(1); } 75% { opacity: .4; transform: scale(.75); } 82%, 100% { opacity: .75; transform: scale(1); } }
@keyframes bi-doc { 0%, 18% { opacity: 0; transform: translateX(30vw) rotate(14deg); } 22% { opacity: 1; } 32% { transform: translateX(-4%) rotate(-5deg); animation-timing-function: ease-out; } 36%, 100% { opacity: 1; transform: rotate(-3deg); } }
@keyframes bi-beam { 0%, 33% { opacity: 0; transform: scaleX(0); } 37% { opacity: 1; transform: scaleX(1); } 44% { opacity: .8; } 50% { opacity: 1; } 58% { opacity: .9; transform: scaleX(1); } 62%, 100% { opacity: 0; transform: scaleX(.9); } }
@keyframes bi-line { 0%, 36% { background: #DDD6C6; box-shadow: none; } 39% { background: #3B82F6; box-shadow: 0 0 8px rgba(59,130,246,.9); } 46%, 100% { background: #93C5FD; box-shadow: none; } }
@keyframes bi-flip-a { 0%, 60% { transform: rotateY(0); } 68%, 100% { transform: rotateY(180deg); } }
@keyframes bi-flip-b { 0%, 60% { transform: rotateY(-180deg); } 68% { transform: rotateY(0) scale(1.06); } 74%, 100% { transform: rotateY(0) scale(1); } }
@keyframes bi-spark { 0%, 67% { opacity: 0; transform: rotate(var(--a)) translateX(0) scale(.4); } 70% { opacity: 1; } 86% { opacity: 0; transform: rotate(var(--a)) translateX(calc(var(--bi-h) * .55)) scale(1); } 100% { opacity: 0; } }
@keyframes bi-brand { 0%, 70% { opacity: 0; transform: translate(-50%, 16px); filter: blur(6px); } 82%, 100% { opacity: 1; transform: translate(-50%, 0); filter: none; } }
@keyframes bi-progress { to { width: 100%; } }
@keyframes bi-exit { from { opacity: 1; transform: scale(1); filter: blur(0); } to { opacity: 0; transform: scale(1.06); filter: blur(10px); } }

@media (max-width: 599px) {
  .bi-stage { --bi-h: clamp(150px, 28vh, 230px); }
  .bi-scene { top: 42%; gap: 22px; }
  .bi-beam { width: calc(22px + var(--bi-h) * .6); }
}
@media (prefers-reduced-motion: reduce) {
  .bi-run .bi-grid, .bi-run .bi-sweep, .bi-run .bi-bot, .bi-run .bi-shadow, .bi-run .bi-beam, .bi-run .bi-doc, .bi-run .bi-bon, .bi-run .bi-bon i, .bi-run .bi-pdf, .bi-run .bi-sparks i, .bi-run .bi-brand, .bi-run .bi-progress i { animation: none; }
  .bi-bot, .bi-doc, .bi-brand, .bi-grid { opacity: 1; }
  .bi-shadow { opacity: .75; transform: none; }
  .bi-bon { transform: rotateY(180deg); } .bi-pdf { transform: none; }
  .bi-exit { animation: bi-fade .4s ease forwards; }
}
@keyframes bi-fade { to { opacity: 0; } }


/* ── Soft-3D-Look (Aykut 11.10.2026: Ladeanimation an die aktuelle Seite anpassen) ── */
.bi-stage { background: radial-gradient(70% 55% at 88% 6%, #DCE7FF 0, transparent 70%), radial-gradient(60% 50% at 6% 100%, #EDE4FF 0, transparent 70%), #F7F9FD; color: #0B1320;
  font-family: "Inter", system-ui, sans-serif; }
.bi-grid { background-image: linear-gradient(rgba(99,102,241,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,241,.09) 1px, transparent 1px); }
.bi-sweep { background: linear-gradient(90deg, transparent, rgba(99,102,241,.10), rgba(139,92,246,.16), rgba(59,130,246,.10), transparent); }
.bi-blob { position: absolute; border-radius: 50%; filter: blur(30px); opacity: .7; pointer-events: none; animation: bi-blob 9s ease-in-out infinite; }
.bi-blob.b1 { width: 46vmax; height: 46vmax; right: -16vmax; top: -18vmax; background: radial-gradient(circle, rgba(99,102,241,.28), transparent 65%); }
.bi-blob.b2 { width: 40vmax; height: 40vmax; left: -16vmax; bottom: -18vmax; background: radial-gradient(circle, rgba(14,165,233,.22), transparent 65%); animation-delay: -4s; }
@keyframes bi-blob { 50% { transform: translate(-3vmax, 3vmax) scale(1.06); } }
.bi-bot img { filter: drop-shadow(0 22px 26px rgba(30,41,99,.28)); }
.bi-shadow { background: rgba(30,41,99,.32); }
.bi-beam { background: linear-gradient(90deg, rgba(99,102,241,.75), rgba(139,92,246,.28) 60%, rgba(139,92,246,0)); mix-blend-mode: multiply; }
.bi-bon { background: #fff; border-radius: 12px; box-shadow: 0 1px 0 #E5E7EB, 0 26px 40px -22px rgba(30,41,99,.45); }
.bi-bon::after { background: radial-gradient(circle at 6px 0, transparent 4.5px, #fff 5px) repeat-x; background-size: 12px 8px; }
.bi-pdf { border-radius: 12px; box-shadow: 0 26px 40px -22px rgba(30,41,99,.45), 0 0 0 1px rgba(99,102,241,.2); }
.bi-pdf-top { font-family: "Jakarta", "Inter", sans-serif; font-weight: 800; background: linear-gradient(100deg, #3B82F6, #6366F1 55%, #8B5CF6); }
@keyframes bi-line { 0%, 36% { background: #E5E7EB; box-shadow: none; } 39% { background: #6366F1; box-shadow: 0 0 8px rgba(99,102,241,.8); } 46%, 100% { background: #C7D2FE; box-shadow: none; } }
.bi-sparks i { background: #818CF8; box-shadow: 0 0 10px #6366F1; } .bi-sparks i:nth-child(3n) { background: #4ADE80; box-shadow: 0 0 10px #22C55E; }
.bi-brand { gap: 8px; bottom: 9%; }
.bi-mark { width: clamp(46px, 7vh, 64px); height: clamp(46px, 7vh, 64px); border-radius: 30%; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(145deg, #EFF6FF, #E0E7FF); box-shadow: 0 0 0 1px rgba(99,102,241,.2), 0 14px 26px -14px rgba(37,99,235,.7); }
.bi-mark img { height: 100%; width: 100%; object-fit: cover; filter: none; }
.bi-brand strong { font: 800 clamp(30px, 5.2vh, 46px)/1 "Jakarta", "Inter", sans-serif; letter-spacing: -.05em; color: #0B1320; background: none; -webkit-text-fill-color: #0B1320; }
.bi-brand strong span { background: linear-gradient(100deg, #3B82F6, #6366F1 55%, #8B5CF6); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.bi-brand small { font: 700 clamp(13px, 1.9vh, 16px)/1.2 "Jakarta", "Inter", sans-serif; color: #4F46E5; letter-spacing: 0; white-space: nowrap; }
.bi-brand em { font-style: normal; font-size: clamp(10px, 1.4vh, 12px); color: #64748B; }
.bi-progress { background: rgba(99,102,241,.1); height: 3px; }
.bi-progress i { background: linear-gradient(90deg, #3B82F6, #6366F1, #8B5CF6); box-shadow: 0 0 12px rgba(99,102,241,.6); }
.bi-skip { color: #334155; background: rgba(255,255,255,.75); border: 1px solid rgba(99,102,241,.2); box-shadow: 0 8px 18px -12px rgba(15,23,42,.35); }
.bi-skip:hover { background: #fff; color: #0B1320; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bi-stage { background: radial-gradient(70% 55% at 88% 6%, rgba(99,102,241,.45) 0, transparent 70%), radial-gradient(60% 50% at 6% 100%, rgba(14,165,233,.3) 0, transparent 70%), #0B1320; color: #F7F8FA; }
  :root:not([data-theme="light"]) .bi-brand strong { color: #F7F8FA; -webkit-text-fill-color: #F7F8FA; }
  :root:not([data-theme="light"]) .bi-brand em { color: #94A3B8; }
  :root:not([data-theme="light"]) .bi-brand small { color: #A5B4FC; }
  :root:not([data-theme="light"]) .bi-beam { mix-blend-mode: screen; }
  :root:not([data-theme="light"]) .bi-skip { color: rgba(247,248,250,.8); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
}
@media (prefers-reduced-motion: reduce) { .bi-blob { animation: none; } }