@charset "utf-8";
/* CSS Screen */

@import url(http://fonts.googleapis.com/css?family=Titillium+Web:400,900,700italic,700,600italic,600,400italic,300italic,300,200italic,200);
@import url(buttons.css);
@import url(typo3_specific.css);

/* ------------------------------------------>> Reset */
*{
  box-sizing:border-box;  
  -moz-box-sizing:border-box;  
  margin:0;
  padding:0;
}

ul, ol{padding:0 0 0 1.5em;  }
li{padding:0 0 0 .25em;}

/* ------------------------------------------>> Tabellenlayout */
.table{
  display:table;
  width:100%;  
}
.table-row{display:table-row;}
.table-cell{
  display:table-cell;
  vertical-align:top;  
}

/* ------------------------------------------>> Allgemeine Formate */
.clr{clear:both;}
a img{border:0;}

.left{text-align:left;}
.center{text-align:center;}
.right{text-align:right;}
.bottom{vertical-align:bottom;}
.middle{vertical-align:middle;}
.top{vertical-align:top;}

/* ------------------------------------------>> BODY */
body{
  color:#333;
  background:#f3f3f3 url(../lay/bg_papier.jpg);
  font-family:"Titillium Web", Verdana, Geneva, sans-serif;
  font-size:1em;
  font-weight:400;
  margin:0;
  padding:0;
}

#all{
  background-attachment:fixed;
  background-color:#6d8d49;
  background-image:url(../lay/bg_binaer.png), url(../lay/bg_verlauf.jpg);
  background-position:top center, center top;
  background-repeat:repeat, no-repeat;
  background-size:auto, cover;
  padding:10em 0 0;
}
.startseite #all{padding:0;}

.wrap{
  width:960px;
  margin:0 auto;
}

/* ------------------------------------------>> SCHATTEN */
.schattenunten{padding-bottom:16px;}
.schattenoben{padding-top:16px;}
.schatten{
  background-image:url(../lay/bg_schatten_oben.png), url(../lay/bg_schatten_unten.png);
  background-position:center top, center bottom;
  background-repeat:no-repeat;
}
/* ------------------------------------------>> PAPIER */
.papier{background:#ebebeb url(../lay/bg_papier.jpg) top center scroll;}

/* ------------------------------------------>> TOP-NAVIGATION */
#navtop{padding:3em 0 1em;}
.startseite #navtop{padding:1em 0;}

.menu{margin:0; padding:0;}
.menu a{
  color:#333;
  display:inline-block;
  padding:2px 4px;
  text-decoration:none;
}
.menu a:hover, .menu .current a{
  background-color:rgba(240,255,0,.75);
  color:#000;
}

#navtop .menu li, #navbottom .menu li{
  display:inline-block;
  font-size:0.875em;
  line-height:1em;
  padding-bottom:1em;
  padding-right:2em;
  text-align:left;
  text-transform:uppercase;
}

#navtop .menu li a, #navbottom .menu li a{max-width:160px;}
#navbottom .menu li a.logo{
  max-width:inherit;  
  padding:0;
}
#navbottom .menu li a.logo:hover{background:none;}
#navbottom .menu li a.logo img{
  margin-left:1em;
  width:200px;
}

#navtop .menu li a span, #navbottom .menu li a span{display:block;}

.n01:before{content:"01";}
.n02:before{content:"02";}
.n03:before{content:"03";}
.n04:before{content:"04";}
.n05:before{content:"05";}
.n06:before{content:"06";}
.n07:before{content:"07";}
.n08:before{content:"08";}
.n09:before{content:"09";}
.n01:before, .n02:before, .n03:before, .n04:before, .n05:before, .n06:before, .n07:before, .n08:before, .n09:before{
  font-size:2.5em;
  font-weight:100;  
}

.startseite .n01:before, .startseite .n02:before, .startseite .n03:before, .startseite .n04:before, .startseite .n05:before, .startseite .n06:before{
  margin-right:10px;
}

/* ------------------------------------------>> HEADER */
#header{
  position:fixed;
  top:0;
  width:100%;  
}
.startseite #header{position:inherit;}


/* ------------------------------------------>> FOOTER */
#footer .wrap{
  background-image:url(../lay/bg_lesen.png), url(../lay/bg_smiley.png);
  background-position:3em bottom, right 2.5em;
  background-repeat:no-repeat;
  padding-bottom:3.5em;
}
/* ------------------------------------------>> BOTTOM-NAVIGATION */
#navbottom{padding:2em 0 0;}

/* ------------------------------------------>> LOGO */
#logo{
  padding-top:2em;  
  text-align:center;
}

#logo h1 a{
  background:url(../lay/logo.png) center center no-repeat;
  background-size:contain;
  display:inline-block;
  height:110px;
  width:760px;
}
#logo h1 a span{display:none;}

/* ------------------------------------------>> NAVIGATION RECHTS */
#navright{width:18.75em;}

.schattenrechts{
  background-image:url(../lay/bg_navright_bottom.png), url(../lay/bg_navright_top.png), url(../lay/bg_themenuebersicht.png);
  background-position:right bottom, right top, -5px 25px;
  background-repeat:no-repeat;
  padding:4em 0;
}
.schattenrechts2{background:url(../lay/bg_navright_right.png) right repeat-y;}

#navright .menu li{
  border-bottom:1px solid #ccc;
  display:block;
  padding:.5em 1em .25em 1em;
  text-transform:uppercase;
}
#navright .menu li a{padding:0px 4px;}

#navright .menu ul{border-bottom:1px solid #ccc;}
#navright .menu ul li{
  border-bottom:0;
  padding:.25em 1em .25em 1em;
}

#navright .menu ul ul{padding:0 1em .5em 2.5em;}
#navright .menu ul ul li{
  display:list-item;
  list-style-image:url(../lay/bg_li.png);
  padding:0;
  text-transform:inherit;
}

/* ------------------------------------------>> CONTENT */
#content{margin-top:2em;}
.content{padding:2em 0 3em;}
#contentleft{padding-right:30px;}

.content p, .content li{
  font-size:.875em;
  padding-bottom:.75em;  
}
.content ul, .content ol{padding:.5em 0 .5em 1.25em;}
.content ul li, .content ol li, .content ul ul > li, .content ol ul > li{padding-bottom:0;}
.content ul li{list-style-image:url(../lay/bg_li.png);}
.content ol li{list-style-type:decimal-leading-zero;}
.content ul ul > li, .content ol ul > li{list-style-image:url(../lay/bg_li_li.png);}

.content h2, .content h3, .content h4, .content h5{
  font-weight:300;
  letter-spacing:1px;
  padding:1em 0 .5em 0;
  text-transform:uppercase;
}
.content h2{
  background:url(../lay/bg_h2.png) left center no-repeat;
  font-size:2em;
  margin:.5em 0 .5em -32px;
  padding:0 0 0 32px;
}
.startseite .content h2.n06{
  background:none;
  margin:.5em 0 .5em 0;
  padding:0;
}
.startseite h2{line-height:1.2em;}

.content h3{font-size:1.5em;}
.content h4{font-size:1.25em;}
.content h5{
  color:#666;
  font-size:1em;
  font-weight:500;
}
.content h6{
  color:#666;
  font-size:1em;
  font-weight:600;
}

.content h4, .contentleft a, .contentright a{color:#395394;}

.contentleft a, .contentright a{
  background:url(../lay/bg_underline.png) bottom center no-repeat;
  display:inline-block;
  padding:0 2px;
  text-decoration:none;  
}
.contentleft a:active, .contentleft a:focus, .contentleft a:hover, .contentright a:active, .contentright a:focus, .contentright a:hover{
  background-color:rgba(240,255,0,.75);
  color:#000;
}

.startseite .contentleft{padding-right:3em;}
.startseite .contentright{padding-left:3em;}

/* Header und Footer fixed deatkivieren bei unterschreiten von Mindesthöhe*/
@media screen and (max-height:800px) {
#all{padding:0;}
#header{position:inherit;}
}

@media screen and (max-width:1080px) {
.wrap{
  margin:0;
  width:100%;
}
.startseite .wrap{
  margin:0;
  padding:0 2em;
  width:100%;
}

#all{padding:0;}
#header{position:inherit;}
#footer{position:inherit;}
#navtop .menu li, #navbottom .menu li{
  padding-left:1em;
  padding-right:1em;
}
#navtop{text-align:center;}
#footer .wrap{
  background-image:url(../lay/bg_lesen.png);
  background-position:4em bottom;
  background-repeat:no-repeat;
  padding-left:1em;
  padding-right:1em;
}
#contentleft{padding-left:32px;}
.content h2{
  background:none;
  margin:.5em 0 .5em 0;
  padding:0;
}
}

@media screen and (max-width:960px) {
.n01:before, .n02:before, .n03:before, .n04:before, .n05:before, .n06:before, .n07:before, .n08:before, .n09:before{
  font-size:1em;
  font-weight:700;  
}
#navtop .menu li a span, #navbottom .menu li a span{display:inline-block;}
#navtop .menu li a, #navbottom .menu li a{max-width:inherit;}
#navtop .menu li, #navbottom .menu li{text-align:center;}
#navbottom .menu li a.logo img {margin-left:0;}
/* ------------------------------------------>> LOGO */
#logo h1{padding:0 1em;}
#logo h1 a{width:100%;}
/* ------------------------------------------>> FOOTER */
#footer .table, #footer .table-row{
  display:block;
  text-align:center;
  width:100%;
}
#footer .table-cell{
  display:inline-block;
  text-align:center;
  width:inherit;
}
#footer a.logo{
  display:block;
  margin-top:1em;  
}
#footer .wrap{
  background-image:none;
  padding-bottom:1em;
}
}

@media screen and (max-width:800px) {
#navright, #navright .table-row, #navright .table-cell, #contentleft, #contentleft .table-row, #contentleft .table-cell{
  display:block;
  width:100%;
}
.startseite .content .table-cell{
  display:table-footer-group;
  text-align:center;
  width:100%;
}
.startseite .content .table-cell.contentleft, .startseite .content .table-cell.contentright{
  display:table-header-group;
  text-align:left;
  width:100%;
}

#contentleft{padding:0 2em;}

/* ------------------------------------------>> NAVIGATION RECHTS */
.schattenrechts{
  background:url(../lay/bg_themenuebersicht.png);
  background-position:1em 30px;
  background-repeat:no-repeat;
  padding:4em 0 0;
}
.schattenrechts2{background:none;}

#navright ul{clear:both;}
#navright .menu ul li{
  border-bottom:0;
  display:list-item;
  list-style-image:url(../lay/bg_li_li.png);
  float:left;
  margin:0 .75em 0 1.25em;
  padding:.25em 1em .25em 0;
}

#navright .menu ul ul{
  border:1px solid #ccc;
  border-right:0px;
  margin:0 0 .25em;
  padding:0 1em .5em 2em;
  clear:both;
  display:block;
}
#navright .menu ul ul li{
  margin:0 3em 0 0;
  padding:.5em 0 .25em;
}
#navright .menu ul{border-bottom:none;}

#navtop .wrap{padding:0 2em;}
#logo h1{padding:0 2em 0 1em;}
#navtop {padding: 2em 0px 1em;}
}

@media screen and (max-width:600px) {
#header{display:none;}
#logo{padding-top:1em;}
#content{margin-top:0;}
.content{padding:.5em 0 3em;}
.n07:before, .n08:before, .n09:before{content:none;}
#logo h1{padding:0 3em 0 1em;}
}
@media screen and (max-width:480px) {
#logo h1 a{
  background:url(../lay/logo_o_claim.png) center center no-repeat;
  background-size:contain;
  height:50px;
}
#logo h1{padding:0 2em 0 .5em;}
#contentleft{padding:0 1em;}
.content h2{font-size:1.5em;}
.content h3{font-size:1.25em;}
.content h4, .content h5, .content h6{font-size:1em;}
#navright .menu ul li{float:none;}
.content{padding-bottom:1em;}
.startseite .wrap{padding:0 1em;}
.startseite img{max-width:15em;}
}