/*#region SWIPER*/
.partner-carousel-section {
    padding: 4rem 0;
    perspective: 1500px;
    min-height: 700px;
}

.swiper {
    width: 100%;
    max-width: 900px;
    height: 300px;
}

.swiper-slide {
    background: rgb(0, 0, 0);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border-radius: 12px;
    transition: transform 0.4s ease, opacity 0.4s ease;
    transform: scale(0.8);
    opacity: 0.6;
    align-content: center;
    padding: 1rem;
}

.swiper-slide-active {
    transform: scale(1);
    opacity: 1;
    z-index: 2;
}

.collapsed {
    animation: collapse 0.25s linear;
}

.hidden {
    opacity: 0;
}

.expanded {
    flex: 0 0 750px;
    position: absolute;
    left: -13rem;
    opacity: 1;
    animation: expand 0.25s linear;
    transform-origin: center;
}

.expanded, .swiper-slide-active {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); /* shadow around the element */
    /*background: linear-gradient(#0a8cb4, #00546e, #003747);*/ /* optional: make shadow visible */
    background: linear-gradient(#0a8cb4, #003747, #00212a);
}

    .expanded .details-text {
        animation: fadeIn 0.25s linear forwards;
        animation-delay: 0.25s;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes expand {
    from {
        left: 0.5rem;
        flex: 0 0 400px;
    }

    to {
        flex: 0 0 700px;
    }
}
/*#endregion*/

/*#region CARD COLLAPSED STATE*/
.card-text h3,
.card-text h4,
.card-text p {
    margin: 0;
    color: white;
    line-height: 1.2;
}

.content-collapsed .avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
}
/*#endregion*/

/*#region EXPANDED STATE BOTH SIDES*/
.content-expanded {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    font-family: Arial, sans-serif;
}

.content-expanded-header{
    margin: 15px 0 0 0;
}
.content-expanded-body {
    margin: 5px 0 0 0;
    flex: 1;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
/*#endregion*/

/*#region EXPANDED STATE HEADER*/
.content-expanded-header {
    flex: 0 0 33%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: sticky;
}

    .content-expanded-header img.image-partner-expanded {
        width: 100%;
        height: auto;
        max-width: 200px;
        border-radius: 10px;
    }

.partner-expanded-heading {
    text-align: center;
}

/*#endregion*/

/*#region EXPANDED STATE BODY FRONTSIDE*/
.details-text {
    margin-bottom: 20px;
    opacity:0;
}
/*#endregion*/

/*#region EXPANDED STATE BODY BACKSIDE*/
.skills {
    gap: 0.5rem;
    width: 100%;
    display: flex;
    flex-direction: column;
}
/*#endregion*/

/*#region FLIP EFFECT*/
.content {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    backface-visibility:hidden;
}

.flipped{
    transform: rotateY(180deg);
}

.front,
.back {
    position: absolute; /* stack them */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backface-visibility: hidden; /* hide flipped side */
    text-align:justify;
    margin:10px;
}

.back {
    transform: rotateY(180deg);
}

/*#endregion*/

/*#region CLICKABLE ICONS*/
.flipIcon {
    background-image: url('/images/flip.svg');
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: 90%;
    top: 5%;
    width: 2.5rem;
    height: 2.5rem;
}

.viewInfo {
    background-image: url('/images/info.svg');
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: 83%;
    top: 5%;
    height: 2.5rem;
    width: 2.5rem;
}

    .viewInfo:hover, .flipIcon:hover {
        cursor: pointer;
    }

/*#endregion*/

/*#region RESPONSIVE DESIGN*/
/*Mobile Geräte in Hochformat*/
@media (max-width: 800px) and (orientation:portrait) {
    .viewInfo {
        display: none;
    }

    .details-text{
        opacity:1;
    }
   
    .flipIcon{
        display:block!important;
        margin-left:-2rem;
        margin-top:0.5rem;
        pointer-events:all;
    }

    .content-expanded {
        pointer-events: none;
        display: flex !important;
        flex-direction: column !important;
        gap: 0;
        height: auto;
    }

    .content-expanded-header {
        flex: 0 0 auto;
        padding: 0px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .content-expanded-body {
        margin-top: 0;
        flex: 1 1 auto; 
        padding: 20px;
        box-sizing: border-box;
        overflow-y: scroll;
        display: flex;
        flex-direction: column;
        pointer-events: all;
    }

    .content {
        position: relative;
        width: 100%;
        min-height: 200px; 
        transition: transform 0.6s;
        transform-style: preserve-3d;
    }

    .front,
    .back {
        position: absolute;
        inset: 0;
        backface-visibility: hidden;
        padding: 10px;  
        text-align:left;
    }

    .content-collapsed{
        display:none!important;
    }

    .swiper {
        height: auto;
        overflow: visible;
    }

    .image-partner-expanded {
        width: 20px;
        height:20px;
        border-radius: 10px;
        margin-bottom: 20px;
    }
}

/*`Prüfen wieviel ovn der media überhaupt noch gebraucht wird. War usprünglich für Handys
    Triggert jetzt nurnoch für die kleinsten mobilen Geräte.*/
@media (max-width:700px) and (orientation:landscape){
    .viewInfo {
        display: none;
    }

    .details-text {
        opacity: 1;
    }

    .flipIcon {
        display: block !important;
        margin-left: -2rem;
        margin-top: 0.5rem;
        pointer-events: all;
    }

    .content-expanded {
        pointer-events: none;
        display: flex !important;
        flex-direction: column !important;
        gap: 0;
        height: auto;
    }

    .content-expanded-header {
        flex: 0 0 auto; /* only as tall as content */
        padding: 0px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .content-expanded-body {
        margin-top: 0;
        flex: 1 1 auto; /* can grow, can shrink */
        padding: 20px;
        box-sizing: border-box;
        overflow-y: scroll; /* remove scroll unless you want internal scrolling */
        display: flex;
        flex-direction: column;
        pointer-events: all;
    }

    .content {
        position: relative;
        width: 100%;
        min-height: 200px; /* ensures space, tweak as needed */
        transition: transform 0.6s;
        transform-style: preserve-3d;
    }

    .front,
    .back {
        position: absolute;
        inset: 0; /* shorthand for top:0; right:0; bottom:0; left:0 */
        backface-visibility: hidden;
        padding: 10px; /* replace margin to avoid layout issues */
        text-align: left;
    }

    .content-collapsed {
        display: none !important;
    }

    .swiper {
        height: auto;
        overflow: visible;
    }

    .image-partner-expanded {
        width: 20px;
        height: 20px;
        border-radius: 10px;
        margin-bottom: 20px;
    }
}

/*Targets Tablet in portrait and medium to large phones in landscape mode*/
@media (max-width:1000px) {
    .expanded {
        flex: 0 0 650px;
        padding:0;
    }

    .swiper-slide {
        padding-right:1rem;
        padding-top:1.5rem;
    }

    .content-expanded-body {
        margin: 0 0 0 0;
        padding-left:0;
        padding-right:2rem;
        overflow:hidden;
    }

    .skills{
        margin-left:1.5rem;
    }

    .content-expanded-header {
        padding-right: 0;
        padding-left: 15px;
        flex: 0 0 20%;
    }

    .front{
        overflow-y:scroll;
    }
}

/*//TODO: Properly Fix this. For now we have to keep this to override the expanded style, otherwise on big phones expanding a card in landscape mode leads to a buggy portrait mode when switched 
    with the card being expanded.
    Additionally this targets very small devices in landscape mode to again effectively take away the expanded class.
*/
@media (max-width:600px) and (orientation:portrait), (max-width:700px) and (orientation:landscape) {
    .expanded {
        flex: initial; /* resets flex */
        position: static; /* remove absolute positioning */
        left: auto; /* resets left */
        opacity: 1; /* or whatever default you want */
        animation: none; /* disables animation */
        transform-origin: initial; /* reset transform origin */
    }

    /*Für sehr kleine Handys*/
    @media (max-width:380px){
        .flipIcon {
            position: absolute;
            left: 97%;
            top: 5%;
            width: 2.5rem;
            height: 2.5rem;
        }
    }
/*#endregion*/