@import url("root.css") screen;

body {
    padding: 0;
    margin: 0 auto;
    width: 100vw !important;
    height: 100vh;
    border:0;
    font-size: var(--font-size);
    font-weight:normal;
    font-style:normal;
    vertical-align:baseline;
    font-family: var(--body-font);
    color: var(--content-fontcolor);
}

body.js_nav
{
    overflow: hidden;
    position: static;
}
body.js_nav .mobile_menu_wrapper
{
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
body.js_nav #wrapper
{
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
}
#wrapper {
    margin:auto;
}
@media only screen and (min-width: 9em) and (max-width: 58.75em)  {

    #wrapper {
        display: grid;
        max-width: 98vw;
        grid-template-columns: repeat(1, 1fr);
        grid-template-areas: "head" "wrapper_main" "foot";
    }
    #wrapperpost {
        margin: 0px auto;
        display: grid;
        margin: 0px auto;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: "head head " "nav  nav" "main main" "article article" "news aside" "foot foot";
    }
}

@media only screen and (min-width: 58.75em) and (max-width: 78em)  {
    #wrapper {
        display: grid;
        max-width: 95vw;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: "head head" "nav wrapper_main " "foot foot";
    }
    #wrapperpost {
        max-width: 95vw;
        margin: 0px auto;
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas: "head head head" "nav wrapper_mainpost wrapper_mainpost " "foot foot foot";
    }
}

@media (min-width: 78em) {
    #wrapper {
        display: grid;
        width: 95vw;
        grid-gap: 0.5em;
        grid-template-columns:  1fr 4fr;
        grid-template-areas: "head head" "nav wrapper_main" "foot foot";
    }
    #wrapperpost {
        display: grid;
        width: 95vw;
        grid-gap: 0.5em;
        margin: 0px auto;
        grid-template-columns: 1fr 4fr;
        grid-template-areas: "head head " "nav wrapper_mainpost" "foot foot";
    }
}

header {
    border-radius: var(--content-border-radius);
    border: 0px solid;
    border-color: var(--content-bordercolor);
    padding: 0em;
    margin: 0em 0em 1em 0em;
}

nav,
footer {
    border-radius: var(--content-border-radius);
    border: 1px solid;
    border-color: var(--content-bordercolor);
    padding: 0.625em;
    margin: 0.625em;
}
footer {
    background: var(--content-bgdcolor) ;
    border-color: var(--content-bordercolor);
    grid-area: foot;
}
.wrapper_main  {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-auto-rows: min(40px, auto);
    grid-gap:1.5em;
    align-items: top;
    justify-content:center;
    padding: 0.0em;
    margin: 0.625em;
    grid-area: wrapper_main;
}
.wrapper_mainpost {
    align-items: start;
    top:0px;;
    padding: 0.em;
    margin: 0.625em;
    background: var(--content-bgdcolor);
    overflow: auto;
    position: relative;
}
header {
    height:5em;
    margin-top: 0em;
    grid-area: head;

}

nav {
    display:flex;
    flex-direction: column;
    justify-content:top;
    align-items: center;
    background: var(--content-bgdcolor) ;
    border-color: var(--content-bordercolor);
    grid-area: nav;
}

.stickyheader {
    display: grid;
    grid-template-columns: 12em 1fr 4em;
    grid-template-rows: 3em 1fr;
    grid-template-areas: "logo welcome" ". headnavi";
    height:5em;
    min-width: 100%;
    margin-top: 0em;
    border: 1px solid;
    border-color: var(--content-bordercolor);
    padding: 0em;
    margin: 0em;
    background-size:cover;
    background-image: url("/_imagefiles/img_index/bgd_header.jpg");
    background-repeat: repeat-x;
    border-color: var(--content-bordercolor);
    position: fixed;
    z-index:9999;
}
.wrapper_main1, .wrapper_main2, .wrapper_main3, .wrapper_main4, .wrapper_main5, .wrapper_main6, .wrapper_main7, .wrapper_main8 {
    align-items: start;
    justify-content:center;
    padding:1em 1em 1em 1em;
    background: var(--content-bgdcolor) ;
    border-radius: var(--content-border-radius);
    border: 1px solid;
    border-color: var(--content-bordercolor);
}
.chatbotpoststicky {
    width: 100vw;
    height:5em;
    margin: 0em auto;
    bottom: 0em;
    padding:0 0 0.2em 0;
    background-color: rgb(255, 255, 255);
    position: fixed;
    z-index:9999;
}
.chatbotpost {
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows:5em;
    grid-template-areas: "chatbotnav chatbotform";
    grid-gap: 0.5em;
    width: 95vw;
    height:5em;
    margin: 0em auto;
    margin-top:0.5em;
    bottom: 0em;
    padding:0 0 0.2em 0;
    z-index:9999;
}
.chatbotpostnav {
    margin: 0 0.5em 0 0.5em;
    padding: 0 1.9em 0 1.9em;
    background : rgb(255, 255, 255);
    border-radius: var(--content-border-radius);
    border: 1px solid;
    border-color: var(--content-bordercolor);
    grid-area: chatbotnav;
}

.chatbotpostform {
    margin: 0 0.5em 0 0.5em;
    padding: 0 1.9em 0 1.9em;
    background : rgb(255, 255, 255);
    border-radius: var(--content-border-radius);
    border: 1px solid;
    border-color: var(--content-bordercolor);
    grid-area: chatbotform;
    background : rgb(255, 255, 255);
    border-radius: var(--content-border-radius);
    border: 1px solid;
    border-color: var(--content-bordercolor);
    grid-area: chatbotform;
}
.mainpostformtextarea {
    width:70%;
    height:2em;
    resize: none;

}
/****************************************************************
/*   CSS Style für User welcome headbereich
/***************************************************************/
.logo {
    font-size: var(--font-size-h1);
    font-family: var(--body-font-h);
    font-weight: bold;
    color: var(--navi-font-color);
    text-align: center;
    margin: 1rem 0;
}

.user_wrappernav {
    display: flex;
    flex-direction: row;
    flex-wrap : nowrap;
    justify-content : flex-end;
    color: var(--navi-font-color);
    grid-area: welcome;
}
.logout_wrapper {
    position: relative;
    margin-top:0.625em;
    z-index: 99;
    height:2.0em;
    width: 2.0em;
    margin-right:1em;
    display: flex;
    background-image: url("/_imagefiles/img_icon/icon_logout.png");
    background-size:cover;
    background-position: right center;
    align-items: center;
    justify-content: center;
    color: var(--navi-font-color);
    cursor:pointer;
}
/****************************************************************
/*   CSS Style für User welcome headbereich
/***************************************************************/
.info_wrapper {
    position: relative;
    margin-top:0.625em;
    z-index: 99;
    height:2.0em;
    width: 2.0em;
    margin-right:1em;
    display: flex;
    background-image: url("/_imagefiles/img_icon/icon_bell.png");
    background-size:cover;
    background-position: right center;
    align-items: center;
    justify-content: center;
    color: var(--navi-font-color);
    cursor:pointer;
}
/****************************************************************
/*   CSS Style für User welcome headbereich
/***************************************************************/
.chat_wrapper {
    position: relative;
    margin-top:0.625em;
    z-index: 99;
    height:2.0em;
    width: 2.0em;
    margin-right:1em;
    display: flex;
    background-image: url("/_imagefiles/img_icon/icon_chat.png");
    background-size:cover;
    background-position: right center;
    align-items: center;
    justify-content: center;
    color: var(--navi-font-color);
    cursor:pointer;
}
/****************************************************************
/*   CSS Style für User welcome headbereich
/***************************************************************/
.sound_wrapper {
    position: relative;
    margin-top:0.625em;
    z-index: 99;
    height:1.8em;
    width: 1.8em;
    margin-right:1em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--navi-font-color);
    cursor:pointer;
}
/****************************************************************
/*   CSS Style für User welcome headbereich
/***************************************************************/
.setting_wrapper {
    position: relative;
    margin-top:0.625em;
    z-index: 99;
    height:2.0em;
    width: 2.0em;
    display: flex;
    background-image: url("/_imagefiles/img_icon/icon_setting.png");
    background-size:cover;
    background-position: right center;
    align-items: center;
    justify-content: center;
    color: var(--navi-font-color);
    cursor:pointer;
}
/****************************************************************
/*   CSS Style für User welcome headbereich
/***************************************************************/
.user_wrapper a, .user_wrapper a:visited, .user_wrapper a:hover {
    position: relative;
    margin-top:0.625em;
    z-index: 99;
    height:2.0em;
    width: 12em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--navi-font-color);
    cursor:pointer;
    text-decoration: none;
    border-bottom: 0.0em;
}
/****************************************************************
/*   CSS Style für Mobile Menü Button
/***************************************************************/
.mobile_wrapper
{
    position: relative;
    display: inline-block;
    margin-top:0.625em;
    z-index: 99;
    height:2.0em;
    min-width: 3.12em;
    text-align:center;
    cursor:pointer;
}
.menu_buttons_content
{
    vertical-align: left;
    padding-left:0.625em;
}
/****************************************************************
/*   CSS Style für Navigationsleiste
/***************************************************************/
.headnav
{
    display:none;
    grid-area: headnavi;
}

@media (min-width: 50em) {
.headnav {
    position: relative;
    display: inline-block;
    margin-top:0px;
    z-index: 99;
    height:2.5em;
    min-width: 60vw;
    text-align:center;
    grid-area: headnavi;
    }
.headnav ul {
    display:block;
}
.headnav ul li {
    display:block;
    float: left;
    margin: 0em 0.188em 0em 0.188em;
}
.headnav ul li a {
    color:var(--navi-font-color);
    font-size: 1.0em;
    text-decoration: none;
    line-height:1em;
    padding: 0.563em 0.938em 0.375em 0.963em;
    transition: background 0.2s;
    -webkit-transition: background 0.2s;
}
.headnav ul li a:visited{
    line-height:1em;
    padding: 0.563em 0.938em 0.375em 0.963em;
    transition: background 0.2s;
    -webkit-transition: background 0.2s;
}
.headnav ul li a:hover {
    background:var(--content-bgdcolor) ;
    border-bottom:0.1em solid var(--navi-border-color);
    color: var(--content-fontcolor);
}
.headnav ul li .active {
    background:var(--content-bgdcolor) ;
    border-bottom:0.1em solid var(--navi-border-color);
    color: var(--content-fontcolor);
}

} /* End min width 50em */

/* fonts */
h1{
    font-size: var(--font-size-h1);
    font-family: var(--body-font-h);
    font-weight: normal;
    color: var(--body-fontcolor-h);
    text-align: center;
    margin: 1rem 0;
}
h2{
    font-size: var(--font-size-h2);
    font-family: var(--body-font-h);
    font-weight: normal;
    color: var(--body-fontcolor-h);
    text-align: center;
    margin: 0.5rem 0;
}