body {   -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
         box-sizing: border-box;
         margin:0;
         padding:0;


         animation:fadein 0.9s;
         -moz-animation:fadein 0.9s;
         -webkit-animation:fadein 0.9s;
         scroll-behavior: smooth;

         /*
         -ms-user-select: none;
         -webkit-user-select: none;
         -moz-user-select: none;
         user-select: none;
         */

         }








.wrapper {
        max-width: 1280px;
        padding: 0 0 0 0;
        margin: 0 auto;
         }

@media all and (max-width: 1300px) {
        .wrapper {
        padding: 0 15px 0 15px;
         }
}





.wrappermid {
        max-width:1600px;
        margin: 0 auto;
        }

@media all and (max-width: 1600px) {
        .wrappermid {
        padding: 0 15px 0 15px;
         }
}




.wrapperwide {
        max-width: 1920px;
        padding: 0 80px 0 80px;
        margin: 0 auto;
         }


@media all and (max-width: 1460px) {
        .wrapperwide {
        padding: 0 15px 0 15px;
         }
}




/* ============ FONTS =============== */
@font-face {
    font-family: 'Varela Round';
    src: url('fonts/varela-round-v13-latin-regular.woff') format('woff');
         url('fonts/varela-round-v13-latin-regular.woff2') format('woff2');
         url('fonts/varela-round-v13-latin-regular.eot') format('eot');
         url('fonts/varela-round-v13-latin-regular.svg') format('svg');
         url('fonts/varela-round-v13-latin-regular.ttf') format('ttf');
}


/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/roboto-v30-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-300italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: url('fonts/roboto-v30-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-300italic.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/roboto-v30-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-italic.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/roboto-v30-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-500.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-500italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: url('fonts/roboto-v30-latin-500italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-500italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-500italic.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/roboto-v30-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-700italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/roboto-v30-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-700italic.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-900 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/roboto-v30-latin-900.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-900.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-900.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-900italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 900;
  src: url('fonts/roboto-v30-latin-900italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-900italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-900italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-900italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-900italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-900italic.svg#Roboto') format('svg'); /* Legacy iOS */
}


.bold  {font-weight:700; }


/* ----------------- NAVI --------------------------------------------------------------- */
.nav_box  {position: fixed; width: 70px; top: 18px; right: 15px; z-index: 50; }
.nav_home {position: relative; width: 70px; margin-bottom:10px; opacity: 0.8;}
.nav_back {position: relative; width: 70px; opacity: 0.8;}

.nav_box2 {position: fixed; width: 70px; bottom: 15px; right: 15px; z-index: 50; }
.nav_up   {position: relative; width: 70px; opacity: 0.8;}


.nav_home:hover,
.nav_back:hover,
.nav_up:hover {outline:none; filter: hue-rotate(90deg);opacity: 1;}

.nav_home:focus,
.nav_back:focus,
.nav_up:focus {outline:none; filter: hue-rotate(90deg);opacity: 1;}

@media all and (max-width: 1000px) {
.nav_box  {position: fixed; width: 50px; top:10px; right: 10px; z-index: 50; }
.nav_home {position: relative; width: 50px; margin-bottom: 10px; opacity: 0.8;}
.nav_back {position: relative; width: 50px; opacity: 0.5;}
.nav_up   {display:none}
}











/* **************************** barrieretool **************************************** */
.helpdesk {
 width:100%; height:90px; position:relative; top:0; background-color:#2F2F2F; margin-bottom:0px;
}


.jobboxes {
display: grid;
grid-template-columns: 320px 370px 1fr 300px;
grid-template-rows: 1fr;
}

.typesizer       { grid-area: 1 / 1 / 2 / 2; }
.colorswitcher   { grid-area: 1 / 2 / 2 / 3; }
.sonstiger       { grid-area: 1 / 3 / 2 / 4; }
.helper          { grid-area: 1 / 4 / 2 / 5; }



@media all and (max-width: 880px) {
         .helpdesk {
         width:100%; height:90px;
         }

         .jobboxes {
         display: grid;
         grid-template-columns: 0px 330px 0fr 300px;
         grid-template-rows: 1fr;
         }

         .typesizer       { grid-area: 1 / 1 / 2 / 2; display:none}
         .colorswitcher   { grid-area: 1 / 2 / 2 / 3; }
         .sonstiger       { grid-area: 1 / 3 / 2 / 4; }
         .helper          { grid-area: 1 / 4 / 2 / 5; }

}



@media all and (max-width: 600px) {
         .helpdesk {
         width:100%; height:90px;
         }

         .jobboxes {
         display: grid;
         grid-template-columns: 0px 270px 0fr 300px;
         grid-template-rows: 1fr;
         }

         .typesizer       { grid-area: 1 / 1 / 2 / 2; display:none}
         .colorswitcher   { grid-area: 1 / 2 / 2 / 3; }
         .sonstiger       { grid-area: 1 / 3 / 2 / 4; }
         .helper          { grid-area: 1 / 4 / 2 / 5; }

}



@media all and (max-width: 500px) {
         .helpdesk {
         width:100%; height:132px;
         }

         .jobboxes {
         display: grid;
         grid-template-columns: 0px 330px 300px;
         grid-template-rows: 1fr;
         }

         .typesizer       { grid-area: 1 / 1 / 2 / 2; display:none}
         .colorswitcher   { grid-area: 1 / 2 / 2 / 3; }
         .sonstiger       { grid-area: 2 / 1 / 3 / 2; }
         .helper          { grid-area: 2 / 2 / 3 / 3; }

}




/* -----schriftgroessenveraenderung ------------------------ */
.adder .container {
 color: #FFFFFF;
 font-family: 'Noto Sans', sans-serif;
}
.adder {
 position: relative;
  text-align:center; margin:20px 0 0 70px; display: inline-block;
  font-size: 1.3em; font-weight:400;

}

.adder .container:hover .tooltip {
  display: block;
}

.adder span {
  color: #FFFFFF;
  font-weight: 400;

  display: inline-block;
}

.adder .left,
.adder .right {
  position: absolute;
  top: 0;
  right: 110%;
  cursor: pointer;
  width:50px; height:50px; border:1px solid #FFFFFF; color: #FFFFFF; font-size:1.7em; font-weight:900;
}
.adder .left:hover,
.adder .right:hover {
 border:1px solid #FF0000; color: #FF0000;
}

.adder .left:focus,
.adder .right:focus {
 border:1px solid #FF0000; color: #FF0000;
}

.adder .right {
  left: 110%;
  text-align:center;
}

.adder .tooltip {
  position: absolute;
  bottom: 100%;
  width: 250px;
  display: none;
  font-size: 0.7em;
  color: #2a7e1a;
  font-weight: 300;
  margin-left: -125px;
  left: 50%;
  background: #f1f1f1;
  padding: 2px;
}

/* -----ansichts-Umschalter ------------------------ */
.swapper {position: relative;
         margin:20px 10px 0 0px;
         background-color: #000000;
         width: 150px;
         height:50px;
         border:1px solid #FFFFFF;
         z-index: 50;
         outline:none;

         font-family: 'Noto Sans', sans-serif;
         color:#FFFFFF;
         font-size: 1.0em; font-weight:400; line-height: 1.1em;
         float:left;
         cursor: pointer;

         display: -webkit-flex;
          display:         flex;
          -webkit-align-items: center;
                  align-items: center;
          -webkit-justify-content: center;
                  justify-content: center;
         }

.normal          {background: linear-gradient(135deg, #638F1B, #8DC619)}
.normal:hover    {background: linear-gradient(135deg, #11C4E2, #8DC619); border:2px solid #FFFFFF; color:#FFFFFF;     }
.normal:focus    {background: linear-gradient(135deg, #11C4E2, #8DC619); border:2px solid #FFFFFF; color:#FFFFFF;     }

.contrast        {background: #000000}
.contrast:hover  {background: linear-gradient(135deg,#FFFFFF, #FFFFFF); border:2px solid #FFFFFF; color:#000000;     }
.contrast:focus  {background: linear-gradient(135deg,#FFFFFF, #FFFFFF); border:2px solid #FFFFFF; color:#000000;     }

.hlp        {background: #000000;}
.hlp:hover  {background: #FFFFFF; border:2px solid #FFFFFF; color:#000000;     }
.hlp:focus  {background: #FFFFFF; border:2px solid #FFFFFF; color:#000000;     }

@media all and (max-width: 600px) {
         .swapper {
         width:118px;
         margin:20px 0px 0px 8px;
         font-size: 1em; font-weight:400;
         }

}


@media all and (max-width: 500px) {
         .swapper {
         width:118px;
         margin:10px 0px 0px 8px;
         font-size: 1em; font-weight:400;
         }

}


/* hilfeseite */
.padding20{ padding-left:0%;}
@media all and (max-width: 1200px) {.padding20 { padding-left:20%;}}
@media all and (max-width: 1000px) {.padding20 { padding-left:20%;}}
@media all and (max-width: 600px) {.padding20  { padding-left:20%;}}

.padding40{ padding-left:30%;}
@media all and (max-width: 1200px) {.padding40 { padding-left:40%;}}
@media all and (max-width: 1000px) {.padding40 { padding-left:40%;}}
@media all and (max-width: 600px) {.padding40  { padding-left:40%;}}

.imgpresse1{ width:70%; margin-left:30%}
@media all and (max-width: 1200px) {.padding20 { width:60%;margin-left:40%}}
@media all and (max-width: 1000px) {.padding20 { width:60%;margin-left:40%}}
@media all and (max-width: 600px) {.padding20  { width:60%;margin-left:40%}}


/* **************************** end barrieretool **************************************** */













/* ================== NAVIGATION MENU ===================== */
.inav { z-index:10;
        height:150px;
        background:rgba(0,0,0,1);
        }


@media all and (max-width: 1200px) {.inav { height:150px; }}

@media all and (max-width: 1000px) {.inav { height:120px; }}

@media all and (max-width: 600px) {.inav { height:90px; }}






/* ==== LOGO ======= */
.logo { width:400px; margin:10px 0 10px 15%;}
@media all and (max-width: 1275px) {.logo { width:350px; margin:10px 0 10px 20px;} }
@media all and (max-width: 1000px) {.logo { width:300px; } }
@media all and (max-width: 600px) {.logo { width:200px; }  }








.bg_01 { background-color:#EFEFEF;}






/* ========================================= IMG =============== */
img {width:100%;}

.img100 {width:100%; border:0px solid #FF0000;}

.imgtwin {width: 50%;float:left;}
         @media all and (max-width: 560px) { .imgtwin {width: 100%;}}

.imgthirds {width: 33.33%;float:left;}
         @media all and (max-width: 560px) {  .imgthirds {width: 100%;}}

.imgquads {width: 25%;float:left;}
         @media all and (max-width: 560px) {.imgquads {width: 50%;}}



.imgarrows {width: 15%; margin-left:24%; margin-bottom:20px;}
         @media all and (max-width: 560px) {.imgquads {width: 50%;}}


.imgjobskala {width: 50%; margin-left:25%; margin-top:40px;}
         @media all and (max-width: 560px) { .imgjobskala {width: 70%; margin-left:15%; margin-top:10px;}}



.zoom img {
         z-index:-50;
        -webkit-transition: all 2.8s ease-in-out;
        -moz-transition: all 2.8s ease-in-out;
        -o-transition: all 2.8s ease-in-out;
        -ms-transition: all 2.8s ease-in-out;
        transition: all 2.8s ease-in-out;
}

.zoom:hover img {
         z-index:-50;
        transform: scale(1.05, 1.05);

        -webkit-transition: all 2.8s ease-in-out;
        -moz-transition: all 2.8s ease-in-out;
        -o-transition: all 2.8s ease-in-out;
        -ms-transition: all 2.8s ease-in-out;
        transition: all 2.8s ease-in-out;
}




.multiply {mix-blend-mode: multiply;}





.btow {background-image: linear-gradient(#000000, #FFFFFF); height:150px;}

/* ============ buttons =============== */


/* landkreis und gemeindeseiten: kontaktbutton */

.kontaktbutton {
        margin:20px 0 20px 0;
        height: 60px;
        width: 100%;
          display: -webkit-flex;
          display:         flex;
          -webkit-align-items: center;
                  align-items: center;
          -webkit-justify-content: center;
                  justify-content: center;

        font-family: 'Roboto', sans-serif;
                font-size: 100%;
                font-weight:600;
                line-height:1.3em;
                letter-spacing: 0.1em;
                text-align:center;
                text-transform: uppercase;
        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
}



kontaktbutton:hover {cursor:pointer;
        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
}


kontaktbutton:focus {
        cursor:pointer;
        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
}


@media all and (max-width: 1700px) {
        .kontaktbutton { height: 60px;}}




/* presselink auf Gemeindeseiten Netzausbau */

.presselink {
        margin-top:-20px;
        border-bottom: 1px solid #000000;

        width: 100%;
        margin-left:0%;
        height: 30px;
        background: #FFFFFF;

          display: -webkit-flex;
          display:         flex;
          -webkit-align-items: center;
                  align-items: center;
          -webkit-justify-content: left;
                  justify-content: left;


        opacity:1;

        font-family: 'Roboto', sans-serif;
                font-size: 80%;
                font-weight:600;
                color: #63BE1B;
                line-height:1.3em;
                letter-spacing: 0.1em;
                text-align:left;
                text-transform: uppercase;

        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
}



.presselink:hover {
        cursor:pointer;
        color: #FFFFFF;
        border-bottom: 1px solid #000000;
        background: #D4EDA5;

        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
         opacity:0.8;
}

















.goto50,
.goto100 {
        margin:20px 0 20px 0;
	border:1px solid;
	border-radius:10px ;
          display: -webkit-flex;
          display:         flex;
          -webkit-align-items: center;
                  align-items: center;
          -webkit-justify-content: center;
                  justify-content: center;
        opacity:1;


        font-family: 'Roboto', sans-serif;
                font-size: 100%;
                font-weight:600;

                line-height:1.3em;
                letter-spacing: 0.1em;
                text-align:center;
                text-transform: uppercase;

        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
}

.goto50 {
        width: calc(50% - 4px);
        height: 60px;
        float:left;
}



.goto100 {
        height: 60px;
        width: calc(100% - 2px);
        margin-left:0%;


}


.goto50:hover,
.goto100:hover {
        cursor:pointer;
        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
         opacity:0.8;
}


.goto50:focus,
.goto100:focus {
        cursor:pointer;
        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
         opacity:0.8;
}



/* runde button */
.gotorund {
        margin:20px 0 20px 0;
	border-radius:50%;
	height: 150px;
        width: 150px;
        margin-left:0%;

          display: -webkit-flex;
          display:         flex;
          -webkit-align-items: center;
                  align-items: center;
          -webkit-justify-content: center;
                  justify-content: center;
        opacity:1;


        font-family: 'Roboto', sans-serif;
                font-size: 100%;
                font-weight:600;

                line-height:1.3em;
                letter-spacing: 0.1em;
                text-align:center;
                text-transform: uppercase;

        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
}


.gotorund:hover {
        cursor:pointer;
	-webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
         opacity:0.8;
}


.gotorund:focus {
        cursor:pointer;
        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
         opacity:0.8;
}



/* große runde button */
.gotorundbig {
        margin:20px 0 20px 0;
	border-radius:50%;
	height: 180px;
        width: 180px;
        margin-left:0%;

          display: -webkit-flex;
          display:         flex;
          -webkit-align-items: center;
                  align-items: center;
          -webkit-justify-content: center;
                  justify-content: center;
        opacity:1;


        font-family: 'Roboto', sans-serif;
                font-size: 100%;
                font-weight:600;

                line-height:1.3em;
                letter-spacing: 0.1em;
                text-align:center;
                text-transform: uppercase;

        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
}


.gotorundbig:hover {
        cursor:pointer;
	-webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
         opacity:0.8;
}


.gotorundbig:focus {
        cursor:pointer;
        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
         opacity:0.8;
}













/* Mid screens */
@media all and (max-width: 1700px) {
        .goto100 {
        height: 60px;

                }
}








.gotomore {
        margin-top:20px;
        border: 1px solid #63BE1B;

        width: 50%;
        margin-left:25%;
        height: 80px;
        background: #FFFFFF;

          display: -webkit-flex;
          display:         flex;
          -webkit-align-items: center;
                  align-items: center;
          -webkit-justify-content: center;
                  justify-content: center;


        opacity:1;

        font-family: 'Roboto', sans-serif;
                font-size: 80%;
                font-weight:600;
                color: #63BE1B;
                line-height:1.3em;
                letter-spacing: 0.1em;
                text-align:center;
                text-transform: uppercase;

        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
}



.gotomore:hover {
        cursor:pointer;
        color: #FFFFFF;
        border: 1px solid #AFAFAF;
        background: #63BE1B;

        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
         opacity:0.8;
}







.gotojob {
        margin-top:20px;
        border-bottom: 1px solid #63BE1B;

        width: calc(50% - 2px);
        margin-left:25%;
        height: 40px;
        background: #FFFFFF;

          display: -webkit-flex;
          display:         flex;
          -webkit-align-items: center;
                  align-items: center;
          -webkit-justify-content: left;
                  justify-content: left;


        opacity:1;

        font-family: 'Varela Round', sans-serif;
                font-size: 90%;
                font-weight:500;
                color: #000000;
                line-height:1.3em;
                letter-spacing: 0.05em;
                text-align:left;
                text-transform: uppercase;
                padding-left:0px;

        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;

        margin-bottom:0px;
}



.gotojob:hover {
        cursor:pointer;
        color: #FFFFFF;
        border-bottom: 1px solid #63BE1B;
        background: #63BE1B;
        transform: scale(1.0);

        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
         opacity:0.8;
}



/* Mid screens */
@media all and (max-width: 960px) {
        .gotojob {
        width: calc(100% - 2px);
        margin-left:0%;
        height: 40px;

                }
}








/* ============ FONTS TYPES =============== */






h1,
h2 {
        font-family: 'Varela Round', sans-serif;
        font-weight:500;
        line-height: 1.1em;
        letter-spacing:0.1em;
        color: #63BE1B;
        text-transform:uppercase;
        margin:0;
}





.head1 {font-size:400%;}
         @media all and (max-width: 1200px) {.head1 {font-size:280%; }}
         @media all and (max-width: 800px) {.head1 {font-size:240%; }}
         @media all and (max-width: 640px) {.head1 {font-size:190%; }}


.head2 {font-size:220%; color: #000000;  }
         @media all and (max-width: 1200px) {.head2 {font-size:180%; line-height: 1.3em; }}
         @media all and (max-width: 800px) {.head2 {font-size:140%; line-height: 1.3em; }}
         @media all and (max-width: 640px) {.head2 {font-size:115%; line-height: 1.3em; }}

p {
        font-family: 'Roboto', sans-serif;
        font-size: 120%;
        font-weight: 300;
        color: #333;
        line-height:160%;
        letter-spacing: 0.05em;
         -moz-hyphens: auto;
         -o-hyphens: auto;
         -webkit-hyphens: auto;
         -ms-hyphens: auto;
         hyphens: auto;
}

         @media all and (max-width: 1200px){p {font-size:105%; line-height: 1.5em; }}
         @media all and (max-width: 860px) {p {font-size:95%; line-height: 1.5em; }}
         @media all and (max-width: 640px) {p {font-size:95%; line-height: 1.4em; }}
         @media all and (max-width: 560px) {p {font-size:90%; line-height: 1.4em; }}




.anlauf {
        font-size: 125%;
        font-weight: 500;
        line-height:150%;
}

         @media all and (max-width: 1200px){.anlauf {font-size:115%; line-height: 1.5em; }}
         @media all and (max-width: 860px) {.anlauf {font-size:115%; line-height: 1.5em; }}
         @media all and (max-width: 640px) {.anlauf {font-size:105%; line-height: 1.4em; }}
         @media all and (max-width: 560px) {.anlauf {font-size:100%; line-height: 1.4em; }}



.ziffer {font-size:1000%;margin-left:15%; color:#000000;}
         @media all and (max-width: 1500px) {.ziffer {font-size:800%; }}
         @media all and (max-width: 1200px) {.ziffer {font-size:600%; }}
         @media all and (max-width:  800px) {.ziffer {font-size:500%; }}
         @media all and (max-width:  640px) {.ziffer {font-size:400%; }}





.white {
        color: #FFFFFF;

}







.little {
        font-size: 80%;
        color: #000000;
        line-height:160%;

}
         @media all and (max-width: 1200px){.little {font-size:80%; line-height: 1.6em; }}
         @media all and (max-width: 860px) {.little {font-size:75%; line-height: 1.5em; }}
         @media all and (max-width: 640px) {.little {font-size:65%; line-height: 1.4em; }}



.big {
        font-size: 280%;
        font-weight: 500;
        line-height:120%;
}

         @media all and (max-width: 1200px){.big {font-size:200%; line-height: 1.3em; }}
         @media all and (max-width: 860px) {.big {font-size:160%; line-height: 1.4em; }}
         @media all and (max-width: 640px) {.big {font-size:120%; line-height: 1.4em; }}
         @media all and (max-width: 560px) {.big {font-size:100%; line-height: 1.4em; }}





.joblisthead {
        font-weight:600;
        line-height: 1.1em;
        letter-spacing:0.1em;
        color: #63BE1B;
        text-transform:uppercase;

}







ul  {   font-family: 'Roboto', sans-serif;
        font-size: 105%;
        font-weight: 300;
        color: #333;
        line-height:160%;
        letter-spacing: 0.05em;
        padding-left: 14px;
        list-style-type: square;
}

         @media all and (max-width: 1200px){ul {font-size:100%; line-height: 1.5em; }}
         @media all and (max-width: 860px) {ul {font-size:95%; line-height: 1.5em; }}
         @media all and (max-width: 640px) {ul {font-size:95%; line-height: 1.4em; }}

.job  { padding-bottom:20px; }






hr {
        background-color: #666;
        color: #666;
        border: #666;
        height: 1px;
        align: center;
        width: 100%;
        margin:20px 0 20px 0;
}





a {
        color: #63BE1B; text-decoration: none;
}

a:hover {
        color: #c3916a;
}


/*  ----- footer  --- */






.footer {background-color: #000000; }

.p_footer {
        font-size: 95%;
        font-weight: 300;
        color: #FFFFFF;
        line-height:160%;
        letter-spacing: 0.3em;
        text-transform:uppercase;
        margin:0;
}






.footerframe {
        width:100%;
        height:420px;
        margin: auto;
        border:0px solid #FF0000;
}

/* ============ FONTS ATTRIBUTES ===============*/




.caram {color:#63BE1B;}

.right {text-align:right;}
         @media all and (max-width: 640px) {.right {text-align:right; }}

.center {text-align:center;}
         @media all and (max-width: 640px) {.center {text-align:left; }}


.center2 {text-align:center;}
        

.margL {margin-left:25%; color:#7F7F7F;}
        @media all and (max-width: 960px) {.margL {margin-left:0%; }}


/*  ----- distancer  --- */

.gap5   {border-left: 0px solid; height: 5px; width: 0px;}
.gap10   {border-left: 0px solid; height: 10px; width: 0px;}
.gap20   {border-left: 0px solid; height: 20px; width: 0px;}
.gap40   {border-left: 0px solid; height: 40px; width: 0px;}
.gap60   {border-left: 0px solid; height: 60px; width: 0px;}
.gap80   {border-left: 0px solid; height: 80px; width: 0px;}
.gap100   {border-left: 0px solid; height: 100px; width: 0px;}


@media all and (max-width: 860px) {
.gap5   {border-left: 0px solid; height: 5px; width: 0px;}
.gap10   {border-left: 0px solid; height: 5px; width: 0px;}
.gap20   {border-left: 0px solid; height: 10px; width: 0px;}
.gap40   {border-left: 0px solid; height: 20px; width: 0px;}
.gap60   {border-left: 0px solid; height: 30px; width: 0px;}
.gap80   {border-left: 0px solid; height: 40px; width: 0px;}
.gap100   {border-left: 0px solid; height: 50px; width: 0px;}
}

/*  ----- displaying  --- */
.displaymob_none {display: none;}
         @media all and (min-width: 560px) {.displaymob_none {display: block;}
}




.displaysmart_none {display: none;}
         @media all and (min-width: 560px) {.displaysmart_none {display: block;}
}


.displaysmart_on {display: none;}
         @media all and (max-width: 559px) {.displaysmart_on {display: block;}
}






@keyframes fadein{
        from{
        opacity:0;}to{opacity:1;}}
        @-moz-keyframes fadein{from{opacity:0;}to{opacity:1;}}
        @-webkit-keyframes fadein{from{opacity:0;}to{opacity:1;}}
        @-o-keyframes fadein{from{opacity:0;}to{opacity:1;}}




/* ===================================================================================================================== */
/* ===================================================== ABSCHNITT 2 =================================================== */
/* ===================================================== GRIDS       =================================================== */


/* ========== TEAM ========== */
.grid_111 {
display: grid;
grid-template-columns: 2fr 1fr 2fr;
grid-template-rows: auto;
margin-bottom:0px;

}



.div111_job { grid-area: 1 / 1 / 2 / 2; }
.div111_pic { grid-area: 1 / 2 / 2 / 3; }
.div111_txt { grid-area: 1 / 3 / 2 / 4; }


.div111_job { border-top:1px solid #63BE1B; padding-top:10px;}
.div111_pic { border-top:1px solid #63BE1B;}
.div111_txt { background-color:#F0F0F0; border-top:1px solid #63BE1B; padding:10px 0 0 10px;}




@media all and (max-width: 1500px) {
         .grid_111 { grid-template-columns: 2fr 1fr 2fr;}

}

@media all and (max-width: 1000px) {
         .grid_311 { grid-template-columns: 2fr 1fr 2fr;}

}



@media all and (max-width: 680px) {
         .grid_111 {
          grid-template-columns: 1fr 1fr 1fr;
          grid-template-rows: auto;
         }
         .div111_job { grid-area: 1 / 1 / 2 / 4; border-top:1px solid #63BE1B; padding:10px 0 10px 0px; margin-top:0px;}
         .div111_pic { grid-area: 2 / 1 / 3 / 2; border-top:0; padding-top: 0px;}
         .div111_txt { grid-area: 2 / 2 / 3 / 4; border-top:0; padding:10px 5px 0 10px; background-color:#FFFFFF;}

}






/* ========== HOME / IMPET BILD LINKS ========== */
.grid_311 {
display: grid;
grid-template-columns: 0px 1fr 1fr 1fr 100px;
grid-template-rows: auto;
margin-bottom:80px;

}

.div311_pic { grid-area: 1 / 1 / 2 / 4; }
.div311_txt { grid-area: 1 / 4 / 2 / 5; }
.div311_gap { grid-area: 1 / 5 / 2 / 6; }


.div311_pic { border:0px solid #FF0000;}
.div311_txt { border:0px solid #00C0FF;padding-top:80px;}
.div311_gap { border:0px solid #00BF00;}



@media all and (max-width: 1500px) {
         .grid_311 { grid-template-columns: 0px 1fr 1fr 2fr 20px;}
         .div311_txt { padding-top: 40px;}
         .div311_pic { padding-top: 40px;}
}

@media all and (max-width: 1000px) {
         .grid_311 { grid-template-columns: 0px 1fr 1fr 2fr 20px;}
         .div311_txt { padding-top: 20px;}
         .div311_pic { padding-top: 80px;}
}



@media all and (max-width: 680px) {
         .grid_311 {
          grid-template-columns: 1fr;
          grid-template-rows: 1fr auto;
         }

         .div311_pic { grid-area: 1 / 1 / 2 / 2; padding-top: 0px;}
         .div311_txt { grid-area: 2 / 1 / 2 / 3; padding:0 20px 0 20px;}

}



/* ========== HOME / IMPET BILD RECHTS ========== */
.grid_113 {
display: grid;
grid-template-columns: 100px 1fr 1fr 1fr 0px;
grid-template-rows: 1fr;
margin-bottom:80px;

}

.div113_gap { grid-area: 1 / 1 / 2 / 2; }
.div113_txt { grid-area: 1 / 2 / 2 / 3; }
.div113_pic { grid-area: 1 / 3 / 2 / 6; }

.div113_pic { border:0px solid #FF0000;}
.div113_txt { border:0px solid #00C0FF;padding-top:80px;}
.div113_gap { border:0px solid #00BF00;}


@media all and (max-width: 1500px) {
         .grid_113 { grid-template-columns: 20px 2fr 1fr 1fr 0px;}
         .div113_txt { padding-top: 40px;}
         .div113_pic { padding-top: 40px;}
}


@media all and (max-width: 1000px) {
         .grid_113 { grid-template-columns: 20px 2fr 1fr 1fr 0px;}
         .div113_txt { padding-top: 20px;}
         .div113_pic { padding-top: 80px;}
}



@media all and (max-width: 680px) {
         .grid_113 {
         grid-template-columns: 1fr;
         grid-template-rows: 1fr auto;
         }

         .div113_pic { grid-area: 1 / 1 / 2 / 2; padding-top: 0px;}
         .div113_txt { grid-area: 2 / 1 / 3 / 2; padding:0 20px 0 20px;}



}

/* ------------- HOME /  Textbreiten verk rzt ------ */
.shorter_311 { margin-left:0px;}
.shorter_113 { margin-left:0%}




















/* ===================================================================================================================== */
/* ===================================================== ABSCHNITT 3 =================================================== */
/* ===================================================== FLEXBOX     =================================================== */


.bounding {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
                flex-flow: row wrap;
}


article,
aside {
        padding: 0px;
        margin:  0px;
        -webkit-flex: 1 100%;
                flex: 1 100%;
}



article {
        background: none;
}

aside {
        background: none;
}



/* -------------------------  mid -------------------------  */

@media all and (min-width: 560px) {


        article {
                webkit-order: 2;
                       order: 2;
        }

        aside {
                -webkit-order: 1;
                        order: 1;

                -webkit-flex: 1 100%;
                        flex: 1 100%;
        }
}

/* ------------------------------------ Large ---------------------------- */

@media all and (min-width: 1000px) {
        article {
                -webkit-flex: 1 1 0%;
                        flex: 1 1 0%;
                -webkit-order: 2;
                        order: 2;

        }

        aside {
                -webkit-flex: 1 1 0%;
                        flex: 1 1 0%;
                -webkit-order: 1;
                        order: 1;
                 padding-right:15px;
        }
}



/* ========================== 2-spalter mit Abstand ============================== */

.two_L {
        padding: 0px;
        margin:  0px;
        -webkit-flex: 1 100%;
                flex: 1 100%;
        -webkit-order: 1;
                order: 1;
}



.two_R {
        padding: 0px;
        margin:  0px;
        -webkit-flex: 1 100%;
                flex: 1 100%;
        -webkit-order: 2;
                order: 2;
}

/* --------------  mid -------------------------  */

@media all and (min-width: 760px) {


        .two_L {
                -webkit-flex: 1 1 0%;
                        flex: 1 1 0%;
                -webkit-order: 1;
                        order: 1;
                padding-right:15px;

        }

        .two_R {
                -webkit-flex: 1 1 0%;
                        flex: 1 1 0%;
                -webkit-order: 2;
                        order: 2;
                padding-left:15px;
        }
}

/* ------------------- Large ------------ */

@media all and (min-width: 1000px) {
        .two_L {
                -webkit-flex: 1 1 0%;
                        flex: 1 1 0%;
                -webkit-order: 1;
                        order: 1;
                padding-right:15px;

        }

        .two_R {
                -webkit-flex: 1 1 0%;
                        flex: 1 1 0%;
                -webkit-order: 2;
                        order: 2;
                padding-left:15px;
        }
}






/* ========================== Gemeindeseiten ============================== */

.gem_L {
        padding: 0px;
        margin:  0px;
        -webkit-flex: 1 100%;
                flex: 1 100%;
        -webkit-order: 1;
                order: 1;
}



.gem_R {
        padding: 0px;
        margin:  0px;
        -webkit-flex: 1 100%;
                flex: 1 100%;
        -webkit-order: 2;
                order: 2;
}

/* --------------  mid -------------------------  */

@media all and (min-width: 760px) {


        .gem_L {
                -webkit-flex: 1 1 0%;
                        flex: 1 1 0%;
                -webkit-order: 1;
                        order: 1;
                padding-right:15px;

        }

        .gem_R {
                -webkit-flex: 1 1 0%;
                        flex: 1 1 0%;
                -webkit-order: 2;
                        order: 2;
                padding-left:15px;
        }
}

/* ------------------- Large ------------ */

@media all and (min-width: 1000px) {
        .gem_L {
                -webkit-flex: 2 1 0%;
                        flex: 2 1 0%;
                -webkit-order: 1;
                        order: 1;
                padding-right:15px;

        }

        .gem_R {
                -webkit-flex: 1 1 0%;
                        flex: 1 1 0%;
                -webkit-order: 2;
                        order: 2;
                padding-left:15px;
        }
}




/* ========================== 1 und 2 spalten ============================== */

.col23 {
        padding: 0px;
        margin:  0px;
        -webkit-flex: 1 100%;
                flex: 1 100%;
}



.col13 {
        padding: 0px;
        margin:  0px;
        -webkit-flex: 1 100%;
                flex: 1 100%;
}

/* -------------------------  mid -------------------------  */

@media all and (min-width: 560px) {


        .col23 {
                webkit-order: 2;
                       order: 2;
        }

        .col13 {
                -webkit-order: 1;
                        order: 1;

                -webkit-flex: 1 100%;
                        flex: 1 100%;
        }
}

/* ------------------------------------ Large ---------------------------- */

@media all and (min-width: 1000px) {
        .col23 {
                -webkit-flex: 2 1 0%;
                        flex: 2 1 0%;
                -webkit-order: 2;
                        order: 2;

        }

        .col13 {
                -webkit-flex: 1 1 0%;
                        flex: 1 1 0%;
                -webkit-order: 1;
                        order: 1;
                padding-right:20px;
        }
}













/* ===================================================================================================================== */
/* ===================================================== ABSCHNITT 4 =================================================== */
/* ===================================================== THEMEN & LK-BOXEN ============================================= */

/* Anzeige bei standard: block; bei bf: none */
.bfno {display:block;}



.wrapper_boxes {
        max-width:1600px;
        margin: 0 auto;
        }

.bgcolor_dark         { background: #000000; }




/* THEMENBOXEN  */

.themenbox_orange        { background: #b4750d; }
.themenbox_green         { background: #5d891a; }
.themenbox_blue          { background: #2e8b96; }
.themenbox_black         { background: #3F3F3F; }
.themenbox_empty         { background: none; }
.themenbox_grey          { background: linear-gradient(135deg, #AFAFAF, #FFFFFF); }
.themenbox_nocolor       { background: linear-gradient(135deg, #000000, #2F2F2F); }


.themenbox_orange,
.themenbox_green,
.themenbox_blue,
.themenbox_black,
.themenbox_empty,
.themenbox_grey,
.themenbox_nocolor
        {
        width: calc(20% - 2px);
        height: 130px;
        margin:1px;
        overflow:hidden;
        float:left;
        transition: all .2s ease-in-out;
        }


.themenbox_orange:focus,
.themenbox_green:focus,
.themenbox_blue:focus,
.themenbox_black:focus,

.themenbox_grey:focus,
.themenbox_nocolor:focus
 {
         filter: brightness(130%);
         }





.themenbox_orange:hover,
.themenbox_green:hover,
.themenbox_blue:hover,
.themenbox_black:hover,

.themenbox_grey:hover,
.themenbox_nocolor:hover
 {
         filter: brightness(130%);
         transition: all .2s ease-in-out;
         }






/* office screens */
@media all and (max-width: 1100px) {
.themenbox_orange,
.themenbox_green,
.themenbox_blue,
.themenbox_black,
.themenbox_empty,
.themenbox_grey,
.themenbox_nocolor
               { width: calc(25% - 2px); height: 120px; margin-bottom: 0px;}
}


/* Mid screens */
@media all and (max-width: 810px) {
.themenbox_orange,
.themenbox_green,
.themenbox_blue,
.themenbox_black,
.themenbox_empty,
.themenbox_grey,
.themenbox_nocolor
               { width: calc(33.33% - 2px); height: 110px;  margin-bottom: 0px; }
}


/* Small screens */
@media all and (max-width: 560px) {
.themenbox_orange,
.themenbox_green,
.themenbox_blue,
.themenbox_black,
.themenbox_empty,
.themenbox_grey,
.themenbox_nocolor
               { width: calc(50% - 2px); height: 100px; }
}



/* Themenboxen-Texte */

.h2_portfolio_themen {
        font-family: 'Varela Round', sans-serif;
        font-weight:500;
        font-size: 150%;
        word-spacing: 0.05em;
        line-height: 1.1em;
        text-transform: uppercase;
        padding-left: 7px;
        margin-top:15px;
        margin-bottom:5px;


}


@media all and (max-width: 1000px) {.h2_portfolio_themen { font-size: 140%; }}

@media all and (max-width: 810px) {.h2_portfolio_themen { font-size: 130%;  }}

@media all and (max-width: 560px) {.h2_portfolio_themen {  font-size: 105%; }}









.rubrik {
        font-family: 'Varela Round', sans-serif;
        font-size: 80%;
        letter-spacing: 0.1em;
        line-height:110%;
        text-transform: uppercase;
        padding-left: 7px;
        margin-top:15px;
        margin-bottom:5px;


}


@media all and (max-width: 1000px) {.rubrik {font-size: 80%;}}

@media all and (max-width: 810px) {.rubrik {font-size: 65%; margin-top:10px;}}

@media all and (max-width: 560px) {.rubrik {font-size: 60%; margin-top:5px;}}







/* =================================================================================== */

/* LANDKREISBOXEN dunkel */

.logogrid {
display: grid;
grid-template-columns: 3fr 1fr;
grid-template-rows: 1fr 50px;
}

.logo_pic { grid-area: 1 / 1 / 2 / 3; }
.logo_txt { grid-area: 2 / 1 / 3 / 2; }
.logo_key { grid-area: 2 / 2 / 3 / 3; align-self: center; justify-self: end;}

/* schaltet bei Mobiles Landkreis-Logo aus */
@media all and (max-width: 560px) {
.mobno { display:none}
}






.logobox_lk { background: #2e8b96; }

.logobox_lk
        {
        width: calc(20% - 2px);
        height: autopx;
        margin:1px;
        overflow:hidden;
        padding:0px;
        float:left;
        transition: all .2s ease-in-out;
        }


.logobox_lk:hover
 {
         filter: brightness(130%);
         transition: all .2s ease-in-out;
         }


.logobox_lk:focus
 {
         filter: brightness(130%);
         }

@media all and (max-width: 1100px) {.logobox_lk { width: calc(25% - 2px); margin-bottom: 0px;}}
@media all and (max-width: 810px) {.logobox_lk { width: calc(33.33% - 2px); margin-bottom: 0px; }}
@media all and (max-width: 560px) {.logobox_lk { width: calc(50% - 2px); }}





.lk_name {
        font-family: 'Varela Round', sans-serif;
        font-size: 80%;
        letter-spacing: 0.1em;
        line-height:110%;
        text-transform: uppercase;
        padding-left: 7px;
        margin-top:15px;
        margin-bottom:5px;


}


@media all and (max-width: 1000px){.lk_sname {font-size: 80%;}}
@media all and (max-width: 810px) {.lk_sname {font-size: 70%; margin-top:10px;}}
@media all and (max-width: 560px) {.lk_sname {font-size: 70%; margin-top:5px;}}



/* key f r negative/dunkle boxen */
.key {
        font-family: 'Roboto', sans-serif;
        font-size: 100%;
        font-weight:700;
        letter-spacing: 0.1em;
        line-height:110%;
        text-transform: uppercase;
        margin:0px 7px 0 7px;
        border-radius:5px;
        padding:3px 8px 3px 8px;

        color:#FFFFFF;
        border:1px solid #FFFFFF;

}


@media all and (max-width: 1000px) {.key {font-size: 80%;}}
@media all and (max-width: 810px) {.key {font-size: 65%; margin-top:10px;}}
@media all and (max-width: 560px) {.key {display:none}}




/* ================================================================ */
/* GEMEINDE-BOXEN hell  */


.logo_pic2 { grid-area: 1 / 1 / 2 / 3; opacity:0.6;}
.logo_txt2 { grid-area: 2 / 1 / 3 / 2; }
.logo_key2 { grid-area: 2 / 2 / 3 / 3; align-self: center; justify-self: end;}




.logobox_gem  { background: #DFDFDF; }

.logobox_gem
        {
        width: calc(25% - 10px);
        height: autopx;
        margin:4px;
        overflow:hidden;
        padding:0px;
        float:left;
        transition: all .2s ease-in-out;

        border:1px solid #FFFFFF;
        }


.logobox_gem:hover
 {
         filter: brightness(90%);
         transition: all .2s ease-in-out;
         }


.logobox_gem:fokus
 {
         filter: brightness(90%);
         }

@media all and (max-width: 1600px) {.logobox_gem { width: calc(33.33% - 10px); margin-bottom: 0px; }}
@media all and (max-width: 1000px) {.logobox_gem { width: calc(50% - 10px); }}



.gem_name {
        font-family: 'Varela Round', sans-serif;
        font-size: 100%;
        letter-spacing: 0.1em;
        line-height:110%;
        text-transform: uppercase;
        padding-left: 7px;
        margin-top:15px;
        margin-bottom:5px;

        color: #2F2F2F;
}


@media all and (max-width: 1600px){.gem_name {font-size: 80%;}}
@media all and (max-width: 1000px) {.gem_name {font-size: 70%; margin-top:10px;}}
@media all and (max-width: 560px) {.gem_name {font-size: 70%; margin-top:5px;}}



/* key f r positive/helle boxen */
.key2 {
        font-family: 'Roboto', sans-serif;
        font-size: 60%;
        font-weight:700;
        letter-spacing: 0.1em;
        line-height:110%;
        text-transform: uppercase;
        margin:0px 7px 0 7px;
        border-radius:5px;
        padding:3px 3px 3px 3px;

        color:#3F3F3F;
        border:1px solid #2F2F2F;

}

@media all and (max-width: 1000px) {.key2 {font-size: 55%;}}
@media all and (max-width: 810px) {.key2 {font-size: 50%; margin-top:10px;}}
@media all and (max-width: 560px) {.key2 {display:none}}





/* ================================================================ */
/* === Landkreis- und Gemeindeseiten === */
.kontaktbox {width:100%, height:auto; padding:10px; }
.kontakthead {font-family: 'Varela Round', sans-serif; font-size:160%; font-weight:400; line-height:140%; margin:0; text-transform: uppercase;}
.kontakttxt {font-size:120%; font-weight:400; line-height:140%; margin:0;}
.partnerlogo {width:50%; margin:15px 0 15px 0;}

@media all and (max-width: 1600px) {
.kontaktbox  { }
.kontakthead {font-size:160%;}
.kontakttxt {font-size:100%;}
.partnerlogo {width:70%;}
}

@media all and (max-width: 1000px) {
.kontaktbox  { }
.kontakthead {font-size:160%;}
.kontakttxt {font-size:100%;}
.partnerlogo {width:60%; }
}

@media all and (max-width: 560px) {
.kontaktbox  { }
.kontakthead {font-size:160%;}
.kontakttxt {font-size:100%;}
.partnerlogo {width:50%;}
}




table {
  border-collapse: collapse;
  width: 100%;
  margin-top:15px;
}



td,th {
  padding: 8px 0;

}



td,th {
        font-family: 'Roboto', sans-serif;
        font-size: 105%;
        font-weight: 400;

        line-height:150%;
        letter-spacing: 0.05em;
        text-align: left;
}

th {
  font-weight: 700;
}



.td_R {
  text-align: right;
  width:30%;
}

         @media all and (max-width: 1200px){p {font-size:100%; line-height: 1.5em; }}
         @media all and (max-width: 860px) {p {font-size:95%; line-height: 1.5em; }}
         @media all and (max-width: 640px) {p {font-size:95%; line-height: 1.4em; }}
         @media all and (max-width: 560px) {p {font-size:90%; line-height: 1.4em; }}








/* ================================================================ */
/* === F rderungspartnerlogos am Seitenende als iframe === */

.partnerframe {
        width:100%;
        height:710px;
        margin: auto;
        border:0px solid #FF0000;
         }

@media all and (max-width: 1400px) {.partnerframe {height:500px;}}
@media all and (max-width: 1250px) {.partnerframe {height:450px;}}
@media all and (max-width: 1000px) {.partnerframe {height:450px;}}
@media all and (max-width: 760px)  {.partnerframe {height:730px;}}



.fplogo_full {display: block;}
         @media all and (max-width: 1000px) {.fplogo_full {display: none;}
}


.fplogo_half {display: none;}
         @media all and (max-width: 1000px) {.fplogo_half {display: block;}
}


.imgpartnerlogo {width:100%}
         @media all and (max-width: 1000px) {.imgpartnerlogo {width:340px; margin:0 auto;}
}


/* =============================== Aufklapptexte LK-Seiten ============= */
/* ==== accordeon =================================================== ==== */
.akkoroom  {width:100%; margin:0 auto;}

@media all and (max-width: 800px) {
        .akkoroom     {width:100%; }
}

.collapsible {
    background-color: #FFFFFF;

    cursor: pointer;
    padding: 18px 10px 18px 5px;
    width:100%;
    border-top: 1px solid #5F5F5F;
    border-left: 0px dotted #5F5F5F;
    border-right: 0px dotted #5F5F5F;
    border-bottom: 0px dotted #5F5F5F;
    outline: none;

    font-family: 'Roboto', sans-serif;
    font-size: 100%;
    font-weight: 600;


    text-transform: none;
    text-align: left;
}



.collapsible_last {
    background-color: #FFFFFF;

    cursor: pointer;
    padding: 18px 10px 18px 5px;
    width:100%;
    border-top: 1px dotted #5F5F5F;
    border-left: 0px dotted #5F5F5F;
    border-right: 0px dotted #5F5F5F;
    border-bottom: 0px dotted #5F5F5F;
    outline: none;

    font-family: 'Roboto', sans-serif;
    font-size: 100%;
    font-weight: 600;


    text-transform: none;
    text-align: center;
}

.active, .collapsible:hover,
.collapsible_last:hover,
.collapsible:focus,
.collapsible_last:focus
{
    background-color: #D6EDA0;
    color: #336718;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.content {
    padding: 20px 10px;
    width:70%;
    margin-left:15%;

    display: none;
    overflow: hidden;
    background-color: #FFFFFF;

    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;

}


.content2 {
    padding: 20px 0px;
    display: none;
    overflow: hidden;
    background-color: #FFFFFF;
    margin-left:0%;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;

}


.innertext {
        font-family: 'Roboto', sans-serif;
        font-size: 110%;
        font-weight: 300;
        letter-spacing: .05em;
        color: #000000;
        word-spacing: 0.1em;
        line-height:160%;
        margin-top:10px;
        margin-bottom:40px;
        text-align:left;
}



@media all and (max-width: 1400px) {
        .innertext { font-size: 100%; line-height:155%;}
        .content  {width:80%; padding: 20px 20px; margin-left:10%;}
}


@media all and (max-width: 1200px) {
        .innertext { font-size: 95%; line-height:150%;}
        .content  {width:80%; padding: 20px 20px; margin-left:10%;}
}


@media all and (max-width: 960px) {
        .akkoroom     {width:100%; }
        .collapsible  {font-size: 100%; }
        .collapsible_last  {font-size: 100%; }
        .content  {width:100%; padding: 20px 20px; margin-left:0%;}
}




.black {color:#000000;}