html {
        background: #0f0909;
        background-image: url("../../data/img/bg.jpg");
        font-family: Open Sans, Trebuchet MS, Arial, Sans-Serif;
        color: #fff;}
a {text-decoration: none; color: #ffc125;}
a:hover {color:#eee8aa;}

h1, h2, h3, h4, h5 {clear: Left; margin-top: 0; font-family: Open Sans, Arial, Verdana, Sans-Serif; }
h1{font-size: 1.375rem;  padding: 0 0 0 1rem; margin-bottom: 1rem;font-weight: 600;}
h2{font-size: 1.1rem;  padding: 1rem 0 0 0; margin-bottom: 1rem;font-weight: normal;}

h4{font-size: 0.9rem;  margin-bottom: .25rem; padding: 0;font-weight: 600;}
p {line-height: 1.5rem; font-size: 1rem;}

span.bold {font-weight: bold; color: #fff;}

#textbereich span {letter-spacing: 0.0625rem; font-variant: small-caps; font-size: 1rem; }

#bg {position: absolute; z-index:1; top:0; left: 0; height: 100%; width: auto; overflow: hidden;}

img {width: 100%; height: auto;}

.linie {
        height: 1px;
        border: none;
        background-color: #c6c6c6;

        }
/*----------------------------INNNER DIVS::-------------------*/

div#content {
    position: relative; z-index: 50;
        float: left;
        padding: 0.5rem 1rem 1rem 0rem;
        margin: 1rem 0 1rem 0;
        width: 100%;

        overflow: hidden;
        }

div#headliner {margin-top: 0;
        position: relative; z-index:200; background: rgba(8,8,8, 0.5);
        }

div#textbereich p{padding: 0 0.5rem 0 1rem; z-index: 80;}

div#bildundtext {float: right; width: 18.25rem; z-index: 80;margin-left:-18rem;}
div#bildundtext img {float: right; width: 12rem;border: 1px solid #f9f6da;margin-bottom:.5rem;}

/*---------------------PROJEKTVORSCHAU------------------------*/

div#projektvorschaubox{
        float: left; width: 100%; margin-bottom: 0;}


.projektvorschau {
        width: 45%; height: auto;
        margin: 0 4% 4% 0;
        float: left;
        position: relative;
        overflow: hidden;
        border: 1px Solid #f9f6da;}

.projekttext {
        display: none;
        position: absolute;
        overflow: hidden;
        top: 0;        left: 0;        width: 100%; height: 100%;
        background-color: rgba(230,230,230, 0.5);}


a.projekttext {color: #000; text-decoration: none; padding: 1rem;font-size: 1rem; line-height: 1.2rem;}

.projektvorschau:hover .projekttext {display: block;}
a.projekttext:focus {color: #111;}
.preview {width: 100%; height:100%;}

/*--------------------GALERIE-------------------------------------*/

#galerie {float: left;        margin-top: 0;        padding:0; overflow: hidden;}
#galerie ul {margin:0 0 0 0; padding: 0; list-style: none;}
#galerie ul li {display: inline;}
#galerie ul img {border: 1rem solid #1e2128; margin: 0;opacity:1;}
#galerie ul a:hover img {border: 1rem solid #f9f6da;opacity:1;}
#kleinbild {height: 9rem; width: auto; float: left;}



/*------------------FOOTER---------------------------------------------------------------------*/

#footer{
        width: 100%;
        margin-top: .5rem;
        padding: 1rem .5rem .5rem .5rem;
        clear: both;
        text-align:right;
        color: #eee8aa;
        position: fixed; bottom: 0; left: 0;
        background: #000;
        z-index: 100;
        }
#footer a{color:#eee8aa; }
#footer a:hover {color:#fff;}


/*---SCREEN-Darstellungen--------------*/
@media (max-width: 960px) {html { font-size: 90%; } }
@media (min-width: 60rem) {html { font-size: 90%; } }


@media (min-width: 72rem) {html { font-size: 100%; } }