.contao-cookiebar {
    --ccb-backdrop: rgb(0 0 0 / 50%);
    --ccb-anim-duration: 0.5s;
    --ccb-checked-clr: #0600dc;
    --ccb-checked-bg: #fff;
    --ccb-unchecked-clr: #9c9b99;
    --ccb-unchecked-bg: #fff;
    --ccb-disabled-clr: #c8c7c5;
    --ccb-disabled-bg: #f4f4f4;
    --ccb-focus-clr: #00a4f4;

    --ccb-text: #000;

    padding: 0;
    z-index: 10002;
}

.cc-inner {
    padding: 50px 50px 20px 50px;
    border-radius: 0;
    box-shadow:
            0 8px 10px 1px rgba(0,0,0,0.14),
            0 3px 14px 2px rgba(0,0,0,0.12),
            0 5px 5px -3px rgba(0,0,0,0.2);
}

// Headline
#cookiebar-desc p {
    font-size: 1.5rem;
    color: #000;
    font-family: Raleway, sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.2;
}

.cc-groups {
    margin-bottom: 30px;
}

// Buttons
.contao-cookiebar {

    .cc-btn {
        padding: .9375rem 1.375rem .9375rem 1.5625rem;
        font-family: Raleway, sans-serif;
        font-size: 14px;
        letter-spacing: 0.05rem;
        font-weight: 500;
        text-transform: uppercase;
        line-height: 1;
        border-radius: 0;
    }

    .highlight,
    .highlight .success {
        --ccb-btn-bg: #0600dc;
        --ccb-btn-clr: #fff;
        --ccb-btn-bdr: var(--ccb-btn-bg);
        --ccb-btn-bg-hvr: var(--ccb-btn-bg);
    }

    .grayscale {
        --ccb-btn-bg: #ffffff;
        --ccb-btn-bdr: #ececec;
        --ccb-btn-bg-hvr: #ececec;

        .success {
            --ccb-btn-bg: #ffffff;
            --ccb-btn-bg-hvr: #f7f7f7;
        }
    }
}



// Schließen entfernen
.cc-close {
    display: none;
}




// Hinweis bei deaktivierter Karte
.map-consent {
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: #efefea;
    text-align: center;

    .cc-module {
        max-width: 520px;

        p {
            margin: 0 0 1.25rem;
            color: #444;
        }
    }
}

.map-consent__btn {
    padding: .75em 1.5em;
    border: 0;
    cursor: pointer;
    background: #444;
    color: #fff;

    &:hover {
        background: #222;
    }
}