/*
 * Gemeinsame Oberflaechen des Sternenbuerger-Stylepacks.
 *
 * Die aeusserste Inhaltsflaeche aller grossen Bereiche verwendet dieselbe
 * Glasoptik wie das Kunena-Forum. Innere Karten und Formulare behalten ihre
 * jeweils staerkere Deckkraft, damit Inhalte auch vor hellen Motiven lesbar
 * bleiben.
 */
:root {
    --dstb-glass-bg: rgba(25, 25, 28, 0.72);
    --dstb-glass-border: rgba(5, 5, 7, 0.9);
    --dstb-glass-shadow:
        0 18px 48px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
    --dstb-glass-radius: 12px;
    --dstb-glass-blur: blur(5px) saturate(0.84);
}

/* Vorhandene Designsysteme auf eine gemeinsame Aussenflaeche abstimmen. */
#kunena {
    --kf-bg: var(--dstb-glass-bg);
}

body.is-homepage {
    --home-bg: var(--dstb-glass-bg);
}

#jevents {
    --jev-bg: var(--dstb-glass-bg);
}

.crafting-app {
    --sb-panel: var(--dstb-glass-bg);
}

/* Craftingtool: Kopfblock und Hauptblock entsprechen nun dem Forum. */
.crafting-app .app-topbar,
.crafting-app .page-shell {
    border-color: var(--dstb-glass-border);
    background: var(--dstb-glass-bg) !important;
    box-shadow: var(--dstb-glass-shadow);
    backdrop-filter: var(--dstb-glass-blur);
    -webkit-backdrop-filter: var(--dstb-glass-blur);
}

/* Profil und Profilbearbeitung. */
.diestb_profile-wrapper,
.diestb_profile-edit-wrapper {
    border-color: var(--dstb-glass-border);
    background: var(--dstb-glass-bg);
    box-shadow: var(--dstb-glass-shadow);
    backdrop-filter: var(--dstb-glass-blur);
    -webkit-backdrop-filter: var(--dstb-glass-blur);
}

/* Galerie: nur die grosse Aussenflaeche wird transparenter. */
#phocagallery .phocagallery-black-wrapper {
    border-color: var(--dstb-glass-border);
    background: var(--dstb-glass-bg);
    box-shadow: var(--dstb-glass-shadow);
    backdrop-filter: var(--dstb-glass-blur);
    -webkit-backdrop-filter: var(--dstb-glass-blur);
}

/*
 * Aeltere Joomla-Bereiche, die noch kein eigenes Redesign-Root besitzen.
 * Ihre inneren Formulare bleiben unveraendert und damit gut lesbar.
 */
.registration-form-wrapper,
.com-users-login.login,
.com-dpcalendar-calendar,
.com-dpcalendar-eventform,
.com-dpcalendar-event,
.com-content-category-blog.blog {
    border: 2px solid var(--dstb-glass-border);
    border-radius: var(--dstb-glass-radius);
    background: var(--dstb-glass-bg);
    box-shadow: var(--dstb-glass-shadow);
    backdrop-filter: var(--dstb-glass-blur);
    -webkit-backdrop-filter: var(--dstb-glass-blur);
}

/* Standard-Beitraege bekommen dieselbe Huelle, sofern keine bereits
   gestaltete Komponente die Aussenflaeche selbst bereitstellt. */
body:not(.is-homepage):not(.is-jevents-page) .blog-container
    > :is(.item-page, .com-content-article, .contact, .com-users-reset, .com-users-remind) {
    box-sizing: border-box;
    padding: clamp(16px, 2vw, 28px);
    border: 2px solid var(--dstb-glass-border);
    border-radius: var(--dstb-glass-radius);
    background: var(--dstb-glass-bg);
    color: #f4f4f5;
    box-shadow: var(--dstb-glass-shadow);
    backdrop-filter: var(--dstb-glass-blur);
    -webkit-backdrop-filter: var(--dstb-glass-blur);
}

/* Login, Registrierung und Kontowiederherstellung als kompakte Glasfläche. */
body.is-auth-page main {
    padding-top: clamp(14px, 2.5vw, 30px);
}

body.is-auth-page .blog-container {
    box-sizing: border-box;
    width: min(calc(100% - 24px), 1120px);
    max-width: 1120px;
    min-height: 0;
    margin-bottom: 30px;
    padding: clamp(16px, 3vw, 32px);
    border: 2px solid var(--dstb-glass-border);
    border-radius: var(--dstb-glass-radius);
    background: var(--dstb-glass-bg);
    box-shadow: var(--dstb-glass-shadow);
    backdrop-filter: var(--dstb-glass-blur);
    -webkit-backdrop-filter: var(--dstb-glass-blur);
}

@media (max-width: 700px) {
    :root {
        --dstb-glass-radius: 10px;
    }

    .crafting-app .app-topbar,
    .crafting-app .page-shell,
    .diestb_profile-wrapper,
    .diestb_profile-edit-wrapper,
    #phocagallery .phocagallery-black-wrapper {
        border-radius: var(--dstb-glass-radius);
    }
}