@import url('fonts.css');
 *{
     margin:0;padding:0;
 }

html,
body {
    height: 100%;
    font-family: Roboto, Verdana, Helvetica;
    font-size: 106%;
    font-weight: 300;
}
div, nav, header, footer {
      box-sizing:border-box;
 }

.rot {
   background-color: rgb(229, 30, 121);
     }
 .linkrot {
   color: rgb(229, 30, 121);
     }
.gruen {
   background-color: rgb(28, 174, 136);
     }

.h_gruen {
   background-color: rgb(209, 232, 221);
     }
.gelb {
   background-color: rgb(254, 210, 36);
     }
.h_gelb {
   background-color: rgb(254, 238, 202);
     }

.blau {
   background-color: rgb(57, 128, 195);
     }
.linkblau {
   color: rgb(57, 128, 195);
     }
.h_blau {
    background-color: rgb(195, 207, 237);
     }

a {
    color:#000;
}

b {
    font-weight: 500;
}

p  {
    padding-top:10px; padding-bottom:10px;
    line-height: 1.6em;
}

p.ohne{
    padding-top:0;padding-bottom:0px;
}

.foto_kontakt {   text-align:center;
/*margin:40px 0 20px 0;  */  width:70%; max-width:200px;
}
@media screen and ( min-width: 500px ) {
.foto_kontakt {
 float:right;
}

p.tab{
    margin-left:20px;
}

.tab2{
    margin-top:80px;
    margin-left:60px;
}

.abstand1{
    margin-top:20px;
}
}

.text ul { padding-top:14px; padding-bottom:14px;
    line-height: 1.6em;
    list-style-image: url(../img/listenpunkt.png);

}
.text ul li{ margin-left:20px;padding-top:14px; padding-bottom:14px;  padding-left:14px;
}

.breadcrumb {  padding-top:40px; }
h1 {  padding-top: 20px;}

@media screen and ( min-width: 890px ) {
    .foto_kontakt {
 margin-right:40px;
}


 .breadcrumb { display:none;}
h1 { padding-top: 60px; }
}


h1,h2 {
    font-weight: 500;
    font-size: 32px;
    margin-bottom: 13px;
}
h2 {
    padding-top: 60px;
}

h3{
  margin-bottom: 40px;
  font-weight:500;
}

hr{  margin-top:50px; margin-bottom:50px;
    height:1px;border-width:0;color:#fff;background-color:#000;
}

.page {
    width: 100%; margin:0 auto;
}

/*************** header *********************  */
header { margin-top:0; width:100%; height:128px;
background-color:#fff;
box-shadow: 0 20px 20px -8px rgba(83,83,83,0.9);
}

*.position::before {      /*Versatz für Sprungmarken */
display: block;
content: "";
/*height:0px;
margin-top: -0px;*/
visibility: hidden;
}
@media screen and ( min-width: 890px ) {
    header { position:fixed;
}
}

.h_container{
      display: flex; flex-direction:column;  padding-top:20px;padding-left:10px; padding-right:10px;
}

div.logo img{
    width:100%; max-width:250px;
}

div.logotext { font-size: 80%;
}

nav {display:none; right:0; margin-top:10px; width:100%; background:rgba(255,255,255,0.95);}

@media screen and ( min-width: 450px ) {
div.logotext {display:block; margin-left:78px; margin-top:-5px;
}
nav  { margin-top:20px; }
}

@media screen and ( min-width: 890px ) {
header { height:200px;  z-index: 3;
}
.position::before { /*Versatz für Sprungmarken */
height:240px;
margin-top: -240px;
}
.h_container { max-width:1200px; margin: 0 auto; padding-left:25px; padding-right:25px;
}
}

@media screen and ( min-width: 1000px ) {
div.logo img{
    max-width:350px;
} /* Logo größer, Schrift neben Logo */
.h_container{  flex-direction:row; justify-content:space-between;
}
div.logotext { margin-left:0; margin-top:0; padding-top:41px; font-size:100%; letter-spacing: 0.1em;
}
}
  /* ***************** */

.toggle_menu {   position:absolute; right:25px; top: 10px; display: inline-block; cursor: pointer; }
.bar1, .bar2, .bar3 {
    width: 40px; height: 2px;  background-color:#000; margin: 10px 0;transition: 0.4s; }
.change .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 7px); transform: rotate(-45deg) translate(-9px, 7px) ; }
.change .bar2 { opacity: 0;}
.change .bar3 { -webkit-transform: rotate(45deg) translate(-9px, -9px); transform: rotate(45deg) translate(-9px, -9px) ;  }

  /* ***************** */



nav {
  display: none;
  position: absolute;
  right: 0;
  z-index: 100;
  width: 100%;
  background: #fff;
  font-size: 100%;
    letter-spacing: 0.1em;
}

nav ul {padding: 0; list-style:none;  }
nav ul li {padding:20px 20px 20px 20px;  }
li.hov_stiftung:hover,  .stiftung li.aktiv {background-color: rgb(57, 128, 195); color:#fff; }/* blau */
li.hov_projekte:hover, .projekte li.aktiv {background-color: rgb(254, 210, 36);  color:#fff; }/*gelb */
li.hov_einzelfoerderungen:hover, .einzelfoerderungen li.aktiv { background-color: rgb(28, 174, 136); color:#fff; }/*grün */
li.hov_foerderantraege:hover, .foerderantraege li.aktiv { background-color: rgb(229, 30, 121); color:#fff; }/*rot */
li.hov_kontakt:hover, .kontakt li.aktiv {background-color: rgb(57, 128, 195); color:#fff; }/* blau */

nav ul li:hover a, nav ul li a.aktiv {color:#fff; }
nav ul li a{
    width:100%;
    text-decoration: none;
    font-weight: 500;
    }

nav ul li a:hover {color:#fff;  }


@media screen and ( min-width: 890px ) {
.toggle_menu { display:none;}

nav {display: block; position:relative; margin-top:40px; background: #fff; padding-left:25px; padding-right:25px;

}

nav ul {
    display: flex;
    margin: 0 auto;
    width: 100%;
    max-width: 946px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-bottom:14px;

}

nav ul li {
    padding: 5px 10px;
    }

nav ul li:hover, li.aktiv {
	border-radius: 10px; /* transition: background-color 2.5s, color 3.5s;*/
   }


}


/************************************  */


div.content {
    width:100%;
}
@media screen and ( min-width: 890px ) {
div.content {
  padding-top:200px;
}
}

div.textbereich {
    box-sizing:border-box;
    width: 100%;
   color:#000;
   font-size:110%
}
div.text { width:100%; padding:0 10px 100px 10px;
}
.top {
    margin-top:-21px;
}

@media screen and ( min-width: 890px ) {
.top {
    margin-top:-24px;
}

}



.linkpfeil::before {
    content: url(../img/link-button.png); ;
     margin:2px 10px 0 0; vertical-align: sub;
}
.linkpfeil_rot::before {
    content: url(../img/link-button_rot.png); ;
     margin:2px 10px 0 0; vertical-align: sub;
}


div.text { margin: 0 auto; max-width:800px;  padding:0 25px 80px 25px;
}

div.text_inter { margin: 0 auto; max-width:800px;  padding:60px 25px 20px 25px;
}

/*   Projekte */

.dreispalter {
  margin: 10px auto 20px;
}


 .dreispalter > div {
    width: 100%;
    box-sizing: border-box;
  margin-bottom:10px;
   }

 .dreispalter > div:hover {
   box-shadow: 1px 1px 10px #808080;
   }

.zoom{
    overflow:hidden;
}

.zoom img{-webkit-transition: -webkit-transform .5s ease;
  transition: -webkit-transform .5s ease;
  -o-transition: transform .5s ease;
  transition: transform .5s ease;
  transition: transform .5s ease, -webkit-transform .5s ease;
   }

.zoom:hover img{
      -webkit-transform: scale(1.03);
  -ms-transform: scale(1.03);
  transform: scale(1.03);
   }


@media screen and ( min-width: 500px ) {
.dreispalter {
  display: flex;
  justify-content: space-around;
  max-width:700px;
}

 .dreispalter > div {
  display: flex;
  flex-direction: column;
  width: 30%;
}
}

.dreispalter > div img {
  width: 100%;
  height: auto;
}

.dreispalter > div h4 {
    font-weight:500;
padding:14px 6px 4px 6px;

}

.dreispalter > div p {
padding:0 6px 10px 6px;
hyphens: auto;
}

.p_header{ width:100%; height:auto;
    margin:20px 0 20px 0;
}

.p_logo{ max-width:50%; height:auto;

}



 .zweispalter {
     margin-bottom:40px;
}


 .zweispalter > div {
    width: 100%;
    box-sizing: border-box;

   }
   .zweispalter > div img {
  width: 100%;
  height: auto;
}

.zweispalter > div h4 {
    font-weight:500;
padding:10px 6px 4px 6px;

}

.zweispalter > div p {
padding:0 6px 6px 6px;
hyphens: auto;
}



  @media screen and ( min-width: 500px ) {
.zweispalter {
  display: flex;
   margin-bottom:20px;
  /*justify-content: space-around;*/
/*  max-width:700px; */
}

 .zweispalter > div:first-child {
  display: flex;
  flex-direction: column;
  width: 30%; margin-right:10px;
}
 .zweispalter > div:last-child {
  display: flex;
  flex-direction: column;
  width: 70%;
}
}



 /* Formular */

form{

}

label {
    margin-left:10px;
}

input, textarea{
width:80%;
border: 0;
color: #2b2b2b;
padding: 8px 10px 8px;
background: none repeat scroll 0 0 #fff;   }

.button {   width:120px;
background-color:rgb(229, 30, 121);
color: #ffffff;
padding:10px;
margin-top:20px;
margin-left:58px;
text-decoration:none;border-radius: 10px; }

 /* checkbox */
.container {
  display: block;
  position: relative;
  padding-left: 50px;
  margin-bottom: 12px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: -10px;
  height: 40px;
  width: 40px;
  background-color: #fff;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: rgb(57, 128, 195);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 13px;
  top: 5px;
  width: 11px;
  height: 20px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
 /***********************/

footer {
    width: 100%;
    height:120px;
    color: #fff;
    text-align:right;
    padding-right: 24px;

}
footer div{
     margin: 0 auto; max-width:730px;  padding:25px 25px 25px 25px;
}

footer a {
    color: #fff;
       font-weight: 500;
       text-decoration:none;
       padding:0 0 0 25px;
}

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  }