/*
 * B.LIFE / blife01
 * Joomla 6 compatibility layer.
 *
 * Das originale Artisteer-CSS bleibt unangetastet.
 */

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}


/*
 * Joomla-6-Artikel-Ausgabe in den alten
 * Artisteer-Post-Container einpassen.
 */
.art-postcontent .com-content-article,
.art-postcontent .com-content-article__body {
    margin: 0;
    padding: 0;
}


/*
 * Ohne rechte Module soll der Content
 * die komplette alte Inhaltsbreite nutzen.
 */
.blife-no-right .art-content-layout .art-content {
    width: 100% !important;
}


/*
 * Joomla-6-Menue.
 *
 * Sobald das Menu-Modul den Suffix
 * "art-hmenu" bekommt, greifen wieder die
 * originalen Artisteer-Regeln.
 */
.art-nav ul.mod-menu.art-hmenu {
    margin: 0;
    padding: 0;
}


/*
 * Moderne Bilder duerfen den Content
 * nicht sprengen.
 */
.art-postcontent img,
.art-blockcontent img {
    max-width: 100%;
    height: auto;
}


/*
 * Joomla-Systemmeldungen.
 */
joomla-alert {
    display: block;
    margin: 10px;
}


/*
 * Responsive-Fallback ohne die alte
 * Artisteer-jQuery-Laufzeit.
 */
@media (max-width: 768px) {

    .art-content-layout,
    .art-content-layout-row,
    .art-layout-cell {
        display: block !important;
        width: 100% !important;
    }

    .art-sidebar1 {
        width: 100% !important;
    }

    .art-nav ul.mod-menu.art-hmenu {
        display: flex !important;
        flex-direction: column;
        width: 100%;
    }

    .art-nav ul.mod-menu.art-hmenu > li {
        display: block !important;
        width: 100%;
    }

    .art-nav ul.mod-menu.art-hmenu > li > a {
        display: block;
        width: 100%;
    }
}


/*
 * ----------------------------------------------------------
 * B.LIFE Desktop-/Mobile-Korrektur
 * ----------------------------------------------------------
 *
 * Das originale Artisteer-Template arbeitet auf Desktop
 * mit einer festen Breite von 900px.
 *
 * Die alte JS-Laufzeit setzte responsive-Klassen dynamisch.
 * Joomla 6 verwendet stattdessen hier reine Media Queries.
 */

@media (min-width: 769px) {

    .art-sheet {
        width: 900px;
    }

    .art-footer-inner {
        width: 900px;
    }

}


/*
 * Auf kleinen Displays die alte min-width:900px-Regel
 * kontrolliert aufheben.
 */

@media (max-width: 768px) {

    html,
    body {
        min-width: 0 !important;
        width: 100%;
    }

    .art-header {
        width: 100%;
    }

    .art-sheet {
        width: auto !important;
        margin-left: 8px;
        margin-right: 8px;
    }

    .art-footer-inner {
        width: auto !important;
    }

    .art-content-layout,
    .art-content-layout-row,
    .art-layout-cell {
        display: block !important;
        width: 100% !important;
    }

    .art-sidebar1 {
        width: 100% !important;
    }

}


/*
 * ==========================================================
 * B.LIFE - Artisteer Desktop-Positionen
 * ==========================================================
 *
 * Die beiden Header-Objekte waren urspruenglich relativ
 * zur 900px breiten Artisteer-Flaeche positioniert.
 */

@media (min-width: 901px) {

    /*
     * 3% von 900px = 27px
     * vorhandenes margin-left: -9px bleibt erhalten
     */
    .art-object48253857 {
        left: calc(50% - 450px + 27px) !important;
    }

    /*
     * 98.45% von 900px = ca. 886px
     * vorhandenes margin-left: -250px bleibt erhalten
     */
    .art-object394037702 {
        left: calc(50% - 450px + 886px) !important;
    }

    /*
     * Rechte Modulgruppe etwas tiefer beginnen lassen.
     */
    .art-sidebar1 {
        padding-top: 32px;
        box-sizing: border-box;
    }

}


/*
 * B.LIFE - aktiver erster Menuepunkt folgt
 * der Rundung der Navigation.
 */
.art-nav ul.art-hmenu > li:first-child > a.active,
.art-nav ul.art-hmenu > li:first-child > a[aria-current="page"],
.art-nav ul.art-hmenu > li:first-child.active > a,
.art-nav ul.art-hmenu > li:first-child.current > a {
    border-radius: 16px 0 0 0 !important;
    -webkit-border-radius: 16px 0 0 0 !important;
    -moz-border-radius: 16px 0 0 0 !important;
}


/*
 * B.LIFE - Rundung fuer jeden aktiven Menuepunkt
 */
.art-nav ul.art-hmenu > li > a.active,
.art-nav ul.art-hmenu > li > a[aria-current="page"],
.art-nav ul.art-hmenu > li.active > a,
.art-nav ul.art-hmenu > li.current > a {
    border-radius: 10px 10px 0 0 !important;
    -webkit-border-radius: 10px 10px 0 0 !important;
    -moz-border-radius: 10px 10px 0 0 !important;
}


/*
 * Erster Menuepunkt folgt zusaetzlich der
 * aeusseren Rundung des Navigationsbalkens.
 */
.art-nav ul.art-hmenu > li:first-child > a.active,
.art-nav ul.art-hmenu > li:first-child > a[aria-current="page"],
.art-nav ul.art-hmenu > li:first-child.active > a,
.art-nav ul.art-hmenu > li:first-child.current > a {
    border-radius: 16px 10px 0 0 !important;
    -webkit-border-radius: 16px 10px 0 0 !important;
    -moz-border-radius: 16px 10px 0 0 !important;
}


/*
 * ==========================================================
 * B.LIFE - finale Menue-Rundung
 * ==========================================================
 *
 * Nur der ERSTE Menuepunkt folgt permanent der linken
 * Rundung der Navigationsleiste.
 *
 * Aktive Menuepunkte selbst bleiben ansonsten eckig.
 */

/* Alle Menuepunkte grundsaetzlich eckig */
.art-nav ul.art-hmenu > li > a,
.art-nav ul.art-hmenu > li > a.active,
.art-nav ul.art-hmenu > li > a[aria-current="page"],
.art-nav ul.art-hmenu > li.active > a,
.art-nav ul.art-hmenu > li.current > a {
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
}


/* Nur der erste Eintrag ist IMMER links oben gerundet */
.art-nav ul.art-hmenu > li:first-child > a {
    border-radius: 16px 0 0 0 !important;
    -webkit-border-radius: 16px 0 0 0 !important;
    -moz-border-radius: 16px 0 0 0 !important;
}


/*
 * B.LIFE - Header-Hintergrund auch bei
 * Bildschirmbreiten > 1600px lueckenlos.
 */
@media (min-width: 1601px) {

    .art-header {
        background-size: 100% 250px !important;
    }

}


/*
 * B.LIFE - erster Menuepunkt:
 * links oben immer rund, rechts immer eckig,
 * auch wenn b.life aktiv ist.
 */
.art-nav ul.art-hmenu > li:first-child > a,
.art-nav ul.art-hmenu > li:first-child > a.active,
.art-nav ul.art-hmenu > li:first-child > a[aria-current="page"],
.art-nav ul.art-hmenu > li:first-child.active > a,
.art-nav ul.art-hmenu > li:first-child.current > a {
    border-top-left-radius: 16px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Falls Artisteer die aktive Flaeche ueber Pseudo-Elemente zeichnet */
.art-nav ul.art-hmenu > li:first-child > a::before,
.art-nav ul.art-hmenu > li:first-child > a::after,
.art-nav ul.art-hmenu > li:first-child > a.active::before,
.art-nav ul.art-hmenu > li:first-child > a.active::after {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}


/*
 * B.LIFE - blauer Seitenhintergrund
 * nicht mehr kacheln, sondern proportional fuellen.
 */
@media (min-width: 901px) {

    #art-main {
        background-image:
            url('../images/pageglare.webp'),
            url('../images/page.webp') !important;

        background-position:
            top center,
            center top !important;

        background-repeat:
            no-repeat,
            no-repeat !important;

        background-size:
            auto auto,
            cover !important;

        background-attachment:
            scroll,
            fixed !important;

        background-color: #F03356;
    }

}