.com_joeworkman_stacks_impact_stack .impact-animate.pre-anim{display:none}.com_joeworkman_stacks_impact_stack .slides-navigation{margin:0 auto;position:absolute;z-index:99;width:100%}.com_joeworkman_stacks_impact_stack .slides-navigation a{position:absolute;display:block;text-decoration:none}.com_joeworkman_stacks_impact_stack .slides-navigation a::before{line-height:1em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;text-rendering:auto;transform:translate(0,0)}.com_joeworkman_stacks_impact_stack .slides-pagination > a{text-decoration:none}.com_joeworkman_stacks_impact_stack .fg-content{position:absolute;top:0;width:100%}.com_joeworkman_stacks_impact_stack .slides-navigation a:before{font-family:"FontAwesome","Font Awesome 5 Pro";font-weight:900}.com_joeworkman_stacks_impact_stack .impact-scroll:hover{cursor:pointer}.com_joeworkman_stacks_impact_stack .slides-container{display:none}.com_joeworkman_stacks_impact_stack .scrollable{position:relative;top:0;left:0;overflow-y:auto;-webkit-overflow-scrolling:touch;height:100%}.com_joeworkman_stacks_impact_stack .scrollable::after{content:"";display:table;clear:both}.com_joeworkman_stacks_impact_stack .impact-arrow-wrap{position:absolute;z-index:1050;top:0;margin-left:-45px;width:90px;height:90px;padding:0;font-size:9px;display:block}.com_joeworkman_stacks_impact_stack .impact-arrow{float:left;position:absolute;margin-top:20px;margin-left:23px;width:40px;height:40px;border-style:solid;border-bottom-color:transparent;border-left-color:transparent;transform:rotate(135deg)}.com_joeworkman_stacks_impact_stack .impact-arrow-wrap.animates .impact-arrow{animation:impactArrows linear 1.8s 0.4s}.com_joeworkman_stacks_impact_stack .video-container{min-height:100%;min-width:100%;position:absolute;top:0;left:0}.com_joeworkman_stacks_impact_stack .video-container > img{width:100%;height:100%}.com_joeworkman_stacks_impact_stack video{max-width:none}.com_joeworkman_stacks_impact_stack .impact-container{position:absolute}.com_joeworkman_stacks_impact_stack .impact-container.v-full{height:100%}.com_joeworkman_stacks_impact_stack .impact-container.v-full .slide-content{height:100%}.com_joeworkman_stacks_impact_stack .impact-container.v-center{top:50%;transform:translateY(-50%)}.com_joeworkman_stacks_impact_stack .impact-container.h-center{left:50%;transform:translateX(-50%)}.com_joeworkman_stacks_impact_stack .impact-container.h-center.v-center{top:50%;left:50%;transform:translate(-50%,-50%)}.com_joeworkman_stacks_impact_stack .impact-container:not(.h-center):not(.h-left):not(.h-right){width:100%}@keyframes impactArrows{0%{transform:translate(0px,0px) rotate(135deg) scale(1)}15%{transform:translate(0px,22px) rotate(135deg) scale(0.8)}30%{transform:translate(0px,13px) rotate(135deg) scale(0.9)}45%{transform:translate(0px,27px) rotate(135deg) scale(0.8)}60%{transform:translate(0px,13px) rotate(135deg) scale(0.8)}75%{transform:translate(0px,4px) rotate(135deg) scale(0.9)}100%{transform:translate(0px,0px) rotate(135deg) scale(1)}} .seam{background-color:transparent;width:100%;overflow:hidden}.seam svg{display:block;transform:scale(1.05)}.seam-top{z-index:1;position:absolute;top:0}.seam-bottom{z-index:1;position:absolute;bottom:0}.seam-content-wrapper{position:relative;overflow:hidden}.seam-content-wrapper .seam,.seam-content-wrapper .seam-filler{position:absolute;width:100%;top:60%}.seam-content-wrapper .seam{transform:translateY(-100%) scale(1.01)}.seam-content-wrapper .seam-filler{height:100%}.seam-animate-end{visibility:hidden} .bento-scroll-grid,.bento-grid{display:grid;grid-auto-flow:dense;--bento-gap:0;--bento-template-columns:1fr;--bento-column-start:auto;--bento-column-end:auto;--bento-row-start:auto;--bento-row-end:auto;--bento-align-content:center;gap:var(--bento-gap);grid-template-columns:var(--bento-template-columns);align-content:var(--bento-align-content)}.bento-scroll-grid > .grid-item,.bento-grid > .grid-item{grid-column-start:var(--bento-column-start);grid-column-end:var(--bento-column-end);grid-row-start:var(--bento-row-start);grid-row-end:var(--bento-row-end);align-content:var(--bento-align-content);display:var(--bento-display,grid);position:relative;overflow:hidden}.bento-scroll-grid > .grid-item > .stacks_out,.bento-grid > .grid-item > .stacks_out{width:100%}.bento-scroll-grid > .grid-item > .stacks_out > .stacks_in,.bento-grid > .grid-item > .stacks_out > .stacks_in{height:100%;box-sizing:border-box}.bento-grid{grid-auto-rows:0px;grid-auto-columns:0px;--bento-template-rows:none;grid-template-rows:var(--bento-template-rows)}.grid-item.dummy{visibility:hidden}.bento-hide{display:none} #upButton{height:40.00px ;}@media only screen and (min-width:40em){#upButton{height:40.00px }}@media only screen and (min-width:64em){#upButton{height:40.00px }} #upButton{width:40.00px ;}@media only screen and (min-width:40em){#upButton{width:40.00px }}@media only screen and (min-width:64em){#upButton{width:40.00px }} #upButton{position:fixed ;z-index:10 ;top:unset ;bottom:30px ;left:unset ;right:30px ;} #upButton{display:none } #upButton{background:none ;background-color:var(--light-gray) ;background-position:center center ;background-origin:padding-box ;background-blend-mode:normal ;background-attachment:scroll ;-webkit-background-clip:border-box ;background-clip:border-box ;}@media (hover:none) and (pointer:coarse){#upButton{background-attachment:scroll!important}} #upButton:hover{background:none ;background-color:var(--warning) ;background-position:center center ;background-origin:padding-box ;background-blend-mode:normal ;background-attachment:scroll ;-webkit-background-clip:border-box ;background-clip:border-box ;}@media (hover:none) and (pointer:coarse){#upButton:hover{background-attachment:scroll!important}} #upButton{color:rgba(64, 64, 64, 1.00) ;} #upButton:hover{color:rgba(255, 255, 255, 1.00) ;} #upButton{cursor:pointer } #upButton{border-radius:50% ;} #upButton{padding-top:6.00px ;padding-right:0.00px ;padding-bottom:0.00px ;padding-left:0.00px ;}@media only screen and (min-width:40em){#upButton{padding-top:6.00px ;padding-right:0.00px ;padding-bottom:0.00px ;padding-left:0.00px }}@media only screen and (min-width:64em){#upButton{padding-top:6.00px ;padding-right:0.00px ;padding-bottom:0.00px ;padding-left:0.00px }} #upButton{font-size:calc(24rem/16) ;line-height:0.00 ;}@media only screen and (min-width:40em) { #upButton{font-size:calc(24rem/16) }}@media only screen and (min-width:64em) { #upButton{font-size:calc(24rem/16) }} #upButton{box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12);} #upButton:hover{box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.12);} :root{--light-gray:rgba(243, 242, 240, 0.60);--medium-gray:rgba(202, 202, 202, 1.00);--dark-gray:rgba(138, 138, 138, 1.00);--black:rgba(10, 10, 10, 1.00);--black-color:var(--black);--white:rgba(254, 254, 254, 1.00);--white-color:var(--white);--primary:rgba(51, 51, 51, 1.00);--secondary:rgba(231, 231, 231, 1.00);--success:rgba(67, 172, 106, 1.00);--warning:rgba(176, 142, 111, 1.00);--alert:rgba(180, 110, 114, 1.00);--primary-contrast:rgba(255, 255, 255, 1.00);--secondary-contrast:rgba(51, 51, 51, 1.00);--success-contrast:rgba(254, 254, 254, 1.00);--warning-contrast:rgba(254, 254, 254, 1.00);--alert-contrast:rgba(254, 254, 254, 1.00);--primary-dark:rgba(21, 21, 21, 1.00);--secondary-dark:rgba(201, 201, 201, 1.00);--success-dark:rgba(37, 142, 76, 1.00);--warning-dark:rgba(146, 112, 81, 1.00);--alert-dark:rgba(150, 80, 84, 1.00);--header-color:rgba(34, 34, 34, 1.00);--subheader-color:rgba(138, 138, 138, 1.00);--small-color:rgba(202, 202, 202, 1.00);--text-color:rgba(79, 87, 100, 1.00);--link-color:rgba(51, 51, 51, 1.00);--link-color-hover:rgba(80, 88, 73, 1.00);--selection-background:var(--primary);--selection-text:var(--primary-contrast);--link-decoration:none;--link-decoration-hover:none;--overlay-color:rgba(0, 0, 0, 0.50);--radius:10px;--small-gutter:1.25rem;--medium-gutter:2rem;--large-gutter:4rem;--site-width:calc(1600rem/16);}::selection{background:var(--selection-background);color:var(--selection-text)}.alt{--header-color:rgba(255, 255, 255, 1.00);--subheader-color:rgba(230, 230, 230, 1.00);--small-color:rgba(202, 202, 202, 1.00);--text-color:rgba(255, 255, 255, 1.00);--link-color:rgba(51, 51, 51, 1.00);--link-color-hover:rgba(79, 87, 100, 1.00);--link-decoration:none;--link-decoration-hover:none}.grid-container{max-width:var(--site-width)}.radius{border-radius:var(--radius)}body{font-size:calc(16rem/16)}h1,.h1{font-size:calc(25rem/16)}h2,.h2{font-size:calc(25rem/16)}h3,.h3{font-size:calc(32rem/16)}h4,.h4{font-size:calc(24rem/16)}h5,.h5{font-size:calc(17rem/16)}h6,.h6{font-size:calc(16rem/16)}small{font-size:40%}.button{font-size:calc(16rem/16)}.button.tiny{font-size:calc(10rem/16)}.button.small{font-size:calc(12rem/16)}.button.large{font-size:calc(20rem/16)}@media only screen and (min-width:40em){body{font-size:calc(18rem/16)}h1,.h1{font-size:calc(30rem/16)}h2,.h2{font-size:calc(36rem/16)}h3,.h3{font-size:calc(32rem/16)}h4,.h4{font-size:calc(28rem/16)}h5,.h5{font-size:calc(20rem/16)}h6,.h6{font-size:calc(16rem/16)}small{font-size:30%}}@media only screen and (min-width:64em){body{font-size:calc(20rem/16)}h1,.h1{font-size:calc(40rem/16)}h2,.h2{font-size:calc(40rem/16)}h3,.h3{font-size:calc(36rem/16)}h4,.h4{font-size:calc(28rem/16)}h5,.h5{font-size:calc(20rem/16)}h6,.h6{font-size:calc(16rem/16)}small{font-size:30%}}a{color:var(--link-color);-webkit-text-decoration:var(--link-decoration);text-decoration:var(--link-decoration)}a:hover,a:focus{color:var(--link-color-hover);-webkit-text-decoration:var(--link-decoration-hover);text-decoration:var(--link-decoration-hover)}.menu a{color:var(--menu-link-color);background:var(--menu-bg-color)}.menu a:hover{color:var(--menu-link-color-hover)}h1,h2,h3,h4,h5,h6{color:var(--header-color)}small{color:var(--small-color)}.subheader{color:var(--subheader-color)}.text ul,.text ol{list-style-position:outside}.text>ul,.text>ol,.text .mez>div>ul,.text .mez>div>ol{margin-left:1.25rem}.text ul{list-style-type:square}.text ul ul,.text ol ul{list-style-type:circle}.text ol{list-style-type:decimal}.text ol ol,.text ul ol{list-style-type:lower-alpha}.radius,.radius:before,.radius:after{border-radius:calc(10rem/16)}body{background-color:rgba(255, 255, 255, 1.00);} /*!* Font Awesome Pro 5.14.0 by @fontawesome - https://fontawesome.com* License - https://fontawesome.com/license (Commercial License)*/@font-face{font-family:'Font Awesome 5 Pro';font-style:normal;font-weight:300;font-display:block;src:url("../rw_common/plugins/stacks/fa5-fonts/fa-light-300.eot");src:url("../rw_common/plugins/stacks/fa5-fonts/fa-light-300.eot?#iefix") format("embedded-opentype"),url("../rw_common/plugins/stacks/fa5-fonts/fa-light-300.woff2") format("woff2"),url("../rw_common/plugins/stacks/fa5-fonts/fa-light-300.woff") format("woff"),url("../rw_common/plugins/stacks/fa5-fonts/fa-light-300.ttf") format("truetype"),url("../rw_common/plugins/stacks/fa5-fonts/fa-light-300.svg#fontawesome") format("svg")}.fal{font-family:'Font Awesome 5 Pro';font-weight:300} .bigger p{font-size:calc(18rem/16) ;font-weight:500 ;}@media only screen and (min-width:40em){ .bigger p{font-size:calc(20rem/16) }}@media only screen and (min-width:64em){ .bigger p{font-size:calc(20rem/16) }} .small p{font-size:calc(14rem/16) ;}@media only screen and (min-width:40em){ .small p{font-size:calc(14rem/16) }}@media only screen and (min-width:64em){ .small p{font-size:calc(14rem/16) }} .footerLine p{font-size:calc(13rem/16) ;}@media only screen and (min-width:40em){ .footerLine p{font-size:calc(13rem/16) }}@media only screen and (min-width:64em){ .footerLine p{font-size:calc(13rem/16) }} .menu>li>a{font-size:calc(20rem/16) ;}@media only screen and (min-width:40em){ .menu>li>a{font-size:calc(20rem/16) }}@media only screen and (min-width:64em){ .menu>li>a{font-size:calc(20rem/16) }} strong{font-weight:500 ;} @font-face{font-family:Poppins;font-style:normal;font-weight:normal;src:url("https://laperlia-kosmetik.de/fonts/poppins-v24-latin-300.woff2") format("woff2");}@font-face{font-family:Poppins;font-style:normal;font-weight:bold;src:url("https://laperlia-kosmetik.de/fonts/poppins-v24-latin-500.woff2") format("woff2");}@font-face{font-family:Poppins;font-style:italic;font-weight:normal;src:url("https://laperlia-kosmetik.de/fonts/poppins-v24-latin-300italic.woff2") format("woff2");}@font-face{font-family:Poppins;font-style:italic;font-weight:bold;src:url("https://laperlia-kosmetik.de/fonts/poppins-v24-latin-500italic.woff2") format("woff2");} html,body, blockquote, a, ul,ul li,ol,ol li,dl,dl dd, fieldset,input,textarea,form label,input + label,fieldset label,input + datalist,legend, button,.button,.btn, p:not(.custom-font),.font-family-text,.text_stack:not(.custom-font),.fontpro-stacks_in_1918_86{font-family:"Poppins",sans-serif }p:not(.custom-font),p.font-family-text:not(.custom-font),.text_stack:not(.custom-font){font-family:"Poppins",sans-serif } @font-face{font-family:Cormorant Garamond;font-style:normal;font-weight:normal;src:url("https://laperlia-kosmetik.de/fonts/cormorant-garamond-v21-latin-regular.woff2") format("woff2");}@font-face{font-family:Cormorant Garamond;font-style:normal;font-weight:bold;src:url("https://laperlia-kosmetik.de/fonts/cormorant-garamond-v21-latin-700.woff2") format("woff2");}@font-face{font-family:Cormorant Garamond;font-style:italic;font-weight:normal;src:url("https://laperlia-kosmetik.de/fonts/cormorant-garamond-v21-latin-italic.woff2") format("woff2");}@font-face{font-family:Cormorant Garamond;font-style:italic;font-weight:bold;src:url("https://laperlia-kosmetik.de/fonts/cormorant-garamond-v21-latin-700italic.woff2") format("woff2");} h1,.font-family-h1,h1 a,.font-family-h1 a, h2,.font-family-h2,h2 a,.font-family-h2 a, h3,.font-family-h3,h3 a,.font-family-h3 a, h4,.font-family-h4,h4 a,.font-family-h4 a, h5,.font-family-h5,h5 a,.font-family-h5 a, h6,.font-family-h6,h6 a,.font-family-h6 a, .slideMenu .menu>li>a, .fontpro-stacks_in_1918_87{font-family:"Cormorant Garamond",sans-serif } .dropshadow{box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.20);} .bigp{padding-top:1.5rem ;padding-bottom:1.5rem ;} @media only screen and (min-width:40em){.bigp{padding-top:3rem ;padding-bottom:3rem ;}}@media only screen and (min-width:64em){.bigp{padding-top:6rem ;padding-bottom:6rem ;}} .smallp{padding-top:0.75rem ;padding-bottom:0.75rem ;} @media only screen and (min-width:40em){.smallp{padding-top:1.5rem ;padding-bottom:1.5rem ;}}@media only screen and (min-width:64em){.smallp{padding-top:3rem ;padding-bottom:3rem ;}} .leftM{} @media only screen and (min-width:40em){.leftM{margin-left:12rem ;}}@media only screen and (min-width:64em){.leftM{margin-left:16rem ;}} .fullCont{height:100% ;} .textPadding{padding:1.25rem ;} @media only screen and (min-width:40em){.textPadding{padding:1.5rem }}@media only screen and (min-width:64em){.textPadding{padding:2.5rem }} .borderTop{border-color:rgba(153, 153, 153, 0.23) ;border-width:1px 0px 0px 0px ;border-style:solid ;} @media screen and (min-width: 40em){.opacity{opacity:0.75 }} @media screen and (max-width: 39.9375em){.opacity{opacity:0.85 }} .button{padding-top:1rem !important;padding-right:2.5rem !important;padding-bottom:0.75rem !important;padding-left:2.5rem !important;} .button{border-width:2px !important;} .menuBar{position:fixed !important;z-index:10 !important;top:0% !important;bottom:unset !important;left:0% !important;right:unset !important;} .menuBar{width:100% ;} .hamburger{display:flex;align-items:center;aspect-ratio:1/1;} .hamburger{border-radius:50% ;} div.element > .childelement{background-position:left top ;background-size:100% 100% ;background-image:linear-gradient(180deg,rgba(0, 0, 0, 0.42) 0%,50%,rgba(2, 0, 36, 0.00) 100%) ;} .menuBar{padding-top:12.00px ;padding-right:12.00px ;padding-bottom:12.00px ;padding-left:12.00px ;}@media only screen and (min-width:40em){.menuBar{padding-top:20.00px ;padding-right:20.00px ;padding-bottom:20.00px ;padding-left:20.00px }}@media only screen and (min-width:64em){.menuBar{padding-top:20.00px ;padding-right:20.00px ;padding-bottom:20.00px ;padding-left:20.00px }} .menBurger{margin-top:7.00px !important;margin-right:0.00px !important;margin-bottom:0.00px !important;margin-left:0.00px !important;}@media only screen and (min-width:40em){.menBurger{margin-top:7.00px !important;margin-right:0.00px !important;margin-bottom:0.00px !important;margin-left:0.00px !important}}@media only screen and (min-width:64em){.menBurger{margin-top:7.00px !important;margin-right:0.00px !important;margin-bottom:0.00px !important;margin-left:0.00px !important}} .menBurger, .slideBurgerWrapper{width:64.00px !important;}@media only screen and (min-width:40em){.menBurger, .slideBurgerWrapper{width:64.00px !important}}@media only screen and (min-width:64em){.menBurger, .slideBurgerWrapper{width:64.00px !important}} .menBurger, .slideBurgerWrapper{height:60.00px !important;}@media only screen and (min-width:40em){.menBurger, .slideBurgerWrapper{height:60.00px !important}}@media only screen and (min-width:64em){.menBurger, .slideBurgerWrapper{height:60.00px !important}} .slideMenuBefore{position:fixed ;z-index:1001 ;top:0% ;bottom:unset ;left:unset ;right:-100% ;} .slideMenuAfter{position:fixed ;z-index:1001 ;top:0% ;bottom:unset ;left:unset ;right:0% ;} @media screen and (max-width: 39.9375em){.slideMenu{width:90.00% ;}}@media only screen and (min-width:40em){.slideMenu{width:450.00% }}@media only screen and (min-width:64em){.slideMenu{width:450.00% }} @media screen and (min-width: 40em){.slideMenu{width:100.00px ;}}@media only screen and (min-width:40em){.slideMenu{width:450.00px }}@media only screen and (min-width:64em){.slideMenu{width:450.00px }} .slideMenu{padding-top:20.00px ;padding-right:20.00px ;padding-bottom:20.00px ;padding-left:20.00px ;}@media only screen and (min-width:40em){.slideMenu{padding-top:20.00px ;padding-right:20.00px ;padding-bottom:20.00px ;padding-left:20.00px }}@media only screen and (min-width:64em){.slideMenu{padding-top:20.00px ;padding-right:20.00px ;padding-bottom:20.00px ;padding-left:20.00px }} .slideMenu, .slideMenuAfter, .slideMenuBefore, hamburger{transition:all 360ms cubic-bezier(0.455, 0.030, 0.515, 0.955) 120ms } .slideBurgerWrapper{border-radius:50% ;} .menu-text{color:rgba(129, 129, 129, 1.00) !important;} .slideBurgerWrapper{background-color:rgba(108, 108, 108, 0.82) !important;background-position:center center !important;background-origin:padding-box !important;background-blend-mode:normal !important;background-attachment:scroll !important;background-clip:border-box !important;}@media (hover:none) and (pointer:coarse){.slideBurgerWrapper{background-attachment:scroll!important}} .bup{background-color:rgba(255, 255, 255, 0.19) !important;background-position:center center !important;background-origin:padding-box !important;background-blend-mode:normal !important;background-attachment:scroll !important;background-clip:border-box !important;}@media (hover:none) and (pointer:coarse){.bup{background-attachment:scroll!important}} .bup{display:flex;align-items:center;aspect-ratio:1/1;} .bup{border-radius:50% ;} .menuLinks>.menu a, .menu.menuLinks a{--menu-link-color:rgba(0, 0, 0, 1.00);--menu-link-color-hover:rgba(176, 142, 111, 1.00);--menu-bg-color:rgba(255, 255, 255, 0.00);--menu-caret-color:rgba(255, 255, 255, 1.00);--menu-border-accent:2px solid var(--menu-link-color)} .menuLinks>.menu .menu-text, .menu.menuLinks .menu-text{--menu-text-color:rgba(211, 211, 211, 1.00)} .menuLinks>.menu>li>a, .menu.menuLinks>li>a{padding-top:1rem;padding-bottom:1rem} .menuLinks>.menu .submenu>li>a, .menu.menuLinks .submenu>li>a{padding-top:0.75rem;padding-bottom:0.75rem} .menuLinks>.menu li.active>a, .menuLinks>.menu li.is-active>a, .menuLinks>.menu a.is-active, .menu.menuLinks li.active>a, .menu.menuLinks li.is-active>a, .menu.menuLinks a.is-active{--menu-bg-color:rgba(254, 254, 254, 0.00);--menu-link-color:rgba(176, 142, 111, 1.00);--menu-caret-color:rgba(255, 255, 255, 1.00);--menu-link-color-hover:rgba(176, 142, 111, 1.00)} .menuLinks>.menu .submenu li.active>a, .menuLinks>.menu .submenu li.is-active>a, .menuLinks>.menu .submenu a.is-active, .menu.menuLinks .submenu li.active>a, .menu.menuLinks .submenu li.is-active>a, .menu.menuLinks .submenu a.is-active{--menu-caret-color:rgba(255, 255, 255, 1.00)} .menuLinks>.menu .submenu a, .menu.menuLinks .submenu a{--menu-caret-color:rgba(255, 255, 255, 1.00)} .menuLinks>.menu .submenu, .menu.menuLinks .submenu{--submenu-bg-color:rgba(254, 254, 254, 1.00);--submenu-border:1px solid rgba(202, 202, 202, 1.00)} .menuLinks>.menu .submenu a, .menu.menuLinks .submenu a{--menu-bg-color:transparent;--menu-link-color:rgba(0, 0, 0, 1.00);--menu-link-color-hover:rgba(176, 142, 111, 1.00)} .menuLinks>.menu .submenu .menu-text, .menu.menuLinks .submenu .menu-text{--menu-text-color:rgba(211, 211, 211, 1.00)} .menuLinks>.menu .submenu li.active>a, .menuLinks>.menu .submenu li.is-active>a, .menuLinks>.menu .submenu a.is-active, .menu.menuLinks .submenu li.active>a, .menu.menuLinks .submenu li.is-active>a, .menu.menuLinks .submenu a.is-active{--menu-caret-color:rgba(255, 255, 255, 1.00);--menu-bg-color:rgba(0, 0, 0, 1.00);--menu-link-color:rgba(254, 254, 254, 1.00);--menu-link-color-hover:rgba(254, 254, 254, 1.00)} .menuLinks>.menu a::after, .menu.menuLinks a::after{display:none!important} .menuLinks a{margin-left:1rem ;} .slideMenu .menu>li>a{font-size:calc(28rem/16) ;font-weight:700 ;}@media only screen and (min-width:40em) { .slideMenu .menu>li>a{font-size:calc(30rem/16) ;line-height:1.50 }}@media only screen and (min-width:64em) { .slideMenu .menu>li>a{font-size:calc(30rem/16) ;line-height:1.50 }} .slideMenu{background-color:rgba(232, 230, 225, 0.83) ;background-position:center center ;background-origin:padding-box ;background-blend-mode:normal ;background-attachment:scroll ;background-clip:border-box ;}@media (hover:none) and (pointer:coarse){.slideMenu{background-attachment:scroll!important}} .slideMenu .menu>li>a:hover{transition:all 200ms ease 0ms } .slideMenu{box-shadow: -20px 0px 40px 0px rgba(0, 0, 0, 0.06);} .slideMenu{}@supports (backdrop-filter:none){.slideMenu{mix-blend-mode:normal;backdrop-filter:blur(10px)brightness(100%)contrast(100%)grayscale(0%)hue-rotate(0deg)invert(0%)opacity(100%)saturate(100%)sepia(0%);}} .slideMenu .menu>li>a{will-change:transform} .borderWrapper{background-color:var(--light-gray) !important;background-position:center center !important;background-origin:padding-box !important;background-blend-mode:normal !important;background-attachment:scroll !important;background-clip:border-box !important;}@media (hover:none) and (pointer:coarse){.borderWrapper{background-attachment:scroll!important}} .borderWrapperMargin{margin-top:3.00px ;margin-right:3.00px ;margin-bottom:3.00px ;margin-left:3.00px ;}@media only screen and (min-width:40em){.borderWrapperMargin{margin-top:3.00px ;margin-right:3.00px ;margin-bottom:3.00px ;margin-left:3.00px }}@media only screen and (min-width:64em){.borderWrapperMargin{margin-top:3.00px ;margin-right:3.00px ;margin-bottom:3.00px ;margin-left:3.00px }} .borderWrapper{border-radius:50% ;} .borderWrapper, .borderWrapper:hover{transition:all 200ms ease 0ms } .stacks_in_1959_235 > .grid-divider-wrapper > .grid-divider{height:calc(100% - 2rem)} .stacks_in_1959_239{line-height:0}.stacks_in_1959_239 svg{display:inline-block;max-width:80px;height:auto;}.stacks_in_1959_239.full-width svg{width:100%;height:auto} .hamburger { padding: 16px 16px; display: inline-block; cursor: pointer; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; } .hamburger:hover, .hamburger:focus, .hamburger:active { background-color: transparent; } .hamburger.burger-left { display: block; margin-right: auto; } .hamburger.burger-right { display: block; margin-left: auto; } .hamburger.burger-center { display: block; margin-right: auto; margin-left: auto; } .hamburger:hover { opacity: 0.9; } .hamburger.is-active:hover { opacity: 0.9; } .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after { background-color: #FFFFFF; } .hamburger-box { width: 28px; height: 16px; display: inline-block; position: relative; } .hamburger-inner { display: block; top: 50%; margin-top: -1px; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 28px; height: 2px; background-color: #FFFFFF; border-radius: 2px; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: -7px; } .hamburger-inner::after { bottom: -7px; } /* * Elastic */ .hamburger--elastic .hamburger-inner { top: 1px; transition-duration: 0.275s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic .hamburger-inner::before { top: 7px; transition: opacity 0.125s 0.275s ease; } .hamburger--elastic .hamburger-inner::after { top: 14px; transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic.is-active .hamburger-inner { transform: translate3d(0, 7px, 0) rotate(135deg); transition-delay: 0.075s; } .hamburger--elastic.is-active .hamburger-inner::before { transition-delay: 0s; opacity: 0; } .hamburger--elastic.is-active .hamburger-inner::after { transform: translate3d(0, -14px, 0) rotate(-270deg); transition-delay: 0.075s; } .hamburger { padding: 8px 16px; display: inline-block; cursor: pointer; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; } .hamburger:hover, .hamburger:focus, .hamburger:active { background-color: transparent; } .hamburger.burger-left { display: block; margin-right: auto; } .hamburger.burger-right { display: block; margin-left: auto; } .hamburger.burger-center { display: block; margin-right: auto; margin-left: auto; } .hamburger:hover { opacity: 0.9; } .hamburger.is-active:hover { opacity: 0.9; } .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after { background-color: #000000; } .hamburger-box { width: 28px; height: 20px; display: inline-block; position: relative; } .hamburger-inner { display: block; top: 50%; margin-top: -1px; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 28px; height: 2px; background-color: #000000; border-radius: 2px; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: -9px; } .hamburger-inner::after { bottom: -9px; } /* * Elastic */ .hamburger--elastic .hamburger-inner { top: 1px; transition-duration: 0.275s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic .hamburger-inner::before { top: 9px; transition: opacity 0.125s 0.275s ease; } .hamburger--elastic .hamburger-inner::after { top: 18px; transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic.is-active .hamburger-inner { transform: translate3d(0, 9px, 0) rotate(135deg); transition-delay: 0.075s; } .hamburger--elastic.is-active .hamburger-inner::before { transition-delay: 0s; opacity: 0; } .hamburger--elastic.is-active .hamburger-inner::after { transform: translate3d(0, -18px, 0) rotate(-270deg); transition-delay: 0.075s; } .header{background-image:url('../files/bgimage-1419.png') ;background-repeat:no-repeat ;background-position:right top ;background-origin:padding-box ;background-blend-mode:normal ;background-attachment:scroll ;background-clip:border-box ; background-size: cover ; }@media (hover:none) and (pointer:coarse){.header{background-attachment:scroll!important}} @media screen and (min-width: 64em){.header{display:flex;align-items:center;aspect-ratio:16/7;}} @media screen and (min-width: 40em) and (max-width: 63.9375em){.header{display:flex;align-items:center;aspect-ratio:16/9;}} @media screen and (max-width: 39.9375em){.header{display:flex;align-items:center;aspect-ratio:18/16;}} .header{width:100% !important;height:100% !important;object-fit:cover ;object-position:center top ;} .seams{position: relative ;z-index:0 ;top:unset ;bottom:unset ;left:unset ;right:unset ;} .zert{box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.33);} .buttonGroupContainer{--small-gutter:1.25rem;--medium-gutter:1.25rem;--large-gutter:1.25rem;} .stacks_in_1423 > .grid-divider-wrapper > .grid-divider{height:calc(100% - 2rem)} .stacks_in_1440 > .grid-divider-wrapper > .grid-divider{height:calc(100% - 2rem)} #end-stacks_in_1466-1{visibility:visible} #end-stacks_in_1466-2{visibility:visible} .stacks_in_1811 > .grid-divider-wrapper > .grid-divider{height:calc(100% - 2rem)} .stacks_in_1357 > .grid-divider-wrapper > .grid-divider{height:calc(100% - 2rem)} .stacks_in_1453{line-height:0}.stacks_in_1453 svg{display:inline-block;}.stacks_in_1453.full-width svg{width:100%;height:auto} .startContainer{background-position:left top ;background-size:100% 100% ;background-image:linear-gradient(0deg,rgba(255, 255, 255, 0.00) 0%,50%,rgba(255, 255, 255, 0.78) 100%) ;} .stacks_in_792 > .grid-divider-wrapper > .grid-divider{height:calc(100% - 2rem)} .stacks_in_1601 > .grid-divider-wrapper > .grid-divider{height:calc(100% - 2rem)} .stacks_in_1599 img{width:100%;max-width:220px} .bento1{background-color:var(--light-gray) ;background-position:center center ;background-origin:padding-box ;background-blend-mode:normal ;background-attachment:scroll ;background-clip:border-box ;}@media (hover:none) and (pointer:coarse){.bento1{background-attachment:scroll!important}} .bento3{background-image:url('../files/bgimage-1540.jpg') ;background-repeat:no-repeat ;background-position:center center ;background-origin:padding-box ;background-blend-mode:normal ;background-attachment:scroll ;background-clip:border-box ; background-size: cover ; }@media (hover:none) and (pointer:coarse){.bento3{background-attachment:scroll!important}} .bento4{background-image:url('../files/bgimage-1541.jpg') ;background-repeat:no-repeat ;background-position:center center ;background-origin:padding-box ;background-blend-mode:normal ;background-attachment:scroll ;background-clip:border-box ; background-size: cover ; }@media (hover:none) and (pointer:coarse){.bento4{background-attachment:scroll!important}} .bento5{background-color:var(--light-gray) ;background-position:center center ;background-origin:padding-box ;background-blend-mode:normal ;background-attachment:scroll ;background-clip:border-box ;}@media (hover:none) and (pointer:coarse){.bento5{background-attachment:scroll!important}} .bento4{display:flex;align-items:center;aspect-ratio:5/4;} .bento1, .bento5{display:flex;align-items:center;aspect-ratio:3/2;} .bento3{display:flex;align-items:center;aspect-ratio:5/4;} .bento-grid .grid-item{border-radius:10px ;} .bento1, .bento3, .bento4, .bento5, .bentoImage2{width:100% !important;height:100% !important;object-fit:cover ;object-position:center center ;} .bento-grid .bentoPadding{padding:2rem ;} .bento-grid.grid-stacks_in_1550 { --bento-align-content: center ; --bento-template-columns: repeat(1, auto); --bento-template-rows: repeat(5, auto); --bento-gap: calc(20rem/16) calc(20rem/16); } .bento-grid.grid-stacks_in_1550 > .grid-item { --bento-display: var(--bento-display-xs); --bento-column-start: var(--bento-column-start-xs); --bento-column-end: var(--bento-column-end-xs); --bento-row-start: var(--bento-row-start-xs); --bento-row-end: var(--bento-row-end-xs); } @media (max-width: 25em) { .bento-grid.grid-stacks_in_1550 .grid-item:nth-child(n+6) { display: none; } } @media (min-width: 25em) and (max-width: 40em) { .bento-grid.grid-stacks_in_1550 { --bento-template-columns: repeat(1, auto); --bento-template-rows: repeat(5, auto); --bento-gap: calc(20rem/16) calc(20rem/16); } .bento-grid.grid-stacks_in_1550 > .grid-item { --bento-display: var(--bento-display-sm, var(--bento-display-xs)); --bento-column-start: var(--bento-column-start-sm, var(--bento-column-start-xs)); --bento-column-end: var(--bento-column-end-sm, var(--bento-column-end-xs)); --bento-row-start: var(--bento-row-start-sm, var(--bento-row-start-xs)); --bento-row-end: var(--bento-row-end-sm, var(--bento-row-end-xs)); } .bento-grid.grid-stacks_in_1550 .grid-item:nth-child(n+6) { display: none; } .bento-grid.grid-stacks_in_1550 .bento-hide-for-small-up { display: none; } .bento-grid.grid-stacks_in_1550 .bento-show-for-small-up { display: grid; } } @media (min-width: 40em) and (max-width: 64em) { .bento-grid.grid-stacks_in_1550 { --bento-template-columns: repeat(2, auto); --bento-template-rows: repeat(4, auto); --bento-gap: calc(20rem/16) calc(20rem/16); } .bento-grid.grid-stacks_in_1550 > .grid-item { --bento-display: var(--bento-display-md, var(--bento-display-sm, var(--bento-display-xs))); --bento-column-start: var(--bento-column-start-md, var(--bento-column-start-sm, var(--bento-column-start-xs))); --bento-column-end: var(--bento-column-end-md, var(--bento-column-end-sm, var(--bento-column-end-xs))); --bento-row-start: var(--bento-row-start-md, var(--bento-row-start-sm, var(--bento-row-start-xs))); --bento-row-end: var(--bento-row-end-md, var(--bento-row-end-sm, var(--bento-row-end-xs))); } .bento-grid.grid-stacks_in_1550 .grid-item:nth-child(n+6) { display: none; } .bento-grid.grid-stacks_in_1550 .bento-hide-for-medium-up { display: none; } .bento-grid.grid-stacks_in_1550 .bento-show-for-medium-up { display: grid; } } @media (min-width: 64em) { .bento-grid.grid-stacks_in_1550 { --bento-template-columns: repeat(3, auto); --bento-template-rows: repeat(3, auto); --bento-gap: calc(36rem/16) calc(36rem/16); } .bento-grid.grid-stacks_in_1550 > .grid-item { --bento-display: var(--bento-display-lg, var(--bento-display-md, var(--bento-display-sm, var(--bento-display-xs)))); --bento-column-start: var(--bento-column-start-lg, var(--bento-column-start-md, var(--bento-column-start-sm, var(--bento-column-start-xs)))); --bento-column-end: var(--bento-column-end-lg, var(--bento-column-end-md, var(--bento-column-end-sm, var(--bento-column-end-xs)))); --bento-row-start: var(--bento-row-start-lg, var(--bento-row-start-md, var(--bento-row-start-sm, var(--bento-row-start-xs)))); --bento-row-end: var(--bento-row-end-lg, var(--bento-row-end-md, var(--bento-row-end-sm, var(--bento-row-end-xs)))); } .bento-grid.grid-stacks_in_1550 .grid-item:nth-child(n+6) { display: none; } .bento-grid.grid-stacks_in_1550 .bento-hide-for-large-up { display: none; } .bento-grid.grid-stacks_in_1550 .bento-show-for-large-up { display: grid; } } .bento-grid.grid-stacks_in_1550 .grid-null, .bento-grid.grid-stacks_in_1550 .grid-item:nth-child(1) { --bento-display-xs: grid; --bento-column-start-xs: auto; --bento-column-end-xs: span 1; --bento-row-start-xs: auto; --bento-row-end-xs: span 1; } .bento-grid.grid-stacks_in_1550 .grid-null, .bento-grid.grid-stacks_in_1550 .grid-item:nth-child(1) { --bento-display-sm: grid; --bento-column-start-sm: 1; --bento-column-end-sm: 2; --bento-row-start-sm: 1; --bento-row-end-sm: 2; } .bento-grid.grid-stacks_in_1550 .grid-null, .bento-grid.grid-stacks_in_1550 .grid-item:nth-child(1) { --bento-display-md: grid; --bento-column-start-md: auto; --bento-column-end-md: span 1; --bento-row-start-md: auto; --bento-row-end-md: span 1; } .bento-grid.grid-stacks_in_1550 .grid-null, .bento-grid.grid-stacks_in_1550 .grid-item:nth-child(1) { align-content: center; } .bento-grid.grid-stacks_in_1550 .grid-null, .bento-grid.grid-stacks_in_1550 .grid-item:nth-child(2) { --bento-display-xs: grid; --bento-column-start-xs: auto; --bento-column-end-xs: span 1; --bento-row-start-xs: auto; --bento-row-end-xs: span 1; } .bento-grid.grid-stacks_in_1550 .grid-null, .bento-grid.grid-stacks_in_1550 .grid-item:nth-child(2) { --bento-display-md: grid; --bento-column-start-md: auto; --bento-column-end-md: span 1; --bento-row-start-md: auto; --bento-row-end-md: span 3; } .bento-grid.grid-stacks_in_1550 .grid-null, .bento-grid.grid-stacks_in_1550 .grid-item:nth-child(2) { align-content: stretch; } .bento-grid.grid-stacks_in_1550 .grid-null, .bento-grid.grid-stacks_in_1550 .grid-item:nth-child(3) { --bento-display-xs: grid; --bento-column-start-xs: auto; --bento-column-end-xs: span 1; --bento-row-start-xs: auto; --bento-row-end-xs: span 1; } .bento-grid.grid-stacks_in_1550 .grid-null, .bento-grid.grid-stacks_in_1550 .grid-item:nth-child(3) { --bento-display-md: grid; --bento-column-start-md: auto; --bento-column-end-md: span 1; --bento-row-start-md: auto; --bento-row-end-md: span 2; } .bento-grid.grid-stacks_in_1550 .grid-null, .bento-grid.grid-stacks_in_1550 .grid-item:nth-child(3) { align-content: center; } .bento-grid.grid-stacks_in_1550 .grid-null, .bento-grid.grid-stacks_in_1550 .grid-item:nth-child(4) { --bento-display-xs: grid; --bento-column-start-xs: auto; --bento-column-end-xs: span 1; --bento-row-start-xs: auto; --bento-row-end-xs: span 1; } .bento-grid.grid-stacks_in_1550 .grid-null, .bento-grid.grid-stacks_in_1550 .grid-item:nth-child(4) { --bento-display-md: grid; --bento-column-start-md: auto; --bento-column-end-md: span 1; --bento-row-start-md: auto; --bento-row-end-md: span 2; } .bento-grid.grid-stacks_in_1550 .grid-null, .bento-grid.grid-stacks_in_1550 .grid-item:nth-child(4) { --bento-display-lg: grid; --bento-column-start-lg: auto; --bento-column-end-lg: span 1; --bento-row-start-lg: auto; --bento-row-end-lg: span 2; } .bento-grid.grid-stacks_in_1550 .grid-null, .bento-grid.grid-stacks_in_1550 .grid-item:nth-child(4) { align-content: center; } .bento-grid.grid-stacks_in_1550 .grid-null, .bento-grid.grid-stacks_in_1550 .grid-item:nth-child(5) { --bento-display-xs: grid; --bento-column-start-xs: auto; --bento-column-end-xs: span 1; --bento-row-start-xs: auto; --bento-row-end-xs: span 1; } .bento-grid.grid-stacks_in_1550 .grid-null, .bento-grid.grid-stacks_in_1550 .grid-item:nth-child(5) { --bento-display-sm: grid; --bento-column-start-sm: auto; --bento-column-end-sm: span 1; --bento-row-start-sm: auto; --bento-row-end-sm: span 1; } .bento-grid.grid-stacks_in_1550 .grid-null, .bento-grid.grid-stacks_in_1550 .grid-item:nth-child(5) { --bento-display-md: grid; --bento-column-start-md: auto; --bento-column-end-md: span 1; --bento-row-start-md: auto; --bento-row-end-md: span 2; } .bento-grid.grid-stacks_in_1550 .grid-null, .bento-grid.grid-stacks_in_1550 .grid-item:nth-child(5) { --bento-display-lg: grid; --bento-column-start-lg: auto; --bento-column-end-lg: span 1; --bento-row-start-lg: auto; --bento-row-end-lg: span 1; } .bento-grid.grid-stacks_in_1550 .grid-null, .bento-grid.grid-stacks_in_1550 .grid-item:nth-child(5) { align-content: center; } .impact-slide{border-radius:10px !important;} #stacks_in_681 .fg-content.fg-full-height{height:100%}#stacks_in_681 .slides-container{margin:0}#stacks_in_681 .slides-container > li{margin:0}#stacks_in_681 .slides-container > li::before,#stacks_in_681 .slides-container > li::after{content:"";top:0;left:0;bottom:0;right:0;height:100%;position:absolute;z-index:2;transition:opacity 0ms ease}#stacks_in_681 .slides-container.ovl-color li::before{background-color:rgba(89, 237, 212, 0.30)}#stacks_in_681 .slides-container.ovl-tile li::after{background-image:url();opacity:0.30;background-repeat:repeat}#stacks_in_681 .fg-per-show{position:absolute;z-index:5;width:100%;height:100%}#stacks_in_681 .impact-wrapper{z-index:0}#stacks_in_681 .impact-wrapper.fill-container{min-width:100%}#stacks_in_681 .impact-wrapper.fill-container.hero-header{height:100%;height:100vh;width:100%;width:100vw}@media only screen and (orientation:portrait){#stacks_in_681 .impact-wrapper.fill-container.hero-header{height:100% !important}}#stacks_in_681 .impact-wrapper.fixed-height{height:400px;width:100%;min-width:100%}#stacks_in_681 .impact-wrapper.flexible-height{height:100vh;min-height:250px;width:100%;min-width:100%}#stacks_in_681 .impact-wrapper.touch-device.cover-touch{background-size:cover;background-position:center center;overflow:hidden}#stacks_in_681 .impact-wrapper.touch-device.cover-touch:not(.touch-warehouse){background-image:url()}#stacks_in_681 .impact-wrapper.touch-device.cover-touch.touch-warehouse{background-image:url()}#stacks_in_681 .impact-wrapper > .pre-loader{position:absolute;text-align:center;top:0;left:0;width:100%;height:100%;opacity:1;visibility:visible;transition:opacity 0ms ease,visibility 0 0.2s}#stacks_in_681 .impact-wrapper > .pre-loader.hidden{opacity:0;visibility:hidden}#stacks_in_681 .impact-wrapper > .pre-loader > .pl-spinner{position:absolute;top:36%;margin-left:-32px;color:rgba(251, 251, 251, 0.90)}#stacks_in_681 .impact-wrapper > .pre-loader > .pl-spinner.hidden{display:none}#stacks_in_681 .impact-wrapper > .pre-loader.bg-image{background-size:cover;background-position:center center;background-repeat:no-repeat}#stacks_in_681 .impact-wrapper > .pre-loader.bg-image.custom-image:not(.bg-warehouse){background-image:url()}#stacks_in_681 .impact-wrapper > .pre-loader.bg-image.custom-image.bg-warehouse{background-image:url()}#stacks_in_681 .impact-wrapper > .pre-loader.preload-color{background-color:rgba(51, 51, 51, 0.95)}#stacks_in_681 .impact-wrapper > .pre-loader.bg-overlay{z-index:1}#stacks_in_681 .impact-wrapper > .pre-loader.bg-overlay::before,#stacks_in_681 .impact-wrapper > .pre-loader.bg-overlay::after{content:"";top:0;left:0;bottom:0;right:0;height:100%;position:absolute;z-index:0}#stacks_in_681 .impact-wrapper > .pre-loader.bg-overlay.ovl-color::before{background-color:rgba(89, 237, 212, 0.30)}#stacks_in_681 .impact-wrapper > .pre-loader.bg-overlay.ovl-tile::after{background-image:url();opacity:0.30;background-repeat:repeat}#stacks_in_681 .impact-container{z-index:5}#stacks_in_681 .scrollDown{position:absolute;cursor:pointer;z-index:100;left:50%;width:80px;height:80px;-webkit-touch-callout:none;transform:scale(0.70);transform-origin:left center;-webkit-user-select:none;user-select:none}@media screen and (max-width:640px){#stacks_in_681 .scrollDown{transform:scale(0.70)}}#stacks_in_681 .scrollDown.button-bottom{bottom:30px}#stacks_in_681 .scrollDown.button-top{top:30px}@media screen and (max-width:640px){#stacks_in_681 .scrollDown.hide-on-mob{display:none}}#stacks_in_681 .impact-arrow-wrap{background:rgba(0, 0, 0, 0.85);border-radius:50%;border:2px solid rgba(255, 255, 255, 0.96);box-shadow:0px 0px 0px 0px rgba(51, 51, 51, 0.60);transition:all 90ms ease}#stacks_in_681 .impact-arrow-wrap:hover{background:rgba(40, 40, 40, 0.85);transition:all 90ms ease}#stacks_in_681 .impact-arrow-wrap:hover .impact-hint{opacity:1 !important}#stacks_in_681 .impact-arrow-wrap.animates .impact-arrow{animation-delay:3000ms;animation-iteration-count:3}#stacks_in_681 .impact-arrow{border-top-color:rgba(255, 255, 255, 0.85);border-right-color:rgba(255, 255, 255, 0.85);border-width:2px}#stacks_in_681 .impact-arrow:hover{border-top-color:rgba(255, 255, 255, 1.00);border-right-color:rgba(255, 255, 255, 1.00)}#stacks_in_681 .impact-hint{position:absolute;top:0.6em;width:100%;left:0;font-size:2em;font-style:italic;text-align:center;color:rgba(255, 255, 255, 0.85);opacity:0}#stacks_in_681 .slides-pagination > a{transition:all 240ms ease}#stacks_in_681 .slides-pagination > a.current{transition:all 240ms ease} #stacks_in_689 .impact-slide{background-image:url("../files/slideshowImage-689.png")}.slide-stacks_in_689 .impact-container.v-bottom{bottom:0px}.slide-stacks_in_689 .impact-container.h-right{right:0px}.slide-stacks_in_689 .impact-container.h-left{left:0px}.slide-stacks_in_689 .impact-container.v-top{top:0px} #stacks_in_682 .impact-slide{background-image:url("../files/slideshowImage-682.jpg")}.slide-stacks_in_682 .impact-container.v-bottom{bottom:0px}.slide-stacks_in_682 .impact-container.h-right{right:0px}.slide-stacks_in_682 .impact-container.h-left{left:0px}.slide-stacks_in_682 .impact-container.v-top{top:0px} #stacks_in_685 .impact-slide{background-image:url("../files/slideshowImage-685.jpg")}.slide-stacks_in_685 .impact-container.v-bottom{bottom:0px}.slide-stacks_in_685 .impact-container.h-right{right:0px}.slide-stacks_in_685 .impact-container.h-left{left:0px}.slide-stacks_in_685 .impact-container.v-top{top:0px} #stacks_in_687 .impact-slide{background-image:url("../files/slideshowImage-687.jpg")}.slide-stacks_in_687 .impact-container.v-bottom{bottom:0px}.slide-stacks_in_687 .impact-container.h-right{right:0px}.slide-stacks_in_687 .impact-container.h-left{left:0px}.slide-stacks_in_687 .impact-container.v-top{top:0px} #stacks_in_691 .impact-slide{background-image:url("../files/slideshowImage-691.jpg")}.slide-stacks_in_691 .impact-container.v-bottom{bottom:0px}.slide-stacks_in_691 .impact-container.h-right{right:0px}.slide-stacks_in_691 .impact-container.h-left{left:0px}.slide-stacks_in_691 .impact-container.v-top{top:0px} #stacks_in_697 .impact-slide{background-image:url("../files/slideshowImage-697.jpg")}.slide-stacks_in_697 .impact-container.v-bottom{bottom:0px}.slide-stacks_in_697 .impact-container.h-right{right:0px}.slide-stacks_in_697 .impact-container.h-left{left:0px}.slide-stacks_in_697 .impact-container.v-top{top:0px} #stacks_in_829 .impact-slide{background-image:url("../files/slideshowImage-829.jpg")}.slide-stacks_in_829 .impact-container.v-bottom{bottom:0px}.slide-stacks_in_829 .impact-container.h-right{right:0px}.slide-stacks_in_829 .impact-container.h-left{left:0px}.slide-stacks_in_829 .impact-container.v-top{top:0px} #stacks_in_681 .slides-navigation{display:none}#stacks_in_681 .slides-pagination{z-index:100;text-align:center;width:100%;bottom:15px;}#stacks_in_681 .slides-pagination a{border:2px solid rgba(255, 255, 255, 1.00);background:rgba(255, 255, 255, 1.00);border-radius:50%;box-sizing:content-box;width:20px;height:20px;font-size:20px !important;line-height:20px;color:rgba(0, 0, 0, 1.00);display:-moz-inline-stack;display:inline-block;vertical-align:middle;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=");margin:3px;overflow:hidden;text-decoration:none}#stacks_in_681 .slides-pagination a:hover{text-decoration:none;border:2px solid rgba(255, 255, 255, 1.00);background:rgba(225, 225, 225, 1.00)}#stacks_in_681 .slides-pagination a.current{color:rgba(255, 255, 255, 1.00);border:2px solid rgba(176, 142, 111, 1.00);background:rgba(176, 142, 111, 1.00)}#stacks_in_681 .slides-pagination a.current:hover{border:2px solid rgba(176, 142, 111, 1.00);background:rgba(176, 142, 111, 1.00)}#stacks_in_681 .slides-pagination{position:absolute}#stacks_in_681 .slides-pagination{opacity:0;transition:opacity 180ms ease}#stacks_in_681:hover .slides-pagination{opacity:1} .stacks_in_1982 > .grid-divider-wrapper > .grid-divider{height:calc(100% - 2rem)} .reviewCard{border-radius:10px ;} .reviewCard h3.author{font-size:calc(20rem/16) ;}@media only screen and (min-width:40em) { .reviewCard h3.author{font-size:calc(26rem/16) ;line-height:1.50 }}@media only screen and (min-width:64em) { .reviewCard h3.author{font-size:calc(32rem/16) ;line-height:1.50 }} .reviewCard .text{} .reviewCard .rating p{font-size:calc(14rem/16) ;}@media only screen and (min-width:40em) { .reviewCard .rating p{font-size:calc(14rem/16) ;line-height:1.50 }}@media only screen and (min-width:64em) { .reviewCard .rating p{font-size:calc(20rem/16) ;line-height:1.50 }} .reviewCard .rating p{margin-right:0.25rem ;} .reviewCard{padding:1.25rem !important;} @media only screen and (min-width:40em){.reviewCard{padding:1.5rem !important}}@media only screen and (min-width:64em){.reviewCard{padding:1.5rem !important}} .stacks_in_1997 > .grid-divider-wrapper > .grid-divider{height:calc(100% - 2rem)} .stacks_in_2008 > .grid-divider-wrapper > .grid-divider{height:calc(100% - 2rem)} .stacks_in_2012 img{width:100%;max-width:80px} .stacks_in_2019 > .grid-divider-wrapper > .grid-divider{height:calc(100% - 2rem)} .stacks_in_2063 > .grid-divider-wrapper > .grid-divider{height:calc(100% - 2rem)} .smallest p, .smallest a{font-size:calc(10rem/16) ;}@media only screen and (min-width:40em) { .smallest p, .smallest a{font-size:calc(10rem/16) }}@media only screen and (min-width:64em) { .smallest p, .smallest a{font-size:calc(14rem/16) }} .footer-menu>.menu a, .menu.footer-menu a{--menu-link-color:rgba(108, 108, 108, 1.00);--menu-link-color-hover:rgba(68, 68, 68, 1.00);--menu-bg-color:rgba(255, 255, 255, 0.00);--menu-caret-color:rgba(97, 103, 173, 1.00);--menu-border-accent:2px solid var(--menu-link-color)} .footer-menu>.menu .menu-text, .menu.footer-menu .menu-text{--menu-text-color:rgba(68, 68, 68, 1.00)} .footer-menu>.menu>li>a, .menu.footer-menu>li>a{padding-top:1rem;padding-bottom:1rem} .footer-menu>.menu .submenu>li>a, .menu.footer-menu .submenu>li>a{padding-top:0.75rem;padding-bottom:0.75rem} .footer-menu>.menu li.active>a, .footer-menu>.menu li.is-active>a, .footer-menu>.menu a.is-active, .menu.footer-menu li.active>a, .menu.footer-menu li.is-active>a, .menu.footer-menu a.is-active{--menu-bg-color:rgba(97, 103, 173, 0.00);--menu-link-color:rgba(68, 68, 68, 1.00);--menu-caret-color:rgba(255, 255, 255, 1.00);--menu-link-color-hover:rgba(68, 68, 68, 1.00)} .footer-menu>.menu .submenu li.active>a, .footer-menu>.menu .submenu li.is-active>a, .footer-menu>.menu .submenu a.is-active, .menu.footer-menu .submenu li.active>a, .menu.footer-menu .submenu li.is-active>a, .menu.footer-menu .submenu a.is-active{--menu-caret-color:rgba(255, 255, 255, 1.00)} .footer-menu>.menu .submenu a, .menu.footer-menu .submenu a{--menu-caret-color:rgba(97, 103, 173, 1.00)} .footer-menu>.menu .submenu, .menu.footer-menu .submenu{--submenu-bg-color:rgba(254, 254, 254, 1.00);--submenu-border:1px solid rgba(202, 202, 202, 1.00)} .footer-menu>.menu .submenu a, .menu.footer-menu .submenu a{--menu-bg-color:transparent;--menu-link-color:rgba(34, 34, 34, 1.00);--menu-link-color-hover:rgba(68, 68, 68, 1.00)} .footer-menu>.menu .submenu .menu-text, .menu.footer-menu .submenu .menu-text{--menu-text-color:rgba(68, 68, 68, 1.00)} .footer-menu>.menu .submenu li.active>a, .footer-menu>.menu .submenu li.is-active>a, .footer-menu>.menu .submenu a.is-active, .menu.footer-menu .submenu li.active>a, .menu.footer-menu .submenu li.is-active>a, .menu.footer-menu .submenu a.is-active{--menu-caret-color:rgba(255, 255, 255, 1.00);--menu-bg-color:rgba(97, 103, 173, 1.00);--menu-link-color:rgba(254, 254, 254, 1.00);--menu-link-color-hover:rgba(254, 254, 254, 1.00)} @charset "UTF-8"; #end-stacks_in_1960_62-1{visibility:visible} #end-stacks_in_1960_62-2{visibility:visible} .stacks_in_1960_69{line-height:0}.stacks_in_1960_69 svg{display:inline-block;max-width:140px;height:auto;}.stacks_in_1960_69.full-width svg{width:100%;height:auto} .stacks_in_1960_121 > .grid-divider-wrapper > .grid-divider{height:calc(100% - 2rem)} /* SocialDock – each.css */ /* ===== Basis & Variablen ===== */ .socialdock { --sd-gutter: 8px; --sd-radius: 8px; --sd-pad-y: 8px; --sd-pad-x: 10px; --sd-font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif; position: relative; display: block; font-family: var(--sd-font); line-height: 1; } /* ===== Layout Container ===== */ .socialdock .socialdock-inner { display: flex; width: 100%; flex-wrap: wrap; gap: var(--sd-gutter); justify-content: flex-start; /* default */ } .socialdock[data-align="center"] .socialdock-inner { justify-content: center; } .socialdock[data-align="right"] .socialdock-inner { justify-content: flex-end; } .socialdock[data-align="between"] .socialdock-inner { justify-content: space-between; } .socialdock[data-align="around"] .socialdock-inner { justify-content: space-around; } .socialdock[data-align="evenly"] .socialdock-inner { justify-content: space-evenly; } /* ===== Stacked-Mode ===== */ .socialdock[data-stacked="true"] .socialdock-inner { flex-direction: column; } .socialdock[data-stacked="true"][data-fullwidth="true"] .socialdock-inner { align-items: stretch; } .socialdock[data-stacked="true"][data-fullwidth="true"] .sd-btn { width: 100%; max-width: 100%; box-sizing: border-box; } /* Stacked + nicht Fullwidth: horizontal per align-items */ .socialdock[data-stacked="true"]:not([data-fullwidth="true"]) .socialdock-inner { align-items: flex-start; } .socialdock[data-stacked="true"]:not([data-fullwidth="true"])[data-align="center"] .socialdock-inner { align-items: center; } .socialdock[data-stacked="true"]:not([data-fullwidth="true"])[data-align="right"] .socialdock-inner { align-items: flex-end; } .socialdock[data-stacked="true"] .sd-btn { align-self: auto !important; } /* ===== Buttons ===== */ .socialdock .sd-btn { width: var(--sd-btn-w, auto); /* equalWidth via JS */ display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; border-width: var(--sd-border-w, 1px); border-style: var(--sd-border-style, solid); border-color: var(--sd-border-color, currentColor); border-radius: var(--sd-radius, var(--sr-radius, var(--sd-radius-default, 8px))); padding: var(--sd-pad-y, var(--sr-pad-y, var(--sd-pad-y-default, 8px))) var(--sd-pad-x, var(--sr-pad-x, var(--sd-pad-x-default, 10px))); transition: transform .08s ease, opacity .2s ease; font-weight: 600; white-space: nowrap; } .socialdock .sd-btn:focus { outline: 2px solid; outline-offset: 2px; } .socialdock .sd-btn:hover { transform: translateY(-1px); } .socialdock .sd-btn:active { transform: translateY(0); } /* ===== Icons immer perfekt zentriert ===== */ .socialdock .sd-ic { font-size: var(--sd-icon-size, 1.2em); /* global steuerbar */ width: 1.2em; height: 1.2em; display: inline-flex; align-items: center; justify-content: center; /* zentriert SVG in 1.2em */ } .socialdock .sd-ic svg { width: 1em; height: 1em; display: block; overflow: visible; } /* ===== Labels & Hover-Animation ===== */ /* 1) Labels AUS (robust), wenn KEIN Hoverlabel aktiv ist */ .socialdock:not([data-labels="true"]):not([data-hoverlabel="true"]) .sd-lb { display: none !important; } .socialdock:not([data-labels="true"]):not([data-hoverlabel="true"]) .sd-btn { gap: 0; /* kein Phantomabstand */ justify-content: center; /* Icon mittig */ } /* 2) Hoverlabel aktiv + Labels nicht explizit an */ .socialdock[data-hoverlabel="true"]:not([data-labels="true"]) .sd-lb { display: inline-flex !important; /* sichtbar als Flex-Item */ align-items: center; min-width: 0; /* echtes Schrumpfen */ max-width: 0; /* eingefahren */ overflow: hidden; opacity: 0; transform: translateX(-4px) scale(0.98); margin-left: 0; pointer-events: none; transition: max-width .25s ease, opacity .22s ease, transform .25s ease, margin-left .25s ease; } .socialdock[data-hoverlabel="true"]:not([data-labels="true"]) .sd-btn { gap: 0; /* Platz entsteht durch margin-left beim Ausfahren */ justify-content: center; } .socialdock[data-hoverlabel="true"]:not([data-labels="true"]) .sd-btn:hover .sd-lb, .socialdock[data-hoverlabel="true"]:not([data-labels="true"]) .sd-btn:focus-visible .sd-lb { max-width: var(--sd-hoverlabel-max, 12ch); opacity: 1; transform: none; margin-left: .5em; /* wirkt wie gap */ } /* ===== Größen ===== */ .socialdock[data-size="s"] .sd-btn { font-size: 12px; --sd-pad-y-default: 6px; --sd-pad-x-default: 8px; --sd-radius-default: 8px; } .socialdock[data-size="m"] .sd-btn { font-size: 14px; --sd-pad-y-default: 8px; --sd-pad-x-default: 10px; --sd-radius-default: 8px; } .socialdock[data-size="l"] .sd-btn { font-size: 16px; --sd-pad-y-default: 10px; --sd-pad-x-default: 12px; --sd-radius-default: 12px; } /* ===== Formen ===== */ .socialdock[data-shape="square"] .sd-btn { border-radius: 0px; } .socialdock[data-shape="pill"] .sd-btn { border-radius: 999px; } /* optional, nur zur Klarheit – identisch zur Basis: */ .socialdock[data-shape="rounded"] .sd-btn { border-radius: var(--sd-radius, var(--sr-radius, var(--sd-radius-default, 8px))); } /* ===== Theme-Variablen (Light/Dark/Auto) – nur wenn Brand AUS ===== */ .socialdock[data-theme="light"]:not([data-brand]) .sd-btn, .socialdock[data-theme="light"][data-brand="off"] .sd-btn { color: var(--sd-light-fg, #111); background: var(--sd-light-bg, #fff); } .socialdock[data-theme="dark"]:not([data-brand]) .sd-btn, .socialdock[data-theme="dark"][data-brand="off"] .sd-btn { color: var(--sd-dark-fg, #eee); background: var(--sd-dark-bg, #111); } @media (prefers-color-scheme: light) { .socialdock[data-theme="auto"]:not([data-brand]) .sd-btn, .socialdock[data-theme="auto"][data-brand="off"] .sd-btn { color: var(--sd-light-fg, #111); background: var(--sd-light-bg, #fff); } } @media (prefers-color-scheme: dark) { .socialdock[data-theme="auto"]:not([data-brand]) .sd-btn, .socialdock[data-theme="auto"][data-brand="off"] .sd-btn { color: var(--sd-dark-fg, #eee); background: var(--sd-dark-bg, #111); } } /* ===== Brandfarben (pro Service) ===== */ .sd-btn.sd-x { --sd-brand: #000000; } .sd-btn.sd-facebook { --sd-brand: #1877f2; } .sd-btn.sd-linkedin { --sd-brand: #0a66c2; } .sd-btn.sd-whatsapp { --sd-brand: #25d366; } .sd-btn.sd-telegram { --sd-brand: #24a1de; } .sd-btn.sd-pinterest { --sd-brand: #e60023; } .sd-btn.sd-mail { --sd-brand: #6c757d; } .sd-btn.sd-copy { --sd-brand: #6c757d; } .sd-btn.sd-print { --sd-brand: #6c757d; } .sd-btn.sd-webshare { --sd-brand: #6c757d; } .sd-btn.sd-threads { --sd-brand: #000000; } .sd-btn.sd-bluesky { --sd-brand: #1185fe; } .sd-btn.sd-reddit { --sd-brand: #ff4500; } .sd-btn.sd-hn { --sd-brand: #ff6600; } .sd-btn.sd-pocket { --sd-brand: #ef4056; } .sd-btn.sd-flipboard { --sd-brand: #e12828; } .sd-btn.sd-vk { --sd-brand: #4c75a3; } .sd-btn.sd-line { --sd-brand: #00c300; } .sd-btn.sd-weibo { --sd-brand: #e6162d; } .sd-btn.sd-xing { --sd-brand: #026466; } .sd-btn.sd-mastodon { --sd-brand: #6364ff; } .sd-btn.sd-youtube { --sd-brand: #ff0000; } .sd-btn.sd-instagram { --sd-brand: #E1306C; } .sd-btn.sd-tiktok { --sd-brand: #000000; } .sd-btn.sd-github { --sd-brand: #24292e; } .sd-btn.sd-website { --sd-brand: #6c757d; } /* generisch */ .socialdock[data-brand="fg"] .sd-btn { color: var(--sd-brand, currentColor); border-color: var(--sd-brand, currentColor); background: transparent; } .socialdock[data-brand="bg"] .sd-btn { background: var(--sd-brand, #555); border-color: var(--sd-brand, #555); color: #fff; } /* ⬇️ NEU: Per-Button Brand-Style (überschreibt Theme) */ /* Nach deinen Theme-Regeln einfügen */ .socialdock[data-theme] .sd-btn[data-brand="bg"] { background: var(--sd-brand, #555); border-color: var(--sd-brand, #555); color: #fff; } .socialdock[data-theme] .sd-btn[data-brand="fg"] { color: var(--sd-brand, currentColor); border-color: var(--sd-brand, currentColor); background: transparent; } .socialdock[data-brand="fg"] .sd-btn:hover { opacity: .95; } .socialdock[data-brand="fg"] .sd-btn:active { opacity: .9; } .socialdock[data-brand="bg"] .sd-btn:hover { filter: brightness(.97); } .socialdock[data-brand="bg"] .sd-btn:active { filter: brightness(.92); } /* ===== Toast ===== */ .socialdock .socialdock-toast { position: absolute; margin-top: 8px; background: rgba(0, 0, 0, .9); color: #fff; padding: 8px 10px; border-radius: 8px; font-size: 12px; opacity: 0; transform: translateY(-4px); transition: all .18s ease; } .socialdock .socialdock-toast.show { opacity: 1; transform: translateY(0); } /* Basis: Icon-Größe unabhängig vom Label steuern */ .socialdock .sd-ic { /* skaliert NUR das Icon (SVG bleibt 1em innerhalb) */ font-size: var(--sd-icon-size, 1em); width: 1em; height: 1em; } /* ===== Icon-only: kein Hintergrund, kein Rand – Labels bleiben ===== */ .socialdock[data-appearance="true"] .sd-btn { background: transparent !important; --sd-border-w: 0; box-shadow: none !important; padding: var(--sd-icon-pad, 0); /* unsichtbare Klickfläche (0–8px) */ gap: 8px; /* Abstand Icon ↔ Label */ transform: none; } /* Icon im icon-only Modus größer machen */ .socialdock[data-appearance="true"] { --sd-icon-size: 1.6em; } /* Optional pro Buttongröße feinabstimmen */ .socialdock[data-appearance="true"][data-size="s"] { --sd-icon-size: 1.4em; } .socialdock[data-appearance="true"][data-size="m"] { --sd-icon-size: 1.6em; } .socialdock[data-appearance="true"][data-size="l"] { --sd-icon-size: 1.8em; } /* Fokus sichtbar (A11y) */ .socialdock[data-appearance="true"] .sd-btn:focus { outline: 2px solid currentColor; outline-offset: 2px; } /* Falls im icon-only Modus Brand-Farbe erzwungen werden soll */ .socialdock[data-appearance="true"][data-brand="fg"] .sd-btn { color: var(--sd-brand) !important; } .socialdock[data-appearance="true"][data-brand="bg"] .sd-btn { background: transparent !important; border: 0 !important; /* wahlweise: color: var(--sd-brand) !important; */ } /* 1) SVG darf über den ViewBox-Rand schauen (kein Clipping der Strokes) */ .socialdock .sd-ic svg { overflow: visible; /* verhindert "angeschnittene" Kanten */ display: block; } /* 2) Icon-Flexitem nicht schrumpfen lassen, immer genug Platz geben */ .socialdock .sd-ic { flex: 0 0 auto; /* nicht zusammenquetschen */ min-width: 1em; /* nie kleiner als die Icon-Größe */ min-height: 1em; padding: .08em; /* optischer "Bleed" */ } /* 3) Sicherheitshalber: Buttons haben wirklich kompakte Line-Box */ .socialdock .sd-btn { line-height: 1; } /* 4) Im Icon-only Modus darf das Icon größer sein, ohne Clipping */ .socialdock[data-appearance="true"] { --sd-icon-size: 1.6em; } .socialdock .sd-ic { font-size: var(--sd-icon-size, 1em); width: 1em; height: 1em; } /* Icon-only Modus: Sicherheits-Inset */ .socialdock[data-appearance="true"]{ --sd-edge-safety: 2px; /* ggf. 1px–3px testen */ padding-inline: var(--sd-edge-safety); overflow-x: clip; } @supports not (overflow-x: clip){ .socialdock[data-appearance="true"]{ overflow-x: hidden; } } /* Monochrome Icons – sicher */ .socialdock .sd-ic svg, .socialdock .sd-ic svg * { fill: currentColor !important; stroke: none !important; } /* Perfekte Kreise, wenn Option aktiv UND Labels komplett aus (kein Hoverlabel) */ .socialdock[data-round-icononly="true"] :not([data-labels="true"]):not([data-hoverlabel="true"]) .sd-btn { /* Kreisgröße: Icon + vertikales Padding */ --sd-circle: calc(var(--sd-icon-size, 1.2em) + (var(--sd-pad-y) * 2)); /* Equal-Width übersteuern: Breite = Höhe = --sd-circle */ --sd-btn-w: var(--sd-circle); height: var(--sd-circle); /* gleiches Padding auf allen Seiten -> optisch zentriert */ padding: var(--sd-pad-y); border-radius: 50%; gap: 0; /* kein „Phantom“-Abstand */ justify-content: center; } /* Optional: auch im icon-only Erscheinungsbild kreisrund */ .socialdock[data-appearance="true"][data-round-icononly="true"] :not([data-labels="true"]):not([data-hoverlabel="true"]) .sd-btn { border-radius: 50%; } /* Mini-Zeile: edel, freundlich, sehr kompakt */ .sd-item-mini{ --sd-brand:#6c757d; /* Fallback Brand */ --sd-bg:#f6f8fc; /* freundliches Hell */ --sd-bd:#e6ecf5; /* sanfte Linie */ --sd-fg:#243449; /* statt Schwarz: edles Slate */ --sd-badge-bg-share:#eef3ff; --sd-badge-fg-share:#2a5bd7; --sd-badge-bd-share:#e2e9ff; --sd-badge-bg-link:#e8f7f1; --sd-badge-fg-link:#0b7b54; --sd-badge-bd-link:#d6f2e7; display:flex; align-items:center; gap:8px; padding:4px 8px; margin:2px 0; border:0px solid var(--sd-bd); border-radius:4px; background:var(--sd-bg); color:var(--sd-fg); font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif; font-size:12px; line-height:1.2; max-width:100%; } .sd-item-mini .sd-dot{ width:8px; height:8px; border-radius:50%; background:var(--sd-brand); flex:0 0 auto; } .sd-item-mini .sd-badge{ font-size:10px; font-weight:700; padding:2px 6px; border-radius:999px; border:1px solid var(--sd-bd); } .sd-item-mini.is-share .sd-badge{ background:var(--sd-badge-bg-share); color:var(--sd-badge-fg-share); border-color:var(--sd-badge-bd-share); } .sd-item-mini.is-link .sd-badge{ background:var(--sd-badge-bg-link); color:var(--sd-badge-fg-link); border-color:var(--sd-badge-bd-link); } .sd-item-mini .sd-text{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0; } /* Service-Namen hübsch anzeigen: - wenn kein Label gesetzt ist, erzeugen wir Text via ::after - Standard: capitalize - Ausnahmen (YouTube, Hacker News, LINE, VK, Web Share, etc.) */ .sd-item-mini .sd-svc::after{ content: attr(data-svc); text-transform: capitalize; letter-spacing:.2px; } /* Ausnahmen/Mappings auf echte Markennamen */ .sd-item-mini.sd--youtube .sd-svc::after{ content:"YouTube"; } .sd-item-mini.sd--hn .sd-svc::after{ content:"Hacker News"; } .sd-item-mini.sd--line .sd-svc::after{ content:"LINE"; } .sd-item-mini.sd--vk .sd-svc::after{ content:"VK"; } .sd-item-mini.sd--xing .sd-svc::after{ content:"XING"; } .sd-item-mini.sd--webshare .sd-svc::after{ content:"Web Share"; } .sd-item-mini.sd--x .sd-svc::after{ content:"X"; } /* Dark-Mode (freundlich, nicht pechschwarz) */ @media (prefers-color-scheme: dark){ .sd-item-mini{ --sd-bg:#818c9f; --sd-bd:#243449; --sd-fg:#e7ecf3; --sd-badge-bg-share:#11203f; --sd-badge-fg-share:#9fb6ff; --sd-badge-bd-share:#1a2a4a; --sd-badge-bg-link:#0f221b; --sd-badge-fg-link:#86d6b7; --sd-badge-bd-link:#153428; } } /* Brandfarbe nach Dienst (nur Variable setzen, dezente Dot-Farbe) */ .sd-item-mini.sd--x{--sd-brand:#111} .sd-item-mini.sd--facebook{--sd-brand:#1877f2} .sd-item-mini.sd--linkedin{--sd-brand:#0a66c2} .sd-item-mini.sd--whatsapp{--sd-brand:#25d366} .sd-item-mini.sd--telegram{--sd-brand:#24a1de} .sd-item-mini.sd--pinterest{--sd-brand:#e60023} .sd-item-mini.sd--mail,.sd-item-mini.sd--copy,.sd-item-mini.sd--print,.sd-item-mini.sd--webshare{--sd-brand:#6c757d} .sd-item-mini.sd--threads{--sd-brand:#000} .sd-item-mini.sd--bluesky{--sd-brand:#1185fe} .sd-item-mini.sd--reddit{--sd-brand:#ff4500} .sd-item-mini.sd--hn{--sd-brand:#ff6600} .sd-item-mini.sd--pocket{--sd-brand:#ef4056} .sd-item-mini.sd--flipboard{--sd-brand:#e12828} .sd-item-mini.sd--vk{--sd-brand:#4c75a3} .sd-item-mini.sd--line{--sd-brand:#00c300} .sd-item-mini.sd--weibo{--sd-brand:#e6162d} .sd-item-mini.sd--xing{--sd-brand:#026466} .sd-item-mini.sd--mastodon{--sd-brand:#6364ff} /* Link-Only & generisch */ .sd-item-mini.sd--instagram{--sd-brand:#E1306C} .sd-item-mini.sd--youtube{--sd-brand:#f00} .sd-item-mini.sd--tiktok{--sd-brand:#000} .sd-item-mini.sd--github{--sd-brand:#24292e} .sd-item-mini.sd--website,.sd-item-mini.sd--external{--sd-brand:#6c757d} /* Auto-Label: Service-Namen hübsch darstellen, wenn kein eigenes Label gesetzt ist */ .sd-preview .sd-auto-label::after{ content: attr(data-svc); text-transform: capitalize; letter-spacing: .2px; } /* Ausnahmen für Markennamen */ .sd-preview .sd-btn.sd-youtube .sd-auto-label::after{ content: "YouTube"; } .sd-preview .sd-btn.sd-hn .sd-auto-label::after{ content: "Hacker News"; } .sd-preview .sd-btn.sd-line .sd-auto-label::after{ content: "LINE"; } .sd-preview .sd-btn.sd-vk .sd-auto-label::after{ content: "VK"; } .sd-preview .sd-btn.sd-xing .sd-auto-label::after{ content: "XING"; } .sd-preview .sd-btn.sd-webshare .sd-auto-label::after{ content: "Web Share"; } .sd-preview .sd-btn.sd-x .sd-auto-label::after{ content: "X"; } /* Kompakter machen, damit die Zeile wenig Platz braucht (ohne die Parent-Optik zu brechen) */ .sd-preview .sd-btn{ padding: 6px 10px; /* etwas schlanker */ gap: 6px; /* engerer Abstand Icon/Label */ font-size: 13px; /* kompakt, aber lesbar */ } .sd-preview .sd-ic { font-size: 1.2em; } /* Icon etwas kleiner im Edit */ /* Legenden-Container kompakt lassen */ .sd-edit-inline{ display:flex; align-items:center; gap:8px; max-width:100%; } /* Button im Editor kompakt */ .sd-preview .sd-btn{ padding:4px 8px; gap:6px; font-size:12px; } .sd-preview .sd-ic { font-size:1.1em; } /* Kleine Legende: „Share/Link · Service“ */ .sd-edit-legend{ --fg:#2a394d; --bd:#e6ecf5; --bg:#f6f8fc; --fgShare:#2a394d; /* vorher fast weiß → schlechte Lesbarkeit */ --fgLink:#0b7b54; display:inline-flex; align-items:center; gap:4px; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif; font-size:11px; line-height:1.1; color:var(--fg); padding:2px 6px; border:1px solid var(--bd); border-radius:8px; background:var(--bg); white-space:nowrap; max-width:100%; } .sd-edit-legend .sd-legend-mode{ font-weight:700; /* Modus-Farbe */ } .sd-edit-legend.is-share .sd-legend-mode{ color:var(--fgShare); } .sd-edit-legend.is-link .sd-legend-mode{ color:var(--fgLink); } .sd-edit-legend .sd-legend-sep{ opacity:.5; } /* 👉 Dienst-Name: etwas größer & fett, damit er sofort erkennbar ist */ .sd-edit-legend .sd-legend-svc{ font-size:11px; font-weight:700; overflow:hidden; text-overflow:ellipsis; max-width:32ch; text-transform:capitalize; /* hübscher als alles klein */ } /* 👉 Falls KEIN Label im HTML steht, nimm data-svc als Fallback-Text */ .sd-edit-legend .sd-legend-svc:empty::after{ content: attr(data-svc); text-transform: capitalize; letter-spacing:.2px; } /* Markennamen-Sonderfälle für den Fallback-Text */ .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="youtube"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="youtube"]::after{ content:"YouTube"; } .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="hn"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="hn"]::after{ content:"Hacker News"; } .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="line"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="line"]::after{ content:"LINE"; } .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="vk"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="vk"]::after{ content:"VK"; } .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="xing"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="xing"]::after{ content:"XING"; } .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="webshare"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="webshare"]::after{ content:"Web Share"; } .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="x"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="x"]::after{ content:"X"; } /* SocialDock – each.css */ /* ===== Basis & Variablen ===== */ .socialdock { --sd-gutter: 16px; --sd-radius: 8px; --sd-pad-y: 8px; --sd-pad-x: 10px; --sd-font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif; position: relative; display: block; font-family: var(--sd-font); line-height: 1; } /* ===== Layout Container ===== */ .socialdock .socialdock-inner { display: flex; width: 100%; flex-wrap: wrap; gap: var(--sd-gutter); justify-content: flex-start; /* default */ } .socialdock[data-align="center"] .socialdock-inner { justify-content: center; } .socialdock[data-align="right"] .socialdock-inner { justify-content: flex-end; } .socialdock[data-align="between"] .socialdock-inner { justify-content: space-between; } .socialdock[data-align="around"] .socialdock-inner { justify-content: space-around; } .socialdock[data-align="evenly"] .socialdock-inner { justify-content: space-evenly; } /* ===== Stacked-Mode ===== */ .socialdock[data-stacked="true"] .socialdock-inner { flex-direction: column; } .socialdock[data-stacked="true"][data-fullwidth="true"] .socialdock-inner { align-items: stretch; } .socialdock[data-stacked="true"][data-fullwidth="true"] .sd-btn { width: 100%; max-width: 100%; box-sizing: border-box; } /* Stacked + nicht Fullwidth: horizontal per align-items */ .socialdock[data-stacked="true"]:not([data-fullwidth="true"]) .socialdock-inner { align-items: flex-start; } .socialdock[data-stacked="true"]:not([data-fullwidth="true"])[data-align="center"] .socialdock-inner { align-items: center; } .socialdock[data-stacked="true"]:not([data-fullwidth="true"])[data-align="right"] .socialdock-inner { align-items: flex-end; } .socialdock[data-stacked="true"] .sd-btn { align-self: auto !important; } /* ===== Buttons ===== */ .socialdock .sd-btn { width: var(--sd-btn-w, auto); /* equalWidth via JS */ display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; border-width: var(--sd-border-w, 1px); border-style: var(--sd-border-style, solid); border-color: var(--sd-border-color, currentColor); border-radius: var(--sd-radius, var(--sr-radius, var(--sd-radius-default, 8px))); padding: var(--sd-pad-y, var(--sr-pad-y, var(--sd-pad-y-default, 8px))) var(--sd-pad-x, var(--sr-pad-x, var(--sd-pad-x-default, 10px))); transition: transform .08s ease, opacity .2s ease; font-weight: 600; white-space: nowrap; } .socialdock .sd-btn:focus { outline: 2px solid; outline-offset: 2px; } .socialdock .sd-btn:hover { transform: translateY(-1px); } .socialdock .sd-btn:active { transform: translateY(0); } /* ===== Icons immer perfekt zentriert ===== */ .socialdock .sd-ic { font-size: var(--sd-icon-size, 1.2em); /* global steuerbar */ width: 1.2em; height: 1.2em; display: inline-flex; align-items: center; justify-content: center; /* zentriert SVG in 1.2em */ } .socialdock .sd-ic svg { width: 1em; height: 1em; display: block; overflow: visible; } /* ===== Labels & Hover-Animation ===== */ /* 1) Labels AUS (robust), wenn KEIN Hoverlabel aktiv ist */ .socialdock:not([data-labels="true"]):not([data-hoverlabel="true"]) .sd-lb { display: none !important; } .socialdock:not([data-labels="true"]):not([data-hoverlabel="true"]) .sd-btn { gap: 0; /* kein Phantomabstand */ justify-content: center; /* Icon mittig */ } /* 2) Hoverlabel aktiv + Labels nicht explizit an */ .socialdock[data-hoverlabel="true"]:not([data-labels="true"]) .sd-lb { display: inline-flex !important; /* sichtbar als Flex-Item */ align-items: center; min-width: 0; /* echtes Schrumpfen */ max-width: 0; /* eingefahren */ overflow: hidden; opacity: 0; transform: translateX(-4px) scale(0.98); margin-left: 0; pointer-events: none; transition: max-width .25s ease, opacity .22s ease, transform .25s ease, margin-left .25s ease; } .socialdock[data-hoverlabel="true"]:not([data-labels="true"]) .sd-btn { gap: 0; /* Platz entsteht durch margin-left beim Ausfahren */ justify-content: center; } .socialdock[data-hoverlabel="true"]:not([data-labels="true"]) .sd-btn:hover .sd-lb, .socialdock[data-hoverlabel="true"]:not([data-labels="true"]) .sd-btn:focus-visible .sd-lb { max-width: var(--sd-hoverlabel-max, 12ch); opacity: 1; transform: none; margin-left: .5em; /* wirkt wie gap */ } /* ===== Größen ===== */ .socialdock[data-size="s"] .sd-btn { font-size: 12px; --sd-pad-y-default: 6px; --sd-pad-x-default: 8px; --sd-radius-default: 8px; } .socialdock[data-size="m"] .sd-btn { font-size: 14px; --sd-pad-y-default: 8px; --sd-pad-x-default: 10px; --sd-radius-default: 8px; } .socialdock[data-size="l"] .sd-btn { font-size: 16px; --sd-pad-y-default: 10px; --sd-pad-x-default: 12px; --sd-radius-default: 12px; } /* ===== Formen ===== */ .socialdock[data-shape="square"] .sd-btn { border-radius: 0px; } .socialdock[data-shape="pill"] .sd-btn { border-radius: 999px; } /* optional, nur zur Klarheit – identisch zur Basis: */ .socialdock[data-shape="rounded"] .sd-btn { border-radius: var(--sd-radius, var(--sr-radius, var(--sd-radius-default, 8px))); } /* ===== Theme-Variablen (Light/Dark/Auto) – nur wenn Brand AUS ===== */ .socialdock[data-theme="light"]:not([data-brand]) .sd-btn, .socialdock[data-theme="light"][data-brand="off"] .sd-btn { color: var(--sd-light-fg, #111); background: var(--sd-light-bg, #fff); } .socialdock[data-theme="dark"]:not([data-brand]) .sd-btn, .socialdock[data-theme="dark"][data-brand="off"] .sd-btn { color: var(--sd-dark-fg, #eee); background: var(--sd-dark-bg, #111); } @media (prefers-color-scheme: light) { .socialdock[data-theme="auto"]:not([data-brand]) .sd-btn, .socialdock[data-theme="auto"][data-brand="off"] .sd-btn { color: var(--sd-light-fg, #111); background: var(--sd-light-bg, #fff); } } @media (prefers-color-scheme: dark) { .socialdock[data-theme="auto"]:not([data-brand]) .sd-btn, .socialdock[data-theme="auto"][data-brand="off"] .sd-btn { color: var(--sd-dark-fg, #eee); background: var(--sd-dark-bg, #111); } } /* ===== Brandfarben (pro Service) ===== */ .sd-btn.sd-x { --sd-brand: #000000; } .sd-btn.sd-facebook { --sd-brand: #1877f2; } .sd-btn.sd-linkedin { --sd-brand: #0a66c2; } .sd-btn.sd-whatsapp { --sd-brand: #25d366; } .sd-btn.sd-telegram { --sd-brand: #24a1de; } .sd-btn.sd-pinterest { --sd-brand: #e60023; } .sd-btn.sd-mail { --sd-brand: #6c757d; } .sd-btn.sd-copy { --sd-brand: #6c757d; } .sd-btn.sd-print { --sd-brand: #6c757d; } .sd-btn.sd-webshare { --sd-brand: #6c757d; } .sd-btn.sd-threads { --sd-brand: #000000; } .sd-btn.sd-bluesky { --sd-brand: #1185fe; } .sd-btn.sd-reddit { --sd-brand: #ff4500; } .sd-btn.sd-hn { --sd-brand: #ff6600; } .sd-btn.sd-pocket { --sd-brand: #ef4056; } .sd-btn.sd-flipboard { --sd-brand: #e12828; } .sd-btn.sd-vk { --sd-brand: #4c75a3; } .sd-btn.sd-line { --sd-brand: #00c300; } .sd-btn.sd-weibo { --sd-brand: #e6162d; } .sd-btn.sd-xing { --sd-brand: #026466; } .sd-btn.sd-mastodon { --sd-brand: #6364ff; } .sd-btn.sd-youtube { --sd-brand: #ff0000; } .sd-btn.sd-instagram { --sd-brand: #E1306C; } .sd-btn.sd-tiktok { --sd-brand: #000000; } .sd-btn.sd-github { --sd-brand: #24292e; } .sd-btn.sd-website { --sd-brand: #6c757d; } /* generisch */ .socialdock[data-brand="fg"] .sd-btn { color: var(--sd-brand, currentColor); border-color: var(--sd-brand, currentColor); background: transparent; } .socialdock[data-brand="bg"] .sd-btn { background: var(--sd-brand, #555); border-color: var(--sd-brand, #555); color: #fff; } /* ⬇️ NEU: Per-Button Brand-Style (überschreibt Theme) */ /* Nach deinen Theme-Regeln einfügen */ .socialdock[data-theme] .sd-btn[data-brand="bg"] { background: var(--sd-brand, #555); border-color: var(--sd-brand, #555); color: #fff; } .socialdock[data-theme] .sd-btn[data-brand="fg"] { color: var(--sd-brand, currentColor); border-color: var(--sd-brand, currentColor); background: transparent; } .socialdock[data-brand="fg"] .sd-btn:hover { opacity: .95; } .socialdock[data-brand="fg"] .sd-btn:active { opacity: .9; } .socialdock[data-brand="bg"] .sd-btn:hover { filter: brightness(.97); } .socialdock[data-brand="bg"] .sd-btn:active { filter: brightness(.92); } /* ===== Toast ===== */ .socialdock .socialdock-toast { position: absolute; margin-top: 8px; background: rgba(0, 0, 0, .9); color: #fff; padding: 8px 10px; border-radius: 8px; font-size: 12px; opacity: 0; transform: translateY(-4px); transition: all .18s ease; } .socialdock .socialdock-toast.show { opacity: 1; transform: translateY(0); } /* Basis: Icon-Größe unabhängig vom Label steuern */ .socialdock .sd-ic { /* skaliert NUR das Icon (SVG bleibt 1em innerhalb) */ font-size: var(--sd-icon-size, 1em); width: 1em; height: 1em; } /* ===== Icon-only: kein Hintergrund, kein Rand – Labels bleiben ===== */ .socialdock[data-appearance="true"] .sd-btn { background: transparent !important; --sd-border-w: 0; box-shadow: none !important; padding: var(--sd-icon-pad, 0); /* unsichtbare Klickfläche (0–8px) */ gap: 8px; /* Abstand Icon ↔ Label */ transform: none; } /* Icon im icon-only Modus größer machen */ .socialdock[data-appearance="true"] { --sd-icon-size: 1.6em; } /* Optional pro Buttongröße feinabstimmen */ .socialdock[data-appearance="true"][data-size="s"] { --sd-icon-size: 1.4em; } .socialdock[data-appearance="true"][data-size="m"] { --sd-icon-size: 1.6em; } .socialdock[data-appearance="true"][data-size="l"] { --sd-icon-size: 1.8em; } /* Fokus sichtbar (A11y) */ .socialdock[data-appearance="true"] .sd-btn:focus { outline: 2px solid currentColor; outline-offset: 2px; } /* Falls im icon-only Modus Brand-Farbe erzwungen werden soll */ .socialdock[data-appearance="true"][data-brand="fg"] .sd-btn { color: var(--sd-brand) !important; } .socialdock[data-appearance="true"][data-brand="bg"] .sd-btn { background: transparent !important; border: 0 !important; /* wahlweise: color: var(--sd-brand) !important; */ } /* 1) SVG darf über den ViewBox-Rand schauen (kein Clipping der Strokes) */ .socialdock .sd-ic svg { overflow: visible; /* verhindert "angeschnittene" Kanten */ display: block; } /* 2) Icon-Flexitem nicht schrumpfen lassen, immer genug Platz geben */ .socialdock .sd-ic { flex: 0 0 auto; /* nicht zusammenquetschen */ min-width: 1em; /* nie kleiner als die Icon-Größe */ min-height: 1em; padding: .08em; /* optischer "Bleed" */ } /* 3) Sicherheitshalber: Buttons haben wirklich kompakte Line-Box */ .socialdock .sd-btn { line-height: 1; } /* 4) Im Icon-only Modus darf das Icon größer sein, ohne Clipping */ .socialdock[data-appearance="true"] { --sd-icon-size: 1.6em; } .socialdock .sd-ic { font-size: var(--sd-icon-size, 1em); width: 1em; height: 1em; } /* Icon-only Modus: Sicherheits-Inset */ .socialdock[data-appearance="true"]{ --sd-edge-safety: 2px; /* ggf. 1px–3px testen */ padding-inline: var(--sd-edge-safety); overflow-x: clip; } @supports not (overflow-x: clip){ .socialdock[data-appearance="true"]{ overflow-x: hidden; } } /* Monochrome Icons – sicher */ .socialdock .sd-ic svg, .socialdock .sd-ic svg * { fill: currentColor !important; stroke: none !important; } /* Perfekte Kreise, wenn Option aktiv UND Labels komplett aus (kein Hoverlabel) */ .socialdock[data-round-icononly="true"] :not([data-labels="true"]):not([data-hoverlabel="true"]) .sd-btn { /* Kreisgröße: Icon + vertikales Padding */ --sd-circle: calc(var(--sd-icon-size, 1.2em) + (var(--sd-pad-y) * 2)); /* Equal-Width übersteuern: Breite = Höhe = --sd-circle */ --sd-btn-w: var(--sd-circle); height: var(--sd-circle); /* gleiches Padding auf allen Seiten -> optisch zentriert */ padding: var(--sd-pad-y); border-radius: 50%; gap: 0; /* kein „Phantom“-Abstand */ justify-content: center; } /* Optional: auch im icon-only Erscheinungsbild kreisrund */ .socialdock[data-appearance="true"][data-round-icononly="true"] :not([data-labels="true"]):not([data-hoverlabel="true"]) .sd-btn { border-radius: 50%; } /* Mini-Zeile: edel, freundlich, sehr kompakt */ .sd-item-mini{ --sd-brand:#6c757d; /* Fallback Brand */ --sd-bg:#f6f8fc; /* freundliches Hell */ --sd-bd:#e6ecf5; /* sanfte Linie */ --sd-fg:#243449; /* statt Schwarz: edles Slate */ --sd-badge-bg-share:#eef3ff; --sd-badge-fg-share:#2a5bd7; --sd-badge-bd-share:#e2e9ff; --sd-badge-bg-link:#e8f7f1; --sd-badge-fg-link:#0b7b54; --sd-badge-bd-link:#d6f2e7; display:flex; align-items:center; gap:8px; padding:4px 8px; margin:2px 0; border:0px solid var(--sd-bd); border-radius:4px; background:var(--sd-bg); color:var(--sd-fg); font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif; font-size:12px; line-height:1.2; max-width:100%; } .sd-item-mini .sd-dot{ width:8px; height:8px; border-radius:50%; background:var(--sd-brand); flex:0 0 auto; } .sd-item-mini .sd-badge{ font-size:10px; font-weight:700; padding:2px 6px; border-radius:999px; border:1px solid var(--sd-bd); } .sd-item-mini.is-share .sd-badge{ background:var(--sd-badge-bg-share); color:var(--sd-badge-fg-share); border-color:var(--sd-badge-bd-share); } .sd-item-mini.is-link .sd-badge{ background:var(--sd-badge-bg-link); color:var(--sd-badge-fg-link); border-color:var(--sd-badge-bd-link); } .sd-item-mini .sd-text{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0; } /* Service-Namen hübsch anzeigen: - wenn kein Label gesetzt ist, erzeugen wir Text via ::after - Standard: capitalize - Ausnahmen (YouTube, Hacker News, LINE, VK, Web Share, etc.) */ .sd-item-mini .sd-svc::after{ content: attr(data-svc); text-transform: capitalize; letter-spacing:.2px; } /* Ausnahmen/Mappings auf echte Markennamen */ .sd-item-mini.sd--youtube .sd-svc::after{ content:"YouTube"; } .sd-item-mini.sd--hn .sd-svc::after{ content:"Hacker News"; } .sd-item-mini.sd--line .sd-svc::after{ content:"LINE"; } .sd-item-mini.sd--vk .sd-svc::after{ content:"VK"; } .sd-item-mini.sd--xing .sd-svc::after{ content:"XING"; } .sd-item-mini.sd--webshare .sd-svc::after{ content:"Web Share"; } .sd-item-mini.sd--x .sd-svc::after{ content:"X"; } /* Dark-Mode (freundlich, nicht pechschwarz) */ @media (prefers-color-scheme: dark){ .sd-item-mini{ --sd-bg:#818c9f; --sd-bd:#243449; --sd-fg:#e7ecf3; --sd-badge-bg-share:#11203f; --sd-badge-fg-share:#9fb6ff; --sd-badge-bd-share:#1a2a4a; --sd-badge-bg-link:#0f221b; --sd-badge-fg-link:#86d6b7; --sd-badge-bd-link:#153428; } } /* Brandfarbe nach Dienst (nur Variable setzen, dezente Dot-Farbe) */ .sd-item-mini.sd--x{--sd-brand:#111} .sd-item-mini.sd--facebook{--sd-brand:#1877f2} .sd-item-mini.sd--linkedin{--sd-brand:#0a66c2} .sd-item-mini.sd--whatsapp{--sd-brand:#25d366} .sd-item-mini.sd--telegram{--sd-brand:#24a1de} .sd-item-mini.sd--pinterest{--sd-brand:#e60023} .sd-item-mini.sd--mail,.sd-item-mini.sd--copy,.sd-item-mini.sd--print,.sd-item-mini.sd--webshare{--sd-brand:#6c757d} .sd-item-mini.sd--threads{--sd-brand:#000} .sd-item-mini.sd--bluesky{--sd-brand:#1185fe} .sd-item-mini.sd--reddit{--sd-brand:#ff4500} .sd-item-mini.sd--hn{--sd-brand:#ff6600} .sd-item-mini.sd--pocket{--sd-brand:#ef4056} .sd-item-mini.sd--flipboard{--sd-brand:#e12828} .sd-item-mini.sd--vk{--sd-brand:#4c75a3} .sd-item-mini.sd--line{--sd-brand:#00c300} .sd-item-mini.sd--weibo{--sd-brand:#e6162d} .sd-item-mini.sd--xing{--sd-brand:#026466} .sd-item-mini.sd--mastodon{--sd-brand:#6364ff} /* Link-Only & generisch */ .sd-item-mini.sd--instagram{--sd-brand:#E1306C} .sd-item-mini.sd--youtube{--sd-brand:#f00} .sd-item-mini.sd--tiktok{--sd-brand:#000} .sd-item-mini.sd--github{--sd-brand:#24292e} .sd-item-mini.sd--website,.sd-item-mini.sd--external{--sd-brand:#6c757d} /* Auto-Label: Service-Namen hübsch darstellen, wenn kein eigenes Label gesetzt ist */ .sd-preview .sd-auto-label::after{ content: attr(data-svc); text-transform: capitalize; letter-spacing: .2px; } /* Ausnahmen für Markennamen */ .sd-preview .sd-btn.sd-youtube .sd-auto-label::after{ content: "YouTube"; } .sd-preview .sd-btn.sd-hn .sd-auto-label::after{ content: "Hacker News"; } .sd-preview .sd-btn.sd-line .sd-auto-label::after{ content: "LINE"; } .sd-preview .sd-btn.sd-vk .sd-auto-label::after{ content: "VK"; } .sd-preview .sd-btn.sd-xing .sd-auto-label::after{ content: "XING"; } .sd-preview .sd-btn.sd-webshare .sd-auto-label::after{ content: "Web Share"; } .sd-preview .sd-btn.sd-x .sd-auto-label::after{ content: "X"; } /* Kompakter machen, damit die Zeile wenig Platz braucht (ohne die Parent-Optik zu brechen) */ .sd-preview .sd-btn{ padding: 6px 10px; /* etwas schlanker */ gap: 6px; /* engerer Abstand Icon/Label */ font-size: 13px; /* kompakt, aber lesbar */ } .sd-preview .sd-ic { font-size: 1.2em; } /* Icon etwas kleiner im Edit */ /* Legenden-Container kompakt lassen */ .sd-edit-inline{ display:flex; align-items:center; gap:8px; max-width:100%; } /* Button im Editor kompakt */ .sd-preview .sd-btn{ padding:4px 8px; gap:6px; font-size:12px; } .sd-preview .sd-ic { font-size:1.1em; } /* Kleine Legende: „Share/Link · Service“ */ .sd-edit-legend{ --fg:#2a394d; --bd:#e6ecf5; --bg:#f6f8fc; --fgShare:#2a394d; /* vorher fast weiß → schlechte Lesbarkeit */ --fgLink:#0b7b54; display:inline-flex; align-items:center; gap:4px; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif; font-size:11px; line-height:1.1; color:var(--fg); padding:2px 6px; border:1px solid var(--bd); border-radius:8px; background:var(--bg); white-space:nowrap; max-width:100%; } .sd-edit-legend .sd-legend-mode{ font-weight:700; /* Modus-Farbe */ } .sd-edit-legend.is-share .sd-legend-mode{ color:var(--fgShare); } .sd-edit-legend.is-link .sd-legend-mode{ color:var(--fgLink); } .sd-edit-legend .sd-legend-sep{ opacity:.5; } /* 👉 Dienst-Name: etwas größer & fett, damit er sofort erkennbar ist */ .sd-edit-legend .sd-legend-svc{ font-size:11px; font-weight:700; overflow:hidden; text-overflow:ellipsis; max-width:32ch; text-transform:capitalize; /* hübscher als alles klein */ } /* 👉 Falls KEIN Label im HTML steht, nimm data-svc als Fallback-Text */ .sd-edit-legend .sd-legend-svc:empty::after{ content: attr(data-svc); text-transform: capitalize; letter-spacing:.2px; } /* Markennamen-Sonderfälle für den Fallback-Text */ .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="youtube"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="youtube"]::after{ content:"YouTube"; } .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="hn"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="hn"]::after{ content:"Hacker News"; } .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="line"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="line"]::after{ content:"LINE"; } .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="vk"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="vk"]::after{ content:"VK"; } .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="xing"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="xing"]::after{ content:"XING"; } .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="webshare"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="webshare"]::after{ content:"Web Share"; } .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="x"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="x"]::after{ content:"X"; }/* Mini-Zeile: edel, freundlich, sehr kompakt */ .sd-item-mini{ --sd-brand:#6c757d; /* Fallback Brand */ --sd-bg:#f6f8fc; /* freundliches Hell */ --sd-bd:#e6ecf5; /* sanfte Linie */ --sd-fg:#243449; /* statt Schwarz: edles Slate */ --sd-badge-bg-share:#eef3ff; --sd-badge-fg-share:#2a5bd7; --sd-badge-bd-share:#e2e9ff; --sd-badge-bg-link:#e8f7f1; --sd-badge-fg-link:#0b7b54; --sd-badge-bd-link:#d6f2e7; display:flex; align-items:center; gap:8px; padding:4px 8px; margin:2px 0; border:0px solid var(--sd-bd); border-radius:4px; background:var(--sd-bg); color:var(--sd-fg); font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif; font-size:12px; line-height:1.2; max-width:100%; } .sd-item-mini .sd-dot{ width:8px; height:8px; border-radius:50%; background:var(--sd-brand); flex:0 0 auto; } .sd-item-mini .sd-badge{ font-size:10px; font-weight:700; padding:2px 6px; border-radius:999px; border:1px solid var(--sd-bd); } .sd-item-mini.is-share .sd-badge{ background:var(--sd-badge-bg-share); color:var(--sd-badge-fg-share); border-color:var(--sd-badge-bd-share); } .sd-item-mini.is-link .sd-badge{ background:var(--sd-badge-bg-link); color:var(--sd-badge-fg-link); border-color:var(--sd-badge-bd-link); } .sd-item-mini .sd-text{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0; } /* Service-Namen hübsch anzeigen: - wenn kein Label gesetzt ist, erzeugen wir Text via ::after - Standard: capitalize - Ausnahmen (YouTube, Hacker News, LINE, VK, Web Share, etc.) */ .sd-item-mini .sd-svc::after{ content: attr(data-svc); text-transform: capitalize; letter-spacing:.2px; } /* Ausnahmen/Mappings auf echte Markennamen */ .sd-item-mini.sd--youtube .sd-svc::after{ content:"YouTube"; } .sd-item-mini.sd--hn .sd-svc::after{ content:"Hacker News"; } .sd-item-mini.sd--line .sd-svc::after{ content:"LINE"; } .sd-item-mini.sd--vk .sd-svc::after{ content:"VK"; } .sd-item-mini.sd--xing .sd-svc::after{ content:"XING"; } .sd-item-mini.sd--webshare .sd-svc::after{ content:"Web Share"; } .sd-item-mini.sd--x .sd-svc::after{ content:"X"; } /* Dark-Mode (freundlich, nicht pechschwarz) */ @media (prefers-color-scheme: dark){ .sd-item-mini{ --sd-bg:#818c9f; --sd-bd:#243449; --sd-fg:#e7ecf3; --sd-badge-bg-share:#11203f; --sd-badge-fg-share:#9fb6ff; --sd-badge-bd-share:#1a2a4a; --sd-badge-bg-link:#0f221b; --sd-badge-fg-link:#86d6b7; --sd-badge-bd-link:#153428; } } /* Brandfarbe nach Dienst (nur Variable setzen, dezente Dot-Farbe) */ .sd-item-mini.sd--x{--sd-brand:#111} .sd-item-mini.sd--facebook{--sd-brand:#1877f2} .sd-item-mini.sd--linkedin{--sd-brand:#0a66c2} .sd-item-mini.sd--whatsapp{--sd-brand:#25d366} .sd-item-mini.sd--telegram{--sd-brand:#24a1de} .sd-item-mini.sd--pinterest{--sd-brand:#e60023} .sd-item-mini.sd--mail,.sd-item-mini.sd--copy,.sd-item-mini.sd--print,.sd-item-mini.sd--webshare{--sd-brand:#6c757d} .sd-item-mini.sd--threads{--sd-brand:#000} .sd-item-mini.sd--bluesky{--sd-brand:#1185fe} .sd-item-mini.sd--reddit{--sd-brand:#ff4500} .sd-item-mini.sd--hn{--sd-brand:#ff6600} .sd-item-mini.sd--pocket{--sd-brand:#ef4056} .sd-item-mini.sd--flipboard{--sd-brand:#e12828} .sd-item-mini.sd--vk{--sd-brand:#4c75a3} .sd-item-mini.sd--line{--sd-brand:#00c300} .sd-item-mini.sd--weibo{--sd-brand:#e6162d} .sd-item-mini.sd--xing{--sd-brand:#026466} .sd-item-mini.sd--mastodon{--sd-brand:#6364ff} /* Link-Only & generisch */ .sd-item-mini.sd--instagram{--sd-brand:#E1306C} .sd-item-mini.sd--youtube{--sd-brand:#f00} .sd-item-mini.sd--tiktok{--sd-brand:#000} .sd-item-mini.sd--github{--sd-brand:#24292e} .sd-item-mini.sd--website,.sd-item-mini.sd--external{--sd-brand:#6c757d} /* Auto-Label: Service-Namen hübsch darstellen, wenn kein eigenes Label gesetzt ist */ .sd-preview .sd-auto-label::after{ content: attr(data-svc); text-transform: capitalize; letter-spacing: .2px; } /* Ausnahmen für Markennamen */ .sd-preview .sd-btn.sd-youtube .sd-auto-label::after{ content: "YouTube"; } .sd-preview .sd-btn.sd-hn .sd-auto-label::after{ content: "Hacker News"; } .sd-preview .sd-btn.sd-line .sd-auto-label::after{ content: "LINE"; } .sd-preview .sd-btn.sd-vk .sd-auto-label::after{ content: "VK"; } .sd-preview .sd-btn.sd-xing .sd-auto-label::after{ content: "XING"; } .sd-preview .sd-btn.sd-webshare .sd-auto-label::after{ content: "Web Share"; } .sd-preview .sd-btn.sd-x .sd-auto-label::after{ content: "X"; } /* Kompakter machen, damit die Zeile wenig Platz braucht (ohne die Parent-Optik zu brechen) */ .sd-preview .sd-btn{ padding: 6px 10px; /* etwas schlanker */ gap: 6px; /* engerer Abstand Icon/Label */ font-size: 13px; /* kompakt, aber lesbar */ } .sd-preview .sd-ic { font-size: 1.2em; } /* Icon etwas kleiner im Edit */ /* Legenden-Container kompakt lassen */ .sd-edit-inline{ display:flex; align-items:center; gap:8px; max-width:100%; } /* Button im Editor kompakt */ .sd-preview .sd-btn{ padding:4px 8px; gap:6px; font-size:12px; } .sd-preview .sd-ic { font-size:1.1em; } /* Kleine Legende: „Share/Link · Service“ */ .sd-edit-legend{ --fg:#2a394d; --bd:#e6ecf5; --bg:#f6f8fc; --fgShare:#2a394d; /* vorher fast weiß → schlechte Lesbarkeit */ --fgLink:#0b7b54; display:inline-flex; align-items:center; gap:4px; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif; font-size:11px; line-height:1.1; color:var(--fg); padding:2px 6px; border:1px solid var(--bd); border-radius:8px; background:var(--bg); white-space:nowrap; max-width:100%; } .sd-edit-legend .sd-legend-mode{ font-weight:700; /* Modus-Farbe */ } .sd-edit-legend.is-share .sd-legend-mode{ color:var(--fgShare); } .sd-edit-legend.is-link .sd-legend-mode{ color:var(--fgLink); } .sd-edit-legend .sd-legend-sep{ opacity:.5; } /* 👉 Dienst-Name: etwas größer & fett, damit er sofort erkennbar ist */ .sd-edit-legend .sd-legend-svc{ font-size:11px; font-weight:700; overflow:hidden; text-overflow:ellipsis; max-width:32ch; text-transform:capitalize; /* hübscher als alles klein */ } /* 👉 Falls KEIN Label im HTML steht, nimm data-svc als Fallback-Text */ .sd-edit-legend .sd-legend-svc:empty::after{ content: attr(data-svc); text-transform: capitalize; letter-spacing:.2px; } /* Markennamen-Sonderfälle für den Fallback-Text */ .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="youtube"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="youtube"]::after{ content:"YouTube"; } .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="hn"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="hn"]::after{ content:"Hacker News"; } .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="line"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="line"]::after{ content:"LINE"; } .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="vk"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="vk"]::after{ content:"VK"; } .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="xing"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="xing"]::after{ content:"XING"; } .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="webshare"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="webshare"]::after{ content:"Web Share"; } .sd-edit-legend .sd-legend-svc:not([data-label])[data-svc="x"]::after, .sd-edit-legend .sd-legend-svc[data-label=""][data-svc="x"]::after{ content:"X"; }