/*Konstanten*/

$font:'Fira Sans Extra Condensed',
sans-serif;
$brown:#7b6856;
$gray:#efefef;
$beige:#f2eeeb;
$darkgray:#b1b1b1;
$brombeer:#911e41;
$darkbeige:#e4ddd7;
$black: #2b2b2b;
$gbr:50%;
@mixin border-radius($br) {
    -webkit-border-radius: $br;
    -moz-border-radius: $br;
    border-radius: $br;
}

.frame-indent .frame-inner {
    margin-left: 0;
    margin-right: 0
}

.frame-indent .frame-inner figure {
    float: left
}

.frame-indent .frame-inner figure picture {
    width: 70%;
    float: left
}

/*Tags*/

body,
html {
    font-family: $font;
    overflow-x: hidden;
}

h1,
h2,
h3 {}

.frame-header :last-child {
    margin-bottom: 0;
}

h2 {
    color: $black;
    font-weight: 300;
    letter-spacing: 1px;
    span {
        margin-bottom: 0;
    }
}

h3 {
    color: $brombeer;
    font-size: 1.1rem;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.1rem;
}

h4 {
    color: $brombeer;
    font-size: 1rem;
    font-weight: 600;
    font-family: $font;
    letter-spacing: 0.01rem;
}

p {
    line-height: 1.3;
}

.frame-has-backgroundimage {
    padding-top: 50px;
    padding-bottom: 50px;
}

.footer-four-col {
    .frame {
        padding-bottom: 0;
    }
    h5 {
        font-size: 1rem;
        margin-bottom: 1rem !important;
    }
    .brombeer {
        color: $brombeer;
        sub {
            bottom: 0;
        }
    }
    p {
        font-size: 1.3rem;
        line-height: 1.3;
        a {
            font-weight: 400;
        }
    }
}

.row {
    position: relative;
}

/*Sections*/

footer {
    .footer-section-content,
    .footer-section-meta {
        background: $darkgray;
        .frame {
            padding-top: 0;
            padding-bottom: 0;
        }
    }
}

/*Navigation*/

.navbar-light .navbar-nav .nav-link,
.navbar-default .navbar-nav .nav-link,
.navbar-default-transition .navbar-nav .nav-link,
.navbar-default-transition.navbar-transition .navbar-nav .nav-link,
.navbar-light .navbar-nav .show>.nav-link,
.navbar-default .navbar-nav .show>.nav-link,
.navbar-default-transition .navbar-nav .show>.nav-link,
.navbar-default-transition.navbar-transition .navbar-nav .show>.nav-link,
.navbar-light .navbar-nav .active>.nav-link,
.navbar-default .navbar-nav .active>.nav-link,
.navbar-default-transition .navbar-nav .active>.nav-link,
.navbar-default-transition.navbar-transition .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-default .navbar-nav .nav-link.show,
.navbar-default-transition .navbar-nav .nav-link.show,
.navbar-default-transition.navbar-transition .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active,
.navbar-default .navbar-nav .nav-link.active,
.navbar-default-transition .navbar-nav .nav-link.active,
.navbar-default-transition.navbar-transition .navbar-nav .nav-link.active {
    color: $brown;
    text-transform: uppercase;
}

.navbar-default .navbar-nav .active>.nav-link {
    color: $brombeer;
}
.navbar-mainnavigation > .navbar-nav .nav-link, .navbar-mainnavigation > .container > .collapse > .navbar-nav .nav-link, .navbar-mainnavigation > .container-fluid > .collapse > .navbar-nav .nav-link{
padding-left:0.5rem;
padding-right:0.5rem;
}
@media (min-width:992px) and (max-width:1199.98px){
.navbar > .container, .navbar > .container-fluid{
flex-direction: column;
align-items:flex-start;
}
}
/*Buttons*/

.primary {
    background: $brombeer;
}

/*Einrückungen*/

.frame-teaser {
    .textpic-gallery {
        margin-bottom: 0
    }
    .textpic-text {
        background: #fff;
        margin-left: 20px;
        margin-right: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

.frame-layout-round-image {
    picture {
        img {
            @include border-radius($gbr);
        }
    }
}

.frame-startpage-overlap {
    position: relative;
    margin-top: 0 !important;
    z-index: 2;
}

.frame-indent-left {
    .frame-inner {
        margin-left: 0% !important;
        .textpic-gallery {
            width: 30%;
        }
        .textpic-text {
            width: 70%;
        }
    }
}

.frame-has-backgroundimage {
    background-size: cover !important;
}

/*Special Classes*/

.width-65 {
    width: 65%;
    margin-left: auto;
    margin-right: auto;
}

/*Carousel*/

.item.header-class {
    &-top .vcontainer {
        margin-top: 3rem;
        margin-bottom: auto;
        height: auto;
        .carousel-text-inner {
            transform: none;
            top: 0;
        }
    }
    &-bottom .vcontainer {
        margin-top: auto;
        margin-bottom: 3rem;
        height: auto;
        .carousel-text-inner {
            transform: none;
            top: 0;
        }
    }
}

.carousel-text {
    h1 {
        font-weight: 300;
        font-size: 3.2rem;
    }
    p {
        color: $brombeer;
        font-size: 1.25rem;
    }
}

/*Footer*/

.footer-four-col {
    background-color: $darkgray;
    color: #ffffff;
    padding-left: 10%;
    padding-right: 10%;
    a {
        color: #ffffff;
    }
}

/*Tabs auf der rechten Seite*/

.frame-layout-right-tabs {
    .frame-inner {
        margin-left: 0;
        margin-right: 0;
        background: #fff;
        &::after {
            content: "";
            display: table;
            clear: both;
        }
    }
    .tab-navigation {
        margin-bottom: 0;
        width: 25%;
        float: left;
        border: none;
        padding-left: 0;
        padding-right: 20px;
        .nav-item {
            width: 100%;
            display: block;
            margin-bottom: 0;
            border-bottom: 2px solid #ffffff;
            .nav-link {
                color: $black;
                background: $darkbeige;
                border: none;
                &.active {
                    color: $brombeer;
                    background: #ffffff
                }
            }
        }
    }
    .tab-content {
        width: 75%;
        float: left;
        padding-left: 20px;
        padding-right: 0;
    }
}

/*Ecken vor und nach Content*/

$clipborder:150px;
.frame-space- {
    &before- {
        &top- {
            &left- {
                &flat {
                    padding-top: 0;
                    &::before {
                        content: "";
                        display: block;
                        background: #000000;
                        height: $clipborder;
                        -webkit-clip-path: polygon(25% 75%, 0% 100%, 100% 100%);
                        clip-path: polygon(25% 75%, 0% 100%, 100% 100%);
                    }
                }
                &acute {
                    padding-top: 0;
                    &::before {
                        content: "";
                        display: block;
                        background: #000000;
                        height: $clipborder;
                        -webkit-clip-path: polygon(25% 50%, -10% 100%, 110% 100%);
                        clip-path: polygon(25% 50%, -10% 100%, 110% 100%);
                    }
                }
            }
            &right- {
                &flat {
                    padding-top: 0;
                    &::before {
                        content: "";
                        display: block;
                        background: #000000;
                        height: $clipborder;
                        -webkit-clip-path: polygon(75% 50%, 0% 100%, 100% 100%);
                        clip-path: polygon(75% 75%, 0% 100%, 100% 100%);
                    }
                }
                &acute {
                    padding-top: 0;
                    &::before {
                        content: "";
                        display: block;
                        background: #000000;
                        height: $clipborder;
                        -webkit-clip-path: polygon(75% 50%, -10% 100%, 110% 100%);
                        clip-path: polygon(75% 50%, -10% 100%, 110% 100%);
                    }
                }
            }
        }
    }
    &after- {
        &bottom- {
            &left- {
                &flat {
                    padding-bottom: 0;
                    &::after {
                        content: "";
                        display: block;
                        background: #000000;
                        height: $clipborder;
                        -webkit-clip-path: polygon(25% 25%, 0% 0%, 100% 0%);
                        clip-path: polygon(25% 25%, 0% 0%, 100% 0%);
                    }
                }
                &acute {
                    padding-bottom: 0;
                    &::after {
                        content: "";
                        display: block;
                        background: #000000;
                        height: $clipborder;
                        -webkit-clip-path: polygon(25% 50%, 0% 0%, 100% 0%);
                        clip-path: polygon(25% 50%, 0% 0%, 100% 0%);
                    }
                }
            }
            &right- {
                &flat {
                    padding-bottom: 0;
                    &::after {
                        content: "";
                        display: block;
                        background: #000000;
                        height: $clipborder;
                        -webkit-clip-path: polygon(75% 50%, -50% 0%, 150% 0%);
                        clip-path: polygon(75% 50%, -50% 0%, 150% 0%);
                    }
                }
                &acute {
                    padding-bottom: 0;
                    &::after {
                        content: "";
                        display: block;
                        background: #000000;
                        height: $clipborder;
                        -webkit-clip-path: polygon(75% 50%, 0% 0%, 100% 0%);
                        clip-path: polygon(75% 50%, 0% 0%, 100% 0%);
                    }
                }
            }
        }
    }
}

.frame-background-light:before {
    background-color: #f8f9fa;
}

.frame-space-before-top-left-flat,
.frame-space-before-top-right-flat,
.frame-space-before-top-left-acute,
.frame-space-before-top-right-acute {
    margin-top: calc(#{$clipborder} / 3 * 2);
    &::before {
        top: calc(#{-$clipborder} + 2px);
        position: absolute;
        width: 100%;
    }
}

.frame-space-after-bottom-left-flat,
.frame-space-after-bottom-right-flat,
.frame-space-after-bottom-left-acute,
.frame-space-after-bottom-right-acute {
    margin-bottom: calc(#{$clipborder} / 3 * 2);
    margin-bottom: 0;
    z-index: 1;
    &::after {
        bottom: calc(#{-$clipborder} + 2px);
        position: absolute;
        width: 100%;
    }
}

.frame-background- {
    &primary {
        &::before,
        &::after {
            background: $brombeer;
        }
    }
    &secondary {
        &::before,
        &::after {
            background: #ff3f00;
        }
    }
    &light {
        background: $beige;
        &::before,
        &::after {
            background: $beige;
        }
    }
    &dark {
        background: $gray;
        color: $black;
        &::before,
        &::after {
            background: $gray;
        }
    }
}

.navbar-brand.navbar-brand-image:after {
    content: "Kerstin und Michael Beschorner \A Praxis für Seelische Gesundheit";
    color: $darkgray;
    width: 150px;
    display: block;
    position: absolute;
    top: 35px;
    right: -60%;
    white-space: pre;
    font-weight: 300;
    line-height: 1.3;
}

/*Ergänzung für Kopfbild*/

.carousel-text.vcontainer {
    background: rgba(153, 153, 153, 0.20);
    padding: 15px;
}

@media (max-width:991.98px) {
    .valign {
        align-items: flex-start;
    }
    .carousel-text h1 {
        font-size: 2.8rem;
        line-height: 1.1;
    }
    .navbar-mainnavigation .navbar-brand-image {
        margin-bottom: 45px;
    }
    .navbar-brand.navbar-brand-image:after {
        top: 75px;
        right: initial;
    }
    .frame-layout-right-tabs .tab-navigation {
        width: 100%;
        float: none;
        padding-right: 0;
    }
    .frame-layout-right-tabs .tab-navigation .nav-item{
        width:100%;
    }
    .frame-layout-right-tabs .tab-content {
        width: 100%;
        float: none;
        padding-left: 0;
        padding: 20px;
    }
}

@media (min-width: 992px) {
    .navbar-mainnavigation .navbar-brand-image img {
        max-height: 85%;
    }
}

@media (max-width:767.98px) {
    .navbar-mainnavigation .navbar-brand-image {
        margin-bottom: 45px;
    }
    .navbar-brand.navbar-brand-image:after {
        top: initial;
        right: initial;
    }
}

@media (min-width: 768px) {
    .carousel .item {
        height: 750px;
    }
    .carousel-small .item {
        height: 400px;
    }
}

@media (min-width: 576px) {
    .footer-section-meta {
        text-align: right;
    }
}