/*
 * MicroArtwork – Custom CSS
 * Joomla 5
 * Welcome-Seite und MainHeader
 */


/* =========================================
   1. Allgemeine Beitragsdarstellung
   ========================================= */

.com-content-article {
    min-width: 0;
}

.com-content-article img {
    max-width: 100%;
    height: auto;
}

.com-content-article td img {
    max-width: 100%;
    height: auto;
}


/* =========================================
   2. Welcome – Bildgrößen
   ========================================= */

.com-content-article img {
    width: auto !important;
    max-width: min(100%, 650px) !important;
    height: auto !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/* =========================================
   3. MainHeader – Modul 252
   ========================================= */

/* Gesamter Headerbereich */

.ma-top-content:has(#__pf_jn7ewl) {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0;
}

/* PageFly-Container */

#__pf_jn7ewl,
#__pf_jn7ewl ._DblQBlAM__container {
    width: 100%;
    max-width: 100%;
}

/* Vier gleich breite Spalten */

#__pf_jn7ewl .pb-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 !important;
    align-items: center;
}

/* Spalten mit 15 px Innenabstand */

#__pf_jn7ewl .grid__column {
    min-width: 0;
    box-sizing: border-box;
    padding: 15px !important;
}

/* Links und Picture-Elemente */

#__pf_jn7ewl .grid__column a,
#__pf_jn7ewl .grid__column picture {
    display: block;
    width: 100%;
}

/* Headerbilder */

#__pf_jn7ewl .grid__column img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
}


/* =========================================
   4. Responsive MainHeader
   ========================================= */

/* Tablets – zwei Spalten */

@media (max-width: 900px) {
    #__pf_jn7ewl .pb-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Smartphones – eine Spalte */

@media (max-width: 480px) {
    #__pf_jn7ewl .pb-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================
   MicroArtwork – Homepage Slide, Modul 204
   ========================================= */

#__pf_5anoqs ._znPBC6eJ {
    min-height: 570px !important;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#__pf_5anoqs .pb-grid {
    display: flex;
    justify-content: center;
    width: 100%;
}

#__pf_5anoqs .grid__column {
    width: 100%;
    max-width: 700px;
    padding: 15px;
}

#__pf_5anoqs h3 {
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    text-shadow: 1px 2px 3px #000;
}

#__pf_5anoqs p {
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    text-shadow: 1px 2px 3px #000;
}

#__pf_5anoqs .btn {
    display: inline-block;
    background: #00a0ff;
    color: #ffffff;
    padding: 15px 30px;
    text-decoration: none;
    margin-top: 20px;
}

@media (max-width: 600px) {
    #__pf_5anoqs ._znPBC6eJ {
        min-height: 360px !important;
    }

    #__pf_5anoqs h3 {
        font-size: 22px;
    }
}

/* MicroArtwork – Homepage Slide Hintergrund */

.ma-promo {
    padding: 0;
}

.ma-promo .ma-wrap {
    max-width: none;
    width: 100%;
    padding: 0;
}

#__pf_5anoqs ._znPBC6eJ {
    background-image:
        url("/images/headers/HeaderMADark.png") !important;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 570px !important;
}


/* =========================================
   MicroArtwork – Hauptnavigation
   ========================================= */

.ma-nav .ma-nav-links ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ma-nav .ma-nav-links li {
    margin: 0;
    padding: 0;
}

.ma-nav .ma-nav-links a {
    display: block;
    padding: 12px 0;
    color: #394A5C;
    font-weight: 500;
    text-decoration: none;
}

.ma-nav .ma-nav-links a:hover,
.ma-nav .ma-nav-links .current > a,
.ma-nav .ma-nav-links .active > a {
    color: #00A0FF;
}


/* =========================================
   MicroArtwork – Original-Logo
   ========================================= */

.ma-header .ma-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ma-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.ma-brand img {
    display: block;
    width: auto;
    max-width: min(100%, 280px);
    max-height: 75px;
    height: auto;
}

@media (max-width: 600px) {
    .ma-brand img {
        max-width: 200px;
    }
}


/* =========================================
   MicroArtwork – Übergang Slide / MainHeader
   ========================================= */

/* Keine zusätzlichen Abstände um die Slideshow */
.ma-promo,
.ma-promo .ma-wrap {
    margin: 0 !important;
    padding: 0 !important;
}

/* Keine Abstände unter dem PageFly-Slide */
#__pf_5anoqs,
#__pf_5anoqs ._znPBC6eJ {
    margin-bottom: 0 !important;
}

/* MainHeader unmittelbar anschließen */
.ma-top-content:has(#__pf_jn7ewl) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Eventuelle Standardabstände der Modulcontainer */
.ma-promo .moduletable,
.ma-top-content .moduletable {
    margin-top: 0;
    margin-bottom: 0;
}


/* =========================================
   MicroArtwork – Abstand Slide / MainHeader
   ========================================= */

/* Hintergrund und Abstände des Slide-Containers */
.ma-promo {
    background: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ma-promo .ma-wrap {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* MainHeader direkt unter der Slideshow */
.ma-top-content:has(#__pf_jn7ewl) {
    background: #ffffff !important;
    margin-top: 0 !important;
    padding-top: 15px !important;
    padding-bottom: 0 !important;
}

/* PageFly-Container ohne zusätzlichen Außenabstand */
#__pf_jn7ewl,
#__pf_jn7ewl ._prKkh4mP {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* MicroArtwork – MainHeader Abstand korrigieren */

.ma-top-content:has(#__pf_jn7ewl) {
    padding-top: 0 !important;
}

#__pf_jn7ewl ._prKkh4mP,
#__pf_jn7ewl ._DblQBlAM__container,
#__pf_jn7ewl .pb-grid {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* MicroArtwork – leeren PageFly-Container entfernen */

#__pf_5anoqs + [data-type="pagefly-styles"] {
    display: none !important;
}

/* Sicherheitshalber auch innerhalb des Slide-Moduls */
.ma-promo [data-type="pagefly-styles"] {
    display: none !important;
}



/* MicroArtwork – MainHeader Abstand feinjustieren */

#__pf_jn7ewl ._DblQBlAM__filter {
    display: block !important;
    height: 12px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}