/* ==========================================
modul-typ-id: 11
Modultyp: Akkordeon
========================================== */

.lc-m11-akkordeon {
    width: 100%;
}

.lc-m11-akkordeon-bereich {
    margin-bottom: 5px;
    background: #e2e2e2;
    
    transition: all 0.2s ease;

    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.lc-m11-akkordeon-titel {
    position: relative;

    padding: 12px 45px 12px 15px;

    font-weight: 700;
    text-align: center;

    cursor: pointer;
    list-style: none;
}

/* Standardsymbol des Browsers ausblenden */

.lc-m11-akkordeon-titel::-webkit-details-marker {
    display: none;
}

.lc-m11-akkordeon-titel::after {
    content: "▼";

    position: absolute;
    right: 15px;
    top: 50%;

    transform: translateY(-50%);
    transition: transform 0.25s ease;
}

.lc-m11-akkordeon-bereich[open]
.lc-m11-akkordeon-titel::after {
    transform:
        translateY(-50%)
        rotate(180deg);
}

.lc-m11-akkordeon-inhalt {
    /*border: 1px solid grey;*/
    transition: all 0.2s ease;

    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    
    padding: 20px;
    
    background: #fff;

    display: flex;
    flex-direction: column;
    gap: calc( 0.25 * var(--lc-basis-gap));

    

}

.lc-m11-akkordeon-element {
    display:flex;
    
    
    justify-content:flex-start;
    
    gap: var(--lc-basis-gap);

    background: #e2e2e2;
    padding: 15px;


}



.lc-m11-akkordeon-bild {
    flex: 0 0 90px;
    display: flex;
    justify-content: start; 

}

.lc-m11-akkordeon-bild img {
    
    width: 90px;
    height: 90px;

    border-radius: 50%;
    object-fit: cover;
}

.lc-m11-akkordeon-bild:has(img:not([src])),
.lc-m11-akkordeon-bild:has(img[src=""]),
.lc-m11-akkordeon-bild:has(img[src=" "]) {
    display: none;
}

.lc-m11-akkordeon-text > :first-child {
    margin-top:0;
    flex:1;
    align-items: flex-start;

}


/* Gesamtes Element ausblenden, wenn kein Text vorhanden ist */
.lc-m11-akkordeon-element:has(.lc-m11-akkordeon-text div:empty) {
    display: none;
}




@media (max-width: 768px) and (orientation: portrait), (orientation: landscape) and (max-height: 600px){

.lc-m11-akkordeon-element {
    display:flex;
    
    
    justify-content:flex-start;
    
    gap: calc(0.5*var(--lc-basis-gap));

    background: #e2e2e2;
    padding: 15px;


}
}