/* ============================================================
   9GradOst – Klaro Consent Styling
   CI #690f00
   ============================================================ */

#klaro,
.klaro {
    --go-ci: #690f00;
    --go-ci-hover: #811706;
    --go-black: #171719;
    --go-dark: #252527;
    --go-dark-soft: #303033;
    --go-offwhite: #f7f6f3;
    --go-white: #ffffff;
    --go-muted: #b7b7ba;
}


/* ------------------------------------------------------------
   NOTICE
   ------------------------------------------------------------ */

.klaro .cookie-notice:not(.cookie-modal-notice) {
    max-width: 460px !important;

    background: var(--go-offwhite) !important;
    color: var(--go-black) !important;

    border: 1px solid rgba(23,23,25,.10) !important;
    border-radius: 2px !important;

    box-shadow: 0 18px 55px rgba(0,0,0,.18) !important;
}

.klaro .cookie-notice .cn-body {
    padding: 22px !important;
}

.klaro .cookie-notice p,
.klaro .cookie-notice span,
.klaro .cookie-notice strong {
    color: var(--go-black) !important;
}

.klaro .cookie-notice p {
    font-size: 14px !important;
    line-height: 1.55 !important;
}


/* Learn more */

.klaro .cookie-notice a,
.klaro .cookie-modal a {
    color: var(--go-ci) !important;
    text-decoration: none !important;
}

.klaro .cookie-notice a:hover,
.klaro .cookie-modal a:hover {
    color: var(--go-ci-hover) !important;
}


/* ------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------ */

.klaro .cm-btn {
    border-radius: 2px !important;
    border: 1px solid transparent !important;

    padding: 10px 14px !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    box-shadow: none !important;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease !important;
}


/* Accept / Save */

.klaro .cm-btn-success,
.klaro .cm-btn-accept,
.klaro .cm-btn-accept-all {
    background: var(--go-ci) !important;
    border-color: var(--go-ci) !important;
    color: #fff !important;
}

.klaro .cm-btn-success:hover,
.klaro .cm-btn-accept:hover,
.klaro .cm-btn-accept-all:hover {
    background: var(--go-ci-hover) !important;
    border-color: var(--go-ci-hover) !important;
}


/* Neutral */

.klaro .cm-btn-info {
    background: var(--go-black) !important;
    border-color: var(--go-black) !important;
    color: #fff !important;
}

.klaro .cm-btn-info:hover {
    background: #2d2d30 !important;
}


/* Decline */

.klaro .cm-btn-danger,
.klaro .cm-btn-decline {
    background: transparent !important;
    border-color: rgba(23,23,25,.22) !important;
    color: var(--go-black) !important;
}

.klaro .cm-btn-danger:hover,
.klaro .cm-btn-decline:hover {
    border-color: var(--go-ci) !important;
    color: var(--go-ci) !important;
}


/* ------------------------------------------------------------
   MODAL BACKDROP
   ------------------------------------------------------------ */

.klaro .cookie-modal {
    background: rgba(17,17,19,.62) !important;
    backdrop-filter: blur(4px);
}


/* ------------------------------------------------------------
   MODAL
   ------------------------------------------------------------ */

.klaro .cookie-modal .cm-modal.cm-klaro {
    max-width: 720px !important;

    background: var(--go-offwhite) !important;
    color: var(--go-black) !important;

    border-radius: 2px !important;

    box-shadow: 0 25px 80px rgba(0,0,0,.28) !important;
}


/* Header */

.klaro .cookie-modal .cm-header {
    padding: 28px 30px 22px !important;

    border-bottom: 1px solid rgba(23,23,25,.12) !important;
}

.klaro .cookie-modal .cm-header h1,
.klaro .cookie-modal .cm-header .title {
    color: var(--go-ci) !important;

    font-size: 30px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;

    letter-spacing: -.025em !important;
}

.klaro .cookie-modal .cm-header p {
    margin-top: 15px !important;

    color: #55555a !important;

    font-size: 14px !important;
    line-height: 1.6 !important;
}


/* Close */

.klaro .cookie-modal .hide {
    color: var(--go-black) !important;
}


/* ------------------------------------------------------------
   SERVICES / PURPOSES
   ------------------------------------------------------------ */

.klaro .cookie-modal .cm-body {
    background: var(--go-offwhite) !important;
}

.klaro .cookie-modal .cm-purpose {
    border-bottom: 1px solid rgba(23,23,25,.10) !important;
}

.klaro .cookie-modal .cm-list-title {
    color: var(--go-black) !important;

    font-size: 14px !important;
    font-weight: 700 !important;
}

.klaro .cookie-modal .cm-list-description {
    color: #747478 !important;

    font-size: 13px !important;
    line-height: 1.55 !important;
}

.klaro .cookie-modal .cm-caret {
    color: var(--go-ci) !important;
}


/* ------------------------------------------------------------
   TOGGLES
   ------------------------------------------------------------ */

.klaro .cookie-modal .cm-list-label .slider,
.klaro .context-notice .cm-list-label .slider,
.klaro .cookie-notice .cm-list-label .slider {
    background: #d6d5d2 !important;
}

.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider,
.klaro .context-notice .cm-list-input:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider {
    background: var(--go-ci) !important;
}

.klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider,
.klaro .cookie-modal .cm-list-input.only-required + .cm-list-label .slider {
    background: #8a8a8d !important;
}


/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */

.klaro .cookie-modal .cm-footer {
    background: #efede9 !important;

    border-top: 1px solid rgba(23,23,25,.10) !important;
}

.klaro .cookie-modal .cm-footer-buttons {
    gap: 10px !important;
}


/* Klaro branding */

.klaro .cookie-modal .cm-powered-by {
    color: #999 !important;
    opacity: .55 !important;
}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 767px) {

    .klaro .cookie-notice:not(.cookie-modal-notice) {
        left: 14px !important;
        right: 14px !important;
        bottom: 14px !important;

        width: auto !important;
        max-width: none !important;
    }

    .klaro .cookie-modal .cm-modal.cm-klaro {
        width: calc(100% - 24px) !important;
        max-height: calc(100vh - 24px) !important;
    }

}


/* ============================================================
   Floating Cookie Settings
   ============================================================ */

.neo-cookie-float {
    position: fixed;
    z-index: 9998;

    right: 0;
    bottom: 110px;

    min-height: 46px;
    padding: 0;

    display: flex;
    align-items: stretch;

    border: 0;
    border-radius: 3px 0 0 3px;

    background: #690f00;
    color: #fff;

    box-shadow: 0 10px 30px rgba(0,0,0,.18);

    cursor: pointer;

    transform: translateX(calc(100% - 46px));

    transition:
        transform .28s ease,
        background-color .2s ease,
        box-shadow .2s ease;
}

.neo-cookie-float:hover,
.neo-cookie-float:focus-visible {
    transform: translateX(0);
    background: #7f1707;
    box-shadow: 0 14px 38px rgba(0,0,0,.24);
}

.neo-cookie-float__icon {
    width: 46px;
    min-width: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 17px;
    line-height: 1;
}

.neo-cookie-float__text {
    padding: 0 16px 0 4px;

    display: flex;
    align-items: center;

    white-space: nowrap;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .035em;
}


/* Focus */

.neo-cookie-float:focus-visible {
    outline: 3px solid rgba(105,15,0,.35);
    outline-offset: 3px;
}


/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */

@media (max-width: 767px) {

    .neo-cookie-float {
        right: 14px;
        bottom: 14px;

        width: 46px;
        min-height: 46px;

        border-radius: 50%;

        transform: none;
        overflow: hidden;
    }

    .neo-cookie-float:hover,
    .neo-cookie-float:focus-visible {
        transform: none;
    }

    .neo-cookie-float__text {
        display: none;
    }

    .neo-cookie-float__icon {
        width: 46px;
        min-width: 46px;
    }

}


/* ============================================================
   Floating Cookie Settings – größer / besser bedienbar
   ============================================================ */

.neo-cookie-float {
    min-height: 56px;

    transform: translateX(calc(100% - 56px));

    box-shadow: 0 12px 34px rgba(0,0,0,.22);
}

.neo-cookie-float:hover,
.neo-cookie-float:focus-visible {
    box-shadow: 0 16px 42px rgba(0,0,0,.28);
}

.neo-cookie-float__icon {
    width: 56px;
    min-width: 56px;

    font-size: 20px;
}

.neo-cookie-float__text {
    padding: 0 20px 0 6px;

    font-size: 13px;
    letter-spacing: .04em;
}


/* Mobile */

@media (max-width: 767px) {

    .neo-cookie-float {
        width: 54px;
        min-height: 54px;
    }

    .neo-cookie-float__icon {
        width: 54px;
        min-width: 54px;

        font-size: 19px;
    }

}


/* ============================================================
   Floating Cookie Settings – Icon größer
   ============================================================ */

.neo-cookie-float__icon {
    font-size: 26px;
    line-height: 1;
}

@media (max-width: 767px) {

    .neo-cookie-float__icon {
        font-size: 24px;
    }

}