/* Import CSS */ @import url('global.css'); @import url('typography.css'); @import url('color.css'); @import url('component.css'); /* Header Start */ :root{ --header-height:9.4rem; --logo-width:17.9rem; /* Gridblock */ --col-primary: rgb(131,33,125); /* globale 1. Projektfarbe */ --col-secondary: rgb(75,83,91); /* globale 2. Projektfarbe */ --col-accent: rgb(238,238,238); /* globale 3. Projektfarbe (Akzentfarbe) */ --col-light: #FFF; /* für Basis-Farbset (z.B. Gridblock) */ --col-dark: #222; /* für Basis-Farbset (z.B. Gridblock) */ --margin-xs: 1px; --margin-sm: 10px; --margin-md: 30px; --margin-lg: 50px; --margin-xl: 100px; --margin-neg-xs: -10px; --margin-neg-sm: -20px; --margin-neg-md: -40px; --margin-neg-lg: -60px; --margin-neg-xl: -80px; --padding-sm: 20px; --padding-md: 40px; --padding-lg: 70px; --padding-xl: 100px; --padding-smp: 3%; --padding-mdp: 7%; --padding-lgp: 11%; --padding-xlp: 15%; --borderRadius-xs: 4px; --borderRadius-sm: 9px; --borderRadius-md: 15px; --borderRadius-lg: 20px; --gap-xs: 1px; --gap-sm: 10px; --gap-md: 30px; --gap-lg: 50px; --gap-xl: 100px; --transform: skewY(0deg); --margin-divisor: 1; --padding-divisor: 1; --overlay-opacity: 1; --filter-grey: grayscale(1); --filter-blur: blur(3px); --filter-greyblur: grayscale(1) blur(3px); --fx-liftup-transf: translateY(-7px); --fx-liftup-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px; --fx-scaleup: scale(1.07); } @media(width < 1200px){ :root{ --logo-width:15rem; } } @media(width < 481px){ :root{ --logo-width:12.2rem; } } /* globale Klassen für Gridblock + Module */ .pdT-15px { padding-top: 15px; } .pdB-15px { padding-bottom: 15px; } .pdH-15px { padding-left: 15px; padding-right: 15px; } .pdT-sm { padding-top: var(--padding-sm); } .pdT-md { padding-top: var(--padding-md); } .pdT-lg { padding-top: var(--padding-lg); } .pdT-xl { padding-top: var(--padding-xl); } .pdT-smp { padding-top: var(--padding-smp); } .pdT-mdp { padding-top: var(--padding-mdp); } .pdT-lgp { padding-top: var(--padding-lgp); } .pdT-xlp { padding-top: var(--padding-xlp); } .pdB-sm { padding-bottom: var(--padding-sm); } .pdB-md { padding-bottom: var(--padding-md); } .pdB-lg { padding-bottom: var(--padding-lg); } .pdB-xl { padding-bottom: var(--padding-xl); } .pdB-smp { padding-bottom: var(--padding-smp); } .pdB-mdp { padding-bottom: var(--padding-mdp); } .pdB-lgp { padding-bottom: var(--padding-lgp); } .pdB-xlp { padding-bottom: var(--padding-xlp); } .pdH-sm { padding-left: var(--padding-sm); padding-right: var(--padding-sm); } .pdH-md { padding-left: var(--padding-md); padding-right: var(--padding-md); } .pdH-lg { padding-left: var(--padding-lg); padding-right: var(--padding-lg); } .pdH-xl { padding-left: var(--padding-xl); padding-right: var(--padding-xl); } .pdH-smp { padding-left: var(--padding-smp); padding-right: var(--padding-smp); } .pdH-mdp { padding-left: var(--padding-mdp); padding-right: var(--padding-mdp); } .pdH-lgp { padding-left: var(--padding-lgp); padding-right: var(--padding-lgp); } .pdH-xlp { padding-left: var(--padding-xlp); padding-right: var(--padding-xlp); } .pdM-12 { --padding-divisor: 0.5 !important; } .pdM-14 { --padding-divisor: 0.25 !important; } .pdM-34 { --padding-divisor: 0.75 !important; } .mgM-12 { --margin-divisor: 0.5 !important; } .mgM-14 { --margin-divisor: 0.25 !important; } .mgM-34 { --margin-divisor: 0.75 !important; } .mgT-xs:not(.mgOnlyMobile) { margin-top: var(--margin-xs) !important; } .mgT-sm:not(.mgOnlyMobile) { margin-top: var(--margin-sm) !important; } .mgT-md:not(.mgOnlyMobile) { margin-top: var(--margin-md) !important; } .mgT-lg:not(.mgOnlyMobile) { margin-top: var(--margin-lg) !important; } .mgT-xl:not(.mgOnlyMobile) { margin-top: var(--margin-xl) !important; } .mgB-xs:not(.mgOnlyMobile) { margin-bottom: var(--margin-xs) !important; } .mgB-sm:not(.mgOnlyMobile) { margin-bottom: var(--margin-sm) !important; } .mgB-md:not(.mgOnlyMobile) { margin-bottom: var(--margin-md) !important; } .mgB-lg:not(.mgOnlyMobile) { margin-bottom: var(--margin-lg) !important; } .mgB-xl:not(.mgOnlyMobile) { margin-bottom: var(--margin-xl) !important; } .mgNT-xs:not(.mgOnlyMobile) { margin-top: var(--margin-neg-xs) !important; } .mgNT-sm:not(.mgOnlyMobile) { margin-top: var(--margin-neg-sm) !important; } .mgNT-md:not(.mgOnlyMobile) { margin-top: var(--margin-neg-md) !important; } .mgNT-lg:not(.mgOnlyMobile) { margin-top: var(--margin-neg-lg) !important; } .mgNT-xl:not(.mgOnlyMobile) { margin-top: var(--margin-neg-xl) !important; } .mgNB-xs:not(.mgOnlyMobile) { margin-bottom: var(--margin-neg-xs) !important; } .mgNB-sm:not(.mgOnlyMobile) { margin-bottom: var(--margin-neg-sm) !important; } .mgNB-md:not(.mgOnlyMobile) { margin-bottom: var(--margin-neg-md) !important; } .mgNB-lg:not(.mgOnlyMobile) { margin-bottom: var(--margin-neg-lg) !important; } .mgNB-xl:not(.mgOnlyMobile) { margin-bottom: var(--margin-neg-xl) !important; } .bgCol-primary { background-color: var(--col-primary); } .bgCol-secondary { background-color: var(--col-secondary); } .bgCol-accent { background-color: var(--col-accent); } .bgFill-cover { background-size: cover; background-repeat: no-repeat; } .bgFill-contain { background-size: contain; background-repeat: no-repeat; } .bgFill-repeat { background-repeat: repeat; } .bgFill-repeatX { background-repeat: repeat-x; } .bgFill-repeatY { background-repeat: repeat-y; } .bgAlign-cc { background-position: center center; } .bgAlign-lt { background-position: left top; } .bgAlign-rt { background-position: right top; } .bgAlign-rb { background-position: right bottom; } .bgAlign-lb { background-position: left bottom; } .bgAlign-ct { background-position: center top; } .bgAlign-cr { background-position: center right; } .bgAlign-cb { background-position: center bottom; } .bgAlign-cl { background-position: center left; } .bgSkewY-smb { --transform: skewY(2deg); transform: var(--transform); } .bgSkewY-smb > div { transform: skewY(-2deg); } .bgSkewY-mdb { --transform: skewY(5deg); transform: var(--transform); } .bgSkewY-mdb > div { transform: skewY(-5deg); } .bgSkewY-lgb { --transform: skewY(8deg); transform: var(--transform); } .bgSkewY-lgb > div { transform: skewY(-8deg); } .bgSkewY-smt { --transform: skewY(-2deg); transform: var(--transform); } .bgSkewY-smt > div { transform: skewY(2deg); } .bgSkewY-mdt { --transform: skewY(-5deg); transform: var(--transform); } .bgSkewY-mdt > div { transform: skewY(5deg); } .bgSkewY-lgt { --transform: skewY(-8deg); transform: var(--transform); } .bgSkewY-lgt > div { transform: skewY(8deg); } .bgTrOr-left { transform-origin: left; } .bgTrOr-right { transform-origin: right; } .bgOlay-dark:after, .bgOlay-light:after, .bgOlay-vigdark:after, .bgOlay-viglight:after, .bgOlay-dotdark:after, .bgOlay-dotlight:after, .bgOlay-linesdark:after, .bgOlay-lineslight:after, .bgOlay-diagdark:after, .bgOlay-diaglight:after { content: ''; position: absolute; z-index: 1; width: 100%; height: 100%; top: 0px; left: 0px; opacity: calc(var(--overlay-opacity) / 100); } .bgOlay-dark:after { background: rgba(0,0,0, 1); } .bgOlay-light:after { background: rgba(255,255,255, 1); } .bgOlay-vigdark:after { background: radial-gradient(transparent 60%, rgba(0,0,0, 1)); } .bgOlay-viglight:after { background: radial-gradient(transparent 60%, rgba(255,255,255, 1)); } .bgOlay-dotdark:after { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGAQMAAADaAn0LAAAABGdBTUEAALGPC/xhBQAAAAZQTFRFAAAAAAAApWe5zwAAAAF0Uk5TAEDm2GYAAAAPSURBVAjXY2AAAgMgBAIAAkwAYT8MS18AAAAASUVORK5CYII=') repeat; } .bgOlay-dotlight:after { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGAQMAAADaAn0LAAAABGdBTUEAALGPC/xhBQAAAAZQTFRFAAAA////pdmf3QAAAAF0Uk5TAEDm2GYAAAAPSURBVAjXY2AAAgMgBAIAAkwAYT8MS18AAAAASUVORK5CYII=') repeat; } .bgOlay-linesdark:after { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFAgMAAADwAc52AAAABGdBTUEAALGPC/xhBQAAAAlQTFRFAAAAAAAAAAAAg2PpwAAAAAJ0Uk5TgABNEFVzAAAAFElEQVQI12MIdWAAolUNDEAQ6gAAF9YC6ok5McwAAAAASUVORK5CYII=') repeat; } .bgOlay-lineslight:after { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFAgMAAADwAc52AAAABGdBTUEAALGPC/xhBQAAAAlQTFRF////AAAA////fu+PTwAAAAJ0Uk5TgABNEFVzAAAAFElEQVQI12MIdWAAolUNDEAQ6gAAF9YC6ok5McwAAAAASUVORK5CYII=') repeat; } .bgOlay-diagdark:after { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFAQMAAAC3obSmAAAABGdBTUEAALGPC/xhBQAAAAZQTFRFAAAAAAAApWe5zwAAAAF0Uk5TAEDm2GYAAAASSURBVAjXY2hg4GAQYFBgcAAABbIA+Zl88MsAAAAASUVORK5CYII=') repeat; } .bgOlay-diaglight:after { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFAQMAAAC3obSmAAAABGdBTUEAALGPC/xhBQAAAAZQTFRFAAAA////pdmf3QAAAAF0Uk5TAEDm2GYAAAASSURBVAjXY2hg4GAQYFBgcAAABbIA+Zl88MsAAAAASUVORK5CYII=') repeat; } .shadow-dh { -webkit-box-shadow: 6px 6px 3px 0 rgba(0,0,0,0.4); box-shadow: 6px 6px 3px 0 rgba(0,0,0,0.4); } /* schlag hart */ .shadow-dm { -webkit-box-shadow: 7px 7px 9px 0 rgba(0,0,0,0.4); box-shadow: 7px 7px 9px 0 rgba(0,0,0,0.4); } /* schlag mittel */ .shadow-ds { -webkit-box-shadow: 10px 10px 20px 0 rgba(0,0,0,0.4); box-shadow: 10px 10px 20px 0 rgba(0,0,0,0.4); } /* schlag soft */ .shadow-gs { -webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,0.25); box-shadow: 0 0 20px 0 rgba(0,0,0,0.25); } /* glühen klein */ .shadow-gm { -webkit-box-shadow: 0 0 32px 0 rgba(0,0,0,0.33); box-shadow: 0 0 32px 0 rgba(0,0,0,0.33); } /* glühen mittel */ .shadow-gl { -webkit-box-shadow: 0 0 50px 2px rgba(0,0,0,0.4); box-shadow: 0 0 50px 2px rgba(0,0,0,0.4); } /* glühen groß */ .shadow-is { -webkit-box-shadow: inset 0 0 20px 0 rgba(0,0,0,0.4); box-shadow: inset 0 0 20px 0 rgba(0,0,0,0.4); } /* inline klein */ .shadow-im { -webkit-box-shadow: inset 0 0 32px 0 rgba(0,0,0,0.4); box-shadow: inset 0 0 32px 0 rgba(0,0,0,0.4); } /* inline mittel */ .shadow-il { -webkit-box-shadow: inset 0 0 40px 2px rgba(0,0,0,0.5); box-shadow: inset 0 0 40px 2px rgba(0,0,0,0.5); } /* inline groß */ .shadow-rs { -webkit-box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px; box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px; } /* angehoben klein */ .shadow-rm { -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px; box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px; } /* angehoben mittel */ .shadow-rl { -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px; box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px; } /* angehoben groß */ .shadow-ft { box-shadow: -10px -10px 0px 0px rgba(0,0,0, 0.38); } /* gerahmt oben */ .shadow-fb { box-shadow: 10px 10px 0px 0px rgba(0,0,0, 0.38); } /* gerahmt unten */ .shadow-fa { box-shadow: 0px 6px 0px 10px rgba(0,0,0, 0.38); } /* gerahmt rundum */ .shadow-ss { box-shadow: -18px 0px 10px -17px rgba(0,0,0, 0.38), 18px 0px 10px -17px rgba(0,0,0, 0.38); } /* seiten klein */ .shadow-sm { box-shadow: -24px 0px 13px -17px rgba(0,0,0, 0.38), 24px 0px 13px -17px rgba(0,0,0, 0.38); } /* seiten mittel */ .shadow-sl { box-shadow: -30px 0px 15px -17px rgba(0,0,0, 0.38), 30px 0px 15px -17px rgba(0,0,0, 0.38); } /* seiten groß */ .bRadius.bRadius-50p, .gridblock .bRadius.bRadius-50p:after, .gridblock .bRadius.bRadius-50p > .farallax-wrapper { -webkit-border-radius: 50%; border-radius: 50%; } .bRadius.bRadius-xs, .gridblock .bRadius.bRadius-xs:after, .gridblock .bRadius.bRadius-xs > .farallax-wrapper { -webkit-border-radius: var(--borderRadius-xs); border-radius: var(--borderRadius-xs); } .bRadius.bRadius-sm, .gridblock .bRadius.bRadius-sm:after, .gridblock .bRadius.bRadius-sm > .farallax-wrapper { -webkit-border-radius: var(--borderRadius-sm); border-radius: var(--borderRadius-sm); } .bRadius.bRadius-md, .gridblock .bRadius.bRadius-md:after, .gridblock .bRadius.bRadius-md > .farallax-wrapper { -webkit-border-radius: var(--borderRadius-md); border-radius: var(--borderRadius-md); } .bRadius.bRadius-lg, .gridblock .bRadius.bRadius-lg:after, .gridblock .bRadius.bRadius-lg > .farallax-wrapper { -webkit-border-radius: var(--borderRadius-lg); border-radius: var(--borderRadius-lg); } .bRadius.bRadiusTL-none, .gridblock .bRadius.bRadiusTL-none:after, .gridblock .bRadius.bRadiusTL-none > .farallax-wrapper { -webkit-border-top-left-radius: 0px !important; border-top-left-radius: 0px !important; } .bRadius.bRadiusTR-none, .gridblock .bRadius.bRadiusTR-none:after, .gridblock .bRadius.bRadiusTR-none > .farallax-wrapper { -webkit-border-top-right-radius: 0px !important; border-top-right-radius: 0px !important; } .bRadius.bRadiusBL-none, .gridblock .bRadius.bRadiusBL-none:after, .gridblock .bRadius.bRadiusBL-none > .farallax-wrapper { -webkit-border-bottom-left-radius: 0px !important; border-bottom-left-radius: 0px !important; } .bRadius.bRadiusBR-none, .gridblock .bRadius.bRadiusBR-none:after, .gridblock .bRadius.bRadiusBR-none > .farallax-wrapper { -webkit-border-bottom-right-radius: 0px !important; border-bottom-right-radius: 0px !important; } /* für Abwärtskompatibilität + Inhaltsmodule */ .bRadius.bRadius-ltrt, .gridblock .bRadius.bRadius-ltrt:after, .gridblock .bRadius.bRadius-ltrt > .farallax-wrapper { -webkit-border-bottom-left-radius: 0px; -webkit-border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .bRadius.bRadius-lbrb, .gridblock .bRadius.bRadius-lbrb:after, .gridblock .bRadius.bRadius-lbrb > .farallax-wrapper { -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; } .bRadius.bRadius-ltrb, .gridblock .bRadius.bRadius-ltrb:after, .gridblock .bRadius.bRadius-ltrb > .farallax-wrapper { -webkit-border-top-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; } .bRadius.bRadius-rtlb, .gridblock .bRadius.bRadius-rtlb:after, .gridblock .bRadius.bRadius-rtlb > .farallax-wrapper { -webkit-border-top-left-radius: 0px; -webkit-border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-bottom-right-radius: 0px; } .filter-grey { filter: grayscale(1); } .filter-color { filter: grayscale(0); } .filter-blur { filter: blur(3px); } .filter-greyblur { filter: grayscale(1) blur(3px); } .border-xs-light { border: 1px solid var(--col-light); } /* z.B. genutzt im Modul Einzelbild */ .border-sm-light { border: 5px solid var(--col-light); } .border-lg-light { border: 15px solid var(--col-light); } .border-xs-dark { border: 1px solid var(--col-dark); } .border-sm-dark { border: 5px solid var(--col-dark); } .border-lg-dark { border: 15px solid var(--col-dark); } .border-xs-primary { border: 1px solid; border-color: var(--col-primary); } .border-sm-primary { border: 5px solid; border-color: var(--col-primary); } .border-lg-primary { border: 15px solid; border-color: var(--col-primary); } .border-xs-secondary { border: 1px solid; border-color: var(--col-secondary); } .border-sm-secondary { border: 5px solid; border-color: var(--col-secondary); } .border-lg-secondary { border: 15px solid; border-color: var(--col-secondary); } .border-xs-accent { border: 1px solid; border-color: var(--col-accent); } .border-sm-accent { border: 5px solid; border-color: var(--col-accent); } .border-lg-accent { border: 15px solid; border-color: var(--col-accent); } .width-margin { margin-left: 50px; margin-right: 50px; } .mw200 { max-width: 200px; } .mw300 { max-width: 300px; } .mw400 { max-width: 400px; } .mw500 { max-width: 500px; } .mw600 { max-width: 600px; } .mw700 { max-width: 700px; } .mw800 { max-width: 800px; } .mw900 { max-width: 900px; } .mw1000 { max-width: 1000px; } .mw1100 { max-width: 1100px; } .mw1200 { max-width: 1200px; } .mw1300 { max-width: 1300px; } .mw1400 { max-width: 1400px; } .mw1500 { max-width: 1500px; } .mw1600 { max-width: 1600px; } .mw1700 { max-width: 1700px; } .mw1800 { max-width: 1800px; } .mw1900 { max-width: 1900px; } .mw2000 { max-width: 2000px; } .wa-left { margin-left: 0px !important; margin-right: auto !important; } .wa-center { margin-left: auto !important; margin-right: auto !important; } .wa-right { margin-left: auto !important; margin-right: 0px !important; } .ha-top { align-self: start; } .ha-center { align-self: center; } .ha-bottom { align-self: end; } .ofHidden { overflow: hidden; } .hide, .content-hide { display: none !important; } .left { text-align: left; } .center { text-align: center; } .right { text-align: right; } .justify { text-align: justify; } .block { display: block; } .inline { display: inline; } .inline-block { display: inline-block; } /* AOS-Effekt-Anpassung für Neigung (skew) */ [data-aos^=fade-][data-aos^=fade-].aos-animate {transform:translateZ(1px) var(--transform) !important; } [data-aos=fade-up] { transform:translate3d(0,100px,0) var(--transform) !important; } [data-aos=fade-down] { transform:translate3d(0,-100px,0) var(--transform) !important; } [data-aos=fade-right] { transform:translate3d(-100px,0,0) var(--transform) !important; } [data-aos=fade-left] { transform:translate3d(100px,0,0) var(--transform) !important; } [data-aos=flip-left] { transform:perspective(2500px) rotateY(-100deg) var(--transform) !important; } [data-aos=flip-left].aos-animate { transform:perspective(2500px) rotateY(0) var(--transform) !important; } [data-aos=flip-right] { transform:perspective(2500px) rotateY(100deg) var(--transform) !important; } [data-aos=flip-right].aos-animate { transform:perspective(2500px) rotateY(0) var(--transform) !important; } [data-aos=flip-up] { transform:perspective(2500px) rotateX(-100deg) var(--transform) !important; } [data-aos=flip-up].aos-animate { transform:perspective(2500px) rotateX(0) var(--transform) !important; } [data-aos=flip-down] { transform:perspective(2500px) rotateX(100deg) var(--transform) !important; } [data-aos=flip-down].aos-animate { transform:perspective(2500px) rotateX(0) var(--transform) !important; } [data-aos^=zoom][data-aos^=zoom].aos-animate { transform:translateZ(1px) scale(1) var(--transform) !important; } [data-aos=zoom-in] { transform:scale(.6) var(--transform) !important; } [data-aos=zoom-out] { transform:scale(1.2) var(--transform) !important; } /* BG-Image/Video + Parallax-Effekt (FM) ab CS_v1.3.3 + Helper_v1.3.0 */ .farallax-wrapper { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 0; overflow: hidden; pointer-events: none; backface-visibility: hidden; } .farallax-wrapper * { background: none; background-repeat: no-repeat; object-position: center center; background-position: center center; position: absolute; margin: 0px; padding: 0px; bottom: 0px; left: 0px; z-index: 5; width: 100.1%; height: 100.1%; display: block; pointer-events: none; backface-visibility: hidden; will-change: transform height; } .farallax-preview { display: none; z-index: 1; } .bgFill-cover .farallax-preview, .bgFill-contain .farallax-preview { display: block; } .farallax-image video { object-fit: cover; } .bgFill-cover > .farallax-wrapper * { background-size: cover; } .bgFill-contain > .farallax-wrapper * { background-size: contain; } .bgFill-repeat > .farallax-wrapper .farallax-image { background-repeat: repeat; } .bgFill-repeatX > .farallax-wrapper .farallax-image { background-repeat: repeat-x; } .bgFill-repeatY > .farallax-wrapper .farallax-image { background-repeat: repeat-y; } .bgAlign-lt > .farallax-wrapper * { object-position: left top; background-position: left top; } .bgAlign-rt > .farallax-wrapper * { object-position: right top; background-position: right top; } .bgAlign-rb > .farallax-wrapper * { object-position: right bottom; background-position: right bottom; } .bgAlign-lb > .farallax-wrapper * { object-position: left bottom; background-position: left bottom; } .bgAlign-ct > .farallax-wrapper * { object-position: center top; background-position: center top; } .bgAlign-cr > .farallax-wrapper * { object-position: center right; background-position: center right; } .bgAlign-cb > .farallax-wrapper * { object-position: center bottom; background-position: center bottom; } .bgAlign-cl > .farallax-wrapper * { object-position: center left; background-position: center left; } html:not(.mobile) .farallax-wrapper[data-bgparallax=fixed] > * { height: 100.1% !important; background-attachment: fixed; } .farallax-wrapper[data-bgparallax=toTop] > * { bottom: auto; top: 0px; } .farallax-wrapper[data-bgparallax=scaleIn] > * { transform: scale(1); } .farallax-wrapper[data-bgparallax=scaleIn].farallax-animate > * { transform: scale(1.25); transition: transform 1.25s ease-in-out; } .farallax-wrapper[data-bgparallax=scaleOut] > * { transform: scale(1.25); } .farallax-wrapper[data-bgparallax=scaleOut].farallax-animate > * { transform: scale(1); transition: transform 1.25s ease-in-out; } .farallax-wrapper[data-bgparallax=scaleIn][data-bgparallaxspeed=slow].farallax-animate > *, .farallax-wrapper[data-bgparallax=scaleOut][data-bgparallaxspeed=slow].farallax-animate > *, { transition: transform 1.75s ease-in-out; } .farallax-wrapper[data-bgparallax=scaleIn][data-bgparallaxspeed=fast].farallax-animate > *, .farallax-wrapper[data-bgparallax=scaleOut][data-bgparallaxspeed=fast].farallax-animate > *, { transition: transform 0.75s ease-in-out; } /* Projekt-Anpassungen globaler Klassen */ /* .bgOlay-xxxx:after { content: ''; position: absolute; z-index: 1; width: 100%; height: 63%; bottom: 0px; left: 0px; } .bgOlay-xxxx:after { background: linear-gradient(0deg, #1355A0 0%, rgba(249,197,180,0) 100%); } */ /* END :: globale Klassen */ header{height: var(--header-height); background-color: white; display: flex; align-items: center;} header.position-fixed{position: fixed; left: 0; top: 0; width: 100%; box-shadow: 0 0 .5rem rgba(0,0,0,10%); z-index: 99;} header.position-fixed + *{margin-top: var(--header-height);} header .container-fluid{padding-left: calc(var(--container-padding) * 2); padding-right: calc(var(--container-padding) * 2);} header > *{display: flex; align-items: center;} header .logo{margin-right: auto;} .logo img{max-width: var(--logo-width);} nav{ transition: var(--transition);} nav > ul > li > a{font-size: 1.6rem; font-weight: var(--fw-semibold); color: black; line-height: 1; white-space: nowrap; letter-spacing: .1rem; display: flex; align-items: center; justify-content: center; gap:0 .5rem;} nav > ul > li > a > span{transition: var(--transition); position: relative;} @media(width < 1300px){ nav > ul{gap: 2rem;} nav > ul > li > a{font-size: 1.4rem; letter-spacing: normal;} } @media(width > 991px){ nav > ul{display: flex; align-items: center; gap: 1.8rem;} nav > ul > li{position: relative;} nav > ul > li > a{height: var(--header-height); display: flex; align-items: center; position: relative;} nav > ul > li > a:not(.active)::after{position: absolute; left: 0; bottom: 50%; transform:translateY(2rem); width: 0; height: .2rem; background-color: var(--primary); content: ""; transition: var(--transition);} nav > ul > li:hover > a::after{width: 100%;} .nav-icon{display: none;} nav > ul > li > ul{display: block !important; position: absolute; left: 50%; top: 100%; transform:translateX(-50%); background-color: white; min-width: 100%; box-shadow: 0 0 .5rem rgba(0,0,0,10%); opacity: 0; visibility: hidden; pointer-events: none; transition: var(--transition);} nav > ul > li:hover > ul{opacity: 1; visibility: visible; pointer-events: auto;} nav > ul > li > ul > li > a{display: flex; align-items: center; padding: 1rem; white-space: nowrap; background-color: white; font-size: 1.2rem; color: var(--text-color); letter-spacing: .06rem;} nav > ul > li > ul > li > a:hover{background-color: #e2e2e2; color: var(--primary);} nav > ul > li > a.active{color: var(--primary);} nav > ul > li.has-submenu > a > .icon svg{width: 1.2rem;} nav > ul > li.has-submenu > a.active > .icon svg{fill: var(--primary);} nav > ul > li.active > a{color: var(--primary);} nav > ul > li.active > a svg path{fill:var(--primary);} nav > ul > li.current > a{color: var(--primary);} } @media(width < 992px){ nav{position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: var(--primary); display: flex; align-items: center; justify-content: center; z-index: 999; opacity: 0; visibility: hidden; pointer-events: none;} nav.active{opacity: 1; visibility: visible; pointer-events: auto;} nav > ul > li:not(:last-child){margin-bottom: 2rem;} nav > ul > li > a{font-size: 1.8rem; font-weight: var(--fw-regular); transition: var(--transition); gap: 0 1rem;} nav > ul > li:hover > a{color: white;} nav > ul > li > a .icon i, nav > ul > li > a .icon svg{display: none;} nav > ul > li > a .icon::before, nav > ul > li > a .icon::after{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); content: ""; background-color: black; transition: var(--transition);} nav > ul > li > a .icon::before{width: 100%; height: .2rem;} nav > ul > li > a .icon::after{width: .2rem; height: 100%;} nav > ul > li > a .icon.active::after{display: none;} nav > ul > li:hover > a .icon::before, nav > ul > li:hover > a .icon::after{background-color: white;} nav > ul > li > ul{display: none; margin-top: 1rem;} nav > ul > li > ul > li > a{color: black; display: flex; justify-content: center; text-align: center; letter-spacing: .06rem; padding: .5rem 0; transition: var(--transition);} nav > ul > li > ul > li > a:hover{color: white;} nav > ul > li.has-submenu > a > .icon{width: 1.8rem; height: 1.8rem;} } /* Header End */ .grintec-header-border { margin: 0 auto; width: 100%; max-width: 16.8rem; height: 0.5rem; background-color: var(--primary); } /* Footer Start */ footer{padding: var(--lg) 0; background-color: var(--primary);} footer .container{display: flex; justify-content: space-between; gap: var(--gutter) var(--gutter); flex-wrap: wrap;} footer ul li{display: flex; justify-content: center;} footer ul li:not(:last-child){margin-bottom: var(--gutter);} footer ul li a{display: block; line-height: 1; color: white; font-size: var(--body-font-size); transition: var(--transition); text-align: center; white-space: nowrap;} footer ul li a:hover{color: black;} .footer-column > :not(:last-child){margin-bottom: var(--gutter);} footer p{color: white; font-size: var(--body-font-size); text-align: center; white-space: nowrap;} footer p a{color: white; text-decoration: underline; transition: var(--transition); white-space: nowrap;} footer p a:hover{color: black;} .social-media{display: flex; align-items: center; justify-content: center; gap: 1rem var(--gutter);} .social-media a{color: white; font-size: 2.5rem; transition: var(--transition);} .social-media a:hover{transform: translateY(-20%); opacity: 70%;} @media(width < 992px){ footer .container{display: block;} footer .container > :not(:last-child){margin-bottom: calc(var(--gutter) * 2);} } /* Footer End */ /* Hero Section Start */ header.position-fixed + .hero-section{margin-top: 0!important;} header.position-fixed + .hero-section .hero-section-content{padding-top: calc(var(--header-height) + var(--lg));} .hero-section{position: relative;} .hero-slider-shape{position: absolute; left: 0; bottom: -.4rem; width: 100%; height: 7.5rem; transform: rotate(180deg); z-index: 9;} .hero-slider-shape svg{width: 100%; height: 7.5rem;} .hero-slider-shape svg path{fill: #fff;} .hero-slide{min-height: 100svh; padding-bottom: var(--lg); text-align: center; background-size: cover; background-repeat: no-repeat; background-position: center center;} .hero-section-content{position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: var(--lg) 0; text-align: center; z-index: 9;} .hero-section-content h1, .hero-section-content h3{font-weight: var(--fw-semibold); color: white; line-height: 1; text-shadow: 0px 0px 13px rgba(0, 0, 0, 0.82);} .hero-section-content .container > :not(:last-child){margin-bottom: 2rem;} .hero-section-content .btn{box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);} @media(width < 768px){ .hero-slide{min-height: auto; height: calc(37rem + var(--header-height));} .hero-section-content .container{height: 100%; display: flex; flex-direction: column;} .hero-section-content .container div:last-child{flex: 1 0 0%; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4rem;} .hero-section-content h1{font-size: 3.8rem;} .hero-section-content h3{font-size: 1.9rem;} } /* Hero Section End */ /* Bg Section Start*/ .bg-section img{width: 100%;} /* Bg Section End*/ /* Services Section Start*/ .services{display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--md);} .service > :not(:last-child){margin-bottom: var(--guttter);} .service-icon{font-size: 10rem; color: var(--primary);} .service-icon > *{transition: var(--transition);} .service:hover .service-icon > *{transform: scale(1.1);} .service h5{font-weight: var(--fw-semibold);} .service h5 a{color: var(--text-color); text-decoration: underline; transition: var(--transition);} .service h5 a:hover{color: var(--primary);} @media(width < 992px){ .service-icon{font-size: 7rem;} } @media(width < 768px){ .services{grid-template-columns: 1fr;} } /* Services Section End*/ /* Testimonial Section Start*/ .testimonials{display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--md);} .testimonial > :not(:last-child){margin-bottom: var(--gutter);} .testimonial{text-align: center;} @media(width < 768px){ .testimonial > :not(:last-child){margin-bottom: 1.5rem;} .testimonials{grid-template-columns: 1fr;} } /* Testimonial Section End*/ .posts > :not(:last-child){margin-bottom: var(--lg);} @media(width > 991px){ .post-orders > :nth-child(odd) > figure{order:2;} } .contact-box{background-color: #e9eae7; padding: var(--gutter);} .contact-box-grid{max-width: 89rem; margin-inline: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter) 2rem;} .contact-item-icon{width: 6rem; height: 6rem; border-radius: .4rem; display: grid; place-items: center; background-color: var(--primary); margin-inline:auto; font-size: 3rem; color: white;} .contact-item-icon:not(:last-child){margin-bottom: 2rem;} .contact-item p.fs-md:not(:last-child){margin-bottom: .5rem;} @media(width < 768px){ .contact-box-grid{grid-template-columns: 1fr;} .contact-item-icon:not(:last-child){margin-bottom: 1rem;} } .logo-grid{display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem;} .logo-grid img{margin-inline: auto;} @media(width < 992px){ .logo-grid{grid-template-columns: repeat(3, 1fr);} } @media(width < 576px){ .logo-grid{grid-template-columns: repeat(2, 1fr);} } .quotes-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--md);} .quotes-item-footer:not(:first-child){margin-top: var(--gutter);} .quotes-item-footer p{font-size: 1rem;} .quotes-item-footer p strong{font-weight: var(--fw-semibold);} @media(width < 992px){ .quotes-grid{grid-template-columns: repeat(2, 1fr);} } @media(width < 768px){ .quotes-grid{grid-template-columns: repeat(1, 1fr);} } .partners-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--md);} @media(width < 992px){ .partners-grid{grid-template-columns: repeat(3, 1fr);} } @media(width < 768px){ .partners-grid{grid-template-columns: repeat(2, 1fr);} } @media(width < 481px){ .partners-grid{grid-template-columns: repeat(1, 1fr);} } .events-section{padding: var(--gutter) 0; background-image:url("/media/bg_fixed_events_filter.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; } .events-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: 4rem;} .event-column > :not(:last-child){margin-bottom: 4rem;} .event-item{background-color: white; display: flex;} .event-item figure, .event-item .event-item-image{width: 20rem; background-color: #e9eae7; background-size: cover; background-repeat: no-repeat; background-position: center center;} .event-item figure img{object-fit: cover; width: 100%; height: 100%;} .event-item-content{flex: 1; padding: 3rem;} .event-item-content > :not(:last-child){margin-bottom: 1rem;} .event-item-content > .btn-wrap{text-align: center;} .event-item-content > .btn-wrap:not(:first-child){margin-top: 2rem;} @media(width < 1200px){ .events-grid{gap: 2rem;} .event-column > :not(:last-child){margin-bottom: 2rem;} .event-item figure, .event-item .event-item-image{width: 15rem;} .event-item-content{padding: 2rem;} } @media(width < 992px){ .events-grid{grid-template-columns: 1fr;} } @media(width < 481px){ .event-item figure, .event-item .event-item-image{height: 20rem; width: 100%;} .event-item{display: block;} } .grintec-details-section{padding: var(--gutter) 0;} .grintec-details-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter);} .grintec-details > :not(:last-child){margin-bottom: 2rem;} .grintec-details > *{color: white;} .about-ceo-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); align-items: center;} .about-ceo figure:not(:last-child){margin-bottom: 2rem;} .about-ceo h6:not(:last-child){margin-bottom: 3rem;} .about-ceo h6::after{max-width: 8rem;} .ceo-quote{line-height: 1.6;} @media(width < 992px){ .about-ceo-grid{grid-template-columns: 1fr;} } @media(width < 768px){ .grintec-details-grid{grid-template-columns: 1fr;} } .team-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 5rem 2rem;} .team-grid.team-grid-colum-3{grid-template-columns: repeat(3, 1fr);} .team figure:not(:last-child){margin-bottom: 1rem;} .team h6{font-weight: var(--fw-semibold);} .team h6:not(:last-child){margin-bottom: 1.5rem;} @media(width < 992px){ .team-grid{grid-template-columns: repeat(3, 1fr);} } @media(width < 768px){ .team-grid{grid-template-columns: repeat(2, 1fr);} .team-grid.team-grid-colum-3{grid-template-columns: repeat(2, 1fr);} } @media(width < 481px){ .team-grid{grid-template-columns: 1fr;} .team-grid.team-grid-colum-3{grid-template-columns: 1fr;} } .geoinformation-service .icon{font-size: 3rem; color: var(--primary);} .geoinformation-service .icon:not(:last-child){margin-bottom: 2rem;} .geoinformation-service .icon{font-size: 5rem;} .sw figure img{max-height: 13rem;} .sw figure:not(:last-child){margin-bottom: var(--gutter);} @media(width < 992px){ .sw figure img{max-height: 10rem;} .sw figure:not(:last-child){margin-bottom: 2rem;} } .geoinformation-bg-section{min-height: 87.5rem; display: flex; align-items: center; background-size: cover; background-repeat: no-repeat; background-position: center center; background-image: url('https://placehold.co/600x400');} .geoinformation-bg-section h5{max-width: 36rem; text-align: center; color: white; text-shadow: 0 0 1rem rgba(0,0,0,30%);} @media(width < 1200px){ .geoinformation-bg-section{min-height: 60rem;} } @media(width < 992px){ .geoinformation-bg-section{min-height: 50rem;} } @media(width < 768px){ .geoinformation-bg-section{min-height: 40rem;} .geoinformation-bg-section h5{margin: 0 auto;} } .photo-taken:not(:first-child){margin-top: 1rem;} .photo-taken{font-size: 1rem; color: var(--grey); text-decoration: underline; display: inline-block;} .photo-taken:hover{text-decoration: none;} .buttons-grid{display: grid; gap: var(--md);} .buttons-grid > *{text-align: center;} @media(width > 991px){ .buttons-grid{grid-template-columns: repeat(4, 1fr);} .buttons-grid > :nth-child(2){grid-column: span 2;} .buttons-grid > :nth-child(4){grid-column: span 2;} .buttons-grid > :nth-child(5){grid-column: span 2;} } @media(width < 992px){ .buttons-grid{grid-template-columns: repeat(2, 1fr);} } @media(width < 768px){ .buttons-grid{grid-template-columns: 1fr;} } .work-with-us-column{color: white; display: flex; flex-direction: column; align-items: center; gap: 2rem; text-align: center;} .work-with-us-column i, .work-with-us-column svg{font-size: 7rem; font-weight: 900;} @keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } } .work-with-us-column i:hover, .work-with-us-column svg:hover{ animation-name: shake; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1; } .work-with-us-column .btn{border: .2rem solid white;} .work-with-us-column .btn.btn-grey:hover{background-color: var(--grey); transform: scale(1.1);} .work-with-us-intro{position: relative;} .work-with-us-intro:after { top: 100%; left: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(136, 183, 213, 0); border-top-color: var(--primary); border-width: 25px; margin-left: -25px; } .image-gallery-grid{display: grid; gap: var(--gutter); grid-template-columns: 2fr 1fr;} .image-gallery-grid > * > :not(:last-child){margin-bottom: var(--gutter);} .image-gallery-grid figure.h-100{height: 100%;} .image-gallery-grid > :last-child{display: flex; flex-direction: column;} .image-gallery-grid > :last-child > *{flex: 1;} .image-gallery-grid > :last-child > * > img{object-fit: cover; width: 100%; height: 100%;} @media(width < 768px){ .image-gallery-grid{gap: 1rem;} .image-gallery-grid > * > :not(:last-child){margin-bottom: 1rem;} } @media(width < 640px){ .image-gallery-grid{grid-template-columns: 1fr;} } /* News Gallery Grid */ .news-gallery-grid{display: grid; gap: var(--gutter); grid-template-columns: 2fr 3fr;} .news-gallery-grid > * > :not(:last-child){margin-bottom: var(--gutter);} @media(width < 640px){ .news-gallery-grid{grid-template-columns: 1fr;} } /* News Gallery Grid 2 */ .news-gallery-grid2{display: grid; gap: var(--gutter); grid-template-columns: 2fr 2fr 2fr;} .news-gallery-grid2 > * > :not(:last-child){margin-bottom: var(--gutter);} .news-gallery-grid2 figure.h-100{height: 100%;} .news-gallery-grid2 > :last-child{display: flex; flex-direction: column;} .news-gallery-grid2 > :last-child > *{flex: 1;} .news-gallery-grid2 > :last-child > * > img{object-fit: cover; width: 100%; height: 100%;} @media(width < 768px){ .news-gallery-grid2{gap: 1rem;} .news-gallery-grid2 > * > :not(:last-child){margin-bottom: 1rem;} } @media(width < 640px){ .news-gallery-grid2{grid-template-columns: 1fr;} } /* Impressum Grid */ .imprint-grid{display: grid; gap: var(--gutter); grid-template-columns: 1fr 2fr;} @media(width < 640px){ .imprint-grid{grid-template-columns: 1fr;} } .banner-image{margin-top: var(--gutter);} @media(width < 768px){ .banner-image{margin-top: 1rem;} } .benefit-icon{height: 4rem; display: flex; align-items: center; justify-content: center;} .benefits i, .benefits svg{color: var(--primary); font-size: 3rem; display: block; line-height: 1;} .testimonial-slider-wrap{padding: 0 3rem; position: relative;} .slider-arrow{position: absolute; top: 50%; transform:translateY(-50%);} .slider-arrow.slider-arrow-prev{left: 0;} .slider-arrow.slider-arrow-next{right: 0;} .testimonial-item h6{font-weight: var(--fw-semibold); margin-bottom: 1rem;} .testimonial-item p{position: relative;} .testimonial-item p::before{color: #ccc; content: "\201C"; font-size: 4em; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.4em;} .testimonial-item p::after{content: "\201D"; font-size: 4em; line-height: 0.1em; margin-left: 3px; vertical-align: -0.5em; color: #ccc;} .swiper-fade .swiper-slide{opacity: 0 !important;} .swiper-fade .swiper-slide.swiper-slide-active{opacity: 1 !important;} .slider-arrow{font-size: 3rem; cursor: pointer;} .testimonial-slider .swiper-pagination{position: static; margin-top: 2rem; display: flex; align-items: center; justify-content: center; gap: .5rem;} .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{margin: 0; width: 1rem; height: 1rem; border: .1rem solid black; background: none; opacity: 1;} .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active{background-color: black;} /* Modul: Gridblock (Zusatzeinstellungen ab CS v1.2.6) */ .gridblock { /*margin: 0px;*/ padding: 0px; --GBcolumns: 1; --GBgap: 0px; } .gridtemplate-2col { --GBcolumns: 2; } .gridtemplate-3col { --GBcolumns: 3; } .gridtemplate-4col { --GBcolumns: 4; } .gridtemplate-5col { --GBcolumns: 5; } .gridtemplate-6col { --GBcolumns: 6; } .gridblock, .gridblock .tmpl, .gridblock .row, .gridblock .col { box-sizing: border-box; position: relative; background-repeat: no-repeat; --margin-divisor: 1; --padding-divisor: 1; } .gridblock .tmpl { z-index: 5; } .gridblock .row { display: flex; flex-wrap: wrap; margin: 0px; z-index: 5; } .gridblock .col { display: flex; flex-grow: 1; margin: 0px auto; width: calc((100% / var(--GBcolumns)) - var(--GBgap) + (var(--GBgap) / var(--GBcolumns))); } .gridblock .col.wAuto { width: auto !important; margin-left: auto !important; margin-right: auto !important; } .gridblock .col.wFull { width: 100% !important; } .gridblock .col.wHalf { width: calc(50% - var(--GBgap) + (var(--GBgap) / var(--GBcolumns))) !important; } .gridtemplate-80-20 .col, .gridtemplate-20-80 .col { width: calc(20% - var(--GBgap) + (var(--GBgap) / var(--GBcolumns))); } .gridtemplate-80-20 .col:nth-child(1), .gridtemplate-20-80 .col:nth-child(2) { width: calc(80% - var(--GBgap) + (var(--GBgap) / var(--GBcolumns))); } .gridtemplate-70-30 .col, .gridtemplate-30-70 .col { width: calc(30% - var(--GBgap) + (var(--GBgap) / var(--GBcolumns))); } .gridtemplate-70-30 .col:nth-child(1), .gridtemplate-30-70 .col:nth-child(2) { width: calc(70% - var(--GBgap) + (var(--GBgap) / var(--GBcolumns))); } .gridtemplate-60-40 .col, .gridtemplate-40-60 .col { width: calc(40% - var(--GBgap) + (var(--GBgap) / var(--GBcolumns))); } .gridtemplate-60-40 .col:nth-child(1), .gridtemplate-40-60 .col:nth-child(2) { width: calc(60% - var(--GBgap) + (var(--GBgap) / var(--GBcolumns))); } .gridtemplate-25-50-25 .col, .gridtemplate-50-25-25 .col, .gridtemplate-25-25-50 .col { width: calc(25% - var(--GBgap) + (var(--GBgap) / var(--GBcolumns))); } .gridtemplate-25-50-25 .col:nth-child(2), .gridtemplate-50-25-25 .col:nth-child(1), .gridtemplate-25-25-50 .col:nth-child(3) { width: calc(50% - var(--GBgap) + (var(--GBgap) / var(--GBcolumns))); } .gridtemplate-16-67-16 .col, .gridtemplate-67-16-16 .col, .gridtemplate-16-16-67 .col { width: calc(16.5% - var(--GBgap) + (var(--GBgap) / var(--GBcolumns))); } .gridtemplate-16-67-16 .col:nth-child(2), .gridtemplate-67-16-16 .col:nth-child(1), .gridtemplate-16-16-67 .col:nth-child(3) { width: calc(67% - var(--GBgap) + (var(--GBgap) / var(--GBcolumns))); } .gridblock .col > div { position: relative; z-index: 5; } /* Inhaltsebene */ @supports (gap: 1px) { .gridblock .cGap-xs { --GBgap: var(--gap-xs); gap: var(--GBgap); } .gridblock .cGap-sm { --GBgap: var(--gap-sm); gap: var(--GBgap); } .gridblock .cGap-md { --GBgap: var(--gap-md); gap: var(--GBgap); } .gridblock .cGap-lg { --GBgap: var(--gap-lg); gap: var(--GBgap); } .gridblock .cGap-xl { --GBgap: var(--gap-xl); gap: var(--GBgap); } } .gridblock .ca-cc { align-items: center; justify-content: center; } .gridblock .ca-lt { align-items: flex-start; justify-content: flex-start; } .gridblock .ca-rt { align-items: flex-start; justify-content: flex-end; } .gridblock .ca-rb { align-items: flex-end; justify-content: flex-end; } .gridblock .ca-lb { align-items: flex-end; justify-content: flex-start; } .gridblock .ca-ct { align-items: flex-start; justify-content: center; } .gridblock .ca-cr { align-items: center; justify-content: flex-end; } .gridblock .ca-cb { align-items: flex-end; justify-content: center; } .gridblock .ca-cl { align-items: center; justify-content: flex-start; } .gridblock .cs-width > div { width: 100%; } .gridblock .cs-height > div { height: 100%; } .gridblock .cs-full > div { width: 100%; height: 100%; } .gridblock .bc-dark * { color: var(--col-dark); } .gridblock .bc-light * { color: var(--col-light); } .gridblock .colsReverse { flex-direction: row-reverse; } .gridblock .height100p { align-self: auto; } .gridblock .brd.brd-solid { border-style: solid; } /* klassischer Border */ .gridblock .brd.brd-double { border-style: double; } .gridblock .brd.brd-dotted { border-style: dotted; } .gridblock .brd.brd-dashed { border-style: dashed; } .gridblock .brd.brd-groove { border-style: groove; } .gridblock .brd.brdCol-primary { border-color: var(--col-primary); } .gridblock .brd.brdCol-secondary { border-color: var(--col-secondary); } .gridblock .brd.brdCol-accent { border-color: var(--col-accent); } .gridblock .brd.brdT-none { border-top: none; } .gridblock .brd.brdR-none { border-right: none; } .gridblock .brd.brdB-none { border-bottom: none; } .gridblock .brd.brdL-none { border-left: none; } .gridblock .brdOutline.brd-solid { outline-style: solid; } /* Ouline-Border */ .gridblock .brdOutline.brd-double { outline-style: double; } .gridblock .brdOutline.brd-dotted { outline-style: dotted; } .gridblock .brdOutline.brd-dashed { outline-style: dashed; } .gridblock .brdOutline.brd-groove { outline-style: groove; } .gridblock .brdOutline.brdCol-primary { outline-color: var(--col-primary); } .gridblock .brdOutline.brdCol-secondary { outline-color: var(--col-secondary); } .gridblock .brdOutline.brdCol-accent { outline-color: var(--col-accent); } .gridblock .divi { position: relative; display: block; width: 100%; margin: 0px; padding: 0px; overflow: hidden; line-height: 0; border: none; z-index: 3; } .gridblock .divi-aboveContent { z-index: 20; } .gridblock .divi-inside { position: absolute; left: 0px; } .gridblock .divi-top.divi-inside { top: -1px; } .gridblock .divi-bottom.divi-inside { bottom: -1px; } .gridblock .divi-outside {} .gridblock .divi-top.divi-outside { top: 1px; } .gridblock .divi-bottom.divi-outside { bottom: 1px; } .gridblock .divi > * { display: block; position: relative; left: 50%; transform: translateX(-50%); overflow: hidden; border: none; background: none !important; max-width: none !important; transition: all 0.3s ease; } .gridblock .divi.divi-flipX > * { transform: translateX(-50%) rotateY(180deg); } .gridblock .divi.divi-flipY > * { transform: translateX(-50%) rotateX(180deg); } .gridblock .divi.divi-flipX.divi-flipY > * { transform: translateX(-50%) rotateX(180deg) rotateY(180deg); } .gridblock .divi svg.bgCol-primary > * { fill: var(--col-primary); } .gridblock .divi svg.bgCol-secondary > * { fill: var(--col-secondary); } .gridblock .divi svg.bgCol-accent > * { fill: var(--col-accent); } .gridblock .divi img { height: auto; } @media screen and (max-width:1650px){ /* 6-Spalter umstellen auf: 3/3 */ .gridtemplate-6col .col { --GBcolumns: 3; } } @media screen and (max-width:1500px){ /* 4-Spalter umstellen auf: 2/2 | 5-Spalter umstellen auf: 1/2/2 */ .gridtemplate-4col .col, .gridtemplate-5col .col { --GBcolumns: 2; width: calc((100% / var(--GBcolumns)) - var(--GBgap) + (var(--GBgap) / var(--GBcolumns))); } .gridtemplate-5col .col:nth-child(1) { width: calc(100% - var(--GBgap) + (var(--GBgap) / var(--GBcolumns))); } } @media screen and (max-width:1200px){ /* 6-Spalter umstellen auf: 2/2/2 */ .gridtemplate-6col .col { --GBcolumns: 2; width: calc((100% / var(--GBcolumns)) - var(--GBgap) + (var(--GBgap) / var(--GBcolumns))); } } @media screen and (max-width:1100px){ /* 3-Spalter umstellen auf: einzeilig | 2-Spalter (70-30 & 30-70) umstellen auf: einzeilig */ .gridtemplate-3col .col, .gridtemplate-70-30 .col, .gridtemplate-30-70 .col { --GBcolumns: 1; width: 100%; } .gridtemplate-3col .col.posOnMobile, .gridtemplate-70-30 .col.posOnMobile, .gridtemplate-30-70 .col.posOnMobile { top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; } .gridtemplate-3col .col.posOnMobileV, .gridtemplate-70-30 .col.posOnMobileV, .gridtemplate-30-70 .col.posOnMobileV { right: auto !important; left: auto !important; } .gridtemplate-3col .ca-ml, .gridtemplate-70-30 .ca-ml, .gridtemplate-30-70 .ca-ml { justify-content: flex-start !important; } .gridtemplate-3col .ca-mc, .gridtemplate-70-30 .ca-mc, .gridtemplate-30-70 .ca-mc { justify-content: center !important; } .gridtemplate-3col .ca-mr, .gridtemplate-70-30 .ca-mr, .gridtemplate-30-70 .ca-mr { justify-content: flex-end !important; } } @media screen and (max-width:1000px){ /* Blöcke */ .width-margin { margin-left: 30px; margin-right: 30px; } } @media screen and (max-width:920px){ /* ab hier nur noch Tablet-Version */ /* globale Klassen für Inhalte + Module */ .mgT-xs.mgOnlyMobile { margin-top: calc(var(--margin-xs) * var(--margin-divisor)) !important; } .mgT-sm.mgOnlyMobile { margin-top: calc(var(--margin-sm) * var(--margin-divisor)) !important; } .mgT-md.mgOnlyMobile { margin-top: calc(var(--margin-md) * var(--margin-divisor)) !important; } .mgT-lg.mgOnlyMobile { margin-top: calc(var(--margin-lg) * var(--margin-divisor)) !important; } .mgT-xl.mgOnlyMobile { margin-top: calc(var(--margin-xl) * var(--margin-divisor)) !important; } .mgB-xs.mgOnlyMobile { margin-bottom: calc(var(--margin-xs) * var(--margin-divisor)) !important; } .mgB-sm.mgOnlyMobile { margin-bottom: calc(var(--margin-sm) * var(--margin-divisor)) !important; } .mgB-md.mgOnlyMobile { margin-bottom: calc(var(--margin-md) * var(--margin-divisor)) !important; } .mgB-lg.mgOnlyMobile { margin-bottom: calc(var(--margin-lg) * var(--margin-divisor)) !important; } .mgB-xl.mgOnlyMobile { margin-bottom: calc(var(--margin-xl) * var(--margin-divisor)) !important; } .mgNT-xs.mgOnlyMobile { margin-top: calc(var(--margin-neg-xs) * var(--margin-divisor)) !important; } .mgNT-sm.mgOnlyMobile { margin-top: calc(var(--margin-neg-sm) * var(--margin-divisor)) !important; } .mgNT-md.mgOnlyMobile { margin-top: calc(var(--margin-neg-md) * var(--margin-divisor)) !important; } .mgNT-lg.mgOnlyMobile { margin-top: calc(var(--margin-neg-lg) * var(--margin-divisor)) !important; } .mgNT-xl.mgOnlyMobile { margin-top: calc(var(--margin-neg-xl) * var(--margin-divisor)) !important; } .mgNB-xs.mgOnlyMobile { margin-bottom: calc(var(--margin-neg-xs) * var(--margin-divisor)) !important; } .mgNB-sm.mgOnlyMobile { margin-bottom: calc(var(--margin-neg-sm) * var(--margin-divisor)) !important; } .mgNB-md.mgOnlyMobile { margin-bottom: calc(var(--margin-neg-md) * var(--margin-divisor)) !important; } .mgNB-lg.mgOnlyMobile { margin-bottom: calc(var(--margin-neg-lg) * var(--margin-divisor)) !important; } .mgNB-xl.mgOnlyMobile { margin-bottom: calc(var(--margin-neg-xl) * var(--margin-divisor)) !important; } .hideOnMobile { display: none !important; } .content-onlymobile { display: block !important; } .pdT-15px { padding-top: calc(15px * var(--padding-divisor)); } .pdB-15px { padding-bottom: calc(15px * var(--padding-divisor)); } .pdH-15px { padding-left: calc(15px * var(--padding-divisor)); padding-right: calc(15px * var(--padding-divisor)); } .pdT-sm { padding-top: calc(var(--padding-sm) * var(--padding-divisor)); } .pdT-md { padding-top: calc(var(--padding-md) * var(--padding-divisor)); } .pdT-lg { padding-top: calc(var(--padding-lg) * var(--padding-divisor)); } .pdT-xl { padding-top: calc(var(--padding-xl) * var(--padding-divisor)); } .pdT-smp { padding-top: calc(var(--padding-smp) * var(--padding-divisor)); } .pdT-mdp { padding-top: calc(var(--padding-mdp) * var(--padding-divisor)); } .pdT-lgp { padding-top: calc(var(--padding-lgp) * var(--padding-divisor)); } .pdT-xlp { padding-top: calc(var(--padding-xlp) * var(--padding-divisor)); } .pdB-sm { padding-bottom: calc(var(--padding-sm) * var(--padding-divisor)); } .pdB-md { padding-bottom: calc(var(--padding-md) * var(--padding-divisor)); } .pdB-lg { padding-bottom: calc(var(--padding-lg) * var(--padding-divisor)); } .pdB-xl { padding-bottom: calc(var(--padding-xl) * var(--padding-divisor)); } .pdB-smp { padding-bottom: calc(var(--padding-smp) * var(--padding-divisor)); } .pdB-mdp { padding-bottom: calc(var(--padding-mdp) * var(--padding-divisor)); } .pdB-lgp { padding-bottom: calc(var(--padding-lgp) * var(--padding-divisor)); } .pdB-xlp { padding-bottom: calc(var(--padding-xlp) * var(--padding-divisor)); } .pdH-sm { padding-left: calc(var(--padding-sm) * var(--padding-divisor)); padding-right: calc(var(--padding-sm) * var(--padding-divisor)); } .pdH-md { padding-left: calc(var(--padding-md) * var(--padding-divisor)); padding-right: calc(var(--padding-md) * var(--padding-divisor)); } .pdH-lg { padding-left: calc(var(--padding-lg) * var(--padding-divisor)); padding-right: calc(var(--padding-lg) * var(--padding-divisor)); } .pdH-xl { padding-left: calc(var(--padding-xl) * var(--padding-divisor)); padding-right: calc(var(--padding-xl) * var(--padding-divisor)); } .pdH-smp { padding-left: calc(var(--padding-smp) * var(--padding-divisor)); padding-right: calc(var(--padding-smp) * var(--padding-divisor)); } .pdH-mdp { padding-left: calc(var(--padding-mdp) * var(--padding-divisor)); padding-right: calc(var(--padding-mdp) * var(--padding-divisor)); } .pdH-lgp { padding-left: calc(var(--padding-lgp) * var(--padding-divisor)); padding-right: calc(var(--padding-lgp) * var(--padding-divisor)); } .pdH-xlp { padding-left: calc(var(--padding-xlp) * var(--padding-divisor)); padding-right: calc(var(--padding-xlp) * var(--padding-divisor)); } .mgT-xs:not(.mgOnlyMobile) { margin-top: calc(var(--margin-xs) * var(--margin-divisor)) !important; } .mgT-sm:not(.mgOnlyMobile) { margin-top: calc(var(--margin-sm) * var(--margin-divisor)) !important; } .mgT-md:not(.mgOnlyMobile) { margin-top: calc(var(--margin-md) * var(--margin-divisor)) !important; } .mgT-lg:not(.mgOnlyMobile) { margin-top: calc(var(--margin-lg) * var(--margin-divisor)) !important; } .mgT-xl:not(.mgOnlyMobile) { margin-top: calc(var(--margin-xl) * var(--margin-divisor)) !important; } .mgB-xs:not(.mgOnlyMobile) { margin-bottom: calc(var(--margin-xs) * var(--margin-divisor)) !important; } .mgB-sm:not(.mgOnlyMobile) { margin-bottom: calc(var(--margin-sm) * var(--margin-divisor)) !important; } .mgB-md:not(.mgOnlyMobile) { margin-bottom: calc(var(--margin-md) * var(--margin-divisor)) !important; } .mgB-lg:not(.mgOnlyMobile) { margin-bottom: calc(var(--margin-lg) * var(--margin-divisor)) !important; } .mgB-xl:not(.mgOnlyMobile) { margin-bottom: calc(var(--margin-xl) * var(--margin-divisor)) !important; } .mgNT-xs:not(.mgOnlyMobile) { margin-top: calc(var(--margin-neg-xs) * var(--margin-divisor)) !important; } .mgNT-sm:not(.mgOnlyMobile) { margin-top: calc(var(--margin-neg-sm) * var(--margin-divisor)) !important; } .mgNT-md:not(.mgOnlyMobile) { margin-top: calc(var(--margin-neg-md) * var(--margin-divisor)) !important; } .mgNT-lg:not(.mgOnlyMobile) { margin-top: calc(var(--margin-neg-lg) * var(--margin-divisor)) !important; } .mgNT-xl:not(.mgOnlyMobile) { margin-top: calc(var(--margin-neg-xl) * var(--margin-divisor)) !important; } .mgNB-xs:not(.mgOnlyMobile) { margin-bottom: calc(var(--margin-neg-xs) * var(--margin-divisor)) !important; } .mgNB-sm:not(.mgOnlyMobile) { margin-bottom: calc(var(--margin-neg-sm) * var(--margin-divisor)) !important; } .mgNB-md:not(.mgOnlyMobile) { margin-bottom: calc(var(--margin-neg-md) * var(--margin-divisor)) !important; } .mgNB-lg:not(.mgOnlyMobile) { margin-bottom: calc(var(--margin-neg-lg) * var(--margin-divisor)) !important; } .mgNB-xl:not(.mgOnlyMobile) { margin-bottom: calc(var(--margin-neg-xl) * var(--margin-divisor)) !important; } /* Gridblock: alle Spalten umstellen auf einzeilig */ .gridblock .col { --GBcolumns: 1; width: 100% !important; } .gridblock .col.posOnMobile { top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; } .gridblock .col.posOnMobileV { right: auto !important; left: auto !important; } .gridblock .colsReverse, .gridblock .colsMobileReverse { flex-direction: column-reverse; } .gridblock:not(.gridtemplate-1col) .colsMobileMargin, .gridblock:not(.gridtemplate-1col) .colsNoMobileMargin { --GBgap: 0px !important; } .gridblock:not(.gridtemplate-1col) .colsMobileMargin .col { margin-top: 30px !important; } .gridblock:not(.gridtemplate-1col) .colsNoMobileMargin .col:not(.mgT), .gridblock:not(.gridtemplate-1col) .colsMobileMargin:not(.colsReverse):not(.colsMobileReverse) .col:not(.mgT).col:first-child, .gridblock:not(.gridtemplate-1col) .colsMobileMargin.colsMobileReverse .col:not(.mgT).col:last-child, .gridblock:not(.gridtemplate-1col) .colsMobileMargin.colsReverse .col:not(.mgT).col:last-child { margin-top: 0px !important; } .gridblock .mgAOnlyMobile { margin-top: 0px !important; margin-bottom: 0px !important; } .gridblock .ca-ml { justify-content: flex-start !important; } .gridblock .ca-mc { justify-content: center !important; } .gridblock .ca-mr { justify-content: flex-end !important; } } @media screen and (max-width:560px){ /* Blöcke */ .width-margin { margin-left: 15px; margin-right: 15px; } }