﻿.kontakt { display:none; position:fixed; width:100%; bottom:0px; top:-1px;left:0px; background-color:#F27405; padding:10px; z-index:90; }

.kontakt > div { background-color:white; min-height:100%; text-align:center; border-radius:20px; color:#AD4906; font-size:16px;line-height:19px;
                  margin:0px auto;padding-top:100px }
.kontakt .text  { color:#710504; padding:10px 0px 40px 0px; }

.kontakt .formular > div { text-align:left;width:520px;margin:0px auto 10px auto; }
.kontakt .formular > div h4 { padding-left:10px }
.kontakt .formular > div > div.kontaktbox { border:solid 1px #AD4906;border-radius:10px;padding:5px;margin-top:10px; }

.kontakt input[type=text], .kontakt input[type=password], .kontakt select { font-size:20px;line-height:20px; color:black; border:solid 0px #AD4906; border-bottom-width:1px; background-color:white; width:100%; padding:3px 10px 6px 10px; margin-bottom:20px }
.kontakt select { padding-left:5px }
.kontakt textarea { font-size:18px;line-height:28px; border-width:0px; width:100%; height:200px; padding:6px 10px;font-family:circe }
.kontakt textarea:focus { outline: none !important; }
.kontakt span.icon-schliessen { margin-top:0px;font-size:21px;line-height:21px;color:white;display:inline-block;margin-bottom:26px;background-color:#F27405;
                                border-radius:50%;width:98px;height:98px;padding-top:56px;box-sizing:border-box;top:-40px;position:absolute;left:50%;margin-left:-49px }
.kontakt h3 { color:#710504;font-size:50px;line-height:50px;margin-bottom:19px; }
.kontakt .formular > a.link { display:block;  color:#F27405; font-size:16px;line-height:16px; }
.kontakt a.button { display:inline-block; padding:9px 28px 7px 28px; border:solid 2px white; border-radius:20px; color:white; font-size:18px;line-height:18px; background-color:#F27405; margin:28px 5px 0px 5px; }
.kontakt .kontaktname a.button { margin-top:8px }
/*.kontakt .message { color:white }*/
.kontakt .message h5 { font-size:30px;line-height:30px; padding-top:10% }
.kontakt .formular > .error { z-index:12; position:absolute;top:50%;left:50%; width:340px; text-align:center; margin-left:-170px; margin-top:-30px; border:solid 1px #AD4906; padding:20px; border-radius:20px; background-color:white; }
.kontakt .formular .link .icon-pfeil-3-rechts { font-size:12px;margin-left:3px }


#anmelden h3 { margin-top:122px;margin-bottom:1px }
#anfragen h3 { margin-top:122px;margin-bottom:30px }

.kontakt .danke_head { margin-top:80px }
.kontakt .formular .dankeinfo { margin:40px auto;text-align:center;color:black;line-height:20px }

.regist_head { max-width: 450px; margin: 0px auto;padding:0px 30px }
.registrieren  { margin-top:80px; color:#710504;border-top:solid 1px #F27405;padding-top:80px }
.registrieren h5 { font-weight:bold; font-size:22px;line-height:22px;margin-bottom:10px }
.regist_head span { color:#710504;font-size:16px;padding-top:2px;display:inline-block;margin-bottom:17px;line-height:26px }
.regist_head div { color:#710504;font-size:18px;line-height:18px;font-weight:bold;margin-bottom:14px }

.rbtypen { overflow:auto }
.rbtypen > div:last-child input { margin-bottom:0px }
.formular .rb p { color:#710504;font-size:16px;line-height:16px;margin:0px 0px 10px 50px;padding:0px }
.formular .rb { border-bottom:solid 1px #CB5F12;padding-top:17px }

.neuesPasswort {  margin-top:30px;display:table }
.neuesPasswort > div {  display:table-row }
.neuesPasswort > div > div {  display:table-cell;padding-right:20px;padding-bottom:10px }
.neuesPasswort > div:first-child {
    padding-right:30px;
    padding-top:10px
}
.neuesPasswort input {
    border-width:0px 0px 1px 0px;
    width:200px;
    font-size:24px;line-height:24px;
    padding:4px 10px 0px 10px;
}




/* The container */
.checkbox, .radiobutton { display: block;position: relative;padding-left: 50px; margin-bottom: 10px; 
                          cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.kontakt .formular .checkbox { padding-left:30px;margin-left:10px; }

.radiobutton { font-size: 22px;line-height:22px; color:white;}

/* Hide the browser's default radio button */
.checkbox input, .radiobutton input { position: absolute; opacity: 0; cursor: pointer; }

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 14px;
  width: 14px;
  border:solid 2px #AD4906;
  background-color: white;
}

/* Create a custom radio button */
.radiobutton .checkmark {
  height: 18px;
  width: 18px;
  border:solid 2px white;
  background-color: #F27405;
  border-radius: 50%;
}


/* On mouse-over, add a grey background color */
.checkbox:hover input ~ .checkmark {
  border-color:#AD4906;
}

/* When the radio button is checked, add a blue background */
.checkbox input:checked ~ .checkmark {
  border-color:#AD4906;
}

/* On mouse-over, add a grey background color */
.radiobutton:hover input ~ .checkmark {
  border-color:#710504;
}

/* When the radio button is checked, add a blue background */
.radiobutton input:checked ~ .checkmark {
  background-color: #F27405;
  border-color:#710504;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.checkbox input:checked ~ .checkmark:after, .radiobutton input:checked ~ .checkmark:after {
  display: block;
}


/* Style the indicator (dot/circle) */
.checkbox .checkmark:after, .radiobutton .checkmark:after {
 	top: 3px;
	left: 3px;
	width: 8px;
	height: 8px;
	background: #AD4906;
}

/* Style the indicator (dot/circle) */
.radiobutton .checkmark:after {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #710504;
}

@media screen and (max-width: 650px) {  
    
    .kontakt .formular > div { width:85%; }  
    .kontakt span.icon-schliessen { margin-bottom:0px; }
    .kontakt a.button { margin-top:20px }

    .radiobutton { font-size:18px;line-height:18px }
        
    .neuesPasswort {  display:block;margin-top:10px }
    .neuesPasswort > div {  display:block }
    .neuesPasswort > div > div {  display:block }
    .neuesPasswort > div > div {  padding-bottom:5px }
    .neuesPasswort > div:first-child > div:last-child {  padding-bottom:20px }
    .neuesPasswort > div > div .anmelden {  float:left }
    
    #anmelden h3, .kontakt h3, #anfragen h3 { font-size:35px }
}

@media screen and (max-width: 400px) {
    .kontakt { padding:10px; }
    .kontakt span.icon-schliessen { font-size:17px;line-height:17px;width:72px;height:72px;padding-top:36px;top:-26px;margin-left:-36px }
    .kontakt > div  { font-size:14px;line-height:18px; }
    .kontakt input[type=text] { font-size:16px;line-height:16px; }
    .kontakt textarea { font-size:16px;line-height:16px; }
    .kontakt h3 { font-size:30px;line-height:35px; }
    .kontakt a.button { font-size:16px;line-height:16px;padding-left:18px;padding-right:18px }
    
}


@media screen and (max-height: 870px) {
    .kontakt .regist_head > div:first-child { display:none }
}

@media screen and (max-height: 950px) {
    #anmelden h3, #anfragen h3 { margin-top:30px }
}

@media screen and (max-height: 830px) {
    .kontakt .formular > div.text { padding-bottom:20px }
    #anmelden h3, #anfragen h3 { margin-bottom:9px }
    .kontakt span.icon-schliessen { margin-bottom:0px }
    .registrieren { margin-top:40px;padding-top:30px }
    .kontakt input[type=text], .kontakt input[type=password], .kontakt select { margin-bottom:8px;padding-bottom:2px }

    .kontakt > div { padding-top:60px }
}


@media screen and (max-height: 640px) {
    .regist_head div { margin-bottom:4px }
    .kontakt .formular > div.text { padding-bottom:10px }
    .kontakt a.button { margin-top:10px;margin-bottom:10px }
    .kontakt .dankeinfo { margin:30px auto }
    .kontakt > div { padding-top:40px }
    .kontakt input[type=text], .kontakt input[type=password], .kontakt select {font-size:16px }
    #anfragen textarea { height:100px }
}
