/* weyrer - 14.03.2022 */
@import "/styles_cms.css";
@import "/style.css";

@font-face {
    font-family: 'Fira Sans';
    src: url('fonts/FiraSans-Light.woff2') format('woff2'),
        url('fonts/FiraSans-Light.woff') format('woff'),
        url('fonts/FiraSans-Light.ttf') format('truetype'),
        url('fonts/FiraSans-Light.svg#FiraSans-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fira Sans';
    src: url('fonts/FiraSans-Regular.woff2') format('woff2'),
        url('fonts/FiraSans-Regular.woff') format('woff'),
        url('fonts/FiraSans-Regular.ttf') format('truetype'),
        url('fonts/FiraSans-Regular.svg#FiraSans-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fira Sans';
    src: url('fonts/FiraSans-Thin.woff2') format('woff2'),
        url('fonts/FiraSans-Thin.woff') format('woff'),
        url('fonts/FiraSans-Thin.ttf') format('truetype'),
        url('fonts/FiraSans-Thin.svg#FiraSans-Thin') format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Julius Sans One';
    src: url('fonts/JuliusSansOne-Regular.woff2') format('woff2'),
        url('fonts/JuliusSansOne-Regular.woff') format('woff'),
        url('fonts/JuliusSansOne-Regular.ttf') format('truetype'),
        url('fonts/JuliusSansOne-Regular.svg#JuliusSansOne-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --light-grey: #BABABA;
    --dark-grey: #737373;
    --black: #000000; 
} 

* {
	margin:0px;
	padding:0px;
	box-sizing:border-box;
}


html {height:100%; background-color:#FFFFFF; max-width:100%;background-repeat:repeat; margin: 0px; padding: 0px}
body {font-family: 'Fira Sans', sans-serif; font-weight: 100; height:100%; width:100%; color:var(--dark-grey);  font-size: 16px; font-weight: normal; line-height: 19px; margin: 0 0 0 0; background-color:#FFFFFF;  margin:0px; padding:0px} 
body p, body div {}

h1 {font-size:18px; text-align:left; margin-bottom:25px; font-weight:normal; color: var(--black); letter-spacing: 0.5px}
h2 {font-size:15px; text-align:left; margin-bottom:20px; font-weight:normal}

#obenOuter {z-index:100;text-align:center; position:fixed; width: 100%; margin:0px auto; text-align:center; }
#balkenoben {height:150px; width:100%;  z-index:1; max-width:1100px; margin:0px auto; position:relative; background-color:#FFF; display: flex; justify-content: space-between}
.startseite #balkenoben {height:250px;}
#logolink {display:block; width:30%; height:100%; z-index:999;}
#logo {display:block; background-image:url(/UserFiles/structure/logo.png); background-size: contain; background-position: center; background-repeat:no-repeat; text-indent:-10000px;  z-index:2; width:100%; height:100%;}
#obenOuter .empty {height: 100%; width: 30%; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end}

#langChange {width:auto; text-align:right; float:right; margin-top:0px; position:absolute; right:20px; top:10px; text-transform:uppercase; display:none}
#langChange a {display:block; height:20px;float:left; width:auto; text-align:center; margin-right:10px}
#langChange a:hover {color:#009ee0;}
#langChange a.langChange:hover {color:#009ee0;}
#langChange a.langChange.aktiv {color:#009ee0;}
#logoMobile {display:none}
#langChangeMobile {display:none}

/* Navigation ----------------------------- */
/* empty.png in menu, damit der hover - effekt nicht rüttelt */


#navOuter {max-width:630px; width:auto; position:relative; text-align:center; height:100%; width: 30%} 
#nav {clear:both; max-width:100%; width:100%;  position:relative; z-index:3;left:0px; height:100%; padding: 15px 0}
.menu{height: 100%; text-transform: uppercase; } 
.menu ul {margin:0px; padding:0px; height: 100%; display: flex; flex-direction: column; align-items: baseline; justify-content: space-between}  
.menu ul li {padding:0px; margin:0px; list-style-type:none; width:auto; float:left; text-align:center; display:block; position:relative; z-index:99; margin-right:23px;}
.menu ul li a {font-weight:500; letter-spacing:0em; font-size:16px; display:block; width:100%; height:19px; color: var(--light-grey)}
.menu ul li a:after {content: '';position: absolute;width: 100%;transform: scaleX(0);height: 2px;bottom: 0;left: 0;background-color: var(--dark-grey);transform-origin: bottom right;transition: transform 0.25s ease-out;}
.menu ul li:hover a, .menu ul li.aktiv a {color: var(--dark-grey);}
.menu ul li:hover a:after, .menu ul li.aktiv a:after {transform: scaleX(1); transform-origin: bottom left;}
.startseite #navOuter {visibility: hidden}

.homeOuter {display: flex; justify-content: flex-end; padding-right: 10px;  text-transform: uppercase; margin-bottom: 15px; font-weight:500; letter-spacing:0em; font-size:16px; width:100%; height:19px; color: var(--light-grey)}
.homeOuter .mobileHomeButton {font-weight:500; letter-spacing:0em; font-size:16px; color: var(--light-grey); position: relative}
.homeOuter .mobileHomeButton:after {content: '';position: absolute;width: 100%;transform: scaleX(0);height: 2px;bottom: 0;left: 0;background-color: var(--dark-grey);transform-origin: bottom right;transition: transform 0.25s ease-out;}
.homeOuter:hover .mobileHomeButton{color: var(--dark-grey);}
.homeOuter:hover .mobileHomeButton:after {transform: scaleX(1); transform-origin: bottom left;}
body.startseite .mobileHomeButton {display: none} 

#slider {width:1020px; max-width:1020px;  height:100%;  position:relative; margin:0px auto; text-align:center; max-height:470px; float:left; overflow:hidden; margin:0px; padding:0px}

#contentOuter {width:100%; height:auto; padding-top: 150px;} 
#contentHome {width:100%;  z-index:1; max-width:1100px; margin:0px auto; position:relative; background-color:#FFF} 
#content {max-width:1100px; width:auto; z-index:100; text-align:center; position:relative; margin:0px auto; height:auto;min-height:calc(100vh - 190px);position: relative;z-index:99;background-color:#FFF;text-align:left;font-size:16px;padding-left:0px;padding-top:5px;padding-bottom:30px;padding-right:0px;letter-spacing: 0.05em;box-sizing:border-box;    display: flex; flex-direction: column; justify-content: center;align-items: center;}
.contentAfter {width: 100%;height: 100%;}
.contentAfter2 {width: 100%;margin-top: 50px; margin-bottom: 20px}
.contentInnen {width: 100%;max-width: 730px; font-weight: 300; line-height: 22px} 
#content ul li, #contentInnen ul li {margin-left:20px}
#carouselcontainer ul li {margin-left:0px}
#inhaltsbildouter {width:100%; display:block; }
.hauptbild {width: 100%; margin-bottom: 50px }
.hauptbild img {width: 100%;}
.hauptbild .quote {text-align: center}

.flexslider {padding-bottom:0px; width:100%; max-width:1020px}
.flexslider .slides img, .slick-slide img  {display: block; max-width: 100%;}
.slick-slide img.sliderImg  {display: block; max-width: 100%; height: calc(100vh - 210px); max-height: 760px; margin: 0px auto}

.underlineAnim {position: relative; display: inline-block}
.underlineAnim:after {content: '';position: absolute;width: 100%;transform: scaleX(0);height: 2px;bottom: 0;left: 0;background-color: var(--dark-grey);transform-origin: bottom right;transition: transform 0.25s ease-out;} 
.underlineAnim:hover:after {transform: scaleX(1); transform-origin: bottom left;} 

.teaserOuter {display: flex; width: 100%; justify-content: space-between; align-items: center;} 
.teaserOuter .teaser {display: block; width: 30%; cursor: pointer}
.teaserOuter .teaser .teaserImg {width: 100%}
.teaserOuter .teaser .teaserText {position:relative; display: inline-block; margin-top: 30px; text-transform: uppercase; font-weight: 500; letter-spacing: 0.6px}
.teaserOuter .teaser .teaserText:after {content: '';position: absolute;width: 100%;transform: scaleX(0);height: 2px;bottom: 0;left: 0;background-color: var(--dark-grey);transform-origin: bottom right;transition: transform 0.25s ease-out;} 
.teaserOuter .teaser:hover .teaserText:after {transform: scaleX(1); transform-origin: bottom left;}  
.teaserOuter .teaser:hover {cursor: pointer}  

#galerieOuter {display: grid; justify-content: space-around; grid-template-columns: repeat(auto-fill,32%); grid-gap: 20px;}
#galerieOuter .galerieBox {width: 100%; height: 100%; cursor: pointer}
#galerieOuter .galerieBox img.galerieImg { width: 100%; height: 90%; object-fit: cover;}
#galerieOuter .galerieBox .galerieText {text-transform: uppercase; margin-top: 3px; display: inline-block; position: relative} 
#galerieOuter .galerieBox .galerieText:after {content: '';position: absolute;width: 100%;transform: scaleX(0);height: 2px;bottom: 0;left: 0;background-color: var(--dark-grey);transform-origin: bottom right;transition: transform 0.25s ease-out;} 
#galerieOuter .galerieBox:hover .galerieText:after {transform: scaleX(1); transform-origin: bottom left;}  
#galerieOuter .galerieBox .mobileOnly {display: none}  

#galerieSlider {display: block; min-height: calc(100vh - 290px); visibility: hidden}
#galerieSlider .sliderBox:focus-visible {outline: none}
#galerieSlider .sliderBox .underImage {margin-top: 10px; display: flex; justify-content: space-between; text-transform: uppercase}
#galerieSlider .sliderBox .underImage .back {cursor: pointer; display: flex; flex-direction: column; align-items: flex-end; font-size: 14px}
#galerieSlider .sliderBox .underImage .back .backArrow {width: auto; height: 34px}
#galerieSlider .sliderBox .underImage .sliderName {font-size: 16px;letter-spacing: 0.0px;}
#galerieSlider .sliderBox .sliderHeadline {margin-top: 30px; color: var(--black); font-size: 18px; text-transform: uppercase}
#galerieSlider .sliderBox .sliderText {font-weight: 300; margin-top: 5px;}

#galerieSlider .slick-prev, #galerieSlider .slick-next {height: 90px; width: 90px; top: 350px} 
#galerieSlider .slick-prev {left: -100px;} 
#galerieSlider .slick-next {right: -100px;} 
#galerieSlider .slick-prev:before {content: ""; background-image: url("/UserFiles/structure/pfeil-links.png"); background-size: cover; display: block; height: 90px; width: 90px; z-index: 9999;}
#galerieSlider .slick-next:before {content: ""; background-image: url("/UserFiles/structure/pfeil-rechts.png"); background-size: cover; display: block; height: 90px; width: 90px; z-index: 9999;}

#galerieSlider .mobileBack {display: none}



.kontakt #content {flex-direction: row; justify-content: space-between}
.kontakt #content .contentInnen, .kontakt #content .contentAfter2 {width: 48%; margin: 0}

#adresse {width:100%;height:40px; padding-left:0px; text-align:left; position:relative; margin:0px auto; text-align:center;z-index:99; background-color: var(--light-grey)}
#adresseInnen {max-width:1000px; width:100%; margin:0px auto; position:relative; text-align:left; padding:10px 0; height: 100%; display: flex; align-items: center; justify-content: center}  

#nav_unten {height:20px; border-top:2px solid #eee; padding-top:20px; padding-bottom:20px;  width:950px; padding-left:30px;}
#nav_unten a {display:block; float:left; margin-right:40px; font-size:20px;}
#nav_unten a:hover {color:#000;}
#adresse div.left {width:auto; text-align:left; float:left; padding-left:30px}
#adresse div.right {margin-right:30px; float:right; padding-right:0px; margin-top:0px;}
#adresse div.right a:hover {color:#9f9f9f}
#adresse div.right a {padding-left:10px;}
#adresse div.right a::after { content: " • "; color: #FFF; font-size: 1.2em; padding-left:10px }
#adresse div.right a:last-child::after{content:""; padding-left:0px}
#adresse .normal {}
#adresse .footerNav {display: flex; justify-content: center}
#adresse .footerNav a {text-transform: uppercase; padding:0px; margin:0px; list-style-type:none; width:auto; text-align:center; display:block; position:relative; font-weight: normal; font-size: 14px; z-index:99; margin-right:50px;}
#adresse .footerNav a:last-child {margin-right:0px;}

.subnav {width:125px; float:left; position:relative}
.subnav a:hover, .subnav a.aktiv {color:#990066}
.subnavContent {border-right:1px solid #edecec; margin-right:15px; float:left}
.subnavContent .subnav {border-top:1px solid #edecec; border-bottom:1px solid #edecec; margin-left:-30px; padding-left:25px; height:35px; padding-top:5px; clear:both}
.subnavContent .subnav:first-child {border-bottom:0px}
.contentAfterSubnav {float:none; position:relative; margin-left:140px; width:auto}
#content .subnavOuter {float:left; width:auto; position:relative}
#content .subnavOuter .subnavContent .subnav a.subnavlink   {color:#7f7e7e; font-size:13px}
#content .subnavOuter .subnavContent .subnav a.subnavlink:hover {color:#990066; font-size:13px}
#content .subnavOuter .subnavContent .subnav.aktiv a.subnavlink {color:#990066; font-size:13px}


#claim {position:absolute; z-index:999999999999999999999; top:305px; left:35px; color:#FFF; font-size:2.25em}


#created {position:absolute; top:50px; left:25px; z-index:1000000; background-color:#FFF; width:900px; border:1px solid #999; border-radius:5px; display:none; padding:30px; box-shadow:  1px 1px 5px 5px #eee; }
#created a {text-decoration:underline;}
#createdcloser {position:absolute; top:-15px; left:980px; background-image:url(/UserFiles/structure/close.png); width:30px; height:30px; text-indent:-10000px; cursor:pointer}


#bottom {max-width:1020px; width:100%; text-align:right; margin-top:10px;  margin-left:0px; margin-bottom:10px}



/* Formularfelder ---------------- */
.formtabelle {margin-top:20px}
input{font-family: 'Arial','Helvetica'; font-size:16px; background-color:#fcfcfc; border:1px solid #6a6a6a; margin-bottom:3px; height:40px; color:#000; padding-left:10px; width:300px; border-radius:2px}
.anabmelden {float:left; margin-right:10px; border:0px }
#newslettersubmit {width:162px; text-align:center}
#password {width:123px; margin-top:5px; color:#87888a; font:100%  Helvetica, Arial, sans-serif;  padding-left:3px}
#commentsUser {font-family: 'Arial','Helvetica'; font-size:16px; overflow:auto;  font:100%;  padding-left:10px; padding-top:10px; padding-top:10px; width:510px; height:170px; border:1px solid #6a6a6a; border-radius:2px; background-color:#fcfcfc}
#Senden {cursor:pointer; width:140px; float:left; color:#fff; position:relative; z-index:100000; height:40px; background-color:#aa904b; margin-top:10px; margin-bottom:20px; font-size:16px; font-weight:bold}
#anrede {width:150px;}
#formDanke {color:#aa904b; display:none}




img {border:0px;}
.highslide > img{border:10px solid #F00;}
.image {border:0px}
.emailcodierung{color:#000}
.emailcodierung  > a{}
a {outline:none; text-decoration:none; color:#32353e;}
.clearer {clear:both}

/*mobile Nav*/

#navMobile {display: none}
#mobileOpenerOuter {display:none; position:relative; width:30px; z-index:101;}
#navOuterMobile {display:block; width:100%; height:50px; background-color:#FFF}
#navMobileOpener {display:block;  padding-right:0px; cursor:pointer; width:30px;}
#navMobileOpener .balken {width:30px; height:5px; background-color:#666666; margin-top:5px}
#navMobileCloser {display:none; padding-right:0px; cursor:pointer; width:30px}
#navMobileCloser .balken {width:30px; height:5px; background-color:#666666; margin-top:5px}
#navMobileMenu {position: fixed; width: 100%; height: calc(100% - 120px); left: 0px; top:120px; height: 100%; min-height: 100px; z-index: 100000; color: #666; padding: 0px; display: block; transform: translateX(100%); transition: .5s ease-in-out;}

.menuMobile {background-color:#FFF; padding-bottom:10px; margin-top: 50px}
.menuMobile ul {list-style-type: none;display: flex; flex-direction: column; align-items: center;}
.menuMobile ul li {font-size: 24px; line-height: 24px; margin-bottom: 50px;}
.menuMobile ul li a {color: var(--dark-grey)}