/**
 * Familienweite Hintergründe: pro Ziel eigene CSS-Variablen (--kinma-fam-menu-{slot}-*).
 * Legacy: --kinma-fam-menu-under / -img / -img-op (gesetzt aus Stammbaum-Slot in PHP).
 */

/* ── Stammbaum (index, body.page-tree) ─────────────────────────────────── */
body.page-tree .tree-container {
    background-color: var(--kinma-fam-menu-tree-under, var(--kinma-fam-menu-under, #ffffff));
}

body.page-tree .tree-container::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Unter Baumkarten/UI; KI-Kantenschimmer bleibt auf ::before (höherer z-index) */
    z-index: -1;
    pointer-events: none;
    background-image: var(--kinma-fam-menu-tree-img, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: var(--kinma-fam-menu-tree-img-op, var(--kinma-fam-menu-img-op, 1));
}

/* ── Geschichten ───────────────────────────────────────────────────────── */
body .stories-menu-container {
    background-color: var(--kinma-fam-menu-stories-under, var(--kinma-fam-menu-under, #ffffff));
}

body .stories-menu-container::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--kinma-fam-menu-stories-img, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: var(--kinma-fam-menu-stories-img-op, var(--kinma-fam-menu-img-op, 1));
}

body .stories-menu-container > .stories-menu-content {
    position: relative;
    z-index: 1;
}

/* ── Personen verwalten ─────────────────────────────────────────────────── */
body .persons-menu-container {
    background-color: var(--kinma-fam-menu-persons-under, var(--kinma-fam-menu-under, #ffffff));
}

body .persons-menu-container::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--kinma-fam-menu-persons-img, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: var(--kinma-fam-menu-persons-img-op, var(--kinma-fam-menu-img-op, 1));
}

body .persons-menu-container > .persons-menu-content {
    position: relative;
    z-index: 1;
}

/* ── Einstellungen ──────────────────────────────────────────────────────── */
body #settings-menu.nav-large-menu-overlay {
    background-color: var(--kinma-fam-menu-settings-under, var(--kinma-fam-menu-under, #ffffff));
}

body #settings-menu.nav-large-menu-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--kinma-fam-menu-settings-img, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: var(--kinma-fam-menu-settings-img-op, var(--kinma-fam-menu-img-op, 1));
}

body #settings-menu.nav-large-menu-overlay > .nav-large-menu-content {
    position: relative;
    z-index: 1;
}

/* ── Wahlen & andere große Nav-Overlays (nicht Einstellungen) ───────────── */
body .nav-large-menu-overlay:not(#settings-menu) {
    background-color: var(--kinma-fam-menu-nav-under, var(--kinma-fam-menu-under, #ffffff));
}

body .nav-large-menu-overlay:not(#settings-menu)::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--kinma-fam-menu-nav-img, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: var(--kinma-fam-menu-nav-img-op, var(--kinma-fam-menu-img-op, 1));
}

body .nav-large-menu-overlay:not(#settings-menu) > .nav-large-menu-content {
    position: relative;
    z-index: 1;
}