/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------- CSS for Desktop Devices --------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media only screen and (min-width: 769px) {
    
    * {
        padding: 0px;
        margin: 0px;
        box-sizing: border-box;
        font-family: 'Quicksand', sans-serif;
        font-size: 1.0em;
    }

    body {
        display: flex;
        flex-direction: column;
        font-family: 'Quicksand', sans-serif;
        font-size: 14px;
        position: relative;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .general-page-wrapper {
        background-color: #333333;
        overflow: auto;
        /* height: 100vh; */
    }

    /* ********************************************************** */
    /* ************************* Header ************************* */
    /* ********************************************************** */

    .header {
        display: flex;
        flex-direction: column;
        width: 100%;
        background: #ffffff;
        position: fixed !important;
        top: 0px !important;
        z-index: 9999;
    }

    .gb-logo-container {
        height: 100px;
        background-color: #e9f2e7;
    }
    
    .gb-logo {
        height: 80px;
        margin-top: 10px;
        margin-bottom: 10px;
        background-image: url(/images/green-earth-transparent-logo_1024px.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .header-navigation-container {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 50px;
        background-color: purple;
    }

    /* ********************************************************** */
    /* ********************* Search-Button ********************** */

            .header-page-search-input-container {
                display: flex;
                width: 25%;
                min-width: 300px;
                max-width: 480px;
                height: 40px;
                border: 0.5px solid black;
                border-radius: 25px;
                padding-left: 20px;
                padding-right: 0px;
                justify-content: space-between;
                background-color: white;
            }

                    .header-page-search-input {
                        border-top: none;
                        border-left: none;
                        border-right: 0.75px solid lightslategray;
                        border-bottom: none;
                        width: 50%;
                        padding-right: 10px;
                    }

                    .header-page-search-input:focus {
                        outline: none;
                    }

                    .header-page-search-input::placeholder {
                        color: lightslategray;
                    }

                    .header-page-search-select {
                        appearance: none;
                        -moz-appearance: none;
                        -webkit-appearance: none;
                        width: 50%;
                        border: none;
                        border-radius: 0px;
                        padding: 0px 0px 0px 10px;
                        color: lightslategray;
                    }

                    .header-page-search-select:hover {
                        cursor: pointer;
                    }

                    .header-page-search-select:focus {
                        outline: none;
                    }

                    .header-page-search-button {
                        border: none;
                        min-width: 60px;
                        max-width: 60px;
                        min-height: -webkit-fill-availabe;
                        max-height: -webkit-fill-availabe;
                        background-color: white;
                        background-image: url(/images/tiles/tile_320_magnifier_transparent.png);
                        background-size: contain;
                        background-position: center;
                        background-repeat: no-repeat;
                        border-top-right-radius: 25px;
                        border-bottom-right-radius: 25px;
                    }

                    .header-page-search-button:hover {
                        cursor: pointer;
                        background-color: lightgray;
                    }

    /* ********************************************************** */
    /* ********************** Login-Button ********************** */

            .header-navigation-login-container {
                align-self: center;
                border: 1px solid purple;
                margin-left: 20px;
            }
                        
            .header-navigation-login-container:hover {
                background-color: purple;
            }

                    .header-navigation-login-button-container {
                        background-color: purple;
                        /* width: 24px; */
                        border-top: 1px solid purple;
                        border-right: 1px solid purple;
                        border-bottom: 1px solid purple;
                        border-left: none;
                        border-radius: 3px;
                    }
                
                    .header-navigation-login-button-container:hover {
                        cursor: pointer;
                        background-color: purple;
                    }

                            .header-navigation-login-button {
                                margin-top: 3px;
                                font-weight: 100;
                                font-size: 1.2em;
                                color: white !important;
                            }

    /* ********************************************************** */
    /* ********************** Menu-Button *********************** */

            .header-navigation-menu-container {
                align-self: flex-end;
                margin-left: 20px;
                margin-right: 20px;
            }

                    .header-navigation-menu-button-container {
                        width: 28px;
                        height: 28px;
                    }

                            .header-navigation-menu-button {
                                display: flex;
                                align-self: center;
                                background-image: url(/images/burgermenue_128_white.png);
                                background-size: contain;
                                background-repeat: no-repeat;
                            }

    /* ********************************************************** */
    /* ************************** Body ************************** */
    /* ********************************************************** */

    .page-content-wrapper {
        background-color: #ffffff;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        margin-top: 150px;
        width: 100%;
        min-height: calc(100vh - 150px - 256px);
        padding-bottom: 20px;
    }

        .header-navigation-search-container-mobile {
            display: none;
            visibility: hidden;
        }

        .advertising {
            width: 7%;
            /* border: 1px dotted red; */
        }

        .page-content-container {
            margin-top: 20px;
            width: 70%;
            max-width: 800px;
            /* border: 1px dotted blue; */
        }

        .dashboard-container {
            width: 70%;
        }

        .title {
            margin: 10px 0;
            border-left: 5px solid green;
            padding-left: 5px;
            color: black;
            font-size: 25px;
        }

        .profile-picture-address-container-100 {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            /*height: 140px;*/
        }

            .profile-picture-100 {
                display: flex;
                width: 100%;
                max-height: 140px;
            }

            .profile-address-container-100 {
                padding-top: 15px;
                padding-bottom: 15px;
                width: 100%;
                text-align: center;
            }

        .profile-picture-address-container-30 {
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 100%;
            height: 280px;
            border-bottom: 0.5px solid black;
        }

        .profile-picture-address-container-30-without-border {
            border-bottom: none;
        }

            .profile-picture-30 {
                width: 200px;
                min-width: 200px;
                height: 200px;
            }

            .profile-address-container-30 {
                width: 100%;
                text-align: center;
            }

                .picture {
                    width: 100%;
                    height: 100%;
                    background-color: whitesmoke;
                    object-fit: cover;
                    object-position: 50%;
                    border-top-left-radius: 200px;
                    border-top-right-radius: 200px;
                    border-bottom-right-radius: 200px;
                    border-bottom-left-radius: 200px;
                }

                .companylogo {
                    width: 100%;
                    min-width: 100%; /* Use only, if picture is shown in full width */
                    /*height: 100%;*/
                    object-fit: cover; /* Use only, if picture is shown in full width. Otherwise use contain */
                    object-position: 50%;
                }

    /* ********************************************************** */
    /* ******************** Address-Styling ********************* */

    .address-headline{
        margin: 5px 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .address-paragraph{
        margin: 0px 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ********************************************************** */
    /* ********************* Table-Styling ********************** */

    .accessibility-times{
        display: flex;
        justify-content: center;
        padding-top: 15px;
        padding-bottom: 15px;
        border-top: 1px solid black;
        border-bottom: 1px solid black;
    }

    .accessibility-table{
        padding: 10px;
        background-color: #f0f8ff;
        width: 100%;
        max-width: 480px;
        table-layout: fixed;
    }

    th{
        text-align: left;
    }

    td{
        text-align: center;
    }

    /* ********************************************************** */
    /* ****************** Announcement-Styling ****************** */

    .announcement h1{
        text-align: center;
        padding: 15px;
        font-family: cursive;
    }

    .announcement p{
        text-align: center;
        font-family: cursive;
    }

    .announcement{
        margin: 30px auto;
        width: 212px;
        height: 159px;
        background-color: #fff280;
        position: relative;
        box-shadow: -18px 20px 18px -18px rgba(0,0,0,0.75);
        rotate: -6deg;
    }

    .announcement::before{
        content: '';
        position: absolute;
        top: 0px;
        right: 0px;
        border-width: 0px 30px 30px 0px;
        border-color: #efd601 #f2f2f2;
        border-style: solid;
        box-shadow: -3px 3px 2px 0px rgba(0,0,0,0.75);
    }

    /* ********************************************************** */
    /* ******************* Description-Styling ****************** */

    .description{
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 1px solid darkgray;
        border-radius: 15px;
        margin-top: 60px;
    }

    .description-without-border{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .description-headline{
        padding-top: 10px;
        padding-right: 10px;
        padding-left: 10px;
        width: 480px;
        text-align: center;
    }

    .description-paragraph{
        padding: 10px 0px;
        width: 480px;
        line-height: 1.3;
        text-align: justify;
        text-justify: newspaper;
    }

    /* ********************************************************** */
    /* ********************* Media and posts ******************** */
    
    .media-and-posts h1{
        text-align: center;
        margin-top: 20px;
    }

    .media-and-posts-inner-container{
        display: flex;
        flex-direction: row;
        justify-items: center;
        justify-content: space-evenly;
        flex-wrap: wrap;
        width: 100%;
    }

    .media-and-posts-item-container{
        position: relative;
        margin-top: 10px;
        margin-right: 5px;
        margin-left: 5px;
        width: 480px;
        /*height: 360px;*/
        min-width: 480px;
        max-width: 480px;
    }

    .media-and-posts-item{
        width: 480px;
        /*height: 240px;*/
        aspect-ratio: 16/9;
        object-fit: cover;
        object-position: center;
    }

    .postpage-item{
        position: relative;
        width: 800px;
        max-width: 100%;
        /*aspect-ratio: 16/9;*/
        /*object-fit: cover;*/
        /*object-position: center;*/
    }

    .media-and-posts-information{
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
        width: 100%; /* 360px */
        line-height: 1.4;
    }
    
    .media-and-posts-post-title{
        margin: 0px;
        font-size: large;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis !important;
    }

    .media-and-posts-paragraph{
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 10px;
        margin-left: 0px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: large;
        line-height: 1.4;
    }

    .post-info{
        position: absolute;
        top: 0px;
        width: 100%;
        padding: 5px;
        background-color: orange;
        font-family: 'Font Awesome 5 Free';
        line-height: 1.5;
    }

    .post-title{
        color: black;
        text-decoration: none;
        font-size: large;
    }

    .post-title:visited{
        color: black;
        text-decoration: none;
        font-size: large;
    }

    .post-title-headline{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis !important;
    }

    .media-and-posts-example-post-container{
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
        aspect-ratio: 16/9 !important;
        position: absolute;
    }

        .media-and-posts-example-post-button-container{
            display: flex;
            justify-content: center;
        }

            .example-post-button{
                display: flex;
                justify-content: center;
                width: 45%;
                background-color: aliceblue;
                cursor: pointer;
                transition: 1s all ease;
                border-top: 1px solid white;
                border-left: 1px solid white;
                border-bottom: 1px solid purple;
                border-right: 1px solid white;
                border-bottom-left-radius: 25px;
                border-top-right-radius: 25px;
            }

            .example-post-button:hover {
                border-top: 1px solid purple;
                border-right: 1px solid purple;
                border-left: 1px solid purple;
            }

    /* ********************************************************** */
    /* ************************ Postpage ************************ */

    .postpage-content{
        position: relative;
        max-width: 800px;
        margin: 0 20px;
    }

    .postpage-content h1{
        text-align: center;
        margin: 20px auto;
        font-size: x-large;
    }

    .postpage-content p{
        margin: 20px auto;
        line-height: 2.0;
    }

    /* ********************************************************** */
    /* ************************ Comments ************************ */

    .comment-area{
        max-width: 800px;
        margin: 20px;
    }

    .commit-comment-container {
        display: flex;
        align-self: flex-end;
    }

            .commit-comment-input {
                appearance: none;
                -moz-appearance: none;
                -webkit-appearance: none;
                padding-top: 0px;
                padding-left: 5px;
                padding-right: 5px;
                padding-bottom: 0px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-bottom: 3px;
                min-height: 40px;
                max-height: 40px;
                width: calc(100% - 30px);
                border-top: 2px solid #f0f0f0;
                border-right: none;
                border-bottom: 2px solid #f0f0f0;
                border-left: 2px solid #f0f0f0;
                border-top-left-radius: 4px;
                border-bottom-left-radius: 4px;
                border-top-right-radius: 0px;
                border-bottom-right-radius: 0px;
                font-size: 0.70rem;
            }

            .commit-comment-input:focus {
                outline: none;
            }

            .commit-comment-input::placeholder {
                color: lightslategray;
            }

            .commit-comment-button-container {
                background-color: white;
                width: 30px;
                min-height: 40px;
                max-height: 40px;
                border-top: 2px solid #f0f0f0;
                border-right: 2px solid #f0f0f0;
                border-bottom: 2px solid #f0f0f0;
                border-left: none;
                border-top-right-radius: 4px;
                border-bottom-right-radius: 4px;
            }

            .commit-comment-button-container:hover {
                cursor: pointer;
                background-color: lightgray;
            }

                    .commit-comment-button {
                        background-image: url(/images/tiles/tile_320_pen_transparent.png);
                        background-size: contain;
                        background-position: center;
                        background-repeat: no-repeat;
                    }

            .comment-delete-button-container {
                position: absolute;
                left: -45px;
                
            }

                    .comment-delete-button {
                        appearance: none;
                        -moz-appearance: none;
                        -webkit-appearance: none;
                        width: 36px;
                        height: 36px;
                        background-image: url(/images/tiles/tile_320_waste_bin_transparent.png);
                        background-size: contain;
                        background-position: center;
                        background-repeat: no-repeat;
                        border: 0px solid white;
                        background-color: white;
                    }

                    .comment-delete-button:hover {
                        cursor: pointer;
                        background-color: lightgray;
                    }

            .comment-container {
                position: relative;
                margin-top: 20px;
                margin-right: 0px;
                margin-bottom: 20px;
                margin-left: 20px;
            }

            .comment-container p {
                width: calc(100% - 30px);
                margin-top: 8px;
                margin-right: 0px;
                margin-bottom: 0px;
                margin-left: 0px;
                line-height: 1.4;
            }

            .answer-container {
                position: relative;
                margin: 20px 0px 20px 60px;
            }
    
            .answer-container p {
                margin-top: 8px;
                margin-right: 0px;
                margin-bottom: 0px;
                margin-left: 0px;
                line-height: 1.4;
            }

            .toggle-answer-field {
                position: absolute;
                top: 0px;
                right: 0px;
                width: 30px !important;
                height: 30px;
                text-align: center;
                padding: 1%;
            }

            .toggle-answer-field:hover {
                cursor: pointer;
            }

    .commit-answer-container {
        margin-top: 8px;
    }

    /* ********************************************************** */
    /* ************************* Footer ************************* */
    /* ********************************************************** */

    .footer {
        font-size: 0.70rem;
        padding: 20px 30px 20px 30px;
        line-height: 1.6;
        height: 256px;
    }

    .footer-text {
        color: #aaaaaa;
        padding: 3px 15px;
        display: block;
    }

    .footer-horizontal-rule {
        height: 1px;
        border: none;
        background: #444444;
    }

    .footer-sections-container {
        display: flex;
        flex-wrap: wrap;
    }

    /* ********************************************************** */
    /* ********************* Footer-Section ********************* */

            .footer-section-container {
                box-sizing: border-box;
                width: 25%;
                padding: 15px 0 0 0;
                flex-shrink: 0;
            }

                    .footer-section-container-title {
                        color: #aaaaaa;
                        padding: 3px 15px;
                        display: block;
                        font-weight: bold;
                        margin-bottom: 10px;
                    }

                    .footer-language-selectbox {
                        -moz-appearance: none; 
                        -webkit-appearance: none; 
                        appearance: none;
                        padding-left: 5px;
                        padding-top: 5px;
                        padding-bottom: 4px;
                        margin-left: 15px;
                        min-width: 150px !important;
                        border-radius: 3px;
                    }

                    .footer-link {
                        color: #aaaaaa;
                        padding: 3px 15px;
                        display: block;
                        text-decoration: none;
                    }

                    .footer-link:hover {
                        color: #cccccc;
                        background-color: rgba(255, 255,255, 0.25);
                    }

                    .footer-button {
                        -moz-appearance: none;
                        -webkit-appearance: none;
                        appearance: none;
                        width: 100%;
                        height: 23px;
                        padding: 3px 15px;
                        border: none;
                        outline: none;
                        color: #aaaaaa;
                        background-color: #333333;
                        text-align: left;
                    }

                    .footer-button:hover {
                        color: #cccccc;
                        background-color: rgba(255, 255,255, 0.25);
                        cursor: pointer;
                    }

    /* ********************************************************** */
    /* ******************* Social-Media-Links ******************* */

                    .footer-section-socialmedia-container {
                        box-sizing: border-box;
                        display: flex;
                        flex-direction: row;
                        flex-wrap: wrap;
                        width: 100%;
                        flex-shrink: 0;
                    }

                            .footer-section-socialmedia-inner-container {
                                box-sizing: border-box;
                                display: flex;
                                flex-direction: row;
                                min-width: 144px;
                            }

                                    .footer-section-socialmedia-item-container{
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        width: 30%;
                                        min-width: 72px;
                                        min-height: 72px;
                                        height: 100%;
                                        border: 1px solid #333333;
                                    }
                        
                                    .footer-section-socialmedia-item-container:hover{
                                        cursor: pointer;
                                        border: 1px solid #aaaaaa;
                                    }

                                            .footer-section-socialmedia-item {
                                                align-self: center;
                                                width: 36px;
                                            }

    /* ********************************************************** */
    /* ********************** Link-Styling ********************** */

    a.general:link {
        display: block;
        border: none;
        width: 100%;
        height: 100%;
        /*background-color: none;*/
        color: lightslategray;
        text-align: center;
        text-decoration: none;
        text-decoration-line: none;
    }

    a.general:visited {
        color: lightslategray;
    }

    a.general:hover {
        color: black;
    }

    .text-link {
        color: darkgray;
        text-decoration: none;
    }

    .text-link:hover {
        color: black;
        text-decoration: none;
    }

    .text-link:visited {
        color: darkgray;
        text-decoration: none;
    }

    .form-control-border-inactive {
		border: 2px solid #f0f0f0;
	}

	.form-control-border-active {
		border: 2px solid #777777 !important;
	}

	.form-control-border-success {
		border-color: green !important;
	}

	.form-control-border-error {
		border-color: red !important;
	}

    .form-control-border-empty {
		border-color: orange !important;
	}

    .form-control-border-inactive-comment {
		border-top: 2px solid #f0f0f0;
        border-left: 2px solid #f0f0f0;
        border-bottom: 2 px solid #f0f0f0;
	}

	.form-control-border-active-comment {
		border-top: 2px solid #777777 !important;
        border-left: 2px solid #777777 !important;
        border-bottom: 2px solid #777777 !important;
	}

	.form-control-border-success-comment {
		border-top-color: green !important;
        border-left-color: green !important;
        border-bottom-color: green !important;
	}

	.form-control-border-error-comment {
		border-top-color: red !important;
        border-left-color: red !important;
        border-bottom-color: red !important;
	}

    .form-control-border-empty-comment {
		border-top-color: orange !important;
        border-left-color: orange !important;
        border-bottom-color: orange !important;
	}

    .form-control-border-inactive-button {
		border-top: 2px solid #f0f0f0;
        border-right: 2px solid #f0f0f0;
        border-bottom: 2 px solid #f0f0f0;
	}

	.form-control-border-active-button {
		border-top: 2px solid #777777 !important;
        border-right: 2px solid #777777 !important;
        border-bottom: 2px solid #777777 !important;
	}

	.form-control-border-success-button {
		border-top-color: green !important;
        border-right-color: green !important;
        border-bottom-color: green !important;
	}

	.form-control-border-error-button {
		border-top-color: red !important;
        border-right-color: red !important;
        border-bottom-color: red !important;
	}

    .form-control-border-empty-button {
		border-top-color: orange !important;
        border-right-color: orange !important;
        border-bottom-color: orange !important;
	}

    .form-control-background-inactive {
		background-color: #f0f0f0;
	}

	.form-control-background-active {
		background-color: lightgray !important;
	}

	.form-control-background-success {
		background-color: lightgreen !important;
	}

	.form-control-background-error {
		background-color: lightcoral !important;
	}
}

@media only screen and (min-width: 1400px) {
    
/* ********************************************************** */
/* ********************* Media and posts ******************** */

    .media-and-posts-inner-container{
        display: flex;
        flex-direction: row;
        justify-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;
    }

    .media-and-posts-item-container{
        position: relative;
        margin-top: 10px;
        margin-right: 0px;
        margin-left: 0px;
        width: calc(50% - 5px);
        /*height: 360px;*/
        min-width: calc(50% - 5px);
        max-width: calc(50% - 5px);
    }

    .media-and-posts-item{
        width: 100%;
        /*height: 240px;*/
        aspect-ratio: 16/9;
        object-fit: cover;
        object-position: center;
    }

    .postpage-item{
        min-width: 800px;
        max-width: 800px;
        /*aspect-ratio: 16/9;*/
        /*object-fit: cover;*/
        /*object-position: center;*/
    }
}

@media only screen and (min-width: 2100px) {

    /* ********************************************************** */
    /* ********************* Table-Styling ********************** */

    .accessibility-table{
        padding: 10px;
        background-color: #f0f8ff;
        width: 100%;
        max-width: 33%;
        table-layout: fixed;
    }

    /* ********************************************************** */
    /* ******************* Description-Styling ****************** */

    .description-headline{
        padding-top: 10px;
        padding-right: 10px;
        padding-left: 10px;
        width: 33%;
        text-align: center;
    }

    .description-paragraph{
        padding: 10px 0px;
        width: 33%;
        line-height: 1.3;
        text-align: justify;
        text-justify: newspaper;
    }
    
    /* ********************************************************** */
    /* ********************* Media and posts ******************** */
    
        .media-and-posts-inner-container{
            display: flex;
            flex-direction: row;
            justify-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            width: 100%;
        }
    
        .media-and-posts-item-container{
            position: relative;
            margin-top: 10px;
            margin-right: 0px;
            margin-left: 0px;
            width: 33%;
            /*height: 360px;*/
            min-width: 33%;
            max-width: 33%;
        }

        .media-and-posts-item{
            width: 100%;
            /*height: 240px;*/
            aspect-ratio: 16/9;
            object-fit: cover;
            object-position: center;
        }

        .postpage-item{
            min-width: 800px;
            max-width: 800px;
            /*aspect-ratio: 16/9;*/
            /*object-fit: cover;*/
            /*object-position: center;*/
        }
    }

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------- CSS for Mobile Devices ---------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 768px) and (orientation: portrait) {
    
    body {
        display: flex;
        flex-direction: column;
        font-family: 'Quicksand', sans-serif;
        font-size: 14px;
        position: relative;
        /* min-height: calc(100vh - 145px); */
        min-width: 100vw;
        max-width: 100vw;
        overflow-x: hidden;
        border: none !important;
        margin: 0px !important;
        -webkit-text-size-adjust: none !important;
    }

    .general-page-wrapper {
        background-color: #ffffff;
        overflow: auto;
        /* height: 100vh; */
    }
    
    /* ********************************************************** */
    /* ************************ Header ************************** */
    /* ********************************************************** */
    
    .header {
        display: flex;
        flex-direction: row;
        align-items: center;
        border-bottom: 1px solid blue;
        background-color: #e9f2e7;
        min-width: 100vw;
        position: fixed !important;
        top: 0px !important;
        z-index: 9999;
    }

    .gb-logo-container {
        display: flex;
        justify-content: end;
        width: calc(100vw - 52px);
        min-height: 70px;
        max-height: 70px;
    }
    
    .gb-logo {
        display: flex;
        width: calc(100% - 52px);
        min-height: 50px;
        max-height: 50px;
        margin-top: 10px;
        background-image: url(/images/green-earth-transparent-logo_320px.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .header-navigation-container {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        /* margin-top: 10px;
        width: 34px;
        min-height: 32px;
        max-height: 32px;
        border: 5px solid green; */
    }

    a.general:link {
        display: block;
        border: none;
        width: 100%;
        height: 100%;
        /*background-color: none;*/
        color: lightslategray;
        text-align: center;
        text-decoration: none;
        text-decoration-line: none;
    }

    a.general:visited {
        color: lightslategray;
    }

    /* ********************************************************** */
    /* ********************* Search-Button ********************** */

    .header-page-search-input-container {
        display: none;
    }

    /* ********************************************************** */
    /* ********************** Login-Button ********************** */

    .header-navigation-login-container {
        display: none;
    }

    /* ********************************************************** */
    /* ********************** Menu-Button *********************** */

    .header-navigation-menu-container {
        align-self: flex-end;
        margin-right: 20px;
    }

            .header-navigation-menu-button-container {
                width: 32px;
                height: 32px;

            }

                    .header-navigation-menu-button {
                        background-image: url(/images/burgermenue_128_black.png);
                        background-size: contain;
                        background-repeat: no-repeat;
                        background-position: bottom;
                    }

    /* ********************************************************** */
    /* ************************** Body ************************** */
    /* ********************************************************** */

    .header-navigation-search-container-mobile {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-top: 0px;
        min-width: calc(100% - 40px);
        max-width: 100%;
        height: 36px;
        border-bottom: 1px solid lightslategray;
    }

            .header-navigation-search-input-mobile {
                padding-top: 5px;
                padding-right: 10px;
                padding-bottom: 0px !important;
                padding-left: 5px;
                height: 31px;
                width: 50%;
                border-top: none;
                border-right: 1px solid lightslategray;
                border-bottom: none;
                border-left: none;
                border-radius: 0px;
                font-size: 0.85rem;
                background: transparent;
            }

            .header-navigation-search-input-mobile:focus {
                outline: none;
            }
        
            .header-navigation-search-input-mobile::placeholder {
                color: lightslategray;
            }

            .header-navigation-search-select {
                appearance: none;
                -moz-appearance: none;
                -webkit-appearance: none;
                width: 50%;
                border: none;
                border-radius: 0px;
                margin: 0px;
                padding: 5px 10px 0px 10px;
                color: lightslategray;
                font-size: 0.85rem;
                background-color: white;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis !important;
            }

            .header-navigation-search-select:hover {
                cursor: pointer;
            }

            .header-navigation-search-select:focus {
                outline: none;
            }

            .header-navigation-search-button-container-mobile {
                background-color: white;
                width: 36px;
                height: 36px;
            }
            
            .header-navigation-search-button-mobile {
                width: 36px;
                height: 36px;
                background-image: url(/images/tiles/tile_320_magnifier_transparent.png);
                background-size: cover;
                background-position: right;
                background-repeat: no-repeat;
                background-color: transparent;
                border: none;
                outline: none;
                box-shadow: none;
                padding: 0px;
            }

            .header-navigation-search-button-mobile:hover {
                cursor: pointer;
                background-color: lightgray;
            }
            
    .page-content-wrapper {
        display: flex;
        flex-direction: column;
        margin-left: 20px;
        padding-top: 71px;
        margin-right: 20px;
        padding-bottom: 20px;
        width: calc(100% - 40px);
        min-height: calc(100svh - 91px);
    }

    .advertising {
        display: none;
        visibility: hidden;
    }

    .page-content-container {
        margin-top: 20px;
        width: 100%;
    }

    .title {
        margin: 10px 0;
        border-left: 5px solid green;
        padding-left: 5px;
        color: black;
        font-size: 25px;
    }

    .paragraph-in-form {
        text-align: center;
        display: block;
    }

    .profile-picture-address-container-100 {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        /*height: 140px;*/
    }

        .profile-picture-100 {
            display: flex;
            width: 100%;
            max-height: 140px;
        }

        .profile-address-container-100 {
            padding-top: 15px;
            padding-bottom: 15px;
            width: 100%;
            text-align: center;
        }

    .profile-picture-address-container-30 {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        height: 140px;
    }

        .profile-picture-30 {
            width: 100px;
            min-width: 100px !important;
            height: 100px;
        }

        .profile-address-container-30 {
            width: 100%;
            text-align: center;
        }

            .picture {
                width: 100%;
                height: 100%;
                background-color: whitesmoke;
                object-fit: cover;
                object-position: 50%;
                border-top-left-radius: 200px;
                border-top-right-radius: 200px;
                border-bottom-right-radius: 200px;
                border-bottom-left-radius: 200px;
            }

            .companylogo {
                width: 100%;
                min-width: 100%; /* Use only, if picture is shown in full width */
                /*height: 100%;*/
                object-fit: cover; /* Use only, if picture is shown in full width. Otherwise use contain */
                object-position: 50%;
            }

    /* ********************************************************** */
    /* ******************** Address-Styling ********************* */

    .address-headline{
        margin: 5px 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .address-paragraph{
        margin: 0px 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ********************************************************** */
    /* ********************* Table-Styling ********************** */

    .accessibility-times{
        padding-top: 15px;
        padding-bottom: 15px;
        border-top: 1px solid black;
        border-bottom: 1px solid black;
    }

    .accessibility-table{
        width: 100%;
        table-layout: fixed;
    }

    th{
        text-align: left;
    }

    td{
        text-align: center;
    }

    /* ********************************************************** */
    /* ****************** Announcement-Styling ****************** */

    .announcement h1{
        text-align: center;
        padding-top: 15px;
        font-family: cursive;
        margin-bottom: 0px;
    }

    .announcement p{
        text-align: center;
        font-family: cursive;
        margin-top: 0px;
    }

    .announcement{
        margin: 30px auto;
        width: 212px;
        height: 159px;
        background-color: #fff280;
        position: relative;
        box-shadow: -18px 20px 18px -18px rgba(0,0,0,0.75);
        rotate: -6deg;
    }

    .announcement::before{
        content: '';
        position: absolute;
        top: 0px;
        right: 0px;
        border-width: 0px 30px 30px 0px;
        border-color: #efd601 #f2f2f2;
        border-style: solid;
        box-shadow: -3px 3px 2px 0px rgba(0,0,0,0.75);
    }

    /* ********************************************************** */
    /* ******************* Description-Styling ****************** */

    .description{
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 1px solid darkgray;
        border-radius: 15px;
        padding-top: 10px;
        margin-top: 60px;
    }

    .description-without-border{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 15px 0px;
    }

    .description-headline{
        margin: 0px;
    }

    .description-paragraph{
        padding: 10px;
        margin: 0px;
        line-height: 1.2;
        text-align: justify;
        text-justify: newspaper;
    }

    /* ********************************************************** */
    /* ********************* Media and posts ******************** */

    .media-and-posts h1{
        text-align: center;
        margin-top: 20px;
    }

    .media-and-posts-inner-container{
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .media-and-posts-item-container{
        position: relative;
        margin-top: 10px;
        width: 100%;
    }

    .media-and-posts-item{
        width: 100%;
        /*height: 240px;*/
        aspect-ratio: 16/9;
        object-fit: cover;
        object-position: center;
    }

    .postpage-item{
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
        object-position: center;
    }

    .media-and-posts-information{
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
        width: 100%; /* 360px */
        line-height: 1.4;
    }
    
    .media-and-posts-post-title{
        margin: 0px;
        font-size: large;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis !important;
    }

    .media-and-posts-paragraph{
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 10px;
        margin-left: 0px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.4;
    }

    .post-info{
        position: absolute;
        top: 0px;
        left: 0px;
        width: -webkit-fill-available;
        margin: 0px;
        padding: 5px;
        background-color: orange;
        font-family: 'Font Awesome 5 Free';
        line-height: 1.5;
    }

    .post-title{
        color: black;
        text-decoration: none;
        font-size: large;
    }

    .post-title:visited{
        color: black;
        text-decoration: none;
        font-size: large;
    }

    .post-title-headline{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis !important;
    }

    .media-and-posts-example-post-container{
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
        aspect-ratio: 16/9 !important;
        position: absolute;
    }

        .media-and-posts-example-post-button-container{
            display: flex;
            justify-content: center;
        }

            .example-post-button{
                display: flex;
                justify-content: center;
                width: 45%;
                background-color: aliceblue;
                cursor: pointer;
                transition: 1s all ease;
                border-top: 1px solid white;
                border-left: 1px solid white;
                border-bottom: 1px solid purple;
                border-right: 1px solid white;
                border-bottom-left-radius: 25px;
                border-top-right-radius: 25px;
            }

            .example-post-button:hover {
                border-top: 1px solid purple;
                border-right: 1px solid purple;
                border-left: 1px solid purple;
            }

    /* ********************************************************** */
    /* ************************ Postpage ************************ */

    .postpage-content{
        max-width: 800px;
    }

    .postpage-content h1{
        text-align: center;
        margin: 20px auto;
        font-size: x-large;
    }

    .postpage-content p{
        margin: 20px auto;
        line-height: 2.0;
    }

    /* ********************************************************** */
    /* ************************ Comments ************************ */

    .comment-area{
        max-width: 800px;
        margin: 20px auto;
    }

    .commit-comment-container {
        display: flex;
        align-self: flex-end;
    }

        .commit-comment-input {
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            padding-top: 1px;
            padding-left: 5px;
            padding-right: 5px;
            padding-bottom: 1px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 3px;
            min-height: 34px;
            max-height: 34px;
            width: calc(100% - 30px);
            border-top: 2px solid #f0f0f0;
            border-right: none;
            border-bottom: 2px solid #f0f0f0;
            border-left: 2px solid #f0f0f0;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
            font-size: 0.70rem;
        }

        .commit-comment-input:focus {
            outline: none;
        }

        .commit-comment-input::placeholder {
            color: lightslategray;
        }

        .commit-comment-button-container {
            background-color: white;
            width: 30px;
            min-height: 40px;
            max-height: 40px;
            border-top: 2px solid #f0f0f0;
            border-right: 2px solid #f0f0f0;
            border-bottom: 2px solid #f0f0f0;
            border-left: none;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
        }

        .commit-comment-button-container:hover {
            cursor: pointer;
            background-color: lightgray;
        }

            .commit-comment-button {
                background-image: url(/images/tiles/tile_320_pen_transparent.png);
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;
            }

        .comment-delete-button-container {
            position: absolute;
            left: -45px;
            
        }

            .comment-delete-button {
                appearance: none;
                -moz-appearance: none;
                -webkit-appearance: none;
                width: 36px;
                height: 36px;
                background-image: url(/images/tiles/tile_320_waste_bin_transparent.png);
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;
                border: 0px solid white;
                background-color: white;
            }

            .comment-delete-button:hover {
                cursor: pointer;
                background-color: lightgray;
            }

        .comment-container {
            position: relative;
            margin: 20px 0px 20px 40px;
        }

        .comment-container p {
            width: calc(100% - 30px);
            margin-top: 8px;
            margin-right: 0px;
            margin-bottom: 0px;
            margin-left: 0px;
            line-height: 1.4;
        }

        .answer-container {
            position: relative;
            margin: 20px 0px 20px 60px;
        }

        .answer-container p {
            margin-top: 8px;
            margin-right: 0px;
            margin-bottom: 0px;
            margin-left: 0px;
            line-height: 1.4;
        }

        .toggle-answer-field {
            position: absolute;
            top: 0px;
            right: 0px;
            width: 30px !important;
            height: 30px;
            text-align: center;
            padding: 1%;
        }

        .toggle-answer-field:hover {
            cursor: pointer;
        }

    .commit-answer-container {
        margin-top: 8px;
    }

    /* ********************************************************** */
    /* ************************* Footer ************************* */
    /* ********************************************************** */

    .footer {
        font-size: 0.85rem;
        padding: 20px 0px;
        line-height: 1.6;
        background-color: #333333;
    }

    .footer-text {
        color: #aaaaaa;
        padding: 3px 15px;
        display: block;
    }

    .footer-horizontal-rule {
        height: 1px;
        border: none;
        background: #444444;
        padding: 0;
    }

    .footer-sections-container {
        display: flex;
        flex-wrap: wrap;
        padding: 0;
    }

    /* ********************************************************** */
    /* ********************* Footer-Section ********************* */

            .footer-section-container {
                box-sizing: border-box;
                width: 100%;
                padding: 15px 0;
                flex-shrink: 0;
            }

                    .footer-section-container-title {
                        color: #aaaaaa;
                        padding: 3px 15px;
                        display: block;
                        font-weight: bold;
                        margin-bottom: 10px;
                    }

                    .footer-language-selectbox {
                        -moz-appearance: none; 
                        -webkit-appearance: none; 
                        appearance: none;
                        background-color: white;
                        color: black;
                        font-size: 0.85rem;
                        padding-left: 3px;
                        padding-top: 5px;
                        padding-bottom: 4px;
                        margin-left: 15px;
                        min-width: 150px !important;
                        position: relative;
                        border-radius: 3px;
                    }

                    .footer-link {
                        color: #aaaaaa;
                        padding: 3px 15px;
                        display: block;
                        text-decoration: none;
                    }

                    .footer-link:hover {
                        color: #cccccc;
                        background-color: rgba(255, 255,255, 0.25);
                    }

                    .footer-button {
                        -moz-appearance: none;
                        -webkit-appearance: none;
                        appearance: none;
                        width: 100%;
                        height: 27px;
                        padding: 3px 15px;
                        border: none;
                        outline: none;
                        color: #aaaaaa;
                        background-color: #333333;
                        text-align: left;
                        font-size: 0.85rem;
                    }

                    .footer-button:hover {
                        color: #cccccc;
                        background-color: rgba(255, 255,255, 0.25);
                        cursor: pointer;
                    }

    /* ********************************************************** */
    /* ******************* Social-Media-Links ******************* */

                    .footer-section-socialmedia-container {
                        box-sizing: border-box;
                        display: flex;
                        flex-direction: row;
                        justify-content: center;
                        width: 70%;
                        max-width: 360px;
                        height: 72px;
                        flex-shrink: 0;
                    }

                            .footer-section-socialmedia-inner-container {
                                box-sizing: border-box;
                                display: flex;
                                flex-direction: row;
                                justify-content: center;
                                min-width: 50%;
                            }

                                    .footer-section-socialmedia-item-container{
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        width: 50%;
                                        height: 100%;
                                        border: 1px solid #333333;
                                    }
                        
                                    .footer-section-socialmedia-item-container:hover{
                                        cursor: pointer;
                                        border: 1px solid #aaaaaa;
                                    }

                                            .footer-section-socialmedia-item {
                                                align-self: center;
                                                width: 36px;
                                            }

    /* ********************************************************** */
    /* ********************** Link-Styling ********************** */

    a.general:link {
        display: block;
        border: none;
        width: 100%;
        height: 100%;
        /*background-color: none;*/
        color: lightslategray;
        text-align: center;
        text-decoration: none;
        text-decoration-line: none;
    }

    a.general:visited {
        color: lightslategray;
    }

    a.general:hover {
        color: black;
    }

    .text-link {
        color: darkgray;
        text-decoration: none;
    }

    .text-link:hover {
        color: black;
        text-decoration: none;
    }

    .text-link:visited {
        color: darkgray;
        text-decoration: none;
    }

    .form-control-border-inactive {
		border: 2px solid #f0f0f0;
	}

	.form-control-border-active {
		border: 2px solid #777777 !important;
	}

	.form-control-border-success {
		border-color: green !important;
	}

	.form-control-border-error {
		border-color: red !important;
	}

    .form-control-border-empty {
		border-color: orange !important;
	}

    .form-control-border-inactive-comment {
		border-top: 2px solid #f0f0f0;
        border-left: 2px solid #f0f0f0;
        border-bottom: 2 px solid #f0f0f0;
	}

	.form-control-border-active-comment {
		border-top: 2px solid #777777 !important;
        border-left: 2px solid #777777 !important;
        border-bottom: 2px solid #777777 !important;
	}

	.form-control-border-success-comment {
		border-top-color: green !important;
        border-left-color: green !important;
        border-bottom-color: green !important;
	}

	.form-control-border-error-comment {
		border-top-color: red !important;
        border-left-color: red !important;
        border-bottom-color: red !important;
	}

    .form-control-border-empty-comment {
		border-top-color: orange !important;
        border-left-color: orange !important;
        border-bottom-color: orange !important;
	}

    .form-control-border-inactive-button {
		border-top: 2px solid #f0f0f0;
        border-right: 2px solid #f0f0f0;
        border-bottom: 2 px solid #f0f0f0;
	}

	.form-control-border-active-button {
		border-top: 2px solid #777777 !important;
        border-right: 2px solid #777777 !important;
        border-bottom: 2px solid #777777 !important;
	}

	.form-control-border-success-button {
		border-top-color: green !important;
        border-right-color: green !important;
        border-bottom-color: green !important;
	}

	.form-control-border-error-button {
		border-top-color: red !important;
        border-right-color: red !important;
        border-bottom-color: red !important;
	}

    .form-control-border-empty-button {
		border-top-color: orange !important;
        border-right-color: orange !important;
        border-bottom-color: orange !important;
	}

    .form-control-background-inactive {
		background-color: #f0f0f0;
	}

	.form-control-background-active {
		background-color: lightgray !important;
	}

	.form-control-background-success {
		background-color: lightgreen !important;
	}

	.form-control-background-error {
		background-color: lightcoral !important;
	}
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------- CSS for Mobile Devices ---------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 768px) and (orientation: landscape) {

    body {
        display: flex;
        flex-direction: column;
        font-family: 'Quicksand', sans-serif;
        font-size: 14px;
        position: relative;
        /* min-height: calc(100vh - 145px); */
        min-width: 100vw;
        max-width: 100vw;
        overflow-x: hidden;
        border: none !important;
        margin: 0px !important;
        -webkit-text-size-adjust: none !important;
    }

    .general-page-wrapper {
        background-color: #ffffff;
        overflow: auto;
        /* height: 100vh; */
    }
    
    /* ********************************************************** */
    /* ************************ Header ************************** */
    /* ********************************************************** */
    
    .header {
        display: flex;
        flex-direction: row;
        align-items: center;
        border-bottom: 1px solid green;
        /*background-color: #e9f2e7;*/
        background: rgb(255,255,255);
        background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(233,242,231,1) 50%, rgba(255,255,255,1) 100%);
        min-width: 100vw;
    }
    
    .gb-logo-container {
        display: flex;
        justify-content: end;
        width: calc(100vw - 52px);
        min-height: 70px;
        max-height: 70px;
    }

    .gb-logo {
        display: flex;
        justify-content: center;
        width: calc(100% - 52px);
        min-height: 50px;
        max-height: 50px;
        margin-top: 10px;
        background-image: url(/images/green-earth-transparent-logo_640px.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .header-navigation-container {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        /* margin-top: 10px;
        width: 34px;
        min-height: 32px;
        max-height: 32px;
        border: 5px solid green; */
    }

    a.general:link {
        display: block;
        border: none;
        width: 100%;
        height: 100%;
        /*background-color: none;*/
        color: lightslategray;
        text-align: center;
        text-decoration: none;
        text-decoration-line: none;
    }

    a.general:visited {
        color: lightslategray;
    }

    /* ********************************************************** */
    /* ********************* Search-Button ********************** */

    .header-page-search-input-container {
        display: none;
    }

    /* ********************************************************** */
    /* ********************** Login-Button ********************** */

    .header-navigation-login-container {
        display: none;
    }

    /* ********************************************************** */
    /* ********************** Menu-Button *********************** */

    .header-navigation-menu-container {
        align-self: flex-end;
        /*margin-right: 20px;*/
    }

            .header-navigation-menu-button-container {
                width: 32px;
                height: 32px;

            }

                    .header-navigation-menu-button {
                        background-image: url(/images/burgermenue_128_black.png);
                        background-size: contain;
                        background-repeat: no-repeat;
                        background-position: bottom;
                    }

    /* ********************************************************** */
    /* ************************** Body ************************** */
    /* ********************************************************** */

    .header-navigation-search-container-mobile {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-top: 0px;
        min-width: calc(100% - 40px);
        max-width: 100%;
        height: 36px;
        border-bottom: 1px solid lightslategray;
    }

            .header-navigation-search-input-mobile {
                padding-top: 5px;
                padding-right: 10px;
                padding-bottom: 0px !important;
                padding-left: 5px;
                height: 31px;
                width:50%;
                border-top: none;
                border-right: 1px solid lightslategray;
                border-bottom: none;
                border-left: none;
                border-radius: 0px;
                font-size: 0.85rem;
                background: transparent;
            }

            .header-navigation-search-input-mobile:focus {
                outline: none;
            }
        
            .header-navigation-search-input-mobile::placeholder {
                color: lightslategray;
            }

            .header-navigation-search-select {
                appearance: none;
                -moz-appearance: none;
                -webkit-appearance: none;
                width: 50%;
                border: none;
                border-radius: 0px;
                margin: 0px;
                padding: 5px 10px 0px 10px;
                color: lightslategray;
                font-size: 0.85rem;
                background-color: white;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis !important;
            }

            .header-navigation-search-select:hover {
                cursor: pointer;
            }

            .header-navigation-search-select:focus {
                outline: none;
            }

            .header-navigation-search-button-container-mobile {
                background-color: white;
                width: 36px;
                height: 36px;
            }

            .header-navigation-search-button-mobile {
                width: 36px;
                height: 36px;
                background-image: url(/images/tiles/tile_320_magnifier_transparent.png);
                background-size: cover;
                background-position: right;
                background-repeat: no-repeat;
                background-color: transparent;
                border: none;
                outline: none;
                box-shadow: none;
                padding: 0px;
            }
            
            .header-navigation-search-button-mobile:hover {
                cursor: pointer;
                background-color: lightgray;
            }
            
    .page-content-wrapper {
        display: flex;
        flex-direction: column;
        margin-left: 20px;
        /*padding-top: calc(20px + 8vh);*/
        margin-right: 20px;
        padding-bottom: 20px;
        width: calc(100% - 40px);
        min-height: calc(100svh - 91px);
    }

    .advertising {
        display: none;
        visibility: hidden;
    }

    .page-content-container {
        margin-top: 20px;
        width: 100%;
    }

    .title {
        margin: 10px 0;
        border-left: 5px solid green;
        padding-left: 5px;
        color: black;
        font-size: 25px;
    }

    .paragraph-in-form {
        text-align: center;
        display: block;
    }

    .profile-picture-address-container-100 {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        /*height: 140px;*/
    }

        .profile-picture-100 {
            display: flex;
            width: 100%;
            max-height: 140px;
        }

        .profile-address-container-100 {
            padding-top: 15px;
            padding-bottom: 15px;
            width: 100%;
            text-align: center;
        }

    .profile-picture-address-container-30 {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        height: 140px;
    }

    .profile-picture-address-container-30-with-border {
        border-bottom: 0.5px solid black;
        margin-bottom: 10px;
    }

        .profile-picture-30 {
            width: 100px;
            min-width: 100px !important;
            height: 100px;
        }

        .profile-address-container-30 {
            width: 100%;
            text-align: center;
        }

            .picture {
                width: 100%;
                height: 100%;
                background-color: whitesmoke;
                object-fit: cover;
                object-position: 50%;
                border-top-left-radius: 200px;
                border-top-right-radius: 200px;
                border-bottom-right-radius: 200px;
                border-bottom-left-radius: 200px;
            }

            .companylogo {
                width: 100%;
                min-width: 100%; /* Use only, if picture is shown in full width */
                /*height: 100%;*/
                object-fit: cover; /* Use only, if picture is shown in full width. Otherwise use contain */
                object-position: 50%;
            }

    /* ********************************************************** */
    /* ******************** Address-Styling ********************* */

    .address-headline{
        margin: 5px 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .address-paragraph{
        margin: 0px 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ********************************************************** */
    /* ********************* Table-Styling ********************** */

    .accessibility-times{
        display: flex;
        justify-content: center;
        padding-top: 15px;
        padding-bottom: 15px;
        border-top: 1px solid black;
        border-bottom: 1px solid black;
    }

    .accessibility-table{
        padding: 10px;
        background-color: #f0f8ff;
        width: 100%;
        max-width: 480px;
        table-layout: fixed;
    }

    th{
        text-align: left;
    }

    td{
        text-align: center;
    }

    /* ********************************************************** */
    /* ****************** Announcement-Styling ****************** */

    .announcement h1{
        text-align: center;
        padding-top: 15px;
        font-family: cursive;
        margin-bottom: 0px;
    }

    .announcement p{
        text-align: center;
        font-family: cursive;
        margin-top: 0px;
    }

    .announcement{
        margin: 30px auto;
        width: 212px;
        height: 159px;
        background-color: #fff280;
        position: relative;
        box-shadow: -18px 20px 18px -18px rgba(0,0,0,0.75);
        rotate: -6deg;
    }

    .announcement::before{
        content: '';
        position: absolute;
        top: 0px;
        right: 0px;
        border-width: 0px 30px 30px 0px;
        border-color: #efd601 #f2f2f2;
        border-style: solid;
        box-shadow: -3px 3px 2px 0px rgba(0,0,0,0.75);
    }

    /* ********************************************************** */
    /* ******************* Description-Styling ****************** */

    .description{
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 1px solid darkgray;
        border-radius: 15px;
        padding: 10px;
        margin-top: 60px;
    }

    .description-without-border{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 15px 0px;
    }

    .description-headline{
        margin: 0px;
        width: 100%;
        max-width: 480px;
        text-align: center;
    }

    .description-paragraph{
        padding: 10px;
        margin: 0px;
        width: 100%;
        max-width: 480%;
        text-align: justify;
        text-justify: newspaper;
    }

    /* ********************************************************** */
    /* ********************* Media and posts ******************** */

    .media-and-posts h1{
        text-align: center;
        margin-top: 20px;
    }

    .media-and-posts-inner-container{
        display: flex;
        flex-direction: row;
        justify-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;
    }

    .media-and-posts-item-container{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 10px;
        margin-right: 0px;
        margin-left: 0px;
        width: calc(50% - 5px);     /* 360px */
        min-width: calc(50% - 5px); /* 480px */
        max-width: calc(50% - 5px); /* 480px */
    }

    .media-and-posts-item{
        width: 100%; /* 360px */
        /*height: 180px;*/
        aspect-ratio: 16/9;
        object-fit: cover;
        object-position: center;
    }

    .postpage-item{
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
        object-position: center;
    }

    .media-and-posts-information{
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
        width: 100%; /* 360px */
        line-height: 1.4;
    }

    .media-and-posts-post-title{
        width: 100%; /* 360px */
        margin: 0px;
        font-size: large;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis !important;
    }
    
    .media-and-posts-paragraph{
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 10px;
        margin-left: 0px;
        width: 100%; /* 360px */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.4;
    }

    .post-info{
        position: absolute;
        top: 0px;
        left: 0px;
        width: -webkit-fill-available;
        margin: 0px;
        padding: 5px;
        background-color: orange;
        font-family: 'Font Awesome 5 Free';
        line-height: 1.5;
    }

    .post-title{
        color: black;
        text-decoration: none;
        font-size: large;
    }

    .post-title:visited{
        color: black;
        text-decoration: none;
        font-size: large;
    }

    .post-title-headline{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis !important;
    }

    .media-and-posts-example-post-container{
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
        aspect-ratio: 16/9 !important;
        position: absolute;
    }

        .media-and-posts-example-post-button-container{
            display: flex;
            justify-content: center;
        }

            .example-post-button{
                display: flex;
                justify-content: center;
                width: 45%;
                background-color: aliceblue;
                cursor: pointer;
                transition: 1s all ease;
                border-top: 1px solid white;
                border-left: 1px solid white;
                border-bottom: 1px solid purple;
                border-right: 1px solid white;
                border-bottom-left-radius: 25px;
                border-top-right-radius: 25px;
            }

            .example-post-button:hover {
                border-top: 1px solid purple;
                border-right: 1px solid purple;
                border-left: 1px solid purple;
            }

    /* ********************************************************** */
    /* ************************ Postpage ************************ */

    .postpage-content{
        max-width: 100%;
    }

    .postpage-content h1{
        text-align: center;
        margin: 20px auto;
        font-size: x-large;
    }

    .postpage-content p{
        margin: 20px auto;
        line-height: 2.0;
    }

    /* ********************************************************** */
    /* ************************ Comments ************************ */

    .comment-area{
        max-width: 800px;
        margin: 20px auto;
    }

    .commit-comment-container {
        display: flex;
        align-self: flex-end;
    }

        .commit-comment-input {
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            padding-top: 1px;
            padding-left: 5px;
            padding-right: 5px;
            padding-bottom: 1px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 3px;
            min-height: 34px;
            max-height: 34px;
            width: calc(100% - 30px);
            border-top: 2px solid #f0f0f0;
            border-right: none;
            border-bottom: 2px solid #f0f0f0;
            border-left: 2px solid #f0f0f0;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
            font-size: 0.70rem;
        }

        .commit-comment-input:focus {
            outline: none;
        }

        .commit-comment-input::placeholder {
            color: lightslategray;
        }

        .commit-comment-button-container {
            background-color: white;
            width: 30px;
            min-height: 40px;
            max-height: 40px;
            border-top: 2px solid #f0f0f0;
            border-right: 2px solid #f0f0f0;
            border-bottom: 2px solid #f0f0f0;
            border-left: none;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
        }

        .commit-comment-button-container:hover {
            cursor: pointer;
            background-color: lightgray;
        }

            .commit-comment-button {
                background-image: url(/images/tiles/tile_320_pen_transparent.png);
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;
            }

        .comment-delete-button-container {
            position: absolute;
            left: -45px;

        }

            .comment-delete-button {
                appearance: none;
                -moz-appearance: none;
                -webkit-appearance: none;
                width: 36px;
                height: 36px;
                background-image: url(/images/tiles/tile_320_waste_bin_transparent.png);
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;
                border: 0px solid white;
                background-color: white;
            }

            .comment-delete-button:hover {
                cursor: pointer;
                background-color: lightgray;
            }

        .comment-container {
            position: relative;
            margin: 20px 0px 20px 40px;
        }

        .comment-container p {
            width: calc(100% - 30px);
            margin-top: 8px;
            margin-right: 0px;
            margin-bottom: 0px;
            margin-left: 0px;
            line-height: 1.4;
        }

        .answer-container {
            position: relative;
            margin: 20px 0px 20px 60px;
        }

        .answer-container p {
            margin-top: 8px;
            margin-right: 0px;
            margin-bottom: 0px;
            margin-left: 0px;
            line-height: 1.4;
        }

        .toggle-answer-field {
            position: absolute;
            top: 0px;
            right: 0px;
            width: 30px !important;
            height: 30px;
            text-align: center;
            padding: 1%;
        }

        .toggle-answer-field:hover {
            cursor: pointer;
        }

    .commit-answer-container {
        margin-top: 8px;
    }

    /* ********************************************************** */
    /* ************************* Footer ************************* */
    /* ********************************************************** */

    .footer {
        font-size: 0.85rem;
        padding: 0px 0px;
        line-height: 1.6;
        background-color: #ffffff;
    }

    .footer-text {
        color: #aaaaaa;
        padding: 3px 15px;
        display: block;
    }

    .footer-horizontal-rule {
        height: 1px;
        border: none;
        background: #444444;
        padding: 0;
    }

    .footer-sections-container {
        display: flex;
        flex-wrap: wrap;
        padding: 0;
    }

    /* ********************************************************** */
    /* ********************* Footer-Section ********************* */

            .footer-section-container {
                box-sizing: border-box;
                width: 50%;
                padding: 15px 0;
                flex-shrink: 0;
            }

                    .footer-section-container-title {
                        color: #aaaaaa;
                        padding: 3px 15px;
                        display: block;
                        font-weight: bold;
                        margin-bottom: 10px;
                    }

                    .footer-language-selectbox {
                        -moz-appearance: none; 
                        -webkit-appearance: none; 
                        appearance: none;
                        background-color: white;
                        color: black;
                        font-size: 0.85rem;
                        padding-left: 3px;
                        padding-top: 5px;
                        padding-bottom: 4px;
                        margin-left: 15px;
                        min-width: 150px !important;
                        position: relative;
                        border-radius: 3px;
                    }

                    .footer-link {
                        color: #aaaaaa;
                        padding: 3px 15px;
                        display: block;
                        text-decoration: none;
                    }

                    .footer-link:hover {
                        color: #ffffff;
                        background-color: #aaaaaa;
                    }

                    .footer-button {
                        -moz-appearance: none;
                        -webkit-appearance: none;
                        appearance: none;
                        width: 100%;
                        height: 27px;
                        padding: 3px 15px;
                        border: none;
                        outline: none;
                        color: #aaaaaa;
                        background-color: #ffffff;
                        text-align: left;
                        font-size: 0.85rem;
                    }

                    .footer-button:hover {
                        color: #ffffff;
                        background-color: #aaaaaa;
                        cursor: pointer;
                    }

    /* ********************************************************** */
    /* ******************* Social-Media-Links ******************* */

                    .footer-section-socialmedia-container {
                        box-sizing: border-box;
                        display: flex;
                        flex-direction: row;
                        justify-content: center;
                        width: 70%;
                        max-width: 360px;
                        height: 72px;
                        flex-shrink: 0;
                    }

                            .footer-section-socialmedia-inner-container {
                                box-sizing: border-box;
                                display: flex;
                                flex-direction: row;
                                justify-content: center;
                                min-width: 50%;
                            }

                                    .footer-section-socialmedia-item-container{
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        width: 50%;
                                        height: 100%;
                                        border: 1px solid #ffffff;
                                    }
                        
                                    .footer-section-socialmedia-item-container:hover{
                                        cursor: pointer;
                                        border: 1px solid #aaaaaa;
                                    }

                                            .footer-section-socialmedia-item {
                                                align-self: center;
                                                width: 36px;
                                            }

    /* ********************************************************** */
    /* ********************** Link-Styling ********************** */

    a.general:link {
        display: block;
        border: none;
        width: 100%;
        height: 100%;
        /*background-color: none;*/
        color: lightslategray;
        text-align: center;
        text-decoration: none;
        text-decoration-line: none;
    }

    a.general:visited {
        color: lightslategray;
    }

    a.general:hover {
        color: black;
    }

    .text-link {
        color: darkgray;
        text-decoration: none;
    }

    .text-link:hover {
        color: black;
        text-decoration: none;
    }

    .text-link:visited {
        color: darkgray;
        text-decoration: none;
    }

    .form-control-border-inactive {
		border: 2px solid #f0f0f0;
	}

	.form-control-border-active {
		border: 2px solid #777777 !important;
	}

	.form-control-border-success {
		border-color: green !important;
	}

	.form-control-border-error {
		border-color: red !important;
	}

    .form-control-border-empty {
		border-color: orange !important;
	}

    .form-control-border-inactive-comment {
		border-top: 2px solid #f0f0f0;
        border-left: 2px solid #f0f0f0;
        border-bottom: 2 px solid #f0f0f0;
	}

	.form-control-border-active-comment {
		border-top: 2px solid #777777 !important;
        border-left: 2px solid #777777 !important;
        border-bottom: 2px solid #777777 !important;
	}

	.form-control-border-success-comment {
		border-top-color: green !important;
        border-left-color: green !important;
        border-bottom-color: green !important;
	}

	.form-control-border-error-comment {
		border-top-color: red !important;
        border-left-color: red !important;
        border-bottom-color: red !important;
	}

    .form-control-border-empty-comment {
		border-top-color: orange !important;
        border-left-color: orange !important;
        border-bottom-color: orange !important;
	}

    .form-control-border-inactive-button {
		border-top: 2px solid #f0f0f0;
        border-right: 2px solid #f0f0f0;
        border-bottom: 2 px solid #f0f0f0;
	}

	.form-control-border-active-button {
		border-top: 2px solid #777777 !important;
        border-right: 2px solid #777777 !important;
        border-bottom: 2px solid #777777 !important;
	}

	.form-control-border-success-button {
		border-top-color: green !important;
        border-right-color: green !important;
        border-bottom-color: green !important;
	}

	.form-control-border-error-button {
		border-top-color: red !important;
        border-right-color: red !important;
        border-bottom-color: red !important;
	}

    .form-control-border-empty-button {
		border-top-color: orange !important;
        border-right-color: orange !important;
        border-bottom-color: orange !important;
	}

    .form-control-background-inactive {
		background-color: #f0f0f0;
	}

	.form-control-background-active {
		background-color: lightgray !important;
	}

	.form-control-background-success {
		background-color: lightgreen !important;
	}

	.form-control-background-error {
		background-color: lightcoral !important;
	}
}