@charset "UTF-8";
 
:root {
  --khintergrundfarbe:#000000;
  --kvordergrundfarbe:#FF6300;
  --kschriftfarbe:#FFFFFF;
  --kfelderbackgroundfarbe:rgba(255, 99, 0, 0.05);       
  --kfeldfehlerfarbe:rgba(255, 99, 0, 0.3);    
  --kshadowfarbe:var(--kfeldfehlerfarbe);
  --krahmenfarbe:var(--kschriftfarbe);
  --kmouseoverfarbe:var(--kvordergrundfarbe);    
}


 
.kontakt-background
{
    background-color:var(--khintergrundfarbe);
}

.kontakt-text-orange
{
    color:var(--kvordergrundfarbe);
}

.kontaktheadertexte, .kontaktsubheadertexte
{
    text-align:center; 
    font-weight:600;
    text-transform: uppercase;
    color:var(--kschriftfarbe);
    line-height:1.3;
}

.kontaktheadertexte
{
    font-size:36px;
}

.kontaktsubheadertexte
{
    font-size:20px;
}


.kontakt-telefon-icon, .kontakt-standort-icon, .kontakt-mail-icon
{
    fill: none;
    stroke:var(--kvordergrundfarbe);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 15px;
}

.kontaktblock
{
    width:845px;
    margin-left:auto;
    margin-right:auto;
    display:block;
    position:relative;
    height:60px;
}

.kontaktblock-1
{
    width:240px;
    height:60px;
    
    position:absolute;
    left:0px;
    top:0px;
}

.kontaktblock-2
{
    width:196px;
    height:60px;
    
    position:absolute;
    left:280px;
    top:0px;
}

.kontaktblock-3
{
    width:330px;
    height:60px;
    position:absolute;
    left:514px;
    top:0px;
}

.telefon-icon
{
    width:40px;
    height:auto;
    position:absolute;
    top:10px;
    left:0px;
}

.mail-icon
{
    width:40px;
    height:auto;
    position:absolute;
    top:17px;
    left:0px;
}

.standort-icon
{
    width:34px;
    height:auto;
    position:absolute;
    top:7px;
    left:5px;
}

.kontakt-block-text, .kontakt-block-text-3
{
    width:280px;
    height:60px;
    border-left:solid 2px var(--kvordergrundfarbe);
    position:absolute;
    top:0px;
    left:50px;
    padding-left:10px;
    padding-top:10px;
}



.kontakt-block-text-oben, .kontakt-block-text-unten
{
    font-size:17px;
    color:var(--kschriftfarbe);
    line-height:1;
    text-align:left;
    
}

.kontakt-block-text-oben
{
    font-weight:700;
}

.kontakt-block-text-unten
{
    font-weight:500;
    padding-top:6px;
}

input::placeholder 
{
    color: var(--kschriftfarbe);
    opacity: 0.6;
}

textarea::placeholder
{
    color: var(--kschriftfarbe);
    opacity: 0.6;
}

.Formular_Style
{
    margin-top:0px;
}

.Formular_Style .form-field
{
    margin-bottom: 20px;
}


.Formular_Style .form-field input
{
    width: 100%;
    height: 50px;
    padding: 5px 18px;
    font-size: 15px;
    border: 2px solid var(--kvordergrundfarbe);
    color:var(--kschriftfarbe);
	background-color:var(--kfelderbackgroundfarbe);
}

.Formular_Style .form-field textarea
{
    width: 100%;
    padding: 10px 18px;
    font-size: 15px;
    border: 2px solid var(--kvordergrundfarbe);
    background-color:var(--kfelderbackgroundfarbe);
    color:var(--kschriftfarbe);
}


.Formular_Style .form-field input:focus, .Formular_Style .form-field textarea:focus
{
    border-color: var(--kschriftfarbe);
    color:var(--kschriftfarbe);
    outline: none;
}

.Formular_Style .form-button
{
    margin-top:20px;
    text-align: center;
}

.Formular_Style .form-button button
{
    padding: 7px 30px;
    border: 1px solid var(--kvordergrundfarbe);
    background:transparent;
    color:var(--kvordergrundfarbe);
    display:block;    
    font-size: 18px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    width:100%;
    max-width:280px;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

.Formular_Style .form-button button:hover
{
    background:var(--kvordergrundfarbe);
    border-color:var(--kvordergrundfarbe);
    color: var(--kschriftfarbe);
    border-radius:50px;
}



.formular-rahmen
{
    width:100%;
    height:auto;
    padding:30px;
    border:solid 2px var(--kvordergrundfarbe);
    display:block;
    
}

.checkboxfeld-datenschutz
{
    position:absolute;
    top:0px;
    left:0px;
}

.checkboxfeld
{
    position:absolute;
    top:5px;
    left:0px;
}

input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border:none;
  border-radius: 0;
  font-size: 1em;
  width: 100%
} 

input[type='checkbox'],
input[type='radio'] {
  width:auto;    
  background:transparent;
  border:none;
  position:absolute;
  
  left:0px;
}

input[type='checkbox']:checked,
input[type='checkbox']:not(:checked),
input[type='radio']:checked,
input[type='radio']:not(:checked) {
  background: transparent;
  position: relative;
  visibility: hidden;
  margin:0;
  padding:0;
}

input[type='checkbox'] + label,
input[type='radio'] + label {
  cursor: pointer;
}
input[type='checkbox']:checked + label::before,
input[type='checkbox']:not(:checked) + label::before,
input[type='radio']:checked + label::before,
input[type='radio']:not(:checked) + label::before {
    content:' ';
    display:inline-block;
    width:30px;
    height:30px;
    position:relative;
    border: 2px solid var(--kvordergrundfarbe);
    background:transparent;
    margin-right: 1em;
	margin-left:0px;
    top:0px;
    box-shadow: inset 0 1px 1px 0 var(--kshadowfarbe);
}

input[type=radio]:checked + label::before,
input[type=radio]:not(:checked) + label::before {
  border-radius: 30px;
}
 input[type='checkbox']:hover  + label::before,
    input[type='radio']:hover  + label::before {
      background:transparent;
      box-shadow: inset 0 0 0 1px var(--krahmenfarbe);
      -webkit-transition: all .3s ease-out;
      transition: all .3s ease-out;
    }
    


input[type='checkbox']:checked  + label::before,
input[type='radio']:checked  + label::before {
  background:var(--kvordergrundfarbe);
  box-shadow: inset 0 0 0 2px var(--krahmenfarbe);
  border-radius:50%;
  border: 2px solid var(--kvordergrundfarbe);
}

#messages
{
    text-align:center;
    font-size:18px;
    font-weight:700;
    color:var(--kschriftfarbe);
}

.formular-checkbox-datenschutz
{
    width:100%;
    height:30px;
    position:relative;
    
    display:block;
}

.formular-checkbox-text-datenschutz
{
    width:100%;
    text-align:left;
    padding-left:40px;
    padding-top:6px;
    font-size:17px;
    font-weight:500;
    color:var(--kschriftfarbe);
    line-height:1;
}

.formular-checkbox
{
    width:100%;
    height:41px;
    position:relative;
    display:block;
}

.formular-checkbox-text
{
    width:100%;
    text-align:left;
    padding-left:40px;
    padding-top:12px;
    font-size:17px;
    font-weight:500;
    color:var(--kschriftfarbe);
    line-height:1;
}

.formular-checkbox-text-2
{
    width:100%;
    text-align:left;
    padding-left:40px;
    padding-top:0px;
    font-size:17px;
    font-weight:500;
    color:var(--kschriftfarbe);
    line-height:1.2;
}

.kontakt-beschreibungstext
{
    text-align:center;
    color:var(--kschriftfarbe);
    font-size:15px;
    font-weight:400;
}

.feldfehler
{
	background-color:var(--kfeldfehlerfarbe)!important;
}

@media (max-width: 927px)
{
    .kontaktblock
    {
        width:330px;
        height:210px;
    }
    
    .kontaktblock-1
    {
        left:0px;
        top:0px;
    }
    
    .kontaktblock-2
    {
        left:0px;
        top:75px;
    }
    
    .kontaktblock-3
    {
        left:0px;
        top:150px;
    }

    
}

@media (max-width: 830px)
{ 
    .formular-checkbox-text-datenschutz
    {
        padding-top:4px;
        font-size:15px;
        line-height:1.2;
    }
}

@media (max-width: 767px)
{ 
    .formular-checkbox-text-datenschutz
    {
        padding-top:0px;
    }
    
    .checkboxfeld-datenschutz
    {
        top:3px;
    }
    
}


@media (max-width: 575px)
{
    .kontaktsubheadertexte
    {
        font-size:18px;
    }
}

@media (max-width: 480px)
{ 
      
    .formular-checkbox-text-datenschutz
    {
        max-width:290px;
    }

    .checkboxfeld-datenschutz
    {
        top:12px;
    }
    
    .formular-rahmen
    {
        padding:15px;
    }
    
}


@media (max-width: 369px)
{
    
    .kontakttext-mobil-klein
    {
        font-size:15px;
    }
    
    .kontakt-block-text
    {
        width:auto;
    }
    
    .kontaktblock-1, .kontaktblock-2, .kontaktblock-3
    {
        width:280px;
    }
     .kontaktblock
    {
        width:290px;
    }
    
    .kontaktsubheadertexte
    {
        font-size:16px;
    }
    
    .kontaktheadertexte
    {
        font-size:30px;
    }
    
    .kontakt-block-text-3
    {
        padding-top:4px;
        width:auto;
        max-width:150px;
    }
    
    .formular-checkbox-text-datenschutz
    {
        font-size:14px;
    }
    
    .checkboxfeld-datenschutz
    {
        top:9px;
    }
    
    
}