﻿
header {
    left: 0px;
    top: 0px;
    position: fixed !important;
    position: absolute;
    height:5em;
    width: 100%;
    white-space: nowrap;
    background-color: #959a5a;
}


sidebar {
    right: 0px;
    top: 0px;
    position: fixed !important;
    position: absolute;
    height: 100%;
    top: 6.5em;
    width: 6.4em;
    padding-top: 14em;
    background-image: linear-gradient(#F9AE51,#ffffff);
    /* align-content:center;*/
}

footer {
    bottom: 0px;
    left: 0px;
    position: fixed !important;
    position: absolute;
    height: 1.5em;
    width: 100%;
    background-color: #959a5a;
    color: #F9AE51;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 100%;
    padding-top: 10px;
    padding-left: 2em;
    align-content:center;
    opacity:0.9;
}
h1 {
    font-family: Helvetica,Arial,sans-serif;
    font-size: 240%;
    color: #F9AE51;
    /*  font-style: italic;*/
    top: 0px;
    margin-left: 2.4em;
    margin-right: 4em;    
    border-bottom: solid thin #F9AE51;
}


h2 {
    font-family: Helvetica,Arial,sans-serif;
    font-size: 190%;
    color: #575a35;
    
    /*  font-style: italic;*/
    top: 0px;
    border-bottom: solid thin #F9AE51;
    line-height: 100%;
    opacity: 1;
}
h3 {
    color: #575a35; /*#C83C25;*/
    font-family: Helvetica,Arial,sans-serif;
    font-size: 130%;
    font-weight: 500;
    /*  font-style: italic;*/
    margin-top: 16px;
    border-bottom: solid thin #F9AE51;
}

h4 {
    color: black; /*#575a35; #C83C25;*/
    font-family: Helvetica,Arial,sans-serif;
    font-size: 110%;
    font-weight: 550;
    /*  font-style: italic;*/
    margin-top: 16px;
    margin-bottom: 6px;
    /* border-bottom: solid thin #F9AE51;*/
}


menu {
    background-color: #959a5a;
    color: #F9AE51;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 120%;
    padding-left: 3em;
    align-content: center;
    width: 100%;
    position: absolute;
    /* bottom: 15px;*/
    top: 52px;
}


p {
    font-family: Helvetica,Arial,sans-serif;
    font-size: 110%;
    line-height: 125%;
}

figure {
    font-family: Helvetica,Arial,sans-serif;
    font-size: 100%;
    margin: 0px;
}

figcaption {
    font-size: 50%;
}

iframe {
    width: 100%;
    height: 100%;
    border: none;
}
a {
    text-decoration: none;
    /*color: #F9AE51;*/
    color: #959a5a;
}
    a:focus {
        /*  background-color: red;*/
        /* color: black; */
        text-decoration: none;
        text-decoration-line: none;
    }

    a:hover {
        /* background-color: blue; */
        color: #F64A2D;
        text-decoration: none;
        text-decoration-line: none;
    }

    a:active {
        background-color: #F9AE51;
        color: #F64A2D;
        text-decoration: none;
        text-decoration-line: none;
    }

table {
    font-family: Helvetica,Arial,sans-serif;
    font-size: 100%;
    border-collapse: separate;
    border-spacing: 0.2em;
    /* background-color: #FDE7CC;*/
    width: 100%;
    margin-bottom: 1em;
}

caption {
    font-size: 110%;
    font-weight: 550;
    text-align: left;
    color: #575a35;
    padding-bottom: .5em;
    padding-top: .5em;
}
th, td {
    padding: .2em .5em;
    border-radius: .1em;
}

thead th {
    background-color: #959A5A;
    /*color: #c32e04;*/
    color: black;
    text-align: left;
}

tbody tr {
    background-color: #FDE7CC;
}
tbody tr:nth-child(even) {
    background-color: #FCCF97;
}

tbody th {
    font-weight: 550;
    text-align: left;
}

td {
    /* text-align: left;*/
    /* box-shadow: inset 1px 3px 5px -3px rgb(0 0 0 / .5);*/
}

td:empty {
    box-shadow: none;
}

ul, ol {
    font-family: Helvetica,Arial,sans-serif;
    font-size: 110%;
    line-height: 125%;
    margin-top:0.5em;
}
    ol.second {
        list-style-type: lower-alpha;
       /* list-style: none; */
        font-size: 100%;
        margin-top:0.5em;
        padding-left: 20px;
    }
/*
        ol.second > li::before {
            content: "*";
            padding-left: -20px;
        } */

li {
    margin-bottom:0.5em;
}

li ul {
    font-family: Helvetica,Arial,sans-serif;
    font-size: 100%;
    line-height: 125%;
  
}

.linktext {
    color: #C83C25;
    font-weight: 550;
}
.content {
    position: absolute;
    top: 6.5em;
    left: 0px;
    right: 6.2em;
    height: auto;
    bottom: 0.3em;
    /* background-color: antiquewhite;*/
}
.framecontent{
    padding:0em;
}
.logo {
    top: 20px;
    right: 12px;
    position: fixed !important;
    position: absolute;
    height: 4.2em;
    width: 5em;
}
.sidebartext {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    width: 50px;
    color: #C83C25;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 110%;
    margin-left:10px;
    margin-top:-8em;
}
.main {
    /* width: 500px;*/
    /* height: 400px;*/
    /*  background-image: url("../img/wohnhaus.png");*/
    padding:0px;
    margin-left:0em;
}

#textdiv {
    position: relative;
    float: left;
    background-image: linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 90%,rgba(255,255,255,0) 100%);
    /*  height: 100%; */
    width: 90%;
    max-width: 700px;
    z-index: 1;
    margin: 0em;
    padding-right: 100px;
    padding-left:4%; /* 80px;*/
    padding-bottom:-10px;
    padding-top: 20px;
    opacity: 1;
}

.haupttext {
    position: relative;
    float: left;
    background-color: #eee;
    /*  height: 100%; */
    /* width: 700px; */
    z-index: 1;
    margin: 1em;
    min-width: 700px;
    margin-left: 2em;
    padding: 5%;
    padding-top: 0px;
    padding-bottom: 0px;
    opacity: 0.8;
    line-height: 125%;
 /*  border-color: green;
    border-width: 5px;
    border-style: solid;*/ 
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
}

.smalltext {
    line-height: 100%;
}


#aufmacher {
    position: fixed !important;
    position: relative;
    z-index: -100;
    /*right: 300px;*/
    font-family: Helvetica,Arial,sans-serif;
    font-size: 220%;
    font-weight: 600;
    color: #C83C25;
    /*  font-style: italic;*/
    top: 30px;
    display: "block";
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 30%;
    right: 20px;
    align-content: center;
    /* background-color:lavenderblush;*/
}

#aufmacherText {
   
}


#illustration {
    position: fixed !important;
    position: relative;
    display:block;
    z-index: -1;
    right: -30px;
    top: 0px;
    width: 48%;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* background-color:lavenderblush;*/
}



.box {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 220px;
    width: 220px;
    border-radius: 220px;
    -moz-border-radius: 220px;
    -webkit-border-radius: 220px;
    box-sizing: border-box;
    background-color: rgba( 216, 219, 221,0.7);
    padding: 30px;
   
}

.bidlimkreis {
    display: block;
    max-width: 100%;
    height: auto;
    /* background-color: red;*/
    -webkit-user-drag: none;
    -moz-user-select: none;
}

.mainmen {
    font-weight: 500;
    font-size: 110%;
    padding-left: 30px;
    background-color: #959a5a;
}

.men {
    position: absolute;
    font-size: 100%;
    width: 265px;
    top: 70px;
    
    padding-left: 15px;
    padding-top: 0px;
    padding-bottom: 20px;
    margin: 0px;
    background: #FDE5C7;
    box-sizing: border-box;
    opacity: 1;
    display: block;
  /*  height: 300px; */
}

.menitem {
    font-family: Helvetica,Arial,sans-serif;
    font-size: 100%;
    line-height: 100%;
    color: #575a35;
    opacity:1;
}

.inhaltsverz {
    font-family: Helvetica,Arial,sans-serif;
    font-size: 120%;
    color: black;
    margin: 0px;
    margin-bottom: 10px;
    padding: 0px;
    line-height: 100%;
}

#noscroll {
    position: fixed !important;
    position: absolute;
    bottom: 0.5em;
    left: 1em;
    display: none;
    z-index:500;
}

#testline {
    position: fixed !important;
    position: absolute;
    bottom: 50px;
    top: 1em;
    display: block;
    z-index: 500;
}
#phone {
    position: fixed !important;
    position: absolute;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 150%;
    font-weight: 600;
    color: #C83C25;
    padding-left: 30px;
    padding-top:7px;
    right: 10px;
    bottom: 10px;
    height: 80px;
    width: 270px;
    border-radius: 60px;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    box-sizing: border-box;
    background-color: rgba( 255, 255, 255,0.8);
    border-color: #C83C25;
    border: 6px solid;
    z-index:600;
}

#cover {
    background-color: rgba( 0, 0, 0,0.5);
    z-index: 900;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: none;
    align-items: center;
    justify-content: center;
    
}

#coverpage {
    position: absolute;
    float: left;
    background-color: white;
    /*  height: 100%; */
    /* width: 700px; */
    z-index: 1;
    margin-left: 20%;
    margin-right: 20%;
    top: 10px;
    bottom: 10px;
    min-width: 900px;
    min-height: 300px;
   
    padding-top:90px;
   
   
    
    
    /*display: flex;*/
}

#btnClose {
    position: absolute;
    top:0px;
    right: 0px;
    opacity:0.8;
}
#glossHead {
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0px;
    height: 130px;
    background-image: linear-gradient(180deg,rgba(255,255,255,1) 0%, rgba(255,255,255,1) 70%,rgba(255,255,255,0) 100%);
}

#glossContent {
    overflow-y: scroll;
    padding-right: 120px;
    /*padding-bottom: 2em;*/
    height: 100%;
}

.glossPic {
    float:left; 
    margin-right:20px;
}

#glossFooter {
    position: absolute;
    width: 100%;
    height: 60px;
    bottom: 0px;
    left: 0px;
    /* background-color: white;   rgba(255,255,255,1) 50%,*/
    padding-bottom: 0px;
    background-image: linear-gradient(0deg,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
}


#glossarLnk {
    position: absolute;
    bottom: 80px;
    right: 15px;
}
#glossarImg {
    width: 65px;
}


dl {
    font-family: Helvetica,Arial,sans-serif;
    font-size: 120%;
    margin-left: 95px;
    
}

dt {
    font-weight: 600;
    margin-bottom: 10px;
}

dd {
    /*  margin-bottom: 10px; */
}

math {
    font-size: 120%;
}
.shortcut {
    position: absolute;
    bottom: 20px;
    right: 8px;
    color: #C83C25;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 100%;
    text-align: center;
    align-content: center;
}


.icon12 {
    width: 12px;
    height: 12px;
}


.icon16 {
   width:16px; 
   height:16px;
}

.icon20 {
    width: 20px;
    height: 20px;
}


@media (max-device-width: 480px) {
    /*  Layout für Handy-Bildschirme */
    header {
        height: 8em;
    }

    h1 {
        font-size: 350%;
        margin-left: 20px;
    }

    dl {
        font-size: 250%;
    }

    sidebar {
        width: 160px;
        padding-top: 14em;
        background-image: linear-gradient(#F9AE51,#ffffff);
        /* align-content:center;*/
    }

    .sidebartext {
        width: 50px;
        color: #C83C25;
        font-size: 170%;
        margin-left: 10px;
        margin-top: 0em;
    }

    #textdiv {
        padding-top: 4em;
    }

    menu {
        top: 80px;
        padding-left: 0px;
    }

    .mainmen {
        font-size: 190%;
    }

    .men {
        top: 120px;
        width: 500px;
        left: 0px;
        /* height: 300px;*/
        font-size: 200%;
    }

    #phone {
        height: 120px;
        width: 400px;
        border-radius: 90px;
        -moz-border-radius: 90px;
        -webkit-border-radius: 90px;
        font-size: 225%;
        padding-left: 45px;
        padding-top: 10px;
        right: 70px;
    }

    #btnClose {
        width: 120px;
    }

    #glossarLnk {
        position: absolute;
        bottom: 120px;
        right: 25px;
    }

    #glossarImg {
        width: 100px;
    }

    #glossContent {
        font-size: 40%;
    }

    math {
        font-size: 250%;
    }

    .shortcut {
        font-size: 170%;
        font-weight: 600;
    }

    .icon12 {
        width: 24px;
        height: 24px;
    }


    .icon16 {
        width: 32px;
        height: 32px;
    }

    .icon20 {
        width: 40px;
        height: 40px;
    }

}
    

    /*575a35*/