/* -------------------------------- 

Farben:

Logo-Purple: #a4026c
Logo-Gray: #ada49d

Komplementär (im Einsatz):
Purple-Dark: #570139
Green-Dark: #095700
Green-Light: #13A402

Triade (alternativ):
Gold: #B19A14
Türkis-Dunkel: #0D6D71
Türkis-Hell: #0FE7F0



-------------------------------- */






@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.ttf');
  	font-weight: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Bold.ttf');
  	font-weight: bold;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-BoldItalic.ttf');
  	font-weight: bold;
	  font-style: italic;
}

@font-face {
    font-family: 'Condensed';
    src: url('../fonts/Roboto-Light.ttf');
  	font-weight: normal;
}

@font-face {
    font-family: 'Condensed';
    src: url('../fonts/Roboto-LightItalic.ttf');
		font-style: italic;
  	font-weight: normal;
}








/* -------------------------------- 

Primary style

-------------------------------- */

html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background-color: white;
}

body, p, ul, li, input, select, textarea {

  font-size: 1.3rem;
  font-family: "Roboto", sans-serif;
  font-weight: lighter;
  line-height:1.6em;

 }

body, html {
  /* important */
  height: 100%;
  color: #3d3536;
}

a {
  /* color: #b4d7a8; */
  /* text-decoration: none; */
  /* font-style: italic; */
}

p {
  padding-bottom:1.5rem;
}

h1, h2 {
  font-size:2.5rem;
  line-height:1.6em;
  padding-bottom:2.5rem;
  font-weight:100;
}

#anmeldebox {

	width:100%;
	box-shadow: 0px 0px 40px 6px #bbbbbb;
	-moz-box-shadow: 0px 0px 40px 6px #bbbbbb;
	-webkit-box-shadow: 0px 0px 40px 6px #bbbbbb;
	-moz-border-radius: 11px; -webkit-border-radius: 11px; border-radius: 11px;
	border: 2px solid white;
	padding:0px; 
	display: inline-block;
	background-color:#095700; 
	color: white;
	margin-bottom:88px;
	margin-top:66px;
	text-align:center;

}

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

	#anmeldebox {

		padding:44px; 
		min-width:600px;	

	}

}


/* -------------------------------- 

Modules - reusable parts of our design

-------------------------------- */
.cd-container {
  /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
  width: 90%;
  max-width: 768px;
  margin: 0 auto;
  z-index:2;
  position:relative;
}
.cd-container::after {
  /* clearfix */
  content: '';
  display: table;
  clear: both;
}

/* -------------------------------- 

Main components 

-------------------------------- */
.cd-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: rgba(255, 255, 255, 0.80);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  z-index: 3;
}
.cd-header:after {
  content: "";
  display: table;
  clear: both;
}
.cd-header #cd-logo {
  float: left;
  margin: 13px 0 0 5%;
}
.cd-header #cd-logo img {
  display: block;
}
@media only screen and (min-width: 768px) {
  .cd-header {
    height: 70px;
  }
  .cd-header #cd-logo {
    margin: 10px 0 0 5%;
  }
}

.cd-main-nav {
  float: right;
  margin-right: 5%;
  width: 44px;
  height: 100%;
  background: url("../img/cd-icon-menu.svg") no-repeat center center;
  background-size: 44px 44px;
  cursor: pointer;
}
.cd-main-nav ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
.cd-main-nav ul.is-visible {
  -webkit-transform: translateY(50px);
  -moz-transform: translateY(50px);
  -ms-transform: translateY(50px);
  -o-transform: translateY(50px);
  transform: translateY(50px);
}
.cd-main-nav a {
  display: block;
  height: 50px;
  line-height: 50px;
  padding-left: 5%;
  background: #2f292a;
  border-top: 1px solid #00a1d4;
  color: #00a1d4;
  text-decoration: none;
}
@media only screen and (min-width: 768px) {
  .cd-main-nav {
    width: auto;
    height: auto;
    background: none;
    cursor: auto;
  }
  .cd-main-nav ul {
    position: static;
    width: auto;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    line-height: 70px;
  }
  .cd-main-nav ul.is-visible {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  .cd-main-nav li {
    display: inline-block;
    margin-left: 1em;
  }
  .cd-main-nav a {
    display: inline-block;
    height: auto;
    line-height: normal;
    background: transparent;
    padding: .6em 0.5em; /* original:.6em 1em; */
    border-top: none;
    color: #604f82;
    text-transform: uppercase;
    /*font-weight: bold; */
    font-size: 1.2rem;
  }
  .no-touch .cd-main-nav a:hover {
    color: #13A402;
  }
}

.cd-main-content {
  /* you need to assign a min-height to the main content so that the children can inherit it*/
  height: 100%;
  position: relative;
  z-index: 2;
}

.cd-fixed-bg {
  position: relative;
  min-height: 100%;
  /* height: 500px; */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left center;
  z-index: 2;
}

.cd-fixed-bg-kleiner {
	height:550px;
	min-height: initial;
}

.cd-fixed-bg h1, .cd-fixed-bg h2 {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 90%;
  max-width: 1170px;
  text-align: center;
  font-size:4rem;
  line-height:1.6em;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
  color: white;
}

.cd-fixed-bg.cd-bg-1 {
  background-image: url("../img/bg1.jpg");
}
.cd-fixed-bg.cd-bg-2 {
  background-image: url("../img/bg2.jpg");
}
.cd-fixed-bg.cd-bg-3 {
  background-image: url("../img/bg3.jpg");
}
.cd-fixed-bg.cd-bg-4 {
  background-image: url("../img/bg4.jpg");
}

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

	.cd-fixed-bg.cd-bg-1 {
		background-image: url("../img/bg1_small.jpg");
		background-position: center center;
		background-size: contain;		
	}

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

	.cd-fixed-bg.cd-bg-2 {
		background-image: url("../img/bg2_small.jpg");
		background-position: center center;
	}
	.cd-fixed-bg.cd-bg-4 {
		background-image: url("../img/bg4_small.jpg");
		background-position: center center;
	}

}
	
	
@media only screen and (min-width: 1170px) {
  .cd-fixed-bg {
    background-attachment: fixed;
  }
  .cd-fixed-bg h1, .cd-fixed-bg h2 {
    font-size: 3.4rem;
  }

  body, p, ul, li {
	font-size: 1.4rem;
	}
	
	h1, h2 {
	  font-size:3.4rem;
	  line-height:1.6em;  
	}
  
}

.cd-scrolling-bg {
  position: relative;
  /* min-height: 100%; */
  padding: 4em 0;
  padding-top: 2em;
  padding-bottom: 2em;  
  /* line-height: 1.6; */
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  z-index: 3;
}
.cd-scrolling-bg.cd-color-1 {
  background-color: #f9f6f3;
  color: #580a3c;
}
.cd-scrolling-bg.cd-color-2 {
  background-color: #fafffa;
  color: #095700;
} 
.cd-scrolling-bg.cd-color-3 {
  background-color: #fff7fc;
  color: #580a3c;
}
.cd-scrolling-bg.cd-color-4 {
  background-color: #f9f6f3;
  color: #5d554e;
}
@media only screen and (min-width: 768px) {
  .cd-scrolling-bg {
    padding: 8em 0;
    padding-top: 3em;
    padding-bottom: 3em;	
    /* font-size: 20px; */
    /* font-size: 1.25rem; */
    /* line-height: 2; */
    font-weight: 300;
  }
}

#button-rund-container {
	display: table-row;
	vertical-align: middle;
	height: 60px;
	text-align:center;
}

.button-rund {
	/* opacity: 0.5; */
	cursor: pointer;
	width: 51px;
	height: 51px;
}

.button-rund:hover {
	opacity: 0.5;
	width: 60px;
	height: 60px;
	-webkit-transition: all 0.25s ease-out;  
	   -moz-transition: all 0.25s ease-out;  
		 -o-transition: all 0.25s ease-out;  
			transition: all 0.25s ease-out;  
}

#trailerbutton_container {
	position: absolute;
	bottom: 0;
	z-index: 4;
	width: 100%;
	/* background-color:rgba(255,255,255,0.7); */
	/* background-color:rgba(163,2,108,0.8); */
	background-color:transparent;
	padding: 9px;
	cursor: pointer;
}


.centered{												
	margin-left: auto;
	margin-right: auto;
	display: table;
	text-align:center;
}

.aufzaehlung {
	padding-bottom:1.5rem;
}

.aufzaehlung li {
	padding-bottom:1.6rem;
	margin-left:66px; 
	list-style-type:disc;
}

.bg-icon-container {
	z-index:1;
	position:absolute;
	width:46%;
	right:5%;
	top:-10%;
}

.bg-icon {
	opacity:0.4;
	max-width:600px;
	width:100%
}


input[type="text"], input[type="password"], textarea, select { 
	padding:6px 12px; 
	color:#475107; 
	background-color: white;
	
	border: 1px solid white;
	-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
	behavior:url(border-radius.htc);	
	
	outline: 0;	/* http://stackoverflow.com/questions/3397113/how-to-remove-border-outline-around-text-input-boxes-chrome */
}


input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
	-webkit-box-shadow: inset 0px 0px 6px darkgray;  
	-moz-box-shadow: inset 0px 0px 6px darkgray; 
	box-shadow: inset 0px 0px 6px darkgray;
	border: 1px solid #475107;
	background-color: white;
	color:#475107; 
	
}
	
input[type="text"].error, input[type="password"].error, textarea.error, select.error  { 
	color:#475107;
	background-color:yellow;
	border-color: red;
}

.formularfehler {
	color:red;
	display:none;
}

.beschriftung {
	padding-right:22px;
	line-height: 0.8em;
	vertical-align: middle;
 }

.pflichtfeldstern {
  left: 5px;
  color: #aaaaaa;
  font-family: Georgia, Courier New;
  font-size: 33px;
  line-height: 33px;
  position: relative;
  top: -10px;
}

.klein {  color:gray; font-family: Condensed, Verdana, sans-serif; font-size:14px; line-height:1.2em; }


.link_button_green {
	position: relative;
    background-color: #2d7212;

	-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
	behavior:url(border-radius.htc);	
	/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
	
	/* erzeugt mit http://www.css3.me */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#76c159', endColorstr = '#2d7212');
	/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
	/*Element must have a height (not auto)*/
	/*All filters must be placed together*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#76c159', endColorstr = '#2d7212')";
	/*Element must have a height (not auto)*/
	/*All filters must be placed together*/
	background-image: -moz-linear-gradient(top, #76c159, #2d7212);
	background-image: -ms-linear-gradient(top, #76c159, #2d7212);
	background-image: -o-linear-gradient(top, #76c159, #2d7212);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#76c159), to(#2d7212));
	background-image: -webkit-linear-gradient(top, #76c159, #2d7212);
	background-image: linear-gradient(top, #76c159, #2d7212);
	/*--IE9 DOES NOT SUPPORT CSS3 GRADIENT BACKGROUNDS--*/
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	/*Use "background-clip: padding-box" when using rounded corners to avoid the gradient bleeding through the corners*/	
	
    background-repeat: repeat-x;
    border-color: #489629;
    border-image: none;
	
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    /* line-height: 20px; */
    margin-bottom: 0;
    padding: 11px 16px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 -1px 0 #2d7212;
    vertical-align: middle;
}

.link_button_green:hover {
    background-color: #76c159;
    /* background-position: 0 -15px; */
    color: #FFFFFF;
    outline: 0 none;
    text-decoration: none;
	
	/* erzeugt mit http://www.css3.me */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#2d7212', endColorstr = '#76c159');
	/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
	/*Element must have a height (not auto)*/
	/*All filters must be placed together*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#2d7212', endColorstr = '#76c159')";
	/*Element must have a height (not auto)*/
	/*All filters must be placed together*/
	background-image: -moz-linear-gradient(top, #2d7212, #76c159);
	background-image: -ms-linear-gradient(top, #2d7212, #76c159);
	background-image: -o-linear-gradient(top, #2d7212, #76c159);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#2d7212), to(#76c159));
	background-image: -webkit-linear-gradient(top, #2d7212, #76c159);
	background-image: linear-gradient(top, #2d7212, #76c159);
	/*--IE9 DOES NOT SUPPORT CSS3 GRADIENT BACKGROUNDS--*/
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	/*Use "background-clip: padding-box" when using rounded corners to avoid the gradient bleeding through the corners*/
	
	-moz-box-shadow: 0px 0px 6px gray;
	-webkit-box-shadow: 0px 0px 6px gray;
	box-shadow: 0px 0px 6px gray;

	/* info transition: http://www.mediaevent.de/css/transition.html */
    -webkit-transition: all 0.25s ease-out;  
    -moz-transition: all 0.25s ease-out;  
    -o-transition: all 0.25s ease-out;  
    transition: all 0.25s ease-out;  
	
}	

p.einrueckung {
	padding-top:22px;
	padding-bottom:22px;
	margin-top:33px;
	margin-bottom:66px;
	padding-left:30px;
	/* font-style:italic; */
	position:relative;
	/* font-size:1.3em; */
}

p.einrueckung.einrueckung_gruen {
	color:#13A402;
	border-left: 7px solid #13A402; 
}

p.einrueckung.einrueckung_blau {
	color:#298096;
	border-left: 7px solid #298096; 
}


#logo {
  background: url("../img/logo.png") no-repeat center center;
  width:322px;
  height:50px;
}

.absenden_button {
	padding-left:77px; padding-right:77px;
}

@media only screen and (max-width: 450px) {
	#logo {
	  background: url("../img/logo_klein.png") no-repeat center center;
	  width:50px;
	  height:50px;
	}
	
	.absenden_button {
		padding-left:11px; padding-right:11px;
	}
	
}

.pflichtfeld, .inputfeld {
	width:290px;
}

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

		.pflichtfeld, .inputfeld {
			width:180px;
		}
		
		.beschriftung {
			padding:0;
		}

	  .cd-fixed-bg h1, .cd-fixed-bg h2 {
		font-size: 2.9rem;
	  }
	
}



/* -------------------------------- 

Impressum

-------------------------------- */

#impressum {
	background-color:#333333;
}

#impressum p, #impressum a {
	color:silver;
}

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

	#impressum {
		background-color:white;
	}

	#impressum p, #impressum a, #impressum h2 {
		color:black;
		text-shadow:none;
	}

}