.stvl { cursor: pointer; } .extrahovering { text-decoration: underline; } .extrahovering:hover { color: #c00; } .recommendation.has_no_box { border-bottom: 0px!important; } .alarmbuttons a.link-to-preisalarm { display: none!important; } @media screen and (max-width: 768px) { .produktbox-thumbnail .produktvergleich-sterne-amazon, .produktbox-thumbnail .produktvergleich-sterne-sterne, .produktbox-thumbnail .produktvergleich-sterne-count { display: none!important; } } .preisvergleich-meta-preisalarm, .produktbox-meta-buttons .alarmbuttons .link-to-preisalarm { display: none!important; } .preisvergleich-buttons { vertical-align: top; } /* Alte Produkte */ .outoforder .produktbox-container::before { content: ""; background: #ddd; position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; opacity: .6; z-index: 9; } .outoforder .produktbox-container { border-bottom-color: #bbb!important; } .outoforder .produktbox-container .produktbox-meta > hr { background-color: #bbb!important; color: transparent; } .outoforder .produktbox-container .produktbox-meta .produktbox-meta-buttons { z-index: 10; } .outoforder .produktbox-container .produktbox-meta .produktbox-meta-buttons:before { bottom: -160px; } .outoforder .produktbox-container .produktbox-meta .produktbox-meta-buttons .produktbox-meta-buttons-div .logo-price img { filter: grayscale(50%); opacity: .6; } .outoforder .produktbox-container .produktbox-meta .produktbox-meta-buttons .produktbox-meta-buttons-div .logo-price span { color: #999!important; } .outoforder .produktbox-container .produktbox-meta .produktbox-meta-buttons .produktbox-meta-buttons-div .empfehlung { background: #ccc!important; color: var(--color-max-dark); opacity: .6; } .outoforder .produktbox-container .produktbox-meta .produktbox-meta-buttons .produktbox-meta-buttons-div .empfehlung:hover { background-color: #999 !important; color: white; } .outoforder .produktbox-container .produktbox-meta .produktbox-meta-buttons .produktbox-meta-buttons-div .empfehlung:before, .outoforder .produktbox-container .produktbox-meta .produktbox-meta-buttons .produktbox-meta-buttons-div .empfehlung:after { background-color: #999!important; } /* Produktvergleich Sterne */ .produktvergleich-sterne-amazon { text-align: center; line-height: 16px; font-weight: 600; font-size: 17px; } .produktvergleich-sterne-sterne { margin: 5px 0; font-size: 14px; } .produktvergleich-sterne-sterne > .stars { flex-direction: row; display: flex; } .produktvergleich-sterne-sterne > .counts { font-size:12px; } .produktvergleich-sterne-sterne > .stars > .fa.star-fill-orange:before, .produktvergleich-sterne-sterne > .stars > .fa-star.star-empty:before { font-size: 24px; } /* Produktvergleich Tabelle */ .slick-slide:focus, .slick-slide:active { outline: 0; } .slick-list-overlay { position: fixed; z-index: 1000000000; height: 100vh; width: 100vw; background-color: transparent; top: 0; left: 0; } .tooltipp { position: fixed; z-index: 1000000002; top: 50%; left: 50%; min-width: 65%; max-width: 80%; max-height: 90%; overflow-y: auto; transform: translate(-50%, -50%); padding: 30px 0 0; display: flex; flex-direction: column; justify-content: center; align-items: center; background: var(--color-max-light); border: 1px solid #ddd; text-align: center; font-size: 18px; box-shadow: 0 2px 10px -3px rgba(0,0,0,.2); -moz-box-shadow: 0px 2px 10px -3px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 2px 10px -3px rgba(0, 0, 0, 0.2); counter-reset: section; } .tooltipp:before { width: 30px; height: 30px; line-height: 26px; font-size: 28px; left: 5px; top: 5px; position: absolute; color: var(--color-highlight); opacity: .15; text-shadow: 0px 2px 10px -3px rgba(0, 0, 0, 0.2); } .tooltipp > span { width: 100%; padding: 10px 25px 10px 45px; position: relative; } .tooltipp .tooltipp-close { position: absolute; z-index: 1000000003; top: 0; right: 0; width: 35px; height: 35px; padding: 0; color: var(--color-highlight); text-align: center; line-height: 35px; font-size: 26px; } .tooltipp .tooltipp-close:before { } .tooltipp .tooltipp-close:hover { cursor: pointer; } .tooltipp .tooltipp-close:focus, .tooltipp .tooltipp-close:active { outline: 0; } .tooltipp .tooltipp-merkmal { font-size: 20px; font-weight: 600; padding: 0 25px 10px 25px; border-bottom: 1px solid #ddd; } .tooltipp .geklickt { background-color: rgba(204, 0, 0, 0.05); } .tooltipp .tooltipp-titel { line-height: 16px; font-size: 16px; } .tooltipp .tooltipp-titel:before { position: absolute; top: calc(50% - 11px); left: 5px; counter-increment: section; content: counter(section); height: 22px; width: 22px; color: var(--color-highlight); border-radius: 11px; text-align: center; line-height: 22px; font-size: 30px; font-weight: 600; opacity: .5; transform: rotate(10deg); } .tooltipp .tooltipp-wert:before { position: absolute; bottom: 5px; left: 5px; height: 14px; width: 14px; color: var(--color-max-dark); border-radius: 11px; text-align: center; line-height: 12px; font-size: 14px; font-weight: 600; opacity: .2; transform: rotate(135deg); } .tooltipp .tooltipp-titel.geklickt:before { font-size: 35px; opacity: .8; } .tooltipp .tooltipp-wert { line-height: 16px; padding-bottom: 15px; padding-top: 0px; border-bottom: 1px dotted #ddd; font-weight: 500; } .tooltipp .tooltipp-wert:last-child { border-bottom: 0; } .pvgl-hinweis { position: absolute; bottom: 7px; left: 12px; width: 172px; } .pvgl-hinweis::after { content: "1 Preise inkl. MwSt, ggf. zzgl. Versand. Zwischenzeitliche Änderung der Preise, Lieferzeit & -kosten möglich."; position: absolute; bottom: 0; left: 0; font-size: 9px; line-height: 14px; font-weight: 300; } .produktvergleich-features td { background: #fffbfb; } .skala { margin: 0 auto; position: relative; top: 1px; } .skala > div { display: inline-block; width: 19px; height: 8px; border: 1px solid #3A7B7A2b; margin-right: 2px; } .skala > .actual::after { content: " "; display: block; top: -7px; left: 4px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #489998; position: relative; } .skala > .active { background-color: #489998; } @media screen and (max-width: 767px) and (min-width: 641px) { .skala > div { width: 15px; height: 6px; } .skala > .actual::after { left: 3px; } } @media screen and (max-width: 330px) { .skala > div { width: 15px; height: 6px; } .skala > .actual::after { left: 3px; } } .produktvergleich-features.faqs a, .produktvergleich-table-mobile tbody tr.faqs td a { border: 0px; color: var(--color-highlight); } .produktvergleich-features.faqs a:hover, .produktvergleich-table-mobile tbody tr.faqs td a:hover { color: red; } .fa-question-circle:before, .fa-info-circle:before { top: 6px!important; background-color: #3A7B7A!important; } [data-tooltip] { position: relative; z-index: 2; cursor: pointer; } [data-tooltip]::before { position: absolute; bottom: 150%; left: 50%; margin-bottom: 5px; margin-left: -80px; padding: 7px; width: 160px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: var(--color-max-dark); background-color: hsla(0, 0%, 20%, 0.9); color: var(--color-max-light); content: attr(data-tooltip); text-align: center; font-size: 14px; line-height: 1.2; } [data-tooltip]::before, [data-tooltip]::after { visibility: hidden; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; pointer-events: none; } [data-tooltip]:hover::before, [data-tooltip]:hover::after { visibility: visible; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } .wwa { position: absolute; top: -23px; left: -1px; font-size: 16px; line-height: 100%; width: 20%; } .wwa a { background: #ddd; color: var(--color-neutral-dim); padding: 3px 0 3px 10px; width: 100%; display: inline-block; -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom: 0px; } .wwa a span { padding-left: 5px; } .wwa a i:before { top: 2px; background-color: var(--color-neutral-dim); } .wwa:hover a { color: var(--color-neutral-dim); } .wwa:hover i { color: var(--color-highlight); } .wwv-anzeige { } .wwv-anzeige::after { content: "Anzeige"; position: absolute; top: -26px; right: 0px; font-size: 14px; font-weight: 600; z-index: 11; } @media screen and (max-width: 640px) { .wwv-anzeige::after { top: -6px; } } .produktvergleich-footer-banner { margin-top: 0em; margin-bottom: 1em; } .produktvergleich-footer-banner > * { text-align: center; } .produktvergleich-footer-banner .produktvergleich-footer-banner-breakpoints { display: none; } @media screen and (max-width: 767px) { .produktvergleich-footer-banner .produktvergleich-footer-banner-mobile { display: block; } #tipps-vergleich-suche #searchform input#searchsubmit { float: right; position: absolute; right: 0; left: inherit; } } @media screen and (min-width: 768px) { .comptable-footer-banner .comptable-footer-banner-desktop { display: block; } } @media screen and (max-width: 1110px) and (min-width: 1051px) { .produktvergleich-angebot a.empfehlung { font-size: 16px; } } @media screen and (max-width: 1050px) and (min-width: 961px) { .produktvergleich-angebot a.empfehlung { font-size: 16px; } } @media screen and (max-width: 960px) { .produktvergleich-angebot a.empfehlung { background-image: none; font-size: 18px; padding: 10px 0; } .pvgl-hinweis { display: none; } } @media screen and (max-width: 768px) { .wwa { top: -23px; } .wwv-anzeige:after { top: -25px; } .wwa a { font-size: 14px; padding: 5px; } .produktvergleich-container .wwa span { padding-left: 0px; } .produktvergleich-angebot a.empfehlung { font-size: 15px; } } @media screen and (max-width: 768px) and (min-width: 641px) { .produktvergleich-angebot a.empfehlung { padding: 6px 0; } } @media screen and (max-width: 960px) and (min-width: 641px) { .produktvergleich-angebot a.empfehlung:before, .produktvergleich-angebot a.empfehlung::after { display: none; } } @media screen and (max-width: 640px) { .wwa { width: 135px; left: 0px; top: -6px; } .wwv-anzeige:after { top: -6px; } .produktvergleich-container .wwa span { padding-left: 5px; } .produktvergleich-angebot { padding: 10px; } .produktvergleich-angebot span.empfehlung { font-size: 24px; text-align: center; padding: 10px 8px; } } /* Badge */ .produktvergleich-img-container.badge:after { display: none; } .produktbox-container.badge > span:before { content: ""; position: absolute; right: -33px; top: -4px; border-left: 12px solid #3A7B7A; border-top: transparent; border-right: 21px solid transparent; border-bottom: 36px solid transparent; width: 0; height: 0; } .produktbox-container.badge > span { position: absolute; top: 0; left: 0; background: #3A7B7A; padding: 6px 7px 5px 10px; color: var(--color-max-light); font-weight: 600; z-index: 1; font-size: 15px; line-height: 20px; } .produktbox-container.badge > span:before { content: ""; position: absolute; right: -33px; top: 0; border-left: 12px solid #3A7B7A; border-top: transparent; border-right: 21px solid transparent; border-bottom: 30px solid transparent; width: 0; height: 0; } .produktvergleich-img-container.badge span:first-child, .produktvergleich-mobile-image-container.badge span:first-child { position: absolute; top: 0; right: 0; background: var(--color-highlight); padding: 1px 8px 1px 5px; color: var(--color-max-light); max-height: 26px; } .produktvergleich-img-container.badge span:first-child:before, .produktvergleich-mobile-image-container.badge:first-child span:before { content: ""; position: absolute; left: -36px; top: 0; border-right: 12px solid var(--color-highlight); border-top: transparent; border-left: 24px solid transparent; border-bottom: 26px solid transparent; width: 0; height: 0; } .produktvergleich-mobile-image-container.badge span:first-child { padding: 2px 8px 2px 5px; max-height: 30px; font-size: 18px; } .produktvergleich-mobile-image-container.badge span:first-child:before { border-bottom-width: 28px; } @media screen and (max-width: 960px) { .produktvergleich-img-container.badge span { font-size: 15px; } } @media screen and (max-width: 800px) { .produktvergleich-img-container.badge span { font-size: 14px; padding-top: 0px; padding-bottom: 0px; } .produktvergleich-img-container.badge span:before { border-bottom-width: 24px; } } /* Deals */ .produktbox-container.badge-deal { border-bottom: 5px solid orange!important; } .produktvergleich-table tbody tr td.preisvergleich-buttons a span span.old-price, .produktvergleich-table-mobile tbody tr td.preisvergleich-buttons a span span.old-price, .produktbox-container .produktbox-meta .produktbox-meta-buttons .produktbox-meta-buttons-div span.logo-price span.deal-span span.old-price { position: absolute; right: 0px; top: -12px; font-size: 12px; text-decoration: line-through; width: 100%; } .products-with-deals .btn-deals { background: orange; padding: 10px 24px; color: white!important; text-decoration: none; font-size: 20px; display: inline-block; width: 100%; text-align: center; border: 0; font-weight: 600; } .products-with-deals .btn-deals:active, .products-with-deals .btn-deals:focus { outline: 0; } .products-with-deals .btn-deals:hover, .products-with-deals .btn-deals.active { background-color: #3A7B7A; color: var(--color-max-light); } .products-with-deals .btn-deals.active { position: relative; } .products-with-deals .btn-deals.active:before { content: "Anzeige"; top: -17px; position: absolute; right: 0; display: inline-block; line-height: 1; font-size: 15px; font-weight: 400; font-size: 12px; color: var(--color-max-dark); } .products-with-deals .btn-deals.active:hover { background-color: orange; } .products-with-deals-inside { max-width: 1088px; margin: 0 auto; } @media screen and (min-width:1530px) { .products-with-deals-inside::before { position: absolute; top: 30%; left: -200px; display: inline-block; width: 142px; height: 134px; content: ''; background: url(/wp-content/themes/tipps/images/deal-sichern.png) no-repeat center center; } } .products-with-deals-wrapper { display: none; width: auto!important; margin-right: -100%; margin-left: -100%; padding: 40px 0; background: #3A7B7A; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .products-with-deals-wrapper a { border: 0px; } .product-with-deal-image img { max-height: 189px; max-width: 189px!important; padding: 25px; background: var(--color-max-light); border-radius: 10px; text-align: center; position: relative; } .product-with-deal-rebate { position: absolute; top: 10px; right: -20px; font-weight: 600; border-radius: 250px; width: 80px; background: orange; height: 80px; text-align: center; line-height: 80px; color: var(--color-max-light); font-size: 22px; transform: rotate(15deg); } @media screen and (max-width:310px) { .product-with-deal-rebate { right: -10px; top: 5px; } } .product-img-wrapper { float: left; position: relative; max-width: 30% } .product-content-wrapper { float: left; margin-left: 34px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; max-width: 70%; } .product-with-deal-title a { color: var(--color-max-light); font-size: 34px; text-decoration: none; line-height: 35px; } .product-with-deal-title a:hover { color: var(--color-max-light); } .owl-carousel .owl-item img { width: inherit!important; } .product-btn-wrapper .product-deal-btn { display: inline-block; text-decoration: none; font-size: 20px; margin-top: 25px; display: inline-block; margin-right: 10px; cursor: pointer; font-weight: 400; height: 50px; padding: 10px 55px 10px 10px; color: var(--color-max-light); border: 0px; min-width: 220px; text-align: center; background: #ffb122; position: relative; text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2); line-height: 28px; } .product-btn-wrapper .product-deal-btn > i:before { top: 4px!important; } .product-btn-wrapper .product-deal-btn.product-btn-az:before, .product-btn-wrapper .product-deal-btn.product-btn-az:after { position: absolute; top: 0; right: 0; width: 45px; height: 100%; content: ""; transition: .2s; background: orange url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIzLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMiAzMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTIgMzI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTAsMzJsOC0xNkwwLDBoNGw4LDE2TDQsMzJIMHoiLz4KPC9zdmc+Cg==) no-repeat center center; background-size: 9px 24px; } .product-btn-wrapper .product-deal-btn.product-btn-az:hover { color: var(--color-max-light); background-color: orange; } .product-btn-wrapper .product-deal-btn.product-btn-az:hover:after { -webkit-animation: bounceright 0.3s alternate ease infinite; animation: bounceright 0.3s alternate ease infinite; } @media screen and (max-width:600px) { .product-btn-wrapper .product-deal-btn { width: 100%; margin: 10px 0; min-width: auto; } } .product-with-deal-title a::after { position: absolute; bottom: -10px; left: 0; display: inline-block; width: 150px; height: 5px; content: ''; background: var(--color-max-light); } .product-with-deal-title { position: relative; text-align: left; } .product-btn-wrapper .product-deal-btn + .product-deal-btn { margin-right: 0; } .product-btn-wrapper .product-deal-btn.product-btn-inside { background: var(--color-max-light); color:#1f1d1d; transition: all .1s ease-in-out; padding: 10px; } .product-btn-wrapper .product-deal-btn.product-btn-inside:hover { transform: scale(1.01); } .product-with-deal-price { color: var(--color-max-light); font-size: 34px; position: relative; line-height: 1; } .product-price-wrapper { margin-top: 35px; position: relative; display: flex; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .product-with-deal-oldPrice { color: var(--color-max-light); margin-left: 5px; position: relative; } .products-with-deals-inside { position: relative; } @media screen and (min-width:1500px) { .products-with-deals-inside::bfore { position: absolute; top: 30%; left: -200px; display: inline-block; width: 142px; height: 134px; content: ''; background: url(/wp-content/themes/tipps/images/deal-sichern.png) no-repeat center center; } } @media screen and (max-width:1184px) { .products-with-deals-wrapper { margin: 0 !important; padding: 25px 40px; box-sizing: border-box; } .product-content-wrapper { max-width: calc(70% - 40px); } .products-with-deals .owl-theme .owl-dots { position: relative!important; } .products-with-deals .owl-theme .owl-nav .owl-prev { left: -37px!important; } .products-with-deals .owl-theme .owl-nav .owl-next { right: -37px!important; } } @media screen and (max-width:700px) { .product-content-wrapper { max-width: 100%; } .product-price-wrapper { justify-content: center; } .product-with-deal-image { display: inline-block; } .product-img-wrapper { float: none; text-align: center; display: inline-block; } .product-with-deal--inside { text-align: center; } .product-content-wrapper { max-width: 100%; margin: 15px 0 0 0; } } @media screen and (max-width:600px) { .product-img-wrapper { max-width: 100%; } } @media screen and (max-width:500px) { .products-with-deals-wrapper { padding: 25px; } .product-price-wrapper { flex-direction: column; } .product-btn-wrapper .product-deal-btn { font-size: 20px; } .product-with-deal-oldPrice { position: relative; top: 0; right: 0; margin: 0 auto; text-align: center; } .product-btn-wrapper .product-deal-btn > i::before { top: 4px!important; } } @media screen and (max-width:330px) { .products-with-deals-wrapper { padding: 25px 15px; } } .products-with-deals .owl-theme .owl-nav { margin-top: 0px; text-align: center; -webkit-tap-highlight-color: transparent; position: absolute; top: 35%; width: 100%; pointer-events: none; } .products-with-deals .owl-theme .owl-nav .owl-prev { position: absolute; left: -40px; pointer-events: auto; } .products-with-deals .owl-theme .owl-nav .owl-prev::before { content: "\2039"; } .products-with-deals .owl-theme .owl-nav .owl-next { position: absolute; right: -40px; pointer-events: auto; } .products-with-deals .owl-theme .owl-nav .owl-next::before { content: "\203a"; } .products-with-deals .owl-theme .owl-nav [class*="owl-"] { color: var(--color-max-light); font-size: 55px; display: inline-block; cursor: pointer; line-height: 1; } .products-with-deals .owl-theme .owl-nav [class*='owl-']:hover { color: orange; } .products-with-deals .owl-theme .owl-nav .disabled { opacity: 0.5; cursor: default; } @media screen and (max-width:700px) { .product-content-wrapper { float: none; } .product-with-deal-title { text-align: center; } .product-with-deal-title a::after { left: 0; right: 0; margin-left: auto; margin-right: auto; } } @media screen and (max-width:634px) { .product-with-deal-title a { font-size: 30px; } } .products-with-deals .owl-theme .owl-dots { margin-top: 15px; } .produktbox-container.badge-deal::before { position: absolute; top: 0; right: 0; width: 116px; height: 116px; content: ''; pointer-events: none; background: url(/wp-content/themes/tipps/images/deal.svg) no-repeat center center !important; background-size: auto; z-index: 10; pointer-events: none; background-size: 160px !important; } .produktbox-container.badge-deal .produktbox-meta .produktbox-meta-buttons .produktbox-meta-buttons-div span.empfehlung { background-color: orange; transition: all .2s ease-in-out; } .produktbox-container.badge-deal .produktbox-meta .produktbox-meta-buttons .produktbox-meta-buttons-div span.empfehlung:after, .produktbox-container.badge-deal .produktbox-meta .produktbox-meta-buttons .produktbox-meta-buttons-div span.empfehlung:before { background-color: #ffb122; } .produktbox-container.badge-deal .produktbox-meta .produktbox-meta-buttons .produktbox-meta-buttons-div span.empfehlung:hover { background-color: #ffb122; } /* Produkt TOC */ .inhaltsverzeichnis-box { background: var(--color-max-light); box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px; position: relative; } .inhaltsverzeichnis-box .inhaltsverzeichnis-box-inside { display: flex; } .inhaltsverzeichnis-box .inhaltsverzeichnis-box-left { width: 65%; padding: 1.2rem 0; background: #f9f9f9; border: 10px solid white; box-sizing: border-box; position: relative; overflow: hidden; } .inhaltsverzeichnis-box .inhaltsverzeichnis-box-left::after { background: url('data:image/svg+xml;utf8, ') no-repeat center center; background-size: auto; position: absolute; display: flex; content: ""; height: 190px; width: 190px; background-size: 200px; z-index: 999; right: -22px; opacity: 0.08; z-index: 0; pointer-events: none; transform: rotate(10deg); top: -10px; } .inhaltsverzeichnis-box .inhaltsverzeichnis-box-right { width: 35%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; flex-direction: column; padding: 1.5rem; background: #E9F0F0;; position: relative; overflow: hidden; } .inhaltsverzeichnis-box .inhaltsverzeichnis-box-right::after { /* background: url('data:image/svg+xml;utf8, ') no-repeat center center; */ background: url('../img/icon-white.png') no-repeat center center; background-size: auto; background-size: auto; position: absolute; display: flex; content: ""; height: 180px; width: 180px; background-size: 180px; z-index: 999; opacity: 0.5; right: 0; pointer-events: none; transform: rotate(15deg); top: -15px; right: -20px; margin: 0 auto; z-index: 1; } .inhaltsverzeichnis-box .inhaltsverzeichnis-box-left.fa.fa-list-ul::before { content: ""; display: none; } .inhaltsverzeichnis-box .inhaltsverzeichnis-box-left .inhaltsverzeichnis.inhaltsverzeichnis-volle-breite { margin: 0; padding: 0; width: 100%; z-index: 1; box-shadow: none; height: 100% !important; background: none; display: flex; flex-direction: column; } .inhaltsverzeichnis p.toc_title::before { content: ""; background: url('data:image/svg+xml;utf8, ') no-repeat center center; background-size: auto; background-size: auto; height: 30px; width: 30px; background-size: 30px; display: inline-flex; margin-right: 0.5rem; } .inhaltsverzeichnis-box .inhaltsverzeichnis .toggle-toc::after { content: ""; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! --%3E%3Cpath d='M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z'/%3E%3C/svg%3E") no-repeat center center; background-size: auto; background-size: auto; width: 30px; height: 30px; border-radius: 100px; padding: .45rem; background-size: 12px; display: inline-flex; margin: 0 0 0 .8rem; box-shadow: 0 2px 15px rgba(0,0,0,.15); flex-shrink: 0; } .inhaltsverzeichnis-box .inhaltsverzeichnis .toggle-toc::before { content: ""; height: 1px; width: 100%; top: 1px; background: #b7b7b7; margin-right: 2rem; } .inhaltsverzeichnis-box .inhaltsverzeichnis .toggle-toc:hover::after { content: ""; background: #3A7B7A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 448 512'%3E%3C!--! --%3E%3Cpath d='M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z'/%3E%3C/svg%3E") no-repeat center center; background-size: auto; background-size: auto; width: 30px; height: 30px; border-radius: 100px; padding: .45rem; background-size: 12px; display: inline-flex; margin: 0 0 0 .8rem; box-shadow: 0 2px 15px rgba(0,0,0,.15); } .inhaltsverzeichnis-box .inhaltsverzeichnis .toggle-toc.active::after { transform:rotate(180deg); } .inhaltsverzeichnis-box.fa.fa-star::after { display: none; } .inhaltsverzeichnis-box .inhaltsverzeichnis ul li .toc_number.toc_depth_1 { background: #3A7B7A; color: white; display: inline-flex; justify-content: center; align-items: center; width: 16px; height: 16px; font-size: 12.5px; line-height: 1; } .inhaltsverzeichnis-box .inhaltsverzeichnis ul li ul { margin: 0 0 0 5px; } .inhaltsverzeichnis-box .inhaltsverzeichnis .toggle-toc { line-height: 1; display: flex; align-items: center; color: #000; line-height: 1.15; font-size: 16px; z-index: 9; padding: 0 2rem; } .inhaltsverzeichnis-box .inhaltsverzeichnis .toggle-toc strong { background: none; border: none; padding: 0; position: relative; display: flex; align-items: center; flex-shrink: 0; font-weight: 600; text-decoration: none; font-size: 0.9rem; } .inhaltsverzeichnis-box .inhaltsverzeichnis ul li ul li { margin: 0; line-height: 19px !important; } .inhaltsverzeichnis > ul > li > a span.toc_number { margin-left: -23px; margin-right: 4px; } .inhaltsverzeichnis-box .inhaltsverzeichnis ul li + li { margin-top: 0.5rem; line-height: 20px !important; } .inhaltsverzeichnis-box.fa.fa-star::before { display: none; } .inhaltsverzeichnis-box .toc_list { margin-top: 0; padding: 0 2rem; position: relative; } .inhaltsverzeichnis.inhaltsverzeichnis-volle-breite.active .toc_list { margin-bottom: 20px; } .inhaltsverzeichnis.inhaltsverzeichnis-volle-breite .toc_list > li > a { line-height: 1.3; padding-left: 5px; } .inhaltsverzeichnis-box .inhaltsverzeichnis:not(.active) .toc_list::before { background: linear-gradient(180deg, rgba(248,248,248,0) 0%, rgb(248, 248, 248) 100%); content: ""; bottom: 0; left: 0; right: 0; position: absolute; height: 60px; z-index: 999; pointer-events: none; } .inhaltsverzeichnis-box .inhaltsverzeichnis p.toc_title { margin-bottom: 20px; margin-top: 0; display: flex; align-items: center; color:#3A7B7A; font-size: 22px; font-weight: 600; } .inhaltsverzeichnis-box .inhaltsverzeichnis p.toc_title::after { display: none; } .inhaltsverzeichnis-box .inhaltsverzeichnis p.toc_title { margin-bottom: 20px; position: relative; z-index: 2; margin-top: 0; } .inhaltsverzeichnis-box .inhaltsverzeichnis-box-right .post-ratings { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; position: relative; z-index: 2; margin-top: 15px; text-align: center; } .inhaltsverzeichnis-box .inhaltsverzeichnis-box-right .chart span:nth-child(2n) { background: #3A7B7A; color: #fff; display: inline-flex; line-height: 1; padding: 2px 7px; border-radius: 3px; text-align: center; } .inhaltsverzeichnis-box .inhaltsverzeichnis-box-right .chart { width: 100%; font-size: 14px; font-weight: 500; margin-top: 10px; } .inhaltsverzeichnis-box .inhaltsverzeichnis-box-right .date-modified { font-size: 12px; display: flex; justify-content: center; z-index: 2; position: relative; line-height: 1; } .inhaltsverzeichnis-box .inhaltsverzeichnis-box-right .date-modified strong { font-weight: 400; } .inhaltsverzeichnis-box .inhaltsverzeichnis-box-right .inhaltsverzeichnis-box-right-headline { display: flex; justify-content: center; text-align: center; font-size: 24px; font-weight: 500; line-height: 1.1; max-width: 270px; margin: 0 auto; z-index: 2; position: relative; } .inhaltsverzeichnis-box .inhaltsverzeichnis-box-right .sozial .social { background: #f9f9f9; border: none; box-shadow: none; position: relative; display: flex; align-items: center; justify-content: center; } .inhaltsverzeichnis-box .inhaltsverzeichnis-box-right .sozial .social .icon { display: flex; align-items: center; justify-content: center; color: #000; } .inhaltsverzeichnis-box .inhaltsverzeichnis-box-right .sozial .social svg { width: 28px; height: 28px; } .inhaltsverzeichnis-box .inhaltsverzeichnis-box-right .sozial .social.icon--fb:hover svg { fill:#4267B2; } .inhaltsverzeichnis-box .inhaltsverzeichnis-box-right .sozial .social.icon--whatsapp:hover svg { fill:#25D366; } .inhaltsverzeichnis-box .inhaltsverzeichnis-box-right .sozial .social.icon--telegram:hover svg { fill:#2AABEE; } .inhaltsverzeichnis-box .inhaltsverzeichnis-box-right .sozial .social.icon--link:hover svg, .inhaltsverzeichnis-box .inhaltsverzeichnis-box-right .sozial .social.icon--mail:hover svg { fill:#3A7B7A; } .inhaltsverzeichnis-box .inhaltsverzeichnis-box-right .sozial .social:hover { transform: none; animation: none; } @media screen and (min-width:801px) and (max-width:1250px) { .sozial { justify-content: flex-start; } .inhaltsverzeichnis-box .inhaltsverzeichnis-box-right .sozial .social { margin-bottom: 10px; } } @media screen and (max-width:800px) { .inhaltsverzeichnis-box .inhaltsverzeichnis-box-left, .inhaltsverzeichnis-box .inhaltsverzeichnis-box-right { width: 100%; } .inhaltsverzeichnis-box .inhaltsverzeichnis-box-inside { flex-direction: column; } .inhaltsverzeichnis-box .inhaltsverzeichnis-box-right .sozial .social svg { width: 20px; height: 20px; } .inhaltsverzeichnis-box .inhaltsverzeichnis:not(.active) .toc_list::before { filter: blur(15px); } [data-tooltip]::before { font-size: 12px!important; font-weight: 500!important; width: 60px!important; margin-left: -37px!important; line-height: 1!important; } .inhaltsverzeichnis-box .inhaltsverzeichnis .toggle-toc { } .inhaltsverzeichnis-box .inhaltsverzeichnis-box-right .sozial .social { margin: 5px 5px 0; width:100%; } .inhaltsverzeichnis-box .inhaltsverzeichnis-box-right .sozial { justify-content: space-between; flex-wrap: nowrap; width: 100%; } } @media screen and (max-width:500px) { .inhaltsverzeichnis-box .inhaltsverzeichnis-box-left { padding: 2rem 0; } .inhaltsverzeichnis-box .inhaltsverzeichnis .toggle-toc { padding: 0 2rem; } .inhaltsverzeichnis ul.toc_list { padding: 0 2rem; } } .inhaltsverzeichnis-box [data-tooltip] { position: relative; z-index: 2; cursor: pointer; } .inhaltsverzeichnis-box [data-tooltip]:after, .inhaltsverzeichnis-box [data-tooltip]:before { visibility: hidden; opacity: 0; pointer-events: none; } .inhaltsverzeichnis-box [data-tooltip]::before { font-family: fact-variable, Arial, Helvetica, sans-serif!important; position: absolute; bottom: 100%; left: 50%; margin-bottom: 5px; margin-left: -66px; padding: 7px; width: 120px; border-radius: 2px; background-color: #787878; color: #fff; content: attr(data-tooltip); text-align: center; font-size: 10px; font-weight: bold; text-decoration: none; display: flex; justify-content:center; } .inhaltsverzeichnis-box [data-tooltip]:after { position: absolute; bottom: 100%; left: 50%; margin-left: -5px; width: 0; border-top: 5px solid #787878; border-right: 5px solid transparent; border-left: 5px solid transparent; content: " "; font-size: 0; line-height: 0; } .inhaltsverzeichnis-box [data-tooltip]:hover:after, .inhaltsverzeichnis-box [data-tooltip]:hover:before { visibility: visible; opacity: 1; } /* Produktboxen */ .produktbox-container { box-shadow: 0px 2px 10px -3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 10px -3px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 2px 10px -3px rgba(0, 0, 0, 0.2); display: flex; flex-wrap: wrap; justify-content: space-evenly; position: relative; margin: 20px 0 30px; border: 1px solid #ddd; background: var(--color-max-light); } .produktbox-container-1:before { position: absolute; top: 0; right: 0; width: 116px; height: 116px; content: ''; pointer-events: none; background: url(/wp-content/themes/tipps/images/topseller.png); z-index: 1; } .produktbox-container a { border: 0; } .produktbox-container::after { content: "Affiliate-Link*"; position: absolute; top: 0; right: 4px; font-size: 10px; font-weight: 400; } .produktbox-container.is-inclusion::after { content: 'Affiliate-Link*/Werbung'; } .produktbox-container > .spacer { width: 1px; margin: 20px 0; position: relative; border: 1px dashed #bbb; } .produktbox-thumbnail { width: auto; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; align-self: center; min-height: 150px; padding: 30px 0; } .produktbox-thumbnail span.stvc img { max-height: 300px; max-width: 170px; vertical-align: middle; display: table-cell; } .srpung-container { width: 100%; display: flex; justify-content: center; position: absolute; bottom: -23px; } .srpung-container .sprung { padding: 3px 10px; background: #dfdfdf; color: black; font-size: 13px; z-index: 2; position: relative; margin-bottom: 10px; text-decoration: none; display: flex; align-items: center; box-shadow: 0px 2px 10px -3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 10px -3px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 2px 10px -3px rgba(0, 0, 0, 0.2); } .srpung-container .sprung:hover { cursor: pointer; } .srpung-container .sprung:after { content: ""; background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! --%3E%3Cpath d='M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z'/%3E%3C/svg%3E") no-repeat center center; background-size: auto; width: 12px; height: 12px; border-radius: 100px; padding: 0.45rem; background-size: 8px!important; display: inline-flex; margin: 0 0 0 10px; } .srpung-container .sprung:hover:after { background: #3A7B7A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='white' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") no-repeat center center; } .produktbox-meta { //background: #f7f7f7; width: auto; min-height: 250px; position: relative; } .produktbox-meta2 { width: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .produktbox-meta2 .schulnote .wert { font-size: 14px; text-align: center; } .produktbox-meta2 .schulnote .datum .trenn { height: auto; } .produktbox-meta2 > .badge { font-size: 24px; font-weight: 600; margin-bottom: 20px; } .produktbox-meta-name { display: block; font-size: 20px; width: 100%; padding: 15px 95px 5px 90px; text-align: left; position: relative; font-weight: 800; } .produktbox-meta > hr { margin: 0 90px; background-color: #489998; height: 4px; border: 0; color: transparent; } .produktbox-container.badge-deal div.produktbox-meta hr.hr.article__hr { background-color: orange; } .produktbox-container.badge-deal div.produktbox-meta:after { color: orange; } .produktbox-meta-buttons { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .produktbox-meta-buttons-div, .produktbox-meta-buttons-div span img, .produktbox-meta-buttons-div span span { -webkit-transition: 0.2s ease all; -o-transition: 0.2s ease all; transition: 0.2s ease all; } .produktbox-meta-buttons-div:hover span img, .produktbox-meta-buttons-div:hover span span, .produktbox-meta-buttons-div:hover span.empfehlung { -webkit-transform: scale(1.015); -ms-transform: scale(1.015); transform: scale(1.015); } .produktbox-meta-buttons-div:hover span.empfehlung:after { -webkit-animation: bounceright 0.3s alternate ease infinite; animation: bounceright 0.3s alternate ease infinite; } .produktbox-meta-buttons-div { display: flex; margin-bottom: 10px; background: white; width: fit-content; } .produktbox-meta-buttons-div .stvc:first-child { display: flex; align-items: center; justify-content: space-around; } .produktbox-meta-buttons-div .logo { display: flex; justify-content: center; align-items: center; padding: 2px 10px; margin-right: -1px; border: 1px solid #ddd; } .produktbox-meta-buttons-div .logo img { height: auto; width: 81px; padding: 2px 5px; background: var(--color-max-light); } .produktbox-meta-buttons-div .stvc span { font-size: 16px; line-height: 1em; text-align: center; position: relative; text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2); } .produktbox-meta-buttons-div .stvc.empfehlung span:after { content: '1*'; font-size: 10px; position: relative; top: -0.8em; left: 0.2em; } .produktbox-meta-buttons-div .stvc.empfehlung { padding: 13px 60px 10px 15px; width: 200px; text-align: center; } @media screen and (max-width: 768px) { .produktbox-container.badge > span { font-size: 14px; padding: 3px 7px 2px 10px; } .produktbox-container.badge > span::before { border-bottom: 25px solid transparent; } .produktbox-meta { min-height: 220px; } .produktbox-thumbnail span.stvc img { max-height: 260px; max-width: 130px; } .produktbox-meta-buttons-div > .stvl.empfehlung.stvc { padding: 5px 55px 5px 10px; } .produktbox-meta-buttons-div .stvc span { font-size: 14px; } .produktbox-meta-buttons-div .logo img { width: 60px; } .produktbox-meta2 .schulnote { min-width: 120px; }.produktbox-meta2 .schulnote .wert { font-size: 13px; } .produktbox-meta2 .schulnote .note { font-size: 18px; padding: 15px 10px; } .produktbox-meta2 .schulnote .datum, .produktbox-meta2 .schulnote .date, .produktbox-meta2 .schulnote .noten { font-size: 14px; } .produktvergleich-sterne-sterne > .counts { font-size: 10px; } .produktbox-meta-buttons-div .stvc.empfehlung { width: 160px; } } @media screen and (max-width: 600px) { .produktbox-container { flex-wrap: wrap; padding-top: 10px; } .produktbox-thumbnail { order: 1; } .produktbox-thumbnail span.stvc img, .produktbox-thumbnail > a > img { max-height: 200px; } .produktbox-meta { width: 100%; order: 5; min-height: unset; } .produktbox-meta2 { order: 3; } .produktbox-container > .spacer1 { order: 2; } .produktbox-container > .spacer2 { order: 4; width: 100%; margin: 0 20px; } .produktbox-meta:before { background: none; } .produktbox-meta-name { padding: 10px; text-align: center; } .produktbox-meta > hr { display: none; } .produktbox-meta-buttons { padding: 20px 10px 10px; } .produktbox-meta-buttons::before { right: -30px; bottom: -30px; } .produktbox-meta-buttons-div { display: flex; justify-content: center; } } @media screen and (max-width: 300px) { .produktbox-thumbnail { padding: 30px 10px; } .produktbox-meta2 { padding: 10px; } .produktbox-meta2 .schulnote { min-width: 100px; } .produktvergleich-sterne-sterne > .stars > .fa.star-fill-orange::before, .produktvergleich-sterne-sterne > .stars > .fa-star.star-empty:before { font-size: 20px; } .produktvergleich-sterne-sterne > .counts { font-size: 8px; } } /* Sticky Testsieger Wrapper */ .fixed { position: fixed; top: 0; z-index: 9999999999; } @media screen and (max-width: 768px) { .testsieger-wrapper #testsieger-sticky { display: none!important; } } .testsieger-wrapper {display:none!important;} .testsieger-wrapper.fixed {display:block!important;} .testsieger-wrapper.fixed #testsieger-sticky { display: block; margin-top: 0 !important; margin-bottom: 0 !important; padding: 18px 10px 10px 10px; } .tipps-vergleich-wrapper { width: auto !important; margin-right: -100%; margin-left: -100%; padding: 40px 0; background: var(--color-highlight); } #testsieger-sticky .tipps-vergleich-wrapper-inside { position: relative; background: var(--color-max-light); padding: 8px; border-radius: 2px; max-width: 1184px; margin: 0 auto; } .tipps-testsieger-img { box-sizing: unset; width: 56px; height: 58px; text-align: center; line-height: 150px; float: left; margin-right: 30px; position: relative; overflow: hidden; padding-right: 10px; border-right: 3px solid var(--color-highlight); } .tipps-testsieger-img img { display: inline-block; vertical-align: top; padding: 10px; } .tipps-testsieger-img::before { position: absolute; background: #ffc500; top: 10px; right: 12px; height: 22px; width: 22px; line-height: 20px; border-radius: 100px; color: var(--color-max-light); font-size: 12px; } .tipps-vergleich-stickyvorteile { display: inline-block; } .tipps-testsieger-vorteile.tipps-vergleich-stickyvorteile ul { } .tipps-testsieger-vorteile.tipps-vergleich-stickyvorteile ul li { left: 0px; padding: var(--space-0); } .tipps-testsieger-headline { margin: 0!important; padding: 0; color: var(--color-max-dark); font-size: 24px; font-weight: 600; position: relative; white-space: nowrap; } .testsieger-wrapper.fixed #testsieger-sticky .single-column { margin: 3px 0 !important; list-style: none; } .tipps-testsieger-vorteile li { font-size: 18px !important; color: var(--color-max-dark) !important; } .tipps-testsieger-btn-wrapper { float: right; padding: 10px; } .tipps-testsieger-btn { position: relative; } .tipps-testsieger-btn::after { position: absolute; bottom: 0; left: -80px; display: inline-block; width: 66px; height: 36px; content: ''; background: url(/wp-content/themes/tipps/img/testsieger-arrow.png?2020) no-repeat; } .red-check { color: var(--color-highlight); } #testsieger-sticky .tipps-vergleich-wrapper-inside::after { content: "Anzeige"; position: absolute; top: -25px; left: 0px; font-size: 18px; font-weight: 800; text-transform: none; color: var(--color-max-light); } @media screen and (max-width: 1280px) { .testsieger-wrapper.fixed { left: 0; width: 100% !important; } .testsieger-wrapper.fixed #testsieger-sticky.tipps-vergleich-wrapper { margin: 0 auto; padding: 18px var(--space-6) 10px var(--space-6); } } @media screen and (max-width: 1000px) { .testsieger-wrapper.fixed #testsieger-sticky.tipps-vergleich-wrapper { padding: 18px var(--space-3) 10px var(--space-3); } } /* Bestenliste */ .table-bestenliste-headline::after { content: "Affiliate-Link*"; bottom: -17px; position: absolute; right: 0; display: inline-block; line-height: 1; font-size: 13px; font-weight: 400; } .table-bestenliste-headline { position: relative; font-size: 22px; margin-top: 30px; font-weight: 600; } h2.table-bestenliste-headline { margin-bottom: 0!important; } .table-bestenliste { position: relative; overflow-x: auto; } .table-bestenliste > table > tbody > tr > td > a { text-decoration: none; color: #111; } .table-bestenliste > table > tbody > tr > td > a:hover { color: #c00; } .table-bestenliste table.tablepress { width: auto; border-collapse: collapse; border: 1px solid #ddd; box-shadow: 0px 2px 10px -3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 10px -3px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 2px 10px -3px rgba(0, 0, 0, 0.2); min-width: 100%; margin: 20px 0; } .table-bestenliste table.tablepress thead tr th { color: var(--color-max-light); font-weight: 600; background-color: #489998; text-align: left; padding: 8px; font-size: 1.05rem; } .table-bestenliste table.tablepress thead tr th:nth-child(3), .table-bestenliste table.tablepress thead tr th:nth-child(4), .table-bestenliste table.tablepress tbody tr td:nth-child(3), .table-bestenliste table.tablepress tbody tr td:nth-child(4) { text-align: center; } .table-bestenliste table.tablepress thead tr th:nth-child(5) { text-align: center; } .table-bestenliste table.tablepress tbody tr td:nth-child(5) span.empfehlung { text-align: center; } .table-bestenliste table tbody tr td { vertical-align: middle; padding: 8px; border-bottom: 1px solid #ddd; font-size: 1.05rem; font-weight: 300; } .table-bestenliste table tbody tr { white-space: nowrap; transition: all .2s ease-in-out; } .table-bestenliste table tbody tr:nth-child(2n+0) { background: #eee; } .table-bestenliste table tbody tr:nth-child(2n+1) { background: var(--color-max-light); } .table-bestenliste table tbody tr:hover { background: #ddd; } .table-bestenliste table tbody tr td span.hinweis-stern sup { content: '1'; font-size: 9px; position: relative; top: -0.3em; left: 0.2em; } @media screen and (max-width: 1090px) { .table-bestenliste-headline span { display: inline-block; } .table-bestenliste table.tablepress tbody tr td:nth-child(5) span.empfehlung { min-width: 190px; } } .table-bestenliste-aussen::after { content: "1 Preise inkl. MwSt, ggf. zzgl. Versand. Zwischenzeitliche Änderung der Preise, Lieferzeit & kosten möglich."; position: relative; bottom: 0px; right: 0; display: inline-block; text-align: right; white-space: pre; width: 100%; line-height: 1; font-size: 11px; padding: 5px 0; opacity: 0.7; } @media screen and (max-width: 960px) { .table-bestenliste-aussen::after { white-space: unset; } } /* OWL - Deals */ .owl-carousel,.owl-carousel .owl-item{ -webkit-tap-highlight-color:transparent;position:relative } .owl-carousel{ display:none;width:100%;z-index:1 } .owl-carousel .owl-stage{ position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden } .owl-carousel .owl-stage:after{ content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0 } .owl-carousel .owl-stage-outer{ position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0) } .owl-carousel .owl-item,.owl-carousel .owl-wrapper{ -webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden; -webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0) } .owl-carousel .owl-item{ min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none } .owl-carousel .owl-item img{ display:block;width:100% } .owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{ display:none } .no-js .owl-carousel,.owl-carousel.owl-loaded{display:block} .owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{ cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none } .owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{ background:0 0;color:inherit;border:none;padding:0!important;font:inherit;display:inline-block; } .owl-carousel.owl-loading{opacity:0;display:block} .owl-carousel.owl-hidden{opacity:0} .owl-carousel.owl-refresh .owl-item{visibility:hidden} .owl-carousel.owl-drag .owl-item{ -ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none } .owl-carousel.owl-grab{cursor:move;cursor:grab} .owl-carousel.owl-rtl{direction:rtl} .owl-carousel.owl-rtl .owl-item{float:right} .owl-carousel .animated{animation-duration:1s;animation-fill-mode:both} .owl-carousel .owl-animated-in{z-index:0} .owl-carousel .owl-animated-out{z-index:1} .owl-carousel .fadeOut{animation-name:fadeOut} @keyframes fadeOut{0%{opacity:1}100%{opacity:0}} .owl-height{transition:height .5s ease-in-out} .owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease} .owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0} .owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d} .owl-carousel .owl-video-wrapper{position:relative;height:100%;background:var(--color-max-dark)} .owl-carousel .owl-video-play-icon{ position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px; background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease } .owl-carousel .owl-video-play-icon:hover{ -ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3) } .owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none} .owl-carousel .owl-video-tn{ opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease } .owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%} .products-with-deals .owl-theme .owl-nav { margin-top: 0px; text-align: center; -webkit-tap-highlight-color: transparent; position: absolute; top: 35%; width: 100%; pointer-events: none; } .products-with-deals .owl-theme .owl-nav .owl-prev { position: absolute; left: -40px; pointer-events: auto; } .products-with-deals .owl-theme .owl-nav .owl-prev::before { content: ""; width: 32px; height: 32px; display: inline-block; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIzLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMiAzMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTIgMzI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTAsMzJsOC0xNkwwLDBoNGw4LDE2TDQsMzJIMHoiLz4KPC9zdmc+Cg==) no-repeat center center; background-size: 12px 32px; transform: rotate(180deg); } .products-with-deals .owl-theme .owl-nav .owl-prev:hover::before { -webkit-animation: bounceright2 0.3s alternate ease infinite; animation: bounceright2 0.3s alternate ease infinite; } .products-with-deals .owl-theme .owl-nav .owl-next { position: absolute; right: -40px; pointer-events: auto; } .products-with-deals .owl-theme .owl-nav .owl-next::before { content: ""; width: 32px; height: 32px; display: inline-block; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIzLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMiAzMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTIgMzI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTAsMzJsOC0xNkwwLDBoNGw4LDE2TDQsMzJIMHoiLz4KPC9zdmc+Cg==) no-repeat center center; background-size: 12px 32px; } .products-with-deals .owl-theme .owl-nav .owl-next:hover::before { -webkit-animation: bounceright 0.3s alternate ease infinite; animation: bounceright 0.3s alternate ease infinite; } .products-with-deals .owl-theme .owl-nav [class*="owl-"] { color: var(--color-max-light); font-size: 55px; display: inline-block; cursor: pointer; line-height: 1; } .products-with-deals .owl-theme .owl-nav [class*='owl-']:hover { color: orange; } .products-with-deals .owl-theme .owl-nav .disabled { opacity: 0.5; cursor: default; } .products-with-deals .owl-theme .owl-nav.disabled + .owl-dots { margin-top: 10px; } .products-with-deals .owl-theme .owl-dots { text-align: center; -webkit-tap-highlight-color: transparent; position: absolute; margin: 10px auto; width: 100%; } .products-with-deals .owl-theme .owl-dots .owl-dot { display: inline-block; zoom: 1; *display: inline; } .products-with-deals .owl-theme .owl-dots .owl-dot span { width: 10px; height: 10px; margin: 5px 7px; background: var(--color-max-light); display: block; -webkit-backface-visibility: visible; transition: opacity 200ms ease; border-radius: 30px; } .products-with-deals .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: orange; } /* Related Carousel */ .related-products-wrapper,.related-products-wrapper .owl-item, .secondrelated,.secondrelated .owl-item{ -webkit-tap-highlight-color:transparent; position:relative; } .related-products-wrapper, .secondrelated{ display:none; width:100%; z-index:1; } .non-related-carousel, .non-related-carousel2 { display:flex; flex-wrap: wrap; } .related-products-wrapper .owl-stage, .secondrelated .owl-stage{ position:relative; -ms-touch-action:pan-Y; touch-action:manipulation; -moz-backface-visibility:hidden; } .related-products-wrapper .owl-stage .owl-item a.empfehlung, .secondrelated .owl-stage .owl-item a.empfehlung { padding: 10px 65px 10px 20px; box-shadow: none; } .related-products-wrapper .owl-stage:after, .secondrelated .owl-stage:after{ content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0; } .related-products-wrapper .owl-stage-outer, .secondrelated .owl-stage-outer{ position:relative; overflow:hidden; -webkit-transform:translate3d(0,0,0); max-height: 44px; margin: 0 0 30px; } .related-products-wrapper .owl-item,.related-products-wrapper .owl-wrapper, .secondrelated .owl-item,.secondrelated .owl-wrapper{ -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); } .related-products-wrapper .owl-item, .secondrelated .owl-item{ min-height:1px; float:left; -webkit-backface-visibility:hidden; -webkit-touch-callout:none; } .related-products-wrapper .owl-item img, .secondrelated .owl-item img{ display:block; width:100%; } .related-products-wrapper .owl-dots.disabled,.related-products-wrapper .owl-nav.disabled, .secondrelated .owl-dots.disabled,.secondrelated .owl-nav.disabled{ display:none; } .no-js .related-products-wrapper,.related-products-wrapper.owl-loaded, .no-js .secondrelated,.secondrelated.owl-loaded{ display:block; } .related-products-wrapper .owl-nav .owl-next,.related-products-wrapper .owl-nav .owl-prev, .secondrelated .owl-nav .owl-next,.secondrelated .owl-nav .owl-prev { cursor:pointer; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; position: absolute; top: 0; height: 45px; width: 50px; } .related-products-wrapper .owl-nav .owl-prev, .secondrelated .owl-nav .owl-prev { left: 0; text-align:left; background: rgb(253,253,253)!important; background: -moz-linear-gradient(90deg, rgba(253,253,253,1) 0%, rgba(253,253,253,1) 45%, rgba(253,253,253,0) 100%)!important; background: -webkit-linear-gradient(90deg, rgba(253,253,253,1) 0%, rgba(253,253,253,1) 45%, rgba(253,253,253,0) 100%)!important; background: linear-gradient(90deg, rgba(253,253,253,1) 0%, rgba(253,253,253,1) 45%, rgba(253,253,253,0) 100%)!important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1)!important; } .related-products-wrapper .owl-nav .owl-prev::before, .secondrelated .owl-nav .owl-prev::before { content: ''; display: inline-block; width: 20px; height: 45px; background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMzJsOC0xNkwwIDBoNGw4IDE2LTggMTZIMHoiIGZpbGw9IiMxRjFEMUQiLz48L3N2Zz4=) no-repeat center center; background-size: 9px 24px; transform: rotate(180deg); } .related-products-wrapper .owl-nav .owl-prev::before, .related-products-wrapper .owl-nav .owl-next::before, .secondrelated .owl-nav .owl-prev::before, .secondrelated .owl-nav .owl-next::before { transition: all .2s ease-in-out; font-size: 24px; } .related-products-wrapper .owl-nav .owl-prev:hover::before, .secondrelated .owl-nav .owl-prev:hover::before { -webkit-animation: bounceright2 0.3s alternate ease infinite; animation: bounceright2 0.3s alternate ease infinite; } .related-products-wrapper .owl-nav .owl-next, .secondrelated .owl-nav .owl-next { right: 0; text-align:right; background: rgb(253,253,253)!important; background: -moz-linear-gradient(90deg, rgba(253,253,253,0) 0%, rgba(253,253,253,1) 55%, rgba(253,253,253,1) 100%)!important; background: -webkit-linear-gradient(90deg, rgba(253,253,253,0) 0%, rgba(253,253,253,1) 55%, rgba(253,253,253,1) 100%)!important; background: linear-gradient(90deg, rgba(253,253,253,0) 0%, rgba(253,253,253,1) 55%, rgba(253,253,253,1) 100%)!important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1)!important; } .related-products-wrapper .owl-nav .owl-next::before, .secondrelated .owl-nav .owl-next::before { content: ''; display: inline-block; width: 20px; height: 45px; background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMzJsOC0xNkwwIDBoNGw4IDE2LTggMTZIMHoiIGZpbGw9IiMxRjFEMUQiLz48L3N2Zz4=) no-repeat center center; background-size: 9px 24px; } .related-products-wrapper .owl-nav .owl-next:hover::before, .secondrelated .owl-nav .owl-next:hover::before { -webkit-animation: bounceright 0.3s alternate ease infinite; animation: bounceright 0.3s alternate ease infinite; } @media screen and (min-width: 960px) { div.related-products-wrapper.owl-loaded.owl-drag div.owl-stage-outer div.owl-stage div.owl-item div a.empfehlung.empfehlung-related, div.secondrelated.owl-loaded.owl-drag div.owl-stage-outer div.owl-stage div.owl-item a.empfehlung { margin-top: 0px!important; } } .non-related-carousel, .non-related-carousel2 { margin: 10px 0!important; } .non-related-carousel > div > .empfehlung.empfehlung-related, .non-related-carousel2 > a.empfehlung { margin: 0 15px 10px 0!important; position: relative; width: auto; color: white!important; } div.related-products-wrapper.owl-loaded.owl-drag div.owl-stage-outer div.owl-stage div.owl-item div a.empfehlung.empfehlung-related, div.secondrelated.owl-loaded.owl-drag div.owl-stage-outer div.owl-stage div.owl-item a.empfehlung { margin: 0!important; } div.related-products-wrapper.owl-loaded.owl-drag div.owl-stage-outer div.owl-stage div.owl-item.active, div.secondrelated.owl-loaded.owl-drag div.owl-stage-outer div.owl-stage div.owl-item.active { margin: 0 10px; } .related-products-wrapper .owl-nav button.owl-next,.related-products-wrapper .owl-nav button.owl-prev, .secondrelated .owl-nav button.owl-next,.secondrelated .owl-nav button.owl-prev{ background:0 0; font-size: 36px; color:inherit; border:none; padding:0!important; font:inherit; } .related-products-wrapper.owl-loading, .secondrelated.owl-loading{ opacity:0; display:block; } .related-products-wrapper.owl-hidden, .secondrelated.owl-hidden{ opacity:0; } .related-products-wrapper.owl-refresh .owl-item, .secondrelated.owl-refresh .owl-item{ visibility:hidden; } .related-products-wrapper.owl-drag .owl-item, .secondrelated.owl-drag .owl-item{ -ms-touch-action:pan-y; touch-action:pan-y; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; margin: 0 7px; } @keyframes fadeOut{ 0%{opacity:1}100%{opacity:0} } .owl-height{ transition:height .5s ease-in-out; } @media screen and (max-width:600px) { .related-products-wrapper, .secondrelated { width: calc(100% + 16px); left: -8px; } .related-products-wrapper.non-related-carousel, .secondrelated.non-related-carousel2 { width: 100%; left: 0; } } .top3, .top3 .owl-item, .guenstige, .guenstige .owl-item{-webkit-tap-highlight-color:transparent;position:relative} .top3, .guenstige{ display:none;width:100%;z-index:1} .top3 .owl-stage, .guenstige .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden} .top3 .owl-stage:after, .guenstige .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0} .top3 .owl-stage-outer, .guenstige .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)} .top3 .owl-item,.top3 .owl-wrapper, .guenstige .owl-item,.guenstige .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)} .top3 .owl-item, .guenstige .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none;} .top3 .owl-item img, .guenstige .owl-item img{display:block;} .no-js .top3,.top3.owl-loaded, .no-js .guenstige,.guenstige.owl-loaded{display:block} .top3 .owl-dot,.top3 .owl-nav .owl-next,.top3 .owl-nav .owl-prev, .guenstige .owl-dot,.guenstige .owl-nav .owl-next,.guenstige .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .top3 .owl-nav button.owl-next,.top3 .owl-nav button.owl-prev,.top3 button.owl-dot, .guenstige .owl-nav button.owl-next,.guenstige .owl-nav button.owl-prev,.guenstige button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit} .top3.owl-loading, .guenstige.owl-loading{opacity:0;display:block} .top3.owl-hidden, .guenstige.owl-hidden{opacity:0} .owl-height{transition:height .5s ease-in-out} .top3 .owl-nav .owl-next,.top3 .owl-nav .owl-prev, .guenstige .owl-nav .owl-next,.guenstige .owl-nav .owl-prev{ cursor:pointer; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; position: absolute; top: 0; height: 100%; width: 30px; } .top3 .owl-nav .owl-next, .guenstige .owl-nav .owl-next { right: -10px; } .top3 .owl-nav .owl-next:focus, .top3 .owl-nav .owl-next:active, .top3 .owl-nav .owl-prev:focus, .top3 .owl-nav .owl-prev:active, .guenstige .owl-nav .owl-next:focus, .guenstige .owl-nav .owl-next:active, .guenstige .owl-nav .owl-prev:focus, .guenstige .owl-nav .owl-prev:active, .related-products-wrapper .owl-nav .owl-next:focus, .related-products-wrapper .owl-nav .owl-next:active, .related-products-wrapper .owl-nav .owl-prev:focus, .related-products-wrapper .owl-nav .owl-prev:active, .secondrelated .owl-nav .owl-next:focus, .secondrelated .owl-nav .owl-next:active, .secondrelated .owl-nav .owl-prev:focus, .secondrelated .owl-nav .owl-prev:active, .top3 .owl-dots button:focus, .top3 .owl-dots button:active { outline: none; } .top3 .owl-nav .owl-prev, .guenstige .owl-nav .owl-prev { left: -10px; } .top3 .owl-nav .owl-prev:before, .guenstige .owl-nav .owl-prev:before { content: ''; background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMzJsOC0xNkwwIDBoNGw4IDE2LTggMTZIMHoiIGZpbGw9IiMxRjFEMUQiLz48L3N2Zz4=) no-repeat center left; background-size: 12px 32px; width: 100%; height: 100%; display: inline-block; transform: rotate(180deg); } .top3 .owl-nav .owl-next:before, .guenstige .owl-nav .owl-next:before { content: ''; background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMzJsOC0xNkwwIDBoNGw4IDE2LTggMTZIMHoiIGZpbGw9IiMxRjFEMUQiLz48L3N2Zz4=) no-repeat center left; background-size: 12px 32px; width: 100%; height: 100%; display: inline-block; } .top3 .owl-nav .owl-prev:hover:before, .guenstige .owl-nav .owl-prev:hover:before { -webkit-animation: bounceright2 0.3s alternate ease infinite; animation: bounceright2 0.3s alternate ease infinite; } .top3 .owl-nav .owl-next:hover:before, .guenstige .owl-nav .owl-next:hover:before { -webkit-animation: bounceright 0.3s alternate ease infinite; animation: bounceright 0.3s alternate ease infinite; } .top3 .owl-dots, .guenstige .owl-dots { width: 100%; text-align: center; } .top3 .owl-dots button, .guenstige .owl-dots button { height: 20px; width: 20px; margin: 20px 7px 0; } .top3 .owl-dots .owl-dot span, .guenstige .owl-dots .owl-dot span { width: 20px; height: 20px; background: #3A7B7A; display: block; -webkit-backface-visibility: visible; transition: opacity 200ms ease; border-radius: 10px; opacity: 0.6; text-align: center; font-size: 12px; line-height: 20px; color: var(--color-max-light); } .top3 .owl-dots .owl-dot.active span, .guenstige .owl-dots .owl-dot.active span { transform: scale(1.3); opacity: 1; font-weight: 600; } /* Einleitungs Toggle mobil */ .einleitung-hilfe { height: 0; } .einleitung-wrapper .toggle-einleitung { display: block; text-align: left; border-bottom: 0; font-weight: 400; position: relative; margin-top: 0; } .einleitung-wrapper .toggle-einleitung span { color: #111; text-decoration: underline; font-size: 1.1rem; text-decoration-color: #111; } .einleitung-wrapper .toggle-einleitung:hover { color: var(--color-max-dark); } .einleitung-wrapper .toggle-einleitung:focus, .einleitung-wrapper .toggle-einleitung:active { outline: 0; } .einleitung-wrapper .toggle-einleitung:after { content: ''; display: inline-block; width: 22px; height: 24px; background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMzJsOC0xNkwwIDBoNGw4IDE2LTggMTZIMHoiIGZpbGw9IiMxRjFEMUQiLz48L3N2Zz4=) no-repeat center right; background-size: 9px 24px; transform: rotate(90deg); -webkit-animation: bouncebottom 0.3s alternate ease infinite; animation: bouncebottom 0.3s alternate ease infinite; position: absolute; top: 0; right: 0; } .einleitung-wrapper .toggle-einleitung.aktiv:after { transform: rotate(270deg); background-position: center left; -webkit-animation: bouncetop 0.3s alternate ease infinite; animation: bouncetop 0.3s alternate ease infinite; } .einleitung-wrapper .toggle-einleitung:hover:before, .einleitung-wrapper .toggle-einleitung:hover:after { -webkit-animation: bouncebottom 0.3s alternate ease infinite; animation: bouncebottom 0.3s alternate ease infinite; } .einleitung-wrapper .toggle-einleitung.aktiv:hover:before, .einleitung-wrapper .toggle-einleitung.aktiv:hover:after { -webkit-animation: bouncetop 0.3s alternate ease infinite; animation: bouncetop 0.3s alternate ease infinite; } /* Häufige Fragen Scrollbar */ .fakeScroll__scope{ overflow:visible !important; } .fakeScroll__wrap{ overflow : hidden; height : 100%; position : relative; z-index : 1; } .fakeScroll__content{ height : 100%; width : 100%; padding : 0 32px 0 0; position : relative; right : -18px; overflow : auto; -moz-box-sizing : border-box; box-sizing : border-box; } .fakeScroll__track{ position : absolute; right : -15px; top : 0; bottom : 0; width : 9px; cursor : default; } .fakeScroll__bar{ position : relative; background : rgba(255,255,255, .4); width : 100%; border-radius : 4px; right : 0; top : 0; z-index : 0; transition : background 0.1s; cursor : -moz-grab; cursor : -webkit-grab; } .fakeScroll__bar:hover{ background : rgba(255,255,255, .55); } .fakeScroll__bar.fakeScroll--grabbed{ cursor : -moz-grabbing; cursor : -webkit-grabbing; background : white; } body.fakeScroll--grabbed{ cursor : -moz-grabbing; cursor : -webkit-grabbing; -moz-user-select : none; -webkit-user-select : none; user-select : none; } /* erhaeltlich */ .erhaeltlich .produktvergleich-container table.produktvergleich-table tbody tr th.erhaeltlichbei div.pvgl-hinweis:after { content: " "!important; } .erhaeltlich .produktvergleich-container table.produktvergleich-table tbody tr:last-child { display: none; } .erhaeltlich .produktvergleich-container table.produktvergleich-table tbody tr td.produktvergleich-angebot:nth-child(2) { border-bottom: 1px solid var(--color-highlight); } /* Slick */ /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; overflow: hidden; } .mobile-drag.slick-slider { width: calc(100% + 48px); left: -24px; } .tabelle-produkte .slick-slider { width: calc(100% + 48px); left: -24px; } .slick-list { position: relative; display: block; /* overflow: hidden; */ width: calc(100% - 38px); left: 19px; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; margin: 0 5px; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /* Arrows */ .slick-prev, .slick-next { position: fixed; top: calc(50% - 50px); display: block; width: 50px; height: 100px; padding: 0; cursor: pointer; outline: none; background: #489998; color: transparent; z-index: 1000000001; opacity: .5; transition: all .1s ease-in-out; } .slick-prev { left: -50px; border-radius: 0 100px 100px 0; } .slick-next { right: -50px; border-radius: 100px 0 0 100px; } .slick-prev.slick-disabled, .slick-next.slick-disabled { display: none!important; } .slick-prev:hover, .slick-next:hover { opacity: .8; } .slick-prev:focus, .slick-next:focus { outline: 0; } .slick-prev:before, .slick-next:before { position: absolute; width: 12px; height: 32px; content: ''; top: 34px; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIzLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMiAzMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTIgMzI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTAsMzJsOC0xNkwwLDBoNGw4LDE2TDQsMzJIMHoiLz4KPC9zdmc+Cg==) no-repeat center center; } .slick-prev:before { left: 17px; -webkit-animation: bounceright2 0.3s alternate ease infinite; animation: bounceright2 0.3s alternate ease infinite; } .slick-next:before { right: 17px; -webkit-animation: bounceright 0.3s alternate ease infinite; animation: bounceright 0.3s alternate ease infinite; } /* Dots */ .mobile-drag ul.slick-dots { position: fixed; bottom: -100px; left: 0; height: 70px; background-color: rgba(255, 255, 255, 0.8); border-top: 1px solid #c00; display: block; width: 100%; padding: 0 40px 0 0; margin: 0; list-style: none; text-align: center; z-index: 999; } .mobile-drag ul.slick-dots li { position: relative; display: inline-block; width: 40px; height: 40px; margin: 10px; padding: 0; cursor: pointer; opacity: .5; } .mobile-drag ul.slick-dots li button { font-size: 28px; line-height: 28px; font-weight: 600; display: block; width: 40px; height: 40px; padding: 5px; cursor: pointer; color: var(--color-max-light); border: 0; outline: none; background: var(--color-highlight); border-radius: 25px; text-align: center; } .mobile-drag ul.slick-dots li.slick-active { transform: scale(1.2); opacity: 1; } .slick-close-1 { position: absolute; left: -50px; top: 0; background: green; width: 40px; height: 40px; cursor: pointer; } /* SOZIAL */ .sozial { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 10px; } .sozial > a, .sozial > span.stvl { width: 50px; height: 50px; position: relative; z-index: 2; cursor: pointer; font-size: 30px; margin: 5px 10px 0; display: flex; align-items: center; justify-content: center; box-shadow: 0px 2px 10px -3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 10px -3px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 2px 10px -3px rgba(0, 0, 0, 0.2); border: 1px solid var(--color-max-light); } .sozial > .fa-whatsapp { background: #25d366; color: #fff; } .sozial > .fa-facebook { background: #1877f2; color: #fff; } .sozial > .fa-twitter { background: #1da1f2; color: #fff; } .sozial > .fa-mail { background: #666666; color: #fff; } .sozial > .fa-clipboard { background: #666666; color: #fff; } .sozial > .fa-link { background: #666666; color: #fff; } .sozial > .fa-clipboard::before { padding-left: 7px; } .sozial > span:hover, .sozial > a:hover { animation: blink .8s infinite; overflow: visible; border: 1px solid var(--color-max-light); color: #fff; } @media screen and (min-width: 600px) { .sozial > .fa-whatsapp { display: none!important; } } #linktooltipp { display: none; position: fixed; min-width: 200px; padding: 30px 20px; top: 50%; left: 50%; font-weight: 600; transform: translate(-50%, -50%); z-index: 10000000008; background: var(--color-max-light); border: 1px solid #ddd; text-align: center; font-size: 18px; box-shadow: 0 2px 10px -3px rgba(0,0,0,.2); -moz-box-shadow: 0px 2px 10px -3px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 2px 10px -3px rgba(0, 0, 0, 0.2); } #linktooltipp::before { width: 30px; height: 30px; line-height: 36px; font-size: 38px; left: calc(50% - 15px); top: 25px!important; position: absolute; color: var(--color-highlight); opacity: .15; text-shadow: 0 2px 10px -3px rgba(0,0,0,.2); } .alteprodukteh3 { margin-bottom: 30px; margin-top: -20px!important; } @media screen and (max-width: 1000px) { .alteprodukteh3 { margin-top: 0px!important; } } .alteprodukte-titel { margin: 10px 0 0; position: relative; box-shadow: 0px 2px 10px -3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 10px -3px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 2px 10px -3px rgba(0, 0, 0, 0.2); border: 1px solid #ddd; background: var(--color-max-light); cursor: pointer; padding: 15px 60px 15px 15px; font-size: 17px; font-weight: 390; transition: all .3s ease-in-out; overflow: hidden; } .alteprodukte .produktbox-container .srpung-container { display: none !important; } .alteprodukte-titel.active { font-weight: 600; } .alteprodukte-titel:hover, .alteprodukte-titel.active { background: #3A7B7A; color: var(--color-max-light); } .alteprodukte-titel:before { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMzJsOC0xNkwwIDBoNGw4IDE2LTggMTZIMHoiIGZpbGw9IiMxRjFEMUQiLz48L3N2Zz4=) no-repeat center center; content: ""; cursor: pointer; height: 24px; position: absolute; right: 25px; top: 0; height: 100%; width: 12px; border-radius: 100px; line-height: 22px; transition: all .4s ease-in-out; } .alteprodukte-titel:hover:before, .alteprodukte-titel.active:before { background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIzLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMiAzMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTIgMzI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTAsMzJsOC0xNkwwLDBoNGw4LDE2TDQsMzJIMHoiLz4KPC9zdmc+Cg==) no-repeat center center; } .alteprodukte-titel.active:before { transform: rotate(90deg); } .alteprodukte-titel:after { content: ''; position: absolute; top: -50%; right: -50%; bottom: -50%; left: -50%; width: 100%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3) 30%, rgba(229, 172, 142, 0)); transform: rotateZ(-70deg) translate(0, -50em); } .alteprodukte-content { display: none; padding: 20px 0 0 20px; border-left: 3px solid #3A7B7A; margin-left: 1px; margin-top: -1px; z-index: 5; position: relative; } .alteprodukte-content .produktbox-container { margin-top: 0px; } .alteprodukte-close { cursor: pointer; position: relative; padding-left: 40px; text-decoration: underline; } .alteprodukte-close:hover { color: #3A7B7A; } .alteprodukte-close:before { content: ''; display: inline-block; width: 24px; height: 24px; background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMzJsOC0xNkwwIDBoNGw4IDE2LTggMTZIMHoiIGZpbGw9IiMxRjFEMUQiLz48L3N2Zz4=) no-repeat center right; background-position-x: right; background-position-y: center; background-size: auto; background-size: 9px 24px; transform: rotate(270deg); -webkit-animation: bouncetop 0.3s alternate ease infinite; animation: bouncetop 0.3s alternate ease infinite; position: absolute; bottom: -5px; left: 0; } /* Beste Empfehlungen - Sprungmarken */ .beste-headline { margin: 15px 0 10px; font-size: 18px; font-weight: 600; letter-spacing: 0; } .beste-empfehlungen { position: relative; left: 0; width: 100%; margin-bottom: 30px; } .beste-empfehlungen .slick-list { left: 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; width: 100%; } .beste-empfehlungen .slick-list .slick-track { display: flex; } .beste-empfehlungen .slick-list .slick-track > div.beste { display: flex; margin: 0 0 0 1px; } .beste-empfehlungen .slick-list .slick-track > div.beste:after, .beste-empfehlungen.beste-noslider div.beste:after { content: ''; position: absolute; height: 80%; right: -1px; bottom: 10%; width: 1px; background-color: #ccc; } .beste-empfehlungen .slick-list .slick-track div.slick-slide.beste { height: auto; position: relative; } .beste-empfehlungen a { white-space: break-spaces; padding: 7px 25px 7px 15px; width: 100%; display: flex; justify-content: center; align-items: center; text-align: center; border-bottom-width: 0px; } div.beste-image { width: 70px; height: 70px; margin-right: 10px; background-color: var(--color-max-light); display: flex; justify-content: center; align-items: center; box-shadow: 0px 2px 10px -3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 10px -3px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 2px 10px -3px rgba(0, 0, 0, 0.2); transition: all .2s ease-in-out; } div.beste-image { transform: scale(1.02); } div.beste-image img { max-height: 70px; max-width: 70px; } .beste-empfehlungen a:hover { color: #c00; transition: all .2s ease-in-out; } .beste-empfehlungen .slick-list .slick-track div.slick-slide a > span, .beste-empfehlungen.beste-noslider div.beste a > span { width: calc(100% - 80px); } .beste-next, .beste-prev { cursor: pointer; position: absolute; top: 0px; height: calc(100% - 26px); width: 60px; z-index: 2; } .beste-prev { left: 0; background: rgb(253,253,253)!important; background: -moz-linear-gradient(90deg, rgba(253,253,253,1) 0%, rgba(253,253,253,1) 45%, rgba(253,253,253,0) 100%)!important; background: -webkit-linear-gradient(90deg, rgba(253,253,253,1) 0%, rgba(253,253,253,1) 45%, rgba(253,253,253,0) 100%)!important; background: linear-gradient(90deg, rgba(253,253,253,1) 0%, rgba(253,253,253,1) 45%, rgba(253,253,253,0) 100%)!important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1)!important; } .beste-prev:before, .beste-next:before { content: ''; display: inline-block; width: 20px; height: 100%; } .beste-prev:before { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMzJsOC0xNkwwIDBoNGw4IDE2LTggMTZIMHoiIGZpbGw9IiMxRjFEMUQiLz48L3N2Zz4=) no-repeat center center; transform: rotate(180deg); background-size: 9px 24px; } .beste-prev.slick-disabled, .beste-next.slick-disabled { opacity: 0; pointer-events: none; } .beste-next { right: 0; text-align: right; background: rgb(253,253,253)!important; background: -moz-linear-gradient(90deg, rgba(253,253,253,0) 0%, rgba(253,253,253,1) 55%, rgba(253,253,253,1) 100%)!important; background: -webkit-linear-gradient(90deg, rgba(253,253,253,0) 0%, rgba(253,253,253,1) 55%, rgba(253,253,253,1) 100%)!important; background: linear-gradient(90deg, rgba(253,253,253,0) 0%, rgba(253,253,253,1) 55%, rgba(253,253,253,1) 100%)!important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1)!important; } .beste-next:before { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMzJsOC0xNkwwIDBoNGw4IDE2LTggMTZIMHoiIGZpbGw9IiMxRjFEMUQiLz48L3N2Zz4=) no-repeat center center; background-size: 9px 24px; } .beste-empfehlungen ul.slick-dots { text-align:center; margin: 0; } .beste-empfehlungen ul.slick-dots li { list-style: none; display: inline-block; padding: 0 5px; opacity: .2; left: 0; } .beste-empfehlungen ul.slick-dots li.slick-active { opacity: 1; } .beste-empfehlungen ul.slick-dots li button { font-size: 0px; width: 16px; height: 16px; border-radius: 8px; border-width: 0; background-color: var(--color-highlight); cursor: pointer; } .beste-empfehlungen ul.slick-dots li button:focus { outline-width: 0px; -webkit-text-stroke-width: 0px; outline: none; } @media screen and (max-width: 999px) { .beste-empfehlungen a { padding: 7px 30px 7px 35px; } .beste-empfehlungen .slick-list .slick-track div.slick-slide:first-child a { padding: 7px 30px 7px 5px; } .beste-empfehlungen .slick-list .slick-track div.slick-slide:last-child a { padding-right: 5px; } .beste-next, .beste-prev { width: 45px; } } .beste-empfehlungen.beste-noslider { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; display: flex; justify-content: space-around; } .beste-empfehlungen.beste-noslider div.beste { position: relative; } .beste-empfehlungen.beste-noslider div.beste:last-child:after { width: 0; } .beste-empfehlungen.beste-noslider div.beste:first-child a { padding-left: 7px; } .beste-empfehlungen.beste-noslider div.beste:last-child a { padding-right: 7px; } .beste-empfehlungen.beste-noslider.count1 > div { width: 100%; } .beste-empfehlungen.beste-noslider.count2 > div { width: 50%; } .beste-empfehlungen.beste-noslider.count3 > div { width: 33.33%; } .beste-empfehlungen.beste-noslider.count4 > div { width: 25%; } .beste-empfehlungen.beste-noslider.count5 > div { width: 20%; } .recommendation { border-bottom: 4px solid #489998; padding-bottom: 1rem; margin-bottom: 2rem; margin-top: 1rem; } .recommendation__box { margin: 0.5rem 0 0 0; } .recommendation__box .item { background: white; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; display: flex; margin-bottom: 1rem; } .recommendation__box.active .recommendation__box_content .content { max-height: none; display: block; -webkit-line-clamp: 99; } .recommendation__box .recommendation__box_toggle { margin-left: auto; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; display: flex; justify-content: center; align-items: center; cursor: pointer; } .recommendation__box .recommendation__box_th img { display: flex; mix-blend-mode: multiply; padding: 0.5rem; transition: 0.2s ease all; max-height: 160px; object-fit: contain; } .recommendation__box .recommendation__box_th { background: #f5f5f5; margin-right: 1.5rem; border: 1px solid #efefef; display: flex; justify-content: center; flex-shrink: 0; align-items: center; height: auto; margin-left: 1.5rem; margin-top: 1.5rem; margin-bottom: 1.5rem; } .recommendation__box .recommendation__box_content .headline { font-weight: bold; font-size: 1.3rem; color: #3A7B7A; width: 100%; border-bottom: 2px solid #e6eaec; padding-bottom: 1rem; margin-bottom: 0.5rem; } .recommendation__box .recommendation__box_content .headline .icon { background: #3A7B7A; display: inline-flex; justify-content: center; align-items: center; width: 1.5rem; height: 1.5rem; border-radius: 1.8rem; margin-right: 0.5rem; position: relative; top: -1px; } .recommendation__box .recommendation__box_content .headline .icon svg { fill: white; display: flex; position: relative; top: -0.5px; } .recommendation__box .recommendation__box_content .headline h3 { display: inline !important; } .recommendation__box .recommendation__box_content { width: 100%; margin-top: 1.5rem; margin-bottom: 1.5rem; margin-right: 2rem; line-height: 1.2; position: relative; } @media screen and (min-width:601px) { .recommendation__box .recommendation__box_content:after { content: 'Affiliate-Link*'; position: absolute; top: -24px; right: -24px; font-size: 10px; font-weight: 400; } } .recommendation__box .recommendation__box_content .product { font-weight: 600; font-size: 1.1rem; } .recommendation__box .recommendation__box_content .content { margin-bottom: 1.5rem; margin-top: 0.3rem; font-size: 1.1rem; line-height: 1.4; text-align: justify; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 300; } .recommendation__box .recommendation__box_toggle:hover { background: #3A7B7A; } .recommendation__box .recommendation__box_toggle:hover svg { fill: #3A7B7A; } .recommendation__box .recommendation__box_toggle svg { height: 24px; width: 24px; display: flex; } .recommendation__box .recommendation__box_toggle .icon { padding: 0.25rem; box-sizing: border-box; } .recommendation__box .recommendation__box_toggle .icon::before { content: ""; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center; height: 24px; width: 24px; display: flex; } .recommendation__box.active .recommendation__box_toggle .icon::before { content: ""; height: 24px; width: 24px; display: flex; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M400 288h-352c-17.69 0-32-14.32-32-32.01s14.31-31.99 32-31.99h352c17.69 0 32 14.3 32 31.99S417.7 288 400 288z'/%3E%3C/svg%3E") no-repeat; } .recommendation__box.active .recommendation__box_toggle:hover .icon::before { background: url("data:image/svg+xml,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M400 288h-352c-17.69 0-32-14.32-32-32.01s14.31-31.99 32-31.99h352c17.69 0 32 14.3 32 31.99S417.7 288 400 288z'/%3E%3C/svg%3E") no-repeat; } .recommendation__box .recommendation__box_toggle:hover .icon::before { background: url("data:image/svg+xml,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z'%3E%3C/path%3E%3C/svg%3E") no-repeat; } .recommendation__box_content .button .more:hover { background: #9a9a9a; color: white; } .recommendation__box_content .button .more { background-color: #dfdfdf; color: #fff; font-size: 20px; font-weight: 500; display: block; padding: 10px 60px 10px 15px; line-height: 25px; color: #444; border: 0; background: ; transition: all .2s ease-in-out; position: relative; overflow: hidden; box-shadow: 0 2px 10px -3px rgba(0,0,0,.8); -moz-box-shadow: 0 2px 10px -3px rgba(0,0,0,.8); -webkit-box-shadow: 0 2px 10px -3px rgba(0,0,0,.8); text-shadow: 0 2px 10px rgba(0,0,0,.2); order: 1; margin-left: 2rem; } .recommendation__box_content .button .more::before { position: absolute; top: 0; right: 0; width: 45px; height: 100%; content: ""; transition: .2s; background: #9a9a9a url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIzLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMiAzMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTIgMzI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTAsMzJsOC0xNkwwLDBoNGw4LDE2TDQsMzJIMHoiLz4KPC9zdmc+Cg==) no-repeat center center; background-size: auto; background-size: auto; background-size: 9px 24px; } .recommendation__box_content .button .more:hover::before { -webkit-animation: bounceright 0.3s alternate ease infinite; animation: bounceright 0.3s alternate ease infinite; } /* Active */ .recommendation__box.active .recommendation__box_th img { padding: 0.25rem; } .recommendation__headline { display: flex; justify-content: center; align-items: center; } .recommendation__headline .divider { height: 4px; width: 100%; background: #489998; position: relative; top: 2px; margin: 20px 0 20px 0; } .recommendation__headline .headline { flex-shrink: 0; margin: 0 2rem; font-size: 26px; } .recommendation__box .recommendation__box_content .headline .icon svg { width:13px; height:13px; } @media screen and (max-width:600px) { .recommendation__box .recommendation__box_th img { width: 120px; } .recommendation__box .recommendation__box_content .button { flex-direction: column; } .recommendation__box .recommendation__box_content .button span, .recommendation__box .recommendation__box_content .button a{ width:100%; margin:0; box-shadow:none; } .recommendation__box .recommendation__box_content .button span { margin-bottom:1rem; } .recommendation__box .recommendation__box_th { position: relative; margin-left: 1rem; margin-top: 1rem; margin-right: 1rem; margin-bottom: 0; } .recommendation__box .recommendation__box_th:after { content: "Affiliate-Link*"; position: absolute; top: -18px; right: 0px; font-size: 10px; font-weight: 400; } .recommendation__box .item { flex-direction: column; /*! flex-wrap: wrap; */ } .recommendation__box .recommendation__box_content { width: auto; margin-top: 1rem; margin-right: 1rem; margin-left: 1rem; margin-bottom: 1rem; } .recommendation__box .recommendation__box_content .headline { font-size: 1.2rem; padding-bottom: 0.5rem; } .recommendation__box .recommendation__box_content .headline .icon { width: 1.3rem; height: 1.3rem; } .recommendation__box .recommendation__box_content .headline .icon svg { height: 0.8rem; width: 0.8rem; } .recommendation__box .recommendation__box_content .content { font-size: 1rem; line-height: ; } .recommendation__box .recommendation__box_content .button a { width: 100%; } .recommendation__box .recommendation__box_toggle { width: 100%; margin: auto; background: #f0f0f0; } .recommendation__headline { flex-wrap: wrap; } .recommendation__headline .headline { flex-shrink: inherit; display: flex; justify-content: center; text-align: center; margin: 0; font-size: 24px; } .recommendation__headline .divider { margin: 20px 0; } .recommendation__box { margin: 1rem 0px; } .recommendation__headline .divider { top: 0; } } @media screen and (min-width:800px) { .recommendation__box_content .button .more, .recommendation__box_content .button .empfehlung { min-width: 220px } } @media screen and (min-width:830px) { .recommendation__box_content .button .more, .recommendation__box_content .button .empfehlung { min-width: 240px } } @media screen and (max-width:800px) { .recommendation__headline { flex-wrap: wrap; } .recommendation__headline .headline { flex-shrink: inherit; display: flex; justify-content: center; text-align: center; margin: 0 0 10px; font-size: 24px; border-bottom: 4px solid #489998; padding: 0 10px 5px; } .recommendation__headline .divider { display: none; } } .recommendation__box .recommendation__box_content .button { display:flex; } .recommendation__box_content .button .more, .recommendation__box_content .button .empfehlung { text-align: center; text-decoration: none; font-size: 1.05rem; } @media screen and (min-width:600px) and (max-width:751px) { .recommendation__box .recommendation__box_content .button { flex-direction: column; } .recommendation__box .recommendation__box_content .button span, .recommendation__box .recommendation__box_content .button a{ width:100%; margin:0; box-shadow:none; } .recommendation__box .recommendation__box_content .button span { margin-bottom:1rem; } } @supports (-webkit-hyphens:none) { .recommendation__box .recommendation__box_content .content, .profile__header_about .biography { text-align:left!important; } } .kriterien { width: 100%; display: flex; flex-wrap: wrap; background: #fbfbfb; padding: 1rem; margin: 10px 0 0; transition: all .5s; -webkit-box-shadow: inset 0px 0px 2px 0px rgba(0,0,0,0.15); box-shadow: inset 0px 0px 2px 0px rgba(0,0,0,0.15); border: 1px solid #f2f2f2; } .kriterien.visible { padding: 0 1rem; justify-content: space-around; } .kriterien > div { width: 50%; padding: 1rem; text-align: center; transition: all .5s; } .kriterien.visible > div { width: auto; display: flex; } .kriterien > div > div > span { width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 40px; font-size: 32px; background: var(--color-highlight); color: var(--color-max-light); margin-bottom: .5rem; box-shadow: 0px 2px 10px -3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 10px -3px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 2px 10px -3px rgba(0, 0, 0, 0.2); transition: all .5s; } .kriterien.visible > div > div > span { width: 30px; height: 30px; border: 1px solid rgba(204, 0, 0, .1); border-radius: 30px; font-size: 24px; margin: 0 .5rem 0 0; background: rgba(204, 0, 0, .3); } .kriterien > div > div:nth-child(1) { display: flex; align-items: center; justify-content: center; flex-direction: column; font-weight: 600; transition: all .5s; } .kriterien.visible > div > div:nth-child(1) { flex-direction: row; font-weight: 500; font-size: 18px; line-height: 1.2rem; } .kriterien > div > div:nth-child(2) { font-size: 18px; padding-top: 1rem; transition: all .5s; } .kriterien.visible > div > div:nth-child(2) { display: none; } .kriterien-mehr { display: flex; justify-content: center; margin: 0 0 1rem; cursor: pointer; } .kriterien-mehr > div { padding: 0.1rem 1.5rem; display: inline-block; background: #f2f2f2; font-size: 16px; } .kriterien-mehr .icon { margin-right: 1rem; } .kriterien-mehr .value { font-weight: 500; } .kriterien-mehr:hover > div { background: #dfdfdf; } .kriterien-mehr svg { position: relative; top: 2px; } .kriterien-mehr:hover svg { transform: rotate(180deg); top: 2px; position: relative; transition:0.1s ease all; } .kriterien-mehr.visible svg { transform: rotate(180deg); top: 2px; position: relative; } .kriterien-mehr.visible:hover svg { transform: rotate(0deg); } h3.faq-title.faq-rankings { margin-top: 0px; } .faq-ranking { margin-bottom: 0px; } ol.faq-ol li { padding-left: 0px; } h3.tocsprung { margin: 0; } h3.tocsprung:after { content: none!important; } .abtest.stvl.empfehlung { width: 100%; } .text-element .switch-options a { border: 1px solid #3A7B7A !important; } .text-element .switch-options a.switch-active { background-color: #3A7B7A !important; } .text-element .switch-options a.switch-inactive { color: #3A7B7A !important; } .text-element .switch-options a.switch-inactive:hover { background-color: #3A7B7A !important; color: white !important; } #produktinfos { height: 5px; width: 100%; display: flex; border-bottom: 4px solid #489998; padding: 1rem 0; margin-bottom: 25px; } hr#ratgeber { margin: 15px 0; height: 4px; border: 0; background: #489998 !important; }