/**
* Bewerber
* Kontaktformular/Registrierungssystem
*/


/**********************
* Kontaktformular: Schnuppertag/TdoT
*/
.wpcf7-form {
	box-shadow: var(--main-box-shadow);
	padding: 1% 5%;
}
.wpcf7-form p {
	padding: 0 0 0.5% 0;
	clear: both;
	position: relative;
}
.wpcf7-form span.wpcf7-list-item {
	margin: 0 !important;
	display: initial !important;
}
.wpcf7-form .label-headline {
	font-size: 1em;
	line-height: 2.7em;
	font-weight: bold;
}
.wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="tel"] {
	border: 0;
	border-bottom: 1px solid rgba(0,0,0,0.325);
	padding: 0.75em;
	font-size: 1em;
	width: 100%;
	max-width: 25em;
	color: var(--main-color-dark);
	background-color: var(--main-bg-light);
	border-radius: var(--main-border-radius);
	
}
.wpcf7-form input[type="text"]:focus, .wpcf7-form input[type="email"]:focus, .wpcf7-form input[type="tel"]:focus {
	outline: 0;
	border-bottom: 1px solid var(--main-color);
}
.wpcf7-form input[type="text"].wpcf7-not-valid, .wpcf7-form input[type="email"].wpcf7-not-valid, .wpcf7-form input[type="tel"].wpcf7-not-valid {
	border-bottom: 1px solid #dc3232;
}
.wpcf7-checkbox label {
	white-space: nowrap;
	width: 10em;
	float: left;
}
.wpcf7-radio label {
	white-space: nowrap;
	width: 5em;
	float: left;
}
.termin .wpcf7-radio label {
	white-space: nowrap;
	width: 100%;
	float: none;
}
.wpcf7-checkbox label, .wpcf7-radio label {
	display: block;
	position: relative;
	height: 1.919em;
	padding-left: 1.68em;
	margin: 0.2em 1em 0.2em 0;
	cursor: pointer;
	font-size: 1em;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.wpcf7-checkbox label input, .wpcf7-radio label input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}
.wpcf7-checkbox label span, .wpcf7-radio label span {
	position: absolute;
	top: 0;
	left: 0;
	height: 1.25em;
	width: 1.25em;
	background-color: var(--main-bg-accent);
	text-indent: 1.68em;
}
.wpcf7-checkbox.wpcf7-not-valid label span {
	background-color: #dc3232;
}
.wpcf7-checkbox.wpcf7-not-valid ~ .wpcf7-not-valid-tip {
	color: transparent !important;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.wpcf7-checkbox.wpcf7-not-valid ~ .wpcf7-not-valid-tip:before {
	content: 'Mindestens 1 Auswahl ist erforderlich.';
	color: #dc3232;
}
.wpcf7-radio label span {
	border-radius: 50%;
}
.wpcf7-checkbox label:hover input ~ span, .wpcf7-radio label:hover input ~ span {
	background-color: var(--main-bg-accentdark);
	transition: 0.5s;
}
.wpcf7-checkbox label input:checked ~ span, .wpcf7-radio label input:checked ~ span {
	background-color: var(--main-color-dark);
}
.wpcf7-checkbox label span:after, .wpcf7-radio label span:after {
	content: "";
	position: absolute;
	display: none;
}
.wpcf7-checkbox label input:checked ~ span:after, .wpcf7-radio label input:checked ~ span:after {
	display: block;
}
.wpcf7-checkbox label span:after {
	left: 0.432em;
	top: 0.24em;
	width: 0.3em;
	height: 0.6em;
	border: solid var(--main-color-light);
	border-width: 0 0.144em 0.144em 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.wpcf7-radio label span:after {
	top: 0.432em;
	left: 0.432em;
	width: 0.384em;
	height: 0.384em;
	border-radius: 50%;
	background-color: var(--main-bg-light);
}
.wpcf7-form input[type="submit"]{
	display: inline-block;
	clip-path: var(--main-corner-clip);
	color: var(--main-color-light);
	background-color: var(--main-color);
	background-image: var(--gradient-htl);
	background-size: var(--gradient-size);
	background-position: var(--gradient-position);
	border: none;
	text-align: center;
	font-size: 1em;
	padding: 0.75em 3.5em;
	transition: all 0.5s;
	cursor: pointer;
	margin: 0;
	position: relative;
}
.wpcf7-form input[type="submit"]:hover {
	background-position: var(--gradient-position-hover);
}
.wpcf7-form .hover-icon-left:after {
	content: '\00bb';
	content: '\2709\00a0\00bb';
	color: var(--main-color-light);
	line-height: 1em;
	position: absolute;
	opacity: 0.5;
	top: 0.75em;
	left: 0.75em;
	transition: 0.5s;
}
.wpcf7-form .hover-icon-left:hover:after {
	opacity: 1;
	left: 1em;
}
.wpcf7-form .wpcf7-response-output {
	border-radius: var(--main-border-radius);
	border: none;
	text-align: center;
	padding: 1em 3.5em;
	margin: 8% 0 5% 0;
}
.wpcf7-form div.wpcf7-mail-sent-ok {
	background-color: #398f14;
	border-color: #398f14;
	font-size: 110%;
	padding: 1em;
	margin-bottom: 3em;
}
.wpcf7 form.sent .wpcf7-response-output {
	background-color: #398f14;
	border-color: #398f14;
	color: var(--main-color-light);
	font-size: 110%;
	padding: 1em;
	margin-bottom: 3em;
}
.wpcf7-form div.wpcf7-validation-errors, div.wpcf7-acceptance-missing,
.wpcf7-form.invalid .wpcf7-response-output {
	border-color: #f5b800;
	font-size: 110%;
	padding: 1em;
}
.wpcf7-form span.wpcf7-not-valid-tip {
	padding: 0.5em;
	display: inline-block;
}
.wpcf7-form.sent > p {
	display: none;
}



/**********************
* Registrierungssystem: Schnuppertag/TdoT
*/

/* accordion panel (container) */
.form-accordion {
    color: var(--main-color-dark);
	background-color: var(--main-bg-light);
	box-shadow: var(--main-box-shadow);
    transition: 1s;
    margin-bottom: 0.2em;
}


/* accordion panel (button) */
.form-accordion > div:first-child {
    display: grid;
    grid-template-columns: auto auto 0.3em;
    align-items: center;
}
.form-register-date {
    padding: 1em;
}
.form-register-status {
    font-size: 1em;
    padding: 1em;
}
.form-register-symbol {
    width: 0.2em;
    height: 100%;
}
.form-closed .form-register-status {
    color: #777;
}
.form-open {
    cursor: pointer;
}

.form-active, .form-open:hover, .form-closed:hover {
    color: var(--main-color-light);
    background-color: var(--main-bg-accentdark)
}


/* open: green || closed: red */
.form-open .form-register-symbol {
    background-color: #37ad2a;
}
.form-active .form-register-symbol, .form-open:hover .form-register-symbol {
    background-color: #236b1b;
}
.form-closed .form-register-symbol {
    background-color: #ad2a2a;
}
.form-closed .form-register-symbol, .form-closed:hover .form-register-symbol {
    background-color: #ad2a2a;
}


/* Style the accordion panel. Note: hidden by default */
.form-panel {
    display: none;
    overflow: hidden;
}

@media (max-width: 767.98px) {
    .form-accordion > div:first-child {
        grid-template-columns: auto;
        margin-bottom: 0.5em;
    }
    .form-register-symbol {
        height: 0.2em;
        width: 100%;
    }

}