/** * RSCSS v2.16.0.30 - Really S[imple|hort] Cascading Style Sheet * Copyright (c) 2015-2025 Philipp Kolbeck * Parsed: 17.10.2025 20:53:33 - Rendertime: 0,0346sec. */ :root { --c-white: #FFF; --c-white-stripes: #EEE; --c-darkgray: #25282A; --c-darkgray-stripes: #444; --c-red: #BE3A34; --c-red-stripes: #900; --c-peach: #E56A54; --c-peach-stripes: #F87; --c-sand: #EBE3D7; --c-sand-stripes: #D8C9B5; --c-blue: #2D8C9E; --c-blue-stripes: #AAD; --h-nav-basic: 52px; --h-nav-main: 179px; --h-nav-main-scroll: 106px; --block-lg-py: 60px; --block-xs-py: 40px; --mask-lg-1: 40px; --mask-lg-2: 80px; --mask-lg-3: 120px; --mask-lg-4: 160px; --mask-lg-5: 200px; --mask-xs-1: 20px; --mask-xs-2: 40px; --mask-xs-3: 60px; --mask-xs-4: 80px; --mask-xs-5: 100px; } html { } .maxw-100 { max-width: 100%; } .c-white { color: var(--c-white); } .bgc-white { background-color: var(--c-white); color: var(--c-darkgray); } .bgc-white.bg-stripes { background: var(--c-white) url(../img/stripes_33grad.svg.php?col=EEE) fixed; } .c-darkgray { color: var(--c-darkgray); } .bgc-darkgray { background-color: var(--c-darkgray); color: #FFF; } .bgc-darkgray, .bgc-darkgray *:not(span) { color: #FFF; } .bgc-darkgray.bg-stripes { background: var(--c-darkgray) url(../img/stripes_33grad.svg.php?col=444) fixed; } .c-red { color: var(--c-red); } .bgc-red { background-color: var(--c-red); } .bgc-red, .bgc-red *:not(span) { color: #FFF; } .bgc-red.bg-stripes { background: var(--c-red) url(../img/stripes_33grad.svg.php?col=900) fixed; } .c-sand { color: var(--c-sand); } .bgc-sand { background-color: var(--c-sand); } .bgc-sand, .bgc-sand *:not(span) { color: var(--c-darkgray); } .bgc-sand.bg-stripes { background: var(--c-sand) url(../img/stripes_33grad.svg.php?col=D8C9B5) fixed; } .c-peach { color: var(--c-peach); } .bgc-peach { background-color: var(--c-peach); } .bgc-peach, .bgc-peach *:not(span) { color: #FFF; } .bgc-peach.bg-stripes { background: var(--c-peach) url(../img/stripes_33grad.svg.php?col=F87) fixed; } .c-blue { color: var(--c-blue); } .bgc-blue { background-color: var(--c-blue); } .bgc-blue, .bgc-blue *:not(span) { color: #FFF; } .bgc-blue.bg-stripes { background: var(--c-blue) url(../img/stripes_33grad.svg.php?col=AAD) fixed; } .btn { font-size: 14px; font-size: 18px; padding: 15px 30px !important; border-radius: 30px; white-space: nowrap; } .btn.btn-border { border: 1px var(--c-sand) solid; } .btn.btn-arrow-left, .btn.btn-arrow-right { display: inline-flex; align-items: center; } .btn.btn-arrow-left:after, .btn.btn-arrow-right:after { content: ""; display: block; height: 16px; width: 36px; margin-left: 15px; transition: 400ms; background-position: center left; background-repeat: no-repeat; } .btn.btn-arrow-left:hover:after { background-position: center left; } @keyframes arrowByButton { from { background-position: center right; } to { background-position: center left; } } .btn.btn-arrow-right:hover:after { background-position: center right; } @keyframes arrowByButton { from { background-position: center left; } to { background-position: center right; } } .btn.btn-red { background-color: var(--c-red); color: var(--c-white); } .btn.btn-red:hover { } .btn.btn-red.btn-arrow-left:after { background-image: url(../img/arrow.left.svg.php?col=FFF); } .btn.btn-red.btn-arrow-right:after { background-image: url(../img/arrow.right.svg.php?col=FFF); } .btn.btn-dark { background-color: var(--c-darkgray); color: var(--c-white); } .btn.btn-dark:hover { color: var(--c-sand); } .btn.btn-dark.btn-arrow-left:after { background-image: url(../img/arrow.left.svg.php?col=FFF); } .btn.btn-dark.btn-arrow-right:after { background-image: url(../img/arrow.right.svg.php?col=FFF); } .btn.btn-white { background-color: var(--c-white); color: var(--c-darkgray); } .btn.btn-white:hover { background-color: var(--c-red); color: var(--c-white); } .bgc-red .btn.btn-white:hover { background-color: var(--c-sand); color: var(--c-darkgray); } .btn.btn-white.btn-arrow-left:after { background-image: url(../img/arrow.left.svg.php?col=25282A); } .btn.btn-white.btn-arrow-right:after { background-image: url(../img/arrow.right.svg.php?col=25282A); } .btn.btn-white.btn-arrow-left:hover:after { background-image: url(../img/arrow.left.svg.php?col=FFF); } .btn.btn-white.btn-arrow-right:hover:after { background-image: url(../img/arrow.right.svg.php?col=FFF); } .bgc-red .btn.btn-white.btn-arrow-left:hover:after { background-image: url(../img/arrow.left.svg.php?col=25282A); } .bgc-red .btn.btn-white.btn-arrow-right:hover:after { background-image: url(../img/arrow.right.svg.php?col=25282A); } .block .video { position: relative; } .block .video video { display: block; width: 100%; } .block .video button { position: absolute; z-index: 1; bottom: 10px; right: 10px; } .block video[autoplay] + button:not(.p2)::before, .block video:not([autoplay]) + button.p1::before { content: '⏸'; } .block video[autoplay] + button.p2::before, .block video:not([autoplay]) + button:not(.p1)::before { content: '▶'; } .block .video button { position: absolute; z-index: 1; bottom: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; border: 2px #FFF solid; color: #FFF; padding-bottom: 4px; background-color: rgba(217,217,217,.25); } .block video[autoplay] + button.p2, .block video:not([autoplay]) + button:not(.p1) { padding-bottom: 2px; padding-right: 2px; } body,main { position: relative; } #timeline-layer { z-index: 1 !important; } .timeline { position: relative; width: 0; height: 0; } .timeline-svg { position: absolute; left: 0; top: 0; : 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; } .timeline-path-base, .timeline-path-progress { fill: none; stroke: #EEE; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .timeline-path-progress { stroke: #06C; } @font-face { font-family: 'Outfit'; flex-direction: swap; font-weight: 100; src: url('../sys/fnt/outfit/outfit-v14-latin_latin-ext-100.woff2') format('woff2'); } @font-face { font-family: 'Outfit'; flex-direction: swap; font-weight: 200; src: url('../sys/fnt/outfit/outfit-v14-latin_latin-ext-200.woff2') format('woff2'); } @font-face { font-family: 'Outfit'; flex-direction: swap; font-weight: 300; src: url('../sys/fnt/outfit/outfit-v14-latin_latin-ext-300.woff2') format('woff2'); } @font-face { font-family: 'Outfit'; flex-direction: swap; font-weight: 400; src: url('../sys/fnt/outfit/outfit-v14-latin_latin-ext-regular.woff2') format('woff2'); } @font-face { font-family: 'Outfit'; flex-direction: swap; font-weight: 500; src: url('../sys/fnt/outfit/outfit-v14-latin_latin-ext-500.woff2') format('woff2'); } @font-face { font-family: 'Outfit'; flex-direction: swap; font-weight: 600; src: url('../sys/fnt/outfit/outfit-v14-latin_latin-ext-600.woff2') format('woff2'); } @font-face { font-family: 'Outfit'; flex-direction: swap; font-weight: 700; src: url('../sys/fnt/outfit/outfit-v14-latin_latin-ext-700.woff2') format('woff2'); } @font-face { font-family: 'Outfit'; flex-direction: swap; font-weight: 800; src: url('../sys/fnt/outfit/outfit-v14-latin_latin-ext-800.woff2') format('woff2'); } @font-face { font-family: 'Outfit'; flex-direction: swap; font-weight: 900; src: url('../sys/fnt/outfit/outfit-v14-latin_latin-ext-900.woff2') format('woff2'); } body, body * { font-family: Outfit, sans-serif; color: var(--c-darkgray); } @media (min-width: 992px) { h1 { font: 900 130px/130px Outfit; margin-bottom: 40px; text-transform: uppercase; } h2 { font: 900 90px/100px Outfit; margin-bottom: 40px; text-transform: uppercase; } h3 { font: 400 30px/34px Outfit; margin-bottom: 40px; } h4 { font: 400 24px Outfit; margin-bottom: 40px; } h5 { font: 400 20px Outfit; margin-bottom: 40px; } h6 { font: 400 18px Outfit; margin-bottom: 40px; } main :is(a,p,li) { font: 400 18px/28px Outfit; } main p:has(small), main small { font: 400 14px/normal Outfit; } main p:has(+ p), main p { margin-bottom: 40px; } main li { margin-bottom: 20px; } } @media (min-width: 992px) { h1 { font-size: 100px; line-height: 100px; letter-spacing: 0; font-weight: 900; margin-top: 0; margin-bottom: 40px; } h2 { font-size: 80px; line-height: 80px; letter-spacing: 0; font-weight: 900; margin-top: 0; margin-bottom: 40px; } h3 { font-size: 24px; line-height: 30px; letter-spacing: 0; font-weight: 400; margin-top: 0; margin-bottom: 40px; } h4 { font-size: 20px; line-height: normal; letter-spacing: 0; font-weight: 400; margin-top: 0; margin-bottom: 40px; } h5 { font-size: 18px; line-height: normal; letter-spacing: 0; font-weight: 400; margin-top: 0; margin-bottom: 40px; } h6 { font-size: 16px; line-height: normal; letter-spacing: 0; font-weight: 400; margin-top: 0; margin-bottom: 40px; } p { font-size: 16px; line-height: 28px; letter-spacing: 0; font-weight: 400; margin-top: 0; margin-bottom: 40px; } small { font-size: 14px; line-height: normal; letter-spacing: 0; font-weight: 400; margin-top: 0; margin-bottom: 0; } li { font-size: 20px; line-height: 30px; letter-spacing: 0; font-weight: 400; margin-top: 0; margin-bottom: 0; } } @media (max-width: 991.98px) { h1 { font: 900 32px/32px Outfit; margin-bottom: 20px; text-transform: uppercase; } h2 { font: 900 25px/28px Outfit; margin-bottom: 20px; text-transform: uppercase; } h3 { font: 400 22px/26px Outfit; margin-bottom: 20px; } h4 { font: 400 20px Outfit; margin-bottom: 20px; } h5 { font: 400 20px Outfit; margin-bottom: 20px; } h6 { font: 400 18px Outfit; margin-bottom: 20px; } main :is(a,p,li) { font: 400 15px/28px Outfit; } main p:has(small), main small { font: 400 12px/normal Outfit; } main p:has(+ p) { margin-bottom: 20px; } main li { margin-bottom: 10px; } } .break-any { hyphens: none; word-break: break-all; white-space: normal; } ul.logo > li { margin: 1rem 0; padding-left: 3rem; position: relative; } ul.logo > li:before { content: "" !important; position: absolute; background-image: url(../img/ico.logo.svg); background-position: center; background-size: contain; background-repeat: no-repeat; height: 28px; width: 28px; left: 1rem; } ul.icons, ul.icons ul { list-style-type: none; padding-left: 0; margin-bottom: 40px; } ul.icons li>ul { margin-top: 40px; } ul.icons li { position: relative; padding-left: 30px; padding-left: 70px; } ul.icons li::before { content: ''; position: absolute; left: 0; left: 20px; top: 7px; width: 16px; height: 16px; width: 24px; height: 24px; background-size: contain; background-repeat: no-repeat; } ul.icons li::before { background-image: url('../img/icon.listitem.svg.php?col1=BE3A34&col2=25282A'); } .bgc-darkgray ul.icons li::before { background-image: url('../img/icon.listitem.svg.php?col1=BE3A34&col2=FFF'); } ul.columns-2 { columns: 2; } ul.columns-3 { columns: 3; } body { display: flex; min-height: 100vh; } main { flex-grow: 1; } main { position: relative; } main.bg-empty:before { background: none; } .minh-100cvh { min-height: calc(100vh - 179px); } .h-100cvh { height: calc(100vh - 179px); } @media (max-width: 991.98px) { .minh-100cvh { min-height: calc(100vh - 102px); } .h-100cvh { height: calc(100vh - 102px); } } @media (min-width: 992px) { .minh-md-100cvh { min-height: calc(100vh - 179px); } .h-md-100cvh { height: calc(100vh - 179px); } } @media (min-width: 768px) and (max-width: 991.98px) { .minh-md-100cvh { min-height: calc(100vh - 102px); } .h-md-100cvh { height: calc(100vh - 102px); } } @media (max-width: 575.98px) { .container-fluid>.container { } } :is(.container-fluid, .container) .row>*>*:last-child { } .row::before { content: 'ACHTUNG: \'.row\' benoetigt einen .container[-fluid] als parent!'; background-color: #F00; padding: 10px; display: block; width: 100%; } :is(.container-fluid, .container)>.row::before { background-color: unset; display: unset; padding: unset; content: unset; width: unset; } body.mainnav-collapsed { height: 100%; overflow: hidden; } nav.basic { position: fixed; z-index: 1050; font-size: 20px; transition: all 1s; transition: all 500ms; transition: all 250ms; } nav.basic li.nav-item:not(:last-child) { margin-right: 60px; } .scroll nav.basic, .menu-expanded nav.basic { top: -60px; } nav.main { background-color: #FFF; height: 102px; box-shadow: 0px 1px 6px 0px rgba(37,40,42,0.3); -webkit-box-shadow: 0px 1px 6px 0px rgba(37,40,42,0.3); -moz-box-shadow: 0px 1px 6px 0px rgba(37,40,42,0.3); } aside.submenus+main { margin-top: 102px; } @media (min-width: 1200px) { body nav.main { height: var(--h-nav-main); transition: height 1s; transition: height 500ms; transition: height 250ms; } body.scroll nav.main { height: var(--h-nav-main-scroll); } body aside.submenus+main { margin-top: var(--h-nav-main); } nav.basic { height: var(--h-nav-basic); } } nav.main .container { background-color: #FFF; } @media (max-width: 1199.98px) { .dropdown-menu.mega-menu { display: none !important; } .navbar-nav a.nav-link { z-index: 50; } nav.main .dropdown-menu.simple-menu { display: block; background-color: #fff; opacity: 0; border: none; z-index: 20; padding-top: 0; padding-bottom: 0; height: 0; overflow: hidden; transform: translateY(-100%); } nav.main .dropdown-menu.simple-menu.active { opacity: 1; height: auto; transform: translateY(0%); animation: slideto 800ms; animation: slideto 400ms; animation: slideto 200ms; } nav.main.navbar-light .navbar-nav .nav-item.extra { color: #FFFFFF; background-color: var(--c-darkgray); height: 70px; } nav.main.navbar-light .navbar-nav .nav-item.extra a.nav-link { color: #FFFFFF; font-size: 20px; } nav.main.navbar-light .navbar-nav .nav-item.extra:hover a.nav-link { color: var(--c-peach); } } @keyframes slideout { 0% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(0%); opacity: 0; } 100% { transform: translateY(-100%); opacity: 0; } } @keyframes slideto { 0% { transform: translateY(-100%); opacity: 0; } 50% { transform: translateY(0%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @media (min-width: 1200px) { nav.main .dropdown-menu.simple-menu { display: none; } aside.submenus > .dropdown-menu.mega-menu { padding-top: 40px; padding-bottom: 40px; border: none; border-radius: 0; z-index: 1030; } } nav.main .navbar-brand { background-image: url(../img/logo.header.mobile.svg); background-repeat: no-repeat; background-position: left top; background-size: contain; width: 160px; height: 60px; margin-top: 22px; margin-bottom: 20px; z-index: 1055; } @media (min-width: 768px) and (max-width: 1199.98px) { nav.main .navbar-brand { background-image: url(../img/logo.header.svg); background-position: center; width: 220px; } } @media (min-width: 1200px) { nav.main .navbar-brand { background-image: url(../img/logo.header.svg); background-repeat: no-repeat; background-position: center; background-size: contain; width: 335px; height: 73px; margin-top: 68px; margin-bottom: 0; transition: all .4s ease-out; transition: all .2s ease-out; transition: all .1s ease-out; } .scroll nav.main .navbar-brand { margin-top: 8px; width: 240px; } } nav.main .navbar-toggler { } .navbar-toggler { border: none; background: transparent !important; } .navbar-toggler:focus { box-shadow: none; outline: none; } .navbar-toggler:hover { background: transparent !important; } .navbar-toggler .icon-bar { width: 30px; transition: all 0.2s; transition: all 0.1s; transition: all 0.05s; background-color: var(--c-red); display: block; height: 2px; margin-bottom: 6px; transition: width ml mr 0.4s; transition: width ml mr 0.2s; transition: width ml mr 0.1s; } .navbar-toggler .top-bar { transform: rotate(45deg); transform-origin: 10% 10%; } .navbar-toggler .middle-bar { opacity: 0; } .navbar-toggler .bottom-bar { transform: rotate(-45deg); transform-origin: 10% 90%; } .navbar-toggler.collapsed .top-bar { width: 66%; margin-left: 34%; transform: rotate(0); } .navbar-toggler.collapsed .middle-bar { opacity: 1; } .navbar-toggler.collapsed .bottom-bar { width: 66%; margin-right: 34%; transform: rotate(0); } .navbar-toggler.collapsed:hover .top-bar,.navbar-toggler.collapsed:hover .bottom-bar { margin-left: 0; margin-right: 0; width: 100%; } nav.main div.d-flex.align-items-center > a:hover { transform: scale(1.1); } nav.basic.navbar.navbar-expand.navbar-dark { background-color: var(--c-darkgray); } nav.basic.navbar.navbar-expand.navbar-dark a.nav-link { color: white; } nav.main .navbar-collapse.collapsing, nav.main .navbar-collapse.show { box-shadow: 40vw 0 0 #FFF, -40vw 0 0 #FFF, 0 0 0 #FFF; } nav.main ul.navbar-nav { display: flex; margin-top: 20px; max-height: calc(100vh - 102px); overflow-y: auto; overflow: -moz-scrollbars-none; -ms-overflow-style: none; scrollbar-width: none; } nav.main .dropdown-menu.simple-menu a.dropdown-item { font-size: 20px; text-align: center; } aside.submenus { display: none; } @media (min-width: 1200px) { aside.submenus { display: block; z-index: 520; position: fixed; left: 0; right: 0; top: 178px; } .scroll aside.submenus { top: 104px; } aside.submenus a.dropdown-item { font-size: 31px; } aside.submenus a.dropdown-item { width: fit-content; display: none; } nav.main > div { padding-top: 0px; transition: margin 1s ease; transition: margin 500ms ease; transition: margin 250ms ease; } .scroll nav.main > div { padding-top: 24px; } .scroll.menu-expandet nav.main > div { padding-top: 24px; } .scroll nav.main { height: 106px; } aside.submenus .dropdown-menu.mega-menu.active .col-links { opacity: 1; } } div#navbarSupportedContent { position: relative; } nav.main .btn-close { display: none; } @media (min-width: 1200px) { nav.main ul.navbar-nav { margin-top: 80px; } .scroll nav.main ul.navbar-nav { margin-top: 12px; } nav.main .col-links > a.dropdown-item { font-size: 36px; text-align: start; position: relative; } nav.main .col-links > a.dropdown-item:hover { color: var(--c-red); background-color: transparent; } aside.submenus .col-links > a.dropdown-item:after { display: inline-block; content: ""; height: 16px; width: 26px; top: 50%; background-image: url(/img/arrow.svg); background-repeat: no-repeat; margin-left: 20px; opacity: 0; transition: 1s ease; transition: 500ms ease; transition: 250ms ease; } aside.submenus .col-links > a.dropdown-item:hover { color: var(--c-red); background-color: transparent; } aside.submenus .col-links > a.dropdown-item:hover:after { opacity: 1; margin-left: 50px; } nav.main a.nav-link.dropdown-toggle { font-size: 20px; } a.dropdown-item { position: relative; } nav.main .btn-close { display: block; opacity: 0; transition-delay: 1s; transition: opacity 0.5s; transition: opacity 0.25s; transition: opacity 0.175s; position: absolute; right: 0; top: 20px; } .menu-expanded.scroll nav.main .btn-close { top: -20px; } .menu-expanded nav.main .btn-close { opacity: 1; } } @media (min-width: 1630px) { nav.main ul.navbar-nav li:not(:first-of-type) { margin-left: 160px; margin-left: 70px; } } @media (min-width: 1200px) and (max-width: 1629.98px) { nav.main ul.navbar-nav li:not(:first-of-type) { margin-left: 10px; } } @media (min-width: 992px) and (max-width: 1199.98px) { nav.main ul.navbar-nav li:not(:first-of-type) { } } nav.basic .nav-item a { font-size: 16px; } @media (max-width: 1199.98px) { nav.main ul.navbar-nav li.nav-item { display: flex; flex-direction: column; align-items: center; } } nav.main.navbar-light .navbar-nav .nav-link { color: var(--c-darkgray); } nav.main .nav-link { color: var(--c-darkgray); text-align: center; font-family: Outfit; font-size: 26px; font-weight: 400; line-height: normal; width: fit-content; } @media (min-width: 1200px) { nav.main { background-color: #F00 !important; background-color: #FFF !important; background-color: transparent !important; background-color: rgba(255,255,255,1) !important; backdrop-filter: blur(5px); } nav.main .nav-link { font-size: 20px; } } .nav-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 520; opacity: 0; pointer-events: none; background-color: var(--c-darkgray); transition: opacity 250ms 50ms; } body.mainnav-collapsed .nav-backdrop { transition: opacity 500ms 150ms; opacity: .5; pointer-events: all; } @media (min-width: 1200px) { body.menu-expanded .nav-backdrop { transition: opacity 500ms 150ms; opacity: .5; pointer-events: all; } } .main.navbar a.nav-link:after { display: block; content: ""; background-color: red; height: 2px; width: 0%; transition: width 0.5s ease-in-out; transition: width 0.25s ease-in-out; transition: width 0.175s ease-in-out; margin: auto; border: none; } .main.navbar a.nav-link.active:after,.main.navbar a.nav-link:hover:after { width: 100%; } .sub-img { background-size: cover; background-repeat: no-repeat; background-position: center; transition: background-image .2s ease-in-out; transition: background-image .1s ease-in-out; transition: background-image .05s ease-in-out; border-radius: 10px; } .nav-txt { position: absolute; top: 0; bottom: 50px; left: 10px; right: 10px; display: flex; flex-direction: column; justify-content: space-around; align-items: center; text-align: center; } .nav-img { position: relative; mask-image: url(../img/menu/menu.form.php); -webkit-mask-image: url(../img/menu/menu.form.php); mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: cover; background-repeat: no-repeat; background-size: cover; background-position: center; } .nav-img .transparent { opacity: 0; } .nav-txt span { color: #ffffff; font-size: 24px; font-weight: 400; line-height: 30px; hyphens: auto; } .nav-txt > a:hover > img { transform: scale(1.1); } .nav-txt > a > img { transition: all .2s ease-in-out; transition: all .1s ease-in-out; transition: all .05s ease-in-out; } nav.main a.dropdown-item:hover { color: var(--c-red); background-color: transparent; } nav.main a.dropdown-item { position: relative; text-align: center; line-height: 2.5; } footer { font-size: 16px; border-top: 1px var(--c-darkgray) solid; padding-top: 20px; padding-bottom: 20px; background-color: var(--c-darkgray); } footer * { color: #FFF; } footer .nav-link { color: #FFF; } footer a { text-decoration: none; } footer a:hover, footer a.nav-link:hover { color: var(--c-peach); } a:hover > img.social, a:hover > img.maps { transform: scale(1.1); transition: .3s; } @media (min-width: 1200px) { footer .nav-item:not(:last-of-type) { padding-right: 67px; } } @media (min-width: 768px) and (max-width: 1199.98px) { footer .nav-item:not(:last-of-type) { padding-right: 20px; } } @media (max-width: 767.98px) { footer .nav-item:not(:last-of-type) { padding-right: 0; } } footer img.social { width: 34px; } .block { overflow-x: hidden; padding-top: var(--block-lg-py); padding-bottom: var(--block-lg-py); } @media (max-width: 991.98px) { .block { padding-top: var(--block-xs-py); padding-bottom: var(--block-xs-py); } } .block { padding-left: 0; padding-right: 0; } .block em { font-style: normal; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: #FF0; } .block .colbox { width: 30px; height: 30px; margin-right: 10px; border: 1px #999 solid; } .block hr { opacity: 1; border-top: 2px #FFF solid; } .block .breakout-l, .block .breakout-r, .block .breakout-md-none { position: relative; } @media (min-width: 576px) and (max-width: 767.98px) { .block .breakout-none { margin-left: 0 !important; margin-right: 0 !important; } .block .breakout-l { margin-left: -20px !important; } .block .breakout-r { margin-right: -20px !important; } .block .breakout-sm-none { margin-left: 0 !important; margin-right: 0 !important; } .block .breakout-sm-l { margin-left: -20px !important; } .block .breakout-sm-r { margin-right: -20px !important; } } @media (min-width: 768px) and (max-width: 991.98px) { .block .breakout-none { margin-left: 0 !important; margin-right: 0 !important; } .block .breakout-l { margin-left: -20px !important; } .block .breakout-r { margin-right: -20px !important; } .block .breakout-sm-none { margin-left: 0 !important; margin-right: 0 !important; } .block .breakout-sm-l { margin-left: -20px !important; } .block .breakout-sm-r { margin-right: -20px !important; } .block .breakout-md-none { margin-left: 0 !important; margin-right: 0 !important; } .block .breakout-md-l { margin-left: -20px !important; } .block .breakout-md-r { margin-right: -20px !important; } } @media (min-width: 992px) and (max-width: 1199.98px) { .block .breakout-none { margin-left: 0 !important; margin-right: 0 !important; } .block .breakout-l { margin-left: -20px !important; } .block .breakout-r { margin-right: -20px !important; } .block .breakout-sm-none { margin-left: 0 !important; margin-right: 0 !important; } .block .breakout-sm-l { margin-left: -20px !important; } .block .breakout-sm-r { margin-right: -20px !important; } .block .breakout-md-none { margin-left: 0 !important; margin-right: 0 !important; } .block .breakout-md-l { margin-left: -20px !important; } .block .breakout-md-r { margin-right: -20px !important; } .block .breakout-lg-none { margin-left: 0 !important; margin-right: 0 !important; } .block .breakout-lg-l { margin-left: -20px !important; } .block .breakout-lg-r { margin-right: -20px !important; } } @media (min-width: 1200px) and (max-width: 1629.98px) { .block .breakout-none { margin-left: 0 !important; margin-right: 0 !important; } .block .breakout-l { margin-left: -30px !important; } .block .breakout-r { margin-right: -30px !important; } .block .breakout-sm-none { margin-left: 0 !important; margin-right: 0 !important; } .block .breakout-sm-l { margin-left: -30px !important; } .block .breakout-sm-r { margin-right: -30px !important; } .block .breakout-md-none { margin-left: 0 !important; margin-right: 0 !important; } .block .breakout-md-l { margin-left: -30px !important; } .block .breakout-md-r { margin-right: -30px !important; } .block .breakout-lg-none { margin-left: 0 !important; margin-right: 0 !important; } .block .breakout-lg-l { margin-left: -30px !important; } .block .breakout-lg-r { margin-right: -30px !important; } .block .breakout-xl-none { margin-left: 0 !important; margin-right: 0 !important; } .block .breakout-xl-l { margin-left: -30px !important; } .block .breakout-xl-r { margin-right: -30px !important; } } @media (min-width: 1630px) { .block .breakout-none { margin-left: 0 !important; margin-right: 0 !important; } .block .breakout-l { margin-left: -120px !important; } .block .breakout-r { margin-right: -120px !important; } .block .breakout-sm-none { margin-left: 0 !important; margin-right: 0 !important; } .block .breakout-sm-l { margin-left: -120px !important; } .block .breakout-sm-r { margin-right: -120px !important; } .block .breakout-md-none { margin-left: 0 !important; margin-right: 0 !important; } .block .breakout-md-l { margin-left: -120px !important; } .block .breakout-md-r { margin-right: -120px !important; } .block .breakout-lg-none { margin-left: 0 !important; margin-right: 0 !important; } .block .breakout-lg-l { margin-left: -120px !important; } .block .breakout-lg-r { margin-right: -120px !important; } .block .breakout-xl-none { margin-left: 0 !important; margin-right: 0 !important; } .block .breakout-xl-l { margin-left: -120px !important; } .block .breakout-xl-r { margin-right: -120px !important; } .block .breakout-xxl-none { margin-left: 0 !important; margin-right: 0 !important; } .block .breakout-xxl-l { margin-left: -120px !important; } .block .breakout-xxl-r { margin-right: -120px !important; } } .block .btn-arrow { display: flex; align-items: center; padding: 15px 30px; border-radius: 26px; width: fit-content; text-decoration: none; color: #FFFFFF; text-decoration: none; } .block .btn-arrow:after { content: ""; display: block; height: 16px; width: 36px; margin-left: 15px; transition: all 0.5s; background-position: center left; background-repeat: no-repeat; } .block .btn-arrow:hover:after { animation-duration: 0.4s; animation-name: arrowByButton; animation-iteration-count: infinite; animation-direction: alternate; } .block .btn-arrow.bg-red:after, .block .btn-arrow.simple-white:after { background-image: url(../img/arrow.right.white.svg); } @keyframes arrowByButton { from { background-position: center left; } to { background-position: center right; } } .block .cta-link { font-size: 22px; font-weight: bold; color: var(--c-darkgray); } @media (max-width: 767.98px) { .block .cta-link { font-size: 18px; } } .block .cta-link:hover { text-decoration-style: double; } .block a { color: inherit; } .mask { width: 100%; height: 100%; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: 3000px 3000px; -webkit-mask-size: 3000px 3000px; mask-position: center center; -webkit-mask-position: center center; position: relative; } .mask:is(.mask-br-1,.mask-br-2,.mask-br-3,.mask-br-4,.mask-br-5) { mask-image: url(../img/mask/img-mask.br.png); -webkit-mask-image: url(../img/mask/img-mask.br.png); mask-position: bottom right; -webkit-mask-position: bottom right; } .mask:is(.mask-bl-1,.mask-bl-2,.mask-bl-3,.mask-bl-4,.mask-bl-5) { mask-image: url(../img/mask/img-mask.bl.png); -webkit-mask-image: url(../img/mask/img-mask.bl.png); mask-position: bottom left; -webkit-mask-position: bottom left; } .mask:is(.mask-tr-1,.mask-tr-2,.mask-tr-3,.mask-tr-4,.mask-tr-5) { mask-image: url(../img/mask/img-mask.tr.png); -webkit-mask-image: url(../img/mask/img-mask.tr.png); mask-position: top right; -webkit-mask-position: top right; } .mask:is(.mask-tl-1,.mask-tl-2,.mask-tl-3,.mask-tl-4,.mask-tl-5) { mask-image: url(../img/mask/img-mask.tl.png); -webkit-mask-image: url(../img/mask/img-mask.tl.png); mask-position: top left; -webkit-mask-position: top left; } .mask :is(img,video) { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 992px) { .mask.mask-br-5 { mask-position: bottom 0 right calc(0px - calc(550px - var(--mask-lg-5))); } .mask.mask-bl-5 { mask-position: bottom 0 left calc(0px - calc(550px - var(--mask-lg-5))); } .mask.mask-tr-5 { mask-position: top 0 right calc(0px - calc(550px - var(--mask-lg-5))); } .mask.mask-tl-5 { mask-position: top 0 left calc(0px - calc(550px - var(--mask-lg-5))); } .mask.mask-br-4 { mask-position: bottom 0 right calc(0px - calc(550px - var(--mask-lg-4))); } .mask.mask-bl-4 { mask-position: bottom 0 left calc(0px - calc(550px - var(--mask-lg-4))); } .mask.mask-tr-4 { mask-position: top 0 right calc(0px - calc(550px - var(--mask-lg-4))); } .mask.mask-tl-4 { mask-position: top 0 left calc(0px - calc(550px - var(--mask-lg-4))); } .mask.mask-br-3 { mask-position: bottom 0 right calc(0px - calc(550px - var(--mask-lg-3))); } .mask.mask-bl-3 { mask-position: bottom 0 left calc(0px - calc(550px - var(--mask-lg-3))); } .mask.mask-tr-3 { mask-position: top 0 right calc(0px - calc(550px - var(--mask-lg-3))); } .mask.mask-tl-3 { mask-position: top 0 left calc(0px - calc(550px - var(--mask-lg-3))); } .mask.mask-br-2 { mask-position: bottom 0 right calc(0px - calc(550px - var(--mask-lg-2))); } .mask.mask-bl-2 { mask-position: bottom 0 left calc(0px - calc(550px - var(--mask-lg-2))); } .mask.mask-tr-2 { mask-position: top 0 right calc(0px - calc(550px - var(--mask-lg-2))); } .mask.mask-tl-2 { mask-position: top 0 left calc(0px - calc(550px - var(--mask-lg-2))); } .mask.mask-br-1 { mask-position: bottom 0 right calc(0px - calc(550px - var(--mask-lg-1))); } .mask.mask-bl-1 { mask-position: bottom 0 left calc(0px - calc(550px - var(--mask-lg-1))); } .mask.mask-tr-1 { mask-position: top 0 right calc(0px - calc(550px - var(--mask-lg-1))); } .mask.mask-tl-1 { mask-position: top 0 left calc(0px - calc(550px - var(--mask-lg-1))); } } @media (max-width: 991.98px) { .mask.mask-br-5 { mask-position: bottom 0 right calc(0px - calc(550px - var(--mask-xs-5))); } .mask.mask-bl-5 { mask-position: bottom 0 left calc(0px - calc(550px - var(--mask-xs-5))); } .mask.mask-tr-5 { mask-position: top 0 right calc(0px - calc(550px - var(--mask-xs-5))); } .mask.mask-tl-5 { mask-position: top 0 left calc(0px - calc(550px - var(--mask-xs-5))); } .mask.mask-br-4 { mask-position: bottom 0 right calc(0px - calc(550px - var(--mask-xs-4))); } .mask.mask-bl-4 { mask-position: bottom 0 left calc(0px - calc(550px - var(--mask-xs-4))); } .mask.mask-tr-4 { mask-position: top 0 right calc(0px - calc(550px - var(--mask-xs-4))); } .mask.mask-tl-4 { mask-position: top 0 left calc(0px - calc(550px - var(--mask-xs-4))); } .mask.mask-br-3 { mask-position: bottom 0 right calc(0px - calc(550px - var(--mask-xs-3))); } .mask.mask-bl-3 { mask-position: bottom 0 left calc(0px - calc(550px - var(--mask-xs-3))); } .mask.mask-tr-3 { mask-position: top 0 right calc(0px - calc(550px - var(--mask-xs-3))); } .mask.mask-tl-3 { mask-position: top 0 left calc(0px - calc(550px - var(--mask-xs-3))); } .mask.mask-br-2 { mask-position: bottom 0 right calc(0px - calc(550px - var(--mask-xs-2))); } .mask.mask-bl-2 { mask-position: bottom 0 left calc(0px - calc(550px - var(--mask-xs-2))); } .mask.mask-tr-2 { mask-position: top 0 right calc(0px - calc(550px - var(--mask-xs-2))); } .mask.mask-tl-2 { mask-position: top 0 left calc(0px - calc(550px - var(--mask-xs-2))); } .mask.mask-br-1 { mask-position: bottom 0 right calc(0px - calc(550px - var(--mask-xs-1))); } .mask.mask-bl-1 { mask-position: bottom 0 left calc(0px - calc(550px - var(--mask-xs-1))); } .mask.mask-tr-1 { mask-position: top 0 right calc(0px - calc(550px - var(--mask-xs-1))); } .mask.mask-tl-1 { mask-position: top 0 left calc(0px - calc(550px - var(--mask-xs-1))); } } *:is(.mask[class^="bgc-"],.mask[class*=" bgc-"]) { } *:is(.mask[class^="bgc-"],.mask[class*=" bgc-"]) :is(h1,h2,h3,h4,h5,h6) { width: 75%; } .mask.bgc-red *, .mask.bgc-peach *, .mask.bgc-darkgray * { color: var(--c-white); } .arr { display: inline-flex; align-items: center; } .arr::after { content: ""; display: inline-block; height: 16px; width: 30px; margin-left: 15px; transition: 400ms; background-position: center left; background-repeat: no-repeat; background-size: 24px; background-image: url(../img/arrow.right.svg.php?col=BE3A34); } .arr:hover:after { background-position: center right; } .arr.arr-red-right::after { background-image: url(../img/arrow.right.svg.php?col=BE3A34); } .arr.arr-white-right::after { background-image: url(../img/arrow.right.svg.php?col=FFF); } .arr.arr-hover-darkgray-right:hover:after { background-image: url(../img/arrow.right.svg.php?col=25282A); } .arr.arr-hover-red-right:hover:after { background-image: url(../img/arrow.right.svg.php?col=BE3A34); } .arr.arr-hover-peach-right:hover:after { background-image: url(../img/arrow.right.svg.php?col=E56A54); } .block1 { padding: 0; } .block1 .row>div:first-child { padding-top: var(--block-lg-py); } .block1 .row>div { padding-bottom: var(--block-lg-py); } @media (max-width: 991.98px) { .block1 .row>div:first-child { padding-top: var(--block-xs-py); } .block1 .row>div { padding-bottom: var(--block-xs-py); } } .block1 img { width: 100%; } .block2 { padding-top: 0; padding-bottom: 0; } .block2 > div:has(> .container > .row-1) { padding-top: var(--block-lg-py); } .block2 > div:has(> .container > .row-1) .row-1>div:last-child>div>div:first-child { padding-bottom: var(--block-lg-py); } .block2 > div:has(> .container > .row-2) .row-2>div:last-child { padding-top: var(--block-lg-py); } .block2 > div:has(> .container > .row-2) { padding-bottom: var(--block-lg-py); } @media (max-width: 991.98px) { .block2 { padding-top: var(--block-xs-py); } .block2 > div:has(> .container > .row-1) .row-1>div:last-child>div>div:first-child { padding-bottom: calc(var(--block-xs-py) / 2); } .block2 > div:has(> .container > .row-1) { padding-top: var(--block-xs-py); padding-top: 0; } .block2 > div:has(> .container > .row-2) .row-2>div:last-child { padding-top: calc(var(--block-xs-py) / 2); } .block2 > div:has(> .container > .row-2) { padding-bottom: var(--block-xs-py); } } .block2 > div:has(> .container > .row-2) .mask { display: block; height: auto; } .block2 img { width: 100%; obj: cover; } .block2 > div:has(> .container > .row-2) .mask { position: relative; z-index: 1; } .block2 .img_placeholder { height: 20px; } @media (max-width: 991.98px) { .block2 .img_placeholder_lg { display: none; } } @media (min-width: 992px) { .block2 .img_placeholder_xs { display: none; } } .block2 .icons a { } .block2 .icons a .icon img { width: 150px; height: 150px; margin-bottom: 30px; transition: 200ms; } .block2 .icons a:hover .icon img { transform: scale(1.1); } .block2 .icon div { white-space: nowrap; } .block2 .icons a:hover .arr::after { background-position: center right; } .block2 .icons a .arr::after { background-image: url(../img/arrow.right.svg.php?col=FFF); } .block2 .icons a:hover .arr::after { background-image: url(../img/arrow.right.svg.php?col=E56A54); } .block3 { padding-top: 0; } .block3 .content-1 { padding-top: var(--block-lg-py); } @media (max-width: 991.98px) { .block3 .content-1 { display: none; } } .block3 .content-2 { padding-top: var(--block-lg-py); } @media (max-width: 991.98px) { .block3 .content-2 { padding-top: var(--block-xs-py); } } .block3 .content-3 { padding-top: var(--block-lg-py); padding-bottom: var(--block-lg-py); } @media (max-width: 991.98px) { .block3 .content-3 { padding-top: 0; padding-bottom: 0; } .block3 .content-3 .mask-wrapper { margin-bottom: var(--block-xs-py); } } .block3 .content-4 { padding-bottom: var(--block-lg-py); } @media (max-width: 991.98px) { .block3 .content-4 { padding-bottom: var(--block-xs-py); } } .block3 ul { list-style-type: none; margin: 0; padding: 0; columns: 2; -webkit-columns: 2; -moz-columns: 2; } .block3 ul li a { text-decoration: none; } @media (max-width: 991.98px) { .block3 ul { columns: 1; -webkit-columns: 1; -moz-columns: 1; } } .block5 { padding-top: calc(var(--block-lg-py) * .7); } @media (max-width: 991.98px) { .block5 { padding-top: calc(var(--block-xs-py) * .7); } } .block5 .sticky { position: relative; z-index: 2; } .block5 .sticky>.container { padding-top: calc(var(--block-lg-py) * .3); } .block5 .icon { max-width: 100px; } @media (max-width: 991.98px) { .block5 .sticky>.container { padding-top: calc(var(--block-xs-py) * .3); } } .block5 .sticky_spacer { position: relative; z-index: 99999; } .block5 .debug { background-color: rgba(255,255,255,.5); color: #000; position: fixed; z-index: 9999; bottom: 70px; left: 10px; padding: 5px 10px; width: 210px; } .block5 .debug * { color: #000; } .block5 .sticky_content { position: relative; z-index: 99999; } @media (min-width: 992px) { .block5 .txt { opacity: 0; transition: opacity 200ms; position: fixed; z-index: 1; top: 500px; right: 0; right: 0; bottom: 0; display: flex; align-items: center; pointer-events: none; transition: opacity 200ms; } .block5 .txt .btn { transition: width 200ms 50ms; white-space: nowrap; overflow: hidden; } .block5 .txt.show { opacity: 1; pointer-events: all; } } .block7 ul { list-style-type: none; margin: 0; padding: 0; columns: 2; -webkit-columns: 2; -moz-columns: 2; } .block7 ul li a { text-decoration: none; color: var(--c-red); } @media (max-width: 991.98px) { .block7 ul { columns: 1; -webkit-columns: 1; -moz-columns: 1; } } .block9 { padding-top: 0; } .block9 :is(img,video) { width: 100%; max-width: 100%; height: auto; object-fit: cover; display: block; } .block9 .media-1 { height: 70vh; } .block9 :is(.media-2,.media-3,.media-4) { height: 35vh; } .block9 .mask.bgc-white * { color: var(--c-darkgray); } @media (max-width: 991.98px) { .block9 .media-1 { height: 35vh; } .block9 :is(.media-2,.media-3,.media-4) { height: 17.5vh; } } .block9 .mask { display: flow-root; } @media (min-width: 1630px) { .block9>div:last-child { margin-top: -110px; } } @media (min-width: 1200px) and (max-width: 1629.98px) { .block9>div:last-child { margin-top: -90px; } } @media (min-width: 992px) and (max-width: 1199.98px) { .block9>div:last-child { margin-top: -70px; } } @media (max-width: 991.98px) { .block9>div:last-child { margin-top: 30px; } } .block10 .stats h2 { color: var(--c-peach); margin-bottom: 0; } .block11 { overflow: hidden; } .block11>div { padding-left: 0; padding-right: 0; } .block11 div:has(> .marquee-wrapper) { } .block11 .marquee-wrapper { position: relative; left: -10vw; width: 120vw; max-width: 120vw; height: 300px; overflow-x: hidden; font: 900 200px Outfit; text-transform: uppercase; color: #F00; } @media (max-width: 991.98px) { .block11 .marquee-wrapper { height: 150px; font: 900 100px Outfit; } } @keyframes block11_sway { 0%,100% { transform: rotate(4deg); } 50% { transform: rotate(-4deg); } } .block11 .track { position: absolute; white-space: nowrap; will-change: transform; animation: block11_marquee 20s linear infinite; } @keyframes block11_marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .block11 .marquee { animation: block11_color 10s ease-in-out infinite; } @keyframes block11_color_v1 { 0%,79.99% { color: var(--c-peach); } 80%,89.99% { color: var(--c-darkgray); } 90%,100% { color: var(--c-peach); } } @keyframes block11_color { 0%,40% { color: var(--c-peach); } 50% { color: var(--c-darkgray); } 60%,100% { color: var(--c-peach); } } @keyframes crazyshake { 0% { transform: translate(0, 0) rotate(0deg); text-shadow: 0 0 0 #0000; } 5% { transform: translate(0, 0) rotate(-.5deg); text-shadow: 0 0 0 #0000; } 10% { transform: translate(0, -4px) rotate(.15deg); text-shadow: 0 4px 2px #000; } 15% { transform: translate(0, 0) rotate(.5deg); text-shadow: 0 0 0 #0000; } 20% { transform: translate(0, 0) rotate(0deg); text-shadow: 0 0 0 #0000; } } .bgc-red.block11 .marquee { animation: none; color: var(--c-white); } .block12 a { text-align: left; } @media (min-width: 992px) { .block12 .contents>div>div:last-child { width: 75%; } } .block12 select, .block12 select>option { color: var(--c-darkgray); } .block13 .accordion-item { background-color: transparent; border: none; } .block13 .accordion-item:not(:last-child) { border-bottom: 1px var(--c-red) solid; } .block13 .accordion-header>div { cursor: pointer; display: flow-root; } .block13 .accordion-header>div h4 { padding-top: 40px; } .block13 .accordion-item:hover .accordion-header>div h4 { color: var(--c-red); } .block13 .accordion-body { padding-left: 0; padding-right: 0; } .block14 h2 span { display: inline-block; border-radius: 50px; padding-left: 75px; padding-right: 75px; } @media (max-width: 991.98px) { .block14 h2 span { padding-left: 25px; padding-right: 25px; } } .block15 { --flydown-wh: 320px; --flydown-w: 450px; --flydown-h: 400px; --flydown-w: 350px; --flydown-h: 350px; padding-bottom: 0; } .block15 * { user-select: none; } .block15 .scrollbuttons .btn::after { margin-left: 0; background-position: center; } @media (min-width: 1630px) { .block15 .offpadding { padding-left: calc(calc(100% - 1376px) / 2); padding-right: calc(calc(100% - 1376px) / 2); } } @media (min-width: 1200px) and (max-width: 1629.98px) { .block15 .offpadding { padding-left: calc(calc(100% - 1116px) / 2); padding-right: calc(calc(100% - 1116px) / 2); } } @media (min-width: 992px) and (max-width: 1199.98px) { .block15 .offpadding { padding-left: calc(calc(100% - 936px) / 2); padding-right: calc(calc(100% - 936px) / 2); } } @media (min-width: 768px) and (max-width: 991.98px) { .block15 .offpadding { padding-left: calc(calc(100% - 696px) / 2); padding-right: calc(calc(100% - 696px) / 2); } } @media (min-width: 576px) and (max-width: 767.98px) { .block15 .offpadding { padding-left: calc(calc(100% - 516px) / 2); padding-right: calc(calc(100% - 516px) / 2); } } .block15 .offpadding { overflow-x: auto; padding-bottom: var(--block-lg-py); -ms-overflow-style: none; scrollbar-width: none; } .block15 .offpadding::-webkit-scrollbar { display: none; } @media (max-width: 991.98px) { .block15 .offpadding { padding-bottom: var(--block-xs-py); } } .block15 .flydown-wrapper { width: var(--flydown-w); height: var(--flydown-h); } .block15 .flydown-wrapper * { text-decoration: none; } .block15 .flydown { width: var(--flydown-w); height: var(--flydown-h); background-color: var(--c-sand); } .block15 .flydown .media { width: var(--flydown-w); height: var(--flydown-h); overflow: hidden; } .block15 .flydown .media :is(img,video) { width: var(--flydown-w); height: var(--flydown-h); object-fit: cover; transform-origin: top center; transition: transform 200ms; } .block15 .flydown:hover .media :is(img,video) { transform: scale(1.1); } .block15 .flydown .body { margin-top: calc(0px - var(--flydown-h) + (var(--flydown-h) * 0.33)); height: calc(var(--flydown-h) * 0.67); max-height: calc(var(--flydown-h) * 0.67); transition: 200ms; overflow: hidden; } .block15 .flydown:hover .body { max-height: unset; margin-top: calc(0px - var(--flydown-h) + (var(--flydown-h) * 0.5)); margin-left: 15px; } .block15 .flydown .body .mask { background-color: var(--c-sand); transition: background-color 200ms; width: var(--flydown-w); height: var(--flydown-h); overflow: hidden; } .block15 .flydown:hover .body .mask { position: absolute; height: auto; background-color: var(--c-red); } .block15 .flydown:hover .body { transform: rotate(3deg); transform-origin: top left; } .block15 .flydown .label { margin-bottom: 0; } .block15 .flydown .label * { color: var(--c-red); } .block15 .flydown h3 { } .block15 .flydown h3::before { content: ''; display: block; width: 30px; height: 1lh; float: right; } .block15 .flydown:not(:hover) .content { display: none; } .block15 .flydown:hover * { color: var(--c-white); } .block15 .flydown:not(:hover) .mask-wrapper, .block15 .flydown:not(:hover) .mask { height: calc(var(--flydown-h) * 0.67); max-height: calc(var(--flydown-h) * 0.67); overflow: hidden; } .block15 .flydown .mask { display: flex; flex-direction: column; } .block15 .flydown .info { margin-top: auto; display: flex; justify-content: space-between; gap: 14px; } .block15 .flydown .info .geo:before { content: ''; display: block; width: 33px; height: 36px; background-image: url('../img/icon.marker.svg.php?col1=25282A&col2=BE3A34'), url('../img/icon.marker.svg.php?col1=25282A&col2=FFF'); background-repeat: no-repeat; background-position: 0 0, 33px 0; flex: 0 0 1; } .block15 .flydown:hover .info .geo:before { background-position: -33px 0, 0 0; } .block15 .flydown .info .location { flex: 1; padding-top: 10px; } .block15 .flydown .info .area { white-space: nowrap; flex: 0 0 1; padding-top: 10px; } .block16 video { width: 100%; } .block16 .mask.mask-video { mask-image: url('../img/mask/mask-video.png'); mask-size: 100% 100%; position: relative; display: block; width: 100vw; max-width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .block17 .follow { border-top: 1px var(--c-darkgray) solid; } .block17 .follow img { max-width: 24px; max-height: 24px; } .block17 .list { list-style-type: none; padding: 0; display: flex; flex-direction: column; } .block17 .list * { text-decoration: none; } .block17 .list .arr { min-width: 50px; } .block17 .list li a .arr::after { background-image: url('../img/arrow.right.svg.php?col=25282A'); } .block17 .list li a:hover .arr::after { background-image: url('../img/arrow.right.svg.php?col=BE3A34'); background-position: center right; } .block17 .list li a { margin: 0; } .block17 .list li:not(:last-of-type) a { border-bottom: 1px var(--c-darkgray) solid; } .block17 .list li a h3 { transition: 200ms; } .block17 .list li a:hover h3 { color: var(--c-red); } .block17 .info { margin-top: auto; display: inline-flex; justify-content: space-between; gap: 14px; margin-bottom: 40px; } .block17 .info .geo:before { content: ''; display: block; width: 33px; height: 36px; background-image: url('../img/icon.marker.svg.php?col1=25282A&col2=BE3A34'); background-repeat: no-repeat; flex: 0 0 1; } .block17 .info .location { flex: 1; padding-top: 10px; } .block18 div.icon { display: flex; background-color: #ffffff; width: 70px; height: 70px; color: var(--c-darkgray); justify-content: center; align-items: center; border-radius: 50%; } .block18 h4 + div, .block18 h4 + img, .block18 h4 + a { margin-top: 1em; margin-bottom: 2em; } .block18 .mask-wrapper { margin-top: 25px; margin-bottom: 25px; } .block18 .mask-wrapper:has(.mask-tl) { background-image: url(../img/like-a-boss.svg); background-repeat: no-repeat; background-position: top left; background-size: 27%; } @media (min-width: 992px) { .block18 .mask-wrapper { margin-top: 0; margin-bottom: 0; } } .block.block19 { padding-top: 0; padding-bottom: 0; } .block19 .row-1 { padding-top: var(--block-lg-py); padding-bottom: calc(1.2 * var(--block-lg-py)); align-items: center; } .block19 .row-2 { padding-top: var(--block-lg-py); padding-bottom: var(--block-lg-py); } .block19 .offset-top { margin-top: calc(-2 * var(--block-lg-py)); } @media (min-width: 1630px) { .block20 .script { position: relative; margin: 0 0 -50px -70px; } } @media (min-width: 992px) and (max-width: 1629.98px) { .block20 .script { position: relative; margin: 0 0 -10px -25px; } } .block20 .follow p { margin-top: 0; margin-bottom: 0; } .block20 .follow img { max-width: 24px; max-height: 24px; } .block20 div:has(> .backtext) { position: relative; } .block20 .backtext { position: absolute; left: 0; top: 0; font: 900 130px/130px Outfit; margin-top: 70px; text-align: right; opacity: .1; pointer-events: none; } .block20 label { font-size: 18px; position: absolute; pointer-events: none; margin: 15px 0 0 12px; transition: 200ms; white-space: nowrap; } .block20 label:has(~ input:focus:placeholder-shown), .block20 label:has(~ input:not(:placeholder-shown)) { font-size: 14px; margin: -8px 0 0 0; } .block20 label:has(~ textarea:focus:placeholder-shown), .block20 label:has(~ textarea:not(:placeholder-shown)) { font-size: 14px; margin: -20px 0 0 0; } .block20 label:has(~ input[type="radio"]) { position: relative; display: block; margin: 0 0 8px; } .block20 :is(input,textarea)::placeholder { opacity: 0; } .block20 :is(input:not([type="submit"]):not([type="radio"]):not([type="ceckbox"]), textarea), .block20 :is(input:not([type="submit"]):not([type="radio"]):not([type="ceckbox"]), textarea):focus { color: var(--c-white); background-color: transparent; border: none; border-radius: 0; border-bottom: 2px var(--c-white) solid; font-size: 18px; outline: none; box-shadow: none; outline: invert none medium; padding-top: 15px; padding-bottom: 15px; } .block20 :is(input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]), textarea) { width: 100%; } .block20 textarea { resize: vertical; overflow-y: auto; resize: none; } .block20 input[type="radio"], .block20 input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 20px; height: 20px; border: 2px #fff solid; border-radius: 50%; display: inline-block; position: relative; cursor: pointer; margin: 0 8px 0 0; vertical-align: middle; background: transparent; padding-top: 0; padding-bottom: 0; } .block20 input[type="radio"]:checked::after { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; background-color: #fff; border-radius: 50%; transform: translate(-50%, -50%); } .block20 input[type="radio"] ~ span { display: inline-block; padding-right: 20px; color: var(--c-white); } .block20 input[type="checkbox"] { border-radius: 3px; border: 2px #fff solid !important; padding-top: 0 !important; padding-bottom: 0 !important; } input[type="checkbox"]:checked::after { content: ''; position: absolute; top: 0; left: 5px; width: 6px; height: 12px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .block20 .captcha_wrapper { display: flex; flex-direction: row; align-items: baseline; gap: 20px; } .block20 .captcha_wrapper img { height: 54px; } .block20 .captcha_wrapper input { width: 100%; } .block21 { padding-top: 0; padding-bottom: 0; } .block21>.container-fluid { margin-right: 0; margin-left: 0; padding-left: 0; padding-right: 0; } .block21>.container-fluid>.row { margin: 0; padding: 0; } .block21>.container-fluid>.row>.col { padding-left: 0; padding-right: 0; } .block21 .gmap { height: 800px; max-height: 85vh; max-height: 100vh; transition: all 500ms ease-in; } .block21 #map { height: 100%; display: none; } .block21 #consent_googlemaps { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; background-image: url(../img/bg.maps.webp); background-size: cover; background-position: bottom right; } .block21 .col.map-info { background-color: #ffffff; max-width: 0px; transition: all 500ms ease-in; position: relative; } .block21 .col.map-info .btn-close { display: none; position: absolute; top: 1vw; left: min(420px, calc(100% - 30px)); } .block21 .col.map-info:has(.active) .btn-close { display: block; } .block21 .col.map-info:has(.active) { max-width: 50%; transition: all 500ms ease-in; } .block21 .col.map-info > div { display: none; opacity: 0; transition: opacity 500ms ease-in 500ms; overflow: hidden; width: min(450px, 100%); padding: 50px 10px 10px 10px; } .block21 .col.map-info > div .buttons { display: flex; justify-content: space-between; } .block21 .col.map-info > div .buttons > a { margin-top: 5px; margin-bottom: 5px; } .block21 .col.map-info > div.active { opacity: 1; transition: opacity 500ms ease-in; padding-left: 30px; } .block21 .img-systeam { background: url(../img/noimage.webp) center / cover no-repeat; width: 100%; height: 330px; margin-bottom: 20px; } .block21 a.routenplanung { display: flex; align-items: center; color: var(--c-red); } .block21 a.routenplanung:before { content: ""; display: block; width: 24px; height: 24px; background-image: url(../img/map.svg); background-position: center; } @media (max-width: 767.98px) { .block21 .col.map-info:has(.active) { max-width: 100%; } .block21:has(.active) .col.gmap { max-width: 0; } .block21:has(.active) .col.map-info { width: 100%; max-width: 100%; } .block21 .col.map-info .btn-close { left: calc(50% + min(225px, 41%)); } .block21 .col.map-info > div { margin-left: auto; margin-right: auto; } } @media (max-width: 1199.98px) { .block21 .col.map-info > div .buttons { justify-content: center; flex-direction: column; align-items: center; } } @media (min-width: 992px) and (max-width: 1199.98px) { .block21 .col.map-info .btn-close { left: min(420px, calc(100% - 30px)); } .block21 .col.map-info > div { width: min(460px, 100%); } } @media (min-width: 1200px) and (max-width: 1629.98px) { .block21 .col.map-info .btn-close { left: min(520px, calc(100% - 30px)); } .block21 .col.map-info > div { width: min(560px, 100%); } } @media (min-width: 1630px) { .block21 .col.map-info:has(.active) { max-width: calc(50% - 208px); } .block21 .col.map-info .btn-close { left: min(470px, calc(100% - 30px)); } .block21 .col.map-info > div { width: min(500px, 100%); } } .block22 .card-img { max-height: 275px; margin-bottom: 25px; overflow: hidden; } .block22 a.news-card { display: block; position: relative; margin-bottom: 50px; } a.news-card { text-decoration: none; } .block22 a.news-card * { color: white; } .block22 a.news-card:hover h4 { color: var(--c-red); } .block22 a.news-card:after { display: flex; align-items: center; justify-content: center; content: "READ"; color: white; text-align: center; font-size: 20px; font-weight: 900; position: absolute; right: -9px; top: -33px; width: 170px; height: 170px; border-radius: 50%; background-color: var(--c-blue); opacity: 0; transition: opacity 0.4s; } .block22 a.news-card:hover:after { opacity: 1; } .block23 .mask-wrapper { position: relative; z-index: 2; } .page-tpl .timeline.timeline-1.timeline-path-base { stroke: #EEE; stroke-width: 0; } .page-tpl .timeline.timeline-1.timeline-path-progress { stroke: var(--c-red); stroke-width: 5; } .page-tpl .timeline.timeline-1.timeline-spot::before { content: ''; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; background-color: var(--c-red); pointer-events: none; transition: transform .15s ease, opacity .15s ease; transform: translate(-50%,-50%) scale(.1); opacity: 0; } .page-tpl .timeline.timeline-1.timeline-spot.active::before { transition: transform .35s ease, opacity .35s ease; transform: translate(-50%,-50%) scale(1); opacity: 1; } .page-tpl .timeline.timeline-1.timeline-node-1 { left: 50%; top: 50%; } @media (min-width: 992px) and (max-width: 1199.98px) { .page-tpl .timeline.timeline-1.timeline-node-1 { left: 50%; top: 20%; } } @media (min-width: 576px) and (max-width: 991.98px) { .page-tpl .timeline.timeline-1.timeline-node-1 { left: 5%; top: 90%; } } .page-tpl .timeline.timeline-1.timeline-node-2 { left: 80%; top: calc(100% + 20px); } @media (min-width: 768px) and (max-width: 991.98px) { .page-tpl .timeline.timeline-1.timeline-node-2 { left: 10%; top: 200%; } } @media (min-width: 576px) and (max-width: 767.98px) { .page-tpl .timeline.timeline-1.timeline-node-2 { left: 10%; top: 240%; } } @media (max-width: 575.98px) { .page-tpl .timeline.timeline-1.timeline-node-2 { left: 10%; top: 350px; } } .page-tpl .timeline.timeline-1.timeline-node-3 { left: 50%; } @media (max-width: 575.98px) { .page-tpl .timeline.timeline-1.timeline-node-3 { left: -20px; } } .page-tpl .timeline.timeline-1.timeline-node-4 { left: 30%; top: 75%; } .page-tpl .timeline.timeline-1.timeline-node-5 { left: 40%; top: -200px; } @media (min-width: 992px) and (max-width: 1199.98px) { .page-tpl .timeline.timeline-1.timeline-node-5 { left: 120%; top: -100px; } } @media (min-width: 768px) and (max-width: 991.98px) { .page-tpl .timeline.timeline-1.timeline-node-5 { left: 10px; top: -300px; } } @media (min-width: 576px) and (max-width: 767.98px) { .page-tpl .timeline.timeline-1.timeline-node-5 { left: -20px; top: -350px; } } @media (max-width: 575.98px) { .page-tpl .timeline.timeline-1.timeline-node-5 { left: 20px; top: -450px; } } .page-tpl .timeline.timeline-1.timeline-node-6 { left: 30%; top: -80px; } @media (min-width: 768px) and (max-width: 991.98px) { .page-tpl .timeline.timeline-1.timeline-node-6 { left: 30px; top: -80px; } } @media (min-width: 576px) and (max-width: 767.98px) { .page-tpl .timeline.timeline-1.timeline-node-6 { left: 30px; top: -80px; } } @media (max-width: 575.98px) { .page-tpl .timeline.timeline-1.timeline-node-6 { left: 20px; top: -280px; } } .page-tpl .timeline.timeline-1.timeline-node-7 { left: -200px; top: -30px; } @media (min-width: 576px) and (max-width: 991.98px) { .page-tpl .timeline.timeline-1.timeline-node-7 { left: 30px; top: -150px; } } @media (max-width: 575.98px) { .page-tpl .timeline.timeline-1.timeline-node-7 { left: 20px; top: -100px; } } .page-tpl .timeline.timeline-1.timeline-node-8 { left: 30%; top: -80px; } .page-tpl .timeline.timeline-1.timeline-node-9 { left: 30%; top: -80px; } @media (min-width: 768px) and (max-width: 991.98px) { .page-tpl .timeline.timeline-1.timeline-node-9 { left: 30px; } } .page-tpl .timeline.timeline-1.timeline-node-10 { left: -100px; top: -30px; } @media (min-width: 992px) and (max-width: 1199.98px) { .page-tpl .timeline.timeline-1.timeline-node-10 { left: 10px; top: 20px; } } @media (min-width: 768px) and (max-width: 991.98px) { .page-tpl .timeline.timeline-1.timeline-node-10 { left: 90px; top: 200px; } } @media (min-width: 576px) and (max-width: 767.98px) { .page-tpl .timeline.timeline-1.timeline-node-10 { left: 40px; top: 200px; } } @media (max-width: 575.98px) { .page-tpl .timeline.timeline-1.timeline-node-10 { left: 20px; top: 200px; } } .page-tpl .timeline.timeline-1.timeline-node-11 { left: 550px; right: -30px; top: -20px; } @media (min-width: 1200px) and (max-width: 1629.98px) { .page-tpl .timeline.timeline-1.timeline-node-11 { left: 450px; } } @media (min-width: 992px) and (max-width: 1199.98px) { .page-tpl .timeline.timeline-1.timeline-node-11 { left: 350px; } } @media (min-width: 576px) and (max-width: 991.98px) { .page-tpl .timeline.timeline-1.timeline-node-11 { left: 40px; top: -80px; } } @media (max-width: 575.98px) { .page-tpl .timeline.timeline-1.timeline-node-11 { left: 10px; top: -80px; } } .page-tpl .timeline.timeline-1.timeline-node-12 { left: 50%; top: 20%; } .page-tpl .timeline.timeline-1.timeline-node-13 { left: 50%; top: 50px; } @media (min-width: 576px) and (max-width: 991.98px) { .page-tpl .timeline.timeline-1.timeline-node-13 { left: 20%; top: 50px; } } @media (max-width: 575.98px) { .page-tpl .timeline.timeline-1.timeline-node-13 { left: 20px; top: 50px; } } .page-tpl .timeline.timeline-1.timeline-node-14 { left: -80px; top: 30px; } @media (min-width: 576px) and (max-width: 991.98px) { .page-tpl .timeline.timeline-1.timeline-node-14 { left: 40px; top: -550px; } } @media (max-width: 575.98px) { .page-tpl .timeline.timeline-1.timeline-node-14 { left: 10px; top: -150px; } } .page-tpl .timeline.timeline-1.timeline-node-15 { left: 50%; top: 30px; } @media (min-width: 768px) and (max-width: 991.98px) { .page-tpl .timeline.timeline-1.timeline-node-15 { left: 50px; top: -100px; } } @media (min-width: 576px) and (max-width: 767.98px) { .page-tpl .timeline.timeline-1.timeline-node-15 { left: 10px; top: -100px; } } .page-tpl .timeline.timeline-1.timeline-node-16 { left: 150px; top: -100px; } @media (max-width: 991.98px) { .page-tpl .timeline.timeline-1.timeline-node-16 { left: 80vw; top: 100px; } } .page-tpl .timeline.timeline-1.timeline-node-17 { left: calc(50% - 50px); top: -200px; } @media (min-width: 576px) and (max-width: 991.98px) { .page-tpl .timeline.timeline-1.timeline-node-17 { left: 75vw; top: -200px; } } @media (max-width: 575.98px) { .page-tpl .timeline.timeline-1.timeline-node-17 { left: 85vw; } } .page-tpl .timeline.timeline-1.timeline-node-18 { left: 50%; top: -120px; } .page-tpl .timeline.timeline-1.timeline-node-19 { left: 50%; top: -20px; } .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-path-base { stroke: #EEE; stroke-width: 0; } .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-path-progress { stroke: var(--c-red); stroke-width: 5; } .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-spot::before { content: ''; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; background-color: var(--c-red); pointer-events: none; transition: transform .15s ease, opacity .15s ease; transform: translate(-50%,-50%) scale(.1); opacity: 0; } .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-spot.active::before { transition: transform .35s ease, opacity .35s ease; transform: translate(-50%,-50%) scale(1); opacity: 1; } .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-1 { left: 50%; top: 50%; } @media (min-width: 992px) and (max-width: 1199.98px) { .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-1 { left: 50%; top: 20%; } } @media (min-width: 576px) and (max-width: 991.98px) { .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-1 { left: 5%; top: 90%; } } .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-2 { left: 80%; top: calc(100% + 20px); } @media (min-width: 768px) and (max-width: 991.98px) { .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-2 { left: 10%; top: 200%; } } @media (min-width: 576px) and (max-width: 767.98px) { .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-2 { left: 10%; top: 240%; } } @media (max-width: 575.98px) { .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-2 { left: 10%; top: 350px; } } .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-3 { left: 50%; } @media (max-width: 575.98px) { .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-3 { left: -20px; } } .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-4 { left: 30%; top: 75%; } .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-5 { left: 40%; top: -200px; } @media (min-width: 1200px) and (max-width: 1629.98px) { .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-5 { left: 120%; top: -100px; } } @media (min-width: 992px) and (max-width: 1199.98px) { .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-5 { left: 120%; top: -100px; } } @media (min-width: 768px) and (max-width: 991.98px) { .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-5 { left: 10px; top: -300px; } } @media (min-width: 576px) and (max-width: 767.98px) { .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-5 { left: -20px; top: -350px; } } @media (max-width: 575.98px) { .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-5 { left: 20px; top: -450px; } } .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-6 { left: 30%; top: -80px; } @media (min-width: 768px) and (max-width: 991.98px) { .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-6 { left: 30px; top: -80px; } } @media (min-width: 576px) and (max-width: 767.98px) { .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-6 { left: 30px; top: -80px; } } @media (max-width: 575.98px) { .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-6 { left: 20px; top: -280px; } } .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-7 { left: -200px; top: -30px; } @media (min-width: 576px) and (max-width: 991.98px) { .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-7 { left: 30px; top: -150px; } } @media (max-width: 575.98px) { .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-7 { left: 20px; top: -100px; } } .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-8 { left: 30%; top: -80px; } .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-9 { left: 30%; top: -80px; } @media (min-width: 768px) and (max-width: 991.98px) { .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-9 { left: 30px; } } .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-10 { left: -100px; top: -30px; } @media (min-width: 992px) and (max-width: 1199.98px) { .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-10 { left: 10px; top: 20px; } } @media (min-width: 768px) and (max-width: 991.98px) { .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-10 { left: 90px; top: 200px; } } @media (min-width: 576px) and (max-width: 767.98px) { .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-10 { left: 40px; top: 200px; } } @media (max-width: 575.98px) { .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-10 { left: 20px; top: 200px; } } .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-11 { left: 550px; right: -30px; top: -20px; } @media (min-width: 1200px) and (max-width: 1629.98px) { .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-11 { left: 450px; } } @media (min-width: 992px) and (max-width: 1199.98px) { .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-11 { left: 350px; } } @media (min-width: 576px) and (max-width: 991.98px) { .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-11 { left: 40px; top: -80px; } } @media (max-width: 575.98px) { .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-11 { left: 10px; top: -80px; } } .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-12 { left: 50%; top: 20%; } .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-13 { left: 50%; top: 50px; } @media (min-width: 576px) and (max-width: 991.98px) { .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-13 { left: 20%; top: 50px; } } @media (max-width: 575.98px) { .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-13 { left: 20px; top: 50px; } } .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-14 { left: -80px; top: 30px; } @media (min-width: 576px) and (max-width: 991.98px) { .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-14 { left: 40px; top: -550px; } } @media (max-width: 575.98px) { .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-14 { left: 10px; top: -150px; } } .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-15 { left: 50%; top: 30px; } @media (min-width: 768px) and (max-width: 991.98px) { .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-15 { left: 50px; top: -100px; } } @media (min-width: 576px) and (max-width: 767.98px) { .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-15 { left: 10px; top: -100px; } } .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-16 { left: 150px; top: -100px; } @media (max-width: 991.98px) { .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-16 { left: 80vw; top: 100px; } } .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-17 { left: calc(50% - 50px); top: -200px; } @media (min-width: 576px) and (max-width: 991.98px) { .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-17 { left: 75vw; top: -200px; } } @media (max-width: 575.98px) { .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-17 { left: 85vw; } } .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-18 { left: 50%; top: -120px; } .page-unternehmen-das-sind-wir .timeline.timeline-1.timeline-node-19 { left: 50%; top: -20px; } .page-leistungen-konzeption .block23~.block23 .mask-wrapper { position: relative; margin-top: calc(0px - var(--block-lg-py)); } .page-leistungen-konzeption .block23.bgc-sand~.block23 { box-shadow: inset 0 calc(var(--block-lg-py)/2) 0 var(--c-sand); } .page-leistungen-konzeption .block23.bgc-red~.block23 { box-shadow: inset 0 calc(var(--block-lg-py)/2) 0 var(--c-red); } .page-leistungen-konzeption .block23.bgc-darkgray~.block23 { box-shadow: inset 0 calc(var(--block-lg-py)/2) 0 var(--c-darkgray); } .page-leistungen-konzeption .block23.bgc-white~.block23 { box-shadow: inset 0 calc(var(--block-lg-py)/2) 0 var(--c-white); } .page-leistungen-konzeption .timeline.timeline-1.timeline-path-base { stroke: #EEE; stroke-width: 0; } .page-leistungen-konzeption .timeline.timeline-1.timeline-path-progress { stroke: var(--c-white); stroke-width: 5; } .page-leistungen-konzeption .timeline.timeline-1.timeline-spot::before { content: ''; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; background-color: var(--c-white); pointer-events: none; transition: transform .15s ease, opacity .15s ease; transform: translate(-50%,-50%) scale(.1); opacity: 0; } .page-leistungen-konzeption .timeline.timeline-1.timeline-node-1 { left: 50%; top: 50%; } .page-leistungen-konzeption .timeline.timeline-1.timeline-node-2 { left: 80%; top: 70px; } @media (min-width: 992px) and (max-width: 1199.98px) { .page-leistungen-konzeption .timeline.timeline-1.timeline-node-2 { left: 80%; top: 90px; } } @media (min-width: 768px) and (max-width: 991.98px) { .page-leistungen-konzeption .timeline.timeline-1.timeline-node-2 { left: -50px; top: 100px; } } @media (min-width: 576px) and (max-width: 767.98px) { .page-leistungen-konzeption .timeline.timeline-1.timeline-node-2 { left: -50px; top: 100px; } } @media (max-width: 575.98px) { .page-leistungen-konzeption .timeline.timeline-1.timeline-node-2 { left: 10px; top: 100px; } } .page-leistungen-konzeption .timeline.timeline-1.timeline-node-3 { left: 20%; top: -150px; } @media (min-width: 992px) and (max-width: 1199.98px) { .page-leistungen-konzeption .timeline.timeline-1.timeline-node-3 { left: 20%; top: -80px; } } @media (min-width: 768px) and (max-width: 991.98px) { .page-leistungen-konzeption .timeline.timeline-1.timeline-node-3 { left: 50px; top: -200px; } } @media (min-width: 576px) and (max-width: 767.98px) { .page-leistungen-konzeption .timeline.timeline-1.timeline-node-3 { left: 50px; top: -200px; } } @media (max-width: 575.98px) { .page-leistungen-konzeption .timeline.timeline-1.timeline-node-3 { left: 20px; top: -200px; } } .page-leistungen-konzeption .timeline.timeline-1.timeline-node-4 { left: 50%; top: 90%; } @media (min-width: 576px) and (max-width: 767.98px) { .page-leistungen-konzeption .timeline.timeline-1.timeline-node-4 { left: 20%; top: 90%; } } @media (max-width: 575.98px) { .page-leistungen-konzeption .timeline.timeline-1.timeline-node-4 { left: 20%; top: 90%; } } .page-leistungen-konzeption .timeline.timeline-1.timeline-node-5 { left: 100%; top: -250px; } .page-leistungen-konzeption .timeline.timeline-1.timeline-node-6 { left: 50%; top: 50%; } @media (min-width: 1200px) and (max-width: 1629.98px) { .page-leistungen-konzeption .timeline.timeline-1.timeline-node-5 { left: 100%; top: -80px; } .page-leistungen-konzeption .timeline.timeline-1.timeline-node-6 { left: 40%; top: -100px; } } @media (min-width: 992px) and (max-width: 1199.98px) { .page-leistungen-konzeption .timeline.timeline-1.timeline-node-5 { left: 100%; top: -60px; } .page-leistungen-konzeption .timeline.timeline-1.timeline-node-6 { left: 40%; top: -40px; } } @media (min-width: 768px) and (max-width: 991.98px) { .page-leistungen-konzeption .timeline.timeline-1.timeline-node-5 { left: 10px; top: -300px; } .page-leistungen-konzeption .timeline.timeline-1.timeline-node-6 { left: 30px; top: 0; } } @media (min-width: 576px) and (max-width: 767.98px) { .page-leistungen-konzeption .timeline.timeline-1.timeline-node-5 { left: 10px; top: -300px; } .page-leistungen-konzeption .timeline.timeline-1.timeline-node-6 { left: 30px; top: 0; } } @media (max-width: 575.98px) { .page-leistungen-konzeption .timeline.timeline-1.timeline-node-5 { left: 10px; top: -300px; } .page-leistungen-konzeption .timeline.timeline-1.timeline-node-6 { left: 30px; top: 0; } } .page-leistungen-konzeption .timeline.timeline-1.timeline-node-7 { left: 20%; top: 50%; } .page-leistungen-konzeption .timeline.timeline-2.timeline-path-base { stroke: #EEE; stroke-width: 0; } .page-leistungen-konzeption .timeline.timeline-2.timeline-path-progress { stroke: var(--c-darkgray); stroke-width: 5; } .page-leistungen-konzeption .timeline.timeline-2.timeline-spot::before { content: ''; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; background-color: var(--c-white); pointer-events: none; transition: transform .15s ease, opacity .15s ease; transform: translate(-50%,-50%) scale(.1); opacity: 0; } .page-leistungen-konzeption .timeline.timeline-2.timeline-node-1 { left: 20%; top: 50%; } .page-leistungen-konzeption .timeline.timeline-2.timeline-node-2 { left: 30%; top: calc(100% + 150px); } @media (min-width: 768px) and (max-width: 991.98px) { .page-leistungen-konzeption .timeline.timeline-2.timeline-node-2 { left: -30px; top: calc(100% + 350px); } } @media (min-width: 576px) and (max-width: 767.98px) { .page-leistungen-konzeption .timeline.timeline-2.timeline-node-2 { left: -30px; top: calc(100% + 380px); } } @media (max-width: 575.98px) { .page-leistungen-konzeption .timeline.timeline-2.timeline-node-2 { left: 10px; top: calc(100% + 380px); } } .page-leistungen-konzeption .timeline.timeline-2.timeline-node-3 { left: 5%; top: calc(100% + 30px); } @media (min-width: 768px) and (max-width: 991.98px) { .page-leistungen-konzeption .timeline.timeline-2.timeline-node-3 { left: -40px; top: calc(100% + 270px); } } @media (min-width: 576px) and (max-width: 767.98px) { .page-leistungen-konzeption .timeline.timeline-2.timeline-node-3 { left: -40px; top: calc(100% + 320px); } } @media (max-width: 575.98px) { .page-leistungen-konzeption .timeline.timeline-2.timeline-node-3 { left: 20px; top: calc(100% + 440px); } } .page-leistungen-konzeption .timeline.timeline-2.timeline-node-4 { left: 50%; top: -50px; } .page-leistungen-konzeption .timeline.timeline-2.timeline-node-5 { left: 50%; top: 1px; } @media (min-width: 768px) and (max-width: 991.98px) { .page-leistungen-konzeption .timeline.timeline-2.timeline-node-5 { left: 50%; top: -20px; } } @media (max-width: 767.98px) { .page-leistungen-konzeption .timeline.timeline-2.timeline-node-5 { left: 50%; top: -30px; } } .page-leistungen-planung .timeline.timeline-1.timeline-path-base { stroke: #EEE; stroke-width: 0; } .page-leistungen-planung .timeline.timeline-1.timeline-path-progress { stroke: var(--c-darkgray); stroke-width: 5; } .page-leistungen-planung .timeline.timeline-1.timeline-spot::before { content: ''; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; background-color: var(--c-darkgray); pointer-events: none; transition: transform .15s ease, opacity .15s ease; transform: translate(-50%,-50%) scale(.1); opacity: 0; } .page-leistungen-planung .timeline.timeline-1.timeline-node-1 { left: 50%; } .page-leistungen-planung .timeline.timeline-1.timeline.timeline-1.timeline-node-2 { left: 50%; top: 50px; } .page-leistungen-planung .timeline.timeline-1.timeline.timeline-1.timeline-node-3 { left: 30%; top: 100px; } .page-leistungen-planung .timeline.timeline-1.timeline.timeline-1.timeline-node-4 { left: 50%; top: 50%; } .page-leistungen-planung .timeline.timeline-2.timeline-path-base { stroke: #EEE; stroke-width: 0; } .page-leistungen-planung .timeline.timeline-2.timeline-path-progress { stroke: var(--c-white); stroke-width: 5; } .page-leistungen-planung .timeline.timeline-2.timeline-spot::before { content: ''; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; background-color: var(--c-white); pointer-events: none; transition: transform .15s ease, opacity .15s ease; transform: translate(-50%,-50%) scale(.1); opacity: 0; } .page-leistungen-planung .timeline.timeline-2.timeline-node-1 { left: 50%; top: 50%; } .page-leistungen-planung .timeline.timeline-2.timeline-node-2 { left: 80%; top: 70px; } @media (min-width: 992px) and (max-width: 1199.98px) { .page-leistungen-planung .timeline.timeline-2.timeline-node-2 { left: 80%; top: 90px; } } @media (min-width: 768px) and (max-width: 991.98px) { .page-leistungen-planung .timeline.timeline-2.timeline-node-2 { left: -50px; top: 100px; } } @media (min-width: 576px) and (max-width: 767.98px) { .page-leistungen-planung .timeline.timeline-2.timeline-node-2 { left: -50px; top: 100px; } } @media (max-width: 575.98px) { .page-leistungen-planung .timeline.timeline-2.timeline-node-2 { left: 10px; top: 100px; } } .page-leistungen-planung .timeline.timeline-2.timeline-node-3 { left: 20%; top: -150px; } @media (min-width: 992px) and (max-width: 1199.98px) { .page-leistungen-planung .timeline.timeline-2.timeline-node-3 { left: 20%; top: -80px; } } @media (min-width: 768px) and (max-width: 991.98px) { .page-leistungen-planung .timeline.timeline-2.timeline-node-3 { left: 50px; top: -200px; } } @media (min-width: 576px) and (max-width: 767.98px) { .page-leistungen-planung .timeline.timeline-2.timeline-node-3 { left: 50px; top: -200px; } } @media (max-width: 575.98px) { .page-leistungen-planung .timeline.timeline-2.timeline-node-3 { left: 20px; top: -200px; } } .page-leistungen-planung .timeline.timeline-2.timeline-node-4 { left: 50%; top: 90%; } @media (min-width: 576px) and (max-width: 767.98px) { .page-leistungen-planung .timeline.timeline-2.timeline-node-4 { left: 20%; top: 90%; } } @media (max-width: 575.98px) { .page-leistungen-planung .timeline.timeline-2.timeline-node-4 { left: 20%; top: 90%; } } .page-leistungen-planung .timeline.timeline-2.timeline-node-5 { left: 100%; top: -250px; } .page-leistungen-planung .timeline.timeline-2.timeline-node-6 { left: 50%; top: 50%; } @media (min-width: 1200px) and (max-width: 1629.98px) { .page-leistungen-planung .timeline.timeline-2.timeline-node-5 { left: 100%; top: -80px; } .page-leistungen-planung .timeline.timeline-2.timeline-node-6 { left: 40%; top: -100px; } } @media (min-width: 992px) and (max-width: 1199.98px) { .page-leistungen-planung .timeline.timeline-2.timeline-node-5 { left: 100%; top: -60px; } .page-leistungen-planung .timeline.timeline-2.timeline-node-6 { left: 40%; top: -40px; } } @media (min-width: 768px) and (max-width: 991.98px) { .page-leistungen-planung .timeline.timeline-2.timeline-node-5 { left: 10px; top: -300px; } .page-leistungen-planung .timeline.timeline-2.timeline-node-6 { left: 30px; top: 0; } } @media (min-width: 576px) and (max-width: 767.98px) { .page-leistungen-planung .timeline.timeline-2.timeline-node-5 { left: 10px; top: -300px; } .page-leistungen-planung .timeline.timeline-2.timeline-node-6 { left: 30px; top: 0; } } @media (max-width: 575.98px) { .page-leistungen-planung .timeline.timeline-2.timeline-node-5 { left: 10px; top: -300px; } .page-leistungen-planung .timeline.timeline-2.timeline-node-6 { left: 30px; top: 0; } } .page-leistungen-planung .timeline.timeline-2.timeline-node-7 { left: 20%; top: 50%; } .page-leistungen-planung .timeline.timeline-3.timeline-path-base { stroke: #EEE; stroke-width: 0; } .page-leistungen-planung .timeline.timeline-3.timeline-path-progress { stroke: var(--c-darkgray); stroke-width: 5; } .page-leistungen-planung .timeline.timeline-3.timeline-spot::before { content: ''; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; background-color: var(--c-white); pointer-events: none; transition: transform .15s ease, opacity .15s ease; transform: translate(-50%,-50%) scale(.1); opacity: 0; } .page-leistungen-planung .timeline.timeline-3.timeline-node-1 { left: 20%; top: 50%; } .page-leistungen-planung .timeline.timeline-3.timeline-node-2 { left: 30%; top: calc(100% + 150px); } @media (min-width: 768px) and (max-width: 991.98px) { .page-leistungen-planung .timeline.timeline-3.timeline-node-2 { left: -30px; top: calc(100% + 350px); } } @media (min-width: 576px) and (max-width: 767.98px) { .page-leistungen-planung .timeline.timeline-3.timeline-node-2 { left: -30px; top: calc(100% + 380px); } } @media (max-width: 575.98px) { .page-leistungen-planung .timeline.timeline-3.timeline-node-2 { left: 10px; top: calc(100% + 380px); } } .page-leistungen-planung .timeline.timeline-3.timeline-node-3 { left: 5%; top: calc(100% + 30px); } @media (min-width: 768px) and (max-width: 991.98px) { .page-leistungen-planung .timeline.timeline-3.timeline-node-3 { left: -40px; top: calc(100% + 270px); } } @media (min-width: 576px) and (max-width: 767.98px) { .page-leistungen-planung .timeline.timeline-3.timeline-node-3 { left: -40px; top: calc(100% + 320px); } } @media (max-width: 575.98px) { .page-leistungen-planung .timeline.timeline-3.timeline-node-3 { left: 20px; top: calc(100% + 440px); } } .page-leistungen-planung .timeline.timeline-3.timeline-node-4 { left: 50%; top: -50px; } .page-leistungen-planung .timeline.timeline-3.timeline-node-5 { left: 50%; top: 1px; } @media (min-width: 768px) and (max-width: 991.98px) { .page-leistungen-planung .timeline.timeline-3.timeline-node-5 { left: 50%; top: -20px; } } @media (max-width: 767.98px) { .page-leistungen-planung .timeline.timeline-3.timeline-node-5 { left: 50%; top: -30px; } } .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-1.timeline-path-base { stroke: #EEE; stroke-width: 0; } .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-1.timeline-path-progress { stroke: var(--c-darkgray); stroke-width: 5; } .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-1.timeline-spot::before { content: ''; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; background-color: var(--c-darkgray); pointer-events: none; transition: transform .15s ease, opacity .15s ease; transform: translate(-50%,-50%) scale(.1); opacity: 0; } .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-1.timeline-node-1 { left: 50%; } .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-1.timeline.timeline-1.timeline-node-2 { left: 50%; top: 50px; } .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-1.timeline.timeline-1.timeline-node-3 { left: 30%; top: 100px; } .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-1.timeline.timeline-1.timeline-node-4 { left: 50%; top: 50%; } .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-2.timeline-path-base { stroke: #EEE; stroke-width: 0; } .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-2.timeline-path-progress { stroke: var(--c-white); stroke-width: 5; } .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-2.timeline-spot::before { content: ''; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; background-color: var(--c-white); pointer-events: none; transition: transform .15s ease, opacity .15s ease; transform: translate(-50%,-50%) scale(.1); opacity: 0; } .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-2.timeline-node-1 { left: 50%; top: 50%; } .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-2.timeline-node-2 { left: 80%; top: 70px; } @media (min-width: 992px) and (max-width: 1199.98px) { .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-2.timeline-node-2 { left: 80%; top: 90px; } } @media (min-width: 768px) and (max-width: 991.98px) { .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-2.timeline-node-2 { left: -50px; top: 100px; } } @media (min-width: 576px) and (max-width: 767.98px) { .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-2.timeline-node-2 { left: -50px; top: 100px; } } @media (max-width: 575.98px) { .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-2.timeline-node-2 { left: 10px; top: 100px; } } .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-2.timeline-node-3 { left: 20%; top: -150px; } @media (min-width: 992px) and (max-width: 1199.98px) { .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-2.timeline-node-3 { left: 20%; top: -80px; } } @media (min-width: 768px) and (max-width: 991.98px) { .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-2.timeline-node-3 { left: 50px; top: -200px; } } @media (min-width: 576px) and (max-width: 767.98px) { .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-2.timeline-node-3 { left: 50px; top: -200px; } } @media (max-width: 575.98px) { .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-2.timeline-node-3 { left: 20px; top: -200px; } } .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-2.timeline-node-4 { left: 50%; top: 90%; } @media (min-width: 576px) and (max-width: 767.98px) { .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-2.timeline-node-4 { left: 20%; top: 90%; } } @media (max-width: 575.98px) { .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-2.timeline-node-4 { left: 20%; top: 90%; } } .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-2.timeline-node-5 { left: 100%; top: -250px; } .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-2.timeline-node-6 { left: 50%; top: 50%; } @media (min-width: 1200px) and (max-width: 1629.98px) { .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-2.timeline-node-5 { left: 100%; top: -80px; } .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-2.timeline-node-6 { left: 40%; top: -100px; } } @media (min-width: 992px) and (max-width: 1199.98px) { .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-2.timeline-node-5 { left: 100%; top: -60px; } .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-2.timeline-node-6 { left: 40%; top: -40px; } } @media (min-width: 768px) and (max-width: 991.98px) { .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-2.timeline-node-5 { left: 10px; top: -300px; } .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-2.timeline-node-6 { left: 30px; top: 0; } } @media (min-width: 576px) and (max-width: 767.98px) { .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-2.timeline-node-5 { left: 10px; top: -300px; } .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-2.timeline-node-6 { left: 30px; top: 0; } } @media (max-width: 575.98px) { .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-2.timeline-node-5 { left: 10px; top: -300px; } .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-2.timeline-node-6 { left: 30px; top: 0; } } .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-2.timeline-node-7 { left: 20%; top: 50%; } .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-3.timeline-path-base { stroke: #EEE; stroke-width: 0; } .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-3.timeline-path-progress { stroke: var(--c-darkgray); stroke-width: 5; } .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-3.timeline-spot::before { content: ''; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; background-color: var(--c-white); pointer-events: none; transition: transform .15s ease, opacity .15s ease; transform: translate(-50%,-50%) scale(.1); opacity: 0; } .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-3.timeline-node-1 { left: 20%; top: 50%; } .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-3.timeline-node-2 { left: 30%; top: calc(100% + 150px); } @media (min-width: 768px) and (max-width: 991.98px) { .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-3.timeline-node-2 { left: -30px; top: calc(100% + 350px); } } @media (min-width: 576px) and (max-width: 767.98px) { .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-3.timeline-node-2 { left: -30px; top: calc(100% + 380px); } } @media (max-width: 575.98px) { .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-3.timeline-node-2 { left: 10px; top: calc(100% + 380px); } } .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-3.timeline-node-3 { left: 5%; top: calc(100% + 30px); } @media (min-width: 768px) and (max-width: 991.98px) { .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-3.timeline-node-3 { left: -40px; top: calc(100% + 270px); } } @media (min-width: 576px) and (max-width: 767.98px) { .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-3.timeline-node-3 { left: -40px; top: calc(100% + 320px); } } @media (max-width: 575.98px) { .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-3.timeline-node-3 { left: 20px; top: calc(100% + 440px); } } .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-3.timeline-node-4 { left: 50%; top: -50px; } .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-3.timeline-node-5 { left: 50%; top: 1px; } @media (min-width: 768px) and (max-width: 991.98px) { .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-3.timeline-node-5 { left: 50%; top: -20px; } } @media (max-width: 767.98px) { .page-leistungen-schluesselfertige-ausfuehrung .timeline.timeline-3.timeline-node-5 { left: 50%; top: -30px; } } .block:not(.block24) { display: none; } .block.block24 { position: relative; } .block24 .red-corner { display: none; } .block24 .ghost-image { position: relative; z-index: inherit; display: flex; justify-content: center; } .block24 .ghost-image img { max-width: 100%; } .block24 .speaker { padding-top: 40%; padding-top: 20%; padding-top: 200px; position: relative; } @media (min-width: 992px) { .block.block24 { background-position-x: 0; } .block24 .speaker { background-position: right center; padding-top: 20%; padding-top: 10%; padding-top: 100px; padding-right: 2em; } .block24 .zitat { padding-right: 25%; position: relative; z-index: 5; } .block24 .ghost-image { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .block24 .red-corner { display: block; position: absolute; left: 0; top: 0; pointer-events: none; } .block24 .red-corner.fixed { position: fixed; top: calc(50vh + var(--h-nav-main-scroll)); transform: translateY(-50%); } } .block25 .nav { display: none; } .block25 select, .block25 select>option { color: var(--c-darkgray); } .block25 .nav a { text-decoration: none; font-size: 36px; transition: margin 0.5s; } .block25 .nav a:hover, .block25 .nav a.active { color: var(--c-red); } .block25 .nav a.active { margin-left: 20px; } .ref-catdescr p:not(.init) { display: none; } .block25 .ref-item { width: 100%; margin-bottom: 4vw; cursor: pointer; } .block25 .ref-box { background-size: cover; background-position: center; background-repeat: no-repeate; } .block25 .ref-content { height: 67%; width: 100%; margin-top: 33%; padding: 20px; background-color: var(--c-white); background-position: top right; display: flex; flex-direction: column; color: var(--c-darkgray); } .block25 .ref-content p { margin-bottom: 0; } .block25 .ref-content *:not(.c-red) { color: var(--c-darkgray); } .block25 .ref-content .ref-name { color: var(--c-red); font-weight: 700; } .block25 .stairs-container { background-position: top right; background-size: 70%; background-repeat: no-repeat; } .block25 .ref-footer { margin-top: auto; display: flex; justify-content: space-between; gap: 14px; font-weight: 700; align-items: flex-end; } @media (min-width: 768px) { .block25 .nav { display: block; } .block25 .stairs-container { min-height: 550px; } .block25 .stairs { display: block; flex-wrap: wrap; gap: 2em; padding-top: 3em; } .block25 .stairs .ref-item { width: 46%; margin: 1.5%; } .block25 .stairs .ref-item[style*="position: absolute; left: 0px;"] { margin-top: -3em; } } .block26 .info { margin-top: auto; display: inline-flex; justify-content: space-between; gap: 14px; margin-bottom: 40px; } .block26 .info .geo:before { content: ''; display: block; width: 33px; height: 36px; background-image: url('../img/icon.marker.svg.php?col1=25282A&col2=BE3A34'); background-repeat: no-repeat; flex: 0 0 1; } .block26 .info .location { flex: 1; padding-top: 10px; } .block26 .img :is(img,video):not(:last-child) { margin-bottom: 30px; } a[type=submit], input[type=submit], button[type=submit] { -webkit-appearance: none; -moz-appearance: none; appearance: none; } @keyframes matching_words_pulse { 0%,100% { background-color: rgba(255,255,0,0.3); box-shadow: 3px 0 0 0px rgba(255,255,0,0.3), -3px 0 0 0px rgba(255,255,0,0.3); } 50% { background-color: rgba(255,255,0,0.7); box-shadow: 3px 0 0 0px rgba(255,255,0,0.7), -3px 0 0 0px rgba(255,255,0,0.7); } } .highlight { animation: matching_words_pulse 3s infinite; } a[href='javascript:']:not([onclick]):not([data-toggle]) { } #devt { position: absolute; z-index: 999999; } .devnote { padding: 15px 20px; color: #000; background: repeating-linear-gradient(135deg, #DD0 0 15px, #DD3 15px 30px) !important; box-shadow: inset 0 0 0 4px rgba(0,0,0,.1); font: 600 16px 'Segoe UI', sans-serif; color: #444; margin-top: 15px; margin-bottom: 15px; } #devt .bar { padding: 0; margin: 0; list-style-type: none; position: fixed; left: 10px; bottom: 10px; height: 32px; display: flex; border-radius: 6px; overflow: hidden; box-shadow: 0 0 2px rgba(0,0,0,.1); z-index: 999999; } #devt .bar * { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !important; font-weight: bold !important; font-size: 14px !important; line-height: 21px !important; color: #666; } #devt .bar li { height: 100%; display: flex; background-color: #EEE; padding-bottom: 1px; padding-left: 4px; padding-right: 4px; } #devt .bar li.breakpointname { width: 36px; width: 62px; justify-content: center; align-items: center; padding-left: 10px; padding-right: 22px; cursor: help; } #devt .breakpointcorner { display: block; background-color: #000; width: 30px; height: 30px; transform: rotate(45deg); position: fixed; top: -15px; right: -15px; cursor: help; z-index: 999999; } @media (max-width: 575.98px) { aside#devt :is(.breakpointcorner,.bar>.breakpointname) { background: rgba(226,0,122, 1); } aside#devt .bar>.breakpointname:before { content: "XS"; color: #FFFB; } } @media (min-width: 576px) and (max-width: 767.98px) { aside#devt :is(.breakpointcorner,.bar>.breakpointname) { background: rgba(192,192,0, 1); } aside#devt .bar>.breakpointname:before { content: "SM"; color: #0007; } } @media (min-width: 768px) and (max-width: 991.98px) { aside#devt :is(.breakpointcorner,.bar>.breakpointname) { background: rgba(0,255,0, 1); } aside#devt .bar>.breakpointname:before { content: "MD"; color: #0009; } } @media (min-width: 992px) and (max-width: 1199.98px) { aside#devt :is(.breakpointcorner,.bar>.breakpointname) { background: rgba(255,102,0, 1); } aside#devt .bar>.breakpointname:before { content: "LG"; color: #FFF9; } } @media (min-width: 1200px) and (max-width: 1629.98px) { aside#devt :is(.breakpointcorner,.bar>.breakpointname) { background: rgba(0,158,224, 1); } aside#devt .bar>.breakpointname:before { content: "XL"; color: #FFFA; } } @media (min-width: 1630px) { aside#devt :is(.breakpointcorner,.bar>.breakpointname) { background: rgba(154, 51, 223, 1); } aside#devt .bar>.breakpointname:before { content: "XXL"; color: #FFFA; } } #devt .bar .gear>div { cursor: pointer; } #devt .bar .gear>div { margin-right: -5px; position: relative; display: block; overflow: hidden; width: 40px; height: 32px; margin-left: -23px; } #devt .bar .gear>div::before { display: block; width: 15px; height: 15px; content: ''; background-color: #EEE; position: absolute; top: 8px; left: 11px; } #devt .bar .gear>div::after { display: block; width: 20px; height: 100%; content: ''; background-color: rgba(0,0,0,.5); background: linear-gradient(to right, rgba(238,238,238,0) 0, rgba(238,238,238,.7) 40%, rgba(238,238,238,1) 90%); position: absolute; top: 0; right: 0; transition: opacity 500ms; } #devt .bar .gear>div:hover:after { opacity: 0; } #devt .bar .gear>div .icon:first-child svg path { fill: #0006; } #devt .bar .gear>div .icon:last-child svg path { fill: #DDD; transition: fill 500ms; } #devt .bar .gear>div:hover .icon:last-child svg path { fill: #F95657; } #devt .bar .gear>div .icon { position: absolute; top: -2px; left: 0; width: 36px; height: 36px; } #devt .bar .gear>div .icon svg { animation: devt_gear_toggler_anim 5s infinite linear; } #devt .bar .gear>div .icon:last-child { top: -3px; left: 1px; } @keyframes devt_gear_toggler_anim { 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } } #devt .bar li.stacked { display: flex; justify-content: center; row-gap: 2px; flex-direction: column; } #devt .bar .stacked * { font-size: 9px !important; line-height: 11px !important; letter-spacing: .5px; } #devt .bar .stacked .viewportwith, #devt .bar .stacked .rendertime { cursor: help; } #devt .bar #devgridtoggler, #devt .bar #devoutlinetoggler, #devt .bar #templatelink, #devt .bar #sitemaplink { cursor: pointer; } #devt .bar #templatelink svg { zoom: 1.1; } #devt .bar #sitemaplink svg { zoom: 1.2; } body.show-outlines #devt .bar #devoutlinetoggler svg path { fill: #000; } #devt .bar #visibility { cursor: help; } #devt .bar li.icon { margin-left: -4px; position: relative; padding-left: 0; padding-right: 0; } #devt .bar li:not(.icon):has(+ li.icon) { padding-right: 10px; } #devt .bar li.chk.icon:hover { background-color: #DDD; z-index: 1; } #devt .bar li.icon :is(div,a) { display: flex; justify-content: center; align-items: center; margin: 4px; aspect-ratio: 1 / 1; } #devt .bar li.icon :is(div,a) svg { width: 16px; height: 16px; } #devt .bar li.icon :is(div,a) svg path { fill: #000; fill: #999; } #devt .bar li.icon.show :is(div,a) svg path { fill: #000; } #devt div#devgridlayer { position: fixed; z-index: 999998; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; opacity: 0; transition: opacity 1s; } #devt div#devgridlayer.show { opacity: 1; } #devt div#devgridlayer .col { height: 100vh; position: relative; } #devt div#devgridlayer .col:before, #devt div#devgridlayer .col:after { position: absolute; left: 0; top: 0; bottom: 0; content: ""; display: block; width: 1px; background-color: #FFF; } #devt div#devgridlayer .col:after { left: auto; right: 0; } #devt div#devgridlayer .col:first-child:before { left: -1px; width: 2px; } #devt div#devgridlayer .col:last-child:after { left: auto; width: 2px; right: -1px; } #devt div#devgridlayer .col:before, #devt div#devgridlayer .col:after { background: linear-gradient(to bottom, transparent, rgba(255,255,255,.5) 20%, rgba(0,0,0,.5) 30%, transparent 40%); animation: devt_devgridlayer_go 3s linear infinite; } @keyframes devt_devgridlayer_go { 0% { background-position: 0; } 100% { background-position: 0 100vh; } } #devt .customizer * { color: #25282A; } #devt .customizer .icon { width: 36px; height: 36px; width: 24px; height: 24px; margin: 4px; margin: 0 4px 4px 4px; cursor: pointer; } @keyframes devt_customizer_toggler_anim { 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } } #devt .customizer .icon svg path { fill: #F95657; } #devt .customizer .close { width: 36px; height: 36px; width: 24px; height: 24px; margin: 4px; margin: 0 4px 4px 4px; cursor: pointer; } #devt .customizer .close svg path { fill: #25282A; } #devt .customizer { display: none; position: fixed; z-index: 999999; left: 10px; bottom: 50px; border: 1px #CCC solid; width: 350px; background-color: #FFF; box-shadow: 0 0 3px rgba(0,0,0,.125); } #devt .customizer * { font-weight: regular; font-size: 16px !important; letter-spacing: 0; } #devt .customizer .title { height: 48px; height: 36px; height: 42px; background-color: #FAFAFA; display: flex; justify-content: space-between; align-items: center; padding-left: 4px; padding-right: 4px; } #devt .customizer .title .label { padding-left: 5px; } #devt .customizer .title .copy { margin-left: auto; padding-right: 5px; } #devt .customizer .content { width: 100%; max-height: calc(50vh - 40px); overflow-x: hidden; overflow-y: auto; padding: 10px; } #devt .customizer table.typo { border-collapse: collapse; } #devt .customizer table.typo thead th { font-weight: 400; font-size: 12px !important; } #devt .customizer table.typo thead th:nth-child(2) { padding-left: 15px; } #devt .customizer table.typo thead th:not(:first-child) { text-align: center; } #devt .customizer table.typo tbody>tr>td { padding-top: 10px; } #devt .customizer table.typo :is(td,th) { padding: 0; margin: 0; border: none; } #devt .customizer table.typo input { width: 40px; width: 45px; } #devt .customizer table.typo input[type=number]::-webkit-inner-spin-button, #devt .customizer table.typo input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } #devt .customizer table.typo input[type=number] { -moz-appearance: textfield; cursor: n-resize; } #devt .customizer table.typo .typo>:is(input,select) { border: 0; border-top: 1px #CCC solid; border-bottom: 1px #CCC solid; text-align: center; height: 30px; } #devt .customizer table.typo :is(input,select):focus-visible { box-shadow: none; outline: none; } #devt .customizer table.typo .typo-size>* { border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-left: 1px #CCC solid !important; padding-left: 10px; margin-left: 10px; } #devt .customizer table.typo .typo-m-bottom>* { border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-right: 1px #CCC solid !important; } #devt div#horizontalscrollwarnlayer { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,.5); cursor: not-allowed; display: none; z-index: 999999; } #devt div#horizontalscrollwarnlayer:before { content: '◄ Scrollbar?! ►'; position: fixed; font-size: 24px; line-height: 24px; background-color: #C00; color: #FFF; width: 100vw; height: 50px; top: calc(50vh - 25px); display: flex; justify-content: center; align-items: center; border-top: 2px #FFF dashed; border-bottom: 2px #FFF dashed; } @media (max-width: 319.98px) { body { overflow: hidden; } #devt :is(div#devgridlayer, div#horizontalscrollwarnlayer, .breakpointcorner, menu) { display: none !important; } #devt::after { display: flex; justify-content: center; position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px; background-color: rgba(191,0,0,.85); color: #FFF; overflow-y: scroll; padding: 50px 30px; font-size: 14px; font-family: Arial; text-align: center; white-space: pre-wrap; content: "Zu kleines Display! \A Bitte benutzen Sie für die Anzeige dieser Seite ein grösseres Gerät. \A\A\A Display too small! \A Please use a larger device to view this page. \A\A\A Display troppo piccolo! \A Utilizza un dispositivo più grande per visualizzare questa pagina. \A\A\A Affichage trop petit! \A Veuillez utiliser un appareil plus grand pour afficher cette page. \A\A\A ¡Pantalla demasiado pequeña! \A Utilice un dispositivo más grande para ver esta página. \A\A\A"; z-index: 9999999; } } body.show-outlines * { border-width: 2px !important; border-style: solid !important; } body.show-outlines>*, body.show-outlines>*>*>*>*>*>*>*, body.show-outlines>*>*>*>*>*>*>*>*>*>*>*>*>*, body.show-outlines>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*, body.show-outlines>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>* { border-color: #F00 !important; } body.show-outlines>*>*, body.show-outlines>*>*>*>*>*>*>*>*, body.show-outlines>*>*>*>*>*>*>*>*>*>*>*>*>*>*, body.show-outlines>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*, body.show-outlines>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>* { border-color: #0F0 !important; } body.show-outlines>*>*>*, body.show-outlines>*>*>*>*>*>*>*>*>*, body.show-outlines>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*, body.show-outlines>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*, body.show-outlines>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>* { border-color: #00F !important; } body.show-outlines>*>*>*>*, body.show-outlines>*>*>*>*>*>*>*>*>*>*, body.show-outlines>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*, body.show-outlines>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*, body.show-outlines>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>* { border-color: #FF0 !important; } body.show-outlines>*>*>*>*>*, body.show-outlines>*>*>*>*>*>*>*>*>*>*>*, body.show-outlines>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*, body.show-outlines>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*, body.show-outlines>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>* { border-color: #F0F !important; } body.show-outlines>*>*>*>*>*>*, body.show-outlines>*>*>*>*>*>*>*>*>*>*>*>*, body.show-outlines>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*, body.show-outlines>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*, body.show-outlines>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>*>* { border-color: #0FF !important; } body.show-outlines #devt, body.show-outlines #devt * { border: 0 !important; } :is(.page-tpl,body[class*='-local']) main :is(header,section) { position: relative; } :is(.page-tpl,body[class*='-local']) main :is(header,section):not([data-blockname=''])::before { position: absolute; z-index: 9; left: 0; top: 0; padding: 8px 10px 6px; background-color: #FF0 !important; color: #000 !important; font: bold 14px Arial; content: 'Block 'attr(data-blocknum)': 'attr(data-blockname); opacity: .8; } :is(.page-tpl,body[class*='-local']) main :is(header,section).block-bgc-prev { padding-top: 30px; padding-bottom: 30px; } :is(.page-tpl,body[class*='-local']) main :is(header[data-blocknum=''],section[data-blocknum='']):not([data-blockname=''])::before { content: 'Block: 'attr(data-blockname); } :is(.page-tpl,body[class*='-local']) main :is(header,section):not([data-blockname=''])::after { position: absolute; z-index: 9; top: 0; right: 0; height: 1px; width: 25vw; opacity: .8; content: ''; background: repeating-linear-gradient(90deg, #FF0, #FF0 10px, rgba(0,0,0,0) 10px, rgba(0,0,0,0) 20px); } .page-tpl main .block em { font-style: normal; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: #F00; } .page-tpl main .block .colbox { width: 20px; height: 20px; margin-right: 10px; border: 1px #999 solid; }