header {
    background-size: contain;
    background-position: center center; 
    margin: 0;          /* Seite zentrieren*/
    padding: 0;
}

#headertext {
    padding-top: 30px;
    color: white;
    text-align: center;
    font-family: Georgia;
    font-size: 32px;
    font-weight: bolder;
}
.headermenu {
   text-align: left; 
   font-size: 20px;  
   font-weight: normal;
   height: 40px;
   width: 15em;
   color: white;
   margin-left: 10px;
   margin-top: 50px;
}
.headerpic {
   display: block;              /* Seite zentrieren*/
   max-width: 70%;
   height: auto;
   margin-left: auto;          /* Seite zentrieren*/
   margin-right: auto;
}

/*--------------------NAVIGATION----& HEADER-----------------------------------------*/

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html{
	font-size: 62,5%;
	font-family: 'Georgia';
	background-color: #FFCC66; /* #996600;  das ist braun*/

}
li{
	list-style: none;
}
a{
	text-decoration: none; 
	color: white;
}

.header {
	border-bottom: 1 px solid #E2E8F0;
}
.navbar {
	display: block;  /* flex nebeneinander, block untereinander */
	justify-content: space-between;
	align-items: center;
	padding: 0rem 1.5rem;           /* Abstand von oben und von rechts/links */
        background-color:#996600;       /* Farbe für Navigationsleiste */
}
.hamburger{
	display: none;
}
.bar{
	display: block;
	width: 25px;
	height: 3px;
	margin: 5px auto;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	background-color: white;
}

.nav-menu{
	display: flex;
	justify-content: flex-start;  /* space-between  = Blocksatz flex-start = linksbündig */
	align-items: center;
}
.nav-item{
	margin: 0.5rem;  /* space zwischen den einzelnen nav links */
}
.nav-link{
	font-size: 1.0rem;
	font-weight: 400;
	color: #475569;
  	color: white;  /*hab ich überschrieben */
}
.nav-link:hover{
	color: #4482ff7;
}
.nav-logo{
	display: block;
	font-size: 2.1rem;
	font-weight: 700;
	color: #4482ff7;
	text-align: center
	background-color: white;
}

/* hier ist das aufgeklappte Hamburgermenu */
@media only screen and (max-width: 500px) {      /*(max-width: 768px) bei 550px Hamb gesetzt. bei 150 kommt er nicht mehr*/
	.nav-menu{
		position: fixed;
		left: -100%;
		top: 5rem;
		flex-direction: column;
		background-color: #fff;
		width: 100%;
		border-radius: 10px;
		text-align: center;
		transition: 0.3s;
		box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
	}	
	.nav-menu.active{
		left: 0;
	}
	.nav-item{
		margin: 1.0rem 0;  	/* ursp. 2.5 Zeilenabstand im Menu wegen Fingerdicke Handy*/
	}
	.nav-link{
		color: #475569;
		font-size: 1.5rem;   	/* Text größer gemacht, wenn es aufgeklappt ist */
	}
	.hamburger{
		display: inline-block;
		cursor: pointer;
	}
	.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);
	}
}
/*----------------------------------------------------------------------*/

body {
  
  background-color:#FFCC66;
 /* background: url(images/Body_Hintergrund.jpg) center; */
  background-size: cover;
  margin: 0 auto;          /* Seite zentrieren*/
  padding: 0;		   /* ?? */
  max-width: 120em;         /* 60em; max Breite - sonst wird das Bild doppelt */
}


article {
    min-width: 20em;  
    margin-left: 2em;
    margin-right: 2em;
  }	
aside {
    float: right;
    width: 8em;
  }

iframe {		/*Frame für php Ausgabe auf checkoutseite*/
  border: none;
  overflow:hidden;  	/*entfernt Scrollbar*/
}

h1 {
  color: blue;
}

p {
  color: black;
  font-family: Arial;
  font-size: 24px;
  font-weight: bolder;

}

a { color: blue; }

/*--------------------Flexbox für Bild und Text-----------------------------------------*/

.flex-container{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
/*	align-items: center; */
}
@media all and (min-width: 70em) {    /* große Viewports */
	.flex-container{
		flex-direction: row;
	}
}
.flex-item{
	flex: auto;
	max-width: 30em;
}



/*--------------------Bilder-----------------------------------------*/


.ppt {			/*hier werden die PPoint Bilder aus der Präsi formatiert */
max-width: 100%;
height: auto;
margin: 0;          /* Seite zentrieren*/
padding: 0;
border-color: grey;
border-width: 3px;
border-style: groove;
box-shadow: 10px 10px 10px grey;
}

.mypics {			/*hier werden Bilder formatiert */
max-width: 100%;
height: auto;
margin: 0;          /* Seite zentrieren*/
padding: 0;
border-color: grey;
border-width: 3px;
border-style: groove;
box-shadow: 10px 10px 10px grey;
}


.mypics_or {			/*hier werden Bilder formatiert */
   display: block;              /* Seite zentrieren*/
   max-width: 100%;
   height: auto;
   margin-left: auto;          /* Seite zentrieren*/
   margin-right: auto;
}


/*--------------------Bilder-----------------------------------------*/

#labels{
  color: black;
  font-family: Arial;
  font-size: 18px;
  font-weight: bolder;
}

#text{
  color: black;
  font-family: Book Antiqua;
  font-size: 18px;
}

#textklein{
  color: black;
  font-family: Book Antiqua;
  font-size: 12px;
  font-weight: normal;
}

#ueberschriften{
  color: black;
  font-family: Book Antiqua;
  font-size: 24px;
  font-weight: bolder;
}

.number {
   text-align: center; 
   font-size: 18px;  
   height: 30px;
   width: 100px;
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
   border-radius: 4px 4px 4px 4px;
}
.select {
   text-align: center; 
   font-size: 18px;  
   height: 30px;
   width: 100px;
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
   border-radius: 4px 4px 4px 4px;
}
.button {
   text-align: center; 
   font-size: 18px;  
   height: 30px;
   width: 250px;
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
   border-radius: 7px 7px 7px 7px;
}
.textinput {
   text-align: left; 
   font-size: 18px;  
   font-family: Arial;
   height: 30px;
   width: 250px;
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
   border-radius: 7px 7px 7px 7px;
}
.textinputa {
   text-align: left; 
   font-size: 18px;  
   font-family: Arial;
   height: 30px;
   width: 300px;
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
   border-radius: 7px 7px 7px 7px;
}
.dateinput {
   text-align: left; 
   font-size: 18px;  
   font-family: Arial;
   height: 30px;
   width: 170px;
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
   border-radius: 7px 7px 7px 7px;
}
.adressinput {			/* hier weiter machen - Adressfeld für Rechnung */
   text-align: left; 
   font-size: 18px;  
   height: 90px;
   width: 310px;
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
   border-radius: 7px 7px 7px 7px;
}
input.checkbox {
/*   text-align: left; 
   font-size: 28px;  
   height: 35px;
   width: 35px;  */

   transform: scale(1.3); 
   padding: 10px;
   margin: 10px;
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
   border-radius: 7px 7px 7px 7px;

}

.bild_beschriftung {
position: relative;
}

.bild_beschriftung img {
display: block;
}

.bild_beschriftung span {

position: absolute;
top: 51px; /*68px; groß*/
left: 0px;
width: 165px; /*225px; groß*/
height: 2.0em;
line-height: 2.0em;
color: #fff;
text-align: center;
border-top: 1px solid #ababab;
background:IE 2-3; /*  #404040; Fallback IE 6-8 */
/*background-color: rgba(40, 40, 40, 0.7);*/
background-color: rgba(0, 176, 80, 1);
transform: rotate(-17deg);
border-radius: 7px 7px 7px 7px;
font-size: 18px; 
font-weight: bolder; 
color: white;
}

.footer {
	display: flex;
	align-items: center;
   position: fixed;
   left: 10;
   bottom: 0;
   width: 100%;
   height: 35px;
   background-color: #996600;       /* Farbe für Navigationsleiste */
   color: white;
   text-align: left;
}


.footer-item{
flex: auto;
}

#footerlinks{
  color: white;
  font-family: Arial;
  font-size: 12px;
  valign: center;
  align-items: center;
}

#eu_cookiebox {
	display: block;
	z-index: 100;
 	position: fixed;  /*  ? */
	bottom: 0px;
	min-height: 60px;
	padding: 5px;
	margin: auto; /* 0; */
	width: 100%;
	color: white;
	border: 2px solid black;
	border-bottom: none;
	background: #996600; 
}