/* Bühne „fabrik“: V1-Animation (appfrags/fabrik.css), umgestellt auf V2 mit werkzeuge/v2-generator/buehnen-umstellen.mjs.
   Nicht von Hand ändern, sondern das Skript anpassen und neu laufen lassen. Farben und Rahmen: website.css (.v1-buehne). */
.ap-fabrik-stage{position: relative; width: 100%; height: 340px; overflow: hidden;display: flex; align-items: center; justify-content: center;perspective: 1100px; perspective-origin: 50% 40%; border-radius: var(--rad);}
.ap-fabrik-atmos{position: absolute; inset: 0; pointer-events: none;background:radial-gradient(62% 46% at 50% 36%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 72%),radial-gradient(40% 36% at 72% 70%, color-mix(in srgb, var(--accent2) 15%, transparent), transparent 72%);}
.ap-fabrik-atmos::after{content: ""; position: absolute; inset: -20%; opacity: .7;background: radial-gradient(38% 42% at 50% 46%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%);animation: ap-fabrik-drift 30s ease-in-out infinite;}
@keyframes ap-fabrik-drift{0%, 100% { transform: translate3d(-4%, 0, 0) scale(1); opacity: .55; }50%      { transform: translate3d(4%, -3%, 0) scale(1.08); opacity: .8; }}
.ap-fabrik-world{position: relative; transform-style: preserve-3d;}
.ap-fabrik-scene{position: relative; width: 460px; max-width: 88vw; height: 262px;transform-style: preserve-3d; transform: rotateX(9deg) rotateY(-11deg);animation: ap-fabrik-sway 39s var(--ease) infinite;}
@keyframes ap-fabrik-sway{0%, 100% { transform: rotateX(9deg) rotateY(-11deg); }50%      { transform: rotateX(6deg) rotateY(7deg); }}
.ap-fabrik-belt{position: absolute; left: 50%; top: 72%; width: 152%; height: 176px;transform: translate(-50%, -50%) rotateX(74deg); transform-style: preserve-3d;border-radius: 30px; overflow: hidden; border: 1px solid var(--glassbrd);background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 11%, transparent), transparent 44%),linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent2) 9%, transparent) 50%, transparent),var(--glass);box-shadow: 0 42px 70px -30px rgba(3, 7, 20, .6),inset 0 1px 0 var(--glasshi), inset 0 0 60px color-mix(in srgb, var(--accent) 9%, transparent);}
.ap-fabrik-tread{position: absolute; left: -20px; right: -20px; top: 0; bottom: 0;background: repeating-linear-gradient(90deg,color-mix(in srgb, var(--ink) 12%, transparent) 0 1.5px, transparent 1.5px 38px);-webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);animation: ap-fabrik-tread 3.9s linear infinite;}
@keyframes ap-fabrik-tread{to { transform: translateX(38px); }}
.ap-fabrik-flow{position: absolute; top: 0; bottom: 0; left: -46%; width: 46%;background: linear-gradient(90deg, transparent,color-mix(in srgb, var(--accent) 42%, transparent), transparent);filter: blur(5px); animation: ap-fabrik-flow 6.9s ease-in-out infinite;}
@keyframes ap-fabrik-flow{0% { transform: translateX(0); } 100% { transform: translateX(320%); }}
.ap-fabrik-pool{position: absolute; left: 50%; top: 66%; width: 214px; height: 66px;transform: translate(-50%, -50%) translateZ(1px) rotateX(74deg); border-radius: 50%;background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 38%, transparent), transparent 72%);filter: blur(4px); animation: ap-fabrik-pool 18s ease-in-out infinite;}
@keyframes ap-fabrik-pool{0%, 40%, 100% { opacity: .5; } 50% { opacity: 1; }}
.ap-fabrik-gshadow{position: absolute; left: 50%; top: 64%; border-radius: 50%; pointer-events: none;transform-origin: 50% 50%; opacity: 0; filter: blur(6px);background: radial-gradient(closest-side, rgba(3, 7, 20, .5), transparent 74%);}
.ap-fabrik-gshadow--site{width: 104px; height: 34px; animation: ap-fabrik-gshadow-site 18s cubic-bezier(.62, 0, .3, 1) infinite;}
.ap-fabrik-gshadow--widget{width: 112px; height: 36px; animation: ap-fabrik-gshadow-widget 18s cubic-bezier(.6, 0, .26, 1) infinite;}
@keyframes ap-fabrik-gshadow-site{0%   { opacity: .42; transform: translate(-50%, -50%) rotateX(74deg) translateX(-120px) scale(.9); }20%  { opacity: .5;  transform: translate(-50%, -50%) rotateX(74deg) translateX(0) scale(1); }38%  { opacity: .5;  transform: translate(-50%, -50%) rotateX(74deg) translateX(0) scale(1); }46%  { opacity: 0;   transform: translate(-50%, -50%) rotateX(74deg) translateX(0) scale(.5); }60%  { opacity: 0;   transform: translate(-50%, -50%) rotateX(74deg) translateX(-250px) scale(.9); }82%  { opacity: 0;   transform: translate(-50%, -50%) rotateX(74deg) translateX(-250px) scale(.9); }84%  { opacity: .4;  transform: translate(-50%, -50%) rotateX(74deg) translateX(-235px) scale(.88); }100% { opacity: .42; transform: translate(-50%, -50%) rotateX(74deg) translateX(-120px) scale(.9); }}
@keyframes ap-fabrik-gshadow-widget{0%, 46% { opacity: 0;   transform: translate(-50%, -50%) rotateX(74deg) translateX(0) scale(.4); }54%     { opacity: .5;  transform: translate(-50%, -50%) rotateX(74deg) translateX(8px) scale(1); }74%     { opacity: .44; transform: translate(-50%, -50%) rotateX(74deg) translateX(140px) scale(1); }84%     { opacity: 0;   transform: translate(-50%, -50%) rotateX(74deg) translateX(200px) scale(1); }100%    { opacity: 0;   transform: translate(-50%, -50%) rotateX(74deg) translateX(0) scale(.4); }}
.ap-fabrik-mote{position: absolute; border-radius: 4px; border: 1px solid var(--glassbrd);background: linear-gradient(150deg, var(--glasshi), transparent 60%), var(--glass);box-shadow: inset 0 1px 0 var(--glasshi); animation: ap-fabrik-mote 13.5s ease-in-out infinite;}
.ap-fabrik-mote--1{left: 12%;  top: 24%; width: 16px; height: 16px; --z: 76px; --r: 18deg;  transform: translateZ(76px) rotate(18deg);}
.ap-fabrik-mote--2{right: 14%; top: 20%; width: 22px; height: 22px; --z: 54px; --r: -12deg; transform: translateZ(54px) rotate(-12deg); animation-delay: -4.5s;}
.ap-fabrik-mote--3{left: 20%;  top: 70%; width: 11px; height: 11px; --z: 90px; --r: 30deg;  transform: translateZ(90px) rotate(30deg); animation-delay: -8.25s;}
.ap-fabrik-mote--4{right: 20%; top: 66%; width: 13px; height: 13px; --z: 30px; --r: -24deg; transform: translateZ(30px) rotate(-24deg); animation-delay: -2.25s;}
@keyframes ap-fabrik-mote{0%, 100% { transform: translateZ(var(--z)) translateY(0) rotate(var(--r)); opacity: .5; }50%      { transform: translateZ(var(--z)) translateY(-14px) rotate(calc(var(--r) + 8deg)); opacity: .85; }}
.ap-fabrik-gate{position: absolute; left: 50%; top: 42%; width: 156px; height: 150px;transform: translate(-50%, -50%) translateZ(40px); transform-style: preserve-3d;}
.ap-fabrik-gate-glass{position: absolute; left: 12px; right: 12px; top: 4px; bottom: 6px; border-radius: 14px;background: linear-gradient(160deg, color-mix(in srgb, var(--glasshi) 70%, transparent), transparent 46%), var(--glass);border: 1px solid var(--glassbrd);box-shadow: 0 26px 46px -20px rgba(3, 7, 20, .55), inset 0 1px 0 var(--glasshi),inset 0 0 30px color-mix(in srgb, var(--accent) 14%, transparent);}
.ap-fabrik-gate-sweep{position: absolute; left: 12px; right: 12px; top: 4px; bottom: 6px; border-radius: 14px; overflow: hidden;}
.ap-fabrik-gate-sweep::after{content: ""; position: absolute; top: -30%; left: -60%; width: 46%; height: 160%;background: linear-gradient(100deg, transparent, var(--glasshi), transparent);transform: rotate(16deg); animation: ap-fabrik-sweep 9.75s var(--ease) infinite;}
@keyframes ap-fabrik-sweep{0%, 62% { transform: translateX(0) rotate(16deg); } 100% { transform: translateX(560%) rotate(16deg); }}
.ap-fabrik-pillar{position: absolute; bottom: 4px; width: 14px; height: 128px; border-radius: 8px;background: linear-gradient(180deg, color-mix(in srgb, var(--glasshi) 60%, var(--glass)), var(--glass));border: 1px solid var(--glassbrd);box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent),0 0 18px color-mix(in srgb, var(--accent) 26%, transparent), 0 10px 20px -8px rgba(3, 7, 20, .5);}
.ap-fabrik-pillar--l{left: 0;}
.ap-fabrik-pillar--r{right: 0;box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent2) 34%, transparent),0 0 18px color-mix(in srgb, var(--accent2) 26%, transparent), 0 10px 20px -8px rgba(3, 7, 20, .5);}
.ap-fabrik-pillar::after{content: ""; position: absolute; inset: 0; border-radius: 8px; opacity: 0; pointer-events: none;animation: ap-fabrik-charge 18s ease-in-out infinite;}
.ap-fabrik-pillar--l::after{background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 36%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));box-shadow: 0 0 13px color-mix(in srgb, var(--accent) 72%, transparent),inset 0 0 8px color-mix(in srgb, var(--accent) 45%, transparent);}
.ap-fabrik-pillar--r::after{background: linear-gradient(180deg, color-mix(in srgb, var(--accent2) 36%, transparent), color-mix(in srgb, var(--accent2) 10%, transparent));box-shadow: 0 0 13px color-mix(in srgb, var(--accent2) 72%, transparent),inset 0 0 8px color-mix(in srgb, var(--accent2) 45%, transparent);}
@keyframes ap-fabrik-charge{0%, 30%, 66%, 100% { opacity: 0; }40% { opacity: .55; }50% { opacity: 1; }58% { opacity: .22; }}
.ap-fabrik-lintel{position: absolute; top: 0; left: 2px; right: 2px; height: 14px; border-radius: 8px;background: linear-gradient(180deg, color-mix(in srgb, var(--glasshi) 60%, var(--glass)), var(--glass));border: 1px solid var(--glassbrd); box-shadow: inset 0 1px 0 var(--glasshi), 0 6px 14px -6px rgba(3, 7, 20, .5);}
.ap-fabrik-lintel::after{content: ""; position: absolute; left: 14px; right: 14px; bottom: -3px; height: 2px; border-radius: 2px;background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent2) 70%, transparent);box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent);animation: ap-fabrik-lintel-glow 18s ease-in-out infinite;}
@keyframes ap-fabrik-lintel-glow{0%, 30%, 66%, 100% { opacity: .55; }46% { opacity: 1; }58% { opacity: .72; }}
.ap-fabrik-curtain{position: absolute; left: 18px; right: 18px; top: 14px; bottom: 10px; border-radius: 7px;background:repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 40%, transparent) 0 1px, transparent 1px 13px),linear-gradient(180deg, color-mix(in srgb, var(--accent2) 22%, transparent), transparent 60%);-webkit-mask: linear-gradient(180deg, #000, transparent 88%);mask: linear-gradient(180deg, #000, transparent 88%);opacity: .42; animation: ap-fabrik-curtain 18s ease-in-out infinite;}
@keyframes ap-fabrik-curtain{0%, 34%, 60%, 100% { opacity: .34; } 46% { opacity: .95; }}
.ap-fabrik-scan{position: absolute; left: 16px; right: 16px; top: 12px; height: 2px; border-radius: 2px;background: linear-gradient(90deg, transparent, var(--accent) 40%, var(--accent2) 60%, transparent);box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 70%, transparent);animation: ap-fabrik-scan 18s ease-in-out infinite;}
@keyframes ap-fabrik-scan{0%, 30% { transform: translateY(0);    opacity: .35; }38%     { transform: translateY(0);    opacity: .7; }50%     { transform: translateY(120px); opacity: 1; }56%     { transform: translateY(120px); opacity: 0; }70%     { transform: translateY(0);    opacity: 0; }100%    { transform: translateY(0);    opacity: .35; }}
.ap-fabrik-flash{position: absolute; left: 50%; top: 50%; width: 138px; height: 138px; border-radius: 50%;transform: translate(-50%, -50%) scale(.55); opacity: 0;background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent),color-mix(in srgb, var(--accent2) 24%, transparent) 46%, transparent 64%);animation: ap-fabrik-flash 18s ease-in-out infinite;}
@keyframes ap-fabrik-flash{0%, 42% { opacity: 0; transform: translate(-50%, -50%) scale(.55); }49%     { opacity: .9; transform: translate(-50%, -50%) scale(1.1); }58%     { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }100%    { opacity: 0; transform: translate(-50%, -50%) scale(.55); }}
.ap-fabrik-spark{position: absolute; top: 52%; width: 5px; height: 5px; border-radius: 50%;background: var(--accent2); box-shadow: 0 0 9px var(--accent2); opacity: 0;animation: ap-fabrik-spark 18s ease-out infinite;}
.ap-fabrik-spark--1{left: calc(50% - 24px);}
.ap-fabrik-spark--2{left: 50%; animation-delay: .18s;}
.ap-fabrik-spark--3{left: calc(50% + 24px); animation-delay: .09s;}
@keyframes ap-fabrik-spark{0%, 44% { opacity: 0; transform: translate(-50%, 10px) scale(.5); }50%     { opacity: 1; }64%     { opacity: 0; transform: translate(-50%, -48px) scale(.9); }100%    { opacity: 0; transform: translate(-50%, -48px) scale(.9); }}
.ap-fabrik-sheen{position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 2;}
.ap-fabrik-sheen::after{content: ""; position: absolute; top: -40%; left: -60%; width: 42%; height: 180%;background: linear-gradient(100deg, transparent, var(--glasshi), transparent);transform: rotate(16deg); animation: ap-fabrik-sweep 8.25s var(--ease) infinite;}
.ap-fabrik-site{position: absolute; left: 50%; top: 46%; width: 106px; padding-bottom: 11px;overflow: hidden; border-radius: 13px;background: linear-gradient(160deg, color-mix(in srgb, var(--glasshi) 55%, transparent), transparent 46%), var(--glass);border: 1px solid var(--glassbrd);box-shadow: 0 22px 38px -16px rgba(3, 7, 20, .5), inset 0 1px 0 var(--glasshi);transform-style: preserve-3d; opacity: 0;animation: ap-fabrik-site 18s cubic-bezier(.62, 0, .3, 1) infinite;}
.ap-fabrik-site-bar{display: flex; gap: 4px; padding: 7px 9px; border-bottom: 1px solid var(--glassbrd);}
.ap-fabrik-site-dot{width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 26%, transparent);}
.ap-fabrik-site-hero{height: 26px; margin: 9px 9px 0; border-radius: 7px;background: linear-gradient(120deg, color-mix(in srgb, var(--ink) 22%, transparent), color-mix(in srgb, var(--ink) 7%, transparent));}
.ap-fabrik-site-line{height: 6px; margin: 8px 9px 0; border-radius: 4px; background: color-mix(in srgb, var(--ink) 15%, transparent);}
.ap-fabrik-site-line--s{width: 56%;}
@keyframes ap-fabrik-site{0%   { opacity: 1; transform: translate(-50%, -50%) translate3d(-120px, 0, 18px) rotateY(12deg) scale(.95); }20%  { opacity: 1; transform: translate(-50%, -50%) translate3d(0, 0, 18px) rotateY(9deg) scale(1); }38%  { opacity: 1; transform: translate(-50%, -50%) translate3d(0, 0, 18px) rotateY(9deg) scale(1); }46%  { opacity: 0; transform: translate(-50%, -50%) translate3d(0, 0, 40px) rotateY(9deg) scale(.44); }60%  { opacity: 0; transform: translate(-50%, -50%) translate3d(-250px, 0, 18px) rotateY(13deg) scale(.9); }82%  { opacity: 0; transform: translate(-50%, -50%) translate3d(-250px, 0, 18px) rotateY(13deg) scale(.9); }84%  { opacity: 1; transform: translate(-50%, -50%) translate3d(-235px, 0, 18px) rotateY(13deg) scale(.92); }100% { opacity: 1; transform: translate(-50%, -50%) translate3d(-120px, 0, 18px) rotateY(12deg) scale(.95); }}
.ap-fabrik-widget{position: absolute; left: 50%; top: 43%; width: 120px; overflow: hidden; border-radius: 16px;background: linear-gradient(160deg, color-mix(in srgb, var(--glasshi) 55%, transparent), transparent 44%), var(--glass);border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--glassbrd));box-shadow: 0 26px 44px -18px rgba(3, 7, 20, .55), inset 0 1px 0 var(--glasshi),0 0 30px color-mix(in srgb, var(--accent) 30%, transparent);transform-style: preserve-3d; opacity: 0;animation: ap-fabrik-widget 18s cubic-bezier(.6, 0, .26, 1) infinite;}
.ap-fabrik-widget-head{display: flex; align-items: center; gap: 7px; padding: 9px 11px;background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent2) 55%, var(--accent)));box-shadow: inset 0 1px 0 color-mix(in srgb,#fff 24%, transparent);}
.ap-fabrik-widget-avatar{width: 18px; height: 18px; flex: none; border-radius: 50%;display: flex; align-items: center; justify-content: center;background: color-mix(in srgb,#fff 52.8%, var(--accent)); box-shadow: inset 0 1px 0 #fff;}
.ap-fabrik-check{width: 8px; height: 5px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);transform: rotate(-45deg) translate(0, -1px); border-radius: 1px;}
.ap-fabrik-widget-title{height: 7px; width: 54px; border-radius: 4px; background: color-mix(in srgb,#fff 49.2%, transparent);}
.ap-fabrik-widget-body{display: flex; flex-direction: column; gap: 7px; padding: 11px 11px 5px;}
.ap-fabrik-msg{height: 8px; border-radius: 5px;}
.ap-fabrik-msg--in{width: 74%; align-self: flex-start; background: color-mix(in srgb, var(--ink) 15%, transparent);}
.ap-fabrik-msg--out{width: 58%; align-self: flex-end;background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent2) 50%, var(--accent)));}
.ap-fabrik-msg--s{width: 44%;}
.ap-fabrik-widget-dots{display: flex; gap: 4px; padding: 0 12px 11px;}
.ap-fabrik-widget-dots span{width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 60%, transparent);animation: ap-fabrik-dot 2.1s ease-in-out infinite;}
.ap-fabrik-widget-dots span:nth-child(2){animation-delay: .27s;}
.ap-fabrik-widget-dots span:nth-child(3){animation-delay: .54s;}
@keyframes ap-fabrik-dot{0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); }}
@keyframes ap-fabrik-widget{0%, 46% { opacity: 0; transform: translate(-50%, -50%) translate3d(0, 0, 52px) rotateY(-13deg) scale(.32); }54%     { opacity: 1; transform: translate(-50%, -50%) translate3d(8px, 0, 52px) rotateY(-13deg) scale(1); }74%     { opacity: 1; transform: translate(-50%, -50%) translate3d(140px, 0, 52px) rotateY(-13deg) scale(1); }84%     { opacity: 0; transform: translate(-50%, -50%) translate3d(200px, 0, 52px) rotateY(-13deg) scale(1); }100%    { opacity: 0; transform: translate(-50%, -50%) translate3d(0, 0, 52px) rotateY(-13deg) scale(.32); }}
.v1-buehne .ap-fabrik-belt{box-shadow: 0 46px 78px -28px rgba(0, 0, 0, .7), inset 0 1px 0 var(--glasshi), inset 0 0 66px color-mix(in srgb, var(--accent) 14%, transparent);}
.v1-buehne .ap-fabrik-curtain{filter: saturate(1.2) brightness(1.15);}
.v1-buehne .ap-fabrik-widget{box-shadow: 0 30px 52px -18px rgba(0, 0, 0, .72), inset 0 1px 0 var(--glasshi), 0 0 40px color-mix(in srgb, var(--accent) 46%, transparent);}
.v1-buehne .ap-fabrik-atmos::after{opacity: .9;}
@media (max-width: 600px){.ap-fabrik-world{transform: scale(.68);}}
@media (prefers-reduced-motion: reduce){.ap-fabrik-atmos::after,.ap-fabrik-scene,.ap-fabrik-tread,.ap-fabrik-flow,.ap-fabrik-pool,.ap-fabrik-mote,.ap-fabrik-gate-sweep::after,.ap-fabrik-sheen::after,.ap-fabrik-curtain,.ap-fabrik-scan,.ap-fabrik-flash,.ap-fabrik-spark,.ap-fabrik-site,.ap-fabrik-widget,.ap-fabrik-widget-dots span,.ap-fabrik-gshadow--site,.ap-fabrik-gshadow--widget,.ap-fabrik-pillar::after,.ap-fabrik-lintel::after{animation: none !important;}
.ap-fabrik-scene{transform: rotateX(8deg) rotateY(-8deg);}
.ap-fabrik-pillar::after{opacity: .4;}
.ap-fabrik-scan{transform: translateY(58px); opacity: 1;}
.ap-fabrik-curtain{opacity: .62;}
.ap-fabrik-flash{opacity: .34; transform: translate(-50%, -50%) scale(1);}
.ap-fabrik-spark{opacity: 0;}
.ap-fabrik-lintel::after{opacity: .8;}
.ap-fabrik-site{opacity: 1; transform: translate(-50%, -50%) translate3d(-150px, 0, 18px) rotateY(11deg) scale(1);}
.ap-fabrik-widget{opacity: 1; transform: translate(-50%, -50%) translate3d(148px, 0, 52px) rotateY(-13deg) scale(1);}
.ap-fabrik-gshadow--site{opacity: .4; transform: translate(-50%, -50%) rotateX(74deg) translateX(-150px) scale(1);}
.ap-fabrik-gshadow--widget{opacity: .4; transform: translate(-50%, -50%) rotateX(74deg) translateX(148px) scale(1);}}