@import url('https://fonts.googleapis.com/css?family=Righteous');
@import url(https://weloveiconfonts.com/api/?family=entypo);

/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}


*{
    font-family:Verdana;
    font-size:14px;
    color:#000;
    margin:0px;
    padding:0px;
    text-decoration:none;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
a,a:before{
    cursor:pointer;
}
html,body{
    height:100vH;
}
body{
    overflow:hidden;/**/
    background-image:url(../image/bg2.webp);
    background-size:cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position:top center;
}
header{
    position:fixed;
    top:0px;
    left:0px;
    height:150px;
    width:100%;
    background: rgb(76,76,76);
    background: -moz-linear-gradient(top,  rgba(76,76,76,1) 0%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(76,76,76,1) 0%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%);
    background: linear-gradient(to bottom,  rgba(76,76,76,1) 0%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 );
    /**/
    z-index:1000;
    box-shadow:0px 0px 8px #000;
    transition:all 1s;
}
header.small{
    height:100px;
}
header h1{
    color:rgba(0,0,0,0.9);
    font-size:3rem;
    line-height:1rem;

    /*text-shadow:0px 0px 4px #fff;*/
    font-family: 'Righteous', cursive;
    text-shadow:  1px  1px 1px #fff,
                  1px -1px 1px #fff,
                 -1px  1px 1px #fff,
                 -1px -1px 1px #fff;


    position:absolute;
    left:20px;
    top:40px;
    transition:all 1s;
}
header.small h1{
    font-size:2.7rem;
    top:25px;
}
header h1 span{
    transition:all 1s;
    padding-left:7px;
    line-height:1.2em;
    margin-top:20px;
    display:inline-block;
}
header.small h1 span{
    opacity:0;
}
header menu{
    background: rgb(76,76,76); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
    position:absolute;
    bottom:0px;
    width:100%;
    height:30px;
    line-height:30px;
}
header menu ul,#mmenu ul{
    list-style-type:none;
    display:table;
    width:100%;
}
header menu ul li{
    display:table-cell;
    border-left:1px solid #C0C0C0;
    width:calc(100% / 6);
}
header menu ul li:first-of-type{
    border-left:0px;
}
header menu ul li a,#mmenu ul li a{
    color:rgba(255,255,255,0.8);
    display:block;
    text-align:center;
    font-weight:bold;
}
header menu ul li:hover a,header menu ul li.aktiv a,#mmenu ul li.aktiv a,#mmenu ul li:hover a{
    color:rgba(255,255,255,1);
}

section{
    height:100vH;
    width:95%;
    margin:auto;
    border:1px solid transparent;
    opacity:0.3;
    transition:all 1s;
    clear:both;
    padding-top:110px;
}
section > article{
    margin:20px 10px;
    transition:all 1s;
    padding:20px;
    border-radius:0px 20px 20px 20px;
    box-shadow:4px 4px 8px #000;
    background-color:rgba(255,255,255,0.9);
    display:table;
    width:98%;
    max-height:calc(100vH - 120px);
}
section:first-of-type > article{
    margin-top:60px;
    max-height:calc(100vH - 180px);
}
section.aktiv{
    opacity:1 !important;
}
section > article > figure,section > article > form{
    display:table-cell;
    vertical-align:top;
}
section > article > figure > img{
    max-height:400px;
    border-radius:0px 10px 10px 10px;
    box-shadow:4px 4px 8px #000;
    margin-right:20px;
}
section > article > aside{
    overflow:auto;
    max-height:450px;
    padding-right:20px;
}
section > article > aside > p{
    margin-bottom:1.6em;
}
section > article h1{
    font-size:1.6rem;
    line-height:2.3rem;
}
/*
#data{
    max-height:calc(100vH - 100px);
}
#data > article{
    margin:20px 10px;
    margin-top:170px;
    transition:all 1s;
    padding:20px;
    border-radius:0px 20px 20px 20px;
    box-shadow:4px 4px 8px #000;
    background-color:rgba(255,255,255,0.9);
    display:table;
    width:98%;
    max-height:calc(100vH - 100px);
    overflow:auto;
}*/
/* ------------------------- [+] FORM ------------------------------ */
form{
    margin-right:20px;
    line-height:34px;
}
form > label{
    vertical-align:top;
    display:inline-block;
    width:130px;
}
form > input,form > textarea{
    display:inline-block;
    width:350px;
    padding:3px 5px;
    border-radius:5px;
    border:1px solid #C0C0C0;
    background-color:rgba(255,255,255,0.6);
}
form > textarea{
    margin-top:4px;
}
form > input:focus,form > textarea:focus{
    background-color:rgba(255,255,255,1);
}
form .bt{
    width:167px;
    background-color:rgba(255,255,255,1);
}
input[name="check"]{
    display:none;
}
/* ------------------------- [-] FORM ------------------------------ */


.icon[class*="entypo-"]:before {
  font-size: 3.1rem;
  position:relative;
  top:-15px;
  left:-55px;
  width:0px;
  vertical-align:middle;
  float:left;
  color:#fff;
  text-shadow:  1px  1px 1px #000,
                  1px -1px 1px #000,
                 -1px  1px 1px #000,
                 -1px -1px 1px #000;
}
.icon{
  margin-left:50px;
  padding-left:5px;
  display:inline-block;
}
.smallicon[class*="entypo-"]:before {
  font-size: 2.1rem;
}
.fehler{
    color:#FF0000;
    font-style:italic;
}
div.fehler{
    font-weight:bold;
}
#hamburger{
    position:fixed;
    top:20px;
    right:20px;
    color:#C0C0C0s;
    z-index:1001;
    font-size:40px;
    display:none;
    width:40px;
    height:40px;
    line-height:30px;
    vertical-align:top;
    padding:3px;
    border-radius:4px;
    border:1px solid #C0C0C0;
    text-align:center;
}
#mmenu{
    position:fixed;
    top:0px;
    left:-100%;
    height:100%;
    width:100%;
    line-height:30px;
    display:none;
    z-index:1002;
    background: rgba(0,0,0,0.8);
    overflow:hidden;
    transition:all 1s;
}
#mmenu.aktiv{
    left:0px;
}
#mmenu ul{
    margin-top:80px;
}
#mmenu ul li{
    display:block;
    border-left:0px solid #C0C0C0;
    border-bottom:1px solid #C0C0C0;
    width:100%;
}
#mmenu ul li:first-of-type{
    border-top:1px solid #C0C0C0;
}
#mmenu ul li a{
    line-height:2.4em;
    white-space: nowrap;
    text-align:left;
    font-weight:bold;
    font-size:1.4em;
    margin-left:2%;
}
#mmenu > a{
    position:absolute;
    right:20px;
    top:20px;
    font-size:2.2em;
    color:#fff;
}
table{
    width:95% !important;
    max-width:95% !important;
}
#addsadd{
    display:none;
}
#addcontent{
    border:1px solid #C0C0C0;
    min-height:10px;
}
.entypo-back{
    float:right;
}