/* this is for mobile phones only */


.hamburger {
    cursor: pointer;
}

.container {
    width: 100vw;
    min-height: 100vh;

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

.container.active {
    width: 100vw;
    min-height: 100vh;

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

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

.aside {
    display: none;
 }

.nav-menu {
    display: none;
}

.nav-menu.active {
    display: flex; 
    flex-direction: column;
    background-color: #fff;
    width: 100%;
    border-radius: 10px;
    text-align: left;
}

.nav-item {
    margin: 0.3em 0 0.3em 1em;
}

.hamburger.active .bar:nth-child(2) {
    opacity: 0;
}

.hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}
        


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

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

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




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

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

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

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




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

.myaddr {
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.nachr {
    font-size: 1.5rem   
}



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




form.kontaktformular legend {
    padding: 0 10px;
    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: 80vw;
    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%;
 }

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

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


.steckbrief{
    margin-top: 1rem;
    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: 100%;
}