/* css released under Creative Commons License -  http://creativecommons.org/licenses/by/2.0/deed.en  */
/* html5 + CSS 3 Template created by miss monorom  http://intensivstation.ch 2013 */

/* reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* render html5 elements as block 
   rendert html5 elemente als block  */
header, footer, section, aside, nav, article { display: block;}

body {
  font-size: 13px;
  font-family: Arial, Sans-Serif;
  line-height:22px;
  color:#555;
  background: #fff url(img/bg.png) repeat-x left top;
  border:10px solid #fff;
}

pre, code {
  font-size: 1.3em;
}

a {color: #555;text-decoration:none;}
a:hover {color: #9c0032;}
a:active { color:#000000;}

h1 {font-size: 24px;
line-height: 75px;
font-weight: normal;
color: #990134;
margin: 0 0 20px 0;
border-bottom: 1px solid #9c0032;
}

h2 {
	font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    color: #333;
    margin: 0 0 16px 0;
    padding: 25px 0 0 0;
}

h3 {font-size: 14px;
color: #990134;
font-weight: bold;
margin: 25px 0 2px 0;
}

h4 {font-size: 14px;
font-weight: bold;
margin: 15px 0 15px 0;
}

img.download {vertical-align:middle;}
img{border:none;}


ul{
  padding-left:30px;
}

nav ul{
  list-style-type:none;
	padding-left:0;
}


/* ----------container zentriert das layout-------------- */
#container, footer .inner {
  max-width: 960px;
 /* min-width:320px; */
  margin:0  auto;
}


/* ----------header for logo-------------- */
#top:after{
  height: 0;
  content: ".";
  display: block;
  clear: both;
  visibility:hidden;
} 

#top header{
  padding:0;
  float:none;
  width:100%;
}

header p{
  text-transform:uppercase;
  font-size:0.8434em;
}

header img{ 
  border:0;
  padding: 0 auto;
	width:100%;
   max-width:506px;
}  
.mini, .menubutton{
  display:none;
}

.menubutton a {
  cursor:pointer;
}

	
#top header {display: flex;margin-bottom:15px;}
#kntkt {background: #990134;
width:25%;float:left;color:#fff;padding:20px;}
#grey {padding:20px;}

.contactField {
    width: 100%;
}
textarea {
    width: 100%;
    height: 130px;
}
.contactSubject {
    vertical-align: top;
    width: 130px;
}
input[type="submit"] {
    background: #990134;
    color: #fff;
    border: 0;
    padding: 5px 20px;
    font-size: 13px;
}
#logo {background: #fff;
width:75%;float:right;text-align:center;}
	
 
/* new nav ----------- */
nav{
  padding:0;
	clear:both;
    float:none;
	display:block;
    width:100%;
	background-color:#efedee;
	font-weight:bold;
} 
nav ul:after {
  height: 0;
  content: ".";
  display: block;
  clear: both;
  visibility:hidden;
} 
nav ul {
  list-style-type: none;
  float:none;
}   
nav li {
  float: left;
  margin: 0;
    width:auto;
}
nav a{
  background-color: rgba(0,0,0,0);
  display: block;
  padding: 8px 28px;
  text-decoration: none;
  transition: all 0.1s linear 0s;
  border-radius: 0;
}

nav a {color: #9c0032;}

nav a:hover {
  color:#fff;
  background-color: rgba(0,0,0,0.3) ;
}
nav a:active { color:#fff;}
nav a.selected {
  color:#fff;
  background-color: rgba(0,0,0,0.4) ; 
} 

nav ul li a,nav ul li {white-space: nowrap}


/* ----------------- content--------------------- */
section:before {
  height: 0;
  content: ".";
  display: block;
  clear: both;
  visibility:hidden;
}

section#content {
  float: right;
  width: 75%;
  padding: 50px;
  background-color: #f8f6f7;
  min-height:600px;
  margin: 0 0 20px;
}
p, pre{
  padding:  0 0 20px;
  line-height:22px;
}

/*
ul{
  list-style-type:none;
  line-height:1.5em;
} */

article header{
  background:#fff;
  padding:0;
  }
  
article footer{
  border-bottom: 1px solid #564B47;
  color:#564B47;
  padding:0 0 20px;
  margin:0 0 20px;
}
.kasten {
background-color: #eae8e9;
border: 0px solid #ccc;
border-radius: 6px;
font-family: "Georgia",serif;
font-size: 14px;
font-style: italic;
margin-bottom: 18px;
margin-top: 28px;
overflow: visible;
padding: 30px 40px;
text-align: center;
position: relative;
color: #555;
}

/* -------------- side infos ------------- */

aside {
  padding-top:0;
  float:left;
  width: 25%;
  background:  rgb(240,240,240) ;
  margin-bottom:20px;
}

#rot {background: #990134;min-height:40px;}
#middle {display:flex; flex-direction: row-reverse;}

/* -----------footer---------------------- */
footer.footer {
  padding: 20px;
  clear:both;
  background-color:#f7f5f6 ;
}

footer a, footer a:visited {
  color: #555; text-decoration:none;
}

.footer-segment {
  display: inline-block;
  vertical-align: top;
  width: 33%;
}
.inner{ padding:20px;}



/* -------------------- Media Queries -------------------- */

@media only screen and (max-width: 860px) { 
 #top header, nav {
    float:none;
    width:100%;
  }
  nav {
    padding:0;
  } 
  nav ul {
    float:none;
  }
  nav li {
    float: left;
    margin: 0;
    width:auto;
  } 
	nav a {	
  padding: 8px 20px;
	}
	
  nav a, nav a:visited, section#content, aside {
    border-radius: 0;
  }
  
	
  .inner{ padding:0; }

}


@media only screen and (max-width: 768px) { 

	
#middle {display:block; }
#top header {display:block;margin-bottom:0; }	
	
#kntkt, #logo {
	width:100%;text-align:center;float:none;
	}

	header img {
    border: 0;
    padding: 0 0 10px;
    width: 100%;
}
	
  section#content {
    float: none;
    width: 100%;
    padding: 20px;
    margin: 0;
	min-height:0;
  }

  aside {
    padding:20px;
    float: none;
    width: 100%;
  }
	
nav a {
  padding: 8px 10px;
  }

h1 {font-size: 24px;
	line-height: 35px;
	margin-top:30px;}	

  .footer-segment {
    display: inline-block;
    vertical-align: top;
    width: 49%;
    padding: 0 0 20px;
  }
  .footer-segment:last-child {
    border-top:1px solid #999;
    display: block;
    width: 100%;
    padding: 10px 0 0 ;
  }
	.footer-segment:last-child h3 {
display:none;
}


@media only screen and (max-width: 650px) { 
	
nav li {
    float: none;
    margin: 0;
    width:100%;
    display:block;
  } 
  nav a {
    font-size:1.0em;
    position:relative;
  }    
  nav a:not(.selected):after {
    content:'»';
    position:absolute;
    right:10px;
  }
  
  .menubutton {
    display:block;
    position:absolute;
    right:10px;
    top:10px;
    z-index: 400;
  }	
	
  .menubutton img {
	  padding: 10px 10px 5px 10px;
  }	
	
	}

@media only screen and (max-width: 480px) { 

	#content {padding-bottom:0;}
	
  aside {
    padding:0;
  }
	
  nav li {
    float: none;
    margin: 0;
    width:100%;
    display:block;
  } 
  nav a {
    font-size:1.0em;
    position:relative;
  }    
  nav a:not(.selected):after {
    content:'»';
    position:absolute;
    right:10px;
  }
  
  	/*
  .mini {
    display:block;
    /* 20% space rechts fuer .menubutton:
    width: 80%;
  } 

  .maxi {
    display:none;
  }
	*/

  footer.footer {
    padding: 20px;
  }

  .footer-segment {
    display: block;
    vertical-align: top;
    width: 100%;
    padding:0;
  }
  .footer-segment:last-child {
    text-align: center;
	  padding-top:20px;
  }
	
.footer-segment p {padding:0;}

	}
}