@charset "UTF-8";


/* ----------------------------------------------------------------------------- *
 *  *                           Styles der Basisversion                             *
 *   * ----------------------------------------------------------------------------- */

.header {
  text-align: center; }


.footer {
  padding: 0.6em 2rem;
  text-align: center; }

.section {
  margin: 1em 0; }

textarea {width: 96%;}

/*** Textauszeichnungen ***/
/*h1 {
  margin: 0 0 0.625em; }

h2 {
  margin: 0.5em 0; }

h3 {
  margin: 0.6em 0; }

p {
  margin: 0.5em 0; }

ul, ol {
  padding: 0;
  margin: 0 0 0.625em 2rem; }
*/
/* ----------------------------------------------------------------------------- *
 *  *  *                                     Smartphoneversion                            *
 *   *    * ----------------------------------------------------------------------------- */
@media only screen and (max-width: 40em){
.topnav .hidesmall{display: none;}
}

.topnav .showsmall{display: none;}

@media only screen and (max-width: 40em){
.topnav .showsmall{display: inline-block;}
}


@media only screen and (min-width:20em) and (max-width: 40em){
#ordernow {float:right; margin-right: 10%;}
#toggle-nav{float: left; margin-left:10%;}
}

@media only screen and (max-width: 40em) {
#language {display: none;}
#language:target {display: block;}
}
/* ----------------------------------------------------------------------------- *
 *  *                                     Tabletversion                            *
 *    * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 40em) {
  .footer {
    padding: 0.8em 2rem;
     }

  h1 {
    font-size: 2.8rem;
    /* 28px */
    }

}

/* ----------------------------------------------------------------------------- *
 *                                     Kleine Desktops                           *
 * ----------------------------------------------------------------------------- */
 /* .main-wrapper macht Platz für .nav */
  .main-wrapper {
    width: 80%;
    padding: 0;
    margin-left: 20%; }

  .main-content {
    width: 100%;
    overflow: auto; }

   .page-wrapper{margin-left: 5%;
		margin-right: 5%;}

@media only screen and (max-width: 64em){
.page-wrapper{width: 100%; margin-left: 0; margin-right: 0;}
}


  /* Navigation wird links neben dem Inhalt angeordnet */
  .main-nav {
    width: 20%;
    float: left;
    box-shadow: none;
    /*margin: 1.6em 0 0;*/
    padding: 0; }


@media only screen and (max-width: 64em){
.main-wrapper { width: 100%;
	margin-left: 0;
}
.main-nav{
width: 100%;
float: none;

}
}

@media only screen and (min-width: 25em) and (max-width: 64em){
.main-nav { 
	width: 33%;
        margin-left: 33%;
}
}

@media only screen and  (max-width: 25em){
.main-nav {
        width: 60%;
        margin-left: 20%;
}
}
@media only screen and (min-width: 50em){
#homeline {margin-top: 4rem;}
}
/* ----------------------------------------------------------------------------- *
 *  *                          Grosse Desktops                            *
 *    * ----------------------------------------------------------------------------- */

@media only screen and (min-width: 75em) {
	.page-wrapper {
		margin: 0 auto;
		max-width: 75em;
	}
}

/* ----------------------------------------------------------------------------- *
 *  *                                    Targetnav                                 *
 *    * ----------------------------------------------------------------------------- */


#back-to-top {
	text-align: center;
	display: none;
}

.content-wrapper {
	display: block;
}
.nav {
	display: block;
}


/*** Menü-Link verstecken in großen Viewports ***/
#toggle-nav {
	display: none;
}

@media only screen and (max-width: 64em){
.nav {  display: table-footer-group; }
.content-wrapper { display: table; width: inherit;}
#toggle-nav {display: inline-block; }
#back-to-top {display: list-item; }
 }  /*Ende breakpoint*/