/* ==========================================================
   BeKa Autoaufbereitung
   Premium Cookie Banner V4
   iPhone / Safari Fix
========================================================== */

.beka-cookie{
    position:fixed;
    left:50%;
    bottom:28px;
    transform:translate(-50%,35px);
    width:min(520px,calc(100vw - 32px));
    padding:28px;
    background:rgba(12,12,14,.94);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(200,16,46,.35);
    border-top:4px solid #c8102e;
    border-radius:20px;
    box-shadow:0 24px 60px rgba(0,0,0,.45);
    color:#fff;
    font-family:"Manrope",sans-serif;
    z-index:99999;
    opacity:0;
    visibility:hidden;
    transition:opacity .35s ease,transform .35s ease,visibility .35s;

    max-height:calc(100dvh - 32px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    pointer-events:none;
    touch-action:manipulation;
}

.beka-cookie.show{
    opacity:1;
    visibility:visible;
    transform:translate(-50%,0);
    pointer-events:auto;
}

.beka-cookie h3{
    margin:0 0 14px;
    font-size:1.35rem;
    font-weight:800;
}

.beka-cookie p{
    margin:0;
    color:#d4d4d4;
    line-height:1.7;
}

.beka-cookie-link{
    display:inline-block;
    margin:18px 0 22px;
    color:#c8102e;
    font-weight:700;
    text-decoration:none;
}

.beka-cookie-link:hover{
    color:#ef3a58;
}

.beka-cookie-actions{
    display:flex;
    justify-content:flex-end;
}

.beka-cookie-button{
    appearance:none;
    -webkit-appearance:none;
    border:none;
    border-radius:999px;
    background:#c8102e;
    color:#fff;
    padding:14px 28px;
    font:700 15px "Manrope",sans-serif;
    cursor:pointer;
    transition:.25s ease;
    box-shadow:0 10px 25px rgba(200,16,46,.35);
    touch-action:manipulation;
}

.beka-cookie-button:hover{
    background:#e11d48;
    transform:translateY(-2px);
    box-shadow:0 16px 35px rgba(200,16,46,.45);
}

/* ==========================================================
   Mobile / iPhone / Safari
========================================================== */

@media(max-width:768px){

    .beka-cookie{
        left:16px;
        right:16px;
        bottom:max(16px, env(safe-area-inset-bottom));
        width:auto;
        padding:22px;
        transform:translateY(35px);

        max-height:calc(100dvh - 32px);
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
    }

    .beka-cookie.show{
        transform:translateY(0);
        pointer-events:auto;
    }

    .beka-cookie-actions{
        justify-content:stretch;
    }

    .beka-cookie-button{
        width:100%;
        min-height:48px;
        touch-action:manipulation;
    }
}