* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
font-family: 'Ubuntu', sans-serif;
overflow: auto;
}
#bild1{
  width: 100%;
  position: relative;
  top:55px;
  z-index: -1;
} 
#bild2{
  grid-area: f;
}
#modell1{
  grid-area: c;
}
#modell2{
  grid-area: d;
}
#modell1 img{
  width: 100%;
}
#modell2 img{
  width: 100%;
}
#bild2 img {
  width: 300px;
}
p{
line-height: 1.5rem;
}
h2{
text-align: center;
}
h1{
font-size: 25px;
} 
#s1{
grid-area: a;
overflow: auto;
padding: 10px;
}
#s2{
grid-area: b;
margin: 10px;
}
#s3{
grid-area: e;
margin: 10px;
}
#s4{
  grid-area: g;
  margin: 10px;
}
#s5{
  grid-area: h;
  margin  : 10px;
}

body {
margin: 0;
overflow-x: hidden;
max-width: 100%;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 3;
}

.topnav {
overflow: hidden;
background-color: #333;
}

.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
height: 58px;
}

.topnav a:hover {
background-color: #ddd;
color: black;

}

.topnav a.active {
background-color: antiquewhite;
color: #333;
}

.topnav .icon {
display: none;
}

.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 48,
}
footer {
position: relative;
background-color: #333;
bottom: 0;
text-align: center;
font-size:x-large;
height: 20%;
width: 100%;
color: antiquewhite;
padding: 25px;
position:bottom;
top: 0;
z-index: -1;
}
#wrapper {
margin-bottom: 200px;
display: grid;
place-items: center;
gap: 1vh;
grid-template-columns: 1fr;
grid-template-rows: repeat(3,1fr);
grid-template-areas: "a"
                    "b"
                    "c"
                    "d"
                    "e"
                    "f"
                    "g"
                    "h";   
}

@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
  float: right;
  display: block;
}
}

@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
  position: absolute;
  right: 0;
  top: 0;
}
.topnav.responsive a {
  float: none;
  display: block;
  text-align: left;
}

}
/*Mobil*/
@media only screen and (min-width: 600px) {
  #bild2 img{
    width:75%;
    margin-left: 12,5%;
  }
  /*Tablet*/
}

@media only screen and (min-width: 769px) {
   /*Desktop*/
#bild2 img{
  width:50%;
  margin-left: 25%;
}
#modell1 img{
  width:400px;
}
#modell2 img{
  width: 400px;
}
#wrapper {
  /* top: -50px;
  position: relative; */
  display: grid;
  padding: 0;
  gap: 0px;
  height:auto;
  align-items: center;
  width: 100%;
  grid-template-columns: repeat(7,1fr);
  grid-template-rows: repeat(7,1fr);
  grid-template-areas: ". .  a a a . ."
                      ". . b b b . . "
                      ". . c . d . . "
                      ". . e e e . . "
                      ". . f f f . . "
                      ". . g g g . . "
                      ". . h h h . . ";   
} 
} 

.topnav a:first-child {
  background-color: #333;
  color: white;
}