@charset "utf-8";

@import url("https://fast.fonts.net/lt/1.css?apiType=css&c=f2fae12b-aece-4250-a171-0d197d19e44f&fontids=5590868,5591111,5591154");

@font-face{
	font-family:"DIN";
	src:url("../webfonts/5590868/e39ef3e7-91b2-45d0-8c2f-cfdcd0c0ab94.woff2") format("woff2"),url("../webfonts/5590868/83ff78fa-6d76-4fb5-8bff-8af8eec8e368.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}
@font-face{
	font-family:"DIN";
	src:url("../webfonts/5591111/398e3e8c-3bf0-4af1-9791-f426a7992711.woff2") format("woff2"),url("../webfonts/5591111/4ba8e512-e6fb-494f-afd3-a7b68b2e5efb.woff") format("woff");
    font-weight: 500;
    font-style: normal;
}
@font-face{
	font-family:"DIN";
	src:url("../webfonts/5591154/55fa1cf8-baf8-4bf8-9718-b096b1dd231f.woff2") format("woff2"),url("../webfonts/5591154/4cadc2f9-fb32-4b99-b1f2-9ce6d68afbd5.woff") format("woff");
    font-weight: bold;
    font-style: normal;
}
@font-face{
	font-family:"DIN-Web-Pro-Bold";
	src:url("../webfonts/5591154/55fa1cf8-baf8-4bf8-9718-b096b1dd231f.woff2") format("woff2"),url("../webfonts/5591154/4cadc2f9-fb32-4b99-b1f2-9ce6d68afbd5.woff") format("woff");
    font-weight: bold;
    font-style: normal;
}

:root {
    scroll-behavior: auto;
}

html { 
	margin: 0px;
	height: 100%;
}
 
:focus {
	 outline:0; 
	 -moz-outline:0; 
}

img {
	vertical-align: baseline;
}

span,div {
/* 	zoom: 1; */
}			   

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

a {
	zoom: 1;
	color: inherit;
}
	
a img {
	border-width: 0px;
}	   

a:hover  {
	color: inherit;
}

/* form {
	margin: 0px;
	padding: 0px;
} */
	
sup { 
	vertical-align: baseline;
	position: relative;
	top: -0.5em;
	font-size: 70%;
}

.button {
	display: inline-block;
	-moz-appearance: none;
	-webkit-appearance: none;
	border: none;
	font-family: "DIN",sans-serif;
	font-size: 15px;
	line-height: 23px;
	font-weight: bold;
	text-transform: uppercase;
	background-color: #47583f;
	color: white;
	padding: 2px 12px;
	cursor: pointer;
	text-decoration: none;
	align-items: flex-start;
	white-space: pre;
}

.button:hover {
/* 	background-color: #626366; */
	background-color: #222326;
	color: white;
}

.button.light {	
	background-color: #b4cdaf;
	font-size: 21px;
	line-height: 23px;
	padding: 5px 16px;
	white-space: normal;
}

.button.light:hover {	
	background-color: #47583f;
}

body {	 
	position: relative;
	margin: 0;
	padding: 0px;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: "DIN",sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: black;
	height: 100%;
	overflow-x: hidden;
}	 

.smalltext {
	font-size: 13px;
	line-height: 13px;
}	

/**** HEADER ****/

.header {
	position: relative;
	max-width: 906px;
	height: 95px;
	margin: auto;
	padding: 0px 20px;
}

.header .wko-logo {
	position: absolute;
	right: 20px;
	top: 20px;
}

.header .menu {
	position: absolute;
	left: 20px;
	top: 45px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	font-size: 0; 
	line-height: 0;
}

.header .menu .menu-entry {
	position: relative;
	margin: 0;
	padding: 0;
	display: inline-block;
	font-size: 12px;
	line-height: 14px;
	font-weight: 500;
	text-transform: uppercase;
	margin-right: 50px;
	padding-bottom: 10px;
	cursor: pointer;
}

.header .menu .menu-entry:last-child {
	margin-right: 0px;
}

.header .menu .menu-entry a {
	text-decoration: none;
	color: #8da58e;
}

.header .menu .menu-entry.sel a, .header .menu .menu-entry a:hover {
	color: #626366;
}

.header .menu .menu-entry .submenu {
	display: none;
	position: absolute;
	left: -10px;
	top: 16px;
	z-index: 9999;
	background-color: rgba(226,240,230,0.9);
	list-style-type: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
	padding: 10px 10px 8px 10px;
}

.header .menu .menu-entry:hover .submenu {
	display: block;
}

.header .menu .menu-entry .submenu .submenu-entry {
	text-transform: none;
	padding-bottom: 4px;
}

.header .menu .menu-entry .submenu .submenu-entry a {
	color: #70706f;
}

.header .menu .menu-entry .submenu .submenu-entry a:hover {
	color: black;
} 

/**** SLIDES ****/

.header-slides {
	width: 100%;
	background-image: url(../img/slide-bg.png);
	background-size: contain;
	background-repeat: repeat-x;
	font-size: 0;
	line-height: 0;
}

.header-slides .slide-container {
	position: relative;
	width: 967px;
	max-width: 100%;
	margin: auto;
	border-left: solid 18px white;
	border-right: solid 18px white;
	overflow: hidden;
	white-space: nowrap;
	margin-bottom: 20px;
}

.header-slides .slide-container .slides {
	position: relative;
	left: 0px;
	top: 0px;
}

.header-slides .slide-container .slides .slide {
	display: inline;
}

.header-slides .slide-container .slide-dots {
	position: absolute;
	left: 0px;
	bottom: 21%;
	width: 100%;
	text-align: center;
	margin-left: 5px;
	margin-right: 5px;
}

.header-slides .slide-container .slide-dots .dot {
	margin-left: 3px;
	margin-right: 3px;
	opacity: 0.4;
	cursor: pointer;
}

.header-slides .slide-container .slide-dots .dot:hover, .header-slides .slide-container .slide-dots .dot.sel{
	opacity: 1;
}

.noslides {
	height: 100px;
}

.top-link {
	position: fixed;
	display: none;
	right: 30px;
	bottom: 50px;
}

/**** TEXTCONTENT ****/

.textblock {
	max-width: 791px;
	margin: auto;
	padding: 0px 20px 20px 20px;
}

.textblock.textpage {
	padding-top: 100px;
	padding-bottom: 120px;
}

.textblock.padding {
	padding-top: 50px;
	padding-bottom: 80px;
}

.block {
	padding: 40px 20px 30px 20px;
	margin-top: 15px;
	color: #47583f;
}

.block h1, .block h2, .textblock h1, .textblock h2 {
	font-size: 27px;
	line-height: 30px;
	font-weight: bold;
	margin-top: 0px;
	margin-bottom: 30px;
	text-transform: uppercase;
	text-align: center;
	color: #47583f;
}

.block h3, .textblock h3 {
	font-size: 22px;
	line-height: 26px;
	margin-bottom: 20px;
	font-weight: bold;
	color: #47583f;
}

.block h4, .textblock h4 {
	font-size: 19px;
	line-height: 22px;
	font-weight: bold;
	color: #47583f;
}

.textblock b, .textblock strong {
	color: #47583f;
}	

.lightgreen {
	background-color: #f2f6e3;
}

.green {
	background-color: #cce6de
}

.video {
	margin-top: 10px; 
}

.videotitel {
	font-size: 12px;
	line-height: 14px;
	text-align: center;
	margin-bottom: 40px;
}

.social-icon {
	position: relative;
	top: 2px;
	margin-left: 3px;
}

/**** PANELS ****/

.panels {
	font-size: 0;
	line-height: 0;
	text-align: center;
}

.panels .panel {
	width: 204px;
	display: inline-block;
	vertical-align: top;
	margin: 10px 27px 21px 27px;
	text-decoration: none;
}

.panels .panel .titel {
	padding-top: 7px;
	font-size: 13px;
	line-height: 16px;
}	

/**** FAQ ****/

.faq {
	max-width: 791px;
	margin: auto;
	padding-bottom: 20px;
	margin-top: -10px;
}

.faq .frage {
	font-weight: 500;
	font-size: 17px;
	line-height: 25px;
	padding-top: 6px;
}

.faq .frage a:hover {
	color: #222326;
}

.faq form {
	margin-top: 50px;
}

.faq form textarea {
	box-sizing: border-box;
	border: none;
	width: 100%;
	height: 50px;
	padding: 2px 5px;
	font-family: "DIN",sans-serif;
	font-size: 15px;
	line-height: 23px;
}

/**** KACHELN ****/

.kacheln {
	font-size: 0;
	line-height: 0;
	text-align: center;
	max-width: 816px;
	margin: auto;
}

.kachel {
	position: relative;
	width: 244px;
	height: 244px;
	display: inline-block;
	margin: 0px 14px 21px 14px;
}

.kachel .name {
	box-sizing: border-box;
	position: absolute;
	bottom: 0px;
	left: 0px;
	padding: 22px 15px 12px 15px;
	font-size: 11.5px;
	line-height: 13px;
	color: white;
	text-align: left;
	background: rgb(0,0,0);
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
	width: 100%;
	font-weight: 500;
}

.kachel .overlay {
	position: absolute;
	z-index: 99;
	left: 0px;
	top: 0px;
	opacity: 0;
	transition:opacity 200ms ease-out;
}

.kachel:hover .overlay {
	opacity: 1;
}

.thumbnail {
	position: relative;
	width: 244px;
	height: 162px;
	display: inline-block;
	margin: 0px 14px 21px 14px;
}

.kacheln .bildunterschrift {
	font-size: 14px;
	line-height: 16px;
	text-align: center;
}

/**** KONTAKTFORMULAR ****/

.kontaktformular {
	max-width: 460px;
	margin: auto;
	margin-top: 50px;
}

.kontaktformular .textfield {
	box-sizing: border-box;
	width: 100%;
	font-family: "DIN",sans-serif;
	font-size: 16px;
	line-height: 22px;
	margin-bottom: 8px;
	margin-top: 0px;
	padding: 2px 4px;
}

.kontaktformular textarea {
	height: 120px;
}

.kontaktformular .error {
	font-weight: bold;
	color: #47583f;
	margin-bottom: 20px;
}

/**** GEWINNSPIELFORMULAR ****/

.gewinnspielformular {
	max-width: 460px;
	margin: auto;
	margin-top: 50px;
}

.gewinnspielformular .textfield {
	box-sizing: border-box;
	width: 100%;
	font-family: "DIN",sans-serif;
	font-size: 16px;
	line-height: 22px;
	margin-bottom: 8px;
	margin-top: 0px;
	padding: 2px 4px;
}

.gewinnspielformular textarea {
	height: 120px;
}

.gewinnspielformular .error {
	font-weight: bold;
	color: #47583f;
	margin-bottom: 20px;
}

/**** FOOTER ****/

.footer {
	height: 220px;
	width: 100%;
	background-image: url(../img/footer-bg.png);
	background-repeat: repeat;
	background-size: 145px 6px;
}

.footer .footermenu {
	max-width: 831px;
	list-style-type: none;
	margin: 0 auto;
	padding: 20px;
}

.footer .footermenu .menu-entry {
	margin: 0;
	padding: 0;
	display: inline-block;
	font-size: 11px;
	line-height: 14px;
	font-weight: 500;
	text-transform: uppercase;
	margin-right: 35px;
	color: #d0dd8e;
}

.footer .footermenu .menu-entry a {
	text-decoration: none;
	color: #d0dd8e;
}

.footer .footermenu .menu-entry.sel a, .footer .footermenu .menu-entry a:hover {
	color: white;
}

/**** VIDEO-OVERLAY ****/

.video-overlay {
	display: none;
	position: fixed;
	z-index: 99999;
	left: 0px;
	top: 0px;
	background-color: rgba(0,0,0,0.9);
	width: 100%;
	height: 100%;
}

.video-overlay .inner {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}

.video-overlay .inner .video {
	position: relative;
	width: 80%;
}

.video-overlay .inner .video .video-close {
	position: absolute;
	right: 0px;
	top: 0px;
	cursor: pointer;
    text-align: center;
	font-weight: bold;
    font-size: 17px;
	line-height: 22px;
	padding: 2px 6px 4px 8px;
	color: white;
	text-decoration: none;
}

.video-overlay .inner .video .video-close:hover {
	background: rgba(0,0,0,0.3);
}

/**** QUIZ ****/

.quizheader {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #48583E;
	text-transform: uppercase;
	white-space: normal;
	padding: 0px 50px 100px 70px;
}
	
.quizheader.start { padding-left: 346px; }
.quizheader.ergebnis { padding-right: 346px; }
	
.quizheader .topline {
	font-size: 28px;
	line-height: 0.98;
	margin-bottom: 5px;
}
	
.quizheader h1 {
	margin: 0px;
	font-weight: bold;
	font-size: 66px;
	line-height: 0.98;
}
	
.quiztext {
	font-size: 22px;
	line-height: 1.3;
	padding-bottom: 70px;
}

.quiztext a { text-decoration: underline; }
/* .quiztext a:hover { text-decoration: underline; } */

.quiztext .button-container {
	margin-top: 30px;
	text-align: center;
}

.quiztext .button { text-decoration: none !important; }

.quiztext .antwort {
	display: block;
	position: relative;
	text-decoration: none !important;
	padding: 20px 20px 20px 50px;
}

.quiztext .antwort .antwort-nr {
	position: absolute;
	left: 20px;
	top: 20px;
	font-weight: bold;
}

.quiztext .antwort:hover {
	background-color: #F2F6E3;
}

/**** IMAGE SILDER ****/

.image-slider {
	margin-top: -100px;
	margin-bottom: 35px;
	position: relative;
}

.image-slider .slide {
	position: absolute;
	left: 0px;
	top: 0px;
	display: none;
}

.image-slider #slide-0 { display: block; }

.image-slider .bildunterschrift {
	font-size: 12px;
	text-align: right;
}

/**** SMALL SCREENS ****/

@media only screen and (max-width: 1000px) {	
	.quizheader { padding: 0vw 5vw 10vw 7vw; }
	.quizheader.start { padding-left: 34.6vw; }
	.quizheader.ergebnis { padding-right: 34.6vw; }
	.quizheader .topline { font-size: 2.8vw; margin-bottom: 1vw; }
	.quizheader h1 { font-size: 6.6vw; }
}

@media only screen and (max-width: 906px) {	
	.kacheln { margin: 0px -14px; max-width: none; }
	.top-link { right: 20px; bottom: 20px; }
}

@media only screen and (max-width: 890px) {	
	.header .menu .menu-entry { margin-right: 30px; }
}

@media only screen and (max-width: 770px) {	
	.header .menu .menu-entry { margin-right: 25px; }
}

@media only screen and (max-width: 740px) {	
	.header .menu .menu-entry { margin-right: 20px; }
}

@media only screen and (max-width: 710px) {	
	.header .menu .menu-entry { margin-right: 15px; }
}


@media only screen and (max-width: 680px) {	
	.header { height: 95px; }
/* 	.header .social-icons { top: 0px; } */
	.header .menu { position: relative; left: 0px; top: 0px; padding-top: 65px; }
	.header .menu .menu-entry { margin-right: 0px; text-align: center; position: static; }
	.header .menu .menu-entry.home { position: absolute; top: 17px; left: 0px; text-align: left; }
	.header .menu .menu-entry.gewinnspiel { position: absolute; top: 31px; left: 160px; text-align: left; width: auto; }
	.header .menu .menu-entry.ueber-uns { text-align: left; width: 15%; }
	.header .menu .menu-entry.berufsgruppen { text-align: center; width: 30%; }
	.header .menu .menu-entry.aktuelles { text-align: center;  width: 20%;}
	.header .menu .menu-entry.firmen { text-align: center;  width: 20%;}
	.header .menu .menu-entry.kontakt { text-align: right; width: 15%; }
	.header .menu .menu-entry .submenu { width: calc(100% + 4px); text-align: left; left: -2px; top: 85px; padding-bottom: 4px; white-space: normal; }
	.header .wko-logo { top: 16px; }
	.block h1, .block h2, .textblock h1, .textblock h2 { font-size: 20px; line-height: 23px; }
	.header .menu .menu-entry .submenu .submenu-entry { padding-bottom: 8px; }
	.textblock.textpage { padding-top: 50px; padding-bottom: 60px; }
	.button.light {	font-size: 18px; line-height: 21px; }
	.quiztext { font-size: 18px; }
	.image-slider { margin-top: -50px; }
}

@media only screen and (max-width: 450px) {	
	.header { height: 85px; }
	.header .menu { padding-top: 61px; }
	.header .menu .menu-entry.home { top: 22px; }
	.header .menu .menu-entry.ueber-uns { position: absolute; top: 36px; left: calc(50% - 10px); text-align: left; width: auto; }
	.header .menu .menu-entry.gewinnspiel { position: absolute; top: 36px; left: auto; right: 0px; text-align: right; width: auto; }
	.header .menu .menu-entry.berufsgruppen { text-align: left; width: 33%; }
	.header .menu .menu-entry.aktuelles { text-align: center;  width: 25%;}
	.header .menu .menu-entry.firmen { text-align: center;  width: 25%;}
	.header .menu .menu-entry.kontakt { text-align: right; width: 17%; }
	.header .wko-logo { top: 8px; }
	.header .wko-logo img { width: 65px; }
}