body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both} @media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%} header,footer,nav,section,aside,main,article,figure,figcaption{display:block}body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,ol,ul,li,dl,dt,dd,figure,table,th,td,form,fieldset,legend,input,textarea{margin:0;padding:0}table{border-spacing:0;border-collapse:collapse}caption,th,td{text-align:left;text-align:start;vertical-align:top}abbr,acronym{font-variant:normal;border-bottom:1px dotted #666;cursor:help}blockquote,q{quotes:none}fieldset,img,iframe{border:0}ul{list-style-type:none}sup{vertical-align:text-top}sub{vertical-align:text-bottom}del{text-decoration:line-through}ins{text-decoration:none}body{font:12px/1 "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;color:#000}input,button,textarea,select{font-family:inherit;font-size:99%;font-weight:inherit}pre,code{font-family:Monaco,monospace}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}h1{font-size:1.8333em}h2{font-size:1.6667em}h3{font-size:1.5em}h4{font-size:1.3333em}table{font-size:inherit}caption,th{font-weight:700}a{color:#00f}h1,h2,h3,h4,h5,h6{margin-top:1em}h1,h2,h3,h4,h5,h6,p,pre,blockquote,table,ol,ul,form{margin-bottom:12px} #colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden;-webkit-transform:translate3d(0,0,0)}#cboxWrapper{max-width:none}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto;-webkit-overflow-scrolling:touch}#cboxTitle{margin:0}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block;max-width:none;-ms-interpolation-mode:bicubic}.cboxIframe{width:100%;height:100%;display:block;border:0;padding:0;margin:0}#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}#cboxOverlay{background:#000;opacity:.9;filter:alpha(opacity = 90)}#colorbox{outline:0}#cboxContent{margin-top:20px;background:#000}.cboxIframe{background:#fff}#cboxError{padding:50px;border:1px solid #ccc}#cboxLoadedContent{border:5px solid #000;background:#fff}#cboxTitle{position:absolute;top:-20px;left:0;color:#ccc}#cboxCurrent{position:absolute;top:-20px;right:0;color:#ccc}#cboxLoadingGraphic{background:url(../../assets/colorbox/images/loading.gif) no-repeat center center}#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:0 0}#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0}#cboxSlideshow{position:absolute;top:-20px;right:90px;color:#fff}#cboxPrevious{position:absolute;top:50%;left:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top left;width:28px;height:65px;text-indent:-9999px}#cboxPrevious:hover{background-position:bottom left}#cboxNext{position:absolute;top:50%;right:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top right;width:28px;height:65px;text-indent:-9999px}#cboxNext:hover{background-position:bottom right}#cboxClose{position:absolute;top:5px;right:5px;display:block;background:url(../../assets/colorbox/images/controls.png) no-repeat top center;width:38px;height:19px;text-indent:-9999px}#cboxClose:hover{background-position:bottom center} .content-slider{overflow:hidden;visibility:hidden;position:relative}.slider-wrapper{overflow:hidden;position:relative}.slider-wrapper>*{float:left;width:100%;position:relative}.slider-control{height:30px;position:relative}.slider-control a,.slider-control .slider-menu{position:absolute;top:9px;display:inline-block}.slider-control .slider-prev{left:0}.slider-control .slider-next{right:0}.slider-control .slider-menu{top:0;width:50%;left:50%;margin-left:-25%;font-size:27px;text-align:center}.slider-control .slider-menu b{color:#bbb;cursor:pointer}.slider-control .slider-menu b.active{color:#666} [data-aos][data-aos][data-aos-duration="50"],body[data-aos-duration="50"] [data-aos]{transition-duration:50ms}[data-aos][data-aos][data-aos-delay="50"],body[data-aos-delay="50"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="50"].aos-animate,body[data-aos-delay="50"] [data-aos].aos-animate{transition-delay:50ms}[data-aos][data-aos][data-aos-duration="100"],body[data-aos-duration="100"] [data-aos]{transition-duration:.1s}[data-aos][data-aos][data-aos-delay="100"],body[data-aos-delay="100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="100"].aos-animate,body[data-aos-delay="100"] [data-aos].aos-animate{transition-delay:.1s}[data-aos][data-aos][data-aos-duration="150"],body[data-aos-duration="150"] [data-aos]{transition-duration:.15s}[data-aos][data-aos][data-aos-delay="150"],body[data-aos-delay="150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="150"].aos-animate,body[data-aos-delay="150"] [data-aos].aos-animate{transition-delay:.15s}[data-aos][data-aos][data-aos-duration="200"],body[data-aos-duration="200"] [data-aos]{transition-duration:.2s}[data-aos][data-aos][data-aos-delay="200"],body[data-aos-delay="200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="200"].aos-animate,body[data-aos-delay="200"] [data-aos].aos-animate{transition-delay:.2s}[data-aos][data-aos][data-aos-duration="250"],body[data-aos-duration="250"] [data-aos]{transition-duration:.25s}[data-aos][data-aos][data-aos-delay="250"],body[data-aos-delay="250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="250"].aos-animate,body[data-aos-delay="250"] [data-aos].aos-animate{transition-delay:.25s}[data-aos][data-aos][data-aos-duration="300"],body[data-aos-duration="300"] [data-aos]{transition-duration:.3s}[data-aos][data-aos][data-aos-delay="300"],body[data-aos-delay="300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="300"].aos-animate,body[data-aos-delay="300"] [data-aos].aos-animate{transition-delay:.3s}[data-aos][data-aos][data-aos-duration="350"],body[data-aos-duration="350"] [data-aos]{transition-duration:.35s}[data-aos][data-aos][data-aos-delay="350"],body[data-aos-delay="350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="350"].aos-animate,body[data-aos-delay="350"] [data-aos].aos-animate{transition-delay:.35s}[data-aos][data-aos][data-aos-duration="400"],body[data-aos-duration="400"] [data-aos]{transition-duration:.4s}[data-aos][data-aos][data-aos-delay="400"],body[data-aos-delay="400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="400"].aos-animate,body[data-aos-delay="400"] [data-aos].aos-animate{transition-delay:.4s}[data-aos][data-aos][data-aos-duration="450"],body[data-aos-duration="450"] [data-aos]{transition-duration:.45s}[data-aos][data-aos][data-aos-delay="450"],body[data-aos-delay="450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="450"].aos-animate,body[data-aos-delay="450"] [data-aos].aos-animate{transition-delay:.45s}[data-aos][data-aos][data-aos-duration="500"],body[data-aos-duration="500"] [data-aos]{transition-duration:.5s}[data-aos][data-aos][data-aos-delay="500"],body[data-aos-delay="500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="500"].aos-animate,body[data-aos-delay="500"] [data-aos].aos-animate{transition-delay:.5s}[data-aos][data-aos][data-aos-duration="550"],body[data-aos-duration="550"] [data-aos]{transition-duration:.55s}[data-aos][data-aos][data-aos-delay="550"],body[data-aos-delay="550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="550"].aos-animate,body[data-aos-delay="550"] [data-aos].aos-animate{transition-delay:.55s}[data-aos][data-aos][data-aos-duration="600"],body[data-aos-duration="600"] [data-aos]{transition-duration:.6s}[data-aos][data-aos][data-aos-delay="600"],body[data-aos-delay="600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="600"].aos-animate,body[data-aos-delay="600"] [data-aos].aos-animate{transition-delay:.6s}[data-aos][data-aos][data-aos-duration="650"],body[data-aos-duration="650"] [data-aos]{transition-duration:.65s}[data-aos][data-aos][data-aos-delay="650"],body[data-aos-delay="650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="650"].aos-animate,body[data-aos-delay="650"] [data-aos].aos-animate{transition-delay:.65s}[data-aos][data-aos][data-aos-duration="700"],body[data-aos-duration="700"] [data-aos]{transition-duration:.7s}[data-aos][data-aos][data-aos-delay="700"],body[data-aos-delay="700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="700"].aos-animate,body[data-aos-delay="700"] [data-aos].aos-animate{transition-delay:.7s}[data-aos][data-aos][data-aos-duration="750"],body[data-aos-duration="750"] [data-aos]{transition-duration:.75s}[data-aos][data-aos][data-aos-delay="750"],body[data-aos-delay="750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="750"].aos-animate,body[data-aos-delay="750"] [data-aos].aos-animate{transition-delay:.75s}[data-aos][data-aos][data-aos-duration="800"],body[data-aos-duration="800"] [data-aos]{transition-duration:.8s}[data-aos][data-aos][data-aos-delay="800"],body[data-aos-delay="800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="800"].aos-animate,body[data-aos-delay="800"] [data-aos].aos-animate{transition-delay:.8s}[data-aos][data-aos][data-aos-duration="850"],body[data-aos-duration="850"] [data-aos]{transition-duration:.85s}[data-aos][data-aos][data-aos-delay="850"],body[data-aos-delay="850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="850"].aos-animate,body[data-aos-delay="850"] [data-aos].aos-animate{transition-delay:.85s}[data-aos][data-aos][data-aos-duration="900"],body[data-aos-duration="900"] [data-aos]{transition-duration:.9s}[data-aos][data-aos][data-aos-delay="900"],body[data-aos-delay="900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="900"].aos-animate,body[data-aos-delay="900"] [data-aos].aos-animate{transition-delay:.9s}[data-aos][data-aos][data-aos-duration="950"],body[data-aos-duration="950"] [data-aos]{transition-duration:.95s}[data-aos][data-aos][data-aos-delay="950"],body[data-aos-delay="950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="950"].aos-animate,body[data-aos-delay="950"] [data-aos].aos-animate{transition-delay:.95s}[data-aos][data-aos][data-aos-duration="1000"],body[data-aos-duration="1000"] [data-aos]{transition-duration:1s}[data-aos][data-aos][data-aos-delay="1000"],body[data-aos-delay="1000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1000"].aos-animate,body[data-aos-delay="1000"] [data-aos].aos-animate{transition-delay:1s}[data-aos][data-aos][data-aos-duration="1050"],body[data-aos-duration="1050"] [data-aos]{transition-duration:1.05s}[data-aos][data-aos][data-aos-delay="1050"],body[data-aos-delay="1050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1050"].aos-animate,body[data-aos-delay="1050"] [data-aos].aos-animate{transition-delay:1.05s}[data-aos][data-aos][data-aos-duration="1100"],body[data-aos-duration="1100"] [data-aos]{transition-duration:1.1s}[data-aos][data-aos][data-aos-delay="1100"],body[data-aos-delay="1100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1100"].aos-animate,body[data-aos-delay="1100"] [data-aos].aos-animate{transition-delay:1.1s}[data-aos][data-aos][data-aos-duration="1150"],body[data-aos-duration="1150"] [data-aos]{transition-duration:1.15s}[data-aos][data-aos][data-aos-delay="1150"],body[data-aos-delay="1150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1150"].aos-animate,body[data-aos-delay="1150"] [data-aos].aos-animate{transition-delay:1.15s}[data-aos][data-aos][data-aos-duration="1200"],body[data-aos-duration="1200"] [data-aos]{transition-duration:1.2s}[data-aos][data-aos][data-aos-delay="1200"],body[data-aos-delay="1200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1200"].aos-animate,body[data-aos-delay="1200"] [data-aos].aos-animate{transition-delay:1.2s}[data-aos][data-aos][data-aos-duration="1250"],body[data-aos-duration="1250"] [data-aos]{transition-duration:1.25s}[data-aos][data-aos][data-aos-delay="1250"],body[data-aos-delay="1250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1250"].aos-animate,body[data-aos-delay="1250"] [data-aos].aos-animate{transition-delay:1.25s}[data-aos][data-aos][data-aos-duration="1300"],body[data-aos-duration="1300"] [data-aos]{transition-duration:1.3s}[data-aos][data-aos][data-aos-delay="1300"],body[data-aos-delay="1300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1300"].aos-animate,body[data-aos-delay="1300"] [data-aos].aos-animate{transition-delay:1.3s}[data-aos][data-aos][data-aos-duration="1350"],body[data-aos-duration="1350"] [data-aos]{transition-duration:1.35s}[data-aos][data-aos][data-aos-delay="1350"],body[data-aos-delay="1350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1350"].aos-animate,body[data-aos-delay="1350"] [data-aos].aos-animate{transition-delay:1.35s}[data-aos][data-aos][data-aos-duration="1400"],body[data-aos-duration="1400"] [data-aos]{transition-duration:1.4s}[data-aos][data-aos][data-aos-delay="1400"],body[data-aos-delay="1400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1400"].aos-animate,body[data-aos-delay="1400"] [data-aos].aos-animate{transition-delay:1.4s}[data-aos][data-aos][data-aos-duration="1450"],body[data-aos-duration="1450"] [data-aos]{transition-duration:1.45s}[data-aos][data-aos][data-aos-delay="1450"],body[data-aos-delay="1450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1450"].aos-animate,body[data-aos-delay="1450"] [data-aos].aos-animate{transition-delay:1.45s}[data-aos][data-aos][data-aos-duration="1500"],body[data-aos-duration="1500"] [data-aos]{transition-duration:1.5s}[data-aos][data-aos][data-aos-delay="1500"],body[data-aos-delay="1500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1500"].aos-animate,body[data-aos-delay="1500"] [data-aos].aos-animate{transition-delay:1.5s}[data-aos][data-aos][data-aos-duration="1550"],body[data-aos-duration="1550"] [data-aos]{transition-duration:1.55s}[data-aos][data-aos][data-aos-delay="1550"],body[data-aos-delay="1550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1550"].aos-animate,body[data-aos-delay="1550"] [data-aos].aos-animate{transition-delay:1.55s}[data-aos][data-aos][data-aos-duration="1600"],body[data-aos-duration="1600"] [data-aos]{transition-duration:1.6s}[data-aos][data-aos][data-aos-delay="1600"],body[data-aos-delay="1600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1600"].aos-animate,body[data-aos-delay="1600"] [data-aos].aos-animate{transition-delay:1.6s}[data-aos][data-aos][data-aos-duration="1650"],body[data-aos-duration="1650"] [data-aos]{transition-duration:1.65s}[data-aos][data-aos][data-aos-delay="1650"],body[data-aos-delay="1650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1650"].aos-animate,body[data-aos-delay="1650"] [data-aos].aos-animate{transition-delay:1.65s}[data-aos][data-aos][data-aos-duration="1700"],body[data-aos-duration="1700"] [data-aos]{transition-duration:1.7s}[data-aos][data-aos][data-aos-delay="1700"],body[data-aos-delay="1700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1700"].aos-animate,body[data-aos-delay="1700"] [data-aos].aos-animate{transition-delay:1.7s}[data-aos][data-aos][data-aos-duration="1750"],body[data-aos-duration="1750"] [data-aos]{transition-duration:1.75s}[data-aos][data-aos][data-aos-delay="1750"],body[data-aos-delay="1750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1750"].aos-animate,body[data-aos-delay="1750"] [data-aos].aos-animate{transition-delay:1.75s}[data-aos][data-aos][data-aos-duration="1800"],body[data-aos-duration="1800"] [data-aos]{transition-duration:1.8s}[data-aos][data-aos][data-aos-delay="1800"],body[data-aos-delay="1800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1800"].aos-animate,body[data-aos-delay="1800"] [data-aos].aos-animate{transition-delay:1.8s}[data-aos][data-aos][data-aos-duration="1850"],body[data-aos-duration="1850"] [data-aos]{transition-duration:1.85s}[data-aos][data-aos][data-aos-delay="1850"],body[data-aos-delay="1850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1850"].aos-animate,body[data-aos-delay="1850"] [data-aos].aos-animate{transition-delay:1.85s}[data-aos][data-aos][data-aos-duration="1900"],body[data-aos-duration="1900"] [data-aos]{transition-duration:1.9s}[data-aos][data-aos][data-aos-delay="1900"],body[data-aos-delay="1900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1900"].aos-animate,body[data-aos-delay="1900"] [data-aos].aos-animate{transition-delay:1.9s}[data-aos][data-aos][data-aos-duration="1950"],body[data-aos-duration="1950"] [data-aos]{transition-duration:1.95s}[data-aos][data-aos][data-aos-delay="1950"],body[data-aos-delay="1950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1950"].aos-animate,body[data-aos-delay="1950"] [data-aos].aos-animate{transition-delay:1.95s}[data-aos][data-aos][data-aos-duration="2000"],body[data-aos-duration="2000"] [data-aos]{transition-duration:2s}[data-aos][data-aos][data-aos-delay="2000"],body[data-aos-delay="2000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2000"].aos-animate,body[data-aos-delay="2000"] [data-aos].aos-animate{transition-delay:2s}[data-aos][data-aos][data-aos-duration="2050"],body[data-aos-duration="2050"] [data-aos]{transition-duration:2.05s}[data-aos][data-aos][data-aos-delay="2050"],body[data-aos-delay="2050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2050"].aos-animate,body[data-aos-delay="2050"] [data-aos].aos-animate{transition-delay:2.05s}[data-aos][data-aos][data-aos-duration="2100"],body[data-aos-duration="2100"] [data-aos]{transition-duration:2.1s}[data-aos][data-aos][data-aos-delay="2100"],body[data-aos-delay="2100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2100"].aos-animate,body[data-aos-delay="2100"] [data-aos].aos-animate{transition-delay:2.1s}[data-aos][data-aos][data-aos-duration="2150"],body[data-aos-duration="2150"] [data-aos]{transition-duration:2.15s}[data-aos][data-aos][data-aos-delay="2150"],body[data-aos-delay="2150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2150"].aos-animate,body[data-aos-delay="2150"] [data-aos].aos-animate{transition-delay:2.15s}[data-aos][data-aos][data-aos-duration="2200"],body[data-aos-duration="2200"] [data-aos]{transition-duration:2.2s}[data-aos][data-aos][data-aos-delay="2200"],body[data-aos-delay="2200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2200"].aos-animate,body[data-aos-delay="2200"] [data-aos].aos-animate{transition-delay:2.2s}[data-aos][data-aos][data-aos-duration="2250"],body[data-aos-duration="2250"] [data-aos]{transition-duration:2.25s}[data-aos][data-aos][data-aos-delay="2250"],body[data-aos-delay="2250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2250"].aos-animate,body[data-aos-delay="2250"] [data-aos].aos-animate{transition-delay:2.25s}[data-aos][data-aos][data-aos-duration="2300"],body[data-aos-duration="2300"] [data-aos]{transition-duration:2.3s}[data-aos][data-aos][data-aos-delay="2300"],body[data-aos-delay="2300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2300"].aos-animate,body[data-aos-delay="2300"] [data-aos].aos-animate{transition-delay:2.3s}[data-aos][data-aos][data-aos-duration="2350"],body[data-aos-duration="2350"] [data-aos]{transition-duration:2.35s}[data-aos][data-aos][data-aos-delay="2350"],body[data-aos-delay="2350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2350"].aos-animate,body[data-aos-delay="2350"] [data-aos].aos-animate{transition-delay:2.35s}[data-aos][data-aos][data-aos-duration="2400"],body[data-aos-duration="2400"] [data-aos]{transition-duration:2.4s}[data-aos][data-aos][data-aos-delay="2400"],body[data-aos-delay="2400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2400"].aos-animate,body[data-aos-delay="2400"] [data-aos].aos-animate{transition-delay:2.4s}[data-aos][data-aos][data-aos-duration="2450"],body[data-aos-duration="2450"] [data-aos]{transition-duration:2.45s}[data-aos][data-aos][data-aos-delay="2450"],body[data-aos-delay="2450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2450"].aos-animate,body[data-aos-delay="2450"] [data-aos].aos-animate{transition-delay:2.45s}[data-aos][data-aos][data-aos-duration="2500"],body[data-aos-duration="2500"] [data-aos]{transition-duration:2.5s}[data-aos][data-aos][data-aos-delay="2500"],body[data-aos-delay="2500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2500"].aos-animate,body[data-aos-delay="2500"] [data-aos].aos-animate{transition-delay:2.5s}[data-aos][data-aos][data-aos-duration="2550"],body[data-aos-duration="2550"] [data-aos]{transition-duration:2.55s}[data-aos][data-aos][data-aos-delay="2550"],body[data-aos-delay="2550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2550"].aos-animate,body[data-aos-delay="2550"] [data-aos].aos-animate{transition-delay:2.55s}[data-aos][data-aos][data-aos-duration="2600"],body[data-aos-duration="2600"] [data-aos]{transition-duration:2.6s}[data-aos][data-aos][data-aos-delay="2600"],body[data-aos-delay="2600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2600"].aos-animate,body[data-aos-delay="2600"] [data-aos].aos-animate{transition-delay:2.6s}[data-aos][data-aos][data-aos-duration="2650"],body[data-aos-duration="2650"] [data-aos]{transition-duration:2.65s}[data-aos][data-aos][data-aos-delay="2650"],body[data-aos-delay="2650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2650"].aos-animate,body[data-aos-delay="2650"] [data-aos].aos-animate{transition-delay:2.65s}[data-aos][data-aos][data-aos-duration="2700"],body[data-aos-duration="2700"] [data-aos]{transition-duration:2.7s}[data-aos][data-aos][data-aos-delay="2700"],body[data-aos-delay="2700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2700"].aos-animate,body[data-aos-delay="2700"] [data-aos].aos-animate{transition-delay:2.7s}[data-aos][data-aos][data-aos-duration="2750"],body[data-aos-duration="2750"] [data-aos]{transition-duration:2.75s}[data-aos][data-aos][data-aos-delay="2750"],body[data-aos-delay="2750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2750"].aos-animate,body[data-aos-delay="2750"] [data-aos].aos-animate{transition-delay:2.75s}[data-aos][data-aos][data-aos-duration="2800"],body[data-aos-duration="2800"] [data-aos]{transition-duration:2.8s}[data-aos][data-aos][data-aos-delay="2800"],body[data-aos-delay="2800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2800"].aos-animate,body[data-aos-delay="2800"] [data-aos].aos-animate{transition-delay:2.8s}[data-aos][data-aos][data-aos-duration="2850"],body[data-aos-duration="2850"] [data-aos]{transition-duration:2.85s}[data-aos][data-aos][data-aos-delay="2850"],body[data-aos-delay="2850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2850"].aos-animate,body[data-aos-delay="2850"] [data-aos].aos-animate{transition-delay:2.85s}[data-aos][data-aos][data-aos-duration="2900"],body[data-aos-duration="2900"] [data-aos]{transition-duration:2.9s}[data-aos][data-aos][data-aos-delay="2900"],body[data-aos-delay="2900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2900"].aos-animate,body[data-aos-delay="2900"] [data-aos].aos-animate{transition-delay:2.9s}[data-aos][data-aos][data-aos-duration="2950"],body[data-aos-duration="2950"] [data-aos]{transition-duration:2.95s}[data-aos][data-aos][data-aos-delay="2950"],body[data-aos-delay="2950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2950"].aos-animate,body[data-aos-delay="2950"] [data-aos].aos-animate{transition-delay:2.95s}[data-aos][data-aos][data-aos-duration="3000"],body[data-aos-duration="3000"] [data-aos]{transition-duration:3s}[data-aos][data-aos][data-aos-delay="3000"],body[data-aos-delay="3000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="3000"].aos-animate,body[data-aos-delay="3000"] [data-aos].aos-animate{transition-delay:3s}[data-aos][data-aos][data-aos-easing=linear],body[data-aos-easing=linear] [data-aos]{transition-timing-function:cubic-bezier(.25,.25,.75,.75)}[data-aos][data-aos][data-aos-easing=ease],body[data-aos-easing=ease] [data-aos]{transition-timing-function:ease}[data-aos][data-aos][data-aos-easing=ease-in],body[data-aos-easing=ease-in] [data-aos]{transition-timing-function:ease-in}[data-aos][data-aos][data-aos-easing=ease-out],body[data-aos-easing=ease-out] [data-aos]{transition-timing-function:ease-out}[data-aos][data-aos][data-aos-easing=ease-in-out],body[data-aos-easing=ease-in-out] [data-aos]{transition-timing-function:ease-in-out}[data-aos][data-aos][data-aos-easing=ease-in-back],body[data-aos-easing=ease-in-back] [data-aos]{transition-timing-function:cubic-bezier(.6,-.28,.735,.045)}[data-aos][data-aos][data-aos-easing=ease-out-back],body[data-aos-easing=ease-out-back] [data-aos]{transition-timing-function:cubic-bezier(.175,.885,.32,1.275)}[data-aos][data-aos][data-aos-easing=ease-in-out-back],body[data-aos-easing=ease-in-out-back] [data-aos]{transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}[data-aos][data-aos][data-aos-easing=ease-in-sine],body[data-aos-easing=ease-in-sine] [data-aos]{transition-timing-function:cubic-bezier(.47,0,.745,.715)}[data-aos][data-aos][data-aos-easing=ease-out-sine],body[data-aos-easing=ease-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.39,.575,.565,1)}[data-aos][data-aos][data-aos-easing=ease-in-out-sine],body[data-aos-easing=ease-in-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.445,.05,.55,.95)}[data-aos][data-aos][data-aos-easing=ease-in-quad],body[data-aos-easing=ease-in-quad] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quad],body[data-aos-easing=ease-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quad],body[data-aos-easing=ease-in-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-cubic],body[data-aos-easing=ease-in-cubic] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-cubic],body[data-aos-easing=ease-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-cubic],body[data-aos-easing=ease-in-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-quart],body[data-aos-easing=ease-in-quart] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quart],body[data-aos-easing=ease-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quart],body[data-aos-easing=ease-in-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos^=fade][data-aos^=fade]{opacity:0;transition-property:opacity,transform}[data-aos^=fade][data-aos^=fade].aos-animate{opacity:1;transform:translateZ(0)}[data-aos=fade-up]{transform:translate3d(0,100px,0)}[data-aos=fade-down]{transform:translate3d(0,-100px,0)}[data-aos=fade-right]{transform:translate3d(-100px,0,0)}[data-aos=fade-left]{transform:translate3d(100px,0,0)}[data-aos=fade-up-right]{transform:translate3d(-100px,100px,0)}[data-aos=fade-up-left]{transform:translate3d(100px,100px,0)}[data-aos=fade-down-right]{transform:translate3d(-100px,-100px,0)}[data-aos=fade-down-left]{transform:translate3d(100px,-100px,0)}[data-aos^=zoom][data-aos^=zoom]{opacity:0;transition-property:opacity,transform}[data-aos^=zoom][data-aos^=zoom].aos-animate{opacity:1;transform:translateZ(0) scale(1)}[data-aos=zoom-in]{transform:scale(.6)}[data-aos=zoom-in-up]{transform:translate3d(0,100px,0) scale(.6)}[data-aos=zoom-in-down]{transform:translate3d(0,-100px,0) scale(.6)}[data-aos=zoom-in-right]{transform:translate3d(-100px,0,0) scale(.6)}[data-aos=zoom-in-left]{transform:translate3d(100px,0,0) scale(.6)}[data-aos=zoom-out]{transform:scale(1.2)}[data-aos=zoom-out-up]{transform:translate3d(0,100px,0) scale(1.2)}[data-aos=zoom-out-down]{transform:translate3d(0,-100px,0) scale(1.2)}[data-aos=zoom-out-right]{transform:translate3d(-100px,0,0) scale(1.2)}[data-aos=zoom-out-left]{transform:translate3d(100px,0,0) scale(1.2)}[data-aos^=slide][data-aos^=slide]{transition-property:transform}[data-aos^=slide][data-aos^=slide].aos-animate{transform:translateZ(0)}[data-aos=slide-up]{transform:translate3d(0,100%,0)}[data-aos=slide-down]{transform:translate3d(0,-100%,0)}[data-aos=slide-right]{transform:translate3d(-100%,0,0)}[data-aos=slide-left]{transform:translate3d(100%,0,0)}[data-aos^=flip][data-aos^=flip]{backface-visibility:hidden;transition-property:transform}[data-aos=flip-left]{transform:perspective(2500px) rotateY(-100deg)}[data-aos=flip-left].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-right]{transform:perspective(2500px) rotateY(100deg)}[data-aos=flip-right].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-up]{transform:perspective(2500px) rotateX(-100deg)}[data-aos=flip-up].aos-animate{transform:perspective(2500px) rotateX(0)}[data-aos=flip-down]{transform:perspective(2500px) rotateX(100deg)}[data-aos=flip-down].aos-animate{transform:perspective(2500px) rotateX(0)} @font-face { font-family: "Work Sans"; font-style: normal; font-weight: 400; src: url("/webfonts/work-sans-v3-latin-regular.eot"); /* IE9 Compat Modes */ src: local("Work Sans"), local("WorkSans-Regular"), url("/webfonts/work-sans-v3-latin-regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("/webfonts/work-sans-v3-latin-regular.woff2") format("woff2"), /* Super Modern Browsers */ url("/webfonts/work-sans-v3-latin-regular.woff") format("woff"), /* Modern Browsers */ url("/webfonts/work-sans-v3-latin-regular.ttf") format("truetype"), /* Safari, Android, iOS */ url("/webfonts/work-sans-v3-latin-regular.svg#WorkSans") format("svg"); /* Legacy iOS */ } @font-face { font-family: "Work Sans"; font-style: normal; font-weight: 500; src: url("/webfonts/work-sans-v3-latin-500.eot"); /* IE9 Compat Modes */ src: local("Work Sans Medium"), local("WorkSans-Medium"), url("/webfonts/work-sans-v3-latin-500.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("/webfonts/work-sans-v3-latin-500.woff2") format("woff2"), /* Super Modern Browsers */ url("/webfonts/work-sans-v3-latin-500.woff") format("woff"), /* Modern Browsers */ url("/webfonts/work-sans-v3-latin-500.ttf") format("truetype"), /* Safari, Android, iOS */ url("/webfonts/work-sans-v3-latin-500.svg#WorkSans") format("svg"); /* Legacy iOS */ } @font-face { font-family: "Work Sans"; font-style: normal; font-weight: 600; src: url("/webfonts/work-sans-v3-latin-600.eot"); /* IE9 Compat Modes */ src: local("Work Sans SemiBold"), local("WorkSans-SemiBold"), url("/webfonts/work-sans-v3-latin-600.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("/webfonts/work-sans-v3-latin-600.woff2") format("woff2"), /* Super Modern Browsers */ url("/webfonts/work-sans-v3-latin-600.woff") format("woff"), /* Modern Browsers */ url("/webfonts/work-sans-v3-latin-600.ttf") format("truetype"), /* Safari, Android, iOS */ url("/webfonts/work-sans-v3-latin-600.svg#WorkSans") format("svg"); /* Legacy iOS */ } @font-face { font-family: "Work Sans"; font-style: normal; font-weight: 700; src: url("/webfonts/work-sans-v3-latin-700.eot"); /* IE9 Compat Modes */ src: local("Work Sans Bold"), local("WorkSans-Bold"), url("/webfonts/work-sans-v3-latin-700.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("/webfonts/work-sans-v3-latin-700.woff2") format("woff2"), /* Super Modern Browsers */ url("/webfonts/work-sans-v3-latin-700.woff") format("woff"), /* Modern Browsers */ url("/webfonts/work-sans-v3-latin-700.ttf") format("truetype"), /* Safari, Android, iOS */ url("/webfonts/work-sans-v3-latin-700.svg#WorkSans") format("svg"); /* Legacy iOS */ } @font-face { font-family: "Crimson Text"; font-style: normal; font-weight: 400; src: url("/webfonts/crimson-text-v10-latin-regular.eot"); /* IE9 Compat Modes */ src: local("Crimson Text Regular"), local("CrimsonText-Regular"), url("/webfonts/crimson-text-v10-latin-regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("/webfonts/crimson-text-v10-latin-regular.woff2") format("woff2"), /* Super Modern Browsers */ url("/webfonts/crimson-text-v10-latin-regular.woff") format("woff"), /* Modern Browsers */ url("/webfonts/crimson-text-v10-latin-regular.ttf") format("truetype"), /* Safari, Android, iOS */ url("/webfonts/crimson-text-v10-latin-regular.svg#CrimsonText") format("svg"); /* Legacy iOS */ } @font-face { font-family: "Crimson Text"; font-style: normal; font-weight: 600; src: url("/webfonts/crimson-text-v10-latin-600.eot"); /* IE9 Compat Modes */ src: local("Crimson Text SemiBold"), local("CrimsonText-SemiBold"), url("/webfonts/crimson-text-v10-latin-600.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("/webfonts/crimson-text-v10-latin-600.woff2") format("woff2"), /* Super Modern Browsers */ url("/webfonts/crimson-text-v10-latin-600.woff") format("woff"), /* Modern Browsers */ url("/webfonts/crimson-text-v10-latin-600.ttf") format("truetype"), /* Safari, Android, iOS */ url("/webfonts/crimson-text-v10-latin-600.svg#CrimsonText") format("svg"); /* Legacy iOS */ } @font-face { font-family: "Crimson Text"; font-style: normal; font-weight: 700; src: url("/webfonts/crimson-text-v10-latin-700.eot"); /* IE9 Compat Modes */ src: local("Crimson Text Bold"), local("CrimsonText-Bold"), url("/webfonts/crimson-text-v10-latin-700.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("/webfonts/crimson-text-v10-latin-700.woff2") format("woff2"), /* Super Modern Browsers */ url("/webfonts/crimson-text-v10-latin-700.woff") format("woff"), /* Modern Browsers */ url("/webfonts/crimson-text-v10-latin-700.ttf") format("truetype"), /* Safari, Android, iOS */ url("/webfonts/crimson-text-v10-latin-700.svg#CrimsonText") format("svg"); /* Legacy iOS */ } /* crimson-text-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Crimson Text'; font-style: normal; font-weight: 400; src: url('//webfonts/crimson-text-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* crimson-text-600 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Crimson Text'; font-style: normal; font-weight: 600; src: url('//webfonts/crimson-text-v19-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* crimson-text-700 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Crimson Text'; font-style: normal; font-weight: 700; src: url('//webfonts/crimson-text-v19-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* ****************************************************************************************************************** */ /* --- Variablen ---------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ :root { --ka-text-brown: #4c4442; /* Body text in brown */ --ka-text-gray: #575950; /* Optional: body text in gray */ --ka-nav-light-brownish-gray: #7e6e64; /* Light mode navigation - inactive elements */ --ka-nav-very-light-gray: #b3b3b3; /* Dark mode navigation - inactive elements */ --ka-link-hover-green: #85bc1d; /* Mouse-over on green links */ --ka-nav-text: #ffffff; /* Navigation text (white) */ --ka-statement-green: #679e12; /* Statement highlight in green */ --ka-anchor-light-gray: #7e8274; /* Anchor links (e.g., jump marks) in light gray */ --ka-bk-body: #fff; --ka-border-button: #cbcbcb; --ka-border-footer: #b3b3b3; /* font-family: freight-sans-pro, sans-serif; font-family: freight-big-pro, serif; font-family: fiona, sans-serif; */ } /* ****************************************************************************************************************** */ /* --- Basics ------------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ html { scroll-behavior: smooth; } html.menu-open, body.menu-open { overscroll-behavior: none; touch-action: none; } body { font-family:"freight-big-pro", sans-serif; margin:0; padding:0; background-color:var(--ka-bk-body); font-size:24px; line-height:34px; letter-spacing: 0.01em; color:var(--ka-text-brown); font-weight:400; overflow-x: hidden; } .animated { -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.delay-1s { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .animated.delay-2s { -webkit-animation-delay: 1s; animation-delay: 1s; } #wrapper { width:100%; position:relative; margin:0; padding:0; } #container { width:100%; position:relative; margin:0; } #main { width:100%; position:relative; margin:0; padding:0; } #main { min-height:200px; } #main .inside { display:block; margin:0; padding:0; } #anker { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0; } section.bannerimage picture { display: block; width: 100%; height: 100%; } div { } table { border-collapse:collapse; border-spacing:0; } caption, th, td { text-align:start; /*vertical-align:top*/; } fieldset, img { border:0; } ul { list-style-type:none; } input, button, textarea, select { font-family:inherit; font-weight:inherit; } h1, h2, h3, h4, h5, h6 { font-family:"freight-big-pro", sans-serif; } h1 { font-size:66px; line-height:76px; font-weight:normal; letter-spacing:0em; font-weight:400; } h2 { font-size:36px; line-height:45px; font-weight:400; } h2.freightsanspro { font-family:"freight-sans-pro", sans-serif; text-transform: uppercase; } h3 { margin-top: 0; font-size:36px; line-height:45px; font-weight:400; } h4 { width:100%; /*text-align:center;*/ font-size:24px; } h5 { width:100%; font-size:18px; color:#303683; font-weight:500; } h6 { font-family:"fiona", sans-serif; font-size:72px; line-height:86px; text-transform: uppercase; font-weight:normal; letter-spacing:0.08em; font-weight:400; color: var(--ka-statement-green); } table { font-size:inherit; } caption, th { font-weight:bold; } a:hover { color:#2a2e5c; } img { border:0; } header, footer, nav, section, aside, article, figure, figcaption { display:block; } img { height:auto; /*width:100% !important; */; } figcaption { text-align: center; font-size: 14px; line-height: 20px; } .ce_gallery ul { overflow:hidden; margin:0; padding:0; list-style:none; } .ce_gallery li { float:left; } .ce_gallery li.col_first { clear:left; } .block { overflow:visible; } .clear, #clear { float:none; clear:both; } .invisible { width:0; height:0; left:-1000px; position:absolute; overflow:hidden; display:inline; top:-1000px; } video { width: 100%; } .custom { display:block; } #container:after, .custom:after { height:0; clear:both; display:block; content:"."; visibility:hidden; } /* Contao Open Source CMS, (c) 2005-2013 Leo Feyer, LGPL license */ legend { width:100%; display:block; border:0; font-weight:bold; } img { width:auto; height:auto; max-width:100%; } strong { font-weight:600; } p { margin-top:12px; margin-bottom:12px; } a, .ce_text a { text-decoration:none; color: var(--ka-text-brown); } .ce_text a:hover, a.mail:hover { text-decoration:underline; } #toTop img { width: auto !important; } .ce_text { width:100%; float:left; margin-bottom:10px; } .center { width:100%; text-align:center; } .content { width:100%; float:left; } .mod_article { width:100%; position:relative; } .limit1200 { width:100%; max-width:1260px; margin-right:auto; margin-left:auto; } .limit1300 { width:100%; max-width:1300px; position:relative; margin-right:auto; margin-left:auto; } .limit1600 { width:100%; max-width:1460px; margin-right:auto; margin-left:auto; } .limit1900, .limit1900int { width:100%; max-width:1900px; margin-right:auto; margin-left:auto; } .limit1060 { width:100%; max-width:1060px; margin-right:auto; margin-left:auto; } .limit1000 { max-width:1000px; margin-right:auto; margin-left:auto; } .col25, #col25 { width:25%; float:left; } .col25m, #col25m { float:left; margin-right:30px; margin-left:0; padding-right:0; padding-left:0; width:calc(25% - 30px); } .col33, #col33 { width:33.3%; float:left; } .col33m { float:left; margin-right:30px; width:calc(33.3% - 30px); } .col33mr { float:left; margin-right:0; margin-left:30px; width:calc(33.3% - 30px); } .col50, #col50 { width:50%; float:left; } .col50m, #col50m { float:left; margin-right:30px; width:calc(50% - 30px); } .col50m30, #col50m30 { float:left; margin-right:30px; width:calc(50% - 30px); } .col50mr { float:left; margin-right:0; margin-left:30px; width:calc(50% - 30px); } .col66 { width:66.6%; float:left; } .col66m { float:left; margin-right:30px; margin-left:0; width:calc(66.6% - 30px); } .col66mr { float:left; margin-right:0; margin-left:30px; width:calc(66.6% - 30px); } .dist20 { display:flex; height:20px; } .dist25 { display:flex; height:25px; } .dist30 { display:flex; height:30px; } .dist50 { display:flex; height:50px; } .dist80 { display:flex; height:80px; } .dist100 { display:flex; height:100px; } .bot30 { margin-bottom:30px; } .flexcontainer { display: -webkit-flex; display: -ms-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; flex-direction: row; } .flexbox { display: -webkit-flex; display: -ms-flexbox; display: flex; } .statement, .reservation.statement a, #main .statement, #main .statement a { color: var(--ka-statement-green); } .reservation.statement a, #main .statement a { font-size: 48px; line-height: 52px; letter-spacing: 0.01em; } .theme { display: flex; align-items: center; justify-content: center; gap: 2rem; font-size: 24px; line-height: 30px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-family: "freight-sans-pro", sans-serif; color: var(--ka-statement-green); margin: 100px 0 100px 0; } .theme::before, .theme:after { content: ""; flex: 1; max-width: 185px; height: 1px; background-color: currentColor; } .theme.top { margin: 20px 0 100px 0; color: var(--ka-text-brown); } .content-image { position: relative; } .vcenterheadline.mobile { display: none; } .vcenterheadline h6 { position: absolute; margin: 0; top: 50%; transform: translate(0, -50%); max-width: 33%; } .FreightSansProLight18 { font-family: "freight-sans-pro", sans-serif; font-size: 18px; line-height: 24px; text-transform: uppercase; } .FreightSansProLight24 { font-family: "freight-sans-pro", sans-serif; font-size: 24px; line-height: 30px; text-transform: uppercase; font-weight: 300; } .cite p:last-of-type { font-family: "freight-sans-pro", sans-serif; font-size: 18px; line-height: 24px; text-transform: uppercase; } .claim-visual { max-width: 1000px; position: relative; text-align: center; margin: 0 auto; } .claim-visual h6 { max-width: 335px; text-align: left; position: absolute; right: -230px; bottom: 20%; } .after-claim-visual { max-width: 645px; margin-top: -75px; } #cboxCurrent { display:none; display: none !important } #cboxContent { margin:0; padding-right:70px; padding-left:70px; border:0px; background:none; } #cboxLoadedContent { border:0px; } #cboxPrevious { width:50%; height:50%; top:25%; position:absolute; margin-top:-15px; margin-left:0; background-image:url("/files/intern/common/restaurant-haerlin-hamburg-pfeil-links-weiss.png"); background-position:left center; background-repeat:no-repeat; } #cboxPrevious:hover { background-image:url("/files/intern/common/restaurant-haerlin-hamburg-pfeil-links-gruen.png"); background-position:left center; background-repeat:no-repeat; border:0px; } #cboxNext { width:50%; height:50%; top:25%; position:absolute; margin-top:-15px; background-image:url("/files/intern/common/restaurant-haerlin-hamburg-pfeil-rechts-weiss.png"); background-position:right center; background-repeat:no-repeat; } #cboxNext:hover { background-image:url("/files/intern/common/restaurant-haerlin-hamburg-pfeil-rechts-gruen.png"); background-position:right center; background-repeat:no-repeat; border:0px; } #cboxClose { width:70px; height:70px; background-image:url("/files/intern/common/restaurant-haerlin-hamburg-close.png"); background-position:right top; background-repeat:no-repeat; } #cboxClose:hover { background-image:url("/files/intern/common/restaurant-haerlin-hamburg-close-over.png"); background-position:right top; background-repeat:no-repeat; } #cboxPrevious:focus, #cboxNext:focus, #cboxClose:focus, #cboxPrevious:hover, #cboxNext:hover, #cboxClose:hover { outline:none; } #cboxPrevious, #cboxNext, #cboxClose { cursor: pointer; } .flexcontainer { display: flex; justify-content: space-between; } .flexcontainer.space-between { justify-content: space-between; } .flexcontainer.column { flex-direction: column; } .flexcontainer.center { justify-content: center; } .clear { height:1px; float:none; clear:both; display:block; } #clear { float:none; clear:both; margin-top:30px; } .width100 { width: 100%; } .limit2000, .limit2000int { max-width:2000px; margin-right:auto; margin-left:auto; } .limit1800, .limit1800int { max-width:1800px; margin-right:auto; margin-left:auto; } .limit1600, .limit1600int { max-width:1600px; margin-right:auto; margin-left:auto; } .limit1400, .limit1400int { max-width:1400px; margin-right:auto; margin-left:auto; } .limit1300, .limit1300int { max-width:1300px; margin-right:auto; margin-left:auto; } .limit1200, .limit1200int { max-width:1200px; margin-right:auto; margin-left:auto; } .limit1000, .limit1000int { max-width:1000px; margin-right:auto; margin-left:auto; } .limit800 { max-width:800px; margin-right:auto; margin-left:auto; } .maxwidth300 { max-width: 300px; } .maxwidth400 { max-width: 400px; } .grid { display:grid; } .grid.frx { grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 40px; grid-row-gap: 40px; } .grid.fr2 { grid-template-columns: 1fr 1fr; grid-column-gap: 40px; grid-row-gap: 40px; } .grid.fr3 { grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 40px; grid-row-gap: 40px; } .grid.fr4 { grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 40px; grid-row-gap: 40px; } .grid.fr5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-column-gap: 40px; grid-row-gap: 40px; } .grid.fr6 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-column-gap: 40px; grid-row-gap: 40px; } .grid.fr21 { grid-template-columns: 2fr 1fr; grid-column-gap: 40px; grid-row-gap: 40px; } .grid.fr12 { grid-template-columns: 1fr 2fr; grid-column-gap: 40px; grid-row-gap: 40px; } .grid.fr211 { grid-template-columns: 2fr 1fr 1fr; grid-column-gap: 40px; grid-row-gap: 40px; } .grid.fr13 { grid-template-columns: 1fr 3fr; grid-column-gap: 40px; grid-row-gap: 40px; } .grid.fr25252525 { grid-template-columns: 25% 25% 25% 25%; grid-column-gap: 40px; grid-row-gap: 40px; } .grid.fr502525 { grid-template-columns: 50% 1fr 1fr; grid-column-gap: 40px; grid-row-gap: 40px; } .grid.fr121 { grid-template-columns: 1fr 2fr 1fr; grid-column-gap: 40px; grid-row-gap: 40px; } .grid.fr112 { grid-template-columns: 1fr 1fr 2fr; grid-column-gap: 40px; grid-row-gap: 40px; } .grid.gapcol { grid-column-gap: 30px; grid-row-gap: 30px; } .grid.gapcol3 { grid-column-gap: 30px; grid-row-gap: 30px; } .grid.gapcol2 { grid-column-gap: 30px; grid-row-gap: 30px; } .grid.gap0 { grid-column-gap: 0px; grid-row-gap: 0px; } .grid.gap10 { grid-column-gap: 10px; grid-row-gap: 10px; } .grid.gap20 { grid-column-gap: 20px; grid-row-gap: 20px; } .grid.gap30 { grid-column-gap: 30px; grid-row-gap: 30px; } .grid.gap40 { grid-column-gap: 40px; grid-row-gap: 40px; } .grid.gap60 { grid-column-gap: 60px; grid-row-gap: 60px; } .grid.gap80 { grid-column-gap: 80px; grid-row-gap: 40px; } .grid.gap100 { grid-column-gap: 100px; grid-row-gap: 50px; } #putten .textxcols .wti .text { max-width: 450px; margin-left: auto; } #putten .textxcols .wit .text { max-width: 450px; margin-right: auto; } #putten .textxcols .wit .text .headline { font-size: 60px; line-height: 70px; margin-top: 100px; } #main #leuchter h2.headline { font-size: 60px; line-height: 70px; } #radierungen .limit1300int { padding: 0 50px; } #radierungen .tsi .text { padding-right: 1em; } #radierungen .hit .text { max-width: 450px; } /* ****************************************************************************************************************** */ /* --- Header ---------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ #header { width:100%; left:0; top:0; right: 0; min-height: 85px; position: fixed; margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0; z-index:950; background: transparent; transition: top 0.2s ease-in-out; } #header.nav-up { top: -85px; } #header.scrolled { background: rgba(255,255,255,0.3); backdrop-filter: blur(2px); } #header.scrolled .menu-toggle { top: 35px; } #header.scrolled div.menubar { top: 32px; } #header .fixedlogo { display: none; } #header.scrolled .fixedlogo { position: absolute; display: block; width: 100%; max-width: 160px; top: 8px; left: 50%; transform: translateX(-50%); } #header #haerlinlogo { top:12px; position:absolute; display:none; left:calc(50% - 41px); /*z-index:951;*/ } #header #haerlinlogoleft { left:20px; top:30px; position:absolute; display:none; /*z-index:951;*/ } #header .logo { left:0; top:20px; position:absolute; } #header .logo img { width:174px; } #header .mod_navigation ul li { text-transform:uppercase; } #headerimage { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0; } #banner { width:100%; margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0; } #banner .scrollDown { position: absolute; bottom: 25px; right: 15px; display: none; width: 50px; height: 50px; padding: 0; margin: 0; border-radius: 30px; background-image: url('/files/intern/common/restaurant-haerlin-page-up.svg'); background-size: 40%; background-position: center; background-color: rgba(255, 255, 255, 0.7); background-repeat: no-repeat; transform: rotate(180deg); animation: pulse 1.8s infinite; opacity: 1; visibility: visible; transition: opacity 0.4s ease, visibility 0.4s ease; } #banner .scrollDown.hidden { opacity: 0; visibility: hidden; } @keyframes pulse { 0% { transform: rotate(180deg) scale(1); opacity: 1; } 50% { transform: rotate(180deg) scale(1.15); opacity: 0.7; } 100% { transform: rotate(180deg) scale(1); opacity: 1; } } #headerimage img, #headerimage .mejs__container, #headerimage .mejs__mediaelement { width:100%; width:100% !important; } body.home #headerimage { width:100%; overflow:hidden; display:inline-block; max-height: calc(100vh - 20px) !important; } .ankermenu { margin-top:20px; display: flex; align-items: center; justify-content: center; } .ankermenu a { padding-right:10px; padding-left:10px; font-size:16px; color:#272727; text-transform:uppercase; letter-spacing:.1em; font-weight:400; } #header div.menubar { position: absolute; left: auto; right: 50px; top: 22px; display: flex; flex-direction: row; align-items: center; } #header .menubar a { color: var(--ka-statement-green); font-family: "freight-sans-pro", sans-serif; text-transform:uppercase; letter-spacing:.05em; margin: 0 0 0 50px; opacity: 0; animation: MenuBarfadeIn 2s ease forwards; animation-delay: 3s; font-weight: 600; letter-spacing: 0.08em; font-size: 18px; line-height: 18px; transition: color 0.5s ease; } #header .menubar a:hover { color:var(--ka-link-hover-green); } @keyframes MenuBarfadeIn { from { opacity: 0; } to { opacity: 1; } } /* #header .menubar a:nth-of-type(6) { margin-left:120px; } */ /* Optional: Styling für deine SVG-Box */ .menu-toggle { position: absolute; display: flex; top: 25px; left: 40px; cursor: pointer; display: inline-block; width: 50px; height: 40px; background-image: url("/files/intern/header/restaurant-haerlin-menu.svg"); background-repeat: repeat-x; background-size: 100%; transition: all 0.5s ease; } .menu-toggle:hover { width: 60px; background-size: 80%; } header .reservation { display: none; } .menu-toggle img { } /* Sichtbarkeit deines Menüs */ #navmainmega, .mod_navigation.main-nav { position: relative; display: none; flex-direction: column; justify-content: center; align-items: center; /* width: calc(100vw - 0px); */ height: 100vh; background-color: #000; display: none; transition: all 0.3s ease; z-index: 999; } #navmainmega.active, .mod_navigation.main-nav.active { display: flex; } /* Optional: Styles für #header wenn Menü aktiv */ #header.menuactive { background-color: #f8f8f8; /* Beispiel */ z-index: 9999; } #navmainmega * { color: var(--ka-nav-light-brownish-gray); font-size: 48px; line-height: 52px; } #navmainmega .mobilelogo { display: none; } #navmainmega .grid { width: 100%; max-width: calc(100% - 240px); margin: 0 auto; } #navmainmega .leftblock, #navmainmega .centerblock, #navmainmega .rightblock { display: flex; flex-direction: column; justify-content: center; align-items: center; } #navmainmega .leftblock { align-items: flex-start; } #navmainmega .leftblock a { line-height: 72px; } #navmainmega .rightblock { /*left: -100px;*/ /*align-items: flex-end;*/ align-items: center; } #navmainmega .rightblock .rightblockinside { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } #navmainmega .rightblock .hl { font-size: 40px; line-height: 44px; } #navmainmega .centerblock .menulogo img { width: 240px; margin: 0; } #navmainmega .bottommenu { position: absolute; left: 80px; top: auto; right: auto; bottom: 20px; display: none; } #navmainmega .bottommenu ul { display: flex; flex-direction: row; } #header .bottommenu ul li { text-transform: inherit; } #navmainmega .bottommenu ul li a, #navmainmega .bottommenu ul li strong { margin: 0 0 0 10px; font-size: 22px; text-transform: inherit; } #navmainmega .leftblock a, #navmainmega .bottommenu ul li a, #navmainmega .rightblock a.statement { transition: all 500ms linear; } #navmainmega .leftblock a:hover, #navmainmega .bottommenu ul li a:hover { color: #4c4442; } #navmainmega a.statement { display: flex; color: var(--ka-statement-green); } #navmainmega a.statement:hover, #navmainmega .rightblock a.statement:hover { color:var(--ka-link-hover-green); } #navmainmega .rightblock a.statement { margin: 0px 0 40px 0; font-family: "freight-sans-pro", sans-serif; font-size: 22px; line-height: 26px; } #navmainmega .bk, #navmainmega .shadow { position: absolute; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; z-index: -2; } #navmainmega .bk { z-index: -2; } #navmainmega .shadow { z-index: -2; background-color: rgba(255,255,255,0.2); } #navmainmega .bk img { width: 100%; height: 100%; object-fit: cover; } #navmainmega .awards { position: absolute; top: auto; left: 50%; bottom: 40px; transform: translate(-50%, 0%); } #navmainmega .awards img { width: 100px; } #navmainmega .instagram { display: flex; flex-direction: row; align-items: center; } #navmainmega .rightblock .lang { position: relative; margin: 0 0 40px 0; } #navmainmega .rightblock .lang ul li { position: relative; margin: 0 10px 0 0; } #navmainmega .rightblock .lang ul li a, #navmainmega .rightblock .lang ul li strong { font-family: "freight-sans-pro", sans-serif; font-size: 21px; line-height: 21px; font-weight: 400; transition: all 0.5s ease; } #navmainmega .rightblock .lang ul li a:hover, #navmainmega .rightblock .lang ul li strong { color: #fff; } #navmainmega .rightblock .instagram a { margin:0; font-size: 22px; line-height: 22px; } #navmainmega .instagram img { margin: 10px 0 0 12px; width: 24px; } #navmainmega .close { position: absolute; left: auto; right: 20px; top: 20px; } #navmainmega .close img { width: 44px; cursor: pointer; } /* ****************************************************************************************************************** */ /* --- Footer ---------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ #footer { width:100%; display:inline-block; margin:0; padding:0; } #footer * { color: var(--ka-nav-light-brownish-gray); } #footer .inside { position:relative; width:100%; max-width:1400px; margin:0 auto; padding:0; display: flex; flex-direction: column; } #footer .inside .flexcontainer { display: flex; flex-direction: row; justify-content: center; } #footer .footermenu { position: relative; display: flex; width: 100%; justify-content: center; align-items: center; margin:20px; padding: 50px 0 60px 0; border-top: 1px solid var(--ka-border-footer); } #footer .footermenu .language { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0 0 0 40px; padding: 0; } #footer .socials h3 { margin: 0 0 3px 0; font-family: "freight-big-pro", serif; font-size: 20px; transform: translateY(2px); } #footer .socials { position: relative; display: flex; flex-direction: row; justify-content: center; align-items: center; } #footer .socials a { display: flex; flex-direction: row; text-transform: inherit; padding: 0 0 0 15px; } #footer .socials img.mobile { display: none; } #footer .socials a div { font-family: "freight-big-pro", serif; text-transform: inherit; margin: 5px 0 0 10px; color: var(--ka-statement-green); font-weight: 500; } #footer .socials img { width: 24px; margin: 0 10px; } #footer nav.mod_changelanguage { } #footer nav.column ul, #kontakt nav.column ul { float:left; display:block; line-height:1em; color:#FFF; text-transform:uppercase; font-weight:400; margin:0; padding: 0; } #footer .menubar .res, #kontakt .menubar .res { margin-right:10px; } #footer nav.column ul li, #kontakt nav.column ul li { float:left; } #footer * { font-family: "freight-sans-pro", sans-serif; /* font-size: 18px; line-height: 18px; */ } #footer a, #footer strong { margin:0; padding:0 30px; text-align:left; text-transform:uppercase; } #footer a, #footer nav strong { font-size: 18px; line-height: 18px; } #footer nav strong { color: var(--ka-statement-green); font-weight: 500; } #footer .mod_changelanguage { position:relative; } .mod_changelanguage ul { } .mod_changelanguage ul li { float:left; margin-right:0; margin-left:0; } #footer .mod_changelanguage ul li a, #footer .mod_changelanguage ul li strong { text-transform:uppercase; padding: 0 10px; } #footer .mod_changelanguage ul li strong { color:var(--ka-statement-green); font-weight:500; } #footer .mod_changelanguage ul li.first::after { display:inline-block; margin-left:8px; content: "/"; } #footer .mod_changelanguage ul li a, #footer .mod_changelanguage ul li strong { transition:color 500ms ease; font-weight: 500; } #footer div.ce_toplink { position:fixed; z-index: 949; left: auto; right:25px; top:auto; bottom:20px; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease } #footer div.ce_toplink.visible { opacity: 1; visibility: visible; } #footer div.ce_toplink a { display: flex; width: 60px; height: 60px; padding: 0; margin: 0; border-radius: 30px; background-image: url('/files/intern/common/restaurant-haerlin-page-up.svg'); background-size: 40%; background-position: center; background-color: rgba(255, 255, 255, 0.7); background-repeat: no-repeat; transition: all 0.7s ease-in-out; } #footer div.ce_toplink a:hover { background-color: rgba(255, 255, 255, 0.9); } #main #wissenswertes a, #main #information a { font-size: 20px; } /* ****************************************************************************************************************** */ /* --- mainmenu ----------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ nav#mainmenu a { margin-right:0; margin-left:0; padding-right:0; padding-left:0; font:15px Work Sans,Arial; color:#272727; text-transform:uppercase; letter-spacing:.05em; font-weight: 500; } nav#mainmenu { margin-top: 37px; display: flex; align-items: center; justify-content: center; } nav#mainmenu ul li { float:left; margin-right:0; margin-left:0; padding-right:10px; padding-left:10px; } nav#mainmenu ul li.first { margin-left:0; } nav#mainmenu ul li:hover > ul { display:block; } nav#mainmenu ul li a { position:relative; display:block; } nav#mainmenu ul li a.first { margin-left:0; border-top:0; } nav#mainmenu ul li a:hover { color:#070707; } nav#mainmenu ul ul li { position:relative; float:none; margin-left:0; border-bottom:1px solid #ccc; } nav#mainmenu ul ul li a { margin:4px 0; padding:4px 7px; font-size:18px; line-height:24px; color:#d8c394; } nav#mainmenu ul ul ul { left:100%; position:absolute; top:0; } nav#mainmenu ul a:before { line-height: 24px!important; width: 20px!important; } nav#mainmenu ul a.trail, nav#mainmenu ul a.active, nav#mainmenu ul a:hover { color:#121212; } #navmainmega .rightblock .lang ul li strong { color: var(--ka-statement-green); font-weight: 600; } /* ****************************************************************************************************************** */ /* --- cookiebar ---------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ .contao-cookiebar .cc-inner { background-color: #000; } .contao-cookiebar .cc-cookies { background-color: #444; } .contao-cookiebar .cc-cookies .cc-cookie .cc-cookie-info { background-color: #222; } .contao-cookiebar *, .contao-cookiebar .cc-cookies .cc-cookie p, .contao-cookiebar .cc-group > label { color: #fff; font-size: 16px; line-height: 20px; } .contao-cookiebar .cc-head h4 { text-transform: uppercase; } .contao-cookiebar p, .contao-cookiebar .cc-head p { /* font-size: 14px; line-height: 17px; */ color: #fff; } .contao-cookiebar .cc-head a { color: var(--ka-brand_gold); } .contao-cookiebar input:checked + label:before { background-color: var(--ka-brand_gold); } .contao-cookiebar input:checked + label:before { border-color: #000; } .contao-cookiebar input:checked + label:after { background: #000; } .contao-cookiebar .cc-group, .contao-cookiebar .cc-cookie-info, .contao-cookiebar .cc-cookies .cc-cookie .cc-cookie-info { border-radius: 0; } .contao-cookiebar .cc-group .cc-detail-btn { background: #444; } .contao-cookiebar .cc-footer { margin-top: 25px; } .contao-cookiebar .cc-group, .contao-cookiebar .cc-cookies > p, .contao-cookiebar .cc-cookies > .cc-cookie, .contao-cookiebar .cc-cookies .cc-cookie .cc-cookie-info { border: 1px solid #6b6b6b; } .contao-cookiebar .cc-btn { display: inline-block; border-radius: 0px; padding: 14px 22px; color: #fff; border: none; outline: none; text-decoration: none; background: #202020; font-size: 16px; line-height: 1.5; font-weight: 500; text-align: center; vertical-align: top; cursor: pointer; overflow: hidden; backface-visibility: hidden; letter-spacing: normal !important; position: relative; white-space: nowrap; transform: translate3d(0, 0, 0); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.1); -webkit-appearance: none; margin-bottom: 10px; transition: 0.3s; user-select: none !important; } .contao-cookiebar .cc-btn, .contao-cookiebar .highlight .cc-btn, .contao-cookiebar .highlight .cc-btn.success { position: relative; /* background: linear-gradient(180deg, #fed79c 0%, #bc8b41 100%); border: 1px solid #D0A86B !important; */ white-space: normal; /*padding: 0.35em 1em;*/ padding: 12px 16px 8px 16px; font-size: 16px; color: #fff; font-weight: 600; box-shadow: none !important; } .contao-cookiebar .highlight .cc-btn.success { background-color: #7F992F; } .contao-cookiebar .cc-btn:hover, .contao-cookiebar .highlight .cc-btn:hover, .contao-cookiebar .highlight .cc-btn.success:hover { background-color: #444; } .contao-cookiebar .highlight .cc-btn.success:hover { background-color: #637526; } body { font-size: 22px; line-height: 30px; letter-spacing: 0.03em; } h1 { font-size: 50px; line-height: 60px; } h2 { font-size: 40px; line-height: 50px; } h3 { font-size: 32px; line-height: 40px; } .FreightSansProLight24 { font-size:18px; line-height:26px; font-weight:400; } .theme { font-size: 22px; line-height: 30px; margin-bottom: 50px; } section.kalinks.statement { margin: 100px 0 0 0; } .statement .limit1600 { position: relative; } .nature-creativity .mobile, .leuchter .mobile { display: none; } div.textimg .textblock .block { max-width: 500px; display: flex; width: 100%; flex-direction: column; justify-content: center; align-items: center; } /* ****************************************************************************************************************** */ /* --- bannerimage -------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ #banner { position: relative; /* width: 100vw; */ height: 90vh; } #banner .mod_article { position: relative; width: 100%; height: 100%; } section.bannerimage { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } section.bannerimage div.shadow { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: +1; background-color: rgba(0, 0, 0, 0.5); pointer-events: none; animation: fadeOutShadow 2s ease forwards; animation-delay: 2s; /* Wartezeit vor dem Ausblenden */ } @keyframes fadeOutShadow { from { opacity: 1; } to { opacity: 0.5; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } section.bannerimage img.bkimage { width: 100%; height: 100%; object-fit: cover; object-position: center center; } section.bannerimage img.bkimage.mobile { display: none; } section.bannerimage div.logos, section.bannerimage .logosmall, section.bannerimage div.buttons { position: absolute; display: flex; justify-content: center; align-items: center; z-index: +2; } section.bannerimage .logosmall, section.bannerimage div.buttons { opacity: 0; animation: fadeIn 1s ease forwards; animation-delay: 2s; } section.bannerimage div.logos { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; flex-direction: column; } section.bannerimage img.award { margin: 30px 0 0 0; width: 120px; transform: translateY(50px); /*animation: fadeOut 1s ease forwards; */ /*animation-delay: 2s; */ } section.bannerimage .logosmall { top: 10px; left: 50%; transform: translate(-50%, 0%); width: 180px; z-index: 999; display: none; } section.bannerimage div.buttons { bottom: 20px; left: 50%; transform: translate(0, 0%); } section.bannerimage div.buttons a.button, section.bannerimage div.buttons div.button { display: flex; justify-content: center; align-items: center; letter-spacing: 0.05em; border-radius: 80px; width: 135px; height: 135px; background-color: rgba(255, 255, 255, 0.4); padding: 0; overflow: visible; z-index: 1; transition: all 0.5s ease; animation: bannerbuttonbreathe 6s ease-in-out infinite; animation-delay: 2s; } section.bannerimage div.buttons a.button:hover, section.bannerimage div.buttons div.button:hover { backdrop-filter: blur(10px); background-color: rgba(255, 255, 255, 0.8); color: var(--ka-link-hover-green); } @keyframes bannerbuttonbreathe { 0% { transform: translate(-50%, 0%) scale(1); } 50% { transform: translate(-50%, 0%) scale(1.25); } 100% { transform: translate(-50%, 0%) scale(1); } } /* ****************************************************************************************************************** */ /* --- swiperslider ------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ .swiper-container { position: relative; max-width: 100%; overflow: hidden; /* !!! */ } .swiper-wrapper { max-width: 100%; } .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after, .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { content: '' !important; } /* .swiper-wrapper { width: 100%; } */ .swiper-button-prev, .swiper-button-next { position: absolute; top: calc(50% - 0px); left: auto; right: auto; width: 60px !important; height: 60px !important; background-repeat: no-repeat; background-color: rgba(255,255,255,0.7); background-repeat: no-repeat; background-position: center; background-size: 40%; border-radius: 30px; transition: all 0.7s ease-in-out; cursor:pointer; z-index: 999; } .swiper-button-prev:hover, .swiper-button-next:hover { background-color: rgba(255,255,255,0.9); } .swiper-button-prev { left: 0px; background-image:url("/files/intern/common/restaurant-haerlin-pfeil-links-braun.svg"); } .swiper-button-next { right: 0px; background-image:url("/files/intern/common/restaurant-haerlin-pfeil-rechts-braun.svg"); } /* ****************************************************************************************************************** */ /* --- Slider1 ----------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ section.kaslider1 { width: 100%; position: relative; background-color: var(--ka-white); padding: 0; display: flex; flex-direction: column; } section.kaslider1 .content { position: relative; display: flex; flex-direction: column; left: 50%; transform: translate(var(--ka-gl-translate), 0); width: calc((100% - var(--ka-gl-width)) / 2 + var(--ka-gl-width) - var(--ka-gl-pad) - 0px); padding: 80px 0 100px var(--ka-gl-pad); top: 100px; z-index: +1; } section.kaslider1.textwhite .content { color: var(--ka-fontwhite-color); } section.kaslider1 .contentright { display: flex; position: relative; max-width: calc(100% - var(--ka-gl-padleft)); flex-direction: row; margin: 40px 0 0 0; } section.kaslider1.sliderw_1400, section.kaslider1.sliderw_1200, section.kaslider1.sliderw_1000, section.kaslider1.sliderw_800, section.kaslider1.sliderw_600, section.kaslider1.sliderw_400, section.kaslider1.sliderw_300, section.kaslider1.sliderw_200 { margin-left: auto; margin-right: auto; } section.kaslider1.marginleft { margin-right: 0; } section.kaslider1.sliderw_1400 { max-width: 1400px; } section.kaslider1.sliderw_1200 { max-width: 1200px; } section.kaslider1.sliderw_1000 { max-width: 1000px; } section.kaslider1.sliderw_800 { max-width: 800px; } section.kaslider1.sliderw_600 { max-width: 600px; } section.kaslider1.sliderw_400 { max-width: 400px; } section.kaslider1.sliderw_300 { max-width: 300px; } section.kaslider1.sliderw_200 { max-width: 200px; } section.kaslider1.marginleft.sliderw_1400 { max-width: calc(100% - (100% - 1400px) / 2); } section.kaslider1 .content.order2 { order: 2; top: -100px; z-index: +2; } section.kaslider1 .sliderbox.order1 { order: 1; } section.kaslider1 .swiper-container { z-index: 0; } section.kaslider1 .textbox { background-color: var(--ka-white); } section.kaslider1 .textblock { position: relative; display: flex; width: 100%; overflow: visible; height: 25px; } section.kaslider1 .textblock .statement { position: absolute; display: flex; left: auto; right: 0; top: auto; bottom: 0; margin: 0 0 20px 0; } section.kaslider1 .textblock .statement img { width: 200px; height: 25px; } section.kaslider1 .sliderbox { z-index: +2; } section.kaslider1 .swiper-slide { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; align-items: center; } section.kaslider1.img1.single .swiper-slide .container_img1 { /*width: 800px;*/ max-width: 100%; margin: 15px 0 0 0; justify-content: center; flex-direction: column; } section.kaslider1.img1.single .swiper-slide .container_img1 h3 { font-size: 28px; line-height: 32px; white-space: nowrap; } section.kaslider1.img1.part .swiper-slide .textbox { position: absolute; top: auto; bottom: 00px; left: 0px; width: auto; } section.kaslider1.img1.part .swiper-slide .textbox .hoverbox, section.kaslider1.img1.part .swiper-slide .textbox .nohoverbox { position: relative; display: flex; flex-direction: column; overflow: hidden; justify-content: center; height: 68px; background: var(--ka-bk-darkblue); } section.kaslider1.img1.part .swiper-slide .textbox .hoverbox .text, section.kaslider1.img1.part .swiper-slide .textbox .hoverbox .button { transition: opacity 1.75s ease-in-out; transition: height 0.75s ease-in-out; width: calc(100% - 100px); overflow: hidden; } section.kaslider1.img1.part .swiper-slide .textbox .hoverbox .text, section.kaslider1.img1.part .swiper-slide .textbox .nohoverbox .text { height: 100%; opacity: 1; } section.kaslider1.img1.part .swiper-slide .textbox .hoverbox .button { position: relative; height: 0; padding: 0; width: 100%; display: flex; } section.kaslider1.img1.part .swiper-slide .textbox .hoverbox .button a { padding: 0 50px; color:var(--ka-bk-btn-hover); width: 100%; height: 100%; display: flex; opacity: 0; transition: height 0.75s ease-in-out; } section.kaslider1.img1.part .swiper-slide .textbox .hoverbox:hover { } section.kaslider1.img1.part .swiper-slide .textbox .hoverbox:hover .text { height: 0; padding: 0 50px; opacity: 0; } section.kaslider1.img1.part .swiper-slide .textbox .hoverbox:hover .button { height: 100%; display: flex; align-items: center; } section.kaslider1.img1.part .swiper-slide .textbox .hoverbox:hover .button a { height: auto; padding: 40px 50px; opacity: 1; } body.touchdevice section.kaslider1.img1.part .swiper-slide .textbox .hoverbox { height: auto; } body.touchdevice section.kaslider1.img1.part .swiper-slide .textbox .hoverbox .button { height: auto; } body.touchdevice section.kaslider1.img1.part .swiper-slide .textbox .hoverbox .text, body.touchdevice section.kaslider1.img1.part .swiper-slide .textbox .nohoverbox .text { padding: 10px 40px 0 40px; } body.touchdevice section.kaslider1.img1.part .swiper-slide .textbox .hoverbox .button a { opacity: 1; padding: 10px 40px; background-color: var(--ka-bk-btn-active); color: #fff; } section.kaslider1.img1.part .swiper-slide .container_img1 { position: relative; width: 100%; height: 100%; } section.kaslider1.img1.part .swiper-slide .container_img1 .image_container { width: 100%; height: 100%; } section.kaslider1.img1.part .swiper-slide .container_img1 .image_container img { display: flex; width: 100%; height: 100%; object-fit: cover; } section.kaslider1.img1.part .swiper-slide .textbox .headline { margin: 0; padding: 20px 50px; background: var(--ka-bk-lightblue); background:rgba(53,81,89,0.6); } section.kaslider1.img1.part .swiper-slide .textbox .text { margin: 0; padding: 12px 50px; } section.kaslider1.img1.part .swiper-slide .textbox * { color: var(--ka-font-white); } section.kaslider1 .teaserlist { display: flex; flex-direction: row; justify-content: center; margin: 50px 0 20px 0; } section.kaslider1 .teaserlist .teaser { text-align: center; margin: 0 10px; } #main section.kaslider1 .teaserlist .teaser a { display: block; padding: 0 0 8px 0; border-bottom: 0px solid var(--ka-border-color); } #main section.kaslider1 .teaserlist .teaser.active a { border-bottom: 1px solid var(--ka-border-color); color: var(--ka-font-color); } section.kaslider1 .swipercontainers { position: relative; } section.kaslider1 .swipercontainers .tmainswiper { margin: 0 0 50px 0; margin: 0 0 0px 0; } section.kaslider1.thumbslider .thumbswiper { margin: 20px 0; } section.kaslider1.thumbslider .thumbswiper .swiper-slide { display: flex; flex-direction: column; border-left: 1px solid var(--ka-border-color); opacity: 0.2; } section.kaslider1.thumbslider .swipercontainers .thumbcontainer .swiper-slide.swiper-slide-thumb-active { opacity: 1; } section.kaslider1.thumbslider .thumbswiper .swiper-slide .textbox { padding: 80px 0 80px 20px; width: calc(100% - 40px); } section.kaslider1.thumbslider .buttons { position: relative; display: grid; } section.kaslider1.thumbslider .buttons > div { position: relative; display: flex; width: 100%; margin: 20px 0 0 0; } section.kaslider1.thumbslider .swiper-button-next, section.kaslider1.thumbslider .swiper-button-prev { top: auto; bottom: 10px; top: 30px; bottom: auto; } section.kaslider1 .swiper-pagination { text-align: center; margin: 0 0 20px 0; } section.kaslider1 .swiper-pagination-bullet { width: 10px; height: 10px; background: rgba(255, 255, 255, 0.6); border-radius: 50%; margin: 0 6px; transition: background 0.3s ease; } section.kaslider1 .swiper-pagination-bullet-active { background: white; } section.kaslider1.fullwidth { width: 100vw; margin-left: calc(-50vw + 50%); } section.kaslider1.fullwidth .swiper-container { margin-left: 100px; margin-right: 100px; } .rueffer-text .col_0 .text { padding-top: 50px; } .rueffer-text .col_0 .text h6 { position: absolute; top: -295px; left: -85px; } /* ****************************************************************************************************************** */ /* --- Mobileslider1 ------------------------------------------------------------------------------------------------ */ /* ****************************************************************************************************************** */ section.mobileslider1 { position: relative; clear: both; display: flex; flex-direction: column; width: 100%; height: 100%; --mobileslider1gap: 20px; } section.mobileslider1 .smooth { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; } section.mobileslider1 .msdesktop { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; } section.mobileslider1 .headblock { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 0 20px 0; } section.mobileslider1 .msdesktop.limit1600 { max-width: 1600px; margin: auto; } section.mobileslider1 .msdesktop .textblock { margin: 0 0 40px 0; } section.mobileslider1 .msdesktop .images { } section.mobileslider1 .msdesktop .image { position: relative; display: flex; display: inline-block; } section.mobileslider1.cnt_2 .msdesktop .image { width: calc(50% - var(--mobileslider1gap)); } section.mobileslider1.cnt_3 .msdesktop .image { width: calc(33.3% - var(--mobileslider1gap)); } section.mobileslider1.cnt_4 .msdesktop .image { width: calc(25% - var(--mobileslider1gap)); } section.mobileslider1.cnt_5 .msdesktop .image { width: calc(20% - var(--mobileslider1gap)); } section.mobileslider1 .msdesktop .image img { display: block; width: 100%; height: auto; object-fit: cover; } section.mobileslider1 .msmobile { position: relative; width: 100%; height: 100%; display: none; } section.mobileslider1 .msmobile .swiper-slide { position: relative; } section.mobileslider1.minh450 .msmobile .swiper-slide { display: flex; flex-direction: column; min-height: 450px; justify-content: space-between; } section.mobileslider1 .msmobile .swiper-slide .textblock { margin: 20px 0 0 0; } section.mobileslider1 .msmobile .swiper-slide-active { opacity: 1; } section.mobileslider1 .msmobile .swiper-slide-prev, section.mobileslider1 .msmobile .swiper-slide-next { opacity: 0.5; } section.mobileslider1 .msmobile .swiper-slide .container_img1 { position: relative; display: flex; justify-content: center; } section.mobileslider1 .msmobile .swiper-button-next, section.mobileslider1 .msmobile .swiper-button-prev { width: 60px; height: 40px; position: absolute; background-repeat: no-repeat; top: auto; bottom: -50px; } section.mobileslider1 .msmobile .swiper-button-prev { background-image: url('/files/intern/common/restaurant-haerlin-hamburg-pfeil-links.png'); left: calc(50% - 70px); } section.mobileslider1 .msmobile .swiper-button-next { background-image: url('/files/intern/common/restaurant-haerlin-hamburg-pfeil-rechts.png'); left: calc(50% + 10px); } /* ****************************************************************************************************************** */ /* --- kasubmenu ---------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ .kasubmenu { position: relative; top:0; left: 0; display: flex; flex-direction: column; width: 100%; z-index: +3; transition: top 500ms ease; } .kasubmenu.mobile { display: none; } .kasubmenu.fixed { position: fixed; top:57px; } .kasubmenu *, .kasubmenu a { color: var(--ka-anchor-light-gray); font-size: 16px; line-height: 20px; letter-spacing: 0.06em; font-family: "freight-sans-pro", sans-serif; text-transform: uppercase; transition: 0.3s; } .kasubmenu { display: flex; margin: 20px 0 0 0px; } .kasubmenu .items { max-width: 1600px; margin: 0 auto 0 auto; padding: 20px 0 15px 0; position: relative; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: center; } #main .kasubmenu .items .item a { position: relative; margin: 0 0px; padding: 0 36px; } #main .kasubmenu .items .item a:after { position: absolute; top: 44%; right: 0; display: block; content: ''; width: 1px; height: 12px; background: var(--ka-text-brown); } #main .kasubmenu .items .item:last-child a:after { display: none; } .kasubmenu *:hover, .kasubmenu a:hover { color: var(--ka-statement-green); } /* ****************************************************************************************************************** */ /* --- ka-textxcol -------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ section.textxcols, #main section.textxcols { position: relative; background-color: var(--ka-bk-boxlightgrey); padding: 0px 0 0px 0; margin-bottom: 0; } section.textxcols .headline { margin: 10px 0 70px 0; } section.textxcols .box2col { width: 100%; } section.textxcols .box2col .cols { width: 100%; } section.textxcols .box2col .cols .column .colinside { width: calc(100% - 0px); } section.textxcols .box2col .cols .column .colinside img { position: relative; display: flex; } section.textxcols .box2col .cols .column .colinside.hit .headline { margin: 0 0 100px 0; } section.textxcols .box2col .cols .column .colinside.hit .text { position: relative; margin: 50px 0 0 0; } section.textxcols .box2col .cols .column .colinside.hi { margin: 300px 0 0 0; } section.textxcols .box2col .cols .column .colinside.hi .headline { color: var(--ka-statement-green); /* font-size: 62px; line-height: 76px; text-transform: uppercase; */ } section.textxcols .box2col .cols .column .colinside.hi h6.headline { font-size: 60px; line-height: 70px; } section.textxcols .box2col .cols .column .colinside.hi img.img1 { top: -195px; width: 90%; z-index: -1; margin-left: auto; } section.textxcols .box2col .cols .column .colinside.i { margin: 0 0 200px 0; } section.textxcols .box2col .cols .column .colinside.wti .text { margin: 50px 0 100px 0; } section.textxcols .box2col .cols .column .colinside.wit .text { margin: 100px 0 0 0; } section.textxcols .box2col .cols .column .colinside.wti img.img1, section.textxcols .box2col .cols .column .colinside.wit img.img1 { /* width: 150%; max-width: 150%; left: -50%; */ } section.textxcols .box2col .cols .column.col_1 .colinside.wti img.img1, section.textxcols .box2col .cols .column.col_1 .colinside.wit img.img1 { left: 0%; } section.textxcols .box2col .cols .column .colinside.ti { margin: 0 0 50px 0; } section.textxcols .box2col .cols .column .colinside.ti .text { margin: 150px 0 100px 0; } section.textxcols .box2col .cols .column.dist100 .colinside.ti .text { margin: 150px 0 250px 0; } section.textxcols .box2col .cols .column .colinside.ti img.img2 { position: relative; margin-top: -120%; left: 33%; z-index: -1; } section.textxcols .box2col .cols .column .colinside.i2ht { position: relative; } section.textxcols .box2col .cols .column .colinside.i2ht .flexcontainer.space-between { position: relative; } section.textxcols .box2col .cols .column .colinside.i2ht .image_container.img2 { position: relative; width: 25%; margin-top: 100px; /*max-height: 500px;*/ display: flex; justify-content: flex-end; /* ➤ Bild nach rechts */ /*align-items: flex-end; */ align-items: flex-start; overflow: hidden; } section.textxcols .box2col .cols .column .colinside.i2ht .image_container.img2 img { width: 40%; /* ➤ schmaleres Bild */ height: auto; object-fit: contain; } section.textxcols .box2col .cols .column .colinside.i2ht .image_container.img1 { width: 48%; max-width: 48%; } #main section.textxcols .box2col .cols .column .colinside.i2ht .headline { position: relative; display: flex; left: 20px; width: 25%; max-width: 25%; display: flex; margin: 0; font-family: "fiona", sans-serif;; color: var(--ka-statement-green); text-transform: uppercase; letter-spacing: 0.075em; font-size: 48px; line-height: 56px; } #main section.textxcols .box2col .cols .column .colinside.i2ht .headline span { position: absolute; bottom: 20%; transform: translateX(-135px); } section.textxcols .box2col .cols .column .colinside.i2ht .text { margin: 50px auto 0 auto; width: 40%; max-width: 40%; } section.textxcols .box2col .cols .column .headline { border-bottom: 1px solid var(--ka-font-color); padding: 0 0 5px 0; margin: 0 0 30px 0; } section.textxcols .box2col .cols .column .statement { margin: 50px 0 100px 0; text-transform: uppercase; } section.textxcols .footer .line1, section.textxcols .footer .line2 { display: flex; flex-direction:column; justify-content :center; flex-direction:row; margin: 10px 0 0 0; } section.textxcols .footer .line1 { margin: 70px 0 0 0; } section.textxcols .footer .line1 .text { font-size: 20px; text-transform: uppercase; font-weight:500; } section.textxcols .footer .line2 img { width: 15px; margin: 0 10px 0 0; } section.textxcols .footer .line2 .text { font-size: 30px; } #angebote, #experiences { margin-top: -120px; } #putten section.textxcols .box2col .cols .column .colinside.hi, #cherubs section.textxcols .box2col .cols .column .colinside.hi { margin: 100px 0 0 0; } /* ****************************************************************************************************************** */ /* --- ka-textimg --------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ #main .textimg { position: relative; width: 100%; height: 100%; margin-top: 0px; margin-bottom: 0px; /* display: flex; flex-direction:column; justify-content: space-between; */ } #main .textimg .imgblock * { /*line-height: 1px;*/ } #main .textimg .mobileblock { display: none; } #main .textimg.scalimg .imgblock .image_container { position: relative; width: 100%; height: 100%; overflow: hidden; min-height:700px; } #main .textimg.scalimg img { position: absolute; width: 100%; height: 100%; left:0%; object-fit: cover; display: inline-block; } #main .textimg.scalimg .bottomblock .right { text-align: right; } #main .textimg.scalimg .bottomblock { margin: 30px 0 0 0; } #main .textimg.scalimg .bottomblock h6 { transform: rotate(-5deg); } #main .textimg .textblock { padding: 40px 80px 60px 0; display: flex; flex-direction:column; justify-content :center; } #main .ce_text .quote, #main .textimg .quote { margin: 50px 0 0 0; color: var(--ka-font-color-green); /* font-family: var(--ka-font-family-eu); font-size: 36px; */ } #main .textimg .left .headline, #main .textimg .left .text, #main .textimg .right .headline, #main .textimg .right .text, #main .textimg .left .buttons, #main .textimg .right .buttons, #main .textimg .left .ce_accordion, #main .textimg .right .ce_accordion { padding: 0px; } #main .textimg .left .headline, #main .textimg .left .text, #main .textimg .left .buttons, #main .textimg .left .ce_accordion, #main .textimg .quote { padding-right: 95px; } #main .textimg .right .headline, #main .textimg .right .text, #main .textimg .right .buttons, #main .textimg .right .ce_accordion, #main .textimg .quote { padding-left: 95px; } #main .textimg .headline { margin-top: 0; } #main .textimg .left .text, #main .textimg .right .text { margin: 30px 0 10px 0; /* padding-right: 150px; padding-left: 150px; */ } #main .textimg .left .buttons, #main .textimg .right .buttons { margin-top: 20px; } /*master*/ #main a, #main .button a, #main .textimg .button a, section.stepinside .textblock a, .previewvideo .videobtn a { color: var(--ka-text-brown); position: relative; display: inline-block; padding: 0; /* font-weight: 400; letter-spacing: 0.1em; */ font-size: 24px; line-height:28px; border-radius: 30px; text-decoration:none; transition: all 250ms linear; white-space: nowrap; } #main a:hover, #main .button a:hover, #main .textimg .button a:hover, section.stepinside .textblock a:hover, .previewvideo .videobtn a:hover, .mod_article .newsletter .mod_subscribe .submit:hover { text-decoration:none; background-color: rgba(255,255,255,0.8); color:var(--ka-link-hover-green); } /*bookbtn*/ #main .bookbtn, #main .button.bookbtn, #main .textimg.bookbtn .button, #main .textimgbk.bookbtn .button { margin-top: 35px !important; margin-bottom: 25px !important; } #main .bookbtn a, #main .button.bookbtn a, #main .textimg.bookbtn .button a, #main .textimgbk.bookbtn .button a { border: 1px solid var(--ka-font-color); /*display: block;*/ padding: 13px 15px 11px 15px; line-height: 1em; text-transform: uppercase; background-color: #fff; transition: all 1s ease-in-out; } #main .bookbtn a:hover, #main .button.bookbtn a:hover, #main .textimg.bookbtn .button a:hover, #main .textimgbk.bookbtn .button a:hover { border: 1px solid var(--ka-font-color); background-color: var(--ka-font-color); color:#fff; } /* #main .button a, #main .textimg .button a { position: relative; text-transform:uppercase; font-family: var(--ka-font-family-bg); font-weight: 800; letter-spacing: 0.2em; font-size: 13px; border-bottom: 0px solid var(--ka-font-color); text-decoration:none; } #main .button a:hover, #main .textimg .button a:hover { text-decoration:none; } #main .button a:after, #main .textimg .button a:after { position: absolute; left: 0px; content: ''; height: 24px; width: 100%; border-bottom: 1px solid var(--ka-font-color); text-decoration:none; -webkit-transform: scaleX(0.0001); -ms-transform: scaleX(0.0001); transform: scaleX(0.0001); -webkit-transition: -webkit-transform 750ms ease-in-out; transition: transform 750ms ease-in-out; } #main .button a:hover:after, #main .textimg .button a:hover:after { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } */ /* Default */ #main .textimg.default { } #main .textimg.default h2 { color:var(--ka-font-color-green); } /* Overlay */ #main .textimg.overlay { background-repeat: no-repeat; background-position: top; background-size: cover; /*background-color:#f00;*/ } #main .textimg.overlay .imgblock { position: relative; } #main .textimg.overlay .imgblock .image_container { top: 30%; width: 70%; height: 70%; z-index: -1; } #main .textimg.overlay .imgblock div.hl2 { position: absolute; top: 0; right: 0; width: 70%; font-size:var(--ka-statement-font-size); line-height: var(--ka-statement-line-height); letter-spacing: var(--ka-statement-letter-spacing); text-transform: uppercase; z-index: +1; } /* Boxed mitSlider */ #main .textimg.boxed { margin: 0 0 0 0; padding: 150px 0 0 0; overflow: visible; } #main .textimg.boxed .textxcol.txtleft { width:100%; display: flex; justify-content: flex-end; } #main .textimg.boxed .left, #main .textimg.boxed .right { width: calc(50% + 800px); max-width:100%; } #main .textimg.boxed .textblock { padding: 40px 0 40px 0; } #main .textimg.boxed.gray .textblock { /*background-color: rgba(205,205,205,0.25);*/ background-color: rgba(201,196,190,0.20); } #main .textimg.boxed .textblock .buttons { display: flex; /*padding: 0 0 10px 0;*/ } #main .textimg.boxed .textblock .buttons .button { margin-right: 20px; } #main .textimg.boxed .headline, #main .textimg.boxed .text, #main .textimg.boxed .buttons, #main .textimg.boxed .ce_accordion, #main .textimg .quote { padding-left: 95px; padding-right: 95px; } /* #main .textimg .quote { padding-left: 150px; padding-right: 150px; } */ #main .textimg .boxw { /*min-height:700px;*/ } #main .textimg .imgblock { position: relative; padding:0px 0 0 0; display: flex; } #main .textimg .swiper-container { position: relative; width: 100%; height: 100%; margin-left: auto; margin-right: auto; overflow: hidden; } #main .textimg .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box; /* transition-property: transform; box-sizing: content-box; align-items: flex-start; */ } #main .textimg .swiper-slide { width: 100%; height: 100%; position: relative; display: flex; justify-content: center; align-items: center; flex-shrink: 0; flex-direction:column; min-height:250px; /* max-width: 1400px; transition-property: transform; display: flex; justify-content: center; padding: 0; margin: 0; overflow: hidden; */ } /* #main .textimg .swiper-container { position: relative; width: 100%; padding-top: 50px; padding-bottom: 180px; z-index: 998; } #main .textimg .swiper-wrapper { position: relative; z-index: 999; } #main .textimg .swiper-slide { background-position: center; background-size: cover; width: 450px; height: 800px; -webkit-box-reflect: below 1px linear-gradient(transparent, transparent, transparent, transparent, #0006); } */ #main .textimg.imgcnt_1 .swiper-button-prev, #main .textimg.imgcnt_1 .swiper-button-next, #main .textimg .noswiper.cnt_1 .swiper-button-prev, #main .textimg .noswiper.cnt_1 .swiper-button-next { display: none; } #main .textimg.boxed .left .img2block, #main .textimg.boxed .right .img2block, #main .textimg.boxed .left .img2block2, #main .textimg.boxed .right .img2block2 { position: absolute; /*top: -150px;*/ top: 0px; width:1041px; max-width:50%; /*height:100%;*/ display: inline-block; z-index: -1; } #main .textimg.boxed .left .img2block, #main .textimg.boxed .right .img2block { width:841px; max-width:30%; } #main .textimg.boxed .left .img2block2, #main .textimg.boxed .right .img2block2 { filter: blur(4px); z-index: -2; } #main .textimg.boxed .left .img2block { left: -40px; transform-origin: top left; animation: PalmAnimLeft 20s infinite linear; } #main .textimg.boxed .right .img2block { right: -40px; transform-origin: top right; animation: PalmAnimRight 20s infinite linear; } @keyframes PalmAnimLeft { 0% { transform: skewX(0) skewY(0) scale(1); } 10% { transform: skewX(-2deg) skewY(-2deg) scale(0.99); } 20% { transform: skewX(-2deg) skewY(-4deg) scale(0.98); } 30% { transform: skewX(-4deg) skewY(-10deg) scale(0.97); } 40% { transform: skewX(-4deg) skewY(-8deg) scale(0.96); } 50% { transform: skewX(-4deg) skewY(-9deg) scale(0.96); } 60% { transform: skewX(-4deg) skewY(-8deg) scale(0.96); } 70% { transform: skewX(-4deg) skewY(-6deg) scale(0.97); } 80% { transform: skewX(-4deg) skewY(-4deg) scale(0.98); } 90% { transform: skewX(-2deg) skewY(-2deg) scale(0.99); } 100% { transform: skewX(0) skewY(0) scale(1); } } @keyframes PalmAnimRight { 0% { transform: skewX(0) skewY(0) scale(0.8); } 10% { transform: skewX(-2deg) skewY(2deg) scale(0.79); } 20% { transform: skewX(-2deg) skewY(4deg) scale(0.78); } 30% { transform: skewX(-4deg) skewY(10deg) scale(0.77); } 40% { transform: skewX(-4deg) skewY(8deg) scale(0.76); } 50% { transform: skewX(-4deg) skewY(9deg) scale(0.76); } 60% { transform: skewX(-4deg) skewY(8deg) scale(0.76); } 70% { transform: skewX(-4deg) skewY(6deg) scale(0.77); } 80% { transform: skewX(-4deg) skewY(4deg) scale(0.78); } 90% { transform: skewX(-2deg) skewY(2deg) scale(0.79); } 100% { transform: skewX(0) skewY(0) scale(0.8); } } #main .textimg.boxed .left .img2block2 { left: 0px; transform-origin: top left; animation: PalmAnimLeft2 20s infinite linear; } #main .textimg.boxed .right .img2block2 { right: 0px; transform-origin: top right; animation: PalmAnimRight2 20s infinite linear; } @keyframes PalmAnimLeft2 { 0% { transform: skewX(-8deg) skewY(-8deg) scale(1); } 10% { transform: skewX(-10deg) skewY(-10deg) scale(0.99); } 20% { transform: skewX(-8deg) skewY(-8deg) scale(0.98); } 30% { transform: skewX(-6deg) skewY(-10deg) scale(0.97); } 40% { transform: skewX(-4deg) skewY(-4deg) scale(0.96); } 50% { transform: skewX(-2deg) skewY(-2deg) scale(0.96); } 60% { transform: skewX(-4deg) skewY(-8deg) scale(0.96); } 70% { transform: skewX(-8deg) skewY(-8deg) scale(0.97); } 80% { transform: skewX(-12deg) skewY(-10deg) scale(0.98); } 90% { transform: skewX(-12deg) skewY(-12deg) scale(0.99); } 100% { transform: skewX(-8deg) skewY(-8deg) scale(1); } } @keyframes PalmAnimRight2 { 0% { transform: skewX(-8deg) skewY(8deg) scale(1.2); } 10% { transform: skewX(-2deg) skewY(2deg) scale(0.99); } 20% { transform: skewX(-2deg) skewY(4deg) scale(0.98); } 30% { transform: skewX(-4deg) skewY(10deg) scale(0.97); } 40% { transform: skewX(-4deg) skewY(8deg) scale(0.96); } 50% { transform: skewX(-8deg) skewY(8deg) scale(1.2); } 60% { transform: skewX(-4deg) skewY(8deg) scale(0.96); } 70% { transform: skewX(-4deg) skewY(6deg) scale(0.97); } 80% { transform: skewX(-4deg) skewY(4deg) scale(0.98); } 90% { transform: skewX(-2deg) skewY(2deg) scale(0.99); } 100% { transform: skewX(-8deg) skewY(8deg) scale(1.2); } } #main .textimg.boxed .left .img2block img, #main .textimg.boxed .right .img2block img, #main .textimg.boxed .left .img2block2 img, #main .textimg.boxed .right .img2block2 img { /*object-fit: cover !important;*/ } #main .textimg.boxed .img2block .image_container, #main .textimg.boxed .img2block2 .image_container { width: 100%; height: 100%; } #main .textimg.boxed .img2block .image_container img, #main .textimg.boxed .img2block2 .image_container img { width: 100%; height: 100%; object-fit: contain; } #main .textimg.scalimg .swiper-container.cnt_1 img { transform: scale(1.0, 1.0); -ms-transform: scale(1.0, 1.0); -webkit-transform: scale(1.0, 1.0); transition: all .75s ease-in-out; } #main .textimg.scalimg .swiper-container.cnt_1 img:hover { transform: scale(1.05, 1.05); -ms-transform: scale(1.05, 1.05); -webkit-transform: scale(1.05, 1.05); } #main .textimg.boxed .right .imgtext { position: absolute; right: 20px; bottom: 0px; z-index: +1; } #main .textimg.boxed .left .imgtext { position: absolute; left: 20px; bottom: 0px; z-index: +1; } #main .textimg.boxed .imgtext * { color: #fff; } #main .textimg.gallery { margin: 0px auto; padding: 150px 0 150px 0; } #main .textimg.boxed.gallery .textxcol.txtleft { background-color: rgba(240, 233, 225, 0.5); } #main .textimg.boxed.gallery .textxcol h3 { margin: 25px 0 5px 0; } #main .textimg.boxed.gallery .left, #main .textimg.boxed.gallery .right { } #main .textimg.boxed.gallery .left .img2block img, #main .textimg.boxed.gallery .right .img2block img { } #main .textimg.gallery .swiper-wrapper.cnt_2 .swiper-slide { width: 50%; } #main .textimg.gallery .swiper-wrapper.cnt_2 .swiper-slide:nth-child(1) { margin-right: 10px; } #main .textimg.gallery .swiper-wrapper.cnt_2 .swiper-slide:nth-child(2) { margin-left: 10px; } #main .textimg.gallery .swiper-wrapper.cnt_2 .swiper-slide img { position: relative; width: 100%; /*height: 100%;*/ padding: 15% 0; /* = width for a 1:1 aspect ratio */ } /* #main .textimg.gallery .swiper-wrapper.cnt_2 .swiper-slide:after { content: ""; display: block; padding-bottom: 100%; } */ #main .textimg.gallery .swiper-wrapper.cnt_3 .swiper-slide { width: 33.3%; } #main .textimg.boxed.gallery .img2block .image_container img { object-fit: contain !important; } #auszeichnungen .grid, #awards .grid { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-column-gap: 20px; grid-row-gap: 0px; } /* ****************************************************************************************************************** */ /* --- kalinks ------------------------------------------------------------------------------------------------------ */ /* ****************************************************************************************************************** */ section.kalinks { position: relative; display: flex; } section.kalinks.statement { margin: 200px 0 0 0; } section.kalinks.statement .textblock { position: absolute; width: 250px; max-width: 30%; top: -150px; left: 50px; z-index: +1; } section.kalinks.statement .textblock h2 { margin: 0; color: var(--ka-statement-green); font-size: 62px; line-height: 76px; text-transform: uppercase; } #main section.kalinks.statement .link h3 { color: var(--ka-text-brown); } #main section.kalinks.statement .link a { display: flex; flex-direction: column; } #main section.kalinks.statement .link .image_container { display: flex; width: 100%; height: 100%; overflow: hidden; } #main section.kalinks.statement .link .image_container img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.0, 1.0); transition: all .75s ease-in-out; } #main section.kalinks.statement .link .image_container img:hover { transform: scale(1.05, 1.05); } .image_container.float_above { } .image_container.float_below { } .image_container.float_left { } .image_container.float_right { } /* ****************************************************************************************************************** */ /* --- previewvideo ------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ #main .floatbutton { position: absolute; top: auto; bottom: auto; left: 50%; transform: translate(-82px, 0%); z-index: +3; display: flex; justify-content: center; align-items: center; border-radius: 200px; width: 250px; height: 250px; border: 1px solid var(--ka-border-button); background-color: rgba(255, 255, 255, 0.4); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); padding: 0; overflow: visible; z-index: 1; transition: all 0.1s ease; animation-delay: 4s; /* Optional: nach Fade-In startet Atmen */ animation-fill-mode: forwards, none; animation-name: floatbuttonfadein, floatbuttonbreathe; animation-duration: 1s, 8s; animation-delay: 2s, 2s; animation-timing-function: ease, ease-in-out; animation-iteration-count: 1, infinite; } #main .floatbutton.new { /* display: none; */ } #main .floatbutton a { position: relative; display: flex; justify-content: center; align-items: center; letter-spacing: 0.05em; text-transform: inherit; } #main .floatbutton a:hover { backdrop-filter: blur(10px); background-color: rgba(255, 255, 255, 0.6); } @keyframes floatbuttonbreathe { 0% { transform: translate(-82px, 0%) scale(1); } 50% { transform: translate(-82px, 0%) scale(1.15); } 100% { transform: translate(-82px, 0%) scale(1); } } section .btn1 .image_container, section .btn2 .image_container, section .btn3 .image_container, section .btn4 .image_container { position: relative; } #main section .btn1 .image_container .floatbutton { left: -92px; bottom: 55px; } #main section .btn2 .image_container .floatbutton { left: calc(50% - 43px); top: -193px; } #main section .btn3 .image_container .floatbutton { left: calc(50% - 47px); bottom: -183px; } #main section .btn4 .image_container .floatbutton { left: auto; right: -9px; bottom: -179px; } #table-reservation { padding-top: 50px; } #table-reservation .logosmall { top: -40px; left: 50%; transform: translate(-50%, 0%); width: 180px; z-index: 999; } /* .floatbutton a::before { content: ''; position: absolute; top: -20px; left: -20px; right: -20px; bottom: -20px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.0) 100%); backdrop-filter: blur(20px); opacity: 0; transition: opacity 0.4s ease; z-index: -1; } .floatbutton a:hover::before { backdrop-filter: blur(20px); opacity: 0.8; } */ /* ****************************************************************************************************************** */ /* --- previewvideo ------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ .previewvideo { max-height: 100vh; /*z-index: 950;*/ } .previewvideo, .previewvideo .prev-video-container { position: relative; width: 100% !important; height: 100% !important; } .previewvideo .prev-video-container { /*z-index: 951;*/ display: flex; width: 100% !important; height: 100vh !important; } .previewvideo video { display: flex; width: 100% !important; height: 100% !important; object-fit:cover; } .previewvideo .videobtn { position: absolute; top: auto; bottom: 30px; left:00px; transform: translate(0); /* display: flex; flex-direction:column; justify-content :center; padding: 15px 30px 15px 15px; background-image: url('/files/intern/common/fmd-play-video-full.png'); background-position: 95% center; background-repeat: no-repeat; cursor: pointer; z-index:954; display: inline-block; padding: 8px 20px; text-align: center; font: 15px/15px Work Sans,Lato,Arial; background-color:var(--ka-font-color-gold); color: #FFF; text-transform: uppercase; letter-spacing: .1em; pointer-events: auto; */ display: inline-block; padding: 10px 30px 7px 30px; background-color: #7f992f; font: 16px Work Sans, Arial; color: #FFF; text-transform: uppercase; letter-spacing: .05em; font-weight: 400; cursor: pointer; } .previewvideo .videobtn:hover { /*background-color: rgba(35, 191, 228, 0.8);*/ /*color: #95ebff;*/ } .previewvideo .videobtn.disable { display: none !important; } /* ****************************************************************************************************************** */ /* --- leftbar ------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ div#leftbar div.leftwin, div#leftbar2 div.leftwin { position: absolute; width:100%; top: 50%; transform: translateY(-50%); } div.leftbar div.showbtn, div.leftbar div.hidebtn, div.leftbar2 div.showbtn, div.leftbar2 div.hidebtn { cursor:pointer; } div.leftbar.showbtn, div.leftbar2.showbtn { bottom:30px; left:30px; position:absolute; display:block; cursor:pointer; } div.leftbar2.showbtn { bottom:86px; } div.leftbar div.leftwin, div.leftbar2 div.leftwin { width:50%; height:650px; left:0; top:0; position:fixed; display:block; background-color:rgba(244,240,234,.9); height:100vh; display: flex; align-items: center; justify-content: center; z-index:993; } div.leftbar div.leftwin div.textimg, div.leftbar2 div.leftwin div.textimg { height:100vh; } div.leftbar div.leftwin div.textimg div.headline, div.leftbar2 div.leftwin div.textimg div.headline { max-width:400px; margin-right:auto; margin-bottom:80px; margin-left:auto; } div.leftbar div.leftwin div.textimg div.textblock, div.leftbar2 div.leftwin div.textimg div.textblock { width:100%; height:100vh; } div.leftbar div.leftwin .btnblock, div.leftbar2 div.leftwin .btnblock { width: 100%; max-width:220px; padding-top:0; } div.leftbar div.leftwin div.textimg div.imgblock, div.leftbar2 div.leftwin div.textimg div.imgblock { display:none; } div.leftbar div.leftwin div.hidebtn, div.leftbar2 div.leftwin div.hidebtn { right:30px; top:30px; position:absolute; } div.leftbar div.leftwin, div.leftbar2 div.leftwin { display:none; } div#menu .image_container { display: block; margin-top: 0px; margin-bottom: 0px; } /* ****************************************************************************************************************** */ /* --- centralbar ------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ div.centralbar div.showbtn, div.centralbar div.hidebtn { cursor:pointer; } div.centralbar.showbtn { bottom:23px; left:30px; position:absolute; display:block; cursor:pointer; } div.centralbar div.centralwin { width:70%; left:0; top:0; position:fixed; display:block; background-color:rgba(253,251,248,.8); height:60vh; left:15%; top:20%; display: flex; align-items: center; justify-content: center; z-index:993; } div.centralbar div.text2col, div.centralbar div.text2col div { position:relative; } div.centralbar div.centralwin div.textimg .textblock .block { max-width:calc(100% - 200px); } div.centralbar div.centralwin div.textimg { height:100%; } div.centralbar div.centralwin div.textimg { width:100%; display: flex; align-items: center; justify-content: center; } div.centralbar div.centralwin div.textimg div.headline { max-width:400px; margin-right:auto; margin-bottom:30px; margin-left:auto; } div.centralbar div.centralwin div.textimg div.textblock { width:100%; padding-right:0; padding-left:0; } div.centralbar div.centralwin .btnblock { width:220px; margin-right:auto; margin-left:auto; padding-top:50px; } div.centralbar div.centralwin div.textimg div.imgblock { display:none; } div.centralbar div.centralwin div.hidebtn { right:30px; top:30px; position:absolute; } div.centralbar div.centralwin { display:none; } div.centralbar div.centralwin .ce_dma .text a { padding:0; font-size:19px; color:#272727; text-transform:none; background-image: none; } div.centralbar div.centralwin .ce_dma .text a:hover { color:#7f992f; } /* ****************************************************************************************************************** */ /* --- cookiebar ---------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ div.cookiebar { padding-top:3px; padding-bottom:3px; background-color:#bababa; z-index:999; } .cookiebar__message, .cookiebar__text { margin-right:3px; margin-left:0; } div.cookiebar__text { font-size:15px; line-height:17px; color:#FFF; } a.cookiebar__link, div.cookiebar a, div.cookiebar a:link { margin-right:5px; font-size:15px; text-decoration:underline; color:#FFF; } button.cookiebar__button { margin-top:3px; margin-bottom:3px; padding:5px 9px; background-color:#303582; font-weight:normal; color:#FFF; } button.cookiebar__button:hover { background-color:#303683; } /* ****************************************************************************************************************** */ /* --- Haerlin ------------------------------------------------------------------------------------------------------ */ /* ****************************************************************************************************************** */ /* div.text2col { } div.text2col div.blocktop, div.textcol div.blocktop { width:100%; float:none; clear:both; text-align:center; } div.text2col div.blocktop h1, div.textcol div.blocktop h1 { margin-bottom:40px; padding-bottom:40px; background-image:url("/files/intern/common/restaurant-haerlin-hamburg-trennstrich.png"); background-position:center bottom; background-repeat:no-repeat; } div.text2col div.blockleft, div.text2col div.blockright, div.textcol div.blockleft, div.textcol div.blockright { width:50%; display: flex; align-items: center; display: -ms-flexbox; display: -webkit-flex; } div.text2col div.blockleft div.text, div.text2col div.blockright div.text { margin-bottom:40px; padding-right:120px; padding-left:120px; width:calc(100% - 240px); } div.text2col div.tcinside { width:100%; display:block; } div.text2col div.blockleft *, div.text2col div.blockright * { text-align:center; } div.text2col div.headline1, div.text2col div.headline2, div.text2col div.text { width:100%; text-align:center; } div.textimg div.textblock, div.textimg div.imgblock { width:50%; float:left; margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0; } div.textimg div.textblock div.headline { margin-bottom:80px; } div.textimg div.textblock { padding-right:50px; padding-left:50px; text-align:center; display: flex; align-items: center; justify-content: center; width:calc(50% - 100px); } div.textimg .textblock .block { max-width:500; text-align:center; } div.textimg .textblock a.btn, div.textimg .imgblock a.btn { overflow:hidden; float:none; clear:both; display:inline-block; padding:12px 0 8px; font-family:Work Sans,Arial; color:#7f992f; text-transform:uppercase; font-weight: 500; } div.textimg .textblock a.btn:hover, div.textimg .imgblock a.btn:hover { } .rsts-skin-default .rsts-prev, .rsts-skin-default .rsts-next, .rsts-skin-default .rsts-video-play, .rsts-skin-default .rsts-video-stop, .rsts-skin-default .rsts-thumbs-prev, .rsts-skin-default .rsts-thumbs-next { background-position:center center; background-repeat:no-repeat; -webkit-box-shadow:0 0 0 0; box-shadow:0 0 0 0; border:0px; border-radius:0; background-clip: initial; background-color:transparent; background-size: 60px,40px; } .rsts-skin-default .rsts-prev { width:80px; height:50px; bottom:-60px; background-image:url("/files/intern/common/restaurant-haerlin-hamburg-pfeil-links.png"); left:calc(50% - 90px); } .rsts-skin-default .rsts-next { width:80px; height:50px; bottom:-60px; position:absolute; background-image:url("/files/intern/common/restaurant-haerlin-hamburg-pfeil-rechts.png"); left: calc(50% + 10px); } .rsts-skin-default .rsts-prev:hover, .rsts-skin-default .rsts-next:hover, .rsts-skin-default .rsts-video-play:hover, .rsts-skin-default .rsts-video-stop:hover, .rsts-skin-default .rsts-thumbs-prev:hover, .rsts-skin-default .rsts-thumbs-next:hover { background-color: transparent; } div#chefstable div.rsts-crop { max-height: 100% !important; height1: 100vh !important; } div#chefstable .rsts-skin-default .rsts-prev, div#chefstable .rsts-skin-default .rsts-next { bottom:30px; } div#chefstable .rsts-skin-default .rsts-prev { background-image:url("/files/intern/common/restaurant-haerlin-hamburg-pfeil-links-weiss.png"); } div#chefstable .rsts-skin-default .rsts-next { background-image:url("/files/intern/common/restaurant-haerlin-hamburg-pfeil-rechts-weiss.png"); } .rsts-skin-default .rsts-prev:hover, div#chefstable .rsts-skin-default .rsts-prev:hover { background-image:url("/files/intern/common/restaurant-haerlin-hamburg-pfeil-links-gruen.png"); } .rsts-skin-default .rsts-next:hover, div#chefstable .rsts-skin-default .rsts-next:hover { background-image:url("/files/intern/common/restaurant-haerlin-hamburg-pfeil-rechts-gruen.png"); } div#videotop { background-color:#f1ebe6; } div#videotop div.videoin { position:relative; margin:100px 140px; width:calc(100% - 280px); height:calc(100% - 200px); } div#videotop div.videoin { position:relative; margin:0; width:calc(100% - 0px); height:calc(100% - 0px); } div#videotop .ce_player { overflow: hidden; width:100%; height:100%; z-index:950; } div#videotop video { } div#videotop .grandtables.ce_text { bottom:15px; position:absolute; overflow:hidden; text-align:center; } div#videotop .grandtables.ce_text p { color:#272727; font-weight:600; } div#videotop #haerlinlogovideo, div#videotop #haerlinlogovideomobile { position:absolute; text-align:center; left:calc(50% - 192px); top:calc(50% - 230px); z-index:953; } div#videotop #haerlinlogovideomobile { display:none; left:calc(50% - 80px); top:calc(50% - 65px); } div.textimg .textblock a.btn1 { margin-top:50px; } div#restaurant div.textimg div.imgblock div.imginside .image_container, div#bar div.textimg div.imgblock div.imginside .image_container { width:100%; height:100%; } div#restaurant div.textimg div.imgblock div.imginside .image_container img, div#bar div.textimg div.imgblock div.imginside .image_container img { width:auto; height:100%; max-width:300%; } div#cuisine { position:relative; display:block; padding-top:0; padding-bottom:0; background-image:url("/files/image/cuisine/restaurant-haerlin-hintergrund-cuisine.jpg"); background-position:left top; background-repeat:no-repeat; } div#cuisine div.text2col { max-width:1460px; margin-right:auto; margin-left:auto; } div#cuisine div.text2col div.blockmiddle { max-width:1200px; position:relative; margin-right:auto; margin-left:auto; } div#cuisine a.btn, div#sommelier a.btn, div#menu a.btn, div#team div.textblock a, div#infos a.book, div#infos .imgblock a, div.leftwin a.btn, div.centralwin a.btn, div#kontakt a.book { margin-top:10px; padding:0 0 5px; background-image:url("/files/intern/common/restaurant-haerlin-hamburg-trennstrich.png"); background-position:center bottom; background-repeat:no-repeat; font:16px Work Sans,Arial; text-decoration:none; color:#7f992f; text-transform:uppercase; letter-spacing:.1em; font-weight:500; background-size: 50% 1px; -webkit-transition: background-size 500ms linear; -moz-transition: background-size 500 linear; -o-transition: background-size 500 linear -ms-transition: background-size 500ms linear; transition: background-size 500ms linear; } div#cuisine a.btn:hover, div#sommelier a.btn:hover, div#menu a.btn:hover, div#team div.textblock a:hover, div#infos a.book:hover, div#infos .imgblock a:hover, div.leftbar a.btn:hover, div.centralwin a.btn:hover, div#kontakt a.book:hover { background-size: 100% 1px; } div#cuisine .mod_rocksolid_slider { max-width:1460px; margin-top:60px; margin-right:auto; margin-left:auto; padding-top:0; } div#cuisine div.text2col div.blockleft, div#cuisine div.text2col div.blockright { align-items: normal; } div#sommelier div.blocktop, div#sommelier div.blockmiddle { max-width:800px; margin-right:auto; margin-left:auto; } div#sommelier div.blockmiddle { margin-top:30px; display: flex; justify-content: center; align-items: center; } div#sommelier div.blockmiddle div.left { display:block; margin-right:40px; text-align:right; width:calc(50% - 40px); } div#sommelier div.blockmiddle div.right { display:block; margin-left:40px; width:calc(50% - 40px); } div#sommelier div.blockbottom { max-width:1460px; max-height:50%; margin-top:40px; margin-right:auto; margin-left:auto; } div#sommelier div.blockbottom div.blockleft, div#sommelier div.blockbottom div.blockright, div.textcol div.blockbottom div.blockleft, div.textcol div.blockbottom div.blockright { width:calc(50% - 10px); } div#sommelier div.blockbottom div.blockleft, div.textcol div.blockbottom div.blockleft { margin-right:10px; } div#sommelier div.blockbottom div.blockright, div.textcol div.blockbottom div.blockright { margin-left:10px; } div#menu { background-color:#fff; } div#menu .image_container { display:block; margin-top:40px; margin-bottom:40px; } div#menu .headline1, div.centralwin h1.headline { padding-bottom:30px; background-image:url("/files/intern/common/restaurant-haerlin-hamburg-trennstrich.png"); background-position:center bottom; background-repeat:no-repeat; } div#main div.text2col div.blockmiddle { max-width:1600px; position:relative; margin-right:auto; margin-left:auto; } div#menu div.text2col div.blockleft div.text, div#menu div.text2col div.blockright div.text { min-height:150px; max-width:500; margin-bottom:40px; padding-right:150px; padding-left:150px; width: calc(100% - 300px); } div#infos { display:inline-block; padding-top:00px; padding-bottom:0; } div#restaurant div.textblock div.btnblock, div#bar div.textblock div.btnblock, div#infos div.imgblock .images, div#infos div.imgblock .btnblock, div.leftbar div.btnblock { width:75%; max-width:400px; display:inline-block; margin-right:auto; margin-left:auto; } div#infos div.imgblock .images { width:100%; } div#infos div.imgblock .images .image_container { margin-top:10px; margin-bottom:10px; } div#restaurant div.textblock div.btnblock, div#bar div.textblock div.btnblock { max-width:180px; } div#bar div.textblock div.btnblock { max-width:220px; } div#infos { } div#infos div.imgblock .btnblock { max-width:140px; padding-top:50px; position:relative; display: flex; justify-content: center; flex-direction:column; } div#infos div.textblock { height:100vh; background-size:cover; } div#infos div.imgblock { background-color:#f4f0ea; display: flex; align-items: center; justify-content: center; height:100vh; } div#infos div.imgblock .imginside { text-align:center; flex-direction: column; } div#infos div.imgblock .btnblock .btn, div.leftbar div.btnblock .btn { clear:both; margin-bottom:15px; } div#socials { display:inline-block; padding-top:0; padding-bottom:0; background-color:#f2f2f2; } div#infos .ininside, div#socials .flexcontainer.soinside { max-width:1470px; margin-right:auto; margin-left:auto; text-align:center; flex-direction: column; } div#socials .soinside .textblock { text-align:center; } div#socials .soinside .textblock .tag, div#socials .soinside .textblock .tag * { font:22px/1.3em Work Sans,Arial; color:#272727; text-transform:uppercase; } div#socials .soinside .textblock .links { display:block; margin-top:50px; margin-bottom:30px; } div#socials .soinside .textblock a { margin-right:5px; margin-left:5px; padding:5px; } div#socials .image_container { margin-top:25px; } div#socials .image_container img { float:left; margin:12px; border:4px solid #fff; width:calc(16.66% - 32px); } div#kontakt { } div#kontakt .kontaktleft, div#kontakt .kontaktright { width:50%; min-height:650px; float:left; display: -webkit-flex; display: -ms-flexbox; display: flex; } div#kontakt .kontaktright img { min-width:100%; min-height:100%; } div#kontakt .kontaktleft { background-color:#fff; display: flex; align-items: center; justify-content: center; } .ie div#kontakt .kontaktright { overflow:hidden; } #kontakt .footer { width:100%; bottom:0; left:0; position:absolute; display:block; } #kontakt .logo { bottom:20px; left:0; position:absolute; } #kontakt div.menubar { width:100%; bottom:42px; left:0; position:absolute; display: flex; align-items: center; justify-content: center; } #kontakt div.menubar .footermenu, #kontakt div.menubar .footertext { float:left; line-height:1em; } #kontakt div.menubar .footermenu *, #kontakt div.menubar .footertext * { line-height:1em; } #kontakt .kontaktleft h2 { margin-bottom:30px; } .col300pxm { width:300px; float:left; margin-right:50px; margin-left:0; } .colR300pxm { float:left; margin-right:0; margin-left:0; width: calc(100% - 350px); } div.sushimk { right:0; top:30px; position:fixed; display:inline-block; z-index:991; } div.bookattable { bottom:30px; right:0; position:fixed; display:inline-block; z-index:991; } div.bookattable a { display:inline-block; padding:11px 30px; background-color:#7f992f; font:16px Work Sans,Arial; color:#FFF; text-transform:uppercase; letter-spacing:.05em; font-weight: 400; } div.bookattable a:hover { background-color:#637526; } .reflink { float:left; display:block; margin:0 30px 30px 0; } .reflink.nomargin { float:left; display:block; margin:0 5px; } .reflink * { line-height:1em; } .reflink * img, .reflink * div.linkimg a, .reflink .refsmall div, .reflink .refbar div, .reflink .refref div { line-height:1px; } .reflink a { max-width:100%; margin-bottom:0; } .reflink div.linkimg { position:relative; overflow:hidden; transition: 0.5s all ease-in-out !important; } .reflink * img { transition: 0.5s all ease-in-out !important; } .reflink * img:hover { overflow:hidden; transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transition: 0.5s transform ease-in-out !important; } .reflink div.btnblock { display:none; } .reflink .refinside.refhover, .reflink .refinside.refsmall, .reflink .refinside.refbar { position:relative; margin:0; padding:0; } .reflink .refinside.refhover .textblock { left:0; top:0; position:absolute; display:block; margin:0; padding:0; background-color:rgba(0,0,0,.01); width:calc(100% - 0px); height:calc(100% - 0px); pointer-events: none; transition: 0.5s all ease-in-out !important; } .reflink .refinside.refhover .textblock .middle { width:100%; position:absolute; text-align:center; top:calc(50% - 44px); } div.reflink .refhover .textblock h1, div.reflink .refhover .textblock h2, div.reflink .refhover .textblock h3, div.reflink .refhover .textblock div div { width:100%; margin-top:0; margin-bottom:0; padding:0; text-align:center; font-family:Source Sans Pro; color:rgba(0,0,0,.01); pointer-events: none; transition: 0.5s all ease-in-out !important; } div.reflink .refhover .textblock h3 { font-size:18px; } div.reflink .refhover .textblock h2 { margin-top:15px; margin-bottom:5px; font:24px DINCondensed-Regular,Arial,sans-serif; } div.reflink .refhover .textblock div, div.reflink .refsmall .textblock div, div.reflink .refbar .textblock div, div.reflink .refref .textblock div { font-size:16px; } div.reflink:hover .refhover div.textblock { background-color:rgba(0,0,0,.6); transition: 0.5s all ease-in-out !important; } div.reflink:hover .refhover div.textblock h1, div.reflink:hover .refhover div.textblock h2, div.reflink:hover .refhover div.textblock h3, div.reflink:hover .refhover div.textblock div { color:rgba(255,255,255,1); transition: 0.5s all ease-in-out !important; } div.reflink .refflat .textblock div.text { width:100%; } div.reflink.center .refflat .textblock div.text { text-align:center; } div.reflink .refflat .textblock h3 { width:100%; margin-top:30px; margin-bottom:25px; text-align:center; color:#303683; } div.reflink .refflat .textblock a { color:#303683; } div.reflink .refflat .textblock div.text * { float:left; display:inline-block; line-height:1.5em; letter-spacing:.03em; } div.reflink.center .refflat .textblock div.text * { float:none; text-align:center; } div.reflink .refflat a.linkarrow { bottom:10px; right:10px; position:absolute; } div.reflink .refsmall .textblock { width:100%; display:block; margin-top:0; margin-bottom:0; padding:0; text-align:center; } div.reflink .refsmall .textblock a, div.reflink .refref .textblock a, div.reflink .refsmall .textblock div.nolink { width:100%; display:block; padding-top:8px; padding-bottom:8px; text-align:center; line-height:18px; color:#303683; font-weight: 600; } div.reflink .refbar .textblock { width:100%; display:block; margin-top:0; margin-bottom:0; padding:0; text-align:center; background-color:#303683; } div.reflink .refbar .textblock a { width:100%; display:block; padding-top:8px; padding-bottom:8px; text-align:center; font-size:16px; color:#FFF; font-weight: 400; } .mod_rocksolid_slider .rsts-caption, .mod_rocksolid_slider .rsts-nav-bullets { display:none; } .mod_rocksolid_slider.startproducts.rsts-skin-default .rsts-prev, .mod_rocksolid_slider.startproducts.rsts-skin-default .rsts-next, .mod_rocksolid_slider.startproducts.rsts-skin-default .rsts-video-play, .mod_rocksolid_slider.startproducts.rsts-skin-default .rsts-video-stop, .mod_rocksolid_slider.startproducts.rsts-skin-default .rsts-thumbs-prev, .mod_rocksolid_slider.startproducts.rsts-skin-default .rsts-thumbs-next { width:60px; height:110px; -webkit-box-shadow:0 0 0 0; box-shadow:0 0 0 0; border:0px; border-radius:0; background-clip: initial; } .mod_rocksolid_slider.startproducts.rsts-skin-default .rsts-prev { left:-70px; position:absolute; background-image:url("/files/intern/common/pfeil-links.png"); background-position:center center; background-repeat:no-repeat; top: calc(50% - 55px); } .mod_rocksolid_slider.startproducts.rsts-skin-default .rsts-next { right:-70px; position:absolute; background-image:url("/files/intern/common/pfeil-rechts.png"); background-position:center center; background-repeat:no-repeat; top: calc(50% - 55px); } .mod_rocksolid_slider.startproducts.rsts-skin-default .rsts-prev:hover, .mod_rocksolid_slider.startproducts.rsts-skin-default .rsts-next:hover, .mod_rocksolid_slider.startproducts.rsts-skin-default .rsts-video-play:hover, .mod_rocksolid_slider.startproducts.rsts-skin-default .rsts-video-stop:hover, .mod_rocksolid_slider.startproducts.rsts-skin-default .rsts-thumbs-prev:hover, .mod_rocksolid_slider.startproducts.rsts-skin-default .rsts-thumbs-next:hover { background-color:rgba(255,255,255,1); } div.text2col { margin-top:0; margin-bottom:0; } div.img2col { margin-top:0; margin-bottom:30px; } div.text2col.padleft .col50mr { width:calc(50% - 165px); } div.text2col.padleft div.textblock { padding-right:75px; padding-left:75px; } div.text2col.imghangeout .imgblock .image_container { bottom:-100px; position:relative; } div.text2col.imghangeout div.boxgrey { margin-bottom:75px; padding-bottom:0; } body .ce_gallery > ul { margin:0 0 50px; padding:0; display:inline-block; } body .ce_gallery > ul li { display:block; margin:0 20px 20px 0; padding:0; width:calc(10% - 20px); } */ /* ****************************************************************************************************************** */ /* --- leftbar ------------------------------------------------------------------------------------------------------ */ /* ****************************************************************************************************************** */ /* div#leftbar div.leftwin { position: absolute; width:100%; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } div.leftbar div.showbtn, div.leftbar div.hidebtn { cursor:pointer; } div.leftbar.showbtn { bottom:30px; left:30px; position:absolute; display:block; cursor:pointer; } div.leftbar div.leftwin { width:50%; height:650px; left:0; top:0; position:fixed; display:block; background-color:rgba(244,240,234,.9); height:100vh; display: flex; align-items: center; justify-content: center; z-index:993; } div.leftbar div.leftwin div.textimg { height:100vh; } div.leftbar div.leftwin div.textimg div.headline { max-width:400px; margin-right:auto; margin-bottom:80px; margin-left:auto; } div.leftbar div.leftwin div.textimg div.textblock { width:100%; height:100vh; } div.leftbar div.leftwin .btnblock { width:220px; padding-top:0; } div.leftbar div.leftwin div.textimg div.imgblock { display:none; } div.leftbar div.leftwin div.hidebtn { right:30px; top:30px; position:absolute; } div.leftbar div.leftwin { display:none; } */ /* ****************************************************************************************************************** */ /* --- rigthbar ----------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ /* div.rightbar { right:0; position:fixed; top:calc(50% - 225px); z-index:990; } div.rightbar .rbinside { position:relative; } div.rightbar div.rmenu, div.rightbar div.rcl, div.rightbar div.tl { right:0; top:0; position:relative; display:block; } div.rightbar div.rcl { width:100%; display:inline-block; margin-top:40px; margin-right:0; margin-bottom:50px; } div.rightbar div.rmenu div.ankermenu { display:inline-block; margin-left:auto; } div.rightbar div.rmenu div.ankermenu .insideam { overflow:auto; } div.rightbar div.rmenu div.ankermenu a { float:none; clear:both; display:block; margin-top:2px; margin-right:0; margin-bottom:2px; padding-top:8px; padding-right:20px; padding-bottom:8px; text-align:right; font:15px Work Sans,Arial; color:#6e6e6e; text-transform:uppercase; letter-spacing:.05em; font-weight: 500; } div.rightbar div.rmenu div.ankermenu a.a2 { display:none; } div.rightbar div.rmenu div.ankermenu a:hover, div.rightbar div.rmenu div.ankermenu a.active { color:#121212; } */ /* ****************************************************************************************************************** */ /* --- centralbar ------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ /* ****************************************************************************************************************** */ /* --- centralbar ------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ /* ****************************************************************************************************************** */ /* --- centralbar ------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ /* ****************************************************************************************************************** */ /* --- centralbar ------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ /* ****************************************************************************************************************** */ /* --- centralbar ------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ .formbody { display: -webkit-flex; display: -ms-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .ce_form { width:100%; margin-top:20px; } .ce_form br { display:none; } .widget { width:100%; } .widget.widget-text, .widget.widget-select { float:left; margin-right:30px; margin-left:0; padding-right:0; padding-left:0; width:calc(50% - 30px); } .widget label { width:100%; clear:both; display:block; margin-bottom:5px; } .widget.widget-textarea textarea { width:calc(100% - 30px); } .ce_form input, .ce_form select, .mod_subscribe input, .mod_unsubscribe input { margin-bottom:15px; -webkit-appearance: none; } .ce_form input, .ce_form select, .ce_form textarea, .mod_subscribe input, .mod_unsubscribe input, .ce_form option { padding:0; background-color:#edebe8; font-size:19px; font-weight:normal; color:#272727; border: none !important; outline: none !important; } .ce_form option { outline: none !important; } .ce_form select { padding-top:6px; padding-bottom:6px; padding-left:5px; } body.firefox .ce_form select { padding-left:2px; } span.mandatory { display:none; } .ce_form textarea { height:200px; margin-bottom:30px; padding:6px 5px; } .ce_form .submit, .mod_subscribe .submit, .mod_unsubscribe .submit { margin-top:20px; margin-bottom:20px; padding:11px 30px; background-color:#7f992f; border:0px solid; border-radius:0; font:16px Work Sans,Arial; color:#FFF; text-transform:uppercase; cursor:pointer; } .mod_subscribe .submit, .mod_unsubscribe .submit { width:150px; display:block; margin-top:0; margin-bottom:0; padding:5px 0 2px; text-align:center; } .ce_form button.submit:hover { background-color:#627522; border:0px; } fieldset.checkbox_container { width:95%; padding-top:0; padding-bottom:0; margin:3px 0 15px 0%; } .ce_form .checkbox_container label { font-size: 16px; display:inline; padding-top:8px; padding-bottom:0; margin-left:0px !important; } .ce_form fieldset.checkbox_container span { float:none; clear:both; display:block; margin:0; padding:0; } .ce_form input.checkbox { width:22px; height:22px; margin:5px 3px 0 0; padding:0; -webkit-appearance:checkbox; } fieldset.checkbox_container legend { width:auto; } .ce_form fieldset.checkbox_container span.mandatory { float:right; clear:none; display:inline-block; } input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea, select { display:block; padding:6px; border:0px solid; width:calc(100% - 10px); letter-spacing: 0.03em; } select { display:inline-block; padding-top:6px; padding-bottom:6px; border:0px solid; width:calc(100% - 1px); } option { display:inline-block; padding:0; background-color:#e8e8e8; border:0px solid; font-size:14px; } input[type="file"], input[type="image"], input[type="submit"], input[type="reset"], input[type="button"], input[type="radio"], input[type="checkbox"] { width:auto; } input[type="radio"], input[type="checkbox"] { margin:0 3px 0 0; } input[type="radio"], input[type="checkbox"], label { vertical-align:middle; } input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] { cursor:not-allowed; background:#eee; } input[type="radio"][disabled], input[type="checkbox"][disabled], input[type="radio"][readonly], input[type="checkbox"][readonly] { background:transparent; } input[type="submit"] { display:inline-block; margin-bottom:0; padding:4px 15px 4px 14px; vertical-align:middle; text-align:center; background-color:#825f8e; background-repeat:repeat-x; border:1px solid #ccc; border-radius:3px; font-size:11px; line-height:16px; color:#fff; cursor:pointer; } input[type="submit"]:hover { text-decoration:none; background-position:0 -15px!important; } input[type="submit"]:active, .button:active { background-color:#e6e6e6; background-position:0 -30px!important; } .mod_subscribe, .mod_unsubscribe { max-width:600px; position:relative; margin-right:auto; margin-left:auto; } .mod_subscribe .formbody, .mod_unsubscribe .formbody { width:100%; max-width:100%; } .mod_subscribe .widget-submit, .mod_unsubscribe .widget-submit { width:160px; float:left; display:block; margin:0 0 0 10px; padding:0; } .mod_subscribe .widget.widget-text, .mod_unsubscribe .widget.widget-text { overflow:hidden; display:block; margin-right:0; margin-left:0; width: calc(100% - 170px); max-width: calc(100% - 170px); } /* ****************************************************************************************************************** */ /* --- 1920 ---------------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ @media only screen and (max-width: 1920px) { } /* ****************************************************************************************************************** */ /* --- 1660 ---------------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ @media only screen and (max-width: 1660px) { div.textimg .textblock .block { max-width:500px; } section.mobileslider1 .msdesktop.limit1600 { margin-right:0; margin-left:0px; /*width:calc(100% - 30px);*/ width:calc(100% - 60px); } #header { } #main .inside { padding-right:20px; padding-left:20px; } .ce_toplink { bottom:20px; right:20px; position:fixed; z-index:998; cursor:pointer; } .ce_toplink span { display:block; } #main .kasubmenu .items .item a { padding: 0 25px; } #main section .btn1 .image_container .floatbutton { left: 0; } section.kaslider1 { width: calc(100% + 40px); margin-left: -20px; margin-right: -20px; } } /* ****************************************************************************************************************** */ /* --- 1510 ---------------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ @media only screen and (max-width: 1920px) { #navmainmega .leftblock a { font-size: 34px; line-height: 50px; } #navmainmega .rightblock .hl { font-size: 34px; line-height: 42px; } #navmainmega .grid { width: 100%; max-width: calc(100% - 150px); margin: 0 auto; } .grid.gap100 { grid-column-gap: 50px; grid-row-gap: 50px; } #main section .image_container .floatbutton.new { width: 180px; height: 180px; left: calc(50% - 8px); } #main section .btn1 .image_container .floatbutton.new { top: auto; bottom: -120px; } #main section .btn2 .image_container .floatbutton.new { top: -125px; } #main section .btn3 .image_container .floatbutton.new { bottom: -120px; } #main section .btn4 .image_container .floatbutton.new { left: auto; bottom: -120px; } #main section .btn1 .buttoninside { transform: translateY(90px); } #main section .image_container .floatbutton.new a { font-size: 18px; } } /* ****************************************************************************************************************** */ /* --- 1051 1450 1050 ----------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ @media only screen and (min-width: 1051px) and (max-width: 1450px) and (max-height: 1050px) { #header #haerlinlogoleft { display:none; } body { } div#cuisine a.btn, div#sommelier a.btn, div#menu a.btn, div#team div.textblock a, div#infos a.book, div#infos .imgblock a, div.leftwin a.btn, div.centralwin a.btn { font-size:15px; } div.text2col div.blockleft div.text, div.text2col div.blockright div.text { padding-right:20px; padding-left:20px; width: calc(100% - 40px); } div#videotop div.videoin { width:100%; height:100%; margin:0; } div#videotop .grandtables.ce_text p { color:#FFF; } div#menu div.menuinside { margin-right:auto; margin-left:auto; width:calc(100% - 300px); } div#menu .blockleft .image_container { margin-right:10px; margin-left:10px; } div#menu .blockright .image_container { margin-right:10px; margin-left:10px; } div.centralbar div.centralwin { top:15%; height: 70vh; } div.centralbar div.centralwin div.textimg .textblock .block { max-width:calc(100% - 140px); } div#sommelier div.blockbottom, div#menu div.blockmiddle { max-width:calc(100% - 300px); } div#menu div.text2col div.blockleft div.text, div#menu div.text2col div.blockright div.text { padding-right:50px; padding-left:50px; width: calc(100% - 100px); } div#chefstable div.chefstableinside { width:100%; height:100%; } div#chefstable div.chefstableinside .rsts-skin-default.rsts-main { height:100%; } #team .limit1300 { max-width: calc(100% - 300px) !important; overflow:hidden; } div#team .teammember div.textblock { padding-right:50px; padding-left:50px; } div#team .textblock h1.name { margin-bottom:15px; } div#team .textblock div.zitat { margin-top:20px; } div#team .teammember div.textblock, div#team .teammember div.imgblock, div#kontakt .kontaktleft, div#kontakt .kontaktright { min-height:400px; max-height:100%; } div#team .teammember div.textblock p { line-height:1.2em; } div#team .textblock h1.name { padding-bottom:17px; } div#team .textblock h2 { font-size:18px; } #infos .limit1600a { margin-right:auto; margin-left:auto; max-width:90%; } #infos p { margin-top:4px; margin-bottom:4px; } div#infos div.imgblock .btnblock { padding-top:10px; } div#infos div.imgblock .images { max-width:300px; } div#infos div.imgblock .btnblock .btn, div.leftbar div.btnblock .btn { margin-bottom:10px; } div#infos div.imgblock .btnblock { max-width:200px; } div#kontakt .kontaktleft .image_container, div#kontakt .kontaktright .image_container { width:100%; height:100%; } div#socials .flexcontainer.soinside { max-width:calc(100% - 300px); } div#socials .image_container a.so8, div#socials .image_container a.so9, div#socials .image_container a.so10, div#socials .image_container a.so11 { display:none; } div#socials .image_container img { margin:5px; border:2px solid #fff; width: calc(25% - 14px); } div#cuisine div.cuisineinside, #kontakt .limit1300.flexcontainer { margin-right:auto; margin-left:auto; width: calc(100% - 300px) !important; max-width: calc(100% - 300px) !important; 1max-height: 66vh !important; overflow:hidden; } .dlh_googlemap { padding-bottom: 0% !important; } div.rightbar div.rcl { width:100%; display:inline-block; margin-top:20px; margin-right:0; margin-bottom:30px; } } /* ****************************************************************************************************************** */ /* --- 1280 ---------------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ @media only screen and (max-width: 1280px) { #main .limit1600, body.default1600 #container { padding-right:20px; padding-left:20px; width:calc(100% - 40px); } #header .logo { left:20px; } #header_nav, #header_nav .inside, #footer { width:100%; float:left; margin:0 auto; } #header .menubar .insideam { top:35px; position:absolute; left:calc(50% - 415px); } #header .ankermenu a { padding-right:2px; padding-left:2px; } div, h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, li, dl, dt, dd, figure, table, th, td, form, fieldset, legend, input, textarea { /* font-size:17px; */ /* line-height: 21px; */ } div { /* line-height:1em; */ } h1 { /* font-size:26px; */ } div.textimg .textblock .block { max-width:360px; max-width:420px; } div.textimg div.textblock div.headline { margin-bottom:50px; } div.bookattable { bottom:20px; right:20px; position:fixed; } div.bookattable a { padding:12px 20px 8px; /* font-size:15px; */ } .rsts-skin-default .rsts-prev { right:80px; position:absolute; 1left:calc(50% - 70px); 1right:auto; } .rsts-skin-default .rsts-next { right:10px; 1left:calc(50% + 10px); 1right:auto; } div#cuisine .mod_rocksolid_slider .rsts-slide-image { } .limit1060 { max-width:900px; } div.leftbar div.leftwin div.textimg div.headline, div.leftbar2 div.leftwin div.textimg div.headline { margin-bottom:50px; } div.leftbar div.leftwin .btnblock, div.leftbar2 div.leftwin .btnblock { padding-top:0; } div.textimg .textblock a.btn, div.textimg .imgblock a.btn { padding-right:10px; padding-left:10px; /* font-size:13px; */ } div#team .teammember div.textblock, div#team .teammember div.imgblock { min-height:300px; } div#kontakt .kontaktleft, div#kontakt .kontaktright { min-height:400px; overflow:hidden; } div#infos div.imgblock .btnblock .btn, div.leftbar div.btnblock .btn, div.leftbar2 div.btnblock .btn { margin-bottom:15px; } div#infos div.imgblock .btnblock, div.leftbar div.btnblock, div.leftbar2 div.btnblock { max-width:200px; } div#team .rsts-skin-default .rsts-prev, div#team .rsts-skin-default .rsts-next { bottom:-5px; position:absolute; } div#team .textblock h1.name { margin-bottom:20px; } div#team .textblock div.zitat { margin-top:20px; } #kontakt div.menubar .footertext { display:none; } #footer h1 { margin:20px auto 10px; } #kontakt div.menubar { right:20px; } #kontakt div.menubar .footermenu *, #kontakt div.menubar .footertext *, #footer .menubar .res, #kontakt .menubar .res, #footer .menubar .tel, #kontakt div.menubar, #kontakt div.menubar .tel, #kontakt div.menubar .footermenu, #kontakt div.menubar .footertext { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0; /* font-size:12px; */ /* line-height:1em; */ /* font-weight: 300; */ } div#kontakt .kontaktleft .image_container, div#kontakt .kontaktright .image_container { width:100%; height:100%; } div.textimg div.textblock { /* font-size: 15px; */ /* line-height: 18px; */ padding-right: 20px; padding-left: 20px; } div.textimg div.textblock p { margin-top: 8px; /* margin-bottom: 8px; */ /* font-size: 15px; */ /* line-height: 18px; */ } } /* ****************************************************************************************************************** */ /* --- 1100 ---------------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ @media only screen and (max-width: 1100px) { body { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0; } #header .socials, nav#mainmenu { display:none; } #header #haerlinlogoleft { width:120px; left:15px; top:15px; position:absolute; } div.leftbar div.leftwin div.textimg, div.leftbar2 div.leftwin div.textimg { height:100%; } div#infos div.imgblock .btnblock .btn, div.leftbar div.btnblock .btn, div.leftbar2 div.btnblock .btn, div#cuisine a.btn, div#sommelier a.btn, div#menu a.btn, div#team div.textblock a, div#infos a.book, div#infos .imgblock a, div.leftwin a.btn, div.centralwin a.btn { overflow:visible; display:inline-block; margin-top:0; margin-bottom:15px; font-size:15px; } div.leftbar div.leftwin div.textimg div.textblock, div.leftbar2 div.leftwin div.textimg div.textblock, div.centralbar div.centralwin div.textimg div.textblock { height:100%; max-width:100%; } #main .limit1600, body.default1600 #container { padding-right:10px; padding-left:10px; width: calc(100% - 20px); } div#videotop, div#cuisine, div#sommelier, div#menu, div.leftbar, div.leftbar2, div#chefstable, div.centralwin, div#team, div#infos, div#socials, div#kontakt { width:100%; height:100%; position:relative; overflow:visible; display:inline-block; } div#videotop { height:75vh; } div#videotop div.videoin { width:100%; height:100%; margin:0; } div#videotop .grandtables.ce_text p { color:#FFF; } div#videotop, div#chefstable { background-color:#fff; } div#cuisine div.cuisineinside, div#sommelier div.sommelierinside, div#menu div.menuinside, div#menu div.text2col div.blockleft, div#chefstable div.chefstableinside, div#team div.teaminside, div#location div.locationinside, div#socials div.haerlinsocials, div#kontakt div.kontaktinside, div.centralbar div.centralwin div.textimg div.textblock { position:relative; padding-top:40px; padding-bottom:40px; width: 100%; top: 0%; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } div#socials div.haerlinsocials { padding-top:60px; padding-bottom:100px; } div#menu div.text2col div.blockleft { margin-bottom:70px; } div.centralbar div.centralwin { width:100%; height:100%; left:0; top:0; position:absolute; overflow:visible; display:block; height:auto; } div.text2col div.blockleft div.text, div.text2col div.blockright div.text, div#menu div.text2col div.blockleft div.text, div#menu div.text2col div.blockright div.text { padding-right:0; padding-left:0; width: calc(100% - 0px); } div.text2col div.tcinside, div#cuisine div.text2col1, div#sommelier div.blocktop, div#sommelier div.blockmiddle, div.leftbar div.leftwin div.textimg div.textblock, div.leftbar2 div.leftwin div.textimg div.textblock, div.centralbar div.centralwin div.textimg div.textblock, div#team div.teammember div.imgblock, div#team div.teammember div.textblock, div#socials .flexcontainer.soinside, #kontakt .limit1300.flexcontainer, div#cuisine div.cuisineinside-off { margin-right:auto; margin-left:auto; padding-right:0; padding-left:0; width: calc(100% - 280px) !important; max-width: calc(100% - 280px) !important; overflow:hidden; } div#chefstable .rsts-type-slide .rsts-view { padding-bottom:40px; } div#chefstable .rsts-skin-default .rsts-prev { bottom:-20px; position:absolute; background-image:url("/files/intern/common/restaurant-haerlin-hamburg-pfeil-links.png"); } div#chefstable .rsts-skin-default .rsts-next { bottom:-20px; position:absolute; background-image:url("/files/intern/common/restaurant-haerlin-hamburg-pfeil-rechts.png"); } div#team div.teammember div.imgblock img { width:100%; } div.textimg .textblock .block, div.centralbar div.centralwin div.textimg .textblock .block { max-width:calc(100% - 0px); } /* Bar: Bild nach unten */ div#bar div.imgblock:nth-of-type(1) { order: 2; } div#cuisine .mod_rocksolid_slider .rsts-caption, div#cuisine .mod_rocksolid_slider .rsts-alt, div#cuisine .mod_rocksolid_slider .rsts-text { left:10px; position:absolute; } div#videotop div.videoin { width:100%; display:inline-block; margin-right:0; margin-left:0; padding-right:0; padding-left:0; } div#videotop .textlila.ce_text { padding-right:20px; padding-left:20px; width:calc(100% - 40px); } div#menu div.textimg div.imgblock div.imginside .image_container, div#menu div.textimg div.imgblock div.imginside .image_container img, div#sommelier div.textimg div.imgblock div.imginside .image_container, div#sommelier div.textimg div.imgblock div.imginside .image_container img { width:100%; height:100%; max-width:100%; max-height:100%; } div#cuisine .mod_rocksolid_slider { padding-top:30px; padding-bottom:30px; } div#team .mod_rocksolid_slider { padding-top:0; padding-bottom:0; } div#infos { background-image: clear; } div#infos div.textblock { background-image:url("/files/image/infos/restaurant-haerlin-hintergrund-information.jpg"); background-position:center center; background-repeat:no-repeat; } div#infos div.textblock { height:100%; padding:80px 0; width:calc(100% - 0px); } .dist50 { margin-bottom:30px; } .ce_form .widget.widget-text, .ce_form .widget.widget-select, .ce_form .widget.widget-textarea textarea { float:none; clear:both; margin-right:0; width: calc(100% - 15px); } h1 { font-size:32px; line-height:1.3em; } h2 { font-size:24px; } h4 { font-size:18px; } div.text2col div.blockleft, div.text2col div.blockright, div.textcol div.blockleft, div.textcol div.blockright, div#team div.teammember div.textblock, div#team div.teammember div.imgblock, div.textimg div.textblock, div.textimg div.imgblock, div#kontakt div.kontaktleft, div#kontakt div.kontaktright { width:100%; height:100%; min-height:150px; } div#kontakt div.kontaktright .dlh_googlemap { padding-bottom: 0% !important; } div#kontakt div.kontaktleft { margin-top:0; margin-bottom:0; } div#menu div.textimg div.textblock, div#sommelier div.textimg div.textblock, div#team div.teammember div.textblock { padding:50px 20px; } div#team div.teammember div.textblock { padding-top:40px; padding-right:50px; padding-left:50px; } div.leftbar.showbtn, div.leftbar div.leftwin div.hidebtn, div.leftbar2.showbtn, div.leftbar2 div.leftwin div.hidebtn, div.centralbar.showbtn, div.centralbar div.centralwin div.hidebtn { display:none; } div.leftbar div.leftwin, div.leftbar2 div.leftwin, div.centralbar div.centralwin { width:100%; height:100%; position:relative; display:block; padding-top:0; padding-bottom:50px; } div.leftbar div.leftwin div.textblock, div.leftbar2 div.leftwin div.textblock { padding-top:80px; } div#team .textblock h1.name { margin-bottom:20px; } div#team .textblock div.zitat { margin-top:20px; } div#socials .image_container img { margin:15px; width: calc(33.33% - 38px); } div#team .teammember .videosmall { display:none; } div#team .teammember .videomobile { max-height:300px; overflow:hidden; display:block; } div#team .limit1300 { } div#infos, div#socials { padding-top:0; padding-bottom:0; } div#infos div.imgblock { height:100%; padding-top:50px; padding-bottom:50px; } div#socials .image_container img { margin:5px; border:2px solid #fff; width: calc(25% - 14px); } div#kontakt .boxkontakt { padding-top:0; padding-bottom:0; } #kontakt div.menubar, #kontakt .footer { bottom:auto; left:0; right:0; top:0; position:relative; } div.bookattable { bottom:10px; right:10px; position:fixed; display:inline-block; z-index:994; } div.bookattable a { display:inline-block; padding:10px 20px 7px; } body .ce_gallery > ul li { margin:0 5px 5px; line-height:1px; width: calc(20% - 10px); } .mod_article .ce_image .caption { font-size:17px; } .ce_form { width:100%; } label[for=ctrl_2], label[for=ctrl_4], label[for=ctrl_6], label[for=ctrl_8], label[for=ctrl_10] { margin-left:0; } .ce_form .submit_container, .pflichtfelder { margin-left:0; } .ce_form .explanation { margin-left:0; } fieldset.checkbox_container { width:95%; margin:3px 0 15px; padding-top:0; padding-bottom:0; } #article_right { width:100%; } #article_right .ce_text table tr td { font-size:12px; } #article_right div iframe { width:100%; max-height:400px; float:left; } #submenu { display:none; } #mobilemenu, #mobnav, .selectnav { display:inline-block; } #mobilemenu { width:90%; } .selectnav { width:90%; margin:0 0 0 5%; } #mobilemenu .invisible { display:none; } /* mobnav */ .js #mobnav { display:none; } .js .selectnav { display:block; margin-bottom:10px; } .jsnav li a { display:block; font-size:14px; } #dropdown { display: none!important; } #toTop img { width: 100% !important; } .ce_form label.even { margin-left: 0 !important; } .reflink, .col50, .col50m, .col50mr, .col50m30, #col50, #col50m, #col50m30, .col33, .col33m, .col33mr, .col33m30, .col66, .col66m, .col66mr, .col66m30 { width:100%; height:100%; float:none; clear:both; display:block; margin-right:0; margin-left:0; } div#kontakt .kontaktleft, div#kontakt .kontaktright { float:none; clear:both; width:calc(100% - 0px); } #footer .footer_nav_wrapper { width:100%; margin-left:0; } #kontakt .logo, #footer div.column, #footer nav.column, #footer_txt, #footer_menulinks, #footer .logo1, #kontakt div.menubar, #kontakt div.menubar .footermenu, #kontakt div.menubar .footertext, #kontakt div.menubar div.res, #kontakt div.menubar div.tel, #footer div.menubar, #footer div.menubar .footermenu, #footer div.menubar .footertext, #footer div.menubar div.res, #footer div.menubar div.tel { width:100%; height:100%; min-height:18px; position:relative; float:none; clear:both; display:block; margin:0 0 10px; padding-right:0; padding-left:0; text-align:center; } #kontakt .logo { margin-top:80px; } #footer a, #footer strong, #kontakt nav a, #kontakt nav strong, #kontakt div.menubar div.footermenu *, #kontakt div.menubar div.footertext *, #footer .menubar div.res, #kontakt .menubar div.res, #footer .menubar div.tel, #kontakt div.menubar, #kontakt div.menubar div.tel, #kontakt div.menubar div.res, #kontakt div.menubar div.footermenu, #kontakt div.menubar div.footertext { min-height:14px; margin-bottom:0; font-size:13px; line-height:1.5em; } #kontakt div.menubar { padding-bottom:35px; } #footer div.menubar { right:0; margin-top:10px; } #footer nav.column.tech1 { margin-bottom:0; } #footer nav.column.tech1 ul li.last { border-bottom:1px solid #c4c4c4; } #footer nav.column.tech2 h1 { display:none; } #footer div.column h1, #footer nav.column h1 { width:100%; text-align:center; } #footer div.column.text { clear:both; display:inline-block; } #kontakt nav.column ul, #footer nav.column ul { width:100%; margin-top:20px; margin-bottom:20px; } #kontakt nav.column ul li, #footer nav.column ul li { width:100%; float:none; clear:both; text-align:center; } #footer .mod_navigation { float:left; width: 100% !important; } #footer nav.mod_changelanguage { top:270px; } .previewvideo .videobtn { position: absolute; top: auto; bottom: 10px; left:10px; transform: translate(0); font-size: 15px; } div#videotop div.videoin { width: 100%; height: 100vh; margin: 0; } } /* ****************************************************************************************************************** */ /* --- 1051 1450 1050 ----------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ @media only screen and (min-width: 1051px) and (max-width: 1450px) and (max-height: 1050px) { #header #haerlinlogoleft { display:none; } body { } div#cuisine a.btn, div#sommelier a.btn, div#menu a.btn, div#team div.textblock a, div#infos a.book, div#infos .imgblock a, div.leftwin a.btn, div.centralwin a.btn { font-size:15px; } div.text2col div.blockleft div.text, div.text2col div.blockright div.text { padding-right:20px; padding-left:20px; width: calc(100% - 40px); } div#videotop div.videoin { width:100%; height:100%; margin:0; } div#videotop .grandtables.ce_text p { color:#FFF; } div#menu div.menuinside { margin-right:auto; margin-left:auto; width:calc(100% - 300px); } div#menu .blockleft .image_container { margin-right:10px; margin-left:10px; } div#menu .blockright .image_container { margin-right:10px; margin-left:10px; } div.centralbar div.centralwin { top:15%; height: 70vh; } div.centralbar div.centralwin div.textimg .textblock .block { max-width:calc(100% - 140px); } div#sommelier div.blockbottom, div#menu div.blockmiddle { max-width:calc(100% - 300px); } div#menu div.text2col div.blockleft div.text, div#menu div.text2col div.blockright div.text { padding-right:50px; padding-left:50px; width: calc(100% - 100px); } div#chefstable div.chefstableinside { width:100%; height:100%; } div#chefstable div.chefstableinside .rsts-skin-default.rsts-main { height:100%; } #team .limit1300 { max-width: calc(100% - 300px) !important; overflow:hidden; } div#team .teammember div.textblock { padding-right:50px; padding-left:50px; } div#team .textblock h1.name { margin-bottom:15px; } div#team .textblock div.zitat { margin-top:20px; } div#team .teammember div.textblock, div#team .teammember div.imgblock, div#kontakt .kontaktleft, div#kontakt .kontaktright { min-height:400px; max-height:100%; } div#team .teammember div.textblock p { line-height:1.2em; } div#team .textblock h1.name { padding-bottom:17px; } div#team .textblock h2 { font-size:18px; } #infos .limit1600a { margin-right:auto; margin-left:auto; max-width:90%; } #infos p { margin-top:4px; margin-bottom:4px; } div#infos div.imgblock .btnblock { padding-top:10px; } div#infos div.imgblock .images { max-width:300px; } div#infos div.imgblock .btnblock .btn, div.leftbar div.btnblock .btn, div.leftbar2 div.btnblock .btn { margin-bottom:10px; } div#infos div.imgblock .btnblock { max-width:200px; } div#kontakt .kontaktleft .image_container, div#kontakt .kontaktright .image_container { width:100%; height:100%; } div#socials .flexcontainer.soinside { max-width:calc(100% - 300px); } div#socials .image_container a.so8, div#socials .image_container a.so9, div#socials .image_container a.so10, div#socials .image_container a.so11 { display:none; } div#socials .image_container img { margin:5px; border:2px solid #fff; width: calc(25% - 14px); } div#cuisine div.cuisineinside, #kontakt .limit1300.flexcontainer { margin-right:auto; margin-left:auto; width: calc(100% - 300px) !important; max-width: calc(100% - 300px) !important; 1max-height: 66vh !important; overflow:hidden; } .dlh_googlemap { padding-bottom: 0% !important; } div.rightbar div.rcl { width:100%; display:inline-block; margin-top:20px; margin-right:0; margin-bottom:30px; } } /* ****************************************************************************************************************** */ /* --- 1050---------------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ @media only screen and (max-width: 1050px) { body { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0; } #header .socials, nav#mainmenu { display:none; } #header #haerlinlogoleft { width:120px; left:15px; top:15px; position:absolute; } div.leftbar div.leftwin div.textimg { height:100%; } div#infos div.imgblock .btnblock .btn, div.leftbar div.btnblock .btn, div#cuisine a.btn, div#sommelier a.btn, div#menu a.btn, div#team div.textblock a, div#infos a.book, div#infos .imgblock a, div.leftwin a.btn, div.centralwin a.btn { overflow:visible; display:inline-block; margin-top:0; margin-bottom:15px; font-size:15px; } div.leftbar div.leftwin div.textimg div.textblock, div.centralbar div.centralwin div.textimg div.textblock { height:100%; max-width:100%; } #header .inside, #main .limit1600, body.default1600 #container { padding-right:10px; padding-left:10px; width: calc(100% - 20px); } div#videotop, div#cuisine, div#sommelier, div#menu, div.leftbar, div#chefstable, div.centralwin, div#team, div#infos, div#socials, div#kontakt { width:100%; height:100%; position:relative; overflow:visible; display:inline-block; } div#videotop { height:75vh; } div#videotop div.videoin { width:100%; height:100%; margin:0; } div#videotop .grandtables.ce_text p { color:#FFF; } div#videotop, div#chefstable { background-color:#fff; } div#cuisine, div#sommelier, div#menu, div#chefstable, div#team, div#location, div#infos, div#socials, div#kontakt { padding-top:20px; padding-bottom:20px; } div#cuisine div.cuisineinside, div#sommelier div.sommelierinside, div#menu div.menuinside, div#menu div.text2col div.blockleft, div#chefstable div.chefstableinside, div#team div.teaminside, div#location div.locationinside, div#socials div.haerlinsocials, div#kontakt div.kontaktinside, div.centralbar div.centralwin div.textimg div.textblock { position:relative; padding-top:40px; padding-bottom:40px; width: 100%; top: 0%; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } div#socials div.haerlinsocials { padding-top:60px; padding-bottom:100px; } div#menu div.text2col div.blockleft { margin-bottom:70px; } div.centralbar div.centralwin { width:100%; height:100%; left:0; top:0; position:absolute; overflow:visible; display:block; height:auto; } div.text2col div.blockleft div.text, div.text2col div.blockright div.text, div#menu div.text2col div.blockleft div.text, div#menu div.text2col div.blockright div.text { padding-right:0; padding-left:0; width: calc(100% - 0px); } div.text2col div.tcinside, div#cuisine div.text2col1, div#sommelier div.blocktop, div#sommelier div.blockmiddle, div.leftbar div.leftwin div.textimg div.textblock, div.centralbar div.centralwin div.textimg div.textblock, div#team div.teammember div.imgblock, div#team div.teammember div.textblock, div#socials .flexcontainer.soinside, #kontakt .limit1300.flexcontainer, div#cuisine div.cuisineinside-off { margin-right:auto; margin-left:auto; padding-right:0; padding-left:0; width: calc(100% - 280px) !important; max-width: calc(100% - 280px) !important; overflow:hidden; } div#chefstable .rsts-type-slide .rsts-view { padding-bottom:40px; } div#chefstable .rsts-skin-default .rsts-prev { bottom:-20px; position:absolute; background-image:url("/files/intern/common/restaurant-haerlin-hamburg-pfeil-links.png"); } div#chefstable .rsts-skin-default .rsts-next { bottom:-20px; position:absolute; background-image:url("/files/intern/common/restaurant-haerlin-hamburg-pfeil-rechts.png"); } div#team div.teammember div.imgblock img { width:100%; } div.textimg .textblock .block, div.centralbar div.centralwin div.textimg .textblock .block { max-width:calc(100% - 0px); } /* Bar: Bild nach unten */ div#bar div.imgblock:nth-of-type(1) { order: 2; } div#cuisine .mod_rocksolid_slider .rsts-caption, div#cuisine .mod_rocksolid_slider .rsts-alt, div#cuisine .mod_rocksolid_slider .rsts-text { left:10px; position:absolute; } div#videotop div.videoin { width:100%; display:inline-block; margin-right:0; margin-left:0; padding-right:0; padding-left:0; } div#videotop .textlila.ce_text { padding-right:20px; padding-left:20px; width:calc(100% - 40px); } div#menu div.textimg div.imgblock div.imginside .image_container, div#menu div.textimg div.imgblock div.imginside .image_container img, div#sommelier div.textimg div.imgblock div.imginside .image_container, div#sommelier div.textimg div.imgblock div.imginside .image_container img { width:100%; height:100%; max-width:100%; max-height:100%; } div#cuisine .mod_rocksolid_slider { padding-top:30px; padding-bottom:30px; } div#team .mod_rocksolid_slider { padding-top:0; padding-bottom:0; } div#infos { background-image: clear; } div#infos div.textblock { background-image:url("/files/image/infos/restaurant-haerlin-hintergrund-information.jpg"); background-position:center center; background-repeat:no-repeat; } div#infos div.textblock { height:100%; padding:80px 0; width:calc(100% - 0px); } .dist50 { margin-bottom:30px; } .dist100 { margin-bottom:50px; } .ce_form .widget.widget-text, .ce_form .widget.widget-select, .ce_form .widget.widget-textarea textarea { float:none; clear:both; margin-right:0; width: calc(100% - 15px); } h1 { font-size:32px; line-height:1.3em; } h2 { font-size:24px; } h3 { font-size:20px; } h4 { font-size:18px; } div.text2col div.blockleft, div.text2col div.blockright, div.textcol div.blockleft, div.textcol div.blockright, div#team div.teammember div.textblock, div#team div.teammember div.imgblock, div.textimg div.textblock, div.textimg div.imgblock, div#kontakt div.kontaktleft, div#kontakt div.kontaktright { width:100%; height:100%; min-height:150px; } div#kontakt div.kontaktright .dlh_googlemap { padding-bottom: 0% !important; } div#kontakt div.kontaktleft { margin-top:0; margin-bottom:0; } div#menu div.textimg div.textblock, div#sommelier div.textimg div.textblock, div#team div.teammember div.textblock { padding:50px 20px; } div#team div.teammember div.textblock { padding-top:40px; padding-right:50px; padding-left:50px; } div.leftbar.showbtn, div.leftbar div.leftwin div.hidebtn, div.centralbar.showbtn, div.centralbar div.centralwin div.hidebtn { display:none; } div.leftbar div.leftwin, div.centralbar div.centralwin { width:100%; height:100%; position:relative; display:block; padding-top:0; padding-bottom:50px; } div.leftbar div.leftwin div.textblock { padding-top:80px; } div#team .textblock h1.name { margin-bottom:20px; } div#team .textblock div.zitat { margin-top:20px; } div#socials .image_container img { margin:15px; width: calc(33.33% - 38px); } div#team .teammember .videosmall { display:none; } div#team .teammember .videomobile { max-height:300px; overflow:hidden; display:block; } div#team .limit1300 { } div#infos, div#socials { padding-top:0; padding-bottom:0; } div#infos div.imgblock { height:100%; padding-top:50px; padding-bottom:50px; } div#socials .image_container img { margin:5px; border:2px solid #fff; width: calc(25% - 14px); } div#kontakt .boxkontakt { padding-top:0; padding-bottom:0; } #kontakt div.menubar, #kontakt .footer { bottom:auto; left:0; right:0; top:0; position:relative; } div.bookattable { bottom:10px; right:10px; position:fixed; display:inline-block; z-index:994; } div.bookattable a { display:inline-block; padding:10px 20px 7px; } body .ce_gallery > ul li { margin:0 5px 5px; line-height:1px; width: calc(20% - 10px); } .mod_article .ce_image .caption { font-size:17px; } .ce_form { width:100%; } label[for=ctrl_2], label[for=ctrl_4], label[for=ctrl_6], label[for=ctrl_8], label[for=ctrl_10] { margin-left:0; } .ce_form .submit_container, .pflichtfelder { margin-left:0; } .ce_form .explanation { margin-left:0; } fieldset.checkbox_container { width:95%; margin:3px 0 15px; padding-top:0; padding-bottom:0; } #article_right { width:100%; } #article_right .ce_text table tr td { font-size:12px; } #article_right div iframe { width:100%; max-height:400px; float:left; } #submenu { display:none; } #mobilemenu, #mobnav, .selectnav { display:inline-block; } #mobilemenu { width:90%; } .selectnav { width:90%; margin:0 0 0 5%; } #mobilemenu .invisible { display:none; } /* mobnav */ .js #mobnav { display:none; } .js .selectnav { display:block; margin-bottom:10px; } .jsnav li a { display:block; font-size:14px; } #dropdown { display: none!important; } #toTop img { width: 100% !important; } .ce_form label.even { margin-left: 0 !important; } .reflink, .col50, .col50m, .col50mr, .col50m30, #col50, #col50m, #col50m30, .col33, .col33m, .col33mr, .col33m30, .col66, .col66m, .col66mr, .col66m30 { width:100%; height:100%; float:none; clear:both; display:block; margin-right:0; margin-left:0; } div#kontakt .kontaktleft, div#kontakt .kontaktright { float:none; clear:both; width:calc(100% - 0px); } #footer .footer_nav_wrapper { width:100%; margin-left:0; } #kontakt .logo, #footer div.column, #footer nav.column, #footer_txt, #footer_menulinks, #footer .logo1, #kontakt div.menubar, #kontakt div.menubar .footermenu, #kontakt div.menubar .footertext, #kontakt div.menubar div.res, #kontakt div.menubar div.tel, #footer div.menubar, #footer div.menubar .footermenu, #footer div.menubar .footertext, #footer div.menubar div.res, #footer div.menubar div.tel { width:100%; height:100%; min-height:18px; position:relative; float:none; clear:both; display:block; margin:0 0 10px; padding-right:0; padding-left:0; text-align:center; } #kontakt .logo { margin-top:80px; } #footer a, #footer strong, #kontakt nav a, #kontakt nav strong, #kontakt div.menubar div.footermenu *, #kontakt div.menubar div.footertext *, #footer .menubar div.res, #kontakt .menubar div.res, #footer .menubar div.tel, #kontakt div.menubar, #kontakt div.menubar div.tel, #kontakt div.menubar div.res, #kontakt div.menubar div.footermenu, #kontakt div.menubar div.footertext { font-size: 18px; line-height: 1.5; min-height:14px; margin-bottom:0; } #kontakt div.menubar { padding-bottom:35px; } #footer div.menubar { right:0; margin-top:10px; } #footer nav.column.tech1 { margin-bottom:0; } #footer nav.column.tech1 ul li.last { border-bottom:1px solid #c4c4c4; } #footer nav.column.tech2 h1 { display:none; } #footer div.column h1, #footer nav.column h1 { width:100%; text-align:center; } #footer div.column.text { clear:both; display:inline-block; } #kontakt nav.column ul, #footer nav.column ul { width:100%; margin-top:20px; margin-bottom:20px; } #kontakt nav.column ul li, #footer nav.column ul li { width:100%; float:none; clear:both; text-align:center; } #footer .mod_navigation { float:left; width: 100% !important; } #footer nav.mod_changelanguage { top:270px; } } /* ****************************************************************************************************************** */ /* --- 850 ---------------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ @media only screen and (max-width: 851px) { .grid.fr2, .grid.fr3, .grid.fr4, .grid.fr5, .grid.fr6 { grid-template-columns: 1fr 1fr; } section.mobileslider1 .msdesktop, section.counterlinks .msdesktop { display: none; } section.mobileslider1 .msmobile, section.counterlinks .msmobile { display: block; } } /* ****************************************************************************************************************** */ /* --- 992 ---------------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ @media only screen and (max-width: 992px) { body, div#kontakt { background-color:#fff; } div, h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, li, dl, dt, dd, figure, table, th, td, form, fieldset, legend, input, textarea { font-size: 18px; line-height: 24px; } .menu-toggle { left: 30px; } #main .inside { padding-right: 60px; padding-left: 60px; } #main a { font-size: 18px; line-height: 24px; } #header { min-height:65px; display:inline-block; background-color:rgba(255,255,255,.01); } #header #haerlinlogoleft { display:none; } #header div.menubar { display: none; } #header .inside, #main .limit1600, body.default1600 #container { padding-right: 0px; padding-left: 0px; width: 100%; } #navmainmega .mobilelogo { display: block; position: absolute; top: 25px; width: 165px; } #navmainmega .close img { width: 28px; cursor: pointer; } #navmainmega .grid { display: block; max-width: none; padding: 0 0 0 50px; } #navmainmega .dist50 { margin-bottom: 15px; height: 25px; } #navmainmega .centerblock, #navmainmega .rightblock { display: none; } #navmainmega .leftblock a { font-size: 34px; line-height: 45px; } #navmainmega .awards { display: none; } section.bannerimage img.bkimage.desktop { display: none; } section.bannerimage img.bkimage.mobile { display: block; } section.bannerimage div.logos { max-width: 100%; } section.bannerimage div.logos .logo { max-width: 65vw; } .grid.fr2, .grid.fr21 { grid-template-columns: 1fr; } .dist100 { height: auto; } .grid.gap100 { grid-column-gap: 100px; grid-row-gap: 25px; } .FreightSansProLight24 { font-size: 18px; line-height: 24px; } .kasubmenu.desktop { display: none; } .kasubmenu.mobile { display: flex; max-width: 320px; margin-left: auto; margin-right: auto; } .kasubmenu *, .kasubmenu a { font-size: 15px; } #main .kasubmenu .items .item a { padding: 0 8px; border: none; } #main .kasubmenu .items .item a:after { position: absolute; top: 44%; right: 0; display: block; content: ''; width: 1px; height: 12px; background: #7e8274; } #main .kasubmenu .items .item:nth-of-type(2) a:after, #main .kasubmenu .items .item:last-child a:after { display: none; } .theme { font-size: 18px; line-height: 30px; font-weight: 500; margin: 50px auto; } .theme.top { font-size: 18px; margin-top: 20px; margin-bottom: 40px; max-width: none; } .vcenterheadline.desktop { display: none; } .vcenterheadline.mobile { display: block; max-width: 396px; margin: auto; } .vcenterheadline h6 { font-size: 30px; line-height: 34px; } .vcenterheadline.mobile.moments figure { display: block; width: calc(100% + 60px); margin-right: calc(-1 * 60px); margin-left: auto; max-width: 100%; height: auto; max-width: none; } section.textxcols .box2col .cols .column .colinside.hit .text.buttoninside, section.textxcols .box2col .cols .column .colinside.wit .text.buttoninside{ margin-top: 160px; } section.textxcols .box2col .cols .column.dist100 .colinside.ti .text { margin: 0px 0 60px 0; } section.textxcols .box2col .cols .column .colinside.hi h6.headline { font-size: 36px; line-height: 44px; transform: translateY(-18px); } section.textxcols .box2col .cols .column .colinside.hi img.img1 { top: 0; left: auto; width: 75%; display: block; margin-left: auto; max-width: 100%; height: auto; } section.textxcols .box2col .cols .column .colinside.ti img.img2 { left: auto; } section.textxcols .box2col .cols .column .colinside.ti .text { margin-top: 30px; } section.textxcols .box2col .cols .column .colinside.wti .text, section.textxcols .box2col .cols .column .colinside.wit .text, section.textxcols .box2col .cols .column .colinside.ti .text { max-width: 485px; margin-left: auto; margin-right: auto; padding-right: 30px; } section.textxcols .box2col .cols .column .colinside.hi { margin: 240px 0 0 0; } section.textxcols .box2col .cols .column .colinside.ti { margin-bottom: 30px; } #main section.textxcols .image_container { position: relative; } #main section.textxcols .menue-img .image_container { margin-top: 40px; } #main section.textxcols .menue-img .image_container img { margin-left: auto; margin-right: auto; } #main .floatbutton { display: none; } #main section .image_container .floatbutton.new { display: flex; width: 180px; height: 180px; top: auto !important; bottom: -130px !important; left: calc(50% - 8px); } #main .floatbutton.new a { font-size: 18px; } #main section .btn1 .buttoninside { transform: translateY(0); } div#videotop div.videoin { margin-right:0; margin-left:0; width: calc(100% - 0px); height: calc(100% - 0px); } div#videotop #haerlinlogovideo { display:none; } div#videotop #haerlinlogovideomobile { display:block; } div.text2col div.tcinside, div#cuisine div.text2col, div#sommelier div.blocktop, div#sommelier div.blockmiddle, div.leftbar div.leftwin div.textimg div.textblock, div.leftbar2 div.leftwin div.textimg div.textblock, div.centralbar div.centralwin div.textimg div.textblock, div#team div.teammember div.imgblock, div#team div.teammember div.textblock, div#socials .flexcontainer.soinside, #kontakt .limit1300.flexcontainer, div#cuisine div.cuisineinside-off { margin-right:auto; margin-left:auto; padding-right:0; padding-left:0; width: calc(100% - 20px) !important; max-width: calc(100% - 20px) !important; overflow:hidden; } div#sommelier div.blockbottom div.blockleft, div.textcol div.blockbottom div.blockleft, div#sommelier div.blockbottom div.blockright, div.textcol div.blockbottom div.blockright { width:100%; margin-right:0; margin-bottom:15px; margin-left:0; } .stars img { max-width: 75px; } section.textxcols .box2col .cols .column .colinside.hit h1.headline, h1.content-headline { font-size: 32px; line-height: 1.2; margin-bottom: 40px; } h1.content-headline { margin: 0; } div#rueffer .cf p img { max-width: 200px; } div#cuisine .theme { margin-bottom: 0; } div#ambiente { margin-top: -60px; } #main div#ambiente section .image_container .floatbutton.new { left: calc(50% - 26px); } div#ambiente .fish .text { margin-bottom: 135px; } div#ambiente .fish .img1 { max-width: 65%; transform: translateY(-90px); } div#ambiente .fish .img2 { max-width: 70%; position: absolute; right: -30px; } div#impressionen, div#chefs-table { width: calc(100% + 80px); margin-left: -40px; margin-right: -40px; } div#impressionen { margin-top: -70px; } div#sommelier .content-headline { transform: translateY(-25px); } div#sommelier .txtright.gap80, div#sommelier .txtleft.gap80{ grid-row-gap: 0px; } div#sommelier .txtright .imgblock { display: block; width: calc(100% + 60px); margin-left: calc(-1 * 60px); margin-right: auto; max-width: 100%; height: auto; max-width: none; } div#sommelier .textimg.left .grid { display: flex; flex-direction: column-reverse; } div#sommelier .txtleft .imgblock { display: block; width: calc(100% + 60px); margin-left: auto; margin-right: calc(-1 * 60px); max-width: 100%; height: auto; max-width: none; } div#sommelier .dist50 { margin-bottom: 15px; height: 25px; } section.kalinks.statement { margin: 140px 0 0 0; } #main section.kalinks.statement .link h3 { font-size: 22px; line-height: 24px; padding-top: 12px; } div#angebote { margin-top: -90px; } div#angebote .dist50 { margin-bottom: 15px; height: 25px; } div#angebote h6.headline { font-size: 36px; line-height: 44px; transform: translate(-51px, 30px); } div#angebote .grid.fr3 { grid-template-columns: 1fr 1fr 1fr; overflow-y: auto; width: calc(100% + 60px); margin-right: calc(-1 * 60px); margin-left: auto; max-width: 100%; height: auto; max-width: none; } div#angebote .grid.fr3 .image_container { min-width: 245px; } div#kontakt { margin-bottom:20px; } div#team { margin-top: -50px; } div#team .dist50.m-25 { margin-bottom: 15px; height: 25px; } div#team h3.headline { font-size: 24px; line-height: 30px; } div#team .m-left .imgblock { display: block; width: calc(100% + 60px); margin-left: calc(-1 * 60px); margin-right: auto; max-width: 100%; height: auto; max-width: none; } div#team .m-right .imgblock { display: block; width: calc(100% + 60px); margin-right: calc(-1 * 60px); margin-left: auto; max-width: 100%; height: auto; max-width: none; } div#team .content-image { width: calc(100% + 60px); margin-left: -30px; margin-right: -30px; } div#team .limit1300, div#kontakt .limit1300 { width:100%; margin-right:0; margin-left:0; } div#team .textimg.bottom .imgblock { margin-bottom: 6px; } div#team .rsts-skin-default .nextprev { display:none; } div#team .grid { display: flex; flex-direction: column; grid-row-gap: 6px; } div#team .grid.txtleft { flex-direction: column-reverse; } div#infos div.textblock { padding-top:50px; padding-bottom:50px; } div.leftbar div.leftwin div.textblock, div.leftbar2 div.leftwin div.textblock, div#team div.teammember div.textblock { padding-top:30px; padding-bottom:30px; } div#team div.teammember div.textblock { padding-right:20px; padding-left:20px; } div#wissenswertes .grid.fr3 { grid-template-columns: 1fr; } div#socials .soinside .textblock .tag, div#socials .soinside .textblock .tag * { font-size:17px; } div#socials .image_container a.so8, div#socials .image_container a.so9, div#socials .image_container a.so10, div#socials .image_container a.so11 { display:none; } div.rightbar, div.rightbar div.rmenu, div.rightbar div.rcl, div.rightbar div.tl { display:none; } #ambiente .column.col_1 .colinside:last-of-type img:last-of-type { display: none; } #radierungen .limit1300int { padding: 0 30px; } #footer { min-height:80px; display:block; margin-top: -50px; } #footer .socials { flex-direction: column; } #footer .socials img.mobile { display: inline-block; max-width: 18px; margin: 0 0 0 10px; transform: translateY(3px); } #footer .socials a { padding: 0; } #footer .socials a div { margin: 0; } #footer .socials a img { display: none; } #footer .socials h3{ font-size: 18px; margin-bottom: 10px; } #footer .footermenu { display: block; padding: 20px 0 40px 0; } #footer nav.mod_changelanguage { display:block; left: calc(50% - 38px); right:auto; } #footer nav.mod_changelanguage li { right:0; float:left; margin-right:0; margin-left:0; padding-right:0; padding-left:0; } footer nav.mod_changelanguage ul li a, footer nav.mod_changelanguage ul li strong { color: #6e6e6e; } footer nav.mod_changelanguage ul li.first::after { display: inline-block; margin-left: 0px; color: #6e6e6e; content: "/"; } .reservation.statement a, #main .statement a { font-size: 36px; } #main #leuchter h2.headline { font-size: 30px; line-height: 34px; margin: 0; width: 100%; right: 0; left: auto; position: absolute; bottom: 40vw; } .nature-creativity .flexcontainer.space-between { justify-content: start; } .nature-creativity .desktop, .leuchter .desktop{ display: none; } .nature-creativity .mobile, .leuchter .mobile { display: block; } .nature-creativity .mobile .headline { position: absolute; z-index: 99; top: 65vw; right: 0; font-size: 30px; line-height: 34px; } .nature-creativity .mobile .image_container, .leuchter .mobile .image_container{ display: block; width: 100% !important; margin-left: auto; margin-right: auto; max-width: 100% !important; height: auto; max-width: none; } .nature-creativity .mobile .image_container img, .leuchter .mobile .image_container img { width: calc(100% + 60px); margin-left: -30px; display: block; max-width: none; } .nature-creativity .mobile .text { padding-left: 0; } .rueffer-text .column.col_0 { padding-right: 30px; } .moments .limit800 { padding-left: 0 !important; padding-right: 0 !important; } #cuisine section.textxcols .box2col .cols .column .colinside.hi { position: relative; margin-bottom: 100px; } #cuisine section.textxcols .box2col .cols .column .colinside.hi .headline { position: absolute; } #philosophie .limit800 { padding-left: 0; padding-right: 0; } #auszeichnungen .grid, #awards .grid { grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 20px; grid-row-gap: 0px; } #radierungen .col_1 .colinside, #putten .col_1 .colinside { display: flex; flex-direction: column-reverse; } #putten .dist50 { display: none; } #putten .textxcols .wit .text .headline { font-size: 36px; line-height: 44px; } #putten section.textxcols .box2col .cols .column .colinside.hi { position: relative; margin-bottom: 100px; } #putten section.textxcols .box2col .cols .column .colinside.hi h6.headline { position: absolute; top: 0; max-width: 275px; } #putten .textxcols .wit .text { margin-bottom: 50px; } #radierungen .col_1 .colinside .text { margin-bottom: 60px; } .limit800 { padding-left: 30px; padding-right: 30px; } .rueffer-text .col_0 .text { padding-top: 25px; } .rueffer-text .col_0 .text h6 { position: absolute; top: -130px; left: -15px; font-size: 30px; line-height: 34px; } .claim-visual h6 { right: -45px; bottom: 26%; } .after-claim-visual { margin-top: -45px; max-width: 525px; } section.kaslider1.fullwidth { width: 100%; margin-left: 0; } section.kaslider1 .swiper-container, section.kaslider1.fullwidth .swiper-container { margin-left: 15px; margin-right: 15px; } } /* ****************************************************************************************************************** */ /* --- 600 ---------------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ @media only screen and (max-width: 600px) { body, div#kontakt { background-color:#fff; } h1 { font-size: 32px; line-height: 1.2; } h2 { font-size: 24px; line-height: 30px; } h3 { font-size: 24px; line-height: 30px; } .FreightSansProLight24, .FreightSansProLight24 p { font-size: 15px; line-height: 20px; } .cite p:last-of-type { font-family: "freight-sans-pro", sans-serif; font-size: 17px; line-height: 22px } .menu-toggle { left: 20px; } header .reservation { display: block; position: absolute; top: 20px; right: 20px; width: 28px; } .theme::before, .theme::after { display: none; } #banner { height: 100vh; } #banner .scrollDown { display: block; } #main .inside { padding-right: 30px; padding-left: 30px; } #header { min-height:65px; display:inline-block; background-color:rgba(255,255,255,.01); } #header #haerlinlogoleft { display:none; } #header div.menubar { display:none; } #main .textimg .textblock { padding: 16px 0 0; } div#videotop div.videoin { margin-right:0; margin-left:0; width: calc(100% - 0px); height: calc(100% - 0px); } div#videotop #haerlinlogovideo { display:none; } div#videotop #haerlinlogovideomobile { display:block; } div.text2col div.tcinside, div#cuisine div.text2col, div#sommelier div.blocktop, div#sommelier div.blockmiddle, div.leftbar div.leftwin div.textimg div.textblock, div.centralbar div.centralwin div.textimg div.textblock, div#team div.teammember div.imgblock, div#team div.teammember div.textblock, div#socials .flexcontainer.soinside, #kontakt .limit1300.flexcontainer, div#cuisine div.cuisineinside-off { margin-right:auto; margin-left:auto; padding-right:0; padding-left:0; width: calc(100% - 20px) !important; max-width: calc(100% - 20px) !important; overflow:hidden; } div#sommelier div.blockbottom div.blockleft, div.textcol div.blockbottom div.blockleft, div#sommelier div.blockbottom div.blockright, div.textcol div.blockbottom div.blockright { width:100%; margin-right:0; margin-bottom:15px; margin-left:0; } div#kontakt { margin-bottom:20px; } div#team .limit1300, div#kontakt .limit1300 { width:100%; margin-right:0; margin-left:0; } div#team .rsts-skin-default .nextprev { display:none; } div#infos div.textblock { padding-top:50px; padding-bottom:50px; } div.leftbar div.leftwin div.textblock, div#team div.teammember div.textblock { padding-top:30px; padding-bottom:30px; } div#team div.teammember div.textblock { padding-right:20px; padding-left:20px; } div#socials .soinside .textblock .tag, div#socials .soinside .textblock .tag * { font-size:17px; } div#socials .image_container a.so8, div#socials .image_container a.so9, div#socials .image_container a.so10, div#socials .image_container a.so11 { display:none; } div.rightbar, div.rightbar div.rmenu, div.rightbar div.rcl, div.rightbar div.tl { display:none; } #auszeichnungen .grid { grid-template-columns: 1fr 1fr; } #rueffer section.textxcols .box2col .cols .column .colinside.ti .text { padding-right: 0; } div#ambiente .fish .img2 { right: 0; } #leuchter .limit800 { padding-left: 0; padding-right: 0; } #impressionen .theme, #sommelier .theme, #angebote .theme #team .theme { margin-bottom: 15px; } #radierungen .limit1300int { padding: 0; } #footer { min-height:80px; display:block; } #footer nav.column ul li { margin: 6px 0; } #footer a { font-size: 18px; } #footer nav.mod_changelanguage { display:block; left: calc(50% - 38px); right:auto; } #footer nav.mod_changelanguage li { right:0; float:left; margin-right:0; margin-left:0; padding-right:0; padding-left:0; } footer nav.mod_changelanguage ul li a, footer nav.mod_changelanguage ul li strong { color: #6e6e6e; } footer nav.mod_changelanguage ul li.first::after { display: inline-block; margin-left: 0px; color: #6e6e6e; content: "/"; } div#videotop { width: 100%; max-height: 1000px !important; height: calc(100vh - 52px); margin: 0; } div#videotop div.videoin { height: calc(100vh - 52px); } .previewvideo .prev-video-container { height: calc(100vh - 52px)!important; } .previewvideo .videobtn { position: absolute; top: auto; bottom: 10px; left:10px; right: auto; transform: translate(0%); font-size: 15px; } section.kaslider1 { width: 100%; margin: 0; } section.mobileslider1 .msmobile .swiper-button-prev { /*left: 15px;*/ } section.mobileslider1 .msmobile .swiper-button-next { /*right: 15px;*/ } section.textxcols .box2col .cols .column .colinside.wti .text, section.textxcols .box2col .cols .column .colinside.wit .text, section.textxcols .box2col .cols .column .colinside.ti .text { padding-right: 30px; } .vcenterheadline.mobile.moments figure { display: block; width: calc(100% + 30px); margin-right: calc(-1 * 30px); margin-left: auto; max-width: 100%; height: auto; max-width: none; } div#impressionen { margin-top: -70px; width: calc(100% + 60px); margin-left: -30px; margin-right: -30px; } div#sommelier .txtright .imgblock { display: block; width: calc(100% + 30px); margin-left: calc(-1 * 30px); margin-right: auto; max-width: 100%; height: auto; max-width: none; } div#sommelier .txtleft .imgblock { display: block; width: calc(100% + 30px); margin-left: auto; margin-right: calc(-1 * 30px); max-width: 100%; height: auto; max-width: none; } div#angebote .grid.fr3 { grid-template-columns: 1fr 1fr 1fr; overflow-y: auto; width: calc(100% + 30px); margin-right: calc(-1 * 30px); margin-left: auto; max-width: 100%; height: auto; max-width: none; } div#team .m-left .imgblock { display: block; width: calc(100% + 30px); margin-left: calc(-1 * 30px); margin-right: auto; max-width: 100%; height: auto; max-width: none; } div#team .m-right .imgblock { display: block; width: calc(100% + 30px); margin-right: calc(-1 * 30px); margin-left: auto; max-width: 100%; height: auto; max-width: none; } div#team .content-image { width: calc(100% + 60px); margin-left: -30px; margin-right: -30px; } .nature-creativity .mobile .image_container { display: block; width: 100%; margin-left: auto; margin-right: auto; max-width: 100%; height: auto; max-width: none; } .nature-creativity .mobile .headline { top: 75vw; } #table-reservation { padding-top: 50px; } #table-reservation .limit800 { padding-left: 0; padding-right: 0; } #footer div.ce_toplink a { width: 50px; height: 50px; transform: translateX(10px); } .claim-visual h6 { right: 0; } .after-claim-visual { margin-top: 0; } } /* ****************************************************************************************************************** */ /* --- navmobile ---------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ @media only screen and (max-width: 1050px) { #navmobil { width:32px; height:32px; right:15px; top:15px; position:absolute; z-index: 990; cursor: pointer; } .mobile_menu_overlay { z-index: 990; } .mobile_menu { width:100%; max-width:100%; z-index: 999; 1height: auto !important; 1height: 99vh !important; } .mobile_menu .flexcontainer { flex-direction: column; } .mobile_menu .insideblock1 { height:100%; text-align: center; display: flex; align-items: center; justify-content: center; } .mobile_menu .logo { display:block; margin-top:60px; margin-bottom:40px; } .mobile_menu .inner { text-align:center; background-color:#fdfbf8; font:15px Work Sans,Arial; color:#272727; text-transform:uppercase; letter-spacing:.05em; z-index: 999; } .mobile_menu .mod_navigation { clear:both; margin:0 0 20px; } .mobile_menu .mod_navigation ul li { float:none; margin:0; padding:0; border:0px; list-style-type:none; } #mobile-menu-28 .ankermenu a, .mobile_menu .mod_navigation a, .mobile_menu .mod_navigation strong { float:none; clear:both; display:block; margin:3px 0; padding:5px 0; font:15px Work Sans,Arial; color:#272727; text-transform:uppercase; letter-spacing:.05em; list-style-type:none; font-weight:500; } /* Sommelier ist aktuell ausgeblendet */ #mobile-menu-28 .ankermenu a.a2 { display:none; } .mobile_menu .mod_navigation li span { width:100%; position:relative; display:block; font-size:15px; letter-spacing:.02em; } .mobile_menu div.closebtn { width:30px; right:10px; top:10px; position:absolute; display:block; } .mobile_menu { display:none; -ms-overflow-style: none; // IE 10+ overflow: -moz-scrollbars-none; // Firefox overflow-y: -moz-hidden-unscrollable; -moz-scrollbars-vertical:hidden; } } :root { --card-h: 1240px; /* feste Höhe (Desktop) – nach Wunsch anpassen */ --flip-dur: .8s; --card-radius: 0; --shadow: 0 10px 25px rgba(0,0,0,.15); } .menu-card { width: 100%; max-width: 960px; margin: 2rem auto; text-align: center; perspective: 1400px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } /* 3D-Stage mit fester Höhe */ .flip { position: relative; width: 100%; height: var(--card-h); transform-style: preserve-3d; transition: transform var(--flip-dur) cubic-bezier(.2,.6,.0,1); will-change: transform; margin-bottom: 1rem; } /* Seiten */ .flip__page { position: absolute; inset: 0; padding: clamp(1rem, 2vw + .5rem, 3rem); background: #fff; border-radius: var(--card-radius); box-shadow: var(--shadow); backface-visibility: hidden; overflow: auto; /* Inhalt scrollt innerhalb der Seite */ -webkit-overflow-scrolling: touch; } .flip__page--back { transform: rotateY(180deg); } .flip.is-turned { transform: rotateY(180deg); } .flip__page--back { display: flex; flex-direction: column; justify-content: center; } /* Button */ .menu-card__toggle { display: flex; width: 60px; height: 60px; padding: 0; margin: 0; margin-left: auto; border-radius: 30px; border: 1px solid var(--ka-border-button); background-image: url('/files/intern/common/restaurant-haerlin-page-up.svg'); background-size: 40%; background-position: center; background-color: rgba(255, 255, 255, 0.5); background-repeat: no-repeat; cursor: pointer; transform: rotate(90deg); } .menu-card__toggle:focus-visible { outline: 2px solid dodgerblue; outline-offset: 3px; } /* Responsive: geringere feste Höhe auf kleineren Screens */ @media (max-width: 992px) { :root { --card-h: 1150px; } } @media (max-width: 768px) { :root { --card-h: 1120px; } } @media (max-width: 520px) { :root { --card-h: 1350px; } } /* Bewegungen reduzieren */ @media (prefers-reduced-motion: reduce) { .flip { transition: none; transform: none !important; } .flip__page--back { transform: none; display: none; } } .menu-card h2 { font-family: "freight-sans-pro", sans-serif; font-size: 21px; line-height: 26px; color: var(--ka-statement-green); margin-bottom: 32px; } .menu-card .menuname, .menu-card .weinname { font-family:"freight-big-pro", sans-serif; font-size: 21px; } .menu-card .menu-container { margin: 28px 0; padding: 0 12px; } .menu-card .menubeilagen, .menu-card .preis { font-family: "freight-sans-pro", sans-serif; font-size: 16px; line-height: 20px; } .menu-card .menuinfo { margin-top: 60px; } .menu-card .menuinfo p { font-family: "freight-sans-pro", sans-serif; font-size: 14px; line-height: 1.5; } .menu-card .weine { padding-top: 32px; } @media only screen and (max-width: 768px) { .menu-card h2 { font-size: 18px; margin: 28px 0 28px; } .menu-card .menuname, .menu-card .weinname { font-size: 18px; } .menu-card .menubeilagen, .menu-card .preis { font-size: 14px; } .menu-card .weine { padding-top: 28px; } .menu-card .menuinfo { margin-top: 48px; } } [data-aos="fade-up"] { transform: translate3d(0, 30px, 0); /* vorher sind es ~50px – deutlich kleiner */ opacity: 0; transition-property: transform, opacity; transition-duration: 600ms; /* etwas kürzer */ transition-timing-function: cubic-bezier(.22,.61,.36,1); /* smooth ease-out */ } [data-aos="fade-up"].aos-animate { transform: translate3d(0, 0, 0); opacity: 1; } /* Optional: noch sanfter auf sehr kleinen Screens */ @media (max-width: 480px) { [data-aos="fade-up"] { transform: translate3d(0, 8px, 0); } } /* Barrierearmut beachten */ @media (prefers-reduced-motion: reduce) { [data-aos] { transition-duration: 0.01ms !important; transform: none !important; } } /* Start: unsichtbar, aber belegend (kein display:none) */ #main .floatbutton { opacity: 0; visibility: hidden; transition: opacity 500ms ease, transform 500ms ease, visibility 0s linear 500ms; } /* Sichtbar, wenn Klasse gesetzt wird */ #main .floatbutton.is-visible { opacity: 1; visibility: visible; transition: opacity 500ms ease, transform 500ms ease, visibility 0s; } @media (max-width: 1920px) and (min-width: 992px) { body { font-size: 17px; line-height: 24px; } h1 { font-size: 36px; line-height: 40px; } h2 { font-size: 32px; line-height: 40px; } h6 { font-size: 50px; line-height: 55px; } section.bannerimage div.buttons a.button { width: 120px; height: 120px; } #main .inside { max-width: 1000px; margin-left: auto; margin-right: auto; } #main .textimg .textblock { padding: 40px 40px 60px 0; } .kasubmenu { width: calc(100% + 90px); margin-left: -45px; margin-right: -45px; } .kasubmenu *, .kasubmenu a { font-size: 18px; } .theme { font-size: 20px; font-weight: 600; } .theme.top { margin: 20px 0 75px 0; } .limit800 { max-width: 500px; } section.textxcols .box2col .cols .column .colinside.hit .headline { margin: 0 0 75px 0; } section.textxcols .box2col .cols .column.dist100 .colinside.ti .text { margin: 100px 0 200px 0; } section.textxcols .box2col .cols .column .colinside.hi h6.headline { font-size: 50px; line-height: 60px; } section.textxcols .box2col .cols .column .colinside.wti img.img1, section.textxcols .box2col .cols .column .colinside.wit img.img1 { width: 100%; max-width: 100%; left: 0; } section.kalinks.statement .textblock { top: -130px; left: -58px; } section.kalinks.statement { margin: 100px 0 0 0; } #main .kasubmenu .items .item a { padding: 0 20px; } #main section .btn4 .image_container .floatbutton { right: -95px; } #main .textimg.rueffer .swiper-slide, #main .textimg.guenther .swiper-slide { justify-content: start; margin-top: 10px; } #main .textimg.rueffer .textblock, #main .textimg.guenther .textblock { padding: 0 40px 60px 0; } #main .textimg.guenther { margin-bottom: 25px; } .grid.gap100 { grid-column-gap: 80px; } .FreightSansProLight24 { font-size: 16px; line-height: 24px; } .limit1300, .limit1300int { max-width: 1000px; margin-right: auto; margin-left: auto; } #navmainmega .grid { max-width: calc(100% - 85px); } #navmainmega .leftblock { padding-left: 6%; } #navmainmega .centerblock .menulogo img { width: 200px; } #cuisine section .colinside.hi{ margin: 150px 0 0 0 } #ambiente .content-headline, #auszeichnungen .content-headline { margin-top: 60px; } #ambiente section.textxcols .box2col .cols .column .colinside.ti .text { margin: 75px 0 75px 0; } #ambiente section.textxcols .box2col .cols .column.fish .colinside.ti .text.delay-1 { margin-top: 100px; margin-bottom: 100px; } #leuchter .limit1900, .limit1900int { min-width: calc(100% + 100px); margin-left: -50px; margin-right: -50px; } #putten .textxcols .wit .text .headline, #cherubs .textxcols .wit .text .headline { font-size: 50px; line-height: 55px; margin-top: 50px; } #main #leuchter h2.headline { font-size: 50px; line-height: 55px; } section.kaslider1 { width: 100%; position: relative; margin-left: auto; margin-right: auto; } .reservation.statement a, #main .statement a { font-size: 36px; } #main section.textxcols .box2col .cols .column .colinside.i2ht .headline span { transform: translateX(-85px); } .rueffer-text .col_0 .text { padding-top: 25px; } .rueffer-text .col_0 .text h6 { position: absolute; top: -205px; left: -85px; } .claim-visual h6 { font-size: 48px; line-height: 56px; right: -45px; bottom: 23%; } .claim-visual.nature h6 { right: -115px; bottom: 22%; } .claim-visual img { max-width: 800px; } .after-claim-visual { margin-top: -75px; } } @media (max-width: 1920px) and (min-width: 1420px) { #navmainmega .leftblock { padding-left: 25%; } } @media (min-width: 1921px) { section.bannerimage img.award { transform: translateY(90px); } #main #putten section.textxcols { margin-bottom: 120px } }