﻿/*Die Möglichkeit zum Markieren abschalten*/
body {
    user-select: none;
    -webkit-user-select: none; /* Für Safari */
    -moz-user-select: none; /* Für Firefox */
    -ms-user-select: none; /* Für Internet Explorer/Edge */
    font-family: 'Roboto', Verdana, Arial, Helvetica, sans-serif;
}
/*Die Möglichkeit zum Markieren abschalten*/

:root {
    /* Master - Seite */
    --master-background-kopf-fuss: black;
    --default-text_color_01: whitesmoke;
    /* Default - Seite */
    --default-background-00: #50565A;
    --default-background-01: #383E42;
    --default-background-02: #383E42;
    --default-background-03: #383E42;
    --default-background-04: #383E42;
    --default-background-05: #383E42;
    --default-background-06: #383E42;
    --default-background-07: #383E42;
    --default-background-08: #383E42;
    --default-text-01: #FFFFFF;
    --default-text-02: #F5F5F5;
    --default-text-03: #ECECEC;
    --default-border_rahmen_01: #ffffff;
    --default-border_rahmen_02: none;
    --default-border_rahmen_03: none;
    --default-border_rahmen_300: none;
    /* Detail - Seite */
    --detail-background-00: #383E42;
    --detail-background-01: #5a5a5a;
    --detail-background_Datail_Rahmen: 10, 20, 30;
    --detail-text-02: #F5F5F5;
    --detail-text-03: #ECECEC;
    --detail-border_rahmen_01: #FFFFFF;
    /* Haupt - Seite */
    --haupt-background-00: #383E42;
    --haupt-background-01: #50565A;
    --haupt-redaktionskopf-text: whitesmoke;
    --haupt-text-02: #F5F5F5;
    --haupt-border_rahmen: whitesmoke;
    --haupt-border_rahmen_100: whitesmoke;
    --haupt-border_rahmen_200: whitesmoke;
    --haupt-border_rahmen_300: whitesmoke;
    /* Index - Seite */
    --index-background-00: #383E42;
    --index-background_Rahmen: 10, 20, 30;
}



#MasterSeitePlatzHalter {
    /*display: none;*/
}

#Map_Fuss_Leiste {
    margin-top: 150px;
}

#SiteFoot {
    margin-top: 10px;
    margin-bottom: 20px;
}

#Master_Drop_Event {
    display: none;
}



#SiteMaster_Fuss_Haupt_Menue {
    display: none;
}

#NavBar_Ges {
}

#NavBar_01 {
    display: none;
}

#NavBar_02 {
    display: none;
}

#Master_Drop_Platz {
    display: none;
}


#Logo_1_Rahmen,
#Logo_2_Rahmen,
#Logo_3_Rahmen,
#Logo_4_Rahmen,
#Logo_5_Rahmen {
    border: 2px solid white;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 4px 4px 16px rgba(0,0,0,0.5);
}

#infoButton {
    position: fixed;
    right: 30px;
    top: 130px;
    z-index: 9999;
    background-color: #0078d7;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: background 0.2s;
}

    #infoButton:hover {
        background-color: #005fa3;
    }


.Logo_1_Motive,
.Logo_2_Motive,
.Logo_3_Motive,
.Logo_4_Motive,
.Logo_5_Motive {
    color: gold;
    font-size: 4.0em;
    text-decoration: none;
    text-shadow: 2px 2px 8px black;
}

    .Logo_1_Motive:hover,
    .Logo_2_Motive:hover,
    .Logo_3_Motive:hover,
    .Logo_4_Motive:hover,
    .Logo_5_Motive:hover {
        color: greenyellow !important;
    }

.Logo_1_Text,
.Logo_2_Text,
.Logo_3_Text,
.Logo_4_Text,
.Logo_5_Text {
    color: white;
    font-size: 2.0em;
    text-decoration: none !important;
}

    .Logo_1_Text a,
    .Logo_2_Text a,
    .Logo_3_Text a,
    .Logo_4_Text a,
    .Logo_5_Text a {
        color: green !important;
        text-decoration: none !important;
    }

        .Logo_1_Text a:hover,
        .Logo_2_Text a:hover,
        .Logo_3_Text a:hover,
        .Logo_4_Text a:hover,
        .Logo_5_Text a:hover {
            color: gold !important;
            text-decoration: none !important;
        }



.navbar_hg_bild {
    /*background: url(../logos/hg_gr_01.png) left no-repeat;*/
    background-size: cover;
    background-position: center;
}

#SiteMaster_Fuss_Zusatz_Menue {
    /* display: none;*/
    margin-top: 0px;
    margin-bottom: 0px;
    border: 0px red solid;
    padding: 30px;
    /*background: url(../logos/hg_gr_01.png) left no-repeat;*/
    background-size: cover;
    background-position: center;
}

#KopfButton_00 {
    /*display: none;*/
}

#KopfButton_01 {
    /* display: none;*/
}

#Kopflink_1a {
    /* display: none;*/
}

#Kopflink_1b {
    display: none;
}


#Master_Drop_1 {
    display: none;
}

#Master_Sonst_1 {
    display: none;
}

#Master_Sonst_2 {
    display: none;
}

#Master_Sonst_3 {
    display: none;
}

#Master_Drop_Fit_Verw {
    display: none;
}

#Master_Drop_1 {
    display: none;
}

#KopfButton_1 {
    /* display: none;*/
}


#KopfButton_2 {
    display: none;
}

#KopfButton_3 {
    display: none;
}

#KopfButton_4 {
    display: none;
}

#KopfButton_5 {
    display: none;
}

#KopfButton_6 {
    display: none;
}

#KopfButton_7 {
    display: none;
}

#KopfButton_8 {
    display: none;
}

#KopfButton_9 {
    /*display: none;*/
}

#KopfButton_10 {
    /*display: none;*/
}

#KopfButton_11 {
    /*display: none;*/
}


#FussButton_1 {
}

#FussButton_2 {
}

#FussButton_3 {
}

#FussButton_4 {
}

#FussButton_5 {
}

#FussButton_6 {
}

#FussButton_34 {
}

#FussButton_35 {
}

#fuss_menu {
    width: 100%;
    text-align: center;
    display: block;
    /*----------------------*/
    display: none;
}

    #fuss_menu li {
        display: inline-block;
        float: none;
    }




#WhatsUp_Div {
    /*background: url(../logos/logo_kl.png) left no-repeat;
    margin: 0px 10px;
    width: 220px;
    height: 40px;
    background-size: 200px;
    transition: 0.3s linear;*/
    /* ---------------------*/
    /*display: none;*/
}

    #WhatsUp_Div:hover {
        /* background-size: 205px;
        transition: 0.3s linear;*/
    }



.whatsup_link {
    color: yellow;
    font-size: 1.0em;
    text-decoration: none;
}

    .whatsup_link:hover {
        color: cyan;
        text-decoration: none;
    }


.carousel_abstand {
    margin-top: 115px;
    /*margin-top: 55px;*/
}




.logo_kl {
    background: url(../logos/logo_kl.png) left no-repeat;
    margin: 0px 10px;
    width: 320px;
    height: 100px;
    background-size: 300px;
    transition: 0.3s linear;
}

    .logo_kl:hover {
        background-size: 305px;
        transition: 0.3s linear;
    }


.logo_kl_2 {
    background: url(../logos/logo_kl.png) left no-repeat;
    margin: 0px 10px;
    width: 220px;
    height: 40px;
    background-size: 200px;
    transition: 0.3s linear;
}

    .logo_kl_2:hover {
        background-size: 205px;
        transition: 0.3s linear;
    }




.navbar {
    margin-bottom: 0;
    border-radius: 0;
    color: red !important;
}



/* Kopf und Fuss-Menüe ändern !!! */

.navbar-dark {
    background-color: var(--master-background-kopf-fuss) !important;
}

.nav-link {
    color: white !important;
    font-size: 1.2em;
}

    .nav-link:hover {
        /* color: white !important;*/
        color: yellow !important;
        /*font-weight: bolder;*/
    }

/* Kopf und Fuss-Menüe ändern !!! */



.kopf_link_10 {
    background: url(../icon/user.svg) left no-repeat;
    background-size: 19px;
    margin: 0px 10px 0px 0px;
}

    .kopf_link_10:hover {
        background-size: 21px;
    }

.kopf_link_11 {
    background: url(../icon/brightness_high.svg) left no-repeat;
    background-size: 19px;
    margin: 0px 10px 0px 0px;
}

    .kopf_link_11:hover {
        background-size: 21px;
    }

.kopf_link_12 {
    background: url(../icon/calendar.svg) left no-repeat;
    background-size: 19px;
    margin: 0px 10px 0px 0px;
}

    .kopf_link_12:hover {
        background-size: 21px;
    }



.SiteMaster_Fuss_Menue_01 {
    border: 0px white solid;
    background-color: var(--master-background-kopf-fuss) !important;
    padding: 30px;
}

.SiteMaster_Fuss_Menue_Schrift_gr,
.SiteMaster_Fuss_Menue_Schrift_mi,
.SiteMaster_Fuss_Menue_Schrift_kl,
.SiteMaster_Fuss_Menue_Link {
    color: white;
}

.SiteMaster_Fuss_Menue_Schrift_gr {
    font-size: 1.6em;
}

.SiteMaster_Fuss_Menue_Schrift_mi {
    font-size: 1.2em;
}


.SiteMaster_Fuss_Menue_Schrift_mi {
    font-size: 1.2em;
    color: white; /* Textfarbe auf weiß setzen */
}

    .SiteMaster_Fuss_Menue_Schrift_mi a:link {
        color: white; /* Linkfarbe auf weiß setzen */
        text-decoration: none;
    }

    .SiteMaster_Fuss_Menue_Schrift_mi a:visited {
        color: white; /* Besuchte Linkfarbe auf weiß setzen */
        text-decoration: none;
    }

    .SiteMaster_Fuss_Menue_Schrift_mi a:hover {
        color: lightgreen; /* Linkfarbe beim Hover auf hellgrün setzen */
        text-decoration: none;
    }

    .SiteMaster_Fuss_Menue_Schrift_mi a:active {
        color: white; /* Aktive Linkfarbe auf weiß setzen */
        text-decoration: none;
    }


.SiteMaster_Fuss_Menue_Schrift_kl {
    font-size: 1.0em;
}



.SiteMaster_Fuss_Menue_Link {
    font-size: 1.0em;
    color: yellow;
    text-decoration: none;
}

    .SiteMaster_Fuss_Menue_Link a:link {
        color: yellow;
        text-decoration: none;
    }

    .SiteMaster_Fuss_Menue_Link a:hover {
        color: lightgreen;
    }


footer {
    margin-bottom: 5px;
}




#FontSizeControls {
    text-align: center;
    margin-top: 50px;
    border: 1px silver solid;
    border-radius: 10px;
    padding: 20px;
}

#fontSizeLabel {
    margin-top: 8px;
    min-height: 1em;
    color: #fff;
}

.begruessung-container {
    width: 100%;
    padding-right: var(--bs-gutter-x, 1.5rem);
    padding-left: var(--bs-gutter-x, 1.5rem);
    padding-top: 10px;
    padding-bottom: 10px;
    margin-right: auto;
    margin-left: auto;
    max-width: 100%;
}


.my-container {
    width: 100%;
    padding-right: var(--bs-gutter-x, 1.5rem);
    padding-left: var(--bs-gutter-x, 1.5rem);
    margin-right: auto;
    margin-left: auto;
    max-width: 100%;
    /*border:red 1px solid;*/
}


#Site_Begruessung {
    padding-top: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}




#Startseite_A1 {
    /* border: 1px red solid;*/
    margin-top: 20px;
    margin-bottom: 100px;
    /*animation-name: slide-in;
    animation-duration: 10.0s;*/
}

#Startseite_A2 {
    margin-top: 30px;
    margin-bottom: 30px;
    padding-bottom: 30px;
    display: none;
}


#Startseite_A3 {
    margin-bottom: 30px;
    display: none;
}

/*###############################################*/

@media (max-width: 768px) {


    .my-container {
        max-width: 720px;
    }

    #Logo_1_Rahmen,
    #Logo_2_Rahmen,
    #Logo_3_Rahmen,
    #Logo_4_Rahmen,
    #Logo_5_Rahmen {
        display: none !important;
    }
}




/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {

    .Logo_1_Motive,
    .Logo_2_Motive,
    .Logo_3_Motive,
    .Logo_4_Motive,
    .Logo_5_Motive {
        font-size: 1.4em;
    }

    .Logo_1_Text,
    .Logo_2_Text,
    .Logo_3_Text,
    .Logo_4_Text,
    .Logo_5_Text {
        font-size: 0.95em;
    }

    .logo_kl {
        width: 160px;
        height: 32px;
        background-size: 140px;
    }

        .logo_kl:hover {
            background-size: 145px;
        }

    .carousel_abstand {
        margin-top: 55px;
    }

    #infoButton {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        top: 130px;
    }

    .my-container {
        max-width: 540px;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {

    .Logo_1_Motive,
    .Logo_2_Motive,
    .Logo_3_Motive,
    .Logo_4_Motive,
    .Logo_5_Motive {
        font-size: 1.7em;
    }

    .Logo_1_Text,
    .Logo_2_Text,
    .Logo_3_Text,
    .Logo_4_Text,
    .Logo_5_Text {
        font-size: 1.05em;
    }

    .logo_kl {
        width: 220px;
        height: 40px;
        background-size: 200px;
    }

        .logo_kl:hover {
            background-size: 205px;
        }

    .carousel_abstand {
        margin-top: 65px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {

    .Logo_1_Motive,
    .Logo_2_Motive,
    .Logo_3_Motive,
    .Logo_4_Motive,
    .Logo_5_Motive {
        font-size: 2.4em;
    }

    .Logo_1_Text,
    .Logo_2_Text,
    .Logo_3_Text,
    .Logo_4_Text,
    .Logo_5_Text {
        font-size: 1.25em;
    }

    .logo_kl {
        width: 260px;
        height: 60px;
        background-size: 240px;
    }

        .logo_kl:hover {
            background-size: 245px;
        }

    .carousel_abstand {
        margin-top: 75px;
    }

    .my-container {
        max-width: 960px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {

    .Logo_1_Motive,
    .Logo_2_Motive,
    .Logo_3_Motive,
    .Logo_4_Motive,
    .Logo_5_Motive {
        font-size: 3.4em;
    }

    .Logo_1_Text,
    .Logo_2_Text,
    .Logo_3_Text,
    .Logo_4_Text,
    .Logo_5_Text {
        font-size: 1.5em;
    }

    .logo_kl {
        width: 300px;
        height: 80px;
        background-size: 280px;
    }

        .logo_kl:hover {
            background-size: 285px;
        }

    .carousel_abstand {
        margin-top: 90px;
    }

    .my-container {
        max-width: 1140px;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

    .Logo_1_Motive,
    .Logo_2_Motive,
    .Logo_3_Motive,
    .Logo_4_Motive,
    .Logo_5_Motive {
        font-size: 4.0em;
    }

    .Logo_1_Text,
    .Logo_2_Text,
    .Logo_3_Text,
    .Logo_4_Text,
    .Logo_5_Text {
        font-size: 1.6em;
    }

    .logo_kl {
        width: 320px;
        height: 100px;
        background-size: 300px;
    }

        .logo_kl:hover {
            background-size: 305px;
        }

    .carousel_abstand {
        margin-top: 115px;
    }
}


#Anrufen_Kasten {
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 20px 0;
}

.call-btn {
    display: inline-block;
    padding: 10px;
    background: #4CAF50;
    color: white;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.2em;
}

/* Auf Mobilgeräten anzeigen */
@media only screen and (max-width: 768px) {
    #Anrufen_Kasten {
        display: flex;
    }
}
