@media (max-width:60rem) {
    body {
        display: grid;
        grid-template-columns: 1fr 4fr;
        grid-template-rows: 1fr auto 1fr;
        gap: 1rem;
    }

    header {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    aside {
        grid-column: 1;
        grid-row: 2;
    }

    aside.rechts {
        display: none;
    }

    main {
        grid-column: 2;
        grid-row: 2;
    }

    footer {
        grid-column: 1 / 3;
        grid-row: 3;
    }
}

@media (min-width:60rem) {
    body {
        display: grid;
        grid-template-columns: 1fr 3fr 1fr;
        grid-template-rows: 1fr auto 1fr;
        gap: 0.5rem;
    }

    header {
        grid-column: 1 / 4;
        grid-row: 1;
    }

    aside {
        grid-auto-flow: row;
    }

    aside.rechts {
        grid-column: 3;
        grid-row: 2;
    }

    main {
        grid-column: 2;
        grid-row: 2;
    }

    footer {
        grid-column: 1 / 4;
        grid-row: 3;
    }
}

body {
    background-color: gainsboro;
    font-family: Verdana, Arial, sans-serif;
}

footer,
header {
    background-color: lightgrey;
    clear: both;
    padding: 0.5rem;
    border-style: solid;
    border-radius: 1rem;
    border-width: 0px;
    position: relative;
    box-shadow: 0 0 5px lightgrey, 0 0 5px lightgrey;

}

aside,
aside.rechts {
    background-color: gainsboro;
    clear: both;
    padding: 0.5rem;
    border-style: solid;
    border-radius: 1rem;
    border-width: 0px;
    position: relative;
    box-shadow: 0 0 5px gainsboro, 0 0 5px gainsboro;
}

footer {
    display: grid;
    grid-auto-flow: column;
    padding-top: 0;
    padding-bottom: 0;
}

footer div {
    margin-top: auto;
    margin-bottom: auto;
}

img.logo_top_right {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    z-index: 10;
}

main {
    background-color: gainsboro;
    clear: both;
    padding: 0.5rem;
    border-style: solid;
    border-radius: 1rem;
    border-width: 0px;
    box-shadow: 0 0 5px gainsboro, 0 0 5px gainsboro;
}

a.modelle_link {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.2rem;
    text-decoration: none;
    font-weight: bold;
    color: blue;
    transition: ease-in-out;
    transition-duration: 0.3s;
}

a.modelle_link:hover {
    text-shadow: 0.1rem 0.1rem 0.2rem rgb(85, 133, 153);
    transition: ease-in-out;
    transition-duration: 0.3s;
}

a.carts_link {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.2rem;
    text-decoration: none;
    color: blue;
    transition: ease-in-out;
    transition-duration: 0.3s;
}

a.carts_link:hover {
    text-shadow: 0.1rem 0.1rem 0.2rem rgb(85, 133, 153);
    transition: ease-in-out;
    transition-duration: 0.3s;
}

a.impressum_link {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 0.8rem;
    text-decoration: none;
    color: navy;
    transition: ease-in-out;
    transition-duration: 0.3s;
}

a.impressum_link:hover {
    text-shadow: 0.1rem 0.1rem 0.2rem rgb(73, 91, 133);
    transition: ease-in-out;
    transition-duration: 0.3s;
}

a.rechts_link {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1rem;
    text-decoration: none;
    color: blue;
    transition: ease-in-out;
    transition-duration: 0.3s;
}

a.rechts_link:hover {
    text-shadow: 0.1rem 0.1rem 0.2rem rgb(73, 91, 133);
    transition: ease-in-out;
    transition-duration: 0.3s;
}

div.spalten_2_grau {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

div.spalten_2_grau div {
    background-color: whitesmoke;
    clear: both;
    border-style: solid;
    border-radius: 1rem;
    border-width: 0px;
    position: relative;
}

div.spalten_2_grau div.video {
    background-color: gainsboro;
    position: relative;
}

div.spalten_2_grau>div {
    box-shadow: 0 0 10px inset gainsboro;
}

div.spalten_2_grau div figure {
    margin: 1em;
    background-color: gainsboro;
    border-style: solid;
    border-radius: 1rem;
    border-width: 0px;
    position: relative;
    box-shadow: 0 0 0.4rem gainsboro, 0.2rem 0.2rem 0.4rem rgb(73, 91, 133);
    float: left;
}

div.spalten_2_grau div div {
    display: inline-block;
}

@media (min-width: 80rem) {
    a.modelle_link::before {
        content: url(../logo/logoneu_40x40.png);
        display: inline;
    }
}

@media (max-width: 80rem) {
    div.modelle_link {
        margin: 5px;
        background-color: rgb(230, 230, 230);
        clear: both;
        padding: 0.5rem;
        border-style: solid;
        border-radius: 1rem;
        border-width: 0px;
        box-shadow: 0px 0px 5px inset lightgrey;
    }
}

aside>div {
    position: sticky;
    top: 0;
    bottom: 0;
}

p.disclaimer {
    color: red;
    font-weight: bold;
}

div.videolink {
    background-color: whitesmoke;
    clear: both;
    border-style: solid;
    border-radius: 1rem;
    border-width: 0px;
    position: relative;
    padding: 1rem;
    box-shadow: 0 0 5px whitesmoke, 0 0 5px whitesmoke;
    margin-bottom: 1rem;
}

iframe.video {
    display: table;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    clear: both;
    border-radius: 15px;
    border-color: blue;
    border-width: 5px;
    border-style: solid;
    box-shadow: 3px 3px 15px rgb(93, 93, 93);
}

div.rechts_link {
    margin: 5px;
    background-color: rgb(230, 230, 230);
    clear: both;
    padding: 0.5rem;
    border-style: solid;
    border-radius: 1rem;
    border-width: 0px;
    box-shadow: 0px 0px 5px inset lightgrey;
}

figure.bild_dia>img {
    border-radius: 20px;
    border-color: grey;
    border-width: 7px;
    border-style: solid;
    box-shadow: 3px 3px 15px rgb(93, 93, 93);
}

a.intern {
    text-decoration: none;
    color: blue;
    transition: all ease 0.5s;
}

a.intern:hover {
    text-decoration: none;
    text-shadow: 0 0 0.2em rgb(35, 173, 0);
    transition: all ease 0.5s;
}

a.extern {
    text-decoration: none;
    color: blue;
    transition: all ease 0.5s;
}

a.extern:hover {
    text-decoration: none;
    text-shadow: 0 0 0.2em rgb(255, 149, 28);
    transition: all ease 0.5s;
}

a.extern_YT {
    font-size: small;
    text-decoration: none;
    color: blue;
    transition: all ease 0.5s;
}

a.extern_YT:hover {
    text-decoration: none;
    text-shadow: 0 0 0.2em rgb(255, 149, 28);
    transition: all ease 0.5s;
}


a.intern::before {
    text-decoration: none;
    font-weight: bold;
    color: green;
    content: '↘';
    transition: all ease 0.5s;
}

a.intern:hover::before {
    text-decoration: none;
    text-shadow: 0 0 0.1em darkgreen, 0 0 0.2em rgb(110, 206, 1), 0 0 0.4em rgb(186, 206, 1);
    transition: all ease 0.5s;
    content: '↘';
}

a.extern::before {
    text-decoration: none;
    font-weight: bold;
    color: blue;
    content: '↗';
    transition: all ease 0.5s;
}

a.extern:hover::before {
    text-decoration: none;
    text-shadow: 0 0 0.1em navy, 0 0 0.2em rgb(206, 59, 1), 0 0 0.4em rgb(206, 59, 1);
    transition: all ease 0.5s;
    content: '↗';
}

a.extern_YT::before {
    text-decoration: none;
    font-weight: bold;
    color: blue;
    content: '↗';
    transition: all ease 0.5s;
}

a.extern_YT:hover::before {
    text-decoration: none;
    text-shadow: 0 0 0.1em navy, 0 0 0.2em rgb(206, 59, 1), 0 0 0.4em rgb(206, 59, 1);
    transition: all ease 0.5s;
    content: '↗';
}

div.SAFE_Hinweis {
    padding: 0 0.5em 0.2em 0.5em;
    border-style: solid;
    border-color: blue;
    border-width: 0 2px 0 2px;
    margin-bottom: 1em;
    margin-top: 1em;
}

div.SAFE_Hinweis p:first-of-type {
    margin-top: 0.5em;
}

div.SAFE_Hinweis::before {
    content: "HINWEIS!\A";
    background-color: blue;
    padding: 0.3em;
    font-weight: bold;
    color: white;
}

div.SAFE_Notice {
    padding: 0 0.5em 0.2em 0.5em;
    border-style: solid;
    border-color: blue;
    border-width: 0 2px 0 2px;
    margin-bottom: 1em;
    margin-top: 1em;
}

div.SAFE_Notice p:first-of-type {
    margin-top: 0.5em;
}

div.SAFE_Notice::before {
    content: "NOTICE!\A";
    background-color: blue;
    padding: 0.3em;
    font-weight: bold;
    color: white;
}

ul.linkliste li {
	margin: 17px 5px;
}

ul.linkliste a {
    text-decoration: none;
	border-color: blue;
	background-color: lightgrey;
	border-style: solid;
	border-width: 2px;
	border-radius: 10px;
	padding: 3px 5px;
	color: blue;
	font-weight: bold;
	transition: all ease 0.5s;
}

ul.linkliste a:hover {
	border-color: limegreen;
	background-color: lightsteelblue;
	color: darkgreen;
	font-weight: bold;
    text-shadow: 0.1rem 0.1rem 0.2rem rgb(35, 173, 50);
    transition: ease-in-out;
    transition-duration: 0.3s;
}