:root {

                    --headergreen:
                        rgba(100, 120, 14, 0.82);
                    --bodygreen: rgba(4, 170, 14, 0.55);
                    --seitenblau: rgba(55, 223, 246, 0.4);

                }


                .popup {
                    background: rgba(29, 29, 133, 0.706);
                    position: fixed;
                    color: lightgreen;
                    text-align: center;
                    top: 0;
                    left: 5%;
                    width: 90%;
                    z-index: 99;
                }


                .fadey {
                    display: block;

                    -webkit-animation: fadeInFromNone 0.5s ease-out;
                    -webkit-animation-delay: 2s;

                    -moz-animation: fadeInFromNone 0.5s ease-out;
                    -o-animation: fadeInFromNone 0.5s ease-out;
                    animation: fadeInFromNone 0.5s ease-out;
                    animation-delay: 2s;

                }

                @-webkit-keyframes fadeInFromNone {
                    0% {
                        display: none;
                        opacity: 0;
                    }

                    1% {
                        display: block;
                        opacity: 0;
                    }

                    100% {
                        display: block;
                        opacity: 1;
                    }
                }

                @-moz-keyframes fadeInFromNone {
                    0% {
                        display: none;
                        opacity: 0;
                    }

                    1% {
                        display: block;
                        opacity: 0;
                    }

                    100% {
                        display: block;
                        opacity: 1;
                    }
                }

                @-o-keyframes fadeInFromNone {
                    0% {
                        display: none;
                        opacity: 0;
                    }

                    1% {
                        display: block;
                        opacity: 0;
                    }

                    100% {
                        display: block;
                        opacity: 1;
                    }
                }

                @keyframes fadeInFromNone {
                    0% {
                        display: none;
                        opacity: 0;
                    }

                    1% {
                        display: block;
                        opacity: 0;
                    }

                    100% {
                        display: block;
                        opacity: 1;
                    }
                }





                /* amatic-sc-700 - latin */
                @font-face {
                    font-display: swap;
                    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
                    font-family: 'Amatic SC';
                    font-style: normal;
                    font-weight: 700;
                    src: url('../fonts/amatic-sc-v24-latin-700.woff2') format('woff2');
                    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
                }

                .bordered-box {
                    margin: 2px;
                    border: 4px dotted var(--headergreen);
                    border-radius: 8px;
                }



                .text-white {
                    color: white;
                    font-weight: bolder;
                    text-decoration: underline dashed;
                }


                h1,
                h2,
                h3 {
                    text-align: center;
                }

                html{
                    overflow-x: hidden;

                }
                body {
                    overflow-x: hidden;


                    word-wrap: break-word;


                    height: 100vh;
}

                .menubtn {
                    position: relative;
                    top: -8px;

                    right: 6vw;
                }

                .logo {
                    max-height: 170px;
                }

                .contento {
                    display: flex;
                    justify-self: center;
                    max-width: 100vw;

                }

                .mybox {
                    padding: 4px 4px;
                    box-shadow: 2px 3px 5px darkgreen;
                    border-radius: 0.5em;
                    background-image: linear-gradient(rgba(235, 225, 245, 0.7) 0 60%, rgba(228, 214, 230, 0.2));
                    margin: 1em 0;
                }


                .centered {

                    position: fixed;
                    top: 0;
                    left: 0;
                    right: -20px;
                    width: 100vw;
                    height: 100%;

                    z-index: -1;
                }


                .lr {
                    position: fixed;
                    width: 3vw;
                    height: 100%;
                    border-right: 0.4em dotted var(--bodygreen);

                    top: 0;
                    left: 0;
                    z-index: -1;
                    background-color: var(--seitenblau);
                }

                .rr {
                    position: fixed;
                    width: 3vw;
                    height: 100%;
                    border-left: 0.4em dotted var(--bodygreen);


                    top: 0;
                    left: 97vw;
                    z-index: -1;
                    background-color: rgba(55, 223, 246, 0.4);
                }

                .nav-item:hover,
                .nav-link:hover {
                    color: white;
                }



                .navbtn {
                    margin-left: 0.5rem;
                    scale: 0.8;
                    border: none !important;
                }

                #btn-back-to-top {

                    text-align: center;
                    border-radius: 4px;
                    border: 1px solid white;
                    position: fixed;
                    bottom: 2vh;
                    right: 2vw;
                    display: none;

                }

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

                    .navbtn {
                        scale: 0.9;

                    }


                    .logo {
                        max-height: 190px;
                    }





                }

                .myheader {

                    box-shadow: 0px 8px 12px 2px darkgreen;
                    border-radius: 0 0 1em 1em;
                    background-image: radial-gradient(ellipse at center 15%, rgba(143, 153, 0, 0.2) 0% 30%, var(--bodygreen) 70%, var(--headergreen) 111%, transparent);
                    display: block;
                    font-size: 1.75rem;


                }

                .headerfont {
                    font-family: 'Amatic SC', cursive;
                }


                .footerfont {
                    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
                }




                .footerstyle {
                    margin-top: 16whatspx;
                    box-shadow: 2px 3px 5px darkgreen, -1px -2px 2px rgba(255, 255, 255, 0.7);
                    background-image: radial-gradient(circle at center 2vh, var(--bodygreen) 42%, transparent 75%, rgba(135, 123, 246, 0.8) 100%);
                }

                .mapcontainer {
                    height: 90%;
                    min-height: 90%;
                    overflow: hidden;
                }


                @media screen and (min-height: 700px) {
                    .mapcontainer {
                        height: 600px;
                        min-height: 600px;
                    }
                }


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


                    .logo {
                        max-height: 210px;
                    }


                    .lr {
                        position: fixed;
                        width: 3vw;
                        height: 100%;
                        border-right: 0.6em dotted var(--bodygreen);
                        outline: 0.2em dotted var(--seitenblau);


                        top: 0;
                        left: 0;
                        background-color: rgba(55, 223, 246, 0.6);
                    }

                    .rr {
                        position: fixed;
                        width: 3vw;
                        height: 100%;
                        border-left: 0.6em dotted var(--bodygreen);
                        outline: 0.2em dotted var(--seitenblau);

                        top: 0;
                        right: 0;
                        background-color: rgba(55, 223, 246, 0.6);
                    }

                    .navbtn {
                        scale: 1.2;
                        border: inherit;

                    }


                    .mybox {
                        padding: 1em 0em;
                        margin: 1em 1em !important;
                        box-shadow: 2px 3px 5px darkgreen;
                        border-radius: 2em;
                        background-image: linear-gradient(rgba(235, 225, 245, 0.7) 0 60%, rgba(228, 214, 230, 0.2));
                        transition: ase-in;
                    }


                    .footerstyle {
                        margin: 1em 0em;
                        box-shadow: 2px 3px 5px darkslateblue, -1px -2px 2px rgba(255, 255, 255, 0.8);
                        background-image: linear-gradient(var(--bodygreen) 20%, rgba(235, 225, 245, 0.75) 60%, rgba(55, 223, 246,
                                    0.4), rgba(135, 123, 246, 0.6));
                    }

                    .myheader {

                        display: block;
                        border-radius: 0 0 2em 2em;
                        font-size: 1.75em;

                    }




                    #btn-back-to-top {
                        position: fixed;
                        bottom: 3vh;
                        right: 4vw;
                        display: none;
                    }

                }


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

                    .myheader {
                        display: block;
                        border-radius: 0 0 2.5em 2.5em;
                        font-size: 2rem;

                    }

                    .logo {
                        max-height: 250px;
                    }



                }

                .accordion-button {
                    font-size: large
                }

                .accordion-body {
                    background: var(--bodygreen);
                    color: white;
                    font-size: large;
                }

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

                    .myheader {
                        display: block;
                        border-radius: 0 0 3em 3em;

                    }


                }

                /* ===== Float-Bilder ===== */
                .img-float-right {
                    float: right;
                    margin: 0.2em 0 1em 1.5em;
                    border-radius: 0.6em;
                    box-shadow: 2px 3px 8px rgba(0, 80, 0, 0.3);
                    max-width: 38%;
                    transition: transform 0.2s, box-shadow 0.2s;
                }
                .img-float-left {
                    float: left;
                    margin: 0.2em 1.5em 1em 0;
                    border-radius: 0.6em;
                    box-shadow: 2px 3px 8px rgba(0, 80, 0, 0.3);
                    max-width: 38%;
                    transition: transform 0.2s, box-shadow 0.2s;
                }
                .img-float-right:hover,
                .img-float-left:hover {
                    transform: scale(1.03);
                    box-shadow: 3px 5px 14px rgba(0, 80, 0, 0.45);
                }
                .clearfix::after {
                    content: "";
                    display: table;
                    clear: both;
                }
                a.glightbox {
                    cursor: zoom-in;
                }
                /* Mobile: kein Float, volle Breite */
                @media screen and (max-width: 575px) {
                    .img-float-right,
                    .img-float-left {
                        float: none;
                        display: block;
                        max-width: 85%;
                        margin: 0.5em auto 1em auto;
                    }
                }
                @media screen and (min-width: 576px) and (max-width: 767px) {
                    .img-float-right,
                    .img-float-left {
                        max-width: 42%;
                    }
                }