/*ANCHOR - SCHRIFTARTEN */


@font-face {
   font-family: "CooperHewitt-Bold";
  src:url(fonts/CooperHewitt-Bold.otf);
    font-weight: 400;
    font-style: normal;
    font-display: swap;

}

@font-face {

font-family: "CooperHewitt-Book";
  src: url(fonts/CooperHewitt-Book.otf);
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {

font-family: "JosefinSans-Bold";
  src: url(fonts/JosefinSans-Bold.ttf);
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/*ANCHOR - FARBEN */

:root{

    --color-bg: #e5e6e4;
    --color-b1:#A6A2A2;
    --color-b2:#CFD2cd;
    --color-b3:rgba(245, 186, 245, 0.493);
    --color-h1:#847577;
    --color-h:grey;    
    --color-a: #8b470c;
    --color-h3:#543b24;
    --color-text:#353434;
    --color-waveh:#E7F59E;
    --color-Salbei:#b0bea9;
    --color-gruen: #92aa83;
    --color-red:rgb(189, 22, 22);

    --line: 3ch;
    --font-scale: 0,4vw;
    
   
}

/*ANCHOR - general settings */

*{
    box-sizing: border-box;
    margin: 0;
    padding:0
}



body {
    margin: 0;
    background-color: #e5e6e4;
    font-family: "CooperHewitt-Bold";
    font-size: 1.2em;
    color: #353434;
    height: 100vh;
  

}
 h1, h2, h3 {
    color: var(--color-h);
    font-family: CooperHewitt-Bold;
 }


h1{
font-size: calc(1.6rem + var(--font-scale));
line-height: var(--line);
margin:0


}

h2 {
font-size: 1.875em;
}

h3{
font-size: 1.575em;
}

/*ANCHOR - waveHeader */

.wave {
    position: absolute;
    height: 200px;
    width: 100%;
    left: 0;
    right: 0;
    top:0;
    z-index: -3;
    object-fit: cover;

}

/*ANCHOR - LOGO */

.logo {
    top:24px;
    width: 42px;
   

 
 
 /*ANCHOR - NAV */
    
}


.nav {
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 8px;
    padding-right: 16px;
    
}

   ul{
    width: 100%;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    

}

 ul > li:last-child{
margin-left: auto;
}


 ul > li > a {
    width: 100%;
    justify-content: flex-end;
    color: #8b470c;
    font-weight: bold;
    text-decoration: none;
    font-family: CooperHewitt-Bold;
    font-size: large;
  
    
}

  ul > li > a:hover {
          color: var(--color-h1);
    
}

/*ANCHOR - FOOTER */

    footer {
   position: fixed;
  
   left: 0;
   bottom: 0;
  
   width: 100%;
;
   z-index: -3;
}

footer {

text-align: center;
color: #CFD2cd;
font-size: 1rem;
background-color: #847577;

   }


 
.wavefooter {
position:fixed;
height:auto;
width: 100%;
z-index: -3;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
 
 } 


  /*ANCHOR - MediaQueries */  


@media (max-width: 800px){

h1{
   font-size: 12vw;
    text-align: center;
}

.subheading{
    text-align: center;
}
p{
font-size: 1.5rem;
}

h3{
  font-size: 1.575rem;
}

 .textgrey{
    font-size: 8px;
}

p{
    font-size: 1.5rem;
}

body {
    font-size: 1rem;
}

}

@media (max-width: 768px) {
    nav > ul {
        flex-direction: column;
        gap:5px
    }

    nav > ul > li:last-child {
    margin-left: unset;
}

 .textgrey{
    font-size: 8px;
}

p{
    font-size: 1.5rem;
}
}

/*ANCHOR - about_me VITAL */

.card-box{
    display: flex;
    justify-content: center;
    align-content: space-around;
    gap: 400px;
    margin: 10px 40px;
}


.card-box > .card{
    width: 100%;
    max-width: 800px;

    display: flex;
    justify-content: center;
    align-items: center;
    
    /*justify-items: stretch;*/
}


#item02{
    flex-direction: column-reverse;
    
}


.card-box > .card p{
    text-align: start;

}


.card-box >.card > img{
   width: 100%;
   /*max-width: 800px;*/
   height: auto;
    border: 15px solid var(--color-Salbei);
    border-radius: 50%;
    object-fit: cover;

    }

/*ANCHOR - BUTTON STYLING */
.card-box >.card  a{
display: inline-block;
text-decoration: none;
padding: 8px 16px;
background-color: #E7F59E;
color: #847577;


}




@media (max-width: 800px) {
    #about_me_section {
        padding: 20px 0;
    }

    
    .card-box > .card h2
    {
        text-align: center;
        
    }

    .about_me_container p{
    text-align: center;
    line-height: auto;
   
    
}
    
}

/*ANCHOR - action-grid */
#Werkstoffe{
   padding: 30px 30px 30px 30px;
    
}

#Werkstoffe h2{
    text-align: center;
    color: var(--color-h);
}

.grid_container{
    margin: 30px auto;
    width: 1500px;
    max-width: 90%;
    /*background-color: var(--color-waveh);*/
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 250px 250px;
    gap: 15px;
    grid-template-areas: 
    "item1 item4 item2 item3" 
    "item1 item5 item5 item3"
    
  
   
}

.grid_item{
    background-color: var(--color-Salbei);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
    gap: 50px;
    
}

.grid_item img{
    height: 200px;
    width: 200px;
    border-radius: 50%;

}
.grid_item img.quer{
    height: 100px;
    width: 200px;
     border-radius: 50%;
   

}

.grid_item img.small{
    height: 100px;
    width: 100px;
     border-radius: 50%;
   

}




#item1{
    grid-area: item1;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}
#item2{
    grid-area: item2;
    flex-direction: column;
    gap: 10px;
}
#item3{
    grid-area: item3;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

#item4{
    grid-area: item4;
    flex-direction: column;
    gap: 10px;

}

#item5{
    grid-area: item5;
   
}

#item6{
    grid-area: item6;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

}

@media (max-width: 1300px){
      .grid_container {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 300px 300px 300px;
    grid-template-areas: 
    "item1 item1 item2" 
    "item4 item5 item5"
    "item3 item3 item3";
    
}
}

@media (max-width: 900px){
      .grid_container {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: 
    "item1 item1"
    "item5 item5" 
    "item2 item4"
    "item3 item3"
    
}
}

@media (max-width: 650px){
      #Werkstoffe h2 {
    font-size: 1.5rem;
    
}
.grid_item{
    padding: 20px;
}

.grid_item img{
    height:100px;
    width: 100px;
}
.grid_item h3{
    font-size: 1,75rem;
}

}

/*ANCHOR - ART */
ART.css
#Art_section{
    padding: 80px 0;
    
  
}

#Art_section h2{
   text-align: center;
    
}


.card-box{
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 20px;
}


.card-box > .card{
    width: 40%;
    max-width: 300px;
    /*width:15%;
    max-width: calc (90%-40px);*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}

/*.card h3{
    color: var(--color-h);
    
} */




.card-box >.card > img{
   width: 40%;
   max-width: 300px;
   height: auto;
    border: 15px solid var(--color-Salbei);
    border-radius: 50%;
    object-fit: cover;

}
 
 .card-box >.card >  img#quer {
    height: 40%;
    max-height: 300px;
    max-width: 40%;
    width: auto;
    border: 15px solid var(--color-Salbei);
    /*border-radius: 50%;*/
    object-fit: cover;
    
 }


  
/*ANCHOR - BUTTON STYLING */
.card-box >.card  a{
display: inline-block;
text-decoration: none;
padding: 8px 16px;
background: transparent;
color: var(--color-a);
border: 4px solid var(--color-gruen);
border-radius: 4px;
margin-top: auto;

}

.card-box >.card a:hover{
    /* background: transparent;*/
    background:var(--color-waveh);
}

/*ANCHOR - MEDIA QUERY für card-boxes */

@media screen and (max-width: 992px) {
    .card-box{
        flex-direction: column;
        align-items: center;
    }

    .card-box > .card{
        width: 100%;
    }
}













@media (max-width: 500px){

    .flex-container{
        flex-direction: column;
        align-items: center;
    }
}

/*ANCHOR - HOME*/

main{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 50px;
}



.greeting{
    width: 850px;
  
} 



 


.subheading{
    color: var(--color-a);
    font-weight: bolder;
    font-family: CooperHewitt-Bold;
   

}



.circle {
    height: 600px;
    width: 600px;
    max-height: 80vw;
    max-width: 80vw;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.circle img {
    width: 100%;


}

@media screen and (max-width: 800px){

    h1{
        font-size: 8vw;
        text-align:center;
        padding: 100px 50px;
    }

    .subheading {
        text-align: center;
    }
    
}

/*ANCHOR - Kontakt */


.container{

display: flex;
justify-content: center;
align-items: start;
align-content: stretch;
flex-wrap: wrap;

}


li{
    list-style: none;
}
.vita {
    padding: 40px 40px;
   
}

.vita-1{

}

.vita-2{
    color:var(--color-red);

}

.vita-3{
color:var(--color-red);
}

.vita-4{
color:var(--color-red);
   
} 

@media screen and (max-width: 768px) {
    .container{
        flex-direction: column;
    }

    .vita{
        padding: 20px 20px;
    }
}