/* .... LAZY BLOCKS.... */

:root {
    --primary-clr: #37374f;
    --lila: #6b487a;
    --grey: #788596;
    --rosa: #c293a4;
    --light-rosa: #e3bdba;
    --light-grey: #f3f3f3;
    --cta-clr: #c293a4;
	--darker-cta-clr: #ac6781;
    --font-headlines: 'Prompt', Helvetica, sans-serif;
    --font-body: 'Open Sans', sans-serif;
    --height-header: 20vh;
    --height-content: 80vh;
}

/* .... ABSTAENDE .... */

.lazy-margin {
    margin-top: 5rem;
    margin-bottom: 5rem;
}
.lazy-top-margin {
    margin-top: 5rem;
}
.lazy-top-padding {
    padding-top: 5rem;
}
.lazy-bottom-margin {
    margin-bottom: 5rem;
}


/* .... FULLWIDTH SECTION .... */
.fullwidth {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background-color: #f3f3f3;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.fullwidth.fullwidth-dark {
    background-color: var(--primary-clr);
    color: #fff;
}
.fullwidth.fullwidth-light {
    background-color: #f3f3f3;
}
.fullwidth.fullwidth-cta {
    background-color: var(--cta-clr);
    color: #fff;
}

.fullwidth .fullwidth-content {
    max-width: 1400px;
    padding: 0px 40px;
    margin: 0 auto;
}
.fullwidth.fullwidth-padding .fullwidth-content {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.entry-content > .wp-block-lazyblock-fullwidth-section:last-child, 
.entry-content > .wp-block-lazyblock-bild-text:last-child,
.entry-content > .wp-block-lazyblock-teaser:last-child {
    margin-bottom: -8rem;
}
/* dark */
.fullwidth.fullwidth-dark h2,
.fullwidth.fullwidth-dark h3 {
    color: #fff;
}
/* parallax */
.fullwidth-parallax {
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.fullwidth.imageonly .fullwidth-content {
    height: 400px;
}
/* ios hack (hier funktioniert der parallax effekt nicht */
@supports (-webkit-hyphens:none){
    .fullwidth-parallax {
        background-attachment: local;
        background-size: auto;
    } 
}


/*
.wp-block-lazyblock-fullwidth-section + .wp-block-lazyblock-fullwidth-section {
    margin-top: -6rem;
}
*/

/* fullheight */
.fullheight {
    min-height: var(--height-content);
}

/* .... SLIDESHOW (Hero und Content) .... */
.slideshow {
    position: relative;
}
.slideshow img {
    width: 100%;
    height: auto;
}
.slideshow .slide {
    position: relative;
}
.slideshow .slide img.line {
    position: absolute;
    top:0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: auto;
}
.slideshow .title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: 2rem;
    text-align: center;
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
}
.slideshow .slick-arrow {
    position: absolute;
    z-index: 1;
    top: 50%;
    margin-top: -25px;
    width: 50px;
    height: 50px;
    background-position: left center;
    background-size: 50px 50px;
    background-repeat: no-repeat;
    background-color: transparent;
    transition: all 0.5s;
}
.slideshow .slick-arrow:hover {
    transform: scale(1.1);
}
.slideshow .slick-arrow::before {
    display: none;
}
.slideshow .slick-prev { 
    left: 0;
    background-image: url("data:image/svg+xml,%3Csvg height='100px' width='100px' fill='%2321b5ea' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' style='enable-background:new 0 0 24 24;'%3E%3Cg%3E%3Cpath d='M250.326 364.429L408.983 462.355C416.542 467.028 426 461.187 426 451.858L426 335.995C426 331.659 423.835 327.658 420.325 325.49L326.274 267.438C318.708 262.773 318.708 251.1 326.274 246.435L420.325 188.383C423.835 186.215 426 182.214 426 177.878L426 60.1465C426 50.8094 416.542 44.9766 408.983 49.6415L250.326 147.567L91.6695 245.501C84.1102 250.165 84.1102 261.831 91.6695 266.503L250.326 364.429Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}
.slideshow .slick-next {
    right: 0;
    background-image: url("data:image/svg+xml,%3Csvg height='100px' width='100px' fill='%2321b5ea' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' style='enable-background:new 0 0 24 24;'%3E%3Cg%3E%3Cpath d='M261.674 147.571L103.017 49.6446C95.4577 44.9724 86 50.8126 86 60.1424V176.005C86 180.341 88.1646 184.342 91.6746 186.51L185.726 244.562C193.292 249.227 193.292 260.9 185.726 265.565L91.6746 323.617C88.1646 325.785 86 329.786 86 334.122V451.854C86 461.191 95.4577 467.023 103.017 462.359L261.674 364.433L420.331 266.499C427.89 261.835 427.89 250.169 420.331 245.497L261.674 147.571Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

@media (min-width:768px) {
    .slideshow .slick-arrow {
        margin-top: -30px;
        width: 60px;
        height: 60px;
        background-size: 60px 60px;
    }
}
@media (min-width:1000px) {
    .slideshow .slick-arrow {
        margin-top: -35px;
        width: 70px;
        height: 70px;
        background-size: 70px 70px;
    }
}
@media (min-width:1400px) {
    .slideshow .slick-arrow {
        margin-top: -40px;
        width: 80px;
        height: 80px;
        background-size: 80px 80px;
    }
}

/* Dots */
.slick-dots {
    position: absolute;
    bottom: 20px;
    display: block;
    width: 100%;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0;
    list-style: none;
    text-align: center;
}
.slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}
.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus {
    outline: none;
    background: none !important;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
    opacity: 1;
}
.slick-dots li button:before {
    font-size: 70px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: 1;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
    opacity: 1;
    color: var(--ag-midnight);
}



/* .... ACCORDION .... */
.wp-block-lazyblock-accordion {
    margin-top: 2em;
    margin-bottom: 2em;
    padding-bottom: 2em;
}
.accordion-container,
.accordion-wrap {
    max-width: 1000px;
    margin: 0 auto;
}
.wp-block-lazyblock-accordion .grid-container {
    padding-left: 0;
}
button.accordion,
h3.accordion,
h3.accordion {
    position: relative;
    background-color: var(--grey);
    color: var(--light-rosa) !important;
    cursor: pointer;
    margin: 0 !important;
    padding: 10px 20px 8px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    font-size: 1.2rem;
    font-family: var(--font-body);
}
button.accordion:hover,
button.accordion:focus,
h3.accordion:hover,
h3.accordion:focus {
    background-color: var(--darker-primary-clr);
}
.wp-block-lazyblock-accordion button.accordion.active {
    background-color: var(--darker-primary-clr);
}
button.accordion i,
h3.accordion i {
    position: absolute;
    top: 25px;
    right: 20px;
    font-size: 1.2em;
}
.wp-block-lazyblock-accordion button.accordion:not(.active) i.fa-minus {
    display: none;
}
.wp-block-lazyblock-accordion button.accordion.active i.fa-plus {
    display: none;
}
button.accordion + .panel,
h3.accordion + .panel {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.accordion + .panel .panel-content {
    padding: 2rem 0;
    padding: 20px 1.5rem 20px;
}
.accordion + .panel p {
    margin: 0 0 20px;
    max-width: 100% !important;
}






/* .... TEAM .... */
.team-card {
    background: transparent;
}
/* bild rechts */
.team-card.img-right:not(.noimage) {
    display: grid;
    grid-template-columns: 66.66666% 33.33333%;    
}
.team-card.img-right .image {
    order: 2; 
}
.team-card.img-right .text {
    order: 1; 
}
/* bild links */
.team-card.img-left {
    display: flex;
}
/* bild rechts */
.team-card.img-left {
    display: flex;
}
.team-card.img-right img {
    float: right;
}
/* kachel */
.team-tiles .tiles {
    display: flex;
    flex-direction: column; 
}
.team-tiles .tiles .image {
    display: flex;
    justify-content: center;
}
.team-tiles .tiles .text {
    text-align: center;
}
/* bild und text */
.team img {
    display: block;
    max-height: 200px;
}
.team .text {
    padding: 15px;
}
.team .text p.name {
    margin-bottom: 0;
    font-weight: bold;
}
.team .text .title {
    margin-bottom: 10px;
}

/* MULTIPLE */
.team-tiles.team-multiple .image {
    display: block;
    position: relative;
    margin-bottom: 1.3rem;
    padding-bottom: 60%;
    height: 0;
}
.team-multiple img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    object-fit: cover;
}


/* .... KONTAKT .... */
.entry-content .contact {
    margin-bottom: 2em;
}
.contact .title {
    font-weight: 500;
    margin-bottom: 5px;
}
.contact i {
    width: 25px;
    margin-right: 10px;
    margin-top: 3px;
    color: var(--primary-clr);
    font-size: 20px;
    text-align: center;
}
main.site-main .contact p {
    margin-left: 0;
}
.contact div.address,
.contact div.phone,
.contact div.email {
    display: flex;
    margin-top: 10px;
}




/* .... TEASER .... */
.teaser {
    position: relative;
}
.teaser.fullwidth {
    background: transparent;
}
.teaser .grid {
    gap: 0;
}

/* tabs */
.teaser ul#tabs {
    max-width: inherit !important;
    list-style: none;
    padding: 0;
    margin: 0;
}
.teaser .tabcontainer {
    max-width: 1000px;
    margin: 2rem auto;
    text-align: center;
}
.teaser .tabcontainer li {
    margin-bottom: 0;
    list-style: none;
}
.teaser .tabcontainer li a:link,
.teaser .tabcontainer li a:visited {
    display: block;
    padding: 1.5rem 1.5rem 1.9rem;
    border-bottom: 1px solid #fff;
    background: var(--grey);
    color: var(--primary-clr);
}
.teaser .tabcontainer li a:hover,
.teaser .tabcontainer li a:focus {
    background: var(--primary-clr);
    color: var(--light-rosa);
}
.teaser .tabcontainer span.title {
    display: block;
    font-family: var(--font-headlines);
    font-size: 2rem;
}



/* .... TEASERBOX .... */
.teaserbox {
    position: relative;
    padding: 0;
    color: #555;
}
.fullwidth .teaserbox::after {
    content: '';
    position: absolute;
    z-index: 5;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.fullwidth .teaserbox:hover::after,
.fullwidth .teaserbox.active::after {
    background: var(--grey);
}
.teaserbox img {
    display: block;
}
.teaserbox .text {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.teaserbox h3 {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 20px;
    color: var(--cta-clr) !important;
    line-height: 1.3em;
    font-size: 3rem;
    text-align: center;
}
.teaserbox h3 sup {
    font-size: 1.5rem;
}


/* teaser tiles */
.teaser-tiles .teaserbox {
    position: relative;
    min-height: 300px;
}
.teaser-tiles .teaserbox .image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}


/* ... BILD MIT TEXT .... */
.bild-text {
    background: transparent;
}
.bild-text:not(.fullwidth) {
    margin: 3rem 0;
}
.bild-text.img-right .text {
    order: -1;
    padding-left: 0;
}
.bild-text .img {
    background-size: cover;
    background-position: center;
}
.bild-text .img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bild-text .text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 2.5rem 40px;
}
.bild-text.img-right .text {
    padding: 2.5rem 60px 2.5rem 40px;
}
.bild-text .text p {
    margin-left: 0;
}
@media (min-width:1001px) {
    .bild-text {
        display: grid;
        grid-template-columns: 50% 50%;
    }
    .bild-text .text .inner  {
        max-width: 100%;
        width: 750px;
        margin-right: 0;
        margin-left: auto;
    }
    .bild-text.img-left .text .inner  {
        margin-right: auto;
        margin-left: 0;
    }
}
@media (max-width: 1000px) {
    .bild-text .img {
        height: 50vh;
    }
}

.bild-text .gallery a {
    display: block;
    position: relative;
}
.bild-text .gallery a::after {
    content: "\f002";
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    padding: 5px 8px 8px 8px;
    background: var(--cta-clr);
    color: #fff;
    font-family: "Font Awesome 7 Pro";
    display: inline-block;
    text-align: center;
    font-weight: 400;
    font-size: 20px;
    opacity: 0.9;
}
.bild-text .gallery a:hover::after {
    opacity: 1;
}


/* .... DOWNLOAD .... */
.downloads {
    margin: 2rem 0;
}
.download {
    display: flex;
    margin-bottom: 20px;
    align-items: center;
}
.download .fas {
    font-size: 1.4rem;
    color: var(--primary-clr);
    margin-right: 10px;
}
.download a {
    line-height: 1.2em;
    font-size: 1.1rem;
}


/* .... SUBMENÜ .... */
#submenu {
    list-style: none;
    margin-left: 0;
    font-family: var(--font-headlines);
}
#submenu li {
    margin-bottom: 20px !important;
}
#submenu a:link,
#submenu a:visited {
    font-size: 2.3rem;
    font-weight: 200 !important;
    font-family: var(--font-headlines);
}
.font-light #submenu a:link,
.font-light #submenu a:visited {
    color: #fff;
}
.font-lila #submenu a:link,
.font-lila #submenu a:visited {
    color: var(--lila);
}
.font-blau #submenu a:link,
.font-blau #submenu a:visited {
    color: var(--primary-clr);
}
.font-light #submenu a:hover,
.font-light #submenu a:focus {
    opacity: 0.8;
}
@media (max-width: 1000px) {
    #submenu {
        text-align: center;
    }
    .bild-text .text {
        display: block;
        padding: 2.5rem 30px !important;
    }
}
@media (min-width: 1001px) {
    .page-id-623 #submenu {
        text-align: right;
    }
}


/* .... SUBMENÜ BUTTONS + ACCORDION .... */

#subbuttons ul,
.accordion-container {
    max-width: 1000px;
    margin: 2rem auto;
    text-align: center;
}
#subbuttons.position-left ul,
.accordion-container.position-left {
    margin: 2rem 0;
    text-align: left;
}
.accordion-container.textalign-left {
    text-align: left;
}
#subbuttons ul li {
    margin-bottom: 0;
    list-style: none;
}
#subbuttons ul li a:link,
#subbuttons ul li a:visited,
button.accordion {
    display: block;
    padding: 1.3rem 1.5rem 1.3rem !important;
    border-bottom: 1px solid #fff;
    background: var(--grey);
    color: var(--light-rosa);
}
#subbuttons ul li a:hover,
#subbuttons ul li a:focus,
button.accordion:hover,
button.accordion:focus {
    background: var(--primary-clr) !important;
    color: var(--light-rosa) !important;
}
#subbuttons ul span.title,
button.accordion {
    display: block;
    font-family: var(--font-headlines);
    font-size: 1.7rem;
    font-weight: 200;
}


/* .... PFEIL NAVIGATION .... */
#arrows {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
#arrows > div {
    position: absolute;
    top: -90px;
}
#arrows div.prev {
    left: 30px;
}
#arrows div.next {
    right: 40px;
}
#arrows a {
    font-size: 3rem;
    color: var(--primary-clr);
}

@media (max-width:800px) {
    #arrows > div {
        top: -60px;
    }
    #arrows div.prev {
        left: 20px;
    }
    #arrows div.next {
        right: 20px;
    }
    #arrows a {
        font-size: 2rem;
    }
}
@media (min-width: 1200px) {
    #arrows > div {
        top: -20px;
    }
    #arrows div.prev {
        left: 30px;
    }
    #arrows div.next {
        right: 30px;
    }
    #arrows a {
        font-size: 4rem;
    }
}