/* ---------- Cookie-Consent-Banner ----------
   Eigenes, schlankes Overlay statt Drittanbieter-Tool - nutzt dieselben
   Farb-/Schrift-Variablen wie der Rest der Seite (style.css), damit es
   nicht wie ein Fremdkörper wirkt. */

/* Bewusst KEIN gemeinsamer position:fixed-Flex-Wrapper für Leiste+Panel
   mehr (frühere Version) - das Zentrieren von Leiste (unten) und Panel
   (mittig) über einen gemeinsamen Container plus "inset:0; margin:auto"
   erwies sich in der Praxis als zu fragil (riesige Leerflächen in
   Produktion). Leiste, Panel und Backdrop sind jetzt jeweils einzeln und
   unabhängig fix positioniert - robuster, keine geteilte Flex-Ausrichtung
   nötig. Der äußere .kk-cookie-Container dient nur noch dazu, alles mit
   einem einzigen [hidden]-Attribut gemeinsam aus-/einzublenden. */
.kk-cookie[hidden] {
    display: none;
}

.kk-cookie__backdrop {
    position: fixed;
    inset: 0;
    z-index: 199;
    background: rgba(0, 0, 0, 0.55);
}

.kk-cookie__backdrop[hidden] {
    display: none;
}

.kk-cookie__bar[hidden] {
    display: none;
}

.kk-cookie__bar {
    position: fixed;
    left: 50%;
    bottom: var(--spacing-md);
    transform: translateX(-50%);
    z-index: 200;
    width: calc(100% - 2 * var(--spacing-md));
    max-width: 920px;
    background: var(--color-bg-dark);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 1rem);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
    padding: var(--spacing-lg);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md);
    font-family: var(--font-body);
}

.kk-cookie__text {
    flex: 1 1 320px;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.kk-cookie__text a {
    color: var(--color-primary);
}

.kk-cookie__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    flex: 0 0 auto;
}

/* Alle drei Buttons bewusst gleich groß/auffällig - "Nur notwendige" darf
   nicht kleiner oder unscheinbarer wirken als "Alle akzeptieren" (bekannter
   Kritikpunkt bei schlecht gemachten Bannern: Ablehnen wird absichtlich
   erschwert/versteckt). */
.kk-cookie__btn {
    padding: 0.65rem 1.1rem;
    border-radius: var(--radius-md, 0.5rem);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.kk-cookie__btn--primary {
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: #fff;
}

.kk-cookie__btn--primary:hover {
    background: var(--color-primary-dark);
}

.kk-cookie__btn--outline {
    background: transparent;
    border: 1px solid var(--color-text-secondary);
    color: var(--color-text);
}

.kk-cookie__btn--outline:hover {
    border-color: var(--color-text);
}

.kk-cookie__btn--ghost {
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-text-secondary);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.kk-cookie__btn--ghost:hover {
    color: var(--color-text);
}

/* ---------- Einstellungs-Panel ---------- */

.kk-cookie__panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 200;
    width: calc(100% - 2 * var(--spacing-md));
    max-width: 480px;
    max-height: calc(100vh - 2 * var(--spacing-xl));
    overflow-y: auto;
    background: var(--color-bg-dark);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 1rem);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    padding: var(--spacing-lg);
    font-family: var(--font-body);
}

.kk-cookie__panel[hidden] {
    display: none;
}

.kk-cookie__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
}

.kk-cookie__panel-title {
    margin: 0;
    font-size: 1.15rem;
    color: var(--color-text);
}

.kk-cookie__panel-close {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: var(--spacing-xs);
}

.kk-cookie__panel-close:hover {
    color: var(--color-text);
}

.kk-cookie__panel-intro {
    margin: 0 0 var(--spacing-lg);
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.kk-cookie__category {
    padding: var(--spacing-md) 0;
    border-top: 1px solid var(--color-border);
}

.kk-cookie__category[hidden] {
    display: none;
}

.kk-cookie__category-head {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.kk-cookie__category-title {
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.95rem;
}

.kk-cookie__category-desc {
    margin: var(--spacing-xs) 0 0;
    font-size: 0.82rem;
    color: var(--color-text-tertiary);
    line-height: 1.5;
}

.kk-cookie__panel-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

/* ---------- Toggle-Switch ---------- */

.kk-cookie__toggle {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    flex: 0 0 auto;
}

.kk-cookie__toggle input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.kk-cookie__toggle--locked input {
    cursor: default;
}

.kk-cookie__toggle-track {
    position: absolute;
    inset: 0;
    background: var(--color-border-light, var(--color-border));
    border-radius: 999px;
    transition: background 0.2s ease;
}

.kk-cookie__toggle-track::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.kk-cookie__toggle input:checked + .kk-cookie__toggle-track {
    background: var(--color-primary);
}

.kk-cookie__toggle input:checked + .kk-cookie__toggle-track::before {
    transform: translateX(16px);
}

.kk-cookie__toggle--locked .kk-cookie__toggle-track {
    opacity: 0.6;
}

/* ---------- Dezenter Wiederaufruf-Link auf Galerie-Seiten ----------
   footer.php (mit dem normalen "Cookie-Einstellungen"-Link) rendert auf
   Galerie-Seiten nicht, siehe cookie-consent.php. */
.kk-cookie__reopen {
    position: fixed;
    left: var(--spacing-md);
    bottom: var(--spacing-md);
    z-index: 150;
    background: rgba(20, 20, 20, 0.7);
    border: 1px solid var(--color-border);
    color: var(--color-text-tertiary);
    font-family: var(--font-body);
    font-size: 0.72rem;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    cursor: pointer;
}

.kk-cookie__reopen:hover {
    color: var(--color-text);
}

@media (max-width: 640px) {
    .kk-cookie__bar {
        flex-direction: column;
        align-items: stretch;
    }

    /* .kk-cookie__text hat "flex: 1 1 320px" für die normale Reihen-
       Anordnung (Desktop) - die 320px sind dort als Mindest-BREITE gedacht.
       Sobald .kk-cookie__bar hier auf flex-direction:column wechselt, gilt
       derselbe flex-basis-Wert aber für die HÖHE (Hauptachse dreht sich mit
       um), wodurch der Text ungewollt auf mind. 320px Höhe aufgeblasen
       wurde (der eigentliche Bug hinter der riesigen Lücke). Deshalb hier
       zurückgesetzt auf die natürliche Inhaltshöhe. */
    .kk-cookie__text {
        flex: none;
    }

    .kk-cookie__actions {
        flex-direction: column;
    }

    .kk-cookie__btn {
        width: 100%;
        text-align: center;
    }
}