/* oswald-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Oswald";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/oswald-v53-latin/oswald-v53-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* oswald-600 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Oswald";
    font-style: normal;
    font-weight: 600;
    src: url("../fonts/oswald-v53-latin/oswald-v53-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

html {
    scroll-behavior: smooth;
}
body {
    line-height: 24px;
    color: #ffffff;
    font-size: 16px;
    font-family: "Roboto";
    background-color: #222222;
}
h1,
h2,
h3,
h4 {
    font-family: "Oswald";
    font-weight: 600;
}
h1 .span {
    color: #c0b85b;
}
h1 span {
    color: #ffffff;
}
.starth2 {
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 20px;
    line-height: 1.5;
    color: #ffffff;
}
.starthr {
    width: 40%;
    margin-right: auto;
    display: inline-block;
    margin-top: 0px;
    margin-bottom: 25px;
}
.btn {
    color: #fff;
    padding: 10px 20px;
    background: #c0b85b;
    border: 0px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 2px;
}
.btn:hover {
    color: #fff;
    background: #a7a051;
}
*::selection {
    background: #ede47e;
    color: #ffffff;
}
p b span {
    color: #ede47e;
}
h1 .h1-kleiner {
    color: #c0b85b;
    font-size: 40px;
}
.h3 {
    color: #c0b85b;
    font-size: 20px;
    font-weight: bold;
    margin: 0px 0 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.h4 {
    color: #ede47e;
    font-size: 20px;
    font-weight: bold;
    margin: 0px 0 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.h4 span {
    font-size: 40px;
}
.h3index {
    font-size: 14px;
    color: #fff;
    font-family: "Roboto", sans-serif;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 1.5px;
    margin: 0 0 8px;
}
.img-round {
    border-radius: 3px;
}
.btn-primary {
    border-radius: 0;
    border: 0;
    padding: 10px 20px;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: bold;
}
.btn-primary:hover {
    background-color: #9c8129;
}
.btn-black {
    border-radius: 0;
    border: 0;
    padding: 10px 20px;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: bold;
    background-color: #222222;
}
.btn-black:hover {
    background-color: #222;
}
.indexh1 {
    position: absolute;
    z-index: 0;
    left: 0px;
    right: 0px;
    text-align: center;
    top: 10px;
    opacity: 0;
}
.indexh1 h1 {
    color: #fff;
    font-family: "Oswald";
    font-style: normal;
    font-weight: 400;
    text-shadow:
        5px 5px 20px #111,
        0 0 10em #111111,
        0 0 0.1em #222222;
}
.indexh1 h1 span {
    color: #ede47e;
    font-weight: 600;
}
.color-white {
    color: #fff;
}
.color-black {
    color: #222222;
}
.text-center {
    text-align: center;
}
.abstand {
    height: 50px;
}
.taetigkeiten {
    margin-top: 1rem;
    border-top: 1px solid #666;
    max-width: 195px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.taetigkeiten b {
    color: #ede47e;
}
.bg-black {
    background-color: #222222;
}
.bg-yellow {
    background-color: #ede47e;
}
.bg-yellow b {
    color: #222222;
}
.bg-yellow .inyellow {
    color: #fff;
}
.bg-yellow .inyellow i {
    color: #222222;
}
.bg-yellow .model {
    color: #fff;
}
.flex-wrap-reverse {
    flex-wrap: wrap-reverse;
    display: flex;
}
.card {
    background-color: #fff;
    padding: 1rem;
    border-radius: 3px;
}
.img-center {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.p-3 {
    padding: 3rem;
}
.py-5 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}
.mb-2 {
    margin-bottom: 2rem;
}
.mb-3 {
    margin-bottom: 3rem;
}
.mt-1 {
    margin-top: 1rem;
}
.mb-1 {
    margin-bottom: 1rem;
}
.mt-2 {
    margin-top: 2rem;
}
.mt-3 {
    margin-top: 3rem;
}
.mb-5 {
    margin-bottom: 5rem;
}
.my-5 {
    margin-bottom: 5rem;
    margin-top: 5rem;
}
.mb-0 {
    margin-bottom: 0px;
}
.mt-5 {
    margin-top: 5rem;
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.justify-content-center {
    justify-content: center;
    display: grid;
}
.dsgvo-right {
    float: right;
    width: 97%;
}
.img-fluid {
    width: 100%;
}
.rechtliches {
    bottom: 0;
    margin-left: 0px;
    padding: 5px 10px;
    color: #fff;
}
.rechtliches a {
    color: #fff;
}
.rechtliches .active {
    color: #ede47e;
}
header nav.nav-menu ul.menu-list .rechtliches-link {
    display: none;
}
.menu-list,
.social-icons,
.filter {
    padding-left: 0;
}
.menuwort {
    position: relative;
    bottom: 10px;
    right: 5px;
    color: #fff;
}
.social-icons {
    margin-bottom: 0;
}
.panel-heading {
    width: 100%;
}
.container-1200 {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.container-1200 p {
    color: #ffffff;
}
.container-1200 .bg-black p {
    color: #fff;
}
.panel-group .panel {
    border-radius: 0;
    padding: 15px;
    border-left: 10px solid #ede47e;
}
.panel-default > .panel-heading {
    border-radius: 0;
    background: #fff;
}
.panel-heading > .dropdown .dropdown-toggle,
.panel-title {
    font-weight: bold;
}
a:focus {
    outline: unset;
    outline: 0;
}
.panel-group .panel + .panel {
    margin-top: 15px;
}
.project-tags li {
    color: #ede47e;
}
.logo p .b {
    /* letter-spacing: 13.5px; */
    letter-spacing: 10.5px;
    font-weight: 400;
    font-size: 12px;
    /* text-transform: uppercase; */
    position: relative;
    left: 5px;
}
.logo p b span {
    color: #fff;
}
.logo .location {
    letter-spacing: 0px;
    font-size: 13px;
}
.logo .location b {
    font-weight: 600;
    color: #ede47e;
    letter-spacing: 0px;
}
.start-bg {
    background-image: url("../img/hochzeit/banner-startseite.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    background-position: center;
}
.portrait-bg {
    background-image: url("../img/fotografie-banner.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 60vh;
    background-position: center;
}
.hochzeit-bg {
    background-image: url("../img/hochzeit/hochzeit-banner.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 60vh;
    background-position: center 25%;
}
.event-bg {
    background-image: url("../img/event/event-banner.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 60vh;
    background-position: center 25%;
}
.start-row {
    margin-top: 30%;
    padding: 2rem;
    /* background: rgba(40, 40, 40, 0.9); */
    border-radius: 3px;
}
/* .start-row h1,
.start-row h2 {
    text-shadow: 1px 1px 2px #222222;
} */
.start-row h3,
.start-row p {
    color: #222222;
}
.start-row h1 {
    color: #ffffff;
}
.start-row h1 span {
    color: #ede47e;
}
.start-row h2 {
    font-family: "Roboto", sans-serif;
}

span {
    color: #c0b85b;
}
/* .kontaktperson-bereich {
    background: #ede47e;
    width: fit-content;
    margin: 0 auto;
    padding: 4rem 2rem;
    border-radius: 2px;
} */
.kontaktperson {
    text-align: center;
}
.kontaktperson img {
    width: 300px;
    border-radius: 100%;
    object-fit: cover;
    height: 300px;
}
.kontaktperson li {
    display: inline-block;
    margin: 0 5px;
}
.kontaktperson i {
    font-size: 30px;
}
.bg-white {
    background-color: #ffffff;
}

@media (max-width: 1199px) {
    .rechtliches {
        position: relative;
    }
    .taetigkeiten {
        font-size: 14px;
        max-width: 180px;
        margin-left: auto;
        margin-right: auto;
    }
    .logo p .b {
        letter-spacing: 9.5px;
        left: 1px;
    }
}
@media (max-width: 991px) {
    #submenufotografie,
    #submenuworkshops {
        display: none;
    }
    .white-menu {
        color: #222222;
        background-color: #ffffff;
    }
    .taetigkeiten {
        position: absolute;
    }
    header nav.nav-menu ul.menu-list .white-menu a {
        color: #222222;
        padding: 0px 10px 15px;
        font-size: 13px;
    }
    .rechtliches {
        display: none;
    }
    header nav.nav-menu ul.menu-list .rechtliches-link {
        display: block;
    }
    header nav.nav-menu {
        max-height: 100%;
    }
    header .logo {
        text-align: left;
    }
    .indexh1 {
        top: 230px;
    }
    .indexh1 h1 {
        font-size: 26px;
    }
    .py-5 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .mb-5 {
        margin-bottom: 2rem;
    }
    .my-5 {
        margin-bottom: 2rem;
        margin-top: 2rem;
    }
    .mt-5 {
        margin-top: 2rem;
    }
    .heading1,
    h1 {
        font-size: 40px;
    }
    .heading2,
    h2 {
        font-size: 28px;
    }
    .starth2 {
        font-size: 16px;
    }
    .portrait-bg {
        height: 40vh;
    }
    .workshop-sabrina-bg {
        height: 40vh;
    }
    .workshop-skrollan-bg {
        height: 40vh;
    }
    .workshop-jana-bg {
        height: 40vh;
    }
    .workshop-jenny-bg {
        height: 40vh;
    }
    .sensual-bg {
        height: 40vh;
    }
    .paare-bg {
        height: 40vh;
    }
    .hochzeit-bg {
        height: 40vh;
    }
    .event-bg {
        height: 40vh;
    }
    .hunde-bg {
        height: 40vh;
    }
    .business-bg {
        height: 40vh;
    }
    .logo p .b {
        letter-spacing: 3px;
    }
    .taetigkeiten {
        max-width: 100px;
        margin-bottom: 0px;
        border-top: 0px solid #666;
    }
    #desktop-menu {
        display: none;
    }
    #mobile-menu {
        text-align: right;
        padding-right: 10px;
        padding-top: 10px;
    }
    .menupunkt-mobile {
        display: none;
    }
    header nav.nav-menu ul.sub-menu li a {
        font-size: 13px;
        letter-spacing: 2px;
        text-transform: uppercase;
    }
    .sub-menu li span {
        text-transform: none;
        color: #c0b85b;
        top: -5px;
        position: relative;
    }
    header nav.nav-menu ul.bg-white {
        background-color: #ffffff;
    }
    header nav.nav-menu ul.bg-workshops {
        background-color: #eeeeee;
    }
    header nav.nav-menu ul.bg-white li a {
        color: #222222;
    }
    section.services-section {
        padding: 15px 30px 0;
    }
}
@media (min-width: 992px) {
    #mobile-menu {
        display: none;
        text-align: right;
    }
}

@media (max-width: 575px) {
    .dsgvo-right {
        width: 90%;
    }
    .heading1,
    h1 {
        color: #222222;
        font-size: 28px;
    }
    h1 .h1-kleiner {
        font-size: 20px;
    }
    .heading2,
    h2 {
        font-size: 20px;
    }
    .start-bg {
        height: 60vh;
        background-position-x: 52%;
    }
    .start-row {
        margin-top: 20%;
    }
    .portrait-bg {
        height: 20vh;
    }
    .workshop-sabrina-bg {
        height: 20vh;
    }
    .workshop-skrollan-bg {
        height: 20vh;
    }
    .workshop-jana-bg {
        height: 20vh;
    }
    .workshop-jenny-bg {
        height: 20vh;
    }
    .sensual-bg {
        height: 20vh;
    }
    .paare-bg {
        height: 20vh;
    }
    .hochzeit-bg {
        height: 20vh;
    }
    .event-bg {
        height: 20vh;
    }
    .hunde-bg {
        height: 20vh;
    }
    .business-bg {
        height: 20vh;
    }
    .starth2 {
        font-size: 14px;
        width: 70%;
    }
    .starthr {
        margin-bottom: 20px;
    }
}
