@font-face {
    font-family: 'montserratbold';
    src: url('../font/Montserrat/montserrat-bold-webfont.woff2') format('woff2'),
         url('../font/Montserrat/montserrat-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'OpenSans';
    src: url('../font/OpenSans/OpenSans-Regular.woff2') format('woff2'),
         url('../font/OpenSans/OpenSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
  font-family: 'FontAwesome-Solid';
  font-style: normal;
  font-weight: 900;
  font-display: auto;
  src: url("../font/fontAwesome/fa-solid-900.eot");
  src: url("../font/fontAwesome/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../font/fontAwesome/fa-solid-900.woff2") format("woff2"), url("../font/fontAwesome/fa-solid-900.woff") format("woff"), url("../font/fontAwesome/fa-solid-900.ttf") format("truetype"), url("../font/fontAwesome/fa-solid-900.svg#fontawesome") format("svg"); }




/* ##################################################*/
* {
         margin                          : 0;
         padding                         : 0;
         }

html, body {
         height                          : 100%;
         font-family                     : 'OpenSans';
         color                           : #2F2F2F;
         }

@media screen and (min-width: 600px) {
html, body {
         font-size                       : 1em;
         }
         }


@media screen and (max-width: 600px) {
html, body {
         font-size                       : 1.1em;
         }
         }

html, body {
                scroll-behavior: smooth;
        }

html {
        /* scrollbar fix (prevent ugly left pull for lower content sites) */
        overflow-y                       : scroll;
}


/* ---------------------- ENDE --------------------- */


/* ##################################################*/
/*           Generelle Layout-Einstellung            */
/* ##################################################*/

.unseen {
         position        : absolute;
         height          : 1px;
         width           : 1px;
         overflow        : hidden;
         clip            : rect(0 0 0 0);
         clip-path       : inset(100%);
         white-space     : nowrap;
}


.footerzeile ul li{
         list-style      : none;
         margin-bottom   : 1em;}



@media screen and (min-width: 600px) {
.sprung {
visibility: hidden;
height: 0px !important;
position: absolute;
margin-top: -11em;}
}


@media screen and (max-width: 600px) {
.sprung {
visibility: hidden;
height: 0px !important;
position: absolute;
margin-top: 10em;}
}


body {
         background-color: #FBF7F0;}

.zitat-1 {
margin-top: 0;
padding-top: 0;}
.zitat-1 .mod-custom,
.zitat-2 .mod-custom,
.zitat-3 .mod-custom,
.zitat-4 .mod-custom,
.zitat-5 .mod-custom,
.zitat-6 .mod-custom,
.zitat-7 .mod-custom{
         position                : relative;
         background-size         : cover;

         height                  : 100vh;
         display                 : flex;
         flex-wrap               : wrap;
         justify-content         : center;
         }

.zitat-1 .mod-custom,
.zitat-4 .mod-custom  {
         background-image        : url(../images/black90.png)!important;
         }

.zitat-2 .mod-custom,
.zitat-3 .mod-custom,
.zitat-5 .mod-custom,
.zitat-6 .mod-custom,
.zitat-7 .mod-custom{
         background-image        : url(../images/black50.png)!important;
         }



.zitat {
         width: 80%;
         align-self: center;
         }

.zitat-text {
         width: 100%;
         align-self: center;
         margin-bottom: 3em;
         }
.zitat-text h2,
.zitat-text h6 {
         color: #2F2F2F;  }

.zitat-text h2 {
    padding-top: .35em;
    font-size: 2.75rem;
    border-bottom: 0px solid white;
    padding: 0;
    margin: 0em 0em 0.25em 0!important;
    text-align:center;
}
.zitat-text h6  {
    padding-top: 1em;

    font-size: 1.25rem;
    border-bottom: 0px solid white;
    padding: 0;
    text-align:center;

}


.zitat-4 .zitat {
         width: 80%;
         align-self: flex-end;
         }

@media screen and (min-width: 600px) {
.zitat-1 .zitat {
         width: 100%;
         height: 15vh;
         align-self: flex-end;
         background: url(../images/black70.png);
         }
         }

@media screen and (max-width: 600px) {
.zitat-1 .zitat {
         width: 100%;
         height: 35vh;
         align-self: flex-end;
         background: url(../images/black70.png);
         }
         }

.zitat h2 {
    padding-top: 1em;
    font-size: 2.75rem;
    color: white;
    border-bottom: 0px solid white;
    padding: 0;
    text-align:center;
}

.zitat h6  {
    padding-top: 1em;
    font-size: 1.75rem;
    color: white;
    border-bottom: 0px solid white;
    padding: 0;
    text-align:center;
}

.zitat p {
    font-size: 1rem;
    color: white;
    border-bottom: 0px solid white;
    text-align: center;
    padding: 0;
   }

.zitat-1 {
         background-repeat       : no-repeat;
         background-size         : cover;
         background-position     : top;
         width: 100%}

.zitat-2, .zitat-3, .zitat-4, .zitat-5, .zitat-6, .zitat-7 {
         background-repeat       : no-repeat;
         background-size         : cover;
         background-position     : top;
         width: 100%}




.zitat-1 {
         background-image: url(../images/background/Claudia-Hansen-Supervisorin_2024.webp);
}
.zitat-2 {
         background-image: url(../images/background/Claudia-Hansen-Supervisorin.webp);
}

.zitat-3 {
         background-image: url(../images/background/people-discussion-5069845.webp);
}

.zitat-4 {
         background-image: url(../images/background/SPO-155.jpg);
}

.zitat-5 {
         background-image: url(../images/background/people-gc61533da3_1920.webp);
}
.zitat-6 {
         background-image: url(../images/background/work-5382501.webp);
}
.zitat-7 {
         background-image: url(../images/background/student-849825_1920.webp);
}


@media screen and (min-width: 1000px) {
.textblock {
         display                 : flex;
         flex-wrap               : wrap;
         justify-content         : center;
         margin                  : 5em 20%;}
}
@media screen and (max-width: 1000px) {
.textblock {
         display                 : flex;
         flex-wrap               : wrap;
         justify-content         : center;
         margin                  : 5em 10%;}

.textblock img {
         width:  100%;
         height: auto;}

.img-hochkant {

          max-height: 500px!important;
          width: auto!important;
          margin: 0 auto!important;

          float: none!important
          }

.img-mobil {
          text-align:center;  }


.icon-insta {
         width:  60px!important;
         height: auto!important;}

.logo-dgsv {
         width:  150px!important;
         height: auto!important;}

.logo-google{
         width:  250px!important;
         height: auto!important;}
}


.referenzen-block,
.referenzen-textblock    {
         display                 : flex;
         flex-wrap               : wrap;
         justify-content         : space-around;

}
@media screen and (min-width: 800px) {
.referenzen-block p {
         width                   : 30%;
         text-align              : center}
        }

@media screen and (max-width: 800px) {
.referenzen-block p {
         width                   : 40%;
         text-align              : center}
         }
.referenzen-block p img{
         max-width               : 100%;
         height                  : auto;}

.referenzen-block img {
         box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
         border-radius: 0.5em;
         }

@media screen and (min-width: 800px) {
.referenzen-textblock p {
         width                   : 40%;
         text-align              : center}
        }

@media screen and (max-width: 800px) {
.referenzen-textblock p {
         width                   : 80%;
         text-align              : center;
}
         }
.referenzen-textblock p {
         box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
         border-radius: 0.5em;
         padding: 0.8em 1.5em;
         background              : white;         }

.referenz-name {
         color           : #0070C0;
         font-style      : italic;
         margin-top     : 1em;
         line-height     : 1.5;}






.dj-megamenu-rtb li a.dj-up_a {
    padding: 0 .75em!important;
}










footer {
         background-color        : #E9E1D6;
 }

.footerzeile {
         padding-top             : 2em;
         padding-bottom          : 2em;
                   }



.footerzeile a {
         color           : #575756;
         font-weight     : bold;
         text-decoration  : none;
         }

.footerzeile a:hover {
         color           : #575756;
         text-decoration  : underline;
         }

.footerzeile nav a:before{
         content         : '\f054\00a0';
         font-family     : 'FontAwesome-Solid';
         font-size       : 100%;
         }

.footerzeile li {
         list-style      : none;
         padding         : 0.25em 0;
         }

.moduletable_menu {
         }

ul.nav {
         display         : flex;
         justify-content : space-between;
         width           : 32%;
         margin          : 0 auto}




.copyright { text-align: center;font-size: 80%;}


.btn     {
         margin-top: 1em;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 0.5em;
    padding: 0.8em 1.5em;
    background: #ecd8b3;
    display:block
  }

a.btn   {
         color   : #575756!important;
         }
.btn-text {
    line-height: 1.5
    }

.btn:hover     {
         background: #ecd8b3;
         border          : 1px solid #575756!important;
         }

a.btn:before {
         content         : '\f0a9\00a0\00a0';
         font-family     : 'FontAwesome-Solid';
         font-size       : 100%;
         }

a.insta:before {
         content         : '\e055\00a0\00a0';
         font-family     : 'FontAwesome-Solid';
         font-size       : 100%;
         color   : #575756!important;   }

.icons-header {
         display:flex;
         flex-wrap:   wrap;
         justify-content     : flex-end}

.icon-insta {
         align-self              : flex-start;
         padding                 : 1em 1em 0 1em;}

@media screen and (max-width: 800px) {
         .icon-dgsv {
          width: 100%;
          }

p.anfrage {
         text-align: right;}