@import url("reset.css");

img,
figure {
    pointer-events: none;
}

/* Elemente mit der Klasse .notsafe erhalten ihre Pointer-Events zurück*/
.notsafe {
    pointer-events: auto !important;
}

/* alegreya-sans-300 - latin */
@font-face {
    font-family: 'Alegreya Sans';
    font-style: normal;
    font-weight: 300;
    src: local(''),
        url('../fonts/alegreya-sans-v24-latin-300.woff2') format('woff2'),
        /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('../fonts/alegreya-sans-v24-latin-300.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* alegreya-sans-regular - latin */
@font-face {
    font-family: 'Alegreya Sans';
    font-style: normal;
    font-weight: 400;
    src: local(''),
        url('../fonts/alegreya-sans-v24-latin-regular.woff2') format('woff2'),
        /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('../fonts/alegreya-sans-v24-latin-regular.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* alegreya-sans-italic - latin */
@font-face {
    font-family: 'Alegreya Sans';
    font-style: italic;
    font-weight: 400;
    src: local(''),
        url('../fonts/alegreya-sans-v24-latin-italic.woff2') format('woff2'),
        /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('../fonts/alegreya-sans-v24-latin-italic.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* alegreya-sans-500 - latin */
@font-face {
    font-family: 'Alegreya Sans';
    font-style: normal;
    font-weight: 500;
    src: local(''),
        url('../fonts/alegreya-sans-v24-latin-500.woff2') format('woff2'),
        /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('../fonts/alegreya-sans-v24-latin-500.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* alegreya-sans-500italic - latin */
@font-face {
    font-family: 'Alegreya Sans';
    font-style: italic;
    font-weight: 500;
    src: local(''),
        url('../fonts/alegreya-sans-v24-latin-500italic.woff2') format('woff2'),
        /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('../fonts/alegreya-sans-v24-latin-500italic.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}



.clear {
    clear: both;
}

* {
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
}

a {
    transition: .8s ease;
    -o-transition: .8s ease;
    -webkit-transition: .8s ease;
    -moz-transition: .8s ease;
    -ms-transition: .8s ease;
}

body {
    font: 300 18px/24px 'Alegreya Sans';
    color: #2e2d2c;
}

header {
    background: url(../images/trauer-grab.jpg) no-repeat center top / cover;
    height: 950px;
    position: relative
}

.logo {
    position: fixed;
    left: 10%;
    top: 13px;
    z-index: 101;
}

.logo a {
    display: block;
}

nav {
    background: #fff;
    width: 100%;
    position: fixed;
    padding: 49px 10% 25px 10%;
    font-size: 20px;
    z-index: 100;
}

nav ul {
    display: flex;
    justify-content: flex-end;
}

nav ul li {
    margin: 0 15px;
    position: relative
}

nav ul li:after {
    content: '•';
    color: #b7d93c;
    position: absolute;
    right: -21px;
    top: -3px;
    font-size: 55px
}

nav ul li a {
    text-decoration: none;
    color: #2e2d2c;
    font-variant: small-caps;
    letter-spacing: 1px;
}

nav ul li a:hover {
    color: #b7d93c
}

nav ul li:last-child:after {
    content: none;
}

nav ul li:last-child {
    margin-right: 0;
}

.slogan {
    background: rgba(140, 166, 48, 0.9) url(../images/logo-bildmarke.svg) no-repeat right -50px center / 250px;
    position: absolute;
    left: 10%;
    bottom: 0;
    padding: 35px;
    border-radius: 15px 15px 0 0;
    color: #fff;
}

.big {
    font-variant: small-caps;
    font-size: 33px;
    font-weight: 400;
    line-height: 35px;
}

.small {
    font-size: 20px;
}

.small,
.slogan a {
    display: inline-block;
}

.slogan a {
    margin-left: 35px;
    text-decoration: none;
    color: #fff;
    position: relative
}

.slogan a:before {
    position: absolute;
    content: '';
    background: url(../images/phone.svg) no-repeat center / contain;
    width: 13px;
    height: 18px;
    left: -20px;
    top: 3px;
}

.contact {
    position: fixed;
    right: 10%;
    top: 0;
    background: #f3f1ec;
    border-radius: 0 0 10px 10px;
    padding: 4px 15px;
    font-size: 17px;
    line-height: 20px;
    letter-spacing: .5px;
    transition: .8s ease;
    -o-transition: .8s ease;
    -webkit-transition: .8s ease;
    -moz-transition: .8s ease;
    -ms-transition: .8s ease;
    z-index: 101;
}

.contact a {
    text-decoration: none;
    color: #2e2d2c
}

.contact:hover {
    background: #8ca630;
    color: #fff;
}

.contact:hover a {
    color: #fff;
}
.contact a:hover {
    text-decoration: underline}
.phone {
    width: 50px;
    height: 40px;
    background: #8ca630;
    display: block;
    position: fixed;
    right: 0;
    bottom: 300px;
    border-radius: 10px 0 0 10px;
    padding: 5px;
    z-index: 100;
}

.mail {
    width: 50px;
    height: 40px;
    background: #8ca630;
    display: block;
    position: fixed;
    right: 0;
    bottom: 240px;
    border-radius: 10px 0 0 10px;
    padding: 5px;
    z-index: 100;
}

.phone img {
    width: 25px;
    height: auto;
    margin: 4px auto;
    display: block;
}

.mail img {
    width: 25px;
    height: auto;
    margin: 6px auto;
    display: block;
}

.phone:hover,
.mail:hover {
    background: #4c591a
}

h1 {
    font-size: 35px;
    color: #b7d93c;
    font-variant: small-caps;
    margin-bottom: 35px;
    line-height: 30px;
}

h2 {
    font-size: 35px;
    color: #b7d93c;
    font-variant: small-caps;
    margin-bottom: 25px;
    line-height: 30px;
}

h1 span,
h2 span {
    font-variant: normal;
    font-size: 25px;
    color: #2e2d2c;
    line-height: 28px;
}

h3 {
    font-size: 25px;
    color: #8ca630;
    line-height: 28px;
    margin-bottom: 15px
}

h4 {
    font-size: 20px;
    color: #8ca630;
    line-height: 28px;
    margin-bottom: 5px
}

#ueberuns {
    padding: 150px 15%;
    text-align: center
}

#ueberuns h1 {
    text-align: center;
}

.flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.col {
    width: 49%;
}

#wir {
    background: #f3f1ec;
}

#wir .text-inhalt {
    padding: 150px 0 150px 10%;
    width: 65%
}

.bild-inhalt {
    width: 30%;
}

.bestattung-img {
    background: url(../images/friedhof-kreuz.jpg) no-repeat center right / cover;
}

#leistungen {
    background: #4c591a;
    padding: 100px 10%;
}

.leistung {
    width: 24%;
    position: relative;
}

.leistung img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}

.leistung a {
    position: absolute;
    background: #b6d83d url(../images/logo-bildmarke.svg) no-repeat right -30px center / 150px;
    color: #fff;
    width: 90%;
    padding: 25px 15px;
    border-radius: 20px;
    z-index: 99;
    bottom: -25px;
    left: 5%;
    font-size: 25px;
    font-variant: small-caps;
    text-decoration: none;
    text-align: center;
}

.leistung a:hover {
    background: #8ca630 url(../images/logo-bildmarke.svg) no-repeat center / 150px;
}

/*POPUP*/
.style-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    width: 60%;
    background: #f3f1ec url(../images/bm-white.svg) no-repeat right -50px bottom -50px / 550px;
    text-align: left;
    padding: 75px;
    display: none;
    z-index: 1000;
}

.style-popup .thematik-img {
    width: 65%;
    padding-top: 15px;
}


#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
}

.close-popup {
    border: none;
    background-color: transparent;
    position: absolute;
    right: -20px;
    top: -16px;
}

.close-popup img {
    width: 40px !important;
    height: 40px !important
}


/*POPUP ENDE*/

.italic {
    font-style: italic;
    letter-spacing: .5px
}

.color {
    color: #8ca630
}


#trauerdekoration .text-inhalt {
    padding: 150px 10% 150px 0;
    width: 65%
}

.deko-img {
    background: url(../images/trauerdekoration.jpg) no-repeat center top/ cover;
}

#trauerdekoration h2 {
    text-align: center;
}

.eyecatcher {
    width: 100%;
    height: 550px;
    background: url(../images/frau-sarg.jpg) no-repeat center / cover;
    background-attachment: fixed;
    position: relative;
}

.eyecatcher-2 {
    width: 100%;
    height: 550px;
    background: url(../images/sarg-hand.jpg) no-repeat center left / cover;
    background-attachment: fixed;
    position: relative;
}

.eyecatcher .slogan {
    left: inherit;
    right: 10%;
}

.eyecatcher-2 .slogan {
    left: inherit;
    left: 10%;
}

.eyecatcher a:before {
    content: none;
}

.eyecatcher a {
    margin: 0;
    color: #8ca630;
}

.eyecatcher .btn {
    background: #fff;
    border-radius: 10px;
    padding: 5px 25px
}

.eyecatcher .btn:hover,
.btn-white:hover {
    background: #4c591a;
    color: #fff;
}

.btn-white {
    background: #fff;
    border-radius: 10px;
    padding: 25px 50px;
    display: inline-block;
    text-align: center;
    margin-top: 25px;
    color: #b7d93e;
}

#vorsorge {
    padding: 150px 10%;
    background: #f3f1ec;
}

.finanzielle-vorsorge {
    padding: 100px 10%
}

.cta {
    padding: 35px 10%;
    text-align: center;
    background: url(../images/bg.jpg) center / auto;
    color: #fff;
}

.btn {
    background: #8ca630;
    text-decoration: none;
    padding: 10px 25px;
    border-radius: 10px;
    display: inline-block;
    margin-top: 15px;
    color: #fff;
}

.btn:hover {
    background: #4d591b;
}

.cta .btn:hover {
    background: #4d591b;
    border: 1px solid #8ca630
}

#service {
    padding: 150px 10%;
}

#service h2 {
    text-align: center;
}

/*-----ACCORDION------*/
.accordion,
.accordion * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.accordion {
    overflow: hidden;
}

/*----- Section Titles -----*/
.accordion-section-title {
    width: 100%;
    padding: 15px;
    display: inline-block;
    border-bottom: 1px solid #f3f1ec;
    transition: all linear 0.15s;
    /* Type */
    font-size: 1.200em;
    color: #8ca630;
    text-decoration: none;
    font-variant: small-caps;
    font-size: 25px;
    position: relative;
}

.accordion-section-title span {
    color: #2e2d2c;
    font-variant: normal;
    font-size: 18px
}

.accordion-section-title img {
    position: absolute;
    right: 15px;
    top: 32px;
    width: 15px;
    height: auto;
}

.accordion-section-title.active,
.accordion-section-title:hover {
    /* Type */
    background: rgba(243, 241, 236, 0.5);
}

.accordion-section:last-child .accordion-section-title {
    border-bottom: none;
}

/*----- Section Content -----*/
.accordion-section-content {
    padding: 15px;
    display: none;
    background: rgba(243, 241, 236, 0.5);
}

/*-----ACCORDION Ende------*/

.satzung {
    margin-top: 50px;
    hyphens: auto;-o-hyphens: auto;-webkit-hyphens: auto;-moz-hyphens: auto;-ms-hyphens: auto;
}

.btn-2 {
    background: #b6d83d url(../images/logo-bildmarke.svg) no-repeat right -30px center / 150px;
    color: #fff;
    width: 23%;
    padding: 25px 15px;
    border-radius: 20px;
    z-index: 99;
    font-size: 25px;
    font-variant: small-caps;
    text-decoration: none;
    text-align: center;
}

.btn-2:hover {
    background: #8ca630 url(../images/logo-bildmarke.svg) no-repeat center / 150px;
}

#kontakt {
    background: #f3f1ec url(../images/bm-white.svg) no-repeat right 35% bottom -150px / 600px
}

#kontakt .text-inhalt {
    padding: 150px 0 150px 10%;
    width: 65%;
}

.kerze-img {
    background: url(../images/grablicht.jpg) no-repeat center / cover;
}

.landing {
    background: #4c591a;
    padding: 35px 10%;
}

/*------SECURE--------*/
.dsa-secure-plugin {
    border-radius: 5px;
    position: relative
}

.dsa-secure-plugin .dsa-secure-image {
    width: 100%;
    height: 100%
}

.dsa-secure-plugin {
    font-size: 12px;
    line-height: 16px
}

.dsa-secure-plugin .dsa-buttons {
    width: 90%;
    margin: auto;
    text-align: center
}

.dsa-secure-plugin .dsa-buttons a:nth-of-type(2n) {
    margin-top: 10px
}

.dsa-secure-plugin .undercheck {
    background-color: #fff;
    color: #222 !important;
    border-radius: 5px;
    padding: 4px;
    margin: 8px 50% 16px;
    width: 202px;
    transform: translateX(-50%)
}

.dsa-secure-plugin .check-slide-content {
    position: absolute;
    top: 50%;
    left: 5%;
    width: 90%;
    margin: auto;
    -webkit-transform: translateY(100%);
    transform: translateY(-50%)
}

.dsa-secure-plugin .dsa-switch {
    position: relative;
    width: 60px;
    height: 34px;
    display: block
}

.dsa-secure-plugin .check-slide {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity .5s linear
}

.dsa-secure-plugin .dsa-secure-plugin input {
    display: none
}

.dsa-secure-plugin iframe {
    width: 100%
}

.dsa-secure-plugin .dsa-switch {
    margin-left: calc(50% - 30px)
}

.dsa-secure-plugin p,
.dsa-secure-plugin p {
    text-align: center;
    font-family: arial;
    padding: 10px 0;
    display: block;
    margin: auto;
    font-weight: 700
}

.dsa-secure-plugin .check-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #000
}

.dsa-secure-plugin .check-slide.hide {
    display: none
}

.dsa-secure-plugin a {
    font-size: 12px;
    text-align: center;
    font-family: arial;
    display: block;
    margin: auto;
    width: calc(100% - 20px);
    max-width: 300px;
    background-color: #4c591a;
    border-radius: 5px;
    padding: 5px 10px;
    text-decoration: none;
    color: #fff
}

.dsa-secure-plugin a:hover {
    background-color: #8ca630
}

.dsa-secure-plugin:hover .check-slide,
.dsa-secure-plugin .check-slide:hover {
    visibility: visible;
    opacity: 1;
    visibility: visible;
    opacity: 1
}

.dsa-secure-plugin .dsa-tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted #000
}

.dsa-secure-plugin .dsa-buttons a:hover {
    color: #fff !important
}

.dsa-secure-plugin .dsa-tooltip .tooltiptext {
    font-size: 12px;
    visibility: hidden;
    width: 100%;
    max-width: 300px;
    background-color: #8ca630;
    color: #fff;
    text-align: center;
    padding: 5px 10px;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 0;
    margin-left: 0;
    opacity: 0;
    transition: opacity .3s
}

.dsa-secure-plugin .dsa-tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent
}

.dsa-secure-plugin .dsa-tooltip:hover .tooltiptext,
.dsa-tooltip.active .tooltiptext {
    visibility: visible;
    opacity: 1
}

.dsa-secure-plugin .dsa-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #333;
    -webkit-transition: .4s;
    transition: .4s
}

.dsa-secure-plugin .dsa-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: #fff;
    -webkit-transition: .4s;
    transition: .4s
}

.dsa-secure-plugin input:checked + .dsa-slider {
    background-color: #8ca630
}

.dsa-secure-plugin input:focus + .dsa-slider {
    box-shadow: 0 0 1px #cc1417
}

.dsa-secure-plugin input:checked + .dsa-slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px)
}

.dsa-secure-plugin .dsa-slider.round {
    border-radius: 34px
}

.dsa-secure-plugin .dsa-slider.round:before {
    border-radius: 50%
}

.dsa-cookie-notice-close:hover {
    background-color: #fff;
    color: #b6d83d!important
}

.dsa-cookie-notice-close {
    position: absolute;
    display: block;
    height: 20px;
    bottom: 20px;
    width: 20px;
    line-height: 20px;
    right: 8px;
    top: 8px;
    text-decoration: none;
    color: #fff !important;
    background-color: #b6d83d;
    border-radius: 10px
}

.dsa-cookie-notice {
    font-size: 16px;
    display: block;
    position: fixed;
    right: 10px;
    bottom: 20px;
    z-index: 99999 !important;
    background-color: #4c591a;
    color: #fff;
    margin: auto;
    width: 35%;
    text-align: center;
    border-radius: 15px
}

.dsa-cookie-notice a {
    color: #b6d83d
}
.dsa-cookie-notice a:hover {
    text-decoration: none;
}

.dsa-cookie-notice.hide {
    display: none
}

.cookie-inner {
    padding: 25px
}


/*------SECURE--------*/


/*----RESP NAVI -----*/
.sidenav,
.open-nav {
    display: none
}


.open-nav {
    position: fixed;
    top: 35px;
    right: 5%;
    width: 56px;
    height: 50px;
    cursor: pointer;
    z-index: 110;
    transition: all 1s;
}


.open-nav img {
    width: 41px;
    height: 31px;
    position: absolute;
    top: 9px;
    left: 7px;
    margin: 0;
}

.sidenav {
    display: block;
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 111;
    top: 0;
    right: 0;
    background: rgba(243, 241, 236, 0.98) url(../images/bm-white.svg) no-repeat right -150px bottom -150px / 600px;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 15px;
}

.sidenav a {
    padding: 17px 0 8px 0;
    text-decoration: none;
    font-size: 23px;
    color: #2e2d2c;
    display: block;
    transition: 0.3s;
    text-align: center;
}

.sidenav a:nth-child(2) {
    margin-top: 150px;
}

.sidenav a:hover,
.offcanvas a:focus {
    color: #b7d93c;
}

.sidenav a img {
    width: 29px;
}

.sidenav .closebtn {
    position: absolute;
    top: 30px;
    right: 6%;
    font-size: 65px;
    margin-left: 50px;
    background: #8ca630;
    color: #fff;
    padding: 11px 8px 15px 8px;
}

.sidenav .closebtn:hover {
    color: #fff;
    background: #b7d93c;
}

/*----RESP NAVI ENDE-----*/


.data {
    position: fixed;
    left: 0;
    bottom: 0;
    background: #f3f1ec;
    border-radius: 0 10px 0 0;
    padding: 4px 15px;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: .5px;
    transition: .8s ease;
    -o-transition: .8s ease;
    -webkit-transition: .8s ease;
    -moz-transition: .8s ease;
    -ms-transition: .8s ease;
    z-index: 101;
}
.data a {text-decoration: none; color: #4c591a}
.impress #ueberuns {text-align: left;}

.list li {list-style: disc; list-style-position: outside; margin-left: 20px;  }

/*---------------------------------------
MEDIA Queries | Tablet | Phone
---------------------------------------*/

@media screen and (max-width: 1150px) {
    /*CSS*/
    #ueberuns, #leistungen, #vorsorge, .finanzielle-vorsorge, #service {padding: 100px 5%;}
    #wir .text-inhalt, #kontakt .text-inhalt {padding: 100px 0 100px 5%}
    #trauerdekoration .text-inhalt {padding: 100px 5% 100px 0;}
    .logo {left: 5%;}
    nav {padding: 49px 5% 25px 5%; font-size: 18px}
    nav ul li {margin: 0 10px;}
    nav ul li::after {right: -17px;}
    .contact {right: 5%;}
}


@media (max-width:950px) {

    .dsa-secure-plugin .check-slide {
        visibility: visible;
        opacity: 1;
    }
    .flex {flex-wrap: wrap;}
    #wir .col, #trauerdekoration .col {width: 100%;}
    .btn-2 {width: 49%; margin: 10px 0}
    .leistung {width: 49%;margin-bottom: 55px;}
    header {height: 750px; background-position: right top}
    .eyecatcher, .eyecatcher-2 {background-attachment: inherit;}
    .bestattung-img {background-position: center right -130px}
    nav ul {display: none;}
    nav {padding: 50px 5%}
    .sidenav,
    .open-nav {
        display: block
    }
    #trauerdekoration h2 {text-align: left;}
}
@media screen and (max-width: 870px) {
    /*CSS*/
    #service .col {width: 100%;}
}

@media screen and (max-width: 768px) {
    .col {width: 100%; margin-bottom: 24px}
    .contact {display: none}
    h1, h2,.leistung a, .btn-2 {
    font-weight: 500;}
    h1 span, h2 span {font-weight: 400;}
    /*CSS*/
}

@media screen and (max-width: 680px) {
    /*CSS*/
    .bild-inhalt {width: 100%;}
    #wir .text-inhalt, .bild-inhalt, #trauerdekoration .text-inhalt, #kontakt .text-inhalt {width: 100%;}
    #wir .text-inhalt, #kontakt .text-inhalt, #trauerdekoration .text-inhalt, #kontakt .text-inhalt {padding: 100px 5%;}
    #wir .text-inhalt, #trauerdekoration .text-inhalt, #kontakt .text-inhalt {order: 2;}
    .bestattung-img, .kerze-img{height: 350px; background-position: center; order: 1;}
    .deko-img {height: 350px; background-position: center top -80px; order: 1;}
    #kontakt {background-position:  right -150px bottom -150px}
    .btn-2 {width: 100%;}
    .dsa-cookie-notice {width: 90%}
    
    
}

@media screen and (max-width: 550px) {
    /*CSS*/
    .leistung {width: 90%;margin: 0 auto 55px}
    .eyecatcher-2 {background-position: center;}
    .slogan, .eyecatcher-2 .slogan {left: 5%;}
    .eyecatcher .slogan {right: 5%}
}

@media screen and (max-width: 480px) {
    /*CSS*/
    .slogan, .eyecatcher-2 .slogan {width: 100%; left: 0; padding: 25px}
    .eyecatcher .slogan {right: 0; width: 100%; padding: 25px;}
    .logo img{ width: 250px}
    nav{padding: 40px 5%}
    .open-nav {top: 15px;}
}