@import url(normalize.css);
@import url(all.min.css);
@import url(flickity.min.css);


*{
    box-sizing: border-box;
    /* zugewiesene breiten/höhen als gesamtbreite/höhe behandelt. Innenabstände, Rahmen sind im Wert inkludiert. Immer machen 
    bis zeile 44 sinnvolle anpassungen für ein dokument */
}

body{
    font-family: 'Roboto';
    font-size: 1em;
}

h1,h2,h3,h4,h5,h6{
    font-family: 'Oswald', sans-serif; 
}
h3{
    font-weight: 200;
    font-size: 1.5em; 
    color:rgb(124, 97, 97); 
    text-align: center;
}

a{
    text-decoration: none;
}

ul,ol{
    padding:0;
    margin: 0;
    list-style-type: none;
}

figure{
    margin: 0;
}


p{
    line-height: 1.3em;
    color:rgb(142, 111, 124); 
    font-size: 1.1em;   
}


/* innerbox-container-inhalt */
.innerbox{
    max-width: 980px;
    margin: auto;
    padding-top: 10px;  
}


main .innerbox{
    padding: 40px 20px;
}
/* 
padding 20px;                oben/unten/links/rechts- alle den gleichen wert 
padding: 20px 10px;          oben/unten   ---- links/rechts
padding: 20px 10px 5px;      oben --- links/rechts --- unten
padding: 20px 10px 5px 8px;  oben - rechts - unten - links (Uhrzeigersinn) 4 werte nur wenn li/re nuterschiedlich sind
eigenes css gestaltungsraster */

header.innerbox{
    padding: 10px;
    overflow: hidden; 
}

footer .innerbox{
    padding: 10px;
    overflow: hidden;
}

#referenz{
   background: #ffffff;
}
.index #referenz .innerbox{
    padding-top: 0px;
 }



.platzhalter{
    height: 50px;
    }

.row{  
    overflow: hidden;
}

.flex-container  div{
    background: #c3acac;
    border:1px solid rgb(194, 159, 159);
    box-shadow: rgba(50, 40, 40, 0.2) 0px 2px 8px 0px;
    padding:10px;
    flex:flex;
    text-align: center;
    padding-top: 10px;
}

.flex-container h2{
  padding-top: 23px;
  color:rgb(255, 255, 255);
    }
.flex-container p{
padding-top: 20px;
color:rgb(255, 255, 255);
}

.flex-container-kreis{ 
   padding-top:5px;
   width: 100%;
   padding-bottom: 20px;
}

.unterseiten.rap-als-tool .flex-container{
    justify-content: center; 
    gap: 23px;
    width: auto;
}

.unterseiten.rap-als-tool .flex-container div{
    box-shadow: rgba(197, 166, 166, 0.2); 
    border: none;  
}

.unterseiten.rap-als-tool .flex-container .iconbox{
    background: none;
    box-shadow: none;
    border: none;
}
.unterseiten.rap-als-tool .flex-container i{
   height: 20px;
   color: fuchsia;
   font-size: 50px;
}

.unterseiten.rap-als-tool .flex-container h3{
    color: #7402a9;
    justify-content: center; 
    background: none;
}


.unterseiten.rap-als-tool .flex-container.fem .kugel i{
    color: white;
}
.unterseiten.rap-als-tool .flex-container.fem .kugel h3{
    color: white;
}



.halbe{
    width: 45%;
  /* 100% - 2% =98% : 2 = 49%  > bei zwei spalten*/
    float:left;
    margin-right: 2%;  
}
.halbe h1{
    color:#555061; 
    letter-spacing: 1px;    
}

.halbe h2{
    color:#555061; 
    letter-spacing: 1px;
    font-weight: 200;
    font-size: 1.8em;
    padding-bottom: 0;
}

.halbe.zwei{
    width: 49%;
    border-left: 3px solid  rgb(163, 24, 255);
    padding-left: 30px;
    margin-right: 15px;
    margin-left: 20px;
}

.halbe.zwei span{
    display:inline-block; border-bottom:3px solid rgb(255, 255, 255); padding-bottom:3px;
}





#icons{
    margin-left: 30%;
}

#icons i{
    display: inline-block;
    float:left;
    margin-left: 15px;
    color: rgb(255, 174, 0);  
    font-size: 2em;
}



/* button */
.button{
  
    background-color:  rgb(163, 24, 255);
    padding:15px 30px;
    display: inline-block;  
    margin-top: 30px;
    margin-left: 65px;
    color: #fff; 
    border-radius: 37px 0px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.button:hover{
    background-color:rgb(252, 181, 1);
    padding:15px 30px;  
    color: #000;
}


/* header */

header{
    position: fixed;/*am Browser ausgerichtet*/
    z-index: 999;
    width: 100%;
    overflow: hidden;  
    margin-bottom: 0; 
}



header nav{
    text-align: right;
    padding: 5px;
    font-size: 25px;
    margin-top: 10px;
    }
    
header nav ul li{   
        display: inline-block;
        }
    
header nav ul li a{
        color: rgb(255, 255, 255);
        font-family: 'Oswald', sans-serif;
        font-weight: 200;
        margin-left: 17px;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out; 
}
    
header nav ul li a:hover{
    color:rgb(255, 196, 3);      
}
       

#logo{
margin-bottom: 5px;
    height: 60px;
    float: left;
margin-top: 0px;

}

#aktiv{
    color:rgb(255, 196, 3);
}

/* id=hero für große grafik /bildbereich
vh= viewport bereich - Ausgabegerät wird in der eingestellten höhe ausgegebene 100% vh= 100% gerätehöhe
60% vh= 60% von dem Gerät Höhe  background-color: rgb(255, 215, 205);*/


#hero{
    background-color:#ffc228;
    background-image: url(../images/bild-header.jpg);
    filter:contrast(1.1) brightness(1);  
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size:cover;

    /* padding- allgemeime Größe und position*/
        /*
    Kurz-Schreibweise für background-Eigenschaften:
 Alle background-Eigenschaften(bis auf background-size) können mit der Eigenschaftg background zusammengefasst werden
 background-color:#010104;
 background-image: url(../bilder/header-higru/elena-effekt-2.PNG);
 background-repeat:no-repeat;
 background-position: center center; 
 background-attachment: fixed;
 background:#010104 url(../bilder/header-higru/elena-effekt-2.PNG) no-repeat center center fixed;
    
    */
}
#herobox{
    height: 600px;
    height:77vh;  
    padding-top: 29vh; 
}

#hero h1{
    margin: 55px;
    color:rgb(252, 198, 1);
    text-shadow: 4px 4px 4px #8600c4;
    text-align: center;   
}

#hero h1 span.groß{
  display: block;
  font-size: 2.3em;
  letter-spacing: 3px;
}

#hero h1 span.klein{
    color: rgb(255, 255, 255);
    display: inline-block;
    font-size: 1.4em;
    font-weight: 200;
    margin-top: -20px;
    letter-spacing: 2px;
    margin-bottom: 3px;  
}

#hero h1 span.kleiner{
    color: rgb(255, 255, 255);
    font-size: 0.6em;
    font-weight: 200;
    letter-spacing: 2.3px;
    text-shadow: none;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    padding: 5px;
}


/* main
 */

 .main_h {
    position: fixed;/*am Browser ausgerichtet*/
    top:0;
    left:0;
    z-index: 999;
    width: 100%;
    /*für die Auf-Zu-Klapp-Funktion des mobilen Toggles wichtig*/
    max-height: 75px;
    overflow: hidden;
    padding-top: 0px;
    padding-bottom: 6px;
    background: transparent;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
  }


  .sticky {
    background: rgba(146, 113, 167, 0.7);
  }

 .open-nav {
    max-height: 500px !important;
    background: rgba(146, 113, 167, 0.7);
    border-bottom: 1px solid gainsboro;
  }
  

  .open-nav .mobile-toggle {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
  }

  .mobile-toggle {
    display: none;/*toggle wird für die Desktop-Ansicht ausgeblendet und in der mobilen-Ansicht mit display:inherit wieder sichtbar/eingebledet*/
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    right: 22px;
    top: 30px;
    width: 30px;
    -webkit-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
    -ms-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
  }
  
  .mobile-toggle span {
    width: 30px;
    height: 4px;
    margin-bottom: 6px;
    border-radius: 1000px;
   background: #8101cc;
    display: block;
  }

 .hell{
    background-color: rgb(255, 255, 255);
}

.dunkel{
    background-color: rgb(160, 193, 180);
}


.row .drittel.intern{
    border:1px solid rgba(135, 182, 166, 0.5);
    background: rgba(205, 239, 227, 0.5) url(../images/Elena_B52A0942.jpg);    
}


.frauen{ 
    background-color: rgba(65, 76, 75, 0.2);
    padding-top: 30px;
    padding-bottom: 5px;
    border-radius: 70%;
    margin-top:-10px;
    width: 70%;
    margin-left: 15%;
}

.frau-1 h2{
    margin-bottom: 0;
    margin-top: 5px;
    font-size: 2.4em ;
     margin-bottom: 15px;
    font-family: 'Roboto';
    color: #ecd9fa;
}
.frau-2 h3{  
    margin-top: 0px;
    font-size: 2.9em ;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    color: #ecd9fa;

}






/* höhe des hero-bereichs für die unterseiten verkleinern */

/* UNTERSEITEN */
.unterseiten header{
    background-color: rgba(117, 57, 156, 0.4);  
    overflow: hidden;   
    position: fixed;/*am Browser ausgerichtet*/
    z-index: 999;
}

.innerbox.unterseite{
    padding: 0px;
    overflow: hidden;   
}

.unterseiten .herobox{
        height:400px;/*fallback für ältere Browser*/
        height:40vh;
        padding-top:13vh; 
        background: rgba(217, 234, 232, 0.4);
        text-shadow: 1px 1px 1px #7402a9;
    }
    .unterseiten .herobox .klein{ 
        text-shadow: 1px 1px 1px #7402a9;
    }

.unterseiten #hero{
    background-size: cover; 
    color:#9DA0C3;
    background: url(../images/Elena_B52A0948.jpg);
    background-repeat: no-repeat;
    background-position: left;
    background-attachment:fixed;
}

.unterseiten #hero h1{
    margin:0;
    padding: auto;
    color:#fff;
    text-align: center;
    background: none;
    font-size: 25px;
}



.unterseiten.kontakt #hero{
    background: url(../images/IMG_20220209_171938.jpg) center;
}

.unterseiten.about #hero{
    background: url(../images/FotoJet\(1\).jpg) center;
    filter: grayscale(0.3);
}


.unterseiten.about .vorstellung{ 
    background: #ffffff;
    padding: 10px;
    
    font-size: 1.2em;    
    text-align: center;  
}

.unterseiten.about .vorstellung p{  
    color: #555061;
    text-align: left;   
}


.vorstellungsbild img{
    width: 50%; 
    padding-top: 20px;
   
}
.unterseiten.about #taiga{
filter: none;
}

.vorstellungsbild{
margin: 0;
width: 300%;
}
.vorstellungsbild h4{
    color: white; 
    font-size: 1.5em;
    font-family: 'Roboto';
}


.unterseiten.about .vorstellung h3{
    font-family: 'Roboto';
    color: #555061;
    font-size: 2.3em;
    font-weight: 200;
    letter-spacing: 1px;
    display:inline-block; 
    border-bottom:3px solid rgb(154, 3, 235); padding-bottom:5px;
    margin-bottom: 10px;
}


.unterseiten.about .vorstellung{
  padding-top: 0px;
  border: none;
}


.index .dunkel .innerbox{
       padding-top: 5px;
        }


.unterseiten.about p{
    text-align: center;
}
.unterseiten.rap-als-tool p{
    text-align: center;
}

.unterseiten.about .button{
    margin-left: 400px;
   } 


/* rap als tool viertel */

/* fonticons-2 //*/
.fonticons-2{
    padding:15px;  
    background: rgb(255, 255, 255);
    
}

.fonticons-2 .viertel{
    background: rgb(243, 255, 252);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding:20px;
    text-align: center;
    width:23%;
    float:left;
    margin-right:2.5%;
}

.fonticons-2 .viertel:hover{ 
    background: rgba(104, 11, 165, 0.3);
    scale: 110%;
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -ms-transition: all 0.5s ease-in-out;
      -o-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
  }

.fonticons-2 .viertel:last-child{
margin-right: 0;
}

.fonticons-2 .viertel .iconbox{
background: #b700ff;
   width:5em;/*80px*/
   height:5em;/*80px*/
   margin:auto; 
   padding-top:1em; /*16px*/ 
   border-radius: 50%;  
}

.fonticons-2 .viertel i{
    font-size:3em;
   color: #ffc228;
   }
   
   .fonticons-2 .viertel h3{
    font-weight:400;
    letter-spacing: 1px;/*Zeichenabstand, 0px voreingestellt*/
    text-align: center;
    color: #7402a9;
       }
    .fonticons-2 .viertel h3:hover{
    transform: rotate(-20deg);
     color: #eefffc;
     font-weight: 600;
     border-bottom:2px solid #719f94;
           }

    .fonticons-2 .viertel:nth-child(2n) h3:hover{
            transform: rotate(20deg);     
  }




/* rap als tool */


.rap-als-tool.zweidrittel.flax{
    background-color: none; 
    }

.unterseiten.rap-als-tool .zweidrittel{
    width: 45%;
    margin-top: 10px;
    margin-left: 10px;
    background-color: #555061;
    float: left;
    padding: 10px;
    box-shadow:rgb(213, 202, 212);
}

.unterseiten.rap-als-tool .zweidrittel p{
  font-size: 1.2em;
  color: #ffffff;
}

.unterseiten.rap-als-tool .zweidrittel h3{
    font-size: 1.5em;
    color: #ffffff;
    border-bottom:1px solid #ffffff;
   margin-bottom: 3px ;
   padding-bottom: 5px;
  }

.unterseiten.unterseiten.rap-als-tool h4{
    text-align: center;
    font-weight: 600;
    font-size: 2.5em;
    letter-spacing: 3.5px;
    padding: 10px;
    margin: 5px;
    color: #7402a9;
    font-family: "Roboto";
}


.hell.hustler img{
    width: 100%;
    filter: grayscale(0.3);
    transform: scale(1);
    -webkit-transition: all 0.3s ease-in-out  0.2s ;
  -moz-transition: all 0.3s ease-in-out  0.2s ;
  -ms-transition: all 0.3s ease-in-out  0.2s ;
  -o-transition: all 0.3s ease-in-out  0.2s ;
  transition: all 0.3s ease-in-out  0.2s ;
  } 
  
.hell.hustler figure:hover img{
    transform: scale(1.1);
  } 

  .unterseiten.unterseiten.rap-als-tool .intern img{
   filter: none;
   width: 60%;
   margin-left: 20%;
    }

/* overlay auf dem Bild */
.overlaybox{
    line-height: 0;
    position: relative;
    overflow: hidden;
    }
    
    .overlay {
      line-height: 1.5em;
      background: rgba(0, 0, 0, 0.7);
      position: absolute;
      left: 0;
      top: 0;
     bottom: 0;
     right: 0;
     opacity: 0;
     -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    }
    
    figure:hover .overlay{
      opacity: 1;
    }
    
    .intern .overlay{
        width: 60%;  
        margin-left: 20%;
    }
    .overlaycontent{
    color: white;
      position: absolute;
      left: 50%;
      top: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    font-size: 1.5em;
    }

    


    /* Kontakt */
.unterseiten.kontakt p{
  text-align: left;
  padding: 5px;
  margin: 3px;
  
}
.unterseiten.kontakt h4{
    text-align: left;
   letter-spacing: 1px;
   color: #95679c;
    
  }

  .unterseiten.kontakt h5{
   color: #aa00e8;
   margin-top: 0;
   text-align: left; 
  
 font-size: 1.4em;   
  }

.unterseiten.kontakt fieldset{
    border: none;
  }

  .unterseiten.kontakt input{
   text-align: left;
  }








/* Flex-container */
  .flex-container{
    background:rgb(233, 249, 240);
    display:flex;
    gap:1%;
    padding: 20px;
    padding-left: 15px;   
}


span.interne h3{
      color:rgb(166, 0, 255);
      font-size: 2em;
      font-weight: 400;
      letter-spacing: 1px;

}

span.interne h2{
    color:#ECD9FA;
    font-family: "Roboto";
    font-size: 2.5em;
    font-weight: 600;
    letter-spacing: 1px;
    text-align: center;
    border-bottom: 2px solid #ECD9FA;
    padding-bottom: 15px;
}



/* artikel */
.headline-rot{
    color: rgb(157, 21, 169);
    display: block;
    font-size: 0.7em;
    font-weight: 400;
    text-align: left;
    padding-bottom: 10px;
    padding-top: 0;
    }
   

    .headline-schwarz{
    color: rgb(255, 255, 255);
    display: block;
    font-size: 0.6em;
    text-align: left;
    letter-spacing: 0.5px;
    }

article.bild-rechts-mit-textfluss{
    border: 1px solid rgba(197, 159, 159, 0.5); 
    background-color:#CCB4B4;
    box-shadow: rgba(97, 84, 84, 0.2) 0px 2px 8px 0px;
    padding: 7px;
    margin-bottom: 15px;
    overflow: hidden;
}
article.bild-rechts-mit-textfluss a span:hover{
    color: rgb(117, 18, 174);
}

article.bild-rechts-mit-textfluss img{
    width: 50%;
    float: left;
    margin-right: 10px;

}

article.bild-rechts-mit-textfluss a{
color: #ffffff;
}

.flex-container.fem{
    background:none ;
    padding:3px;
    margin: 0px;
}

.flex-container .kugel{
    border:2px solid rgb(244, 225, 252);
    margin: 2%;
    border-radius: 75%;
    flex:auto;
    width: 20%;
    background-color: rgba(133, 151, 144, 0.4);  
    box-shadow: rgba(232, 185, 185, 0.5) 0px 3px 8px 0px;
   
    padding-bottom: 30px;  
} 
.flex-container .kugel p,h3,i{
    color:#f6effb;  
}
.kugel.iconbox i{
    margin-top: 10px;
color: #9307e4;
    padding: 3px;
    font-size: 2.6em;
}

.kugel.iconbox h3{
    padding-top: 0px;
    margin-top: 5px;

    font-size: 2.4em;
    margin-bottom: 0px;
    padding-bottom: 0px;
  
    
}
.kugel.iconbox p{
 
    font-size: 1.2em;
    margin: 5px;
    padding-top: 5px;
}

    




/* parallax */


.index #parallax-1{
    background:#FFC4CC url(../images/IMG_20220209_171938.jpg) no-repeat center fixed;
    background-size: cover;
    text-align: center;
    height: 80vh;
}
.index #parallax-2{
    padding-top: 10px; 
    background-color: rgb(172, 207, 176);
    background: rgba(211, 231, 208, 0.6) url(../images/higru-dots/trans2.png);
    height: 80vh;
}

#parallax-1{
    background:#FFC4CC url(../images/Elena_B52A0990.jpg) no-repeat center fixed;
    background-size: cover;
    text-align: center;
}

.unterseiten.rap-als-tool #parallax-1{
    background:#FFC4CC url(../images/24302018_1794085687331810_5698998929978905639_o.jpg) no-repeat bottom fixed;       
}
.unterseiten.rap-als-tool #parallax-2{
    background:rgba(155, 114, 114, 0.3);       
}



.unterseiten.about #parallax-1{
    background: url(../images/IMG_20220209_171218.jpg) no-repeat;
    background-size: cover;
    filter: saturate(-2); 
}
.unterseiten.about #parallax-2{
    background: rgba(155, 114, 114, 0.3);

}
.intern p{
    font-weight: 600;
    font-size: 1.3em; 
    color: rgb(228, 200, 200); 
    letter-spacing: 1.7px;  
 }

.slogan p{
    font-weight: 600;
    font-size: 1.5em; 
    color: white; 
    letter-spacing: 1.7px;  
 }
 .slogan a{
    color: white;  
 }
 .slogan a:hover{
    color: rgb(135, 49, 189);  
 }

.slogan h4{
    font-weight: 600;
    font-size: 1.7em; 
    color: white; 
    letter-spacing: 1.7px;  
 }
 .unterseiten.about .slogan{
    border: 1px solid rgba(194, 190, 183, 0.3);
    padding-top: 10px;
}

.unterseiten.about .button{
    margin-right: 45%;
    margin-top: 10px;
    }

.intern h3{
    font-weight: 200;
    font-size: 2em; 
    color: white;
    letter-spacing: 1.7px;  
 }


/* footer */
footer{
    background-color: rgba(104, 11, 165, 0.9)
}

ul#rechtliches{
float: left;
margin-top: 20px;
}

ul#rechtliches li{
    display: inline;
    margin-left: 10px;
}

ul#social{
float: right;
/* fonticons größe ändern, wird an andere weiter vererbt */
font-size: 3em;
}


ul#social li{
    display: inline; 
    margin-right: 10px;
}

footer a{
        color:rgb(255, 248, 234); /*fallback für ältere Browser*/
        color:rgba(255, 255, 255, 0.7);
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out; 
}

footer a:hover{
    color:rgb(255, 204, 0); 
    color:rgba(255, 244, 224 1);
}

#scroll-to-top{
    background:#b700ff;
    color:rgb(255, 204, 0);
    font-size:2em;
    padding:10px;
    position:fixed;
    right:47%;
    bottom:20px;
    display:none;
    border-radius: 40%;
 }





 @media only screen and (max-width: 990px){
  
  
    #herobox{
        height:400px;
        height:70vh;  
        padding-top: 10vh; 
    }
    header .innerbox{
        max-width: 700px;
    }

    #hero{
        height: 400px;
        background-position: top;
        background-attachment: scroll;
    }

    
    #hero h1{
    margin: 0;
    text-shadow: 4px 2px 2px #8406bf;
    }
    
    #hero h1 span.groß{
      font-size: 2em;
    }
    
    #hero h1 span.klein{
        font-size: 1.1em;
        margin-top: -15px;

    }
 } 


 @media only screen and (max-width: 880px){


#logo{
    height: 50px;
    float: none;
}


    nav {
        width: 100%;
      }

      nav ul {
        padding-top: 10px;
        margin-bottom: 22px;
        float: left;
        text-align: center;
        width: 100%;
      }

      nav ul li {
        width: 100%;
        padding: 7px 0;
        margin: 0;

      }
    .mobile-toggle {
        display:inherit;
        /*toggle wird in der mobilen Ansicht durch display:block wieder sichtbar gamacht. Wurde in der Desktop-Ansicht erst positioniert und auch gleich ausgeblendet*/
      }

.flex-container{
    flex-wrap: wrap;
}


.flex-container  div{
    padding:5px;
    flex-direction:column;
    margin-bottom: 2%;
    padding-top: 5px;
}

.flex-container h2,
.flex-container p{
font-size: 2em;
padding: 0;
}

#parallax-1{
height: 30vh;

}

#parallax-2 .innerbox{
    margin-bottom: 0;
    }

#parallax-2{
    height: 30vh;
    }
.flex-container-kreis{
 width: 38%;
margin: auto;
    }   



 .frauen{ 
    background-color: none;
    padding-top: 10px;
    padding-bottom: 0px;
    border-radius: none;
    margin-top:-10px;
    width: 70%;
    margin-left: 15%;
    color: #ecd9fa;
}

.frau-1 h2{
    margin-bottom: 0;
    margin-top: 5px;
    font-size: 2.2em ;
     margin-bottom: 15px;
    font-family: 'Roboto';
   
}
.frau-2 h3{  
    margin-top: 0px;
    font-size: 2.1em ;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
}

 .flex-container.fem{
    background:none ;
    padding:1px;
    margin: 5px;
    margin-top: 0;
}

.flex-container .kugel{
    border:none;
    margin: 2%;
    border-radius:none;
    flex:auto;
    width: 15%;
    background-color:none;  
    box-shadow: none;
    padding-bottom: 10px;  
} 
.flex-container .kugel p,h3,i{
    color:#f6effb;  
}
} 

 @media only screen and (max-width: 680px){

.row.fonticons-3{
    overflow: hidden;
}  

.unterseiten header{
    background-color:none;  
}

.innerbox.unterseite{
    padding: 0px;
    overflow: hidden;   
}


.unterseiten #hero{
    background-size: cover; 
    color:#9DA0C3;
    background: url(../images/Elena_B52A0948.jpg);
    background-repeat: no-repeat;
    background-position: left;
    background-attachment:fixed;
}

.unterseiten #hero h1{
    margin:0;
    font-size: 15px;
}

#herobox{
    height:400px;
    height:40vh;
    padding-top: 120px;    
}
#herobox h1{ 
  line-height: 45px;
}

#hero h1 span.groß{
    font-size: 50px;
  }
  
  #hero h1 span.klein, .span.kleiner{
      font-size: 28px;
  }

#hero{
    height: 300px;
    background-position: center;
    background-attachment: scroll;
}

.unterseiten.about #hero{
    height:30vh; 
    background-position: center;
}

.rap-als-tool .flex-container{
 display: none;   
}

.index .flex-container.fem{
    display: none;  
}
.index .frau-1, .frau-2{
    font-size: 35px;
    background: none;
}
.frauen{
    background: none;
}
.unterseiten.rap-als-tool #hero{
    height:30vh; 
    background: url(../images/24302018_1794085687331810_5698998929978905639_o.jpg);
    background-position: center;
}
.rap-als-tool .overlaybox{
    margin-top: 200px;
    background-color: none;
}

.rap-als-tool .zweidrittel.flax{
    background-color: white; 
    }

.rap-als-tool .overlaycontent{
    display: none;
}
.unterseiten.about .herobox{
  padding-top: 15px; 
}

.unterseiten.rap-als-tool .herobox{
    padding-top: 15px; 
  }

.halbe {
    width: 100%;
    /* 100% - 2% =98% : 2 = 49%  > bei zwei spalten*/
      float:none;
      padding: 0;
      font-size: 1.5em;
}

.halbe p{
margin-top: 0px;
text-align: center;
}

.halbe.zwei{
    width: 100%;
    border: none;
    text-align: center;
    padding: 0;
    margin: 0;
}
.button{
   margin-left: 30%;
}

 }

 @media only screen and (max-width: 480px) {

    
/*footer*/
      footer .innerbox{
        padding:20px 5% 70px;
       }
    #social{
        margin-right: 25%;
    }
    #rechtliches{
        margin-left: 20%;
        padding-bottom: 10px;
       }

       #scroll-to-top{
        right:50%;
        bottom:20px;
        transform:translateX(50%);
       }
}
/*ende Breakpoint bis 480px*/



/* lokale einbindung von google web fonts. vermeiden von serverseitigen nachladen. also dass es nicht immer direkt vom server genommen wird und somit schriften vom server geladen wird. */

/* oswald-200 - latin */
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 200;
    src: local(''),
         url('../fonts/oswald-v49-latin-200.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../fonts/oswald-v49-latin-200.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  
  /* oswald-regular - latin */
  @font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 400;
    src: local(''),
         url('../fonts/oswald-v49-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../fonts/oswald-v49-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  
  /* oswald-700 - latin */
  @font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    src: local(''),
         url('../fonts/oswald-v49-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../fonts/oswald-v49-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  
  /* source-sans-pro-regular - latin */
  @font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    src: local(''),
         url('../fonts/source-sans-pro-v21-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../fonts/source-sans-pro-v21-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

  /* 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-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 */
  }