.article_wrapper_aussen {
    background-color: rgb(255, 255, 255);
    display:flex;
    justify-content: center;
    padding-top: 25px;
}

/* Zweispalten-Layout */
.article_wrapper_innen_2 {
    
    display: grid;
    grid-template-columns: 600px 600px;
    column-gap: 50px;
    
    & .article {
        margin:25px;
        padding:10px;
        border-radius: 10px;
        display: grid;
        grid-template-columns: 60px 1fr;
        transition: background-color 1s ease, transform 1s ease, box-shadow 1s ease;

        &:hover {
            box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
            background: rgb(250, 250, 250);
            transform: scale(1.01); /* Leichter Vergrößerungseffekt */
        }

        & h2 {
            font-size: 20px;
            margin:0;
        }

        & .article_img img{
            height: 40px;
        }
    }

    & .p_link {
        font-size: 20px;
        font-weight: bolder;
    }
}

/* Dreispalten-Layout */
.article_wrapper_innen_3 {
    
    display: grid;
    grid-template-columns: 400px 400px 400px;
    column-gap: 50px;
    
    & .article {
        margin:25px;
        padding:10px;
        border-radius: 10px;
        display: grid;
        grid-template-rows:  auto 1fr;
        transition: background-color 1s ease, transform 1s ease, box-shadow 1s ease;
        

        &:hover {
            box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
            background: rgb(250, 250, 250);
            transform: scale(1.01); /* Leichter Vergrößerungseffekt */
        }

        & h2 {
            font-size: 20px;
            margin:0;
        }

        .article_img1 {
            display: block;
            height: 150px;
            margin-bottom:20px;
            background-image: url("../img/Fahrschule-Raiffeisenstrasse.jpg");
            border-radius: 5px;
            background-position: center;
            background-size: cover;
        }

        .article_img2 {
            display: block;
            height: 150px;
            margin-bottom:20px;
            background-image: url("../img/Fahrschule-Karnacksweg.jpg");
            border-radius: 5px;
            background-position: center;
            background-size: cover;
        }

        .article_img3 {
            display: block;
            height: 150px;
            margin-bottom:20px;
            background-image: url("../img/Fahrschule-Suemmern.jpg");
            border-radius: 5px;
            background-position: center;
            background-size: cover;
        }

        .article_img img {
            display: block;
            width: 100%;
            height: auto; /* Damit das Bild nicht verzerrt wird */
            border-radius: 5px;
        }

        .article_content {
            min-height: 150px; /* Sicherstellen, dass genug Platz ist */
            overflow: hidden;  /* Falls nötig, um Überlauf zu verhindern */
        }
    }

    & .p_link {
        font-size: 20px;
        font-weight: bolder;
    }
}

.infobox{
    margin-bottom: 20px;
    background-color: rgba(100,100,100,0.1);
    border-radius: 5px;
    padding:10px;
}

/* Mediaquerys */
@media screen and (max-width:1300px) {
	
	.article_wrapper_innen_2 {
		grid-template-columns: 1000px ;
	}

    .article_wrapper_innen_3 {
        grid-template-columns: 100%;
        
        & .article {
            grid-template-columns: 150px 1fr;
            gap: 25px;
        }
    }

}

@media screen and (max-width:1000px) {
	
	.article_wrapper_innen_2, .article_wrapper_innen_3 {
		grid-template-columns: 100%;
	}
    
}

@media screen and (max-width:650px) {
	
	.article_wrapper_innen_2 {
        font-size: 16px;

        & h2 {
            font-size: 16px !important; 
        }

        & .p_link {
            font-size: 16px !important;
        }

        & .article {
            margin:10px;
            grid-template-rows: 40px 1fr;

        }
	}

    .article_wrapper_innen_3 {
        & .article {
            margin:10px;
            grid-template-columns:  150px 1fr;
        }
    }
}

/* 100% der Site (ein Artikel pro Zeile) */
.article_wrapper_aussen_100 {
    background-color: rgba(240, 248, 255, 0.85);
    display:flex;
    justify-content: center;
    padding: 0px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin: 0;

    & h2 {
        font-size: 20px;
        margin:0;
    }

    & .article_100 {
        max-width: 1250px;
        width: 100%;
        box-sizing: border-box;
        padding:25px;
        border-radius: 10px;
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap:50px;
        box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
        background: rgb(250, 250, 250);

        & .article_img{
            border-radius: 5px;
            background-image: url("../img/leitbild.jpg");
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }        
    }
}

/* Mediaquerys 100 */

@media screen and (max-width:1100px) { 
    
    .article_wrapper_aussen_100 {
        & .article_100 {
            grid-template-columns: none; 
            grid-template-rows: 150px 1fr;
            font-size: clamp(1em, 2vw, 10em);
        }

        & .article_img {
            height:150px;
            border-radius: 10px;
            background-image: url("../img/motorrad_2.jpg");
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
    }
}

@media screen and (max-width:650px) { 
    
    .article_wrapper_aussen_100 {
        
        padding: 30px 15px;

        & .article_100 {
            padding: 25px 20px;
        }

        & .article_img {
            height:150px;
            border-radius: 10px;
        }
    }
}