/* --- BASIS CONTAINER (Das <dialog> Element) --- */
.cookie-consent-container {
    /* Deine Farben */
    --color-primary: #005DCF;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray: #999999;
    --color-gray-10: #808080;
    --color-gray-20: #4d4d4d;
    --color-dark-primary: #0049a6;
    --color-dark-primary-10: #0052ba;
    --color-hsla-primary-50: rgba(0, 93, 207, 0.18);
    --color-hsla-black-50: rgba(0, 0, 0, 0.5);

    /* Layout Reset fŸr den Dialog */
    display: block;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none;
    background: transparent;
    z-index: 2147483647; /* Maximaler z-index damit es Ÿber allem liegt */
    
    font-family: Helvetica, Arial, sans-serif;
    color: var(--color-gray-20);
    line-height: 1.5;
}

/* Verstecken wenn nicht offen */
.cookie-consent-container:not([open]) {
    display: none;
}

/* --- SIDEBAR (Das sichtbare Fenster) --- */
.cookie-consent-container .consent-modal {
    position: absolute !important;
    
    /* HIER IST DER FIX: Zentrierung Ÿberschreiben */
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    left: auto !important;
    inset: 0 0 0 auto !important; /* Top/Bottom/Left 0, Left Auto */
    translate: none !important;   /* Killt das -50% -50% Zentrieren */
    transform: none !important;
    margin: 0 !important;
    
    /* Grš§e & Optik */
    width: 100%;
    max-width: 440px; 
    height: 100%;
    max-height: 100%;
    
    padding: 1.5rem;
    background-color: var(--color-white);
    overflow-y: auto;
    border-radius: 0 !important; /* Keine runden Ecken an der Seite */
    box-shadow: -5px 0 15px rgba(0,0,0,0.2);
    box-sizing: border-box;
}

/* --- Backdrop --- */
.cookie-consent-container::backdrop {
    background-color: var(--color-hsla-black-50);
}

/* --- INHALT --- */
.cookie-consent-container .text-center { text-align: center; }
.cookie-consent-container p { margin: 0 0 1rem 0; }
.cookie-consent-container a { color: var(--color-gray); text-decoration: none; }
.cookie-consent-container a:hover { color: var(--color-black); transition: color 250ms ease; }
.cookie-consent-container .hint {
    margin-bottom: 1.25rem;
    font-size: 1rem;
    line-height: 1.6;
}
.cookie-consent-container .options {
    display: grid;
    gap: 0.75rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}
.cookie-consent-container .options > li {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

/* Checkboxen */
.cookie-consent-container .label {
    display: flex; align-items: center; gap: .5rem; margin-bottom: 0;
    color: var(--color-gray-20); font-size: 1rem; font-weight: 400;
    position: relative; cursor: pointer;
}
.cookie-consent-container .label .checkmark {
    display: grid; place-items: center; height: 25px; width: 25px;
    background-color: #eef4ff; border: 1px solid rgba(0, 93, 207, 0.28); border-radius: 2px;
    transition: background-color 250ms ease, border-color 250ms ease;
}
.cookie-consent-container .label .checkmark::after {
    content: ""; width: 7px; height: 15px; border: solid var(--color-white);
    border-width: 0 2px 2px 0; rotate: 45deg; translate: 0 -2px; scale: 0;
    transition: scale 250ms ease;
}
.cookie-consent-container .label input:checked ~ .checkmark,
.cookie-consent-container .label input.option-necessary:checked ~ .checkmark,
.cookie-consent-container .label input.modal-option-necessary:checked ~ .checkmark {
    background-color: #005DCF;
    border-color: #005DCF;
}
.cookie-consent-container .label input:checked ~ .checkmark::after,
.cookie-consent-container .label input.option-necessary:checked ~ .checkmark::after,
.cookie-consent-container .label input.modal-option-necessary:checked ~ .checkmark::after {
    scale: 1;
    border-color: var(--color-white);
}
.cookie-consent-container .label input:disabled:checked ~ .checkmark { scale: 1; opacity: .72; }
.cookie-consent-container .label:hover .checkmark {
    background-color: #3AAA35;
    border-color: #3AAA35;
}

/* Details Accordion */
.cookie-consent-container .details {
    display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 250ms ease;
}
.cookie-consent-container .details .detail { min-height: 0; }
.cookie-consent-container .details .detail input[type=checkbox] { visibility: hidden; }
.cookie-consent-container .details:has(.detail.open) { grid-template-rows: 1fr; }
.cookie-consent-container .details:has(.detail.open) input[type=checkbox] { visibility: visible; }

/* Show Details Link */
.cookie-consent-container .show-details {
    display: block; position: relative; padding: 0 18px 0 0; margin: 0 auto 1.25rem;
    color: var(--color-gray); background: none; border: none; font-size: .875rem; cursor: pointer;
}
.cookie-consent-container .show-details:hover { color: var(--color-black); }
.cookie-consent-container .show-details::after {
    content: ""; position: absolute; inset: 50% 0 auto auto;
    border-style: solid; border-width: 5px 5px 0 5px;
    border-color: var(--color-gray) transparent transparent transparent;
    rotate: 360deg; translate: -2px -50%; transition: border-color 250ms ease;
}
.cookie-consent-container .show-details.open::after { rotate: 180deg; }
.cookie-consent-container .show-details .less { display: none; }
.cookie-consent-container .show-details.open .more { display: none; }
.cookie-consent-container .show-details.open .less { display: inline-block; }

/* Options Styling */
.cookie-consent-container .consent-modal .option-wrapper { background-color: #eee; padding: 1rem; margin-bottom: 1rem; }
.cookie-consent-container .consent-modal .option-headline { text-transform: uppercase; font-size: 1.25rem; font-weight: 600; }
.cookie-consent-container .consent-modal .cookie-headline {
    line-height: 1.5; margin: 0 0 1rem 0; color: var(--color-gray-20);
    display: block; text-transform: uppercase; font-size: 1.25rem; font-weight: 600;
}
.cookie-consent-container .consent-modal .option-detail-wrapper { border-bottom: 2px solid #afafaf; margin-bottom: 1rem;}
.cookie-consent-container .consent-modal .option-detail { padding: .5rem; }

/* Footer Links */
.cookie-consent-container .consent-modal .footer-links { display: block; text-align: center; margin-top: 1rem; }

/* Buttons */
.cookie-consent-container .buttons {
    display: grid; grid-template-columns: 1fr; gap: .75rem; margin-bottom: 1.5rem;
}
.cookie-consent-container .buttons button { width: 100%; }

@media all and (min-width: 500px) {
    .cookie-consent-container .buttons { grid-template-columns: repeat(2, 1fr); }
    .cookie-consent-container .buttons :first-child { grid-column: auto / span 2; }
}

@media all and (max-width: 767px) {
    .cookie-consent-container {
        --color-hsla-black-50: rgba(0, 0, 0, 0.68);
    }

    .cookie-consent-container .consent-modal {
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        inset: auto 0 0 0 !important;
        width: 100%;
        max-width: none;
        height: auto;
        max-height: min(92dvh, 46rem);
        padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
        border-radius: 24px 24px 0 0 !important;
        box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.28);
    }

    .cookie-consent-container .consent-modal .cookie-headline {
        font-size: 1.125rem;
        line-height: 1.35;
    }

    .cookie-consent-container .hint {
        font-size: 0.95rem;
        line-height: 1.55;
    }

    .cookie-consent-container .options > li,
    .cookie-consent-container .consent-modal .option-wrapper {
        border-radius: 16px;
    }

    .cookie-consent-container .consent-modal .option-wrapper {
        padding: 0.875rem;
        margin-bottom: 0.75rem;
        background-color: #f5f8ff;
    }

    .cookie-consent-container .label {
        align-items: flex-start;
        gap: 0.75rem;
        font-size: 0.95rem;
        line-height: 1.45;
    }

    .cookie-consent-container .label .checkmark {
        flex-shrink: 0;
        margin-top: 0.15rem;
    }

    .cookie-consent-container .buttons {
        position: sticky;
        bottom: calc(-1rem - env(safe-area-inset-bottom, 0px));
        margin: 0 -0.25rem 1rem;
        padding: 0.75rem 0.25rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff 24%);
    }

    .cookie-consent-container .buttons button {
        min-height: 48px;
    }

    .cookie-consent-container .show-details {
        width: 100%;
        margin: 0 0 1rem;
        padding-right: 1.5rem;
        text-align: left;
    }

    .cookie-consent-container .consent-modal .footer-links {
        font-size: 0.85rem;
        line-height: 1.5;
    }
}