index.scss

/*

TODO:
- Smooth-Scroll Animation - > CHECK!
- Mobile-nav kleiner machen - > CHECK!
- Navigation zu position fixed machen - > CHECK!
- Hintergrund abdunkeln - > CHECK!
- Foto-Gallerie abschließen - > CHECK!
- Impressum und weitere Links Seite Programmieren - > CHECK!
- Einen Nach-Oben-Button einbauen - > CHECK!
- Buttons in Menü-Leiste mit entsprechenden Sektionen verbinden - > CHECK!

*/

html {
    font-size: 1em;
    font-family: sans-serif;
}

$mobile-nav-size: 12.5rem;
$mobile-font-size: 0.75rem;

$section-padding-size: 12.5rem;
$section-mobil-padding-size: 5rem;

.carousel {
    margin-top: 3.125rem;
}

.carousel-item img {
    background-size: cover;
    background-position: center;
}

.carousel-image-position {
    height: 25rem;
    object-fit: cover;
}

.normal-nav {
    width: 100%;
    background-color: #000;

    position: fixed;
    z-index: 16;

    text-align: center;
    height: 3.5rem;

    a {
        color: #fff;
        text-decoration: none;
        font-size: 1rem;
        line-height: 3.43rem;
        padding: 0.625rem;
        
        
        &:hover {
            background-color: rgb(255, 0, 0);
            text-decoration: none;
            color: #fff;
        }
    }

    .navbar-toggler {
        color: #fff;
    }
}

@media (max-width: 47.93rem) {
    .normal-nav a {
        display: none;
    }
}

body {
    overflow-x: hidden;
}

.page {
    overflow-x: hidden;

    &.mobile-nav-opened {
        position: relative;
        left: $mobile-nav-size;
    }
}

.mobile-nav {
    position: fixed;
    left: 0;
    background-color: #000;
    top: 0;
    bottom: 0;

    a {
        color: #fff;
        display: block;

        width: $mobile-nav-size;
        text-align: center;

        font-size: 1.5rem;

        &:hover {
            text-decoration: none;
            color: #ff0000;
        }
    }

    &.mobile-nav-closed {
        display: none;
    }
}

#toggle-button {
    font-size: 1rem;
    margin-top: 0.18rem;
}

.page-head {
    position: relative;
}

.header-jumbotron {
    position: absolute;
    display: block;
    width: 37.5rem;
    height: 18.75rem;
    background-color: rgba(0, 0, 0, 0.5);
    top: 3.125rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);   

    h4 {
        font-size: 1.75rem;
        font-family: sans-serif;
        color: #fff;
        text-align: center;
        margin-top: 12%;
        margin-bottom: 0;
    }

    p {
        color: #fff;
        text-align: center;
        background-color: #ff0000;
        margin: 0 0.625rem;
        font-size: 1.125rem;
    }

    .jumbotron-icons  {
        color: #fff;
        text-align: center;
        margin: 0.625rem;

        a {

            color: #fff;

            i {
                padding-right: 0.5rem;
                padding-left: 0.5rem;
    
                &:hover {
                    cursor: pointer;
                }
            }
        }
    }
}

.sections {
    padding-top: $section-padding-size;
    padding-bottom: $section-padding-size;

    padding-right: 6.25rem;
    padding-left: 6.25rem;

    .section-content {
        display: flex;
        justify-content: space-between;
        text-align: justify;

        h1 {
            margin-bottom: 2.5rem;
            @media (max-width: 29rem) { font-size: 1.125rem; }
        }

        .section-heading-text {
            margin-bottom: 1.875rem;
            font-size: 1.5rem;
            @media (max-width: 29rem) { font-size: 1rem;}
            font-weight: normal;
            font-weight: lighter;
        }

        .section-description-text {
            max-width: 37.5rem;
            margin-right: 1.875rem;
            margin-bottom: 1.875rem;
            font-weight: lighter;
            font-size: 1.18rem;
            @media (max-width: 29rem) { font-size: $mobile-font-size; }
        }

        p {
            margin-bottom: 0.3125rem;

            i {
                margin-right: 0.625rem;
                color: rgba(255, 0, 0, 0.75);
            }
        }

        img {
            max-width: 37.5rem;
            width: 40%;
            height: 20%;
            margin-top: 5rem;
            object-fit: cover;
        }

        button {
            margin-top: 2.5rem;
            height: 2.5rem;
            width: 9.375rem;
            background-color: #3f3f3f;
            color: #fff;
            border: none;
            font-size: 1rem;

            i {
                margin-right: 0.375rem;
                font-size: 1rem;
                color: rgba(255, 0, 0, 0.75);
            }

            &:hover {
                background-color: #000;
                box-shadow: 0 0 0.1.25rem #000;

                i {
                    margin-right: 0.25rem;
                }
            }
        }
    }
}

.two-nt-section {
    background-color: rgb(250, 250, 250);
    margin: 0;
    padding-right: 6.25rem;
    padding-left: 6.25rem;

    .section-content h1, p, button {
        margin-right: 0;
        margin-left: 1.875rem;
        @media (max-width: 47.93rem) { margin-right: 0; margin-left: 0; }
    }
}

.reverse-margin {

    .section-content h1, p, button {
        margin-right: 0;
        margin-left: 1.875rem;
        @media (max-width: 47.93rem) { margin-right: 0; margin-left: 0; }
    }
}

@media (max-width: 47.93rem) {
    .sections {
        padding-top: $section-mobil-padding-size;
        padding-bottom: $section-mobil-padding-size;
    }

    .section-content {
        flex-direction: column;
    }

    .sections .section-content img {
        width: 100%;
    }
}

.sections .section-content .color-black {
    color: #000;
}

.font-weight {
    font-weight: bold;
}

.mail-address {
    color: #000;

    &:hover {
        text-decoration: none;
        color: #000;
    }
}

#text-decoration {
    text-decoration: underline;
    width: 14.68rem;

    &:hover {
        text-decoration: none;
    }
}

#content-width {
    width: 312.5rem;
}

@media (max-width: 62.5rem) {
    .sections {
        padding-right: 3.125rem;
        padding-left: 3.125rem;
    }
}

@media (max-width: 29rem) {
    .sections .section-content p {
        font-size: $mobile-font-size;
    }
}

@media (max-width: 23.81rem) {
    .sections {
        padding-left: 0.625rem;
        padding-right: 0.625rem;
    }
}

#full-width {
    width: 100%;
}

#mb-6-25rem {
    margin-bottom: 6.25rem;
}

@media (max-width: 47.93rem) {
    .mt-40 {
        margin-top: 2.5rem;
    }
}

#performance-button {
    margin-top: 0;
}

#performance-button-div {
    text-align: center;
}

.performance-icon-text {
    margin-top: 2.5rem;
    color: #000;
    font-size: 1rem;
}

.flexbox {
    display: flex;
    justify-content: space-around;
}

.performance-icons {
    width: 6.25rem;
    height: 6.25rem;
    text-align: center;
    margin-bottom: 6.25rem;
    
    i {
        margin-top: 2.18rem;
        font-size: 1.875rem;
    }
}

@media (max-width: 30.625rem) {
    .flexbox {
        flex-direction: column;
        align-items: center;
    }
}

#red {
    background-color: rgb(255, 0, 0);
    color: #fff;
}

#blue {
    background-color: rgb(41, 116, 228);
    color: #fff;
}

#black {
    background-color: #000;
    color: #fff;
}

#white-red {
    background-color: #fff;
    color: rgb(255, 0, 0);
}

#white-blue {
    background-color: #fff;
    color: rgb(41, 116, 228);
}

#white-black {
    background-color: #fff;
    color: #000;
}

footer {
    background-image: url("./img/footer/Background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 25rem;

    .footer-flex {
        display: flex;
        justify-content: space-evenly;
    }

    .black-box {
        width: 40%;
        height: 18.75rem;
        background-color: rgba(0, 0, 0, 0.5);
        margin-top: 3.125rem;

        h4 {
            margin: 1.25rem;
            color: #fff;
            border-bottom: dotted 0.125rem #fff;
        }

        a {
            text-decoration: none;
        }

        p {
            color: #fff;
            margin-bottom: 0.3125rem;
            font-size: 0.875rem;

            i {
                width: 0.9375rem;
                margin: 0 0.625rem 0 1.25rem;
                color: rgba(255, 0, 0, 0.75);
            }

            &.hover-on {
                &:hover {
                    i {
                        color: #fff;
                    }
                }
            }
        }
    }
}

@media (max-width: 47.93rem) {
    footer {
        height: 46.875rem;
    }

    .footer-flex {
        flex-direction: column;
        align-items: center;
    }

    footer .black-box {
        width: 80%;
    }
}

.black-background {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);

    &.black-background-hide {
        display: none;
    }
}

.box-window {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateX(-50%);
    transform: translateX(-50%) translateY(-50%);

    z-index: 17;

    width: 80%;
    max-width: 50rem;
    height: 80%;
    background-color: #fff;
    overflow: auto;

    .box-window-content {
        margin: 1.875rem;
    }

    .box-window-heading-text {
        margin-bottom: 1.875rem;
        font-size: 1.5rem;
        @media (max-width: 29rem) { font-size: 1rem;}
        font-weight: normal;
        font-weight: lighter;
    }

    .box-window-content-text {
        margin-right: 1.875rem;
        margin-bottom: 1.875rem;
        font-weight: lighter;
        font-size: 1.1875rem;
        @media (max-width: 29rem) { font-size: $mobile-font-size; }
    }

    .x-button {
        color: rgb(255, 0, 0);
        font-size: 2.5rem;
        float: right;

        &:hover {
            color: rgb(200, 0, 0);
            cursor: pointer;
        }
    }

    &.box-window-closed {
        display: none;
    }
}

@media (max-width: 47.93rem) {
    .box-window {
        width: 100%;
        height: 100%;

        overflow: scroll;
    }
}

.box-window-foto-gallery {
    position: fixed;
    top: 50%;
    left: 50%;

    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);

    z-index: 17;

    width: 80%;
    max-width: 50rem;
    height: 80%;
    background-color: #fff;

    .box-window-content {
        margin: 1.875rem;
    }

    .box-window-heading-text {
        margin-bottom: 1.875rem;
        font-size: 1.5rem;
        @media (max-width: 29rem) { font-size: 1rem;}
        font-weight: normal;
        font-weight: lighter;
    }

    .box-window-content-text {
        margin-right: 1.875rem;
        margin-bottom: 1.875rem;
        font-weight: lighter;
        font-size: 1.1875rem;
        @media (max-width: 29rem) { font-size: $mobile-font-size; }
    }

    .x-button {
        color: rgb(255, 0, 0);
        font-size: 2.5rem;
        float: right;

        &:hover {
            color: rgb(200, 0, 0);
            cursor: pointer;
        }
    }

    .foto-gallery-flexbox {
        display: flex;
        justify-content: space-around;
        width: 100%;

        img {
            width: 34%;
            height: 9.375rem;
            margin: 0.125rem;

            &:hover {
                cursor: pointer;
            }
        }
    }

    .foto-gallery-flexbox-column-2 {
        display: flex;
        justify-content: space-around;
        margin-top: 0.125rem;
        width: 100%;

        img {
            width: 51.5%;
            height: 12.5rem;
            margin: 0.125rem;

            &:hover {
                cursor: pointer;
            }
        }
    }

    &.box-window-closed {
        display: none;
    }
}

.black-background-img {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 18;

    &.black-background-img-hide {
        display: none;
    }
}

.big-img {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);

    width: 80%;
    max-width: 62.5rem;
    height: 60%;
    max-height: 37.5rem;
    background-image: url("./img/Foto-gallery/foto-gallerie-bild-1.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border: 0.1875rem solid #fff;
    border-radius: 0.3125rem;
    z-index: 19;

    #picture-signature {
        display: inline-block;
        position: relative;
        top: 102%;
        color: #fff;
        margin: 0;

        &::selection {
            background-color: transparent;
        }
    }

    #right-next-button {
        position: absolute;
        color: #fff;
        right: 0;
        top: 45%;
        padding-right: 1.25rem;
        font-size: 1.875rem;

        &:hover {
            color: rgb(220, 220, 220);
            cursor: pointer;
        }
    }

    #left-next-button {
        position: absolute;
        color: #fff;
        float: left;
        top: 45%;
        padding-left: 1.25rem;
        font-size: 1.875rem;

        &:hover {
            color: rgb(220, 220, 220);
            cursor: pointer;
        }
    }

    #big-img-x-button {
        display: block;
        position: relative;
        margin-right: 0.65rem;
        top: 102%;
        color: #fff;
        font-size: 1.5625rem;
        float: right;
        padding: 0.65rem;

        &:hover {
            color: rgb(220, 220, 220);
            cursor: pointer;
        }
    }

    &.big-img-hide {
        display: none;
    }
}

@media (max-width: 47.93rem) {
    .box-window-foto-gallery {
        width: 100%;
        height: 100%;
    }
}

@media (max-width: 59.375rem) {
    .big-img {
        width: 80%;
        height: 40%;
    }
}

@media (max-height: 59.375rem) {
    .box-window-foto-gallery {
        overflow-y: scroll;
    }
}

@media (min-width: 93.75rem) {
    .box-window-foto-gallery {
        overflow-y: scroll;
    }

    .box-window-foto-gallery .foto-gallery-flexbox img {
        height: 12.5rem;
    }

    .box-window-foto-gallery .foto-gallery-flexbox-column-2 img {
        height: 15.625rem;
    }
}

@media (max-height: 37.5rem) {
    .box-window-foto-gallery .foto-gallery-flexbox img {
        height: 6.25rem;
    }

    .box-window-foto-gallery .foto-gallery-flexbox-column-2 img {
        height: 6.25rem;
    }
}

@media (max-width: 31.25rem) {
    .box-window-foto-gallery {
        overflow-y: scroll;
    }

    .foto-gallery-flexbox, .foto-gallery-flexbox-column-2 {
        flex-direction: column;
        align-items: center;
    }

    .box-window-foto-gallery .foto-gallery-flexbox img {
        width: 90%;
        height: 10rem;
    }

    .box-window-foto-gallery .foto-gallery-flexbox-column-2 img {
        width: 90%;
        height: 10rem;
    }
}

.upButton-background {
    position: fixed;
    width: 1.875rem;
    height: 1.875rem;
    background-color: rgb(255, 0, 0);
    border-radius: 50%;
    text-align: center;
    float: right;
    right: 0.625rem;
    bottom: 0.625rem;

    i {
        color: #fff;
        font-size: 1.25rem;
        margin-top: 0.3125rem;
    }

    &:hover {
        background-color: rgba(255, 0, 0, 0.75);
        cursor: pointer;
    }

    &.upButton-hide {
        display: none;
    }
}