@font-face { 
	font-family: 'Rokkitt-Light'; 
	src: url('../fonts/Rokkitt-Light.ttf'); 
}
@font-face { 
	font-family: 'Rokkitt-Regular'; 
	src: url('../fonts/Rokkitt-Regular.ttf'); 
}
@font-face { 
	font-family: 'Rokkitt-Medium'; 
	src: url('../fonts/Rokkitt-Medium.ttf'); 
}
@font-face { 
	font-family: 'Rokkitt-Bold'; 
	src: url('../fonts/Rokkitt-Bold.ttf'); 
}

html {
    width: 100%;
    height: 100%;
	margin:0;
	padding:0;
}

body {
	margin:0;
	padding:0;
	font-family: 'Rokkitt-Light', sans-serif, Arial, Helvetica;
	color:#3b3a2c;
	font-size:25px;
	line-height:30px;
	letter-spacing: 0px;
	background-color:#faf6e6;
	overflow-x: hidden;
}
@media only screen and (max-width:600px) {
	body {
		font-size:20px;
		line-height:25px;
	}
}

h1 {
	display:inline;
	font-family: 'Rokkitt-Light', sans-serif, Arial, Helvetica;
	color:#3b3a2c;
	font-size:25px;
	line-height:30px;
	letter-spacing: 0px;
	font-weight:normal;
	margin:0;
	padding:0;
}
@media only screen and (max-width:600px) {
	h1 {
		font-size:20px;
		line-height:25px;
	}
}

p {
	margin:0;
	padding:0;
}

b, strong {
	font-family: 'Rokkitt-Bold', sans-serif, Arial, Helvetica;
	font-weight:normal;
}

.txt-liste ul, 
.txt-liste li
{
	font-family: 'Rokkitt-Light', sans-serif, Arial, Helvetica;
	margin:2px 0px 3px 12px;
	padding-left:0px;
}

.clear {
	clear:both;
}

sup {
	font-family: 'Rokkitt-Light', sans-serif, Arial, Helvetica;
	color:#3b3a2c;
	font-size:12px;
	line-height:12px;
	letter-spacing: 0px;
	position: relative;
	vertical-align: baseline;
	top: -1em;
}

.abstand-unten {
	margin-bottom:16px;
}

ul {
	list-style-type:disc;
	padding-left:5px;
	margin:5px;
}


/***************************************************/

header {
	position: fixed;
	z-index:10005;
	top:0px;
	left:0px;
	width:100%;
	height:199px;
	padding-left:70px;
	background-color:#f5ebcc;
}
@media only screen and (max-width:1000px) {
	header {
		height:160px;
	}
}
@media only screen and (max-width:800px) {
	header {
		height:140px;
		padding-left:50px;
	}
}
@media only screen and (max-width:600px) {
	header {
		height:98px;
		padding-left:30px;
	}
}
@media only screen and (max-width:450px) {
	header {
		padding-left:20px;
	}
}
@media only screen and (max-width:400px) {
	header {
		height:88px;
	}
}

.header-logo {
	position:relative;
	top:22px;
	left:0px;	
	xbackground-color:#ff0000;
}
@media only screen and (max-width:600px) {
	.header-logo {
		top:16px;
	}
}

.logo-name {
	font-family: 'Rokkitt-Light', sans-serif, Arial, Helvetica;
	color:#222119;
	font-size:31px;
	line-height:38px;
	letter-spacing: 0px;
}
@media only screen and (max-width:800px) {
	.logo-name {
		font-size:24px;
		line-height:30px;
	}
}
@media only screen and (max-width:600px) {
	.logo-name {
		font-size:18px;
		line-height:22px;
	}
}
@media only screen and (max-width:450px) {
	.logo-name {
		font-size:15px;
		line-height:20px;
	}
}
@media only screen and (max-width:400px) {
	.logo-name {
		font-size:14px;
		line-height:19px;
	}
}

.logo-name span {
	font-family: 'Rokkitt-Bold', sans-serif, Arial, Helvetica;
}

/***************************************************/

.content {
	margin-left: 70px;
	margin-right: 70px;
	max-width: 1180px;
	margin-top: 226px;
	padding-bottom: 200px;
}
@media only screen and (max-width:1000px) {
	.content {
		margin-top: 186px;
	}
}
@media only screen and (max-width:800px) {
	.content {
		margin-top: 166px;
		margin-left: 50px;
		margin-right: 50px;
	}
}
@media only screen and (max-width:600px) {
	.content {
		margin-top: 116px;
		margin-left: 30px;
		margin-right: 20px;
	}
}
@media only screen and (max-width:450px) {
	.content {
		margin-left: 20px;
	}
}
@media only screen and (max-width:400px) {
	.content {
		margin-top: 106px;
	}
}

.content-li {
	position:relative;
	width:280px;
	padding-right: 20px;
	float:left;
}

.content-re {
	position:relative;
	width:calc(100% - 300px);
	float:right;
}
@media only screen and (max-width:800px) {
	.content-li,
	.content-re {
		width:100%;
		padding-right: 0px;
		clear:both;
	}
	.content-re {
		margin-top: 30px;
	}
}

.bild {
	width:100%;
	margin-top: 8px;
}


/***** Mobil-Navi (Hamburger)  ********************************/

.mobil-navi {
	display:none;
}
@media only screen and (max-width:1000px) {
	.mobil-navi {
		z-index:10000;
		position: fixed;
		display:block;
		top:10px;
		right:10px;
		opacity: 1;
	}
}

label.hamburg { 
	position: relative; 
	display: block;
	width: 59px; 
	height: 53px; 
	margin-left: auto; 
	margin-right: auto;
	xborder-radius: 4px; 
	xbackground-color: #fff; 
	background: transparent; 
	cursor: pointer;
}

input#hamburg {display:none}

.line { 
	position: absolute; 
	left:10px;
	height: 4px; 
	width: 39px; 
	background: #fff; 
	background: #343434; 
	border-radius: 2px;
	display: block; 
	transition: 0.2s; 
	transform-origin: center; 
}

.line:nth-child(1) { top: 12px; }
.line:nth-child(2) { top: 24px; }
.line:nth-child(3) { top: 36px; }

#hamburg:checked + .hamburg .line:nth-child(1){
   transform: translateY(12px) rotate(-45deg);
}

#hamburg:checked + .hamburg .line:nth-child(2){
   opacity:0;
}

#hamburg:checked + .hamburg .line:nth-child(3){
   transform: translateY(-12px) rotate(45deg);
}


/*******************************************************
Breite:
>768: mittel
<=768: klein
*******************************************************/
.xxmobile_menue {
	position:fixed;
	z-index:10001;
	top:20px;
	right:0px;
	width:60px;
	margin-top:0px;	
	overflow: hidden;
	cursor:pointer;
	display:none;
	xbackground-color:#fff000;
}

.xxmobile_menue img {
	width:60px;
	height:60px;	
}

.mobile_navigation {
	display:none;
}

.navidesktop {
	display:block;
}

@media only screen and (max-width:1000px) {
	.xxmobile_menue {
		display:block;
	}	
	.mobile_navigation {
		position:fixed;
		display:block;
		z-index:10000;
		top:0px;
		width:100%;
		height:400px;
		padding-top:0px;
		background-color:#fff;
		opacity: 0.99;
		background: url(../images/transparent-mobile-navigation.png);
  		border-left: 0px dotted #7b7b74;
  		border-bottom: 1px solid #c79915;
	}	
	.navidesktop {
		display:none;
	}
}
@media only screen and (max-width:320px), (max-width:480px) {	
	.mobile_navigation {
		width:100%;
	}	
}

/*********  Navi mobil  *******************************/

.mob_navlink ul {
	margin: 40px 60px;
}

.mob_navlink ul li {
	list-style-type: none;
}

.mob_navlink ul li a:link,
.mob_navlink ul li a:visited,
.mob_navlink a:visited {
	font-family: 'Rokkitt-Light', sans-serif, Arial, Helvetica;
	color:#3b3a2c;
	font-size:25px;
	line-height:40px;
	font-weight:normal;
    text-decoration: none;
    padding: 15px 20px 15px 10px;
    list-style: none;
}

.mob_navlink .mob-aktiv, 
.mob_navlink ul li .mob-aktiv,
.mob_navlink ul li .mob-aktiv a:link, 
.mob_navlink ul li .mob-aktiv a:link:active,
.mob_navlink ul li .mob-aktiv a:active,
.mob_navlink ul li a:link .mob-aktiv, 
.mob_navlink ul li a:link:active .mob-aktiv,
.mob_navlink ul li a:active .mob-aktiv {
	font-weight:bold;
}

.mob_navlink  ul li#aktiv a {
	color:#c79915;
}

.mob_navlink .navigation-aktiv {
	display:block;
	margin: 0px 20px 0px 0px;
	padding: 3px 0px 0px 0px;
	border-bottom: 10px solid #c79915;
}


/***************************************************/
/*****   Navigation   ******************************/

#navigation {
	position:relative;
	max-width:1160px;
	margin-top:20px;
	xmargin-left: auto;
	xmargin-right: auto;
}
@media  (max-width:1179px)  {
	#xnavigation {
		width:95%;
	}
}

#navigation ul {
	position:absolute;
	left:0px;
    margin: 0px;
    padding: 0px;
	xbackground-color:#ff6f30;
}

#navigation ul li {
	list-style-type: none;
    float:left;
}

#navigation ul li a {
	font-family: 'Rokkitt-Medium', sans-serif, Arial, Helvetica;
	color:#3b3a2c;
	font-size:23px;
    text-decoration: none;
    display: block;
	margin: 0px 22px 0px 0px;
    padding: 5px 0px 5px 0px;
}

#navigation ul li#aktiv a {
	color:#c79915;
}

#navigation .navigation-aktiv {
	display:block;
	margin: 0px 20px 0px 0px;
	padding: 11px 0px 0px 0px;
	border-bottom: 14px solid #c79915;
}

/***************************************************/

a:link,
a:visited {
	color:#3b3a2c;
    text-decoration:none;
}

a:hover,
a:active {
    text-decoration:underline;
    text-decoration:none;
}

/***************************************************/

a.link-infos, 
a.link-infos:link,
a.link-infos:visited,
a.link-infos:link:visited,
a.link-infos:link:visited {
	font-family: 'Rokkitt-Light', sans-serif, Arial, Helvetica;
	color:#c79915;
    text-decoration:none;
	cursor: pointer;
}

.link-infos, 
.link-infos a:active, 
.link-infos a:hover, 
.link-infos a:focus,
a.link-infos:hover, 
a.link-infos:active {
    text-decoration:underline;
    text-decoration:none;
}


/***************************************************/

.smartphone-an {
	display:none;
}
.smartphone-aus {
	display:block;
}
@media only screen and (max-width:320px), (max-width:480px) {
	.smartphone-an {
		display:block;
	}
	.smartphone-aus {
		display:none;
	}
}

/***************************************************/

.smartphone-gross-an {
	display:none;
}
.smartphone-gross-aus {
	display:block;
}
@media only screen and (max-width:768px) {
	.smartphone-gross-an {
		display:block;
	}
	.smartphone-gross-aus {
		display:none;
	}
}