/* this is for desktops only */



.container {
    max-width: 1200px;
    min-height: 100vh;
    margin: 0 auto;

    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: 
        'l l l h h h h h h h h h'
        'n n n n n n n n n n n n'
        'c c c c c c c c c c c c'
        'f f f f f f f f f f f f' ;
}

#mainpage.container{
    max-width: 1200px;
    min-height: 100vh;
    margin: 0 auto;

    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: 
        'l l l h h h h h h h h h'
        'n n n n n n n n n n n n'
        'c c c c c c c c c c a a'
        'f f f f f f f f f f f f' ;

}



.headline {
    font-size: 2rem;
    color: var(--HeadlineTextColor);
    text-align: center;
    padding-top: 2rem;
    height: 100%;
    width: 100%;
}


.nav-menu {
    display: flex;
    justify-content:space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
 .hamburger {
    display: none;
}



/*---------------------- Main Content -------------------------*/

#mainpage.content{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mstatement{
    font-size: 2rem;
    margin: 2rem auto;
    text-align: center;
}

.mstatement a{
    color: rgb(241, 25, 126);
}





/*---------------------- Navigation -------------------------*/
.nav-link{
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--NavMenuTextColor);
}

.nav-link:hover{
    color: var(--NavHoverTextColor);
}


.nav-link-selected{
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--NavHoverTextColor);
}








/*-----------------------------------------------------------*/
/*----------------- Kontaktformular -------------------------*/

#kontakt.content{
    display: flex;
    flex-direction: column;
    align-items: stretch;
}



.myaddr {
    width: 400px;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.nachr {
    font-size: 1.5rem   
}

form.kontaktformular fieldset {
	margin-top: 25px;
	padding: 1rem;
	width: 100%;
	/*border: none; */
}

form.kontaktformular legend {
    padding: 0 10px;
    font-size: 1.5rem;
    font-weight: bold;
  }
  
  form.kontaktformular label {
     display: block;
     font-size: 1rem;
  }
  
  form.kontaktformular input {
      border: 1px solid black;
      width: 30ch;
      margin-left: 1rem;
      margin-bottom: 2rem;
      margin-top: 0.5rem;
      font-size: 1rem;
      padding: 0.5rem;
  }
  
  form.kontaktformular textarea {
      font-family: inherit; 
      font-size: 1rem;
      padding: 0.5rem;
      width: 700px;
      height: 40vh;
      margin-top: 0.5rem;
      margin-left: 1rem;
  }
 
  
  #submitbutton {
    margin-left: 1rem;
    margin-top: 1rem;
    width: auto;
    padding: 0.5rem 0.5ch
}






/*-----------------------------------------------------------*/
/*----------------- über mich -------------------------*/
#ich{
    width: 100%;
    display: flex;
    flex-direction:row;
    align-items: flex-start;
}

#ich a{
    color: rgb(218, 192, 47);
}


#ich img {
    max-width: 60%;
    height: auto;
}

.steckbrief{
    margin-left: 1rem;
}

.sb-item{
    font-size: 1.3rem;
    font-weight: bold;
}

.sb-content{
    font-size: 1rem;
    margin-bottom: 1.5rem;
}




/*-----------------------------------------------------------*/
/*-------------------------- lecker -------------------------*/
 
  .cards_item {
    width: calc(100% / 4 - 8px);
  }