html, body { margin: 0; background-color:#FBEACC; color:#000000; text-align: left; height:100.1%; font-family: 'myOpen', sans-serif; font-size:18px; line-height:24px; }
H1{font-size:40px; line-height:44px; font-style:normal;}
H2{font-size:36px; line-height:40px; font-style:normal;}
H3{font-size:24px; line-height:30px; font-style:normal;}
@media screen and (max-width: 780px) {
H1{font-size:32px; line-height:38px; font-style:normal;}
H2{font-size:28px; line-height:36px; font-style:normal;}
H3{font-size:18px; line-height:22px; font-style:normal;}
html, body { font-size:16px; line-height:24px; }
}
#startwrapper{position:fixed; z-index:1; width:100%; height:100%; top:0; left:0; background-image: url("./../images/wand.jpg");background-size:100% auto;}
#header{position:fixed; z-index:10; border-bottom:1px solid #D40A22; background-color:#FBEACC; width:100%; top:0; left:0; height:125px}
#header .inner{width:100%; max-width:1480px; position:relative; margin: 25px auto 0 auto}
#logo{width:100%; max-width:396px;}
#logo IMG{width:100%; max-width:396px; height:auto; }
#navigationschalter{width:90px; position:absolute; right:0; top:50px; z-index:9999999999999; display: none;}
.hamburg { display: block; width: 35px; height: 35px; position: relative; margin-left: auto; margin-right: auto; cursor:pointer; float:left;}
.hamburgbez { position: relative; color:#D40A22; float:right; padding:7px 0; cursor:pointer; }
.line { position: absolute; left:5px; height: 3px; width: 25px; background: #D40A22; border-radius: 2px; display: block; transition: 0.5s; transform-origin: center; }
.line:nth-child(1) { top: 8px; }
.line:nth-child(2) { top: 16px; }
.line:nth-child(3) { top: 24px; }
.hamburg.checked .line:nth-child(1){ transform: translateY(8px) rotate(-45deg); background: #D40A22;}
.hamburg.checked .line:nth-child(2){ opacity:0;}
.hamburg.checked .line:nth-child(3){ transform: translateY(-8px) rotate(45deg); background: #D40A22;}
.hamburgbez.checked { color:#D40A22; }
#navigation{background-image: url("./../images/trans.png"); width:100%; position:fixed; left:0; top: 125px; z-index:9; padding:25px 0; }
#navigation.display{display:block; }
#navigationinner{ position:relative; width:96%; max-width:1080px; text-align:left; margin:0 auto; padding:0 2%; }
#navigationinner #menupunkte {margin-top: 150px; position:relative; width:100%; }
#navigationinner #menupunkte ul {width:100%; list-style:none; margin:0; padding:0;}
#navigationinner #menupunkte ul li{padding:0 0 10px 20px; background-image: url("./../images/bulett.png"); background-repeat:no-repeat; background-position:0 12px; cursor:pointer; color:#FFFFFF}
.punkt1, .punkt3, .punkt5 {width:38%; float:left; }
.punkt2, .punkt4, .punkt6 {width:58%; float:left;}
.punkt7 {width:38%; float:none; }
#navigationinner #menupunkte2 { border-top:1px solid #FBEACC; margin-top:15px; padding-top:15px; font-size:14px}
#navigationinner #menupunkte2 .helper {display:inline-block; float:right}
#navigationinner #menupunkte2 .helper .spacer{padding: 0 5px; color:#FFFFFF; float:left}
#navigationinner #menupunkte2 .helper ul { list-style:none; margin:0; padding:0}
#navigationinner #menupunkte2 .helper ul li:first-child{ color:#FFFFFF; float:left; cursor:pointer;}
#navigationinner #menupunkte2 .helper ul li:last-child{ color:#FFFFFF; float:left; cursor:pointer;}
.hidden{
visibility:hidden;
opacity: 0;
top:-100%;
-moz-transition: opacity 0.5s, visibility 0.5s, top 1s;
-webkit-transition: opacity 0.5s, visibility 0.5s, top 1s;
-o-transition: opacity 0.51s, visibility 0.5s, top 1s;
transition: opacity 0.5s, visibility 0.5s, top 1s;
/*transition-delay: 1s;*/
}
.shown{
visibility:visible;
opacity: 1;
top:0;
-moz-transition: opacity 0.5s, visibility 0.5s, top 1s;
-webkit-transition: opacity 0.5s, visibility 0.5s, top 1s;
-o-transition: opacity 0.5s, visibility 0.5s, top 1s;
transition: opacity 0.5s, visibility 0.5s, top 1s;
/*transition-delay: 1s;*/
}
@media screen and (max-width: 1280px) {
#navigationschalter{right:1%;display:block}
#logo{padding: 0 1%; width:96%;}
#navigationinner #menupunkte ul li{padding:0 2% 10px 2%; height:50px}
.punkt1, .punkt3, .punkt5 {width:36%; float:left; }
.punkt2, .punkt4, .punkt6 {width:56%;float:left;}
.punkt7 {width:58%; float:left; }
}
@media screen and (max-width: 1024px) {
#startwrapper{background-size:120% auto;}
#navigationinner #menupunkte ul li{padding:0 2% 10px 2%;}
}
@media screen and (max-width: 990px) {
#navigationinner #menupunkte ul li{ height:50px}
}
@media screen and (max-width: 780px) {
#startwrapper{background-size:180% auto;}
#navigation{font-size:14px; line-height:22px;}
#navigationinner #menupunkte ul li{background-position:0 8px;}
#navigation{ top: 85px;}
#header{height:85px}
#navigationinner #menupunkte {margin-top: 130px;}
#logo IMG{ max-width:180px;}
#navigationschalter{top:8px}
#navigationinner #menupunkte2 { font-size:12px}
#navigationinner #menupunkte ul li{padding:0 3% 10px 3%; height:40px }
.punkt1, .punkt3, .punkt5 {width:38%; float:left; }
.punkt2, .punkt4, .punkt6 {width:50%; float:left;}
.punkt7 {width:58%; float:left; }
}
@media screen and (max-width: 500px) {#navigationinner #menupunkte {margin-top: 160px;}
#navigationinner #menupunkte ul li{padding:0 3% 10px 3%; height:30px }
#startwrapper{background-size:220% auto;}
.punkt1, .punkt3, .punkt5, .punkt7 {width:100%; float:none;}
.punkt2, .punkt4, .punkt6 {width:100%; float:none;}
}
#contentblock{width:100%; max-width:1480px; position:absolute; top:50%; left:50%; z-index: 8; transform: translate(-50%, -40%); }
@media screen and (max-width: 1480px) {
#contentblock{width:96%; padding:0 2%}
}
#start{width:100%; display:table; table-layout:fixed; margin-bottom:35px !Important}
#start IMG{width:100%; height:auto; max-width:768px; }
#startL{display:table-cell; vertical-align:top; width:36%; padding: 45px 2% 25px 2%; background-color: #D40A22; position:relative; border:1px solid #FBEACC;}
#startL #mainnavigation #mainnavigationinner #mainmenupunkte { position:relative; width:100%; }
#startL #mainnavigation #mainnavigationinner #mainmenupunkte ul {width:100%; list-style:none; margin:0; padding:0;}
#startL #mainnavigation #mainnavigationinner #mainmenupunkte ul li{padding:0 0 10px 20px; background-image: url("./../images/bulett.png"); background-repeat:no-repeat; background-position:0 12px; cursor:pointer; color:#FFFFFF}
#startL #mainnavigation #mainnavigationinner #mainmenupunkte ul li:hover{color: #FBEACC; }
#startL #mainnavigation #mainnavigationinner #mainmenupunkte2 {width:92%; border-top:1px solid #FBEACC; padding-top:15px; margin:15px 4% 0 4%; font-size:14px; position: absolute !important; left:0; bottom:35px}
#startL #mainnavigation #mainnavigationinner #mainmenupunkte2 .mainhelper {display:inline-block; float:right}
#startL #mainnavigation #mainnavigationinner #mainmenupunkte2 .mainhelper .spacer{padding: 0 5px; color:#FFFFFF; float:left}
#startL #mainnavigation #mainnavigationinner #mainmenupunkte2 .mainhelper ul { list-style:none; margin:0; padding:0}
#startL #mainnavigation #mainnavigationinner #mainmenupunkte2 .mainhelper ul li:first-child{ color:#FFFFFF; float:left; cursor:pointer;}
#startL #mainnavigation #mainnavigationinner #mainmenupunkte2 .mainhelper ul li:last-child{ color:#FFFFFF; float:left; cursor:pointer;}
#startR{display:table-cell; vertical-align:top; width:56%; padding-left:4%; max-width:none; position:relative; margin-bottom:35px}
#startR #content1 {text-align:left; position:absolute; display:none; left:6%; background-color:#FBEACC; padding:25px 2%; border:1px solid #D40A22; width:88%; margin-bottom:35px}
#startR #content2 {text-align:left; position:absolute; display:none; left:6%; background-color:#FBEACC; padding:25px 2%; border:1px solid #D40A22; width:88%; margin-bottom:35px}
#startR #content3 {text-align:left; position:absolute; display:none; left:6%; background-color:#FBEACC; padding:25px 2%; border:1px solid #D40A22; width:88%; margin-bottom:35px}
#startR #content4 {text-align:left; position:absolute; display:none; left:6%; background-color:#FBEACC; padding:25px 2%; border:1px solid #D40A22; width:88%; margin-bottom:35px}
#startR #content5 {text-align:left; position:absolute; display:none; left:6%; background-color:#FBEACC; padding:25px 2%; border:1px solid #D40A22; width:88%; margin-bottom:35px}
#startR #content6 {text-align:left; position:absolute; display:none; left:6%; background-color:#FBEACC; padding:25px 2%; border:1px solid #D40A22; width:88%; margin-bottom:35px}
#startR #content7 {text-align:left; position:absolute; display:none; left:6%; background-color:#FBEACC; padding:25px 2%; border:1px solid #D40A22; width:88%; margin-bottom:35px}
#startR #content8 {text-align:left; position:absolute; display:none; left:6%; background-color:#FBEACC; padding:25px 2%; border:1px solid #D40A22; width:88%; margin-bottom:35px}
#startR #content9 {text-align:left; position:absolute; display:none; left:6%; background-color:#FBEACC; padding:25px 2%; border:1px solid #D40A22; width:88%; margin-bottom:35px}
#startR H1{ color:#D40A22;font-size:22px; line-height:28px; width:100%; border-bottom:1px solid #D40A22; margin-bottom:25px; padding-bottom:15px}
#startR H2{ color:#D40A22;font-size:20px; line-height:26px; width:100%; margin-bottom:15px; }
#startR table{margin-top:15px;}
#startR a{color:#000000; text-decoration:none}
#startR td{text-align:left;}
#startR td:first-child{padding-right:25px;}
#startR #content1 IMG,
#startR #content2 IMG,
#startR #content3 IMG,
#startR #content4 IMG,
#startR #content5 IMG,
#startR #content6 IMG,
#startR #content7 IMG,
#startR #content8 IMG,
#startR #content9 IMG {width:100%; height:auto; max-width:40%; float:left; padding: 3px 25px 15px 0}
.textfloater{float:right; width:55%}
@media screen and (max-width: 780px) {
#startR #content1 IMG,
#startR #content2 IMG,
#startR #content3 IMG,
#startR #content4 IMG,
#startR #content5 IMG,
#startR #content6 IMG,
#startR #content7 IMG,
#startR #content8 IMG,
#startR #content9 IMG {width:100%; height:auto; max-width:100%; float:none; padding: 0 0 15px 0}
.textfloater{float:none; width:100%}
}
#startmobil H1{font-size:26px; line-height:30px; font-style:normal; margin-bottom:5px; color:#D40A22}
#startmobil H2{font-size:20px; line-height:24px; font-style:normal; margin-bottom:15px; color:#D40A22}
#startmobil{display:none; }
#startmobil table{margin-top:15px;}
#startmobil a{color:#000000; text-decoration:none}
#startmobil td{text-align:left;}
#startmobil td:first-child{padding-right:25px;}
@media screen and (max-width: 1280px) {
#contentblock{width:96%; max-width:1280px; position:relative; top:180px; left:50%; z-index: 8; transform:translate(-50%,0); font-size:18px; line-height:24px; }
#startL{display:none}
#startR{display:block; vertical-align:top; width:96%; padding: 0 2%; max-width:auto; text-align:center }
#startmobil{max-width:728px; display:block; width:90%; padding: 15px 2%; border:1px solid #D40A22; background-color:#FBEACC; color:#000000; margin: 25px auto 25px auto; }
#startR #content1 {left:0%; padding:25px 2%; border:1px solid #D40A22; width:96%;}
#startR #content2 {left:0%; padding:25px 2%; border:1px solid #D40A22; width:96%;}
#startR #content3 {left:0%; padding:25px 2%; border:1px solid #D40A22; width:96%;}
#startR #content4 {left:0%; padding:25px 2%; border:1px solid #D40A22; width:96%;}
#startR #content5 {left:0%; padding:25px 2%; border:1px solid #D40A22; width:96%;}
#startR #content6 {left:0%; padding:25px 2%; border:1px solid #D40A22; width:96%;}
#startR #content7 {left:0%; padding:25px 2%; border:1px solid #D40A22; width:96%;}
#startR #content8 {left:0%; padding:25px 2%; border:1px solid #D40A22; width:96%;}
#startR #content9 {left:0%; padding:25px 2%; border:1px solid #D40A22; width:96%;}
}
@media screen and (max-width: 780px) {
#contentblock{ top:140px;}
#header .inner{width:96%; padding:0 2%}
#navigationschalter{ right:2%;}
}
@media screen and (max-width: 640px) {
#contentblock{ font-size:14px; line-height:20px}
#startmobil H1{font-size:22px; line-height:26px; font-style:normal; margin-bottom:5px; color:#D40A22}
#startmobil H2{font-size:18px; line-height:22px; font-style:normal; margin-bottom:15px; color:#D40A22}
}
@media screen and (max-width: 420px) {
#startR H1{ color:#D40A22;font-size:18px; line-height:24px; }
#startR H2{ color:#D40A22;font-size:16px; line-height:22px; }
#contentblock{width:94%; }
#start{width:96%; position:relative; margin:0 auto}
#startR{width:96%; position:relative; margin:0 auto}
#startR #content1 {padding:25px 4%; width:92%;}
#startR #content2 {padding:25px 4%; width:92%;}
#startR #content3 {padding:25px 4%; width:92%;}
#startR #content4 {padding:25px 4%; width:92%;}
#startR #content5 {padding:25px 4%; width:92%;}
#startR #content6 {padding:25px 4%; width:92%;}
#startR #content7 {padding:25px 4%; width:92%;}
#startR #content8 {padding:25px 4%; width:92%;}
#startR #content9 {padding:25px 4%; width:92%;}
}
table {
border-spacing: 0px;
border: 0px;
border-collapse: separate;
}