/*consent_manager_frontend.css*/
@keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

div.consent_manager-background {
    position: fixed;
    inset: 0;
    background: rgba(30, 16, 80, 0.55);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.5em;
    z-index: 999999;
    height: 100%;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    animation: fadeIn 0.25s;
    outline: 0;
}

div.consent_manager-wrapper {
    font-family: "Work Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    background: #fff;
    border: none;
    border-radius: 16px;
    color: #2b1d57;
    position: relative;
    width: 100%;
    max-width: 750px;
    max-height: 95vh;
    overflow-y: auto;
    box-sizing: border-box;
    animation: fadeIn 0.35s;
    box-shadow: 0 24px 48px -20px rgba(12, 8, 32, 0.45);
    overflow-x: hidden;
}

div.consent_manager-wrapper-inner {
    padding: 2.75em 2.5em 3em;
    position: relative;
}

div.consent_manager-wrapper-inner::before {
    content: "";
    display: block;
    position: absolute;
    top: 2.5em;
    left: 2.5em;
    width: 180px;
    height: 54px;
    background: url("https://weiterbildung-inklusive.ch/res/img/Weiterbildung_Inklusive_LOGO_rgb-de.png") no-repeat center/contain;
}

div.consent_manager-wrapper-inner>*:first-child {
    margin-top: 78px;
}

div.consent_manager-hidden {
    display: none
}

div.consent_manager-script {
    display: none
}

div.consent_manager-wrapper .consent_manager-close-box {
    position: absolute;
    cursor: pointer;
    right: 2.25em;
    top: 2.1em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: none;
    width: 34px;
    height: 34px;
    background-color: rgba(43, 29, 87, 0.12);
    color: #2b1d57;
    font-family: inherit;
    font-size: 20px;
    font-weight: 600;
    opacity: 0.8;
    transition: transform 0.2s ease, opacity 0.2s ease
}

div.consent_manager-wrapper .consent_manager-close-box:hover {
    opacity: 1;
    transform: scale(1.08)
}

div.consent_manager-wrapper .consent_manager-headline {
    margin: 0 0 0.7em 0;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.2;
    color: #2b1d57
}

div.consent_manager-wrapper p.consent_manager-text {
    margin: 0 0 2em 0;
    color: #342068;
    font-size: 18px
}

div.consent_manager-cookiegroups {
    margin: 0 0 2.2em 0
}

div.consent_manager-cookiegroup-checkbox {
    margin-bottom: 1.5em
}

div.consent_manager-cookiegroups label {
    position: relative;
    font-weight: 600;
    font-size: 16px;
    color: #2b1d57;
    cursor: pointer
}

div.consent_manager-cookiegroups label>span {
    cursor: pointer
}

div.consent_manager-cookiegroups label>input[type="checkbox"] {
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 3px;
    border: 2px solid #b2a5df;
    margin: 0 0.9em 0 0.1em;
    background: #fff;
    position: relative;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease
}

.consent_manager-cookiegroups label>input[type="checkbox"]:checked {
    background: #3f248f;
    border-color: #3f248f
}

.consent_manager-cookiegroups label>input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 6px;
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg)
}

.consent_manager-wrapper input[type="checkbox"]:disabled,
.consent_manager-cookiegroups label>input[type="checkbox"]:disabled+* {
    opacity: 0.4;
    cursor: default
}

#consent_manager-toggle-details {
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
    border-radius: 8px;
    border: 2px solid transparent;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    display: inline-block;
    min-height: 3.4em;
    width: auto;
    margin-bottom: 1em;
    cursor: pointer;
    background: #fff;
    border-color: #d9d2ef;
    color: #2b1d57;
    font-family: inherit;
}

#consent_manager-toggle-details:hover {
    transform: translateY(-1px);
    background: #f4f1ff;
    text-decoration: none;
}

div.consent_manager-show-details {
    padding: 0 0 1.5em 0
}

div.consent_manager-show-details .icon-info-circled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    border: none;
    background: #b2a5df;
    font-weight: 600;
    transition: background 0.2s ease
}

div.consent_manager-show-details .icon-info-circled:hover {
    background: #3f248f
}

div.consent_manager-show-details .icon-info-circled:before {
    font-family: inherit;
    font-size: 16px;
    font-weight: 700
}

button.consent_manager-save-selection,
button.consent_manager-accept-all,
button.consent_manager-accept-none {
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
    border-radius: 8px;
    border: 2px solid transparent;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    display: block;
    min-height: 3.4em;
    width: 100%;
    margin-bottom: 1em;
    cursor: pointer
}

button.consent_manager-save-selection:hover,
button.consent_manager-accept-all:hover,
button.consent_manager-accept-none:hover {
    transform: translateY(-1px);
    text-decoration: none
}

button.consent_manager-save-selection {
    background: #fff;
    border-color: #d9d2ef;
    color: #2b1d57
}

button.consent_manager-save-selection:hover {
    background: #f4f1ff
}

button.consent_manager-accept-all {
    background: #3f248f;
    color: #fff
}

button.consent_manager-accept-all:hover {
    background: #2d1970
}

button.consent_manager-accept-none {
    background: #f2f0f8;
    color: #2b1d57
}

button.consent_manager-accept-none:hover {
    background: #e6e0f7
}

div.consent_manager-sitelinks {
    margin: 2em 0 0 0
}

div.consent_manager-sitelinks a {
    display: inline-block;
    margin: 0.4em 1em 0.4em 0;
    color: #6f5bac;
    text-decoration: none;
    cursor: pointer;
    font-weight: 600
}

div.consent_manager-sitelinks a:hover {
    color: #3f248f;
    text-decoration: none
}

div.consent_manager-wrapper div.consent_manager-detail {
    margin-bottom: 3em
}

div.consent_manager-wrapper div.consent_manager-detail a {
    color: #6f5bac;
    font-weight: 600
}

div.consent_manager-wrapper div.consent_manager-detail a:hover {
    color: #3f248f;
    text-decoration: none
}

div.consent_manager-wrapper div.consent_manager-detail div.consent_manager-cookiegroup-title {
    color: #2b1d57;
    background-color: #f4f1ff;
    padding: 10px 16px;
    margin: 1.5em 0 0 0;
    border-radius: 8px 8px 0 0;
    font-weight: 600
}

div.consent_manager-wrapper div.consent_manager-cookiegroup-description {
    border: none;
    padding: 12px 16px 16px;
    background: #fbfaff;
    border-radius: 0 0 8px 8px;
    color: #342068
}

div.consent_manager-wrapper div.consent_manager-cookie {
    margin-top: 3px;
    border-left: 3px solid #e3dcff;
    padding: 8px 16px;
    background: #fff;
    border-radius: 0 8px 8px 0;
    color: #3a2a6f
}

div.consent_manager-wrapper div.consent_manager-cookie span {
    display: block;
    margin-top: 0.5em
}

@media only screen and (min-width: 600px) {
    div.consent_manager-cookiegroups {
        padding: 1em 0 0 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-bottom: 0
    }

    div.consent_manager-cookiegroup-checkbox {
        margin: 0 2.2em 1em 0
    }

    div.consent_manager-show-details {
        text-align: right;
        padding: 1.5em 0 1.5em 0
    }

    div.consent_manager-buttons {
        display: flex;
        justify-content: flex-end;
        align-items: center
    }

    button.consent_manager-save-selection,
    button.consent_manager-accept-all,
    button.consent_manager-accept-none {
        display: inline-block;
        margin: 0 0 0 0.75em;
        width: auto
    }

    div.consent_manager-sitelinks {
        margin: 0 0 0 0
    }

    div.consent_manager-buttons-sitelinks {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row-reverse
    }
}

/* Two-Stage Consent Flow Styles */

/* Initial buttons container */
.consent_manager-initial-buttons {
    display: flex;
    gap: 0.75em;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Detailed buttons container (hidden initially) */
.consent_manager-detailed-buttons {
    display: flex;
    gap: 0.75em;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Customize button (Individuell einstellen) */
button.consent_manager-customize-button {
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
    border-radius: 8px;
    border: 2px solid transparent;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    display: block;
    min-height: 3.4em;
    width: 100%;
    margin-bottom: 1em;
    cursor: pointer;
    background: #fff;
    border-color: #d9d2ef;
    color: #2b1d57;
    font-family: inherit;
}

button.consent_manager-customize-button:hover {
    transform: translateY(-1px);
    background: #f4f1ff;
    text-decoration: none;
}

button.consent_manager-customize-button:focus {
    outline: 2px solid #3f248f;
    outline-offset: 2px;
}

/* Accept all initial button styling */
#consent_manager-accept-all-initial {
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
    border-radius: 8px;
    border: 2px solid transparent;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    display: block;
    min-height: 3.4em;
    width: 100%;
    margin-bottom: 1em;
    cursor: pointer;
    background: #3f248f;
    color: #fff;
    font-family: inherit;
}

#consent_manager-accept-all-initial:hover {
    transform: translateY(-1px);
    background: #2d1970;
    text-decoration: none;
}

#consent_manager-accept-all-initial:focus {
    outline: 2px solid #3f248f;
    outline-offset: 2px;
}

/* Hide checkboxes initially */
.consent_manager-cookiegroups.consent_manager-hidden,
div.consent_manager-cookiegroups.consent_manager-hidden {
    display: none !important;
}

/* Show details wrapper hidden state */
.consent_manager-show-details.consent_manager-hidden,
div.consent_manager-show-details.consent_manager-hidden {
    display: none !important;
}

/* Hide detailed buttons initially */
.consent_manager-detailed-buttons.consent_manager-hidden,
div.consent_manager-detailed-buttons.consent_manager-hidden {
    display: none !important;
}

/* Hide initial buttons when hidden class is added */
.consent_manager-initial-buttons.consent_manager-hidden,
div.consent_manager-initial-buttons.consent_manager-hidden {
    display: none !important;
}

/* Smooth transitions */
.consent_manager-cookiegroups,
.consent_manager-show-details,
.consent_manager-initial-buttons,
.consent_manager-detailed-buttons {
    transition: opacity 0.3s ease-in-out;
}

/* Cookiegroups spacing when visible */
.consent_manager-cookiegroups:not(.consent_manager-hidden) {
    margin-bottom: 2.2em;
}

/* Mobile layout for initial buttons */
@media only screen and (max-width: 599px) {
    .consent_manager-initial-buttons,
    .consent_manager-detailed-buttons {
        flex-direction: column;
        width: 100%;
    }

    button.consent_manager-customize-button,
    #consent_manager-accept-all-initial {
        width: 100%;
        margin-bottom: 1em;
    }
}

/* Desktop layout for initial buttons */
@media only screen and (min-width: 600px) {
    .consent_manager-initial-buttons {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    button.consent_manager-customize-button,
    #consent_manager-accept-all-initial {
        display: inline-block;
        margin: 0 0 0 0.75em;
        width: auto;
    }

    .consent_manager-detailed-buttons {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .consent_manager-detailed-buttons button {
        display: inline-block;
        margin: 0 0 0 0.75em;
        width: auto;
    }
}