/* ========================================
   DATECK POPUP PRO - PREMIUM FINAL
======================================== */

/* ----------------------------------------
   OVERLAY
---------------------------------------- */
#dateck-popup-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.55);
display:none;
opacity:0;

justify-content:center;
align-items:center;
padding:16px;
box-sizing:border-box;
z-index:9999;
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
}

#dateck-popup-overlay.active{
display:flex;
}

#dateck-popup-overlay.dateck-visible{
opacity:1;
}


#dateck-popup-overlay.dateck-popup-position-center{justify-content:center;align-items:center;}
#dateck-popup-overlay.dateck-popup-position-top-center{justify-content:center;align-items:flex-start;}
#dateck-popup-overlay.dateck-popup-position-bottom-center{justify-content:center;align-items:flex-end;}
#dateck-popup-overlay.dateck-popup-position-top-left{justify-content:flex-start;align-items:flex-start;}
#dateck-popup-overlay.dateck-popup-position-top-right{justify-content:flex-end;align-items:flex-start;}
#dateck-popup-overlay.dateck-popup-position-bottom-left{justify-content:flex-start;align-items:flex-end;}
#dateck-popup-overlay.dateck-popup-position-bottom-right{justify-content:flex-end;align-items:flex-end;}
#dateck-popup-overlay.dateck-overlay-fullscreen{padding:0;justify-content:stretch;align-items:stretch;}

/* ----------------------------------------
   POPUP BOX
---------------------------------------- */
#dateck-popup-box{
padding:32px;
border-radius:26px;
box-shadow:0 40px 100px rgba(0,0,0,0.35);
transition:opacity var(--dateck-anim-duration, .35s) cubic-bezier(.4,0,.2,1),transform var(--dateck-anim-duration, .35s) cubic-bezier(.4,0,.2,1);
max-width:min(92vw, 920px);
max-height:min(90vh, calc(100vh - 32px));
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
position:relative;
display:flex;
flex-direction:column;
gap:18px;
box-sizing:border-box;
overflow:hidden;
}

#dateck-popup-box.dateck-size-large{
width:min(92vw, 960px) !important;
height:min(82vh, 720px) !important;
}

#dateck-popup-box.dateck-size-fullscreen{
width:100vw !important;
height:100vh !important;
max-width:none !important;
max-height:none !important;
border-radius:0;
margin:0;
padding:0;
}

.dateck-popup-body{
flex:1 1 auto;
min-height:0;
overflow-y:auto;
padding-right:6px;
}

#dateck-popup-box.dateck-size-fullscreen .dateck-popup-body{
width:100%;
max-width:1040px;
margin:0 auto;
padding:40px 24px 20px;
box-sizing:border-box;
}

.dateck-popup-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:auto;
padding-top:6px;
}

#dateck-popup-box.dateck-size-fullscreen .dateck-popup-actions{
width:100%;
max-width:1040px;
margin:0 auto;
padding:8px 24px 28px;
box-sizing:border-box;
}

#dateck-popup-box.dateck-align-center .dateck-popup-actions{justify-content:center;}
#dateck-popup-box.dateck-align-right .dateck-popup-actions{justify-content:flex-end;}

.dateck-popup-actions a{
text-decoration:none;
}

/* ----------------------------------------
   GLASS PRESET
---------------------------------------- */
.glass{
backdrop-filter:blur(18px);
background-color:rgba(255,255,255,0.2)!important;
border:1px solid rgba(255,255,255,0.3);
}

/* ----------------------------------------
   TYPOGRAPHY
---------------------------------------- */
#dateck-popup-box h2{
font-size:26px;
margin-bottom:18px;
font-weight:700;
line-height:1.35;
}

#dateck-popup-box p{
font-size:16px;
line-height:1.65;
margin:0 0 16px;
opacity:0.9;
}

#dateck-popup-box .dateck-popup-text > :first-child{margin-top:0;}
#dateck-popup-box .dateck-popup-text > :last-child{margin-bottom:0;}
#dateck-popup-box .dateck-popup-text iframe,
#dateck-popup-box .dateck-popup-text .wp-block-embed,
#dateck-popup-box .dateck-popup-text .wpforms-container{max-width:100%;}

#dateck-popup-box img{
border-radius:inherit;
margin-bottom:20px;
max-height:min(34vh, 320px);
object-fit:contain;
}

#dateck-popup-box.dateck-size-fullscreen img{
max-height:min(42vh, 460px);
}

#dateck-popup-box.dateck-align-left{text-align:left;}
#dateck-popup-box.dateck-align-center{text-align:center;}
#dateck-popup-box.dateck-align-right{text-align:right;}
#dateck-popup-box.dateck-align-left .dateck-popup-image{display:block;margin:0 0 20px 0;}
#dateck-popup-box.dateck-align-center .dateck-popup-image{display:block;margin:0 auto 20px;}
#dateck-popup-box.dateck-align-right .dateck-popup-image{display:block;margin:0 0 20px auto;}
#dateck-popup-box.dateck-align-center .dateck-popup-text ul,
#dateck-popup-box.dateck-align-center .dateck-popup-text ol,
#dateck-popup-box.dateck-align-right .dateck-popup-text ul,
#dateck-popup-box.dateck-align-right .dateck-popup-text ol{display:inline-block;text-align:left;}

/* ----------------------------------------
   ELEMENT ANIMATIONS
---------------------------------------- */
.dateck-popup-anim-item{
transition:opacity var(--dateck-content-anim-duration, .7s) cubic-bezier(.2,.75,.25,1),transform var(--dateck-content-anim-duration, .7s) cubic-bezier(.2,.75,.25,1);
will-change:opacity,transform;
backface-visibility:hidden;
transform-style:preserve-3d;
}
.dateck-anim-left{opacity:0;transform:translateX(calc(var(--dateck-content-distance, 80px) * -1));}
.dateck-anim-right{opacity:0;transform:translateX(var(--dateck-content-distance, 80px));}
.dateck-anim-up{opacity:0;transform:translateY(calc(var(--dateck-content-distance, 80px) * -1));}
.dateck-anim-down{opacity:0;transform:translateY(var(--dateck-content-distance, 80px));}
.dateck-anim-none{opacity:1;transform:none;}
#dateck-popup-overlay.dateck-content-visible .dateck-popup-anim-item{
opacity:1;
transform:none;
}

/* Fallback für Premium Popup-Animationen */
#dateck-popup-overlay.dateck-visible #dateck-popup-box.anim-pop .dateck-popup-anim-item,
#dateck-popup-overlay.dateck-visible #dateck-popup-box.anim-drop .dateck-popup-anim-item,
#dateck-popup-overlay.dateck-visible #dateck-popup-box.anim-swing .dateck-popup-anim-item,
#dateck-popup-overlay.dateck-visible #dateck-popup-box.anim-cinematic .dateck-popup-anim-item,
#dateck-popup-overlay.dateck-visible #dateck-popup-box.anim-elastic .dateck-popup-anim-item,
#dateck-popup-overlay.dateck-visible #dateck-popup-box.anim-door .dateck-popup-anim-item{
opacity:1;
transform:none;
}

/* ----------------------------------------
   PREMIUM BUTTONS
---------------------------------------- */
.dateck-btn,
.dateck-cta{
    padding:12px 22px;
    border-radius:16px;
    font-size:14px;
    font-weight:600;
    border:none;
    flex:0 0 auto;
    cursor:pointer;
    transition:all .25s ease;
    letter-spacing:.3px;
}

.dateck-btn{
    background:#f1f1f4;
    color:#111;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,0.08);
}

.dateck-btn:hover{
    background:#e6e6eb;
    transform:translateY(-2px);
}

.dateck-cta{
    padding:14px 26px;
    font-size:15px;
    background:linear-gradient(135deg,#0071e3,#0057b8);
    color:#fff;
    box-shadow:0 12px 35px rgba(0,113,227,0.35);
}

.dateck-cta:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 45px rgba(0,113,227,0.45);
}

.dateck-btn:active,
.dateck-cta:active{
    transform:translateY(0);
}

/* ----------------------------------------
   CLOSE ICON
---------------------------------------- */
.dateck-x{
position:absolute;
top:20px;
right:25px;
font-size:22px;
cursor:pointer;
opacity:0.6;
transition:all .2s ease;
z-index:2;
}

.dateck-x:hover{
opacity:1;
transform:scale(1.1);
}

/* ----------------------------------------
   ANIMATIONS
---------------------------------------- */
#dateck-popup-box.anim-fade,
.preview-box.anim-fade,
.dateck-runtime-box.anim-fade{opacity:0;transform:translateY(0) scale(1);}

#dateck-popup-box.anim-slide,
.preview-box.anim-slide,
.dateck-runtime-box.anim-slide{opacity:0;transform:translateY(-40px) scale(1);}

#dateck-popup-box.anim-zoom,
.preview-box.anim-zoom,
.dateck-runtime-box.anim-zoom{opacity:0;transform:scale(0.82);}

#dateck-popup-box.anim-bounce,
.preview-box.anim-bounce,
.dateck-runtime-box.anim-bounce{opacity:0;transform:translateY(-28px) scale(0.92);}

#dateck-popup-box.anim-rotate,
.preview-box.anim-rotate,
.dateck-runtime-box.anim-rotate{opacity:0;transform:perspective(1000px) rotateX(-14deg) scale(0.94);transform-origin:center top;}

#dateck-popup-box.anim-swing,
.preview-box.anim-swing,
.dateck-runtime-box.anim-swing{opacity:0;transform:rotate(-10deg) translateY(-12px);transform-origin:center top;}

#dateck-popup-box.anim-flip,
.preview-box.anim-flip,
.dateck-runtime-box.anim-flip{opacity:0;transform:perspective(1200px) rotateY(-70deg) scale(0.96);transform-origin:center center;}

#dateck-popup-overlay.dateck-visible #dateck-popup-box.anim-fade,
#dateck-popup-overlay.dateck-visible #dateck-popup-box.anim-slide,
#dateck-popup-overlay.dateck-visible #dateck-popup-box.anim-zoom,
#dateck-popup-overlay.dateck-visible #dateck-popup-box.anim-rotate,
#dateck-popup-overlay.dateck-visible #dateck-popup-box.anim-swing,
#dateck-popup-overlay.dateck-visible #dateck-popup-box.anim-flip{
opacity:1;
transform:translateY(0) scale(1) rotateX(0deg) rotateY(0deg) rotate(0deg);
}

.preview-box.is-animated.anim-fade,
.preview-box.is-animated.anim-slide,
.preview-box.is-animated.anim-zoom,
.preview-box.is-animated.anim-rotate,
.preview-box.is-animated.anim-swing,
.preview-box.is-animated.anim-flip,
.dateck-runtime-box.is-animated.anim-fade,
.dateck-runtime-box.is-animated.anim-slide,
.dateck-runtime-box.is-animated.anim-zoom,
.dateck-runtime-box.is-animated.anim-rotate,
.dateck-runtime-box.is-animated.anim-swing,
.dateck-runtime-box.is-animated.anim-flip{
opacity:1;
transform:translateY(0) scale(1) rotateX(0deg) rotateY(0deg) rotate(0deg);
}

#dateck-popup-overlay.dateck-visible #dateck-popup-box.anim-bounce{
opacity:1;
animation:dateckPopupBounce var(--dateck-anim-duration, 450ms) cubic-bezier(.22,.9,.3,1.25) forwards;
}
.preview-box.is-animated.anim-bounce,
.dateck-runtime-box.is-animated.anim-bounce{
opacity:1;
animation:dateckPopupBounce var(--dateck-preview-anim, 700ms) cubic-bezier(.22,.9,.3,1.25) forwards;
}

@keyframes dateckPopupBounce{
0%{opacity:0;transform:translateY(-28px) scale(.92);}
65%{opacity:1;transform:translateY(8px) scale(1.02);}
100%{opacity:1;transform:translateY(0) scale(1);}
}

/* ========================================
   MOBILE OPTIMIERUNG
======================================== */
@media (max-width: 1024px){

    #dateck-popup-box{
        width:min(92vw, 680px) !important;
        height:auto !important;
    }

    #dateck-popup-box.dateck-size-large{
        width:min(94vw, 900px) !important;
        height:min(90vh, calc(100vh - 24px)) !important;
    }

    #dateck-popup-box.dateck-size-fullscreen{
        width:100vw !important;
        height:100vh !important;
    }

    #dateck-popup-box img{
        max-height:min(28vh, 240px);
    }
}

@media (max-width: 768px){

    #dateck-popup-box{
        width:90% !important;
        height:auto !important;
        max-height:88vh;
        padding:24px;
        border-radius:20px;
    }

    #dateck-popup-box.dateck-size-fullscreen{
        width:100vw !important;
        height:100vh !important;
        max-height:none;
        padding:0;
        border-radius:0;
    }

    #dateck-popup-box.dateck-size-fullscreen .dateck-popup-body{padding:28px 18px 16px;}
    #dateck-popup-box.dateck-size-fullscreen .dateck-popup-actions{padding:8px 18px 18px;}

    #dateck-popup-box.dateck-size-large{
        width:94vw !important;
        height:90vh !important;
        max-height:90vh;
        padding:22px;
        border-radius:18px;
    }

    #dateck-popup-box h2{
        font-size:20px;
    }

    #dateck-popup-box p{
        font-size:14px;
        margin-bottom:18px;
    }

    #dateck-popup-box img{
        max-height:160px;
        object-fit:contain;
        margin-bottom:15px;
    }

    .dateck-popup-actions{
        flex-direction:column;
    }

    .dateck-btn,
    .dateck-cta,
    .dateck-popup-actions a{
        display:block;
        width:100%;
        text-align:center;
    }

    .dateck-popup-actions a .dateck-cta{
        width:100%;
    }
}


/* PERFORMANCE IMPROVEMENTS */
.dateck-popup,
.dateck-popup * {
  will-change: transform, opacity;
}

.dateck-popup {
  transform: translateZ(0);
}

/* Image stability */
.dateck-popup img {
  display:block;
  width:100%;
  height:auto;
}

/* prevent layout jump */
.dateck-popup-content {
  min-height: 100px;
}


/* CLEAN PERFORMANCE PASS */
#dateck-popup-overlay{
transition:opacity 180ms ease;
contain:layout style paint;
}

#dateck-popup-box{
contain:layout paint;
backface-visibility:hidden;
transform:translateZ(0);
}

#dateck-popup-box img{
display:block;
width:auto;
max-width:100%;
height:auto;
backface-visibility:hidden;
transform:translateZ(0);
}

.dateck-popup-body{
-webkit-overflow-scrolling:touch;
}

.glass{
/* keep blur on overlay; popup glass remains visual only */
will-change:auto;
}

@media (prefers-reduced-motion: reduce){
#dateck-popup-overlay,
#dateck-popup-box,
.dateck-popup-anim-item{
transition:none !important;
animation:none !important;
}
}


/* ----------------------------------------
   PERFORMANCE MODE
---------------------------------------- */
#dateck-popup-overlay.dateck-performance-mode{
background:rgba(0,0,0,0.68);
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}

#dateck-popup-overlay.dateck-performance-mode #dateck-popup-box{
box-shadow:0 18px 40px rgba(0,0,0,0.22);
}

#dateck-popup-overlay.dateck-performance-mode #dateck-popup-box.glass{
background-color:rgba(255,255,255,0.94) !important;
border:1px solid rgba(255,255,255,0.72);
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}

#dateck-popup-overlay.dateck-performance-mode .dateck-popup-anim-item{
transition:none !important;
transition-delay:0ms !important;
transform:none !important;
opacity:1 !important;
}

#dateck-popup-overlay.dateck-performance-mode .dateck-btn,
#dateck-popup-overlay.dateck-performance-mode .dateck-cta{
transition:background-color .2s ease, color .2s ease, box-shadow .2s ease !important;
}

.dateck-performance-toggle{
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;
}

.dateck-performance-toggle em{
opacity:.72;
font-style:normal;
}

.preview-box.dateck-performance-mode{
box-shadow:0 16px 36px rgba(15,23,42,.16);
}

.preview-box.dateck-performance-mode.glass{
background-color:rgba(255,255,255,0.94) !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}

.dateck-preview-runtime.dateck-performance-mode{
--dateck-runtime-blur:0px !important;
}


/* background image + overlay */
#dateck-popup-box{position:relative;overflow:hidden;background-size:cover;background-position:center;}
.dateck-popup-bg-layer{position:absolute;inset:0;background:rgba(0,0,0,var(--dateck-bg-overlay,0));pointer-events:none;z-index:1}
#dateck-popup-box > .dateck-x,
#dateck-popup-box > .dateck-popup-body,
#dateck-popup-box > .dateck-popup-actions{position:relative;z-index:2;top:20px;}
.preview-box{position:relative;overflow:hidden;background-size:cover;background-position:center;}
.preview-box::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,var(--dateck-bg-overlay,0));pointer-events:none;z-index:1}
.preview-box > *{position:relative;z-index:2}


/* Admin Runtime Preview should use same popup-start animations as frontend */
.dateck-preview-runtime.dateck-visible .anim-fade,
.dateck-preview-runtime.dateck-visible .anim-slide,
.dateck-preview-runtime.dateck-visible .anim-zoom,
.dateck-preview-runtime.dateck-visible .anim-rotate{
opacity:1;
transform:translateY(0) scale(1) rotateX(0deg);
}
.dateck-preview-runtime.dateck-visible .anim-bounce{
opacity:1;
animation:dateckPopupBounce var(--dateck-anim-duration, 450ms) cubic-bezier(.22,.9,.3,1.25) forwards;
}

/* Let configured text size win over default paragraph sizes */
#dateck-popup-box .dateck-popup-text,
#dateck-popup-box .dateck-popup-text p,
#dateck-popup-box .dateck-popup-text li,
#dateck-popup-box .dateck-popup-text span,
#dateck-popup-box .dateck-popup-text strong,
#dateck-popup-box .dateck-popup-text em,
#dateck-popup-box .dateck-popup-text a,
.preview-box .dateck-preview-text,
.preview-box .dateck-preview-text p,
.preview-box .dateck-preview-text li,
.preview-box .dateck-preview-text span,
.preview-box .dateck-preview-text strong,
.preview-box .dateck-preview-text em,
.preview-box .dateck-preview-text a,
.dateck-runtime-box .dateck-preview-text,
.dateck-runtime-box .dateck-preview-text p,
.dateck-runtime-box .dateck-preview-text li,
.dateck-runtime-box .dateck-preview-text span,
.dateck-runtime-box .dateck-preview-text strong,
.dateck-runtime-box .dateck-preview-text em,
.dateck-runtime-box .dateck-preview-text a{
font-size:inherit;
}
/* Dateck Popup Pro - Premium Frontend Animation Addon
   In deine Frontend Popup CSS Datei einfügen (z.B. popup.css) */

/* Basis */
#dateck-popup-box.anim-pop{opacity:0;transform:scale(.7);}
#dateck-popup-box.anim-drop{opacity:0;transform:translateY(-80px);}
#dateck-popup-box.anim-swing{opacity:0;transform:rotate(-10deg) translateY(-12px);transform-origin:center top;}
#dateck-popup-box.anim-cinematic{opacity:0;transform:scale(1.08) translateY(26px);filter:blur(10px);}
#dateck-popup-box.anim-elastic{opacity:0;transform:scale(.72);}
#dateck-popup-box.anim-door{opacity:0;transform:perspective(1400px) rotateX(-82deg);transform-origin:top center;}

/* Trigger */
#dateck-popup-overlay.dateck-visible #dateck-popup-box.anim-pop{
    opacity:1;
    animation:dateckPopupPop var(--dateck-anim-duration, 650ms) cubic-bezier(.22,.9,.3,1.15) forwards;
}
#dateck-popup-overlay.dateck-visible #dateck-popup-box.anim-drop{
    opacity:1;
    animation:dateckPopupDrop var(--dateck-anim-duration, 700ms) cubic-bezier(.22,.9,.3,1) forwards;
}
#dateck-popup-overlay.dateck-visible #dateck-popup-box.anim-swing{
    opacity:1;
    animation:dateckPopupSwing var(--dateck-anim-duration, 700ms) cubic-bezier(.22,.9,.3,1) forwards;
}
#dateck-popup-overlay.dateck-visible #dateck-popup-box.anim-cinematic{
    opacity:1;
    animation:dateckPopupCinematic var(--dateck-anim-duration, 900ms) cubic-bezier(.22,.9,.3,1) forwards;
}
#dateck-popup-overlay.dateck-visible #dateck-popup-box.anim-elastic{
    opacity:1;
    animation:dateckPopupElastic var(--dateck-anim-duration, 820ms) cubic-bezier(.22,.9,.3,1.12) forwards;
}
#dateck-popup-overlay.dateck-visible #dateck-popup-box.anim-door{
    opacity:1;
    animation:dateckPopupDoor var(--dateck-anim-duration, 760ms) cubic-bezier(.22,.9,.3,1) forwards;
}

/* Keyframes */
@keyframes dateckPopupSwing{
    0%{opacity:0;transform:rotate(-10deg) translateY(-12px);}
    30%{opacity:1;transform:rotate(7deg) translateY(0);}
    55%{transform:rotate(-5deg);}
    75%{transform:rotate(3deg);}
    100%{opacity:1;transform:rotate(0deg) translateY(0);}
}
@keyframes dateckPopupPop{
    0%{opacity:0;transform:scale(.7);}
    60%{opacity:1;transform:scale(1.06);}
    100%{opacity:1;transform:scale(1);}
}
@keyframes dateckPopupDrop{
    0%{opacity:0;transform:translateY(-80px);}
    70%{opacity:1;transform:translateY(10px);}
    100%{opacity:1;transform:translateY(0);}
}
@keyframes dateckPopupCinematic{
    0%{opacity:0;transform:scale(1.08) translateY(26px);filter:blur(10px);}
    60%{opacity:1;transform:scale(1.01) translateY(0);filter:blur(0);}
    100%{opacity:1;transform:scale(1) translateY(0);filter:blur(0);}
}
@keyframes dateckPopupElastic{
    0%{opacity:0;transform:scale(.72);}
    55%{opacity:1;transform:scale(1.08);}
    72%{transform:scale(.98);}
    88%{transform:scale(1.02);}
    100%{opacity:1;transform:scale(1);}
}
@keyframes dateckPopupDoor{
    0%{opacity:0;transform:perspective(1400px) rotateX(-82deg);}
    60%{opacity:1;transform:perspective(1400px) rotateX(10deg);}
    100%{opacity:1;transform:perspective(1400px) rotateX(0deg);}
}
/* Close Button sauber oben mittig */
.dateck-x,
.dateck-popup-close,
#dateck-popup-box .dateck-x{
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.28);
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    z-index: 30;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.16);
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.dateck-x:hover,
.dateck-popup-close:hover,
#dateck-popup-box .dateck-x:hover{
    background: rgba(255,255,255,0.24);
    box-shadow: 0 12px 28px rgba(0,0,0,0.22);
    transform: translateX(-50%) scale(1.06);
	
}

.dateck-x:active,
.dateck-popup-close:active,
#dateck-popup-box .dateck-x:active{
    transform: translateX(-50%) scale(0.97);
}