/*root*/
:root {
	--button_color_grey: #9e9e9e82;
	--button_color_grey_hover: #9e9e9e;
	--button_color_grey_border: #9e9e9e82;
	--button_color_grey_text: black;
	
	
}



body {
	margin: 0px;
	/*overflow: hidden;*/
	background-color: #f1f5f8;
	font-family: Open Sans Light, sans-serif;
    font-size: 18px;
    line-height: 1.4em;
    padding: 0;
    color: #333;
   /* margin-bottom: 5rem;*/
    background-image: url("../img/background.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body::-webkit-scrollbar {
	display:none;
}

.site .output .form {
	max-width: 730px;
    margin: 0px auto;
    margin-top: 50px;
    padding: 25px;
    /*background: #fff;
    border: 1px solid #e0e4eb;*/
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background-color: #efefef;
    opacity: 0.95;
   
    /*border: 1px solid red;*/
     
}

@media only screen and (min-device-width: 600px) {
	.form {
		min-width: 40rem !important;	
	}
}

@media only screen and (max-device-width: 480px){
	body {
		color:rgb(0, 0, 0) !important;
		background-image: url("../img/background.jpg"); 
		-webkit-background-size: cover;
  		-moz-background-size: cover;
  		-o-background-size: cover;
  		background-size: cover;
  		font-size: 28px;
	}
	
	.site .output{
		width:95%;	
		overflow:hidden;
	}
	
	.site .output .form{
		width: auto !important;
		max-width:80% !important;
		height: fit-content;	
	}
	.site .output .form .container_input input {
		height: 2rem;
		font-size: 25px;
	}
	.site .output .form .container_input .kunde .container_anschrift .container_street_number {
		display: flex;
    	flex-direction: column;
	}
	.site .output .form .container_input .kunde .container_anschrift .container_ort {
		display: flex;
    	flex-direction: column;
	}
	.site .output .form .container_input .ap .name .input {
		display: flex;
		flex-direction: column;
	}
	.site .output .form .container_input input {
		width: 50%;
	}
	input[type="submit"] {
		border: none;
	    cursor: pointer;
	    font-size: 25px;
	    align-items: baseline;
	    background-color: #79a448;
	    border-radius: 4px;
	    color: #fff;
	    font-family: system-ui, sans-serif;
	    font-weight: 400;
	    line-height: 1em;
	    padding: .7em 1em;
	    text-align: center;
	    text-decoration: none;
	    transition: background-color .1s ease-out;
	    margin-top: 5px;
	    width: 210px;
	    max-width: 80%;
		}
	.site .output .form .container_accept .line input[type="checkbox"] {
	    margin-right: 10px;
	    width: 10%;
	    height: 40px;
	    cursor: pointer;
	    padding: 5px;
	    vertical-align: middle;
		}
	.site .output .form .container_input .div_question select {
		padding: 8px 25px;
	    border: 1px solid #ddd;
	    border-radius: 4px;
	    box-sizing: border-box;
	    background-color: #fff;
	    cursor: pointer;
	    font-size: 25px;
	    margin-top: 8px;
		}
	.site .output .form .container_input .kunde .name {
	    display: flex;
	    flex-direction: column;
		}
}

@media only screen and (min-device-width: 481px){
		.site .output .form .submit input[type="submit"] {
			border: none;
		    cursor: pointer;
		    font-size: 16px;
		    align-items: baseline;
		    background-color: #79a448;
		    border-radius: 4px;
		    color: #fff;
		    font-family: system-ui, sans-serif;
		    font-weight: 400;
		    line-height: 1em;
		    padding: .6em 1em;
		    text-align: center;
		    text-decoration: none;
		    transition: background-color .1s ease-out;
		    margin-top: 5px;
		    width: 160px;
		    max-width: 50%;
		}
		.site .output .form .container_accept .line input[type="checkbox"] {
			margin-right: 5px;
			width: 16px;
			cursor: pointer;
		}
		.site .output .form .container_input .div_question select {
			padding: 4px;
		    border: 1px solid #ddd;
		    border-radius: 4px;
		    box-sizing: border-box;
		    background-color: #fff;
		    cursor: pointer;
		    font-size: 18px;
			}

	}


.site .output .form .container_accept {
	margin: 5px;
    display: flex;
    flex-direction: column;
    border-top: 1px solid #0098ce;
	padding: 10px;
	font-size:10px;
}

.site .output .form .container_accept .line {
	display: flex;
	/*margin: 3px 0px;*/
	font-size: 14px;
    margin-top: 7px;
}

.site .output .form .container_accept .line .text {
	margin-left: 8px;
	border-bottom: 1px solid #ddd;
}

.site .output .form .container_input input[name='kunde_name'] {
	width: 50%;
}

.site .output .form .container_input input[name='ap_mail'] {
	width: 50%;
}

.site .output .form .container_input input, select {
	margin: 5px;
	border: 1px solid #ddd;
	border-radius: 3px;
	padding: 5px;
	font-size: 17px;
}

.site .output .form .container_input .kunde {
	border-top: 1px solid #0098ce;
	padding: 10px;
}

.site .output .form .container_input .kunde .mail_error {
    font-weight: bold;
    color: red;
    text-decoration: underline;
    text-align: center;
    margin: 10px 0px;
}

.site .output .form .container_input .kunde .container_anschrift .container_street_number {
	display: flex;
}

.site .output .form .container_input .kunde .container_anschrift .container_ort {
	display:flex;
}

.site .output .form .container_input .kunde .name {
	display: flex;
	/*margin: 5px 0px;
	border-top: 1px solid #0098ce;
	padding: 10px;*/
	}

.site .output .form .container_input .ap .name {
	display:flex;
	flex-direction: column;
}

.site .output .form .container_input .ap .name .input {
	display: flex;
	margin-left: 5px;
}

.site .output .form .container_input .ap .mail {
	margin-left: 10px;
}

.site .output .form .submit {
	margin-left: 15px;
}
.site .output .form .submit input[type="submit"]:hover {
	background-color: #006494;
}


.container_part {
	    margin-top: 8px;	
}


/*Gewinnspielfrage*/
.site .output .form .container_input .div_question {
	margin: 5px;
    display: flex;
    flex-direction: column;
    border-top: 1px solid #0098ce;
	padding: 10px;
}

.div_question_add {
	border: unset;
}

.div_question_add .div_question {
	border:unset !important;
}

.div_submit input[type="submit"] {
	background-color: #006b99;
	padding: .5em 1em !important;
	color: #fff;
	cursor: pointer;
	margin-left: 50px !important;
} 


.site .output .form .container_input .div_question .div_text {
	margin-left: 10px;
	margin-bottom: 5px;
}

.site .output .form .container_input .div_question .div_text a {
	color: rgb(0, 0, 255);
	cursor: pointer;
}

.site .output .form .container_input .div_question .div_gewinne {
	display: none;
	margin-left: 20px;
	margin-bottom: 5px;
}

.site .output .form .container_input .div_question .div_input {
	margin-left: 5px;
    margin-bottom: 5px;
}

.site .output .form .container_input .div_question .div_head {
	font-weight: bold;
	margin-left: 3px;
}

/*TITEL*/
.site .output .form .title .banner {
	background: #0098ce;
    font-weight: bold !important;
    position: relative;
    line-height: 48px;
    padding: 0 16px;
    display: inline-block;
    color: #FFFFFF !important;
    margin-bottom: 25px;
    font-size: 25px;
}

.site .output .form .title .banner:after {
	content: '';
    position: absolute;
    top: 0;
    right: -48px;
    border-top: 24px solid #0098ce;
    border-left: 24px solid #0098ce;
    border-bottom: 24px solid transparent;
    border-right: 25px solid transparent;
}

.site .output .form .title .text {
	text-align: center;
	margin: 15px;
	font-weight: bold;
	margin-bottom: 3px;
}

.site .output .form .title .div_message {
	color: red;
	text-align: center;
    font-weight: bold;
    padding-bottom: 15px;
}

.site .output .form .title .datetime {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.site .output .form .title .div_button {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 15px;
    border-top: 1px solid #ddd;
    padding-top: 10px;
}

.site .output .form .title .div_button a {
    padding: 5px;
    border-radius: 3px;
    background: var(--button_color_grey);
    cursor: pointer;
    color: var(--button_color_grey_text);
}

.site .output .form .title .div_button a:hover {
	background-color: var(--button_color_grey_hover);
}


/*zusätzliche Besucher für CRM*/
.site .output .form .container_input .container_extern {
	margin: 5px 0px;
	border-top: 1px solid #0098ce;
	padding: 10px;
}

.site .output .form .container_input .container_extern .button {
	display: flex;
}

.site .output .form .container_input .container_extern .button button {
	border: none;
    cursor: pointer;
    font-size: 15px;
    align-items: baseline;
    background-color: #9e9e9e82;
    border-radius: 4px;
    color: black;
    font-family: system-ui,sans-serif;
    font-weight: 400;
    line-height: 1em;
    padding: .5em 1em;
    text-align: center;
    text-decoration: none;
    transition: background-color .1s ease-out;
    margin-top:5px;
    width:150px;
    max-width: 80%;
    margin-right: 15px;
}

.site .output .form .container_input .container_extern .button button:hover {
	background-color: #9e9e9e;
}

tr {
	display: flex;
}

td {
	display: flex;
}

.site .output .form .container_input .container_extern .vorname, .nachname {
	width: 11rem;
}

.site .output .form .container_input .container_extern .mail {
	width: 13rem;
}

/*Endseite*/
.site .output .endsite {
	width: fit-content;
    margin: 0rem auto;
    margin-top: 120px;
    padding: 25px;
    border: 1px solid #e0e4eb;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-weight: bold;
        background-color: #fff;
    opacity: 0.8;
}

/*Fehlerseite*/
.site .output .error {
	width: fit-content;
    margin: 0rem auto;
    margin-top: 50px;
    padding: 25px;
    border: 1px solid #e0e4eb;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-weight: bold;
}


/*evaluation station*/
.evaluation_station {
	margin-top: 40%;
    display: flex;
    justify-content: center;
}

.info_text{
	
	font-size:12px;
}

.site_footer{
	text-align:center;
	margin-top:40px;
	height:100%;
	position:relative;
	bottom:0px; 
}

.site_footer_logo{
	line-height:18px;
	border: 0px solid red;
	height:98px;
	position:relative;
}

.site_footer_space{
	background-color:#fff;
	width:100%;
	height:60px;
	padding-top:20px;

	
}
.logo_skw{
	width:120px; 
	/*padding:20px;*/
	padding-bottom:40px;
	background-color:#fff;
	margin-left: 0px;
}

.claim{
	position: relative;
    left: 200px;
    right: 0;
    bottom: 88px;
    display: block;
    width: 240px;
    margin-right: auto;
    margin-left: auto;
}

.footer-link{
	color: #09c;
	font-size: 12px;
}

.div_msg {
	color:red;
	font-weight: bold;
}