/* Elemente */
body{
    max-width: 1100px;
    height:auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    color:antiquewhite;
    background-color:rgb(36, 28, 7);
}
h1{
    font-size: 2rem;
    line-height: 2.5rem;
}
h2{
    font-size: 1.5rem;
    line-height: 2rem;
    padding-top:10px;
}
h3{
    color:rgb(177, 170, 72);
    font-weight:bold;
    padding-top:10px;
}
img{
    width: 100%;
}
.img-small{
    width:90%;
    height:auto;
}
ul{
    list-style-type: none;
}
section a{
    text-decoration:none;
    color:antiquewhite;
    background-color:transparent;
}
section a:hover{
    color:rgb(200, 223, 97);
}


/* Klassen */
.wrap{
    width:100%;
    height:auto;
    padding:20px;
}
.container{
    width: 100%;   
    height:auto;
}
.container a{
    text-decoration: none;
    font-size: 1.2rem;
    line-height: 2rem;  
    color:#fff;
    background-color: blue;
    padding: 10px;
    margin: 0 5px;
}
.container ul{
    list-style-type: none;
    display:flex;
    
}   

.container a:hover{
    color:blue;
    background-color:#fff;
}
.container a:visited{
    color:rgb(179, 181, 182);
}

.txt-cont{
    width: 95%;   
    height:auto;
    margin-left: 2%;
    margin-right:2%;
    position:relative;
}
.txt-cont .zentriert
{
    margin-left:35%;
    color: #ff661a;
    font-size:1.1rem;
    position:relative;
}
.txt-cont a{
    font-size: 1rem;
    line-height: 1rem;
    text-decoration:none;
    color:aqua;
    background-color:transparent;
}
.txt-cont a:hover{
    background-color:#ffffff;
    color:#000000;
}

.txt-cont ul{
    list-style-type: circle;
}
.txt-cont p{
    margin-top: 1rem;
}
.txt-cont .grid{
    grid-template-columns: 1 fr;
    grid-template-rows: 1;
    display:grid;
    width: 100%;
}
.flex{
    display:flex;
    justify-content: center;
    align-items: center;
    gap:20px;
    width:100%;
}
.header{
    width: 100%;
    height:auto;
    margin: auto 0;
}
.header a{
    text-decoration:none;
    background-color: transparent;
}
/* Navigation */
.navbar{
    display:flex;
    width: 100%;
    height: 60px;
    margin: 0 auto;
}
.navbar .flex{
    justify-content: center;
    justify-items: space-between;
}
.navbar ul{
    display:flex;
    list-style-type: none;
}
.navbar a{
    text-decoration: none;
    font-size: 1.2rem;
    line-height: 2rem;  
    color:#fff;
    background-color: blue;
    padding: 10px;
    margin: 0 5px;
}
.navbar a:hover{
    color:blue;
    background-color:#fff;
}
.navbar a:visited{
    color:rgb(179, 181, 182);
}
.subnav{
    
    height: 1 rem;
}
.subnav .flex{
    justify-content: center;
    justify-items: space-between;
}
.subnav ul{
    display:flex;
    list-style-type: none;
}
.subnav a{
    text-decoration: none;
    font-size: 1rem;
    line-height: 1.2rem;  
    color:blue;
    background-color:#0e0225;
}
.subnav a:hover{
    color: yellow;
    background-color: blue;
}
.current{
    color: blue;
    background-color:white;
}
/* Welcome*/
.welcome{
    height:auto;
    background-color: black;
    padding:20px;
    width:100%;
    position:relative;
}
.welcome-text a:link{
    padding:0;
    text-decoration:none;
    color:aqua;
    background-color:transparent;
    font-size:95%;
}
.welcome a:hover{
    background-color:#ffffff;
    color:#000000;
}
.welcome-text{
    color:antiquewhite;
}
.welcome-text li{
    line-height:1.2rem;
}
.welcome-text ul{
    list-style-type:circle;
    margin-bottom: 20px;
}
.welcome p{
    margin: 10px 0;
}

.grid{
    display:grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    justify-content: center;
    align-items: center;
    height:100%;
}
.card{
    background-color:rgb(20, 10, 3);
    border-radius: 10px;
    box-shadow: 2px 3px 10px rgba(0,0,0,0.2);
    padding: 20px;
    margin: 10px;
}
.card h3{
    color:rgb(134, 62, 36);
}
.card a{
    text-decoration: none;
    color:aqua;
    background-color:transparent;
    font-size: 1em;
    line-height:1em;
    margin:0;
    padding:0;
}
.card a:hover{
    color:rgb(0,0,0);
}
.footer{
    width:100%;
    height: 80px;
    margin: 0 auto;
}
.footer .flex{
    display:flex;
    justify-content:space-between;
    align-items: center;
    width:100%;
    height:38px;
}
.recht{
    font-size: 0.75rem;
    color:grey;
    padding:30px;
}

.social{
    color: white;
    height:100%;
    margin-top:10px;
}
.social a{
    text-decoration: none;
    background-color: transparent;
}
/* Contact */
.contact-grid{
    display:grid;
    justify-content: center;
    justify-items:center;
    width:100%;
    height:auto;
}
.contact-box{
    width: 80%;
    padding: 1rem;
}
/* Image Gallery */
.gallery{
    display:grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: auto;
    justify-content: center;
    justify-items: space-between;
    gap:10px;
}
.gallery a{
    text-decoration:none;
    background-color:transparent;
}
.gallery a:hover{
    background-color:transparent;
}
/* Media Queries */
/* Tablets and under */
@media screen and (max-width: 768px){
    .grid,
    .container .grid{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }
    .navbar{
        height: 120px;
        margin-top: 20px;
        margin-bottom:20px;
    }
}
/* Mobile */
@media screen and (max-width: 500px){
    .container{
        height:auto;
        display:grid;
    }
    .navbar{
        min-height: 400px;
        margin-top: 10px;
        display:grid;
    }
    .navbar .container{
        min-height: 400 px;
        display:grid;
    }
    .navbar .grid{
        grid-template-columns:repeat(4 1fr);
        grid-template-rows: repeat(2 1fr);
        justify-content:center;
        justify-items:space-between;
    }

}