@font-face {
  font-family: 'Rouge Script';
 
  src: url('fonts/rouge-script-v14-latin-regular.eot');
  
  src: url('fonts/rouge-script-v14-latin-regular.eot?#iefix') format('embedded-opentype'), 
       url('fonts/rouge-script-v14-latin-regular.woff2') format('woff2'),
       url('fonts/rouge-script-v14-latin-regular.woff') format('woff'),
       url('fonts/rouge-script-v14-latin-regular.ttf') format('truetype'),
       url('fonts/rouge-script-v14-latin-regular.svg#RougeScript') format('svg');
 
}

@font-face {
  font-family: 'Lily Script One';
 
  src: url('fonts/lily-script-one-v15-latin-regular.eot');
  src: 
       url('fonts/lily-script-one-v15-latin-regular.eot?#iefix') format('embedded-opentype'),
       url('fonts/lily-script-one-v15-latin-regular.woff2') format('woff2'), 
       url('fonts/lily-script-one-v15-latin-regular.woff') format('woff'), 
       url('fonts/lily-script-one-v15-latin-regular.ttf') format('truetype'), 
       url('fonts/lily-script-one-v15-latin-regular.svg#LilyScriptOne') format('svg');
  }
  @font-face {

  font-family: 'Open Sans';
 
  src: url('fonts/open-sans-v34-latin-regular.eot'); 
  src: url('fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), 
       url('fonts/open-sans-v34-latin-regular.woff2') format('woff2'), 
       url('fonts/open-sans-v34-latin-regular.woff') format('woff'), 
       url('fonts/open-sans-v34-latin-regular.ttf') format('truetype'), 
       url('fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); 
	   
	   
}

 @font-face {


  font-family: 'Sofia';

  src: url('fonts/sofia-v14-latin-regular.eot'); /* IE9 Compat Modes */
  src: 
       url('fonts/sofia-v14-latin-regular.eot?#iefix') format('embedded-opentype'), 
       url('fonts/sofia-v14-latin-regular.woff2') format('woff2'), 
       url('fonts/sofia-v14-latin-regular.woff') format('woff'), 
       url('fonts/sofia-v14-latin-regular.ttf') format('truetype'), 
       url('fonts/sofia-v14-latin-regular.svg#Sofia') format('svg'); 
}
html {
	/*font-size:62.5%;*/
	font-size:10px;
}
	   
	   
body {
  background-color: #666;
  color: #666666;
  font: normal normal 400 1.44rem/normal "Bahnschrift", Georgia,sans-serif;
  margin: 0;
  }
#holder {
  width: 85%;
  max-width: 112rem;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 10rem;
  margin-left: auto;
  background-color: white;
}
header {
	background-color: #cc9998;
	width:100%;
	height:17.9rem;
	display:flex;
	flex-wrap:nowrap;
}
header img {
	height:80%;
}
header div {
	height:100%;
	position:relative;
	top:0 ;
	left:0;
}
header div.left {
	width:23.0rem;
	display:flex;
	justify-content:center;
	align-items:center;
}
header div.right {
	width: calc(100% - 23rem);
}
h1 {
	font-size:2.88rem;
	font-family: 'Open Sans', sans-serif;
	color:#000;
    margin:2rem 0 0 5rem;
}

	 
h3 {
	margin:2rem 0;
}
h2 {
	  font-family: 'Rouge Script' ;
      font-size:8rem;
      color:#FFF;
      margin:1rem 0 0 9rem;
	  white-space:nowrap;
	  display:inline;
}
/*@media screen and (max-width: 1000px)
 {
	 h2{
		 font-size:5rem;
		 margin-left:7rem;
	 }
	 h1{
		 font-size:2.4rem;
	  }
 }*/
#container{
	width:100%;
	display:flex;
	flex-wrap:nowrap;
	/*justify-content:space-between;*/
}
nav {
	 top:18rem;
	background-color:#eab9b8;
    left:5rem;
	/*width:25%;*/
	width:28rem;
	text-decoration:none;
	list-style:none;
}
nav ul {
     position:relative;
     height:100%;
     list-style:none;
     margin:0;
     padding:0.6rem 0.8rem;
}
nav ul li a {
      position:relative;
      background:url(button.jpg) no-repeat center center;
      color:#fff;
      display:block;
      width:24.5rem;
      height:8.1rem;
      background-size:cover;
      text-decoration:none;
}
nav ul li a.aktuell span{
	color:#F66;
} 
a:hover span{
  color: #FC6;
}
a:active span{
  color: #669;
}  
article{
       /*width:75%;*/
	   flex:1 1 auto;
       left:1rem;
       top:18rem;
       padding-left:0rem;
       bottom:0rem;
       background-color:#eab9b8;
       margin: 0;
       font-size:2rem;
       font-style:inherit;
	   color:#000;
}
span{
	position:relative;
	display:flex;
	width:8.3rem;
	height:3.6rem;
	top:2rem;
	left:1.4rem;
	padding:0;
	color:#fff;
	justify-content:center;
	align-items:center;
	font-family:'Open Sans', sans-serif;
	font-size:1.6rem;
}
figure{
     margin:0;
     margin-left:2rem;
}
section{
     padding:2.4rem;
     margin: 0;
}
.imgquadrat11{
display:none;
}
.imgquadrat22{
display:none;
}
.imgquadrat33{
display:none;
}
.imgquadrat44{
display:none;
}
.imgquadrat55{
display:none;
}
footer {
  border-top-width: 0.2rem;
  border-top-style: solid;
  border-top-color: black;
  padding-top: 0.2rem;
  padding-right: 0.2rem;
  padding-bottom: 0.2rem;
  padding-left: 0.2rem;
  font-size: 80%;
  clear:both;
  background-color:#eab9b8;
  height:3.9rem;
}

@media all and (max-width: 800px), (orientation: portrait), (max-height: 600px) and (orientation: landscape) {
 body{
	 background-color: #eab9b8;
     
      
      width: 100%
}
#holder {
  width: 100%;
  background-color:#eab9b8;
}
header {
	height:10rem;
}

header div.left {
	width:15rem;
}
header div.right {
	width:calc(100% - 15rem);
}
h1 {
	font-size:1.28rem;
	
	margin:2rem 0 0 0;
}
h2{
   
   font-size:3.2rem;
  white-space: normal;
   margin-left:0.5rem;
}
#container{
	
	display:block;
}
span{
	position:relative;
	display:none;
	width:8.2rem;
	height:3.5rem;
	padding:0;
	color:#fff;
	font-family:"Lucida Calligraphy";
}
nav {
	
	background-repeat: no-repeat;
    width:100%;
	height:30%;
}
nav ul {
   
     display:flex;
     
     flex-wrap:nowrap;
     justify-content:center;
     padding-left:0rem;
}
nav li {
  flex:0 0 4.0rem;
  margin:0 1.0rem;
}
nav ul li a {
	background-color:none;
	position:relative;
    width:4.0rem;
    height: 4.0rem;
    top: 0.4rem;
    left: 0.5rem;
}
figure{
	width:100%;
	margin:0;
}

article{
       width:100%;
       left:0rem;
       top:0rem;
      
      
      
      
       height:60%;
      
}
.imgquadrat11{
	border-radius: 1.1rem;
	display:block;
    width:4rem;
    height:4rem;
    border: 0.4rem solid black;
    background:url(quadrat11.jpg) no-repeat center center;
}
.imgquadrat22{
	border-radius: 1.1rem;
	display:block;
    width:4.0rem;
    height:4.0rem;
    border: 0.4rem solid black;
     background:url(quadrat22.jpg) no-repeat center center;
}
.imgquadrat33{
	border-radius: 1.1rem;
	display:block;
    width:4rem;
    height:4rem;
    border: 0.4rem solid black;
    background:url(quadrat33.jpg) no-repeat center center;
}
.imgquadrat44{
	border-radius: 1.1rem;
	display:block;
    width:4rem;
    height:4rem;
    border: 0.4rem solid black;
    background:url(quadrat44.jpg) no-repeat center center;
}
.imgquadrat55{
	border-radius: 1.1rem;
	display:block;
    width:4rem;
    height:4rem;
    border: 0.4rem solid black;
    background:url(quadrat55.jpg) no-repeat center center;
}
footer {
 
	height:0.9rem;
}
}

@media all and (max-width: 380px)and (orientation: portrait) {
	h2{
		line-height:0.8;
	}
	h1{
		margin-top:1.0rem;
	}
}