/* = = = = = = = = = = = = = = = = = datei format.css = = = = = = = = = = = = = = = = = = = = = = = = = */



/* ############################################################ */
/* allgemein */
/* ############################################################ */

*, *:before, *:after {

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-transition: width .75s ease-out;
-webkit-transition: width .75s ease-out;
transition: width .75s ease-out;
}

.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}


.clearfix:after { clear:both; }
.clearfix { *zoom: 1; }

.section { clear: both;
margin: 0rem;
background:transparent;
}

html, body {
font-family: tahoma, arial Verdana, Segoe, "Open Sans",helvetica,roboto ,sans-serif;
font-size:62.5%;
line-height:1.5;
height:100%;
}

body {
font-size:1.9rem;
margin: 0 auto;
color:#787878;
text-shadow:0rem 0rem 0.1rem black;
}


/* überschriften */
h1, h2 {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
font-weight:normal;
}


h1 {
font-size:3.6rem;
line-height: 4rem;
margin-top: 0rem;
margin-bottom: 3.5rem;
}

h2 {
font-size:3rem;
line-height: 3.5rem;
margin-top: 1.5rem;
margin-bottom: 3rem;
}

h3 {
font-size:2.3rem;
line-height: 2.8rem;
margin-top: 2.5rem;
margin-bottom:1rem;
}

pre {
margin-bottom:2rem;
}

/* ############################################################ */
/*  speziell*/
/* ############################################################ */



.rund {
border-radius:36rem;
}

.tabelle {display: table;
width:100%;
table-layout:fixed;
border-spacing: 0rem 0rem;
}

.tabreihe {display:table-row;
width:100%;
}

.zelle {display:table-cell;
width:100%;
vertical-align:top;
border-collapse:separate;
}

.container_haupt {display:block;
text-align:center;
background: radial-gradient(black 15%, transparent 15%) 0 0,
radial-gradient(black 15%, transparent 15%) 8px 8px,
radial-gradient(rgba(255,255,255, 0.1) 15%, transparent 15%) 0 1px;
background-color: #2C2C2C;
background-size: 16px 16px;
position:fixed;
height:100%;
width:100%;
overflow:auto;

}


/* ############################################################ */
/* bereich alle seiten */
/* ############################################################ */

.zelle-inhalt {display: block;
text-align:center;
margin:2rem ;
padding:0rem;
border-radius:2rem;
border:solid 0.1rem #000;
box-shadow:0rem 0rem 0.5rem black;
}

.bereich-1 .text {min-height:50rem;
text-align:left;
padding:5rem 2rem 5rem 2rem;background:#3E3E3E;
background:radial-gradient(circle, #121212 20% ,#2F2F2F  )  ;

border-bottom-right-radius:1.9rem;
border-bottom-left-radius:1.9rem;
}


.bereich-1 #logo {display:table;
background-image:url(images/logo.jpg);
background-repeat:no-repeat;
background-position:50% 50%;
background-size:cover;
height:100%;
text-align:center;
width:100%;
margin:0rem ;
border-bottom:solid 0.1rem #000;
border-top-right-radius:1.9rem;
border-top-left-radius:1.9rem;
}



.logo-a {display:table-cell;vertical-align:middle;border-top-right-radius:5rem;
width:100%;
text-align:center;
font-weight:normal;
font-size: 2.3rem;
text-transform:uppercase;
color:#fff;
text-shadow:0rem 0rem 0.1rem #00EAEA;
letter-spacing:0.1rem;
padding-top:0.2rem;
padding-bottom:0.2rem;border-top-right-radius:3rem;
border-top-left-radius:3rem;
}

.logo-b {display:table-cell;vertical-align:middle;
text-shadow:0.1rem 0.1rem 0.1rem white;
font-size:4rem;
line-height:4rem;
letter-spacing:0.1rem;
height:60vh;
text-transform:uppercase;
color:#000;
letter-spacing:0.4rem;
text-shadow:0.1rem 0.1rem 0.4rem #fff;
padding-top:0.2rem;
padding-bottom:0.2rem;
}



.bereich-1 h1 {text-align:left; }

.bereich-1 h2 {text-align:left; }

.bereich-1 h3  {text-align:left; }


/* ---bilder--- */
.wrapper-img {text-align:center;
display:inline-block;
padding-top:1rem;
margin-top:1rem;margin-bottom:1rem;
width:100%;
background: radial-gradient(black 15%, transparent 15%) 0 0,
radial-gradient(black 15%, transparent 15%) 8px 8px,
radial-gradient(rgba(255,255,255, 0.1) 15%, transparent 15%) 0 1px;
background-color: #575757;
background-size: 16px 16px;
border:solid 0.1rem #000;
}

.bereich-1 img {max-width: 94%;display:inline;
height: auto;
margin-left:0.5rem;
margin-right:0.5rem;
margin-bottom:1rem;
margin-top:0rem;
box-shadow:0rem 0rem 0.4rem black;
border:solid 0.5rem #000000;
}
/* ---- */

.bereich-1  .icons {text-align:center;}
.bereich-1  .icons .fa {
opacity:0.8;
color:#C0C0C0;
background:#353535;
text-shadow:0rem 0rem 0.1rem black;
box-shadow:0rem 0rem 0.5rem black;
margin-left:0.5rem;
margin-right:0.5rem;
margin-bottom:1rem;
margin-top:0rem;
text-align:center;
font-size:6.5rem;
border-radius:1.2rem;
border:solid 0.1rem #000;
height:10rem;
line-height:10rem;
width:10rem;
background:linear-gradient(to right bottom ,#D6D6D6 ,#1A1A1A ,#6A6A6A);
}

.bereich-1  .icons .fa:hover {
color:#fff;
}



/* === menü2 ==== */


.bereich-1 #menu2 ,
.bereich-1 #menu2  ul,
.bereich-1 #menu2  li {
list-style: none;
margin: 0;
padding: 0;
border: 0;
}

.bereich-1 #menu2 {
padding:1.5rem;
}

.bereich-1 #menu2 ul {
text-align:center;
}

.bereich-1 #menu2 li {display:inline;
line-height:5rem;
margin-left:-0.6rem;
padding-left:0.1rem;
text-align:left;

}

.bereich-1 #menu2  a:link, .bereich-1 #menu2  a:visited, .bereich-1 #menu2  a:active{
font-size:1.9rem;
text-align:center;
color:#E9EBED;
text-shadow:0rem 0rem 0.1rem black;
text-decoration: none;
padding:1rem;
border-radius:0.8rem;
-webkit-transition: all 1s ease-in-out;
transition: all 0.5s ease-in-out;
font-style:normal;
background-color:black;
background-color:rgba(0,0,0, 0.6);
box-shadow:0rem 0rem 0.3rem black;
border:solid 0.1rem #000;
}

.bereich-1 #menu2  a:hover  {
color:#fff;
text-decoration: none;
background-color:#535353;
background-color:rgba(48,48,48, 0.5);
}


.bereich-1 #menu2 #aktuell a   {
color:#fff;
text-shadow:0rem 0rem 0.1rem #000;
text-decoration: none;
background-color:#535353;
background-color:rgba(0,0,0, 0.9);
}






/* ==== */


/* === links bereich-1 === */
.bereich-1 a:link, .bereich-1 a:visited, .bereich-1 a:active{
color:#787878;
text-decoration: underline;
}

.bereich-1  a:hover  {
color:#787878;
text-decoration: none;
font-style:italic;
}
/* ==== */


/* === liste ==== */

.container_tabelle {display: table;
width:100%;
padding:0rem 0rem 0rem 0rem;
table-layout:fixed;
border-spacing: 1rem 3rem;
background: radial-gradient(black 15%, transparent 15%) 0 0,
radial-gradient(black 15%, transparent 15%) 8px 8px,
radial-gradient(rgba(255,255,255, 0.1) 15%, transparent 15%) 0 1px;
background-color: #383838;
background-size: 16px 16px;
border:solid 0.1rem #000;
}

.container_zelle {display:block;
transform:rotate(-45deg);
margin-bottom:0.1rem;
background-color:#2d2d2d;
background:radial-gradient( circle , rgba(0,0,0, .6) 40% , rgba(77,93,93, .6)  );
border:solid 0.1rem #000;
box-shadow:0rem 0rem 0.5rem black;
}

.wrapper-liste {text-align:center;display:table;
margin-top:1rem;
width:100%;
table-layout:fixed;
}


.wrapper-liste div {display:table-cell;
width:100%;text-align:left;
}

.bereich-1 .liste ,
.bereich-1 .liste ul,
.bereich-1 .liste  li {
list-style: none;
margin: 0;
padding: 0;
border: 0;
}

.bereich-1 .liste {display:block;margin:0 auto;
}

.bereich-1 .liste ul {
}

.bereich-1 .liste li {color:#9191917;
letter-spacing:0rem;
text-shadow:0.1rem 0.1rem 0.5rem #000;
text-transform:uppercase;
font-size:1.5rem;
}

.bereich-1 .liste .fa {
color:black;
text-align:center;
background-color:#959595;
margin-top:.5rem;
margin-bottom:.5rem;
margin-right:1rem;
margin-left:1rem;
border-radius:36rem;
text-shadow:none;
height:2rem;
line-height:2rem;
width:2rem;
}


/* === menu 3 (im text) ==== */


.bereich-1 #menu3 ,
.bereich-1 #menu3 ul,
.bereich-1 #menu3  li {
list-style: none;
margin: 0;
padding: 0;
border: 0;
}

.bereich-1 #menu3 {display:block;margin:0 auto;
width:100%;
}

.bereich-1 #menu3 ul {
}

.bereich-1 #menu3 li {
}

.bereich-1 #menu3  a:link, .bereich-1 #menu3 a:visited, .bereich-1 #menu3  a:active{text-transform: uppercase;
display:block;
font-size:1.5rem;
line-height:1.7rem;
letter-spacing:.1rem;
margin-bottom:1rem;
text-align:left;
color:#AFAFAF;
text-shadow:none;
box-shadow:0rem 0rem 0.3rem black;
text-decoration: none;
padding:0.5rem;
border-radius:0rem;
font-style:normal;

background-color:#3E3E3E;
background:radial-gradient(circle ,#787878  ,#383838  );
}

.bereich-1 #menu3  a:hover  {
background-color:#646464;
background:radial-gradient(circle , #383838 ,#787878  );
}


.bereich-1 #menu3 .fa {
font-size:1.6rem;
color:#C9C9C9;
text-align:center;
background-color:#161616;
margin-top:.2rem;
margin-bottom:.2rem;
margin-right:1rem;
margin-left:1rem;
border-radius:36rem;
text-shadow:none;
height:3rem;
line-height:3rem;
width:3rem;
}

.bereich-1 #menu3 a:hover .fa {
color:black;
background-color:#BFBFBF;
}


/* === fussmenu === */

.bereich-1 .fussmenu ,
.bereich-1 .fussmenu  ul,
.bereich-1 .fussmenu  li {
list-style: none;
margin: 0;
padding: 0;
border: 0;
}

.bereich-1 .fussmenu  {width:100%;
margin-bottom:2rem;
margin-top:1rem;
}

.bereich-1 .fussmenu ul {
text-align:center;
}

.bereich-1 .fussmenu li { display: inline;}

.bereich-1 .fussmenu a:link, .bereich-1 .fussmenu a:visited, .bereich-1 .fussmenu a:active{
font-size:1.5rem;
background:transparent;
color:#8F8F8F;
text-shadow:0rem 0rem 0.4rem black;
margin:0.5rem 0.2rem 0.5rem 0.2rem;
text-decoration:underline;
transform:uppercase;
}

.bereich-1 .fussmenu a:hover{ text-decoration:none;
text-shadow:0rem 0rem 0.1rem #000;
color:#FFF;
}
/* ==== */

.bereich-1  .icons-fuss .fa {
color:#C0C0C0;
background:#2d2d2d;
text-shadow:0rem 0rem 0.1rem black;
box-shadow:0rem 0rem 0.5rem black;
text-align:center;
font-size:4.5rem;
border-radius:1.2rem;
border:solid 0.1rem #000000;
height:6rem;
line-height:6rem;
width:6rem;

}

.bereich-1  .icons-fuss .fa:hover {
color:#fff;
background-color:#646464;
}


/* ############################################################ */
/* M E D I A   Q U E R I E S */
/* ############################################################ */

/* ==================================== ab 360 pixel ================================== */
@media (min-width: 360px) {

.bereich-1 #liste li {
font-size:1.8rem;
line-height:2.2rem;
}


}

/* ==================================== ab 480 pixel ================================== */
@media (min-width: 480px) {

.bereich-1 #menu3 {
width:90%;
}

.bereich-1 #liste li {
letter-spacing:0.2rem;
font-size:2.2rem;
line-height:2.4rem;
}


.bereich-1 #liste .fa {
font-size:1.5rem;
height:3rem;
line-height:3rem;
width:3rem;
}


.bereich-1 #menu3  a:link, .bereich-1 #menu3 a:visited, .bereich-1 #menu3  a:active{
font-size:2rem;
line-height:2.2rem;
letter-spacing:.2rem;
}


.bereich-1 #menu3 .fa {
font-size:2rem;
height:3rem;
line-height:3rem;
width:3rem;
}


.bereich-1 #menu3 {
width:30rem;
}

.bereich-1 #menu3  a:link, .bereich-1 #menu3 a:visited, .bereich-1 #menu3  a:active{
font-size:1.7rem;
line-height:2rem;
letter-spacing:.1rem;
}

}

/* ==================================== ab 600 pixel ================================== */
@media (min-width: 600px) {


.zelle-inhalt {
margin:2rem 3rem 3rem 3rem ;
}

.bereich-1 .text {text-align:justify;
padding:5rem 3rem 5rem 3rem;
}


.bereich-1 img {max-width: 86%;
}


.container_zelle {display:table-cell;
}


.bereich-1 #liste li {
letter-spacing:0rem;
font-size:1.6rem;
line-height:1.8rem;
}

.bereich-1 #menu3 {
width:30rem;
}

.bereich-1 #menu3  a:link, .bereich-1 #menu3 a:visited, .bereich-1 #menu3  a:active{
font-size:1.7rem;
line-height:2rem;
letter-spacing:.1rem;
}

}



/* ==================================== ab 680 pixel ================================== */
@media (min-width: 680px) {

html {
font-size:64%;
}


}

/* ==================================== ab 768 pixel ================================== */
@media (min-width: 768px) {

html {
font-size:66.5%;}




.bereich-1 #liste li {
letter-spacing:0.1rem;
font-size:1.9rem;
line-height:2.3rem;
}


.logo-b {
font-size:5rem;
line-heigt:5.4rem;
height:50vh;
}


.bereich-1 img {max-width: 44%;
}


.bereich-1 #menu2 a:link, .bereich-1 #menu2  a:visited, .bereich-1 #menu2  a:active{
font-size:1.5rem;
}



}



/* ===================================== ab 1024 pixel ================================= */

@media (min-width: 1024px) {

html {
font-size:69%;}


.container_tabelle {
padding:0rem 0rem 0rem 0rem;
border-spacing: 2rem 3rem;

}

.container_zelle {transform:rotate(0deg);
}



.bereich-1 #liste li {
font-size:1.8rem;
line-height:2rem;
padding-left:0rem;
}


.zelle-inhalt {
margin:4rem ;
}

.bereich-1 .text {text-align:justify;
padding:6rem 5rem 8rem 5rem;
}


.bereich-1 img {max-width: 45%;
}

.bereich-1 #menu2  a:link, .bereich-1 #menu2  a:visited, .bereich-1 #menu2  a:active{
font-size:1.8rem;
}

}

/* ===================================== ab 1200 pixel ================================= */

@media (min-width: 1200px) {

html {
font-size:72%;}


.logo-b {
height:60vh;
}

.zelle-inhalt {
margin:5rem ;
}

.bereich-1 .text {
padding:6rem 6rem 8rem 6rem;
}

.bereich-1 #menu2  a:link, .bereich-1 #menu2  a:visited, .bereich-1 #menu2  a:active{
font-size:2.2rem;
}


.container_tabelle {
padding:0rem 0rem 0rem 0rem;
border-spacing: 4rem 3rem;

}

}

/* ===================================== ab 1420 pixel ================================= */

@media (min-width: 1420px) {

html {
font-size:82%;
}

.zelle-inhalt {
margin:5rem 8rem 4rem 8rem ;
}

.bereich-1 .text {
padding:6rem 7.5rem 8rem 7.5rem;
}

}





/* +  +  +  +  + +  +  +  +  +  C O D E ENDE  +  +  +  +  +  +  +  +  +  + */