/* ################################################## */ /* HAUFE STYLE FAMILY CSS - TEMPLATE SYSTEM */ /* Created: December 4, 2025 */ /* Purpose: Reusable CSS for family landing pages */ /* ################################################## */ /* Family Pages List: finance-office-versionen personal-office-versionen steuer-office-versionen tv-l-office-versionen tvoed-office-versionen tvoed-office-krankenhaeusern-versionen zeugnis-manager-versionen */ /* ######################################### TEMPORARY - disable all MyButton elements ################################################################################################*/ /* .ButtonWrapper > a.MyButton[onclick*="product_comparison"]{display:none!important;} */ /* IMAGE — aspect ratio and rounded corners (family pages do not load haufe-style.css) */ img.ImageAspectRatio{display:block;width:100%;height:auto;margin:0 auto;} img.ImageStyle{border-radius:12px;} img.TokenImageStyle{border-radius:12px;} /* ######################## STICKY BUYBOX ######################## */ #SECTION-STICKY-BUYBOX{position:fixed;top:0;left:0;right:0;z-index:100;background-color:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.1);display:none;height:auto;} #SECTION-STICKY-BUYBOX.Active{display:block;} #SECTION-STICKY-BUYBOX .NaviWrapper{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:0.75rem;padding:1rem;max-width:100%;margin:0 auto;height:100%;} @media(min-width:768px){#SECTION-STICKY-BUYBOX .NaviWrapper{flex-direction:row;align-items:center;gap:2rem;padding:0;max-width:1400px;}} @media(min-width:1024px){#SECTION-STICKY-BUYBOX{height:80px;}} #SECTION-STICKY-BUYBOX .FirstCol,#SECTION-STICKY-BUYBOX .SecondCol,#SECTION-STICKY-BUYBOX .ThirdCol,#SECTION-STICKY-BUYBOX .FourthCol,#SECTION-STICKY-BUYBOX .FifthCol{flex:0 1 auto;display:flex;flex-direction:column;gap:0.15rem;} #SECTION-STICKY-BUYBOX select{padding:0.5rem 2rem 0.5rem 1rem;border:2px solid #ddd;border-radius:4px;font-size:0.875rem;background-color:#fff;color:#001344;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23001344' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.75rem center;} #SECTION-STICKY-BUYBOX select:focus{outline:2px solid #001344;outline-offset:2px;border-color:#001344;} @media(min-width:1200px){#SECTION-STICKY-BUYBOX.Active{display:block;}#SECTION-STICKY-BUYBOX{display:none;}} @media(max-width:1199px){#SECTION-STICKY-BUYBOX,#SECTION-STICKY-BUYBOX.Active{display:none!important;}} /* ######################## SECTION-HERO-FAMILY ######################## */ /* HERO GRADIENT BACKGROUND */ .BgGradientHeroFamily{position:relative;background-color:#eef1f9;} .BgGradientHeroFamily::before{content:'';position:absolute;inset:0;opacity:0.5;pointer-events:none;z-index:0;background-color:#eef1f9;background-image:radial-gradient(ellipse 45% 35% at 62% 18%,rgba(255,182,193,0.7) 0%,rgba(255,182,193,0.5) 20%,rgba(255,192,203,0.3) 40%,rgba(255,200,210,0.1) 60%,transparent 80%),radial-gradient(ellipse 50% 50% at 58% 52%,rgba(120,90,200,0.65) 0%,rgba(130,100,210,0.5) 15%,rgba(140,110,220,0.4) 30%,rgba(160,130,230,0.3) 45%,rgba(180,150,240,0.15) 60%,transparent 80%),radial-gradient(ellipse 45% 45% at 75% 75%,rgba(70,80,230,0.8) 0%,rgba(80,90,240,0.65) 15%,rgba(90,100,245,0.5) 30%,rgba(100,120,250,0.35) 45%,rgba(120,140,255,0.2) 60%,transparent 80%),radial-gradient(ellipse 30% 30% at 88% 12%,rgba(180,220,255,0.9) 0%,rgba(170,210,255,0.7) 20%,rgba(160,200,255,0.4) 40%,rgba(150,190,255,0.2) 60%,transparent 80%),radial-gradient(ellipse 25% 50% at 98% 45%,rgba(60,100,240,0.75) 0%,rgba(70,110,245,0.55) 20%,rgba(80,120,250,0.35) 40%,rgba(100,140,255,0.15) 60%,transparent 80%),radial-gradient(ellipse 40% 40% at 55% 35%,rgba(200,150,220,0.5) 0%,rgba(190,140,215,0.35) 25%,rgba(180,130,210,0.2) 50%,transparent 75%),radial-gradient(ellipse 20% 20% at 82% 8%,rgba(255,255,255,0.95) 0%,rgba(255,255,255,0.6) 30%,rgba(255,255,255,0.2) 60%,transparent 80%),linear-gradient(to right,rgba(240,243,252,1) 0%,rgba(235,238,250,0.8) 30%,rgba(220,225,248,0.4) 60%,rgba(200,210,245,0.2) 100%),linear-gradient(to bottom,rgba(238,241,250,1) 0%,rgba(235,238,248,0.9) 40%,rgba(230,233,248,0.7) 70%,rgba(220,225,245,0.5) 100%);background-size:100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%;background-repeat:no-repeat;background-blend-mode:normal;} .BgGradientHeroFamily > *{position:relative;z-index:1;} /* HERO CONTENT WRAPPER */ .ContentWrapperHeroFamily {max-width: 1494px; margin:0 auto; padding: 0 10px;} @media (min-width:480px){.ContentWrapperHeroFamily{padding:0 30px}} /* ### NAVBAR LOGO POSITIONING ### */ #logo:after{margin-left:4px!important} /* LAYOUT — hero content shell with rounded corners and responsive padding */ #SECTION-HERO-FAMILY .ElementsWrapper{position:relative;width:100%;height:100%;overflow:hidden;border-radius:12px;padding:1rem;} @media(min-width:768px){#SECTION-HERO-FAMILY .ElementsWrapper{padding:3rem 3rem;}} /* LAYOUT — price card white panels */ #SECTION-HERO-FAMILY .ContainerWhite{background-color:#fff;border-radius:12px;padding:1rem;} #SECTION-HERO-FAMILY .ContainerWhite + .ContainerWhite{margin-top:1rem;} @media(min-width:768px){#SECTION-HERO-FAMILY .ContainerWhite{padding:1.5rem;}} #SECTION-HERO-FAMILY .GridTitles{display:grid; align-items:flex-end; justify-content:center; grid-template-columns: 1fr; gap: 0.5rem 1rem; max-width:100%; margin: 0 auto;} #SECTION-HERO-FAMILY .GridTitles>div:nth-child(1){order:2;} #SECTION-HERO-FAMILY .GridTitles>div:nth-child(2){order:1; text-align:left;} #SECTION-HERO-FAMILY .GridTitles .Stars{justify-content:flex-start;} /* LAYOUT — hero title row: product icon + title */ #SECTION-HERO-FAMILY h1{margin-top:0;} #SECTION-HERO-FAMILY .GridTitles .LeftWrapper .HeroTitleFlex{display:flex;align-items:flex-start;gap:1rem;} #SECTION-HERO-FAMILY .GridTitles .LeftWrapper .IconWrapperProduct{flex:0 0 auto;width:4.5rem;height:4.5rem;} #SECTION-HERO-FAMILY .GridTitles .LeftWrapper .IconWrapperProduct img{width:100%;height:100%;object-fit:contain;display:block;border-radius:0.75rem;} #SECTION-HERO-FAMILY .GridTitles .LeftWrapper .HeroTitleFlex .TitleWrapper{flex:1;min-width:0;} @media(min-width:768px){ #SECTION-HERO-FAMILY .GridTitles .LeftWrapper .IconWrapperProduct{width:5.5rem;height:5.5rem;} #SECTION-HERO-FAMILY .GridTitles .LeftWrapper .HeroTitleFlex{gap:1.25rem;}} @media(min-width:1100px){ #SECTION-HERO-FAMILY .GridTitles{grid-template-columns: 1fr 1fr; gap: 1rem 3.5rem;} #SECTION-HERO-FAMILY .GridTitles>div:nth-child(1){order:1; grid-area: 1 / 1 / 2 / 2;} #SECTION-HERO-FAMILY .GridTitles>div:nth-child(2){order:2; grid-area: 1 / 2 / 2 / 3; text-align:right;} #SECTION-HERO-FAMILY .GridTitles .Stars{justify-content:flex-end;}} #SECTION-HERO-FAMILY .GridContents{display:grid; align-items:flex-start; justify-content:center; grid-template-columns: 1fr; gap: 0.5rem 1rem; max-width:100%; margin: 0 auto;} #SECTION-HERO-FAMILY .GridContents>div:nth-child(1){order:1;} #SECTION-HERO-FAMILY .GridContents>div:nth-child(2){order:2;} @media(min-width:1100px){ #SECTION-HERO-FAMILY .GridContents{grid-template-columns: 1fr 1.1fr; gap: 1rem 6rem;} #SECTION-HERO-FAMILY .GridContents>div:nth-child(1){order:1; grid-area: 1 / 1 / 2 / 2;} #SECTION-HERO-FAMILY .GridContents>div:nth-child(2){order:2; grid-area: 1 / 2 / 2 / 3;}} #SECTION-HERO-FAMILY .Stars{display:flex;align-items:center;gap:5px;margin-bottom:4px} #SECTION-HERO-FAMILY .Stars span{color:#ffce31;font-size:1.5rem;margin-right:2px}@media(min-width:768px){#SECTION-HERO-FAMILY .Stars span{font-size:2rem}} #SECTION-HERO-FAMILY .ProgressBar{width:100%;height:12px;background:#e6e9f2;border-radius:8px;margin:0 0 18px 0;overflow:hidden} #SECTION-HERO-FAMILY .Progress{width:60%;height:100%;background:#222a3f;border-radius:8px} #SECTION-HERO-FAMILY .Tabs{display:flex;flex-direction:column;gap:0.75rem;background:#ededf0;border-radius:2rem;padding:1rem 1rem;margin-bottom:18px;box-sizing:border-box;} #SECTION-HERO-FAMILY .Tab{flex:1;text-align:center;padding:1rem 1.5rem;height:3.5rem;display:flex;align-items:center;justify-content:center;border-radius:1.75rem;background:transparent;border:none;font-weight:600;color:#0a1940;cursor:pointer;font-size:1rem;transition:background .2s,color .2s;width:100%;white-space:nowrap;flex-shrink:0;} #SECTION-HERO-FAMILY .Tab:hover{background:#dbe5ff;color:#0a1940} #SECTION-HERO-FAMILY .Tab.Active{background:#0a1940;color:#fff;box-shadow:none;} @media(min-width:670px){ #SECTION-HERO-FAMILY .Tabs{flex-direction:row;padding:1rem 1.5rem;gap:0.5rem;} #SECTION-HERO-FAMILY .Tab{width:auto;padding:0 1.25rem;height:2.75rem;font-size:0.9rem;}} @media(min-width:1024px){ #SECTION-HERO-FAMILY .Tabs{padding: 0.8rem 1rem;} #SECTION-HERO-FAMILY .Tab{padding:0 1.75rem;height:3rem;font-size:1rem;}} #SECTION-HERO-FAMILY .ButtonWrapper .TokenButtonPrimaryLight{white-space:nowrap;} #SECTION-STICKY-BUYBOX .FifthCol .MyButton{white-space:nowrap;} #SECTION-HERO-FAMILY .TrialCheckbox{margin:10px 0 16px 0;display:flex;align-items:center;font-size:1rem;color:#222a3f} #SECTION-HERO-FAMILY .TrialCheckbox input[type=checkbox]{accent-color:#222a3f;width:20px;height:20px;margin-right:10px} #SECTION-HERO-FAMILY .trial-btn{width:100%;background:#f74c9c;color:#fff;border:none;border-radius:22px;padding:14px 0;font-size:1.15rem;font-weight:700;cursor:pointer;transition:background .2s;margin-top:8px;box-shadow:0 2px 8px rgba(247,76,156,.09)} #SECTION-HERO-FAMILY .trial-btn:hover{background:#e03e8d} #SECTION-HERO-FAMILY .ImageWrapperPayments{display:flex;gap:0.2rem;align-items:center;} #SECTION-HERO-FAMILY .ImageWrapperPayments img{height:32px;background:#fff;border-radius:7px;padding:2px 7px} #SECTION-HERO-FAMILY .ButtonWrapperVersion{display:inline-block;background:#fff;border:2px solid #222a3f;color:#222a3f;font-weight:600;border-radius:24px;padding:7px 18px;font-size:1rem;margin-top:8px;cursor:pointer;transition:background .2s,color .2s} #SECTION-HERO-FAMILY .ButtonWrapperVersion:hover{background:#222a3f;color:#fff} #SECTION-HERO-FAMILY .PlusIcon{display:inline-block;vertical-align:middle;margin-left:8px;width:24px;height:24px} #SECTION-HERO-FAMILY .StatusDot{display:inline-block;width:16px;height:16px;border-radius:50%;background:#2ecc40;vertical-align:middle;margin-left:10px;} #SECTION-HERO-FAMILY .TrialCheckboxExpandable{cursor:default;outline:none;} #SECTION-HERO-FAMILY .TrialCheckboxExpandable .TrialInfo{max-height:0;overflow:hidden;transition:max-height 0.4s cubic-bezier(.4,0,.2,1);margin-top:0;} #SECTION-HERO-FAMILY .TrialCheckboxExpandable[aria-expanded="true"] .TrialInfo{max-height:600px;margin-top:10px;transition:max-height 0.5s cubic-bezier(.4,0,.2,1);} #SECTION-HERO-FAMILY .TrialCheckboxFlex{display:flex;align-items:center;justify-content:flex-end;width:100%;gap:8px;} #SECTION-HERO-FAMILY .TrialCheckboxFlex label{margin-right:auto;cursor:pointer;} #SECTION-HERO-FAMILY .TrialCheckboxFlex label:hover{text-decoration:underline;} #SECTION-HERO-FAMILY .InfoPoint{margin-left:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#DBE5FF;color:#001344;font-weight:bold;font-size:0.75rem;} #SECTION-HERO-FAMILY .SelectCustom{ width: 100%; max-width: 100%; height: 50px; padding: 0 16px; border: 1px solid #D3D6DB; border-radius: 12px; font-family: inherit; font-size: 18px; color: #11234B; font-weight: 500; appearance: none; -webkit-appearance: none; -moz-appearance: none; position: relative; outline: none; box-sizing: border-box; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 16px center; background-size: 1rem 24px;} #SECTION-HERO-FAMILY .SelectCustom::-ms-expand{ display: none;} #SECTION-HERO-FAMILY .GridContents .LeftWrapper .ImageWrapper{ margin-bottom: 2rem;} #SECTION-HERO-FAMILY .GridTitles .TitleWrapper p{margin-bottom: 0; text-wrap: balance;} /* ######################## SECTION-SLIDER-BENEFITS ######################## */ #SECTION-SLIDER-BENEFITS .FlexContainer{display:flex;flex-wrap:wrap;} #SECTION-SLIDER-BENEFITS .FlexItem {flex:100%;padding:10px;} @media (min-width:840px){#SECTION-SLIDER-BENEFITS .FlexItem {flex:0 0 calc(50% - 20px);margin:0 10px}} #MyTinySlider-Benefits {max-width: 1920px;} #MyTinySlider-Benefits .item .ContainerBlue {padding:1rem 1rem 1rem 1rem;display:flex;flex-direction:column;gap:0.5rem;height:100%;} #MyTinySlider-Benefits-Slider{display:flex;flex-direction:column-reverse;gap:60px} #MyTinySlider-Benefits .MyTinySlider-Benefits-Container{display:flex} #MyTinySlider-Benefits .tns-nav{display:none} #MyTinySlider-Benefits .tns-ovh{overflow:visible} #SECTION-SLIDER-BENEFITS .MyHaufeIcon{display: flex; justify-content: left; align-items: left;} /* ######################## MENU-INPAGE ######################## */ div[id^=pgl_container_] #MENU-INPAGE {position:relative;} div[id^=pgl_container_] #MENU-INPAGE .MenuContainer{background:#ededf0;border-radius:3rem;padding:1.2rem 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-INPAGE .MenuList{display:flex;flex-direction:row;width:fit-content;max-width:none;justify-content:flex-start;align-items:center;gap:0.5rem;overflow-x:visible;overflow-y:hidden;-webkit-overflow-scrolling:auto;scrollbar-width:none;-ms-overflow-style:none;} div[id^=pgl_container_] #MENU-INPAGE .MenuList::-webkit-scrollbar{display:none;} div[id^=pgl_container_] #MENU-INPAGE .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-INPAGE .MenuItem.active{background:#0a1940;color:#fff;box-shadow:none;} @media (min-width:768px){div[id^=pgl_container_] #MENU-INPAGE .MenuContainer{padding:1rem 1.5rem;} div[id^=pgl_container_] #MENU-INPAGE .MenuList{justify-content:space-between;gap:0.5rem;overflow-x:visible;} div[id^=pgl_container_] #MENU-INPAGE .MenuItem{padding:0 1.25rem;height:2.75rem;font-size:0.9rem;}} @media (min-width:1024px){div[id^=pgl_container_] #MENU-INPAGE .MenuContainer{padding:1rem 2rem;width:auto;max-width:none;} div[id^=pgl_container_] #MENU-INPAGE .MenuList{width:fit-content;} div[id^=pgl_container_] #MENU-INPAGE .MenuItem{padding:0 1.75rem;height:3rem;font-size:1rem;}} div[id^=pgl_container_] #MENU-INPAGE nav {min-width: 100%; max-width: 1260px;} @media (min-width: 767px) {div[id^=pgl_container_] #MENU-INPAGE nav {min-width: auto;}} /* MENU INPAGE ARROWS - LAYOUT */ div[id^=pgl_container_] #MENU-INPAGE .MenuArrowsWrapper{display:none;align-items:center;justify-content:center;z-index:2;} div[id^=pgl_container_] #MENU-INPAGE .MenuArrowBtn{width:38px;height:38px;border-radius:50%;background:#fff;border:2px solid #001344;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.08);font-size:1.2em;cursor:pointer;transition:background 0.2s;outline:none;margin:0 4px;display:none;} div[id^=pgl_container_] #MENU-INPAGE .MenuArrowBtn:hover,div[id^=pgl_container_] #MENU-INPAGE .MenuArrowBtn:active{background:#dbe5ff;} div[id^=pgl_container_] #MENU-INPAGE .MenuArrowBtn span{display:inline-block;color:#001344;} div[id^=pgl_container_] #MENU-INPAGE .MenuListWrapper{flex:1;min-width:0;width:100%;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;} div[id^=pgl_container_] #MENU-INPAGE .MenuListWrapper::-webkit-scrollbar{display:none;} @media (max-width:799px){div[id^=pgl_container_] #MENU-INPAGE .MenuArrowsWrapper{display:flex !important;}div[id^=pgl_container_] #MENU-INPAGE .MenuArrowBtn{display:flex !important;}div[id^=pgl_container_] #MENU-INPAGE .MenuListWrapper{overflow-x:auto !important;}} @media (min-width:800px){div[id^=pgl_container_] #MENU-INPAGE .MenuArrowsWrapper{display:none !important;}div[id^=pgl_container_] #MENU-INPAGE .MenuArrowBtn{display:none !important;}div[id^=pgl_container_] #MENU-INPAGE .MenuListWrapper{overflow-x:visible !important;}} /* ######################## SECTION-INFO-A ######################## */ #SECTION-INFO-A .GridContainer{display:grid; align-items:center; justify-content:center; grid-template-columns:1fr; gap: 2rem 5rem; max-width:100%; margin: 0 auto;} #SECTION-INFO-A .GridContainer>div:nth-child(1){order:1;} #SECTION-INFO-A .GridContainer>div:nth-child(2){order:2;} #SECTION-INFO-A .GridContainer>div:nth-child(3){order:3;} @media(min-width:840px){ #SECTION-INFO-A .GridContainer{grid-template-columns: 1fr 1.2fr;} #SECTION-INFO-A .GridContainer>div:nth-child(1){order:1; grid-area: 1 / 1 / 2 / 3;} #SECTION-INFO-A .GridContainer>div:nth-child(2){order:2; grid-area: 2 / 1 / 3 / 2;} #SECTION-INFO-A .GridContainer>div:nth-child(3){order:3; grid-area: 2 / 2 / 3 / 3;}} /* ######################## SECTION-INFO-B ######################## */ #SECTION-INFO-B .GridContainer{display:grid; align-items:center; justify-content:center; grid-template-columns:1fr; gap: 2rem 3rem; max-width:100%; margin: 0 auto;} #SECTION-INFO-B .GridContainer>div:nth-child(1){order:1;} #SECTION-INFO-B .GridContainer>div:nth-child(2){order:3;} #SECTION-INFO-B .GridContainer>div:nth-child(3){order:2;} @media(min-width:840px){ #SECTION-INFO-B .GridContainer{grid-template-columns: 1.2fr 1fr;} #SECTION-INFO-B .GridContainer>div:nth-child(1){order:1; grid-area: 1 / 1 / 2 / 3;} #SECTION-INFO-B .GridContainer>div:nth-child(2){order:2; grid-area: 2 / 1 / 3 / 2;} #SECTION-INFO-B .GridContainer>div:nth-child(3){order:3; grid-area: 2 / 2 / 3 / 3;}} /* ######################## SECTION-INFO-C ######################## */ #SECTION-INFO-C .GridContainer{display:grid; align-items:center; justify-content:center; grid-template-columns:1fr; gap: 2rem 5rem; max-width:100%; margin: 0 auto;} #SECTION-INFO-C .GridContainer>div:nth-child(1){order:1;} #SECTION-INFO-C .GridContainer>div:nth-child(2){order:2;} #SECTION-INFO-C .GridContainer>div:nth-child(3){order:3;} @media(min-width:840px){ #SECTION-INFO-C .GridContainer{grid-template-columns: 1fr 1.2fr;} #SECTION-INFO-C .GridContainer>div:nth-child(1){order:1; grid-area: 1 / 1 / 2 / 3;} #SECTION-INFO-C .GridContainer>div:nth-child(2){order:2; grid-area: 2 / 1 / 3 / 2;} #SECTION-INFO-C .GridContainer>div:nth-child(3){order:3; grid-area: 2 / 2 / 3 / 3;}} /* ######################## SECTION-ACCORDION ######################## */ #SECTION-ACCORDION .AccordionList{display:flex;flex-direction:column;gap:16px;} #SECTION-ACCORDION .AccordionItem{background:#f5f5f7;border-radius:8px;padding:0;transition:box-shadow 0.2s;box-shadow:none;} #SECTION-ACCORDION .AccordionButton{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;padding:20px 16px;border-radius:8px;cursor:pointer;outline:none;transition:background 0.15s;} #SECTION-ACCORDION .AccordionButton:hover,#SECTION-ACCORDION .AccordionButton:focus{background:#edeef0;} #SECTION-ACCORDION .AccordionIcon{display:flex;align-items:center;justify-content:center;min-width:1.6rem;color:#22305b;font-weight:400;line-height:1;pointer-events:none;} #SECTION-ACCORDION .AccordionIcon::before{content:'+';font-size:1.6rem;font-weight:400;} #SECTION-ACCORDION .AccordionItem.active .AccordionIcon::before{content:'-';font-size:2.2rem;font-weight:300;} #SECTION-ACCORDION .AccordionContent{display:none;padding:0 16px 16px 16px;} #SECTION-ACCORDION .AccordionItem.active .AccordionContent{display:block;} #SECTION-ACCORDION .AccordionContentInner{display:flex;flex-direction:column;gap:1.5rem;align-items:center;margin-top:1rem;} @media(min-width:840px){#SECTION-ACCORDION .AccordionContentInner{flex-direction:row;gap:0.5rem;align-items:center;}} #SECTION-ACCORDION .AccordionImageWrapper{flex:0 0 100%;order:1;} #SECTION-ACCORDION .AccordionTextWrapper{flex:1;order:2;} @media(min-width:840px){#SECTION-ACCORDION .AccordionImageWrapper{flex:0 0 40%;order:2;}#SECTION-ACCORDION .AccordionTextWrapper{order:1;}} /* LAYOUT — accordion content padding */ #SECTION-ACCORDION .AccordionTextWrapper .TextWrapper,#SECTION-ACCORDION .AccordionImageWrapper .ImageWrapper{padding:1rem;} @media(min-width:768px){#SECTION-ACCORDION .AccordionTextWrapper .TextWrapper,#SECTION-ACCORDION .AccordionImageWrapper .ImageWrapper{padding:2rem;}} /* ######################## SECTION-FAQ ######################## */ #SECTION-FAQ hr{border-top: 2px solid #DBE5FF;} #SECTION-FAQ {position:relative;max-width:1920px;margin-left:auto;margin-right:auto;} #SECTION-FAQ ol li{margin-bottom:1.25rem} #SECTION-FAQ .FaqContainer {max-width:95%;margin:0 auto} #SECTION-FAQ .FaqElement {display:flex;align-items:flex-start;justify-content:space-between;width:100%;min-height:2.5rem;margin:1.875rem 0 .9375rem;padding:.625rem 0;text-decoration:none;outline:0;transition:.4s;color:#001344;} #SECTION-FAQ .FaqElement .QuestionText {flex: 1;padding-right: 10px;} #SECTION-FAQ .Panel{max-height:0;overflow:hidden;transition:.3s ease-out} @media (min-width:769px){ #SECTION-FAQ .FaqContainer {max-width:75%}} @media (min-width:1025px){ #SECTION-FAQ .MyLighthouseBox {padding:3.75rem 3.75rem 2.5rem;margin:7.5rem 0 3.75rem}} @media (min-width:1281px){ #SECTION-FAQ .FaqContainer {max-width:70%}} #SECTION-FAQ .AccordionIcon{display: flex; align-items: center; justify-content: center; margin-left: 1rem; line-height: 1; width: 30px; height: 30px; position: relative; flex-shrink: 0; margin-top: 0;} #SECTION-FAQ .AccordionIcon::before{ content: '+'; position: absolute; font-size: 2rem; font-weight: 100;} #SECTION-FAQ .FaqElement.active .AccordionIcon::before{ content: '-'; font-size: 3.2rem; font-weight: 100;} /* ######################## WEBCOMPONENT-PRODUCTRATINGS-FAMILY ######################## */ div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-main{display:flex;gap:2rem;margin-bottom:2.25rem} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-summary{background:#f6f7fa;border-radius:0.75rem;padding:1.75rem 2rem;flex:2.5;display:flex;justify-content:space-between;align-items:center} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-summary-left{width:100%;max-width:18.75rem} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-average{font-size:1.4rem;display:flex;align-items:center;gap:0.625rem;margin-bottom:1.125rem} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-average-value{font-weight:700;color:#20294b;font-size:2.2rem} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-stars{color:#ffd600;font-size:1.5rem;letter-spacing:0.0625rem;font-family:inherit} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-total{color:#6c7890;font-size:1rem;margin-left:0.375rem} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-bars{margin-top:0.5rem} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-bar-row{display:flex;align-items:center;margin-bottom:0.25rem;gap:0.375rem} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-bar-label{width:1.125rem;font-weight:600;color:#20294b;text-align:right} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-bar-star{color:#20294b;font-size:1rem;margin-right:0.125rem} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-bar{flex:1;background:#e3e9f2;border-radius:0.3125rem;height:0.625rem;margin:0 0.5rem;overflow:hidden} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-bar-fill{background:#20294b;height:100%;border-radius:0.3125rem} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-bar-count{width:2.25rem;color:#6c7890;font-size:.95rem;text-align:left} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-summary-info{margin:0 0 0 2.25rem;padding:0;list-style:disc inside;color:#20294b;font-size:.98rem;opacity:.85} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-filter{background:#fff;border:0.09375rem solid #e3e9f2;border-radius:0.75rem;padding:1.75rem 1.5rem;min-width:14rem;flex:1;height:fit-content} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-filter-title{font-weight:600;font-size:1.08rem;margin-bottom:1.125rem} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-filter ul{list-style:none;padding:0;margin:0} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-filter li{display:flex;align-items:center;font-size:1.08rem;color:#20294b;margin-bottom:0.625rem;cursor:pointer;transition:color .2s;position:relative;padding-left:2rem} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-filter li input[type="radio"]{position:absolute;left:0;top:50%;transform:translateY(-50%);width:1.125rem;height:1.125rem;margin:0;cursor:pointer;accent-color:#001344} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-filter li span{display:inline-block;min-width:5.3125rem} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-filter li.active{color:#001344} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-reviews{margin-top:1.875rem} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-review{padding:1.125rem 0;border-bottom:0.09375rem solid #e3e9f2} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-review.hidden{display:none} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-review-header{display:flex;align-items:center;gap:1.125rem;font-size:1.08rem;margin-bottom:0.4375rem} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-review-header .swc-stars{color:#ffd600;font-size:1.15rem;letter-spacing:0.0625rem} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-review-header .swc-rating{color:#20294b;font-weight:600} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-review-header .swc-date{color:#6c7890;font-size:.98rem} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-review-text{font-size:1.08rem;color:#20294b;opacity:.95} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-review.hidden{display:none} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-load-more{text-align:center;margin-top:2rem} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-load-more-btn{background:#001344;color:#fff;border:0.125rem solid #001344;padding:0.75rem 2rem;font-size:1rem;font-weight:600;border-radius:2rem;cursor:pointer;transition:all .3s ease;font-family:inherit} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-load-more-btn:hover, div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-load-more-btn:focus{background:#001344;border-color:#001344;outline:0} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-load-more-btn:active{transform:translateY(0.0625rem)} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-load-more-btn.hidden{display:none} @media (max-width:890px){div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-main{flex-direction:column;gap:1.5rem} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-summary{flex-direction:column;align-items:flex-start} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-summary-info{margin:1.25rem 0 0 0} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-filter{width:100%;max-width:100%}} @media (max-width:768px){div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-main{gap:1.5rem} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-summary{flex-direction:column} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-summary-info{margin:1.25rem 0 0 0}} @media (max-width:360px){div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-summary{padding:1.25rem 1rem}div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-bar{margin:0 0.25rem} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-summary-left{min-width:0}div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-average{flex-wrap:wrap;gap:0.375rem}} div[id^=pgl_container_] #WEBCOMPONENT-PRODUCTRATINGS-FAMILY .swc-collapse-link{display:none;cursor:pointer;margin-top:1rem;} /* ######################## SCROLL-TO-TOP-BUTTON ######################## */ #ScrollToTopButton{position:fixed;bottom:100px;right:30px;width:30px;height:30px;border-radius:10%;background-color:#8a9eff;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,0.15);opacity:0;visibility:hidden;transition:opacity 0.3s ease,visibility 0.3s ease,background-color 0.3s ease,transform 0.3s ease;z-index:1000;} #ScrollToTopButton.Show{opacity:1;visibility:visible;} #ScrollToTopButton:hover{background-color:#9baaf5;transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,0.2);} #ScrollToTopButton:active{transform:translateY(-1px);} #ScrollToTopButton span::before{font-size:0.8rem;color:#001344;} @media (min-width:768px){#ScrollToTopButton{width:50px;height:50px;bottom:100px;right:30px;}} /* ######################## TINY SLIDER — SHARED CONTROLS ######################## */ .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 #141F29;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:#141F29;color:#fff;outline:0} .MyTinySlider-Controls button span::before,[id*=MyTinySlider][id*=Controls] button span::before{font-size:2rem!important;font-weight:500!important;color:#141F29} .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:#141F29} .MyTinySlider-Controls button:hover span::before,.MyTinySlider-Controls button:focus-visible span::before,[id*="mytinyslider" i][id*="controls" i] button:hover span::before,[id*="mytinyslider" i][id*="controls" i] button:focus-visible span::before{color:#fff!important;} /* ######################## SECTION-SLIDER-BUY — DESIGN TOKENS ######################## */ :root{ --ColorWhite:#FFF; --ColorDeepBlue:#141F29; --ColorMidPink:#FE73B2; --ColorMidOrange:#FF7B0F; --TokenSliderBuyBc:var(--ColorDeepBlue); --TokenSliderBuyBg:var(--ColorWhite); --TokenSliderBuyTopsellerBc:var(--ColorMidPink); --TokenSliderBuyTopsellerBg:var(--ColorWhite); --TokenSliderBuyTopsellerBadgeBg:var(--ColorMidPink); --TokenSliderBuyTopsellerBadgeFc:var(--ColorWhite); --TokenSliderBuyTopNewBc:var(--ColorMidOrange); --TokenSliderBuyTopNewBg:var(--ColorWhite); --TokenSliderBuyTopNewBadgeBg:var(--ColorMidOrange); --TokenSliderBuyTopNewBadgeFc:var(--ColorWhite); } [id^="SECTION-SLIDER-BUY"] .TopSeller{overflow:hidden;position:relative;} [id^="SECTION-SLIDER-BUY"] .TopSeller:before{background-color:var(--TokenSliderBuyTopsellerBadgeBg);color:var(--TokenSliderBuyTopsellerBadgeFc);} [id^="SECTION-SLIDER-BUY"] .TopNew{overflow:hidden;position:relative;} [id^="SECTION-SLIDER-BUY"] .TopNew:before{background-color:var(--TokenSliderBuyTopNewBadgeBg);color:var(--TokenSliderBuyTopNewBadgeFc);} [id^="SECTION-SLIDER-BUY"] .BuyLighthouseBox{border-color:var(--TokenSliderBuyBc);background:var(--TokenSliderBuyBg);} [id^="SECTION-SLIDER-BUY"] .BuyLighthouseBox.TopSeller{border-color:var(--TokenSliderBuyTopsellerBc)!important;background:var(--TokenSliderBuyTopsellerBg);} [id^="SECTION-SLIDER-BUY"] .BuyLighthouseBox.TopNew{border-color:var(--TokenSliderBuyTopNewBc)!important;background:var(--TokenSliderBuyTopNewBg);}