/* Created by Content Blocks */
.card {
	position: relative;
	display: flex;
	flex-direction: row;
    align-items: center;
	word-wrap: break-word;
	background-clip: border-box;
	border: none !important;
    box-shadow:none;
    border-radius:0px !important; 
    transition: all 250ms;
    top: 0; 
    background-size:100% 100%;
    background-repeat:no-repeat;
    gap:50px; 
}

.card.card-left {
    padding:30px 30px 30px 0px; 
}

.card.card-right {
     padding:30px 0px 30px 30px; 
     background-size:calc(100% - 30px) 100%;
}

.card-left.card-bg-1 {
 background-image: linear-gradient(90deg, #fff 30px, var(--clr-bg-green-1) 30px, var(--clr-bg-green-1));
}

.card-left.card-bg-2 {
 background-image: linear-gradient(90deg, #fff 30px, var(--clr-bg-green-2) 30px, var(--clr-bg-green-2));
}

.card-left.card-bg-3 {
 background-image: linear-gradient(90deg, #fff 30px, var(--clr-bg-green-3) 30px, var(--clr-bg-green-3));
}

.card-left.card-bg-4 {
 background-image: linear-gradient(90deg, #fff 30px, var(--clr-bg-green-4) 30px, var(--clr-bg-green-4));
}

.card-left.card-bg-5 {
 background-image: linear-gradient(90deg, #fff 30px, var(--clr-bg-green-5) 30px, var(--clr-bg-green-5));
}

.card-left.card-bg-6 {
 background-image: linear-gradient(90deg, #fff 30px, var(--clr-bg-blue-2) 30px, var(--clr-bg-blue-2));
}

.card-left.card-bg-7 {
 background-image: linear-gradient(90deg, #fff 30px, var(--clr-bg-blue-3) 30px, var(--clr-bg-blue-3));
}


.card-right.card-bg-1 {
 background-image: linear-gradient(var(--clr-bg-green-1));
}

.card-right.card-bg-2 {
 background-image: linear-gradient(var(--clr-bg-green-2));
}

.card-right.card-bg-3 {
 background-image: linear-gradient(var(--clr-bg-green-3));
}

.card-right.card-bg-4 {
 background-image: linear-gradient(var(--clr-bg-green-4));
}

.card-right.card-bg-5 {
 background-image: linear-gradient(var(--clr-bg-blue-1));
}

.card-right.card-bg-6 {
 background-image: linear-gradient(var(--clr-bg-blue-2));
}

.card-right.card-bg-7 {
 background-image: linear-gradient(var(--clr-bg-blue-3));
}


.card-img {
    aspect-ratio:1/1;
    max-width:400px; 
    border-radius:0px !important; 
    flex:1 1 35%;
}

.card-img img {
    max-width:100%;
    height:auto;
    object-fit:cover; 
}

.card-body {
    max-width:600px;
    flex:1 1 65%; 
}

.card-left .card-img,
.card-left .card-body {
    margin-right: auto;
    margin-left: 0;
}

.card-right .card-img,
.card-right .card-body {
    margin-left: auto;
    margin-right: 0;
}

h3.card-title {
    font-family:var(--ff-sec);
	font-size: 40px;
	font-weight: 700;
	color: var(--clr-prim);
	margin-bottom: 25px;
	line-height: 120%;
}

.font-blue h3.card-title {
	color: var(--clr-ter);
}


.card p {
    line-height:150%; 
    margin-bottom:8px;
}

.card a {
    text-decoration:none !important;
    display:block;
    height:100%;
}

.card p:last-of-type {
    margin-bottom:0px !important; 
}




/* Home Aktuell Card */
.card.aktuell-card {
    flex-direction: column;
    gap:10px;
}
.card-img-top {
    border-radius:0px !important; 
}

.card-img-top img {
    width:100%; 
}

.card.aktuell-card h4 {
   color:var(--clr-prim) !important;
   font-family:var(--ff-sec);
   font-size:22px; 
}

.card.aktuell-card .card-body {
    padding:25px; 
}





/* Media Queries */
@media screen and (max-width: 1640px) { 

    h3.card-title {
        font-size: 38px;
    }
}

@media screen and (max-width: 1080px) { 

    h3.card-title {
        font-size: 33px;
    }
}



@media screen and (max-width: 860px) { 
    .card {
        flex-direction: column;
        gap: 20px;
        margin-bottom:60px !important;
        overflow:hidden; 
    }

    .card.card-left {
        flex-direction: column-reverse;
    }

    .card-right.card-bg-1,
    .card-left.card-bg-1 {
        background-image: linear-gradient(360deg, #fff 100px, var(--clr-bg-green-1) 100px, var(--clr-bg-green-1));
    }

    .card-right.card-bg-2,
    .card-left.card-bg-2 {
    background-image: linear-gradient(360deg, #fff 100px, var(--clr-bg-green-2) 100px, var(--clr-bg-green-2));
    }

    .card-right.card-bg-3,
    .card-left.card-bg-3 {
    background-image: linear-gradient(360deg, #fff 100px, var(--clr-bg-green-3) 100px, var(--clr-bg-green-3));
    }

    .card-right.card-bg-4,
    .card-left.card-bg-4 {
    background-image: linear-gradient(360deg, #fff 100px, var(--clr-bg-green-4) 100px, var(--clr-bg-green-4));
    }

    .card-right.card-bg-7,
    .card-left.card-bg-7 {
    background-image: linear-gradient(360deg, #fff 100px, var(--clr-bg-blue-3) 100px, var(--clr-bg-blue-3));
    }

    .card-left .card-img,
    .card-right .card-img {
        margin-left: initial;
        margin-right:initial;
        margin: 0  auto;
    }

    .card-img {
        aspect-ratio: 16/8;
        max-width:80%;
        border-radius: 0px !important;
        flex: 1 1 100%;
    }

    .card.card-left,
    .card.card-right {
        padding: 30px;;
        background-size:100%;
    }
   
    .card-img img {
        max-width:100%;
        height:auto;
        object-fit:cover; 
        object-position: center;
    }

    .card-body {
        max-width:100%;
        flex:1 1 100%; 
        padding:0 !important;
    }
}


@media screen and (max-width: 767.5px) { 
  
    .card.card-left, .card.card-right {
        padding: 20px;
    }
  
    .card-img {
        aspect-ratio: 16/9;
        max-width:88%;
        border-radius: 0px !important;
        flex: 1 1 100%;
    }

    h3.card-title {
        font-size: 31px;
    }

}


@media screen and (max-width: 575.5px) { 
     .card-img {
        max-width:92%;
    }

    .card p {
        line-height:140%; 
    }

    h3.card-title {
        font-size: 27px;
        line-height:130%;
        margin-bottom: 20px;
    }

}




@media screen and (max-width: 480px) { 
  
     .card-img {
        aspect-ratio: 16/10;
        max-width:95%;
    }
  
    h3.card-title {
        font-size: 24px;
        margin-bottom: 18px;
    }

}