:root {
    --darkerblue :#16344e;
    --darkblue: #004066;
    --lightgreen: #cad122;
    --darkgreen: #1a6150;
    --white: #ffffff;
    --darkblack : #495057;
    --grey :  #7c7c7c;
    --red : #a81010;
    --rrbg: rgb(253, 71, 81);
    --rrgreen: #00ffca;
}


@font-face{
    font-family:"ptsans";
    src:url("../fonts/pt-sans-v12-latin-regular.woff2") format("woff2"),url("../fonts/pt-sans-v12-latin-regular.woff") format("woff");
}

@font-face{
    font-family:"spacemono";
    src:url("../fonts/space-mono-v6-latin-700.woff2") format("woff2"),url("../fonts/space-mono-v6-latin-700.woff") format("woff");
}



body {
    font-family: "ptsans",futura-pt, sans-serif;
   /* font-weight:500;*/
    font-size:24px;
    line-height: 133%;
    color: #000;
    background-color: #fff;
}

.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select>select.mobile-device:focus+.dropdown-toggle {
    outline: none !important;
    outline: none !important;
    outline-offset: 0;
}

h1 {
    font-size:53px;
    line-height: 133%;
    font-family: "spacemono",futura-pt-bold, sans-serif;
}

h5 {
    font-size:53px;
    line-height: 133%;
    font-family: "spacemono",futura-pt-bold, sans-serif;
}
a.weiss,
a:hover.weiss,
.weiss,
h1.weiss,
h2.weiss,
h5.weiss{
    color: #fff;
}
.underline,
p.underline,
p .underline,
a.underline{
    text-decoration: underline;
}

.heavy {
   /* font-family: "ptsans",futura-pt, sans-serif;*/
    font-weight: 700;
    font-style: normal;
}
.bold {
   /* font-family: "spacemono",futura-pt-bold, sans-serif;*/
    font-weight: 700;
    font-style: normal;
}

.small, small {
    font-size: 14px;
    line-height: 125%;
    font-weight: 400;
}

.darkblue{
    color: var(--darkblue);
    color: #000;
}

.normal h1,
.smaller h1 { margin:40px 0}

.normal p,
.smaller p {
    line-height:140%
}

.container-fluid {
	
	max-width:1200px;
    position:relative;
}

.dark-outer {
    background:var(--darkblue);
    background:var(--rrbg);
    padding: 40px 0 60px 0;
}

.login {
    max-width:440px;
    color:var(--darkblue);
    color: #000;
    padding:90px 20px 80px 20px;
}

.container-fluid.larger, .larger {
    max-width: 1380px;
    color: var(--darkblue);
    color: #000;
    padding: 90px 20px 80px 20px;
}


.container-fluid.smaller,
.smaller {
    max-width:840px;
    color:var(--darkblue);
    color: #000;
    padding:90px 20px 80px 20px;
}
.container-fluid.normal,
.normal {
    max-width:1200px;
    color:var(--darkblue);
    color: #000;
    padding:90px 20px 80px 20px;
}

.imprint {
    color:var(--darkblue);
    color: #000;
    padding:90px 20px 80px 20px;
}

.img-responsive{
    max-width: 100%;
    height: auto;
}
body {
    background:var(--darkerblue);
    background:var(--rrbg);
}

.header {
	background:var(--white);
}
.header.fullheight{
    min-height: calc(99.999vh - 195px);   /* damit der footer immer ganz unten sitzt */

}

.form h1 {
	color:var(--white);
	margin-top:60px;
}

fieldset {
    background:#c1c1c1;
    background:#fff;
    padding:0 35px 35px 35px;
}

fieldset.niederlassung legend:first-child h2{
    padding-top: 30px;
}

.bgdarkerblue,
.container-fluid.bgdarkerblue {
    background:var(--darkerblue);
}

.bgdarkblue,
.container-fluid.bgdarkblue {
    background:var(--darkblue);
}

.container-fluid.fullwidth{
    max-width: 100%;
    width: 100%;
}

legend  {
    position:relative;
    top:50px;
    margin-bottom:60px;
    display:block
}
legend.smallmarginbottom{
    margin-bottom:10px;
}

legend h2 {
   	color:var(--darkblue);
    color: #000;
    font-family: "ptsans",futura-pt, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size:35px
}

legend h2 .small{
    font-size: 16px;
    font-weight: 400;
    line-height: 125%;
}


.custom-control-label {

	color:var(--darkgreen);
}

.custom-control-label p {

	margin-left:20px;
}



.custom-control-label::before{
  background-color:var(--lightgreen);
    background-color:var(--rrgreen);
  width:30px;
  height:30px;
  border:none;

}

.custom-control-label::after {

    width: 30px;
    height: 30px;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::before{
	  background-color:var(--lightgreen);
    background-color:var(--rrgreen);

}

.custom-checkbox .custom-control-input:checked ~.custom-control-label::after {
    background-color:var(--lightgreen);
    background-color:var(--rrgreen);

	    background-image: url("../img/tick.png");
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none;
}



.legal-stuff {
    font-size:16px;
    line-height: 133%;
    color:var(--grey);
    color:#000;
    font-weight: 500;
   /* font-family: Avenir;*/
    padding-left:40px;
    padding-right:40px;
}

.margin-control {
	margin-bottom:20px;
}

.form-control {
	border-radius: 0;
    font-size:16px;
    color:var(--grey);
    color:#000;
}

.custom-control-label {
    font-size:16px;
    color:var(--grey);
    color:#000;
}

.custom-control-label p {
    margin-top:4px
}

.custom-control span.error {

    margin-left:-42px;
}


.form-control:focus {
    outline:none;
    box-shadow: none;
}


.custom-control-input:checked ~ .custom-control-label::before {
   border:none;
    background-color: inherit;
}

.dropdown-item.active, .dropdown-item:active {
    background:var(--lightgreen);
    background:var(--rrgreen);
}

.dropdown-item:focus, .dropdown-item:hover {
    background:var(--lightgreen);
    color:var(--white)fff;
    background:var(--rrgreen);
    color:#000;
}

input , select , .bootstrap-select {
  /* font-family:Avenir,sans-serif;*/
}

.btn-primary {
   width:100%;
   text-align:center;
    color:var(--lightgreen);
    background:var(--darkblue);
    border-color:var(--darkblue);
    color:#000;
    background:var(--rrgreen);
    border-color:var(--rrgreen);
   text-transform:uppercase;
   font-size: 19px;
   font-weight:700;
}
a.pdfvorschaulink.btn-primary{
    color:var(--lightgreen);
    color:#fff;
    display: inline-block;
    width: auto;
    text-decoration: none;
    margin: 20px auto 30px auto;
}



.btn-primary:hover {
    color: var(--lightgreen);
    color:#fff;
    background-color: var(--darkblue);
    background:var(--rrgreen);
    border-color: var(--lightgreen);
    border-color:var(--rrgreen);
}



.bootstrap-select > .dropdown-toggle.bs-placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder:active, .bootstrap-select > .dropdown-toggle.bs-placeholder:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder:hover {
    color:  var(--grey)
}


.dropup .dropdown-toggle::after,
.dropdown-toggle::after {
    background: #ccc url("../img/pfeil.png");
    width:44px;
    height:44px;
    border:none; 
    background-position: center center;
    background-repeat: no-repeat;
    overflow:hidden;
}

.btn.dropdown-toggle {
	padding:0 0 0 10px;
	border:none;
border-radius: 0;
}


.has-error {
  border:2px solid var(--red) !important;
}


.custom-control.has-error {

    border:none !important;
}

.custom-control span.error {

    color:var(--darkblue);
    color:#000;
    padding-left:20px;
    font-weight:600
}

#rr {
/*   position:absolute;
    right:20px;
    top:20px;
   width:360px;
    display:block;
    z-index:100;*/

    position: fixed;
    display: block;
    left: 0;
    top: 0;
    z-index: 999;
    width: 128px;
}


/*

.custom-control.custom-checkbox .custom-control-label {

    color: var(--darkgreen);

}*/


.custom-radio label {
    line-height:40px;
    padding-left:20px;
    margin-top:4px;
    color:var(--darkblack);
    color:#000;
    font-weight:500;
}


.custom-radio .custom-control-label::before {
    background-color: var(--white);
    background-color: var(--rrgreen);
    border-radius: 50%;


}

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23004066'/%3e%3c/svg%3e");
    background-color: var(--white);
    background-color: var(--rrgreen);
    border-radius: 50%;
}


label.error {
    color:var(--red);
    font-size:16px;
    font-weight:300;
    line-height:100%;
}

span.error {
    color:var(--red);
    font-size:16px;
    font-weight:300;
    line-height:16px;
    display: block;
    margin-top: 3px;
}


.custom-control.custom-checkbox span.error  {
    color:var(--red);
  /*  font-family: "spacemono",futura-pt-bold,sans-serif;*/
    margin-bottom:15px;
    font-weight:500;
}




span.error.phpfehler p{
    color:var(--red);
   /* font-family: "spacemono",futura-pt-bold,sans-serif;*/
    font-size: 20px;
    line-height: 130%;
    font-weight:500;
    margin: 22px auto;
    text-align: center;
}


span.error.phpfehler p.ok{
    color:var(--darkgreen);
}




/*
.custom-control.custom-checkbox .custom-control-label p:first-child   {

   margin-bottom: 10px;

}*/

.radio-error {
    padding-left:20px
}

fieldset.light {
    background:#fff;
    padding-top:40px;
    margin-top:30px;
}

fieldset.light a {
    text-decoration:underline;
    color:var(--grey);
    color:#000;
    /*font-family: "spacemono",futura-pt-bold, sans-serif;*/
    font-weight:700;
}

.custom-control {

    color:var(--grey);
}


@media (max-width:575px) {

     .margin-control-sm  {
         margin-bottom:20px
     }

}


@media (max-width:991px) {

fieldset {

    padding-left:20px;
    padding-right:20px
}}



.no-js { padding:20px;background: var(--lightgreen)}

.no-js p { color:#ffffff;margin-bottom: 0}


.processing { margin-top:10px;display:none}


.btn-primary.disabled, .btn-primary:disabled {
    color:
            #fff;
    background-color:
            var(--grey);
    border-color:
            var(--grey);
}

.btn-primary.focus, .btn-primary:focus {
    box-shadow: none;
}


#general {
    color: var(--red);
    font-weight: 700;
    margin-bottom:20px

}


@media (max-width:400px) {

    #rr { max-width:90%; text-align: center}
}







.btn.disabled, .btn:disabled {

    opacity: 0.2;

}

.header a {
    color: var(--darkblue);
    color: #000;
    text-decoration:underline
}


 .partner-edit .form-control[readonly] {
    background-color: #ccc;


}

 .passrequest {

     color: var(--white);

 }


.destroy {

    width:100%;
    margin-top:0px;
    padding-top:25px;
}

#destroy {

    max-width:400px;
    background:#fff;
    color:var(--darkblue);


}


#lock {

    width:110px;
    height:110px;
     background:#fff;
    border-radius: 50%;

    position:relative;
    margin:0 auto;
    cursor:pointer;
  
}

#lock img { width:50px; height:50px}

#arc {
    position:absolute;
    top:15px;
    left:30px;
    z-index:1;

}

#lock.locked #arc {
    transform: rotate(0deg);
    transition-property: transform;
    transition-duration: 0.8s;

}

#lock.unlocked #arc {

    transform: rotate(-30deg);
    transition-property: transform;
    transition-duration: 0.8s;


}

#locklock {

    background:var(--darkblue);
    border-radius: 5px;
    width:68px;
    height:40px;
    position:absolute;
    top:40px;
    left:21px;
    z-index:1;

}

#feedback { color:#fff}


.locked #destroy {

    opacity: 0.2;
    transition-property: opacity;
    transition-duration: 0.8s;

}

.unlocked #destroy {

    opacity: 1;
    transition-property: opacity;
    transition-duration: 0.8s;

}


.mandatory {
    color:var(--darkblack);
    color:#000;
    font-size:14px;
    line-height: 133%;
    margin-bottom: -0.5rem;
}

.footer {
    margin: 0 auto;
    padding:50px 0;
}

.footer a , .footer {

    color:#bcd236;
    color:#fff;
    font-size: 16px;
    font-weight:normal;

}



.outer-footer {
    background:#16344e;
    background:#000;

}



body.impressum h1 {

    margin:40px 0 50px

}

.first-col {
    margin-left:15px;
}

@media (max-width: 767px) {

    .first-col {
        margin-left:0;
        margin-bottom:20px
    }

    .footer > .row {

        margin-left:15px

    }

}


/* ***********************************************************
***   Navigation
*********************************************************** */

.navbar .nav-item a.nav-link{
    color: var(--darkblue);
    color: #000;
    text-decoration: none;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    font-weight: bold;
    font-size: 22px;
    margin-top: 21px;
}

.navbar .nav-item:first-child{
    margin-left: -39px;
}

.navbar .nav-item a.nav-link:hover{
    color: #000;
}
.navbar .nav-item.active a.nav-link{
    color: #bcd236;
    color: var(--rrbg);
}




/* ***********************************************************
***   Projekte-Übersicht
*********************************************************** */

.bglighgray{
    background: #E8E8E8;

}
.projectholder{
    padding: 40px;
    margin-top: 80px;
    margin-bottom: 40px;
}
.projectholder.kompakt{
    padding: 20px 18%;
    margin-top: 0px;
    margin-bottom: 0px;
}
.projectholder p,
.projectholder li{
    font-size: 20px;
    line-height: 140%;
}
.projectholder p.attention,
.attention{
    color: #cc0000 !important;
}
.projectholder.kompakt p.heavy{
    font-size: 32px;
    line-height: 140%;
    padding-top: 15px;
}

.btn.autosize{
    display: inline-block;
    width: auto;
    padding: 13px 32px;
    margin-top: 20px;
    margin-bottom: 20px;
    letter-spacing: 0.1rem;
    font-weight: bold;
}

body.projekte-meineprojekte .projectholder h1{
    margin: 14px 0 22px 0;
}



#anmeldeintro h1{
    margin: 16px 0 30px 0;
}


form.editnlapplication .margin-control,
#editapplication  .margin-control,
#anmeldeform .margin-control{
    margin: 0px auto 18px auto;
}

form.editnlapplication .fieldset,
#anmeldeform fieldset {
    background: #c1c1c1;
    padding: 35px 35px 35px 35px;
}

#anmeldeintro{
    margin-bottom: 30px;
}
form.editnlapplication .form-control-file,
#editapplication .form-control-file,
#anmeldeform .form-control-file{
    font-size: 16px;
    outline: none !important;
}
form.editnlapplication #text1,
#editapplication, #text1,
#anmeldeform #text1{
    min-height: 200px;
}
form.editnlapplication #text2,
#editapplication #text2,
#anmeldeform #text2{
    min-height: 80px;
}
form.editnlapplication label,
#editapplication label,
#anmeldeform label {
    margin-bottom: .05rem;
}
form.editnlapplication small,
#editapplication small,
#anmeldeform small {
    font-size: 55%;
    line-height: 120%;
    font-weight: 400;
    margin-top: 5px;
    margin-left: 2px;
    display: block;
}

#anmeldeform .custom-control-label {
    color: var(--darkblue);
    color: #000;
}

#anmeldeform .has-error {
    border: 0px solid var(--red) !important;
}
form.editnlapplication .has-error label,
#editapplication .has-error label,
#anmeldeform .has-error label {
    color: var(--red) !important;
}

form.editnlapplication .fehlerausgabe,
#editapplication .fehlerausgabe,
#anmeldeform .fehlerausgabe {
    color: var(--red) !important;
    font-style: italic;
    font-size: 15px;
}

#anmeldeform .checkboxinform{
    padding-left: 40px;
}
form.editnlapplication #phpfehler p,
#editapplication #phpfehler p,
#anmeldeform #phpfehler p{
    margin: 20px auto;
}

img.informcustomimage{
    width: auto;
    height: auto;
    max-width: 30%;
    max-height: 160px;
    margin: 5px 20px 0 0;
}

#editapplication fieldset {
    background: #c1c1c1;
    padding: 35px 35px 35px 35px;
}





form .fileUpload {
    padding: 0;
    position: relative;
    width: 400px;
}


#lblbon{
    width: 100%;
    min-width: 280px;
    height: 32px;
    cursor: pointer;
/*    background: url(../img/upload.png) no-repeat left top;
    background-size: contain;*/
}


.fileUpload > input {
    visibility: hidden;
    width: 100%;
    min-width: 280px;  /* ergänzung - unklar ob diese wirklich noetig ist */
    height: 32px;
    position: absolute;
    top: 0px;
}


/* **********************************************************
Klappbereich - Accordion
************************************************************ */

.klapprow h5{
    cursor: pointer;
    padding: 18px 0;
}
.klapprow{
}
.klappbereich{
    overflow: visible;
    display: block;
}
.geschlossen .klappbereich{
    height: 0px;
    opacity: 0.0;
    overflow: hidden;
}

.aufklapppfeil{
    display: inline;
    margin: 15px 10px 0 0px;
    cursor: pointer;
    float: right;

    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 30px 30px 30px;
    border-color: transparent transparent var(--rrgreen) transparent;
    -webkit-transform:rotate(360deg);
}
.geschlossen .aufklapppfeil{
    display: inline;
    margin: 15px 10px 0 0px;
    cursor: pointer;
    float: right;

    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 30px 0 30px;
    border-color: var(--rrgreen) transparent transparent transparent;
    -webkit-transform:rotate(360deg);
}
body.projekte-editapplication .aufklapppfeil,
body.projekte-editapplication .geschlossen .aufklapppfeil{
    margin: -5px 10px 0 0px;
}



img.anmeldungoldimage{
    max-width: 400px;
    margin: 5px 0 15px 0;
}