body
{
	background-color: #c4c1be;
}
img
{
	border: none;
	max-width: 100%;
	height: auto;
}
#start, #seite
{
	font-family: 'Courier';
}

#start main, #start main.home .container, main.home .container section.home
{
	width: 100%;
	margin: auto;
	display: block;
	max-width: 1400px;		
}
main.home .container section.home
{
	max-width: 60em;
	position: relative;
}
main.home h1
{
	text-align: center;
	font-family: 'Courier';
	font-size: 3em;
	font-weight: bold;
	font-variant: small-caps;
}
.uhr 
{
	width: 60em;
	position: absolute;
	z-index: 4;
}
.rad
{
	width: 5em;
	position: absolute;
	top: 15em;
	left: 7em;
	animation: rotation 8s infinite linear;
	z-index: 3;
}
.rad2
{
	width: 4em;
	position: absolute;
	top: 15em;
	left: 5em;
	animation: rotation2 8s infinite linear;
	z-index: 1;
}
@media only screen and (min-width: 480px) {
	.rad
	{
		width:8em;
		top: 20em;
		left: 11em;
	}
	.rad2
	{
		width: 5em;
		top: 21em;
		left: 9em;
	}	
}

@media only screen and (min-width: 767px) {
	.rad
	{
		width: 11em;
		top: 27em;
		left: 14em;
	}
	.rad2
	{
		width: 7em;
		top: 26em;
		left: 10em;
	}	
}
@media only screen and (min-width: 960px) {
	.rad
	{
		width: 12em;
		top: 32em;
		left: 17em;
	}
	.rad2
	{
		width: 7em;
		top: 32em;
		left: 14em;
	}	
}

/* 1792x828px at 326ppi 
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
	.rad
	{
		width: 12em;
		top: 28em;
		left: 12em;
	}
	.rad2
	{
		width: 7em;
		top: 28em;
		left: 12em;
	}
}*/
@media only screen and (max-width: 640px) {
	.rad
	{
		/*width:6em;*/
		top: 14em;
		left: 7em;
	}
	.rad2
	{
		width: 3em;
		top: 14em;
		left: 5em;
	}	
}

@media only screen and (min-width: 300px) and (max-width: 350px) {
	.rad
	{
		width: 4em;
		top: 10.5em;
		left: 5em;
	}
	.rad2
	{
		width: 2em;
		top: 11em;
		left: 4em;
	}	
}

@keyframes rotation
{
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(359deg);
	}
}

@keyframes rotation2
{
	from {
		transform: rotate(359deg);
	}
	to {
		transform: rotate(0deg);
	}
}
#start #footer-nav 
{
	text-align: center;
	position:fixed;
	bottom: 0;
	background-color: #c4c1be;
	/*width: 100%;*/
}
#footer-nav ul
{
	max-width: 98%;
	margin: 0 1%;
}
@media only screen and (min-width: 767px) {
  #footer-nav ul
  {
	max-width: 80%;
	margin: 0 10%;
  }	
  #footer-nav ul li
  {
	/*width: 25%;*/
  }	  
}
#footer-nav li, #footer-nav button
{
	padding-top: 10px;
	padding-right: 1%;
	padding-bottom: 5px;
	padding-left: 1%;
	/*display:inline;*/
	float:left;
	font-size: 1em;
}
#footer-nav button { 
	background-color: transparent;
	font-family: 'Courier';
	color: #000;
	letter-spacing: 0;
}
#footer-nav li.active 
{
	background-color: #e3c974;
}
#start #nav
{
	top: 25px;
	z-index: 999999;	
}
#start #nav ul a 
{
	/*font-size: 2em;*/
	font-variant: small-caps;
	font-weight: bold;
}
#start #nav span.specials
{
	position: absolute;
	top: 23em;
	left: 8em;
	font-size: 1.7em;
	font-variant: small-caps;
	font-weight: bold;
}
#start #nav span.mediathek
{
	position: absolute;
	top: 15em;
	left: 38em;
	font-size: 1.7em;
	font-variant: small-caps;
	font-weight: bold;
}

/*** Menü ***/
#seite #nav span, #start #nav span
{
	font-size: 3em;
	background-color: #c4c1be;	
}
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  font-family: 'Courier';
  font-variant: small-caps;
	font-weight: bold;
	text-align: left;
}
.sidenav a {
  padding: 15px 8px 8px 32px;
  text-decoration: none;
  color: #ffffff;
  display: block;
  transition: 0.3s;
  line-height: 77%;
}
.sidenav a:hover {
  color: #e3c974;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  padding-top: 50px;
}
#start #nav ul#sideNav,
#start #nav ul#sideNav2
{
	font-size: 1.5em;
}

#seite #nav > ul > li a 
{
	font-size: 1.7em;
}
#seite #nav ul.submenu li a 
{
	font-size: 1.5em;
	padding: 0.3em 1.4em;
}
#seite li.active li.current a
{
	color: #e3c974;
}
#overlay{
    z-index: 2;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    display: none;
}
#overlay2{
    z-index: 0;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    display: none;
}

/**** Seite ****/
#seite #container
{
	width: 100%;
	max-width: 1400px;
	margin: auto;
	display: flex;
	padding-bottom: 6em;
}
#seite #logo
{
	width: 10%;
	float: left;
	position: fixed;
}
#seite main
{
	width: 83%;
	float: left;
	font-family: Verdana, Arial, sans-serif;
	margin-left: 15%;
	margin-right: 2%;
}
#seite h1
{
	font-family: 'Courier';
	font-size: 1.2em;
	/*padding: 0.3em;
	background-color: #e3c974;*/
	margin-bottom: 1em;
	line-height: 1.6;
}
#seite h1 span
{
	/*width: 90%;*/
	padding: 0.5em;
	display:inline-block;
	margin-left: -12px;
}
#seite h1.gelb
{
	background-color: #e3c974;
	padding: 0.5em;	
	text-transform: uppercase;	
	display:inline-block;
}
@media only screen and (min-width: 767px) {
 #seite main
 {
	width: 70%; 
	margin-left: 15em;
 }
  #seite h1
  {
	font-size: 1.5em;
  } 
  #seite h1 span
  {
	padding: 0.8em 1em;
  }
  #seite h1.gelb
  {
	padding: 0.8em 1em;	
  }  
}


#nav
{
	width: 10%;
	float: right;
	text-align: right;
	/*padding: 1em 1em 0em 0em; z-index: 99999;*/
	padding: 0em 1em 0em 0em;
	position: fixed;
	right:0;
	z-index:99999;
	top: 25px;
}
.sticky
{
	position: fixed;/*sticky;
    position: -webkit-sticky;*/	
	top: 0;
	width: 65.8%;
	z-index: 99999;
}
@media only screen and (min-width: 767px) {
  #nav
  {
	right:5%;
	top: 30px;
  }
  .sticky
  {
	width: 50.8%;
  }
}
section.content + h1.sticky {
	margin-top: 2em;
}
@media only screen and (min-width: 1240px) {
  #nav
  {
	right:15%;
  }
}

#logo .rotate
{
	transform: rotate(20deg);

  /* Legacy vendor prefixes that you probably don't need... */

  /* Safari */
  -webkit-transform: rotate(-90deg);

  /* Firefox */
  -moz-transform: rotate(-90deg);

  /* IE */
  -ms-transform: rotate(-90deg);

  /* Opera */
  -o-transform: rotate(-90deg);

  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

	margin-top: 9em;
	font-size: 2em;
	display:flex;

}
@media only screen and (min-width: 767px) {
 #logo .rotate
 {
	margin-top: 7em;
 }
}
#seite p 
{
	padding: 20px 0px 5px 0px;
	line-height: 1.4;
	font-size: 14px;
}
#seite figcaption 
{
	padding: 10px 0px 5px 0px;
	line-height: 1.2;
	font-size: 12px;
}
button.goBack 
{
	margin-top: 40px;
	padding: 6px 10px ;
	border:none;
	border-radius: 4px;
}
.container button.btn {
  margin-top: 40px;
  padding: 6px 10px 8px 10px;
  border: none;
  border-radius: 4px;
}
button.goBack:hover, .container button.btn:hover {
	cursor:pointer;
	background-color: #e3c974; 
}
.goBack:before {
    content: ' \276e';
	position:relative;
    margin-right: 5px;
}
.frame-layout-0 ul {
	list-style: disc;
	padding: 20px 0px 5px 0px;
	line-height: 1.4;
	font-size: 14px;	
	margin-left: 15px;
	font-family: Verdana, Arial, sans-serif;
}