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

body{
 width: 100%;
 margin: 0;
 padding: 0;
 font-family: 'Helvetica serif', serif;
}
.first { 
  background-image: url("../rothaeuser_start-neu-1024x683.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  min-height: 100vh;
  } 

.fakebutton {
  padding:8px 15px;
  border:2px solid #999;
  background-color: transparent;
  border-radius: 5px;
  color:#fff;
  text-decoration:none;
  text-align: center;
  margin: auto;
}

.fakebuttonzwei {
  padding:8px 8px;
  margin: auto;
  border:2px solid #a81c3a;
  border-radius: 5px;
  text-decoration:none; 
  max-width: 360px;
  background-image: url("../icon/koffer.svg");
  background-repeat: no-repeat;
  background-position: 5px;
}

.logo {
	width: 10rem;
	height: auto;
	margin: auto;
}
 .welcome {
font-size: 2em;
color: #a81c3a; 
text-align: center;
 }
 
 .start {
   text-align: center; 
   padding-top: 10em;
 }
 
 .abstand1 {
padding-top: 30px; 
text-align: center; 
 }

 .abstand2 {
  padding-top: 40px; 
  text-align: center; 
 } 

/* || 2. Seite */ 

article{
  margin-bottom: 2em;
}
.rand{
  width: 90%;
}

hr{
  height: 2px;
  border-width:0;
  color: #cccccc; 
  background-color: #b1afb0;
  margin-left: 5px;
  width: 80%;
}
/* || Akkordeon */ 
.hidecontent {
    	display: none;
	}

	#myaccordion label {
		display: block;
    width: 60%;
    color: #575859;
    cursor: pointer;
		transition: ease .5s;
  }
  
	#myaccordion label:hover {
		color: #a81c3a;
	}
	.content {
		padding: 10px 25px;
		/* margin: -1 0 0 0; */
	}
	#myaccordion input:checked + label + .content {
		display: block;
		transition: all 0.9s ease-in-out;
		-moz-animation: fadeIn 0.5s ease-out;
		-o-animation: fadeIn 0.5s ease-out;
		animation: fadeIn 0.5s ease-out;
	}
	@keyframes fadeIn {
		0% {
			display: none;
			opacity: 0;
		}
		1% {
			display: block;
			opacity: 0;
		}
		100% {
			display: block;
			opacity: 1;
		}
	}
  .paccordion {
    font-size: 1rem;
    line-height: 3em;
    white-space: nowrap; 
   }

.container { 
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}
  .fb1{
    width: 95%;
    margin-left: 3em;
    margin-right: 5em;
  }
     
  .fb2{
    width: 80%;
    margin: auto;
    } 
     
.laden {
  width: 100%;
  max-width: 400px;
  display: block;
  padding-top: 15px;
  height: auto;
  margin: auto;
}

 h1 {
  font-size: 1.6em;
  color: #575859; 
  padding-top: 2em;
  
 }
 h2 {
  font-size: 1.1em;
  padding-top: 0.5em;
  padding-bottom: 2em;
  color: #A7A7AD;
 }
 
 h3 {
  font-size: 1.3em;
  color: #575859; 
 }
 h4 {
  font-size: 1.3em;
  padding-top: 2em;
  color: #575859;
  text-align:center; 
 }
 h5 {
  font-size: 1em;
  padding-top: 2em;
  padding-bottom: 3em;
  color: #575859;
  text-align:center; 
 }
 .rot{
  color:#a81c3a;
  white-space: nowrap;
  font-size: 1em;
  padding-left: 33px;
  text-decoration: none;
 }

 .rotthanks{
  color:#a81c3a;
  font-size: 0.8em;
  text-align: center;
  display: block;
 }
 .text {
 font-size: 0.9em;
 color: #575859; 
 }
 
/* || Kontaktdaten */ 
.wrapper{
padding-top: 20px;
}
.mitte{
  list-style-type: none;
  width: 200px;
  margin: auto;
}
.contact1{

background-image: url("../icon/phone.svg");
  background-repeat: no-repeat;
  height: 20px;
  line-height: 20px;
  margin: 0 0 17px;
  padding: 0 0 0 35px;
  }
  .contact2{

    background-image: url("../icon/mail.svg");
      background-repeat: no-repeat;
      height: 30px;
      line-height: 30px;
      margin: 0 0 17px;
      padding: 0 0 0 40px;
      }
      .contact3{

        background-image: url("../icon/insta.svg");
          background-repeat: no-repeat;
          height: 30px;
          line-height: 30px;
          margin: 0 0 17px;
          padding: 0 0 0 40px;
          }



  .rotohne {
    text-decoration: none;
    color:#a81c3a;
  }
 
footer {
  display:flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  justify-content: space-around;
  align-items: center;
  background-color: #F3F3F9;
  min-height: 80px;
}
.footerpart{
  flex-grow: 1;
  flex-basis: 20rem;
} 
.footertext {
  font-size: 0.8em;
  color: #575859;
}

.footerrot{
  
    color:#a81c3a;
    font-size: 0.8em;
    
}

.dundi{
  margin: 30px;
}

/* || SMALL */
@media screen and (min-width: 576px) {
  .welcome {
    font-size: 2em;
  }
   
  .fb1{
    margin-left: 4em;
  } 
  hr{
    width: 70%;
  }
}


@media screen and (min-width: 768px) {
    .welcome {
      font-size: 3em;
    }
    .container {
    -ms-flex-direction: row;
    flex-direction: row;
  } 
  .fb1{
    width: 49%;
    margin-left: 5em;
    }
     
  .fb2{
    width: 49%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 15px;
    } 
   
   
   .laden {
     width: 80%;
  }
  .fakebuttonzwei {
     max-width: 80%;
  }
  .rand{
    width: 100%;
  } 
  .rot{
     font-size: 0.8em;
   }
  hr{
     width: 90%;
  }
}


  @media screen and (min-width: 992px) {
    .welcome {
      font-size: 4em;
    }
    .fb1{
      margin-left: 7em;
    }
       
    .fb2{
      margin-top: 22px;
      }
      
    .fakebuttonzwei {
      max-width: 60%;
      }
      hr{
      width: 80%;
      }
 } 

 @media screen and (min-width: 1200px) {
    .welcome {
      font-size: 5em;
    }
    .input-container {
      width: 25%;
    } 
    .fb1{
      
      margin-left: 10em;
    }
    
    hr{
      width: 70%;
    } 
  } 
  @media screen and (min-width: 1600px) {
    
    .input-container {
      width: 20%;
    } 
        
    .fakebuttonzwei {
      max-width: 50%;
    }
    hr{
      width: 60%;
    } 
  } 

  /* || MOBILE DEVICE LANDSCAPE  */
@media screen and (max-height: 425px) and (min-aspect-ratio: 7/4) {
  .start {
    
    padding-top: 3em;
  }
  .logo {
    width: 6rem;
    }
}