@import "lightbox.css";
@font-face {
    font-family: 'HelvLight-Regular';
    src:url('../font/HelvLight-Regular.ttf.woff') format('woff'),
    url('../font/HelvLight-Regular.ttf.svg#HelvLight-Regular') format('svg'),
    url('../font/HelvLight-Regular.ttf.eot'),
    url('../font/HelvLight-Regular.ttf.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}
/* ###################
Reset / Allgemein
################### */
html { min-height:100%; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, em, img, small, strike, strong, sub, sup, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, footer, header, menu, nav, output, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display:block; }
ol, ul { list-style:none; }
table { border-collapse:collapse; border-spacing:0; }
th { font-weight:bold; text-align:center; }
strong { font-weight:bold; }
body { height: 100%; margin: 0 auto; text-align:center; font-family:verdana, sans-serif; color:#333; font-size:16px; line-height:30px;
    background:#dedede;
    background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dedede), color-stop(100%, #8d8d8d));
    background:-webkit-linear-gradient(#dedede, #8d8d8d);
    background:-moz-linear-gradient(#dedede, #8d8d8d);
    background:-o-linear-gradient(#dedede, #8d8d8d);
    background:linear-gradient(#dedede, #8d8d8d); }
h1, .h1 { padding-bottom:36px; font-size:36px; line-height:1.4; font-family:'HelvLight-Regular', verdana, sans-serif; font-weight:normal; }
h2 { padding-bottom:24px; font-size:30px; line-height:1.4; font-family:'HelvLight-Regular', verdana, sans-serif; }
h3 { line-height:30px; font-size:16px; }
h4 { font-size:12px; font-weight:bold; }
p { padding-bottom:25px; }
a { color:#000; text-decoration:none; font-weight:bold; }
a:hover { text-decoration:underline; color:#000; }
a.underline { text-decoration:underline; }
hr { background-color:#323947; border:0 none; height:1px; margin:0px 0 30px 0; }
.note { font-size: 12px; }
/* ###################
Layout
################### */
.wrapper { margin:0 auto; width:980px; text-align:center;
    -webkit-box-shadow:0px 3px 5px #888888;
    -moz-box-shadow:0px 3px 5px #888888;
    box-shadow:0px 3px 5px #888888; }
header { position:fixed; top:0; width:980px; z-index:5; box-shadow:0 0 13px rgba(0, 0, 0, 0.7); background-color:#000; text-align:left; }
.logoarea { display:block; min-height:90px; padding:10px 40px; color:#fff; }
header .logo { display:block; float:left; }
.logoarea .telefon { padding-left:500px; font-size:14px; }
.logoarea .telefon div { display: inline-block; width:40px; height:40px; background: url(../images/sprite_icon.png) no-repeat 0 0; padding-left:10px; vertical-align: bottom;
	-webkit-animation: ring 3800ms linear infinite;
    animation: ring 3800ms linear infinite;}
.logoarea .telefon a { color:#fff; font-size:24px; font-weight:normal; line-height:42px; text-decoration:none; }
/* Navigation 1. Ebene */
.mobile-menu, .toggle-mobile { display:none; }
header nav { height:50px; background-color:#fff; padding:0 40px; }
header nav ul { display:table; position:relative; }
header nav ul li { display:table-cell; position:relative; }
header nav ul li a { position:relative; display:block; margin-top:5px; padding:0px 14px 0px 30px; background:url(../images/sprite_icon.png) no-repeat 5px -45px; color:#000; font-size:16px; font-weight:normal; line-height:40px; text-decoration:none; text-transform:uppercase; white-space:nowrap; }
header nav ul li:hover a { text-decoration:none }
header nav ul li a.active { background-color:#000; color:#cea920; }
/* Navigation 2. Ebene */
header nav ul ul { display:none; }
header nav ul ul li { display:block; min-width:200px; border-bottom:1px dotted #cea920; padding: 0 28px; }
header nav ul ul li:last-child { border-bottom:none; }
header nav ul ul li a { height:40px !important; margin:0; padding:0; background:none; font-size:16px; text-transform:none; }
header nav ul ul li:hover a { color:#cea920; text-decoration:none }

@media only screen and (min-width: 979px) {
	header nav ul li:first-child:hover a { height:40px; }
	header nav ul li:hover a { height:45px; background-color:#000; color:#fff;}
	header nav li:hover ul { display:block; position:absolute; top:50px; left:0px; padding:0px; background-color:#000; text-align:left; }
	header nav ul li.language:hover a { height:17px; background-color:transparent; }
	header nav ul ul li:hover { background-color:#fff; text-decoration:none }
	header nav ul ul li:hover a { height:40px; padding-bottom: 0px !important; background-color:#fff; text-decoration:none }
}

.language a { width:25px; height:17px; padding-left:30px; }
.nl a { background:url("../images/icon_language.png") no-repeat 10px 0px; }
.de a { background:url("../images/icon_language.png") no-repeat 10px -30px; }
/* ###################
Visual
################### */
.visual { position:relative; height:360px; margin:160px auto 0 auto; background-color:#fff; }
@-webkit-keyframes cf3FadeInOut {
    0% { opacity:1; }
    17% { opacity:1; }
    25% { opacity:0; }
    80% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes cf3FadeInOut {
    0% { opacity:1; }
    17% { opacity:1; }
    25% { opacity:0; }
    80% { opacity:0; }
    100% { opacity:1; }
}
@-o-keyframes cf3FadeInOut {
    0% { opacity:1; }
    17% { opacity:1; }
    25% { opacity:0; }
    80% { opacity:0; }
    100% { opacity:1; }
}
@keyframes cf3FadeInOut {
    0% { opacity:1; }
    17% { opacity:1; }
    25% { opacity:0; }
    80% { opacity:0; }
    100% { opacity:1; }
}

#multiteaser { position:relative; }
#multiteaser img { position:absolute; left:0;
    -webkit-animation-name: cf3FadeInOut;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: cf3FadeInOut;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;
    -o-animation-name: cf3FadeInOut;
    -o-animation-timing-function: ease-in-out;
    -o-animation-iteration-count: infinite;
    animation-name: cf3FadeInOut;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

#multiteaser img {
    -webkit-animation-duration: 36s;
    -moz-animation-duration: 36s;
    -o-animation-duration: 36s;
    animation-duration: 36s;
}
#multiteaser img:nth-of-type(1) {
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    animation-delay: 24s;
}
#multiteaser img:nth-of-type(2) {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    animation-delay: 18s;
}
#multiteaser img:nth-of-type(3) {
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    animation-delay: 12s;
}
#multiteaser img:nth-of-type(4) {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    animation-delay: 6s;
}
#multiteaser img:nth-of-type(5) {
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -o-animation-delay: 0s;
    animation-delay: 0s;
}


/* ###################
Teaser / Content
################### */

.contentBlock { clear:both; min-height:300px; position:relative; background:#fff; padding:30px 39px 30px 39px; text-align:left; }
.teaserBlock  { margin:0 -25px 25px -15px; }
.teaserBox { position:relative; display:inline-block; width:250px; height:225px; margin:15px; padding:15px; font-size:14px; line-height:1.8; vertical-align:top;
    -webkit-box-shadow: inset 0 0 5px 0px #cecece;
    -moz-box-shadow: inset 0 0 5px 0px #cecece;
    box-shadow: inset 0 0 5px 0px #cecece;
    background-color: #fbfbfb;
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #ebebeb));
    background: -webkit-linear-gradient(#ffffff, #ebebeb);
    background: -moz-linear-gradient(#ffffff, #ebebeb);
    background: -o-linear-gradient(#ffffff, #ebebeb);
    background: linear-gradient(#ffffff, #ebebeb);
}
.teaserBox a { font-weight:normal; text-decoration:none; outline:none; }
.teaserBox a:hover { color:#000; }
.teaserBox li { padding-left:12px; font-size:12px; }
.teaserBox li:before { display:inline-block; content:"- "; width:8px; margin-left:-10px; }
.tipp { position:absolute; right:-20px; top:-20px; width:90px; height:90px; padding-top:10px; background: url(../images/tipp.png) no-repeat 0 0; color:#cea920; font-size:12px; font-weight:bold; text-align:center; line-height:14px; }

address { }
.contentBlock dl { display:inline-block; width:49%; vertical-align:top; }
.contentBlock dd { margin-top:10px; font-weight:bold; }
.contentBlock dt { padding-left: 100px; }
.contentBlock dt a { color:#333; text-decoration:none; }

#map { float:right; overflow:hidden; height:400px; width:400px; margin-top:20px; }
#maps { width:250px; height:180px; }

figure { display:inline-block; margin:0 20px 30px 0; }
figure a { text-decoration:none;  }
figcaption { position:relative; padding-right:30px; font-size:12px; line-height:14px; text-align:right; }
figcaption div { position:absolute; top:-20px; right:-10px; width:36px; height:34px; background:url(../images/sprite_icon.png) no-repeat 100% -670px; }

.priceTable { margin-bottom:50px; }
.priceTable th { padding:5px 20px 5px 0; text-align:left; font-weight:normal; }
.priceTable thead th { padding:5px 10px; font-size:18px; text-align:center; }
.priceTable h3 { color:#cea920; font-size:16px; }
.priceTable th, .priceTable td { border-bottom:1px solid #000; border-right:1px solid #000; }
.priceTable td:last-child, .priceTable th:last-child { border-right:0; }
.priceTable .noBorder td, .priceTable .noBorder th { border-bottom:0; }
.priceTable td { padding: 0 10px; vertical-align:middle; text-align:center; }
.priceTable .on { width:100%; height:34px; background:url(../images/sprite_icon.png) no-repeat 80% -48px; }
.priceTable .price { vertical-align:middle; text-align:center; }
.priceTable .price div { position:absolute; top:0; left:0; min-height:120px; width:120px;  }
.priceTable tfoot td, .priceTable .price { font-size:18px; }
.priceTable .currency, .priceTable .currency { font-size:11px; }


.priceOverview { position:relative; min-height:60px; margin:0px auto 40px auto; background:#fff; padding:20px;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

}
.priceOverview p, .priceOverview h3 { width:80%; }
.priceOverview h3 { color:#cea920; font-size:18px; }
.priceOverview .price { box-sizing:border-box; position:absolute; width:100px; height:100px; right:30px; top:30px; padding-top:30px; background-color: #F9B231;
    border-radius: 50px;

    box-shadow: 2px 2px 3px #666;
    -webkit-box-shadow:2px 2px 3px #666;
    -moz-box-shadow:2px 2px 3px #666;

    text-align:center; font-weight:bold; font-size:20px; line-height:20px;
    -moz-transform: scale(1) rotate(340deg) translate(0px, 0px) skew(0deg, 0deg);
    -webkit-transform: scale(1) rotate(340deg) translate(0px, 0px) skew(0deg, 0deg);
    -o-transform: scale(1) rotate(340deg) translate(0px, 0px) skew(0deg, 0deg);
    -ms-transform: scale(1) rotate(340deg) translate(0px, 0px) skew(0deg, 0deg);
    transform: scale(1) rotate(340deg) translate(0px, 0px) skew(0deg, 0deg);
}
.priceOverview .currency { font-size:11px; }
.priceOverview .priceText { font-size:14px; padding-top:25px;
    -moz-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
    -webkit-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
    -o-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
    -ms-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
    transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
}

/* ###################
Footer
################### */
footer { clear:both; background-color:#000; text-align:left; }
footer nav { display:table; padding:20px 0 20px 40px; }
footer nav ul li { display:table-cell; padding-right:20px; }
footer ul li a { padding-left:18px; background:url(../images/sprite_icon.png) no-repeat 0px -88px; color:#fff; font-size:16px; line-height:28px; font-weight:normal; text-decoration:none; text-transform:uppercase; }
footer ul li a:hover { color:#cea920; text-decoration:none }
footer ul ul { display:block; }
footer ul ul li { display:block; float:none; }
footer ul li li a { background:none; font-size:14px; text-transform:none; white-space:nowrap; }
/* ###################
Kontaktdaten
################### */
.contactArea { min-height:170px; padding:20px; background:#cea920; text-align:left; }
.contactBox { display:inline-block; width:266px; height:180px; padding:0 15px; border-right:1px solid #000; font-size:16px; vertical-align:top; }
.contactBox:last-child { border-right:none; }
.contactIcon { display:block;  padding:0 0 0 50px; min-height:50px; background-image:url(../images/sprite_icon.png); background-repeat:no-repeat }
.contactIcon a { white-space:nowrap; }
.contactIcon.telefon { min-height:40px; padding-top:10px; }
.telefon { background-position:0 -120px; }
.telefon a, .mail a, .fb a { color:#333; font-weight:normal; text-decoration:none; }
.fax { background-position:0px -190px; line-height:50px; }
.mail { background-position:0px -260px; line-height:50px; }
.adress { background-position:0px -320px; }
.fb { background-position:0px -566px; }

.contactBox dt { width:50px; display:inline-block; }
.contactBox dd { display:inline; }
/* ###################
Mobile
################### */

@media only screen and (max-width: 979px) {
    .wrapper { width:100% }
    .logoarea { padding:10px; color:#fff; }
    .logoarea img { max-width:250px; height:auto; }
    .logoarea .telefon { display:inline-block; padding-left:30px; margin-top:-10px; }
    .logoarea .telefon div { font-size:18px; }
    header nav { height:0; }
    header { position:fixed; width:100%; height:80px; min-height:80px; z-index:5; }
  	
	.toggle-mobile { position:fixed; top:15px; right:15px; display:block ;width:40px; height:32px; cursor:pointer; opacity:0; z-index:20; -webkit-touch-callout:none; }
	.toggle-mobile:checked ~ .mobile-menu span { opacity:1; transform:rotate(45deg) translate(-6px, -14px); background:#cea920; }
	.toggle-mobile:checked ~ .mobile-menu span:nth-last-child(3) { opacity:0; transform:rotate(0deg) scale(0.2, 0.2); }
	.toggle-mobile:checked ~ .mobile-menu span:nth-last-child(2) { transform:rotate(-45deg) translate(-6px, 14px); }
	.toggle-mobile:checked ~ .wrapper .site-menu { transform:translate(0%,0); }

	.mobile-menu { position:fixed; top:20px; right:20px; display:block; z-index:10; -webkit-user-select:none; user-select:none; }
	.mobile-menu .burger { position:relative; display:block; width:33px; height:4px; margin-bottom:5px; background:#cea920; border-radius:3px; z-index:1;
	  transform-origin:4px 0px; transition:transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease; }
	.mobile-menu .burger:first-child { transform-origin: 0% 0%; }
	.mobile-menu .burger:nth-last-child(2) { transform-origin:0% 100%; }
	
	.site-menu { position:absolute; top:80px; left:0; width:100%; margin:0; padding-top:20px; padding-bottom:20px; background:#fff; list-style-type:none; -webkit-font-smoothing:antialiased; transform-origin:0% 0%; transform:translate(-105%, 0); transition:transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); z-index:9; overflow-y:auto; -webkit-overflow-scrolling:touch; box-shadow:0 0 13px rgba(0, 0, 0, 0.7); }
	.site-menu li { display:block; padding:0 10px; font-size:22px; text-align:left; }
	.site-menu li a { position:relative; height:auto; display:block; margin:0; padding:0px 14px 0px 30px; background:url(../images/sprite_icon.png) no-repeat 5px -45px; color:#000; font-size:16px; line-height:40px; text-decoration:none; text-transform:uppercase; color:#000; text-decoration:none; }   
	.site-menu li a.active { color:#cea920; } 
	.site-menu ul { display: none}
	
	nav li:active ul,
	nav li:focus ul,
	nav li:focus-within ul { display:block;}
	.site-menu li li { border:none; }
	.site-menu li li a { padding:0 0 0 40px; background:none; }
    .toggle-mobile:checked ~ .wrapper header.sticky nav { position:absolute; top:80px; left:0; width:100%; height:100vh; overflow-y:auto; }
    .toggle-mobile:checked ~ .wrapper header.sticky .site-menu { position:absolute; top:0; left:0; }

    .visual { height:250px; margin-top:80px; }
    .visual img { width:100%; height:auto; }
    .contentBlock dl { display:block; width:100%; vertical-align:top; }
    .contentBlock { padding:30px 20px; text-align:left; }
    .teaserBlock  { margin:0 0px 20px 0px; }
    .teaserBox { width:100%; height:auto; margin:10px 0; box-sizing:border-box; }
    .teaserBox img { float:left; margin-right:20px; }
    .teaserBox li { font-size:14px; }
    .priceOverview .price { right:10px; top:20px; width:80px; height:80px; border-radius:40px; padding-top:20px; font-size:16px; }
    .priceOverview .priceText { font-size:12px; padding-top:15px; }
    h1 { padding-bottom:20px; font-size:28px; }
    h2 { font-size:22px; }
    .contactArea { padding: 20px 0px; }
    .contactBox { display:block; height:auto; margin-top:20px; border-right:none; font-size:14px; }
    .contactBox dl { display:block; height:50px; }
    footer { display:none;}
}
@media only screen and (max-width: 690px) {
	header { height:auto; }
    .logoarea .telefon { display:block; margin-top:5px; padding-left:0; }
    #gmap_canvas {max-width:690px !important; height:150px !important;}
}

@media only screen and (min-width: 421px) and (max-width: 690px) {
	header  { height:94px; }
    header .logo { width:93px; float:left; margin-right:20px; overflow:hidden; }
    .logoarea .telefon { width:90%; line-height: 14px; }
	.logoarea .telefon a { font-size:18px; }
	#gmap_canvas {max-width:400px !important; }
	
}
@media only screen and (max-width: 420px) {
	 header .logo { float:none; }
	 .logoarea img { max-width:230px; }
	 .logoarea .telefon { line-height:16px; }
	 .logoarea .telefon a { font-size:20px; }
	.visual { height:150px; margin-top:150px; }
	.contentBlock { padding:15px 20px; }
	.teaserBox img { float:none; width:100%; margin-right:0; }
    figcaption { display:none; }
    figure { width:100%; margin:0; }
    figure img { width:100%; }
    #gmap_canvas {max-width:420px !important;}
}

@-webkit-keyframes ring {
  0% {-webkit-transform:rotate(0deg);}
  2% {-webkit-transform:rotate(-45deg);}
  4% {-webkit-transform:rotate(0deg);}
  6% {-webkit-transform:rotate(-45deg);}
  8% {-webkit-transform:rotate(0deg);}
  10% {-webkit-transform:rotate(-45deg);}
  12% {-webkit-transform:rotate(0deg);}
  100% {-webkit-transform:rotate(0deg);}
}

@keyframes ring {
  0% {transform:rotate(0deg);}
  2% {transform:rotate(-45deg);}
  4% {transform:rotate(0deg);}
  6% {transform:rotate(-45deg);}
  8% {transform:rotate(0deg);}
  10% {transform:rotate(-45deg);}
  12% {transform:rotate(0deg);}
  100% {transform:rotate(0deg);}
}

/* ###################
Print
################### */
@media print {
    body { background:#fff; }
    .wrapper { width:100%;
        -webkit-box-shadow:none;
        -moz-box-shadow:none;
        box-shadow:none; }
    header nav { display:none;}
    .mobile-menu { display:none; }
    footer { display:none;}
    .gallery { display:none;}
}