@charset "UTF-8";
@font-face {
 font-family: "Material Icons";
 font-style: normal;
 font-weight: 400;
 src: 
  local("Material Icons"),
  local("MaterialIcons-Regular"),
  url("../fonts/MaterialIcons-Regular.woff2") format("woff2"),
  url("../fonts/MaterialIcons-Regular.woff") format("woff");
}
.material-icons {
 margin-top: 4px;
 font-family: "Material Icons";
 font-weight: normal;
 font-style: normal;
 font-size: 28px;
 display: inline-block;
 line-height: 1;
 text-transform: none;
 letter-spacing: normal;
 word-wrap: normal;
 white-space: nowrap;
 direction: ltr;
 color: rgba(0, 0, 0, 0.87);
 -webkit-font-smoothing: antialiased;
 text-rendering: optimizeLegibility;
 -moz-osx-font-smoothing: grayscale;
}
/* style for mobile */
@media (max-width: 655px) {
 .material-icons {
  margin-top: 3.5px;
 }
}
/* common styles */
* {
 box-sizing: border-box;
}
textarea,
input,
.select {
 font: 0.9rem Roboto400,sans-serif;	
}
.senden {
  font: 1rem Roboto400,sans-serif;	
}
.kontaktformular {
 width: 520px;
 max-width: 100%;
}
@media (min-width: 656px){
  .kontaktformular {
    border: 1px solid #b9b9b9;
    box-shadow: 3px 3px 15px #808080bd;
    padding: 20px 30px 0px 0px;
    margin: 20px auto 40px;
   }
}

.kontaktformular .row {
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 margin-bottom: 1.7rem;
 width: 100%;
}
.kontaktformular .row .col-sm-4 {
 flex-grow: 1;
 flex-basis: 0;
 margin: 0 1.2rem;
 position: relative;
}
.kontaktformular.no-icons .row .col-sm-4 {
 margin: 0 1.7rem;
}
.kontaktformular .row .col-sm-4:first-child {
 margin-left: 0;
}
.kontaktformular.no-icons .row .col-sm-4:first-child {
 margin-left: 0;
}
.kontaktformular .row .col-sm-4:last-child {
 margin-right: 0;
}
.kontaktformular.no-icons .row .col-sm-4:first-child {
 margin-left: 0;
}
.kontaktformular .row .col-sm-8 {
 width: 100%;
 position: relative;
}
.kontaktformular .row .control-label {
 position: absolute;
 margin-top: -8.5px;
 height: 95.4%;
 padding: 0.8rem;
 color: grey;
 opacity: 0.7;
 width: 3rem;
 z-index: 2;
}
.kontaktformular .row .control-label span {
 position: absolute;
 top: 1.3rem;
 left: 3.8rem;
 white-space: nowrap;
 transition: top 0.3s, font-size 0.3s, color 0.3s;
}
.kontaktformular.no-icons .row .control-label span {
 left: 1.1rem;
}
.kontaktformular .row .control-label:not(.select-label) span {
 cursor: text;
}
.kontaktformular .row .control-label i {
 transition: color 0.3s;
}
.kontaktformular .row .not-empty-field .control-label i {
 color: rgba(0, 0, 0, 0.87);
}
.kontaktformular .row .not-empty-field .control-label span {
 color: grey;
 top: 0;
 font-size: 0.7rem;
}
.kontaktformular .row .active-field .control-label i {
 color: var(--color-primary);
}
.kontaktformular .row .active-field .control-label span {
 color: var(--color-primary);
 top: 0;
 font-size: 0.7rem;
}
.kontaktformular .row input,
.kontaktformular .row textarea {
 appearance: none;
}
.kontaktformular .row .field {
 display: block;
 font-size: 0.9rem;
 width: calc(100% - 3.8rem);
 padding: 0.85rem 0.8rem 0.55rem 0;
 margin-left: 3.8rem;
 color: rgba(0, 0, 0, 0.87);
 border: none;
 border-bottom-style: solid;
 border-bottom-width: 1px;
 border-bottom-color: #9e9e9e !important;
 outline: none;
 box-sizing: content-box;
 transition: border 0.3s;
 border-radius: 0;
}
.kontaktformular.no-icons .row .field {
 margin-left: 1.1rem;
 width: calc(100% - 1rem);
}
.kontaktformular .row .field:focus,
.kontaktformular .row input[type="checkbox"]:focus {
 border-bottom-color: var(--color-primary) !important;
 outline: 0 !important;
 box-shadow: none;
}
.kontaktformular .row textarea.field {
 min-height: 2.5rem;
 height: 8.5rem;
 width: calc(100% - 3rem);
}
.kontaktformular.no-icons .row textarea.field {
 width: calc(100% - 0.2rem);
}
.kontaktformular .row ul.select-box {
 list-style: none;
 margin: 0;
 background: #fff;
 cursor: pointer;
 position: absolute;
 top: -0.3rem;
 left: 3.8rem;
 z-index: 5;
 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
 padding: 0;
 width: calc(100% - 3rem);
 transform: scale(0);
 opacity: 0;
 transition: -webkit-transform 0.3s, transform 0.3s, opacity 0.3s;
}
.kontaktformular.no-icons .row ul.select-box {
 left: 1.1rem;
 width: calc(100% - 0rem);
}
.kontaktformular .row ul.select-box .placeholder {
 color: grey;
 opacity: 0.7;
}
.kontaktformular .row .active-field ul.select-box {
 transform: scale(1);
 opacity: 1;
}
.kontaktformular .row .select-input {
 cursor: default;
}
.kontaktformular .row ul.select-box li {
 list-style: none;
 padding: 11px 15px;
 color: var(--color-primary);
 width: 100%;
}
.kontaktformular .row ul.select-box li:hover,
.kontaktformular .row ul.select-box li.active {
 background: #eee;
}
.kontaktformular:not(.no-icons) .row .keyboard_arrow_down {
 display: none;
}
.kontaktformular .captchareload .material-icons {
 font-size: 20px;
}
.kontaktformular .captcha-row div div:not(.captcha-input-div),
.kontaktformular .question-row div div:not(.question-input-div) {
 width: 100%;
 padding: 0.75rem 0 0.75rem 60px;
}
.kontaktformular.no-icons .captcha-row div div,
.kontaktformular.no-icons .question-row div div {
 padding: 0rem 0 0.75rem 1rem;
}
.kontaktformular .captcha-row .captcha-input-div,
.kontaktformular .question-row .question-input-div {
 padding-bottom: 0;
}
.kontaktformular.no-icons .captcha-row .captcha-input-div,
.kontaktformular.no-icons .question-row .question-input-div {
 padding-top: 0;
}
.kontaktformular.no-icons .captcha-row .captcha-input-div,
.kontaktformular.no-icons .question-row .question-input-div {
 padding-bottom: 0;
}
.kontaktformular .row #files {
 margin-left: 3.8rem;
 width: calc(100% - 1.2rem);
}
.kontaktformular.no-icons .row #files {
 margin-left: 1.1rem;
 width: calc(100% - 0.2rem);
 z-index: 5;
 position: relative;
}
.kontaktformular .row #files > div {
 margin-bottom: 5px;
}
.kontaktformular .row #files label {
 height: 41px;
 display: inline-block;
 width: calc(100% - 1.8rem);
 cursor: pointer;
}
.kontaktformular.no-icons .row #files label {
 width: 100%;
}
.kontaktformular .row #files .file_button {
 display: block;
 float: left;
 margin-top: calc(1rem / 16 * 4);
 margin-right: 0.5rem;
 padding: 0.5rem 0.75rem;
 color: white;
 background-color: var(--color-primary);
 border-radius: 2px;
 border: none;
 text-transform: uppercase;
 box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.3);
 width: 65px;
 text-align: center;
 cursor: pointer;
}
.kontaktformular .row #files .file_button:hover {
 background-color: var(--color-primary);
}
.kontaktformular .row #files .file_name {
 margin-top: calc(1rem / 16 * 4);
 width: calc(100% - 73px);
 border-bottom-style: solid;
 border-bottom-width: 1px;
 border-bottom-color: #9e9e9e !important;
 display: inline-block;
 padding: 0.5rem 0;
 overflow: hidden;
}
.kontaktformular.no-icons .row #files .file_name {
 width: calc(100% - 73px);
}
.kontaktformular .row input[type="file"] {
 opacity: 0;
 width: 100%;
 height: 37px;
 position: absolute;
 left: 0;
 margin-left: 3.8rem;
 width: calc(100% - 3rem);
 margin-top: 4px;
 cursor: pointer;
 z-index: -1;
}
.kontaktformular .checkbox-row {
 margin-bottom: 0.4rem;
}
.kontaktformular .checkbox-row .checkbox-inline {
 display: block;
 padding: 0.22rem 0 0.47rem 0.9rem;
}
.kontaktformular .checkbox-row .checkbox-inline .material-icons {
 cursor: pointer;
 margin-left: 0;
 color: rgba(0, 0, 0, 0.6);
 transition: color 0.3s;
 margin-right: 1.2rem;
 font-size: 28px;
 -webkit-touch-callout: none;
 user-select: none;
 position: absolute;
}
.kontaktformular .checkbox-row .checkbox-inline .material-icons.checked {
 color: var(--color-primary);
}
.kontaktformular .checkbox-row .checkbox-inline a:hover,
.kontaktformular .checkbox-row .checkbox-inline a:focus {
 color: var(--color-primary);
 text-decoration: underline;
}
.kontaktformular .checkbox-row .checkbox-inline a,
.kontaktformular .checkbox-row .checkbox-inline span {
 color: var(--color-primary);
 text-decoration: none;
 line-height: 150%;
}
.kontaktformular .checkbox-row .checkbox-inline div {
 padding-left: 47px;
 line-height: 23px;
 padding-top: 6.7px;
 text-indent: 2.5rem;
}
.kontaktformular.no-icons .checkbox-row .checkbox-inline div {
 padding-left: 4px;
}
.kontaktformular .checkbox-row .checkbox-inline div span,
.kontaktformular .checkbox-row .checkbox-inline div a {
 margin-left: -7px;
}
.kontaktformular:not(.no-icons) .material-icons-pos2 {
 margin-left: 2.7rem !important;
}
.kontaktformular .checkbox-row .checkbox-inline span {
 color: inherit;
}
.kontaktformular #send {
 padding: 0 0.9rem 0.9rem 0.9rem;
 box-sizing: content-box;
 margin-top: 0;
}
.kontaktformular #send .col-sm-8 {
 margin-top: 0;
}
.kontaktformular .row .senden {
 width: 99.5%;
 height: 2.5rem;
 margin-top: calc(1rem / 16 * 5);
 padding: 0.5rem 0.75rem;
 color: white;
 background-color: var(--color-primary);
 border-radius: 2px;
 border: none;
 text-transform: uppercase;
 box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.3);
}
.kontaktformular .row .senden:hover {
 background-color: var(--color-primary);
 cursor: pointer;
}
.kontaktformular .row .senden:focus,
.kontaktformular .row .senden:focus-visible {
 outline: none;
}
.kontaktformular .row .error .field {
 border-bottom-color: red !important;
}
.kontaktformular .row .error .field,
.kontaktformular .row .error .checkbox-inline input,
.kontaktformular.kontaktformular-validate .row .field:invalid,
.kontaktformular.kontaktformular-validate .row .checkbox-inline input:invalid {
 border-bottom-color: red !important;
}
.kontaktformular .row .error .control-label i,
.kontaktformular .checkbox-row .error .checkbox-inline .material-icons {
 color: red;
}
.kontaktformular.no-icons .row .error .keyboard_arrow_down {
 color: red !important;
}
.kontaktformular.no-icons .material-icons-pos12 {
 display: none;
}
.kontaktformular .material-icons-pos12 {
 color: #ff4b4b;
 margin-left: -0.15rem !important;
}
.kontaktformular.no-icons .material-icons-pos1 {
 display: none;
}
.kontaktformular .material-icons-pos1 {
 color: #ff4b4b;
 margin-left: -0.2rem !important;
}
.kontaktformular .row .error .control-label span,
.kontaktformular .row .error.active-field .control-label span {
 color: red;
}
.kontaktformular .row .field:invalid,
.kontaktformular .row .checkbox-inline input:invalid {
 outline: none;
 box-shadow: none;
}
.kontaktformular .row .field:focus:valid,
.kontaktformular .row .checkbox-inline input:focus:valid {
 background-color: #ffffff;
 border-color: #d9e8d5;
 outline: none;
 box-shadow: none;
}
.kontaktformular .row .error ::placeholder,
.kontaktformular .row .error select.unselected {
 color: rgba(219, 0, 7, 0.6);
}
.kontaktformular .row .errormsg {
 color: red;
 font-size: 0.75rem;
 margin-left: 3.8rem;
 right: -0.7rem;
 display: inline-block;
 position: absolute;
 margin-top: 2px;
}
.kontaktformular.no-icons .row .errormsg {
 margin-left: 1.1rem;
}
.kontaktformular .row.first-error-row .errormsg {
 position: relative;
 right: auto;
}
.kontaktformular .captcha-row.error_container .error {
 margin-bottom: 20px;
}
.kontaktformular .question-row.error_container .error {
 margin-bottom: 20px;
}
.kontaktformular .captcha-row .errormsg,
.kontaktformular .question-row .errormsg {
 display: block;
 position: absolute;
 left: 0;
 bottom: -46px;
 height: 40px;
}
.kontaktformular .checkbox-row .errormsg {
 display: block;
 position: absolute;
 left: 0;
 bottom: -34px;
 height: 40px;
}
.kontaktformular.no-icons label:not(.checkbox-inline) .material-icons {
 display: none;
}
.kontaktformular.no-icons .row .keyboard_arrow_down {
 color: rgba(0, 0, 0, 0.7);
 font-size: 25px;
 position: absolute;
 top: 11px;
 right: -1rem;
 cursor: default;
}
.kontaktformular.no-icons .captcha-row .captcha-input-div .control-label span,
.kontaktformular.no-icons
 .question-row
 .question-input-div
 .control-label
 span {
 left: 0;
}
.kontaktformular.no-icons .captcha-row .captcha-input-div .field,
.kontaktformular.no-icons .question-row .question-input-div .field {
 margin-left: 0;
 width: 100.25%;
}
#briefcase-icon {
 padding-left: 3.5px;
 font-size: 25px;
 margin-top: 4px;
}
#dropdown-icon {
 margin-top: 4px;
}
#dropdown-icon-without-icons {
 margin-top: 1px;
}
#dataprotection-icon {
 padding-left: 2.5px;
 font-size: 25px;
 padding-top: 1px;
}
#fileupload-icon {
 padding-top: 0px;
 font-size: 25px;
}
#securitycode-icon {
 padding-top: 12px;
 font-size: 25px;
}
#securityquestion-icon {
 padding-top: 0px;
 font-size: 25px;
}
#user-icon {
 padding-left: 1px;
}
#user-icon-position-2 {
 padding-left: 2.5px;
}
#email-icon {
 padding-top: 1.5px;
 padding-left: 2.5px;
 font-size: 25px;
}
#email-icon-position-2 {
 padding-top: 1px;
 padding-left: 1.5px;
 font-size: 25px;
}
#phone-icon {
 padding-top: 1.5px;
 padding-left: 2.5px;
 font-size: 25px;
}
#phone-icon-position-2 {
 padding-left: 0px;
}
#home-icon {
 padding-left: 0.5px;
}
#subject-icon {
 padding-top: 1px;
 padding-left: 2px;
 font-size: 25px;
}
#subject-icon-position-2 {
 padding-left: 1.5px;
}
#message-icon {
 padding-top: 3px;
 padding-left: 2.5px;
 font-size: 25px;
}
#message-icon-position-2 {
 padding-left: 1.5px;
}
@media (max-width: 655px) {
 .kontaktformular {
  margin-top: -20px;
  padding-right: 30px;
  width: auto;
 }
 .kontaktformular .row {
  display: block;
  margin-top: 1rem;
 }
 .kontaktformular .row .col-sm-4 {
  flex-grow: 0;
  flex-basis: 0;
  margin: 0;
 }
 .kontaktformular .row .col-sm-4,
 .kontaktformular .row .col-sm-8 {
  margin-top: 1.5rem;
 }
 .kontaktformular.no-icons .row .col-sm-4 {
  margin-top: 1.5rem;
  margin-left: 0rem;
  margin-right: 0rem;
 }
 .kontaktformular .captcha-row .col-sm-8,
 .kontaktformular .question-row .col-sm-8,
 .kontaktformular .upload-row .col-sm-8,
 .kontaktformular .checkbox-row .col-sm-8 {
  margin-top: 0;
 }
 .kontaktformular hr {
  margin-top: 27px !important;
  margin-bottom: 40px !important;
 }
 .kontaktformular .captcha-row.error_container .error {
  margin-bottom: 45px;
 }
 .kontaktformular .question-row.error_container .error {
  margin-bottom: 45px;
 }
 .kontaktformular .checkbox-row.error_container .error {
  margin-bottom: 25px;
 }
 #briefcase-icon {
  padding-top: 1px;
  font-size: 25px;
 }
 #dropdown-icon {
  margin-top: 4px;
 }
 #dropdown-icon-without-icons {
  margin-top: 0px;
 }
 #user-icon {
  padding-top: 1px;
  margin-top: 3px;
 }
 #email-icon {
  padding-top: 2px;
  font-size: 25px;
 }
 #phone-icon {
  padding-top: 2.5px;
  font-size: 25px;
 }
 #home-icon {
  padding-left: 0.5px;
 }
 #subject-icon {
  padding-top: 1.5px;
  font-size: 25px;
 }
 #dataprotection-icon {
  font-size: 25px;
  padding-top: 1px;
 }
 #email-icon-position-2 {
  padding-top: 2px;
  font-size: 25px;
 }
 #fileupload-icon {
  padding-top: 1.5px;
  font-size: 25px;
 }
 #securitycode-icon {
  padding-top: 12px;
  font-size: 25px;
 }
 #securityquestion-icon {
  padding-top: 0px;
  font-size: 25px;
 }
 #message-icon {
  font-size: 25px;
 }
}

/*mike*/

#chaptaWrong:checked ~ * {
  color: rgb(231, 0, 0)!important;
}
#chaptaWrong:checked ~ * * {
  color: rgb(231, 0, 0)!important;
}

#chaptaWrong:checked ~ input {
  border-bottom-color: rgb(231, 0, 0)!important;
}

#chaptaOK:checked ~ * {
  color: green!important;
}
#chaptaOK:checked ~ * * {
  color: green!important;
}

#chaptaOK:checked ~ input {
  border-bottom-color: green!important;
}