/* Reset */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } html { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html,body,li,h1,h2,h3,h4,h5,h6,p,ul,ol,figure,blockquote { margin: 0; padding: 0; } b, strong { font-weight: 500; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } img { border-style: none; max-width: 100%; height: auto; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } .hide { display: none !important; } h1,h2,h3,h4,h5,h6,p,li,td { font-size: 16px; font-weight: 200; line-height: 1; } abbr[title] { text-decoration: none; } /* Variablen */ :root { interpolate-size: allow-keywords; accent-color: #fc505a; --color-red: #fc505a; --color-red-2: #fa4677; --color-black: #21333b; --color-grey: #d0d8dd; --color-grey-font: #778992; --color-grey-light: #edf0f2; --color-grey-outline: #a2b0b9; } /* Schriftbild */ body { -webkit-font-smoothing: antialiased; font-family: 'kobenhavn-sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: 200; color: var(--color-black); } body.is-embed:not(.is-iframe-popup), body.is-embed:not(.is-iframe-popup) #smooth-wrapper { background-color: white; } a { color: var(--color-red); } ul { padding-left: 1em; } li::marker { content: none; } ::-moz-selection { color: white; background: var(--color-red); } ::selection { color: white; background: var(--color-red); } .invert ::-moz-selection { color: var(--color-red); background: white; } .invert ::selection { color: var(--color-red); background: white; } span.no-wrap { word-break: keep-all; } body.waiting .btn { opacity: .5; pointer-events: none; } /* Schriftgrößen */ p, .p, li, dt { line-height: 1.5; text-wrap: pretty; font-size: 18px; } p a:not(.btn) { text-underline-offset: .2em; } .headlineanimation { font-size: 40px; } .h1 { font-size: 38px; font-weight: 500; text-wrap: balance; color: var(--color-red); line-height: 1; } .h1.mega { font-size: 50px; } .h2 { font-size: 34px; font-weight: 500; text-wrap: balance; color: var(--color-red); line-height: 1; } .h3 { font-size: 32px; font-weight: 500; text-wrap: balance; color: var(--color-red); line-height: 1.1; } /*.h1,.h2,.h3 { background: linear-gradient(to right, var(--color-red), var(--color-red-2), var(--color-red)); background-clip: text; -webkit-text-fill-color: transparent; }*/ .h4 { font-size: 30px; font-weight: 500; text-wrap: balance; color: var(--color-red); line-height: 1.3; } .h5 { font-size: 28px; font-weight: 500; text-wrap: balance; color: var(--color-red); line-height: 1.3; } .h6 { font-size: 24px; font-weight: 200; text-wrap: pretty; line-height: 1.3; } .h1 + .h2, .h1 + .h3, .h1 + .h4, .h1 + .h5, .h1 + .h6, .h1 + .line + .h2, .h1 + .line + .h3, .h1 + .line + .h4, .h1 + .line + .h5, .h1 + .line + .h6, .h2 + .line + .h3, .h2 + .line + .h4, .h2 + .line + .h5, .h2 + .line + .h6 { font-weight: 200; } .no-bg .hl:has(+ .line + .hl), .no-bg .hl:has(+ .hl) { color: var(--color-red); } .no-bg .h6.hl:has(+ .line), .no-bg .hl.h6:has(+ .h6) { color: var(--color-black); } .hl a { text-decoration: none; } .text p.hl.h6 strong a:not(.btn) { text-decoration: underline; text-decoration-thickness: 2px; } .text p:not(.hl) strong a:not(.btn) { text-decoration: underline; text-decoration-thickness: 2px; } .hl a:not(.btn):hover { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 3px; } @media (max-width: 42.5em) { /*.hl { overflow-wrap: break-word; } */ /*.hl br { display: none; }*/ /* Breaks in Überschriften entfernen */ } @media (min-width: 60em) { p, .p, li, label, dt { font-size: 20px; } .headlineanimation, .h1 { font-size: 60px; } .h1.mega { font-size: 70px; } .h2 { font-size: 52px; } .h3 { font-size: 40px; } .h4 { font-size: 30px; } .h5 { font-size: 26px; } .h6 { font-size: 24px; } } @media (min-width: 85em) { p, .p, li, dt { font-size: 22px; } .headlineanimation, .h1 { font-size: 66px; } .h1.mega { font-size: 100px; } .h2 { font-size: 62px; } .h3 { font-size: 50px; } .h4 { font-size: 40px; } .h5 { font-size: 34px; } .h6 { font-size: 26px; } } @media (min-width: 120em) { p, .p, li, dt { font-size: 24px; } .headlineanimation, .h1 { font-size: 80px; } .h1.mega { font-size: 110px; } .h2 { font-size: 72px; } .h3 { font-size: 50px; } .h4 { font-size: 44px; } .h5 { font-size: 38px; } .h6 { font-size: 28px; } } /* Kaufmannsund */ span.und { font-family: Arial, Helvetica, sans-serif !important; font-size: .8em; font-weight: 400 !important; } .hl.h3 .und { font-weight: 700 !important; } .hl.h6 .und { font-weight: 500 !important; } .btn .und, .hl.h6 .btn .und, strong .und, .mega .und, .hl.h5 .und, .hl.h4 .und, .hl.h2 .und, .hl.h1 .und { font-weight: 600 !important; } .line + .hl.h3 .und { font-weight: 400 !important; } /* strong span.und, strong abbr span.und, #mn li a span.und, .tabs-labels .active span.und, .btn span.und, .hl.h6 strong span.und .hl.h1 span.und { font-weight: 600 !important; } */ abbr span.und { margin-left: 2px; } /* Headlineanimation */ @media only screen and (max-width: 42.5em) { .text:has(.headlineanimation) { min-height: 150px; position: relative; } .headlineanimation { position: absolute; line-height: 1.1; width: 100%; } } /* eigenständige Line */ .line { display: inline-block; width: 80px; height: 6px; background-color: var(--color-red); transition: width .3s .5s; } .in-view-center .line { width: 130px; } .invert .line { background-color: white; } * + .line { margin-top: 30px; } .mega + .line { margin-top: 60px; } .line:has(+ *) { margin-bottom: 30px; } .line:has(+ .hl) { margin-bottom: 30px; } * + .line:has(+ *) { margin: 40px 0; } @media only screen and (min-width: 60em) { .line { width: 120px; } .in-view-center .line { width: 200px; } } /* Schrift Abstände */ p + .hl, ul + p, .hl + p:not(.hl), p + p { margin-top: 1.1em; } .h1 + p:not(.hl), .h2 + p:not(.hl), .h3 + p:not(.hl) { margin-top: 2em; } * + .text { margin-top: 2em; } .hl + .hl { margin-top: .5em; } .hl + .h6 { margin-top: .75em; } .media + .form, .text + .form, .text + .media { margin-top: 2em; } .form + .text, .media + .media-swiper, .text + .media-swiper { margin-top: 4em; } /* Sektionen & Hintergrundfarben */ .s { padding: 80px 0; } .s.half-s-padding { padding: 40px 0; } .s:first-child { padding-top: 0; } .is-iframe-popup .s:first-child { padding-top: 80px; } .s.bg { padding-top: 80px; } .r + .r { margin-top: 60px; } .s.no-bg:has(+.s-grid) { padding-bottom: 80px; } @media only screen and (min-width: 65em) { .s { padding: 15vh 0; transition: filter .5s; } .s:first-child { padding-top: 6vh; } .s.bg { padding-top: 12vh; } .s.bg.half-s-padding { padding-top: 6vh; } .s.hero.s-padding-top { padding-top: 60px; } .s.hero.s-padding-bottom { padding-bottom: 60px; } .r + .r { margin-top: 80px; } .r-1column + .r-3columns { margin-top: 100px; } } @media only screen and (min-width: 120em) { .s { padding: 18vh 0; } .s.half-s-padding { padding: 12vh 0; } .s.hero.s-padding-top { padding-top: 90px; } .s.hero.s-padding-bottom { padding-bottom: 90px; } } #main { transition: filter .5s; overflow: hidden; } .modal-open #main, .modal-open #footer, .is-over-mn #main, .is-over-mn #footer { filter: blur(10px); } .s.no-bg + .s.no-bg { padding-top: 0; } .bg-shape { position: absolute; z-index: -5; top: 0; left: 0; width: 100%; height: 100%; } .bg.red > .bg-shape { background-color: var(--color-red); background: linear-gradient(to right, var(--color-red), var(--color-red-2), var(--color-red)); } .bg.dark > .bg-shape { background-color: var(--color-black); } .bg.white > .bg-shape { background-color: white; } .is-embed .s:last-child:not(.bg) { padding-bottom: 0; } /* Sektion Hintergrund ein Bild / Video / Fullscreen */ .s.bg { position: relative; } .s.bg.video, .s.bg.image { min-height: 75vh; } .s.bg.s-combine-up { min-height: 75vh; } /* Bug: Das führt auf Portrait Modus zu Fehlern, siehe iPad */ .s.bg > .bg-shape .media, .s.bg.image > .bg-image { width: 100%; height: 100%; position: absolute; z-index: -5; top: 0; left: 0; object-fit: cover; overflow: hidden; } .s.bg.image > .bg-image .media { width: 100%; height: 100%; } .s.bg.image > .bg-image .media img { width: 100%; height: 100%; object-position: top center; } .s.bg.image.from-bottom > .bg-image .media img { object-position: bottom center; } .s.fullscreen { position: relative; height: 100%; height: 100vh; height: 100svh; padding: 0; } .s.fullscreen #arrow-down { position: absolute; bottom: 30px; left: 50%; margin-left: -15px; width: 30px; height: auto; animation: bounce 2s infinite; } @media only screen and (max-width: 42.5em) { .s.bg.image { min-height: 30vh; } } @media only screen and (min-width: 60em) { .s.fullscreen { height: 100vh; } .s.fullscreen #arrow-down { width: 45px; } } /* Sektion oder Row nur für Admin Visible */ .r.visible-to-admin, .s.visible-to-admin, .s.visible-to-admin.bg { background-color: greenyellow; } /* Sektionen verbinden */ @media only screen and (min-width: 60em) and (orientation: landscape) and (hover: hover) and (pointer: fine) { .s.bg.video.s-combine-up .bg-shape, .s.bg.image.s-combine-up .bg-image { transform: translateY(200px); transition: transform 1s; } .s.bg.video.in-view-first-time.s-combine-up .bg-shape, .s.bg.image.in-view-first-time.s-combine-up .bg-image { transform: translateY(0px); } .s.bg.image.s-combine-up > .bg-image .media img { object-position: bottom center; } .s.no-bg.s-combine-up { position: relative; padding-top: 10vh; } .s-combine-up .r-1column:before { content:""; display: block; width: 90vw; max-width: 90em; top: 0; left: 50%; transform: translateX(-50%); height: 50vh; background-color: white; position: absolute; z-index: -1; border-radius: 20px 20px 0 0; } .s-combine-up .r-2columns:before { content:""; display: block; width: 90vw; max-width: 110em; top: 0; left: 50%; transform: translateX(-50%); height: 50vh; background-color: white; position: absolute; z-index: -1; border-radius: 20px 20px 0 0; } .s.bg:has( + .s.no-bg.s-combine-up ) { padding-bottom: 30vh; } .s.bg + .s.no-bg.s-combine-up { margin-top: -22vh; transition: transform 1s; transform: translateY(200px); } .s.bg + .s.no-bg.s-combine-up.in-view { transform: translateY(0px); } .s.no-bg:has(+ .s.bg.s-combine-up) { padding-bottom: 0; position: relative; } .s.no-bg:has(+ .s.bg.s-combine-up) .r-1column:last-child:after { content:""; display: block; width: 90vw; max-width: 90em; bottom: -10vh; left: 50%; transform: translateX(-50%); height: 50vh; background-color: white; position: absolute; z-index: -1; border-radius: 0 0 20px 20px; } .s.no-bg:has(+ .s.bg.s-combine-up) .r-2columns:last-child:after { content:""; display: block; width: 90vw; max-width: 110em; bottom: -10vh; left: 50%; transform: translateX(-50%); height: 50vh; background-color: white; position: absolute; z-index: -1; border-radius: 0 0 20px 20px; } } @media only screen and (min-width: 120em) and (orientation: landscape) and (hover: hover) and (pointer: fine) { .s.no-bg.s-combine-up { padding-top: 12vh; } } /* Schrift invertieren */ .invert, .invert .h1, .invert .h2, .invert .h3, .invert .h4, .invert .h5, .invert .h6, .invert a { color: white; } /* Header & Navigation */ #header { position: fixed; z-index: 10000; width: 100%; top: 0; left: 0; background-color: white; } .header-inverted #header { background-color: transparent; } .has-super-hero.no-t-2000 #header { opacity: 0; } #header .b { transition: padding .3s; } #logo { transition: max-width .3s; height: auto; } .header-inverted #logo path { fill: white; } #col-logo { line-height: 0; } #searchicon { fill: var(--color-black); } #searchicon:hover { fill: var(--color-red); } .header-inverted #searchicon { fill: white; } .is-embed #main { padding-top: 30px; padding-bottom: 60px; } .is-embed.is-iframe-popup #main { padding-top: 0; padding-bottom: 0; } @media (max-width: 60em) { #header > .r { height: 70px; } #col-sn, #col-mn { display: none; } #main { padding-top: 80px; } .has-super-hero #main { padding-top: 0; } #logo { width: 50vw; min-width: 120px; max-width: 140px; } #header button.navicon svg { width: 40px; height: 40px; fill: var(--color-black); cursor: pointer; } .header-inverted #header button.navicon svg { fill: white; } .mn-open #header svg.navicon--close, #header svg.navicon--open { display: block; } .mn-open #header svg.navicon--open, #header svg.navicon--close { display: none; } body.mn-open #header { z-index: 50000; } body.mn-open #col-mn { overflow-y: auto; display: block; pointer-events: auto; position: fixed; z-index: 50000; top: 70px; left: 0; width: 100%; height: calc( 100% - 150px ); background-color: white; padding-bottom: 1em; } body.mn-open #col-sn { display: flex; position: fixed; left: 0; bottom: 0; width: 100%; height: 80px; background-color: var(--color-grey-light); background-color: white; } } @media (min-width: 60em) { #header .b { max-width: 100%; padding: 30px 0; } #main { padding-top: 128px; } .has-super-hero #main { padding-top: 0; } #logo { max-width: 160px; } } @media only screen and (min-width: 960px) { #header.new > .r { flex-wrap: nowrap; justify-content: space-between; } .new #col-logo { width: fit-content; flex: 0; } .new #col-mn { width: fit-content; flex: 0; } .new #col-mn a.no-click { white-space: nowrap; } .new #col-sn { width: fit-content; flex: 0; } } @media only screen and (min-width: 960px) and (max-width: 1300px) { .new #logo { max-width: 140px; } .new #col-sn { padding-left: 0; } .new #col-logo { padding-right: 0; } .new #col-mn { padding: 0; } .new .search-li { position: absolute; top: 0px; right: 90px; } .new .search-li svg { width: 16px; height: 16px; } .new #searchiconlink { padding-top: 5px; } .new .lang-li { position: absolute; top: 0px; right: 10px; font-size: 14px; } .new #col-sn .lang-li a { padding-top: 5px; padding-bottom: 5px; } } @media only screen and (min-width: 960px) and (max-width: 1024px) { .new #col-sn li, .new #col-mn li { font-size: 18px; } } /* Hauptnavigation */ ul.menu { list-style: none; padding: 0; margin: 0; } ul.menu li { list-style: none; } ul.menu a { text-decoration: none; color: var(--color-black); line-height: 1; } .header-inverted #sn.menu a { color: white; } @media (max-width: 60em) { body.mn-open { overflow: hidden; } #col-mn nav { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; overflow: hidden; overflow-y: auto; } #mn .sub-menu p, #mn .sub-menu { display: none; padding-top: .4em; padding-bottom: 1em; } #mn .mobile-open > .sub-menu { display: block; } #mn .mobile-open > a:after { content:""; display: block; width: 35vw; height: 4px; background-color: var(--color-grey); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } #mn li a { font-size: 26px; font-weight: 400; display: block; padding: .6em 0; text-align: center; position: relative; } #mn li .sub-menu { margin-top: 3px; } #mn li li a { font-size: 22px; font-weight: 300; padding: .5em 0; } #mn li .pfeil { display: none; } #mn li a:hover { opacity: .5; } #mn li.mobile-open > a, #mn li a:active { opacity: 1; transform: translate(2px, 2px); } #sn { display: flex; align-items: center; justify-content: space-between; width: 100%; } #sn > li { flex-basis: 50%; flex-grow: 0; } #sn li.search-li { display: flex; justify-content: start; } #sn li.lang-li { display: flex; justify-content: end; } #sn .langswitch li { padding: 0 .5em; } } @media (min-width: 60em) { #mn { display: flex; justify-content: center; } #mn li + li { border-left: 0px solid transparent; } #mn li a { padding: 20px 15px; display: block; border-bottom: 6px solid transparent; cursor: pointer; font-weight: 400; } .header-inverted #mn > li > a { color: white; } #mn li:hover > a { border-bottom-color: var(--color-grey-light); } #mn li.current-menu-parent > a, #mn li.current-menu-item > a { font-weight: 400; border-bottom-color: var(--color-black); } .header-inverted #mn li.current-menu-item > a { border-bottom-color: white; } #mn .sub-menu { opacity: 0; pointer-events: none; list-style: none; padding: 0; margin: 0; position: absolute; border-top: 20px solid white; padding: 60px 0; left: 0; width: 100%; display: flex; gap: 20px; padding-left: 20px; padding-right: 20px; justify-content: center; background-color: var(--color-grey-light); } #mn li.zwei-reihen > .sub-menu { display: grid; gap: 0; column-gap: 20px; row-gap: 20px; grid-template-columns: minmax(0,22vw) minmax(0,22vw) minmax(0,22vw); justify-items: center; } #mn .sub-menu li { opacity: 0; transition: opacity .2s .2s; } /* Submenü faden ein */ #mn li.zwei-reihen > .sub-menu li { width: 100%; max-width: none; } /* #mn li:hover > .sub-menu { opacity: 1; pointer-events: auto; } */ #mn li.active > .sub-menu { opacity: 1; pointer-events: auto; } #mn li.active > .sub-menu li, #mn li:hover > .sub-menu li { opacity: 1; } #mn .sub-menu li { background-color: white; padding: 30px; border-radius: 10px; width: 330px; max-width: 22vw; border: none; } #mn .sub-menu li a { font-size: 20px; font-weight: 400; padding: 0; border: none; display: flex; gap: 10px; align-items: center; } #mn .sub-menu li p { font-size: 20px; margin-top: 10px; } #mn .sub-menu li .pfeil { stroke: var(--color-black); stroke-width: 3; transition: transform .3s; } #mn .sub-menu li:hover { background-color: var(--color-black); color: white; cursor: pointer; } #mn .sub-menu li:hover a { color: white; } #mn .sub-menu li .pfeil { stroke: var(--color-black); stroke-width: 2.5; transform: translate(0px, 2px); } #mn .sub-menu li:hover .pfeil { stroke: white; transform: translate(7px, 2px); } #sn { display: flex; justify-content: right; align-items: center; gap: 5px; border-bottom: 6px solid transparent; width: 100%; } #searchiconlink, #sn li a { padding: 10px; display: block; cursor: pointer; } #sn li:hover > a { color: var(--color-red); } } @media (min-width: 85em) { #mn li a { padding: 20px 17px; } #mn li + li { border-left-width: 25px; } #mn .sub-menu li { width: 400px; } #mn .sub-menu li a { font-size: 22px; padding: 0; border: none; } #mn .sub-menu li p { font-size: 22px; } #sn li a { padding: 10px; } } /* Button "Kontakt" in Hauptnavi */ #sn .kontakt-li { line-height: 1; } #sn .kontakt-li a { transition: background .3s; font-weight: 400; background-color: var(--color-black); color: white; line-height: 1; padding: .7rem 1.4rem; display: flex; gap: 10px; align-items: center; border-radius: 10px; border-radius: 2000px; } #sn .kontakt-li a span { transform: translateY(-2px);} #sn .kontakt-li .pfeil { stroke: white; stroke-width: 2.5; } .header-inverted #sn .kontakt-li .pfeil { stroke: var(--color-black); } .header-inverted #sn .kontakt-li a { background-color: white; color: var(--color-black); } #sn .kontakt-li a:hover { background-color: var(--color-red); color: white; } /* LangSwitch */ ul.langswitch { display: flex; gap: 0; align-items: center; } ul.langswitch li + li { border-left: 1px solid var(--color-black); } .header-inverted ul.langswitch li + li { border-left-color: white; } /* Siegel (preview Seite) */ .media .siegel { position: absolute; z-index: 500; right: 0; top: 50%; transform: translate(40%,-50%); opacity: 0; transition: opacity 1s .5s; } .media img.siegel { width: 100px; height: 100px; filter: drop-shadow(4px 4px 20px rgba(33, 51, 59, .4)); } .in-view-center .media .siegel { opacity: 1; } @media only screen and (min-width: 42.5em) { .media .siegel { transform: translate(50%,-50%); } .media img.siegel { width: 160px; height: 160px; } } /* Award (echter Seite) */ .media .awards { position: absolute; display: flex; justify-content: center; gap: 20px; z-index: 500; left: 0; bottom: -50px; width: 100%; opacity: 0; transition: opacity 1s .5s; } .media img.award { width: 120px; height: auto; filter: drop-shadow(4px 4px 20px rgba(33, 51, 59, .4)); } .in-view-center .media .awards { opacity: 1; } @media only screen and (min-width: 42.5em) { .media .awards { flex-direction: column; width: 180px; left: auto; right: -40px; bottom: auto; top: 0; height: 100%; } .media.bleed-md-right .awards { right: 60px; } } @media only screen and (min-width: 150em) { .media .awards { flex-direction: column; width: 200px; left: auto; right: -100px; bottom: auto; top: 0; height: 100%; } .media.bleed-md-right .awards { right: 60px; } } /* Chatbase */ .chatbas-container { text-align: center; border-radius: 20px; overflow: hidden; display: flex; justify-content: center; width: 380px; max-width: 100%; margin-left: auto; margin-right: auto; } iframe.chatbase { width: 380px; max-width: 100%; height: auto; aspect-ratio: 9 / 16; } @media only screen and (orientation: portrait) { } /* Listen */ dd * + ul, .text * + ul { margin-top: 1em; } dd ul, .text ul { padding: 0; list-style: none; } dd li, .text li { list-style: none; padding: .3em 0 .3em 1em; } dd li:before, .text li:before { content:""; position: absolute; width: 7px; height: 7px; border-radius: 100%; background-color: var(--color-red); transform: translate(-.7em, 14px); } .invert .text li:before { background-color: white; } /* Pictures & Videos */ .fit { width: 100%; height: 100%; object-fit: cover; } .media { line-height: 0; position: relative; } .media.embed video { width: 100%; height: 100%; } .media.embed.shadow video { filter: drop-shadow(0 0 20px rgba(33, 51, 59, .3)); } .media.outline img { border: 1px solid var(--color-grey-outline); } .media img { width: 100%; } .media.maxwidth-100 { max-width: 100%; } .media.maxwidth-75 { max-width: 75%; } .media.maxwidth-50 { max-width: 50%; } .media.maxwidth-25 { max-width: 25%; } .media.maxwidth-org img { width: auto; } .media.pic-center img, .media.pic-center { margin-left: auto; margin-right: auto; text-align: center; } .round-corners video, .round-corners picture img { border-radius: 14px; } .shadow picture img { filter: drop-shadow(0 0 20px rgba(33, 51, 59, .3)); } .aspectratio-11 img { aspect-ratio: 1 / 1; } .aspectratio-169 img { aspect-ratio: 16 / 9; } .aspectratio-43 img { aspect-ratio: 4 / 3; } .aspectratio-32 img { aspect-ratio: 3 / 2; } .aspectratio-139 img { aspect-ratio: 13 / 9; } @media only screen and (max-width: 42.5em) { .r-2columns .image.square.pic-center.maxwidth-50.image-type-png { max-width: 75%; } .r-2columns .image.square.pic-center.image-type-png img, .zitat-neu .image.square img { max-width: 230px; } } @media only screen and (min-width: 42.5em) { .zitat-neu .image.square img, .col-xl-3 .image.square img, .col-md-3 .image.square img { max-width: 230px; } } /* Iconset */ .iconset + .hl { margin-top: 1em; } .iconset { display: inline-flex; align-content: center; justify-content: center; aspect-ratio: 1 / 1; } .iconset:has(+ .line) { display: flex; } .iconset.circle { border: 4px solid var(--color-red); border-radius: 100%; } .iconset.circle.small { border-width: 3px } .iconset.circle.invert { border-color: white; } .iconset.circle.small { width: 100px; } .iconset.circle.medium { width: 140px; } .iconset.circle.big { width: 180px; } .iconset.big img, .iconset:has(+.hl) img { width: 70px; } .iconfigure svg { width: 50px; } .iconfigure.with-circle .kreis { display: inline-flex; width: 90px; height: 90px; overflow: hidden; aspect-ratio: 1 / 1; align-items: center; justify-content: center; border: var(--color-red) 2px solid; border-radius: 100%; } .iconfigure.with-circle .kreis { border-width: 4px; width: 110px; height: 110px; } .iconfigure.is-invert .kreis { border-color: white; } /* SVG Icon Shortcode INLINE */ .iconfigure.is-inline svg { overflow: visible; } .iconfigure.is-inline .cls-1 { fill: var(--color-red) !important; } .iconfigure.is-inline.is-invert .cls-1 { fill: white !important; } .iconfigure.is-inline { stroke: var(--color-red); stroke-width: 1.5; } .iconfigure.is-inline.is-invert { stroke: white; } /* Play Btn */ .media .play-btn { display: flex; cursor: pointer; align-items: center; justify-content: center; position: absolute; z-index: 5000; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 50px; height: 50px; background-color: var(--color-red); background: linear-gradient(to right, var(--color-red), var(--color-red-2), var(--color-red)); border-radius: 100%; transition: width .3s, height .3s; padding: 0; } .media .play-btn:hover { width: 60px; height: 60px; background-color: var(--color-red-2); } .media .play-btn svg { width: 18px; height: 24px; transform: translateX(3px); } @media only screen and (min-width: 42.5em) { .media .play-btn { width: 80px; height: 80px; } .media .play-btn:hover { width: 100px; height: 100px; } .media .play-btn svg { width: 30px; height: 40px; } } /* Button */ * + p:has(.btn.primary) { margin-top: 1.4em; } .h1 + p:has(.btn.primary) { margin-top: 1.6em; } .play-btn + a { margin-left: 0; } @media only screen and (orientation: landscape) { a.btn + a.btn { margin-left: 1em; } } .btn { text-decoration: none; } p:has(.btn.primary) + p:has(.btn.primary) { margin-top: 0; } .btn.primary { display: inline-flex; align-items: center; position: relative; cursor: pointer; line-height: 1; text-decoration: none; border-radius: 2000px; } .btn.primary .pfeil { position: absolute; left: 1em; stroke: var(--color-red); aspect-ratio: 4 / 3; width: 1em; height: auto; stroke-width: 3; } .btn.primary .circle { position: absolute; top: 50%; transform: translateY(-50%); transition: all .3s; display: block; width: 1.5em; height: 1.5em; border: 3px solid var(--color-red); border-radius: 2000px; } .btn.primary .inner { display: inline-block; padding: .6em 1.4em .6em 2.4em; transform: translateY(-.1em); font-weight: 500; } .invert .btn.primary .circle { border-color: white; } .invert .btn.primary .pfeil { stroke: white; } .btn.primary.outline { border: 3px solid var(--color-red); transition: background .3s ; } .btn.primary.outline .circle { display: none; } .invert .btn.primary.outline { border-color: white; } .btn.primary.outline:hover { background-color: var(--color-red); } .btn.primary.outline:hover span { color: white; } .btn.primary.outline:hover .pfeil { stroke: white; } .invert .btn.primary.outline:hover { background-color: white; } .invert .btn.primary.outline:hover span { color: var(--color-red); } .invert .btn.primary.outline:hover .pfeil { stroke: var(--color-red); } .s.bg.dark.invert .btn.primary.outline:hover span { color: var(--color-black); } .s.bg.dark.invert .btn.primary.outline:hover .pfeil { stroke: var(--color-black); } .bg.dark.invert .btn.primary.shape span { color: var(--color-black); } .bg.dark.invert .btn.primary.shape .pfeil { stroke: var(--color-black); } .btn.primary.shape:hover { background-color: var(--color-black) !important; } .btn.primary.shape:hover span { color: white !important; } .btn.primary.shape:hover .pfeil { stroke: white !important; } .bg.dark.invert .btn.primary.shape:hover { background-color: var(--color-red) !important; } @media only screen and (orientation: landscape) { .btn.primary.active .pfeil, .btn.primary:hover .pfeil { animation: pfeilbubbel .4s; } .btn.primary.shape .circle, .btn.primary.active .circle, .btn.primary:hover .circle { width: 100%; height: 100%; } .btn.primary.shape, .btn.primary.active, .btn.primary:active { background-color: var(--color-red); } .btn.primary.shape .inner, .btn.primary.active .inner, .btn.primary:active .inner { color: white; } .btn.primary.shape .pfeil, .btn.primary.active .pfeil, .btn.primary:active .pfeil { stroke: white; } .invert .btn.primary.shape, .invert .btn.primary:active { background-color: white; } .invert .btn.primary.shape .inner, .invert .btn.primary:active .inner { color: var(--color-red); } .invert .btn.primary.shape .pfeil, .invert .btn.primary:active .pfeil { stroke: var(--color-red); } } @media only screen and (max-width: 450px) { .text-center-mobile .btn.primary.charcount-long .inner { text-align: left; padding-left: 2.3em; } .btn.primary.outline { padding-right: 1rem; } } .btn.primary.dark .inner { color: var(--color-grey-font); } .btn.primary.dark .circle { border-color: var(--color-grey-font); } .btn.primary.dark .pfeil { stroke: var(--color-grey-font); } .btn.primary.shape { background-color: var(--color-red); color: white; padding-left: 1.5em; } .btn.primary.shape .inner { padding: .7em 1em; } .btn.primary.shape .pfeil { stroke: white; } .invert .btn.primary.shape { background-color: white; color: var(--color-red); } .invert .btn.primary.shape .pfeil { stroke: var(--color-red); } @media only screen and (orientation: landscape) { .btn.primary.shape .inner { padding-left: 1em; } } .h2 .btn.primary .pfeil, .h1 .btn.primary .pfeil { stroke-width: 4px; } .h2 .btn.primary .circle, .h1 .btn.primary .circle { border-width: 4px; } .hl .btn.primary.shape .inner { padding-left: 1em; } .hl .btn.primary .circle { border-width: 4px; } .hl .btn.primary .pfeil { stroke-width: 4px; } .btn.secondary { display: inline-flex; align-items: center; line-height: 1; color: var(--color-red); cursor: pointer; border-radius: 2000px; transition: padding .3s, border-color .3s; } .btn.secondary .pfeil { stroke: var(--color-red); stroke-width: 3; } .btn.secondary .inner { display: inline-block; padding: .6em 1em .6em .4em; vertical-align: center; transform: translateY(-.1em); font-weight: 500; transition: backgroundColor .3s; } .btn.secondary.prominent, .btn.secondary:hover { padding-left: 1em; background-color: var(--color-red); } .btn.secondary.prominent .inner, .btn.secondary:hover .inner { color: white; text-decoration: none; } .btn.secondary.grey:hover .pfeil, .btn.secondary.prominent .pfeil, .btn.secondary:hover .pfeil { stroke: white; } .btn.secondary.grey .pfeil { stroke: var(--color-grey-font); } .btn.secondary.outline { border: 3px solid var(--color-red); padding-left: 1em } .btn.secondary.icon .icon { max-width: 30px; } .btn.secondary.icon .icon svg { width: 100%; height: auto; } .btn.secondary.icon .icon svg path { fill: var(--color-red); } .btn.secondary.icon:hover .icon svg path { fill: white; } .invert .btn.secondary.icon .icon svg path { fill: white; } .invert .btn.secondary.icon:hover .icon svg path { fill: var(--color-red); } .hl .btn.secondary .pfeil { width: 30px; height: auto; stroke-width: 4px; } @media only screen and (min-width: 680px) and (max-width: 1500px) { .col-xl-3 .text .btn.secondary .inner { padding-left: .4em; padding-right: 0em; } .col-xl-3 .text .btn.secondary:hover { padding-left: .5em; padding-right: .5em; } .col-xl-3 .text .btn.secondary:hover .inner { padding-left: .5em; padding-right: .5em; } .col-xl-3 .text .btn.secondary:hover .pfeil, .col-xl-3 .text .btn.secondary:hover .icon { position: absolute; opacity: 0; } } .btn.secondary.dark .inner { color: var(--color-grey-font); } .btn.secondary.dark .pfeil { stroke: var(--color-grey-font); } .btn.secondary.dark:hover { background-color: var(--color-grey-font); } .btn.secondary.dark:hover .inner { color: white; } .btn.secondary.dark:hover .pfeil { stroke: white; } .invert .btn.secondary { color: white; } .invert .btn.secondary .pfeil { stroke: white; } .invert .btn.secondary:hover { background-color: white; } .invert .btn.secondary:hover .inner { color: var(--color-red); } .invert .btn.secondary:hover .pfeil { stroke: var(--color-red); } a[href^="tel:"]:not(.btn), a[href^="mailto:"]:not(.btn) { text-decoration: none; } a[href^="mailto:"]:not(.btn):before { width: 60px; height: 60px; background-color: green; content: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMidYMid' width='59.88' height='59.94' viewBox='0 0 59.88 59.94'%3E%3Cpath fill='red' d='M59.282,0.120 C59.388,0.169 59.489,0.230 59.575,0.315 C59.577,0.316 59.578,0.317 59.579,0.318 C59.584,0.323 59.585,0.329 59.590,0.334 C59.670,0.417 59.730,0.513 59.776,0.614 C59.791,0.648 59.800,0.681 59.812,0.716 C59.838,0.795 59.853,0.875 59.859,0.959 C59.861,0.995 59.865,1.030 59.863,1.067 C59.859,1.162 59.841,1.255 59.809,1.348 C59.802,1.368 59.801,1.389 59.793,1.409 C59.791,1.413 59.791,1.416 59.790,1.420 L34.785,59.329 C34.638,59.669 34.315,59.900 33.946,59.928 C33.920,59.930 33.894,59.931 33.869,59.931 C33.528,59.931 33.208,59.757 33.024,59.466 L20.494,39.566 C20.466,39.543 20.431,39.533 20.405,39.507 C20.383,39.485 20.375,39.456 20.356,39.433 L0.468,27.387 C0.150,27.194 -0.035,26.841 -0.011,26.467 C0.013,26.096 0.242,25.770 0.583,25.620 L58.471,0.110 C58.476,0.108 58.482,0.108 58.487,0.106 C58.509,0.097 58.533,0.095 58.557,0.087 C58.646,0.057 58.737,0.039 58.829,0.034 C58.866,0.033 58.901,0.036 58.938,0.038 C59.021,0.044 59.100,0.059 59.179,0.085 C59.214,0.096 59.248,0.105 59.282,0.120 ZM33.704,56.797 L55.886,5.425 L22.430,38.893 L33.704,56.797 ZM21.007,37.493 L54.402,4.085 L3.143,26.672 L21.007,37.493 Z' /%3E%3C/svg%3E"); } /* Buttons mit Circle auf Smartphones ohne hover Effekt */ @media only screen and (orientation: portrait) { .btn.primary .inner { padding: .6em 0 .6em 2.3em; } .btn.primary:hover { opacity: .7; transform: translate(2px,2px); } } /* Button im Superhero auf der Startseite */ #superhero .btn { font-size: 1.5em; gap: 10px; padding: .6em 1.2em; background-color: white; color: var(--color-black); margin-top: 2rem; } #superhero .btn span.inner { padding: 0; } #superhero .btn .pfeil { stroke-width: 4; stroke: var(--color-black); } #superhero .btn:hover .pfeil { stroke: var(--color-red); } #superhero .btn:hover { padding: .6em 1.2em; } @media only screen and (orientation: portrait) { #superhero .btn { font-size: 1.2em; } } @media only screen and (max-width: 600px) { .hl .btn.primary.shape .inner { padding-left: 1em; } .h5 .btn { font-size: 24px; } } /* Fullscreen Hero */ .fullscreen-inner { height: 100%; width: 100%; } /*.fullscreen-inner:before { content:""; background-color: var(--color-red); position: absolute; z-index: -2; width: 100%; height: 100%; opacity: .4; }*/ .fullscreen-inner .b { padding-right: 0; } .fullscreen-inner .text { perspective: 1000px; opacity: 0; animation: fadeInUpHigher 1s 1s forwards; } .fullscreen-inner .supermega { font-size: 45px; font-weight: 500; word-break: keep-all; white-space: nowrap; text-wrap: nowrap; line-height: 1.2; pointer-events: none; } .fullscreen-inner .supermega span { position: relative; display: inline-block; color: var(--color-black); } .fullscreen-inner .supermega span:after { content:""; background-color: white; display: block; top: 0; left: 0; z-index: -1; position: absolute; width: 100%; width: calc( 100% + 30px); height: 100%; transform: translate(-15px,8%); border-radius: 10px; } .fullscreen-inner .supermega .blocker { display: block; } @media only screen and (min-width: 380px) and (max-width: 42.5em) { .fullscreen-inner .supermega { font-size: 50px; } } @media only screen and (min-width: 42.5em) and (max-width: 50em) { .fullscreen-inner .supermega { font-size: 80px; } } @media only screen and (max-width: 50em) { /*.fullscreen:before { content:""; background-color: var(--color-red); position: absolute; z-index: -6; width: 100%; height: 100%; }*/ .fullscreen .bg-shape { background-color: var(--color-red); } .fullscreen-inner .col { transform: translateY(20vh); } } @media only screen and (min-width: 50em) { .fullscreen-inner .col { transform: translateY(17vh); } .fullscreen-inner .supermega { font-size: 90px; line-height: 1.2; letter-spacing: -2px; } .fullscreen-inner .supermega span { position: relative; display: inline-block; } .fullscreen-inner .supermega span { margin-left: .3em; } .fullscreen-inner .supermega span:after { width: calc( 100% + 60px); transform: translate(-30px,8%); } } @media only screen and (min-width: 70em) { .fullscreen-inner .supermega { font-size: 100px; } .fullscreen .bg-shape { background-color: var(--color-red); } } @media only screen and (min-width: 90em) { .fullscreen-inner .supermega { font-size: 120px; } } @media only screen and (min-width: 120em) { .fullscreen-inner .supermega { font-size: 140px; } } /* R Hero */ .media.circleimage img { clip-path: circle(50%); } @media (max-width: 60em) { .s.hero .round-corners video, .s.hero .round-corners picture img { border-radius: 0; } .hero .col-2nd { padding-left: 0; padding-right: 0; } } @media (max-width: 60em) { .s.hero { padding-bottom: 0; } } @media (min-width: 60em) { .s.no-s-padding { padding: 0; } .s.no-s-padding-top { padding-top: 0; } .s.no-s-padding-bottom { padding-bottom: 0; } .s.hero .media-padding-top { padding-top: 60px; } .s.hero .media-padding-bottom { padding-bottom: 60px; } .r-hero .media { opacity: 0; transition: opacity 1s 1s; height: 100%; transition: clip-path 1s; } /*.r-hero .media.round { clip-path: ellipse(100% 70vh at right); }*/ .r-hero .media.round { clip-path: circle(116% at right); } .r-hero .media img { width: 100%; } .in-view .r-hero .media { opacity: 1; } /* .r-hero .text .btn { opacity: 0; } .in-view-first-time .r-hero .text .btn { animation: fadeInUp .5s 1s forwards; } */ .hero .col-media { align-self: stretch; } .single-blogpost .s-bloghero .media { max-width: 200px; } .single-blogpost .s-bloghero .media + .text { margin-top: 10px; } } @media (min-width: 60em) and (max-width: 75em) { .r-hero .media.round { clip-path: circle(112% at right); } } @media (min-width: 42.5em) and (max-width: 75em) { .hero-casestudy .hl.h1 { font-size: 40px; text-wrap: wrap; } .hero-casestudy .col-2nd { padding-left: 0; } .r-hero .col-text { padding-top: 30px; padding-bottom: 30px; } } @media (min-width: 75em) and (max-width: 120em) { .hero-casestudy .hl.h1 { font-size: 55px; text-wrap: wrap; } .hero-casestudy .col-2nd { padding-left: 0; } .r-hero .col-text { padding-top: 30px; padding-bottom: 30px; } } /* Case Study Logo */ .single-projekt-case .hero .media.is-logo { max-width: 200px; } /* R Full Image */ .r-full-image .picture img { width: 100%; } /* R Tabs */ .tabs-labels { list-style: none; padding: 0; margin: 0; } .tabs-labels li { display: block; padding: .5em 1em; line-height: 1.1; font-size: 18px; border-left: 6px solid var(--color-grey-light); cursor: pointer; transition: border-color .3s; transform-origin: left; } .tabs-labels li + li { margin-top: 4px; } .tabs-labels li:hover { border-left-color: var(--color-grey-light); } .tabs-labels li.active:hover, .tabs-labels li.active { border-left-color: var(--color-red); font-weight: 500; color: var(--color-red); } .tabs-card { display: none; } .tabs-card.active { display: block; } .tabs-card .h1, .tabs-card .h2, .tabs-card .h3, .tabs-card .h4, .tabs-card .h5 { color: var(--color-black); } @media only screen and (min-width: 60em) { .tabs-labels li { border-left-color: transparent; } .tabs-labels li:hover { border-left-color: var(--color-grey); } .tabs-labels li { font-size: 22px; } .tabs-labels li + li { margin-top: 10px; } } @media only screen and (min-width: 60em) { .tabs-labels li { font-size: 24px; } } @media only screen and (min-width: 100em) { .tabs-labels li { font-size: 28px; } } /* Tabs Labels Animation */ .tabs-labels li.animate { animation: tabsLabelsAnimation 1.5s 0s forwards; } /* R Boxengrid */ @media only screen and (max-width: 42.5em) { .r-boxengrid .col, .b.r.r-boxengrid { padding-left: 0; padding-right: 0; } .boxengrid .swiper-slide { width: 80%; margin-left: 30px; } .boxengrid .swiper-slide:last-child { margin-right: 30px; } .boxengrid-filter { display: flex; flex-wrap: wrap; row-gap: 10px; margin-bottom: 3em; padding: 0 30px; } .boxengrid-filter .filter { width: 50%; flex-basis: 50%; cursor: pointer; padding: 7px 10px; border-left: 6px solid var(--color-grey-light); } .boxengrid-filter .filter.active { border-color: var(--color-red); } .boxengrid-filter .filter.active p { font-weight: 500; } .boxengrid-pagination { display: none; } } @media only screen and (min-width: 42.5em) { .boxengrid-filter { display: flex; margin-left: auto; margin-right: auto; align-self: center; max-width: 990px; flex-wrap: wrap; justify-content: center; gap: 20px; row-gap: 0px; margin-bottom: 3em; } .boxengrid-filter .filter { padding: 1em 1.5em; border-bottom: 5px solid transparent; cursor: pointer; color: var(--color-grey-font); } .boxengrid-filter .filter:hover { border-color: var(--color-grey); } .boxengrid-filter .filter.active { border-color: var(--color-black); color: var(--color-black); } .boxengrid-filter .filter.active p { font-weight: 500; } .boxengrid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; grid-auto-rows: max-content; } .boxengrid .box.special { grid-column: 2; grid-row: 2; outline: none; } .boxengrid-pagination { margin-top: 60px; } } @media only screen and (min-width: 60em) { .boxengrid { grid-template-columns: 1fr 1fr 1fr; } } @media only screen and (min-width: 120em) { .boxengrid-filter { max-width: none; } } /* Box */ .box { border-radius: 20px; position: relative; text-decoration: none; } .no-bg .box { outline: 2px solid var(--color-grey); outline-offset: -2px; border-radius: 20px 20px; overflow: hidden; } .bg .box { background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 100px, white 100px, white); overflow: hidden; } .box .text { padding: 30px; margin-top: 0; color: var(--color-black); background-color: white; } .box.bg.dark { display: flex; align-items: center; } .box.bg.dark .text { background-color: var(--color-black); } .invert .box p, .invert .box .h1, .invert .box .h2, .invert .box .h3, .invert .box .h4, .invert .box .h5, .invert .box .h6 { color: var(--color-black); } .box .media.image { aspect-ratio: 16 / 9; } .box.with-logo .media.image { aspect-ratio: 13 / 10; } .box.with-logo .logo { position: absolute; z-index: 10; width: 100px; height: 80px; background-color: white; border-radius: 0 0 15px 15px; top: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; } .box.with-logo .logo img { max-width: 70px; max-height: 70px; width: auto; height: auto; } .invert .box .btn.secondary { color: var(--color-red); } .invert .box .btn.secondary .pfeil { stroke: var(--color-red); } .invert .box .btn.secondary:hover { background-color: var(--color-red); } .invert .box .btn.secondary:hover .inner { color: white; } .invert .box .btn.secondary:hover .pfeil { stroke: white; } .box .media { overflow: hidden; } .box img.fit { transition: transform .3s; transform-origin: center;} .box img.fit:hover { transform: scale(1.03); } @media only screen and (min-width: 680px) { .box.with-logo .logo { width: 150px; height: 120px; } .box.with-logo .logo img { max-width: 100px; max-height: 100px; } } /* R Videogrid */ .videogrid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding-left: 15px; padding-right: 15px; } .videogrid .item { line-height: 0; } @media only screen and (min-width: 60em) { .videogrid { grid-template-columns: 1fr 1fr 1fr; gap: 20px; padding: 0; } } /* Zitat (alt) */ .zitat { max-width: 650px; } .zitat-inner { border: 3px solid var(--color-black); border-radius: 20px; padding: 6em 3em 3em 3em; position: relative; background-color: white; } .zitat-inner .quote-icon { background-color: white; position: absolute; top: -3px; left: 50%; transform: translateX(-50%); padding: 0 30px 20px 30px; border: 3px solid var(--color-black); border-top: none; border-radius: 0 0 20px 20px; } .zitat-inner .quote-icon .blockbox { background-color: white; width: 30px; height: 30px; top: 0; position: absolute; } .zitat-inner .quote-icon .blockbox.left { left: -30px; } .zitat-inner .quote-icon .blockbox.right { right: -30px; } .zitat-inner .quote-icon .blockbox.left:before { content:""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-top: 3px solid var(--color-black); border-right: 3px solid var(--color-black); border-top-right-radius: 1000px; } .zitat-inner .quote-icon .blockbox.right:before { content:""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-top: 3px solid var(--color-black); border-left: 3px solid var(--color-black); border-top-left-radius: 1000px; } .zitat-inner .quote-icon img { width: 100px; } .zitat-inner .person img { max-width: 120px; margin-top: 2em; } /* Zitat (neu) */ .zitat-neu .is-pic .text { margin-top: 30px; } .zitat-neu .quote-icon { margin-bottom: 10px; } @media only screen and (min-width: 60em) { .zitat-neu .is-pic { width: 360px; } } /* Team Member */ .team { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3px; } .team-member { line-height: 0; background-color: var(--color-grey-light); aspect-ratio: 1 / 1; position: relative; } .team-member.normal .team-member-inner { opacity: 0; transform: scale(.8); pointer-events: none; position: absolute; z-index: 30000; color: white; background: linear-gradient(to right, rgba(252, 80, 90, .80), rgba(250, 70, 120, .80), rgba(252, 80, 90, .80) ); width: 100%; height: 100%; display: flex; padding-bottom: 20px; top: 0; left: 0; justify-content: center; align-items: end; transition: all .3s; } .team-member.normal .team-member-inner p { text-align: center; } .team-member.special { grid-row: 10 / span 3; grid-column: 1 / span 3; } .team-member.special .team-member-inner { display: flex; flex-direction: column; justify-content: center; align-items: center; aspect-ratio: 1 / 1; background: linear-gradient(to right, var(--color-red), var(--color-red-2) ,var(--color-red)); text-align: center; padding-left: 2em; padding-right: 2em; } @media only screen and (max-width: 60em) { .team-member.active { position: static; } .team-member.active .team-member-inner { position: fixed; opacity: 1; pointer-events: auto; transform: scale(1); flex-direction: column; aspect-ratio: auto; align-items: center; } .team-member.active .team-member-inner img { max-width: 60vw; margin-bottom: 1em; } .team-member.special { aspect-ratio: none; } .team-member.special .team-member-inner { aspect-ratio: none; padding-top: 30px; padding-bottom: 40px; } } @media only screen and (min-width: 60em) { .team { grid-template-columns: 1fr 1fr 1fr 1fr; } .team-member:hover img { filter: grayscale(1); } .team-member:hover .team-member-inner { opacity: 1; transform: scale(1); } .team-member.normal .team-member-inner p { font-size: 18px !important; text-align: center; } .team-member.special { grid-row: 8 / span 2; grid-column: 2 / span 2; } } @media only screen and (min-width: 1441px) { .team { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } .team-member.special { grid-row: 6 / span 2; grid-column: 3 / span 2; } } @media only screen and (min-width: 120em) { .team { grid-template-columns: repeat(7, 1fr); } .team-member.special { grid-row: 5 / span 3; grid-column: 3 / span 3; } } @media only screen and (min-width: 2000px) { .team { grid-template-columns: repeat(8, 1fr); } .team-member.special { grid-row: 6 / span 2; grid-column: 3 / span 4; aspect-ratio: auto; } .team-member.special .team-member-inner { aspect-ratio: auto; height: 100%; } } @media only screen and (min-width: 2400px) { .team { grid-template-columns: repeat(9, 1fr); } .team-member.special { grid-row: 6 / span 3; grid-column: 4 / span 3; aspect-ratio: 1 / 1; } .team-member.special .team-member-inner { aspect-ratio: 1 / 1; } } /* Definition / Accordeon */ dl { margin: 3em 0; padding: 0; border-top: 1px solid var(--color-grey); border-bottom: 1px solid var(--color-grey); } dl.active { background-color: rgba(237, 240, 242, .5); } dl:has(+ dl) { margin-bottom: 0; } dl + dl { border-top: none; margin-top: 0; } dt { cursor: pointer; padding: 20px 60px 20px 20px; font-weight: 500; position: relative; } dt:after { box-sizing: content-box; width: 20px; height: 20px; line-height: 0; display: flex; align-items: center; justify-content: center; border: 4px solid var(--color-red); background-color: var(--color-red); border-radius: 100%; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); content: url(../img/icons/plus-minus/plus-white.png); background-position: center center; } dl.active dt:after { content: url(../img/icons/plus-minus/minus-white.png); } dt:hover { color: var(--color-red); } dd { height: 0; opacity: 0; overflow: hidden; padding: 0 20px; margin: 0; transition: opacity .5s; } dl.active dd { padding: 0 20px 20px 20px; } dd * + .media { margin-top: 1em; } dd .media + * { margin-top: 1em; } @media only screen and (min-width: 42.5em) { dt { padding: 30px 60px 30px 30px; } dd { padding: 0 30px; } dl.active dd { padding: 0 30px 30px 30px; } dt:after { right: 20px; } } /* Counter */ .counter { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .counter-box { border-radius: 15px; text-align: center; aspect-ratio: 1 / 1; overflow: hidden; align-content: center; display: grid; gap: 10px; text-decoration: none; } .counter-box * { text-decoration: none; } .counter-box.dark { background-color: var(--color-black); color: white; } .counter-box.bright { background-color: white; color: var(--color-red); border: 4px solid var(--color-red); } .counter-box.bright .label { color: var(--color-black); } .counter-box .nr { font-weight: 500; font-size: 39px; line-height: 1; letter-spacing: -3px; opacity: 0; transition: opacity 1s .3s; } .counter-box .label { font-weight: 200; font-size: 16px; line-height: 1; opacity: 0; transition: opacity 1s .3s; padding: 0 10px; } .animate .counter-box .nr, .in-view .counter-box .label { opacity: 1; } /* .counter-box.low-number .nr-animation { font-size: 1.2em; } */ @media only screen and (min-width: 42.5em) { .counter { grid-template-columns: 1fr 1fr 1fr; gap: 30px; } .counter-box { aspect-ratio: 3 / 2; } .counter-box .nr { font-size: 45px; } .counter-box .label { font-size: 20px; } } @media only screen and (min-width: 60em) { .counter-box .nr { font-size: 50px; } .counter-box .label { font-size: 22px; } /* .counter-box.low-number .nr-animation { font-size: 1.4em; } */ } @media only screen and (min-width: 90em) { .counter-box .nr { font-size: 80px; } .counter-box .label { font-size: 24px; } } /* Swiper */ .swiper { overflow: hidden; z-index: 1; display: block; position: relative; } .swiper-wrapper { display: flex; position: relative; width: 100%; height: 100%; box-sizing: content-box; align-items: start; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; user-select: none; /*cursor: ew-resize;*/ } .swiper.swiper-autoheight .swiper-slide { height: auto; } /* Swiper Pagination */ .swiper-pagination { display: flex; width: 100%; gap: 6px; justify-content: center; padding-top: 2em; opacity: 0; transition: opacity 1s; } .swiper-pagination.swiper-pagination-lock { display: none; } .in-view-center .swiper-pagination { opacity: 1; } .swiper-pagination .swiper-pagination-bullet { width: 30px; height: 6px; background-color: var(--color-grey); cursor: pointer; } .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--color-black); } .s.bg .swiper-pagination .swiper-pagination-bullet { background-color: var(--color-grey-font); } .s.bg .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: white; } @media only screen and (min-width: 60em) { .swiper-pagination { gap: 12px; padding-top: 3em; } .swiper-pagination .swiper-pagination-bullet { width: 44px; height: 8px; } } /* Swiper Pagination Dynamic Bullets */ .swiper-pagination.swiper-pagination-bullets-dynamic { width: 100% !important; overflow: hidden; gap: 0; } .swiper-pagination.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { width: 0px; transition: all .3s; } .swiper-pagination.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { width: 20px; margin: 0 3px; } .swiper-pagination.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { width: 30px; margin: 0 3px; } .swiper-pagination.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { width: 20px; margin: 0 3px; } .swiper-pagination.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { width: 10px; margin: 0 3px; } .swiper-pagination.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { width: 20px; margin: 0 3px; } .swiper-pagination.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { width: 10px; margin: 0 3px; } @media only screen and (min-width: 60em) { .swiper-pagination.swiper-pagination-bullets-dynamic { gap: 0; padding-top: 3em; } .swiper-pagination.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { width: 0px; } .swiper-pagination.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { width: 15px; margin: 0 5px; } .swiper-pagination.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { width: 40px; margin: 0 5px; } .swiper-pagination.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { width: 15px; margin: 0 5px; } .swiper-pagination.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { width: 5px; margin: 0 5px; } .swiper-pagination.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { width: 15px; margin: 0 5px; } .swiper-pagination.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { width: 5px; margin: 0 3px; } } /* Swiper Logoslider */ .r-gallery-logo { margin: 0; } .r-gallery-logo .swiper-slide { margin-right: 20px; width: 150px; } .r-gallery-logo .swiper-wrapper { transition-timing-function: linear; pointer-events: none; } @media only screen and (min-width: 60em) { .r-gallery-logo .swiper-slide { margin-right: 30px; width: 180px; } } /* Swiper Boxen */ .swiper .box { height: 100%; } * + .r-swiper-boxen { margin-top: 100px; } .r-swiper-boxen .swiper-slide { width: 75%; margin-left: 30px; } .r-swiper-boxen .swiper-slide:last-child { margin-right: 30px; } .r-swiper-boxen .swiper-slide .box .media.image { background-color: white; } @media only screen and (min-width: 60em) { .r-swiper-boxen .swiper:not(.swiper-initialized) .swiper-wrapper { justify-content: center; } .r-swiper-boxen { width: 80vw; min-width: 980px; max-width: 110em; margin-left: auto; margin-right: auto; } .r-swiper-boxen .swiper-slide { width: 30%; margin-left: 0; margin-right: 3.333333333%; margin-right: calc( 3.333333333% + 1px ); height: auto; align-self: stretch; } } /* Swiper Zitate */ .r-zitate .swiper-slide { width: 100%; display: flex; justify-content: center; } /* Media Swiper */ .media-swiper .swiper-slide { margin-right: 30px; width: 100%; } .media-swiper .swiper-slide:last-child { margin-right: 0; } /* Swiper 4 columns (only mobile) */ .r-4columns.mobile-slider .swiper .swiper-slide { padding: 0 20px; } /* Formulare */ .form { display: grid; grid-template-columns: 1fr; gap: 10px; } button { padding: 0; margin: 0; background: none; border: none; } #footer .form { gap: 10px; } input,select,textarea { font: inherit; border: none; width: 100%; line-height: 1; padding: 1em 1.4em; border-radius: 10px; font-weight: 200; font-size: 18px; } .bg.red select { background-color: white; } textarea { height: 300px; max-height: 40vh; } .no-bg input, .no-bg select, .no-bg textarea, .bg.white input, .bg.white select, .bg.white textarea { background-color: var(--color-grey-light); } .form-item { margin: 0; padding: 0; width: 100%; } .form-item .inner { display: block; } .form-item .inner + .inner { margin-top: 1em; } .form-item label { display: block; padding: 0 0 10px 1em; } .form-item label .pflicht { color: var(--color-grey-font); margin-left: 2px; font-family: Arial, Helvetica, sans-serif; } .invert .form-item label .pflicht { color: white; } .form-item-checkbox .inner { display: flex; gap: 10px; align-items: start; } .form-item-checkbox .inner input { width: auto; margin-top: .8em; } .form-item-checkbox-custom .inner { padding-left: 1.4em; } .notallowedinfo { padding: 0 20px; } .form.is-sending { cursor: wait; } .form.is-sending .form-item { pointer-events: none; opacity: .8; } .form.form-private-email-error .btn { pointer-events: none; opacity: .5; } @media only screen and (min-width: 85em) { .form { grid-template-columns: 1fr 1fr; gap: 20px 30px; } .form-item:not(:has(label)) { padding-top: 2em; } } /* Footer */ #footer { background-color: var(--color-grey-light); color: var(--color-grey-font); padding: 120px 0 30px 0; } #footer .r + .r { margin-top: 1em; } #footer .text a, #footer .menu a { color: var(--color-grey-font); } #footer ul.menu a:hover { color: var(--color-red); } #footer ul.menu > li > .a { font-weight: 400; } #footer ul.menu > li > a { display: block; padding: .7em 0; font-weight: 400; } #footer ul.sub-menu { padding: 0; } #footer ul.sub-menu a { font-weight: 200; font-size: 16px; padding: .6em 0; display: block; } #footer p { font-size: 16px; } #footer span.a-padding { display: block; padding: .8em 0; line-height: 1; } #footer .text p b { font-weight: 400; font-size: 16px; } #footer .text a { text-decoration: none; } #footer .text a:hover { color: var(--color-red); } #footer .proven-expert { line-height: 0; } @media only screen and (max-width: 60em) { #footer .form { margin-top: 1em; } } @media only screen and (min-width: 60em) { #footer .r + .r { margin-top: 0; } #footer li a, #footer .text p b { font-size: 20px; } #footer .text p b.label, #footer ul.sub-menu a, #footer p { font-size: 18px; } } /* Newsletter im Footer */ .newsletterbox { padding: 1.5em; border-radius: 20px; background-color: white; } .newsletterbox .form-item { padding-top: 0; } @media only screen and (max-width: 60em) { .newsletterbox { margin: 1em 0; } } @media only screen and (min-width: 85em) { .newsletterbox { padding: 2em; } .newsletterbox .form { grid-template-columns: 1fr; } } /* Footerline */ #footerline { display: flex; column-gap: 2em; flex-wrap: wrap; padding-top: 60px; justify-content: start; } #footerline li.copyright-li, #footerline .a { display: block; padding: .7em 0; font-weight: 200 !important; line-height: 1; cursor: pointer; } #footerline .a:hover { color: var(--color-red); } #footerline a { font-weight: 200 !important; } #footerline li, #footerline ul.menu a { font-size: 14px; } @media only screen and (max-width: 60em) { #footerline { justify-content: center;} } @media only screen and (min-width: 60em) { #footerline { flex-direction: row; justify-content: start; gap: 3em; } #footerline li, #footerline li a, #footerline ul.menu a { font-size: 16px; } } #footerline .copyright-li { cursor: default !important; } /* Link to Top */ #link-to-top { pointer-events: none; transition: opacity 1s; opacity: 0; cursor: pointer; padding: 10px; border-radius: 100%; display: flex; justify-content: center; align-items: center; position: fixed; bottom: 30px; right: 30px; z-index: 10000; background-color: var(--color-red); } #link-to-top:hover { background-color: var(--color-black); } .show-link-to-top #link-to-top { opacity: 1; pointer-events: auto; } #link-to-top svg { fill: white; width: 30px; height: 30px; } /* YouTube Embed */ .youtube-embed iframe { aspect-ratio: 16 / 9; width: 100%; height: auto; overflow: hidden; border-radius: 14px; } /* Videomodal */ .modal-open #header { display: none; } #videomodal { cursor: pointer; display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 10px; z-index: 35000; background-color: rgba(0,0,0,.7); } #videomodal .inner { width: 100vw; aspect-ratio: 16 / 9; max-width: 1300px; border-radius: 20px; overflow: hidden; } #videomodal .inner iframe { width: 100%; height: 100%; border: 0; border-radius: 20px; } #videomodal-close { position: absolute; top: 20px; right: 20px; fill: white; width: 40px; height: 40px; } #videomodal-close:hover { fill: var(--color-red); } @media only screen and (min-width: 60em) { #videomodal { padding: 0px; } #videomodal .inner { width: 75vw; } } /* PopUp Modal */ #popupmodal { cursor: pointer; display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 10px; z-index: 35000; background-color: rgba(0,0,0,.3); } #popupmodal > .inner { cursor: default; width: 100%; aspect-ratio: 16 / 9; max-width: 1200px; max-height: 90vh; border-radius: 20px; overflow: hidden; } .modal-type-iframe #popupmodal > .inner { overflow-y: auto; background-color: white; border-radius: 20px 0 0 20px; } #popupmodal-close { position: absolute; top: 20px; right: 20px; fill: white; width: 40px; height: 40px; } #popupmodal-close:hover { fill: var(--color-red); } @media only screen and (min-width: 60em) { #popupmodal { padding: 100px; } #popupmodal .inner .media { width: 100%; } } @media only screen and (orientation: portrait) { #popupmodal > .inner .media { max-width: 100%; } #popupmodal > .inner:has(.media) { overflow-y: hidden; } .modal-type-iframe #popupmodal .inner { height: 80dvh; aspect-ratio: unset; } } /* Framemodal */ .modal-open { overflow: hidden; } .modal-open #header { display: none; } #framemodal { cursor: pointer; display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 10px; z-index: 35000; background-color: rgba(0,0,0,.7); } #framemodal > .inner { cursor: default; width: 100%; max-width: 1400px; max-height: 80vh; border-radius: 20px; overflow: hidden; } #framemodal > .inner iframe { width: 100%; height: 100%; border: 0; overflow-y: auto; } #framemodal-close { position: absolute; top: 20px; right: 20px; fill: white; width: 40px; height: 40px; } #framemodal-close:hover { fill: var(--color-red); } @media only screen and (orientation: portrait) { #framemodal { align-items: flex-end; } #framemodal .inner { height: 80dvh; height: calc( 100dvh - 80px ); width: 100vw; } } @media only screen and (orientation: landscape) { #framemodal { padding: 60px 0; } #framemodal > .inner { aspect-ratio: 16 / 9; } #framemodal.type-html5 .inner iframe, #framemodal.type-html5 .inner { aspect-ratio: 1499 / 843; } #framemodal.type-calendly .inner { aspect-ratio: auto; max-width: 1200px; overflow-y: auto; } #framemodal.type-calendly .inner iframe { aspect-ratio: auto; height: 100%; min-height: 800px; } #framemodal.type-form .inner { aspect-ratio: auto; max-width: 1200px; height: 80vh; max-height: 800px; overflow: none; background-color: rgba(255,255,255,.5); } #framemodal.type-form .inner iframe { aspect-ratio: auto; height: 100%; } } /* Calendly Embed */ .wdm-calendly-inline-widget { width: 100%; height: 700px; } .wdm-calendly-inline-widget iframe { width: 100%; height: 100%; overflow-y: auto; } /* PopUps */ .single-popup, .single-popup #smooth-wrapper, .single-popup #smooth-content { height: 100dvh; } .single-popup #main { height: 100%; display: flex; justify-content: center; align-items: center; } #popup-container { max-width: 1200px; margin-left: auto; margin-right: auto; background-color: white; } /* Pardot Short PopUps */ #popupmodal.type-pardot-short > .inner, #popup-container.type-pardot-short { position: relative; width: 960px; height: 523px; max-height: none; max-width: none; aspect-ratio: auto; border-radius: 20px; overflow: hidden; } .type-pardot-short .pardot-form { display: block; position: absolute; bottom: 90px; width: 100%; padding: 0 45px; display: flex; gap: 20px; align-items: flex-end; } .type-pardot-short .pardot-form label { color: white; padding-left: 0; font-size: 16px; text-shadow: var(--color-red) 1px 1px 3px; } .type-pardot-short .pardot-form label * { color: white; } .type-pardot-short .pardot-form .form-item { flex: 1; margin: 0; width: auto; } /* .type-pardot-short .pardot-form .form-item:not(.form-item-submit) { max-width: 170px; } */ .type-pardot-short .pardot-form .form-item.form-item-submit { flex: 0 auto; margin-left: auto; } .type-pardot-short .pardot-form .form-item input { padding-left: .7em; padding-right: .5em; width: 100%; box-sizing: border-box; } .type-pardot-short .pardot-form .form-item.form-item-submit .btn { word-break: keep-all; white-space: nowrap; font-size: 22px; height: 60px; } .type-pardot-short .privacy-hinweis { position: absolute; bottom: 50px; left: 45px; color: white; font-size: 16px; text-align: right; } .type-pardot-short .privacy-hinweis a { color: white; font-weight: 500; } .type-pardot-short .private-email-error { position: relative; } .type-pardot-short .private-email-error .notallowedinfo { border-radius: 20px 20px 20px 0; padding: 1rem; position: absolute; top: 20px; right: 20px; color: white; transform: translate(100%,-100%); background-color: var(--color-red); font-size: 14px; } /* Suche */ #suchfeld { padding: 30px 0; display: flex; gap: 20px; flex-direction: column; } #suchresult { text-align: left; } .number-of-results { padding-bottom: 30px; } .gcs-item p + p { margin-top: 0; } .btn-search-load-more, .gcs-item + .gcs-item { margin-top: 60px; } .gcs-item-title a { text-decoration: none; } .gcs-item-url a { color: var(--color-black); } @media only screen and (min-width: 850px) { #suchfeld { flex-direction: row; } } /* Cookie Banner v2 */ #cbanner.v2 { transition: all .5s; pointer-events: none; opacity: 0; position: fixed; z-index: 40000; transform: translateX(-50%) translateY(-50%); top: 150%; left: 50%; width: 95vw; max-width: 1200px; border-radius: 20px; padding: 40px 60px; background-color: white; } .show-consent #main { pointer-events: none; } .show-consent #cbanner.v2 { pointer-events: auto; opacity: 1; } #cbanner.v2 .cookie-setting-choice { display: flex; gap: 10px; align-items: center; } #cbanner.v2 .cookie-setting-choice.no-choice { cursor: normal; cursor: not-allowed; } #cbanner.v2 .cookie-setting-choice.has-choice .consent-checkbox, #cbanner.v2 .cookie-setting-choice.has-choice .label { cursor: pointer; } #cbanner.v2 .cookie-setting-choice { margin-bottom: 20px; } #cbanner.v2 .cookie-setting-choice .text { margin-top: 0; } #cbanner.v2 .cookie-setting-choice p { margin-top: 0; line-height: 1; } #cbanner.v2 .cookie-setting-choice .consent-checkbox { width: 30px; height: 30px; border: 2px solid var(--color-grey-font); border-radius: 3px; } #cbanner.v2 .cookie-setting-choice .consent-checkbox.on { background-color: var(--color-red); border-color: var(--color-red); } #cbanner.v2 .cookie-setting-choice .consent-checkbox.on:after { pointer-events: none; position: absolute; content:""; display: block; transform: translate(2px,2px); width: 22px; height: 22px; background-size: cover; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E"); } #cbanner.v2 .show-only-when-details, .show-consent-details #cbanner.v2 .hide-when-details { display: none; } .show-consent-details #cbanner.v2 .show-only-when-details { display: block; } #cbanner.v2 .link { cursor: pointer; font-weight: 500; } #cbanner.v2 .link.dark { color: var(--color-grey-font); text-decoration: none; } #cbanner.v2 .link.dark:hover { color: var(--color-red) !important; } #cbanner.v2 .cbanner-info p + p { margin-top: 0px; } .show-consent #link-to-top { display: none !important; } @media only screen and (orientation: portrait) { .show-consent #cbanner.v2 { top: auto; bottom: 20px; transform: translateX(-50%); } #cbanner.v2 { padding: 20px 30px; } #cbanner.v2 .cbanner-pic { display: none } #cbanner.v2 .cbanner-buttons { margin-top: 20px; } #cbanner.v2 .cbanner-settings { padding-top: 20px; } #cbanner.v2 .cbanner-info p:not(.h4) { line-height: 1.3; } } @media only screen and (orientation: landscape) { .show-consent #main, .show-consent #footer { filter: blur(5px); } .show-consent #cbanner.v2 { top: 50%; } #cbanner.v2 .cbanner-inner { display: flex; gap: 20px; } #cbanner.v2 .cbanner-pic { width: 400px; flex-basis: 400px; } #cbanner.v2 .cbanner-buttons p { margin: 0; } #cbanner.v2 .cbanner-buttons { margin-top: 30px; display: flex; justify-content: flex-start; gap: 50px; } #cbanner.v2 .cbanner-buttons .has-btn-accept { margin-left: auto; } #cbanner.v2 .cbanner-settings { padding-top: 20px; } } /* Cookie Banner v1 */ .supershadow { box-shadow: 0.3px 0.3px 0.4px rgba(0, 0, 0, 0.02), 0.7px 0.7px 0.9px rgba(0, 0, 0, 0.028), 1.3px 1.3px 1.8px rgba(0, 0, 0, 0.035), 2.2px 2.2px 3.1px rgba(0, 0, 0, 0.042), 4.2px 4.2px 5.8px rgba(0, 0, 0, 0.05), 10px 10px 14px rgba(0, 0, 0, 0.07) ; } #cbanner.v1 { transition: bottom .5s; position: fixed; bottom: -500px; z-index: 40000; transform: translateX(-50%); left: 50%; background-color: white; } #cbanner.v1 .cbanner-buttons p { margin: 0; } #cbanner.v1 .cbanner-info p a { color: var(--color-grey-font); } #cbanner.v1 .cbanner-settings { height: 0; overflow: hidden; transition: height .5s; visibility: hidden; pointer-events: none; } #cbanner.v1 .cbanner-buttons { transition: opacity .3s;} .show-consent-details #cbanner.v1 .cbanner-settings { height: auto; visibility: visible; pointer-events: auto; } .show-consent-details #cbanner.v1 .cbanner-buttons { opacity: 0; pointer-events: none; } #cbanner.v1 .cookie-setting-choice { display: flex; gap: 10px; align-items: center; } #cbanner.v1 .cookie-setting-choice.no-choice { cursor: normal; cursor: not-allowed; } #cbanner.v1 .cookie-setting-choice.has-choice { cursor: pointer; } #cbanner.v1 .cookie-setting-choice { margin-bottom: 20px; } #cbanner.v1 .cookie-setting-choice .text { margin-top: 0; } #cbanner.v1 .cookie-setting-choice p { margin-top: 0; line-height: 1; } #cbanner.v1 .cookie-setting-choice .consent-checkbox { width: 30px; height: 30px; border: 2px solid var(--color-grey-font); border-radius: 3px; } #cbanner.v1 .cookie-setting-choice .consent-checkbox.on { background-color: var(--color-red); border-color: var(--color-red); } #cbanner.v1 .cookie-setting-choice .consent-checkbox.on:after { pointer-events: none; position: absolute; content:""; display: block; transform: translate(2px,2px); width: 22px; height: 22px; background-size: cover; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E"); } .show-consent-details #cbanner.v1 #cookiespic { display: none; } @media only screen and (orientation: portrait) { #cbanner.v1 #cookiespic { width: 80px; } #cbanner.v1 { width: calc( 100vw - 40px); border-radius: 20px; padding: 30px; border: 1px solid var(--color-grey-light); } .show-consent #cbanner.v1 { bottom: 20px; } #cbanner.v1 .cbanner-info { /*display: flex; gap: 10px; align-items: center;*/ text-align: center; } #cbanner.v1 .cbanner-buttons { margin-top: 20px; display: flex; gap: 10px; flex-direction: column; align-items: center; } /*#cbanner.v1 .cbanner-buttons .has-btn-accept { font-size: 24px; }*/ .show-consent-details #cbanner.v1 .cbanner-buttons { display: none; } .show-consent-details #cbanner.v1 .cbanner-settings .left { padding: 1em 0 2em 0; } .show-consent-details #cbanner.v1 .cbanner-settings .left p { font-size: 15px; line-height: 1.3; } } @media only screen and (orientation: landscape) { .show-consent #main, .show-consent #footer { filter: blur(5px); } #cbanner.v1 #cookiespic { width: 100px; } #cbanner.v1 { /*transform: translateX(-50%);*/ transform: translate(-50%,50%); left: 50%; width: 90vw; max-width: 1300px; border-radius: 20px; padding: 40px 60px; } .show-consent #cbanner.v1 { /*bottom: 50px;*/ bottom: 50%; } #cbanner.v1 .cbanner-inner { display: flex; justify-content: space-between; align-items: center; } #cbanner.v1 .cbanner-info { display: flex; align-items: center; gap: 20px; font-size: 20px; } #cbanner.v1 .cbanner-buttons { display: flex; gap: 10px; align-items: center; } #cbanner.v1 .cbanner-settings { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: center; } .show-consent-details #cbanner.v1 .cbanner-inner { margin-bottom: 20px; } .show-consent-details #cbanner.v1 .cbanner-settings { margin-top: 0px; } .show-consent-details #cbanner.v1 { transform: translate(-50%,50%); } } @media only screen and (orientation: landscape) and (max-width: 90em) { #cbanner.v1 { width: 80vw; } #cbanner.v1 .cbanner-inner { gap: 20px; flex-direction: column; } .show-consent-details #cbanner.v1 .cbanner-inner { flex-direction: row; } } /* WP Edit */ .wp-edit { position: fixed; z-index: 1000; left: 0; bottom: 0; color: var(--color-black); opacity: .5; border-radius: 0 10px 0 0; } .wp-edit a { display: block; padding: 20px; } .wp-edit:hover { opacity: 1; } .wp-edit a { text-decoration: none; } .single-popup .wp-edit, .is-iframe-popup .wp-edit { display: none; } /* Customer Journey */ .wp-edit-customer-journey { display: none; position: fixed; z-index: 1000; right: 0; bottom: 0; background-color: white; color: var(--color-black); border-radius: 0 10px 0 0; padding: 1rem; border-radius: 10px 0 0 0; border: 1px solid var(--color-grey-light); } .wp-edit-customer-journey ul { padding-left: 0; } .show-customer-journey #link-to-top { display: none; } .show-customer-journey .wp-edit-customer-journey { display: block; } .wp-edit-customer-journey * { font-size: 16px;} .tick-customer-journey .wp-edit-customer-journey { background: var(--color-red); } .tick-customer-journey .wp-edit-customer-journey * { color: white; } /* MP3 Audioplayer */ * + .shortcode-audioplayer { margin-top: 1.5em; } .shortcode-audioplayer { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 20px; background-color: var(--color-grey-light); border-radius: 10px; max-width: 400px; } .play-pause { display: flex; align-items: center; justify-content: center; height: 31px; width: 27px; } .play-pause div { cursor: pointer; } .pause .play-pause .pause-button, .playing .play-pause .play-button { display: none; } .bg .shortcode-audioplayer { background-color: white; } .bg.invert .shortcode-audioplayer * { color: var(--color-grey-font);} .progress-bar { flex-grow: 1; height: 8px; background-color: var(--color-grey); border-radius: 5px; position: relative; cursor: pointer; } .progress-bar .progress { height: 100%; background-color: var(--color-red); border-radius: 5px; width: 0; } .shortcode-audioplayer .time { min-width: 80px; text-align: right; } .shortcode-audioplayer .addtext { flex-basis: 100%; /* Neue Zeile */ margin-top: 0px; /* Abstand zur oberen Zeile */ color: var(--color-grey-font); font-size: 14px; line-height: 1.1; } /* Font */ @font-face { font-family:"kobenhavn-sans"; src:url("../font/kop_200.woff2") format("woff2"), url("../font/kop_200.woff") format("woff"), url("../font/kop_200.otf") format("opentype"); font-display:swap; font-style:normal; font-weight:200; font-stretch:normal; } @font-face { font-family:"kobenhavn-sans"; src:url("../font/kop_300.woff2") format("woff2"), url("../font/kop_300.woff") format("woff"), url("../font/kop_300.otf") format("opentype"); font-display:swap; font-style:normal; font-weight:300; font-stretch:normal; } @font-face { font-family:"kobenhavn-sans"; src:url("../font/kop_400.woff2") format("woff2"), url("../font/kop_400.woff") format("woff"), url("../font/kop_400.otf") format("opentype"); font-display:swap; font-style:normal; font-weight:400; font-stretch:normal; } @font-face { font-family:"kobenhavn-sans"; src:url("../font/kop_500.woff2") format("woff2"), url("../font/kop_500.woff") format("woff"), url("../font/kop_500.otf") format("opentype"); font-display:swap; font-style:normal; font-weight:500; font-stretch:normal; } @font-face { font-family:"kobenhavn-sans"; src:url("../font/kop_600.woff2") format("woff2"), url("../font/kop_600.woff") format("woff"), url("../font/kop_600.otf") format("opentype"); font-display:swap; font-style:normal; font-weight:600; font-stretch:normal; } /* CSS Animations */ @keyframes from100ToUp { from { transform: translate3d(0, 100px, 0); } to { transform: translate3d(0, 0, 0);} } @keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 100px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0);} } @keyframes fadeInUpHigher { from { opacity: 0; transform: translate3d(0, 100px, 0); } to { opacity: 1; transform: translate3d(0, -50px, 0);} } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } @keyframes pfeilbubbel { 0%, 100% { transform: none; } 50% { transform: translateX(.2em); } } @keyframes tabsLabelsAnimation { 0%, 100% { transform: none; } 50% { transform: scale(1.2); border-left-color: var(--color-grey); } } /* Ausnahmen für Bildschirme mit geringer Höhe */ @media (orientation: landscape) and (max-height: 650px) { .h1,.h2,.h3 { line-height: .9; } .h4,.h5,.h6 { line-height: 1.1; } * + p:has(.btn.primary) { margin-top: 1.2em; } } /* Breakpoint */ .breakpoint { pointer-events: none; opacity: .6; position: fixed; left: 0; bottom: 0; width: 30px; height: 30px; text-align: center; line-height: 30px; background-color: white; border-radius: 0 10px 0 0; }