[data-title="Kontakt"] section.m21_kontaktformular:not(.active){
display: none;
}
section.m21_kontaktformular.bewerbung .m21_title_text_container {
display: flex;
gap: 0 70px;
margin-bottom: 70px;
}
.m21_beschriftung_container {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
margin-bottom: 60px;
gap: 0 30px;
}
.m21_beschriftung_container * {
flex: 0 0 auto;
width: calc(50% - 15px);
max-width: 100%;
margin-bottom: 0;
}
.m21_beschriftung_container .m21_mandatory_text {
color: rgba(204,204,204,.5);
font-size: .9rem;
}
section.m21_kontaktformular.bewerbung .m21_beschriftung_container .m21_mandatory_text {
display: none;
}
.wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not(.wpcf7-acceptance),
.wpcf7-form-control.wpcf7-select {
background-color: #1b1a1a;
border: 1px solid #565656;
border-bottom: 1px solid #b3b3b3;
outline: none !important;
border-radius: 0;
color: rgba(255,255,255,.5);
box-shadow: none !important;
padding: 18px 23px 16px;
line-height: 1;
-webkit-transition: border-color .4s, background .4s, opacity .4s;
-moz-transition: border-color .4s, background .4s, opacity .4s;
-ms-transition: border-color .4s, background .4s, opacity .4s;
-o-transition: border-color .4s, background .4s, opacity .4s;
transition: border-color .4s, background .4s, opacity .4s;
}
.wpcf7-form-control.wpcf7-select {
padding: 21px 23px 19px !important;
}
section.m21_kontaktformular.bewerbung .wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not(.wpcf7-acceptance),
section.m21_kontaktformular.bewerbung .wpcf7-form-control.wpcf7-select {
background-color: rgba(81,167,239,.4);
border-color: transparent;
border-bottom-color: #fff;
}
.wpcf7-form-control.wpcf7-select * {
background-color: #1b1a1a;
color: #fff;
}
section.m21_kontaktformular.bewerbung .wpcf7-form-control.wpcf7-select {
line-height: 1.5 !important;
}
section.m21_kontaktformular.bewerbung .wpcf7-form-control.wpcf7-select:disabled {
opacity: .5;
}
.wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not(.wpcf7-acceptance):focus {
outline: none;
border-bottom-color: #007fc5;
background-color: rgba(2,117,181,.05);
}
section.m21_kontaktformular.bewerbung .wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not(.wpcf7-acceptance):focus {
border-bottom-color: #1b1a1a;
background-color: rgba(81,167,239,.6);
}
.wpcf7-form-control.wpcf7-select {
padding-top: 21px;
padding-bottom: 21px;
appearance: none;
background-image: url(//habe.de/wp-content/themes/HA-BE/img/more.png);
background-repeat: no-repeat;
background-position: right 20px center;
background-size: 8px 5px;
} .form_container > .form_container {
width: 50%;
gap: 0 20px;
flex-wrap: wrap;
}
.form_container.half_width > * {
width: calc(50% - 10px);
}
.form_container.width_15_85 > :first-child {
width: calc(15% - 10px);
}
.form_container.width_15_85 > :last-child {
width: calc(85% - 10px);
}
.wpcf7-acceptance a {
text-decoration: underline;
-webkit-transition: color .4s;
-moz-transition: color .4s;
-ms-transition: color .4s;
-o-transition: color .4s;
transition: color .4s;
}
.wpcf7-acceptance a:hover {
text-decoration: none;
color: #007fc5;
}
.wpcf7-acceptance label input { height: 0;
width: 0;
margin: 0;
}
.wpcf7-acceptance label input + span {
display: inline-block;
padding-left: 50px;
position: relative;
}
.wpcf7-acceptance label input + span:before,
.wpcf7-acceptance label input + span:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 26px;
height: 26px;
border: 1px solid #565656;
background: #1b1a1a;
-webkit-transition: background .4s, opacity .4s;
-moz-transition: background .4s, opacity .4s;
-ms-transition: background .4s, opacity .4s;
-o-transition: background .4s, opacity .4s;
transition: background .4s, opacity .4s;
}
section.m21_kontaktformular.bewerbung .wpcf7-acceptance label input + span:after {
border-color: #fff;
background: transparent;
}
.wpcf7-acceptance label input + span:before {
border: none;
background: url(//habe.de/wp-content/themes/HA-BE/img/check.svg);
z-index: 2;
background-size: contain;
width: 15px;
height: 15px;
left: 5px;
top: 5px;
background-repeat: no-repeat;
background-position: center;
opacity: 0;
}
.wpcf7-acceptance label input:checked + span:after,
section.m21_kontaktformular.bewerbung .wpcf7-acceptance label input:checked + span:after {
background: #fff;
}
.wpcf7-acceptance label input:focus-visible + span:after,
.wpcf7-acceptance label input:focus + span:after {
outline: 2px solid blue;
}
.wpcf7-acceptance label input:checked + span:before {
opacity: 1;
}
.wpcf7 .wpcf7-submit:disabled {
opacity: .7;
}
.wpcf7 .wpcf7-submit:disabled:hover {
background: #007fc5;
border-color: transparent;
color: #fff;
}
section.m21_kontaktformular.bewerbung .button.button_blue {
background: #fff;
border-color: #fff;
color: #1a1a1a;
}
section.m21_kontaktformular.bewerbung .wpcf7 .wpcf7-submit:disabled:hover {
background: #fff;
border-color: #fff;
color: #1a1a1a;
}
section.m21_kontaktformular.bewerbung .button.button_blue:not(:disabled):hover {
background: rgba(255,255,255,.5);
}
.wpcf7 .wpcf7-submit {
padding-right: 50px;
}
.wpcf7 .form_submit:after {
content: '';
position: absolute;
right: 30px;
top: calc(60% - 9px);
background: url(//habe.de/wp-content/themes/HA-BE/img/button-arrow.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 11px;
height: 9px;
-webkit-transition: opacity .4s;
-moz-transition: opacity .4s;
-ms-transition: opacity .4s;
-o-transition: opacity .4s;
transition: opacity .4s;
}
section.m21_kontaktformular.bewerbung .wpcf7 .form_submit:after {
background-image: url(//habe.de/wp-content/themes/HA-BE/img/button-arrow_dark.png);
}
.wpcf7 .form_submit.disabled:after {
opacity: .7;
}
section.m21_kontaktformular.blue {
background: #007fc5;
color: #ffffff;
}
.cf7_formular.form_bewerbung {
display: flex;
gap: 0 70px;
}
section.m21_kontaktformular.bewerbung .m21_title_text_container > * {
width: calc(50% - 35px);
}
.cf7_formular.form_bewerbung > .form_wrapper {
width: calc(50% - 35px);
}
section.m21_kontaktformular.bewerbung .m21_beschriftung_container * {
width: 100%;
font-size: 2.1875rem;
}
section.m21_kontaktformular.bewerbung .m21_beschriftung_container {
margin-bottom: 0;
}
.form_wrapper_files {
color: rgba(255,255,255,.5);
}
section.m21_kontaktformular.bewerbung .form_item {
margin-bottom: 20px;
}
section.m21_kontaktformular.bewerbung .form_wrapper_files .form_item {
width: calc(50% - 15px);
}
.form_item .codedropz-upload-handler {
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 0;
}
.form_item .dnd-upload-counter {
display: none;
}
.form_item .codedropz-upload-container {
padding-top: 50px;
padding-bottom: 50px;
}
.form_item .codedropz-upload-inner > span {
display: none;
}
.form_item .codedropz-btn-wrap {
position: relative;
padding-top: 25px;
}
.form_item .codedropz-btn-wrap:before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 14px;
height: 13px;
background: url(//habe.de/wp-content/themes/HA-BE/img/upload.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.form_item > label {
line-height: 1;
margin-bottom: 10px;
}
section.m21_kontaktformular.bewerbung .form_container_main_last .form_item,
section.m21_kontaktformular.bewerbung .form_wrapper_last .form_item {
margin-bottom: 0;
}
.form_item.form_item_mandatory {
font-size: .9rem;
margin-top: 15px;
margin-bottom: 0;
}
.m21_subheadline_container,
.m21_border_container {
border-bottom: 1px solid rgba(255,255,255,.2);
}
.m21_border_container {
margin-top: 50px;
}
.m21_subheadline_container {
margin-bottom: 50px;
padding-bottom: 15px;
text-transform: uppercase;
}
section.m21_kontaktformular.blue .wpcf7-form-tel-wrapper:after {
color: rgba(255,255,255,.5);
}
section.m21_kontaktformular.black .wpcf7-form-tel-wrapper:after {
color: #ffffff;
}
body .ui-widget-content,
body .ui-widget-header {
background: #1b1a1a;
color: #ccc;
border: none;
}
body .ui-widget.ui-widget-content,
.ui-state-default, 
.ui-widget-content .ui-state-default {
border: none;
}
.ui-datepicker .ui-datepicker-prev, 
.ui-datepicker .ui-datepicker-next {
-webkit-transition: background .4s, color .4s;
-moz-transition: background .4s, color .4s;
-ms-transition: background .4s, color .4s;
-o-transition: background .4s, color .4s;
transition: background .4s, color .4s;
}
body .ui-state-hover,
body .ui-widget-header .ui-state-hover, 
body .ui-state-focus,
body .ui-widget-content .ui-state-focus,
body .ui-widget-header .ui-state-focus,
body .ui-button:hover,
body .ui-button:focus {
background: #fff;
border: none;
color: #1a1a1a;
}
body .ui-state-default, 
body .ui-widget-content .ui-state-default, 
body .ui-widget-header .ui-state-default,
body .ui-button, 
html body .ui-button.ui-state-disabled:hover, 
html body .ui-button.ui-state-disabled:active {
background: rgba(81,167,239,.4);
color: #fff;
}
body .ui-widget-content td .ui-state-default {
-webkit-transition: background .4s;
-moz-transition: background .4s;
-ms-transition: background .4s;
-o-transition: background .4s;
transition: background .4s;
}
body .ui-widget-content td .ui-state-hover,
body .ui-widget-content td .ui-state-highlight {
background: #007fc5;
}
body .dnd-upload-status .dnd-upload-details .name,
body .dnd-upload-status .dnd-upload-details .name em {
color: rgba(255,255,255,.5);
}
body .dnd-upload-status .dnd-upload-image span.file {
background-image: url("data:image/svg+xml,%0A%3Csvg width='18' height='23' viewBox='0 0 18 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.569 0.659576H0.5V23H18V6.09053L12.569 0.659576ZM12.7872 1.93075L16.7288 5.87234H12.7872V1.93075ZM1.24468 22.2553V1.40426H12.0426V6.61702H17.2553V22.2553H1.24468Z' fill='%23FFFFFF80'/%3E%3C/svg%3E%0A")
}
body .dnd-upload-status .dnd-upload-details .remove-file span:after {
background-image: url("data:image/svg+xml,%3Csvg width='35' height='35' viewBox='0 0 35 35' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.5 0C7.83499 0 0 7.83499 0 17.5C0 27.165 7.83499 35 17.5 35C27.165 35 35 27.165 35 17.5C34.9888 7.83965 27.1604 0.0112198 17.5 0ZM17.5 33.871C8.45857 33.871 1.12903 26.5414 1.12903 17.5C1.12903 8.45857 8.45857 1.12903 17.5 1.12903C26.5414 1.12903 33.871 8.45857 33.871 17.5C33.861 26.5373 26.5373 33.861 17.5 33.871Z' fill='%23B50303'/%3E%3Cpath d='M25.4834 9.51661C25.2629 9.29624 24.9056 9.29624 24.6852 9.51661L17.5 16.7018L10.3148 9.51661C10.0983 9.29236 9.74087 9.28615 9.51661 9.50271C9.29236 9.71927 9.28615 10.0767 9.50271 10.3009C9.50723 10.3057 9.51188 10.3103 9.51661 10.3148L16.7018 17.5L9.51661 24.6852C9.29236 24.9018 9.28615 25.2591 9.50278 25.4834C9.71941 25.7076 10.0768 25.7139 10.301 25.4972C10.3057 25.4927 10.3103 25.488 10.3148 25.4834L17.5 18.2982L24.6852 25.4834C24.9094 25.7 25.2668 25.6938 25.4834 25.4696C25.6947 25.2508 25.6947 24.9039 25.4834 24.6852L18.2982 17.5L25.4834 10.3148C25.7038 10.0944 25.7038 9.73705 25.4834 9.51661Z' fill='%23B50303'/%3E%3C/svg%3E%0A")
}
body .codedropz-upload-handler {
cursor: pointer;
}
.m21_text_container {
margin-bottom: 40px;
}
.codedropz-upload-inner h3 {
font-size: 16px;
font-family: "verdana-pro", sans-serif;
color: inherit;
}
.cf7_formular.form_bewerbung {
margin-bottom: 50px;
}
@media screen and (max-width: 1920px) {
.form_container.width_15_85 > :first-child {
width: calc(20% - 10px);
}
.form_container.width_15_85 > :last-child {
width: calc(80% - 10px);
}
section.m21_kontaktformular.bewerbung .m21_title_text_container,
.cf7_formular.form_bewerbung {
gap: 0 50px;
}
section.m21_kontaktformular.bewerbung .m21_title_text_container > *,
.cf7_formular.form_bewerbung > .form_wrapper {
width: calc(50% - 25px);
}
section.m21_kontaktformular.bewerbung .m21_beschriftung_container * {
font-size: 2rem;
}
}
@media screen and (max-width: 1599px) {
.form_container.width_15_85 > :first-child {
width: calc(25% - 10px);
}
.form_container.width_15_85 > :last-child {
width: calc(75% - 10px);
}
}
@media screen and (max-width: 1399px) {
.form_container.width_15_85 > :first-child {
width: calc(20% - 10px);
}
.form_container.width_15_85 > :last-child {
width: calc(80% - 10px);
}
}
@media screen and (max-width: 1199px) {
.form_container.width_15_85 > :first-child {
width: calc(25% - 10px);
}
.form_container.width_15_85 > :last-child {
width: calc(75% - 10px);
}
.cf7_formular.form_bewerbung {
flex-wrap: wrap;
}
.cf7_formular.form_bewerbung > .form_wrapper {
width: 100%;
}
}
@media screen and (max-width: 991px) {
.form_container.width_15_85 > :first-child {
width: calc(35% - 10px);
}
.form_container.width_15_85 > :last-child {
width: calc(65% - 10px);
}
body[data-title="Kompetenzen"] section.m21_kontaktformular[data-innerer-abstand="innerer_abstand_oben_und_unten"] {
padding-top: 0;
padding-bottom: 0;
}
body[data-title="Kompetenzen"] section.m21_kontaktformular span.m21_mandatory_text {
display: flex;
justify-content: end;
}
body[data-title="Kompetenzen"] section.m21_kontaktformular .form_mandatory_text {
display: none;
}
}
@media screen and (max-width: 767px) {
.form_container > .form_container {
width: 100%;
flex-direction: row;
}
.form_container.width_15_85 > :first-child,
.form_container.width_15_85 > :last-child {
width: calc(50% - 10px);
}
.form_submit {
margin-top: 35px;
}
.m21_beschriftung_container * {
width: 100%;
}
.m21_beschriftung_container {
margin-bottom: 10px;
}
.m21_beschriftung_container .m21_mandatory_text {
margin-top: 40px;
}
section.m21_kontaktformular.bewerbung .m21_title_text_container {
flex-wrap: wrap;
}
section.m21_kontaktformular.bewerbung .m21_title_text_container > * {
width: 100%;
}
section.m21_kontaktformular.bewerbung .m21_title_text_container .m21_beschriftung_container {
margin-bottom: 25px;
}
section.m21_kontaktformular.bewerbung .m21_title_text_container {
margin-bottom: 30px;
}
section.m21_kontaktformular.bewerbung .form_container_main_last .form_item:first-child {
margin-bottom: 20px;
}
section.m21_kontaktformular.bewerbung .form_wrapper_files .form_item {
width: 100%;
}
body[data-title="Kompetenzen"] section.m21_kontaktformular span.m21_mandatory_text {
justify-content: start;
}
}
@media screen and (max-width: 575px) {
.form_container.half_width > * {
width: 100%;
}
}
@media screen and (max-width: 450px) {
.form_container.width_15_85 > :first-child,
.form_container.width_15_85 > :last-child {
width: 100%;
}
section.m21_kontaktformular.bewerbung .m21_beschriftung_container * {
font-size: 1.6rem;
}
}