/* dk_masonry global styles */ .masonry .image_container img { vertical-align: bottom; } .masonry > div, .masonry > section { float: left; } /* -- dk_masonry theme 'standard' :: copyright 2013-2015 by Dirk Klemmt -- */ /* global */ .msry_theme_standard.ce_masonry_gallery { padding: 10px; } .msry_theme_standard .masonry_gallery { overflow: hidden; } /* loader */ .msry_theme_standard .masonry_gallery.loading, .msry_theme_standard .masonry_item img.loading { min-width: 75px; min-height: 75px; background: #f5f5f5 url(data:image/gif;base64,R0lGODlhEAAQAIQAAGxqbLS2tNze3IyOjPTy9MzKzKSipHx+fOzq7NTW1Pz6/KyqrMTGxOTm5JyenNTS1ISGhHRydLy+vOTi5JSWlPT29MzOzKSmpOzu7Nza3Pz+/KyurIyKjPDw8AAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJBwAdACwAAAAAEAAQAAAFZ2AndolxAJqmEOOIXRElPUSlqC1GcVkrEgrFaDFo+EYEXAbSOyI1hMDC6VNUHBZqy0ZpajtJh+D70ywe5E5Fw5Ckg5PN5JtkWSQIarIiwhQYeT5AQi4JBRkNGIp7TggCAhMNBAQYLSEAIfkECQcAGAAsAAAAABAAEACEdHJ0vL685OLklJaU9PL01NLUrKqs7Ors/Pr83NrcfH58zM7MnJ6ctLa0xMLE5Obk9Pb01NbUrK6s7O7s/P783N7chIaEpKKk8PDwAAAAAAAAAAAAAAAAAAAAAAAAAAAABWYgJmKJYQGAwhDjOEmqUxTBRSHtdA1JKxK3UYPx8I0ICFxlIDDmKARHw+lDQAwFaguCMFS0R4qkCcYAA70yhFJYlDHWh6OoBbISiwkVCRFNEhF6PkgUOQIVBxMEBFxBRhOJjRAsIyEAIfkECQcAHgAsAAAAABAAEACEbG5svLq83N7clJaU9PL01NLUrKqshIaExMbE7OrspKKk/Pr8fHp8xMLE5Obk3NrctLa0lJKUvL685OLknJ6c9Pb01NbUrK6sjIqMzMrM7O7spKak/P78fH588PDwAAAABWegJ3rCFTHMoVjjqEHYhlhFMwBU4hqU0IoPxWIkMeh+Ig1nOFH4kCMCh4CQQH+LSoB1HVU4kEk3ypE4xiJp5jn+PrjjxSJROF6lBJJAc8+mJw55PwQLHC0aCRoEFQSLhRVXFYVLjC0hACH5BAkHAB4ALAAAAAAQABAAhHRydLy6vNze3JSWlPTy9KyqrMzOzISChOzq7MTGxKSipPz6/LSytIyKjOTm5NTW1Hx+fMTCxOTi5JyanPT29KyurISGhOzu7MzKzKSmpPz+/LS2tIyOjNza3PDw8AAAAAVpoCd6wjZZR5N143gFQ4U9TzQBCuIyhdSKD0hD50kwHL+RAxLxOCq+pEtDMGCkvwUlIsC2CJoI0isCY8ZkiuYRTS8kXbJnsUAILmQwwYNA4KUEWiIXFwR7P4EaiHQUhhQLGhSAahqVjS0hACH5BAkHAB0ALAAAAAAQABAAhGxubLy+vOTi5JSWlMzOzPTy9KyqrISGhMTGxOzq7KSipNTW1Pz6/IyOjLS2tHx+fMTCxOTm5JyenNTS1PT29KyurIyKjMzKzOzu7KSmpNza3Pz+/JSSlPDw8AAAAAAAAAVoYCd2QpANzVBp44ghmTNp2qU8RuJCjtCKmgNH1yFAiL9O5KDoJAKRZGsBWCwm0h9HsfBlRxHGAvktbDTkrDmSllI2iXaSQcF8R+ZCh8KwS80MIwwbej+AP290BQV8GxR/DIMbGwyFIiEAIfkECQcAHwAsAAAAABAAEACEbGpstLa03N7clJaUzMrM9PL0pKakhIKE7Ors1NbUxMLEnJ6c/Pr8rK6sfHp85Obk1NLUbG5svLq85OLknJqczM7M9Pb0rKqsjI6M7O7s3NrcxMbEpKKk/P78tLK08PDwBWngJ34PERicIQnjmEHSlkxa1WBe5kLb04qCwQIBhOh+IgTm8kEkiMiRxpF4TKI/iuEBxYoUB8TR+4FECuRRBWBBpwsSBiP9YbQ7bmwGX2fkf3tzIgx8PwUdgiMWiG0FFoQWUQVyHZVtLSEAIfkECQcAHwAsAAAAABAAEACEbGpstLa03N7clJKUzMrM9PL0pKakhIKExMLE7OrsnJ6c1NbU/Pr8dHZ0vL685ObkrK6sjIqMvLq85OLknJqc1NLU9Pb0hIaExMbE7O7spKKk3Nrc/P78fHp8tLK08PDwBWrgJ37JggVegEzjmAlEJUzTIilSNhbClrQigcag+zwmRSCJ4vkUHknlZ3PZOKVADcRSwLYQEU7XK1o0xGRR5WxJfxwHBsM9UBTQ3gdg8ZGPlRkcbSIMeC13cy0WHAxcBRaFg0AFchyWXC0hACH5BAkHAB0ALAAAAAAQABAAhGxubLy6vNze3JSSlPTy9MzOzKSmpMTGxOzq7Hx+fJyanPz6/KyurMTCxOTm5NTW1IyKjLy+vOTi5JSWlPT29KyqrMzKzOzu7ISChJyenPz+/LSytNza3PDw8AAAAAAAAAVqYCd2iFAcUWNJ43g5HCc5EtdUzTUSiKS3HQFj8yMVgQjDpkOgAJ+CgYCyeD4rG43T2jpMNARu64EBi0ePhPYsakAWVfbEQDCLHwBOBx62OhIZIwt2LQQLAwgtFBoLFARNg1tAhoMaWn0iIQAh+QQJBwAcACwAAAAAEAAQAIRsbmy8urzc3tycnpz08vTMzsyEhoTs6uy0srTExsT8+vzU1tR8fnzk5uSkpqSMjox0dnTEwsTk4uT09vTU0tTs7uy0trTMysz8/vzc2tysqqyUkpTw8PAAAAAAAAAAAAAFZyAnclUjUMVFNWNbHQ18CEVwVe1E4C0nWQGeQtFrHRABDgFDKLYEA8mE6GwhMZNqqzBgakeZh/fLWRiwZE5iM0wPNMumdgHJcIbyYsPgGCnGLQsMDwc5GAo6BFMAA4U9BEMYkgoSLSEAIfkECQcAHwAsAAAAABAAEACEdHJ0vL685OLklJaU1NLUrKqs9PL0hIaEzMrMpKKk7Ors3NrctLK0/Pr8xMbEnJ6cjI6MfH58xMLE5ObknJqc1NbUrK6s9Pb0jIqMzM7MpKak7O7s3N7ctLa0/P788PDwBWngJ36GsSkcJ0xje3nXt51LVm1t4xmtOCEI3KfR4PVEikCGtDu2JgzBpeHsBRywaotQaGpFnIf3u6Bkvx/Eg4j+aDqGsXNx4AyL1QnEMtIZWxUYA0IiLw0XBhUBAwAahCMGRB4YEQkVLSEAIfkECQcAGQAsAAAAABAAEACEdHJ0vL685OLklJaU9PL01NLUrKqszM7M7Ors/Pr8tLK0fH58xMbEnJ6c3NrcxMLE5Obk9Pb0rK6s7O7s/P78tLa0hIaEpKKk3N7c8PDwAAAAAAAAAAAAAAAAAAAAAAAABWhgJmZERFFRNk1jm1BJRBATIgjs+BKtiDiOXCKR66kKDhKFZxxBGJBIotk7FFDUliOwzI4Ekq43gzFgxwXJcJypBAhiKmYgyAyZRkijoouPHAMXCC0mBgEFBQ8NCxKDPQSLAAAWBkkjIQAh+QQJBwAfACwAAAAAEAAQAIRsamy0trTc3tyUlpTMysz08vSkpqR8fnzEwsTs6uzU1tT8+vysrqyMioy8vrzk5uScnpx8eny8urzk4uTU0tT09vSsqqyEhoTExsTs7uzc2tz8/vy0srSMjoykoqTw8PAFaOAnfkW1nVs1rt+yLVVRFl+WrS7NZslzt4sfqzaZkDa6oShBeVQWSpZCk4quJgSkdfRwaLefSaAKVkgWULCDUPhGBQYjOsl6WByjBUcxFHgsQgkQAAMIFAoYBg0BQiMKHhcRER0cGishACH5BAkHAB0ALAAAAAAQABAAhHRydLy6vNze3JSWlPTy9KyqrMzOzISChOzq7MTGxKSipPz6/LSytOTm5NTW1IyKjHx+fMTCxOTi5JyanPT29KyurISGhOzu7MzKzKSmpPz+/LS2tNza3PDw8AAAAAAAAAVoYCd2BKWd2kKM7JJSROmurUaz8UUvy8WyFwSCZPv9LhIEZWE0CiQaSvPXcBSnowbmiu00EtGuiJPgiTsJA4HblFQaHQcE3kRUMCLEA8JxFjY+eQoAExEODhgFAwGBLA4ZDwcWAxsCLCEAIfkECQcAHQAsAAAAABAAEACEbG5svLq83N7clJKU9PL0zM7MpKKkhIaE7OrsxMLE/Pr81NbUrKqs5ObknJ6cjI6MfH58vL685OLklJaU9Pb01NLUpKakjIqM7O7sxMbE/P783NrcrK6s8PDwAAAAAAAABWtgJ3YEpZ2aQoysklJE6Sps5641kY6KgtUjgoJC0uCAIsyKQkOyMBgN0TlCNIzUqgCb7SAWGkS306g4BuPKYgFYZBuJRsdwkCMRiYIIMbi4axIBET9JFhAGGRsbBQEWGYQsGxwTDxMGERIsIQAh+QQJBwAfACwAAAAAEAAQAIRsamy0trTc3tyUlpTMysz08vSkpqSEgoTs6uzU1tTEwsScnpz8+vysrqx8enzk5uTU0tRsbmy8urzk4uScmpzMzsz09vSsqqyMjozs7uzc2tzExsSkoqT8/vy0srTw8PAFaeAnfoXVnR1TjCyTWkXpMuznrnWRjgyT1SMdTYcDijIdmbHGsEh+y5GFAahEWYUI5HrMHBTcD+JhoIQnj4QjcUUkEJ8LBm5EQARHygBfexAqUB8ZHhgNFQITCRsSEIEjAhIGHAYeBA8sIQAh+QQJBwAeACwAAAAAEAAQAIRsamy0trTc3tyUkpTMysz08vSkpqSEgoTEwsTs6uycnpzU1tT8+vy8vrzk5uSsrqyMiox0dnS8urzk4uScmpzU0tT09vSEhoTExsTs7uykoqTc2tz8/vy0srTw8PAAAAAFaKAneoXFnRxTjCyTWkXpMqznrnWRjgyT1SMdbQFwAFkZTkEzONYYlkPDyTJFKtQgJ7LIinQQjJdkeWjGpM1lk80kfh2K8ZiZzDMGjQCY2AhwHhkSChILExMCFQQCPzUTCB0PARgLcyIhACH5BAkHAB4ALAAAAAAQABAAhGxubLy6vNze3JSSlPTy9KSmpMzOzISChOzq7MzKzJyanPz6/KyurHx6fMTCxOTm5NTW1IyOjLy+vOTi5JSWlPT29KyqrISGhOzu7JyenPz+/LSytHx+fNza3PDw8AAAAAVnoCd6RKWd2kKM7JJWROkuLEJpK0umY8Y9uhFhQesAOkEWBldQJHWLysXxZJkakKpQc8hqd4PE11NZMCzjsmAg+MI8mwLiiZmLMOdJEPFAYEYYDgUOHRMPExAdD386EwkSEg4GAnYiIQAh+QQJBwAcACwAAAAAEAAQAIRsbmy8urzc3tycnpzMzsz08vSEhoSsrqzExsTs6uzU1tT8+vx8fnykpqSMjoy0trR0dnTEwsTk5uTU0tT09vSMioy0srTMyszs7uzc2tz8/vysqqzw8PAAAAAAAAAAAAAFaCAncgmlndpSjGMyAAtVFNSSsonDZKxYLItRwyDpjX7BDIRnHGE0hc2g2Ys5EFSWycDMcgqaSjcLHly8olrAgubEBAOBF7yKHBLZmAgTeBR7GBwULBgXDwQCCRKKEitGEhMXFxMZiywhADs=) center no-repeat; } /* slides */ .msry_theme_standard .masonry_gallery { margin-bottom: 10px; padding: 5px; background-color: #f5f5f5; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .01), 0 1px 5px rgba(0, 0, 0, .1); } /* captions */ .msry_theme_standard .masonry_gallery figcaption { box-sizing: border-box; position: absolute; bottom: 5px; padding: 3px 6px; z-index: 1; color: white; background: rgba(0, 0, 0, .5); opacity: 0; } .msry_theme_standard .masonry:not(.loading) .masonry_gallery figcaption { -webkit-animation-name: fadeInUp; -webkit-animation-fill-mode: both; -webkit-animation-duration: 1s; -webkit-animation-delay: 1s; animation-name: fadeInUp; animation-fill-mode: both; animation-duration: 1s; animation-delay: 1s; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } #colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden;-webkit-transform:translate3d(0,0,0)}#cboxWrapper{max-width:none}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto;-webkit-overflow-scrolling:touch}#cboxTitle{margin:0}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block;max-width:none;-ms-interpolation-mode:bicubic}.cboxIframe{width:100%;height:100%;display:block;border:0;padding:0;margin:0}#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}#cboxOverlay{background:#000;opacity:.9;filter:alpha(opacity = 90)}#colorbox{outline:0}#cboxContent{margin-top:20px;background:#000}.cboxIframe{background:#fff}#cboxError{padding:50px;border:1px solid #ccc}#cboxLoadedContent{border:5px solid #000;background:#fff}#cboxTitle{position:absolute;top:-20px;left:0;color:#ccc}#cboxCurrent{position:absolute;top:-20px;right:0;color:#ccc}#cboxLoadingGraphic{background:url(../../assets/colorbox/images/loading.gif) no-repeat center center}#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:0 0}#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0}#cboxSlideshow{position:absolute;top:-20px;right:90px;color:#fff}#cboxPrevious{position:absolute;top:50%;left:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top left;width:28px;height:65px;text-indent:-9999px}#cboxPrevious:hover{background-position:bottom left}#cboxNext{position:absolute;top:50%;right:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top right;width:28px;height:65px;text-indent:-9999px}#cboxNext:hover{background-position:bottom right}#cboxClose{position:absolute;top:5px;right:5px;display:block;background:url(../../assets/colorbox/images/controls.png) no-repeat top center;width:38px;height:19px;text-indent:-9999px}#cboxClose:hover{background-position:bottom center} .content-slider{overflow:hidden;visibility:hidden;position:relative}.slider-wrapper{overflow:hidden;position:relative}.slider-wrapper>*{float:left;width:100%;position:relative}.slider-control{height:30px;position:relative}.slider-control a,.slider-control .slider-menu{position:absolute;top:9px;display:inline-block}.slider-control .slider-prev{left:0}.slider-control .slider-next{right:0}.slider-control .slider-menu{top:0;width:50%;left:50%;margin-left:-25%;font-size:27px;text-align:center}.slider-control .slider-menu b{color:#bbb;cursor:pointer}.slider-control .slider-menu b.active{color:#666} .cc-head>*:first-child{margin-top:0}.cc-head>*:last-child{margin-bottom:15px}.contao-cookiebar{--ccb-backdrop: rgba(0, 0, 0, .75);--ccb-anim-duration: .5s;--ccb-checked-clr: #399d32;--ccb-checked-bg: #dcf3db;--ccb-unchecked-clr: #9c9b99;--ccb-unchecked-bg: #fff;--ccb-disabled-clr: #c8c7c5;--ccb-disabled-bg: #f4f4f4;--ccb-focus-clr: #00a4f4;position:fixed;inset:0;z-index:9999;display:flex;align-items:var(--ccb-align, center);justify-content:var(--ccb-justify, center);letter-spacing:0;padding:15px;max-height:100dvh;box-sizing:border-box;pointer-events:none;overflow:hidden;color:var(--ccb-clr, #444)}.contao-cookiebar *{box-sizing:border-box}.contao-cookiebar p{color:var(--ccb-text, #868686);line-height:1.4}.contao-cookiebar label{position:relative;display:block;padding:8px 13px 8px 0;line-height:1.2rem}.contao-cookiebar label.group{font-weight:600}.contao-cookiebar input{position:absolute;width:1px;height:1px;outline:0 none;opacity:0}.contao-cookiebar input+label{padding:8px 13px 8px 45px;cursor:pointer}.contao-cookiebar input+label:before,.contao-cookiebar input+label:after{content:"";position:absolute;border-radius:10px}.contao-cookiebar input+label:before{top:7px;left:0;width:35px;height:18px;margin:0;box-sizing:content-box;background:var(--ccb-unchecked-bg);border:1px solid var(--ccb-unchecked-clr);transition:border-color .2s}.contao-cookiebar input+label:after{display:block;top:11px;left:4px;width:12px;height:12px;background:var(--ccb-unchecked-clr);transition:background .2s,margin-left .2s,padding .2s}.contao-cookiebar input+label:active:after{padding-left:5px}.contao-cookiebar input.cc-group-half+label:after{background:linear-gradient(to right, var(--ccb-unchecked-clr) 0%, var(--ccb-unchecked-clr) 50%, var(--ccb-checked-clr) 50%, var(--ccb-checked-clr) 100%)}.contao-cookiebar input:checked+label:after{background:var(--ccb-checked-clr);margin-left:17px}.contao-cookiebar input:checked+label:active:after{margin-left:12px}.contao-cookiebar input:checked+label:before{background:var(--ccb-checked-bg);border-color:var(--ccb-checked-clr)}.contao-cookiebar input:disabled+label{pointer-events:none}.contao-cookiebar input:disabled+label:after{background:var(--ccb-disabled-clr)}.contao-cookiebar input:disabled+label:before{background:var(--ccb-disabled-bg);border-color:var(--ccb-disabled-clr)}.contao-cookiebar input:focus-visible:not(.cc-hide-focus)+label:before{outline:3px dashed var(--ccb-focus-clr);outline-offset:2px}.contao-cookiebar .cc-btn{display:inline-block;cursor:pointer;width:100%;padding:8px 14px;margin-bottom:8px;font-size:15px;outline:0 none;border:1px solid var(--ccb-btn-bdr, #cfcfcf);border-radius:4px;color:var(--ccb-btn-clr, #444);background:var(--ccb-btn-bg, #f5f5f5)}.contao-cookiebar .cc-btn:hover,.contao-cookiebar .cc-btn:focus{background:var(--ccb-btn-bg-hvr, #ececec)}.contao-cookiebar .cc-btn:last-child{margin-bottom:0}.contao-cookiebar .grayscale{--ccb-btn-bg: #f1efef;--ccb-btn-bg-hvr: #ececec}.contao-cookiebar .grayscale .success{--ccb-btn-bg: #fbfbfb;--ccb-btn-bg-hvr: #f7f7f7}.contao-cookiebar .highlight .success{--ccb-btn-bg: #4e9e3e;--ccb-btn-bg-hvr: #4c933f;--ccb-btn-bdr: #3e7830;--ccb-btn-clr: #fff}.cc-focus:not(.cc-hide-focus):focus-visible{outline:3px dashed var(--ccb-focus-clr);outline-offset:-3px}.cc-invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;float:left}.cc-inner{display:inline-block;overflow-y:auto;max-height:100%;max-width:100%;padding:23px;border-radius:3px;opacity:0;pointer-events:none;visibility:hidden;font-size:1rem;text-align:left;background:var(--ccb-bg, #fff);box-shadow:var(--ccb-box-shadow, rgba(99, 99, 99, 0.2)) 0 2px 8px 0;animation:var(--ccb-anim, cookiebar-middle-in) var(--ccb-anim-duration) ease-in-out forwards}.cc-group{position:relative;border:1px solid var(--ccb-bdr, #d0d0d0);border-radius:5px;margin-bottom:10px}.cc-cookie-info{font-size:.875rem;background:var(--ccb-info-bg, #fff);border:1px solid var(--ccb-info-bdr, #efefef);padding:10px;border-radius:5px}.cc-cookie-info>div>span{font-weight:600}.cc-cookie-info>div+div{margin-top:5px;word-wrap:break-word}.cc-cookie-info+button.cc-detail-btn-details{margin-top:15px}.cc-cookies{background:var(--ccb-cookies-bg, #fbfbfb);border-radius:0 0 5px 5px}.cc-cookies>p{font-size:.875rem}.cc-cookies>p,.cc-cookies>.cc-cookie{margin:0;padding:15px;border-top:1px solid var(--ccb-cookies-bdr, #fbfbfb)}.cc-cookie label.cookie+*{margin-top:10px}.cc-cookie p{margin:0 0 15px;font-size:.875rem}.cc-cookie-desc p{margin-bottom:0}.cc-footer,.cc-info{text-align:center}.cc-info{margin-top:15px}.cc-info>p{font-size:.875rem}.cc-info>a{display:inline-block;font-size:.813rem;color:var(--ccb-detail-clr, #a2a2a2);text-decoration:none}.cc-info>a:hover{color:var(--ccb-detail-clr-hvr, #717171)}.cc-info>a+a:before{display:inline-block;content:"·";margin-right:5px}.cc-active .cc-inner{opacity:1;pointer-events:auto;visibility:visible}.cc-active.cc-blocked{pointer-events:auto;animation:cookiebar-overlay-in var(--ccb-anim-duration) ease-in-out forwards}.cc-saved.cc-inner{opacity:0;pointer-events:none;visibility:hidden}.cc-saved.cc-blocked{pointer-events:none;animation:cookiebar-overlay-out var(--ccb-anim-duration) ease-in-out forwards}.cc-left{--ccb-justify: flex-start}.cc-right{--ccb-justify: flex-end}.cc-top{--ccb-align: flex-start}.cc-top.cc-active{--ccb-anim: cookiebar-top-in}.cc-top.cc-saved{--ccb-anim: cookiebar-top-out}.cc-middle.cc-active{--ccb-anim: cookiebar-middle-in}.cc-middle.cc-saved{--ccb-anim: cookiebar-middle-out}.cc-bottom{--ccb-align: flex-end}.cc-bottom.cc-active{--ccb-anim: cookiebar-bottom-in}.cc-bottom.cc-saved{--ccb-anim: cookiebar-bottom-out}@media(min-width: 768px){.contao-cookiebar .cc-btn{width:auto;margin-bottom:0}.cc-inner{max-width:var(--ccb-max-width, 750px)}}@media(forced-colors){.contao-cookiebar input+label:after{border:1px solid currentColor}.cc-inner{border:1px solid currentColor}input.cc-group-half+label:after{margin-left:9px}}@media(prefers-reduced-motion){.contao-cookiebar{--ccb-anim-duration: 2s}}@media print{.contao-cookiebar{opacity:0}}@keyframes cookiebar-overlay-in{0%{background:rgba(0,0,0,0)}to{background:var(--ccb-backdrop)}}@keyframes cookiebar-overlay-out{0%{background:var(--ccb-backdrop)}to{background:rgba(0,0,0,0);visibility:hidden}}@keyframes cookiebar-top-in{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@keyframes cookiebar-top-out{0%{opacity:1;visibility:visible;transform:translateY(0)}to{opacity:0;visibility:hidden;transform:translateY(-100%)}}@keyframes cookiebar-middle-in{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes cookiebar-middle-out{0%{opacity:1;visibility:visible;transform:scale(1)}to{opacity:0;visibility:hidden;transform:scale(0)}}@keyframes cookiebar-bottom-in{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes cookiebar-bottom-out{0%{opacity:1;visibility:visible;transform:translateY(0)}to{opacity:0;visibility:hidden;transform:translateY(100%)}}.cc-group{display:flex;flex-wrap:wrap;justify-content:space-between;align-content:center}.cc-group>label{flex-grow:1;margin:5px 0 5px 10px}.cc-cookies{display:none;width:100%}.cc-detail-btn{padding:8px 10px;line-height:1.2rem}.cc-detail-btn-details{text-decoration:underline;padding:0;margin:0 0 10px}.cc-detail-btn,.cc-detail-btn-details{display:inline-block;color:var(--ccb-detail-clr, #a2a2a2);border:0 none;outline:0 none;background:rgba(0,0,0,0);font-size:13px;letter-spacing:0;text-transform:initial;cursor:pointer}.cc-detail-btn span:nth-child(2),.cc-detail-btn-details span:nth-child(2){display:none}.cc-detail-btn.cc-active span:nth-child(1),.cc-detail-btn-details.cc-active span:nth-child(1){display:none}.cc-detail-btn.cc-active span:nth-child(2),.cc-detail-btn-details.cc-active span:nth-child(2){display:inline}.cc-detail-btn:hover,.cc-detail-btn-details:hover{background:rgba(0,0,0,0);color:var(--ccb-detail-clr-hvr, #717171)} /* ========================================================================== FELDMEIER – CONSOLIDATED CSS 2026 Contao 4.9.42 | optimierte Produktionsversion ========================================================================== */ :root { --fm-green: #00432d; --fm-green-dark: #002d20; --fm-green-deep: #001f17; --fm-sand: #f3f1eb; --fm-paper: #fbfbf8; --fm-white: #ffffff; --fm-ink: #1d2622; --fm-copy: #56605b; --fm-muted: #7c8581; --fm-line: #dfe3df; --fm-accent: #a88c5b; --fm-radius: 2px; --fm-shell: 1240px; --fm-header-height: 96px; --fm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --fm-display: "Helvetica Neue", Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; color: var(--fm-ink); font-family: var(--fm-font); font-size: 16px; line-height: 1.65; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-padding-top: calc(var(--fm-header-height) + 20px); } body { margin: 0; overflow-x: hidden; background: var(--fm-white); color: var(--fm-copy); } body.open-nav { overflow: hidden; } article, aside, footer, header, main, nav, section, figure { display: block; } figure { margin: 0; } img, svg { max-width: 100%; height: auto; vertical-align: top; } ul, ol { margin-top: 0; } a { color: var(--fm-green); text-decoration: none; transition: color .2s ease, opacity .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease; } a:hover, a:focus-visible { color: var(--fm-green-dark); } p { margin: 0 0 1.25rem; } strong, b { color: var(--fm-ink); font-weight: 700; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin: 0 0 .65em; color: var(--fm-green); font-family: var(--fm-display); font-weight: 800; line-height: 1.04; letter-spacing: -.035em; text-transform: none; } h1, .h1 { font-size: clamp(2.65rem, 5.7vw, 5.3rem); } h2, .h2 { font-size: clamp(2rem, 3.6vw, 3.65rem); } h3, .h3 { font-size: clamp(1.3rem, 2vw, 1.85rem); } h4, .h4 { font-size: 1.25rem; } h5, .h5 { font-size: 1rem; letter-spacing: 0; } ::selection { background: var(--fm-green); color: var(--fm-white); } :focus-visible { outline: 2px solid var(--fm-accent); outline-offset: 4px; } .invisible { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .grid, .fm-shell { width: min(calc(100% - 48px), var(--fm-shell)); margin-right: auto; margin-left: auto; } .grid::after, .clearfix::after, .u_clear::after { display: table; clear: both; content: ""; } .grid .grid { width: auto; max-width: none; margin-right: -12px; margin-left: -12px; } .grid > * { box-sizing: border-box; } .u_1, .u_2, .u_3, .u_4, .u_5, .u_6, .u_7, .u_8, .u_9, .u_10, .u_11, .u_12, .u_col { float: left; min-height: 1px; padding-right: 12px; padding-left: 12px; } .u_1 { width: 8.333333%; } .u_2 { width: 16.666667%; } .u_3 { width: 25%; } .u_4 { width: 33.333333%; } .u_5 { width: 41.666667%; } .u_6 { width: 50%; } .u_7 { width: 58.333333%; } .u_8 { width: 66.666667%; } .u_9 { width: 75%; } .u_10 { width: 83.333333%; } .u_11 { width: 91.666667%; } .u_12, .u_col { width: 100%; } .p_1 { margin-left: 8.333333%; } .p_2 { margin-left: 16.666667%; } .p_3 { margin-left: 25%; } .p_4 { margin-left: 33.333333%; } .p_5 { margin-left: 41.666667%; } .p_6 { margin-left: 50%; } .p_7 { margin-left: 58.333333%; } .p_8 { margin-left: 66.666667%; } .p_9 { margin-left: 75%; } .p_10 { margin-left: 83.333333%; } .p_11 { margin-left: 91.666667%; } /* ========================================================================== Header & Navigation ========================================================================== */ #header { position: sticky; top: 0; z-index: 1000; width: 100%; border-bottom: 1px solid rgba(255,255,255,.10); background: rgba(0,54,37,.985); box-shadow: 0 8px 28px rgba(0,31,23,.10); } #header > .inside, #header > .inside.grid, #header .inside.grid { position: relative; display: flex; width: min(calc(100% - 72px), 1320px); min-height: var(--fm-header-height); align-items: center; gap: 42px; margin: 0 auto; } .logo { display: flex; float: none; flex: 0 0 auto; align-items: center; align-self: stretch; margin: 0; padding: 0; } .logo a { display: block; width: 238px; height: 64px; overflow: hidden; background: url("../../files/theme/img/Feldmeier-Kuehl-und-Zerwirkraum.svg") no-repeat left center / contain; text-indent: -9999px; } .topNav { display: flex; width: auto; align-items: center; align-self: stretch; margin-left: auto; } .topNav ul, .mobileNav ul { margin: 0; padding: 0; list-style: none; } .topNav ul.level_1 { display: flex; height: 100%; align-items: center; gap: 4px; } .topNav .level_1 > li { position: relative; display: flex; height: 100%; align-items: center; margin: 0; border: 0; } .topNav .level_1 > li > a, .topNav .level_1 > li > strong, .topNav .level_1 > li > span { position: relative; display: flex; min-height: 46px; align-items: center; padding: 0 15px; border-radius: 2px; color: rgba(255,255,255,.76); font-size: 14.5px; font-weight: 650; line-height: 1; letter-spacing: .015em; white-space: nowrap; transition: color .2s ease, background-color .2s ease; } .topNav .level_1 > li > a::after, .topNav .level_1 > li > strong::after, .topNav .level_1 > li > span::after { position: absolute; right: 15px; bottom: 5px; left: 15px; height: 2px; background: var(--fm-accent); content: ""; opacity: 0; transform: scaleX(.35); transform-origin: center; transition: opacity .2s ease, transform .2s ease; } .topNav .level_1 > li:hover > a, .topNav .level_1 > li.active > strong, .topNav .level_1 > li.active > span, .topNav .level_1 > li > a.active { color: var(--fm-white); } .topNav .level_1 > li:hover > a::after, .topNav .level_1 > li.active > strong::after, .topNav .level_1 > li.active > span::after, .topNav .level_1 > li > a.active::after { opacity: 1; transform: scaleX(1); } .topNav .level_1 > li:last-child { margin-left: 12px; padding-left: 14px; } .topNav .level_1 > li:last-child > a, .topNav .level_1 > li:last-child > strong, .topNav .level_1 > li:last-child > span { min-height: 44px; padding: 0 19px; border: 1px solid rgba(255,255,255,.72); background: var(--fm-white); color: var(--fm-green-dark); font-weight: 750; } .topNav .level_1 > li:last-child > a:hover, .topNav .level_1 > li:last-child > strong:hover, .topNav .level_1 > li:last-child > span:hover { border-color: var(--fm-white); background: rgba(255,255,255,.90); color: var(--fm-green-dark); } .topNav .level_1 > li:last-child > a::after, .topNav .level_1 > li:last-child > strong::after, .topNav .level_1 > li:last-child > span::after { display: none; } .topNav ul.level_2 { position: absolute; top: calc(100% - 14px); left: 0; display: none; min-width: 240px; padding: 10px; border: 1px solid rgba(255,255,255,.08); background: var(--fm-green-dark); box-shadow: 0 20px 50px rgba(0,31,23,.24); } .topNav li:hover > ul.level_2, .topNav li:focus-within > ul.level_2 { display: block; } .topNav .level_2 li a, .topNav .level_2 li span, .topNav .level_2 li strong { display: block; padding: 11px 12px; border-radius: 2px; color: rgba(255,255,255,.78); font-size: 14px; } .topNav .level_2 li a:hover, .topNav .level_2 li a:focus-visible { background: rgba(255,255,255,.06); color: var(--fm-white); } .mobileNav, #header #nav-toggler { display: none; } #header #nav-toggler { color: var(--fm-white); } #header #nav-toggler .burger-container { display: flex; align-items: center; gap: 12px; } #header #nav-toggler .nav-label { color: var(--fm-white); font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } #header #nav-toggler .nav-burger { position: relative; width: 24px; height: 18px; } #header #nav-toggler .nav-burger > span { position: absolute; left: 0; display: block; width: 100%; height: 2px; background: var(--fm-white); transition: transform .25s ease, top .25s ease, opacity .2s ease; } #header #nav-toggler .top-bun { top: 0; } #header #nav-toggler .patty { top: 8px; } #header #nav-toggler .btm-bun { top: 16px; } .open-nav #header #nav-toggler .top-bun { top: 8px; transform: rotate(45deg); } .open-nav #header #nav-toggler .patty { opacity: 0; } .open-nav #header #nav-toggler .btm-bun { top: 8px; transform: rotate(-45deg); } @media (min-width: 1101px) and (max-width: 1210px) { #header > .inside, #header > .inside.grid, #header .inside.grid { width: calc(100% - 44px); gap: 22px; } .logo a { width: 208px; } .topNav .level_1 > li > a, .topNav .level_1 > li > strong, .topNav .level_1 > li > span { padding-right: 10px; padding-left: 10px; font-size: 13.5px; } .topNav .level_1 > li:last-child { margin-left: 6px; padding-left: 10px; } } @media (max-width: 1100px) { :root { --fm-header-height: 76px; } #header { box-shadow: 0 1px 0 rgba(255,255,255,.08); } #header > .inside, #header > .inside.grid, #header .inside.grid { width: min(calc(100% - 48px), var(--fm-shell)); min-height: var(--fm-header-height); gap: 0; } .logo a { width: 225px; height: 58px; } .topNav { display: none; } .mobileNav { display: block; margin-left: auto; } #header #nav-toggler { position: static; display: block; margin-left: auto; padding: 12px 0 12px 16px; } .mobileNav .level_1 { position: fixed; z-index: -1; top: var(--fm-header-height); right: 0; bottom: 0; left: 0; display: flex; visibility: hidden; flex-direction: column; align-items: flex-start; justify-content: flex-start; overflow-y: auto; padding: clamp(54px, 9vh, 90px) max(24px, calc((100vw - 760px) / 2)); background: var(--fm-green-deep); opacity: 0; transform: translateY(-12px); transition: opacity .25s ease, transform .25s ease, visibility .25s ease; } .open-nav .mobileNav .level_1 { z-index: 999; visibility: visible; opacity: 1; transform: none; } .mobileNav .level_1 > li { width: 100%; margin: 0; padding: 0; border-bottom: 1px solid rgba(255,255,255,.10); line-height: 1; text-align: left; } .mobileNav .level_1 > li > a, .mobileNav .level_1 > li > strong, .mobileNav .level_1 > li > span { display: block; padding: 15px 0; color: rgba(255,255,255,.82); font-size: clamp(1.65rem, 6vw, 2.5rem); font-weight: 750; line-height: 1.15; letter-spacing: -.025em; } .mobileNav .level_1 > li.active > strong, .mobileNav .level_1 > li a:hover, .mobileNav .level_1 > li a:focus-visible { color: var(--fm-white); } .mobileNav ul.level_2 { padding: 4px 0 14px; } .mobileNav ul.level_2 a, .mobileNav ul.level_2 strong, .mobileNav ul.level_2 span { color: rgba(255,255,255,.62); font-size: 1rem; } .mobileNav .level_1 > li:last-child { margin-top: 22px; border-bottom: 0; } .mobileNav .level_1 > li:last-child > a, .mobileNav .level_1 > li:last-child > strong, .mobileNav .level_1 > li:last-child > span { display: inline-flex; width: auto; padding: 13px 20px; border: 1px solid var(--fm-white); background: var(--fm-white); color: var(--fm-green-dark); font-size: 1rem; font-weight: 750; } } @media (max-width: 860px) { #header > .inside, #header > .inside.grid, #header .inside.grid { width: min(calc(100% - 36px), var(--fm-shell)); } } @media (max-width: 560px) { #header > .inside, #header > .inside.grid, #header .inside.grid { width: calc(100% - 28px); } .logo a { width: 190px; height: 52px; } #header #nav-toggler .nav-label { display: none; } } .button, button, input[type="submit"], .fm-btn { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 0 24px; border: 1px solid var(--fm-green); border-radius: var(--fm-radius); background: var(--fm-green); color: var(--fm-white); font: inherit; font-size: .92rem; font-weight: 700; line-height: 1; cursor: pointer; transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease; } .button:hover, button:hover, input[type="submit"]:hover, .fm-btn:hover { border-color: var(--fm-green-dark); background: var(--fm-green-dark); color: var(--fm-white); transform: translateY(-1px); } .fm-btn--light { border-color: var(--fm-white); background: var(--fm-white); color: var(--fm-green-dark); } .fm-btn--light:hover { border-color: var(--fm-sand); background: var(--fm-sand); color: var(--fm-green-dark); } .fm-btn--ghost { border-color: rgba(255,255,255,.4); background: transparent; color: var(--fm-white); } .fm-btn--ghost:hover { border-color: var(--fm-white); background: rgba(255,255,255,.08); color: var(--fm-white); } .fm-textlink { display: inline-flex; align-items: center; gap: 9px; color: var(--fm-green); font-weight: 750; } .fm-textlink::after { content: "→"; transition: transform .2s ease; } .fm-textlink:hover::after { transform: translateX(4px); } #article-1 { width: 100%; } #article-1 > .inside, #article-31 > .inside, #article-9 > .inside, #article-10 > .inside, #article-15 > .inside { width: 100%; max-width: none; } /* ------------------------------------------------------------------------ Startseite – Hero mit Video ------------------------------------------------------------------------ */ #article-1 { width: 100%; } #article-1 > .inside { width: 100%; max-width: none; } .fm-hero { position: relative; display: flex; min-height: min(790px, calc(100vh - var(--fm-header-height))); align-items: stretch; overflow: hidden; background: var(--fm-green-dark); color: var(--fm-white); } /* ------------------------------------------------------------------------ Hintergrundvideo ------------------------------------------------------------------------ */ .fm-hero__video { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; border: 0; object-fit: cover; object-position: center; pointer-events: none; } /* ------------------------------------------------------------------------ Farbverlauf / Lesbarkeits-Overlay ------------------------------------------------------------------------ */ .fm-hero::before { position: absolute; z-index: 1; inset: 0; background: linear-gradient( 90deg, rgba(0, 34, 24, .96) 0%, rgba(0, 43, 30, .84) 36%, rgba(0, 43, 30, .52) 58%, rgba(0, 43, 30, .20) 78%, rgba(0, 43, 30, .10) 100% ); content: ""; pointer-events: none; } /* ------------------------------------------------------------------------ Hero-Inhalt ------------------------------------------------------------------------ */ .fm-hero__content { position: relative; z-index: 2; display: flex; min-height: 650px; flex-direction: column; align-items: flex-start; justify-content: center; padding-top: 72px; padding-bottom: 150px; } .fm-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 24px; color: rgba(255, 255, 255, .76); font-size: 1.23rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; } .fm-eyebrow::before { width: 38px; height: 1px; background: var(--fm-accent); content: ""; } .fm-hero h1 { max-width: 850px; margin-bottom: 26px; color: var(--fm-white); font-size: clamp(3.15rem, 6.8vw, 6.4rem); line-height: .94; letter-spacing: -.055em; } .fm-hero__lead { max-width: 670px; margin-bottom: 34px; color: rgba(255, 255, 255, .82); font-size: clamp(1.08rem, 1.6vw, 1.28rem); line-height: 1.55; } .fm-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; } /* ------------------------------------------------------------------------ Facts am unteren Hero-Rand ------------------------------------------------------------------------ */ .fm-hero__facts { position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; border-top: 1px solid rgba(255, 255, 255, .14); background: rgba(0, 45, 32, .70); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .fm-hero__facts-inner { display: grid; grid-template-columns: repeat(4, 1fr); } .fm-hero__fact { min-height: 100px; padding: 23px 28px; border-right: 1px solid rgba(255, 255, 255, .13); } .fm-hero__fact:last-child { border-right: 0; } .fm-hero__fact strong { display: block; margin-bottom: 3px; color: var(--fm-white); font-size: .95rem; font-weight: 750; } .fm-hero__fact span { color: rgba(255, 255, 255, .58); font-size: .82rem; } /* ------------------------------------------------------------------------ Tablet ------------------------------------------------------------------------ */ @media (max-width: 900px) { .fm-hero { min-height: 700px; } .fm-hero__content { min-height: 590px; padding-top: 70px; padding-bottom: 150px; } .fm-hero h1 { max-width: 720px; font-size: clamp(3rem, 9vw, 5rem); } .fm-hero__lead { max-width: 600px; } .fm-hero__facts-inner { grid-template-columns: repeat(2, 1fr); } .fm-hero__fact { min-height: 82px; padding: 18px 22px; } .fm-hero__fact:nth-child(2) { border-right: 0; } .fm-hero__fact:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .13); } } /* ------------------------------------------------------------------------ Smartphone ------------------------------------------------------------------------ */ @media (max-width: 640px) { .fm-hero { min-height: 680px; } .fm-hero__video { object-position: center center; } .fm-hero::before { background: linear-gradient( 90deg, rgba(0, 34, 24, .95) 0%, rgba(0, 43, 30, .84) 55%, rgba(0, 43, 30, .52) 100% ); } .fm-hero::after { right: -180px; bottom: -180px; width: 420px; height: 420px; } .fm-hero__content { min-height: 520px; padding-top: 58px; padding-bottom: 170px; } .fm-eyebrow { margin-bottom: 18px; font-size: .68rem; } .fm-hero h1 { margin-bottom: 22px; font-size: clamp(2.8rem, 14vw, 4rem); line-height: .94; } .fm-hero__lead { margin-bottom: 28px; font-size: 1rem; line-height: 1.6; } .fm-hero__actions { width: 100%; flex-direction: column; } .fm-hero__actions .fm-btn { width: 100%; } .fm-hero__facts-inner { grid-template-columns: repeat(2, 1fr); } .fm-hero__fact { min-height: 74px; padding: 15px 16px; } .fm-hero__fact strong { font-size: .82rem; } .fm-hero__fact span { font-size: .7rem; } } /* ------------------------------------------------------------------------ Reduced Motion ------------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .fm-hero__video { display: none; } } .fm-process { padding: clamp(85px, 9vw, 140px) 0; background: var(--fm-white); } .fm-section-head { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: end; margin-bottom: 54px; } .fm-section-head .fm-kicker, .fm-kicker { margin: 0 0 14px; color: var(--fm-accent); font-size: .75rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; } .fm-section-head h2 { margin: 0; } .fm-section-head__copy { max-width: 580px; margin-left: auto; color: var(--fm-muted); font-size: 1.05rem; } .fm-process__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .fm-process__item { position: relative; min-height: 410px; overflow: hidden; background: var(--fm-green-dark); } .fm-process__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.65,.25,1); } .fm-process__item::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,24,17,.82) 100%); content: ""; } .fm-process__item:hover img { transform: scale(1.035); } .fm-process__caption { position: absolute; z-index: 2; right: 24px; bottom: 24px; left: 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; color: var(--fm-white); } .fm-process__caption strong { color: var(--fm-white); font-size: 1rem; } .fm-process__caption span { color: rgba(255,255,255,.55); font-size: .78rem; font-weight: 800; letter-spacing: .12em; } .fm-advantages { padding: clamp(90px, 10vw, 150px) 0; background: var(--fm-sand); } .fm-advantages__intro { max-width: 780px; margin-bottom: 58px; } .fm-advantages__intro h2 { margin-bottom: 20px; } .fm-advantages__intro > p:last-child { max-width: 650px; margin-bottom: 0; color: var(--fm-muted); font-size: 1.06rem; } .fm-advantages__grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #cfd5d0; } .fm-advantage { min-height: 360px; padding: 40px 40px 24px 0; border-right: 1px solid #cfd5d0; } .fm-advantage + .fm-advantage { padding-left: 40px; } .fm-advantage:last-child { border-right: 0; } .fm-advantage__number { display: block; margin-bottom: 72px; color: var(--fm-accent); font-size: .78rem; font-weight: 850; letter-spacing: .14em; } .fm-advantage h3 { margin-bottom: 16px; font-size: clamp(1.55rem, 2vw, 2.1rem); } .fm-advantage p { max-width: 340px; color: var(--fm-copy); } .fm-editorial { padding: clamp(90px, 9vw, 140px) 0; } .fm-editorial--green { background: var(--fm-green-dark); } .fm-editorial__row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr); align-items: stretch; min-height: 610px; } .fm-editorial__media { position: relative; overflow: hidden; background: var(--fm-sand); } .fm-editorial__media img { width: 100%; height: 100%; min-height: 610px; object-fit: cover; } .fm-editorial__content { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(48px, 6vw, 92px); background: var(--fm-paper); } .fm-editorial__content h2 { margin-bottom: 22px; } .fm-editorial__content > p:not(.fm-kicker) { max-width: 510px; } .fm-editorial__features { display: grid; width: 100%; grid-template-columns: 1fr 1fr; gap: 0 28px; margin: 26px 0 30px; padding: 0; list-style: none; } .fm-editorial__features li { padding: 11px 0; border-top: 1px solid var(--fm-line); color: var(--fm-ink); font-size: .91rem; font-weight: 650; } .fm-editorial__statement { display: grid; grid-template-columns: minmax(320px, .72fr) minmax(0, 1.28fr); gap: 70px; align-items: center; margin-top: 18px; padding-top: 82px; color: var(--fm-white); } .fm-editorial__statement h2 { color: var(--fm-white); } .fm-editorial__statement p { max-width: 620px; color: rgba(255,255,255,.7); } .fm-made-in-germany { display: inline-flex; align-items: center; gap: 22px; margin-top: 14px; color: rgba(255,255,255,.76); font-size: .83rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; } .fm-made-in-germany::before { display: block; width: 300px; height: 122px; background: url("../../files/theme/img/madeInGermany3.png") no-repeat center / contain; content: ""; } #article-15 { padding: clamp(92px, 8vw, 132px) 0 0; background: var(--fm-white); } #article-15 > .fm-gallery-intro, #article-15 > .ce_gallery { width: min(calc(100% - 88px), var(--fm-shell)); margin-right: auto; margin-left: auto; } .fm-gallery-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 48px; margin-bottom: clamp(34px, 4vw, 54px); } .fm-gallery-intro__copy { max-width: 760px; } .fm-gallery-intro .fm-kicker { margin-bottom: 12px; } .fm-gallery-intro h2 { max-width: 720px; margin-bottom: 14px; } .fm-gallery-intro p:last-child { max-width: 670px; margin-bottom: 0; color: var(--fm-muted); } .fm-gallery-intro .fm-textlink { margin-bottom: 5px; white-space: nowrap; } #article-15 .ce_gallery ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(230px, 20vw, 310px); gap: 14px; width: 100%; margin: 0; padding: 0; list-style: none; } #article-15 .ce_gallery li, #article-15 .ce_gallery .cols_3 li { position: relative; float: none; width: auto; min-width: 0; height: auto; margin: 0; padding: 0; overflow: hidden; background: #e9ece8; } #article-15 .ce_gallery li:nth-child(1) { grid-column: span 2; } #article-15 .ce_gallery li:nth-child(2) { grid-column: span 1; } #article-15 .ce_gallery li:nth-child(3) { grid-column: span 1; } #article-15 .ce_gallery li:nth-child(4) { grid-column: span 1; } #article-15 .ce_gallery li:nth-child(5) { grid-column: span 1; } #article-15 .ce_gallery li:nth-child(6) { grid-column: span 2; } #article-15 .ce_gallery figure, #article-15 .ce_gallery .image_container, #article-15 .ce_gallery a { display: block; width: 100%; height: 100%; } #article-15 .ce_gallery img, #article-15 .ce_gallery li:nth-child(1) img, #article-15 .ce_gallery li:nth-child(6) img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .55s cubic-bezier(.2,.65,.25,1), filter .35s ease; } #article-15 .ce_gallery li::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 58%, rgba(0,43,30,.13) 100%); content: ""; pointer-events: none; opacity: .65; transition: opacity .35s ease; } #article-15 .ce_gallery li:hover img { transform: scale(1.035); } #article-15 .ce_gallery li:hover::after { opacity: 1; } .fm-cta { width: 100%; margin-top: clamp(85px, 9vw, 130px); margin-left: 0; background: var(--fm-green); color: var(--fm-white); } .fm-cta__inner { display: grid; grid-template-columns: minmax(0, 1.25fr) auto; gap: 60px; align-items: center; padding-top: clamp(58px, 7vw, 88px); padding-bottom: clamp(58px, 7vw, 88px); } .fm-cta .fm-kicker { color: rgba(255,255,255,.58); } .fm-cta h2 { max-width: 780px; margin-bottom: 12px; color: var(--fm-white); } .fm-cta p { max-width: 640px; margin-bottom: 0; color: rgba(255,255,255,.72); } .fm-cta__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; } #ct-inner, #willkommen-inner.noSlider { position: relative; float: none !important; clear: both; width: 100%; margin: clamp(62px, 7vw, 100px) auto clamp(70px, 7vw, 110px); padding: clamp(64px, 8vw, 110px) clamp(34px, 8vw, 108px); overflow: hidden; background: var(--fm-sand); } #ct-inner::before, #willkommen-inner.noSlider::before { position: absolute; top: 0; bottom: 0; left: 0; width: 5px; background: var(--fm-green); content: ""; } #ct-inner::after, #willkommen-inner.noSlider::after { position: absolute; top: -110px; right: -80px; width: 310px; height: 310px; border: 1px solid rgba(0,67,45,.12); border-radius: 50%; content: ""; } #ct-inner h1, #willkommen-inner.noSlider h1 { position: relative; z-index: 1; max-width: 900px; margin-right: auto; margin-left: auto; text-align: center !important; } #ct-inner #mods, #willkommen-inner.noSlider #mods { position: relative; z-index: 1; max-width: 800px; margin: 22px auto 0; } #ct-inner p, #willkommen-inner.noSlider p { color: var(--fm-copy); font-size: 1.03rem; line-height: 1.75; } #ct-inner p:last-child, #willkommen-inner.noSlider p:last-child { margin-bottom: 0; } #willkommen-inner:not(.noSlider) { margin: 0; padding: 0; background: transparent; } #willkommen-inner:not(.noSlider)::after { display: none; } #ueberblick, #article-16, #article-27, #article-28, #article-17, #article-18, #article-19, #article-5, #article-6, #article-7, #article-29 { clear: both; } #article-16, #article-27, #article-28, #article-17, #article-18, #article-19, #article-5, #article-29 { padding-bottom: clamp(70px, 8vw, 120px); } #article-16 #overview, #ueberblick #overview { display: flex; flex-wrap: wrap; align-items: stretch; margin-right: -12px; margin-left: -12px; } .ueberblick-leistungen { margin-bottom: 24px !important; } .overview-inner { height: 100% !important; overflow: hidden; border: 1px solid var(--fm-line); background: var(--fm-white); box-shadow: none; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .overview-inner:hover { border-color: #c7d1ca; box-shadow: 0 18px 45px rgba(0,45,32,.08); transform: translateY(-3px); } .overview-inner h2 { margin: 0; padding: 30px 30px 14px !important; font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.12; } .overview-inner p { margin: 0; padding: 0 30px 30px; color: var(--fm-copy); font-size: .95rem; line-height: 1.7; } .overview-inner a { display: block; padding: 16px 28px; background: var(--fm-green); color: var(--fm-white); font-weight: 700; text-align: center; } .overview-inner a:hover { background: var(--fm-green-dark); color: var(--fm-white); } #overview img { width: 100%; height: 390px; object-fit: cover; } #article-27 .grid, #article-28 .grid { display: flex; flex-wrap: wrap; gap: 24px; } #article-27 .grid > .mb_50, #article-28 .grid > .mb_50 { flex: 0 0 100%; width: 100%; margin-bottom: 28px; } .ausstattung_block { display: flex; width: auto; height: auto; min-height: 390px; flex: 1 1 calc(25% - 24px); flex-direction: column; margin: 0; overflow: hidden; border: 1px solid var(--fm-line); background: var(--fm-white); text-align: left; } .ausstattung_block .image_container, .ausstattung_block figure { overflow: hidden; } .ausstattung_block img { width: 100%; height: 210px; object-fit: cover; transition: transform .4s ease; } .ausstattung_block:hover img { transform: scale(1.035); } .ausstattung_block .text_container, .ausstattung_block > p, .ausstattung_block > div:not(.image_container) { padding-right: 24px; padding-left: 24px; } .ausstattung_block p { margin: 0; padding: 0 24px 12px; color: var(--fm-copy); font-size: .92rem; line-height: 1.6; } .ausstattung_block p:first-of-type { padding-top: 24px; color: var(--fm-ink); font-size: 1.02rem; } .ausstattung_block p:last-child { padding-bottom: 28px; } #teaserBlock { display: grid; grid-template-columns: 1fr 1fr; padding: clamp(80px, 8vw, 130px) 0; } #teaserBlock::after { display: none; } #teaserBlock .teaserLeft, #teaserBlock .teaserRight, #teaserBlock .textLeft, #teaserBlock .textRight { float: none; width: 100%; height: auto; min-height: 500px; margin: 0; padding: 0; background: none; } #teaserBlock .teaserLeft, #teaserBlock .teaserRight { overflow: hidden; } #teaserBlock img { width: 100%; height: 100%; min-height: 500px; object-fit: cover; } #teaserBlock .textLeft, #teaserBlock .textRight { display: flex; align-items: center; background: var(--fm-sand); } #teaserBlock .textLeft::after { display: none; } #teaserBlock .ce_text { width: 100%; margin: 0 !important; padding: clamp(45px, 7vw, 90px); } #teaserBlock .ce_text h2 { margin-bottom: 20px; } #teaserBlock .ce_text p, #teaserBlock p { color: var(--fm-copy); font-size: 1rem; line-height: 1.75; } #teaserBlock a { color: var(--fm-green); font-weight: 700; } #teaserBlock a::before { margin-right: 7px; content: "→"; } #article-17 > .inside, #article-6 > .inside, #article-7 > .inside { width: min(calc(100% - 48px), 920px); margin: 0 auto; } #article-17 .ce_text > p { color: var(--fm-copy); font-size: 1.04rem; line-height: 1.85; text-align: left !important; } .ce_gallery ul { margin: 0 -6px; padding: 0; list-style: none; } .ce_gallery li { float: left; margin-bottom: 12px; padding: 0 6px; } .ce_gallery .cols_2 li { width: 50%; } .ce_gallery .cols_3 li { width: 33.333333%; } .ce_gallery .cols_4 li { width: 25%; } .ce_gallery .cols_5 li { width: 20%; } .ce_gallery .cols_6 li { width: 16.666667%; } .ce_gallery img, .masonry_gallery img, #article-18 img { width: 100%; transition: opacity .2s ease, transform .35s ease; } .ce_gallery a:hover img, #article-18 a:hover img { opacity: .94; } #article-18 > .inside { width: min(calc(100% - 48px), var(--fm-shell)); margin: 0 auto; } #article-18 .ce_masonry_gallery, #article-18 .masonry_gallery { margin-bottom: 0; } #article-19 > .inside { width: min(calc(100% - 48px), 980px); margin: 0 auto; } #article-19 .ce_text { margin-bottom: 36px; padding: 28px 32px; border-left: 3px solid var(--fm-accent); background: var(--fm-sand); } .ce_downloads ul { margin: 0; padding: 0; list-style: none; } .ce_downloads li { position: relative; margin: 0; border-top: 1px solid var(--fm-line); } .ce_downloads li:last-child { border-bottom: 1px solid var(--fm-line); } .ce_downloads li::before { position: absolute; top: 50%; left: 20px; width: 22px; height: 22px; background: url("../../files/theme/img/pdf-download.svg") no-repeat center / contain; content: ""; transform: translateY(-50%); } .ce_downloads a { display: block; padding: 21px 60px; color: var(--fm-ink); font-weight: 700; } .ce_downloads a::after { position: absolute; top: 50%; right: 20px; color: var(--fm-green); content: "↓"; transform: translateY(-50%); } .ce_downloads a:hover { background: var(--fm-sand); color: var(--fm-green); } .kontaktform { padding: clamp(70px, 8vw, 120px) 0; background: var(--fm-sand); } .kontaktform > .inside, .kontaktform .grid { width: min(calc(100% - 48px), 900px); margin: 0 auto; } .kontaktform .ce_form { padding: 0; } form .formbody::after { display: table; clear: both; content: ""; } form label { display: block; margin-bottom: 8px; color: var(--fm-ink); font-size: .86rem; font-weight: 700; } form input[type="text"], form input[type="email"], form input[type="tel"], form input[type="search"], form input[type="number"], form select, form textarea { display: block; width: 100%; min-height: 52px; margin: 0 0 22px; padding: 13px 15px; border: 1px solid #cfd6d1; border-radius: 0; outline: none; background: var(--fm-white); color: var(--fm-ink); font: inherit; transition: border-color .2s ease, box-shadow .2s ease; appearance: none; } form textarea { min-height: 180px; resize: vertical; } form input:focus, form textarea:focus, form select:focus { border-color: var(--fm-green); box-shadow: 0 0 0 3px rgba(0,67,45,.08); } form fieldset { margin: 0; padding: 0; border: 0; } form input[type="checkbox"], form input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; } form input[type="checkbox"] + label, form input[type="radio"] + label { position: relative; padding-left: 31px; font-weight: 500; } form input[type="checkbox"] + label::before, form input[type="radio"] + label::before { position: absolute; top: 2px; left: 0; width: 18px; height: 18px; border: 1px solid #aeb9b2; background: var(--fm-white); content: ""; } form input[type="radio"] + label::before { border-radius: 50%; } form input[type="checkbox"]:checked + label::after, form input[type="radio"]:checked + label::after { position: absolute; top: 6px; left: 4px; width: 10px; height: 10px; background: var(--fm-green); content: ""; } form input[type="radio"]:checked + label::after { border-radius: 50%; } .datenschutzCheck { margin: 10px 0 24px; } /* ========================================================================== Impressum & Datenschutz ========================================================================== */ body.page-legal #main > .inside { width: 100%; max-width: none; } body.page-legal #article-6, body.page-legal #article-7 { width: min(calc(100% - 48px), var(--fm-shell)); margin: clamp(54px, 6vw, 86px) auto clamp(70px, 8vw, 120px); padding: 0; } body.page-legal #article-6::before, body.page-legal #article-7::before { display: flex; min-height: 260px; align-items: center; padding: clamp(52px, 6vw, 82px) clamp(48px, 6vw, 84px); border-left: 3px solid var(--fm-green); background: var(--fm-sand); color: var(--fm-green); font-family: var(--fm-display); font-size: clamp(2.8rem, 5vw, 4.9rem); font-weight: 700; line-height: .98; letter-spacing: -.045em; } body.page-legal #article-6::before { content: "Impressum"; } body.page-legal #article-7::before { content: "Datenschutz"; } body.page-legal #article-7 > .ce_text > h2:first-child { display: none; } body.page-legal #article-6 > .ce_text, body.page-legal #article-7 > .ce_text { width: min(100%, 900px); margin: 0 auto; padding: clamp(58px, 7vw, 92px) 0 0; color: var(--fm-copy); font-size: 1rem; line-height: 1.8; } body.page-legal #article-6 > .ce_text h2, body.page-legal #article-7 > .ce_text h2 { margin: 24px 0 0; padding: 42px 0 14px; border-top: 1px solid var(--fm-line); color: var(--fm-green); font-family: var(--fm-display); font-size: clamp(1.35rem, 2vw, 1.8rem); font-weight: 700; line-height: 1.15; letter-spacing: -.025em; } body.page-legal #article-6 > .ce_text h2:first-child, body.page-legal #article-7 > .ce_text h2:nth-of-type(2) { margin-top: 0; padding-top: 0; border-top: 0; } body.page-legal #article-6 > .ce_text h3, body.page-legal #article-7 > .ce_text h3, body.page-legal #article-6 > .ce_text h4, body.page-legal #article-7 > .ce_text h4 { margin: 30px 0 10px; color: var(--fm-ink); font-weight: 700; line-height: 1.25; } body.page-legal #article-6 > .ce_text p, body.page-legal #article-7 > .ce_text p { max-width: none; margin: 0 0 18px; color: var(--fm-copy); line-height: 1.8; } body.page-legal #article-6 > .ce_text p:empty, body.page-legal #article-7 > .ce_text p:empty { display: none; } body.page-legal #article-6 > .ce_text a, body.page-legal #article-7 > .ce_text a { color: var(--fm-green); font-weight: 650; text-decoration: underline; text-decoration-color: rgba(0,67,45,.28); text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; } body.page-legal #article-6 > .ce_text a:hover, body.page-legal #article-7 > .ce_text a:hover { color: var(--fm-green-dark); text-decoration-color: currentColor; } body.page-legal #article-6 > .ce_text ul, body.page-legal #article-7 > .ce_text ul, body.page-legal #article-6 > .ce_text ol, body.page-legal #article-7 > .ce_text ol { margin: 0 0 24px; padding-left: 1.35rem; } body.page-legal #article-6 > .ce_text li, body.page-legal #article-7 > .ce_text li { margin-bottom: 8px; color: var(--fm-copy); line-height: 1.75; list-style: inherit; } body.page-legal #article-6 > .ce_text strong, body.page-legal #article-7 > .ce_text strong { color: var(--fm-ink); font-weight: 700; } @media (max-width: 900px) { body.page-legal #article-6, body.page-legal #article-7 { width: min(calc(100% - 40px), var(--fm-shell)); margin-top: 48px; margin-bottom: 86px; } body.page-legal #article-6::before, body.page-legal #article-7::before { min-height: 220px; padding: 50px 44px; } body.page-legal #article-6 > .ce_text, body.page-legal #article-7 > .ce_text { padding-top: 54px; } } @media (max-width: 640px) { body.page-legal #article-6, body.page-legal #article-7 { width: calc(100% - 32px); margin-top: 30px; margin-bottom: 68px; } body.page-legal #article-6::before, body.page-legal #article-7::before { min-height: 170px; padding: 38px 26px 40px; border-left-width: 2px; font-size: clamp(2.25rem, 11vw, 3.25rem); line-height: 1; } body.page-legal #article-6 > .ce_text, body.page-legal #article-7 > .ce_text { padding-top: 42px; font-size: .96rem; } body.page-legal #article-6 > .ce_text h2, body.page-legal #article-7 > .ce_text h2 { padding-top: 34px; font-size: 1.35rem; } body.page-legal #article-6 > .ce_text p, body.page-legal #article-7 > .ce_text p { line-height: 1.72; } } /* ========================================================================== Footer ========================================================================== */ #footer { clear: both; padding: 58px 0 44px; background: var(--fm-green-deep); color: rgba(255,255,255,.58); } #footer b{ color: rgba(255,255,255,.70); } #footer > .inside, #footer .inside.grid { width: min(calc(100% - 48px), var(--fm-shell)); margin: 0 auto; } .footer-brandline { display: flex; align-items: baseline; justify-content: center; gap: 14px; margin-bottom: 24px; color: rgba(255,255,255,.62); text-align: center; } .footer-brandline strong { color: var(--fm-white); font-size: 1rem; font-weight: 800; letter-spacing: -.01em; } .footer-brandline span { font-size: .8rem; } .footerNavMeta ul { display: flex; width: 100%; height: auto; align-items: center; justify-content: center; gap: 30px; margin: 0 0 22px; padding: 0; list-style: none; } .footerNavMeta li { min-width: 0; text-align: center; } .footerNavMeta li a, .footerNavMeta li span, .footerNavMeta li strong { color: rgba(255,255,255,.68); font-size: .82rem; font-weight: 650; } .footerNavMeta li a:hover, .footerNavMeta li a:focus-visible, .footerNavMeta li.active strong { color: var(--fm-white); } .copyright p { margin: 0; color: rgba(255,255,255,.70); font-size: .78rem; text-align: center; } .copyright a { color: rgba(255,255,255,.70); } @media (max-width: 560px) { #footer { padding: 46px 0 36px; } .footer-brandline { flex-direction: column; gap: 2px; } .footerNavMeta ul { flex-wrap: wrap; gap: 13px 24px; } } .contao-cookiebar.cc-wrap { z-index: 5000; font-family: var(--fm-font); } .contao-cookiebar .cc-inner { border-top: 1px solid rgba(255,255,255,.08); background: var(--fm-green-deep); color: rgba(255,255,255,.8); } .contao-cookiebar .cc-head, .contao-cookiebar .cc-groups, .contao-cookiebar .cc-footer { width: min(calc(100% - 40px), 960px); margin-right: auto; margin-left: auto; } .contao-cookiebar button, .contao-cookiebar .cc-btn { min-height: 44px; padding: 0 18px; } .slick-slider { position: relative; } .slick-slide { margin: 0; } .slick-arrow { position: absolute; z-index: 5; top: 50%; color: var(--fm-white); transform: translateY(-50%); } .slick-slider .fa-chevron-left { left: 22px; } .slick-slider .fa-chevron-right { right: 22px; } .slick__custom .fa-chevron-right, .slick__custom .fa-chevron-left { font-size: 2rem; } .t-center { text-align: center; } .t-right { text-align: right; } .t-italic { font-style: italic; } .float_left { float: left; } .float_right { float: right; } .centerize { margin-right: auto; margin-left: auto; } .stretch { width: 100%; } .warning { color: var(--fm-green); } .pt_80 { padding-top: 80px; } .mt_80 { margin-top: 80px; } .mt_130 { margin-top: 130px; } .mb_30 { margin-bottom: 30px; } .mb_50 { margin-bottom: 50px; } .mb_80 { margin-bottom: 80px; } .mb_100 { margin-bottom: 100px; } .mb_130 { margin-bottom: 130px; } .mbt_130 { margin-top: 130px; margin-bottom: 130px; } @media (max-width: 1100px) { :root { --fm-header-height: 96px; } .fm-hero { min-height: 700px; } .fm-process__grid { grid-template-columns: repeat(2, 1fr); } .fm-process__item { min-height: 390px; } .fm-editorial__row { grid-template-columns: 1fr 1fr; } .ausstattung_block { flex-basis: calc(33.333% - 24px); } } @media (max-width: 860px) { .u_1, .u_2, .u_3, .u_4, .u_5, .u_6, .u_7, .u_8, .u_9, .u_10, .u_11, .u_12, .u_col { float: none; width: 100%; margin-left: 0; } .fm-hero::before { background: linear-gradient(90deg, rgba(0,34,24,.94) 0%, rgba(0,43,30,.78) 62%, rgba(0,43,30,.38) 100%), url("../../files/content/startseite/auslieferung_daenemark.jpg") 60% center / cover no-repeat; } .fm-hero__facts-inner { grid-template-columns: repeat(2, 1fr); } .fm-hero__fact:nth-child(2) { border-right: 0; } .fm-hero__fact:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.13); } .fm-section-head { grid-template-columns: 1fr; gap: 20px; } .fm-section-head__copy { margin-left: 0; } .fm-advantages__grid { grid-template-columns: 1fr; } .fm-advantage, .fm-advantage + .fm-advantage { min-height: 0; padding: 34px 0 36px; border-right: 0; border-bottom: 1px solid #cfd5d0; } .fm-advantage:last-child { border-bottom: 0; } .fm-advantage__number { margin-bottom: 28px; } .fm-editorial__row { grid-template-columns: 1fr; } .fm-editorial__media img { min-height: 480px; } .fm-editorial__statement { grid-template-columns: 1fr; gap: 26px; padding-top: 65px; } #article-15 .ce_gallery ul { grid-template-columns: repeat(2, 1fr); } #article-15 .ce_gallery li:nth-child(n) { grid-column: auto; } #article-15 .ce_gallery img, #article-15 .ce_gallery li:nth-child(1) img, #article-15 .ce_gallery li:nth-child(6) img { height: 300px; } .fm-gallery-intro { display: block; } .fm-cta__inner { grid-template-columns: 1fr; gap: 34px; } .fm-cta__actions { justify-content: flex-start; } #teaserBlock { grid-template-columns: 1fr; } #teaserBlock .teaserLeft, #teaserBlock .teaserRight, #teaserBlock .textLeft, #teaserBlock .textRight { min-height: 0; } #teaserBlock img { min-height: 420px; } .ausstattung_block { flex-basis: calc(50% - 24px); } } @media (max-width: 620px) { :root { --fm-header-height: 96px; } .fm-hero { min-height: 720px; } .fm-hero__content { min-height: 560px; padding-top: 56px; padding-bottom: 190px; } .fm-hero h1 { font-size: clamp(2.65rem, 14vw, 4rem); } .fm-hero__lead { font-size: 1rem; } .fm-hero__actions { width: 100%; } .fm-hero__actions .fm-btn { width: 100%; } .fm-hero__facts-inner { grid-template-columns: 1fr 1fr; } .fm-hero__fact { min-height: 84px; padding: 17px 15px; } .fm-process__grid { grid-template-columns: 1fr; } .fm-process__item { min-height: 380px; } .fm-editorial { padding: 70px 0; } .fm-editorial__row { min-height: 0; } .fm-editorial__media img { min-height: 360px; } .fm-editorial__content { padding: 42px 28px; } .fm-editorial__features { grid-template-columns: 1fr; } #article-15 .ce_gallery ul { grid-template-columns: 1fr; } #article-15 .ce_gallery img, #article-15 .ce_gallery li:nth-child(1) img, #article-15 .ce_gallery li:nth-child(6) img { height: 280px; } #ct-inner, #willkommen-inner.noSlider { width: 100%; margin-top: 38px; margin-bottom: 58px; padding: 48px 24px; } .ausstattung_block { flex-basis: 100%; } .ce_gallery .cols_3 li, .ce_gallery .cols_4 li, .ce_gallery .cols_5 li, .ce_gallery .cols_6 li { width: 50%; } .fm-cta__actions .fm-btn { width: 100%; } } @media (max-width: 420px) { .ce_gallery .cols_2 li, .ce_gallery .cols_3 li, .ce_gallery .cols_4 li, .ce_gallery .cols_5 li, .ce_gallery .cols_6 li { width: 100%; } .fm-hero__fact strong { font-size: .82rem; } .fm-hero__fact span { font-size: .72rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; scroll-padding-top: calc(var(--fm-header-height) + 20px); } *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; } } @media (min-width: 1101px) { :root { --fm-header-height: 96px; } } @media (max-width: 960px) { #article-15 > .fm-gallery-intro, #article-15 > .ce_gallery { width: min(calc(100% - 48px), var(--fm-shell)); } .fm-gallery-intro { grid-template-columns: 1fr; align-items: start; gap: 18px; } .fm-gallery-intro .fm-textlink { justify-self: start; margin-bottom: 0; } #article-15 .ce_gallery ul { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 280px; gap: 12px; } #article-15 .ce_gallery li:nth-child(n) { grid-column: span 1; } } @media (max-width: 600px) { #article-15 { padding-top: 72px; } #article-15 > .fm-gallery-intro, #article-15 > .ce_gallery { width: min(calc(100% - 32px), var(--fm-shell)); } #article-15 .ce_gallery ul { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 10px; } #article-15 .ce_gallery li { aspect-ratio: 4 / 3; } } .page-product #article-20 { width: 100%; background: var(--fm-sand); } .page-product #article-20 > .grid { width: 100%; max-width: none; } .fm-product-nav { position: relative; z-index: 3; border-top: 1px solid rgba(0,67,45,.13); border-bottom: 1px solid rgba(0,67,45,.13); background: var(--fm-white); } .fm-product-nav__inner { display: flex; min-height: 72px; align-items: center; gap: 0; overflow-x: auto; scrollbar-width: none; } .fm-product-nav__inner::-webkit-scrollbar { display: none; } .fm-product-nav a { display: flex; min-height: 72px; flex: 1 0 auto; align-items: center; justify-content: center; padding: 0 28px; border-right: 1px solid var(--fm-line); color: var(--fm-copy); font-size: .82rem; font-weight: 750; white-space: nowrap; } .fm-product-nav a:first-child { border-left: 1px solid var(--fm-line); } .fm-product-nav a:hover { background: var(--fm-sand); color: var(--fm-green); } /* ========================================================================== Minimalistische Unterseiten-Heroes ========================================================================== */ .page-product #article-20, .page-about #article-21, .page-gallery #article-22, .page-downloads #article-23, .page-contact #article-24 { width: 100%; background: var(--fm-white); } .page-product #article-20 > .grid, .page-about #article-21 > .grid, .page-gallery #article-22 > .grid, .page-downloads #article-23 > .grid, .page-contact #article-24 > .grid { width: 100%; max-width: none; margin: 0; padding: 0; } .fm-product-hero, .fm-about-hero, .fm-gallery-hero, .fm-downloads-hero, .fm-contact-hero { overflow: visible; background: transparent; color: var(--fm-copy); } .fm-product-hero::before, .fm-product-hero::after, .fm-about-hero::before, .fm-about-hero::after, .fm-gallery-hero::before, .fm-gallery-hero::after, .fm-downloads-hero::before, .fm-downloads-hero::after, .fm-contact-hero::before, .fm-contact-hero::after, .fm-product-hero__visual, .fm-product-hero__actions, .fm-product-hero__facts, .fm-about-hero__panel, .fm-about-hero__actions, .fm-gallery-hero__visual, .fm-gallery-hero__actions, .fm-gallery-hero__facts, .fm-downloads-hero__visual, .fm-downloads-hero__actions, .fm-downloads-hero__facts, .fm-contact-hero__panel, .fm-contact-hero__actions, .fm-contact-hero__facts { display: none; } .fm-product-hero__inner, .fm-about-hero__grid, .fm-gallery-hero__grid, .fm-downloads-hero__grid, .fm-contact-hero__grid { position: relative; display: block; width: min(calc(100% - 48px), var(--fm-shell)); min-height: 0; margin: clamp(54px, 6vw, 86px) auto clamp(42px, 5vw, 72px); padding: clamp(58px, 6vw, 86px) clamp(48px, 6vw, 84px); border-left: 3px solid var(--fm-green); background: var(--fm-sand); } .fm-product-hero__inner { margin-bottom: 0; } .fm-product-hero__copy, .fm-about-hero__copy, .fm-gallery-hero__copy, .fm-downloads-hero__copy, .fm-contact-hero__copy { display: block; width: 100%; max-width: 820px; margin: 0; padding: 0; color: var(--fm-copy); } .fm-product-hero__copy .fm-kicker, .fm-about-hero__copy .fm-kicker, .fm-gallery-hero__copy .fm-kicker, .fm-downloads-hero .fm-kicker, .fm-contact-hero .fm-kicker { margin: 0 0 16px; color: var(--fm-accent); font-size: .72rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; } .fm-product-hero__copy h1, .fm-about-hero__copy h1, .fm-gallery-hero__copy h1, .fm-downloads-hero h1, .fm-contact-hero__copy h1 { max-width: 900px; margin: 0 0 20px; color: var(--fm-green); font-size: clamp(2.8rem, 5vw, 4.9rem); line-height: .98; letter-spacing: -.045em; } .fm-product-hero__lead, .fm-about-hero__lead, .fm-gallery-hero__lead, .fm-downloads-hero__lead, .fm-contact-hero__lead { max-width: 740px; margin: 0; color: var(--fm-copy); font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.7; } .page-product .fm-product-nav { margin-top: clamp(42px, 5vw, 72px); border-top: 1px solid var(--fm-line); border-bottom: 1px solid var(--fm-line); background: var(--fm-white); } .page-product .fm-product-nav__inner { min-height: 58px; } .page-product .fm-product-nav__inner a { min-height: 58px; padding-top: 18px; padding-bottom: 18px; font-size: .76rem; } .page-about #article-17, .page-gallery #article-18, .page-downloads #article-19, .page-contact #article-5 { margin-top: 0; } @media (max-width: 900px) { .fm-product-hero__inner, .fm-about-hero__grid, .fm-gallery-hero__grid, .fm-downloads-hero__grid, .fm-contact-hero__grid { width: min(calc(100% - 40px), var(--fm-shell)); margin-top: 48px; margin-bottom: 54px; padding: 54px 44px; } .fm-product-hero__inner { margin-bottom: 0; } } @media (max-width: 640px) { .fm-product-hero__inner, .fm-about-hero__grid, .fm-gallery-hero__grid, .fm-downloads-hero__grid, .fm-contact-hero__grid { width: calc(100% - 32px); margin-top: 30px; margin-bottom: 42px; padding: 38px 26px 40px; border-left-width: 2px; } .fm-product-hero__inner { margin-bottom: 0; } .fm-product-hero__copy h1, .fm-about-hero__copy h1, .fm-gallery-hero__copy h1, .fm-downloads-hero h1, .fm-contact-hero__copy h1 { margin-bottom: 16px; font-size: clamp(2.25rem, 11vw, 3.25rem); line-height: 1; } .fm-product-hero__lead, .fm-about-hero__lead, .fm-gallery-hero__lead, .fm-downloads-hero__lead, .fm-contact-hero__lead { font-size: .98rem; line-height: 1.62; } .page-product .fm-product-nav { margin-top: 42px; } } .page-product #ueberblick { padding: clamp(88px, 9vw, 140px) 0; background: var(--fm-white); } .page-product #ueberblick > .grid { width: min(calc(100% - 48px), var(--fm-shell)); max-width: var(--fm-shell); margin: 0 auto; } .page-product #ueberblick #overview { display: grid; width: 100%; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; margin: 0; } .page-product #ueberblick #overview > .mb_80 { grid-column: 1 / -1; width: 100%; margin: 0 0 36px !important; padding: 0; text-align: left; } .page-product .fm-models-intro { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: end; } .page-product .fm-models-intro h2 { margin: 0; font-size: clamp(2.35rem, 4.5vw, 4.4rem); line-height: 1; } .page-product .fm-models-intro__copy { max-width: 590px; margin: 0 0 4px auto; color: var(--fm-muted); font-size: 1.04rem; line-height: 1.75; } .page-product #ueberblick .ueberblick-leistungen { float: none; width: auto; margin: 0 !important; padding: 0; } .page-product #ueberblick .overview-inner { position: relative; display: flex; min-width: 0; height: 100% !important; flex-direction: column; overflow: hidden; border: 1px solid var(--fm-line); background: #f8f8f5; box-shadow: none; } .page-product #ueberblick .overview-inner:hover { border-color: rgba(0,67,45,.32); box-shadow: 0 22px 55px rgba(0,45,32,.08); transform: translateY(-4px); } .page-product #ueberblick .overview-inner figure { position: relative; overflow: hidden; padding: 22px 18px 8px; background: #edf3ed; } .page-product #ueberblick .overview-inner figure::after { position: absolute; right: 16px; bottom: 12px; color: rgba(0,67,45,.12); content: "FELDMEIER"; font-size: .67rem; font-weight: 800; letter-spacing: .14em; } .page-product #ueberblick #overview img { display: block; width: 100%; height: auto; aspect-ratio: 640 / 534; object-fit: contain; mix-blend-mode: multiply; } .page-product .fm-model-card__body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 23px 22px 25px; background: var(--fm-white); } .page-product .fm-model-card__topline { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; } .page-product .fm-model-card__series { color: var(--fm-accent-dark, #8b6e3d); font-size: .69rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; } .page-product .fm-model-badge { display: inline-flex; min-height: 26px; align-items: center; padding: 0 9px; border: 1px solid rgba(0,67,45,.18); color: var(--fm-green); font-size: .67rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .page-product .fm-model-card__body h3 { margin: 0 0 20px; color: var(--fm-green); font-size: clamp(1.25rem, 1.7vw, 1.55rem); line-height: 1.05; } .page-product .fm-model-specs { display: grid; gap: 10px; margin-top: auto; } .page-product .fm-model-spec { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; padding-top: 10px; border-top: 1px solid var(--fm-line); } .page-product .fm-model-spec span { color: var(--fm-muted); font-size: .74rem; } .page-product .fm-model-spec strong { color: var(--fm-ink); font-size: .82rem; font-weight: 750; text-align: right; } .page-product #article-30 { margin: 0; padding: clamp(82px, 8vw, 126px) 0; background: var(--fm-green-dark); color: var(--fm-white); } .page-product #article-30 > .grid { display: grid; width: min(calc(100% - 48px), var(--fm-shell)); max-width: var(--fm-shell); grid-template-columns: minmax(280px,.72fr) minmax(0,1.28fr); gap: clamp(50px, 7vw, 100px); align-items: center; margin: 0 auto; } .fm-dimensions-copy { min-width: 0; } .fm-dimensions-copy .fm-kicker { color: var(--fm-accent); } .fm-dimensions-copy h2 { margin: 0 0 24px; color: var(--fm-white); font-size: clamp(2.5rem, 4.2vw, 4.25rem); line-height: .98; } .fm-dimensions-copy > p:not(.fm-kicker) { max-width: 470px; color: rgba(255,255,255,.68); font-size: 1rem; line-height: 1.75; } .fm-dimensions-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; margin-top: 34px; border-top: 1px solid rgba(255,255,255,.15); } .fm-dimensions-fact { padding: 18px 20px 0 0; } .fm-dimensions-fact:nth-child(even) { padding-left: 20px; border-left: 1px solid rgba(255,255,255,.15); } .fm-dimensions-fact strong, .fm-dimensions-fact span { display: block; } .fm-dimensions-fact strong { color: var(--fm-white); font-size: 1.15rem; } .fm-dimensions-fact span { color: rgba(255,255,255,.5); font-size: .73rem; } .page-product #article-30 .ce_image { float: none; width: 100%; margin: 0 !important; padding: 18px; border: 1px solid rgba(255,255,255,.16); background: var(--fm-white); box-shadow: 0 24px 70px rgba(0,0,0,.18); } .page-product #article-30 .ce_image figure, .page-product #article-30 .ce_image img { width: 100%; } .page-product #article-27, .page-product #article-28 { margin: 0; padding: clamp(90px, 9vw, 145px) 0; } .page-product #article-27 { background: var(--fm-white); } .page-product #article-28 { background: var(--fm-sand); } .page-product #article-27 > .grid, .page-product #article-28 > .grid { display: grid; width: min(calc(100% - 48px), var(--fm-shell)); max-width: var(--fm-shell); grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; margin: 0 auto; } .page-product #article-27 .grid > .ce_text, .page-product #article-28 .grid > .ce_text { float: none; width: auto; min-width: 0; margin: 0 !important; padding: 0; } .page-product #article-27 .grid > .mb_50, .page-product #article-28 .grid > .mb_50 { grid-column: 1 / -1; margin-bottom: 38px !important; } .fm-equipment-intro { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: end; } .fm-equipment-intro h2 { margin: 0; font-size: clamp(2.55rem, 4.7vw, 4.6rem); line-height: .98; } .fm-equipment-intro__copy { max-width: 560px; margin: 0 0 3px auto; color: var(--fm-muted); font-size: 1.02rem; line-height: 1.75; } .page-product #article-28 .fm-equipment-intro__copy { color: var(--fm-copy); } .page-product .ausstattung_block { display: flex; width: 100%; min-height: 0; height: 100%; flex-direction: column; margin: 0; overflow: hidden; border: 1px solid var(--fm-line); background: var(--fm-white); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .page-product .ausstattung_block:hover { border-color: rgba(0,67,45,.28); box-shadow: 0 18px 44px rgba(0,45,32,.07); transform: translateY(-3px); } .page-product .ausstattung_block figure, .page-product .ausstattung_block .image_container { position: relative; width: 100%; overflow: hidden; background: #ecefeb; } .page-product .ausstattung_block img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .45s ease; } .page-product .ausstattung_block:hover img { transform: scale(1.028); } .page-product .ausstattung_block p { margin: 0; padding: 0 22px 10px; color: var(--fm-muted); font-size: .86rem; line-height: 1.58; } .page-product .ausstattung_block p:first-of-type { padding-top: 21px; padding-bottom: 8px; color: var(--fm-green); font-size: 1rem; line-height: 1.25; } .page-product .ausstattung_block p:first-of-type strong { font-weight: 780; } .page-product .ausstattung_block p:last-child { padding-bottom: 24px; } .page-product #teaser { margin: 0; padding: 0; background: var(--fm-white); } .page-product #teaserBlock { display: grid; width: 100%; grid-template-columns: 1fr 1fr; padding: clamp(90px, 9vw, 145px) 0 0; } .page-product #teaserBlock > .mb_80:first-child { grid-column: 1 / -1; width: min(calc(100% - 48px), var(--fm-shell)); margin: 0 auto 50px !important; padding: 0; } .fm-applications-intro { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: end; } .fm-applications-intro h2 { margin: 0; font-size: clamp(2.55rem, 4.7vw, 4.6rem); line-height: .98; } .fm-applications-intro__copy { max-width: 540px; margin: 0 0 3px auto; color: var(--fm-muted); font-size: 1.02rem; line-height: 1.75; } .page-product #teaserBlock .teaserLeft, .page-product #teaserBlock .teaserRight, .page-product #teaserBlock .textLeft, .page-product #teaserBlock .textRight { float: none; width: 100%; height: auto; min-height: 520px; margin: 0 !important; padding: 0; } .page-product #teaserBlock .teaserLeft, .page-product #teaserBlock .teaserRight { overflow: hidden; background: var(--fm-green-dark); } .page-product #teaserBlock .teaserLeft img, .page-product #teaserBlock .teaserRight img, .page-product #teaserBlock img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; transition: transform .55s ease; } .page-product #teaserBlock .teaserLeft:hover img, .page-product #teaserBlock .teaserRight:hover img { transform: scale(1.025); } .page-product #teaserBlock .textLeft, .page-product #teaserBlock .textRight { display: flex; align-items: center; background: var(--fm-sand); } .page-product #teaserBlock .textLeft { background: var(--fm-green-dark); } .page-product #teaserBlock .textLeft .ce_text, .page-product #teaserBlock .textLeft h2, .page-product #teaserBlock .textLeft h5, .page-product #teaserBlock .textLeft p { color: var(--fm-white); } .page-product #teaserBlock .textLeft p { color: rgba(255,255,255,.68); } .page-product #teaserBlock .ce_text { max-width: 650px; margin: 0 !important; padding: clamp(48px, 7vw, 92px); } .page-product #teaserBlock .ce_text h2 { margin: 0 0 12px; font-size: clamp(2rem, 3.4vw, 3.4rem); line-height: 1; } .page-product #teaserBlock .ce_text h5 { margin: 0 0 22px; color: var(--fm-green); font-size: .92rem; font-weight: 750; } .page-product #teaserBlock .ce_text p { margin: 0; color: var(--fm-copy); font-size: .94rem; line-height: 1.72; } .page-product #teaserBlock .warning { color: inherit; } .fm-product-cta { grid-column: 1 / -1; width: 100%; padding: clamp(70px, 8vw, 110px) 0; background: var(--fm-green); color: var(--fm-white); } .fm-product-cta__inner { display: grid; grid-template-columns: 1fr auto; gap: 50px; align-items: center; } .fm-product-cta .fm-kicker { color: var(--fm-accent); } .fm-product-cta h2 { max-width: 800px; margin: 0; color: var(--fm-white); font-size: clamp(2.35rem, 4vw, 4rem); line-height: 1; } .fm-product-cta p:not(.fm-kicker) { max-width: 720px; margin: 17px 0 0; color: rgba(255,255,255,.68); } .fm-product-cta__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; } @media (max-width: 1180px) { .page-product #ueberblick #overview, .page-product #article-27 > .grid, .page-product #article-28 > .grid { grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (max-width: 900px) { .page-product .fm-models-intro, .fm-equipment-intro, .fm-applications-intro { grid-template-columns: 1fr; gap: 22px; } .page-product .fm-models-intro__copy, .fm-equipment-intro__copy, .fm-applications-intro__copy { max-width: 680px; margin-left: 0; } .page-product #ueberblick #overview, .page-product #article-27 > .grid, .page-product #article-28 > .grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .page-product #article-30 > .grid { grid-template-columns: 1fr; gap: 42px; } .page-product #teaserBlock { grid-template-columns: 1fr; } .page-product #teaserBlock > .mb_80:first-child, .fm-product-cta { grid-column: 1; } .page-product #teaserBlock .teaserLeft, .page-product #teaserBlock .teaserRight, .page-product #teaserBlock .textLeft, .page-product #teaserBlock .textRight { min-height: 0; } .page-product #teaserBlock .teaserLeft img, .page-product #teaserBlock .teaserRight img, .page-product #teaserBlock img { min-height: 0; aspect-ratio: 16 / 10; } .page-product #teaserBlock .textLeft { order: initial; } .fm-product-cta__inner { grid-template-columns: 1fr; gap: 30px; } .fm-product-cta__actions { justify-content: flex-start; } } @media (max-width: 640px) { .fm-product-nav__inner { width: 100%; padding-left: 12px; } .fm-product-nav a { min-height: 62px; padding: 0 18px; } .page-product #ueberblick, .page-product #article-27, .page-product #article-28, .page-product #article-30 { padding-top: 72px; padding-bottom: 72px; } .page-product #ueberblick #overview, .page-product #article-27 > .grid, .page-product #article-28 > .grid { grid-template-columns: 1fr; } .page-product #ueberblick #overview > .mb_80, .page-product #article-27 .grid > .mb_50, .page-product #article-28 .grid > .mb_50 { margin-bottom: 20px !important; } .page-product #ueberblick .overview-inner figure { padding: 18px 16px 4px; } .fm-dimensions-facts { grid-template-columns: 1fr; } .fm-dimensions-fact:nth-child(even) { padding-left: 0; border-left: 0; } .fm-dimensions-fact + .fm-dimensions-fact { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); } .page-product #teaserBlock { padding-top: 72px; } .page-product #teaserBlock .ce_text { padding: 42px 24px; } .fm-product-cta__actions { flex-direction: column; align-items: stretch; } .fm-product-cta__actions .fm-btn { width: 100%; } } .page-product #teaserBlock .fm-product-cta a.fm-btn { color: var(--fm-white); } .page-product #teaserBlock .fm-product-cta a.fm-btn--light { color: var(--fm-green-dark); } .page-product #teaserBlock .fm-product-cta a.fm-btn--ghost { border-color: rgba(255,255,255,.42); background: transparent; color: var(--fm-white); } .page-product #teaserBlock .fm-product-cta a.fm-btn--ghost:hover { border-color: var(--fm-white); background: rgba(255,255,255,.08); color: var(--fm-white); } .page-product #teaserBlock .fm-product-cta a.fm-btn::before { display: none; content: none; } @media (min-width: 1181px) { .page-product #article-27 > .grid { grid-template-columns: repeat(8, minmax(0,1fr)); } .page-product #article-27 .grid > .ce_text:not(.mb_50) { grid-column: span 2; } .page-product #article-27 .grid > .ce_text:not(.mb_50):nth-last-child(3) { grid-column: 2 / span 2; } } .page-product #article-27 .grid > .ce_text:not(.mb_50), .page-product #article-28 .grid > .ce_text:not(.mb_50) { display: flex; min-width: 0; } .page-product #article-27 .ausstattung_block, .page-product #article-28 .ausstattung_block { flex: 1 1 auto; } .page-product .ausstattung_block figure, .page-product .ausstattung_block .image_container { flex: 0 0 auto; } .page-product .ausstattung_block p:last-child { flex: 1 1 auto; } .page-product #teaserBlock .textLeft a, .page-product #teaserBlock .textRight a { color: inherit; } .page-product #teaserBlock .textLeft a::before, .page-product #teaserBlock .textRight a::before { display: none; content: none; } .page-product #teaserBlock > .teaserLeft, .page-product #teaserBlock > .teaserRight, .page-product #teaserBlock > .textLeft, .page-product #teaserBlock > .textRight { min-width: 0; overflow: hidden; } .page-product #teaserBlock .textLeft .ce_text, .page-product #teaserBlock .textRight .ce_text { box-sizing: border-box; width: 100%; } .page-product #article-30 .ce_image figure { display: block; margin: 0; line-height: 0; } .page-product #article-30 .ce_image img { display: block; max-width: 100%; height: auto; } @media (max-width: 640px) { .page-product #teaserBlock .fm-product-cta a.fm-btn { justify-content: center; } } .page-about #article-21, .page-about #article-17, .page-about #article-29 { clear: both; padding: 0; } .page-about #article-21 > .grid, .page-about #article-17 > .grid { width: 100%; max-width: none; margin: 0; padding: 0; } .page-about #article-21 .ce_text, .page-about #article-17 .ce_text { float: none; width: 100%; margin: 0 !important; padding: 0; } .page-about #article-21 #ct-inner { width: 100%; max-width: none; margin: 0; padding: 0; overflow: visible; background: transparent; } .page-about #article-21 #ct-inner::before, .page-about #article-21 #ct-inner::after { display: none; } .page-about #article-17 { background: var(--fm-white); } .page-about #article-17 > .grid, .page-about #article-17 > .inside, .page-about #article-17 .grid { width: 100%; max-width: none; margin: 0; } .fm-about-story { width: min(calc(100% - 48px), var(--fm-shell)); margin: 0 auto; padding: clamp(90px, 10vw, 150px) 0 clamp(90px, 10vw, 150px); } .fm-about-story__heading { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(50px, 8vw, 130px); align-items: end; margin-bottom: 54px; } .fm-about-story__heading .fm-kicker { align-self: start; margin-top: 8px; } .fm-about-story__heading h2 { max-width: 720px; margin: 0; color: var(--fm-green); font-size: clamp(2.8rem, 5vw, 5rem); line-height: .94; letter-spacing: -.055em; } .fm-about-story__copy { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(50px, 8vw, 130px); padding-top: 48px; border-top: 1px solid var(--fm-line); } .fm-about-story__copy > * { grid-column: 2; } .fm-about-story__copy .fm-about-story__lead { grid-column: 1; grid-row: 1 / span 3; margin: 0; color: var(--fm-green-dark) !important; font-size: clamp(1.28rem, 2vw, 1.75rem) !important; font-weight: 700; line-height: 1.45 !important; letter-spacing: -.025em; } .page-about #article-17 .fm-about-story__copy p:not(.fm-about-story__lead) { margin: 0 0 20px; color: var(--fm-copy); font-size: 1rem; line-height: 1.78; text-align: left !important; } .fm-about-values { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 76px; border-top: 1px solid var(--fm-line); border-bottom: 1px solid var(--fm-line); } .fm-about-values article { min-width: 0; padding: 38px 36px 40px 0; } .fm-about-values article + article { padding-left: 36px; border-left: 1px solid var(--fm-line); } .fm-about-values span { display: block; margin-bottom: 36px; color: var(--fm-accent); font-size: .73rem; font-weight: 800; letter-spacing: .12em; } .fm-about-values h3 { margin-bottom: 12px; color: var(--fm-green); font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.08; } .fm-about-values p { margin: 0; color: var(--fm-copy); font-size: .92rem; line-height: 1.68; } .page-about #article-29 { padding: 0 0 clamp(90px, 10vw, 150px); background: var(--fm-white); } .page-about #article-29 #teaserBlock { display: grid; width: min(calc(100% - 48px), var(--fm-shell)); grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); margin: 0 auto; padding: 0; overflow: hidden; background: var(--fm-sand); } .page-about #teaserBlock > .teaserLeft, .page-about #teaserBlock > .teaserRight, .page-about #teaserBlock > .textLeft, .page-about #teaserBlock > .textRight { float: none; width: 100%; min-width: 0; height: auto; min-height: 650px; margin: 0; padding: 0; overflow: hidden; } .page-about #teaserBlock > .teaserLeft, .page-about #teaserBlock > .teaserRight { position: relative; background: #f2f3f1; } .page-about #teaserBlock > .teaserLeft::after, .page-about #teaserBlock > .teaserRight::after { position: absolute; inset: auto 0 0; height: 22%; background: linear-gradient(to top, rgba(0,45,32,.12), transparent); content: ""; pointer-events: none; } .page-about #teaserBlock > .teaserLeft figure, .page-about #teaserBlock > .teaserRight figure { width: 100%; height: 100%; margin: 0; } .page-about #teaserBlock > .teaserLeft img, .page-about #teaserBlock > .teaserRight img, .page-about #teaserBlock img { display: block; width: 100%; height: 100%; min-height: 650px; object-fit: cover; object-position: 50% 22%; } .page-about #teaserBlock > .textRight, .page-about #teaserBlock > .textLeft { display: flex; align-items: stretch; background: var(--fm-sand); } .page-about #teaserBlock .ce_text { display: flex; width: 100%; flex-direction: column; justify-content: center; margin: 0 !important; padding: clamp(58px, 7vw, 96px); } .page-about #teaserBlock .fm-about-personal .fm-kicker { margin-bottom: 20px; color: var(--fm-accent); } .page-about #teaserBlock .fm-about-personal h2 { max-width: 650px; margin-bottom: 22px; color: var(--fm-green); font-size: clamp(2.45rem, 4vw, 4.25rem); line-height: .95; letter-spacing: -.052em; } .page-about #teaserBlock .fm-about-personal p { max-width: 670px; margin-bottom: 18px; color: var(--fm-copy); font-size: 1rem; line-height: 1.72; } .page-about #teaserBlock .fm-about-personal__lead { color: var(--fm-green-dark); font-weight: 700; } .fm-about-personal__signoff { display: flex; flex-direction: column; align-items: flex-start; margin-top: 12px; } .fm-about-personal__signoff span { margin-bottom: 4px; color: var(--fm-copy); } .fm-about-personal__signoff strong { color: var(--fm-green-dark); } .page-about #teaserBlock .fm-about-personal__signoff img { width: min(250px, 70%); height: auto; min-height: 0; margin-top: 18px; object-fit: contain; object-position: left center; } .fm-about-personal__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 30px; } .page-about #teaserBlock .fm-about-personal__actions a::before { display: none; content: none; } .page-about #teaserBlock .fm-about-personal__actions .fm-btn { color: var(--fm-white); } .page-about #teaserBlock .fm-about-personal__actions .fm-textlink { color: var(--fm-green); } .page-about #teaserBlock .fm-about-personal__actions .fm-textlink::after { margin-left: 8px; content: "→"; } @media (max-width: 1100px) { .page-about #teaserBlock .ce_text { padding: 58px 48px; } } @media (max-width: 820px) { .fm-about-story__heading, .fm-about-story__copy { grid-template-columns: 1fr; gap: 26px; } .fm-about-story__copy > *, .fm-about-story__copy .fm-about-story__lead { grid-column: 1; grid-row: auto; } .fm-about-values { grid-template-columns: 1fr; } .fm-about-values article, .fm-about-values article + article { padding: 30px 0; border-left: 0; } .fm-about-values article + article { border-top: 1px solid var(--fm-line); } .fm-about-values span { margin-bottom: 18px; } .page-about #article-29 #teaserBlock { grid-template-columns: 1fr; } .page-about #teaserBlock > .teaserLeft, .page-about #teaserBlock > .teaserRight, .page-about #teaserBlock > .textLeft, .page-about #teaserBlock > .textRight { min-height: 0; } .page-about #teaserBlock > .teaserLeft, .page-about #teaserBlock > .teaserRight { aspect-ratio: 16 / 10; } .page-about #teaserBlock > .teaserLeft img, .page-about #teaserBlock > .teaserRight img, .page-about #teaserBlock img { min-height: 0; } } @media (max-width: 600px) { .fm-about-story { width: min(calc(100% - 32px), var(--fm-shell)); padding-top: 72px; padding-bottom: 72px; } .fm-about-story__heading { margin-bottom: 34px; } .fm-about-story__copy { padding-top: 34px; } .fm-about-values { margin-top: 54px; } .page-about #article-29 { padding-bottom: 72px; } .page-about #article-29 #teaserBlock { width: 100%; } .page-about #teaserBlock > .teaserLeft, .page-about #teaserBlock > .teaserRight { aspect-ratio: 4 / 3; } .page-about #teaserBlock .ce_text { padding: 50px 22px 56px; } .fm-about-personal__actions { flex-direction: column; align-items: stretch; } .fm-about-personal__actions .fm-btn { width: 100%; justify-content: center; } } .page-gallery #article-22 { padding: 0; background: var(--fm-white); } .page-gallery #article-22 > .grid { width: 100%; max-width: none; margin: 0; padding: 0; } .page-gallery #article-22 #ct-inner { width: 100%; max-width: none; margin: 0 !important; padding: 0 !important; border: 0; background: transparent; box-shadow: none; } .page-gallery #article-22 #ct-inner::before, .page-gallery #article-22 #ct-inner::after { display: none; } .page-gallery #article-18 { padding: 0 0 clamp(86px, 9vw, 138px); background: var(--fm-paper); } .page-gallery #article-18 > .grid { width: 100%; max-width: none; margin: 0; padding: 0; } .fm-gallery-page-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr); gap: clamp(48px, 8vw, 120px); align-items: end; width: min(calc(100% - 48px), var(--fm-shell)); margin: 0 auto; padding: clamp(82px, 9vw, 132px) 0 clamp(42px, 5vw, 70px); } .fm-gallery-page-intro h2 { max-width: 720px; margin-bottom: 0; } .fm-gallery-page-intro__copy { padding-bottom: 4px; } .fm-gallery-page-intro__copy p { margin-bottom: 14px; font-size: 1rem; line-height: 1.72; } .fm-gallery-page-intro__hint { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; color: var(--fm-green); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .fm-gallery-page-intro__hint::before { display: inline-grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(0,67,45,.22); border-radius: 50%; content: "+"; font-size: 1rem; font-weight: 400; } .page-gallery #article-18 .ce_masonry_gallery { float: none; width: min(calc(100% - 48px), var(--fm-shell)); margin: 0 auto !important; padding: 0 !important; } .page-gallery #masonry_41 { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; grid-auto-rows: clamp(170px, 16vw, 226px); gap: 12px; width: 100% !important; height: auto !important; margin: 0 !important; position: relative !important; } .page-gallery #masonry_41 > .masonry_gallery { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: auto !important; height: auto !important; margin: 0 !important; overflow: hidden; background: #e7e9e6; transform: none !important; } .page-gallery #masonry_41 > .masonry_gallery:nth-child(14n + 1) { grid-column: span 2; grid-row: span 2; } .page-gallery #masonry_41 > .masonry_gallery:nth-child(14n + 5), .page-gallery #masonry_41 > .masonry_gallery:nth-child(14n + 12) { grid-row: span 2; } .page-gallery #masonry_41 > .masonry_gallery:nth-child(14n + 8) { grid-column: span 2; } .page-gallery #masonry_41 figure, .page-gallery #masonry_41 .image_container, .page-gallery #masonry_41 a { display: block; width: 100%; height: 100%; } .page-gallery #masonry_41 a { position: relative; overflow: hidden; background: var(--fm-green-deep); } .page-gallery #masonry_41 img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; transition: transform .55s cubic-bezier(.2,.7,.2,1), opacity .25s ease !important; } .page-gallery #masonry_41 a::before { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 52%, rgba(0,31,23,.30)); content: ""; opacity: .28; transition: opacity .3s ease; pointer-events: none; } .page-gallery #masonry_41 a::after { position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; background: rgba(0,45,32,.46); color: #fff; content: "↗"; font-size: 17px; line-height: 1; opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease, background-color .25s ease; pointer-events: none; } .page-gallery #masonry_41 a:hover img, .page-gallery #masonry_41 a:focus-visible img { opacity: .94; transform: scale(1.035); } .page-gallery #masonry_41 a:hover::before, .page-gallery #masonry_41 a:focus-visible::before { opacity: .75; } .page-gallery #masonry_41 a:hover::after, .page-gallery #masonry_41 a:focus-visible::after { opacity: 1; transform: translateY(0); } .page-gallery #masonry_41 > .masonry_gallery:has(img[src=""]) { display: none !important; } .page-gallery #masonry_41 img[src=""] { display: none !important; } .page-gallery #cboxOverlay { background: var(--fm-green-deep) !important; opacity: .94 !important; } .page-gallery #colorbox, .page-gallery #cboxWrapper, .page-gallery #cboxContent { background: transparent !important; } .page-gallery #cboxLoadedContent { border: 0 !important; background: #fff; } .page-gallery #cboxTitle, .page-gallery #cboxCurrent { color: rgba(255,255,255,.72) !important; } .fm-gallery-cta { width: min(calc(100% - 48px), var(--fm-shell)); margin: clamp(74px, 8vw, 116px) auto 0; background: var(--fm-green); color: rgba(255,255,255,.72); } .fm-gallery-cta__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 50px; align-items: center; width: 100%; padding: clamp(48px, 6vw, 78px) clamp(32px, 6vw, 84px); } .fm-gallery-cta .fm-kicker { color: #d2bd91; } .fm-gallery-cta h2 { max-width: 720px; margin-bottom: 12px; color: #fff; font-size: clamp(2rem, 3.3vw, 3.5rem); } .fm-gallery-cta p:last-child { margin-bottom: 0; } .fm-gallery-cta__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; } @media (max-width: 1080px) { .page-gallery #masonry_41 { grid-template-columns: repeat(3, minmax(0,1fr)); grid-auto-rows: clamp(180px, 23vw, 245px); } .page-gallery #masonry_41 > .masonry_gallery:nth-child(n) { grid-column: span 1; grid-row: span 1; } .page-gallery #masonry_41 > .masonry_gallery:nth-child(10n + 1) { grid-column: span 2; grid-row: span 2; } .page-gallery #masonry_41 > .masonry_gallery:nth-child(10n + 6) { grid-row: span 2; } } @media (max-width: 860px) { .fm-gallery-page-intro { grid-template-columns: 1fr; gap: 28px; width: min(calc(100% - 36px), var(--fm-shell)); } .page-gallery #article-18 .ce_masonry_gallery, .fm-gallery-cta { width: min(calc(100% - 36px), var(--fm-shell)); } .fm-gallery-cta__inner { grid-template-columns: 1fr; gap: 28px; } .fm-gallery-cta__actions { justify-content: flex-start; } } @media (max-width: 720px) { .page-gallery #masonry_41 { grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: clamp(150px, 46vw, 230px); gap: 8px; } .page-gallery #masonry_41 > .masonry_gallery:nth-child(n) { grid-column: span 1; grid-row: span 1; } .page-gallery #masonry_41 > .masonry_gallery:nth-child(8n + 1) { grid-column: span 2; grid-row: span 2; } .page-gallery #masonry_41 a::after { top: 10px; right: 10px; width: 34px; height: 34px; opacity: .92; transform: none; } } @media (max-width: 520px) { .fm-gallery-page-intro, .page-gallery #article-18 .ce_masonry_gallery, .fm-gallery-cta { width: calc(100% - 28px); } .fm-gallery-page-intro { padding-top: 70px; } .page-gallery #masonry_41 { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 10px; } .page-gallery #masonry_41 > .masonry_gallery:nth-child(n) { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; } .page-gallery #masonry_41 > .masonry_gallery:nth-child(5n + 2) { aspect-ratio: 4 / 5; } .fm-gallery-cta__inner { padding: 44px 24px; } .fm-gallery-cta__actions { flex-direction: column; align-items: stretch; } .fm-gallery-cta__actions .fm-btn { width: 100%; justify-content: center; } } .page-downloads #main > .inside { width: 100%; } .page-downloads #article-23 > .grid, .page-downloads #article-19 > .grid { width: min(calc(100% - 48px), var(--fm-shell)); margin-right: auto; margin-left: auto; } .page-downloads #article-23 > .grid { padding-top: clamp(54px, 7vw, 94px); } .page-downloads #article-23 .ce_text, .page-downloads #article-19 .ce_text, .page-downloads #article-19 .ce_downloads { float: none; width: 100%; padding-right: 0; padding-left: 0; } .fm-downloads-document { position: relative; z-index: 2; display: flex; flex-direction: column; width: min(100%, 390px); aspect-ratio: .72; min-height: 460px; padding: 28px; background: #fff; box-shadow: 0 30px 80px rgba(23,54,42,.16); transform: rotate(2deg); } .fm-downloads-document::before { position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--fm-green); content: ""; } .fm-downloads-document__top, .fm-downloads-document__bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .fm-downloads-document__top { padding-bottom: 18px; border-bottom: 1px solid var(--fm-line); color: var(--fm-green); font-size: .82rem; font-weight: 700; } .fm-downloads-document__top strong { display: grid; place-items: center; width: 48px; height: 48px; background: var(--fm-green); color: #fff; font-size: .72rem; letter-spacing: .08em; } .fm-downloads-document__body { display: flex; flex: 1; flex-direction: column; justify-content: center; } .fm-downloads-document__label { margin-bottom: 20px; color: var(--fm-accent); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .fm-downloads-document__body strong { margin-bottom: 22px; color: var(--fm-green); font-size: clamp(2rem, 3.2vw, 3rem); line-height: .98; letter-spacing: -.045em; } .fm-downloads-document__body > span:last-child { max-width: 250px; color: var(--fm-muted); font-size: .82rem; line-height: 1.5; } .fm-downloads-document__bottom { padding-top: 18px; border-top: 1px solid var(--fm-line); color: var(--fm-green); font-size: .74rem; font-weight: 700; } .page-downloads #article-19 { padding: clamp(76px, 9vw, 126px) 0 clamp(90px, 10vw, 140px); } .fm-downloads-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr); gap: clamp(40px, 7vw, 100px); align-items: end; margin-bottom: 46px; scroll-margin-top: calc(var(--fm-header-height) + 30px); } .fm-downloads-intro h2 { max-width: 720px; margin-bottom: 0; } .fm-downloads-intro__copy { max-width: 500px; padding-bottom: 6px; } .fm-downloads-intro__copy p { margin-bottom: 14px; } .fm-downloads-intro__hint { display: inline-flex; align-items: center; gap: 8px; color: var(--fm-green); font-size: .78rem; font-weight: 700; } .fm-downloads-intro__hint::before { width: 24px; height: 1px; background: var(--fm-accent); content: ""; } .page-downloads .fm-downloads-list { margin: 0 0 22px; } .page-downloads .fm-downloads-list ul { margin: 0; padding: 0; } .page-downloads .fm-downloads-list li { position: relative; overflow: hidden; margin: 0; border: 1px solid var(--fm-line); background: #fff; box-shadow: 0 16px 50px rgba(20,49,37,.06); } .page-downloads .fm-downloads-list li::before { position: absolute; z-index: 2; top: 50%; left: 30px; display: grid; place-items: center; width: 62px; height: 72px; background: var(--fm-green); color: #fff; content: "PDF"; font-size: .68rem; font-weight: 800; letter-spacing: .09em; transform: translateY(-50%); } .page-downloads .fm-downloads-list li::after { position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--fm-accent); content: ""; } .page-downloads .fm-downloads-list a { position: relative; display: flex; min-height: 132px; align-items: center; padding: 30px 210px 30px 120px; background: transparent; color: var(--fm-ink); font-size: clamp(1.05rem, 1.7vw, 1.28rem); font-weight: 800; line-height: 1.35; } .page-downloads .fm-downloads-list a::after { position: absolute; top: 50%; right: 32px; display: inline-flex; align-items: center; justify-content: center; min-width: 145px; padding: 13px 18px; border: 1px solid rgba(0,67,45,.20); color: var(--fm-green); content: "Herunterladen ↓"; font-size: .78rem; font-weight: 800; transform: translateY(-50%); } .page-downloads .fm-downloads-list a:hover { background: var(--fm-sand); color: var(--fm-green); } .page-downloads .fm-downloads-list a:hover::after { border-color: var(--fm-green); background: var(--fm-green); color: #fff; } .page-downloads .fm-downloads-list .size { margin-left: 8px; color: var(--fm-muted); font-size: .78rem; font-weight: 500; } .page-downloads #article-19 .fm-downloads-note { margin: 0 0 34px; padding: 18px 22px 18px 52px; border: 0; border-left: 2px solid var(--fm-accent); background: var(--fm-sand); color: var(--fm-muted); font-size: .86rem; line-height: 1.6; } .page-downloads #article-19 .fm-downloads-note::before { position: absolute; margin-left: -31px; color: var(--fm-accent); content: "i"; font-weight: 800; } .page-downloads #article-19 .fm-downloads-note p { margin: 0; } .page-downloads #article-19 .fm-downloads-note strong { color: var(--fm-ink); } .fm-downloads-support { display: grid; grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr); gap: clamp(42px, 7vw, 90px); align-items: center; margin-top: clamp(70px, 8vw, 112px); padding: clamp(42px, 6vw, 72px); background: var(--fm-sand); } .fm-downloads-support__copy { max-width: 560px; } .fm-downloads-support h2 { margin-bottom: 18px; font-size: clamp(2rem, 3.2vw, 3.2rem); } .fm-downloads-support__copy > p:last-child { margin-bottom: 0; } .fm-downloads-support__links { display: grid; border-top: 1px solid rgba(0,67,45,.16); } .fm-downloads-support__links a { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; align-items: center; padding: 22px 52px 22px 0; border-bottom: 1px solid rgba(0,67,45,.16); color: var(--fm-green); } .fm-downloads-support__links a span, .fm-downloads-support__links a strong { grid-column: 1; } .fm-downloads-support__links a span { color: var(--fm-muted); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .fm-downloads-support__links a strong { color: var(--fm-green); font-size: 1rem; } .fm-downloads-support__links a i { position: absolute; right: 6px; top: 50%; font-style: normal; font-size: 1.25rem; transform: translateY(-50%); transition: transform .2s ease; } .fm-downloads-support__links a:hover i { transform: translate(5px,-50%); } @media (max-width: 980px) { .fm-downloads-document { min-height: 390px; padding: 22px; } .fm-downloads-intro, .fm-downloads-support { grid-template-columns: 1fr; } .fm-downloads-intro__copy, .fm-downloads-support__copy { max-width: 720px; } } @media (max-width: 760px) { .page-downloads #article-23 > .grid, .page-downloads #article-19 > .grid { width: min(calc(100% - 36px), var(--fm-shell)); } .fm-downloads-document { width: min(78vw, 350px); min-height: 430px; } .page-downloads .fm-downloads-list a { min-height: 145px; padding: 28px 28px 66px 112px; } .page-downloads .fm-downloads-list a::after { top: auto; right: 28px; bottom: 20px; min-width: 0; padding: 0; border: 0; content: "PDF herunterladen ↓"; transform: none; } .page-downloads .fm-downloads-list a:hover::after { background: transparent; color: var(--fm-green); } .fm-downloads-support { padding: 40px 30px; } } @media (max-width: 520px) { .page-downloads #article-23 > .grid, .page-downloads #article-19 > .grid { width: calc(100% - 28px); } .page-downloads #article-23 > .grid { padding-top: 34px; } .fm-downloads-document { min-height: 365px; } .fm-downloads-intro { gap: 24px; } .page-downloads .fm-downloads-list li::before { left: 18px; width: 50px; height: 60px; } .page-downloads .fm-downloads-list a { min-height: 150px; padding: 24px 18px 62px 86px; font-size: 1rem; } .page-downloads .fm-downloads-list .size { display: block; margin: 4px 0 0; } .page-downloads #article-19 .fm-downloads-note { padding: 16px 18px 16px 42px; } .fm-downloads-support { padding: 34px 22px; } } .page-contact #container, .page-contact #main, .page-contact #main > .inside { overflow: visible; } .page-contact #article-24 > .grid, .page-contact #article-5 > .grid { width: min(calc(100% - 48px), var(--fm-shell)); margin-right: auto; margin-left: auto; } .page-contact #article-24 > .grid { padding-top: clamp(54px, 7vw, 96px); padding-bottom: clamp(60px, 7vw, 92px); } .page-contact #article-24 #ct-inner { width: 100%; margin: 0; padding: 0; } .page-contact .kontaktform { padding: clamp(76px, 8vw, 120px) 0 clamp(80px, 9vw, 130px); background: var(--fm-paper); } .page-contact .kontaktform > .inside, .page-contact .kontaktform .grid { width: min(calc(100% - 48px), var(--fm-shell)); } .page-contact #article-5 > .grid { display: grid; grid-template-columns: minmax(300px, .74fr) minmax(0, 1.26fr); gap: 0 clamp(44px, 6vw, 88px); align-items: start; } .page-contact .fm-contact-head { grid-column: 1 / -1; width: 100%; margin: 0 0 clamp(44px, 6vw, 74px); padding: 0; } .fm-contact-intro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .75fr); gap: clamp(40px, 7vw, 110px); align-items: end; padding-bottom: 32px; border-bottom: 1px solid var(--fm-line); } .fm-contact-intro h2 { max-width: 690px; margin: 0; color: var(--fm-green); font-size: clamp(2.65rem, 4.5vw, 4.65rem); line-height: .94; letter-spacing: -.045em; text-transform: none; } .fm-contact-intro__copy p { margin: 0 0 12px; color: var(--fm-copy); line-height: 1.7; } .fm-contact-intro__copy span { color: var(--fm-muted); font-size: .76rem; } .page-contact .fm-contact-details-wrap { grid-column: 1; width: 100%; margin: 0; padding: 0; } .fm-contact-card { position: sticky; top: calc(var(--fm-header-height) + 28px); overflow: hidden; border-top: 3px solid var(--fm-accent); background: var(--fm-green-dark); color: rgba(255,255,255,.72); } .fm-contact-card__top { padding: 36px 34px 30px; } .fm-contact-card__top .fm-kicker { margin-bottom: 15px; } .fm-contact-card h3 { margin: 0 0 16px; color: var(--fm-white); font-size: clamp(1.65rem, 2.4vw, 2.35rem); line-height: 1.03; text-transform: none; } .fm-contact-card__top > p:last-child { margin: 0; color: rgba(255,255,255,.62); font-size: .9rem; line-height: 1.65; } .fm-contact-card__links { border-top: 1px solid rgba(255,255,255,.12); } .fm-contact-card__links a { position: relative; display: block; padding: 19px 54px 19px 34px; border-bottom: 1px solid rgba(255,255,255,.12); color: var(--fm-white); transition: background-color .2s ease; } .fm-contact-card__links a:hover { background: rgba(255,255,255,.06); } .fm-contact-card__links span, .fm-contact-card__links strong { display: block; } .fm-contact-card__links span { margin-bottom: 3px; color: rgba(255,255,255,.46); font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .fm-contact-card__links strong { color: var(--fm-white); font-size: .94rem; overflow-wrap: anywhere; } .fm-contact-card__links i { position: absolute; top: 50%; right: 28px; font-style: normal; transform: translateY(-50%); transition: transform .2s ease; } .fm-contact-card__links a:hover i { transform: translate(4px,-50%); } .fm-contact-card__address { padding: 28px 34px 32px; background: rgba(255,255,255,.045); } .fm-contact-card__address span, .fm-contact-card__address strong { display: block; } .fm-contact-card__address span { margin-bottom: 8px; color: rgba(255,255,255,.46); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .fm-contact-card__address strong { margin-bottom: 16px; color: var(--fm-white); font-size: .9rem; line-height: 1.55; } .fm-contact-card__address a { color: var(--fm-white); font-size: .78rem; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255,255,255,.30); text-underline-offset: 4px; } .page-contact .fm-contact-form { grid-column: 2; width: 100%; margin: 0; padding: 0; } .page-contact .fm-contact-form form, .page-contact .fm-contact-form .formbody { width: 100%; } .page-contact .fm-contact-form .formbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; } .page-contact .fm-contact-form .widget { float: none; width: 100%; margin: 0; padding: 0; } .page-contact .fm-contact-form .widget-textarea, .page-contact .fm-contact-form .widget-submit { grid-column: 1 / -1; } .page-contact .fm-contact-form label, .page-contact .fm-contact-form label.u_6, .page-contact .fm-contact-form label.u_12 { float: none; width: auto; margin: 0 0 8px; padding: 0; color: var(--fm-ink); font-size: .72rem; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; } .page-contact .fm-contact-form input.text, .page-contact .fm-contact-form textarea.textarea, .page-contact .fm-contact-form input.u_6, .page-contact .fm-contact-form textarea.u_12 { float: none; width: 100%; margin: 0; padding: 15px 17px; border: 1px solid #d4dbd6; border-radius: 0; background: var(--fm-white); color: var(--fm-ink); box-shadow: none; } .page-contact .fm-contact-form input.text, .page-contact .fm-contact-form input.u_6 { min-height: 58px; } .page-contact .fm-contact-form textarea.textarea, .page-contact .fm-contact-form textarea.u_12 { min-height: 210px; line-height: 1.6; } .page-contact .fm-contact-form input::placeholder, .page-contact .fm-contact-form textarea::placeholder { color: #9aa29e; opacity: 1; } .page-contact .fm-contact-form input:focus, .page-contact .fm-contact-form textarea:focus { border-color: var(--fm-green); box-shadow: 0 0 0 3px rgba(0,67,45,.07); } .page-contact .fm-contact-form .widget-submit { display: flex; justify-content: flex-start; padding-top: 4px; } .page-contact .fm-contact-form button.submit, .page-contact .fm-contact-form button.u_6 { width: auto; min-width: 210px; min-height: 56px; padding: 0 28px; border: 1px solid var(--fm-green); background: var(--fm-green); color: var(--fm-white); font-size: .86rem; } .page-contact .fm-contact-form button.submit::after { margin-left: 8px; content: "→"; } .page-contact .fm-contact-privacy-wrap { grid-column: 2; width: 100%; margin: 16px 0 0; padding: 0; } .fm-contact-privacy { margin: 0; padding: 16px 18px; border-left: 2px solid var(--fm-accent); background: var(--fm-sand); color: var(--fm-muted); font-size: .76rem; line-height: 1.6; } .fm-contact-privacy a { color: var(--fm-green); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .page-contact .fm-contact-process-wrap { grid-column: 1 / -1; width: 100%; margin: clamp(70px, 8vw, 112px) 0 0; padding: 0; } .fm-contact-process { display: grid; grid-template-columns: minmax(250px, .78fr) minmax(0, 1.7fr); gap: clamp(42px, 7vw, 96px); padding: clamp(42px, 5vw, 64px); background: var(--fm-sand); } .fm-contact-process__head h2 { margin: 0; color: var(--fm-green); font-size: clamp(2rem, 3vw, 3.15rem); line-height: .98; text-transform: none; } .fm-contact-process__steps { display: grid; grid-template-columns: repeat(3, 1fr); } .fm-contact-process__steps article { min-width: 0; padding: 0 26px; border-left: 1px solid rgba(0,67,45,.14); } .fm-contact-process__steps article:first-child { padding-left: 0; border-left: 0; } .fm-contact-process__steps article:last-child { padding-right: 0; } .fm-contact-process__steps span { display: block; margin-bottom: 28px; color: var(--fm-accent); font-size: .68rem; font-weight: 800; letter-spacing: .12em; } .fm-contact-process__steps h3 { margin: 0 0 10px; color: var(--fm-green); font-size: 1.08rem; line-height: 1.12; text-transform: none; } .fm-contact-process__steps p { margin: 0; color: var(--fm-copy); font-size: .82rem; line-height: 1.6; } @media (max-width: 1040px) { .page-contact #article-5 > .grid { grid-template-columns: minmax(270px, .78fr) minmax(0, 1.22fr); gap: 0 42px; } .fm-contact-process { grid-template-columns: 1fr; } } @media (max-width: 820px) { .fm-contact-intro { grid-template-columns: 1fr; gap: 24px; } .page-contact #article-5 > .grid { grid-template-columns: 1fr; } .page-contact .fm-contact-details-wrap, .page-contact .fm-contact-form, .page-contact .fm-contact-privacy-wrap { grid-column: 1; } .fm-contact-card { position: static; margin-bottom: 42px; } .fm-contact-card__links { display: grid; grid-template-columns: repeat(3, 1fr); } .fm-contact-card__links a { min-width: 0; padding: 20px 28px; border-right: 1px solid rgba(255,255,255,.12); } .fm-contact-card__links a:last-child { border-right: 0; } .fm-contact-card__links i { display: none; } .fm-contact-process__steps { grid-template-columns: 1fr; } .fm-contact-process__steps article, .fm-contact-process__steps article:first-child, .fm-contact-process__steps article:last-child { padding: 24px 0; border-top: 1px solid rgba(0,67,45,.14); border-left: 0; } .fm-contact-process__steps article:first-child { border-top: 0; } .fm-contact-process__steps span { margin-bottom: 12px; } } @media (max-width: 620px) { .page-contact #article-24 > .grid, .page-contact #article-5 > .grid, .page-contact .kontaktform > .inside, .page-contact .kontaktform .grid { width: calc(100% - 28px); } .page-contact #article-24 > .grid { padding-top: 34px; padding-bottom: 48px; } .page-contact .kontaktform { padding: 64px 0 82px; } .fm-contact-intro h2 { font-size: clamp(2.45rem, 12vw, 3.5rem); } .fm-contact-card__top, .fm-contact-card__address { padding-right: 24px; padding-left: 24px; } .fm-contact-card__links { grid-template-columns: 1fr; } .fm-contact-card__links a { padding: 18px 24px; border-right: 0; } .page-contact .fm-contact-form .formbody { grid-template-columns: 1fr; gap: 20px; } .page-contact .fm-contact-form .widget-textarea, .page-contact .fm-contact-form .widget-submit { grid-column: 1; } .page-contact .fm-contact-form button.submit, .page-contact .fm-contact-form button.u_6 { width: 100%; } .fm-contact-process { padding: 34px 24px; } } .fm-product-hero__inner, .fm-about-hero__grid, .fm-gallery-hero__grid, .fm-downloads-hero__grid, .fm-contact-hero__grid { position: relative; overflow: hidden; } .fm-product-hero__inner::after, .fm-about-hero__grid::after, .fm-gallery-hero__grid::after, .fm-downloads-hero__grid::after, .fm-contact-hero__grid::after { position: absolute; top: 50%; right: clamp(2rem, 6vw, 6rem); z-index: 0; width: clamp(220px, 24vw, 380px); aspect-ratio: 1; background: url("/files/theme/img/Feldmeier-Kopf.svg") center / contain no-repeat; content: ""; opacity: .4; pointer-events: none; transform: translateY(-50%); } .fm-product-hero__copy, .fm-about-hero__copy, .fm-gallery-hero__copy, .fm-downloads-hero__copy, .fm-contact-hero__copy { position: relative; z-index: 1; } /* ========================================================================== Feldmeier – Barrierefreiheit CSS-Patch für die bestehende Rechtstext-Darstellung ========================================================================== */ /* Gleiche Seitenbreite und Abstände wie Impressum / Datenschutz */ body.page-legal #article-34 { width: min(calc(100% - 48px), var(--fm-shell)); margin: clamp(54px, 6vw, 86px) auto clamp(70px, 8vw, 120px); padding: 0 !important; } /* Minimalistischer Legal-Hero */ body.page-legal #article-34::before { display: flex; min-height: 260px; align-items: center; box-sizing: border-box; padding: clamp(52px, 6vw, 82px) clamp(48px, 6vw, 84px); border-left: 3px solid var(--fm-green); background: radial-gradient( circle at calc(100% - 45px) 45px, transparent 0 104px, rgba(0,67,45,.10) 105px 106px, transparent 107px ), var(--fm-sand); color: var(--fm-green); content: "Barrierefreiheit"; font-family: var(--fm-display); font-size: clamp(2.8rem, 5vw, 4.9rem); font-weight: 700; line-height: .98; letter-spacing: -.045em; text-transform: none; } /* Textbereich */ body.page-legal #article-34 > .ce_text { width: min(100%, 900px); box-sizing: border-box; margin: 0 auto; padding: clamp(58px, 7vw, 92px) 0 0; color: var(--fm-copy); font-size: 1rem; line-height: 1.8; } /* Einleitung */ body.page-legal #article-34 > .ce_text .fm-legal-lead { margin: 0 0 42px; color: var(--fm-ink); font-size: clamp(1.08rem, 1.45vw, 1.22rem); font-weight: 500; line-height: 1.7; } /* Zwischenüberschriften wie bei Impressum / Datenschutz */ body.page-legal #article-34 > .ce_text h2 { margin: 0; padding: 42px 0 14px; border-top: 1px solid var(--fm-line); color: var(--fm-green); font-family: var(--fm-display); font-size: clamp(1.35rem, 2vw, 1.8rem); font-weight: 700; line-height: 1.15; letter-spacing: -.025em; text-transform: none; } body.page-legal #article-34 > .ce_text h2:first-of-type { padding-top: 0; border-top: 0; } /* Fallback, falls später wieder H3/H4 verwendet werden */ body.page-legal #article-34 > .ce_text h3, body.page-legal #article-34 > .ce_text h4 { margin: 30px 0 10px; color: var(--fm-ink); font-family: var(--fm-display); font-weight: 700; line-height: 1.25; text-transform: none; } body.page-legal #article-34 > .ce_text p { max-width: none; margin: 0 0 18px; color: var(--fm-copy); font-size: 1rem; line-height: 1.8; } body.page-legal #article-34 > .ce_text p:empty { display: none; } body.page-legal #article-34 > .ce_text a { overflow-wrap: anywhere; color: var(--fm-green); font-weight: 650; text-decoration: underline; text-decoration-color: rgba(0,67,45,.28); text-decoration-thickness: 1px; text-underline-offset: 3px; } body.page-legal #article-34 > .ce_text a:hover { color: var(--fm-green-dark); text-decoration-color: currentColor; } body.page-legal #article-34 > .ce_text ul, body.page-legal #article-34 > .ce_text ol { margin: 0 0 24px; padding-left: 1.35rem; } body.page-legal #article-34 > .ce_text li { margin-bottom: 8px; color: var(--fm-copy); line-height: 1.75; list-style: inherit; } body.page-legal #article-34 > .ce_text strong { color: var(--fm-ink); font-weight: 700; } /* Tablet */ @media (max-width: 900px) { body.page-legal #article-34 { width: min(calc(100% - 40px), var(--fm-shell)); margin-top: 48px; margin-bottom: 86px; } body.page-legal #article-34::before { min-height: 220px; padding: 50px 44px; } body.page-legal #article-34 > .ce_text { padding-top: 54px; } } /* Smartphone */ @media (max-width: 640px) { body.page-legal #article-34 { width: calc(100% - 32px); margin-top: 30px; margin-bottom: 68px; } body.page-legal #article-34::before { min-height: 170px; padding: 38px 26px 40px; border-left-width: 2px; background: radial-gradient( circle at calc(100% - 22px) 20px, transparent 0 72px, rgba(0,67,45,.09) 73px 74px, transparent 75px ), var(--fm-sand); font-size: clamp(2.25rem, 11vw, 3.25rem); line-height: 1; } body.page-legal #article-34 > .ce_text { padding-top: 42px; font-size: .96rem; } body.page-legal #article-34 > .ce_text .fm-legal-lead { margin-bottom: 34px; font-size: 1.04rem; } body.page-legal #article-34 > .ce_text h2 { padding-top: 34px; font-size: 1.35rem; } body.page-legal #article-34 > .ce_text p { font-size: .96rem; line-height: 1.72; } } .raumaufteilung h3 { text-align:center; } /* ========================================================================== Feldmeier – Produktseite / Einsatzbereiche ========================================================================== */ .page-product #article-39 { clear: both; width: 100%; margin: 0; padding: 0; background: var(--fm-sand); } .page-product #article-39 > .inside, .page-product #article-39 > .grid { width: 100%; max-width: none; margin: 0; } .fm-applications { position: relative; padding: clamp(84px, 9vw, 138px) 0; overflow: hidden; background: var(--fm-sand); } .fm-applications::after { position: absolute; top: -150px; right: -140px; width: 430px; height: 430px; border: 1px solid rgba(0,67,45,.08); border-radius: 50%; content: ""; pointer-events: none; } .fm-applications > .fm-shell { position: relative; z-index: 1; } /* Intro */ .fm-applications__intro { display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); gap: clamp(50px, 8vw, 110px); align-items: end; margin-bottom: clamp(48px, 6vw, 78px); } .fm-applications__intro h2 { max-width: 650px; margin: 0; font-size: clamp(2.55rem, 4.6vw, 4.65rem); line-height: .96; } .fm-applications__intro-copy { max-width: 650px; } .fm-applications__intro-copy p { margin-bottom: 16px; color: var(--fm-copy); font-size: 1.02rem; line-height: 1.75; } .fm-applications__intro-copy p:last-child { margin-bottom: 0; color: var(--fm-muted); } /* Raster */ .fm-applications__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(0,67,45,.18); border-left: 1px solid rgba(0,67,45,.18); background: rgba(255,255,255,.28); } .fm-applications__item { position: relative; min-width: 0; min-height: 270px; padding: clamp(28px, 3.2vw, 42px); border-right: 1px solid rgba(0,67,45,.18); border-bottom: 1px solid rgba(0,67,45,.18); background: transparent; transition: background-color .25s ease, transform .25s ease; } .fm-applications__item:hover { z-index: 1; background: var(--fm-white); } .fm-applications__number { display: block; margin-bottom: clamp(42px, 5vw, 66px); color: var(--fm-accent); font-size: .7rem; font-weight: 800; letter-spacing: .14em; } .fm-applications__item h3 { margin: 0 0 14px; color: var(--fm-green); font-size: clamp(1.25rem, 1.8vw, 1.65rem); line-height: 1.08; letter-spacing: -.03em; } .fm-applications__item p { max-width: 340px; margin: 0; color: var(--fm-copy); font-size: .91rem; line-height: 1.65; } /* Abschluss */ .fm-applications__footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(36px, 6vw, 80px); align-items: end; margin-top: clamp(52px, 6vw, 78px); padding-top: clamp(38px, 5vw, 56px); border-top: 1px solid rgba(0,67,45,.18); } .fm-applications__footer > div { max-width: 760px; } .fm-applications__footer h3 { margin: 0 0 12px; color: var(--fm-green); font-size: clamp(1.65rem, 2.7vw, 2.5rem); line-height: 1.02; } .fm-applications__footer p:not(.fm-kicker) { max-width: 650px; margin: 0; color: var(--fm-copy); line-height: 1.7; } .fm-applications__footer .fm-btn { white-space: nowrap; } /* Tablet */ @media (max-width: 960px) { .fm-applications__intro { grid-template-columns: 1fr; gap: 24px; } .fm-applications__intro-copy { max-width: 720px; } .fm-applications__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fm-applications__item { min-height: 245px; } .fm-applications__footer { grid-template-columns: 1fr; align-items: start; } .fm-applications__footer .fm-btn { justify-self: start; } } /* Smartphone */ @media (max-width: 620px) { .fm-applications { padding: 68px 0 78px; } .fm-applications > .fm-shell { width: calc(100% - 28px); } .fm-applications::after { top: -110px; right: -190px; width: 340px; height: 340px; } .fm-applications__intro { margin-bottom: 38px; } .fm-applications__intro h2 { font-size: clamp(2.4rem, 12vw, 3.45rem); } .fm-applications__grid { grid-template-columns: 1fr; } .fm-applications__item { min-height: 0; padding: 28px 26px 30px; } .fm-applications__number { margin-bottom: 28px; } .fm-applications__item p { max-width: none; } .fm-applications__footer { margin-top: 44px; padding-top: 34px; } .fm-applications__footer .fm-btn { width: 100%; } } /* ========================================================================== Feldmeier – Videos CSS-Patch für die bestehende main.css ========================================================================== */ body.page-videos #main > .inside { width: 100%; max-width: none; } .page-videos #article-37 { width: 100%; margin: 0; padding: 0 0 clamp(86px, 9vw, 138px); background: var(--fm-paper); } .page-videos #article-37 > .grid { display: grid; width: min(calc(100% - 48px), var(--fm-shell)); grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: clamp(22px, 3vw, 34px); align-items: start; margin-right: auto; margin-left: auto; } /* -------------------------------------------------------------------------- Minimalistischer Unterseiten-Hero -------------------------------------------------------------------------- */ .fm-videos-hero { position: relative; grid-column: 1 / -1; min-height: 300px; margin: clamp(54px, 6vw, 86px) 0 clamp(42px, 5vw, 64px); padding: clamp(58px, 6vw, 86px) clamp(48px, 6vw, 84px); overflow: hidden; border-left: 3px solid var(--fm-green); background: var(--fm-sand); } .fm-videos-hero::after { position: absolute; top: 50%; right: clamp(2rem, 6vw, 6rem); z-index: 0; width: clamp(220px, 24vw, 380px); aspect-ratio: 1; background: url("/files/theme/img/Feldmeier-Kopf.svg") center / contain no-repeat; content: ""; opacity: .06; pointer-events: none; transform: translateY(-50%); } .fm-videos-hero__copy { position: relative; z-index: 1; width: min(100%, 790px); } .fm-videos-hero .fm-kicker { margin: 0 0 16px; } .fm-videos-hero h1 { max-width: 800px; margin: 0 0 20px; color: var(--fm-green); font-size: clamp(2.8rem, 5vw, 4.9rem); line-height: .98; letter-spacing: -.045em; } .fm-videos-hero__lead { max-width: 720px; margin: 0; color: var(--fm-copy); font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.7; } /* -------------------------------------------------------------------------- Video-Karten -------------------------------------------------------------------------- */ .page-videos .fm-video-card { float: none !important; width: 100% !important; min-width: 0; margin: 0 !important; padding: 0; overflow: hidden; border: 1px solid var(--fm-line); background: var(--fm-white); } .page-videos .fm-video-card > h2 { position: relative; margin: 0; padding: 26px 30px 24px 58px; border-bottom: 1px solid var(--fm-line); color: var(--fm-green); font-size: clamp(1.2rem, 1.7vw, 1.55rem); line-height: 1.15; letter-spacing: -.025em; } .page-videos .fm-video-card > h2::before { position: absolute; top: 50%; left: 28px; width: 12px; height: 12px; border: 2px solid var(--fm-accent); border-radius: 50%; content: ""; transform: translateY(-50%); } .page-videos .fm-video-card .video_container { position: relative; width: 100%; margin: 0; overflow: hidden; background: var(--fm-green-deep); } /* YouTube */ .page-videos .fm-video-card--youtube { grid-column: 1; } .page-videos .fm-video-card--youtube .video_container { aspect-ratio: 16 / 9; } .page-videos .fm-video-card--youtube iframe { display: block; width: 100%; height: 100%; border: 0; } /* Reviervideo: Hochformat bewusst als eigenständige Editorial-Karte */ .page-videos .fm-video-card--reviervideo { grid-column: 2; } .page-videos .fm-video-card--reviervideo .video_container { display: grid; min-height: 520px; place-items: center; } .page-videos .fm-video-card--reviervideo video { display: block; width: 100%; height: auto; max-height: 680px; margin: 0 auto; background: var(--fm-green-deep); object-fit: contain; } /* kleiner visueller Abschluss unter den Karten */ .page-videos #article-37 > .grid::after { grid-column: 1 / -1; width: 100%; height: 1px; margin-top: clamp(34px, 5vw, 58px); background: var(--fm-line); content: ""; } /* -------------------------------------------------------------------------- Tablet -------------------------------------------------------------------------- */ @media (max-width: 900px) { .page-videos #article-37 > .grid { width: min(calc(100% - 40px), var(--fm-shell)); grid-template-columns: 1fr; } .fm-videos-hero { min-height: 250px; margin-top: 48px; margin-bottom: 44px; padding: 54px 44px; } .page-videos .fm-video-card--youtube, .page-videos .fm-video-card--reviervideo { grid-column: 1; } .page-videos .fm-video-card--reviervideo { width: min(100%, 620px) !important; justify-self: center; } .page-videos .fm-video-card--reviervideo .video_container { min-height: 0; } } /* -------------------------------------------------------------------------- Smartphone -------------------------------------------------------------------------- */ @media (max-width: 620px) { .page-videos #article-37 { padding-bottom: 72px; } .page-videos #article-37 > .grid { width: calc(100% - 28px); gap: 18px; } .fm-videos-hero { min-height: 0; margin: 30px 0 30px; padding: 38px 26px 40px; border-left-width: 2px; } .fm-videos-hero::after { right: -48px; width: 220px; opacity: .045; } .fm-videos-hero h1 { font-size: clamp(2.45rem, 12vw, 3.45rem); } .page-videos .fm-video-card > h2 { padding: 22px 22px 20px 48px; font-size: 1.18rem; } .page-videos .fm-video-card > h2::before { left: 22px; width: 10px; height: 10px; } } /* ========================================================================== Feldmeier – Videos Layout Fix v2 Dieses Patch-CSS GANZ UNTEN an die aktuelle main.css anhängen. ========================================================================== */ /* -------------------------------------------------------------------------- Grundlayout: keine konkurrierenden 2-Spalten-Regeln mehr -------------------------------------------------------------------------- */ body.page-videos #main > .inside { width: 100%; max-width: none; } .page-videos #article-37 { width: 100%; margin: 0; padding: 0 0 clamp(86px, 9vw, 138px); background: var(--fm-paper); } .page-videos #article-37 > .grid { display: flex !important; width: min(calc(100% - 48px), var(--fm-shell)) !important; max-width: var(--fm-shell) !important; flex-direction: column; gap: 0; margin-right: auto !important; margin-left: auto !important; } /* Hero bleibt wie bisher, bekommt aber etwas mehr Abstand nach unten */ .page-videos .fm-videos-hero { width: 100%; margin-bottom: clamp(58px, 7vw, 88px); } /* -------------------------------------------------------------------------- Gemeinsame Video-Basis -------------------------------------------------------------------------- */ .page-videos #article-37 .ce_youtube, .page-videos #article-37 .ce_player { float: none !important; clear: both; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } .page-videos #article-37 .video_container { margin: 0; } .page-videos #article-37 iframe, .page-videos #article-37 video { display: block; border: 0; } /* -------------------------------------------------------------------------- YouTube – große Feature-Karte -------------------------------------------------------------------------- */ .page-videos #article-37 .ce_youtube { display: grid; grid-template-columns: minmax(260px, .42fr) minmax(0, 1.58fr); align-items: stretch; overflow: hidden; border: 1px solid var(--fm-line); background: var(--fm-white); } .page-videos #article-37 .ce_youtube > h2 { display: flex; min-width: 0; align-items: flex-end; margin: 0 !important; padding: clamp(34px, 5vw, 58px) clamp(30px, 4.5vw, 54px) !important; border: 0 !important; background: var(--fm-sand); color: var(--fm-green) !important; font-size: clamp(1.9rem, 3.25vw, 3.1rem) !important; line-height: .98 !important; letter-spacing: -.045em !important; } .page-videos #article-37 .ce_youtube > h2::before { display: none !important; } .page-videos #article-37 .ce_youtube .video_container { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--fm-green-deep); } .page-videos #article-37 .ce_youtube iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; } /* -------------------------------------------------------------------------- Lokales Reviervideo – kompakter Editorial-Block -------------------------------------------------------------------------- */ .page-videos #article-37 .ce_player { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 430px); min-height: 520px; align-items: stretch; margin-top: clamp(26px, 3vw, 38px) !important; overflow: hidden; border: 0; background: var(--fm-green-dark); } .page-videos #article-37 .ce_player > h2 { position: relative; display: flex; max-width: none; min-width: 0; align-items: flex-end; margin: 0 !important; padding: clamp(48px, 6vw, 78px) clamp(38px, 6vw, 76px) !important; border: 0 !important; color: var(--fm-white) !important; font-size: clamp(2.35rem, 4.2vw, 4rem) !important; line-height: .96 !important; letter-spacing: -.05em !important; } .page-videos #article-37 .ce_player > h2::before { position: absolute; top: clamp(42px, 5vw, 64px); left: clamp(38px, 6vw, 76px); width: 40px; height: 1px; border: 0 !important; border-radius: 0 !important; background: var(--fm-accent); content: ""; transform: none; } .page-videos #article-37 .ce_player .video_container { display: flex; width: 100%; min-height: 520px; align-items: center; justify-content: center; overflow: hidden; background: #0c1713; } .page-videos #article-37 .ce_player video { width: 100% !important; height: 100% !important; max-height: 640px; background: #0c1713; object-fit: contain; } /* Das Hochformatvideo bleibt vollständig sichtbar, ohne den kompletten Seitenbereich unnötig in die Höhe zu ziehen. */ @supports (aspect-ratio: 9 / 16) { .page-videos #article-37 .ce_player .video_container { min-height: 0; } .page-videos #article-37 .ce_player video { aspect-ratio: 9 / 16; height: min(640px, 62vw) !important; object-fit: contain; } } /* alten künstlichen Abschluss aus dem ersten Videos-Patch entfernen */ .page-videos #article-37 > .grid::after { display: none !important; content: none !important; } /* -------------------------------------------------------------------------- Tablet -------------------------------------------------------------------------- */ @media (max-width: 900px) { .page-videos #article-37 > .grid { width: min(calc(100% - 40px), var(--fm-shell)) !important; } .page-videos #article-37 .ce_youtube { grid-template-columns: 1fr; } .page-videos #article-37 .ce_youtube > h2 { min-height: 0; padding: 30px 32px !important; } .page-videos #article-37 .ce_player { grid-template-columns: minmax(0, 1fr) minmax(270px, 38%); min-height: 460px; } .page-videos #article-37 .ce_player > h2 { padding: 48px 40px !important; } .page-videos #article-37 .ce_player > h2::before { top: 38px; left: 40px; } .page-videos #article-37 .ce_player .video_container { min-height: 460px; } } /* -------------------------------------------------------------------------- Smartphone -------------------------------------------------------------------------- */ @media (max-width: 680px) { .page-videos #article-37 { padding-bottom: 72px; } .page-videos #article-37 > .grid { width: calc(100% - 28px) !important; } .page-videos .fm-videos-hero { margin-bottom: 38px; } .page-videos #article-37 .ce_youtube > h2 { padding: 25px 24px !important; font-size: 1.65rem !important; } .page-videos #article-37 .ce_player { grid-template-columns: 1fr; min-height: 0; margin-top: 18px !important; } .page-videos #article-37 .ce_player > h2 { min-height: 180px; padding: 58px 28px 30px !important; font-size: clamp(2.15rem, 10vw, 3rem) !important; } .page-videos #article-37 .ce_player > h2::before { top: 36px; left: 28px; } .page-videos #article-37 .ce_player .video_container { min-height: 0; padding: 0; } .page-videos #article-37 .ce_player video { width: 100% !important; height: auto !important; max-height: none; aspect-ratio: auto; } } /* ========================================================================== Feldmeier – Videos Layout Fix v3 Ruhiges, sauberes Layout ohne künstliche Split-Flächen Diesen Patch GANZ UNTEN an die aktuelle main.css hängen. ========================================================================== */ /* Grundlayout komplett neutralisieren */ .page-videos #article-37 > .grid { display: block !important; width: min(calc(100% - 48px), var(--fm-shell)) !important; max-width: var(--fm-shell) !important; margin-right: auto !important; margin-left: auto !important; } .page-videos #article-37 > .grid::after { display: none !important; content: none !important; } /* Hero */ .page-videos .fm-videos-hero { width: 100% !important; margin: clamp(54px, 6vw, 86px) 0 clamp(64px, 8vw, 96px) !important; } /* Alte Karten-/Grid-Regeln vollständig zurücksetzen */ .page-videos #article-37 .ce_youtube, .page-videos #article-37 .ce_player, .page-videos #article-37 .fm-video-card, .page-videos #article-37 .fm-video-card--youtube, .page-videos #article-37 .fm-video-card--reviervideo { display: block !important; float: none !important; clear: both !important; grid-column: auto !important; width: min(100%, 980px) !important; max-width: 980px !important; min-height: 0 !important; margin-right: auto !important; margin-left: auto !important; padding: 0 !important; overflow: visible !important; border: 0 !important; background: transparent !important; } /* Einheitliche Videoüberschriften */ .page-videos #article-37 .ce_youtube > h2, .page-videos #article-37 .ce_player > h2, .page-videos #article-37 .fm-video-card > h2 { display: block !important; min-height: 0 !important; margin: 0 0 24px !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--fm-green) !important; font-size: clamp(1.8rem, 3vw, 2.75rem) !important; line-height: 1.02 !important; letter-spacing: -.04em !important; } .page-videos #article-37 .ce_youtube > h2::before, .page-videos #article-37 .ce_player > h2::before, .page-videos #article-37 .fm-video-card > h2::before { display: none !important; content: none !important; } /* -------------------------------------------------------------------------- YouTube – breit und ruhig -------------------------------------------------------------------------- */ .page-videos #article-37 .ce_youtube { margin-bottom: clamp(72px, 9vw, 112px) !important; } .page-videos #article-37 .ce_youtube .video_container { position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 9; margin: 0 !important; overflow: hidden !important; background: var(--fm-green-deep) !important; } .page-videos #article-37 .ce_youtube iframe { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; border: 0 !important; } /* -------------------------------------------------------------------------- Reviervideo – als bewusster Hochformat-Block -------------------------------------------------------------------------- */ .page-videos #article-37 .ce_player { position: relative; margin-top: 0 !important; padding-top: clamp(54px, 7vw, 82px) !important; border-top: 1px solid var(--fm-line) !important; } .page-videos #article-37 .ce_player > h2 { width: min(100%, 720px); margin-right: auto !important; margin-bottom: 30px !important; margin-left: auto !important; text-align: center; } .page-videos #article-37 .ce_player .video_container { display: block !important; width: min(100%, 430px) !important; height: auto !important; min-height: 0 !important; margin: 0 auto !important; padding: 0 !important; overflow: hidden !important; background: #0c1713 !important; box-shadow: 0 18px 52px rgba(15,39,29,.10); } .page-videos #article-37 .ce_player video { display: block !important; width: 100% !important; height: auto !important; max-width: 100% !important; max-height: none !important; aspect-ratio: auto !important; margin: 0 !important; background: #0c1713 !important; object-fit: contain !important; } /* etwas Luft zum Footer */ .page-videos #article-37 { padding-bottom: clamp(86px, 10vw, 140px) !important; } /* Tablet */ @media (max-width: 900px) { .page-videos #article-37 > .grid { width: min(calc(100% - 40px), var(--fm-shell)) !important; } .page-videos #article-37 .ce_youtube, .page-videos #article-37 .ce_player { width: 100% !important; } } /* Smartphone */ @media (max-width: 620px) { .page-videos #article-37 > .grid { width: calc(100% - 28px) !important; } .page-videos .fm-videos-hero { margin-bottom: 44px !important; } .page-videos #article-37 .ce_youtube { margin-bottom: 62px !important; } .page-videos #article-37 .ce_youtube > h2, .page-videos #article-37 .ce_player > h2 { margin-bottom: 18px !important; font-size: clamp(1.55rem, 8vw, 2rem) !important; } .page-videos #article-37 .ce_player { padding-top: 44px !important; } .page-videos #article-37 .ce_player .video_container { width: min(100%, 360px) !important; } } /* ========================================================= Raumaufteilung – Bild links, Text unten rechts ========================================================= */ .raumaufteilung { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 40px; align-items: end; } /* Überschrift über beide Spalten */ .raumaufteilung h3 { grid-column: 1 / -1; margin: 0 0 30px; } /* Bild links */ .raumaufteilung .image_container { float: none !important; grid-column: 1; margin: 0; } .raumaufteilung .image_container img { display: block; width: 100%; height: auto; } /* Text rechts und unten bündig */ .raumaufteilung > p { grid-column: 2; align-self: end; margin: 0; padding: 3rem; } /* sicherstellen, dass alte Float-Regeln nicht dazwischenfunken */ .raumaufteilung .float_left { float: none !important; } /* Tablet / Mobil */ @media (max-width: 768px) { .raumaufteilung { grid-template-columns: 1fr; gap: 0; } .raumaufteilung h3, .raumaufteilung .image_container, .raumaufteilung > p { grid-column: 1; } .raumaufteilung h3 { margin-bottom: 22px; } .raumaufteilung > p { margin-top: 22px; } }