/* Pizza Raed - 14.01.2025 */
@import url("/css/styles_fonts.css");

:root {
	--black: #101820;
	--white: #ffffff; 
	--black: #000000; 
	--grey: #1c1c1c; 
	--blue: #bb2118;
	--blue2: #4a0d09;
	--accent: var(--blue2);
	--text: var(--white);
	--bg: var(--blue);
	--bg2: #77150f;
	--bg3: #bb2118;	
	--bg2-alpha: rgba(7,40,52,0.2);
	--content-breite:100%;
	--content-breite2: 100%;
	--nav-breite:100%;  
	--font-fliesstext:  'Poppins' sans-serif;
	--font-display: 'Poppins', sans-serif;
	--font-display2: 'Poppins', sans-serif;
	--menu-height: 150px;
	--content-area: calc(100vh - var(--menu-height))
}

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

   body, html {
			font-family: 'Poppins', sans-serif;
            height: 100%;
            width: 100%; 
			font-size: 26px;
        }
	
html {overflow-x: hidden;}   
body {color:var(--text);  font-size: 26px; line-height: 16px; background-color: var(--bg); margin:0px; padding:0px; }
body.menuOpen {height: 100vh; overflow: hidden} 

body.t_black {
	--text: var(--black);
}

body.h_blue {
	--bg2-alpha: var(--bg);
}

/* Klassen ---------------------------- */
.abstand {clear: both;}
.abstand::after {content: " "; display: block; clear: both}
.pt_0{padding-top:0px !important; display: block; width: 100%; height: 0px}
.pt_1{padding-top:20px !important; display: block; width: 100%; height: 0px}
.pt_2{padding-top:50px !important; display: block; width: 100%; height: 0px}
.pt_3{padding-top:70px !important; display: block; width: 100%; height: 0px}
.pt_4{padding-top:120px !important; display: block; width: 100%; height: 0px}
.pt_5{padding-top:160px !important; display: block; width: 100%; height: 0px}
.pt_6{padding-top:240px !important; display: block; width: 100%; height: 0px}
.abstand.pt_0 {display: none}

.pb_0{padding-bottom:0px !important; display: block; width: 100%; height: 0px}
.pb_1{padding-bottom:20px !important; display: block; width: 100%; height: 0px}
.pb_2{padding-bottom:50px !important; display: block; width: 100%; height: 0px}
.pb_3{padding-bottom:70px !important; display: block; width: 100%; height: 0px}
.pb_4{padding-bottom:120px !important; display: block; width: 100%; height: 0px}
.pb_5{padding-bottom:160px !important; display: block; width: 100%; height: 0px}
.pb_6{padding-bottom:240px !important; display: block; width: 100%; height: 0px}
.pb_7{padding-bottom:80px !important; display: block; width: 100%; height: 0px}
.abstand.pb_0{display: none}
.uppercaser {text-transform: uppercase}
.cmstext p{margin-bottom: 30px; font-size: 18px; line-height: 26px;}

.fs14, .fs14 * {font-size: 14px}
.fs18, .fs18 * {font-size: 18px; line-height: 26px}
/*.texthell, .texthell * {color: var(--text-hell)} */

/* diverse Divs  ---------------------- */
h1, .h1like {font-family: var(--font-display); font-weight: bold; font-size: 70px; line-height: 60px; letter-spacing: 6px; text-align:center; margin-bottom:30px; max-width: 100%; color: var(--white)}  
h2, .h2like {font-family: var(--font-display2); font-size: 32px; line-height: 40px; margin-bottom: 15px} 
h3, .h3like {font-family: var(--font-display2); font-size: 28px; line-height: 36px;} 
h4, .h4like {font-family: var(--font-display2); font-size: 24px; line-height: 32px;} 
#adresse h1, #adresse h2, #adresse h3 {color: var(--white)}
.headline-wrap { display: flex; align-items: center}

h1.hc_1, h2.hc_1 {color: var(--white)}

.mobileOnly {display: none !important}

.c0 {color: var(--text)}
.c1 {color: var(--dark-green)}
.c2 {color: var(--white)}

.black h1 {color: #fff}
.black h2 {color: #fff}
.split h2 {font-size: 50px; line-height: 65px; margin-top: 50px}

.contentAfter .block {margin-top: 126px; margin-left: 7px}  
.contentAfter .block .line { width: 180px; height: 3px; margin-top: 30px; margin-bottom: 30px; border-radius: 20px; background-color: var(--white)}
.contentAfter .flipText  {margin-left: 1px; margin-top: 190px; transition: none !important}  
body.loaded .contentAfter .flipText  {transition: 1s !important}  
.start .contentAfter .flipText  {margin-top: 103px}  
.contentAfter .flipText svg {font-family: aktiv-grotesk-extended,sans-serif; text-transform: uppercase; letter-spacing: .11em; font-weight: 700; fill: rgb(22,22,21); line-height: 20px; font-size: 17px; color: var(--black); margin-right: 20px}  
.contentAfter .flipTextMobile svg {font-family: aktiv-grotesk-extended,sans-serif; text-transform: uppercase; letter-spacing: 1.92px; font-weight: bold; fill: rgb(22,22,21); line-height: 18px; font-size: 14px; color: var(--black);}  
.contentAfter .flipTextMobile {display: none}  

/* FIXING Animation on Load */
/*
[data-aos][data-aos][data-aos-duration="1000"], body[data-aos-duration="1000"] [data-aos] {transition-duration: 0s !important ; opacity: 0}
body.loaded [data-aos][data-aos][data-aos-duration="1000"], body[data-aos-duration="1000"] [data-aos] {transition-duration: 1s !important}
*/
.boxOuter {display: flex; justify-content: center}
.work {font-family: var(--font-fliesstext); font-weight: 400}
.cblack {color: #000000}
.bold {font-weight: bold}
.normal {font-weight: normal}
.tac {text-align: center}
.mb10 {margin-bottom: 10px}
.mb20 {margin-bottom: 20px}
.mb30 {margin-bottom: 30px}
.mb40 {margin-bottom: 40px}
.mb60 {margin-bottom: 60px}
.mb80 {margin-bottom: 80px}
.mt10 {margin-top: 10px}
.mt20 {margin-top: 20px}
.mt30 {margin-top: 30px}
.mt40 {margin-top: 40px}
.mt60 {margin-top: 60px}
.mt80 {margin-top: 80px}
.flex {display: flex}
.flex.justifyAround {justify-content: space-around}
.flex.justifyBetween {justify-content: space-between}
.flex.alignCenter {align-items: center}
.flex.gap15 {gap: 15px}
.text-center {text-align: center}
#obenOuter {z-index:1000; position:fixed;height:230px;width:100%; margin:0px auto; background-color:var(--white); margin-bottom: 20px; top: 0px;transition: height 0.5s ease;}
#balkenoben {z-index:1; width: var(--content-breite); max-width:100%;   margin:0px auto; position:relative;}
#name {position:relative; float:left; text-align:left; margin-left:0px; margin-top:38px}
#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;}
/*#navMobile {display:none} */
#logoMobile {display:none}
#langChangeMobile {display:none}
.topline {margin-top: 35px; padding-bottom: 30px; display: flex;  justify-content: flex-start; align-items: center; color: var(--headertext); transform: scale(1); transition: all 700ms;}
.topline a {color: var(--headertext); text-decoration: none}
.topline .icon {width: auto; display: flex; align-items: center}
.topline .icon-tel {background-image: url("/UserFiles/structure/svg/phone-call-green.svg"); background-size: 30px; padding-left: 40px; background-repeat: no-repeat; background-position: left center; height: 80px; margin-right: 80px; margin-left: 80px; transform: scale(1); transition: all 700ms;}
.topline .icon-email {background-image: url("/UserFiles/structure/svg/email-green.svg"); background-size: 30px; padding-left: 40px; background-repeat: no-repeat; background-position: left center; height: 80px; transform: scale(1); transition: all 700ms;}
.topline .icon-tel.mobile {display: none}
.topline .icon-email.mobile {display: none}
.socialMedia {display: flex}
.socialMedia div[class^="icon-"] {width: 20px; height: 20px; background-size: 100%; background-repeat: no-repeat; margin-left: 15px}
.socialMedia .icon-linkedin {background-image: url("/UserFiles/structure/svg/linkedin-white.svg")}
.socialMedia .icon-xing {background-image: url("/UserFiles/structure/svg/xing-wihte.svg")}

[data-aos] {opacity: 0; transition-property: opacity, transform;}

/* Navigation ----------------------------- */
.topSection {position: fixed; width: 100vw; z-index: 21; height: var(--menu-height); transition: .4s ease-out; background-color: var(--bg); padding-bottom: 20px; }
.topSection .bg {position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color:var(--bg2-alpha); z-index: -1}
nav {position: fixed; width: 100vw; z-index: 21; height: 120px; transition: .4s ease-out; background-color: var(--gray) }
.topSection .navInner {height: 100%; width: var(--nav-breite); max-width: 100%; margin: 0px auto; display: flex; justify-content: space-between; transition: 0.4s ease;}  

.navRight {position: fixed; right: 15px; top:calc(((100vh - var(--menu-height)) / 2) + 160px) /* Contentheight / 2 + Headerhöhe */; top: calc(100vh / 2); transform: translateY(-50%); display: flex; flex-direction: column; gap: 15px;transition: .4s ease}
body.sticky .navRight {gap: 10px} 
.navRight .navTop {display: flex; gap: 70px; justify-content: flex-end; transition: .4s ease; z-index: 1}

.navRight .navTop a {color: var(--white); text-decoration: none; }
.navRight .navTop .navTopEntry {display: flex; gap: 10px; white-space: nowrap; font-size: 15px }

.logoOuter {background: var(--white); padding: 35px; height: 100%; width: auto}
.logoLink {height: 100%; position: relative ;transition: 0.4s ease; display: flex;} 
.logoLink img { height: 100%; position: relative; left: 0; transition: 0.4s ease; transition-delay: 0 !important}

.menuOuter {display: flex} 
.menu{text-align:left; position:relative; padding-top:0px; background-repeat:repeat; display: flex; padding-right: 10px}
.menu ul {margin:0px; padding:0px;display: flex; flex-direction: column; align-items: flex-end; gap:30px} 
.menu ul li {padding:0px; margin:0px; list-style-type:none; width:auto; text-align:center; display:flex; position:relative;flex-direction: column}
.menu ul li a {text-decoration: none; letter-spacing: 1px; display: block; width: 100%; color: var(--white); font-family: var(--font-fliesstext); font-weight: 300; text-transform: uppercase; font-weight: bold; transition: 0.1s ease; text-align: end}
.menu ul li.aktiv a {color: var(--accent)}

/*
.menu ul li a:before{content: attr(data-text); position: absolute; left: 0; font-weight: 300; color: var(--white); transition: color 0.1s ease; width: 100%; text-align: center}
.menu ul li:hover a:before, .menu ul li.aktiv a:before {color: transparent}
.menu ul li:hover a, .menu ul li.aktiv a {color: var(--white)}
*/
.headline-topSection {}
.headline-topSection h1 { height: 100%; margin-bottom: unset; display: flex; align-items: center; text-transform: uppercase}

a.animatedLink {position: relative}
a.animatedLink:after {content: '';position: absolute;width: 100%;transform: scaleX(0);height: 3px;top: 0;left: 0;background-color: var(--accent);transform-origin: bottom right;transition: transform 0.25s ease-out;}
a.animatedLink:hover:after, #adresse .footerNav a.aktiv:after {transform: scaleX(1); transform-origin: bottom left;} 

.langChange {display: flex; align-items: center; color: var(--white);  position: relative}
.langChange a {color: var(--white); text-decoration: none; text-transform: uppercase}
.langChange a:hover {color: var(--accent);}

.langChange .currentLang {display: flex; gap: 7px; align-items: center}
.langChange .currentLang::after {content: ""; position: relative; display: block; width: 12px; height: 11px; background-image: url("/UserFiles/structure/svg/arrow_down.svg")} 
.langChange .langDropDown {position: absolute; display: flex; flex-direction: column; gap: 0px; top: 100%; background-color: var(--gray); width: calc(100% + 20px); padding: 5px 10px; left: -10px; display: none}
.langChange:hover .langDropDown {display: flex}

/* Sticky */
#obenOuter.sticky {height: 100px}
#obenOuter.sticky #navOuter {height: 40px}
#obenOuter.sticky .topline{margin: 0px 0; transform: scale(1); padding-bottom: 0px}
#obenOuter.sticky .topline #logolink {height: 80px; left: -10px}
#obenOuter.sticky .topline .icon-tel, #obenOuter.sticky .topline .icon-email {height: 30px; background-size: 25px}
/* CONTENT */
#contentOuter {width:100%; height:auto; min-height:200px;}
#contentHome {width:auto;  z-index:1; max-height:680px; margin:0px auto; position:relative; overflow: hidden; max-width: 1000px; margin-top: 40px;}
#contentHome img {width:100%;}
#content , .content {width:auto;}
.content a, #content a {text-decoration: none; color: var(--text)}
.content a.underline, #content a.underline {text-decoration: underline; }
.content a:not(.formattedLink, .buttonInner):hover, #content a:not(.formattedLink, .buttonInner):hover {color: var(--accent);}
.content:last-of-type {margin-bottom: 0px}
.content.fullpage {margin-top: 245px}
.content.black {background-color:#000000}
.content.black .contentsection .inhalt {color:#fff}
.contentAfter {height: 100vh; width: 100vw; max-width: var(--nav-breite); padding: 0 20px; display: flex; align-items: center; justify-content: flex-start; position: relative; z-index: 10; margin: 0px auto; padding-bottom: 63px}
.contentAfter h1 {width: auto;}
#content .contentAfter {margin-top: 0px; width: 100%}

.noHeader {display: block; width: 100%; height: 120px} 

#mainContainer {display: flex; flex-direction: column; min-height: 100vh; position: relative}
.reservierung {display: block;}
.reservierung a {color: var(--white); text-decoration: none; text-transform: uppercase; display: block; transition: 0.3s ease}
.reservierung a:hover {color: var(--accent)} 
.openBookingTool {font-weight: bold}

header {height: 100vh; width: 100vw; padding-top: var(--menu-height); overflow: hidden; position: relative}
.contentpage header {height: 70vh;}
.headerbild {width: 100%; }
.headerGallery {position: relative; height: calc(100vh - var(--menu-height)); width: 100vw; top: 0; left: 0}
.headerGallery .flexslider {height: 100%;}
.headerGallery ul.slides {position: relative; height: 100%}
.headerGallery ul.slides li { height: 100%}
.headerGallery ul.slides li .inhaltsbild{ height: 100%; object-fit: cover; object-position: center; filter: brightness(0.8)}  
.contentpage .headerGallery ul.slides li .inhaltsbild{ object-fit: contain;}  
.headerGallery span[class^="pos_"] {display: flex; position: absolute; font-family: var(--font-display); font-size: 48px; font-weight: bold; line-height: 1.1em; color: var(--white);  width: 100%; height: 100%; top: 0px; left: 0px; padding: 20px}

.headerGallery span.pos_ol {justify-content: flex-start; align-items: baseline}
.headerGallery span.pos_om {justify-content: center; align-items: baseline}
.headerGallery span.pos_or {justify-content: flex-end; align-items: baseline}
.headerGallery span.pos_ml {justify-content: flex-start; align-items: center}
.headerGallery span.pos_mm {justify-content: center; align-items: center}
.headerGallery span.pos_mr {justify-content: end; align-items: center}
.headerGallery span.pos_ul {justify-content: flex-start; align-items: end}
.headerGallery span.pos_um {justify-content: center; align-items: end}
.headerGallery span.pos_ur {justify-content: end; align-items: end}

.overlay {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #00594b; mix-blend-mode: multiply; z-index: 10; }

.startTop {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center}
.startTop .lineLong {height: 2px; background-color: var(--white); width: 250px; max-width: 80%; margin-bottom: 20px}
.startTop .reservierung {margin-top: 0}

#scrollToTop {display: block; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: color .3s; transition: color .3s; text-align: center; position: fixed; right: 30px; bottom: -50px; z-index: 1001; opacity: 0; transition: 0.4s ease-out; cursor: pointer}
#scrollToTop.visible {opacity: 1; bottom: 30px}
#scrollToTop path.scrollToTopCircle {color: var(--accent); fill:currentColor}
#scrollToTop path.scrollToTopArrow {color: var(--white); fill:currentColor}
#scrollToTop:hover path.scrollToTopCircle {color: transparent; stroke: var(--accent); stroke-width: 1px; stroke-linejoin: round;}
#scrollToTop:hover path.scrollToTopArrow {color: var(--accent);}

#contentAussen {display: flex; justify-content: center; position: relative; flex: 1}
#contentAussen .contentBox {width: var(--content-breite); max-width: 100%;}
#contentAussen .navRight {position: absolute; right: 0; top: 0}

#contentInnen { text-align:left; max-width:1020px; width:auto; padding-bottom:20px; margin-top:75px}
#content .flexslider ul li, #contentInnen .flexslider ul li {margin:0px; left: 0px; max-width: 100%}

.contentAfter .einleitung {max-width: 790px}

#anchorTarget {position: relative; top: -100px; visibility: hidden}
.submenu {width: var(--content-breite); max-width: 100%; margin: 0px auto; position: relative; text-align: center; display: flex; justify-content: center; gap: 20px; margin-top: 120px}
.submenu .subEntry {position:relative; text-decoration: none; letter-spacing: 1px; display: block; padding-top: 3px; color: var(--text); font-family: var(--font-display); font-size: 20px; line-height: 28px; text-transform: uppercase; font-weight: 500; transition: 0.5s ease;}
.submenu .subEntry:after {content: '';position: absolute;width: 100%;transform: scaleX(0);height: 3px;top: 0;left: 0;background-color: var(--accent);transform-origin: bottom right;transition: transform 0.25s ease-out;}
.submenu .subEntry:hover:after, .submenu .subEntry.aktiv:after {transform: scaleX(1); transform-origin: bottom left;} 

section {position: relative; z-index: 20; min-height: calc(100vh - var(--menu-height))}
section .content {position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: flex; flex-direction: column; justify-content: center}
.layout_0 .headline-wrap h1 {display: none}
.layout_0 .hauptbild .gallery {display: grid; justify-content: space-between; gap: 15px; grid-template-columns: repeat(3,1fr) }
.layout_0 .hauptbild .gallery img {padding: 20px; width: 100%}


.buttonOuter {display: flex; margin-top: 20px;}
.buttonOuter a.buttonInner, .accentButton {background-color: var(--accent); padding: 16px; color: var(--white); border: 1px solid var(--accent); font-family: var(--font-display2); font-style: italic; font-size: 22px; line-height: 31px; cursor: pointer; transition: 0.3s ease; display: inline-block; margin-top: 10px; display: flex; align-items: center; gap: 7px}
.buttonOuter a.buttonInner:hover, .accentButton:hover {background-color: transparent; color: var(--accent);}
.accentButton:disabled, .buttonOuter a.buttonInner.disabled, .accentButton.disabled  {opacity: 0.6; cursor: not-allowed} 

.contentInnen ul li {list-style-type: none; position: relative; padding-left: 15px}
.contentInnen ul li:before {content: ""; position: absolute; display: block; left: 0; top: 11px; width: 8px; height: 3px; background-color: var(--accent); margin-left: 2px; margin-right: 5px}

.slickGalleryOuter .slideWithText {height: calc(100vh - 120px); display: flex; flex-direction: column; justify-content: center; position: relative} 
.slickGalleryOuter .slideWithText img {height: 70%; width: auto; align-self: center}
.slickGalleryOuter .slideWithText div {width: 100%; margin-top: 15px}

.slick-slide img {width: 100%; aspect-ratio: 3/2; object-fit: contain;}

.ytOuter iframe {aspect-ratio: 16 / 9; width: 70%;}

.smallTextblock {font-size: 14px; line-height: 18px; margin-bottom: 5px;}

.newsletterOuter {width: 900px; max-width: 100%; margin:0px auto; margin-top: 30px}
.newsletterDanke {display: none; margin-top: 25px}


.gridLikeTable {display: grid; grid-template-columns: 1fr 1fr; gap: 20px }
.gridLikeTable .bullet {background-color: var(--percy); padding: 30px}
#tinymce .gridLikeTable .bullet {border: 1px dotted grey} 
.gridLikeTable .bullet .headline {margin-bottom: 20px; color: var(--white); font-family: var(--font-display); font-size: 30px; line-height: 38px}
.gridLikeTable .bullet .content {color: var(--white)}

.slick-dots {bottom:-60px}
.slick-dots li {margin-left: 1px; margin-right: 1px}
.slick-dots li button:before {content: ""; background-color: rgba(0, 89, 75, .4); width: 15px; height: 15px; border-radius: 15px}
.slick-dots li.slick-active button:before {content: ""; background-color: var(--dark-green); width: 15px; height: 15px; border-radius: 15px}

.contentsection#projekte, .contentsection#team {min-height: 0px; padding-bottom: 0px}
.imageGrid {display: flex; flex-wrap: wrap; margin: 0px auto; max-width: 2560px}
.imageGrid img {width: calc(100% /3); height: auto; border: 1px solid black; align-self: flex-start}

.imageGrid.team-img img {width: 25%; height: auto}

.videoBanner {height: 400px; overflow:hidden; display: flex; flex-direction: column}
#projektevideo {opacity: 0.5}


.slick-initialized .slick-slide {display: flex !important; justify-content: center}

.slick-prev {left: -25px !important; background-image: none; background: var(--white); border-radius: 100%; width: 25px; height: 25px; z-index: 1; display: flex; justify-content: center; align-items: center}
.slick-next {right: -25px !important; background-image: none; background: var(--white); border-radius: 100%; width: 25px; height: 25px; display: flex; justify-content: center; align-items: center}
.slick-prev:hover, .slick-next:hover {background-color: var(--white);}
.slick-prev::before {position: relative; display: block; content: ""; background-image: url("/UserFiles/structure/arrow-right.svg"); width: 20px; height: 20px; background-size: contain; transform: rotate(180deg)}
.slick-next::before {position: relative; display: block; content: ""; background-image: url("/UserFiles/structure/arrow-right.svg"); width: 20px; height: 20px; background-size: contain}

#carouselcontainer ul li {margin-left:0px}
#inhaltsbildouter {width:100%; display:block; }
.inhaltsbild {max-width:100%; width:100%; display: block}
.flexslider {padding-bottom:0px; width:100%; max-width:100%; height: 100%; overflow: hidden}
.flexslider .slides img {display: block;width: 100%;}
.flex-control-nav {z-index: 1000}
#spruch {font-size: 21px; color: #663333; text-align: center; padding: 70px 0px;}
.teaserMenu {display: flex; justify-content: space-between; cursor: pointer}
.teaserMenu .menuBox {display: block}
.teaserMenu .menuBox .menuBoxName {text-align: center; margin-top: 15px; font-family:  var(--font-fliesstext); font-size: 16px; font-weight: normal;}
.hr {border: 1px solid #cccccc}
.hidden {display:none;  transition: all 0.2s ease}
.visible {display:flex; transition: all 0.2s ease}



footer {position: fixed; width: 100%; bottom: 0; z-index: 110; bavkground} 

#adresse {height:auto; padding-left:0px; text-align:left; position:relative;  padding-top: 20px; padding-bottom:10px; z-index:100; background-color: var(--bg2); color: var(--white);} 
#adresse .adresseInner {width: var(--content-breite); max-width: 100%; margin:0px auto; display: flex; flex-direction: column; align-items: center; position: relative}
#adresse .block {display: flex; flex-direction: column;}
#adresse .block.centerblock {display: flex; flex-direction: column; align-items: center}
#adresse .block.rightblock {display: flex; flex-direction: column;}
#adresse .block .logoblock {width: 70%; padding: 0 20px; margin-bottom: 15px; position: relative}
#adresse .block .logoblock img {height: auto; max-height: 180px}
#adresse .block .claim, #adresse .block .headline {font-family: var(--font-display); font-size: 30px; line-height: 48px;}

#adresse .socialLink {height: 35px; width: 35px; position: absolute; right: 0; top: 50%; transform: translateY(-50%)}
#adresse .socialLink img {height: 100%;}

#adresse a {text-decoration: none; color: var(--white); display: flex; align-items: center;}
body.white #adresse a {color: var(--black);}
#adresse .footerNav {display: flex; flex-direction: column}
#adresse .footerNav a {position: relative}


#lastLine {background-color: var(--dark-gray); width: 100%; padding: 15px 0}
#lastLine .lastLineInner {width: var(--content-breite2); max-width: 100%; margin: 0px auto; display: flex; gap: 15px }
#lastLine .lastLineInner a {text-decoration: none; color: var(--white); font-size: 16px; line-height: 26px; font-weight: 700}

.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:99999999999999999; top:305px; left:35px; color:var(--white); font-size:2.25em}


#created {position:absolute; top:50px; left:25px; z-index:1000000; background-color:var(--white); 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}


.breadcrumps {position:absolute; top:-25px; width:1020px; text-align:right; background-color:var(--white)}

.nozoom {border:0px}
a.higslide img {border:0px}

.platzhalter {color:var(--white)}


#bookingTool {}
#bookingTool, #bookingTool.inaktiv {transition: transform 0.5s ease-in-out; position: fixed; right: 5px; transform: translateX(120%); top: 15px; width: 350px;background-color: var(--bg2);border-radius: 10px;color: var(--white);padding: 10px;font-size: 15px;  z-index: 300; overflow: hidden}
#bookingTool.aktiv {transform: translateX(0%)} 
#bookingTool .closer {position: absolute; right: 5px; top:5px; border-radius: 20px; width: 20px;height: 20px;font-size: 12px; background-color: var(--green); display: flex;justify-content: center; align-items: center;cursor: pointer; z-index: 200}
#bookingTool .header {display: flex;justify-content: center; font-size: 14px; padding-bottom: 5px;position: relative; z-index: 100}
#bookingTool .zeile.inaktiv {max-height: 0px}
#bookingTool .zeile.aktiv {max-height: 800px}
#bookingTool .zeile .head {display: flex; justify-content: space-between; align-items: center; cursor: pointer; height: 40px;}
#bookingTool .zeile .head div{width: 33% !important}
#bookingTool .zeile .head .name{font-size: 10px; font-style: italic; text-align: left}
#bookingTool .zeile .head .chooser{text-align: center; white-space: nowrap}
#bookingTool .zeile .head .arrowDown {text-align: right}
#bookingTool .zeile .head.aktiv .arrowDown{ -moz-transform: scale(1, -1);    -o-transform: scale(1, -1);    -webkit-transform: scale(1, -1);    transform: scale(1, -1);}
#bookingTool .arrowDown img {width: 10px;height: auto;}
#bookingTool .data  {display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #000; border: 1px solid var(--black); border-radius: 10px; position: relative; z-index: 99}
#bookingTool .data.column {flex-direction: column; justify-content: center; text-align: center; line-height: 20px}
#bookingTool .data.column a {color: var(--white); text-decoration: none;margin-bottom: 10px}
#bookingTool .data.inaktiv {max-height: 0px; overflow: hidden; transition: all 0.5s ease; cursor: pointer; opacity: 0; align-items: center;}
#bookingTool .data.aktiv {max-height: 800px; transition: all 0.5s ease; cursor: pointer; opacity: 1; align-items: center;}
#bookingTool .data.userdata {background-color: transparent; border: 0px}
#bookingTool .buttons {display: flex; flex-wrap: wrap;justify-content: center; padding: 20px; padding-bottom: 10px; width: 300px; max-width: 100%}
#bookingTool .buttons .button {width: 50px; height: 50px; line-height: 50px; border: 1px solid var(--grey); border-radius: 5px; display: flex; justify-content: center; align-items: center;margin-right: 10px; margin-bottom: 10px; cursor: pointer;}
#bookingTool .tagesZeitOuter .buttons .button {width: 70px;}
#bookingTool .buttons .button:hover, #bookingTool .button.hover {background-color: var(--accent);}
#bookingTool .buttons .button.aktiv {background-color: var(--white); color: var(--black); cursor: default}
#bookingTool .buttons .button.inaktiv {color: var(--gray); cursor: not-allowed; opacity: 0.6}
#bookingTool .buttons .button.inaktiv:hover {background-color:none ; color: var(--gray); cursor: not-allowed}
#bookingTool input, #bookingTool button{width: 100%;
	height: 40px;
	border: 0px solid var(--grey);
	margin-bottom: 4px;
	padding: 10px;
	border-radius: 4px;
	font-family: 'Inter','Open Sans', sans-serif; font-size: 12px;
}
#bookingTool textarea{
	width: 100%;
	height: 100px;
	border: 0px solid var(--grey);
	margin-bottom: 4px;
	padding: 10px;
	border-radius: 4px;
	font-family: 'Inter','Open Sans', sans-serif; font-size: 12px;
}
#bookingTool #absenden {display: block; margin-top: 10px; text-transform: uppercase; background-color: var(--bg); color: var(--white); cursor: pointer; font-family: var(--font-fliesstext); font-weight: bold}
#bookingTool #absenden:hover {background-color: var(--white); color: var(--bg)}
#bookingTool #absenden.disabled {display: none}
#bookingTool .userdatenOuter  .data{display: block !important}
#bookingTool .ui-datepicker {
  width: 23em !important;
  padding: 0px !important;
}
#bookingTool #response {padding-top: 30px; padding-bottom: 30px; display: none; line-height: 1.5em}

#bookingTool .infoAusreserviert {display: none; padding: 0px 20px 20px 20px; text-align: center; font-size: 13px; line-height: 16px }
#bookingTool .infoAusreserviert.visible {display: block; }

#booking #sondertage, #booking #blockedtage {display: none}


.dlIcon {width: 30px;float: left; margin-right: 10px;}

/* Formularfelder ---------------- */
.formtabelle {margin-top:20px}
input:not([type='checkbox']), select {font-family: var(--font-fliesstext); font-size:16px; font-weight: 500; letter-spacing: 1.2px; margin-bottom:20px; height:36px; color:var(--black); width:100%; padding: 5px 10px; outline: none;transition: 0.3s ease-in-out}
input::placeholder {color:var(--black);}
textarea {font-family: var(--font-fliesstext); font-size:16px; font-weight: 500; letter-spacing: 1.2px; width: 100%; resize: none; padding: 10px; height: 100px}
textarea::placeholder {color:var(--black);}


.checkmark {display:inline-block; width: 22px; height:22px; -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */   transform: rotate(45deg); position: relative; top: 5px; margin-left:10px;}
.checkmark.inaktiv span.checkmark_stem, .checkmark.inaktiv span.checkmark_kick  {visibility:hidden}
.checkmark.aktiv span.checkmark_stem, .checkmark.aktiv span.checkmark_kick  {visibility:visible}
.checkmark_circle { cursor: pointer}
.checkmark_circle.inaktiv { position: absolute; width:22px; height:22px; background-color: var(--accent); border-radius:11px; left:0; top:0;}
.checkmark_circle.aktiv {position: absolute; width:22px; height:22px; background-color: var(--accent); border-radius:11px; border: 1px solid red; left:0; top:0;}
.checkmark_stem {position: absolute; width:3px; height:9px; background-color:#fff; left:11px; top:6px;}
.checkmark_kick {position: absolute; width:3px; height:3px; background-color:#fff; left:8px; top:12px;}


.kontaktOuter  {margin-top: 60px;}
.kontaktOuter .split  {display: grid; grid-template-columns: 1fr 1fr; grid-gap: 24px}
.kontaktOuter input:not([type='checkbox']), .kontaktOuter select, .kontaktOuter textarea {background: var(--white); border: none; ; width: 100%; padding: 12px; margin-bottom: 20px; font-family: "Avenir", Verdana, sans-serif; font-size: 16px; font-weight: 400; color: #333; letter-spacing: inherit; }
.kontaktOuter input:last-of-type {margin-bottom: 0}
.kontaktOuter input::placeholder {color: #333}
.kontaktOuter textarea {height: 100%; margin-bottom: 0; resize: none}
.kontaktOuter textarea:focus {outline: 0}
.kontaktOuter select {appearance:none; -webkit-appearance: none; -moz-appearance: none;}
.kontaktOuter select:focus {outline: 0}
.kontaktOuter .selectWrap {position: relative}
.kontaktOuter .selectWrap::after {content:""; display: inline-block; position: absolute; background: url("/UserFiles/structure/svg/arrow.svg"); background-repeat: no-repeat; background-size: contain; height: 12px; width: 12px; right: 12px; top: 18px}


label {display: block; margin-bottom: 5px; font-weight: 300}
button.white {background-color: var(--white); border-radius: 5px; border: 1px solid var(--white); color: var(--black); text-transform: uppercase; font-family: var(--font-display), Open Sans, sans-serif; font-weight: bold}
.anabmelden {float:left; margin-right:10px; border:0px }
#newslettersubmit {width:162px; text-align:center}
#password {width:123px; margin-top:5px; color:#87888a; padding-left:3px}
#datenbestimmungUser {margin-right: 10px}
#Senden {display: inline-block; background-color: var(--percy); color: var(--white); padding: 12px 16px; border: 1px solid var(--percy); font-family: var(--font-fliesstext); font-size: 14px; line-height: 20px; letter-spacing: 0.98px; margin: 0px auto; margin-top: 20px; transition: 0.3s; cursor: pointer} 
#Senden:hover {background-color: transparent; color: var(--percy)} 
#formDanke {color:#000000; display:none}

#formularOuter {display: flex; margin: 0px auto; margin-top: 20px; width: 700px; max-width: 100%; text-align: left}
#formularOuter #eform {width: 100%;display: flex;flex-direction: column;}
#formularOuter #eform .red {color: var(--berry-text)}
#formularOuter .kontaktDaten {padding-left: 50px; padding-top: 20px; color: #000000; margin-bottom: 50px}
img {border:0px;}
.highslide > img{border:10px solid #F00;}
.image {border:0px}
.emailcodierung{color:#000}

.clearer {clear:both}


.fancybox-skin {background: none repeat scroll 0 0 #333;}
.fancybox-title {color:var(--white); padding-left:10px;}

.downImg {width:20px; margin-right:10px}

/*mobile Nav*/

#mobileOpenerOuter {display:blick; width:30px; margin-top:0px; z-index:101; height:100%;}
#navOuterMobile {display:block; width:100%; height:50px; background-color:var(--white)}
#navMobileOpener {display:none;  padding-right:0px; cursor:pointer; width:30px;}
#navMobileOpener .balken {width:30px; height:5px; background-color:var(--white); margin-top:5px}
#navMobileOpener .balken:first-child {margin-top:0px}
#navMobileCloser {display:none; padding-right:0px; cursor:pointer; width:30px}
#navMobileCloser .balken {width:30px; height:5px; background-color:#fff9f5; margin-top:5px}
#navMobileMenu {display: none} 
#mobileCloser {position: absolute; cursor: pointer; top: 25px; right: 10px; height: 30px; width: 30px; background-image: url("/UserFiles/structure/mobile_closer_white.png"); background-size: cover}
.menuMobile {
  padding-bottom: 10px;
  padding-top: 10px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

img.highslide {cursor:pointer}

.magenta, div.magenta, strong.magenta, a.magenta, h1.magenta,  h2.magenta,  h3.magenta,  h4.magenta, td.magenta {color:#9d005c}
p.magenta, span.magenta {color:#9d005c}



.fancybox-opened .fancybox-skin { background-color:#ffffff !important}

.formtabelle td {padding-bottom:20px}

/* Styles für CMS Editor */
 
body#tinymce {padding: 20px !important; cursor:text; background-color: var(--white); color: var(--black); background: #fff} 
body#tinymce ul {margin-left: 20px}
body#tinymce p, body#tinymce ul {line-height: 22px; font-size: 16px; font-family: var(--font-fliesstext); margin-bottom: 3px} 
body#tinymce .buttonblue {background-color: var(--dark-blue) }
body#tinymce .buttongreen {background-color: var(--green)}
body#tinymce .formattedLink.formattedLinkunderline {cursor: default}

body#tinymce .accord .accordText {max-height: none; font-size: 18px; line-height: 26px; margin-bottom: 30px}



.logo-container { 
    position: relative; 
}

/* Anpassungen Santa */
	
		
.santa {
position: absolute; 
    top: 105%; 
    left: 50%; 
    transform: translate(-50%, -50%) rotate(-3deg); 
    z-index: 10; 
    background-color: rgba(255, 255, 255, 0.9); 
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25); 
    color: #bb2118; 
    font-size: 1em; 
    text-align: center;
    width: 60vW;
    line-height: 1.3em; 
    transition: transform 0.3s ease-out;
}

body.responsive .santa {top:10%; width: 95vW}

@media (max-height:1060px) {
.santa {top:5%; width: 95vW}
}