html, body {
    height: 100%;
}

body {
    line-height: 1.6;
    color: #555;
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 18px;
}

/*------------------------------------*\
  #BOOTSTRAP
\*------------------------------------*/


/*------------------------------------*\
  #ÜBERSCHRIFTEN
\*------------------------------------*/
.h1, h1, .h2, h2, .h3, h3 {
    margin-bottom: 15px;
}

.h1, h1 {

}

.h2, h2 {

}

.h3, h3 {

}

.fluid-container .frame-layout-fluid-container header h3.ce-headline-center {
    text-transform: uppercase;
}

.mask-balken-ueberschrift-volle-breite.bg-color {
    background: var(--hauptfarbe);
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: center;
}

.mask-balken-ueberschrift-volle-breite {
    background: #fff;
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: center;
}

.mask-balken-ueberschrift-volle-breite.bg-color .container h3 {
    color: #fff;
    margin-bottom: 0;
}

.mask-balken-ueberschrift-volle-breite .container h3 {
    color: var(--hauptfarbe);
    margin-bottom: 0;
}

.mask-balken-ueberschrift-volle-breite .container h3 span:first-child {
    font-size: 50px;
    font-weight: 300;
    text-transform: uppercase;
}

.mask-balken-ueberschrift-volle-breite .container h3 span:nth-child(2) {
    font-size: 50px;
    text-transform: uppercase;
}

/*------------------------------------*\
  #HEADER
\*------------------------------------*/
.top {
    background: url(/typo3conf/ext/bim_template_klara/Resources/Public/Images/Template/Hintergrund/trans-weiss-60.png);
    position: absolute;
    width: 100%;
    height: 90px;
    display: flex;
    align-items: flex-end;
}

.top .container {
    height: 90px;
    display: flex;
    align-items: center;
}

.top .container span {
    color: var(--hauptfarbe);
    font-size: 36px;
    font-weight: 300;
    letter-spacing: 2px;
}


.kopfbild {
    height: 70vh;
    background: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

html, body { height: 100%; }

.slogan {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 30vh;
}

.slogan span {
    font-size: 96px;
    color: var(--hauptfarbe);
    text-transform: uppercase;
    line-height: 1.2;
}

.slogan span:first-child {
    font-weight: 300;
}

.slogan span:nth-child(2) {
    font-weight: 600;
}

#c56 {
    margin-bottom: 0;
}

.mobile-beschriftung {
    display: none;
}

/*------------------------------------*\
  #NAVIGATION
\*------------------------------------*/
.navigation-wrap {
    background: var(--hauptfarbe);
    height: 60px;
}

/* nav.navigation-wrap .container.navigation.fixed-navi {
    width: 100%;
    max-width: 100%;
} */

nav.navigation-wrap.fixed-navi {
    position: fixed;
    width: 100%;
    z-index: 1;
    top: 0;
    display: flex !important;
    justify-content: center;
}

/*------------------------------------*\
  #ROOTLINE
\*------------------------------------*/


/*------------------------------------*\
  #CONTENT
\*------------------------------------*/


/*------------------------------------*\
  #FOOTER
\*------------------------------------*/
footer {
    background: var(--hauptfarbe);
    padding: 30px 15px;
    color: var(--footer-schriftfarbe);
}

footer p {
    margin: 0;
}

footer a {
    color: #fff;
}


footer a:hover {
    color: var(--footer-hover-schriftfarbe);
    text-decoration: none;
}

/*------------------------------------*\
  #COLORBOX
\*------------------------------------*/
/* #cboxTitle {
    bottom: -2px;
}

#cboxSlideshow {
    bottom: -2px;
    color: var(--hauptfarbe);
}

#cboxCurrent {
    bottom: -2px;
} */

/*------------------------------------*\
  #COLORBOX
\*------------------------------------*/
#cboxCurrent {
    bottom: 0;
    font-size: 14px;
}

#cboxSlideshow {
    bottom: 1px;
    color: #555;
    font-size: 14px;
}

#cboxTitle {
    position: absolute;
    bottom: 28px;
    left: 0;
    text-align: center;
    width: 100%;
    color: #fff;
    background: rgba(0, 0, 0, .5);
    font-size: 15px;
}

/*------------------------------------*\
  #MASK
\*------------------------------------*/
/*---------- BILDERGALERIE -----------*/
.bildspalte {
    margin-top: 5px;
    margin-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
}

.fluid-container .frame-1_standard.frame-type-mask_bildergalerie .row.mask-bildergalerie {
  margin-left: 0;
  margin-right: 0;
}

.bildspalte .zoom {
    overflow: hidden;
    position: relative;
}

.bildspalte .zoom img {
    width: 100%;
    height: auto;
    transition: all 0.5s ease-in-out;
}

.bildspalte .zoom:hover img {
    width: 100%;
    height: auto;
    transform: scale(1.1);
}

.bildspalte figcaption {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background: url(/typo3conf/ext/bim_template_klara/Resources/Public/Images/Template/Hintergrund/trans-schwarz-60.png);
}

.bildspalte:hover figcaption {
    opacity: 1;
}

.bildspalte figcaption div {
    text-align: center;
    font-size: 18px;
    line-height: 1.2;
    color: #fff;
    padding: 0 10px;
    position: absolute;
    width: 100%;
    bottom: 20px;
}

/*---- NAVIGATIONSBUTTON ----*/
a .mask-navigationsbalken {
    color: #fff;
    background: var(--hauptfarbe);
    text-align: center;
    padding: 10px 15px;
    margin-bottom: 25px;
    border-radius: 5px;
}

a .mask-navigationsbalken span {
    color: #fff;
}

/*------------------------------------*\
  #MAP
\*------------------------------------*/
.map iframe {
    width: 100%;
}

/*------------------------------------*\
  #FORMULAR
\*------------------------------------*/
#kontaktformular {
    background: #FFF8F2;
    padding: 15px;
}

#kontaktformular h2 {
    color: var(--hauptfarbe);
    font-size: 24px;
    font-weight: 300;
    text-align: center;
}

#kontaktformular .form-group {
    margin-bottom: 15px;
    display: flex;
}

#kontaktformular label {
    display: inline-block;
    margin: 0;
    width: 20%;
}

#kontaktformular .input {
    width: 80%;
    border-radius: 0;
    border: 2px solid #fff;
}

#kontaktformular .form-control {
    display: block;
    width: 100%;
    padding: .5rem .75rem;
    font-size: 1rem;
    line-height: 1.25;
    color: #555555;
    background-color: rgba(81,81,81,0.15);
    border: none;
    border-radius: 0;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

#kontaktformular nav {
    background: none;
    height: auto;
}

/*------------------------------------*\
  #TYPO3
\*------------------------------------*/
.ce-element {
    margin-top: 40px;
    margin-bottom: 40px;
}

#c12 {
    margin: 0;
}

.ce-intext.ce-left .ce-gallery {
    margin-right: 20px;
    margin-top: 7px;
}

.ce-gallery img {
    display: block;
    width: 100%;
    height: auto;
}

/*------------------------------------*\
  #SONSTIGES
\*------------------------------------*/
.back-to-top {
    background: #555;
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 15px;
    border-radius: 5px;
}

a.back-to-top i.fas.fa-angle-up {
    color: #fff;
    font-size: 36px;
}

#op-section-136{
	clear:both;
}

.privacy-msg.privacy-script-msg,
.privacy-msg.privacy-map-msg,
.privacy-msg.privacy-kalender-msg,
.privacy-msg.privacy-video-msg {
    position: relative;
    background: #eee;
    height: auto !important;
    width: 100% !important;
}

.privacy-msg.privacy-script-msg p,
.privacy-msg.privacy-kalender-msg p,
.privacy-msg.privacy-calendar-msg p,
.privacy-msg.privacy-map-msg p,
.privacy-msg.privacy-video-msg p {
    padding: 15px;
    background: #eee;
    text-align: center;
    position: absolute;
}

.privacy-msg.privacy-script-msg p a.btn,
.privacy-msg.privacy-calendar-msg p a.btn,
.privacy-msg.privacy-kalender-msg p a.btn,
.privacy-msg.privacy-map-msg p a.btn,
.privacy-msg.privacy-video-msg p a.btn {
    background: #347327;
    border-color: #347327;
    color: #fff;
    margin-top: 15px;
    margin-bottom: 15px;
}

/*------------------------------------*\
  #MEDIA-QUERIES
\*------------------------------------*/
@media (max-width: 1199px) {

}


@media (max-width: 991px) {
    .mobile-beschriftung {
        display: block;
        position: absolute;
        z-index: 999999;
        color: #fff;
        left: 20px;
        top: 10px;
    }

  .container {
      max-width: 100%;
  }

  .logo-mobil {
      padding: 6px 0 0 15px;
  }

    .logo-mobil a {
        color: #fff;
    }

    .logo-mobil a:hover {
        text-decoration: none;
    }

    .slogan span {
        font-size: 75px;
    }

    .ce-textpic, .ce-image, .ce-nowrap .ce-bodytext, .ce-gallery, .ce-row, .ce-uploads li, .ce-uploads div {
        overflow: visible;
    }

    .ce-intext.ce-left .ce-gallery {
        margin-right: 0;
        width: 100%;
    }

    .mask-balken-ueberschrift-volle-breite .container h3 span:first-child,
    .mask-balken-ueberschrift-volle-breite .container h3 span:nth-child(2) {
        font-size: 40px;
    }
}

@media (max-width: 767px) {
  .mask-balken-ueberschrift-volle-breite .container h3 span:first-child,
  .mask-balken-ueberschrift-volle-breite .container h3 span:nth-child(2) {
      font-size: 35px;
  }
  
    .slogan span {
        font-size: 48px;
    }
    
    #kontaktformular .form-group {
    	display:block;
    }
  
  /* #colorbox #cboxCurrent,
  #cboxSlideshow {
    display: none !important;
  }
  
  #colorbox #cboxContent #cboxTitle {
    bottom: 0px;
    font-size: 14px;
  } */
}

@media (max-width: 575px) {

  .mask-balken-ueberschrift-volle-breite .container h3 span:first-child,
  .mask-balken-ueberschrift-volle-breite .container h3 span:nth-child(2) {
      font-size: 25px;
  }

    .mask-balken-ueberschrift-volle-breite {
        padding-top: 0;
        padding-bottom: 0;
    }

    .h3, h3 {
        font-size: 1.5rem;
    }
    
    #c177 iframe{
    	height:400px !important;
    }
    
    #c177 p{
    	position:absolute;
    	width:90%;
    }
    

}




/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen
    and (min-device-width: 320px)
    and (max-device-width: 480px)
    and (-webkit-min-device-pixel-ratio: 2) {
        .kopfbild {
            background: center center;
            height: 550px;
            background-size:cover;
        }
}

/* Portrait */
@media only screen
    and (min-device-width: 320px)
    and (max-device-width: 480px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: portrait) {
        .kopfbild {
            background: center center;
            height: 550px;
            background-size:cover;
        }
}

/* Landscape */
@media only screen
    and (min-device-width: 320px)
    and (max-device-width: 480px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: landscape) {
        .kopfbild {
            background: center center;
            height: 550px;
            background-size:cover;
        }
}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen
    and (min-device-width: 320px)
    and (max-device-width: 568px)
    and (-webkit-min-device-pixel-ratio: 2) {
        .kopfbild {
            background: center center;
            height: 550px;
            background-size:cover;
        }
}

/* Portrait */
@media only screen
    and (min-device-width: 320px)
    and (max-device-width: 568px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: portrait) {
        .kopfbild {
            background: center center;
            height: 550px;
            background-size:cover;
        }
}

/* Landscape */
@media only screen
    and (min-device-width: 320px)
    and (max-device-width: 568px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: landscape) {
        .kopfbild {
            background: center center;
            height: 550px;
            background-size:cover;
        }

}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen
    and (min-device-width: 375px)
    and (max-device-width: 667px)
    and (-webkit-min-device-pixel-ratio: 2) {
        .kopfbild {
            background: center center;
            height: 550px;
            background-size:cover;
        }
}

/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
    .kopfbild {
        background: center center;
        height: 550px;
        background-size:cover;
    }
}

/* Landscape */
@media only screen
    and (min-device-width: 375px)
    and (max-device-width: 667px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: landscape) {
        .kopfbild {
            background: center center;
            height: 550px;
            background-size:cover;
        }
}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen
    and (min-device-width: 414px)
    and (max-device-width: 736px)
    and (-webkit-min-device-pixel-ratio: 3) {
        .kopfbild {
            background: center center;
            height: 550px;
            background-size:cover;
        }
}

/* Portrait */
@media only screen
    and (min-device-width: 414px)
    and (max-device-width: 736px)
    and (-webkit-min-device-pixel-ratio: 3)
    and (orientation: portrait) {
        .kopfbild {
            background: center center;
            height: 550px;
            background-size:cover;
        }
}

/* Landscape */
@media only screen
    and (min-device-width: 414px)
    and (max-device-width: 736px)
    and (-webkit-min-device-pixel-ratio: 3)
    and (orientation: landscape) {
        .kopfbild {
            background: center center;
            height: 550px;
            background-size:cover;
        }
}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen
    and (min-device-width: 375px)
    and (max-device-width: 812px)
    and (-webkit-min-device-pixel-ratio: 3) {
        .kopfbild {
            background: center center;
            height: 550px;
            background-size:cover;
        }
}

/* Portrait */
@media only screen
    and (min-device-width: 375px)
    and (max-device-width: 812px)
    and (-webkit-min-device-pixel-ratio: 3)
    and (orientation: portrait) {
        .kopfbild {
            background: center center;
            height: 550px;
            background-size:cover;
        }
}

/* Landscape */
@media only screen
    and (min-device-width: 375px)
    and (max-device-width: 812px)
    and (-webkit-min-device-pixel-ratio: 3)
    and (orientation: landscape) {
        .kopfbild {
            background: center center;
            height: 550px;
            background-size:cover;
        }
}