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} .mobile_menu{position:fixed;z-index:100;display:none}.mobile_menu .inner{height:100%;background:#000;overflow-y:scroll}.mobile_menu.active.position_left{box-shadow:2px 0 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.position_top{box-shadow:0 2px 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.position_right{box-shadow:-2px 0 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.position_bottom{box-shadow:0 -2px 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.no_shadow{box-shadow:none!important}.mobile_menu_trigger{display:none}.mobile_menu_wrapper{position:relative;width:100%;overflow:hidden}.mobile_menu_overlay{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:99}.mobile_menu_overlay.background{background:rgba(0,0,0,.5)}.mobile_menu li.submenu_hide>ul{display:none}.mobile_menu li.submenu_show>ul{display:block}body.ie8 .mobile_menu,body.ie8 .mobile_menu_trigger,body.ie9 .mobile_menu,body.ie9 .mobile_menu_trigger{display:none!important} #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} table.sortable thead th{background-image:url(../../assets/tablesorter/images/default.svg);background-repeat:no-repeat;background-position:center right}table.sortable thead th.tablesorter-headerAsc{background-image:url(../../assets/tablesorter/images/asc.svg)}table.sortable thead th.tablesorter-headerDesc{background-image:url(../../assets/tablesorter/images/desc.svg)} .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} /* playfair-display-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: 'Playfair Display'; font-style: normal; font-weight: 400; src: url('/webfonts/playfair-display-v37-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* playfair-display-italic - 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: 'Playfair Display'; font-style: italic; font-weight: 400; src: url('/webfonts/playfair-display-v37-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* playfair-display-500 - 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: 'Playfair Display'; font-style: normal; font-weight: 500; src: url('/webfonts/playfair-display-v37-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* playfair-display-500italic - 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: 'Playfair Display'; font-style: italic; font-weight: 500; src: url('/webfonts/playfair-display-v37-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* playfair-display-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: 'Playfair Display'; font-style: normal; font-weight: 600; src: url('/webfonts/playfair-display-v37-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* playfair-display-600italic - 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: 'Playfair Display'; font-style: italic; font-weight: 600; src: url('/webfonts/playfair-display-v37-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* playfair-display-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: 'Playfair Display'; font-style: normal; font-weight: 700; src: url('/webfonts/playfair-display-v37-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* playfair-display-700italic - 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: 'Playfair Display'; font-style: italic; font-weight: 700; src: url('/webfonts/playfair-display-v37-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* playfair-display-800 - 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: 'Playfair Display'; font-style: normal; font-weight: 800; src: url('/webfonts/playfair-display-v37-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* playfair-display-800italic - 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: 'Playfair Display'; font-style: italic; font-weight: 800; src: url('/webfonts/playfair-display-v37-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* playfair-display-900 - 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: 'Playfair Display'; font-style: normal; font-weight: 900; src: url('/webfonts/playfair-display-v37-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* playfair-display-900italic - 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: 'Playfair Display'; font-style: italic; font-weight: 900; src: url('/webfonts/playfair-display-v37-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* ****************************************************************************************************************** */ /* --- Variablen ---------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ :root { --ka-bk-color: #fff; --ka-bk-gray: #eee; /* --ka-bk-white:#fff; --ka-bk-blue:#25363E; --ka-bk-grey:#CBCBC5; --ka-bk-lightgrey:#f2f3ed; --ka-bk-yelgreen:#DEDE2A; --ka-bk-blue:#25363E; --ka-bk-green:#87ad82; --ka-bk-lightgreen:#e5efe7; --ka-bk-anthrazit:#25363e; --ka-border:#b3b3b3; --ka-bk-btn:#eaeae8; --ka-bk-btn-active:#dede2a; --ka-bk-btn-hover:#eded2c; */ --ka-border-color: #aaa; --ka-font-color:#4d4a46; --ka-font-blue:#504c4b; /*#0431cc;*/ --ka-font-white:#fff; --ka-font-hover:#e9ac3d; /*#2a2727;*/ --ka-font-gray:#eee; --ka-font-size:21px; --ka-line-height:28px; --ka-letter-spacing:0.03em; --ka-font-family:"benton-modern-display",serif; --ka-hx-font-family:"benton-modern-display",serif; --ka-hx-letter-spacing:0.1em; --ka-hx-font-weight:400; --ka-bksend: #ffb26c; --ka-bksendhover: #e8a162; --ka-bkactive: #ccc; --ka-h2-font-family:"brother-1816",Arial; --ka-h4-font-family:"brother-1816",Arial; --ka-menu-font-family:"brother-1816",Arial; --ka-headerheight:0px; --ka-desktopwidth:1200px; --swiper-navigation-size: 50px !important; } /* ****************************************************************************************************************** */ /* --- Basics ------------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ html { scroll-behavior: smooth; } body { background-color:var(--ka-bk-color); font-family:var(--ka-font-family); font-weight: 400; color:var(--ka-font-color); font-size:var(--ka-font-size); line-height:var(--ka-line-height); letter-spacing:var(--ka-letter-spacing); margin: 0; padding: 0; } body.bk-grey { background-color: #e5e5e5; } #wrapper { width:100%; min-height:200px; margin: 0; padding: 0; } #container { width:100%; margin: 0; padding: 0; } #main { min-height: 200px; margin-bottom: 0; } #main .inside { /*text-align: center;*/ /*background-color: var(--ka-bk-color);*/ } a, body, fieldset, form, input, label, li, ol, optgroup, p, select, td, th, textarea, ul, fieldset, form, input, optgroup, select, textarea { } ul { padding-top:4px; padding-left:17px; } li { margin-bottom:4px; padding-left:2px; list-style-type: disc; } #main .ce_text li { list-style-type:disc; } /* #main .ce_text li::before { content: "•"; color: #b2c900; display: inline-block; width: 1em; margin-left: -1em; } */ pre, form { margin:0; padding:0; } p { margin-top:8px; margin-bottom:8px; } .bigtext p { font-size: 28px; line-height: 40px; } h1 { font-family: var(--ka-hx-font-family); margin-top:5px; margin-bottom:45px; /*white-space:nowrap;*/ font-size:72px; line-height:72px; font-weight:600; letter-spacing: 0.01em; color: var(--ka-font-blue); } h2 { font-family: var(--ka-h2-font-family); margin-top:15px; margin-bottom:30px; font-size:55px; line-height:62px; font-weight:100; letter-spacing: 0.01em; color: var(--ka-font-blue); } h2.benton { font-size:65px; /*font-weight: 400;*/ font-family: "benton-modern-display",serif; margin-left: 10px; } h3 { font-family: var(--ka-hx-font-family); margin-top:15px; margin-bottom:25px; font-size:45px; line-height:50px; font-weight:500; letter-spacing: 0.01em; } h4 { font-family: var(--ka-h4-font-family); margin-top:25px; margin-bottom:10px; font-size:18px; line-height:28px; font-weight:400; letter-spacing:0.01em; /*color: var(--ka-font-blue);*/ text-transform: uppercase; } h5 { margin-top:30px; margin-bottom:15px; font-size:48px; line-height:56px; font-weight:600; letter-spacing:0.01em; } h6 { margin-top:35px; font-size:30px; line-height:36px; font-weight:700; color:var(--ka-bk-magenta); text-transform:uppercase; letter-spacing:0.0em; } .brother { font-family: var(--ka-menu-font-family); font-weight: 100; } .buttonsblue { display: flex; flex-direction: row; margin: 50px 0 0 0; } .button a, .buttonsblue a, section.bannerslider .textblock .buttons a.button, div.fdlts .swipercontainers .tmainswiper .swiper-slide .textbox .buttons a, div.fdlkonf .buttons a.border, div.fdlkonf .buttons a.back2ts, div.fdlsend a#sendtoback, div.fdlproductlist a.border, #main .textimg .textblock .buttons a, #main .textimg .linkblock .links .link a.bkyellow, #main .kalink .buttons a.button, .kaslogan .textblock .text .button a { position: relative; display: inline-flex; justify-content: center; align-items: center; border: 1px solid var(--ka-font-blue); padding: 14px 30px; margin: 0 20px 0 0; border-radius: 24px; font-size: 18px; line-height: 20px; font-size: 13px; line-height: 18px; font-weight: 600; font-family: var(--ka-menu-font-family); color: var(--ka-font-blue); letter-spacing: 0.05em; text-transform: uppercase; transition: all 750ms ease-in-out; } div.fdlkonf .buttons a.border, div.fdlkonf .buttons a.back2ts { display: inline-flex; min-width: 120px; } div.fdlkonf .buttons a.back2ts { margin: 0 0 10px 0; display: inline-flex; flex-direction: row; justify-content: center; align-items: center; } div.fdlkonf .buttons a.back2ts img { width: 20px; margin: 0 8px 0 0; } div.fdlproductlist a.border { margin: 0; } div.fdlkonf .buttons a.border.request { background-color: var(--ka-bksend); } div.fdlkonf .buttons a.border.request:hover { background-color: var(--ka-bksendhover); color: var(--ka-font-blue); } div.fdlkonf .buttons a.simple { display: flex; justify-content: center; justify-content: flex-start; margin: 20px 20px 0 0; color: var(--ka-font-blue); font-size: 14px; line-height: 16px; font-family: var(--ka-menu-font-family); } .button a:hover, .buttonsblue a:hover, section.bannerslider .textblock .buttons a.button:hover, div.fdlts .swipercontainers .tmainswiper .swiper-slide .textbox .buttons a:hover, div.fdlkonf .buttons a.border:hover, div.fdlkonf .buttons a.back2ts:hover, div.fdlsend a#sendtoback:hover, div.fdlproductlist a.border:hover, #main .textimg .textblock .buttons a:hover, #main .textimg .linkblock .links .link a.bkyellow:hover, #main .kalink .buttons a.button:hover, .kaslogan .textblock .text .button a:hover { color: var(--ka-font-hover); background-color: var(--ka-bk-gray); } .semibold { font-weight: 500; } /* body.home h1 { margin-bottom:15px; font-size:45px; line-height:52px; font-weight:bold; color:#b3b3b3; text-transform:uppercase; letter-spacing:3px; word-spacing:5px; } body.home h2 { display:block; margin-bottom:10px; font-size:30px; line-height:36px; font-weight:bold; color:#b3b3b3; } body.home h3 { display:block; margin-bottom:10px; font-size:30px; line-height:36px; color:#0075bf; } */ optgroup { padding-top:3px; padding-bottom:3px; } /* .small { font-size: 12px; line-height: 14px; } */ .line { margin: 0px 0 0px 0; content: ''; height: 18px; display: flex; background-image: url('/files/intern/common/linie.svg'); background-repeat: no-repeat; } a { text-decoration:none; color:var(--ka-font-magenta); transition: all .5s ease-in-out; } a:hover { /*color:var();*/ text-decoration:none; } table { margin-top:10px; } table thead { border-bottom:1px solid #9e9e9e; } td { padding:3px; } .ce_gallery > ul li.col_first { clear:none; } .ce_gallery .flex-images a { float:left; margin-right:0px; margin-bottom:20px; width:calc(33% - 10px); } .ce_gallery ul { list-style-type: none; } .ce_gallery ul li { padding: 0; } .ce_gallery ul li .image_container { position: relative; overflow: hidden; line-height: 1px; width: 100%; height: 100%; } .ce_gallery ul li .image_container a { line-height: 1px; } .ce_gallery ul li .image_container img { width: 100%; height: 100%; object-fit: cover; 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; } .ce_gallery ul li .image_container img:hover { transform: scale(1.05, 1.05); -ms-transform: scale(1.05, 1.05); -webkit-transform: scale(1.05, 1.05); } /* .ce_gallery ul.cols_2 li { padding-left: 7px; padding-right: 7px; margin-bottom: 14px; width: calc(50% - 14px); list-style-type: none; list-style-image: none; list-style: none; } .ce_gallery ul.cols_3 li { padding-left: 7px; padding-right: 7px; margin-bottom: 14px; width: calc(33.3% - 14px); list-style-type: none; list-style-image: none; list-style: none; } .ce_gallery ul.cols_4 li { padding-left: 7px; padding-right: 7px; margin-bottom: 14px; width: calc(25% - 14px); list-style-type: none; list-style-image: none; list-style: none; } .ce_gallery ul.cols_5 li { padding-left: 7px; padding-right: 7px; margin-bottom: 14px; width: calc(20% - 14px); list-style-type: none; list-style-image: none; list-style: none; } .ce_gallery ul.cols_6 li { padding-left: 2px; padding-right: 2px; margin-bottom: 14px; width: calc(16.6% - 4px); list-style-type: none; list-style-image: none; list-style: none; } .ce_gallery ul.cols_7 li { padding-left: 25px; padding-right: 25px; margin-bottom: 14px; width: calc(14% - 50px); list-style-type: none; list-style-image: none; list-style: none; } .ce_gallery.margin0 ul.cols_2 li { padding-left: 0px; padding-right: 0px; margin-bottom: 0px; width: 50%; list-style-type: none; list-style-image: none; list-style: none; } .ce_gallery.margin0 ul.cols_3 li { padding-left: 0px; padding-right: 0px; margin-bottom: 0px; width: 33.3%; list-style-type: none; list-style-image: none; list-style: none; } .ce_gallery.margin0 ul.cols_4 li { padding-left: 0px; padding-right: 0px; margin-bottom: 0px; width: 25%; list-style-type: none; list-style-image: none; list-style: none; } .ce_gallery.margin0 ul.cols_5 li { padding-left: 0px; padding-right: 0px; margin-bottom: 0px; width: 20%; list-style-type: none; list-style-image: none; list-style: none; } .ce_gallery.margin0 ul.cols_6 li { padding-left: 0px; padding-right: 0px; margin-bottom: 0px; width: 16.6%; list-style-type: none; list-style-image: none; list-style: none; } .ce_gallery.margin0 ul.cols_7 li { padding-left: 0px; padding-right: 0px; margin-bottom: 0px; width: 14%; list-style-type: none; list-style-image: none; list-style: none; } .ce_gallery .flex-images { display: flex; justify-content: space-between; } .ce_gallery .flex-images .item img { align-self: center; height: auto; } figure.image_container.kimg.float_left { margin-right:20px; margin-bottom:20px; } */ .ce_gallery.masonry { position: relative; display: flex; margin: 0px 0; } .ce_gallery.masonry ul { /* Masonry container */ column-count: 3; column-gap: 0em; } .ce_gallery.masonry > ul li.col_first { clear: left; } .ce_gallery.masonry li { /* Masonry bricks or child elements */ background-color: #eee; display: inline-block; margin: 0; padding: 0; width: 100%; height: auto; } .clear, #clear { float:none; clear:both; height:auto; } .center { width:100%; text-align:center; } .floatleft { float: left; } .col20 { width:20%; } .col25 { width:25%; } .col30 { width:30%; } .col33 { width:33.3%; } .col40 { width:40%; } .col50 { width:50%; } .col60 { width:60%; } .col66 { width:66.6%; } .col66 { width:80; } .col33m { float:left; margin-left:25px; width:calc(33.3% - 25px); } .col33line { float:left; width:calc(33.3% - 30px); } .col50m { float:left; margin-right:20px; width:calc(50% - 20px); } .col50mr { float:left; margin-right:0; margin-left:20px; width:calc(50% - 20px); } .col50line { float:left; width:calc(50% - 31px); } .col66m { float:left; margin-right:25px; margin-left:0; width:calc(66.6% - 25px); } .col66line { float:left; width:calc(66.6% - 32px); } .colline { width:2px; float:left; display:inline-block; margin-right:29px; margin-left:29px; padding-right:0; padding-left:0; border-right:2px solid #b3b3b3; } .dist20 { height:20px; display:block; } .dist25 { height:25px; display:block; } .dist30 { height:30px; display:block; } .dist50 { height:50px; display:block; } .dist100 { height:100px; display:block; } .dist150 { height:150px; display:block; } .distleft0 { position: absolute; left: 0; } .distleft10 { position: absolute; left: 10%; } .distleft20 { position: absolute; left: 20%; } .distleft25 { position: absolute; left: 25%; } .distleft33 { position: absolute; left: 33.3%; } .distleft40 { position: absolute; left: 40%; } .distright0 { position: absolute; right: 0; } .distright10 { position: absolute; right: 10%; } .distright20 { position: absolute; right: 20%; } .distright25 { position: absolute; right: 25%; } .distright33 { position: absolute; right: 33.3%; } .distright40 { position: absolute; right: 40%; } .vcenter { display: flex; flex-direction: column; justify-content: center; } .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; } .limit1200, .limit1200int { max-width:1200px; margin-right:auto; margin-left:auto; } .limit1000, .limit1000int { max-width:1000px; margin-right:auto; margin-left:auto; } .limit800, .limit800int { max-width:800px; margin-right:auto; margin-left:auto; } .maxw400, #main .maxw400, #main img.maxw400, #main .content-image.maxw400 { width: 100%; max-width:400px; } #main .content-image.maxw400 { display: flex; justify-self: end; } .maxw600, #main .maxw600, #main img.maxw600, #main .content-image.maxw600 { width: 100%; max-width:600px; } .maxw100p { width: 100%; } .boxblue { width:100%; padding-bottom:30px; background-color:var(--ka-bk-blue); } .boxblue * { color: var(--ka-font-white); } .verlaufblue { width:100%; padding-bottom:30px; background:linear-gradient(90deg,#000000,#1e3a58); } .boxgrey { width:100%; display:inline-block; background-color:var(--ka-bk-grey); } .boxgrey h1 { color: var(--ka-font-white); } .boxgrey.center { display: flex; justify-content: center; flex-direction:row; } .boxgrey.column { flex-direction:column; } .boxlightgrey { width:100%; display:inline-block; background-color:var(--ka-bk-lightgrey); } .boxlightgrey h1 { color: var(--ka-font-white); } .boxlightgrey.center { display: flex; justify-content: center; flex-direction:row; } .boxlightgrey.column { flex-direction:column; } .textblock .boxanthrazit { /*width:100%;*/ margin: 20px 0 40px 0; padding: 20px 30px; background-color:var(--ka-bk-anthrazit); } .textblock .boxanthrazit * { color: var(--ka-font-white); } .boxwhite { width:100%; display:inline-block; padding-top:20px; padding-bottom:30px; background-color:#ffffff; } .boxwhite.center { display: flex; justify-content: center; } .boxwhite.column { flex-direction:column; } .boxblack { width:100%; display:inline-block; padding-top:20px; padding-bottom:30px; background-color:#f0f0f0; } .boxblack.center { display: flex; justify-content: center; flex-direction:row; } .boxblack.column { flex-direction:column; } .boxwhite { width:100%; display:inline-block; padding-top:20px; padding-bottom:30px; background-color:#ffffff; } .boxwhite.center { display: flex; justify-content: center; } .boxwhite.column { flex-direction:column; } .boxlightgreen { width:100%; display:inline-block; background-color:var(--ka-bk-lightgreen); } .flexcontainer { display: -webkit-flex; display: -ms-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; flex-direction: row; } .flexcontainer.space-between { justify-content: space-between; } .flexcontainer.space-between .ce_hyperlink { position: relative; align-items: center; margin-right:0px; margin-bottom:20px; width:calc(33% - 10px); overflow: hidden; } .flexcontainer.column { flex-direction: column; } .flexcontainer > h3 { margin-left: 20px; color: var(--ka-font-blue); } .flexcontainer.space-between .ce_hyperlink * { overflow: hidden; line-height: 1px; } .flexcontainer.space-between .ce_hyperlink .linktitle { position: absolute; width: 100%; top: calc(50% - 15px); color: #ffffff; font-size: 30px; line-height: 34px; font-weight: 500; letter-spacing: 0.1em; text-transform:uppercase; pointer-events: none; text-align: center; } .flexcontainer.space-between .ce_hyperlink .image_container img { transform: scale(1.0, 1.0); -ms-transform: scale(1.0, 1.0); -webkit-transform: scale(1.0, 1.0); transition: all .5s ease-in-out; } .flexcontainer.space-between .ce_hyperlink:hover .image_container img { transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); } .flexcontainer.center { align-items: center; justify-content: center; text-align: center; } .flexbox { display: -webkit-flex; display: -ms-flexbox; display: flex; } .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.gap0 { grid-column-gap: 0px; grid-row-gap: 0px; } .grid.gap5 { grid-column-gap: 5px; grid-row-gap: 5px; } .grid.gap10 { grid-column-gap: 10px; grid-row-gap: 10px; } .grid.gap20 { grid-column-gap: 20px; grid-row-gap: 20px; } .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: 80px; } .grid.gap100 { grid-column-gap: 100px; grid-row-gap: 20px; } .grid.gap150 { grid-column-gap: 150px; grid-row-gap: 20px; } .ce_dma, .ce_ce_dma { width:100%; } .dlh_googlemap { margin-top:20px; width: 100% !important; height: 350px !important; padding-bottom: 0% !important; } .dlh_googlemap input { margin-right:5px; margin-left:0; padding-top:3px; padding-bottom:3px; } .dlh_googlemap .submit { width:40px; margin-right:0; margin-left:5px; } div.ce_toplink { text-align: center; bottom:5px; right:5px; position:fixed; z-index:941; } div.ce_toplink a { margin:0; padding:0; } div.ce_toplink img { width:40px; height:40px; } .ce_code { margin-top:10px; margin-bottom:10px; padding:5px 20px; background: linear-gradient(#ddd .0625em, #f6f7f7 .0625em) 0 -.0625em repeat; 1background-size: 100% 1.5em; 1overflow: auto; border: 1px solid #c9c9c9; border-radius: 3px; box-shadow: 0 1px 5px rgba(0,0,0,0.2); 1white-space: pre; word-wrap: normal; } code { width:100%; display:inline-block; } #main img, #main .content-image { max-width:100%; } #main .ce_image .image_container img { max-width:100%; width:100%; object-fit: cover; } .width100 { width: 100%; } .height100, .height100 .image_container, .height100 .image_container img { height: 100%; } .orange { color: var(--ka-font-magenta); } #main .mod_article { position: relative; overflow: visible; } .relative { position: relative; } #main .ce_player .video_container { width: 100%; position: relative; } #main .ce_player .video_container video { width: 100%; height: 100%; object-fit: cover; } .ce_youtube { position: relative; padding-bottom: 56.25%; width: 100%; height: auto; } .ce_youtube iframe { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100% !important; height: 100% !important; } #main .limit1400 .ce_youtube { position: relative; width: 100%; max-width: 1600px; padding-bottom: 56.25%; height: auto; margin-left: auto; margin-right: auto; } #main .ce_youtube.col50, #main .ce_youtube.col50m { float:left; width: 50%; padding-bottom: 0%; } #main .limit1400 .ce_youtube iframe, #main .limit1400 .ce_vimeo iframe { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100% !important; height: 100% !important; } #cboxOverlay { background-color: #fff; background-image: url('/files/intern/backgrounds/bk-weiss.png'); background-repeat: no-repeat; background-position: center; opacity: 1 !important; } #cboxContent { margin: 59px 50px 0 50px; background-color: rgba(0,0,0,0.01); } #cboxLoadedContent { border: 0; background-color: rgba(0,0,0,0.01); } #cboxCurrent { display: none !important; } #cboxPrevious, #cboxNext, #cboxClose { position: absolute; display: flex; top: calc(50% - 17px); left: auto; right: auto; width: 34px; height: 34px; background-repeat: no-repeat; background-repeat: no-repeat; background-position: center; background-size: 100%; transition: background-position 0.5s ease-in-out; cursor: pointer; z-index: 940; margin: 0; padding: 0; } #cboxPrevious { left:-38px; /* width: 25px; height: 25px; background-position: center left; */ background-position: center; background-image: url("/files/intern/common/links.svg"); } #cboxNext { right:-38px; /* width: 25px; height: 25px; background-position: center right; */ background-image: url("/files/intern/common/rechts.svg"); } #cboxPrevious:hover { background-position: center; } #cboxNext:hover { background-position: center; } #cboxClose { left: auto; right: 0; top: -44px; width: 30px; height: 30px; background-position: center; background-image: url("/files/intern/common/close.svg"); } #cboxClose:hover { background-position: center; /*background-image: url("/files/intern/common/fmd-close-hover.svg");*/ } #cboxTitle { top:-25px; left:50%; text-align: center; } .grid .textblock.right { position: relative; display: flex; flex-direction: column; } /* ****************************************************************************************************************** */ /* --- header ---------- -------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ #header { position: relative; width:100%; /*height:150px;*/ height:105px; top:0; position:fixed; z-index:940; margin: 0; padding: 0; /*background-color: rgba(0, 0, 0, 0.001);*/ /*background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.01));*/ z-index: 948; transition: all 0.5s ease-in-out; } #header #mainnav.small { top:-120px; } body.home #header { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.01)); } #header .shadow { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.5); background-color: rgba(0, 0, 0, 0.5); z-index: -1; } #header .inside { width: 100%; height: 100%; padding:0; margin: 0; position: relative; } #header .background { width: 100%; height: 100%; display: inline-block; /*background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));*/ /*background: rgba(19, 24, 32, 0.7);*/ /*background: rgba(255, 255, 255, 0.7);*/ /*background:var(--ka-bk-color);*/ display: none; } #header.small { /* height:1px; -moz-transition: height 1s ease-in-out; -webkit-transition: height 1s ease-in-out; -o-transition: height 1s ease-in-out; transition: height 1s ease-in-out; */ } #header .HeaderLogo { position: absolute; left:30px; /*top:45vh;*/ top:20px; /*transform: translate(0, -50%);*/ transition: width 2s ease-in-out, left 1s ease-in-out; z-index:940; display: flex; align-items: center; justify-content: center; overflow: visible; } #header .HeaderLogo a { display: flex; flex-direction: column; } #header .HeaderLogo img { padding: 0; width: 200px; height:auto; transition: width 1s ease-in-out; } #navanker { position: absolute; left: auto; right:10px; top:0px; display: flex; flex-direction: column; /* -webkit-transition: width 1s ease-in-out, top 1s ease-in-out; transition: width 1s ease-in-out, top 1s ease-in-out; */ } #navanker div.hamburger, #navanker a { width: 90px; height:90px; display: flex; flex-direction: column; font-weight: 500; justify-content: center; align-items: center; margin: 0 0 4px 0; color: #1b1b1d; } #navanker a span { margin: 5px 0 0 0; font-size: 14px; } #navanker .menu { -webkit-transition: all 1500ms ease-in-out; -moz-transition: all 1500ms ease-in-out; -o-transition: all 1500ms ease-in-out; transition: all 1500ms ease-in-out; } #navanker div.hamburger, #navanker .menu a { /*background-color: var(--ka-bk-menuorange);*/ background-color: #000; color: #fff; font-size: 14px; } #navanker div.menu:hover ul.ankers { /* visibility: visible; opacity: 1; */ height: auto; max-height: 700px; } /* #navanker div.menu:hover ul.ankers li { transform: rotate3d(1, 0, 0, 0deg); } */ #navanker ul.ankers { display: flex; flex-direction: column; margin: 0; padding: 0; height: 0; max-height:0; overflow: hidden; /* visibility: hidden; opacity: 0; */ /*transition: visibility 0s, opacity 0.5s linear, 2s linear;*/ transition: max-height 0.5s linear; } #navanker ul.ankers li { margin: 0; padding: 0; list-style-type: none; /* transform: rotate3d(1, 0, 0, 90deg); transition:1.5s ease-in-out; */ } #navanker .ankers a { border-radius: 0px; } #navanker a { margin-left: 0px; /*background-color: var(--ka-bk-menuorange);*/ background-color: rgba(242,106,56,0.9); } #navanker img { width: 20px; height: 20px; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } #navanker .menu a:hover img { width: 34px; height: 34px; } /* ****************************************************************************************************************** */ /* --- footer ------------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ #footer { width: 100%; position:relative; display:flex; margin:0; padding:60px 0 20px 0; background-color: var(--ka-bk-grey); /* height: auto; */ opacity: 1; top:0; transition: all 100ms ease-out; pointer-events: inherit; } body.konfigurator #footer { position: absolute; top: auto; bottom: 0; opacity: 0; height: auto; } body.konfigurator #footer.disable { margin:0; padding:0; /*display: none;*/ bottom: 0px; pointer-events: none; height: 0; /* opacity: 1; */ } #footer * { /*color: #fff; */ } #footer .inside { position: relative; width: 100%; display:flex; flex-direction: column; justify-content: center; max-width:1200px; margin: 0 auto; padding:0; } #footer .mod_footer_navi ul { width: 100%; display: flex; flex-direction: row; justify-content: center; margin-left: 0; padding-left: 0; } #footer .mod_footer_navi li { display: block; padding: 0; margin: 0; float: left; background-image: none; } #footer .mod_footer_navi li strong, #footer .mod_footer_navi a { padding:0 10px; text-transform: uppercase; font-size: 14px; font-weight: 300; font-family: var(--ka-menu-font-family); } #footer a:hover, #footer .mod_footer_navi a:hover, #footer .mod_footer_navi a:hover span, #footer .inside .column .sponsored a:hover { } #footer .mod_footer_navi { display: flex; align-items: flex-start; margin: 10px 0 0 0; } /* ****************************************************************************************************************** */ /* --- mainmenu ----------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ @media screen and (min-width: 1060px) { #navmobil { display:none; } #mainnav { display: flex; height:62px; left:50%; transform: translate(-50%, 0); top:40px; position:absolute; overflow:visible; margin:0; transition: top 1s ease-in-out; z-index: 940; min-width: 885px; } #header.small #mainnav { /* top:-40px; top:14px; */ } .mod_navigation a:hover { text-decoration:none; } .mod_navigation span.active, .mod_navigation li.sibling, .mod_navigation li.trail { margin:0; padding:0; } .mod_navigation ul.level_1 span.active, .mod_navigation ul.level_1 li.sibling, .mod_navigation ul.level_1 li.trail { /*padding-bottom: 0px;*/ } .mod_navigation li { position:relative; padding: 0; float:left; list-style-type:none; } .mod_navigation li a, .mod_navigation li.active strong { position:relative; float:left; margin:0; padding:2px 20px 45px 20px; text-align:center; list-style-type:none; font-family: var(--ka-menu-font-family); font-weight:600; font-size: 14px; line-height: 20px; letter-spacing:0.13em; text-transform: uppercase; transition: color 750ms ease-in-out; } body.home .mod_navigation li a, body.home .mod_navigation li.active strong { color: #fff; } .mod_navigation li.active strong { /*color:var(--ka-bk-white);*/ } .mod_navigation li a span { margin:0; padding:0; } body.home .mod_navigation li a:hover, .mod_navigation li a:hover, .mod_navigation li a.sfhover { color:var(--ka-font-hover); } .mod_navigation ul { margin:0; padding:0; list-style-type:none; } .mod_navigation li ul { width:269px; bottom:0; left:0; right:0; top:60px; position:absolute; display:none; padding-top:0px; /*background-color:rgba(53, 62, 58,.9);*/ } .mod_navigation li ul li { display: block; margin:0; padding:0; /* border-bottom:1px solid var(--ka-font-magenta); border-radius:0; */ } .mod_navigation li ul li a, .mod_navigation li ul li.active strong { width:264px; margin:0; padding:11px 0 11px 15px; text-align:left; background-color:rgba(255, 255, 255,.9); color:#000; /* Farbton für den Link im Normalzustand */ background-image:none; -webkit-transition: color 1s ease-out; /* WebKit */ -moz-transition: color 1s ease-out; /* Firefox */ -o-transition: color 1s ease-out; /* Opera */ transition: color 1s ease-out; /* Standard */ } .mod_navigation li ul li a:hover { /*color:var(--ka-font-darkcolor);*/ color:#111; -webkit-transition: color 500ms ease-in-out; -moz-transition: color 500ms ease-in-out; -o-transition: color 500ms ease-in-out; transition: color 500ms ease-in-out; } .mod_navigation li ul li.active strong { background-color:rgba(255, 255, 255,.95); font-weight: 600; background-image:none; color:#000; } .mod_navigation li ul ul { left:200px; position:absolute; top:0; z-index: 940; } .mod_navigation li:hover ul { display:block; } .mod_navigation ul li:hover ul ul { display:none; } .mod_navigation ul ul li:hover ul { display:block; } } .mod_changelanguage { position: relative; overflow: visible; } .mod_changelanguage ul { margin:0; padding:0; list-style-type:none; display: flex; flex-direction: column; } .mod_changelanguage li { margin:0; padding:0; list-style-type:none; display: none; } .mod_changelanguage li a, .mod_changelanguage li strong { position:relative; float:left; margin:0; padding:2px 20px 2px 20px; text-align:center; list-style-type:none; font-family: var(--ka-menu-font-family); font-weight:600; font-size: 14px; line-height: 20px; letter-spacing:0.13em; text-transform: uppercase; transition: color 750ms ease-in-out; } body.home .mod_changelanguage li a, body.home .mod_changelanguage li strong { color: #fff; } .mod_changelanguage li.active { display: block; cursor: pointer; order: -1; } .mod_changelanguage:hover li { display: block; } .mod_changelanguage li a:hover, body.home .mod_changelanguage li a:hover, .mod_changelanguage li strong:hover, body.home .mod_changelanguage li strong:hover { color: #e9ac3d; } #footer .mod_changelanguage ul, .mobile_menu .mod_changelanguage ul{ flex-direction: row; justify-content: center; } #footer .mod_changelanguage li, .mobile_menu .mod_changelanguage li { position: relative; display: block; padding: 0.2em 0.3em; } #footer .mod_changelanguage li:not(:last-child)::after, .mobile_menu .mod_changelanguage li:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background-color: #000; opacity: 1; } .mobile_menu .mod_changelanguage li { padding: 0.2em 0.6em; } .mobile_menu .mod_changelanguage li:not(:last-child)::after { background-color: #fff; width: 2px; height: 15px; } #footer .mod_changelanguage li a, #footer .mod_changelanguage li strong, .mobile_menu .mod_changelanguage li a, .mobile_menu .mod_changelanguage li strong { font-family: var(--ka-menu-font-family); color: inherit !important; padding: 0; font-weight: normal; } /* ****************************************************************************************************************** */ /* --- Limits ------------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ .contentlimit, .contentlimitint { width:100%; max-width:calc(var(--ka-gl-hlwidth) + 2 * var(--ka-gl-padleft)); margin-right:auto; margin-left:auto; } .content { position: relative; 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: 50px 0 50px var(--ka-gl-pad);*/ } /* margin: 0 0 0 var(--ka-globalmarginleft); width: calc(100% - var(--ka-globalmarginleft)); */ .headlinelimit, .headlinelimitint { width:100%; max-width:var(--ka-gl-hlwidth); margin-right:auto; margin-left:auto; } .textlimit, .textlimitint { width:100%; max-width:var(--ka-gl-textwidth); margin-right:auto; margin-left:var(--ka-cr-pad); } .limit1400marginleft { /*max-width: calc(var(--ka-desktopwidth) - var(--ka-globalmarginleft));*/ } .testtext { height: 5px; background-color: var(--ka-blue); } .testheadline { height: 5px; background-color: var(--ka-beige); } .testcontent { height: 5px; background-color: var(--ka-brown); } .contentright { /*border: 1px solid #f00;*/ } /* ****************************************************************************************************************** */ /* --- ScrollVisible ------------------------------------------------------------------------------------------------ */ /* ****************************************************************************************************************** */ .scroll { transition: all 1.5s ease-in-out; } /* Einblenden */ .scroll.sc-opacity { transition: all 1.2s ease-in-out; opacity: 0.1; } .scroll.sc-opacity.scrollinout { opacity: 0.99; } .scroll.sc-opacity-fast { transition: all 0.8s ease-in-out; opacity: 0.1; } .scroll.sc-opacity-fast.scrollinout { opacity: 0.99; } /* Blur */ /* .scroll.sc-opacity { transition: all 1.5s ease-in-out; filter: blur(5px); filter: blur(0); } .scroll.sc-opacity.scrollinout { filter: blur(0px); } */ /* nach oben */ .scroll.sc-up { transition: all 1.5s ease-in-out; margin-top: 80px !important; } .scroll.sc-up.ma0 { margin-top: 20px !important; } .scroll.sc-up.ma1 { margin-top: 40px !important; } .scroll.sc-up.ma2 { margin-top: 60px !important; } .scroll.sc-up.ma3 { margin-top: 80px !important; } .scroll.sc-up.scrollin { margin-top: 0 !important; } section.kalinks .content .links .link.scroll.sc-up.scrollin { margin-top: 4px !important; } /* Einblenden, Vergrössern, nach oben */ .scroll.sc-grow-opacity-up { transition: all 1.5s ease-in-out; margin: 40px 0 0 0; /*transform: rotateX(15deg);*/ /*transform: scale(90%);*/ opacity: 0.075; } .scroll.sc-grow-opacity-up.scrollthirdin { /*scrollinout*/ margin: 0px 0 0 0; /*transform: rotateX(0deg);*/ /*transform: scale(100%);*/ opacity: 0.99; } /* Abwärtskompa */ .scrolling { transition: all 1.5s ease-in-out; /*margin: 40px 0 0 0;*/ /*transform: rotateX(15deg);*/ /*transform: scale(90%);*/ /*opacity: 0.75;*/ } .scrolling.scrollinout { margin: 0px 0 0 0; /*transform: rotateX(0deg);*/ /*transform: scale(100%);*/ opacity: 0.99; } /* Textbox am Tablet einblenden */ .scroll.sc-opacity.touchdevice .textbox.sc-tab { transition: all 2s ease-in-out !important; opacity: 0.1 !important; background-color: rgba(50,50,50,0.01) !important; } .scroll.sc-opacity.touchdevice.scrollinout .textbox.sc-tab { opacity: 0.99 !important; background-color: rgba(50,50,50,0.5) !important; } .scroll.gapgrow, section.kalinks.diffrows .grid.fr3.scroll.gapgrow { grid-column-gap: 50px; grid-row-gap: 50px; } .scroll.gapgrow.scrollinout { grid-column-gap: 40px; grid-row-gap: 40px; } section.kalinks.diffrows .grid.fr3.scroll.gapgrow.scrollinout { grid-column-gap: 20px; grid-row-gap: 20px; } /* .letter { display: inline-block; font-size: 48px; line-height: 60px; animation: rotateX 3s infinite linear; transform-origin: center center; } @keyframes rotateX { from { transform: rotateX(0deg); } to { transform: rotateX(360deg); } } */ /* .letter-container { white-space: nowrap; overflow: hidden; font-size: 24px; animation: rotateX 3s infinite linear; transform-origin: center center; } .letter { display: inline-block; margin-right: 5px; animation: rotateY 3s infinite linear; } @keyframes rotateX { from { transform: rotateX(0deg); } to { transform: rotateX(360deg); } } @keyframes rotateY { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } */ /* ****************************************************************************************************************** */ /* --- backgrounds -------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ .ce_headline, .ce_text, .ce_accordion { position: relative; z-index: 933; } .postop20.posright { position: absolute; top: 20px; left: auto; right: 20px; display: flex; text-align: right; } .postop { position: absolute; top: 0; bottom: auto; width: 100%; height: auto; z-index: 930; } .movetop120 { position: relative; top: -120px; background-color: #fff; padding: 40px 80px; margin-bottom: -120px; } .movetop120 .ce_text h1 { margin-bottom: 25px; } .posbottom { position: absolute; top: auto; bottom: 0; width: 100%; height: auto; /*z-index: -1;*/ } .p50p { top: -0px; transform: translate(0, -50%); } .m40p { top: auto; bottom: 0px; transform: translate(0, 50%); } .m50p { top: auto; bottom: -50%; } .m40p img, .m50p img { width: 100%; } div.scrollbk { /* position: absolute; top: -220%; left: 0; width: 100%; height: 350%; z-index: -1; overflow: visible; */ margin: 0; padding: 0; position: absolute; top: -60%; top: calc(-1 * 66vh); left: 0; width: 100%; /* background-size: 100% 100%; background-size: cover; background-size: 100%; */ background-size: 100% 80%; height: 200%; /* top: 0; background-color: rgba(0,0,0,0.2); height:1000px; */ z-index: -1; overflow: hidden; } .zindex951 { z-index: 931; position: relative; } /* ****************************************************************************************************************** */ /* --- Accordions global -------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ .ce_accordion { position: relative; display: flex; flex-direction:column; margin-top: 50px; margin-bottom:20px; border-bottom: 1px solid var(--ka-bk-grey); } /* .ce_accordion .toggler { display: block; background-image: url('/files/intern/common/plus.svg'); background-repeat: no-repeat; background-position: calc(100% - 10px) center; background-size: 15px; cursor: pointer; margin: 15px 0 0px 0; padding: 15px 0 0 0; border-top: 1px solid var(--ka-font-color); } .ce_accordion .accordion { margin: 15px 0 10px 0; } */ .ce_accordion .toggler { /* font-size:var(--ka-font-size); line-height: var(--ka-line-height); */ font-weight:400; text-transform: none; color:var(--ka-fonth5-color); text-decoration: none; } .ce_accordion .toggler { /*font-weight:600;*/ } .ce_accordion .toggler { display: flex; border-top: 0px solid var(--ka-font-color); min-height: 28px; padding: 25px 0 25px 50px; width: calc(100% - 50px); background-image: url('/files/intern/common/down.svg'); background-size: 16px; background-repeat: no-repeat; background-position: 10px center; /* transition: padding 0.75s; transition: background-position 0.75s; */ text-align: left; align-items: left; justify-content: left; border-bottom: 1px solid var(--ka-bk-grey); margin:0px 0 0px 0; border-top: 1px solid var(--ka-bk-grey); border-bottom: 0px solid var(--ka-bk-grey); } .ce_accordion .toggler { } .ce_accordion .toggler.active { background-image: url('/files/intern/common/page-up-over.svg'); width: calc(100% - 50px); } .ce_accordion .accordion { margin:0px 0 10px 0; padding: 0px 0px 8px 50px; /*border-bottom: 1px solid var(--ka-border-green);*/ /*background-color: var(--ka-bk-lightgrey);*/ } .content-accordion { border-bottom: 1px solid var(--ka-bk-grey); } .handorgel__header { margin: 0 0 20px 0; padding: 20px 0 0 0; border-top: 1px solid var(--ka-bk-grey); } .handorgel__header:nth-child(1) { border-top: 0px solid var(--ka-bk-grey); } .handorgel__header button, div.toggler { width:100%; min-height:32px; background-image:url("/files/intern/common/down.svg"); background-position:10px center; background-repeat:no-repeat; background-size: 20px; color:var(--ka-font-color); font-weight: 600; padding: 0 0 0 50px; width: calc(100% - 50px); } body.faq .handorgel__header button, div.toggler { background-position:10px center; } .handorgel__header.handorgel__header--open button, div.toggler.active { width:100%; background-image:url("/files/intern/common/page-up-over.svg"); background-position:10px center; background-repeat:no-repeat; } body.faq .handorgel__header.handorgel__header--open button { background-position:left center; } div.content-accordion button, div.toggler button { background-color: var(--ka-bk-colorwhite); color:var(--ka-font-color); border: none; } .handorgel__content__inner { padding: 00px 50px 20px 50px; } div.content-accordion .handorgel__content { background-color: var(--ka-bk-white); margin: 0px 0 0px 0; padding: 0px 0; border-top: 0px solid #eee; border-bottom: 0px solid var(--ka-bk-grey); } div.content-accordion .handorgel__content * { background-color: var(--ka-bk-colordarkgrey); color:var(--ka-font-color); } /* ****************************************************************************************************************** */ /* --- swiperslider ------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ .swiper-container { /* */ max-width: 100%; overflow: hidden; position: relative; } .swiper-wrapper { /*max-width: 100%;*/ /*transition: height 1s ease-in-out; beware!!! dann slidet er nicht weiter*/ } .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after, .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { content: '' !important; } .swiper-button-prev, .swiper-button-next { position: absolute; top: calc(50% - 0px); left: auto; right: auto; width: 26px !important; height: 26px !important; background-repeat: no-repeat; background-color: rgba(0,0,0,0.0); background-repeat: no-repeat; background-position: center; background-size: 100%; transition: all 0.5s ease-in-out; cursor:pointer; z-index: 931; } .swiper-button-prev { left: 10px; background-image:url("/files/intern/common/links.svg"); } .swiper-button-next { right: 10px; background-image:url("/files/intern/common/rechts.svg"); } .swiper-button-prev:hover { background-image:url("/files/intern/common/links-over.svg"); } .swiper-button-next:hover { background-image:url("/files/intern/common/rechts-over.svg"); } /* ****************************************************************************************************************** */ /* --- Slider1 ----------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ section.kaslider1 { width: 100%; position: relative; background-color: var(--ka-white); padding: 0px 0 50px 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 { position: relative; display: flex; flex-direction: column; overflow: hidden; justify-content: center; height: 66px; 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 { 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 { 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: 10px 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; } /* ****************************************************************************************************************** */ /* --- kaepisodenslider ------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ section.kaepisodenlider { position: relative; top: calc(-3 * var(--ka-pxwidth)); height: auto; display: block; margin: 0px 0 0px 0; padding: 0 0 00px 0; transition: height 1.0s; overflow: visible; /*background-color: #f00;*/ } section.kaepisodenlider .smooth { position: relative; padding: 0 0 100px 0; } section.kaepisodenlider .bk { position: absolute; top: calc(3 * var(--ka-pxwidth)); width: 100%; height: calc(100% - 3 * var(--ka-pxwidth)); display: flex; padding: 0; background-color: var(--ka-bk-lightgrey); z-index: -1; } /*section.kaepisodenlider .swiper-container,*/ section.kaepisodenlider .swiper-wrapper, section.kaepisodenlider .swiper-slide { overflow: visible; } section.kaepisodenlider .swiper-container { position: relative; padding-top: calc(2 * var(--ka-pxwidth)); } section.kaepisodenlider .swiper-slide .container_img1 { position: relative; display: flex; justify-content: flex-start; width: calc(100% - var(--ka-pxwidth)); height: calc(100% - var(--ka-pxwidth)); padding: 0 var(--ka-pxwidth) var(--ka-pxwidth) 0; /* BG191124 */ /* width: calc(100% - 0); height: calc(100% - 0); padding: 0; */ height: calc(100% - 0); padding: 0 var(--ka-pxwidth) 0 0; min-height:250px; background-color: #fff; } section.kaepisodenlider .swiper-slide .container_img1 .image_container, section.kaepisodenlider .swiper-slide .container_img1 .video_container { position: relative; display: flex; width: 100%; /* BG191124 */ } section.kaepisodenlider .swiper-slide .container_img1 .image_container img.image { z-index: 0; } section.kaepisodenlider .swiper-slide .container_img1 .video_container .ce_youtube { position: relative; padding-bottom: 56.25%; width: calc(100% - var(--ka-pxwidth)); height: calc(100% - var(--ka-pxwidth)); width: 100%; height: auto; } section.kaepisodenlider .swiper-slide .container_img1 .matrix { position: absolute; left: auto; right: 0; z-index: +2; top: calc(-1.5 * var(--ka-pxwidth)); width: calc(3 * var(--ka-pxwidth)); top: calc(-2 * var(--ka-pxwidth)); width: calc(4 * var(--ka-pxwidth)); } section.kaepisodenlider .textblock { position: relative; padding: 30px var(--ka-pxwidth) 20px 0px; width: calc(100% - var(--ka-pxwidth)); } section.kaepisodenlider h4.headline, section.kaepisodenlider .text h3.headline, section.kaepisodenlider .text { display: flex; justify-content: flex-start; align-items: flex-start; text-align: left; flex-direction: column; } section.kaepisodenlider h4.headline { /* color: #000; */ font-size: 20px; line-height: 24px; } section.kaepisodenlider .text { } section.kaepisodenlider .text h3 { color: #000; } .grid.fr3.imgw50 .mod_subscribe { position: relative; display: flex; flex-direction: column; align-items: center; } .grid.fr3.imgw50 .mod_subscribe form { position: relative; display: flex; justify-content: center; align-items: center; background-color: #fff; border-radius: 5px; padding: 20px; width: 250px; height: 50px; } .grid.fr3.imgw50 .mod_subscribe form .widget { display: block; float: left; margin: 0px 0 0 0; } .grid.fr3.imgw50 .mod_subscribe form .widget-text { width:calc(100% - 36px); } /* .grid.fr3.imgw50 .mod_subscribe form .widget.widget-captcha { position: absolute; top: 40px; display: flex; flex-direction: column; margin: 0px 0 0 0; } */ .grid.fr3.imgw50 .mod_subscribe form input.text, .grid.fr3.imgw50 .mod_subscribe form .submit { max-width: 100%; margin: 0; } .grid.fr3.imgw50 .mod_subscribe form input.text { width:calc(100% - 20px); padding:8px 10px 8px 10px; background-color: #efefef; color:#000; font-weight: 500; text-transform: uppercase; } .grid.fr3.imgw50 .mod_subscribe form .submit { width: 36px; height: 36px; padding:3px 3px; background-color: var(--ka-bk-magenta); background-image: url('/files/intern/common/rechts-w.svg'); background-repeat: no-repeat; background-position: center center; background-size: 40%; content:""; text-indent: -999em; } .grid.fr3.imgw50 .mod_subscribe form .submit:hover { background-color: var(--ka-bk-magentahover); } .grid.fr3.imgw50 .mod_subscribe h4, .grid.fr3.imgw50 .ce_hyperlink h4 { font-size: 18px; line-height: 22px; } /* ****************************************************************************************************************** */ /* --- textrandomimg ------------------------------------------------------------------------------------------------ */ /* ****************************************************************************************************************** */ section.textrandomimg { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 250px 0 250px 0; } section.textrandomimg .textblock.bottom { position: relative; display: flex; margin: 50px 0 0 0; padding: 50px 0 0 0; border-top: 1px solid var(--ka-font-color); } section.textrandomimg .imgblock { position: absolute; left: 50%; top: 0; width: 100%; height: 100%; z-index: 1; max-width: 1920px; margin: 0 auto; transform: translate(-50%, 0); pointer-events: none; z-index: -1; } section.textrandomimg .imgblock .image_container { position: absolute; left: 0; top: 0; max-width: 350px; /*max-height: 350px;*/ } section.textrandomimg .imgblock .image_container.no_1 { position: absolute; left: 70%; top: 0; } section.textrandomimg .imgblock .image_container.no_2 { position: absolute; left: auto; right: 0; top: 10%; z-index: +1; } section.textrandomimg .imgblock .image_container.no_3 { position: absolute; left: 0%; top: 30%; } section.textrandomimg .imgblock .image_container.no_4 { position: absolute; left: 20%; top: auto; bottom: 0; } section.textrandomimg .imgblock .image_container.no_5 { position: absolute; left: 40%; top: auto; bottom: 0; z-index: +1; } section.textrandomimg .imgblock .image_container.no_6 { display: none; } section.textrandomimg .imgblock .image_container a { width: 100%; height: 100%; display: flex; } section.textrandomimg .imgblock .image_container img { width: 100%; height: 100%; object-fit: cover; } /* ****************************************************************************************************************** */ /* --- kateamslider ------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ section.kateamslider { position: relative; height: auto; display: block; margin: 40px 0 40px 0; padding: 0 0 0px 0; transition: height 1.0s; overflow: visible; } section.kateamslider .textblock { position: relative; width: 100%; margin: 0 0 50px 0; } section.kateamslider .textblock .right { position: relative; width: 100%; display: flex; flex-direction: column; align-items: flex-end; } section.kateamslider .textblock .notfall { margin: 20px 0 0 0; } section.kateamslider .textblock a.btn { display: inline-block; padding: 8px 20px; margin: 5px 0; background-color: var(--ka-bk-white); transition: all 0.5s ease-in-out; /* font-size: 20px; */ font-weight: 500; letter-spacing: 0.005em; border: 2px solid var(--ka-font-color); } section.kateamslider .textblock .notfall * { color: var(--ka-font-colorred); } section.kateamslider .textblock .notfall a.btn { border: 2px solid var(--ka-font-colorred); } section.kateamslider > div.tsinside { position: relative; overflow: visible; } section.kateamslider .smooth { position: relative; height: 100%; max-height: 101%; min-height: 101%; display: block; flex-direction: column; margin: 0; padding: 0; } section.kateamslider.animated { min-height: 100%; max-height: 100%; height: 101%; transition: height 1.0s; } section.kateamslider .swiperbox { margin-left: auto; margin-right: 0; max-width: calc(100% - (100% - 1200px) / 2); } section.kateamslider .swiper-container { position: relative; width: 100%; max-width: 100%; height: auto; margin: 50px auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; } section.kateamslider .swiper-wrapper { position: relative; width: 100%; height: auto; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box; /*align-items: flex-start;*/ } section.kateamslider .swiper-button-prev, section.kateamslider .swiper-button-next { } section.kateamslider .swiper-button-prev { } section.kateamslider .swiper-button-next { } section.kateamslider .swiper-slide { display: flex; /*justify-content: center;*/ flex-direction:column; flex-shrink: 0; height: auto; transition: all 0.5s ease-out; transition-property: transform; /*max-width: 200px;*/ } section.kateamslider .swiper-slide .name, section.kateamslider .swiper-slide .position { font-weight: 600; } #main section.kateamslider .swiper-slide img { } section.kateamslider .swiper-slide .np { position: relative; display: flex; flex-direction: column; margin: 20px 0 0 0; } section.kateamslider .swiper-slide .kontakt { position: relative; display: flex; flex-direction: column; margin: 30px 0 0 0; } section.kateamslider .swiper-slide .msdesktop { display: flex; flex-direction: column; width: 100%; } section.kateamslider .swiper-slide .msmobile { display: none; } section.kateamslider .leftblock, section.kateamslider .rightblock { position: relative; width: 100%; display: flex; flex-direction: column; } section.kateamslider .swiper-slide .rightblock, section.kateamslider .swiper-slide .textblock { justify-content: flex-start; align-items: flex-start; } section.kateamslider .rightblock { padding: 100px 100px; width: calc(50% - 200px); } section.kateamslider .rightblock p { color: #000; } section.kateamslider .swiper-wrapper, section.kateamslider .swiper-slide, section.kateamslider .leftblock { overflow: visible; } section.kateamslider .topblock { position: relative; display: inline-block; display: block; display: flex; } section.kateamslider .topblock .images { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; display: block; } section.kateamslider .topblock .images .image { position: relative; width: 100%; height: 100%; min-height: 600px; display: flex; justify-content: center; } section.kateamslider .topblock .images .image img, section.kateamslider .topblock .images .image video { width: 100%; height: 100%; object-fit: cover; } section.kateamslider .swiper-slide.slidestart .topblock .images .image img { filter: blur(5px); /*filter: pixelate(20px);*/ } /* section.kateamslider .topblock .images .grafikimage { position: absolute; left: auto; right: -50%; top: 60%; width: 150%; height: auto; z-index: -2; } */ section.kateamslider .bottomblock { position: relative; } section.kateamslider .bottomblock .scrollblock { position: relative; background-color: #fff; padding: 40px 80px 0 80px; display: inline-block; top: -120px; } section.kateamslider .swiper-slide .textblock { /* background-color: var(--ka-bk-lightgrey); text-align: center; display: flex; flex-direction:column; justify-content: center; align-items: center; */ padding: 0px 0 0px 0; } section.kateamslider .swiper-slide .textblock, section.kateamslider .swiper-slide .socials { max-width: 550px; } section.kateamslider .swiper-slide .textblock h2 { color: #000; margin: 0; } section.kateamslider .textblock .headline { /* margin: 15px 0 15px 0; font-family: var(--ka-font-family-menu); font-size: 20px; line-height: 24px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; */ } section.kateamslider .textblock .text { margin: 0 0 0px 0; /* text-transform: none; font-size: 18px; line-height: 22px; color: #7c7c7c; letter-spacing: 0.025em; font-weight: 400; */ } section.kateamslider .swiper-slide { /*background-color: #f00;*/ } section.kateamslider .textblock span { /*border-bottom: 1px solid var(--ka-font-color);*/ } section.kateamslider .swiper-slide .textblock .button { margin: 20px 0 20px 0; } section.kateamslider .swiper-slide .textblock .button a { background-color: var(--ka-bk-middleblue); display: block; padding: 10px 20px 8px 20px; min-width: 180px; text-align: center; color: #fff; text-transform: uppercase; line-height: 16px; } section.kateamslider .swiper-slide .socials { /* position: absolute; top: auto; bottom: 120px; */ margin: 30px 0 0 0; display: flex; flex-direction: column; } section.kateamslider .swiper-slide .socials { display: flex; flex-direction: row; } section.kateamslider .swiper-slide .socials .social { display: flex; align-items: center; margin: 0 10px 0 0; } section.kateamslider .swiper-slide .socials .social a { display: flex; flex-direction: row; } section.kateamslider .swiper-slide .socials .social img { width: 42px; height: 42px; transition: all 0.2s ease-in-out; } section.kateamslider .swiper-slide .socials .social img:hover { width: 48px; height: 48px; } section.kateamslider .swiper-slide .socials .social a span { display: flex; margin: 0 0 0 12px; align-items: center; } section.kateamslider .swiper-slide .imgblock { /*height: 100%;*/ } section.kateamslider .swiper-slide .imgblock img { width: 100%; height: 100%; object-fit: cover; } section.kateamslider .swiper-slide.swiper-slide-active, section.kateamslider .swiper-slide.swiper-slide-duplicate-active { opacity: 1; } section.kateamslider .swiper-slide.swiper-slide-prev, section.kateamslider .swiper-slide.swiper-slide-next { opacity: 0.9; } /* ****************************************************************************************************************** */ /* --- MAP Startseite ----------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ .mapbox { position: relative; width: 100%; margin:0px 0; display: block; } .mapbox .mapcanvas { margin: 0px auto 0 auto; max-width: calc(100% - 0px); height: 100%; display: block; } .mapbox .mapcanvas #mapid { width: 100%; height: 550px; } .mapbox .map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index:0; } .mapbox #mapid .leaflet-control-container { /*display: none;*/ } .leaflet-tooltip.class-tooltip { background: rgba(255,255,255,0.7) !important; border: 0px solid #000; padding: 5px 15px 3px 15px; font-family: Amatic SC; letter-spacing:0.001em; text-transform: uppercase; font-weight: 400; box-shadow: 0 0px 0px rgba(0,0,0,0.5) !important; color: #000; font-size: 16px; font-family: var(--ka-hx-font-family); } #mapid .leaflet-popup { width:400px !important; /* height:400px !important; min-width:400px !important; min-height:400px !important; max-width:400px !important; max-height:400px !important; */ margin:0; padding: 0; } #mapid .leaflet-popup-content { line-height: 1px; margin: 0; width: 100%; height: 100%; } #mapid .leaflet-popup div.content { position: relative; margin: 0; width: 100%; height: 100%; } #mapid .leaflet-popup div.content img { width: 100%; margin: 0; padding: 0; } #mapid .leaflet-popup div.content div.text { margin: 0; width:calc(100% - 20px); padding:10px 10px; background-color:rgba(255,255,255,0.8); /*color:#ac5e0c;*/ color:#000; font-family: Arial; text-transform: uppercase; font-size: 14px; font-weight: 600; line-height: 16px; } /* ****************************************************************************************************************** */ /* --- Slogan -------------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ .kaslogan { position: relative; display: flex; min-height: 400px; } .kaslogan .imgblock { display: flex; width: 100%; height: auto; } .kaslogan .imgblock img { width: 100%; height: 100%; object-fit: cover; } .kaslogan .imgblock img.desktop { } .kaslogan .imgblock img.mobile { display: none; } .kaslogan .textblock { position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; top: 50%; left: 50%; width: 0; /*height: 0;*/ transform: translate(-50%, -50%) scale(0); /* Startwert: zentriert und skaliert auf 0 */ transition: left 0.5s ease, top 0.5s ease, width 0.5s ease, height 0.5s ease, transform 0.5s ease; /* Übergang für Position, Größe und Transformation */ z-index: +1; width: 80%; max-width: 600px; transform: translate(-50%, -50%) scale(1); /* Endwert: vollständig sichtbar und skaliert auf 1 */ border-left: 3px solid var(--ka-font-white); padding: 0 0 0 30px; } .kaslogan .textblock * { font-size: 36px; line-height: 44px; font-weight: 800; } .kaslogan .textblock.visible { top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%) scale(1); /* Endwert: vollständig sichtbar und skaliert auf 1 */ z-index: +1; } .kaslogan .textblock .headline, .kaslogan .textblock .text { color: var(--ka-font-white); } .kaslogan .textblock .text h2 { margin: 0; } .kaslogan .textblock .headline2 { margin: 50px 0 0 0; color: var(--ka-bk-btn-active); font-family: var(--ka-h6-font-family); font-size: 30px; line-height: 36px; font-weight: 700; text-transform: uppercase; } /* ****************************************************************************************************************** */ /* --- Fixes -------------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ .fixtop { margin: -00px 0 0 0px; position: relative; padding: 00px 0 0 0; top: 200px; z-index: +2; } /* ****************************************************************************************************************** */ /* --- Hiddenmessage ------------------------------------------------------------------------------------------------ */ /* ****************************************************************************************************************** */ section.hiddenmsg { position: relative; padding-left: 80px; overflow: visible; } section.hiddenmsg.fix { padding-left: 0px; } section.hiddenmsg .letter-container { margin: 0px 0; white-space: nowrap; overflow: hidden; font-size: 150px; line-height: 120px; letter-spacing: 0.05em; font-stretch: normal; font-family: var(--ka-vt-font-family); text-transform: uppercase; color: #AEACAA; } section.hiddenmsg.fix .letter-container { font-size: 120px; line-height: 100px; } section.hiddenmsg .letter-container span { text-transform: uppercase; color: #AEACAA; } section.hiddenmsg.fix .letter-container span { color: #AEACAA; } section.hiddenmsg .letter { display: inline-block; text-align: center; margin: 0; min-width: 38px; } /* ****************************************************************************************************************** */ /* --- kapartnerslider --------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after, .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { /*content: '' !important;*/ } section.kapartnerslider { position: relative; height: auto; display: block; margin: 0px 0 0px 0; transition: height 1.0s; } section.kapartnerslider .painside { position: relative; width: 100%; height: 100%; } section.kapartnerslider .smooth { position: relative; height: 100%; max-height: 101%; min-height: 101%; display: block; flex-direction: column; margin: 0; padding: 0; } section.kapartnerslider.animated { min-height: 100%; max-height: 100%; height: 101%; transition: height 1.0s; } section.kapartnerslider .teaserlist { max-width: 1400px; margin:0 auto 50px auto; display:grid; text-align: center; } section.kapartnerslider.cnt_3 .teaserlist { grid-template-columns: 1fr 1fr 1fr; } section.kapartnerslider.cnt_4 .teaserlist { grid-template-columns: 1fr 1fr 1fr 1fr; } section.kapartnerslider.cnt_5 .teaserlist { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } section.kapartnerslider.cnt_6 .teaserlist { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } section.kapartnerslider.cnt_7 .teaserlist { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } section.kapartnerslider.cnt_8 .teaserlist { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } section.kapartnerslider .teaserlist .teaser { width: 95%; margin: 0 auto; } section.kapartnerslider .teaserlist h4 { margin-top: 5px; } section.kapartnerslider .teaserlist img { width: auto; height: 25px; object-fit: cover; /*border: 1px solid #000;*/ /*border-radius: 25px;*/ } section.kapartnerslider .teaserlist .teaser { display: flex; justify-content: center; align-items: center; } section.kapartnerslider .teaserlist .teaser:nth-child(3) img { height: 40px; } section.kapartnerslider .teaserlist .teaser:nth-child(4) img { height: 20px; } section.kapartnerslider .teaserlist .name { display: none; } section.kapartnerslider .swiperbox { position: relative; width: 100%; } section.kapartnerslider .swiper-container { position: relative; width: 100%; max-width: 100%; height: auto; margin: 0 auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; /* max-height: 1200px; */ } section.kapartnerslider .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box; /*align-items: flex-start;*/ } /* section.kapartnerslider .swiper-button-prev, section.kapartnerslider .swiper-button-next { position: absolute; background-color: rgba(255,255,255,0.2); background-image: none; display: flex; align-items: center; color: #000; font-size: 12px; line-height: 14px; width: auto; padding: 0px 30px; height: 50px; } section.kapartnerslider .swiper-button-prev:after, section.kapartnerslider .swiper-button-next:after { position: absolute; top: 0; left: auto; right: auto; width: 50px; height: 50px; background-repeat: no-repeat; background-color: rgba(0,0,0,0.7); background-repeat: no-repeat; background-position: center; background-size: 100%; transition: background-position 0.5s ease-in-out; cursor: pointer; z-index: 999; } section.kapartnerslider .swiper-button-prev { margin-left: 50px; } section.kapartnerslider .swiper-button-prev:after { left: -50px; background-image: url(/files/intern/common/links.svg); } section.kapartnerslider .swiper-button-next { margin-right: 50px; } section.kapartnerslider .swiper-button-next:after { right: -50px; background-image: url(/files/intern/common/rechts.svg); } */ section.kapartnerslider .swiper-button-prev { left: auto; right: 46px; top: calc(50% + 23px); } section.kapartnerslider .swiper-button-next { right: 0px; top: calc(50% - 23px); } section.kapartnerslider .swiper-slide { display: flex; justify-content: center; flex-direction:row; flex-shrink: 0; height: 100%; transition: all 0.5s ease-out; transition-property: transform; } section.kapartnerslider .leftblock, section.kapartnerslider .rightblock { position: relative; width: 50%; /*height: 100%;*/ display: flex; flex-direction: column; min-height: 500px; } section.kapartnerslider .leftblock { background-color: #DBDBDB; padding: 200px 300px; width: calc(50% - 600px); display: flex; align-items: flex-end; text-align: left; } section.kapartnerslider .leftblock .leftinside { position: relative; max-width: 550px; height: 100%; display: flex; flex-direction: column; /*align-items: center;*/ justify-content: center; } section.kapartnerslider .leftblock * { color: #fff; } section.kapartnerslider .leftblock .textblock a { margin: 10px 0; text-decoration: underline; transition: all .5s ease-in-out; } section.kapartnerslider .leftblock .textblock a:hover { color: var(--ka-bk-magentahover); } section.kapartnerslider .leftblock h4 { color:var(--ka-font-magenta); } section.kapartnerslider .leftblock h1 { margin: 20px 0 30px 0; } section.kapartnerslider .leftblock .socials { display: flex; flex-direction: column; align-items: flex-start; width: 100%; } section.kapartnerslider .rightblock { } section.kapartnerslider .swiper-slide .socials { display: flex; flex-direction: row; } section.kapartnerslider .swiper-slide .socials .social { display: flex; align-items: center; margin: 0 10px 0 0; width: 48px; height: 48px; } section.kapartnerslider .swiper-slide .socials .social img { width: 30px; height: 30px; transition: all 0.5s ease-in-out; } section.kapartnerslider .swiper-slide .socials .social:hover img { width: 36px; height: 36px; } section.kapartnerslider .leftblock .button { position: relative; display: flex; margin: 60px 0 50px 0; overflow: visible; align-items: flex-start; width: 100%; } section.kapartnerslider .leftblock .button a { position: relative; display: flex; min-width: 180px; transition: all 0.5s ease-in-out; overflow: visible; font-size: var(--ka-btnpxwidth)); line-height: var(--ka-btnpxwidth)); /*padding: calc(2 * var(--ka-btnpxwidth)) calc(1 * var(--ka-btnpxwidth));*/ background-color: inherit; } section.kapartnerslider .leftblock .button a span { position: relative; padding: 0; display: flex; text-align: center; justify-content: center; align-items: center; color: #fff; text-transform: uppercase; font-size: var(--ka-btnpxwidth)); line-height: var(--ka-btnpxwidth)); font-weight: 900; font-style: italic; letter-spacing:0.05em; } section.kapartnerslider .leftblock .button a span.btntext { background-color: var(--ka-bk-darkgray); padding: 6px 20px 6px 20px; text-decoration: none; } section.kapartnerslider .leftblock .button a span.btntext:before { position: absolute; margin: 0; content:""; display: flex; width: calc(2 * var(--ka-btnpxwidth)); height: calc(1 * var(--ka-btnpxwidth)); top: auto; bottom: calc(-1 * var(--ka-btnpxwidth)); left: calc(-3 * var(--ka-btnpxwidth)); background-image: url('/files/intern/common/cube-bk_grau.svg'); /* background-color: #000; */ } section.kapartnerslider .leftblock .button a span.bkleft, section.kapartnerslider .leftblock .button a span.bkright { width: calc(2 * var(--ka-btnpxwidth)); height: calc(1 * var(--ka-btnpxwidth)); background-image: url('/files/intern/common/cube-bk_grau.svg'); background-size: 200%; background-repeat: no-repeat; background-position: calc(-1 * var(--ka-btnpxwidth)) top; } section.kapartnerslider .leftblock .button a span.bkleft { background-position: calc(-3 * var(--ka-btnpxwidth)) top; } section.kapartnerslider .leftblock .button a span.bkleft:before { position: absolute; margin: 0; content:""; display: flex; width: calc(2 * var(--ka-btnpxwidth)); height: calc(1 * var(--ka-btnpxwidth)); top: calc(-1 * var(--ka-btnpxwidth)); left: calc(-0 * var(--ka-btnpxwidth)); background-image: url('/files/intern/common/cube-bk_grau.svg'); } section.kapartnerslider .leftblock .button a span.bkleft:after { position: absolute; margin: 0; content:""; display: flex; width: calc(2 * var(--ka-btnpxwidth)); height: calc(1 * var(--ka-btnpxwidth)); top: auto; bottom: calc(-1 * var(--ka-btnpxwidth)); left: calc(-0 * var(--ka-btnpxwidth)); background-image: url('/files/intern/common/cube-bk_grau.svg'); } section.kapartnerslider .leftblock .button a span.bkright { background-position: calc(-3 * var(--ka-btnpxwidth)) top; } section.kapartnerslider .leftblock .button a span.bkright:after { position: absolute; margin: 0; content:""; display: flex; width: calc(2 * var(--ka-btnpxwidth)); height: calc(1 * var(--ka-btnpxwidth)); top: auto; bottom: calc(-1 * var(--ka-btnpxwidth)); left: auto; right: calc(-0 * var(--ka-btnpxwidth)); background-image: url('/files/intern/common/cube-bk_grau.svg'); } /* section.kapartnerslider .leftblock .button a::after { margin: 0; content:""; display: flex; width: 35px; height: 35px; background-color: var(--ka-bk-magenta); background-image:url("/files/intern/common/fmd-iron-summit-pfeil-rechts.svg"); background-repeat: no-repeat; background-position: center; background-size: 40%; } */ section.kapartnerslider .leftblock .button a:hover { /*background-color: var(--ka-bk-color);*/ } section.kapartnerslider .leftblock .button a:hover::after { /*background-color: var(--ka-bk-darkgray);*/ } section.kapartnerslider .rightblock { line-height: 0px; font-size: 0px; } section.kapartnerslider .rightblock .images { position: relative; display: flex; height: 100%; } section.kapartnerslider .rightblock .images, section.kapartnerslider .rightblock .images .image { display: flex; width: 100%; } section.kapartnerslider .rightblock .logo { position: absolute; top: 50px; left: auto; right: 50px; width: 200px; } section.kapartnerslider .swiper-wrapper, section.kapartnerslider .swiper-slide, section.kapartnerslider .leftblock { overflow: visible; } section.kapartnerslider .leftblock .images { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; } section.kapartnerslider .leftblock .images .image { margin-left: 20%; width: 80%; height: 100%; } section.kapartnerslider .swiper-slide .images img.image { width: 100%; height: 100%; object-fit: cover; object-position: center; } section.kapartnerslider.mirror .swiper-slide .leftblock { order: 2; align-items: flex-start; } section.kapartnerslider.mirror .swiper-slide .rightblock { order: 1; } section.kapartnerslider .swiper-slide.swiper-slide-active, section.kapartnerslider .swiper-slide.swiper-slide-duplicate-active { opacity: 1; } section.kapartnerslider .swiper-slide.swiper-slide-prev, section.kapartnerslider .swiper-slide.swiper-slide-next { opacity: 0.9; } /* ****************************************************************************************************************** */ /* --- PixelImage --------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ section.pixelimg { position: relative; display: flex; } section.pixelimg .imageblock { position: relative; display: flex; width: 100%; } section.pixelimg .imageblock .pixelblock { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: +1; background-color: rgba(255, 255, 255, 0.0); filter: blur(100px); } section.pixelimg .imageblock .image_container { display:inline-block; width: 100%; height: 100%; min-height: 600px; } section.pixelimg .imageblock .image_container img { width: 100%; height: 100%; object-fit: cover; } section.pixelimg .imageblock .image_container canvas { width: 100%; max-width: 100%; } .image { display: block; width: 100%; height: auto; } .image:hover { } /* ****************************************************************************************************************** */ /* --- Mobileslider1 ------------------------------------------------------------------------------------------------ */ /* ****************************************************************************************************************** */ section.mobileslider1 { position: relative; clear: both; display: block; width: 100%; --mobileslider1gap: 0px; } section.mobileslider1 .headline { text-align: center; } section.mobileslider1 .smooth { position: relative; display: block; } section.mobileslider1 .msdesktop { display: flex; width: 100%; } section.mobileslider1 .msdesktop.limit1600 { max-width: 1600px; margin: auto; } section.mobileslider1 .msdesktop .textblock { margin: 0 0 40px 0; } section.mobileslider1.cnt_4 .msdesktop .image { width: calc(25% - var(--mobileslider1gap)); } section.mobileslider1.cnt_6 .msdesktop .image { width: calc(33.3% - var(--mobileslider1gap)); } section.mobileslider1.hover .msdesktop .image { position: relative; cursor: pointer; font-size: 0px; line-height: 0px; } section.mobileslider1.hover .msdesktop .headline { font-size: 21px; line-height: 26px; font-weight: 900; color: #fff; font-style: italic; letter-spacing: 0.025em; text-transform: uppercase; } section.mobileslider1.hover .msdesktop .imageblock { position: relative; display: flex; } section.mobileslider1.hover .msdesktop .imageblock .headline { position: absolute; top:0; left: 0; padding: 0 20px; width: calc(100% - 40px); height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; transition: .5s; line-height: 38px; display: none; } section.mobileslider1.hover .msdesktop .imageblock .shadow { display: flex; justify-content: center; align-items: center; text-align: center; position: absolute; top:0; left: 0; padding: 0 20px; width: calc(100% - 40px); height: 100%; background-color: rgba(0,0,0,0.3); z-index: -1; font-size: 1px; line-height: 1px; } section.mobileslider1.hover .msdesktop .textblock { position: absolute; top: 0; left: 0; width: calc(100% - 20%); height: 100%; padding-left: 10%; padding-right: 10%; /*background-color: rgba(37,71,102,0.8);*/ background-color: var(--ka-bk-magenta); display: flex; flex-direction: column; text-align: center; justify-content :center; align-items: center; opacity: 0; transition: 1.5s; } section.mobileslider1.hover .msdesktop .textblock * { font-size: var(--ka-font-size); line-height: var(--ka-line-height); } section.mobileslider1.hover .msdesktop .textblock .headline { font-size: 21px; line-height: 26px; font-weight: 900; color: #fff; font-style: italic; letter-spacing: 0.025em; text-transform: uppercase; } section.mobileslider1.hover .msdesktop .textblock .text { margin-top: 20px; margin-bottom: 20px; color: #fff; } section.mobileslider1.hover .msdesktop .textblock .button { margin: 10px 0 0 0; } section.mobileslider1.hover .msdesktop .image:hover .textblock { opacity: 1; } section.mobileslider1.hover .msdesktop .image:hover .imageblock .headline { opacity: 0; } 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; text-align: center; } section.mobileslider1 .msmobile .swiper-slide .textblock .text * { color:#fff; } 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 { } section.mobileslider1 .msmobile .swiper-button-prev { } section.mobileslider1 .msmobile .swiper-button-next { } /* ****************************************************************************************************************** */ /* --- banner ------------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ #nobanner { display: inline-block; /*height: 70px;*/ display: none; } #banner { top:0; position:relative; margin-top:0px; /* height: calc(100vh + 1 * var(--ka-pxwidth)) !important; max-height: calc(100vh + 1 * var(--ka-pxwidth)) !important; height: calc(100vh - 32px) !important; max-height: calc(100vh - 32px) !important; height: calc(100vh - 0px) !important; max-height: calc(100vh - 0px) !important; */ height: var(--banner-height) !important; max-height: var(--banner-height) !important; overflow:visible; /*z-index: 949;*/ } body.home #banner { /* height: calc(100vh + 1 * var(--ka-pxwidth)) !important; max-height: calc(100vh + 1 * var(--ka-pxwidth)) !important; height: 100vh !important; max-height: 100vh !important; */ height: var(--banner-height) !important; max-height: var(--banner-height) !important; } #banner, #banner .bannerinside, #bannerimage { /*line-height: 1px;*/ } #banner .inside, #banner .inside .mod_article { width: 100%; height: 100%; } #banner .bannerinside { position:absolute; top:0; left:0; min-height:0px; overflow:visible; display:block; /* padding:0 30px 0 30px; width:calc(100% - 60px); */ padding:0; width:100%; height:100% !important; } #imagebanner { position: relative; } #imagebanner img { width: 100%; height: 100%; object-fit: cover; } #bannerimage { position:relative; width:100%; height:100% !important; } #bannerimage #bannersmall, #bannerimage #bannersmall img.image { width:100%; font-size:2px; line-height:2px; z-index:950; } #bannerimage .mod_article { position: relative; width:100%; height:100% !important; overflow: visible; /*text-align: center;*/ } #bannerimage .logocenter { position: absolute; left: 50%; top: 75%; transform: translate(-50%, -50%); display: flex; z-index: 953; } #bannerimage .logocenter img { width: 370px; } #bannerimage .centerblock { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); display: flex; flex-direction: column; z-index: 953; z-index: 947; /* BG181124 */ max-width: 100%; overflow: hidden; } #bannerimage .centerblock * { color: #fff; /*z-index: 953;*/ } #bannerimage .rsts-skin-default.rsts-main, #bannerimage .rsts-slide > div, #bannerimage .rsts-slide .ce_image, #bannerimage .rsts-slide img, #bannerimage .rsts-slide figure.image_container, #bannerimage .rsts-slide figure.image_container img, #bannerimage figure.video_container, #bannerimage .ce_player { width: 100%; height:100%; } #bannerimage .rsts-slide img { margin: 0 !important; width:100% !important; height:100% !important; } #bannerimage .downbutton, .fmdep .downbutton { position:absolute; left:calc(50% - 30px); width:auto; bottom:5px; position:absolute; overflow:hidden; display:block; text-align:center; font-size:2px; padding:10px; line-height:2px; z-index:952; } #bannerimage .downbutton img, .fmdep .downbutton img { width: 40px; height:40px; } #bannerimage .downbutton a, .fmdep .downbutton a { overflow:hidden; display:block; font-size:17px; line-height:2px; } #bannerimage .image_container img, #bannerimage .video_container video { width: 100%; height:100%; object-fit: cover; } #bannerimage .video_container video { z-index:950; } #bannerimage .rsts-caption, #bannertext { display:none; } div#anker { line-height: 1px; } div#anker::before { content: ''; display: block; height: 50px; margin-top: -50px; visibility: hidden; line-height: 1px; } #bannertext { width:100%; top:66%; position:absolute; display:inline-block; z-index:802; } #bannertext .textinside { width:80%; max-width:1600px; margin-right:auto; margin-left:auto; } #bannertext h1 { font-size:80px; line-height:85px; font-weight:bold; color:#FFF; text-transform:none; } #bannertext p { font:36px/40px Caveat; color:#FFF; } .rsts-skin-default .rsts-nav { bottom:5px; right:20px; position:absolute; } #banner .rsts-view { width: 100%; height: 100%; } #bannerimage .kapartnerslider { height: 100%; } #bannerimage section.kapartnerslider .swiper-container { height: 100%; } .kabannerslider, .kabannerslider .swiper-container, .kabannerslider .swiper-container .swiper-slide, .kabannerslider .swiper-container .swiper-slide .slinside, .kabannerslider .swiper-container .swiper-slide .background, .kabannerslider .swiper-container .swiper-slide .background img { width: 100%; height: 100%; } .kabannerslider .swiper-container .swiper-slide .background { display: flex; } #banner .kabannerslider .swiper-container .swiper-slide .background img { max-width: 200%; object-fit: cover; } #imagebanner .kabannerslider .swiper-container .swiper-slide .background img { width: 100%; height: 100%; object-fit: cover; } /* ****************************************************************************************************************** */ /* --- bannerslider --------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ section.bannerslider { position: relative; display: block; width: 100%; height: 100%; } section.bannerslider .slinside { position: relative; width: 100%; height: 100%; } section.bannerslider .swiper-container { height: 100%; } section.bannerslider .textblock, section.bannerslider .textblock.bottomcenter { position: absolute; top: auto; bottom: 100px; left: auto; right: 80px; width: 350px; max-width: 33%; /*transform: translate(0, -50%);*/ display: flex; flex-direction: column; align-items: center; z-index: +3; } section.bannerslider .textblock.topleft { top: 50px; bottom: auto; left: 5%; right: auto; transform: translate(0, 0); max-width: 50%; } section.bannerslider .textblock.topcenter { top: 50px; bottom: auto; left: 50%; transform: translate(-50%, 0); max-width: 50%; } section.bannerslider .textblock.topright { top: 50px; bottom: auto; left: auto; right: 5%; transform: translate(0, 0); max-width: 50%; } section.bannerslider .textblock.centerleft { top: 50%; bottom: auto; left: 5%; right: auto; transform: translate(0, -50%); max-width: 50%; } section.bannerslider .textblock.centercenter { top: 50%; bottom: auto; left: 50%; right: auto; transform: translate(-50%, -50%); max-width: 50%; } section.bannerslider .textblock.centerright { top: 50%; bottom: auto; left: auto; right: 5%; transform: translate(0, -50%); max-width: 50%; } section.bannerslider .textblock.bottomleft { top: auto; bottom: 50px; left: 5%; right: auto; transform: translate(0, 0); max-width: 50%; } section.bannerslider .textblock.bottomright { top: auto; bottom: 50px; left: auto; right: 5%; transform: translate(0, 0); max-width: 50%; } section.bannerslider .hoverbox { position: relative; display: flex; flex-direction: column; overflow: hidden; align-items: center; height: 80px; height: auto; width: 100%; padding: 0; margin: 0 0 0 0; transition: all 0.5s ease-in-out; } section.bannerslider .hoverbox:hover { margin: 0px 0; padding: 0 0 0 0; } section.bannerslider .hoverbox .headline { } section.bannerslider .hoverbox:hover .headline { } section.bannerslider .hoverbox .textbox { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 100%; padding: 0; background: var(--ka-bk-darkblue); /*max-height: 70px;*/ height: 80px; } section.bannerslider .hoverbox:hover .textblock { /* padding: 20px 0; */ padding: 0px 0; } section.bannerslider .textblock * { color: #fff; } section.bannerslider .textblock h1, section.bannerslider .textblock h2, section.bannerslider .textblock h3 { /* font-size: 72px; line-height: 82px; padding: 20px 90px; color: var(--ka-font-blue); */ } section.bannerslider .textblock h2 { margin: 0 0 0px 0; font-size: 60px; } section.bannerslider .textblock h3 { margin: 0 0 20px 0; font-size: 69px; } section.bannerslider .awards { position: relative; display: flex; flex-direction: column; margin: 40px 0; } section.bannerslider .awards img { width: 100%; max-width: 330px; margin: 5px 0; } section.bannerslider .awards img.award1 { width: 100%; max-width: 230px; max-height: 100px; } section.bannerslider .textblock .buttons { position: relative; } section.bannerslider .textblock .buttons a.button { border: 1px solid #fff; color: #fff; } section.bannerslider .textblock .buttons a.button:hover { color: var(--ka-font-gray); background-color: rgba(255, 255, 255, 0.3); } section.bannerslider .hoverbox .noline, section.bannerslider .hoverbox .line1, section.bannerslider .hoverbox .line2 { width: calc(100% - 00px); position: relative; display: flex; justify-content: center; align-items: center; transition: all .25s ease-in-out; padding: 0; } section.bannerslider .hoverbox .noline, section.bannerslider .hoverbox .line1 { /*padding: 20px 50px;*/ height: 100%; opacity: 1; padding: 20px 0; } section.bannerslider .hoverbox:hover .line1 { height: 0; opacity: 0; padding: 0; margin: 0 0; } section.bannerslider .hoverbox .line2 { /* position: absolute; top: 0; left: 0; */ height: 0; padding: 0; } section.bannerslider .hoverbox:hover .line2 { height: auto; /* padding: 40px 0; */ padding: 20px 0; } section.bannerslider .hoverbox .buttons a { display: flex; padding: 0; font-size: 26px; line-height: 36px; width: 100%; height: 100%; color: var(--ka-bk-btn-hover); cursor: pointer; font-weight: 600; transition: all .25s ease-in-out; justify-content: center; opacity: 0; } section.bannerslider .hoverbox:hover .buttons a { opacity: 1; } section.bannerslider .swiper-slide { display: flex; height: auto; } section.bannerslider .image_container { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; max-height: 100%; height: 100%; z-index: +2; } section.bannerslider .image_container img.bkimg { position: absolute; left: 50%; transform: translate(-50%, -50%); top: 50%; width: auto; max-height: 100%; z-index: 0; } section.bannerslider .image_container img.image { position: relative; width: 100%; height: 100%; object-fit: cover; z-index: +1; } section.bannerslider .image_container img.image.mobile { display: none; } section.bannerslider .image_container img.award { position: absolute; left: 18%; transform: translate(-50%, 0); top: 15%; width: 100px; z-index: +2; } section.bannerslider .image_container .videocontainer { position: relative; width: 100%; height: 100%; max-width: 100%; display: flex; justify-content: center; align-items: center; z-index: 0; } section.bannerslider .image_container .videocontainer video { width: 100%; height: 100%; object-fit: cover; } section.bannerslider .swiper-pagination { display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 0 0 10px 0; text-align: right; display: none; } section.bannerslider .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, section.bannerslider .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { width: 12px; height: 12px; display: none; } /* ****************************************************************************************************************** */ /* --- banner countdown --------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ #bannerimage .ce_countdown { position: absolute; left: 50%; top: 30%; width: 900px; max-width: 90%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; flex-direction: column; } #bannerimage .ce_countdown h4 { margin-bottom: 20px; font-size: 24px; line-height: 24px; } #bannerimage .ce_countdown .tick * { color: #fff; font-size: 20px; line-height: 76px; font-weight: 900; text-transform: uppercase; letter-spacing:0.05em; font-style: italic; background-image: none; box-shadow: none; } #bannerimage .ce_countdown .tick-group { position: relative; margin: 0 20px; } #bannerimage .ce_countdown .tick-group::after { position: absolute; top: 0px; left: 157px; display: flex; font-size: 72px; font-weight: 900; content: ":"; } #bannerimage .ce_countdown .tick-group:nth-last-child(1)::after { display: none; } #bannerimage .ce_countdown .tick-flip { margin-left: 5px; margin-right: 5px; min-width: 140px; border-radius: 0; letter-spacing: 0.25em; text-indent: 0.25em; } #bannerimage .ce_countdown .tick-flip-panel, #bannerimage .ce_countdown .tick-flip-panel-front-shadow, #bannerimage .ce_countdown .tick-flip-panel-back:after { background-color: inherit; background-image: none; } /* #bannerimage .ce_countdown .tick-flip-panel, #bannerimage .ce_countdown .tick-flip-panel-front-shadow, #bannerimage .ce_countdown .tick-flip-panel-back:after { background-color: inherit; background-image: none; } */ #bannerimage .ce_countdown .tick-flip-panel-text-wrapper { font-size: 72px; line-height: 76px; font-weight: 900; } /* #bannerimage .ce_countdown .tick-flip-card { z-index: 11 !important; } #bannerimage .ce_countdown .tick-flip-card-shadow { display: none !important; opacity: 0.001 !important; } #bannerimage .ce_countdown .tick-flip-front, #bannerimage .ce_countdown .tick-flip-back { transform: rotateX(0) !important; } tick-flip-panel-back-text, #bannerimage .ce_countdown .tick-flip-shadow, #bannerimage .ce_countdown .tick-flip-card-shadow, #bannerimage .ce_countdown .tick-flip-panel-front-shadow, #bannerimage .ce_countdown .tick-flip-panel-back-highlight, #bannerimage .ce_countdown .tick-flip-panel-back-shadow { display: none !important; opacity: 0.001 !important; } #bannerimage .ce_countdown .tick-flip-card-shadow, #bannerimage .ce_countdown .tick-flip-panel-front-shadow, #bannerimage .ce_countdown .tick-flip-panel-back-shadow { display: none !important; opacity: 0.001 !important; } #bannerimage .ce_countdown .tick-flip-panel { transform: rotateX(0) !important; } */ #bannerimage .ce_countdown .tick-group span[data-view] { position: relative; top: -20px; margin: 0px 0 0 0; width: 100%; line-height: 24px; text-align: center; } /* ****************************************************************************************************************** */ /* --- Headline Epic Places Startseite ------------------------------------------------------------------------------ */ /* ****************************************************************************************************************** */ .boxheadline { width:100%; display:inline-block; padding-top:50px; padding-bottom:50px; } .boxheadline .flexcontainer { align-items:center; justify-content:center; } .boxheadline h3, .startproject a, #main .startproject a { font-family: Montserrat; font-size:24px; text-transform:uppercase; } .boxheadline div img { width:120px; height:80px; margin: 0 25px; } /* ****************************************************************************************************************** */ /* --- slider ----------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ body { /*background-color:var(--ka-color-bk2);*/ } div#anker, div#anker1-weltkarte { display:block; display: none; } div#anker::before, div#anker1-weltkarte::before { content: ''; display: block; height: 70px; margin-top: -70px; visibility: hidden; } /* ****************************************************************************************************************** */ /* --- projects ----------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ div.projects { margin: 50px auto; position: relative; display: flex; flex-direction: row; justify-content: space-between; } /* ****************************************************************************************************************** */ /* --- projectlink -------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ section.projectlink { position: relative; display: flex; } #main .projectlink { width: 25%; position: relative; display: flex; justify-content: center; align-items: center; padding: 0; margin: 0; cursor: pointer; } #main .projectlink.imagegrow, #main .projectlink.flat { position: relative; width:calc(33.3% - 10px); } #main .projectlink.imagegrow .imgblock, #main .projectlink.flat .imgblock { position: relative; overflow: hidden; } #main .projectlink.imagegrow .imgblock *, #main .projectlink.flat .imgblock * { line-height: 1px; } #main .projectlink.imagegrow .image_container, #main .projectlink.flat .image_container { overflow: hidden; line-height: 1px; } #main .projectlink.imagegrow .image_container img, #main .projectlink.flat .image_container 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 .projectlink.imagegrow:hover .image_container img, #main .projectlink.flat:hover .image_container img { transform: scale(1.05, 1.05); -ms-transform: scale(1.05, 1.05); -webkit-transform: scale(1.05, 1.05); } #main .projectlink.imagegrow .button a { position: absolute; width: 100%; top: calc(50% - 15px); color: #ffffff; font-size: 30px; line-height: 34px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; pointer-events: none; text-align: center; } #main .projectlink.imagegrow .text { margin-top: 20px; margin-bottom: 20px; padding-left: 50px; padding-right: 50px; } #main .projectlink.flat { position: relative; width:calc(33.3% - 10px); } #main .projectlink.flat .text { width: 80%; } #main .projectlink.hover { position: relative; display: flex; padding: 0; margin: 0; } #main .projectlink.hover .imgblock { /* position: absolute; top: 0; left: 0; */ } #main .projectlink.hover .headline { color: #ffffff; font-size:21px; line-height:26px; font-weight:900; color:#fff; font-style: italic; letter-spacing: 0.025em; text-transform: uppercase; } #main .projectlink.hover .headlinecolor { font-size:21px; line-height:26px; font-weight:900; color:var(--ka-font-magenta); font-style: italic; letter-spacing: 0.025em; text-transform: uppercase; } #main .projectlink.hover .imgblock * { line-height: 1px; position: relative; } #main .projectlink.hover .imgblock .headline { position: absolute; top:0; left: 0; padding: 0 20px; width: calc(100% - 40px); height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; transition: .5s; line-height: 38px; } #main .projectlink.hover .imgblock .shadow { display: flex; justify-content: center; align-items: center; text-align: center; position: absolute; top:0; left: 0; padding: 0 20px; width: calc(100% - 40px); height: 100%; background-color: rgba(0,0,0,0.3); z-index: -1; } #main .projectlink.hover:hover .imgblock .headline { opacity: 0; } #main .projectlink.hover .textblock { position: absolute; top: 0; left: 0; width: calc(100% - 20%); height: 100%; padding-left: 10%; padding-right: 10%; background-color: rgba(37,71,102,0.8); display: flex; flex-direction: column; text-align: center; justify-content :center; align-items: center; opacity: 0; transition: 1.5s; } #main .projectlink.hover:hover .textblock { opacity: 1; } #main .projectlink.hover .button a { font-size: 34px; } #main .projectlink.hover .textblock .text { margin-top: 20px; margin-bottom: 20px; } #main .projectlink.hover .button a { color: #ffffff; font-size: 16px; font-weight: 300; } #main .projectlink.hover .textblock .text p { color: #fff; } #main .projectlink .imgblock .pl-yt { position: relative; display: inline-block; } #main .projectlink .imgblock .pl-yt .image { position: relative; visibility: visible; opacity: 1; transition: visibility 0s linear 500ms, opacity 500ms; } #main .projectlink .imgblock .pl-yt .image.disable { visibility: hidden; opacity: 0; transition: visibility 0s linear 500ms, opacity 500ms; } #main .projectlink .imgblock .pl-yt .image button { position: absolute; top:calc(50% - 15px); left:calc(50% - 20px);; width: 30px; height: 40px; background-image: url('/files/intern/common/fmd-pfeil-rechts-hover.png'); pointer-events: none; } #main .projectlink .imgblock .pl-yt img { cursor: pointer; } #main .projectlink .imgblock .pl-yt img #main .projectlink .imgblock .pl-yt .video { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; /*display:none;*/ } #main .projectlink .imgblock .pl-yt .video { visibility: hidden; opacity: 0; transition: visibility 0s linear 500ms, opacity 500ms; } #main .projectlink .imgblock .pl-yt .video.enable { visibility: visible; opacity: 1; transition: visibility 0s linear 500ms, opacity 500ms; } #main .projectlink .imgblock .pl-yt .video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #main .textimg { position: relative; width: 100%; height: 100%; /* margin-top: 20px; margin-bottom: 20px; display: flex; flex-direction:column; justify-content: space-between; */ } #main .textimg .imgblock, #main .textimg .image_container { position: relative; } #main .textimg .imgblock * { line-height: 1px; } #main .textimg.imgcnt_0 .swiper-button-prev, #main .textimg.imgcnt_0 .swiper-button-next, #main .textimg.imgcnt_1 .swiper-button-prev, #main .textimg.imgcnt_1 .swiper-button-next { display: none; } #main .textimg .imgblock .image_container { position: relative; width: 100%; height: 100%; overflow: hidden; min-height: 400px; display: flex; justify-content: center; align-items: center; } #main .textimg img { position: relative; width: 100%; height: 100%; left:0%; object-fit: cover; object-fit: contain; display: inline-block; max-width: 100%; } #main .textimg.scaleimg33 .swiper-slide, #main .textimg.scaleimg50 .swiper-slide, #main .textimg.scaleimg66 .swiper-slide { display: flex; justify-content: center; align-items: center; } #main .textimg.scaleimg33 .swiper-slide img { width: 33%; height: 33%; } #main .textimg.scaleimg50 .swiper-slide img { width: 50%; height: 50%; } #main .textimg.scaleimg66 .swiper-slide img { width: 66%; height: 66%; } #main .textimg .imgblock .logo.image_container { position: absolute; display: flex; width: 120px; height: auto; top: 20px; left: 20px; } #main .textimg .left .imgblock .logo.image_container { left: auto; right: 20px; } #main .textimg .logo.image_container img { width: 100%; height: 100%; object-fit: cover; } #main .textimg .textblock { padding-top: 0px; padding-bottom: 0px; display: flex; flex-direction:column; justify-content :center; } #main .textimg .left .headline, #main .textimg .left .text, #main .textimg .right .headline, #main .textimg .right .text, #main .textimg .left .button, #main .textimg .right .button { padding-left: 100px; padding-right: 100px; } #main .textimg .headline { margin-top: 0; } #main .textimg .linkblock { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end; height: 100%; margin: 15px 0 0 0; } #main .textimg .linkblock .alignleft { display: flex; flex-direction: column; align-items: flex-start; } #main .textimg .linkblock .headline { } #main .textimg .textblock .buttons { position: relative; display: block; margin: 40px 0 0 0; } #main .textimg .linkblock .links { position: relative; display: block; margin: 0px 0 0 0; } #main .textimg .linkblock .links .link { display: flex; } /* #main .textimg .textblock .buttons a, #main .textimg .linkblock .links .link a.bkyellow, #main .kalink .buttons a.button, .kaslogan .textblock .text .button a { padding: 4px 20px; margin: 0 10px 0px 0; background-color: var(--ka-bk-btn-active); transition: all 0.5s ease-in-out; font-weight: 500; letter-spacing: 0.005em; font-size: 18px; } #main .textimg .textblock .buttons a:hover, #main .textimg .linkblock .links .link a.bkyellow:hover, .kaslogan .textblock .text .button a:hover { background-color: var(--ka-bk-btn-hover); } #main .immoproject .introduction .right a:hover { } */ #main .textimg .linkblock .links a { padding: 0px 0px; margin: 0px 0; /* background-color: var(--ka-bk-btn-active); transition: all 0.5s ease-in-out; */ } #main .textimg .linkblock .links a:hover { /* background-color: var(--ka-bk-btn-hover); */ } #main .textimg .left .button, #main .textimg .right .button { margin-top: 20px; } #main .textimg .button a { font-weight: 600; transition: 0.5s; } #main .textimg .button a:hover { color:var(--ka-bk-magentahover); } #main .textimg.cols3 .grid { width: 100%; } #main .textimg.cols3.right .grid { /* direction: rtl; unicode-bidi: normal; */ display: grid; grid-template-columns: repeat(3, 1fr); } /* Textblock rechts */ #main .textimg.cols3.right .textblock { order: 3; } /* Erstes Bild links */ #main .textimg.cols3.right .image_container:nth-child(1) { order: 1; } /* Zweites Bild Mitte */ #main .textimg.cols3.right .image_container:nth-child(2) { order: 2; } #main .textimg.cols3 .image_container { position: relative; display: flex; justify-content: center; align-items: center; } #main .textimg.cols3 img { width: 100%; display: flex; object-fit: cover; } #main .textimg.cols3 .textblock { position: relative; justify-content: space-between; } #main .textimg.cols3 .textblock .top * { color: var(--ka-font-blue); } #main .textimg.cols3 .textblock .top h2 { margin-bottom: 10px; } #main .textimg.cols3 .textblock .top h3 { margin-top: 0; } #main .textimg.cols3 .textblock p { position: relative; top: 7px; margin-top: 16px; margin-bottom: 0; } /* ****************************************************************************************************************** */ /* ---Epic Places Experts ------------------------------------------------------------------------------ */ /* ****************************************************************************************************************** */ #main .epicbox { z-index: 0; background-color: var(--ka-bk-color); display: block; padding: 50px 0; } #main .epicbox * { color: #fff; } body.japaniw #main .epicbox { background-color: var(--ka-bk-japaniw); } body.japanisg #main .epicbox { background-color: var(--ka-bk-japanis); } body.utah #main .epicbox { background-color: var(--ka-bk-utah); } body.uganda #main .epicbox { background-color: var(--ka-bk-uganda); } body.hongkong #main .epicbox { background-color: var(--ka-bk-hongkong); } body.usedom #main .epicbox { background-color: var(--ka-bk-usedom); } #main .experts { display: flex; flex-wrap: wrap; text-align: left; display: flex; align-items: center; justify-content: center; } #main .experts > *, #main .expert { padding: 10px; flex: 0 0 calc(33% - 10px); box-sizing: border-box; margin-bottom: 30px; } #main .expert div, #main .expert p { } #main .expert div.name { margin-top: 30px; font-weight: 600; } #main .experts video, #main .projectlink video { width: 100%; } #main .experts .socials { margin-top: 8px; } #main .experts .socials img { width: 24px; height: 24px; } body.safari #main .expert .video-container .controls { display: none; } #main .expert .video-container, #main .projectlink .video-container { position: relative; cursor: pointer; } #main .projectlink .video-container { cursor: pointer; } #main .expert .controls, #main .projectlink .controls { visibility: hidden; opacity: 1; position: absolute; bottom: calc(50% - 27px); left: calc(50% - 27px); transition: 1s all; display: flex; } #main .expert .controls { left: auto; bottom: 20px; right: 20px; } #main .projectlink .controls { left: auto; bottom: 20px; right: 20px; } #main .expert .player:hover .controls, #main .projectlink .player:hover .controls, player:focus .controls { opacity: 1; } #main .expert button:before, #main .projectlink button:before { font-size: 20px; position: relative; content: attr(data-icon); color: #aaa; text-shadow: 1px 1px 0px black; } #main .expert .timer, #main .projectlink .timer { line-height: 38px; font-size: 10px; font-family: monospace; text-shadow: 1px 1px 0px black; color: white; flex: 5; position: relative; } #main .expert .timer div, #main .projectlink .timer div { position: absolute; background-color: rgba(255,255,255,0.2); left: 0; top: 0; width: 0; height: 38px; z-index: 2; } #main .expert .timer span, #main .projectlink .timer span { position: absolute; z-index: 3; left: 19px; } #main .expert .play, #main .projectlink .play { width: 30px; height: 30px; /* position: absolute; left: auto; bottom: 10px; right: 30px; */ /* width: 55px; height: 55px; */ padding: 0; border: 0; opacity: 1; outline: none; border-style: none; background-color: rgba(0,0,0,0.01); /*background-image: url('/files/intern/common/fmd-pfeil-rechts-hover.png');*/ background-image: url('/files/intern/common/fmd-mouseover.png'); background-position: center; background-repeat: no-repeat; text-indent: -9999px; cursor: pointer; } #main .projectlink .play { background-image: url('/files/intern/common/fmd-mouseover.png'); background-color: transparent; } #main .expert .play:focus, #main .projectlink .play:focus { outline: 0 !important; border: none; outline: none; } #main .expert .play[data-icon='u'], #main .projectlink .play[data-icon='u'] { opacity: 0.7; background-color: transparent; background-image: url('/files/intern/common/fmd-close-hover.png'); display: none; /*background-color: #ff0000;*/ } #main .expert .stop, #main .expert .timer, #main .expert .rwd, #main .expert .fwd, #main .projectlink .stop, #main .projectlink .timer, #main .projectlink .rwd, #main .projectlink .fwd { display: none; } .previewvideo { max-height: 100vh; z-index: 950; } .previewvideo, .previewvideo .prev-video-container { position: relative; } .previewvideo .prev-video-container { z-index: 951; } .previewvideo video { width: 100%; object-fit:cover; } .previewvideo .videobtn { position: absolute; top: 50%; left:50%; transform: translate(-50%); /* min-width: 160px; height: 40px; */ display: flex; flex-direction:column; justify-content :center; padding: 15px 30px 15px 15px; /* background-color: rgba(18, 81, 105, 0.8); */ background-image: url('/files/intern/common/fmd-play-video-full.png'); background-position: 95% center; background-repeat: no-repeat; /* border-radius: 3px; */ font-size: 14px; line-height: 14px; letter-spacing: 0.02em; font-weight:400; text-transform: uppercase; color: #23bfe4; cursor: pointer; z-index:954; transition: all 500ms ease-in-out; white-space: nowrap; } .previewvideo .videobtn:hover { /*background-color: rgba(35, 191, 228, 0.8);*/ color: #95ebff; } .previewvideo .videobtn.disable { display: none; } /* #main .experts video .controls .progress { cursor:pointer; width:75.390625%; } */ .controlBar { display: none; } #main .blueboxes { position: relative; display: flex; flex-direction:row; justify-content: space-between; text-align: left; padding: 0 10px 0 10px; z-index: 1; } #main .bluebox { position: relative; width: calc(33% - 15px); background-color: #000000; min-height: 550px; text-align: center; margin: 0; border: 0; /*border: 1px solid #ffffff;*/ overflow: hidden; } /* #main .bluebox:before { content: ''; position: absolute; top: -3px; right: -3px; bottom: -3px; left: -3px; /* background: -webkit-linear-gradient(#20549d, #b91509, #23bfe4); transform: rotateZ(-91deg) translate(0, 0); z-index:-1; background: -o-linear-gradient(#b91509, #20549d,#23bfe4); background: linear-gradient(#b91509, #20549d,#23bfe4); background: -webkit-linear-gradient(rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0)); background: -o-linear-gradient(rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0)); background: linear-gradient(rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0)); background-color: #ffffff; margin: -5px; transform: rotateZ(-0.5deg) translate(0, 0); content: ''; position: absolute; background: -webkit-linear-gradient(#b91509, #20549d,#23bfe4); z-index:-1; } */ #main .bluebox div, #main .bluebox p { color:#ffffff; font-size: 15px; line-height: 19px; } #main .bluebox.weiss { background-color: #bcbcbc; } #main .bluebox.grau1 { background-color: #34404e; } #main .bluebox.grau2 { background-color: #262e3c; } #main .bluebox.hellblau { background-color: #125169; } #main .bluebox.blau { background-color: #1c293b; } #main .bluebox.dunkelblau { background-color: #0f141d; } #main .bluebox.lila { background-color: #23bfe4; } #main .bluebox.rot { background-color: #a4472c; } #main .bluebox.lila h5 { color: #ffffff; } #main .bluebox .textbox { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; justify-content :center; flex-direction:column; } #main .bluebox .textbox p { line-height: 25px; } #main .bluebox.oben .image_container { position: absolute; top: 0; /*z-index: -1;*/ } #main .bluebox.unten .image_container { position: absolute; bottom: -5px; /*z-index: -1;*/ } /* #main .bluebox .image_container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transform: rotateX(90deg); transition: 1.5s; overflow: hidden; } */ #main .bluebox .headlinecolor { opacity: 0; position: absolute; top: -20px; left:20px; z-index: 905; font-size: 60px; transition: 0.5s; } /* #main .bluebox:hover .headlinecolor { top: 00px; opacity: 0.5; } #main .bluebox:hover .image_container { transform: rotateX(0deg); opacity: 1; } */ #main .bluebox a { position: absolute; bottom: 20px; right: 20px; z-index: 915; font-size: 24px; transition: 0.5s; border: 1px solid #ffffff; background-color: #ffffff; padding: 8px 15px 8px 15px; transform: translateY(30px); opacity: 0; visibility: hidden; } /* #main .bluebox:hover a { transform: translateY(0px); opacity: 0.5; visibility:visible; } */ .left1200 #main .inside { text-align: left; max-width: 1200px; margin-left: auto; margin-right: auto; } .floatleft .rsts-skin-default.rsts-main { /*width: 33%;*/ float:left; } .floatleft .rsts-slide { /*position: relative;*/ } .floatleft .rsts-slide div { height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; } .floatleft .rsts-slide div .boxgrey.center { padding-left: 10%; padding-right: 10%; height: 100%; } /* ****************************************************************************************************************** */ /* --- CookieBar ---------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ .contao-cookiebar .cc-btn, .contao-cookiebar .highlight .success { color: #fff; background-color: #000; } .contao-cookiebar .cc-btn:hover, .contao-cookiebar .highlight .success:hover { background-color: #737373; } .btncookie { display: none !important; } /* ****************************************************************************************************************** */ /* ---mod_breadcrumb ------------------------------------------------------------------------------------------------ */ /* ****************************************************************************************************************** */ nav.mod_breadcrumb { /* position: absolute; top: 80px; left: 130px; */ display: flex; z-index: +3; display: none; } nav.mod_breadcrumb ul { display: flex; flex-direction: row; } nav.mod_breadcrumb ul li { /*text-transform: uppercase;*/ padding: 0; margin: 0; } nav.mod_breadcrumb ul li:after { content: "/"; margin: 0 4px; } nav.mod_breadcrumb ul li:first-child { display: none; } nav.mod_breadcrumb ul li:nth-last-child(1):after { content: "/"; margin: 0 4px; display: none; } /* ****************************************************************************************************************** */ /* --- kalink ------------------------------------------------------------------------------------------------------ */ /* ****************************************************************************************************************** */ section.kalink { position: relative; margin: 20px 0; } section.kalink .subheadline { margin-top: 15px; margin-bottom: 15px; } section.kalink .buttons { display: inline-block; margin: 15px 0 0 0; } section.kalink .image_container { overflow: hidden; height: auto; width: 100%; } section.kalink .image_container a, section.kalink .image_container .nolink { position: relative; width: 100%; height: 100%; display: flex; } section.kalink .image_container img { height: 100%; width: 100%; object-fit: cover; transform: scale(1.0); transition: 1.5s ease-in-out; } section.kalink .image_container a .imgtag, section.kalink .image_container .nolink .imgtag { position: absolute; top: 0; left: auto; right: 0; display: flex; max-width: calc(100% - 20px); /*background-color: rgba(222,222,42,0.8);*/ background-color: rgba(234,234,232,0.8); font-size: 14px; font-weight: 600; padding: 5px 10px; } section.kalink .image_container img:hover { transform: scale(1.2); } /* ****************************************************************************************************************** */ /* --- kalinks ------------------------------------------------------------------------------------------------------ */ /* ****************************************************************************************************************** */ section.kalinks { position: relative; } section.kalinks.diffrows .grid.fr3 { /* grid-column-gap: 40px; grid-row-gap: 40px; grid-auto-rows: auto; grid-auto-flow: row; */ grid-template-columns: repeat(3, 1fr); /* 3 Spalten */ grid-auto-rows: 300px; gap: 20px; } section.kalinks .grid.cnt_2, section.kalinks .grid.cnt_4 { grid-template-columns: 1fr 1fr; } section.kalinks .link { position: relative; display: flex; flex-direction: column; background-color: #f5f5f5; } section.kalinks.diffrows .link.ma1 { grid-column: 1 / 2; grid-row: 1 / span 2; /* doppelte Höhe */ } section.kalinks.diffrows .link.ma2 { grid-row-start: 1; grid-row-end: 3; /* 3 - 1 = 2 Zeilen hoch */ } /* Einzelne Kacheln manuell platzieren */ section.kalinks.diffrows .link.nr0 { grid-column: 1 / 2; grid-row: 1 / span 1; /* doppelte Höhe */ } section.kalinks.diffrows .link.nr1 { grid-column: 2 / 3; grid-row: 1; } section.kalinks.diffrows .link.nr2 { grid-column: 3 / 4; grid-row: 1 / span 2; } section.kalinks.diffrows .link.nr3 { grid-column: 1 / 2; grid-row: 2 / span 2; } section.kalinks.diffrows .link.nr4 { grid-column: 2 / 3; grid-row: 2 / span 2; } section.kalinks.diffrows .link.nr5 { grid-column: 3 / 4; grid-row: 3; } section.kalinks.diffrows .link.bkyellowgreen { background-color:var(--ka-bk-yelgreen); } section.kalinks.diffrows .link.bkblue { background-color:var(--ka-bk-lightblue); } section.kalinks.diffrows .link.bkblue * { color: var(--ka-font-white); } section.kalinks .link.textbottom { justify-content: flex-end; } section.kalinks .link .button { position: relative; /*margin: -23px 0 24px 0;*/ margin: 20px 0 0 0; padding: 0; display: flex; justify-content: center; align-items: center; } section.kalinks .link.bkblue .button { justify-content: flex-start; } section.kalinks .link .button a, #main section.kalinks .link .button a { display: flex; position: relative; background-color: #fff; justify-content: center; padding: 10px 10px; /*width: 300px;*/ width: 70%; margin: 0; text-align: center; z-index: +1; text-transform: uppercase; color: var(--ka-font-green); } #main section.kalinks .link.bkblue .button a { background-color: var(--ka-bk-btn-active); color: var(--ka-font-color); width: auto; text-transform: inherit; justify-content: flex-start; } section.kalinks .link .textbox { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 20px 50px 20px 50px; height: 100%; } section.kalinks .link .textbox h3 { margin-top: 0; padding-top: 0; } section.kalinks .link .textbox a { font-size: 17px; line-height: 17px; } section.kalinks .link .image_container { position: relative; overflow: hidden; height: 100%; } section.kalinks .link .image_container img { height: 100%; width: 100%; object-fit: cover; transform: scale(1.0); transition: 1.5s ease-in-out; } section.kalinks .link .image_container img:hover { transform: scale(1.2); } section.kalinks .link .image_container h3 { position: absolute; top: auto; bottom: 30px; left: 30px; width: calc(100% - 60px); color: var(--ka-font-white); pointer-events: none; } section.kalinks.text { display: flex; } section.kalinks.text .grid.cnt_4 { grid-template-columns: 1fr 1fr 1fr 1fr; } section.kalinks.text .link { display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--ka-bk-white); background-color: var(--ka-bk-blue); } section.kalinks.text .link .textbox { background-color: inherit; padding: 0; } section.kalinks.text .link h3, section.kalinks.text .link .button { margin: 0; padding: 10px 0; background-color: inherit; } section.kalinks.text .link .button a, #main section.kalinks.text .link .button a { text-transform: inherit; padding: 15px 40px 15px 40px; background-color: inherit; color: var(--ka-bk-white); width: auto; font-family: var(--ka-hx-font-family); font-size:34px; line-height:44px; } section.kalinks.banner { position: absolute; top: auto; bottom: -20px; left: 0; width: 100%; z-index: +1; } section.kalinks.banner .fr3111 { grid-template-columns: 3fr 1fr 1fr 1fr; gap: 20px; } section.kalinks.banner .link { background-color: inherit; padding: 0; margin: 0 10px; display: flex; flex-direction: row; align-items: center; background-color: var(--ka-bk-yelgreen); } section.kalinks.banner .link:nth-child(1) { background-color: var(--ka-bk-darkblue); flex-grow: 1; } section.kalinks.banner .link .linkinside { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; width: 100%; padding: 0; margin: 0; } section.kalinks.banner .link:nth-child(1) * { color: var(--ka-font-white); } section.kalinks.banner .link * { padding: 14px 0 11px 0; font-size: 15px; line-height: 18px; } section.kalinks.banner .link h4 { padding: 0 10px 0 25px; margin: 0; font-size: 19px; line-height: 22px; } section.kalinks.banner .link h4.subheadline { padding: 0 10px 0 10px; font-weight: 400; flex-grow: 1; justify-content: flex-start; display: flex; font-size: 17px; line-height: 22px; } section.kalinks.banner .link a { display: flex; background-color: inherit; margin: 0; padding-left: 25px; padding-right: 25px; text-align: center; font-weight: 600; font-size: 19px; line-height: 22px; } section.kalinks.banner .link:nth-child(1) a { padding-left: 25px; padding-right: 25px; font-weight: 600; color: var(--ka-bk-btn-active); } section.kalinks.submenu { display: flex; flex-direction: row; justify-content: center; align-items: center; top: 0; left: 0; width: 100%; z-index: +3; transition: top 500ms ease; background-color: var(--ka-bk-colormiddlegrey); } section.kalinks.submenu.fixed { position: fixed; top:62px; } section.kalinks.submenu .links { max-width: 1600px; margin: 0 auto; padding: 20px 0 15px 0; position: relative; display: flex; flex-direction: row; align-items: center; } section.kalinks.submenu .links .link { position: relative; display: flex; margin: 0 10px; } section.kalinks.submenu .links .link a { color: #fff; background-color: var(--ka-bk-colormiddlegrey); } .footer-landingpages { display: flex; justify-content: center; gap: 80px; border-top: 1px solid #ccc; margin-top: 40px; padding-top: 40px; padding-bottom: 40px; } .footer-landingpages a { font-family:"brother-1816"; font-size: 14px; font-weight: 400; } .submit { /*width:265px;*/ margin:30px 0; background-color: var(--ka-bk-btn-active); /*color: #ffffff;*/ font-weight: 400; border:medium none; cursor: pointer; display: flex; text-align: center; justify-content: center; align-items: center; padding: 5px 12px; margin: 0 0 0 8px; border: 2px solid var(--ka-bk-btn-active); } fieldset { position: relative; display:block; margin:12px 0 12px 0; padding:0px 0 0px 0; } .widget { position: relative; margin:8px 0; } .widget-submit { margin:30px 0 4px 0; } .widget-explanation { margin:20px 0 4px 0; } .widget.plz { width: 100px; float: left; margin-right: 20px; } .widget.ort { width: calc(100% - 120px); float: left; } .widget-textarea label, .widget-captcha label, .widget-text label, .widget-password label, .widget-radio legend, .select label { width:160px; float:left; display:block; font-weight: 600; font-size: 18px; } input.text, input.password, input.captcha { width:calc(100% - 26px); margin:3px 2px; padding: 8px 10px; background-color:#fff; /*border:medium none;*/ border:1px solid var(--ka-bk-grey); } input.captcha { width:75px; margin-right:5px; } textarea { height:200px; margin:3px 2px; padding: 8px 10px; background-color:#fff; border:1px solid var(--ka-bk-grey); width:calc(100% - 26px); } select { width:204px; margin:1px 0; } div.radio_container { margin:5px 0 1px; } div.radio_container span { display:block; padding-right:6px; } input.radio { top:2px; position:relative; margin:1px 2px 0 1px; padding:0; } fieldset.checkbox_container { margin:10px 0 10px 0px; padding-top:0; padding-bottom:0; } fieldset.checkbox_container label { display:block; max-width:calc(100% - 26px); } div.checkbox_container span { display:block; padding-right:6px; } input.checkbox { float:left; margin:9px 12px 0 1px; padding:0; } fieldset span { display: flex; align-items: flex-start; } fieldset legend span { display: inline; } fieldset span label { float: none; } fieldset table td:first-child { margin:1px 0; } #col_0 { width:150px; margin-left:0; } .startform .widget-textarea label, .startform .widget-captcha label, .startform .widget-text label, .startform .widget-password label, .startform .select label { width:180px; float:none; clear:both; display:block; } .startform input.text, .startform input.password, .startform input.captcha, .startform textarea { width:100%; max-width:100%; margin:3px 0 9px; padding-top:6px; padding-bottom:6px; padding-left:6px; background-color:rgba(186,186,186,.5); border:medium none; } .startform fieldset.checkbox_container { width:100%; margin:10px 0; padding-top:0; padding-bottom:0; padding-left:0; } .startform fieldset.checkbox_container label { width:100%; display:block; max-width:calc(100% - 0px); } .startform .submit { width:100%; max-width:100%; margin-top:4px; margin-left:0; padding-top:8px; padding-bottom:6px; text-align:center; background-color:#13a3cf; color:#FFF; border:medium none; cursor: pointer; } .mod_subscribe .formbody { display: flex; flex-direction: row; } .mod_subscribe .widget.widget-text, .mod_subscribe .widget.widget-submit { display: inline-block; } .mod_subscribe input.text { width: 300px; max-width: 300px; margin: 0 10px 0 0; padding: 6px 0 4px 4px; background-color: inherit; border: 0px solid var(--ka-bk-grey); border-bottom: 1px solid var(--ka-bk-btn-active); } .mod_subscribe .widget-submit { margin: 0; } .mod_subscribe .submit { width: auto; padding: 8px 20px 6px 20px; margin: 0; color: var(--ka-bk-blue); background-color: var(--ka-bk-btn-active); transition: all 0.5s ease-in-out; } .mod_subscribe .submit:hover { background-color: var(--ka-bk-btn-hover); } /* ****************************************************************************************************************** */ /* --- Variablen ---------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ :root { --ka-mobile-border:60px; --ka-mobile-font-size:16px; --ka-mobile-line-height:20px; --ka-mobile-font-size:18px; --ka-mobile-line-height:22px; --ka-mobile-statement-font-size: 32px; --ka-mobile-statement-line-height: 36px; } /* ****************************************************************************************************************** */ /* --- max-width: 4096px -------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ @media only screen and (max-width: 4096px) { } /* ****************************************************************************************************************** */ /* --- max-width: 1920px -------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ @media only screen and (max-width: 1920px) { #header .HeaderLogo.top { top:-120px; left: 20px; } #header .HeaderLogo.top img { width: 100px; } section.hiddenmsg.fix .letter-container { font-size: 90px; line-height: 80px; } section.hiddenmsg .letter-container { font-size: 120px; line-height: 100px; } section.kastrecke .locationbox .textbox { max-width: 50%; } section.kapartnerslider .leftblock { padding: 100px 200px; width: calc(50% - 400px); } } /* ****************************************************************************************************************** */ /* --- max-width: 1680px -------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ @media only screen and (max-width: 1680px) { #main .limit1600 { max-width:calc(100% - 2 * var(--ka-mobile-border)); margin-right:auto; margin-left:auto; } section.kalinks.banner .link .linkinside { justify-content: space-between; } section.kalinks.banner .link h4.subheadline { display: none; } section.hiddenmsg .letter-container { font-size: 100px; line-height: 80px; } section.kastrecke .kantone .kantonname { font-size: 50px; line-height: 56px; } section.kapartnerslider .leftblock { padding: 50px 50px; width: calc(50% - 100px); } section.kapartnerslider.mirror .leftblock { padding: 50px 100px; width: calc(50% - 200px); } #footer .inside { padding-left: var(--ka-mobile-border); padding-right: var(--ka-mobile-border); width:calc(100% - 2 * var(--ka-mobile-border)); } } /* ****************************************************************************************************************** */ /* --- max-width: 1460px -------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ @media only screen and (max-width: 1460px) { :root { --ka-font-size:16px; --ka-line-height:22px; } /* h1 { font-size:55px; line-height:64px; } h2 { font-size:45px; line-height:55px; } h3 { font-size:30px; line-height:38px; } h4 { font-size: 22px; line-height: 26px; } */ #main .limit1400 { max-width:calc(100% - 2 * var(--ka-mobile-border)); margin-right:auto; margin-left:auto; } .fixtop { top: 120px; } #main .textimg .left .headline, #main .textimg .left .text, #main .textimg .right .headline, #main .textimg .right .text, #main .textimg .left .button, #main .textimg .right .button { padding-left: var(--ka-mobile-border); padding-right: var(--ka-mobile-border); } section.kapartnerslider .leftblock .button a span.btntext { padding: 7px 20px 7px 20px; } section.kaslider1.img1.single .swiper-slide .container_img1 { margin: 15px 40px 0px 60px; } section.kaslider1.img1.single .swiper-slide .container_img1 h3 { font-size: 18px; line-height: 22px; } section.hiddenmsg .letter-container { font-size: 80px; line-height: 70px; } section.kastrecke .kantone .kantonname { font-size: 42px; line-height: 46px; } section.kastrecke .kantone .textblock .text *, section.kastrecke .locationbox .textbox .whitebox * { font-size: 15px; line-height: 18px; } } /* ****************************************************************************************************************** */ /* --- max-width: 1270px -------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ @media only screen and (max-width: 1270px) { section.kalinks.banner .link:nth-child(1) { display: none; } } /* ****************************************************************************************************************** */ /* --- max-width: 1210px -------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ @media only screen and (max-width: 1210px) { :root { --ka-font-size:18px; --ka-line-height:22px; } #header .HeaderLogo { top: 20px; left: 20px; } #header .HeaderLogo img { width: 80px; } #header .HeaderLogo.top img { width: 80px; } section.bannerslider .textblock p { font-size: 16px; line-height: 18px; } section.bannerslider .awards { margin: 20px 0; } .buttonsblue a, section.bannerslider .textblock .buttons a.button, div.fdlts .swipercontainers .tmainswiper .swiper-slide .textbox .buttons a, div.fdlkonf .buttons a.border, div.fdlkonf .buttons a.back2ts, div.fdlkonf .buttons a.border, div.fdlsend a#sendtoback, div.fdlproductlist a.border { padding: 8px 15px; margin: 0 20px 0 0; border-radius: 20px; font-size: 13px; line-height: 16px; white-space: nowrap; } section.bannerslider .textblock .buttons a.button { margin: 0; } section.bannerslider .textblock h2, section.bannerslider .textblock h3 { font-size: 40px; line-height: 48px; } section.kalinks.banner .link a { padding-left: 15px; padding-right: 15px; font-size: 20px; line-height: 22px; } /* für IPhone */ #banner { /* margin-bottom: -2px; height: calc(var(--vh, 1vh) * 100 - var(--ka-headerheight)) !important; */ } #bannerimage section.kapartnerslider .leftblock h2 { margin: 0 0 10px 0; font-size: 32px; line-height: 36px; } section.kaactionbutton { top: 10px; right: 120px; } div.scrollbk { top: calc(-1 * 85vh); background-size: 170% 85%; } body.bk-fixed-taupe-high { background-size: 200%; } section.kateamslider .swiperbox { width: 100%; max-width: calc(100% - 40px); padding: 0 20px; } .padleft, .content { position: relative; left: 0; transform: translate(0, 0); width: calc(100% - 2 * var(--ka-gl-pad)); padding-left: var(--ka-gl-pad); padding-right: var(--ka-gl-pad); } section.hiddenmsg { padding-left: 50px; } section.hiddenmsg.fix .letter-container, section.hiddenmsg .letter-container { font-size: 60px; line-height: 50px; } section.hiddenmsg .letter { min-width: 32px; } .fixtop { top: 120px; } .limit1000 { max-width: 800px; } section.kastrecke .kantone .kantonname { font-size: 36px; line-height: 42px; } .postop20.posright { position: relative; top: 0; left: 0; right: auto; width: 100%; text-align: center; align-items: center; justify-content: center; } #header #HeaderLogo { } #navanker { } #navmobil { position: absolute; right: 00px; top: 20px; left: auto; } #bannerimage .logocenter img { width: 280px; } #bannertext { top:55%; position:absolute; } #bannertext h1 { font-size:60px; line-height:64px; text-transform:none; } #bannertext p { font:30px/36px Caveat; } .coloredslogan h2 { font-size: 48px; line-height: 52px; } h1, h2, h3, h4, h5 { white-space: normal; } h1 { font-size: 50px; line-height: 60px; } h2 { font-size: 40px; line-height: 50px; margin-bottom: 30px; } h2.benton { font-size:46px; } h3 { font-size: 40px; line-height: 50px; } h4 { font-size: 15px; line-height: 20px; } .dist100 { height: 50px; } .dist50 { height: 35px; } #main .limit1200 { max-width:calc(100% - 2 * var(--ka-mobile-border)); margin-right:auto; margin-left:auto; } .boxgrey { padding-right:0px; padding-left:0px; width:calc(100% - 0px); } .boxblack { padding-right:0px; padding-left:0px; width:calc(100% - 0px); } .bildlink .image { width: calc(25% - 12px); } .bildlink .image.nr9, .bildlink .image.nr10 { display:none; } #main .limit1200 { /* margin-right:10px; margin-left:10px; */ } section.mobileslider1.hover .msdesktop .textblock .headline { font-size: 18px; line-height: 22px; } section.mobileslider1.hover .msdesktop .textblock * { font-size: 14px; line-height: 17px; } #main section.mobileslider1 { margin: 0 0 20px 0; } #main section.mobileslider1 .msmobile img { max-width: 80%; } section.mobileslider1 .msmobile .swiper-button-prev { left: 0; } section.mobileslider1 .msmobile .swiper-button-next { right: 0; } section.kateamslider .rightblock { padding: 0px 80px 0px 80px; width: calc(50% - 160px); } section.kapartnerslider .leftblock, section.kapartnerslider.mirror .leftblock { padding: 50px 50px; width: calc(50% - 100px); } #banner section.kapartnerslider .leftblock, #banner section.kapartnerslider .rightblock { height: 100%; } section.kapartnerslider .swiper-slide .textblock, section.kapartnerslider .swiper-slide .socials, section.kapartnerslider .leftblock .button { position: relative; top: 0; bottom: auto; margin: 10px 0; display: flex; flex-direction: column; } section.kapartnerslider .swiper-slide .socials { flex-direction: row; margin-top: 20px; } section.kapartnerslider .leftblock .button { display:inline-block; } section.kapartnerslider .leftblock .button a span.btntext { padding: 7px 20px 6px 20px; } section.kapartnerslider .swiper-slide .socials .social, #footer .socials img { width: 34px; height: 34px; } section.kapartnerslider .leftblock .button a { min-width: 120px; } section.kapartnerslider .leftblock .button a span { font-size: 14px; /*padding: 6px 20px 4px 20px;*/ } section.kapartnerslider .leftblock .button a::after { background-size: 35%; width: 30px; height: 30px; } /* section.kapartnerslider .swiper-button-prev, section.kapartnerslider .swiper-button-next { width: 0px !important; height: 0px !important; } */ .movetop120, section.kateamslider .bottomblock .scrollblock { top: -80px; margin-bottom: -80px; } .col33m { margin-left: 20px; margin-right: 20px; width: calc(100% - 40px); } #footer { padding: 20px 0 20px 0; } #footer .inside { padding-right:var(--ka-mobile-border); padding-left:var(--ka-mobile-border); width:calc(100% - 2 * var(--ka-mobile-border)); } .footer-landingpages { flex-direction: column; gap: 20px; align-items: center; text-align: center; } } @media only screen and (max-width: 1060px) { #mainnav, #header .mod_changelanguage { display:none; } } /* ****************************************************************************************************************** */ /* --- max-width: 980px --------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ @media only screen and (max-width: 980px) { :root { --ka-mobile-border:40px; } #bannerimage .ce_countdown { width: 700px; } #main .limit1000 { max-width:calc(100% - 2 * var(--ka-mobile-border)); margin-right:auto; margin-left:auto; } #main .downbutton { top: -43px; margin: 0 0 -49px 0; } .grid.fr2, .grid.fr21 { grid-template-columns: 1fr; grid-column-gap: 0px; grid-row-gap: 40px; } .grid.fr3 { grid-template-columns: 1fr 1fr; grid-column-gap: 20px; grid-row-gap: 20px; } .grid.fr4 { grid-template-columns: 1fr 1fr; grid-column-gap: 20px; grid-row-gap: 20px; } .buttonsblue { display: flex; flex-direction: column; margin: 50px 0 0 0; max-width: 300px; } .buttonsblue .content-hyperlink { margin: 10px 0; } #main .textimg .textblock { padding: 20px var(--ka-mobile-border) 20px var(--ka-mobile-border); } #main .textimg.cols3 .textblock { padding: 20px 0 20px 0; } #main .textimg .grid.textxcol { margin: 0 0 00px 0; } #main .textimg.cols3 .grid { grid-template-columns: 1fr; grid-column-gap: 0; } #main .textimg .linkblock { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; padding: 20px 40px; /*background-color: var(--ka-bk-darkblue); color: var(--ka-font-white);*/ } section.kalinks.diffrows .grid.fr3 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 300px; gap: 20px; } /* Einzelne Kacheln manuell platzieren */ section.kalinks.diffrows .link.nr0 { grid-column: 1 / 2; grid-row: 1 / span 1; } section.kalinks.diffrows .link.nr1 { grid-column: 2 / 3; grid-row: 1; } section.kalinks.diffrows .link.nr2 { grid-column: 1 / 2; grid-row: 2 / span 2; /* z.B. doppelt hoch */ } section.kalinks.diffrows .link.nr3 { grid-column: 2 / 3; grid-row: 2; } section.kalinks.diffrows .link.nr4 { grid-column: 2 / 3; grid-row: 3; } section.kalinks.diffrows .link.nr5 { grid-column: 1 / 3; grid-row: 4; } section.kalinks.text .link .button a, #main section.kalinks.text .link .button a { text-transform: inherit; padding: 10px 20px 10px 20px; background-color: inherit; color: var(--ka-bk-white); width: auto; } #footer .inside { display: flex; flex-direction: column; flex-flow: column; justify-content: center; } #footer .inside .column { margin: 10px 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } } /* ****************************************************************************************************************** */ /* --- max-width: 850px --------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ @media only screen and (max-width: 850px) { :root { --ka-font-size:18px; --ka-line-height:22px; } #header.top { top:-120px; } #header .contact a.search, #header .contact a.btn.immo { display: none; } section.kaactionbutton { /* top: 0px; right: 100px; */ } section.kaactionbutton .buttons a.button { width: 150px; } div.scrollbk { top: calc(-1 * 33vh); background-size: 200% 80%; } body.bk-fixed-taupe-high { background-size: 300%; } body.dark #banner .bannertext .image .headline { top: 33%; font-size: 32px; line-height: 36px; } a, body, fieldset, form, input, label, li, ol, optgroup, p, select, td, th, textarea, ul { } h1 { /* font-size:45px; line-height:50px; */ } /* h2 { font-size:30px; line-height:34px; } h3 { font-size:30px; line-height:34px; } */ h4 { /* margin-top: 20px; */ } .col25 { width: 50%; } #navmobil { left:calc(50% - 16px); top:20px; position:absolute; display:block; } html.mm-opening .mm-slideout { -webkit-transform: translate(260px, 0); -moz-transform: translate(260px, 0); -ms-transform: translate(260px, 0); -o-transform: translate(260px, 0); transform: translate(260px, 0); } .mm-menu { max-width: 260px; } #mmenu .mm-selected.mm-opened strong { overflow:hidden; display:block; padding:10px 10px 10px 20px; line-height:20px; text-overflow: ellipsis; white-space: nowrap; } #header { /*height:88px;*/ } #header .inside { } /* #header #HeaderLogo { width:210px; left:5px; top:0; position:absolute; } #banner { margin-top:88px; } */ #banner, #bannerimage { /* position: relative; max-height: calc(70vh - 0px) !important; */ } body.dark #banner, body.dark #bannerimage { max-height: 100% !important; } #bannerimage .ce_player, #bannerimage .image_container img, #bannerimage .video_container video, #bannerimage .previewvideo video { width: 100%; height: 100%; object-fit: cover; /* position: absolute; left:-10%; width: 120%; max-width: 120%; height: auto; */ } #bannerimage .previewvideo video { position: relative; } .previewvideo .videobtn { /*right:10px;*/ } #main .limit800 { max-width:calc(100% - 2 * var(--ka-mobile-border)); margin-right:auto; margin-left:auto; } #bannertext { top:120px; position:absolute; } #bannertext h1 { font-size:40px; line-height:44px; text-transform:none; } #bannerimage .downbutton img { height:40px; } #main .ce_image img { /*max-width:90%;*/ } body.home .msry_theme_standard .masonry_gallery { width: calc(33.3% - 20px); } #cboxTitle, #cboxCurrent { font-size:14px; } #cboxContent { margin: 0px 0px 0 0px; background-color: rgba(0,0,0,0.01); overflow: visible; } #cboxCurrent { bottom:0px !important; top: auto; right:0px; } #cboxPrevious { left: 0px; } #cboxNext { right: 0px; } #cboxClose { top: 0; } .ce_gallery.masonry ul { column-count: 2; column-gap: 0em; } div.projects { flex-wrap: wrap; } #main .projectlink { width: 50%; } .artikelepisoden .grid h4 { min-height: 44px; } .artikelepisoden .grid .image_container, .grid.fr3.imgw50 .mod_subscribe form { max-width: 200px; display: inline-block; justify-content: center; } .grid.fr3.imgw50 .mod_subscribe form { height: 34px; padding: 12px; max-width: 176px; } .grid.fr3.imgw50 .mod_subscribe form { /*max-width: calc(100% - 40px) !important;*/ } fieldset.checkbox_container, fieldset.checkbox_container label { width:100%; max-width:100%; margin-right:0; margin-left:0; } .grid.fr3.imgw50 .mod_subscribe form .widget-text { width: calc(100% - 40px); } .grid.fr3.imgw50 .mod_subscribe form input.text, form { font-size: 12px; line-height: 15px; } .grid.fr3.imgw50 .mod_subscribe form .submit { width: 30px; height: 30px; } section.textrandomimg { padding: 50px 0 50px 0; } section.textrandomimg .imgblock { position: relative; left: 0; top: 0; max-width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 20px; grid-row-gap: 20px; margin: 30px 0 0 0; transform: translate(0, 0); } section.textrandomimg .imgblock .image_container, section.textrandomimg .imgblock .image_container.no_1, section.textrandomimg .imgblock .image_container.no_2, section.textrandomimg .imgblock .image_container.no_3, section.textrandomimg .imgblock .image_container.no_4, section.textrandomimg .imgblock .image_container.no_5, section.textrandomimg .imgblock .image_container.no_6, section.textrandomimg .imgblock .image_container.no_7, section.textrandomimg .imgblock .image_container.no_8 { position: relative; left: 0; top: 0; /*width: 270px;*/ max-width: calc(100% - 0px); display: flex; justify-content: center; align-items: center; } section.mobileslider1 .msdesktop, section.counterlinks .msdesktop { display: none; } section.mobileslider1 .msmobile, section.counterlinks .msmobile { display: block; } section.mobileslider1 .msmobile { margin: 25px 0 0 0; } section.mobileslider1 .msmobile .swiper-slide .textblock { position: relative; color: var(--ka-font-color); } section.mobileslider1 .msmobile .swiper-slide .textblock .text *, section.mobileslider1 .msmobile .swiper-slide .textblock * { color: var(--ka-font-color); } section.mobileslider1 .msmobile .swiper-slide .textblock .button { margin: 25px 0 0 0; display: flex; justify-content: center; } section.mobileslider1 .msmobile .swiper-slide .button a { background-color: var(--ka-bk-darkgray); display: flex; min-width: 180px; min-width: 1px; transition: all 0.5s ease-in-out; } section.mobileslider1 .msmobile .swiper-slide .button a span { display: flex; text-align: center; justify-content: center; align-items: center; color: #fff; text-transform: uppercase; font-weight: 900; font-style: italic; letter-spacing: 0.05em; font-size: 12px; line-height: 12px; padding: 5px 10px 3px 10px; } section.mobileslider1 .msmobile .swiper-slide .button a::after { margin: 0; content: ""; display: flex; width: 31px; height: 31px; background-color: var(--ka-bk-orange); background-image: url('/files/intern/common/fmd-iron-summit-pfeil-rechts.svg'); background-repeat: no-repeat; background-position: center; background-size: 35%; } #main .content-image.maxw400 { display: flex; justify-self: start; } .kaslogan .imgblock img.desktop { display: none; } .kaslogan .imgblock img.mobile { display: flex; } section.kateamslider { margin: 40px 0 40px 0; } section.kateamslider .teaserlist a.teaser .image_container { width: 120px; height: 120px; } section.kateamslider .teaserlist img { width: 80px; height: 80px; } section.kateamslider .teaserlist .teaser div.name { display: none; } section.kateamslider .teaserlist .teaser div.vorname { display: flex; align-items: center; justify-content: center; color: #000; } section.kateamslider .swiper-slide { justify-content: flex-start; } section.kateamslider .swiper-slide .msdesktop { display: none; } section.kateamslider .swiper-slide .msmobile { position: relative; display: flex; flex-direction: column; height: auto; } section.kateamslider .swiper-container { } section.kateamslider .swiper-slide .msmobile .imageblock { position: relative; min-height: 500px; display: flex; } section.kateamslider .swiper-slide .msmobile .imageblock .image { position: relative; width: 100%; height: auto; z-index: -2; } section.kateamslider .swiper-slide .msmobile .imageblock .image img, section.kateamslider .swiper-slide .msmobile .imageblock .image video { position: relative; display: flex; width: 100%; height: 100%; object-fit: cover; } section.kateamslider .swiper-slide .msmobile .imageblock .imagetext { position: absolute; top: auto; bottom: 0; padding: 0 var(--ka-mobile-border) var(--ka-mobile-border) var(--ka-mobile-border); width: calc(100% - 2 * var(--ka-mobile-border)); } section.kateamslider .swiper-slide .msmobile .imageblock h2 { color: #fff; } section.kateamslider .swiper-slide .msmobile .imageblock .text { color: #c1c1c1; } section.kateamslider .swiper-slide .msmobile .imageblock .shadow { position: absolute; top: auto; bottom: 0; padding: 0; width: 100%; height: 50%; background-image: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.7)); z-index: -1; } section.kateamslider .swiper-slide .msmobile .textblock { position: relative; padding: 20px 20px 20px 20px; background-color: #fff; } section.kateamslider .swiper-slide .msmobile .textblock .socials { position: relative; padding: 0; width: calc(100% - 2 * var(--ka-mobile-border)); justify-content: flex-start; max-width: 100%; } section.kateamslider .swiper-slide .socials { position: relative; top: 0; bottom: auto; margin: 30px 0 0 0; } section.kateamslider .swiper-slide .socials a { display: flex; } section.kateamslider .swiper-slide, section.kapartnerslider .swiper-slide { flex-direction: column; } section.kastrecke .teaserlist .tlinside { position: relative; width: 100%; display: block; } section.kastrecke .scrollbox { padding: 0px 0 0px 0; } section.kastrecke .streckelist .etappe .point { width: 16px; height: 16px; transform: translate(-8px, 0px); } section.kastrecke .streckelist .etappe .textblock { min-width: 100px; } section.kastrecke .streckelist .etappe.ziel .textblock { position: absolute; left: 0; top: 0; transform: translate(-50%, -220%); display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; min-width: 150px; } section.kastrecke .streckelist .etappe.ziel .icon { position: absolute; left: 0px; top: 0px; transform: translate(-10px, -100%); width: 80px; height: 80px; } section.kastrecke .streckelist .etappe .textblock .keywords, section.kastrecke .streckelist .etappe .textblock .ziel { font-size: 12px; line-height: 14px; } section.kastrecke .streckelist .etappe .textblock .ort { font-size: 14px; line-height: 16px; } section.kastrecke .streckelist .etappe .textblock .hoehe, section.kastrecke .streckelist .etappe .textblock .o2 { font-size: 18px; line-height: 20px; } section.kastrecke .streckelist .etappe .textblock .hoehe { margin-top: 3px; } section.kastrecke .kantone .kantonname { font-size: 32px; line-height: 38px; } section.kateamslider .rightblock, section.kapartnerslider .leftblock, section.kapartnerslider.mirror .leftblock { padding: 100px 100px; width: calc(100% - 200px); } section.kateamslider .leftblock, section.kapartnerslider .rightblock { width: 100%; } #bannerimage section.kapartnerslider .leftblock h2 { margin: 0 0 10px 0; font-size: 30px; line-height: 34px; } #bannerimage section.kapartnerslider .leftblock, #bannerimage section.kapartnerslider .rightblock { height: 50vh; } section.kapartnerslider .swiper-slide { height: auto; } section.kapartnerslider .rightblock { min-height: 100px; } section.kapartnerslider .leftblock, section.kapartnerslider.mirror .leftblock { padding: 50px 50px; width: calc(100% - 100px); order: 2; display: flex; flex-direction: column; } #bannerimage section.kapartnerslider .leftblock { } section.kapartnerslider .rightblock { position: relative; /*max-height: 400px;*/ order: 1; } section.kapartnerslider .leftblock .leftinside { max-width: 100%; height: auto; height: 100%; display: flex; flex-direction: column; align-items: flex-start; } #bannerimage section.kapartnerslider .leftblock .leftinside { justify-content: flex-start; } section.kapartnerslider .swiper-slide .textblock, section.kapartnerslider .swiper-slide .socials, section.kapartnerslider .leftblock .button { position: relative; top: 0; bottom: auto; margin: 10px 0; display: flex; flex-direction: column; } section.kapartnerslider .swiper-slide .socials { flex-direction: row; } section.kapartnerslider .leftblock .button { display:inline-block; } section.kapartnerslider .rightblock .images, section.kapartnerslider .rightblock .images .image { height: 100%; } section.kapartnerslider .rightblock .images img.image { width: 100%; height: 100%; object-fit: cover; } section.kapartnerslider .rightblock .logo { top: 20px; left: auto; right: 20px; max-width: 25%; } #main .textimg .left .headline, #main .textimg .left .text, #main .textimg .right .headline, #main .textimg .right .text, #main .textimg .left .button, #main .textimg .right .button { padding-left: var(--ka-mobile-border); padding-right: var(--ka-mobile-border); } #main .textimg .col50 { width: 100%; } #main .textimg .imgblock .image_container { min-height: 20px; } #main .textimg .image img { position: absolute; width: 100%; height: 100%; left: 0; object-fit: cover; display: inline-block; max-width: 100%; } #main .textimg .left .flexcontainer .imgblock { order: 1; width: 100%; } #main .textimg .left .flexcontainer .textblock.col33, #main .textimg .left .flexcontainer .textblock.col40 { order: 2; width: 100%; } #main .textimg .right .flexcontainer .imgblock { order: 1; width: 100%; } #main .textimg .right .flexcontainer .textblock.col33, #main .textimg .right .flexcontainer .textblock.col40 { order: 2; width: 100%; } #main .textimg .textblock { } #main .ce_youtube.col50, #main .ce_youtube.col50m { float:none; width: 100%; padding-bottom: 0%; margin-bottom: 20px; } #main .mod_newslist .news-blog.col3 { width:calc(50% - 10px); } #banner .mod_newslist .news-blog.col3 .blogtext h4 { text-align: center; } body.dark .text.col33 { width: 80%; } #main .experts > *, #main .expert { flex: 0 0 calc(50% - 10px); } .fla { width: 50%; } #footer { height: 100%; } /* #footer .inside { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } #footer .inside .column { width: calc(50% - 40px); margin: 20px 20px 20px 20px; padding: 0; flex-basis: calc(50% - 40px); max-width: 100%; } */ #footer .inside .column.logo { width: 100%; flex-basis: 100%; margin: 20px 0; } #footer .inside .column.sponsored, #footer .inside .column.socials { } #footer .line2 .inside > div, #footer .line2 .inside > nav { /* display: flex; flex-direction: column; flex-basis: 50%; max-width: 100%; margin: 20px 0; */ } #footer .inside h4, #footer .mod_footer_navi li { text-align: center; } } /* ****************************************************************************************************************** */ /* --- max-width: 750px --------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ @media only screen and (max-width: 750px) { section.kalinks.banner { display: none; } } /* ****************************************************************************************************************** */ /* --- menu-mobile -------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ @media only screen and (max-width: 1060px) { :root { --ka-cr-pad: var(--ka-mobile-border); } #navmobil { width:32px; height:32px; right:15px; position:absolute; top:25px; z-index: 990; cursor: pointer; transition: all 750s ease-in-out; } .mobile_menu_overlay { z-index: 990; } .mobile_menu { width:100%; height: 100vh; z-index: 999; } .mobile_menu .logo { position: absolute; top:20px; left:50%; width: 180px; max-width: 33%; transform: translate(-50%, 0); } .mobile_menu .mod_changelanguage { width:100%; display: flex; flex-direction:column; align-items: center; } .mobile_menu .mod_changelanguage ul { margin: 0; padding: 0; margin-left: -14px; margin-top: 16px; } .mobile_menu .contact { position: absolute; bottom: 100px; width:100%; text-align: center; } .mobile_menu .contact * { color: #ffffff; font-size: 18px; } .mobile_menu .socials { position: absolute; bottom: 45px; width:100%; text-align: center; } .mobile_menu .socials a { width:20px; height:20px; margin: 0 15px 0 15px; } .mobile_menu .socials img { width:20px; } .mobile_menu .kontakt { position: absolute; bottom: 20px; top: auto; left: 5%; display: flex; flex-direction: column; justify-content: center; margin: 0 auto; width: 90%; } .mobile_menu .kontakt * { font-size: 12px; line-height: 14px; text-align: center; } .mobile_menu .kontakt .hl { font-family: var(--ka-menu-font-family); font-weight: 700; } .mobile_menu .kontakt .text { font-family: var(--ka-menu-font-family); font-weight: 300; margin: 20px 0 0 0; } .mobile_menu .mobileclose { position: absolute; top:20px; right: 20px; display: block; width: 32px; height: 32px; } .mobile_menu .inner { height: 100%; background-color: #4d4a46; color:#f1f1f1; text-transform:uppercase; font:18px Open Sans,Arial,sans-serif; z-index: 999; display:flex; flex-direction: column; align-items: center; justify-content: center; position: relative; } .mobile_menu .verlauf { position: absolute; left: auto; top: auto; bottom: 0; right: 0; width: 100%; height: 100%; background-image: url('/files/intern/common/mobile-menu-background.png'); background-repeat: no-repeat; background-position: right; background-size: contain; pointer-events: none; } .mobile_menu .inner .ce_text1, .mobile_menu .inner .ce_text h1, .mobile_menu .inner .ce_text p { margin-top:0; margin-bottom:0; padding:10px 0 10px 15px; font-size:18px; color:#FFF; } .mobile_menu .nav-container { clear:both; /*width: 100%;*/ margin:0; margin-top:-125px; } .mobile_menu .mod_navigation ul.level_1 { min-width: 350px; margin:0; padding:0; } .mobile_menu li.active.submenu_show > ul { padding-top:8px; } .mobile_menu .mod_navigation ul li { float:none; clear:both; margin:0; padding:0; list-style-type:none; width:calc(100% - 15px); } .mobile_menu .mod_navigation li span { /*das Pfeilchen*/ width:100%; position:relative; display:block; font-size:20px; line-height: 22px; } .mobile_menu .mod_navigation a, .mobile_menu .mod_navigation li span, .mobile_menu .mod_navigation li.active strong { width:100%; display:block; margin-top:0; margin-bottom:0; padding:5px 0; text-align:center; font-size:22px; line-height: 26px; text-decoration:none; color:#f1f1f1; height:auto; color: white; font-weight:500; font-family: var(--ka-menu-font-family); } .mobile_menu .mod_navigation li.active strong { color:var(--ka-font-orange); } .mobile_menu .mod_navigation a:focus, .mobile_menu .mod_navigation a:hover { /*color:#c2c2c2;*/ } .mobile_menu .mod_navigation a.trail:focus, .mobile_menu .mod_navigation a.trail:hover { color:#fff; } .mobile_menu .submenu > a1::after, .mobile_menu .submenu > span::after { width:30px; height:28px; right:15px; position:absolute; display:inline-block; text-align:center; font-size:32px; line-height:32px; top:-6px; content: '›'; } .mobile_menu .submenu_show > a::after, .mobile_menu .submenu_show > span::after { text-indent:4px; transform: rotate(90deg); } .mobile_menu .mod_navigation li.active.submenu_show { padding-top: 4px; padding-bottom:0; /*border:0px solid #666;*/ } .mobile_menu ul.level_2 ul { margin-bottom: 0; } .mobile_menu ul.level_2 a, .mobile_menu ul.level_2 span, .mobile_menu ul.level_2 li.active strong { font-size:20px; line-height: 22px; font-family: var(--ka-hx-font-family); } .mobile_menu ::-webkit-scrollbar { display:none; } .mobile_menu { display:none; -ms-overflow-style: none; // IE 10+ overflow: -moz-scrollbars-none; // Firefox overflow-y: -moz-hidden-unscrollable; -moz-scrollbars-vertical:hidden; } } /* ****************************************************************************************************************** */ /* --- max-width: 600px --------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ @media only screen and (max-width: 600px) { :root { --ka-mobile-border:20px; --ka-mobile-font-size:16px; --ka-mobile-line-height:20px; --ka-line-height: 21px; } a, body, fieldset, form, input, label, li, ol, optgroup, p, select, td, th, textarea, ul { font-size:16px; line-height:var(--ka-line-height); } #header.top { top:-120px; } #header .contact { display: none; } #header .HeaderLogo { left: 50%; top: 20px; transform: translate(-50%, 0); } #header .HeaderLogo.top { /*top: -120px;*/ left: 50%; } section.bannerslider .textblock.bottomright { width:calc(100% - 2 * var(--ka-mobile-border)); max-width:calc(100% - 2 * var(--ka-mobile-border)); left: var(--ka-mobile-border); right: auto; } div.scrollbk { /* position: absolute; top: -110%; left: 0; width: 100%; background-size: 100% 100%; background-size: cover; height: 200%; z-index: -1; overflow: hidden; */ } div.scrollbk { top: calc(-1 * 33vh); background-size: 500% 80%; } #header.small { top:0px; } #header #HeaderLogo { left: 0; } #header #HeaderLogo img { max-width: 120px; } #bannerimage .downbutton { display: none; } #bannerimage { position: relative; /*min-height: calc(66vh - 0px) !important;*/ /*max-height: calc(100vh - 50px) !important;*/ } body.home #banner { min-height: 50px !important; max-height: 100vh !important; } #bannerimage .image_container img, #bannerimage .video_container video, #bannerimage .previewvideo video { /* left:-50%; width: 200%; max-width: 200%; height: auto; */ } #bannerimage .centerblock { top: 45%; } .previewvideo .videobtn { font-size: 12px; line-height: 12px; } #bannerimage .downbutton, .fmdep .downbutton { display: none; } section.bannerslider .textblock, section.bannerslider .textblock.bottomcenter { width: 100%; } section.bannerslider .textblock h2, section.bannerslider .textblock h3 { font-size: 30px; line-height: 36px; padding: 0; width: 100%; } section.bannerslider .image_container img.image.mobile { display: flex; } section.bannerslider .image_container img.image.desktop { display: none; } section.bannerslider .textblock.centerright { top: 0; left: 0; right: auto; transform: translate(0, 0); width: 100%; height: 100%; max-width: 100%; max-height: 100%; } section.bannerslider .textblock .textbox { position: relative; display: flex; flex-direction: column; width: calc(100% - 4 * var(--ka-mobile-border)); height: 100%; margin: 90px 0 0 0; } section.bannerslider .textblock * { text-align: center; } section.bannerslider .textblock .buttons, section.bannerslider .textblock .awards { width: 100%; position: absolute; top: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; } section.bannerslider .textblock .buttons { bottom: 160px; } section.bannerslider .textblock .awards { bottom: 20px; } section.bannerslider .awards img.award1 { max-width: 160px; max-height: 80px; } section.bannerslider .awards img { max-width: 260px; margin: 5px 0 0 0; } #navmobil { position: absolute; right: 20px; top: 20px; left: auto; } #header .HeaderLogo img { width: 100px; } #navanker { } #header #HeaderLogo .images div, #navanker div.hamburger, #navanker a { width: 60px; height: 60px; } #navanker div.hamburger span, #navanker a span { display: none; } #main .downbutton { top: -43px; margin: 0 0 -49px 0; } .movetop120 { top: -30px; padding: 10px 20px; margin-bottom: -30px; } .m50p { top: auto; bottom: 0px; } .m40p { top: auto; bottom: 0px; width: 100%; overflow: hidden; } .m40p img { width: 200%; max-width: 200% !important; overflow: hidden; transform: translate(-25%, 0); } #main .inside { width:100%; margin-right:0; margin-left:0; padding-right:0; padding-left:0; width:calc(100% - 0px); } h1 { font-size:40px; line-height: 45px; letter-spacing:.01em; margin-bottom: 10px; } h1:after { margin: 10px 0 0px 0; } h1.mobilelimit { margin: 5px auto; max-width: 280px; } .powered h1 { font-size:15px; line-height: 19px; letter-spacing:.01em; } .powered h1 { font-size:15px; line-height: 19px; letter-spacing:.01em; display: flex; flex-direction: column; } .postop20.posright .ktext { margin: 0; padding: 0; width: auto; } h2 { font-size:30px; line-height:36px; margin-bottom: 30px; } h2.benton { font-size:36px; /*font-weight: 400;*/ margin-left: 10px; } h3 { font-size:24px; line-height:28px; } .flexcontainer > h3 { margin-left: 10px; } h4 { font-size:15px; line-height:18px; } h5 { font-size:13px; line-height:16px; } h2.bigtext { margin-top: -20px; margin-bottom: 0px; font-size: 36px; line-height: 46px; } .bigtext p { font-size: 22px; line-height: 28px; } .col25, .col33, .col40, .col50, .col50m, .col50mr, .col60, .col66, .startbox, .startbox50, .partner, .prodlink, .col33line, .col40line, .col50line, .col60line, .col66line, .flink div.linkimg, #main .ce_youtube.col50, #main .ce_youtube.col50m { margin-right:0; margin-left:0; padding-right:0px; padding-left:0px; width: calc(100% - 0px); height:100% !important; } .ce_text { /* padding: 0 var(--ka-mobile-border); width: calc(100% - 2 * var(--ka-mobile-border)); */ } .ktext { /* padding: 0 var(--ka-mobile-border); width: calc(100% - 2 * var(--ka-mobile-border)); */ } .dist150 { height: 75px; } .dist100 { height: 50px; } .dist50 { height: 25px; } .dist25, .dist30 { height: 20px; } .ce_gallery ul.cols_4 li, .ce_gallery ul.cols_5 li, .ce_gallery ul.cols_6 li { padding-left: 2px; padding-right: 2px; margin-bottom: 4px; width: calc(25% - 4px); } .ce_gallery ul.cols_6 li { width: calc(33.3% - 4px); } .ce_gallery ul.cols_7 li { padding-left: 5px; padding-right: 5px; margin-bottom: 10px; width: calc(25% - 10px); } .grid.fr4 { grid-template-columns: 1fr 1fr; } .grid.fr3 { grid-template-columns: 1fr; } .grid.fr3.imgw50 h4 { display: none; } .grid.fr12, .grid.fr21 { grid-template-columns: 1fr; } /* .grid.fr3.imgw50 img { max-width: 55% !important; } */ .grid.fr3.imgw50 .mod_subscribe form { max-width: calc(55% - 40px) !important; height: 30px; } .grid.fr3.imgw50 .mod_subscribe form formbody { display: flex; flex-direction: column; } .grid.fr3.imgw50 .mod_subscribe form input.text { width: calc(100% - 20px); } .buttonsblue a, section.bannerslider .textblock .buttons a.button, div.fdlts .swipercontainers .tmainswiper .swiper-slide .textbox .buttons a, div.fdlkonf .buttons a.border, div.fdlkonf .buttons a.back2ts, div.fdlsend a#sendtoback, div.fdlproductlist a.border { padding: 8px 13px; } section.kalinks.diffrows { padding: 0 20px; } .scroll.gapgrow, section.kalinks.diffrows .grid.fr3.scroll.gapgrow { grid-row-gap: 25px; } section.kalinks.diffrows .grid.fr3.scroll.gapgrow.scrollinout { grid-row-gap: 0px; } section.kalinks .link .image_container h3 { left: 50px; } section.kalinks .link .textbox { margin: 0; padding: 20px 40px 20px 50px; } .swiper-button-prev, .swiper-button-next { width: 30px !important; height: 30px !important; } section.kaslider1.img1.part .swiper-slide .textbox { position: relative; width: 100%; } section.kaslider1.img1.part .swiper-slide .textbox .headline, section.kaslider1.img1.part .swiper-slide .textbox .text { padding: 20px 40px; height: auto; } section.kaslider1.img1.part .swiper-slide .container_img1 .image_container { height: 300px; } #main .textimg .grid.textxcol { position: relative; display: block; grid-row-gap: 0px; } #main .textimg .linkblock { align-items: flex-start; padding: 20px var(--ka-mobile-border); } .kaslogan .textblock { align-items: center; padding: 0 20px 0 20px; width: auto; } .kaslogan .textblock * { font-size: 30px; line-height: 36px; } section.kalinks.text .grid.cnt_4 { grid-column-gap: 10px; grid-row-gap: 10px; } section.kalinks.text .link .button a, #main section.kalinks.text .link .button a { padding: 15px 20px 15px 20px; font-size:20px; line-height:24px; } fieldset.checkbox_container, fieldset.checkbox_container label { width:100%; max-width:100%; margin-right:0; margin-left:0; } .grid.fr3.imgw50 .mod_subscribe form .widget-text { width: calc(100% - 32px); } .grid.fr3.imgw50 .mod_subscribe form input.text, form { font-size: 12px; line-height: 15px; } .grid.fr3.imgw50 .mod_subscribe form .submit { width: 30px; height: 30px; } #main .textimg .imgblock { min-height: 200px !important; } #main .textimg.imgcnt_0 .imgblock { min-height: 00px !important; } #main .limit1600, #main .limit1400, #main .limit1200, #main .limit1000, #main .limit800 { max-width:calc(100% - 2 * var(--ka-mobile-border)); margin-right:auto; margin-left:auto; } section.kalinks.diffrows .grid.fr3 { grid-template-columns: repeat(1, 1fr); grid-auto-rows: auto; gap: 20px; } /* Einzelne Kacheln manuell platzieren */ section.kalinks.diffrows .link.nr0, section.kalinks.diffrows .link.nr1, section.kalinks.diffrows .link.nr2, section.kalinks.diffrows .link.nr3, section.kalinks.diffrows .link.nr4, section.kalinks.diffrows .link.nr5, section.kalinks.diffrows .link.nr6, section.kalinks.diffrows .link.nr7, section.kalinks.diffrows .link.nr8 { grid-column: auto; grid-row: auto; } section.textrandomimg .imgblock { grid-template-columns: 1fr; grid-column-gap: 0px; } section.textrandomimg .imgblock .image_container, section.textrandomimg .imgblock .image_container.no_1, section.textrandomimg .imgblock .image_container.no_2, section.textrandomimg .imgblock .image_container.no_3, section.textrandomimg .imgblock .image_container.no_4, section.textrandomimg .imgblock .image_container.no_5, section.textrandomimg .imgblock .image_container.no_6, section.textrandomimg .imgblock .image_container.no_7, section.textrandomimg .imgblock .image_container.no_8 { position: relative; left: 0; top: 0; width: calc(100% - 0px); max-width: 600px; } section.textrandomimg .imgblock .image_container.no_2, section.textrandomimg .imgblock .image_container.no_3, section.textrandomimg .imgblock .image_container.no_4, section.textrandomimg .imgblock .image_container.no_5, section.textrandomimg .imgblock .image_container.no_6, section.textrandomimg .imgblock .image_container.no_7, section.textrandomimg .imgblock .image_container.no_8 { display: none; } #main .projectlink.imagegrow .text, #main .projectlink.flat h2, #main .projectlink.flat .headline, #main .projectlink.flat .button, #main .projectlink.flat .text, #main .textimg .left .headline, #main .textimg .left .text, #main .textimg .right .headline, #main .textimg .right .text, #main .textimg .left .button, #main .textimg .right .button { padding-left: 20px; padding-right: 20px; } #main .textimg .textblock { padding-top: 5px; padding-bottom: 5px; } #main .projectlink.flat h2, #main .projectlink.flat .headline, #main .projectlink.flat .text, #main .projectlink.flat .button { width: calc(100% - 40px); } .bildlink .image { width: calc(50% - 12px); } .widget-radio legend { max-width: 33%; } .fixtop { top: 40px; } section.hiddenmsg { padding-left: var(--ka-mobile-border); } section.pixelimg .imageblock, section.pixelimg .imageblock .image_container { min-height: 400px; } #main section.pixelimg .imageblock img, section.pixelimg .imageblock .image_container img, section.pixelimg .imageblock .image_container canvas { height: 100%; object-fit: cover; } section.mobileslider1 .msmobile .swiper-slide .textblock { margin: 0 0 20px 0; padding: 0 20px; } input.text, input.password, input.captcha, textarea, .submit, fieldset.checkbox_container { margin-right:0; margin-left:0; /* width:calc(100% - 5px); max-width:calc(100% - 5px); */ } fieldset.checkbox_container { margin-right:0; margin-left:0; padding-right:0; padding-left:0; width:calc(100% - 0px); max-width:calc(100% - 0px); } .submit { margin-right:0; margin-left:0; width:calc(100% - 0px); max-width:calc(100% - 0px); } .mod_subscribe .formbody { flex-direction: column; } .mod_subscribe input.text { width: 300px; max-width: 300px; margin: 0 10px 0 0; padding: 6px 0 4px 4px; background-color: inherit; border-bottom: 1px solid var(--ka-bk-btn-active); } .mod_subscribe .widget.widget-submit { margin: 20px 0 0 0; } .bildlink .image.nr5, .bildlink .image.nr6, .bildlink .image.nr7, .bildlink .image.nr8, .bildlink .image.nr9, .bildlink .image.nr10 { display:none; } .bildlink .linkbox a { padding:12px 30px; font-size:20px; } .ce_video iframe { max-width: calc(100% - 4px); } .projects { margin: 0; } .projects .col25 { width:50%; } #main .projectlink { width: 100%; } .projects .col25 p { font-size: 12px; line-height: 15px; } #main .projectlink.hover .headline { font-size: 20px; line-height: 24px; } #main .projectlink.hover .textblock .text { margin-top: 5px; } section.hiddenmsg.fix .letter-container, section.hiddenmsg .letter-container { font-size: 22px; line-height: 18px; } section.hiddenmsg .letter-container { font-size: 40px; line-height: 35px; } section.hiddenmsg .letter { min-width: 8px; } section.kaepisodenlider .textblock { padding: 30px 20px 20px 20px; width: calc(100% - 40px); } section.kateamslider { /*margin: 40px 0 0px 0;*/ } section.kaepisodenlider .text { padding: 0 var(--ka-mobile-border); width: calc(100% - 2 * var(--ka-mobile-border)); } section.kateamslider .teaserlist { margin: 0 0 20px 0; } section.kateamslider .teaserlist a.teaser .image_container { position: relative; display: flex; width: 70px; height: 70px; justify-content: center; align-items: center; flex-direction: column; justify-content: center; } section.kateamslider .teaserlist img { width: 55px; height: 55px; } section.kateamslider .teaserlist .teaser div.name { display: none; } section.kateamslider .teaserlist .teaser div.vorname { font-size: 12px; line-height: 14px; margin: 5px 0 0 0; display: flex; justify-content: center; text-align: center; } section.kateamslider .leftblock { padding: 0px 0px; width: calc(100% - 00px); max-height: 250px; } section.kateamslider .rightblock { padding: 20px var(--ka-mobile-border); width: calc(100% - 2 * var(--ka-mobile-border)); } section.kateamslider .leftblock .images .image { width: 100%; height: 100%; text-align: left; } section.kateamslider .swiper-slide .msmobile .imageblock .imagetext { padding-left: var(--ka-mobile-border); padding-right: var(--ka-mobile-border); padding-bottom: var(--ka-mobile-border); width: calc(100% - 2 * var(--ka-mobile-border)); } section.kastrecke { margin-top: 70px; } section.kastrecke .textblock { top: 20px; max-width: calc(100% - 2 * var(--ka-mobile-border)); pointer-events: none; } section.kastrecke .textblock br { display: none; } section.kastrecke .textblock br:after { content: " "; } section.kastrecke .swipe { display: flex; position: absolute; top: 50%; left: calc(50% - 50px); width: 100px; height:100px; background-image: url('/files/intern/common/swipe-white.svg'); background-repeat: no-repeat; pointer-events: none; } section.kastrecke .scrollbox { } section.kastrecke .streckelist { position: absolute; display: flex; width: 1200px; max-width: 1200px; height: 100%; } section.kastrecke .streckelist canvas { /*display: none;*/ } section.kastrecke .streckelist .etappe .icon { position: absolute; left: 0; top: 30px; transform: translate(-50%, -100px); width: 18px; height: 18px; } section.kastrecke .streckelist .etappe .textblock .ziel { font-size: 12px; line-height: 14px; } section.kastrecke .streckelist .etappe .textblock .ort { font-size: 16px; line-height: 18px; } section.kastrecke .streckelist .etappe .textblock .hoehe, section.kastrecke .streckelist .etappe .textblock .o2 { font-size: 18px; line-height: 20px; } section.kastrecke .locationbox .textbox { max-width: 100%; max-height: 80%; } section.kastrecke .kantone .kantonname { font-size: 30px; line-height: 36px; } section.kastrecke .kantone .grid-item.location .textbox { font-size: 12px; line-height: 15px; text-align: center; } #bannerimage .gewinndownbutton { top: -66px; margin: 0 0 -66px 0; } #bannerimage .gewinndownbutton img { width: 36px; } #bannerimage .gewinndownbutton a span { font-size: 14px; line-height: 14px; margin: 0 0 6px 0; } #bannerimage section.kapartnerslider .leftblock .leftinside { justify-content: flex-start; } #bannerimage section.kapartnerslider .rightblock { height: 33.3vh; } #bannerimage section.kapartnerslider .leftblock { height: 67.7vh; max-height: 1000px; padding-top: 0 !important; } #bannerimage section.kapartnerslider .leftblock h2 { margin: 10px 0; font-size: 22px; line-height: 25px; } #bannerimage section.kapartnerslider .leftblock p { font-size: 14px; line-height: 18px; } #bannerimage section.kapartnerslider .leftblock .button { margin: 5px 0 0 0; } section.kapartnerslider.cnt_4 .teaserlist { grid-template-columns: 1fr 1fr; margin: 0 auto 20px auto; } section.kapartnerslider .teaserlist .teaser { width: 95%; margin: 10px auto; } section.kapartnerslider .teaserlist img { max-height: 15px; } section.kapartnerslider .teaserlist .teaser:nth-child(3) img { max-height: 25px; } section.kapartnerslider .teaserlist .teaser:nth-child(4) img { max-height: 10px; } section.kapartnerslider .swiper-button-next, section.kapartnerslider .swiper-button-prev { /*top: 30%;*/ top: 100vw; } section.kapartnerslider .swiper-button-prev { top: calc(100vw + var(--swiper-navigation-size)); } section.kapartnerslider .leftblock { padding: 20px var(--ka-mobile-border); width: calc(100% - 2 * var(--ka-mobile-border)); } section.kapartnerslider .leftblock .socials, section.kapartnerslider .leftblock .button { position: relative; top: 0; bottom: auto; margin: 15px 0; display: flex; } section.kapartnerslider .leftblock .socials { margin: 30px 0 15px 0; } section.kapartnerslider .leftblock .button a { min-width: 150px; } section.kapartnerslider .leftblock .button a span { /* font-size: 15px; padding: 6px 20px 4px 20px; */ } section.kapartnerslider .leftblock .button a::after { background-size: 35%; width: 30px; height: 30px; } section.kapartnerslider .rightblock .logo { max-width: 33% !important; } .epicplacelink .eplinside .buttons { flex-direction: row; justify-content: center; } .epicplacelink .eplinside .buttons .button.left, .epicplacelink .eplinside .buttons .button.right { margin: 0; max-width: 90%; text-align: center; } #main .experts > *, #main .expert { flex: 1 0 calc(100% - 10px); } #main .ce_youtube iframe, #main .ce_vimeo iframe { width: 100% !important; } #banner .mod_newslist .news-blog.col3 .blogtext h4 { font-size:36px; line-height:40px; } #main .mod_newslist .news-blog.col3 { width:100%; } #footer { /*height:80px;*/ } #footer .inside { padding-right:var(--ka-mobile-border); padding-left:var(--ka-mobile-border); width:calc(100% - 2 * var(--ka-mobile-border)); } #footer .inside .column { width:calc(100% - 0px); flex-basis: calc(100% - 40px); align-items: center !important; } #footer .inside .contact { width: 100%; margin: 0; text-align: center; } #footer .mod_footer_navi { margin: 40px 0 0 0; width: 100%; align-items: center; justify-content: center; } #footerline2 { padding: 20px 0 20px 0; } .mod_footer_navi ul, .mod_footer_navi li { padding-right:0; padding-left:0; } .mod_footer_navi li strong, .mod_footer_navi a { padding-right:10px; padding-left:0; } .mobile_menu .mod_navigation a, .mobile_menu .mod_navigation li span, .mobile_menu .mod_navigation li.active strong { font-size:18px; line-height: 22px; } .mobile_menu ul.level_2 a, .mobile_menu ul.level_2 span, .mobile_menu ul.level_2 li.active strong { font-size:15px; line-height: 17px; } } /* ****************************************************************************************************************** */ /* --- max-height: 850px --------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ @media only screen and (max-height: 850px) { /* #navanker { right: 0px; top: 120px; } #header #HeaderLogo { left: auto; right: 0px; top: 0px; } #header #HeaderLogo .images div.mountain img { height: 60px; } #header #HeaderLogo .images div.logo img { width: 50px; } #header #HeaderLogo .images div, #navanker div.hamburger, #navanker a { width: 60px; height: 60px; } #navanker div.hamburger, #navanker a span { font-size: 12px; } #navanker img { width: 20px; height: 20px; } #footer .newsletter .submit { width: 34px; height: 34px; } */ } /* ****************************************************************************************************************** */ /* --- FdL-Bundle --------------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ div.fdlts { position: relative; display: flex; flex-direction: column; width: 100%; /*height: 100vh;*/ min-height: 600px; gap: 20px; margin: 105px 0 0 0; } div.fdlts .swipercontainers { position: relative; display: flex; flex-direction: row; gap: 40px; width: 100%; align-items: flex-start; } div.fdlts .swipercontainers .left { position: relative; display: flex; flex-direction: column; height: 100%; flex: 0 0 200px; } div.fdlts .swipercontainers .thumbcontainer { position: relative; display: flex; flex-direction: column; height: 100%; flex: 0 0 400px; align-self: flex-start; } div.fdlts .swipercontainers .thumbcontainer .mobile { display: none; } div.fdlts .swipercontainers .thumbcontainer .headlines { position: relative; display: flex; flex-direction: column; margin: 100px 0; color: var(--ka-font-blue); opacity: 0; transform: translateY(20px); /* leicht von unten */ transition: opacity .6s ease-out, transform .6s ease-out; } /* Sobald Swiper bereit ist */ div.fdlts .swipercontainers .thumbcontainer.ready .headlines { opacity: 1; transform: translateY(0); } div.fdlts .swipercontainers .thumbcontainer .headlines h2 { font-family: var(--ka-h2-font-family); font-size: 60px; line-height: 66px; margin: 0; font-weight: 100; letter-spacing: 0.01em; } div.fdlts .swipercontainers .thumbcontainer .headlines h3 { margin: 10px 0 0 0; font-size: 69px; font-weight: 700; letter-spacing: 0.01em; } div.fdlts .swipercontainers .thumbcontainer .swiper-container { height: 100%; min-height: 400px; } div.fdlts .swipercontainers .thumbcontainer .swiper-slide { position: relative; display: flex; flex-direction: column; align-items: flex-end; } div.fdlts .swipercontainers .thumbcontainer .swiper-slide > div { position: relative; padding: 0 120px 0 0; display: flex; color: var(--ka-font-color); /*font-family:"brother-1816",Arial;*/ font-weight: 300; font-size: 20px; line-height: 24px; transition: color 750ms ease-in-out; cursor: pointer; } div.fdlts .swipercontainers .thumbcontainer .swiper-slide > div:hover { color:var(--ka-font-black); } /*div.fdlts .swipercontainers .thumbcontainer .swiper-slide.swiper-slide-active > div,*/ div.fdlts .swipercontainers .thumbcontainer .swiper-slide.swiper-slide-thumb-active > div { color: var(--ka-font-blue); } /*div.fdlts .swipercontainers .thumbcontainer .swiper-slide.swiper-slide-active > div::after,*/ /* div.fdlts .swipercontainers .thumbcontainer .swiper-slide.swiper-slide-thumb-active > div::after { position: absolute; color: var(--ka-font-blue); border-top: 1px solid var(--ka-font-blue); content: ""; width: 100px; top: 13px; right: -120px; animation: slide-in 1.25s ease-in-out forwards; } @keyframes slide-in { from { right: -100px; opacity: 0; } to { right: 10px; opacity: 1; } } */ div.fdlts .swipercontainers .thumbcontainer .swiper-slide > div::after { position: absolute; color: var(--ka-font-blue); border-top: 1px solid var(--ka-font-blue); content: ""; width: 100px; top: 13px; right: -120px; /* Start: draußen */ transition: right 1.75s ease-in-out; } div.fdlts .swipercontainers .thumbcontainer .swiper-slide.swiper-slide-thumb-active > div::after { right: 10px; /* Aktiv: reinfahren */ } div.fdlts .swipercontainers .tmainswiper { position: relative; display: flex; flex: 1; height: 100%; flex: 1 1 auto; min-width: 0; /* verhindert, dass Flexbox „überbreitet“ */ } div.fdlts .swipercontainers .tmainswiper, div.fdlts .swipercontainers .thumbcontainer .swiper-container { /*visibility: hidden;*/ opacity: 0; transition: opacity 400ms ease-in-out; } div.fdlts .swipercontainers .tmainswiper.swiper-initialized, div.fdlts .swipercontainers .thumbcontainer .swiper-container.swiper-initialized { /*visibility: visible;*/ opacity: 1; } div.fdlts .swipercontainers .tmainswiper .swiper-slide { width: 100%; position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; background-color: var(--ka-bk-color); height: auto; } div.fdlts .swipercontainers .tmainswiper .swiper-slide > div { } div.fdlts .swipercontainers .tmainswiper .swiper-slide > div img { max-height: 70vh; } div.fdlts .swipercontainers .tmainswiper .swiper-slide .textbox { margin: 20px 0 0 0; position: relative; display: flex; flex-direction: row; align-items: center; } #main div.fdlts .swipercontainers .tmainswiper .swiper-slide .textbox .image_container img.leather { width: 180px; } div.fdlts .swipercontainers .tmainswiper .swiper-slide .textbox .textblock { margin: 0 100px; font-family: var(--ka-menu-font-family); font-weight: 300; font-size: 16px; line-height: 19px; letter-spacing: 0; } div.fdlts .swipercontainers .tmainswiper .swiper-slide .textbox .textblock .coloritems { margin: 10px 0 0 0; display: flex; flex-direction: row; align-items: center; } div.fdlts .swipercontainers .tmainswiper .swiper-slide .textbox .textblock .coloritems .color-item { margin: 0 5px 0 0; } div.fdlts .swipercontainers .tmainswiper .swiper-slide .textbox .textblock .coloritems .color-item:nth-child(n+5) { display: none; } div.fdlts .swipercontainers .tmainswiper .swiper-slide .textbox .textblock .coloritems .color-label { display: none; } div.fdlts .swipercontainers .tmainswiper .swiper-slide .textbox .textblock .coloritems .color-swatch { display: flex; width: 14px; height: 14px; border-radius: 7px; } div.fdlts .swipercontainers .tmainswiper .swiper-slide .textbox .textblock .coloritems .color-plus { margin: 0 0 0 2px; font-size: 28px; font-weight: 800; } /* div.fdlts .swipercontainers .tmainswiper .swiper-slide .textbox .buttons a { color: var(--ka-font-blue); padding: 10px 30px; border: 1px solid var(--ka-font-blue); border-radius: 20px; } */ /* ****************************************************************************************************************** */ div.fdlkonf { position: relative; display: flex; flex-direction: column; width: 100%; /*height: 100vh;*/ min-height: 600px; gap: 20px; /*margin: 105px 0 0 0;*/ margin: 0; height: 100vh; min-height: 100vh; } div.fdlkonf * { /* font-family: var(--ka-menu-font-family); letter-spacing: 0; */ } /* div.fdlkonf h3 { font-size: 16px; line-height: 22px; text-transform: uppercase; font-weight: 400; letter-spacing: 0.01em; } div.fdlkonf h2 { font-size: 38px; line-height: 42px; font-family: var(--ka-hx-font-family); color: var(--ka-font-color); font-weight: 700; } */ div.fdlkonf .product { display: flex; flex-direction: column; flex: 1; min-height: 0; /* wichtig! */ } div.fdlkonf .mobile.topblock, div.fdlkonf .mobile.bottomblock { display: none; } div.fdlkonf .middleblock { position: relative; display: flex; flex-direction: row; width: 100%; gap: 20px; flex: 1; padding: 0; margin: 0; flex: 1 1 auto; /* darf schrumpfen */ min-height: 0; /* verhindert Überlauf */ } div.fdlkonf .product .bottom { } div.fdlkonf .middleblock .left, div.fdlkonf .bottom .left { flex: 0 0 100px; min-height: 0; /* verhindert Überlauf */ display: flex; flex-direction: column; justify-content: center; } div.fdlkonf .middle { position: relative; display: flex; flex-direction: column; flex: 1; } div.fdlkonf .middleblock .middle { /*border: 1px solid var(--ka-border-color);*/ display: flex; justify-content: center; align-items: center; height: 100%; /* min-height: 600px; */ } div.fdlkonf .middleblock .canvas-wrapper { position: relative; width: 100%; max-width: 100%; max-width: 100%; height: auto; display: block; max-width: 100%; /* max-height: 100%; */ max-height: calc(100vh - 200px); /* niemals höher als die Viewport-Höhe */ object-fit: contain; display: block; } div.fdlkonf .middleblock .canvas-wrapper canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 0.6s ease; opacity: 0; z-index: 1; pointer-events: none; } div.fdlkonf .middleblock .canvas-wrapper canvas.visible { opacity: 1; z-index: 2; } /* div.fdlkonf .middleblock canvas#productCanvas { max-width: 100%; height: auto; display: block; max-width: 100%; max-height: calc(100vh - 200px); object-fit: contain; display: block; } */ div.fdlkonf .middleblock .imagebuttons { position: absolute; top: auto; bottom: 0; left: 50%; transform: translate(-50%, 0); } div.fdlkonf .middleblock .imagebuttons .btn-fade { width: 44px; height: 44px; opacity: 0.7; background-position: center; background-repeat: no-repeat; cursor: pointer; border: none; background-color: inherit; margin: 0 4px; } div.fdlkonf .middleblock .imagebuttons .btn-fade.active { opacity: 1; } div.fdlkonf .middleblock .imagebuttons .btn-fade.img1 { background-image: url('/files/intern/common/fleur-de-luxe-icon-button-offen-01.svg'); } div.fdlkonf .middleblock .imagebuttons .btn-fade.img2 { background-image: url('/files/intern/common/fleur-de-luxe-icon-button-geschlossen-01.svg'); } div.fdlkonf .middleblock .right, div.fdlkonf .bottom .right { flex: 0 0 320px; display: flex; flex-direction: column; justify-content: space-between; } div.fdlkonf .middleblock .right .textblock { margin: 105px 0 0 0; } div.fdlkonf .middleblock .right .textblock h1 { font-size: 36px; line-height: 40px; margin-bottom: 20px; } div.fdlkonf .middleblock .right .textblock h4 { } div.fdlkonf .middleblock .right .masse, div.fdlkonf .middleblock .right .merkmale { display: flex; flex-direction: column; margin: 20px 0 30px 0; } div.fdlkonf .middleblock .right .masse { margin: 80px 0 30px 0; } div.fdlkonf .middleblock .right .masse .hl, div.fdlkonf .middleblock .right .merkmale .hl { font-family: var(--ka-menu-font-family); text-transform: uppercase; font-size: 14px; line-height: 16px; font-weight: 500; letter-spacing: 0.1em; } div.fdlkonf .middleblock .right .masse .details, div.fdlkonf .middleblock .right .merkmale .details { font-weight: 300; font-size: 18px; line-height: 22px; } div.fdlkonf .middleblock .right .image_container.siegel { position: relative; display: flex; flex-direction: column; margin: 50px 0; } #main div.fdlkonf .middleblock .right .image_container.siegel img.leather { max-width: 150px; } #main div.fdlkonf .middleblock .right .image_container.siegel img.quality { max-width: 220px; } div.fdlkonf .bottom { width: 100%; flex: 0 0 auto; /* feste Höhe, kein automatisches Wachsen */ padding: 20px 0 50px 0; /* mehr Höhe durch Innenabstand */ display: flex; flex-direction: column; justify-content: center; align-items: center; } div.fdlkonf .bottom .line1, div.fdlkonf .bottom .line2 { width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; } div.fdlkonf .bottom .middle { flex-direction: row; justify-content: center; } div.fdlkonf .bottom .coloritems { display: flex; flex-direction: row; align-items: center; } div.fdlkonf .bottom .coloritems * { font-size: 16px; line-height: 16px; font-weight: 400; } div.fdlkonf .bottom .colors .coloroutside { position: relative; margin: 0 40px 0 0; padding: 0 0 20px 0; display: flex; align-items: center; } div.fdlkonf .bottom .colors .colorinside { position: relative; margin: 0 0 0 40px; padding: 0 0 20px 0; display: flex; align-items: center; } div.fdlkonf .bottom .colors .hl { margin: 0 20px 0 0; text-transform: uppercase; font-family: var(--ka-menu-font-family); font-size: 14px; line-height: 16px; font-weight: 500; letter-spacing: 0.1em; } div.fdlkonf .bottom .coloritems { } div.fdlkonf .bottom .coloritems .color-item { position: relative; margin: 0 5px 0 5px; } div.fdlkonf .bottom .coloritems .color-label { display: none; } div.fdlkonf .bottom .coloritems .color-item.active .color-label { position: absolute; top: auto; top: 36px; /*bottom: 0;*/ left: 0; width: 100%; display: flex; justify-content: flex-start; white-space: nowrap; font-weight: 300; font-family: var(--ka-menu-font-family); } div.fdlkonf .bottom .coloritems .color-swatch { position: relative; display: flex; width: 22px; height: 22px; border-radius: 11px; /*border: 1px solid var(--ka-border-color);*/ cursor: pointer; } div.fdlkonf .bottom .colors .color-item.active .color-swatch::after { content: ""; position: absolute; top: -5px; left: -5px; display: flex; width: 30px; height: 30px; border: 1px solid #000; border-radius: 17px; } /* ****************************************************************************************************************** */ div.fdlproductlist { position: relative; } div.fdlproductlist .image_container { position: relative; overflow: hidden; } div.fdlproductlist .image_container a { border: none; padding: 0; margin: 0; border-radius: 0; } div.fdlproductlist .image_container img { transform: scale(1.0, 1.0); transition: all 1.5s ease-in-out; } div.fdlproductlist .image_container img:hover { transform: scale(1.05, 1.05); } div.fdlproductlist .hl, div.fdlproductlist .masse { font-family: var(--ka-h2-font-family); display: flex; justify-content: center; font-weight: 300; } div.fdlproductlist .hl { font-size: 18px; line-height: 24px; } div.fdlproductlist .masse { font-size: 12px; line-height: 16px; } div.fdlproductlist .buttons { position: relative; margin: 20px 0 0 0; display: flex; justify-content: center; } div.fdlproductlist a.border { display: inline-grid; padding: 10px 20px; border-radius: 24px; /* font-size: 16px; line-height: 18px; */ } /* ****************************************************************************************************************** */ div.fdlsend { position: relative; margin: 100px 0; display: flex; } div.fdlsend .buttons { position: relative; display: inline-block; margin: 0 0 30px 0; } /* ****************************************************************************************************************** */ /* ****************************************************************************************************************** */ /* ****************************************************************************************************************** */ /* div.fdlts, div.fdlkonf, div.fdlsend { opacity: 1; pointer-events: inherit; height: auto; transition: opacity 750ms ease-out; top: 0; } div.fdlts { min-height: 600px; gap: 20px; margin: 105px 0 0 0; } div.fdlts .swipercontainers .tmainswiper .swiper-slide > div, div.fdlkonf .middleblock .middle, div.fdlts .swipercontainers .tmainswiper .swiper-slide .textbox, div.fdlkonf .product .bottom { transition: opacity 200ms ease-out; opacity: 1; } div.fdlts .swipercontainers .tmainswiper .swiper-slide > div { transition: opacity 200ms ease-out, width 500ms ease-out; opacity: 1; } div.fdlts.disable, div.fdlkonf.disable, div.fdlsend.disable { opacity: 0; height: 0; pointer-events: none; top: -600px; min-height: 0; gap: 0; margin: 0; } div.fdlts.disable .swipercontainers .tmainswiper .swiper-slide > div, div.fdlkonf.disable .middleblock .middle, div.fdlts.disable .swipercontainers .tmainswiper .swiper-slide .textbox, div.fdlkonf.disable .product .bottom { opacity: 0; } div.fdlts.disable .swipercontainers .tmainswiper .swiper-slide > div { width: 0; } */ div.fdlts, div.fdlkonf, div.fdlsend { position: absolute; /* alle aufeinander stapeln */ top: 0; left: 0; width: 100%; min-height: 100vh; /* oder was dein Viewport sein soll */ opacity: 1; visibility: visible; /* statt height steuern */ pointer-events: auto; transition: opacity 500ms ease; } div.fdlts { min-height: calc(100vh - 5px); } div.fdlts.disable, div.fdlkonf.disable, div.fdlsend.disable { opacity: 0; visibility: hidden; /* bleibt im Layout, aber unsichtbar */ pointer-events: none; } div.fdlts.disable { margin: 0; } div.fdlsend { display: none; } /* ****************************************************************************************************************** */ /* --- max-width: 1620px -------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ @media only screen and (max-width: 1620px) { div.fdlts .swipercontainers .tmainswiper .swiper-slide .textbox .textblock { margin: 0 50px; } } /* ****************************************************************************************************************** */ /* --- max-width: 1420px -------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ @media only screen and (max-width: 1420px) { div.fdlkonf .bottom .right { } div.fdlkonf .bottom .middle { flex-direction: column; width: 100%; } div.fdlkonf .bottom .colors { width: 100%; } div.fdlkonf .bottom .colors * { font-size: 14px; line-height: 14px; } div.fdlkonf .bottom .colors .colorinside, div.fdlkonf .bottom .colors .coloroutside { margin: 10px 0 10px 0; width: 100%; } div.fdlkonf .bottom .colors .hl { min-width: 120px; } } /* ****************************************************************************************************************** */ /* --- max-width: 1210px -------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ @media only screen and (max-width: 1210px) { div.fdlts .swipercontainers { position: relative; display: flex; flex-direction: row; gap: 20px; } div.fdlts .swipercontainers .left { display: none; flex: 0 0 100px; } div.fdlts .swipercontainers .thumbcontainer { position: relative; display: flex; flex-direction: column; height: 100%; flex: 0 0 280px; } div.fdlts .swipercontainers .thumbcontainer .headlines { margin: 30px 0; } div.fdlts .swipercontainers .thumbcontainer h2, div.fdlts .swipercontainers .thumbcontainer h3, div.fdlts .swipercontainers .thumbcontainer .headlines h2, div.fdlts .swipercontainers .thumbcontainer .headlines h3 { font-size: 32px; line-height: 36px; margin: 0 0 20px 0; } div.fdlts .swipercontainers .thumbcontainer .swiper-slide { /*align-items: flex-start;*/ } div.fdlts .swipercontainers .thumbcontainer .swiper-slide > div { position: relative; padding: 0 50px 0 0; display: flex; font-size: 16px; line-height: 20px; } div.fdlts .swipercontainers .thumbcontainer .swiper-slide.swiper-slide-thumb-active > div::after { /*display: none;*/ right: -60px; } div.fdlkonf h2 { font-size: 32px; line-height: 36px; } div.fdlkonf .middleblock .right .masse .hl, div.fdlkonf .middleblock .right .merkmale .hl { font-size: 16px; line-height: 20px; } div.fdlkonf .middleblock .right .masse .details, div.fdlkonf .middleblock .right .merkmale .details { font-size: 16px; line-height: 20px; } div.fdlkonf .middleblock canvas#productCanvas { max-height: calc(100vh - 400px); } div.fdlkonf .bottom .line1, div.fdlkonf .bottom .line2 { column-gap: 10px; } div.fdlkonf .bottom .line1 { margin-bottom: 40px; } div.fdlkonf .bottom .colors .coloroutside, div.fdlkonf .bottom .colors .colorinside { margin: 0 0 0px 0; padding: 0 0 30px 0; flex-direction: column; align-items: flex-start; } div.fdlkonf .bottom .colors .hl { display: flex; margin: 10px 20px 10px 0; } } /* ****************************************************************************************************************** */ /* --- max-width: 850px -------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ @media only screen and (max-width: 850px) { div.fdlts .swipercontainers { flex-direction: column; } div.fdlts .swipercontainers .thumbcontainer { order: 1; } div.fdlts .swipercontainers .thumbcontainer .desktop { display: none; } div.fdlts .swipercontainers .thumbcontainer .mobile { display: flex; width: 100%; min-height: inherit; max-width: inherit; } div.fdlts .swipercontainers .tmainswiper { order: 2; } div.fdlts .swipercontainers .thumbcontainer .mobile .buttons { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; } div.fdlts .swipercontainers .thumbcontainer .mobile .buttons a.button { position: relative; display: flex; margin: 0 10px 10px 0; padding: 8px 10px; border: 1px solid var(--ka-font-blue); color: var(--ka-font-blue); border-radius: 18px; font-family: var(--ka-menu-font-family); text-transform: uppercase; font-size: 14px; line-height: 16px; } div.fdlts .swipercontainers .tmainswiper .swiper-slide .textbox .textblock { margin: 0 50px; font-size: 16px; line-height: 19px; } div.fdlts .swipercontainers .tmainswiper .swiper-slide .textbox .textblock { margin: 20px 10px 0 10px; order: 1; } div.fdlts .swipercontainers .tmainswiper .swiper-slide .textbox .image_container { order: 2; margin: 20px 0 0 0; } #main div.fdlts .swipercontainers .tmainswiper .swiper-slide .textbox .image_container img.leather { width: 180px; } div.fdlkonf .mobile.topblock, div.fdlkonf .mobile.bottomblock { display: flex; flex-direction: row; width: 100%; max-width:calc(100% - 2 * var(--ka-mobile-border)); margin-right:auto; margin-left:auto; } div.fdlkonf .mobile.topblock { padding-top: 100px; } div.fdlkonf .mobile.topblock h1 { font-size: 24px; line-height: 26px; margin: 10px 0; } div.fdlkonf .mobile.topblock h4 { margin: 0 0 10px 0; } div.fdlkonf .mobile.bottomblock { justify-content: space-between; align-items: flex-end; max-width:100%; } div.fdlkonf .middleblock { flex-direction: column; max-width:calc(100% - 2 * var(--ka-mobile-border)); margin-right:auto; margin-left:auto; } div.fdlkonf .middleblock .left { display: none; } div.fdlkonf .middleblock .right { display: none; /*order: 1;*/ } div.fdlkonf .middle { /*order: 2;*/ } div.fdlkonf .middleblock .left, div.fdlkonf .bottom .left { display: none; } div.fdlkonf .bottom { width: calc(100% - 2 * var(--ka-mobile-border)); max-width: 100%; flex: 0 0 50px; margin: 0px auto 0px auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } div.fdlkonf .bottom .right { flex: 0 0 120px; } div.fdlkonf .bottom .buttons { margin: 20px 0 0 0; order: 99; } div.fdlkonf .bottom .middle { flex-direction: column; align-items: flex-start; justify-content: center; } div.fdlkonf .bottom .colors { align-items: flex-start; justify-content: flex-start; margin: 0px 0 5px 0; } div.fdlkonf .bottom .colors .hl { margin: 0 0 10px 0; justify-content: flex-start; align-items: center; } div.fdlkonf .bottom .coloritems { position: relative; margin: 0px 0 0px 0; flex-wrap: wrap; justify-content: flex-start; padding: 0 0 0px 0; } div.fdlkonf .bottom .colors .coloroutside, div.fdlkonf .bottom .colors .colorinside { margin: 0 0 0px 0; padding: 0 0 0px 0; flex-direction: column; align-items: flex-start; } div.fdlkonf .bottom .colors .coloroutside { padding: 0 0 20px 0; } div.fdlkonf .bottom .colors .color-item { margin: 5px; } div.fdlkonf .bottom .coloritems .color-item.active .color-label { /* justify-content: center; */ } div.fdlkonf .bottom .coloritems .color-item.active .color-label { /* position: absolute; top: 0; bottom:auto; left: 0; width: 100%; display: flex; justify-content: center; */ } div.fdlkonf .mobile.bottomblock .siegel { display: flex; flex-direction: column; } div.fdlkonf .mobile.bottomblock .siegel img { width: 120px; } } /* ****************************************************************************************************************** */ /* --- max-width: 600px -------------------------------------------------------------------------------------------- */ /* ****************************************************************************************************************** */ @media only screen and (max-width: 600px) { div.fdlts .swipercontainers .thumbcontainer h2, div.fdlts .swipercontainers .thumbcontainer h3, div.fdlts .swipercontainers .thumbcontainer .headlines h2, div.fdlts .swipercontainers .thumbcontainer .headlines h3 { margin: 0; } div.fdlts .swipercontainers .thumbcontainer .headlines { margin: 0 0 20px 0; } div.fdlts .swipercontainers .thumbcontainer .mobile .buttons a.button { margin: 0 8px 8px 0; padding: 8px 8px; border: 1px solid var(--ka-font-blue); color: var(--ka-font-blue); border-radius: 18px; font-family: var(--ka-menu-font-family); text-transform: uppercase; font-size: 12px; line-height: 14px; } div.fdlts .swipercontainers .thumbcontainer .mobile .buttons a.button.active { background-color: var(--ka-bkactive); } .tmainswiper .swiper-slide .textbox .buttons a { background-color: var(--ka-bksend); } div.fdlkonf { height: calc(100vh - 30px); min-height: calc(100vh - 30px); } div.fdlkonf .middleblock canvas#productCanvas { max-height: calc(100vh - 200px); } div.fdlts .swipercontainers .tmainswiper .swiper-slide .textbox { flex-direction: column; } div.fdlts .swipercontainers .tmainswiper .swiper-slide .textbox .buttons a { margin: 20px 0 0 0; } div.fdlkonf .middleblock .right .masse, div.fdlkonf .middleblock .right .merkmale { margin: 10px 0 10px 0; } div.fdlkonf .middleblock .right .image_container.siegel { margin: 10px 0; } div.fdlts.disable, div.fdlkonf.disable, div.fdlsend.disable { display: none; } div.fdlkonf .middleblock .left, div.fdlkonf .bottom .left, div.fdlkonf .middleblock .right, div.fdlkonf .bottom .line2 { display: none; } div.fdlkonf .middleblock { max-width: 100%; margin-right: 0; margin-left: 0; } div.fdlkonf .middleblock .imagebuttons { position: absolute; top: auto; bottom: -50px; left: auto; right: var(--ka-mobile-border); transform: translate(0, 0); z-index: +3; } div.fdlkonf .bottom { padding: 20px 0 10px 0; } div.fdlkonf .bottom .line1 { margin-bottom: 0px; flex-direction: column; } div.fdlkonf .bottom .coloritems .color-item.active .color-label { display: none; } div.fdlkonf .bottom .colors .coloroutside { padding: 0 0 10px 0; } div.fdlkonf .bottom .colors .colorinside { } div.fdlkonf .bottom .right { flex: 0 0 80px; width: 100%; } div.fdlkonf .buttons { display: flex; flex-direction: row; justify-content: space-between; } div.fdlkonf .buttons a { margin: 0 0 8px 0; } }