/* css/cookie_optin.css (xxl-art) — Cookie-Hinweis für alle Projekte, eine Quelle.
   Leiste unten, verdeckt die halbe Seite. Die Seite bleibt scrollbar und oben klickbar,
   unten liegt sie verschwommen hinter der Leiste. Soll stören, bis gewählt wurde, aber nichts sperren.

   Aussehen je Projekt nur über die Variablen unten:
     Standard (alexzerr)          hell, eckig, Farben aus alexzerr site.css
     [data-project="xxl-art"]     dunkel, rund, Türkis
   Neues Projekt: eigenen Block .cookie-layer[data-project="…"] anlegen, nur Variablen setzen. */

.cookie-layer {
    /* Leiste */
    --cookie-sheet-bg:          rgb(46 46 46 / 55%);
    --cookie-sheet-border:      #000000;
    --cookie-sheet-shadow:      0 -20px 60px rgb(61 61 61 / 18%);

    /* Box */
    --cookie-box-bg:            var(--white, #ffffff);
    --cookie-box-border:        var(--rule, #d6d6d1);
    --cookie-box-radius:        0;
    --cookie-box-shadow:        0 24px 70px rgba(17, 18, 20, 0.28);
    --cookie-box-blur:          none;
    --cookie-title-color:       var(--paynes-grey, #23282e);
    --cookie-text-color:        var(--graphite, #6b7077);
    --cookie-link-color:        var(--paynes-grey, #23282e);
    --cookie-rule:              var(--rule, #d6d6d1);
    --cookie-check-color:       var(--ink, #111214);

    /* Buttons */
    --cookie-btn-radius:        0;
    --cookie-btn-font:          inherit;
    --cookie-btn-font-size:     var(--button-font-size, 13px);
    --cookie-btn-bg:            var(--button-bg, #111214);
    --cookie-btn-fg:            var(--button-fg, #ffffff);
    --cookie-btn-bg-hover:      var(--button-bg-hover, #2c3036);
    --cookie-btn-fg-hover:      var(--button-fg, #ffffff);
    --cookie-outline-border:    var(--ink, #111214);
    --cookie-outline-fg:        var(--ink, #111214);
    --cookie-outline-bg-hover:  var(--ink, #111214);
    --cookie-outline-fg-hover:  var(--button-fg, #ffffff);

    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 950;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    max-height: 90vh;
    padding: 24px 16px;
    overflow-y: auto;
    background: var(--cookie-sheet-bg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--cookie-sheet-border);
    box-shadow: var(--cookie-sheet-shadow);
    animation: cookie-layer-up 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* xxl-art: dunkle Glas-Box, runde Buttons, Türkis wie die Marke */
.cookie-layer[data-project="xxl-art"] {
    --cookie-sheet-bg:          rgb(0 0 0 / 55%);
    --cookie-sheet-border:      rgb(255 255 255 / 15%);
    --cookie-sheet-shadow:      0 -20px 60px rgb(0 0 0 / 35%);

    --cookie-box-bg:            rgb(18 18 18 / 82%);
    --cookie-box-border:        rgb(255 255 255 / 14%);
    --cookie-box-radius:        16px;
    --cookie-box-shadow:        0 24px 70px rgb(0 0 0 / 45%);
    --cookie-box-blur:          blur(20px);
    --cookie-title-color:       #ffffff;
    --cookie-text-color:        rgb(255 255 255 / 75%);
    --cookie-link-color:        #ffffff;
    --cookie-rule:              rgb(255 255 255 / 18%);
    --cookie-check-color:       #02d0ce;

    --cookie-btn-radius:        50px;
    --cookie-btn-font:          var(--font-display, inherit);
    --cookie-btn-font-size:     14px;
    --cookie-btn-bg:            #02d0ce;
    --cookie-btn-fg:            #001d1c;
    --cookie-btn-bg-hover:      #0be0de;
    --cookie-btn-fg-hover:      #001d1c;
    --cookie-outline-border:    rgb(255 255 255 / 55%);
    --cookie-outline-fg:        #ffffff;
    --cookie-outline-bg-hover:  rgb(255 255 255 / 15%);
    --cookie-outline-fg-hover:  #ffffff;
}

@keyframes cookie-layer-up {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.cookie-layer[hidden] {
    display: none;
}

.cookie-layer-box {
    width: 100%;
    max-width: 520px;
    padding: 32px;
    background: var(--cookie-box-bg);
    color: var(--cookie-title-color);
    border: 1px solid var(--cookie-box-border);
    border-radius: var(--cookie-box-radius);
    box-shadow: var(--cookie-box-shadow);
    -webkit-backdrop-filter: var(--cookie-box-blur);
    backdrop-filter: var(--cookie-box-blur);
    text-align: left;
}

.cookie-layer-title {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cookie-title-color);
}

.cookie-layer-text {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--cookie-text-color);
}

.cookie-layer-text a {
    color: var(--cookie-link-color);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Annehmen und Ablehnen gleich groß, gleich sichtbar */
.cookie-layer-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

/* Buttons komplett hier, unabhängig von den .button-Klassen der Seiten.
   Rahmen per border (nicht box-shadow), damit .btn-55 bei xxl-art seinen Schatten behalten kann. */
.cookie-layer .cookie-layer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 12px 8px;
    border: 1px solid transparent;
    border-radius: var(--cookie-btn-radius);
    background: var(--cookie-btn-bg);
    color: var(--cookie-btn-fg);
    font-family: var(--cookie-btn-font);
    font-size: var(--cookie-btn-font-size);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.382s ease, box-shadow 0.382s ease;
}

.cookie-layer .cookie-layer-btn:hover {
    background: var(--cookie-btn-bg-hover);
    color: var(--cookie-btn-fg-hover);
}

/* Zweiter Button (Nur notwendige, Auswahl speichern): Rahmen statt Fläche */
.cookie-layer .cookie-layer-btn--outline {
    background: transparent;
    color: var(--cookie-outline-fg);
    border-color: var(--cookie-outline-border);
}

.cookie-layer .cookie-layer-btn--outline:hover {
    background: var(--cookie-outline-bg-hover);
    color: var(--cookie-outline-fg-hover);
}

.cookie-layer-link {
    margin: 14px 0 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    color: var(--cookie-text-color);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.cookie-layer-link:hover {
    color: var(--cookie-link-color);
}

.cookie-layer-settings {
    display: grid;
    gap: 12px;
    margin: 0 0 18px;
    padding: 16px 0 0;
    border-top: 1px solid var(--cookie-rule);
}

.cookie-layer-settings[hidden] {
    display: none;
}

.cookie-layer-option {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    align-items: start;
    font-size: 13px;
    line-height: 1.45;
    color: var(--cookie-text-color);
    cursor: pointer;
}

.cookie-layer-option strong {
    display: block;
    color: var(--cookie-title-color);
    font-weight: 600;
}

.cookie-layer-option input {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--cookie-check-color);
}

@media (max-width: 480px) {
    .cookie-layer-box {
        padding: 24px;
    }

    /* Schmal: Buttons dürfen umbrechen, statt die Box breiter zu drücken */
    .cookie-layer .cookie-layer-btn {
        padding: 10px 6px;
        font-size: 12px;
        letter-spacing: 0.04em;
        white-space: normal;
        text-align: center;
    }
}

/* Footer: Link "Cookie-Einstellungen" sieht aus wie die Links daneben */
.footer-cookie-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: pointer;
}