@charset "utf-8";
/****************************************
 *   Styling des Vorbereitung-Abschnitts   *
 ***************************************/
article#route{
    /*padding-top: 30px;*/
    display: grid;
    grid-template-areas:
            "überschrift"
            "text"
            "map1"
            "route1"
            "map2"
            "route2";
    grid-template-rows: min-content;
    grid-auto-rows: min-content;
}
#route h2{
    grid-area: überschrift;
    grid-column: 1 / -1; /* Nimm die ganze Zeile */
}
#route a{
    margin: 10px auto;
    width: 75%;
}
#route a:hover{
    transition: transform 0.8s;
    transform: scale(1.1, 1.1);
}
#route a#map_before_link{
    grid-area: map1;
}
#route a#map_after_link{
    grid-area: map2;
}
#route h4{
    text-align: center;
    border: 5px solid aliceblue;
    margin: 50px auto;
    padding: 10px 20px;
    color: gray;
}
#route h4.route-before{
    grid-area: route1;
}
#route h4.route-after{
    grid-area: route2;
}
#route p.routentext{
    grid-area: text;
    background-color: aliceblue;
    font-size: 15px;
    padding: 30px;
    width: 100%;
    /*margin-top: 50px;*/
    margin: 50px 0;
    text-align: center;
}

/* S (Tablet Quer, Netbooks, kleine Laptops) */
@media (min-width: 30.06em) {
    article#route {
        margin: 50px auto;
    }
    #route p.routentext {
        font-size: 20px;
    }
}
/*M (Tablet Quer, Netbooks, kleine Laptops):*/
@media (min-width: 50.01em) {
    article#route {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
                "überschrift überschrift"
                "map1 map2"
                "route1 route2"
                "text text";
    }
    #route p.routentext {
        padding: 50px 20%;
        margin-top: 0;
    }
}
/*L (Laptops und kleine Desktops):*/
@media (min-width: 64em) {
    #route a{
        margin: auto;
    }
}