@charset "UTF-8";
/* CSS Document */
/* *********************************************** Standard*/
html{
	font-size: 100%;
}

body{
	margin: 0;
	padding: 0;
	background-color: rgba(250,250,250,1.00);
}
img{
	max-width: 100%;
}
/* *********************************************** Standard ENDE */
/* *********************************************** Carousel */
div.fortjetzt{
	
}

/* *********************************************** Carousel ENDE */
/* *********************************************** Develop */
/* Hilfsklassen für die Entwicklungsarbeit */
.rand{
	border: 1px solid rgba(207,18,18,0.41);
}
.raum{
	height: 60px;
}
/*
* Developfenster für die Anzeige von
* Scriptvariablen, Infos und Zustände
* Wird von Script gesteuert
*/
.develop{
	position: fixed;
	bottom: 60px !important;
	left: 20px;
	width: 300px;
	height: auto;
	padding: 10px 14px; 
	background-color: rgba(200,221,222,1.00);
}
.develop_aus{
	display: none;
}
/* *********************************************** Develop ENDE*/

/* *********************************************** Typo */
/*
 * Roboto Mono      100 300 400 500 700
 * Roboto           100 300 400 500 700 900
 */


/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ak Schriften umgestellt, Steuerung der Schriftabstände*/
h1{
    font-family: "Roboto Mono", "Andale Mono", "Lucida Console", Monaco, "Courier New", "monospace";
    font-style: normal;
    font-weight: 100;
    font-size: calc(50px + 0.5vw);
    
    margin: 4vw 0 4vw 0;
}
h2{
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-style: normal;
    font-weight: 700;
    font-size: calc(36px + 0.5vw);
    
    margin: 0 0 3vw 0;
}
h3{
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-style: normal;
    font-weight: 300;
    font-size: calc(22px + 0.5vw);
    
    margin: 0 0 3vw 0;
}
h4{
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-style: normal;
    font-weight: 300;
    font-size: calc(20px + 0.5vw);
    
    margin: 0 0 1vw 0;
}
h5{
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-style: normal;
    font-weight: 300;
    font-size: calc(16px + 0.5vw);
    
    margin: 0 0 1vw 0;
}
p{
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-style: normal;
    font-weight: 100;
    font-size: calc(16px + 0.5vw);
    line-height: calc(22px + 0.5vw)!important;
    
    margin: 0 0 2vw 0;
}
ul{
	font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-style: normal;
    font-weight: 100;
    font-size: calc(16px + 0.5vw);
    line-height: calc(22px + 0.5vw)!important;
}
ul li{
	font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-style: normal;
    font-weight: 100;
    font-size: calc(16px + 0.5vw);
    line-height: calc(22px + 0.5vw)!important;
}
kopfNavi{
	
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ak das Tag adresse gibt es nicht mehr, deshalb div.adresse */
div.adresse{
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-style: italic;
    font-weight: 100;
    font-size: calc(16px + 0.5vw);
}
div.adresse span{
    font-weight: 400;
    color: rgba(0,159,227,1.00);
}
aside div.adresse{
	margin: 30px 0 0 20px;
}

/* *********************************************** Typo Ende */

	
/* *********************************************** Main */
main{
    position: relative;
    width: 80vw;
    margin: 120px auto 60px auto;
}
figure{
	border: 1px solid rgba(150,150,150,0.15);
}

/* *********************************************** Main ENDE */



/* *********************************************** Footer */
footer{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 50px;
	padding: 0 0 0 90px;
    background-color: rgba(255,255,255,1.00);
    /* border: 1px solid red;*/
}
    /* ******************************************* Footer Navi */
footer div ul{
    position: relative;
    width: 500px;
    list-style: none;
    margin: 10px 0 20px 0;            /* +++++++++++++++++++++++++ ak Abstand Oben 10px */
    padding: 0;
    display: flex;
}
footer div ul li a:visited,
footer div ul li a:link,
footer div ul li a:active{
    display: block;
    margin: 0 30px 0 0;
    color: rgba(73,70,66,1.00);
    text-decoration: none;
}
footer div ul li a:hover{
    color: rgba(0,159,227,1.00);
    border-bottom: 3px solid rgba(0,159,227,1.00);
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ak Aktiv-Klasse eingesetzt */
footer div ul li.aktiv{
    margin: 0 30px 0 0;
    color: rgba(0,159,227,1.00);
    border-bottom: 3px solid rgba(0,159,227,1.00);
}
    /* ******************************************* Footer Navi Ende */
/* *********************************************** Footer Ende */



/* *********************************************** Navi */
nav{
    position: fixed;
    top: 0;
    left: 0;
    padding: 50px 0 0 40px;
    width: 100%;
    height: auto;
    background-color: rgba(231,231,231,1.00);
}

nav ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

nav ul li a:link,
nav ul li a:active,
nav ul li a:visited{
    display: block;
    width: auto;
    position: relative;
    padding: 0 10px 4px 10px;

    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-style: normal !important;
    font-weight: 300 !important;
    font-size: calc(20px + 0.4vw);
    text-decoration: none;
    color: rgba(112,112,112,1.00);
    margin: 0 20px 0 40px;
}
nav ul li a:hover{
    color: rgba(0,159,227,1.00);
}

.pcOut{
    display: block;
}

div.naviRechts{
    display: block;
    position: fixed;
    padding: 8vw 0 0 0;
    margin-bottom: 10px;
    top: 0;
    right: -500px;
    background-color: rgba(231,231,231,1.00);
    height: auto;
}

div.naviRechts ul{
    list-style: none;
    margin-bottom: 10px;
    padding: 20px;
 
    font-size: calc(20px + 0.2rem);
    font-family: 'Roboto', "Helvetiva Neue", Helvetica, Arial, "sans serif";
    font-style: normal;
    font-weight: 300;
}

div.naviRechts ul li a:link,
div.naviRechts ul li a:active,
div.naviRechts ul li a:visited{
    color: rgba(112,112,112,1.00);
    text-decoration: none;
}

div.naviRechts ul li a:hover{
    color: rgba(0,159,227,1.00);
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ak Aktiv-Klasse und Navi Spitze-Klammer eingesetzt */
div.naviRechts ul li.aktiv{
    color: rgba(0,159,227,1.00);
}

div.naviRechts ul li a::before,
div.naviRechts ul li a::after {
    display:                inline-block;
    opacity:                0;
    -webkit-transition:     -webkit-transform 0.3s, opacity 0.2s;
       -moz-transition:        -moz-transform 0.3s, opacity 0.2s;
            transition:             transform 0.3s, opacity 0.2s; 
}
div.naviRechts ul li a::before {
    margin-right:           10px;
    content:                '<';
    -webkit-transform:      translateX(20px);
       -moz-transform:      translateX(20px);
            transform:      translateX(20px);
}
div.naviRechts ul li a::after {
    margin-left:            10px;
    content:                '>';
    -webkit-transform:      translateX(-20px);
       -moz-transform:      translateX(-20px);
            transform:      translateX(-20px); 
}
div.naviRechts ul li a:hover::before,
div.naviRechts ul li a:hover::after,
div.naviRechts ul li a:focus::before,
div.naviRechts ul li a:focus::after {
    opacity:                1;
    -webkit-transform:      translateX(0px);
       -moz-transform:      translateX(0px);
            transform:      translateX(0px); }



label.hamburg {
    position: fixed;
    top: 15px;
    right: 20px;
    display: block;
    background: rgba(85,85,85,1.00); 
    width: 75px; 
    height: 50px; 
    border-radius: 4px;
    padding: 0;

    margin-left: auto;
    margin-right: auto;
}


input#hamburg {display:none}
.line { 
   position: absolute; 
   left:10px;
   height: 4px; width: 55px; 
   background: #fff; border-radius: 2px;
   display: block; 
   transition: 0.5s; 
   transform-origin: center; 
}

.line:nth-child(1) { top: 12px; }
.line:nth-child(2) { top: 24px; }
.line:nth-child(3) { top: 36px; }

#hamburg:checked + .hamburg .line:nth-child(1){
   transform: translateY(12px) rotate(-45deg);
}

#hamburg:checked + .hamburg .line:nth-child(2){
   opacity:0;
}

#hamburg:checked + .hamburg .line:nth-child(3){
   transform: translateY(-12px) rotate(45deg);
}
/* *********************************************** Navi ENDE*/