@CHARSET "UTF-8";

:root {
    --primary: #006cb7;
    --lighter: #CCE2F1;
    --highlight: #76B72A;
    --background: white;
    --akzent: #c32e04;
    --link: #09c;

    --blue: ##006cb7;
    --orange: #FF9933;
    --green : #71BF44;
    --yellow: #FFD402;
    --red:    #F15A31;
    --darkgrey: #999999;
    --lightgrey: #F2F2F2;
}


* {
    margin: 0; padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'calibri', sans-serif;
    font-size: 14pt;
    line-height: 1.2;
    background: var(--background);
}

.search { width: 100%; height: 40px; background-color: #006cb7; }
.search-content {
    overflow: visible;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 6px;
}
.search-content a { color: white; font-weight: bold; text-decoration: none; }
.search-button { display: block; position: relative; margin-left: -28px; width: 13px; height: 13px; background-image: url('/fileadmin/template/magnifier.png'); }
.button { width: 0; height: 0; border: none; }
.form-control { width: 400px; height: 28px; border: none; border-radius: 2px; }
.login { display: inline; padding-left: 50px; }

.top { z-index: 1;
       height: 361px;
       position: relative; top: 0; bottom: 0; left: 0; right: 0;
       background-size: contain;
       background-position: center;
       background-repeat: repeat;
       background-image: url("/fileadmin/template/keybackground-yellow.png");
}

.logodiv {
    z-index: 10;
    position: absolute;
    top:0;
    padding-top: 0;
    overflow: visible;
    max-width: 1200px;
    height: 361px;
    margin-left: auto;
    margin-right: auto;
    Xbackground-size: contain;
    Xbackground-position: center;
    Xbackground-repeat: repeat;
    Xbackground-image: url("/fileadmin/template/keyvisual-yellow.jpg");
    Xbackground-image: url("/fileadmin/template/keyvisual-welcome.jpg");
}

.topimages {
    position: relative;
    z-index: 2;
    padding-top: 0;
    overflow: visible;
    width: 1200px;
    height: 361px;
    margin-left: auto;
    margin-right: auto;
 }

.topimage1 {
    position: absolute;
    z-index: 2;
    padding-top: 0;
    overflow: visible;
    width: 1200px;
    height: 361px;
    margin-left: auto;
    margin-right: auto;
    background-size: contain;
    background-position: center;
    background-repeat: repeat;
    background-image: url("/fileadmin/template/keyvisual-yellow.jpg");
}

.topimage2 {
    position: absolute;
    z-index: 3;
    padding-top: 0;
    overflow: visible;
    width: 1200px;
    height: 361px;
    margin-left: auto;
    margin-right: auto;
    background-size: contain;
    background-position: center;
    background-repeat: repeat;
    background-image: url("/fileadmin/template/keyvisual-welcome.jpg");
}

.logo { padding-top: 25px; }


.menu-button { display: none; }

.menudiv { background-color: white; width: 100%; padding-left: 10px; }
.menu { z-index: 1000; height: 80px; margin-left: 10px; margin-top: 10px; max-width: 1200px; margin-left: auto; margin-right: auto; display: block; }

.menu ul { display: flex; flex-wrap: wrap; justify-content: space-between; align-content: flex-start; align-items: stretch; padding: 0; margin: 0; width: 100%; height: 0; top: 0; list-style-type: none; float: left;}
.menu ul li { display: inline-block; margin-right: 5px; width: 13.4%;  text-shadow: 1px 2px 2px rgb(44, 38, 38); }
.menu ul li a { display: inline-block; width: 100%; padding: 7px;  text-align: center; font-size: 14pt; height: 85px; text-decoration: none; background-color: #006cb7; color: white;}

.menu3 a { background-color: #006cb7; color: white; }
.menu10 a { background-color: #FF9933 !important; color: white; }
.menu9 a { background-color: #71BF44 !important; color: white; }
.menu11 a { background-color: #FFCA02 !important; x:#FFD402 !important; color: white; }
.menu31 a { background-color: #F15A31 !important; color: white; }
.menu32 a { background-color: #999999 !important; color: white; }


.menu ul li a:hover { border-bottom: solid 2px #0061A3; }
.menu ul li.activelink a { border-bottom: solid 2px #0061A3; }


/* Sub-Menü, Unterebenen zunächst verbergen */
.menu ul ul { display: none; width: 250px; height: auto; position: relative; opacity: 0.95; padding: 0; box-shadow: 2px 2px 2px #999; border-left: 1px solid #ccc; }

.menu ul ul li { display: block; overflow: hidden; width: 250px; height: auto !important; background-color: white; Xborder: solid 1px blue; text-shadow: none; Xtext-shadow: 1px 1px 1px rgb(200, 200, 200) !important; font-weight: normal; }
.menu ul ul li a { text-align: left; border-bottom: none !important; min-height: 40px; height: auto; text-decoration: none; padding: 5px; background-color: white !important; color: black !important; font-family:'Oxygen', Arial, sans-serif; font-size: 12pt !important; }
.menu ul ul li.m1 a { }
.menu ul ul li a:hover { font-weight: bold; }
.menu ul ul li.activelink a { font-weight: bold; Xtext-decoration: underline; }

/* Sub-Ebene einblenden, wenn mit der Maus darüber */
.menu ul li:hover ul
    {
    display: block;
}


.menu ul ul ul { height: auto; position: relative; }
.menu ul ul ul li { display: block; text-align: left; margin: 0; padding-left: 15px; font-weight: normal;}
.menu ul ul ul li a:hover { font-weight: bold; }


.keyvisual { position: relative; height: 250px; overflow: hidden; background-color: lightgreen; }
.keyvisual-image { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-size: cover; background-position: center; background-repeat: no-repeat; background-image: url("/fileadmin/template/keyvisual-yellow.jpg"); }


.content { display: flex; flex-wrap: wrap; justify-content: space-between; align-content: flex-start; align-items: stretch; margin-left: auto; margin-right: auto; margin-top: 50px; margin-bottom: 50px; max-width: 1200px; }

.content h1 { color: var(--highlight); }

.frame-layout-1 { width: 100%; }
.frame-layout-2 { width: 50%; padding-right: 20px; }
.frame-layout-3 { width: 33%; }

.ce-bodytext h1 { margin-bottom: 2ex; }
.ce-bodytext h2 { margin-bottom: 2ex; }
.ce-bodytext p { margin-bottom: 2ex; }

header { width: 100%; }

a,h1,h2,h3 { color: #0061A3; }

.footer {
    height: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #006cb7;
    font-family: 'Oxygen', Arial, sans-serif;
    font-size: 10pt;
    color: white;
}

.footer-content { max-width: 1200px; margin-left: auto; margin-right: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-content: flex-start; align-items: stretch; }

.footer-column { display: inline-block; vertical-align: top; color: #CCE2F1; font-weight: bold; }

.footer ul { padding: 0; margin: 0; top: 0; list-style-type: none; }
.footer ul li { display: block; padding: 0; text-align: left; }
.footer a { text-decoration: none; font-weight: bold; color: white; }
.footer a:hover { font-weight: bold; color: white; }



 /* Kein Abstand beim ersten und letzten Bild */
    .ce-gallery { width: 1200px; }
    
    .ce-gallery .ce-column:first-child {
        padding-left: 0;
    }
    .ce-gallery .ce-column:last-child {
        margin-right: 0;
    }
 
    /* Fluid Image Tags */
    .ce-gallery img,
    .ce-gallery picture {
        width: 100%;
        height: auto;
    }
 
    /* Spaltenbreiten je nach eingestellten Columns */
    .ce-gallery[data-ce-columns="2"] .ce-column {
        width: 50%;
    }
 
    .ce-gallery[data-ce-columns="3"] .ce-column {
        width: 33% !important;
     }
 
    .ce-gallery[data-ce-columns="4"] .ce-column {
        width: 25%;
    }
 
    .ce-gallery[data-ce-columns="5"] .ce-column {
        width: 20%;
    }
    
    .ce-gallery .ce-column {
        margin: 0;
        /* Abstand zwischen Bildern */
        padding: 0 5px;
        box-sizing: border-box;
    }


@media screen and (max-width: 1200px) {
    .content { padding-left: 10px; padding-right: 10px; }

    .footer-content { padding: 0 30px; }
    
}
 
 
   


@media screen and (max-width: 960px) {
    .logo { width: 300px; margin-left: 30px; }

    .menu { display: none; top:0; padding-bottom: 10px; !important; }

    .menu-button {
        position: absolute;
        right: 30px;
        padding-top: 20px;
        display: block;
        cursor: pointer;
    }

    .menudiv { width: 100%; padding-left: 0; }

    .menu a { display: block; width: 100%; padding-top: 0 !important; padding-left: 20px; color: #fff !important; }
    .menu ul { display: block; padding: 0; height: auto; width: 100%; }
    .menu ul li { position: relative !important; padding: 0 !important; display: block; background-color: #324867; color: #FFFFFF; border-bottom: solid 1px white; text-align: left; line-height: 40px; width: 100%; height: auto !important; }
    .menu ul li.activelink a { border-bottom: none; color: #fff; }
    .menu ul li:hover:before { border-bottom: none; content: none; display: none; }
    .menu ul li a:hover { border: none; }

    .menu ul ul {  position: relative; display: block; width: 100%; left: 0; top: 1px; padding: 0; z-index: 3; }
    .menu ul ul li { display: block; background-color: #324867; padding: 0;margin: 0; width: 100% !important; }
    .menu ul ul li:hover:before { content: none; display: none; }
    .menu ul ul li a { color: #FFFFFF; text-decoration: none; Xpadding-left: 40px; }
    .menu ul ul li a:hover { border: none !important; }

    .menu ul ul ul {  position: relative; display: block; width: 100%; left: 0; top: 1px; padding: 0; z-index: 3; }
    .menu ul ul ul li { display: block; background-color: #324867; padding: 0;margin: 0; width: 100% !important; }
    .menu ul ul ul li:hover:before { content: none; display: none; }
    .menu ul ul ul li a { color: #FFFFFF; text-decoration: none; padding-left: 20px; }
    .menu ul ul ul li a:hover { border: none !important; }

    /* Spaltenbreiten je nach eingestellten Columns */
    .ce-gallery { width: 100%; }
    
    .ce-gallery[data-ce-columns="2"] .ce-column {
        width: 100%;
    }
 
    .ce-gallery[data-ce-columns="3"] .ce-column {
        width: 100% !important;
     }
 
    .ce-gallery[data-ce-columns="4"] .ce-column {
        width: 100%;
    }
 
    .ce-gallery[data-ce-columns="5"] .ce-column {
        width: 100%;
    }

}