/* PROJECT NAME: haufe-style.css - PROJECT TYPE: CSS */ /* ######################## GENERAL CSS ######################## */ /* HIDE BAR 4 WEEKS */ .bar4weeks {display: none;} /* HIDE HEADER */ /* #header {display: none;} */ /* HIDE HEADER SEARCH BAR */ /* #searchBar {display: none;} */ /* HIDE HEADER SHOPPING CART ICON */ /* #MiniShoppingCart, #headerAccount {display: none;} */ /* HIDE NAVI MOBILE VIEW SEARCH BAR */ /* #header.show-search nav.visible-burger {display: none;} */ /* HIDE PAGE CHAT */ /* #serviceBoxWrapper #serviceBox {display: none;} */ /* ################################################ CONTAINER ################################################ */ /* CONTAINER */ div[id^="pgl_container_"] *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} /* SECTION FONT FAMILY */ body.FontFamily, body .FontFamily, .FontFamily input {font-family: ABCFavorit, Arial, sans-serif; font-style: normal; letter-spacing: normal;} /* SECTION FONT COLOR */ div[id^="pgl_container_"] .FontColor {color: #001344;} /* SECTION CONTENT WRAPPER */ div[id^="pgl_container_"] .ContentWrapper {max-width: 1260px; margin:0 auto; padding: 0 10px;} @media (min-width:480px){div[id^="pgl_container_"] .ContentWrapper{padding:0 30px}} /* PDS CONTENT WRAPPER */ div[id^="pgl_container_"] .ContentWrapperPDS {max-width: 1450px; margin:0 auto; padding: 0 10px;} @media (min-width:480px){div[id^="pgl_container_"] .ContentWrapperPDS{padding:0 30px}} /* SECTION HERO PADDING */ div[id^="pgl_container_"] .PaddingSectionHero {padding-top: 12%; padding-bottom: 8%;} @media (min-width: 950px){div[id^="pgl_container_"] .PaddingSectionHero {padding-top: 5%; padding-bottom: 3%;}} /* SECTION HERO PADDING FIX (WhiteBarFix Integrated!) */ div[id^="pgl_container_"] .PaddingSectionHeroFix {padding-top: 7%; padding-bottom: 8%;} @media (min-width: 481px){div[id^="pgl_container_"] .PaddingSectionHeroFix {padding-top: 1%; padding-bottom: 3%;}} /* SECTION PADDING */ div[id^="pgl_container_"] .PaddingSection {padding-top: 8%; padding-bottom: 8%;} @media (min-width: 481px){div[id^="pgl_container_"] .PaddingSection {padding-top: 3%; padding-bottom: 3%;}} div[id^="pgl_container_"] .PaddingSection2 {padding-top: 6%; padding-bottom: 6%;} @media (min-width: 481px){div[id^="pgl_container_"] .PaddingSection2 {padding-top: 2%; padding-bottom: 2%;}} div[id^="pgl_container_"] .PaddingSection1 {padding-top: 6%; padding-bottom: 6%;} @media (min-width: 481px){div[id^="pgl_container_"] .PaddingSection1 {padding-top: 1%; padding-bottom: 1%;}} div[id^="pgl_container_"] .PaddingSectionTop1 {padding-top: 6%;} @media (min-width: 481px){div[id^="pgl_container_"] .PaddingSectionTop1 {padding-top: 1%;}} div[id^="pgl_container_"] .PaddingSectionTop2 {padding-top: 6%;} @media (min-width: 481px){div[id^="pgl_container_"] .PaddingSectionTop2 {padding-top: 2%;}} div[id^="pgl_container_"] .PaddingSectionTop3 {padding-top: 8%;} @media (min-width: 481px){div[id^="pgl_container_"] .PaddingSectionTop3 {padding-top: 3%;}} div[id^="pgl_container_"] .PaddingSectionTop10 {padding-top: 15%;} @media (min-width: 481px){div[id^="pgl_container_"] .PaddingSectionTop10 {padding-top: 10%;}} div[id^="pgl_container_"] .PaddingSectionBottom1 {padding-bottom: 6%;} @media (min-width: 481px){div[id^="pgl_container_"] .PaddingSectionBottom1 {padding-bottom: 1%;}} div[id^="pgl_container_"] .PaddingSectionBottom2 {padding-bottom: 6%;} @media (min-width: 481px){div[id^="pgl_container_"] .PaddingSectionBottom2 {padding-bottom: 2%;}} div[id^="pgl_container_"] .PaddingSectionBottom3 {padding-bottom: 8%;} @media (min-width: 481px){div[id^="pgl_container_"] .PaddingSectionBottom3 {padding-bottom: 3%;}} /* SECTION FORM PADDING */ div[id^="pgl_container_"] .PaddingSectionForm {padding-top: 7%; padding-bottom: 8%;} @media (min-width: 481px){div[id^="pgl_container_"] .PaddingSectionForm {padding-top: 1%; padding-bottom: 3%;}} /* SECTION FLEX CONTAINER */ div[id^="pgl_container_"] .FlexCenter {display: flex; align-items: center;} /* ################################################ FONTS & ICONS ################################################ */ /* @font-face{font-family:'ABCFavorit';src:url('https://haufe.static.esales.haufe.io/fonts/ABCFavorit/ABCFavorit-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'ABCFavorit';src:url('https://haufe.static.esales.haufe.io/fonts/ABCFavorit/ABCFavorit-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} */ @font-face{font-family:'haufeshop_iconfont-lighthouse';src:url('https://haufe.static.esales.haufe.io/wcsstore/HaufeLHStorefrontAssetStore/V_release-9118-ES-25-10537_V/fonts/haufeshop_iconfont-lighthouse.woff') format('woff');font-weight:400;font-style:normal;font-display:swap;} .FontIcon{font-family:'Material Symbols Sharp';font-weight:normal;font-style:normal;font-size:3rem;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-moz-font-feature-settings:'liga';font-feature-settings:'liga';-moz-osx-font-smoothing:grayscale;font-display: swap;} /* ################################################ FONT ################################################ */ /* UNIVERSAL PARAMETERS */ /* body, .TextWrapper,.TitleWrapper,p,h1,h2,h3,h4,h5,h6,li{word-break:break-word;overflow-wrap:break-word} */ /* FONT SETUP MOBILE */ div[id^="pgl_container_"] {font-size: 1rem !important;} /* 16px */ div[id^="pgl_container_"] h1 {font-size: 2.4em; line-height: 1.3; font-weight: 400; margin-bottom: 0!important;} div[id^="pgl_container_"] h2 {font-size: 2.0em; line-height: 1.3; font-weight: 400; margin-bottom: 0!important;} div[id^="pgl_container_"] h3 {font-size: 1.8em; line-height: 1.3; font-weight: 400; margin-bottom: 0!important;} div[id^="pgl_container_"] h4 {font-size: 1.4em; line-height: 1.3; font-weight: 400; margin-bottom: 0!important;} div[id^="pgl_container_"] h5 {font-size: 1.3em; line-height: 1.3; font-weight: 400; margin-bottom: 0!important;} div[id^="pgl_container_"] li {font-size: 1.1em; line-height: 1.4; font-weight: 400; margin-bottom: 0;} div[id^="pgl_container_"] a {font-size: 1em; line-height: 1.3; font-weight: 400;} div[id^="pgl_container_"] p {font-size: 1.1em; line-height: 1.3; font-weight: 400;} div[id^="pgl_container_"] .Fs07 {font-size: 0.6em; line-height: 1.4; font-weight: 400;} div[id^="pgl_container_"] .Fs08 {font-size: 0.7em; line-height: 1.4; font-weight: 400;} div[id^="pgl_container_"] .Fs09 {font-size: 0.8em; line-height: 1.4; font-weight: 400;} div[id^="pgl_container_"] .Fs10 {font-size: 1.0em; line-height: 1.4; font-weight: 400;} div[id^="pgl_container_"] .Fs11 {font-size: 1.1em; line-height: 1.4; font-weight: 400;} div[id^="pgl_container_"] .Fs12 {font-size: 1.1em; line-height: 1.4; font-weight: 400;} div[id^="pgl_container_"] .Fs13 {font-size: 1.1em; line-height: 1.3; font-weight: 400;} div[id^="pgl_container_"] .Fs14 {font-size: 1.2em; line-height: 1.3; font-weight: 400;} div[id^="pgl_container_"] .Fs15 {font-size: 1.3em; line-height: 1.3; font-weight: 400;} div[id^="pgl_container_"] .Fs16 {font-size: 1.4em; line-height: 1.3; font-weight: 400;} div[id^="pgl_container_"] .Fs17 {font-size: 1.5em; line-height: 1.3; font-weight: 400;} div[id^="pgl_container_"] .Fs18 {font-size: 1.6em; line-height: 1.3; font-weight: 400;} div[id^="pgl_container_"] .Fs19 {font-size: 1.7em; line-height: 1.3; font-weight: 400;} div[id^="pgl_container_"] .Fs20 {font-size: 1.75em; line-height: 1.2; font-weight: 400;} div[id^="pgl_container_"] .Fs21 {font-size: 1.80em; line-height: 1.2; font-weight: 400;} div[id^="pgl_container_"] .Fs22 {font-size: 1.85em; line-height: 1.2; font-weight: 400;} div[id^="pgl_container_"] .Fs23 {font-size: 1.90em; line-height: 1.2; font-weight: 400;} div[id^="pgl_container_"] .Fs24 {font-size: 1.93em; line-height: 1.2; font-weight: 400;} div[id^="pgl_container_"] .Fs25 {font-size: 1.95em; line-height: 1.2; font-weight: 400;} div[id^="pgl_container_"] .Fs26 {font-size: 1.97em; line-height: 1.2; font-weight: 400;} div[id^="pgl_container_"] .Fs27 {font-size: 1.98em; line-height: 1.2; font-weight: 400;} div[id^="pgl_container_"] .Fs28 {font-size: 2.0em; line-height: 1.2; font-weight: 400;} div[id^="pgl_container_"] .Fs29 {font-size: 2.05em; line-height: 1.2; font-weight: 400;} div[id^="pgl_container_"] .Fs30 {font-size: 2.1em; line-height: 1.2; font-weight: 400;} div[id^="pgl_container_"] .Fs33 {font-size: 2.2em; line-height: 1.2; font-weight: 400;} div[id^="pgl_container_"] .Fs35 {font-size: 2.3em; line-height: 1.2; font-weight: 400;} div[id^="pgl_container_"] .Fs40 {font-size: 2.5em; line-height: 1.2; font-weight: 400;} div[id^="pgl_container_"] .Fs50 {font-size: 3.0em; line-height: 1.2; font-weight: 400;} div[id^="pgl_container_"] h1.TitleHero {font-size: 2.1em; line-height: 1.3; font-weight: 400; margin-top: 0; margin-bottom: 0;} div[id^="pgl_container_"] h1.TitleForm {font-size: 2.1em; line-height: 1.2; font-weight: 400; margin-top: 0; margin-bottom: 0;} div[id^="pgl_container_"] .TitleFormFields {font-size: 1.3em; line-height: 1.3; font-weight: 400; margin-top: 0; margin-bottom: 0;} /* FONT SETUP TABLET */ @media (min-width: 769px) { div[id^="pgl_container_"] h1 {font-size: 3em; line-height: 1.4;} div[id^="pgl_container_"] h2 {font-size: 2.3em; line-height: 1.3;} div[id^="pgl_container_"] h3 {font-size: 1.9em; line-height: 1.3;} div[id^="pgl_container_"] h4 {font-size: 1.5em; line-height: 1.3;} div[id^="pgl_container_"] h5 {font-size: 1.2em; line-height: 1.3;} div[id^="pgl_container_"] li {font-size: 1.1em; line-height: 1.5;} div[id^="pgl_container_"] a {font-size: 1em; line-height: 1.3;} div[id^="pgl_container_"] p {font-size: 1.1em; line-height: 1.3;} div[id^="pgl_container_"] .Fs07 {font-size: 0.6em;} div[id^="pgl_container_"] .Fs08 {font-size: 0.7em;} div[id^="pgl_container_"] .Fs09 {font-size: 0.8em;} div[id^="pgl_container_"] .Fs10 {font-size: 1.0em;} div[id^="pgl_container_"] .Fs11 {font-size: 1.1em;} div[id^="pgl_container_"] .Fs12 {font-size: 1.1em;} div[id^="pgl_container_"] .Fs13 {font-size: 1.2em;} div[id^="pgl_container_"] .Fs14 {font-size: 1.3em;} div[id^="pgl_container_"] .Fs15 {font-size: 1.4em;} div[id^="pgl_container_"] .Fs16 {font-size: 1.5em;} div[id^="pgl_container_"] .Fs17 {font-size: 1.6em;} div[id^="pgl_container_"] .Fs18 {font-size: 1.7em;} div[id^="pgl_container_"] .Fs19 {font-size: 1.8em;} div[id^="pgl_container_"] .Fs20 {font-size: 1.9em;} div[id^="pgl_container_"] .Fs21 {font-size: 2.0em;} div[id^="pgl_container_"] .Fs22 {font-size: 2.1em;} div[id^="pgl_container_"] .Fs23 {font-size: 2.15em;} div[id^="pgl_container_"] .Fs24 {font-size: 2.20em;} div[id^="pgl_container_"] .Fs25 {font-size: 2.23em;} div[id^="pgl_container_"] .Fs26 {font-size: 2.26em;} div[id^="pgl_container_"] .Fs27 {font-size: 2.28em;} div[id^="pgl_container_"] .Fs28 {font-size: 2.3em;} div[id^="pgl_container_"] .Fs29 {font-size: 2.35em;} div[id^="pgl_container_"] .Fs30 {font-size: 2.4em;} div[id^="pgl_container_"] .Fs33 {font-size: 2.6em;} div[id^="pgl_container_"] .Fs35 {font-size: 2.8em;} div[id^="pgl_container_"] .Fs40 {font-size: 3.0em;} div[id^="pgl_container_"] .Fs50 {font-size: 4.0em;} div[id^="pgl_container_"] h1.TitleHero {font-size: 3em;} div[id^="pgl_container_"] h1.TitleForm {font-size: 3em;} div[id^="pgl_container_"] .TitleFormFields {font-size: 1.6em;}} /* FONT SETUP DESKTOP */ @media (min-width: 1024px) { div[id^="pgl_container_"] h1 {font-size: 3.75em; line-height: 1.2; font-weight: 400;} div[id^="pgl_container_"] h2 {font-size: 2.875em; line-height: 1.2; font-weight: 400;} div[id^="pgl_container_"] h3 {font-size: 2.1em; line-height: 1.4; font-weight: 400;} div[id^="pgl_container_"] h4 {font-size: 1.6em; line-height: 1.3; font-weight: 400;} div[id^="pgl_container_"] h5 {font-size: 1.3em; line-height: 1.3; font-weight: 400;} div[id^="pgl_container_"] li {font-size: 1.1em; line-height: 1.5; font-weight: 400;} div[id^="pgl_container_"] a {font-size: 1em; line-height: 1.3; font-weight: 400;} div[id^="pgl_container_"] p {font-size: 1.1em; line-height: 1.3; font-weight: 400;} div[id^="pgl_container_"] .Fs07 {font-size: 0.7em;} div[id^="pgl_container_"] .Fs08 {font-size: 0.8em;} div[id^="pgl_container_"] .Fs09 {font-size: 0.9em;} div[id^="pgl_container_"] .Fs10 {font-size: 1.0em;} div[id^="pgl_container_"] .Fs11 {font-size: 1.1em;} div[id^="pgl_container_"] .Fs12 {font-size: 1.2em;} div[id^="pgl_container_"] .Fs13 {font-size: 1.3em;} div[id^="pgl_container_"] .Fs14 {font-size: 1.4em;} div[id^="pgl_container_"] .Fs15 {font-size: 1.5em;} div[id^="pgl_container_"] .Fs16 {font-size: 1.6em;} div[id^="pgl_container_"] .Fs17 {font-size: 1.7em;} div[id^="pgl_container_"] .Fs18 {font-size: 1.8em;} div[id^="pgl_container_"] .Fs19 {font-size: 1.9em;} div[id^="pgl_container_"] .Fs20 {font-size: 2.0em;} div[id^="pgl_container_"] .Fs21 {font-size: 2.1em;} div[id^="pgl_container_"] .Fs22 {font-size: 2.2em;} div[id^="pgl_container_"] .Fs23 {font-size: 2.3em;} div[id^="pgl_container_"] .Fs24 {font-size: 2.4em;} div[id^="pgl_container_"] .Fs25 {font-size: 2.5em;} div[id^="pgl_container_"] .Fs26 {font-size: 2.6em;} div[id^="pgl_container_"] .Fs27 {font-size: 2.7em;} div[id^="pgl_container_"] .Fs28 {font-size: 2.875em;} div[id^="pgl_container_"] .Fs29 {font-size: 2.9em;} div[id^="pgl_container_"] .Fs30 {font-size: 3.0em;} div[id^="pgl_container_"] .Fs33 {font-size: 3.3em;} div[id^="pgl_container_"] .Fs35 {font-size: 3.5em;} div[id^="pgl_container_"] .Fs40 {font-size: 4.0em;} div[id^="pgl_container_"] .Fs50 {font-size: 5.0em;} div[id^="pgl_container_"] h1.TitleHero {font-size: 3.75em;} div[id^="pgl_container_"] h1.TitleForm {font-size: 3.3em;} div[id^="pgl_container_"] .TitleFormFields {font-size: 1.8em;}} /* ######## FONT UTILITY CLASSES ######## */ /* FONT WEIGHT */ div[id^="pgl_container_"] .FwBold {font-weight: 500;} div[id^="pgl_container_"] .Fw300 {font-weight: 300;} div[id^="pgl_container_"] .Fw400 {font-weight: 400;} div[id^="pgl_container_"] .Fw500 {font-weight: 500;} div[id^="pgl_container_"] .Fw600 {font-weight: 600;} div[id^="pgl_container_"] .Fw700 {font-weight: 700;} div[id^="pgl_container_"] .Fw800 {font-weight: 800;} /* TEXT TRANSFORM */ div[id^="pgl_container_"] .TextUppercase {text-transform: uppercase;} div[id^="pgl_container_"] .TextLowercase {text-transform: lowercase;} div[id^="pgl_container_"] .TextCapitalize {text-transform: capitalize;} div[id^="pgl_container_"] .TextUnderline {text-decoration: underline;} div[id^="pgl_container_"] .TextLineThrough {text-decoration: line-through;} div[id^="pgl_container_"] .LineThrough {text-decoration: line-through;} div[id^="pgl_container_"] .TextDecorationNone {text-decoration: none;} div[id^="pgl_container_"] .TextNoWrap {white-space: nowrap;} div[id^="pgl_container_"] .TextNoBreak {word-break: keep-all; overflow-wrap: normal; hyphens: manual; white-space: normal;} /* TEXT ALIGN */ div[id^="pgl_container_"] .TextAlignCenter {text-align: center;} div[id^="pgl_container_"] .TextAlignLeft {text-align: left;} div[id^="pgl_container_"] .TextAlignRight {text-align: right;} /* MARGINS */ div[id^="pgl_container_"] .MarginTop0 {margin-top: 0;} div[id^="pgl_container_"] .MarginTop01 {margin-top: 0.1rem;} div[id^="pgl_container_"] .MarginTop02 {margin-top: 0.2rem;} div[id^="pgl_container_"] .MarginTop05 {margin-top: 0.5rem;} div[id^="pgl_container_"] .MarginTop10 {margin-top: 1.0rem;} div[id^="pgl_container_"] .MarginTop20 {margin-top: 2.0rem;} div[id^="pgl_container_"] .MarginTop35 {margin-top: 3.5rem;} div[id^="pgl_container_"] .MarginTop40 {margin-top: 4.0rem;} div[id^="pgl_container_"] .MarginTopAuto {margin-top: auto;} div[id^="pgl_container_"] .MarginBot0 {margin-bottom: 0!important;} div[id^="pgl_container_"] .MarginBot01 {margin-bottom: 0.1rem!important;} div[id^="pgl_container_"] .MarginBot02 {margin-bottom: 0.2rem!important;} div[id^="pgl_container_"] .MarginBot05 {margin-bottom: 0.5rem!important;} div[id^="pgl_container_"] .MarginBot10 {margin-bottom: 1.0rem!important;} div[id^="pgl_container_"] .MarginBot12 {margin-bottom: 1.2rem!important;} div[id^="pgl_container_"] .MarginBot15 {margin-bottom: 1.5rem!important;} div[id^="pgl_container_"] .MarginBot20 {margin-bottom: 2.0rem!important;} div[id^="pgl_container_"] .MarginBot25 {margin-bottom: 2.5rem!important;} div[id^="pgl_container_"] .MarginBot30 {margin-bottom: 3.0rem!important;} div[id^="pgl_container_"] .MarginBot40 {margin-bottom: 4.0rem!important;} div[id^="pgl_container_"] .MarginBot50 {margin-bottom: 5.0rem!important;} div[id^="pgl_container_"] .MarginLeft08 {margin-left: 0.8rem;} div[id^="pgl_container_"] .MarginLeft10 {margin-left: 1.0rem;} div[id^="pgl_container_"] .MarginLeft20 {margin-left: 2.0rem;} div[id^="pgl_container_"] .MarginTop0Bot0 {margin-top: 0; margin-bottom: 0!important;} div[id^="pgl_container_"] .MarginLeftRightAuto {margin-left: auto!important; margin-right: auto!important;} /* POSITIONING */ div[id^="pgl_container_"] .PositionRelative {position: relative;} div[id^="pgl_container_"] .PositionAbsolute {position: absolute;} div[id^="pgl_container_"] .PositionFixed {position: fixed;} /* Z-INDEX */ div[id^="pgl_container_"] .ZIndex-2{z-index:-2;} div[id^="pgl_container_"] .ZIndex-1{z-index:-1;} div[id^="pgl_container_"] .ZIndex0{z-index:0;} div[id^="pgl_container_"] .ZIndex1{z-index:1;} div[id^="pgl_container_"] .ZIndex2{z-index:2;} div[id^="pgl_container_"] .ZIndex10{z-index:10;} /* BORDER */ div[id^="pgl_container_"] .BorderRound {border-radius: 12px;} div[id^="pgl_container_"] .BorderRound100 {border-radius: 50%;} div[id^="pgl_container_"] .BorderRoundTop {border-radius: 12px 12px 0 0;} div[id^="pgl_container_"] .BorderRoundBottom {border-radius: 0 0 12px 12px;} div[id^="pgl_container_"] .BorderNone {border: none;} /* WIDTH */ /* Max Width Mobile + Desktop */ @media (min-width: 350px) and (max-width: 767px) { div[id^="pgl_container_"] .MaxWidth100Mobile { max-width: 100%; } div[id^="pgl_container_"] .MaxWidth95Mobile { max-width: 95%; } div[id^="pgl_container_"] .MaxWidth90Mobile { max-width: 90%; } div[id^="pgl_container_"] .MaxWidth85Mobile { max-width: 85%; } div[id^="pgl_container_"] .MaxWidth80Mobile { max-width: 80%; } div[id^="pgl_container_"] .MaxWidth75Mobile { max-width: 75%; } div[id^="pgl_container_"] .MaxWidth70Mobile { max-width: 70%; } div[id^="pgl_container_"] .MaxWidth65Mobile { max-width: 65%; } div[id^="pgl_container_"] .MaxWidth60Mobile { max-width: 60%; } div[id^="pgl_container_"] .MaxWidth55Mobile { max-width: 55%; } div[id^="pgl_container_"] .MaxWidth50Mobile { max-width: 50%; } div[id^="pgl_container_"] .MaxWidth45Mobile { max-width: 45%; } div[id^="pgl_container_"] .MaxWidth40Mobile { max-width: 40%; } div[id^="pgl_container_"] .MaxWidth35Mobile { max-width: 35%; } div[id^="pgl_container_"] .MaxWidth30Mobile { max-width: 30%; } div[id^="pgl_container_"] .MaxWidth25Mobile { max-width: 25%; } div[id^="pgl_container_"] .MaxWidth20Mobile { max-width: 20%; } div[id^="pgl_container_"] .MaxWidth15Mobile { max-width: 15%; } div[id^="pgl_container_"] .MaxWidth10Mobile { max-width: 10%; }} /* Max Width Desktop */ @media (min-width: 768px) { div[id^="pgl_container_"] .MaxWidth100 { max-width: 100%; } div[id^="pgl_container_"] .MaxWidth95 { max-width: 95%; } div[id^="pgl_container_"] .MaxWidth90 { max-width: 90%; } div[id^="pgl_container_"] .MaxWidth85 { max-width: 85%; } div[id^="pgl_container_"] .MaxWidth80 { max-width: 80%; } div[id^="pgl_container_"] .MaxWidth75 { max-width: 75%; } div[id^="pgl_container_"] .MaxWidth70 { max-width: 70%; } div[id^="pgl_container_"] .MaxWidth65 { max-width: 65%; } div[id^="pgl_container_"] .MaxWidth60 { max-width: 60%; } div[id^="pgl_container_"] .MaxWidth55 { max-width: 55%; } div[id^="pgl_container_"] .MaxWidth50 { max-width: 50%; } div[id^="pgl_container_"] .MaxWidth45 { max-width: 45%; } div[id^="pgl_container_"] .MaxWidth40 { max-width: 40%; } div[id^="pgl_container_"] .MaxWidth35 { max-width: 35%; } div[id^="pgl_container_"] .MaxWidth30 { max-width: 30%; } div[id^="pgl_container_"] .MaxWidth25 { max-width: 25%; } div[id^="pgl_container_"] .MaxWidth20 { max-width: 20%; } div[id^="pgl_container_"] .MaxWidth15 { max-width: 15%; } div[id^="pgl_container_"] .MaxWidth10 { max-width: 10%; }} /* Height & Width 100% */ div[id^="pgl_container_"] .MinHeight100vh { min-height: 100vh; } div[id^="pgl_container_"] .MinHeight50vh { min-height: 50vh; } div[id^="pgl_container_"] .Height100 { height: 100%; } div[id^="pgl_container_"] .Width100 { width: 100%; } div[id^="pgl_container_"] .WidthAuto { width: auto; } div[id^="pgl_container_"] .HeightAuto { height: auto; } /* ##### DISPLAY UTILITY CLASSES ##### */ div[id^="pgl_container_"] .DisplayNone {display: none;} /* Hide on mobile only */ div[id^="pgl_container_"] .HiddenMobile{display:none;} @media (min-width:768px){div[id^="pgl_container_"] .HiddenMobile{display:block;}} /* Hide on mobile and tablet */ div[id^="pgl_container_"] .HiddenMobileTablet{display:none;} @media (min-width:1024px){div[id^="pgl_container_"] .HiddenMobileTablet{display:block;}} /* Hide on desktop only */ div[id^="pgl_container_"] .HiddenDesktop{display:block;} @media (min-width:1024px){div[id^="pgl_container_"] .HiddenDesktop{display:none;}} div[id^="pgl_container_"] .DisplayBlock {display: block;} div[id^="pgl_container_"] .DisplayInline {display: inline;} div[id^="pgl_container_"] .VisibilityHidden {visibility: hidden;} /* ##### FLEX UTILITY CLASSES ##### */ div[id^="pgl_container_"] .DisplayFlex {display: flex;} div[id^="pgl_container_"] .FlexDirectionRow {flex-direction: row;} div[id^="pgl_container_"] .FlexDirectionColumn {flex-direction: column;} @media (min-width: 768px) { div[id^="pgl_container_"] .FlexDirectionRowMinWidth768 {flex-direction: row;} div[id^="pgl_container_"] .FlexDirectionColumnMinWidth768 {flex-direction: column;}} @media (min-width: 1024px) { div[id^="pgl_container_"] .FlexDirectionRowMinWidth1024 {flex-direction: row;} div[id^="pgl_container_"] .FlexDirectionColumnMinWidth1024 {flex-direction: column;}} div[id^="pgl_container_"] .FlexRow {flex-direction: row;} div[id^="pgl_container_"] .FlexCol {flex-direction: column;} @media (min-width: 768px) { div[id^="pgl_container_"] .FlexRowM {flex-direction: row;} div[id^="pgl_container_"] .FlexColM {flex-direction: column;}} @media (min-width: 1024px) { div[id^="pgl_container_"] .FlexRowL {flex-direction: row;} div[id^="pgl_container_"] .FlexColL {flex-direction: column;}} div[id^="pgl_container_"] .FlexWrap {flex-wrap: wrap;} div[id^="pgl_container_"] .FlexNoWrap {flex-wrap: nowrap;} div[id^="pgl_container_"] .FlexAuto {flex:1 1 0;} div[id^="pgl_container_"] .FlexGrow1 {flex-grow:1;} div[id^="pgl_container_"] .FlexGrow0 {flex-grow:0;} div[id^="pgl_container_"] .FlexShrink1 {flex-shrink:1;} div[id^="pgl_container_"] .FlexShrink0 {flex-shrink:0;} div[id^="pgl_container_"] .FlexBasis0 {flex-basis:0;} div[id^="pgl_container_"] .FlexBasisAuto {flex-basis:auto;} /* ##### GRID UTILITY CLASSES ##### */ /* Enables grid layout */ div[id^="pgl_container_"] .DisplayGrid {display: grid; gap: 1.5rem;} /* One column grid */ div[id^="pgl_container_"] .GridCols1 {grid-template-columns: 1fr;} /* Two columns grid, responsive: 1 column on mobile, 2 from 768px */ div[id^="pgl_container_"] .GridCols2 {grid-template-columns: 1fr;} @media (min-width: 768px) {div[id^="pgl_container_"] .GridCols2 {grid-template-columns: 1fr 1fr;}} /* Three columns grid, responsive: 1 column on mobile, 2 from 768px, 3 from 1024px */ div[id^="pgl_container_"] .GridCols3 {grid-template-columns: 1fr;} @media (min-width: 768px) {div[id^="pgl_container_"] .GridCols3 {grid-template-columns: 1fr 1fr;}} @media (min-width: 1024px) {div[id^="pgl_container_"] .GridCols3 {grid-template-columns: 1fr 1fr 1fr;}} /* Four columns grid, responsive: 1 column on mobile, 2 from 768px, 3 from 1024px, 4 from 1280px */ div[id^="pgl_container_"] .GridCols4 {grid-template-columns: 1fr;} @media (min-width: 768px) {div[id^="pgl_container_"] .GridCols4 {grid-template-columns: 1fr 1fr;}} @media (min-width: 1024px) {div[id^="pgl_container_"] .GridCols4 {grid-template-columns: 1fr 1fr 1fr;}} @media (min-width: 1280px) {div[id^="pgl_container_"] .GridCols4 {grid-template-columns: 1fr 1fr 1fr 1fr;}} /* ##### ALIGN UTILITY CLASSES ##### */ /* Justify content */ div[id^="pgl_container_"] .JustifyContentStart {justify-content: flex-start;} div[id^="pgl_container_"] .JustifyContentCenter {justify-content: center;} div[id^="pgl_container_"] .JustifyContentEnd {justify-content: flex-end;} div[id^="pgl_container_"] .JustifyContentBetween {justify-content: space-between;} div[id^="pgl_container_"] .JustifyContentAround {justify-content: space-around;} div[id^="pgl_container_"] .JustifyContentEvenly {justify-content: space-evenly;} /* Align content */ div[id^="pgl_container_"] .AlignContentStart {align-content: flex-start;} div[id^="pgl_container_"] .AlignContentCenter {align-content: center;} div[id^="pgl_container_"] .AlignContentEnd {align-content: flex-end;} div[id^="pgl_container_"] .AlignContentStretch {align-content: stretch;} div[id^="pgl_container_"] .AlignContentBetween {align-content: space-between;} div[id^="pgl_container_"] .AlignContentAround {align-content: space-around;} div[id^="pgl_container_"] .AlignContentEvenly {align-content: space-evenly;} /* Align items */ div[id^="pgl_container_"] .AlignItemsStart {align-items: flex-start;} div[id^="pgl_container_"] .AlignItemsCenter {align-items: center;} div[id^="pgl_container_"] .AlignItemsEnd {align-items: flex-end;} div[id^="pgl_container_"] .AlignItemsStretch {align-items: stretch;} div[id^="pgl_container_"] .AlignItemsBaseline {align-items: baseline;} /* Align self */ div[id^="pgl_container_"] .AlignSelfAuto {align-self: auto;} div[id^="pgl_container_"] .AlignSelfStart {align-self: flex-start;} div[id^="pgl_container_"] .AlignSelfCenter {align-self: center;} div[id^="pgl_container_"] .AlignSelfEnd {align-self: flex-end;} div[id^="pgl_container_"] .AlignSelfStretch {align-self: stretch;} div[id^="pgl_container_"] .AlignSelfBaseline {align-self: baseline;} /* Justify self */ div[id^="pgl_container_"] .JustifySelfAuto {justify-self: auto;} div[id^="pgl_container_"] .JustifySelfStart {justify-self: start;} div[id^="pgl_container_"] .JustifySelfCenter {justify-self: center;} div[id^="pgl_container_"] .JustifySelfEnd {justify-self: end;} div[id^="pgl_container_"] .JustifySelfStretch {justify-self: stretch;} /* GAP */ div[id^="pgl_container_"] .Gap0 {gap: 0;} div[id^="pgl_container_"] .Gap05 {gap: 0.5rem;} div[id^="pgl_container_"] .Gap10 {gap: 1rem;} div[id^="pgl_container_"] .Gap15 {gap: 1.5rem;} div[id^="pgl_container_"] .Gap20 {gap: 2rem;} div[id^="pgl_container_"] .Gap30 {gap: 3rem;} div[id^="pgl_container_"] .Gap40 {gap: 4rem;} div[id^="pgl_container_"] .Gap50 {gap: 5rem;} /* PADDING MOBILE */ div[id^="pgl_container_"] .PaddingY05Mobile{padding-top:.5rem;padding-bottom:.5rem;} div[id^="pgl_container_"] .PaddingY10Mobile{padding-top:1rem;padding-bottom:1rem;} div[id^="pgl_container_"] .PaddingY15Mobile{padding-top:1.5rem;padding-bottom:1.5rem;} div[id^="pgl_container_"] .PaddingY20Mobile{padding-top:2rem;padding-bottom:2rem;} div[id^="pgl_container_"] .PaddingY25Mobile{padding-top:2.5rem;padding-bottom:2.5rem;} div[id^="pgl_container_"] .PaddingY40Mobile{padding-top:4rem;padding-bottom:4rem;} div[id^="pgl_container_"] .PaddingY50Mobile{padding-top:5rem;padding-bottom:5rem;} div[id^="pgl_container_"] .PaddingY60Mobile{padding-top:6rem;padding-bottom:6rem;} div[id^="pgl_container_"] .PaddingY70Mobile{padding-top:7rem;padding-bottom:7rem;} div[id^="pgl_container_"] .PaddingY80Mobile{padding-top:8rem;padding-bottom:8rem;} div[id^="pgl_container_"] .PaddingX05Mobile{padding-left:.5rem;padding-right:.5rem;} div[id^="pgl_container_"] .PaddingX10Mobile{padding-left:1rem;padding-right:1rem;} div[id^="pgl_container_"] .PaddingX15Mobile{padding-left:1.5rem;padding-right:1.5rem;} div[id^="pgl_container_"] .PaddingX20Mobile{padding-left:2rem;padding-right:2rem;} div[id^="pgl_container_"] .PaddingX25Mobile{padding-left:2.5rem;padding-right:2.5rem;} div[id^="pgl_container_"] .PaddingX30Mobile{padding-left:3rem;padding-right:3rem;} div[id^="pgl_container_"] .PaddingX40Mobile{padding-left:4rem;padding-right:4rem;} div[id^="pgl_container_"] .PaddingX50Mobile{padding-left:5rem;padding-right:5rem;} div[id^="pgl_container_"] .PaddingX60Mobile{padding-left:6rem;padding-right:6rem;} div[id^="pgl_container_"] .PaddingX70Mobile{padding-left:7rem;padding-right:7rem;} div[id^="pgl_container_"] .PaddingX80Mobile{padding-left:8rem;padding-right:8rem;} /* PADDING DESKTOP */ @media (min-width: 768px) { div[id^="pgl_container_"] .PaddingY05 {padding-top: 0.5rem; padding-bottom: 0.5rem;} div[id^="pgl_container_"] .PaddingY10 {padding-top: 1rem; padding-bottom: 1rem;} div[id^="pgl_container_"] .PaddingY15 {padding-top: 1.5rem; padding-bottom: 1.5rem;} div[id^="pgl_container_"] .PaddingY20 {padding-top: 2rem; padding-bottom: 2rem;} div[id^="pgl_container_"] .PaddingY25 {padding-top: 2.5rem; padding-bottom: 2.5rem;} div[id^="pgl_container_"] .PaddingY40 {padding-top: 4rem; padding-bottom: 4rem;} div[id^="pgl_container_"] .PaddingY50 {padding-top: 5rem; padding-bottom: 5rem;} div[id^="pgl_container_"] .PaddingY60 {padding-top: 6rem; padding-bottom: 6rem;} div[id^="pgl_container_"] .PaddingY70 {padding-top: 7rem; padding-bottom: 7rem;} div[id^="pgl_container_"] .PaddingY80 {padding-top: 8rem; padding-bottom: 8rem;} div[id^="pgl_container_"] .PaddingX05 {padding-left: 0.5rem; padding-right: 0.5rem;} div[id^="pgl_container_"] .PaddingX10 {padding-left: 1rem; padding-right: 1rem;} div[id^="pgl_container_"] .PaddingX15 {padding-left: 1.5rem; padding-right: 1.5rem;} div[id^="pgl_container_"] .PaddingX20 {padding-left: 2rem; padding-right: 2rem;} div[id^="pgl_container_"] .PaddingX25 {padding-left: 2.5rem; padding-right: 2.5rem;} div[id^="pgl_container_"] .PaddingX30 {padding-left: 3rem; padding-right: 3rem;} div[id^="pgl_container_"] .PaddingX40 {padding-left: 4rem; padding-right: 4rem;} div[id^="pgl_container_"] .PaddingX50 {padding-left: 5rem; padding-right: 5rem;} div[id^="pgl_container_"] .PaddingX60 {padding-left: 6rem; padding-right: 6rem;} div[id^="pgl_container_"] .PaddingX70 {padding-left: 7rem; padding-right: 7rem;} div[id^="pgl_container_"] .PaddingX80 {padding-left: 8rem; padding-right: 8rem;}} /* INDIVIDUAL PADDING */ div[id^="pgl_container_"] .PaddingR10 {padding-right: 1rem;} div[id^="pgl_container_"] .PaddingR20 {padding-right: 1rem;} /* MARGIN */ div[id^="pgl_container_"] .MarginXAuto {margin-left: auto; margin-right: auto;} div[id^="pgl_container_"] .MarginYAuto {margin-top: auto; margin-bottom: auto;} div[id^="pgl_container_"] .MarginX10 {margin-left: 1rem; margin-right: 1rem;} div[id^="pgl_container_"] .MarginY10 {margin-top: 1rem; margin-bottom: 1rem;} div[id^="pgl_container_"] .MarginR05 {margin-right: 0.5rem;} div[id^="pgl_container_"] .MarginL05 {margin-left: 0.5rem;} div[id^="pgl_container_"] .MarginR10 {margin-right: 1rem;} div[id^="pgl_container_"] .MarginL10 {margin-left: 1rem;} /* ######## IMAGE/OBJECT UTILITY CLASSES ######## */ /* Fit */ div[id^="pgl_container_"] .ObjectFitCover img {object-fit: cover;} /* Object Position */ div[id^="pgl_container_"] .ObjectPositionTop { object-position: top !important; } div[id^="pgl_container_"] .ObjectPositionTopLeft { object-position: top left !important; } div[id^="pgl_container_"] .ObjectPositionTopRight { object-position: top right !important; } div[id^="pgl_container_"] .ObjectPositionLeft { object-position: left !important; } div[id^="pgl_container_"] .ObjectPositionCenter { object-position: center !important; } div[id^="pgl_container_"] .ObjectPositionRight { object-position: right !important; } div[id^="pgl_container_"] .ObjectPositionBottomLeft { object-position: bottom left !important; } div[id^="pgl_container_"] .ObjectPositionBottom { object-position: bottom !important; } div[id^="pgl_container_"] .ObjectPositionBottomRight { object-position: bottom right !important; } /* ######## COLOR UTILITY CLASSES ######## */ /* FONT COLOR */ div[id^="pgl_container_"] .FcWhite{color: #fff} div[id^="pgl_container_"] .FcBlack{color:#000} div[id^="pgl_container_"] .FcGrey{color:#91949b} div[id^="pgl_container_"] .FcBlueGrey{color:#6e727d} div[id^="pgl_container_"] .FcElectricBlue{color:#0500ff} div[id^="pgl_container_"] .FcNavyBlue{color:#001344} div[id^="pgl_container_"] .FcMidBlue{color:#8a9eff} div[id^="pgl_container_"] .FcLightBlue{color:#dbe5ff} div[id^="pgl_container_"] .FcLighterBlue{color:#f2f6ff} div[id^="pgl_container_"] .FcPink{color:#fe73b2} div[id^="pgl_container_"] .FcPink2{color:#ff8ec1} div[id^="pgl_container_"] .FcPink3{color:#ed1e79} div[id^="pgl_container_"] .FcOrange{color:#ff7b0f} div[id^="pgl_container_"] .FcRed{color:#D62828} div[id^="pgl_container_"] .FcRed2{color:#70191a} div[id^="pgl_container_"] .FcGreen{color:#20bf55} div[id^="pgl_container_"] .FcGreen2{color:#18863d} div[id^="pgl_container_"] .FcYellow{color:#ffd200} /* BACKGROUND COLOR */ div[id^="pgl_container_"] .BgWhite{background-color:#fff} div[id^="pgl_container_"] .BgBlack{background-color:#000} div[id^="pgl_container_"] .BgTransparent{background-color:#ffffff00} div[id^="pgl_container_"] .BgGrey{background-color:#f4f4f5} div[id^="pgl_container_"] .BgBlueGrey{background-color:#6e727d} div[id^="pgl_container_"] .BgElectricBlue{background-color:#0500ff} div[id^="pgl_container_"] .BgNavyBlue{background-color:#001344} div[id^="pgl_container_"] .BgMidBlue{background-color:#8a9eff} div[id^="pgl_container_"] .BgLightBlue{background-color:#dbe5ff} div[id^="pgl_container_"] .BgLighterBlue{background-color:#f2f6ff} div[id^="pgl_container_"] .BgBlue1{background-color:#c2d1ff} div[id^="pgl_container_"] .BgPink{background-color:#fe73b2} div[id^="pgl_container_"] .BgPink2{background-color:#ff8ec1} div[id^="pgl_container_"] .BgOrange{background-color:#ff7b0f} div[id^="pgl_container_"] .BgOrange2{background-color:#ffdbbd} div[id^="pgl_container_"] .BgGreen{background-color:#20bf55} div[id^="pgl_container_"] .BgGreen2{background-color:#d5f6df} div[id^="pgl_container_"] .BgLightRed{background-color:#ffdbdb} /* BORDER COLOR */ div[id^="pgl_container_"] .BcWhite{border: 2px solid #fff} div[id^="pgl_container_"] .BcBlack{border: 2px solid #000} div[id^="pgl_container_"] .BcTransparent{border: 2px solid #ffffff00} div[id^="pgl_container_"] .BcGrey{border: 2px solid #f4f4f5} div[id^="pgl_container_"] .BcBlueGrey{border: 2px solid #6e727d} div[id^="pgl_container_"] .BcElectricBlue{border: 2px solid #0500ff} div[id^="pgl_container_"] .BcNavyBlue{border: 2px solid #001344} div[id^="pgl_container_"] .BcMidBlue{border: 2px solid #8a9eff} div[id^="pgl_container_"] .BcLightBlue{border: 2px solid #dbe5ff} div[id^="pgl_container_"] .BcLighterBlue{border: 2px solid #f2f6ff} div[id^="pgl_container_"] .BcBlue1{border: 2px solid #c2d1ff} div[id^="pgl_container_"] .BcPink{border: 2px solid #fe73b2} div[id^="pgl_container_"] .BcPink2{border: 2px solid #ff8ec1} div[id^="pgl_container_"] .BcOrange{border: 2px solid #ff7b0f} div[id^="pgl_container_"] .BcOrange2{border: 2px solid #ffdbbd} div[id^="pgl_container_"] .BcGreen{border: 2px solid #20bf55} div[id^="pgl_container_"] .BcGreen2{border: 2px solid #d5f6df} div[id^="pgl_container_"] .BcLightRed{border: 2px solid #ffdbdb} :root { --ColorBlack: #000; --ColorWhite: #FFF; --ColorTransparent: #ffffff00; --ColorGrey: #F4F4F5; --ColorGrey2: #D7D8DB; --ColorGrey3: #C7C8CC; --ColorBlueGrey: #6E727D; --ColorElectricBlue: #0500FF; --ColorNavyBlue: #001344; --ColorMidBlue: #8A9EFF; --ColorLightBlue: #DBE5FF; --ColorLighterBlue: #F2F6FF; --ColorPink: #FE73B2; --ColorPink2: #FF8EC1; --ColorPink3: #ed1e79; --ColorYellow: #FFD200; --ColorOrange: #FF7B0F; --ColorOrange2: #FFDBBD; --ColorGreen: #20BF55; --ColorGreen2: #18863D; --ColorGreenBg: #D5F6DF; --ColorRed: #D62828; --ColorRed2: #70191A; --ColorLightRed: #FFDBDB; --ColorBlue1: #C2D1FF; } /* HD SCREENS READABILITY FIX */ div[id^="pgl_container_"]{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} /* LETTER SPACING FIX */ h1 { letter-spacing: -0.02em; } h2 { letter-spacing: -0.01em; } /* CONTRAST FIX */ div[id^="pgl_container_"]{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} /* ################################################ BUTTONS ################################################ */ /* ######## BUTTON WRAPPER ######## */ /* ######## ONE BUTTON ######## */ /* BUTTON WRAPPER - ONE BUTTON (WRAPPER CLASS) */ div[id^="pgl_container_"] .ButtonWrapper{display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; gap: 1rem; margin: 2rem 0;} @media (min-width: 769px){div[id^="pgl_container_"] .ButtonWrapper{flex-direction: row;}} /* BUTTON MAIN COMPONENT (BUTTON CLASS) */ div[id^="pgl_container_"] .MyButton{font-size: clamp(0.8rem, 1vw + 0.5rem, 1rem); font-weight: 500; font-style: normal; padding: 0.75rem 2.25rem; border-radius: 32px; cursor: pointer; text-align: center; text-decoration: none; transition: all 0.3s ease; position: relative;} /* BUTTON MAIN COMPONENT SMALL (BUTTON CLASS) */ div[id^="pgl_container_"] .MyButton.ButtonSmall{font-size:0.85em;padding:0.5rem 1.2rem;} /* BUTTON MAIN COMPONENT Medium (BUTTON CLASS) */ div[id^="pgl_container_"] .MyButton.ButtonMedium{font-size:0.90em;padding:0.6rem 1.3rem;} /* BUTTON CENTER ON DESKTOP AND MOBILE (BUTTON CLASS) */ div[id^="pgl_container_"] .ButtonCenter {justify-content: center; align-items: center; margin-left: auto!important; margin-right: auto!important;} /* BUTTON CENTER DESKTOP AND MOBILE (BUTTON CLASS) */ div[id^="pgl_container_"] .ButtonWrapper:has(.ButtonCenter) {justify-content: center; align-items: center; margin-left: auto!important; margin-right: auto!important;} /* BUTTON CENTER ONLY ON MOBILE (BUTTON CLASS) */ div[id^="pgl_container_"] .ButtonCenterMobile {justify-content: center; align-items: center; margin-left: auto; margin-right: auto;} @media (min-width: 690px){div[id^="pgl_container_"] .ButtonCenterMobile {justify-content: flex-start; align-items: flex-start; margin-left: 0;}} /* BUTTON FULL WIDTH ON MOBILE (BUTTON CLASS) */ div[id^="pgl_container_"] .ButtonFullMobile {width: 100%;} @media (min-width: 580px){div[id^="pgl_container_"] .ButtonFullMobile {width: fit-content;}} /* BUTTON WRAPPER MARGIN TOP AUTO - IN PRODUKTVERGLEICH (BUTTON CLASS) */ div[id^="pgl_container_"] .ButtonWrapper:has(.ButtonMarginTopAuto) {text-align: center; margin-top:auto;} /* BUTTON WRAPPER MARGIN TOP 0 ON DESKTOP (BUTTON CLASS) */ div[id^="pgl_container_"] .ButtonWrapper:has(.ButtonMarginTop0) {margin-top: 2rem;} @media (min-width: 766px){div[id^="pgl_container_"] .ButtonWrapper:has(.ButtonMarginTop0) {margin-top: 0rem!important;}} /* BUTTON WRAPPER NO MARGIN (BUTTON CLASS) */ div[id^="pgl_container_"] .ButtonWrapper:has(.ButtonNoMargin) {margin-top: 2rem;} @media (min-width: 766px){div[id^="pgl_container_"] .ButtonWrapper:has(.ButtonNoMargin) {margin-top: 0rem!important;}} /* BUTTON JUSTIFY START (BUTTON CLASS) */ div[id^="pgl_container_"] .ButtonWrapper:has(.ButtonJustifyStart) {justify-content: flex-start!important; justify-self: flex-start!important;} /* BUTTON JUSTIFY END (BUTTON CLASS) */ div[id^="pgl_container_"] .ButtonWrapper:has(.ButtonJustifyEnd) {justify-content: flex-end!important; justify-self: flex-end!important;} /* BUTTON FULL WIDTH ON MOBILE (BUTTON CLASS) (OLD VERSION DON´t USE IT ANYMORE!) */ div[id^="pgl_container_"] .ButtonFull {width: 100%;} @media (min-width: 580px){div[id^="pgl_container_"] .ButtonFull {width: fit-content;}} /* ######## TWO BUTTONS ######## */ /* BUTTONS WRAPPER VERTICAL - TWO BUTTONS (WRAPPER CLASS) */ div[id^="pgl_container_"] .ButtonsWrapperVertical {display:flex;flex-direction:column;justify-content:flex-start;align-items:center;width:100%;gap:1rem;margin:2rem 0;margin-top:auto} div[id^="pgl_container_"] .ButtonsWrapperVertical .MyButton{text-align:center;align-items:center;justify-content:center; width: calc(100% - 2rem); box-sizing: border-box;} @media (min-width:580px){ div[id^="pgl_container_"] .ButtonsWrapperVertical .MyButton{max-width:none; justify-content: center; align-items: center; margin-left: auto; margin-right: auto;}} div[id^="pgl_container_"] .ButtonsWrapperVertical .MyButton+.MyButton{margin-top:auto;} /* BUTTONS WRAPPER HORIZONTAL CENTER - TWO BUTTONS (WRAPPER CLASS) */ div[id^="pgl_container_"] .ButtonsWrapperHorizontalCenter{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; gap: 1rem; margin: 2rem 0;} @media (min-width: 769px){div[id^="pgl_container_"] .ButtonsWrapperHorizontalCenter{flex-direction: row;}} /* BUTTON WRAPPER - ADVISOR */ div[id^="pgl_container_"] .ButtonWrapperAdvisor{display:flex;flex-direction:column;width:100%;margin:2rem 0;gap:1rem} div[id^="pgl_container_"] .ButtonWrapperAdvisor button:nth-child(1){align-self:flex-start;order:2;} div[id^="pgl_container_"] .ButtonWrapperAdvisor button:nth-child(2){align-self:flex-end;order:1;} @media (min-width:769px){div[id^="pgl_container_"] .ButtonWrapperAdvisor{flex-direction:row;justify-content:space-between;gap:0} div[id^="pgl_container_"] .ButtonWrapperAdvisor button:nth-child(1){order:1;} div[id^="pgl_container_"] .ButtonWrapperAdvisor button:nth-child(2){order:2;}} /* ######## BUTTON STYLE ######## */ div[id^="pgl_container_"] .MyButton.Primary{background-color: #FE73B2; color: #001344; border: none;} div[id^="pgl_container_"] .MyButton.Primary:hover{background-color: #fa85ba;} div[id^="pgl_container_"] .MyButton.Primary:disabled{ background-color: #cccccc; cursor: not-allowed; box-shadow: none;} div[id^="pgl_container_"] .MyButton.Primary:disabled:hover{ background-color: #cccccc; box-shadow: none;} div[id^="pgl_container_"] .MyButton.Secondary{background-color: #0500FF; color: #FFF; border: none;} div[id^="pgl_container_"] .MyButton.Secondary:hover{background-color: #3b38f8;} div[id^="pgl_container_"] .MyButton.Secondary:disabled{background-color: #cccccc; cursor: not-allowed; box-shadow: none;} div[id^="pgl_container_"] .MyButton.Secondary:disabled:hover{background-color: #cccccc; box-shadow: none;} div[id^="pgl_container_"] .MyButton.Tertiary{background-color: #001344; color: #FFF; border: none;} div[id^="pgl_container_"] .MyButton.Tertiary:hover{background-color: #061b4e;} div[id^="pgl_container_"] .MyButton.Quaternary{background-color: transparent; color: #001344; border: 1px solid #001344; border-radius: 100px;} div[id^="pgl_container_"] .MyButton.Quaternary:hover{background-color: #001344; color: #FFF;} div[id^="pgl_container_"] .MyButton.Quaternary.Selected{background-color: #001344; color: #FFF;} div[id^="pgl_container_"] .MyButton.Quinary{background-color: transparent; color: #001344; border: 1px solid #001344; border-radius: 100px;} div[id^="pgl_container_"] .MyButton.Quinary:hover{background-color: transparent;} div[id^="pgl_container_"] .MyButton.Senary{background-color: #FFF; color: #001344; border: 1px solid transparent;} div[id^="pgl_container_"] .MyButton.Senary:hover{background-color: #eeeaea;} div[id^="pgl_container_"] .MyButton.Septenary{background-color: #FFF; color: #0500FF; border: 1px solid #0500FF; border-radius: 100px;} div[id^="pgl_container_"] .MyButton.Septenary:hover{background-color: #FFF; color: #0500FF;} div[id^="pgl_container_"] .MyButton.Octonary{background-color: #FFF; color: #0500FF; border: 1px solid #0500FF; border-radius: 100px;} div[id^="pgl_container_"] .MyButton.Octonary:hover{background-color: #FFF; color: #0500FF; border: 1px solid #0500FF; border-radius: 100px;} div[id^="pgl_container_"] .MyButton.Nonary{background-color: transparent; color: #FFF; border: 1px solid #FFF; border-radius: 100px;} div[id^="pgl_container_"] .MyButton.Nonary:hover{background-color: transparent; color: #FFF; border: 1px solid #FFF; border-radius: 100px;} div[id^="pgl_container_"] .MyButton.Nonary.Selected{background-color:#fff;color:#001344;} /* ################################################ COMPONENTS STYLING ################################################ */ /* ################################################ SECTION DIVIDER ################################################ */ div[id^="pgl_container_"] .SECTION-DIVIDER {background-color: #001344; padding:20px;} div[id^="pgl_container_"] .SECTION-DIVIDER p{font-size: 1rem;line-height: 1.4em; font-weight:800; color: white; text-align:left; margin: 0px;} /* ################################################ HR ################################################ */ div[id^="pgl_container_"] hr{display:block; height:1px; border:0; border-top:1px solid #001344; margin:1em auto; padding:0} /* ################################################ IMAGES ################################################ */ div[id^="pgl_container_"] img.aspect-ratio {height:auto; width:100%; margin:0 auto} div[id^="pgl_container_"] img.ImageAspectRatio {height:auto; width:100%; margin:0 auto} div[id^="pgl_container_"] img.ImageStyle {border-radius: 12px;} div[id^="pgl_container_"] img.ImageStyleWhitepaperMockup {border-radius: 12px; border: 0.5rem solid #001344;} /* ################################################ LISTWRAPPER on DIV or UL ################################################ */ /* LIST-STYLE NONE */ div[id^="pgl_container_"] .ListStyleNone,ul.ListStyleNone,ol.ListStyleNone{list-style:none;padding-left:0;margin-left:0;} div[id^="pgl_container_"] .ListWrapper ul, div[id^="pgl_container_"] ul.ListWrapper {padding:.5rem; list-style:none} div[id^="pgl_container_"] .ListWrapper ul li, div[id^="pgl_container_"] ul.ListWrapper li {padding-left:2.6rem; margin-bottom:1rem; background-position:left top; background-size:1.4em; background-repeat:no-repeat} div[id^="pgl_container_"] .ListWrapper.CheckBulletPointBlack ul li, div[id^="pgl_container_"] ul.ListWrapper.CheckBulletPointBlack li {background-image:url("https://shopmedia.haufe-group.com/ShopData/media/esales/landingpages/00_styleguide/haufe/elements/bullet-points/CheckBulletPointBlack.svg")} div[id^="pgl_container_"] .ListWrapper.CheckElectricBlueFull ul li, div[id^="pgl_container_"] ul.ListWrapper.CheckElectricBlueFull li {background-image:url("https://shopmedia.haufe-group.com/ShopData/media/esales/landingpages/00_styleguide/haufe/elements/bullet-points/bullet-points-blue-redesign.svg")} div[id^="pgl_container_"] .ListWrapper.CheckLightBlueFull ul li, div[id^="pgl_container_"] ul.ListWrapper.CheckLightBlueFull li {background-image:url("https://shopmedia.haufe-group.com/ShopData/media/esales/landingpages/00_styleguide/haufe/elements/bullet-points/bullet-points-light-full-redesign.svg")} div[id^="pgl_container_"] .ListWrapper.CheckElectricBlueEmpty ul li, div[id^="pgl_container_"] ul.ListWrapper.CheckElectricBlueEmpty li {background-image:url("https://shopmedia.haufe-group.com/ShopData/media/esales/landingpages/00_styleguide/haufe/elements/bullet-points/bullet-points-light-redesign.svg")} div[id^="pgl_container_"] .ListWrapper.CheckNavyBlueEmpty ul li, div[id^="pgl_container_"] ul.ListWrapper.CheckNavyBlueEmpty li {background-image:url("https://shopmedia.haufe-group.com/ShopData/media/esales/landingpages/00_styleguide/haufe/elements/bullet-points/bullet-points-navyblue.svg")} div[id^="pgl_container_"] .ListWrapper.CheckNavyBlueFull ul li, div[id^="pgl_container_"] ul.ListWrapper.CheckNavyBlueFull li {background-image:url("https://shopmedia.haufe-group.com/ShopData/media/esales/landingpages/00_styleguide/haufe/elements/bullet-points/bullet-points-navyblue-full.svg")} div[id^="pgl_container_"] .ListWrapper.CheckRosaEmpty ul li, div[id^="pgl_container_"] ul.ListWrapper.CheckRosaEmpty li {background-image:url("https://shopmedia.haufe-group.com/ShopData/media/esales/landingpages/00_styleguide/haufe/elements/bullet-points/bullet-point-check-rosa-empty.svg")} div[id^="pgl_container_"] .ListWrapper.CheckWhiteEmpty ul li, div[id^="pgl_container_"] ul.ListWrapper.CheckWhiteEmpty li {background-image:url("https://shopmedia.haufe-group.com/ShopData/media/esales/landingpages/00_styleguide/haufe/elements/bullet-points/CheckWhiteEmpty.svg")} div[id^="pgl_container_"] .ListWrapper.CheckBlackEmpty ul li, div[id^="pgl_container_"] ul.ListWrapper.CheckBlackEmpty li {background-image:url("https://shopmedia.haufe-group.com/ShopData/media/esales/landingpages/00_styleguide/haufe/elements/bullet-points/CheckBlackEmpty.svg")} div[id^="pgl_container_"] .ListWrapper.CheckBlackAlone ul li, div[id^="pgl_container_"] ul.ListWrapper.CheckBlackAlone li {background-image:url("https://shopmedia.haufe-group.com/ShopData/media/esales/landingpages/00_styleguide/haufe/elements/bullet-points/CheckBlackAlone.svg")} div[id^="pgl_container_"] .ListWrapper.CheckWhiteAlone ul li, div[id^="pgl_container_"] ul.ListWrapper.CheckWhiteAlone li {background-image:url("https://shopmedia.haufe-group.com/ShopData/media/esales/landingpages/00_styleguide/haufe/elements/bullet-points/CheckWhiteAlone.svg")} div[id^="pgl_container_"] .ListWrapper.CheckGreenEmpty ul li, div[id^="pgl_container_"] ul.ListWrapper.CheckGreenEmpty li {background-image:url("https://shopmedia.haufe-group.com/ShopData/media/esales/landingpages/00_styleguide/haufe/elements/bullet-points/CheckGreenEmpty.svg")} div[id^="pgl_container_"] .ListWrapper.CheckOrangeEmpty ul li, div[id^="pgl_container_"] ul.ListWrapper.CheckOrangeEmpty li {background-image:url("https://shopmedia.haufe-group.com/ShopData/media/esales/landingpages/00_styleguide/haufe/elements/bullet-points/CheckOrangeEmpty.svg")} div[id^="pgl_container_"] .ListWrapper.CheckElectricBluePlus ul li, div[id^="pgl_container_"] ul.ListWrapper.CheckElectricBluePlus li {background-image:url("https://shopmedia.haufe-group.com/ShopData/media/esales/landingpages/00_styleguide/haufe/elements/bullet-points/bullet-points-plus-electric-blue.svg")} div[id^="pgl_container_"] .ListWrapper.CheckPlusNavyBlueFull ul li, div[id^="pgl_container_"] ul.ListWrapper.CheckPlusNavyBlueFull li {background-image:url("https://shopmedia.haufe-group.com/ShopData/media/esales/landingpages/00_styleguide/haufe/elements/bullet-points/bullet-points-plus-navy-blue-full.svg")} div[id^="pgl_container_"] .ListWrapper.CheckNavyBlueX ul li, div[id^="pgl_container_"] ul.ListWrapper.CheckNavyBlueX li {background-image:url("https://shopmedia.haufe-group.com/ShopData/media/esales/landingpages/00_styleguide/haufe/elements/bullet-points/icon-x.svg")} div[id^="pgl_container_"] .ListWrapper.CheckPinkEmptyX ul li, div[id^="pgl_container_"] ul.ListWrapper.CheckPinkEmptyX li {background-image:url("https://shopmedia.haufe-group.com/ShopData/media/esales/landingpages/00_styleguide/haufe/elements/bullet-points/CheckPinkEmptyX.svg")} div[id^="pgl_container_"] .ListWrapper.CheckPinkFullX ul li, div[id^="pgl_container_"] ul.ListWrapper.CheckPinkFullX li {background-image:url("https://shopmedia.haufe-group.com/ShopData/media/esales/landingpages/00_styleguide/haufe/elements/bullet-points/CheckPinkFullX.svg")} /* ################################################ NUMBER LIST ################################################ */ div[id^="pgl_container_"] .NumberList{ list-style: none; padding: 0; margin: 0;} div[id^="pgl_container_"] .NumberList li{ display: flex; margin-bottom: 1rem;} div[id^="pgl_container_"] .NumberList .Number{ display: flex; justify-content: center; align-items: center; background-color: #0500FF; color: #FFF; border-radius: 50%; width: 36px; height: 36px; font-weight: bold; margin-right: 2rem; flex-shrink: 0; align-self: flex-start; margin-top: 0.2rem;} div[id^="pgl_container_"] .NumberList .Text{ display: flex; align-items: center; flex: 1;} /* ################################################ INFO POINTS ################################################ */ div[id^="pgl_container_"] .InfoPointWrapper{ position: relative; display: inline-block; margin-top: 0.5rem;} div[id^="pgl_container_"] .InfoPointFlex{ display: flex; align-items: flex-start; gap: 0.8rem;} div[id^="pgl_container_"] .InfoPointText{ font-weight: bold;} div[id^="pgl_container_"] .InfoPoint{display:inline-flex;align-items:center;justify-content:center;width:1.2rem;height:1.2rem;border-radius:50%;background:#C2D1FF;color:#000;font-style:italic;font-size:.8em;cursor:pointer;user-select:none;transition:box-shadow .2s} div[id^="pgl_container_"] .InfoPoint:hover{box-shadow:0 0 0 2px #8A9EFF} div[id^="pgl_container_"] .InfoPoint:hover + .InfoPointPopup{opacity:1;pointer-events:auto;transition-delay:.5s;} div[id^="pgl_container_"] .InfoPointPopup{position:absolute;left:auto;right:2rem;top:2rem;min-width:300px;background:#fff;color:#222;border:1px solid #ddd;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.15);padding:1rem 2rem 2rem 2rem;z-index:100;opacity:0;pointer-events:none;transition:opacity .3s 0s;} /* ################################################ FORMS ################################################ */ div[id^="pgl_container_"] .IntroFormFlexbox{display: flex; align-items: center; gap: 0.5rem;} div[id^="pgl_container_"] .IntroForm {font-weight: bold;} @media (min-width: 767px){div[id^="pgl_container_"] .IntroForm {margin-left: 0.2rem;}} div[id^="pgl_container_"] .SubtitleForm {font-weight: bold;} div[id^="pgl_container_"] .OutroForm{font-weight: bold;} div[id^="pgl_container_"] .TitleFormFields {text-align: center; margin-top: 0;} div[id^="pgl_container_"] .ImageWrapperForm {max-width: 80%; margin: 2rem 0;} @media (min-width: 768px) {div[id^="pgl_container_"] .ImageWrapperForm {max-width: 60%;}} div[id^="pgl_container_"] .ImageWrapperDownload {max-width: 80%; text-align: center; margin: 2rem auto;} @media (min-width: 690px) {div[id^="pgl_container_"] .ImageWrapperDownload {max-width: 60%;}} @media (max-width:766px){div[id^="pgl_container_"] .InfoPoint{display:none}} @media (min-width:767px){div[id^="pgl_container_"] .InfoPoint{display:inline-flex}} /* ################################################ CHIP WRAPPER ################################################ */ div[id^="pgl_container_"] .Chip{display:inline-flex;align-items:center;justify-content:center;padding:0.3rem 0.9rem;border-radius:20px;font-family:Arial,sans-serif;font-weight:bold;width: max-content;} div[id^="pgl_container_"] .Chip.White{color:#FFF; border:2px solid #FFF} div[id^="pgl_container_"] .Chip.Black{color:#000; border:2px solid #000} div[id^="pgl_container_"] .Chip.Pink{color:#FF69B4; border:2px solid #FF69B4} div[id^="pgl_container_"] .Chip.Rosa{color:#FF69B4; border:2px solid #FF69B4} div[id^="pgl_container_"] .Chip.NavyBlue {color: #001344; border: 2px solid #001344;} div[id^="pgl_container_"] .Chip.ElectricBlue {color: #0500FF; border: 2px solid #0500FF;} div[id^="pgl_container_"] .Chip.Orange {color: #FF7B0F; border: 2px solid #FF7B0F;} div[id^="pgl_container_"] .Chip.Green {color: #20BF55; border: 2px solid #20BF55;} /* ################################################ PILL WRAPPER ################################################ */ div[id^="pgl_container_"] .Pill{display:inline-flex;align-items:center;justify-content:center;padding:0.4rem 1rem;border-radius:5px;width: max-content;} div[id^="pgl_container_"] .Pill.White{color:#001344; background-color: #ffffff} div[id^="pgl_container_"] .Pill.Pink{color:#001344; background-color: #FF69B4} div[id^="pgl_container_"] .Pill.Rosa{color:#001344; background-color: #FF69B4} div[id^="pgl_container_"] .Pill.LightBlue {color: #001344; background-color: #DBE5FF;} div[id^="pgl_container_"] .Pill.NavyBlue {color: #FFF; background-color: #001344;} /* ################################################ MAGICNUMBER ELEMENT ################################################ */ div[id^="pgl_container_"] .MagicNumberNavyBlue{display: flex; justify-content: center; align-items: center; border-radius: 50%; width: 36px; height: 36px; font-weight: bold; margin-right: 2rem; flex-shrink: 0; align-self: flex-start;background-color: #001344; color: #FFF;} /* ################################################ IMAGE BUTTON ################################################ */ div[id^="pgl_container_"] .ImageButton {cursor:pointer; display:block; transition:box-shadow .2s;} div[id^="pgl_container_"] .ImageButton img {transition:transform .2s;} div[id^="pgl_container_"] .ImageButton:hover img, div[id^="pgl_container_"] .ImageButton:focus img {transform:scale(1.06);} /* ################################################ STICKER A ################################################ */ div[id^="pgl_container_"] .StickerAWrapper{position:relative;} div[id^="pgl_container_"] .StickerA{content:''; top: 1rem; right: 1rem; padding: 1rem 1.5rem; border-radius: 1.1rem; font-family:Arial,sans-serif;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box; box-shadow: 0 8px 24px 0 rgba(0, 20, 68, 0.18); position:absolute;} div[id^="pgl_container_"] .StickerA span{line-height:1.3;margin:0;padding:0;} /* ################################################ STICKER B CSS GRID ALTERNATIVE ################################################ */ /* div[id^="pgl_container_"] .StickerBWrapper {display: grid; position: relative;} div[id^="pgl_container_"] .StickerBWrapper > * {grid-area: 1 / 1;} div[id^="pgl_container_"] .StickerB {z-index: 10; justify-self: end; align-self: start; margin: 2rem 1.1rem 0 0; padding: 0.8rem 1.2rem; border-radius: 18px; font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box;} div[id^="pgl_container_"] .StickerB span {line-height: 1.1; margin: 0; padding: 0;} */ /* ################################################ SPEAKER IMAGE STYLE ################################################ */ div[id^="pgl_container_"] .SpeakerImage {border-radius: 50%; border: 4px solid #DBE5FF;} /* ################################################ MATERIAL DESIGN ################################################ */ /* MATERIAL FONT COLOR */ div[id^="pgl_container_"] .MaterialFontColor {color: #000;} /* MATERIAL BUTTON */ div[id^="pgl_container_"] .ButtonMaterial{font-size: clamp(0.8rem, 1vw + 0.5rem, 1rem); font-weight: 500; font-style: normal; padding: 0.75rem 2.25rem; border-radius: 32px; cursor: pointer; text-align: center; text-decoration: none; transition: all 0.3s ease; position: relative;} /* MATERIAL BACKGROUND COLOR */ div[id^="pgl_container_"] .BgMaterialLightPink{background-color:#F7E6FF} div[id^="pgl_container_"] .BgMaterialPink{background-color:#FFC9FF} div[id^="pgl_container_"] .BgMaterialLightGreen{background-color:#D9FFF2} div[id^="pgl_container_"] .BgMaterialGreen{background-color:#D1FFCF} div[id^="pgl_container_"] .BgMaterialStrongGreen{background-color:#1AFF8C} div[id^="pgl_container_"] .BgMaterialLightYellow{background-color:#FFFFD9} div[id^="pgl_container_"] .BgMaterialYellow{background-color:#FFFF99} div[id^="pgl_container_"] .BgMaterialStrongYellow{background-color:#FFF200} div[id^="pgl_container_"] .BgMateriaLightBlue{background-color:#BFFFFF} div[id^="pgl_container_"] .BgMaterialBlue{background-color:#00E6FF} div[id^="pgl_container_"] .BgMaterialStrongBlue{background-color:#3DB8FF} /* MATERIAL CARDS */ div[id^="pgl_container_"] .MaterialCard{ padding: 2rem; display: flex; flex-direction: column; gap: 0.5rem; border-radius: 0px; height: 100%; min-height: 100%; transition: box-shadow .25s cubic-bezier(.4,0,.2,1);} div[id^="pgl_container_"] .MaterialCard:hover{ box-shadow: 12px 12px #22223B, 3px 6px rgba(34,34,59,.15), 1.5px 3.5px rgba(34,34,59,.07);} div[id^="pgl_container_"] .MaterialCardPrices{ padding: 2rem; display: flex; flex-direction: column; gap: 0.5rem; border-radius: 0px; height: 100%; min-height: 100%; transition: box-shadow .25s cubic-bezier(.4,0,.2,1);} div[id^="pgl_container_"] .MaterialCardPrices:hover{ box-shadow: 12px 12px #22223B, 3px 6px rgba(34,34,59,.15), 1.5px 3.5px rgba(34,34,59,.07);} div[id^="pgl_container_"] .MaterialCardEasy{ padding: 2rem; display: flex; flex-direction: column; gap: 0.5rem; border-radius: 0px; height: 100%; min-height: 100%;} div[id^="pgl_container_"] .MaterialBorderRightCardLine:not(:last-child){border-right:1px solid #D7D8DB;} div[id^="pgl_container_"] .MaterialDashed{border: 2px dashed black;} /* ################################################ DW DESIGN ################################################ */ /* DW FONT */ div[id^="pgl_container_"] .DWFontColor {color: #000;} div[id^="pgl_container_"] .DWFontFamily{font-family:"Akatab",sans-serif;font-weight:400;font-style:normal;} div[id^="pgl_container_"] .DWFontFamily h1, div[id^="pgl_container_"] .DWFontFamily h2, div[id^="pgl_container_"] .DWFontFamily h3, div[id^="pgl_container_"] .DWFontFamily h4, div[id^="pgl_container_"] .DWFontFamily h5, div[id^="pgl_container_"] .DWFontFamily h6 {font-family:"Montserrat",sans-serif;font-weight:800;} /* DW BUTTON */ div[id^="pgl_container_"] .MyButton.ButtonDWPrimary{background-color: #2E9F69; color: #FFF; border: none;} div[id^="pgl_container_"] .MyButton.ButtonDWPrimary:hover{background-color: #2c885d;} div[id^="pgl_container_"] .MyButton.ButtonDWSecondary{background-color: #001A01; color: #FFF; border: none;} div[id^="pgl_container_"] .MyButton.ButtonDWSecondary:hover{background-color: #09440b;} /* DW COLOR */ div[id^="pgl_container_"] .BgDWBlack{background-color:#001A01;} div[id^="pgl_container_"] .BgDWWhite{background-color:#FFFFFF;} div[id^="pgl_container_"] .BgDWDarkGrey{background-color:#9F9F9F;} div[id^="pgl_container_"] .BgDWGrey{background-color:#D9D9D9;} div[id^="pgl_container_"] .BgDWLightGrey{background-color:#F2F2F2;} div[id^="pgl_container_"] .BgDWGreen{background-color:#2E9F69;} div[id^="pgl_container_"] .FcDWBlack{color:#001A01;} div[id^="pgl_container_"] .FcDWWhite{color:#FFFFFF;} div[id^="pgl_container_"] .FcDWGrey{color:#D9D9D9;} div[id^="pgl_container_"] .FcDWGreen{color:#2E9F69;} div[id^="pgl_container_"] .BcDWDarkGrey{border: 2px solid #9F9F9F;} /* ################################################ IW DESIGN ################################################ */ /* IW FONT */ div[id^="pgl_container_"] .IWFontColor {color: #000;} div[id^="pgl_container_"] .IWFontFamily{font-family:"Akatab",sans-serif;font-weight:400;font-style:normal;} div[id^="pgl_container_"] .IWFontFamily h1, div[id^="pgl_container_"] .IWFontFamily h2, div[id^="pgl_container_"] .IWFontFamily h3, div[id^="pgl_container_"] .IWFontFamily h4, div[id^="pgl_container_"] .IWFontFamily h5, div[id^="pgl_container_"] .IWFontFamily h6 {font-family:"Montserrat",sans-serif;font-weight:800;} /* IW BUTTON */ div[id^="pgl_container_"] .MyButton.ButtonIWPrimary{background-color: #E58836; color: #FFF; border: none;} div[id^="pgl_container_"] .MyButton.ButtonIWPrimary:hover{background-color: #df8b43;} div[id^="pgl_container_"] .MyButton.ButtonIWSecondary{background-color: #555555; color: #FFF; border: none;} div[id^="pgl_container_"] .MyButton.ButtonIWSecondary:hover{background-color: #6b6a6a;} /* IW COLOR */ div[id^="pgl_container_"] .BgIWBlack{background-color:#001A01;} div[id^="pgl_container_"] .BgIWWhite{background-color:#FFFFFF;} div[id^="pgl_container_"] .BgIWDarkGrey{background-color:#555555;} div[id^="pgl_container_"] .BgIWGrey{background-color:#D9D9D9;} div[id^="pgl_container_"] .BgIWLightGrey{background-color:#F2F2F2;} div[id^="pgl_container_"] .BgIWOrange{background-color:#E58836;} div[id^="pgl_container_"] .FcIWBlack{color:#001A01;} div[id^="pgl_container_"] .FcIWWhite{color:#FFFFFF;} div[id^="pgl_container_"] .FcIWGrey{color:#D9D9D9;} div[id^="pgl_container_"] .FcIWOrange{color:#E58836;} div[id^="pgl_container_"] .BcIWDarkGrey{border: 2px solid #555555;} div[id^="pgl_container_"] .BcIWGrey{border: 2px solid #D9D9D9;} /* ################################################ MENU SELECTOR ################################################ */ /* LAYOUT */ div[id^="pgl_container_"] #MENU-SELECTOR {position:relative;} div[id^="pgl_container_"] #MENU-SELECTOR .MenuContainer{background:#ededf0;border-radius:2.5rem;padding:1.8rem 0.5rem;display:flex;align-items:center;justify-content:center;gap:0;width:100%;max-width:100%;box-sizing:border-box;} div[id^="pgl_container_"] #MENU-SELECTOR .MenuList{display:flex;flex-direction:row;width:100%;max-width:100%;justify-content:flex-start;align-items:center;gap:0.5rem;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;} div[id^="pgl_container_"] #MENU-SELECTOR .MenuList::-webkit-scrollbar{display:none;} /* COMPONENTS */ div[id^="pgl_container_"] #MENU-SELECTOR .MenuItem{padding:0 1rem;height:2.5rem;display:flex;align-items:center;justify-content:center;border-radius:1.5rem;background:transparent;color:#0a1940;font-weight:600;font-size:0.875rem;border:none;cursor:pointer;transition:background .2s,color .2s;white-space:nowrap;flex-shrink:0;} div[id^="pgl_container_"] #MENU-SELECTOR .MenuItem.active{background:#0a1940;color:#fff;box-shadow:none;} /* RESPONSIVE */ @media (min-width:768px){div[id^="pgl_container_"] #MENU-SELECTOR .MenuContainer{padding:2rem 1.5rem;} div[id^="pgl_container_"] #MENU-SELECTOR .MenuList{justify-content:space-between;gap:0.5rem;overflow-x:visible;} div[id^="pgl_container_"] #MENU-SELECTOR .MenuItem{padding:0 1.25rem;height:2.75rem;font-size:0.9rem;}} @media (min-width:1024px){div[id^="pgl_container_"] #MENU-SELECTOR .MenuContainer{padding:2.5rem 2rem;max-width:1260px;} div[id^="pgl_container_"] #MENU-SELECTOR .MenuList{max-width:1260px;}div[id^="pgl_container_"] #MENU-SELECTOR .MenuItem{padding:0 1.75rem;height:3rem;font-size:1rem;}} /* STICKY MENU */ div[id^="pgl_container_"] #MENU-SELECTOR .MenuContainer.sticky{position:fixed;top:3rem;left:50%;margin-left:0.5rem;margin-right:0.5rem;transform:translateX(-50%);z-index:999;box-shadow:0 4px 12px rgba(0,0,0,0.1);animation:slideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);} @keyframes slideDown{from{opacity:0;transform:translateX(-50%) translateY(-20px);}to{opacity:1;transform:translateX(-50%) translateY(0);}} div[id^="pgl_container_"] #MENU-SELECTOR nav {min-width: 100%; max-width: 1260px;} @media (min-width: 767px) {div[id^="pgl_container_"] #MENU-SELECTOR nav {min-width: 60%;}} /* PROJECT NAME: WEBCOMPONENT-TABBER-POPUP.css - PROJECT TYPE: CSS Component */ /* ============================================================ WEBCOMPONENT-TABBER-POPUP - TAB SLIDER WITH IMAGE POPUP ============================================================ */ /* TAB CONTROLS */ #WEBCOMPONENT-TABBER-POPUP .tab-controls{display:flex;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;gap:1rem;margin-top:1%;} @media (min-width:500px){#WEBCOMPONENT-TABBER-POPUP .tab-controls{flex-direction:row}} @media (min-width:1475px){#WEBCOMPONENT-TABBER-POPUP .tab-controls{flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;margin-top:unset}} /* TAB BUTTONS */ #WEBCOMPONENT-TABBER-POPUP .tab-btn{font-size:1em;font-weight:400;color:#001344;background-color:transparent;border-radius:26px;border:1px solid #001344;background:0 0;padding:.4rem 1rem;transition:all .3s ease;text-align:center;cursor:pointer;width:auto;white-space:nowrap;display:inline-block;flex:0 0 auto;min-width:150px} @media (min-width:801px){#WEBCOMPONENT-TABBER-POPUP .tab-btn{flex:initial;min-width:auto}} #WEBCOMPONENT-TABBER-POPUP .tab-btn.active,#WEBCOMPONENT-TABBER-POPUP .tab-btn:hover{background-color:#0500FF;color:#fff;border:1px solid #0500FF;} /* TAB CONTENT */ #WEBCOMPONENT-TABBER-POPUP .TabContent{position:relative} #WEBCOMPONENT-TABBER-POPUP .tab-pane{display:none;opacity:0;transition:.3s ease} #WEBCOMPONENT-TABBER-POPUP .tab-pane.active{display:block;opacity:1} #WEBCOMPONENT-TABBER-POPUP .content-grid{display:grid;grid-template-rows:auto 1fr;gap:1rem} #WEBCOMPONENT-TABBER-POPUP .content-grid img{width:100%;height:100%;object-fit:contain} @media (min-width:801px){#WEBCOMPONENT-TABBER-POPUP .content-grid img{height:260px}} /* ELEMENTSWRAPPER */ #WEBCOMPONENT-TABBER-POPUP .ElementsWrapper{max-width:100%;background-color:#DBE5FF;border-radius:25px;padding:2rem 1rem;} @media (min-width:768px){#WEBCOMPONENT-TABBER-POPUP .ElementsWrapper{padding:5rem 4rem;}} /* GRID LAYOUT */ #WEBCOMPONENT-TABBER-POPUP .GridContainer{display:grid;align-items:center;justify-content:center;grid-template-columns:1fr;gap:0rem 3rem;max-width:100%;margin:auto} #WEBCOMPONENT-TABBER-POPUP .GridContainer>div:nth-child(1){order:2;} #WEBCOMPONENT-TABBER-POPUP .GridContainer>div:nth-child(2){order:3;} #WEBCOMPONENT-TABBER-POPUP .GridContainer>div:nth-child(3){order:1;} @media(min-width:840px){ #WEBCOMPONENT-TABBER-POPUP .GridContainer{grid-template-columns:1fr 1.2fr;} #WEBCOMPONENT-TABBER-POPUP .GridContainer>div:nth-child(1){order:1;grid-area:1 / 1 / 2 / 2;align-self:flex-end;} #WEBCOMPONENT-TABBER-POPUP .GridContainer>div:nth-child(2){order:3;grid-area:2 / 1 / 3 / 2;align-self:flex-start;} #WEBCOMPONENT-TABBER-POPUP .GridContainer>div:nth-child(3){order:2;grid-area:1 / 2 / 3 / 3;align-self:flex-start;}} /* IMAGE WRAPPER - CLICKABLE */ #WEBCOMPONENT-TABBER-POPUP .ImageWrapper{cursor:pointer;} /* IMAGE POPUP OVERLAY - Created dynamically and appended to body */ #WEBCOMPONENT-TABBER-POPUP .ImagePopupOverlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.85);display:flex;align-items:center;justify-content:center;z-index:99999;transition:opacity .2s;} /* IMAGE POPUP CONTENT */ #WEBCOMPONENT-TABBER-POPUP .ImagePopupContent{background:#fff;border-radius:16px;padding:1.5rem;position:relative;max-width:90vw;max-height:80vh;display:flex;align-items:center;justify-content:center;} #WEBCOMPONENT-TABBER-POPUP .ImagePopupContent img{max-width:80vw;max-height:70vh;border-radius:12px;} /* IMAGE POPUP CLOSE BUTTON */ #WEBCOMPONENT-TABBER-POPUP .ImagePopupClose{position:absolute;top:18px;right:18px;background:rgba(0,0,0,0.08);border:none;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;} #WEBCOMPONENT-TABBER-POPUP .ImagePopupClose:hover{background:rgba(0,0,0,0.15);} #WEBCOMPONENT-TABBER-POPUP .ImagePopupClose:focus{outline:2px solid #0500FF;} #WEBCOMPONENT-TABBER-POPUP .ImagePopupClose svg{width:22px;height:22px;} /* RESPONSIVE - TABLET */ @media (min-width:768px){ #WEBCOMPONENT-TABBER-POPUP .ImagePopupContent img{max-width:600px;max-height:70vh;} #WEBCOMPONENT-TABBER-POPUP .ImagePopupContent{padding:2.5rem;}} /* RESPONSIVE - DESKTOP */ @media (min-width:1024px){ #WEBCOMPONENT-TABBER-POPUP .ImagePopupContent img{max-width:800px;} #WEBCOMPONENT-TABBER-POPUP .ImagePopupContent{padding:3rem;}} /* ################################################ TINY SLIDER ################################################ */ /* MyTinySlider - NAVIGATION BUTTONS */ .MyTinySlider-Controls,[id*=MyTinySlider][id*=Controls]{align-self:flex-end;display:flex;gap:1rem} .MyTinySlider-Controls button,[id*=MyTinySlider][id*=Controls] button{width:2rem;height:2rem;border-radius:50%;border:2px solid #001344;display:flex;align-items:center;justify-content:center;background-color:transparent;transition:background-color .2s cubic-bezier(.25,.46,.45,.94),color .2s cubic-bezier(.25,.46,.45,.94);cursor:pointer} @media (min-width:768px){ .MyTinySlider-Controls button,[id*=MyTinySlider][id*=Controls] button{width:3rem;height:3rem} } .MyTinySlider-Controls button:focus-visible,.MyTinySlider-Controls button:hover,[id*=MyTinySlider][id*=Controls] button:focus-visible,[id*=MyTinySlider][id*=Controls] button:hover{background-color:#001344;color:#fff;outline:0} .MyTinySlider-Controls button span::before,[id*=MyTinySlider][id*=Controls] button span::before{font-size:1rem;font-weight:700;color:#001344} .MyTinySlider-Controls button:focus-visible span::before,.MyTinySlider-Controls button:hover span::before,[id*=MyTinySlider][id*=Controls] button:focus-visible span::before,[id*=MyTinySlider][id*=Controls] button:hover span::before{color:#fff} .MyTinySlider-Controls button[aria-disabled=true],.MyTinySlider-Controls button[disabled],[id*=MyTinySlider][id*=Controls] button[aria-disabled=true],[id*=MyTinySlider][id*=Controls] button[disabled]{background-color:transparent;cursor:not-allowed;opacity:.6} .MyTinySlider-Controls button[aria-disabled=true] span::before,.MyTinySlider-Controls button[disabled] span::before,[id*=MyTinySlider][id*=Controls] button[aria-disabled=true] span::before,[id*=MyTinySlider][id*=Controls] button[disabled] span::before{color:#001344} /* ################################################ BUTTON IMAGES ################################################ */ .LogoPlayStore {width:150px;height:50px;display:block;background:url("https://shopmedia.haufe-group.com/ShopData/media/esales/landingpages/00_styleguide/haufe/img/logo/apple-app-store-logo.png") no-repeat center;background-size:contain} .LogoAppStore{width:150px;height:50px;display:block;background:url("https://shopmedia.haufe-group.com/ShopData/media/esales/landingpages/00_styleguide/haufe/img/logo/google-play-store-logo.png") no-repeat center;background-size:contain} /* ################################################ SPLIDE SLIDER ################################################ */ /* LAYOUT */ div[id^="pgl_container_"] .splide {margin: 2rem auto; max-width: 100%;} div[id^="pgl_container_"] .splide__track {overflow: visible;} div[id^="pgl_container_"] .splide__slide {display: flex; align-items: center; justify-content: center; min-height: 220px; border-radius: 12px; margin: 0;} /* TXT */ div[id^="pgl_container_"] .splide__slide .SlideContent {font-family: 'Segoe UI', Arial, sans-serif; font-size: 1.2rem; color: #001344; text-align: center; padding: 2rem;} /* COMPONENTS */ div[id^="pgl_container_"] .splide__arrow {background: #001344; color: #fff; border-radius: 50%; width: 2.5rem; height: 2.5rem; border: none; transition: background .2s;} div[id^="pgl_container_"] .splide__pagination__page {border-radius: 50%; width: 1rem; height: 1rem; margin: 0 0.25rem; border: none; transition: background .2s;} div[id^="pgl_container_"] .splide__pagination__page.is-active {background: #001344;} /* Fix Splide slider height */ #SplideSliderA .splide__track, #SplideSliderA .splide__list, #SplideSliderA .splide__slide {height:auto; min-height:0; max-height:100%;} #SplideSliderA .splide__slide > div {height:auto; min-height:0; max-height:100%;} #SplideSliderA .ContainerBlue {min-height:unset; height:auto;} /* LAYOUT */ div[id^="pgl_container_"] .SplideSlider .ContentWrapper{position:relative;overflow:visible;padding:2rem 1rem;max-width: 1260px;margin:0 auto;} /* SPLIDE SLIDER OVERFLOW */ div[id^="pgl_container_"] .SplideSlider {width:100%;max-width:100%;margin:0;overflow:visible;} div[id^="pgl_container_"] .SplideSlider .splide__track{overflow:visible;} div[id^="pgl_container_"] .SplideSlider .splide__list{overflow:visible;display:flex;gap:2rem;} div[id^="pgl_container_"] .SplideSlider .splide__slide{min-width:70vw;max-width:340px;flex:0 0 auto;} div[id^="pgl_container_"] .SplideSlider .ContainerBlue{padding:2.5rem;display:flex;flex-direction:column;gap:0.5rem;border-radius:1.125rem;min-height:20rem;} @media(min-width:768px){div[id^="pgl_container_"] .SplideSlider .splide__slide{min-width:40vw;max-width:380px;}} @media(min-width:1200px){div[id^="pgl_container_"] .SplideSlider .splide__slide{min-width:360px;max-width:420px;}} /* ICON */ div[id^="pgl_container_"] .SplideSlider .IconWrapper{display:flex;align-items:center;justify-content:left;margin-bottom:1rem;} div[id^="pgl_container_"] .SplideSlider .MaterialIcon{font-family:'Material Symbols Sharp';font-size:48px;color:#001344;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 48;line-height:1;} /* ARROW */ div[id^="pgl_container_"] .SplideSlider .splide__arrows{position:absolute;right:1rem;bottom:1rem;top:118%;display:flex;gap:1rem;z-index:2;} div[id^="pgl_container_"] .SplideSlider .splide__arrow{position:static;margin:0;width:2rem;height:2rem;border-radius:50%;border:2px solid #001344;display:flex;align-items:center;justify-content:center;background-color:transparent;color:#001344;transition:background-color .2s cubic-bezier(.25,.46,.45,.94),color .2s cubic-bezier(.25,.46,.45,.94),border-color .2s cubic-bezier(.25,.46,.45,.94);} @media(min-width:768px){ div[id^="pgl_container_"] .SplideSlider .splide__arrows{right:2rem;bottom:2rem;gap:1.5rem;} div[id^="pgl_container_"] .SplideSlider .splide__arrow{width:3rem;height:3rem;}} div[id^="pgl_container_"] .SplideSlider .splide__arrow:hover, div[id^="pgl_container_"] .SplideSlider .splide__arrow:focus-visible{background-color:#001344;;border:2px solid #001344;} div[id^="pgl_container_"] .SplideSlider .splide__arrow:hover svg, div[id^="pgl_container_"] .SplideSlider .splide__arrow:focus-visible svg{fill:#fff;} div[id^="pgl_container_"] .SplideSlider .splide__arrow[disabled]{background-color:transparent;color:#001344;border:2px solid #001344;opacity:0.5;cursor:not-allowed;} div[id^="pgl_container_"] .SplideSlider .splide__arrow[disabled] svg{fill:#001344 !important;opacity:0.5;} div[id^="pgl_container_"] .SplideSlider .splide__pagination__page{background:#dbe5ff;border-radius:50%;width:1rem;height:1rem;} /* Ensure Splide layout is not overridden */ div[id^="pgl_container_"] .SplideSlider .splide__list{display:flex;} div[id^="pgl_container_"] .SplideSlider .splide__slide{flex:0 0 auto;} /* ################################################ BUTTON IMAGES ################################################ */ div[id^="pgl_container_"] .LogoPlayStore {width:150px;height:50px;display:block;background:url("https://shopmedia.haufe-group.com/ShopData/media/esales/landingpages/00_styleguide/haufe/elements/icons/logo-play-store.png") no-repeat center;background-size:contain} div[id^="pgl_container_"] .LogoAppStore{width:150px;height:50px;display:block;background:url("https://shopmedia.haufe-group.com/ShopData/media/esales/landingpages/00_styleguide/haufe/elements/icons/logo-app-store.png") no-repeat center;background-size:contain} /* ################################################ FIXES ################################################ */ /* WHITE BAR FIX - APPLIED TO THE EMPTY FIXING DIV "WhiteBarFix" BEFORE THE HERO SECTION */ div[id^="pgl_container_"] #header{position:relative;z-index:1;} div[id^="pgl_container_"] .WhiteBarFix{padding-top:0; margin-top:-29px} @media (min-width:1023px){div[id^="pgl_container_"] .WhiteBarFix{margin-top:-50px}} /* TOPSELLER WIDGET FIX */ div[id^="pgl_container_"] .topsellerwidget,.catalogentryrecommendationwidget{max-width:1260px; margin:30px auto;} /* PRODUKTVERGLEICH MOBILE BUTTON WIDGET FIX */ div[id^="pgl_container_"] .widgetContainer.productcomparewidget {display: none;} /* MyTinySlider CARD SLIDER MARGIN FIX */ #tns1-iw{margin: 0px -10px 0px 0px;} #tns2-iw{margin: 0px -10px 0px 0px;} #tns3-iw{margin: 0px -10px 0px 0px;} #tns4-iw{margin: 0px -10px 0px 0px;} #tns11-iw{margin: 0px -10px 0px 0px;} /* FIX ELOQUA FORM WITH CONFIGURATOR - Limit dropdown width problem and handle long option text */ #datumweb.field_input{width:100%;max-width:100%;box-sizing:border-box;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} #datumweb.field_input option{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}