/* Farbwerte
    /* Logo
        /* blau         rgba(0,68,139,1)
        /* grau hell    rgba(224,224,219,1)
        /* grau mittel  rgba(201,200,192,1)
        /* grau dunkel  rgba(128,128,119,1)
*/

@font-face {
    font-family: Clarendon;
    src: url(font/Clarendon.otf);
  }


body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 11px;
    padding: 0px;
    margin: 0px;
    overflow-x: hidden;
}

main ul {
    padding: 0px;
    margin: 0px;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

main ul li {
}

.header img {
    width: 100%;
    height: auto;
}
.logo img {
    max-width: 250px;
}

.bannerlogo ul {
    flex-direction: column-reverse;
}

/*responsive piano-menu*/

#menuicon {
    position: absolute;    
    display: block;
    right: 10px;
    top: 10px;
    z-index: 3001;
    pointer-events: all;
}

.piano-menu {
    z-index: 3000;
    position: absolute;
    right: -350px;
    top: 5px;
    transition: right .4s ease-out;
    background-color: white;
    max-width: 80%;
}
.piano-menu>ul {
    border: solid 1px rgba(0,0,0,.2);
}

.piano-menu li {
    align-self: unset;
}



.piano-menu a {
    color: #525252;
    text-decoration: none;
    display: block;
    line-height: 24px;
    padding: 5px 10px 5px 10px;
    text-transform: uppercase;
    font-size: 17px;
    font-family: Clarendon;/*
    font-family: "Bookman Old Style";*/
    font-weight: bolder;
}

.inhalte {
    margin-top: -13px;
    padding: 15px;
    font-size: 150%;
}

.inhalte a {
    color: #525252;
    text-decoration: none;
}

.inhalte p {
    line-height: 180%;
}

.inhalte ul {
    padding: unset;
    margin: unset;
    list-style-type: unset;
}

.inhalte li:nth-child(1) p {
    border-bottom: dashed 1px black;
    padding-bottom: 10px;
}
.inhalte li:nth-child(1) p.noline, .inhalte li:nth-child(1) p:last-child {
    border-bottom: unset !important;
}

.inhalte:nth-child(1) {
    border-top: solid 1px black;
}
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.projekte table {
    margin-top: 15px;
    margin-bottom: 15px;
    width: 100%;
}

table tr {
    width: 100%;
    margin-bottom: 5px;
    display: inline-table;
}

table tr a {
    color: #505244;
    position: relative;
    display: block;
    padding: 5px;
    line-height: 150%;
    background-color: #b8b6b1;
    transition: all .2s ease-out;
}

table tr a:hover {
    background-color: #505244;
    color: white;
}

footer {
    padding: 15px;
    font-size: 15px;
    background-color: #505244;
    color: white;
}
footer>ul {
    display: flex;
    justify-content: space-between;
}
footer ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
footer p {
    padding: 0px;
    margin: 0px;
    line-height: 150%;
}

footer a {
    color: white;
}

footer li:nth-child(2) {
    border-left: solid 2px white;
    padding-left: 10px
}

@media only screen and (orientation: landscape) {
}

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

    main {
        max-width: 644px;
        width: 100%;
        margin: 0px auto;
    }

    #menuicon {
        display: none;
        position: absolute;
    }
    
    .piano-menu {
        position: relative;
        right: unset !important;
        transition: unset;
        top: -13px;
        max-width: unset;
        background-color: #f1efeb;
    }
    .piano-menu>ul {
        border: unset;
        flex-direction: row;
        justify-content: center;
        position: relative;
        padding-top: 5px;
    }
    .piano-menu a {
        position: relative;
        color: #525252;
        text-decoration: none;
        display: block;
        line-height: unset;
        font-size: 17x;
        padding: 12px 20px 12px 20px;
        background-color: unset;
        transition: all .4s ease-out;
        margin-bottom: 5px;
    }
    
    .piano-menu a::before {
        content: "";
        position: absolute;
        width: 25px;
        height: 25px;
        background-image: url(../img/menuicon.svg);
        background-size: cover;
        background-repeat: no-repeat;
        left: -3px;
        top: 5px;
        transition: all .2s ease-out;
    }
    .piano-menu a:hover::before, .piano-menu .active a::before {
        top: 12px;
    }

    .piano-menu a:hover  {
        color: #2c2c2c;
        background-color: #eee;
    }

    .piano-menu ul li ul {
        opacity: 0;
        margin-top:40px;
        transition: all .2s ease-out;
        pointer-events: none;
    }

    .piano-menu ul li:hover ul {
        opacity: 1;
        margin-top:0px;
        pointer-events: unset;
    }
    .piano-menu ul ul {
        position: absolute;
        margin-top: 5px;
    }
    .piano-menu ul ul li {
        background-color: rgba(227,227,227,1);
        position: relative;
        padding-left: 20px;
    }
    footer ul {
        max-width: 644px;
        width: 100%;
        margin: 0px auto;
    }
    .inhalte {
        padding: 0px;
    }
}