@import url("font-awesome.min.css");
@import url("footer.css");

/* Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font-family: 'Arial', sans-serif;
	}
	p {
		font-size: 16px;
		line-height: 1.5em!important;
		color: #444444;
		font-family: Arial, Helvetica, sans-serif;
		line-height: 1.5em;
	}
	nav ol, nav ul {
		list-style: none;
	}
	.naviga {
		min-height: 80px!important;
		max-height: 80px!important;
	}
	ul, ol {
		margin: 5px 0 0 15px!important;
	}
		ul li, ol li {
			color: #444444;
		}
	div {
		font-size: 16px!important;
		line-height: 1.2em!important;
		box-sizing: border-box;
	}

/* Basic */
	@-ms-viewport {
		width: device-width;
	}
	.center {
		text-align: center;
	}
	input, textarea, select {
		font-family: 'Source Sans Pro', sans-serif;
		font-weight: 400;
		color: #222222;
		line-height: 1em;
	}
	::-webkit-input-placeholder,
	::-moz-placeholder,
	:-ms-input-placeholder { 
		color: #999999;
	}
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
		color: inherit;
		text-decoration: none;
	}	
	h1 {
		font-size: 2em;
		font-weight: 400;
		color: #FFF;
		text-align: center;
		line-height: 1.5em;
		text-transform: uppercase;
	}	
	h2 {
		font-weight: bold;
		color: #444444;
		font-size: 22px;
		padding: 20px 0;
		margin: 0;
		line-height: normal;
	}
	h3 {
		color: #52575c;
		font-size: 18px;
		font-weight: bold;
		padding: 0 0 2px 0;
	}
	h4 {
		font-size: 18px;
		padding-bottom: 10px;	
		font-weight: bold;
	}
	a {
		color: #666;
		text-decoration: none;
	}
		a:hover {
			color: #000000;
		}
	strong, b {
		font-weight: bold!important;
	}
	em, i {
		font-style: italic;
	}
	sub {
		position: relative;
		top: 0.5em;
		font-size: 0.8em;
	}
	sup {
		position: relative;
		top: -0.5em;
		font-size: 0.8em;
	}
	hr {
		border: 0;
		border-top: solid 1px #c2c7cc;
	}
	.clear {
		clear: both;
	}

/* Wrappers */
	.wrapper {
		background-color: #F2F2f2;
		background-position: bottom;
		background-repeat: no-repeat;
		background-size: 100%;
		overflow-x: hidden;
		padding: 3em 0 5em 0;
	}
	#header-wrapper {
		background-color: #FFFFFF;
		padding-top: 18em;
		background-image: url(https://www.jobroboter.de/selbsteingabe/headerbild.jpg);
		background-size: 100%;
	}
	#content {
		width: 1400px;
		margin: 0 auto;
	}

/* Form */
	textarea {
		width: 100%;
		min-height: 50px;
		font-size: 14px;
	}
	input[type="text"],
	input[type="tel"],
	input[type="email"],
	input[type="number"],
	input[type="url"],
	input[type="search"] {
		width: 100%;
		padding: 2px 5px;
		line-height: 1.2em;
		font-size: 14px;
	}
	label:hover {
		cursor: pointer;
		color: #000000!important;
	}
	input[type="submit"] {
		border: 1px solid #666666;
		border-radius: 12px;
		background-color: #FFFFFF;
		font-size: 20px;
		padding: 10px 40px;
		text-align: center;
		color: #444444;
		transition: 0.2s;
		cursor: pointer;
		min-width: 220px;
	}
		input[type="submit"]:hover {
			border: 1px solid #000000;
			background-color: #666666;
			color: #FFFFFF;
			box-shadow: 0 0 5px #999999;
		}
	
/* Custom */			
	.titel {
		background: rgba(150, 150, 150, 0.7);
		padding: 2em 0 0.5em 0;	
		height: 6em;
	}
	.erfolg {
		font-size: 24px;
		font-weight: bold;
		color: #009000;
		text-align: center;
		padding-bottom: 20px;
	}
	.fehler {
		font-size: 24px;
		font-weight: bold;
		color: #c00000;
		text-align: center;
		padding-bottom: 20px;
	}

	.fortschritt {
		width: 100%;
		margin: 20px 0;
	}
		.pflinie1 {
			height: 13px;
			border-bottom: 1px solid #666666;
			width: 14%;
			float: left;
		}
		.pflinie2 {
			height: 13px;
			border-bottom: 1px solid #666666;
			width: 20%;
			float: left;
		}
		.pfschritt {
			width: 3%;
			float: left;
		}
			.pfschritt .pfsaktiv {
				width: 25px;
				height: 25px;
				border: 1px solid #f4852b;
				background-color: #FFFFFF;
				box-shadow: 0 0 5px #666666;
				margin: 0 auto;
				border-radius: 50%;
			}
			.pfschritt .pfserledigt {
				width: 100%;
				font-size: 24px!important;
				margin-top: -5px;
				text-align: center;
				font-style: italic;
				color: #00B000;
			}
			.pfschritt .pfszukunft {
				width: 25px;
				height: 25px;
				border: 1px solid #766666;
				background-color: #F9F9F9;
				margin: 0 auto;
				border-radius: 50%;
			}
		.pfunterschrift {
			width: 92%;
			margin: 5px auto;
		}
		.pftext {
			width: 25%;
			float: left;
			text-align: center;
		}

	.eingabeblock {
		width: 100%;
		margin: 15px 0 10px 0;
	}
		.eingabeblock .editorarea {
			background-color: #FFFFFF;
			width: 67%;
			margin-right: 3%;
			float: left;
		}
		.eingabeblock .editortext {
			width: 67%;
			margin-right: 3%;
			float: left;
		}
		.eingabeblock .beschreibung {
			background-color: #686868;
			color: #EFEFEF;
			padding: 15px 10px;
			width: 30%;
			float: left;
		}
			.eingabeblock .beschreibung ul li {
				color: #EFEFEF;
			}
			.eingabeblock .beschreibung a {
				color: #FFFFFF;
				text-decoration: underline;
			}
				.eingabeblock .beschreibung a:hover {
					color: #E0E0E0;
				}

		.formfeld {
			margin: 5px 0 1px 0;
		}
		.ta1 {
			height: 60px;
		}
		.ta2 {
			height: 30px;
		}
		.ta3 {
			height: 150px;
		}
		.tb1 {
			height: 95px;
		}
		.tb2 {
			height: 85px;
		}
		.tb3 {
			height: 185px;
		}
		.tb4 {
			height: 50px;
		}
		.tb5 {
			height: 320px;
		}
		.tb6 {
			height: 298px;
		}
		.logoupload {
			padding: 30px 50px;
		}
/* Logo drag and drop */
.file-upload {
	width: 48%;
	min-height: 150px;
	margin-right: 4%;
	float: left;
}
.file-search {
	width: 48%;
	float: left;
}
  
.file-upload-btn {
	width: 100%;
	height: 120px;
	margin: 0;
	color: #666666;
	background: #FFFFFF;
	border: 1px solid #666666;
	padding: 10px;
	border-radius: 10px;
	transition: all .2s ease;
	text-align: center;
	cursor: pointer;
	font-size: 20px;
	font-weight: 700;
	font-family: Helvetica, 'Source Sans Pro', sans-serif;
} 
  
.file-upload-btn:hover {
	background-color: #999999;
	color: #FFFFFF;
}
  
  .file-upload-btn:active {
	border: 0;
	transition: all .2s ease;
}
  
.file-upload-content {
	display: none;
	text-align: center;
}
  
.file-upload-input {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	outline: none;
	opacity: 0;
	cursor: pointer;
}
  
.image-upload-wrap {
	width: 100%;
	height: 120px;
	margin: 0;
	color: #666666;
	background: #FFFFFF;
	border: 1px solid #666666;
	padding: 0;
	border-radius: 10px;
	transition: all .2s ease;
	text-align: center;
	cursor: pointer;
}
	.dadlogo {
		margin: -94px 0 0 0;
		color: #666666;
		font-size: 20px!important;
		font-weight: 700;
		font-family: Helvetica, 'Source Sans Pro', sans-serif;
	}
  
.image-dropping,
.image-upload-wrap:hover {
	background-color: #999999;
	color: #FFFFFF;
}
  
.image-title-wrap {
	padding: 0 15px 15px 15px;
	color: #222;
}
  
.drag-text {
	text-align: center;
}
  
.drag-text h3 {
	font-weight: 100;
	text-transform: uppercase;
	color: #15824B;
	padding: 60px 0;
}
  
.file-upload-image {
	max-height: 200px;
	max-width: 200px;
	margin: auto;
	padding: 20px;
}
  
.remove-image {
	width: 90%;
	margin: 0;
	color: #fff;
	background: #cd4535;
	border: none;
	padding: 10px;
	border-radius: 4px;
	border-bottom: 4px solid #b02818;
	transition: all .2s ease;
	outline: none;
	text-transform: uppercase;
	font-weight: 700;
}
  
.remove-image:hover {
	background: #c13b2a;
	color: #ffffff;
	transition: all .2s ease;
	cursor: pointer;
}
  
.remove-image:active {
	border: 0;
	transition: all .2s ease;
}

	#replacelogo {
		display: none;
	}
	.changelogo {
		width: 250px;
		text-align: center;
		margin: 10px 0 0 0;
		color: #fff;
		background: #cd4535;
		border: none;
		padding: 10px;
		border-radius: 4px;
		border-bottom: 4px solid #b02818;
		transition: all .2s ease;
		outline: none;
		text-transform: uppercase;
		font-weight: 700;	
		transition: 0.2s;
	}
		.changelogo:hover {
			background: #c13b2a;
			color: #ffffff;
			cursor: pointer;	
			box-shadow: 0 0 5px #444444;
		}
	.logoansicht {
		height: 150px;
		box-shadow: 0 0 15px #666666;
	}
	.logoposition {
		margin: 20px 0 0 0;
	}
		.logolmr {
			width: 15%;
			margin-right: 5%;
			padding: 10px 0;
			font-size: 18px;
			color: #444444;
			float: left;
		}
	.whitefull {
		margin: 20px 0;
		padding: 20px 30px;
		background-color: #FFFFFF;
	}
	.zusatzleistung1 {
		background-color: #FFFFFF;
		width: 32.33%;
		padding: 20px 50px;
		float: left;
	}
	.zusatzleistung2 {
		background-color: #FFFFFF;
		width: 32.33%;
		padding: 20px 50px;
		margin: 0 1.5%;
		float: left;
	}
		.zusatzleistung1 .oben,
		.zusatzleistung2 .oben {
			height: 150px;
		}
		.zusatzleistung1 .unten,
		.zusatzleistung2 .unten {
			font-size: 20px;
			color: #444444;	
			text-align: right;
		}
		.zltop {
			font-size: 18px;
			font-weight: bold;
			text-align: center;
			margin: -20px -50px 10px -50px;
			padding: 10px 0;
			color: #FFFFFF;
			background-color: #999999;
		}
	.buttonleft {
		margin: 30px 0;
		width: 50%;
		float: left;
	}	
	.buttonright {
		margin: 30px 0;
		width: 50%;
		float: left;
		text-align: right;
	}
	.ortvorschlagtext {
		font-size: 14px;
		margin: 4px 10px;
	}
	.frame {
		width: 100%;
	}
		.frame iframe {
			width: 100%;
		}
	.warenkorb {
		background-color: #e9e9e9;
		padding: 15px 15px 5px 15px;
	}
		.wk1 {
			width: 42%;
			padding: 5px 10px;
			margin: 0 0.5% 10px 0;
			float: left;
			background-color: #FFFFFF;
		}
		.wk2 {
			width: 17%;
			padding: 5px 10px;
			margin: 0 0.5% 10px 0.5%;
			text-align: right;
			float: left;
			background-color: #FFFFFF;
		}
		.wk3 {
			width: 3%;
			padding: 5px 10px;
			margin: 0 0 10px 0.5%;
			float: left;
			text-align: center;
			background-color: #FFF9F9;
			transition: 0.2s;
		}
			.wk3 input[type="submit"] {
				margin: -5px -10px;
				padding: 5px 10px;
				background-color: transparent;
				border: none;
				width: auto;
				min-width: auto;
			}
				.wk3 input[type="submit"]:hover {
					box-shadow: none;
					border: none;
				}
			.wk3:hover {
				background-color: #FF6060;
				color: #FFFFFF;
			}
		.wk3add {
			width: 3%;
			padding: 5px 10px;
			margin: 0 0 10px 0.5%;
			float: left;
			text-align: center;
			background-color: #F9FFF9;
			transition: 0.2s;
		}
			.wk3add input[type="submit"] {
				margin: -5px -10px;
				padding: 5px 10px;
				background-color: transparent;
				border: none;
				width: auto;
				min-width: auto;
				font-weight: bold;
			}
				.wk3add input[type="submit"]:hover {
					box-shadow: none;
					border: none;
				}
			.wk3add:hover {
				background-color: #60D060;
				color: #FFFFFF;
			}
		
		.zusatz {
			background-color: #FFFFFF;
			width: 96%;
			margin: 0 0.5% 10px 0;
			padding: 5px 10px;
			float: left;
		}
		.zusatzadd {
			background-color: #FFFFFF;
			width: 96%;
			margin: 0 0.5% 10px 0;
			padding: 5px 10px;
			text-align: right;
			float: left;
		}
			.zusatzadd input[type="submit"] {
				margin: -5px -10px;
				padding: 7px 10px;
				background-color: #F0FFF0;
				border: none;
				border-radius: 0;
				font-size: 16px;
				width: 101.5%;
				min-width: auto;
				text-align: right;
			}
				.zusatzadd input[type="submit"]:hover {
					background-color: #60D060;
					box-shadow: 0 0 5px #666666;
					border: none;
				}
			.zusatzleft {
				width: 50%;
				float: left;
			}
			.zusatzright {
				width: 50%;
				text-align: right;
				float: left;
			}
	.kasseleft {
		width: 70%;
		margin-right: 5%;
		float: left;
	}
		.anschrift {
			background-color: #FFFFFF;
			padding: 5px 10px 15px 10px;
		}
			.anschrift h3 {
				margin-top: 10px;
			}
			.kassesmall {
				width: 49%;
				margin-right: 1%;
				float: left;
			}
			.kassemini {
				width: 19%;
				margin-right: 1%;
				float: left;
			}
			.kassebig {
				width: 79%;
				margin-right: 1%;
				float: left;
			}
		.zahlung {
			margin: 0 0 20px 0;
			background-color: #FFFFFF;
			padding: 10px 10px 15px 10px;
		}
			.zahlung1 {
				width: 85%;
				float: left;
			}
			.zahlung2 {
				width: 15%;
				text-align: right;
				float: left;
			}
				.zahlungleft {
					width: 25%;
					margin-right: 5%;
					float: left;
				}
				.zahlungright {
					width: 69%;
					margin-right: 1%;
					float: left;
				}
					.zr1 {
						width: 44%;
						margin-right: 1%;
						float: left;
					}
					.zr2 {
						width: 54%;
						margin-right: 1%;
						float: left;
					}
	.kasseright {
		width: 25%;
		float: left;
	}
		.kassewarenkorb {
			background-color: #FFFFFF;
			padding: 10px 15px;
		}
	.wkleft {
		width: 75%;
		margin: 5px 5% 0 0;
		float: left;
	}
	.wkright {
		width: 20%;
		font-weight: bold;
		text-align: right;
		float: left;
	}
	.hakenkreis {
		width: 150px;
		height: 150px;
		margin: 0 auto 20px auto;
		padding-top: 35px;
		border: 2px solid #00B000;
		border-radius: 50%;
		font-size: 50px!important;
		color: #00B000;
		background-color: #FFFFFF;
		text-align: center;
		font-style: italic;
	}
	.buttonerneut {
		width: 250px;
		margin: 20px auto;
	}
		.buttonerneut a div {
			padding: 20px 0;
			text-align: center;
			background-color: rgba(0, 220, 0, 0.5);
			border: 1px solid #00B000;
			border-radius: 10px;
			color: #000000;
			transition: 0.2s;
		}
		.buttonerneut a:hover div {
			background-color: #009000;
			color: #FFFFFF;
			box-shadow: 0 0 5px #000000;
		}
	.titelleft {
		width: 10%;
		margin-right: 5%;
		float: left;
	}
	.titelright {
		width: 85%;
		float: left;
	}
	.change, .schalten {
		font-size: 20px;
		font-weight: bold;
		color: #444444;
	}
/* Wenn Auflösung zu klein */
	.anzeigeklein {
		display: none;
		padding: 50px;
	}
	.anzeigegross {
		display: block;
	}


/* kleinere Auflösungen */
	@media screen and (max-width: 1630px) {
		#header-wrapper {
			padding-top: 12.5em;
		}
	}
	
	@media screen and (max-width: 1540px) {
		#header-wrapper {
			padding-top: 11.8em;
		}
		.titel {
			background: rgba(250, 250, 250, 0.7);
			padding: 0.5em 0;
			height: 4.2em;	
		}
	}
	
	@media screen and (max-width: 1440px) {
		#header-wrapper {
			padding-top: 9.7em;
		}
		#content {
			width: 1100px;
		}
		.zusatzleistung1,
		.zusatzleistung2 {
			padding: 30px;
		}
		.zltop {
			margin: -30px -30px 10px -30px;
		}
	}
	
	@media screen and (max-width: 1360px) {
	}
	
	@media screen and (max-width: 1280px) {
		#header-wrapper {
			padding-top: 7em;
		}
		.zltop {
			font-size: 14px;
			margin: -30px -15px 10px -15px;
		}
		.zusatzleistung1,
		.zusatzleistung2 {
			padding: 30px 15px;
		}
		.naviga {
			padding: 0 0.5em;
			min-height: 150px!important;
			max-height: 150px!important;
		}
	}
	@media screen and (max-width: 1280px) {
		#content {
			width: 850px;
		}
		.eingabeblock .editorarea,
		.eingabeblock .editortext {
			width: 100%;
			margin: 5px 0;
		}
		.eingabeblock .beschreibung {
			width: 100%;
			padding: 5px 10px;
			margin-bottom: 15px;
		}
		.tb1, .tb2, .tb3, .tb4, .tb5, .tb6 {
			height: auto;
		}
		.zusatzleistung1 .oben,
		.zusatzleistung2 .oben {
			height: 200px;
		}
	}

	@media screen and (max-width: 1080px) {
		.wrapper {
			padding: 2em 20px 11em 20px;	
		}
		#header-wrapper {
			padding-top: 5.6em;
		}
		.titel {
			padding: 0.5em 0;
			height: 4em;	
		}
	}

	@media screen and (max-width: 900px) {
		.wrapper {
			padding: 2em 0 4em 0;	
		}
		#header-wrapper {
			padding-top: 5em;
		}
		.anzeigeklein {
			display: block;
		}
		.anzeigegross {
			display: none;
		}
		.naviga {
			min-height: 100px!important;
			max-height: 100px!important;
		}
	}

	@media screen and (max-width: 820px) {
		#header-wrapper {
			padding-top: 9.2em;
		}
		.titel {
			background: #fff;	
		}
	}

	@media screen and (max-width: 736px) {
		h1 {
			font-size: 1.5em;	
		}
		#header-wrapper {
			padding-top: 8.3em;
		}
	}
	
	@media screen and (max-width: 600px) {
		#header-wrapper {
			padding-top: 0;
			background-image: none;
		}
		.titel {
			height: auto;	
		}
	}

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