{"version":3,"file":"VideoLightbox.CSpZP_CP.mjs","names":["useState","useRef","useMemo","useCallback"],"sources":["https:/framerusercontent.com/modules/RHToE2hsINI5uEDhzWNL/bx2VVgxkoG8zJG9M0due/VideoLightbox.js"],"sourcesContent":["// Video-Panel für die Case Study: Poster-Hintergrund mit Verlaufs-Tint,\n// Label + Titel + \"Video ansehen\"-Button. Klick öffnet ein einfaches\n// Vollbild-Overlay mit dem Video. Das Overlay wird per Portal direkt in\n// document.body gerendert, damit es NICHT von Framers Transform-Containern\n// eingeklemmt wird (sonst erscheint das \"fixed\"-Overlay nur innerhalb der Karte).\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{startTransition,useCallback,useEffect,useMemo,useRef,useState}from\"react\";import{createPortal}from\"react-dom\";import{addPropertyControls,ControlType}from\"framer\";function parseYouTubeId(url){if(!url)return\"\";const patterns=[/youtu\\.be\\/([\\w-]{11})/,/[?&]v=([\\w-]{11})/,/youtube\\.com\\/embed\\/([\\w-]{11})/,/youtube\\.com\\/shorts\\/([\\w-]{11})/];for(const p of patterns){const m=url.match(p);if(m)return m[1];}return/^[\\w-]{11}$/.test(url)?url:\"\";}/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function VideoLightbox(props){const{youTubeURL,poster,bildausschnitt,label=\"Video\",titel,button,minimal=false,videoUrl,posterPosition,title,buttonText}=props;const resolvedVideoUrl=youTubeURL??videoUrl??\"https://youtu.be/SWddVsAyH3M\";const resolvedPosterPosition=bildausschnitt??posterPosition??\"center 30%\";const resolvedTitle=titel??title??\"Wie Phoenix Mecano KI vom Experiment in den Arbeitsalltag bringt\";const resolvedButton=button??buttonText??\"Video ansehen\";const isMinimal=minimal||!label&&!resolvedTitle;const[open,setOpen]=useState(false);const closeRef=useRef(null);const videoId=useMemo(()=>parseYouTubeId(resolvedVideoUrl),[resolvedVideoUrl]);const posterSrc=useMemo(()=>(typeof poster===\"string\"?poster:poster?.src)||(videoId?`https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg`:\"\"),[poster,videoId]);const openModal=useCallback(()=>{startTransition(()=>setOpen(true));},[]);const closeModal=useCallback(()=>{startTransition(()=>setOpen(false));},[]);// Body-Scroll sperren + ESC schließt + Fokus auf Close\nuseEffect(()=>{if(!open)return;const prev=document.body.style.overflow;document.body.style.overflow=\"hidden\";const onKey=e=>{if(e.key===\"Escape\"){startTransition(()=>setOpen(false));}};document.addEventListener(\"keydown\",onKey);const t=setTimeout(()=>closeRef.current?.focus(),50);return()=>{document.body.style.overflow=prev;document.removeEventListener(\"keydown\",onKey);clearTimeout(t);};},[open]);return /*#__PURE__*/_jsxs(\"div\",{className:\"vlb\",style:{position:\"relative\",width:\"100%\",height:\"100%\",overflow:\"hidden\",fontFamily:\"'Inter', system-ui, -apple-system, sans-serif\"},children:[/*#__PURE__*/_jsx(\"style\",{children:`\n                .vlb * { box-sizing: border-box; }\n                .vlb-poster {\n                    position: absolute; inset: 0; background-size: cover; background-position: center;\n                    background-color: #0C1C3A;\n                }\n                .vlb-tint {\n                    position: absolute; inset: 0;\n                    background: linear-gradient(90deg, rgba(5,18,45,0.90) 0%, rgba(5,18,45,0.66) 46%, rgba(5,18,45,0.28) 100%);\n                }\n                .vlb-content {\n                    position: relative; z-index: 2; height: 100%;\n                    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 50px;\n                    padding: 56px;\n                }\n                .vlb-label { font-size: 28px; font-weight: 500; color: rgba(255,255,255,0.72); margin: 0; line-height: 1; }\n                .vlb-title { font-family: 'Satoshi', 'Inter', system-ui, sans-serif; font-size: 34px; font-weight: 700; color: #fff; margin: 0; line-height: 1.18; max-width: 15ch; }\n                .vlb-play {\n                    margin-top: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px;\n                    padding: 14px 24px; border-radius: 10px; border: none; cursor: pointer;\n                    background: rgba(255,255,255,0.18); color: #fff; font-size: 16px; font-weight: 400;\n                    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);\n                    transition: background .18s, transform .12s; font-family: inherit;\n                }\n                .vlb-play:hover { background: rgba(255,255,255,0.28); }\n                .vlb-play:active { transform: translateY(1px); }\n                .vlb-play-ic { display: flex; align-items: center; flex-shrink: 0; }\n\n                /* Minimal-Modus: ohne Label/Titel nur ein zentrierter runder Play-Button */\n                .vlb-content.vlb-min { align-items: center; justify-content: center; padding: 0; gap: 0; }\n                .vlb-play-circle {\n                    width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer; padding: 0;\n                    background: rgba(255,255,255,0.96); display: flex; align-items: center; justify-content: center;\n                    box-shadow: 0 10px 30px rgba(5,18,45,0.35); transition: transform .15s;\n                }\n                .vlb-play-circle:hover { transform: scale(1.07); }\n                .vlb-play-circle:active { transform: scale(1); }\n\n                .vlb-modal {\n                    position: fixed; inset: 0; z-index: 2147483000;\n                    display: flex; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 56px);\n                    background: rgba(6, 12, 28, 0.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);\n                    animation: vlb-fade .18s ease;\n                }\n                @keyframes vlb-fade { from { opacity: 0 } to { opacity: 1 } }\n                .vlb-stage { position: relative; width: 100%; max-width: 1200px; }\n                .vlb-frame {\n                    position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;\n                    background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.5);\n                }\n                .vlb-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }\n                .vlb-close {\n                    position: absolute; top: -52px; right: 0; width: 44px; height: 44px; border-radius: 50%;\n                    border: none; cursor: pointer; background: rgba(255,255,255,0.14); color: #fff;\n                    display: flex; align-items: center; justify-content: center; transition: background .15s; font-family: inherit;\n                }\n                .vlb-close:hover { background: rgba(255,255,255,0.26); }\n                /* Tablet: Panel ist nur ~300px hoch -> kompakter, Tint von oben nach unten */\n                @media (max-width: 810px) {\n                    .vlb-content {\n                        padding: 24px 24px 26px;\n                        gap: 10px;\n                        justify-content: flex-end;\n                        align-items: flex-start;\n                        max-width: min(100%, 430px);\n                    }\n                    .vlb-label { font-size: 17px; }\n                    .vlb-title {\n                        font-size: 23px; max-width: 24ch;\n                        display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;\n                    }\n                    .vlb-play { margin-top: 2px; padding: 12px 20px; font-size: 15px; }\n                    .vlb-tint {\n                        background:\n                            radial-gradient(120% 100% at 10% 100%, rgba(5,18,45,0.95) 0%, rgba(5,18,45,0.72) 45%, rgba(5,18,45,0.18) 100%),\n                            linear-gradient(180deg, rgba(5,18,45,0.16) 0%, rgba(5,18,45,0.80) 100%);\n                    }\n                }\n                /* Phone: Panel ist nur ~230px hoch */\n                @media (max-width: 480px) {\n                    .vlb-content { padding: 18px; gap: 8px; max-width: min(100%, 330px); }\n                    .vlb-label { font-size: 14px; }\n                    .vlb-title {\n                        font-size: 18px; max-width: 24ch;\n                        -webkit-line-clamp: 2;\n                    }\n                    .vlb-play { padding: 11px 18px; font-size: 14px; margin-top: 0; }\n                }\n                @media (max-width: 700px) {\n                    .vlb-close { top: auto; bottom: -52px; right: 50%; transform: translateX(50%); }\n                }\n                @media (prefers-reduced-motion: reduce) { .vlb-modal { animation: none } }\n            `}),/*#__PURE__*/_jsx(\"div\",{className:\"vlb-poster\",style:{backgroundImage:posterSrc?`url(\"${posterSrc}\")`:undefined,backgroundPosition:resolvedPosterPosition||\"center 30%\"}}),/*#__PURE__*/_jsx(\"div\",{className:\"vlb-tint\",style:isMinimal?{background:\"rgba(5,18,45,0.22)\"}:undefined}),/*#__PURE__*/_jsxs(\"div\",{className:`vlb-content${isMinimal?\" vlb-min\":\"\"}`,children:[!isMinimal&&label?/*#__PURE__*/_jsx(\"p\",{className:\"vlb-label\",children:label}):null,!isMinimal&&resolvedTitle?/*#__PURE__*/_jsx(\"h3\",{className:\"vlb-title\",children:resolvedTitle}):null,isMinimal?/*#__PURE__*/_jsx(\"button\",{type:\"button\",className:\"vlb-play-circle\",onClick:openModal,\"aria-haspopup\":\"dialog\",\"aria-label\":resolvedButton||\"Video ansehen\",children:/*#__PURE__*/_jsx(\"svg\",{width:\"17\",height:\"18\",viewBox:\"0 0 11 12\",fill:\"#0A1628\",style:{marginLeft:3},\"aria-hidden\":\"true\",children:/*#__PURE__*/_jsx(\"path\",{d:\"M0 0.8c0-.6.7-1 1.2-.66l8.4 5.2c.5.3.5 1.02 0 1.32l-8.4 5.2C.7 12.2 0 11.8 0 11.2V0.8z\"})})}):/*#__PURE__*/_jsxs(\"button\",{type:\"button\",className:\"vlb-play\",onClick:openModal,\"aria-haspopup\":\"dialog\",children:[/*#__PURE__*/_jsx(\"span\",{className:\"vlb-play-ic\",\"aria-hidden\":\"true\",children:/*#__PURE__*/_jsx(\"svg\",{width:\"12\",height:\"13\",viewBox:\"0 0 11 12\",fill:\"#fff\",children:/*#__PURE__*/_jsx(\"path\",{d:\"M0 0.8c0-.6.7-1 1.2-.66l8.4 5.2c.5.3.5 1.02 0 1.32l-8.4 5.2C.7 12.2 0 11.8 0 11.2V0.8z\"})})}),resolvedButton]})]}),open&&typeof document!==\"undefined\"&&/*#__PURE__*/createPortal(/*#__PURE__*/_jsx(\"div\",{className:\"vlb-modal\",role:\"dialog\",\"aria-modal\":\"true\",\"aria-label\":resolvedTitle||\"Video\",onClick:e=>{if(e.target===e.currentTarget)closeModal();},children:/*#__PURE__*/_jsxs(\"div\",{className:\"vlb-stage\",onClick:e=>{if(e.target===e.currentTarget)closeModal();},children:[/*#__PURE__*/_jsx(\"button\",{ref:closeRef,type:\"button\",className:\"vlb-close\",onClick:closeModal,\"aria-label\":\"Video schlie\\xdfen\",children:/*#__PURE__*/_jsxs(\"svg\",{width:\"20\",height:\"20\",viewBox:\"0 0 24 24\",fill:\"none\",stroke:\"currentColor\",strokeWidth:\"2.4\",strokeLinecap:\"round\",children:[/*#__PURE__*/_jsx(\"line\",{x1:\"6\",y1:\"6\",x2:\"18\",y2:\"18\"}),/*#__PURE__*/_jsx(\"line\",{x1:\"18\",y1:\"6\",x2:\"6\",y2:\"18\"})]})}),/*#__PURE__*/_jsx(\"div\",{className:\"vlb-frame\",children:videoId?/*#__PURE__*/_jsx(\"iframe\",{src:`https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1&rel=0&modestbranding=1&playsinline=1`,title:resolvedTitle||\"Video\",allow:\"accelerated-motion; autoplay; encrypted-media; picture-in-picture; fullscreen\",allowFullScreen:true}):null})]})}),document.body)]});}addPropertyControls(VideoLightbox,{youTubeURL:{type:ControlType.String,title:\"YouTube-URL\",defaultValue:\"https://youtu.be/SWddVsAyH3M\"},poster:{type:ControlType.ResponsiveImage,title:\"Poster\",description:\"Optional. Ohne Angabe wird das YouTube-Cover genutzt.\"},bildausschnitt:{type:ControlType.String,title:\"Bildausschnitt\",defaultValue:\"center 30%\",description:'CSS background-position, z. B. \"center 30%\".'},label:{type:ControlType.String,title:\"Label\",defaultValue:\"Video\"},titel:{type:ControlType.String,title:\"Titel\",defaultValue:\"Wie Phoenix Mecano KI vom Experiment in den Arbeitsalltag bringt\",displayTextArea:true},button:{type:ControlType.String,title:\"Button\",defaultValue:\"Video ansehen\"},minimal:{type:ControlType.Boolean,title:\"Minimal\",defaultValue:false,enabledTitle:\"An\",disabledTitle:\"Aus\",description:\"Nur zentrierter Play-Button, ohne Label und Titel.\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"VideoLightbox\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./VideoLightbox.map"],"mappings":"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"}