.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-26642 .elementor-element.elementor-element-a1ed0e1 .elementor-icon-wrapper{text-align:center;}.elementor-26642 .elementor-element.elementor-element-a4d8cca .elementor-icon-wrapper{text-align:center;}.elementor-26642 .elementor-element.elementor-element-5f4e928{--spacer-size:77px;}.elementor-26642 .elementor-element.elementor-element-c78d02a .elementor-icon-wrapper{text-align:center;}.elementor-26642 .elementor-element.elementor-element-c4d8976 .elementor-icon-wrapper{text-align:center;}.elementor-26642 .elementor-element.elementor-element-ac04ffa .elementor-icon-wrapper{text-align:center;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-26642 .elementor-element.elementor-element-7c2b4f3d{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-product__title{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-product__title, .elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price ins{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price ins .amount{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products{--products-title-color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.products-heading-show .related-products > h2, .elementor-widget-woocommerce-products.products-heading-show .upsells > h2, .elementor-widget-woocommerce-products.products-heading-show .cross-sells > h2{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price del{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price del .amount{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price del {font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-woocommerce-products.elementor-wc-products .added_to_cart{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );}.elementor-26642 .elementor-element.elementor-element-6e5b82bc > .elementor-widget-container{background-color:#020B18D9;}.elementor-26642 .elementor-element.elementor-element-6e5b82bc.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-26642 .elementor-element.elementor-element-6e5b82bc.elementor-wc-products ul.products li.product span.onsale{display:block;}.elementor-widget-wpzoom-elementor-addons-pricing-table .wpz-pricing-table-title{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );text-transform:var( --e-global-typography-secondary-text-transform );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-wpzoom-elementor-addons-pricing-table .wpz-pricing-table-price-text{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-wpzoom-elementor-addons-pricing-table .wpz-pricing-table-currency{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-wpzoom-elementor-addons-pricing-table .wpz-pricing-table-extra{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-wpzoom-elementor-addons-pricing-table .wpz-pricing-table-features-title{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );text-transform:var( --e-global-typography-secondary-text-transform );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-wpzoom-elementor-addons-pricing-table .wpz-pricing-table-features-list > li{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-wpzoom-elementor-addons-pricing-table .wpz-pricing-table-btn{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-wpzoom-elementor-addons-pricing-table .wpz-pricing-table-badge{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-26642 .elementor-element.elementor-element-f6063a0 .elementor-icon-wrapper{text-align:center;}.elementor-26642 .elementor-element.elementor-element-b86ce55 .elementor-icon-wrapper{text-align:center;}.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );text-transform:var( --e-global-typography-secondary-text-transform );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );text-transform:var( --e-global-typography-secondary-text-transform );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-26642 .elementor-element.elementor-element-2ce7d7d{--grid-columns:1;}@media(min-width:768px){.elementor-26642 .elementor-element.elementor-element-7c2b4f3d{--content-width:100%;}}@media(max-width:1024px){.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-product__title, .elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-woocommerce-products.products-heading-show .related-products > h2, .elementor-widget-woocommerce-products.products-heading-show .upsells > h2, .elementor-widget-woocommerce-products.products-heading-show .cross-sells > h2{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price del {font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .button{font-size:var( --e-global-typography-accent-font-size );}.elementor-widget-woocommerce-products.elementor-wc-products .added_to_cart{font-size:var( --e-global-typography-accent-font-size );}.elementor-26642 .elementor-element.elementor-element-6e5b82bc.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-widget-wpzoom-elementor-addons-pricing-table .wpz-pricing-table-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-wpzoom-elementor-addons-pricing-table .wpz-pricing-table-price-text{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-wpzoom-elementor-addons-pricing-table .wpz-pricing-table-currency{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-wpzoom-elementor-addons-pricing-table .wpz-pricing-table-extra{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-wpzoom-elementor-addons-pricing-table .wpz-pricing-table-features-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-wpzoom-elementor-addons-pricing-table .wpz-pricing-table-features-list > li{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-wpzoom-elementor-addons-pricing-table .wpz-pricing-table-btn{font-size:var( --e-global-typography-accent-font-size );}.elementor-widget-wpzoom-elementor-addons-pricing-table .wpz-pricing-table-badge{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-loop-grid .elementor-pagination{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-loop-grid .elementor-button{font-size:var( --e-global-typography-accent-font-size );}.elementor-widget-loop-grid .e-load-more-message{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-26642 .elementor-element.elementor-element-2ce7d7d{--grid-columns:2;}}@media(max-width:767px){.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-product__title, .elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-woocommerce-products.products-heading-show .related-products > h2, .elementor-widget-woocommerce-products.products-heading-show .upsells > h2, .elementor-widget-woocommerce-products.products-heading-show .cross-sells > h2{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price del {font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .button{font-size:var( --e-global-typography-accent-font-size );}.elementor-widget-woocommerce-products.elementor-wc-products .added_to_cart{font-size:var( --e-global-typography-accent-font-size );}.elementor-26642 .elementor-element.elementor-element-6e5b82bc.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-widget-wpzoom-elementor-addons-pricing-table .wpz-pricing-table-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-wpzoom-elementor-addons-pricing-table .wpz-pricing-table-price-text{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-wpzoom-elementor-addons-pricing-table .wpz-pricing-table-currency{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-wpzoom-elementor-addons-pricing-table .wpz-pricing-table-extra{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-wpzoom-elementor-addons-pricing-table .wpz-pricing-table-features-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-wpzoom-elementor-addons-pricing-table .wpz-pricing-table-features-list > li{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-wpzoom-elementor-addons-pricing-table .wpz-pricing-table-btn{font-size:var( --e-global-typography-accent-font-size );}.elementor-widget-wpzoom-elementor-addons-pricing-table .wpz-pricing-table-badge{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-loop-grid .elementor-pagination{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-loop-grid .elementor-button{font-size:var( --e-global-typography-accent-font-size );}.elementor-widget-loop-grid .e-load-more-message{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-26642 .elementor-element.elementor-element-2ce7d7d{--grid-columns:1;}}/* Start custom CSS for heading, class: .elementor-element-55f61230 */.elementor-26642 .elementor-element.elementor-element-55f61230 H2 { margin: 0 0 0px !important; color: rgba(245,248,250,.96) !important; font-family: "Barlow Condensed", sans-serif !important; font-size: clamp(34px, 20.8vw, 44px) !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: .08em !important; text-align: center !important; text-transform: uppercase !important; } @media (max-width: 1199px) { .elementor-26642 .elementor-element.elementor-element-55f61230 h2 { font-size: 28px !important; padding-bottom: 6px !important; } } @media (max-width: 767px) { .elementor-26642 .elementor-element.elementor-element-55f61230 h2 { font-size: 19px !important; padding-bottom: 6px !important; } }/* End custom CSS */ /* Start custom CSS for text-editor, class: .elementor-element-44d786cb */.elementor-26642 .elementor-element.elementor-element-44d786cb { max-width: 620px; margin: 0 auto 2px !important; color: rgba(235,247,255,.72) !important; font-family: "Inter", sans-serif !important; font-size: clamp(13px, 1.05vw, 16px) !important; font-weight: 400 !important; line-height: 1.45 !important; text-align: center !important; } @media (max-width: 767px) { .elementor-26642 .elementor-element.elementor-element-44d786cb { font-size: 14px !important; } }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-6e5b82bc *//* ========================================================= TZ Produkt-Teaser / WooCommerce Products Widget Bereinigte Basis Widget-intern mit .elementor-26642 .elementor-element.elementor-element-6e5b82bc ========================================================= */ .elementor-26642 .elementor-element.elementor-element-6e5b82bc { --tz-cyan: #48E0E4; --tz-text: rgba(245,248,250,.96); --tz-soft: rgba(235,247,255,.72); --tz-orange: #e45f2c; position: relative; width: 100%; padding: 0 !important; overflow: visible; background: transparent !important; } /* WooCommerce Grundreset */ .elementor-26642 .elementor-element.elementor-element-6e5b82bc .elementor-widget-container, .elementor-26642 .elementor-element.elementor-element-6e5b82bc .woocommerce, .elementor-26642 .elementor-element.elementor-element-6e5b82bc ul.products { position: relative; width: 100%; margin: 0 !important; padding: 0 !important; } .elementor-26642 .elementor-element.elementor-element-6e5b82bc ul.products.elementor-grid { display: grid !important; gap: 0px !important; align-items: stretch !important; } .elementor-26642 .elementor-element.elementor-element-6e5b82bc ul.products li.product { position: relative; aspect-ratio: 2 / 3; min-width: 0; margin: 0 !important; padding: 0 !important; overflow: hidden !important; list-style: none !important; text-align: center !important; border: 0 !important; border-radius: 0; background: linear-gradient(180deg, rgba(2,11,24,.04) 0%, rgba(2,11,24,.08) 62%, rgba(2,11,24,.24) 78%, rgba(2,11,24,.52) 100%), url("/wp-content/uploads/artikel_hintergrund-small5.png") center center / cover no-repeat !important; } /* leichte Abdunklung pro Artikel */ .elementor-26642 .elementor-element.elementor-element-6e5b82bc ul.products li.product::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 50% 14%, rgba(72,224,228,.13), transparent 36%), linear-gradient(90deg, rgba(2,11,24,.20), transparent 24%, transparent 76%, rgba(2,11,24,.20)); } /* untere Maske: oben klar, unten Textzone */ .elementor-26642 .elementor-element.elementor-element-6e5b82bc ul.products li.product::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, transparent 0%, transparent 68%, rgba(2,11,24,.18) 75%, rgba(2,11,24,.70) 84%, rgba(2,11,24,.92) 94%, rgba(2,11,24,.98) 100%) !important; } /* Link füllt die Bühne */ .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product .woocommerce-LoopProduct-link { position: static !important; display: block !important; height: 100% !important; min-height: 0 !important; text-decoration: none !important; color: var(--tz-text) !important; } /* Produktbild: absolute Bühnenposition */ .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product img { position: absolute !important; left: 50% !important; bottom: 33% !important; z-index: 3; width: auto !important; max-width: 86% !important; height: auto !important; max-height: 54% !important; margin: 0 !important; object-fit: contain !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; transform: translateX(-50%) !important; filter: drop-shadow(0 22px 22px rgba(0,0,0,.52)) saturate(1.04) contrast(1.05); transition: transform .24s ease, filter .24s ease; } /* Licht-/Wasserplattform */ .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product .woocommerce-LoopProduct-link::before { content: ""; position: absolute; left: 50%; top: 73% !important; z-index: 1; width: min(330px, 88%); height: 24px; transform: translate(-50%, -50%) !important; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(72,224,228,.38) 0%, rgba(72,224,228,.20) 32%, rgba(72,224,228,.08) 56%, transparent 75%); opacity: .88; pointer-events: none; } .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product .woocommerce-LoopProduct-link::after { content: ""; position: absolute; left: 50%; top: 75% !important; z-index: 2; width: min(370px, 94%); height: 1px; transform: translate(-50%, -50%) !important; background: linear-gradient(90deg, transparent, rgba(72,224,228,.14), rgba(72,224,228,.62), rgba(72,224,228,.14), transparent); opacity: .84; pointer-events: none; } /* Titel */ .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product .woocommerce-loop-product__title { position: absolute !important; left: 22px !important; right: 22px !important; bottom: 142px !important; z-index: 4; margin: 0 !important; padding: 0 !important; color: var(--tz-text) !important; font-family: "Inter", sans-serif !important; font-size: 16px !important; font-weight: 850 !important; line-height: 1.18 !important; letter-spacing: .11em !important; text-align: center !important; text-transform: uppercase !important; text-shadow: 0 2px 12px rgba(0,0,0,.62); } /* Preis */ .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product .price { position: absolute !important; left: 22px !important; right: 22px !important; bottom: 102px !important; z-index: 4; display: block !important; margin: 0 !important; padding: 0 !important; color: var(--tz-orange) !important; font-family: "Inter", sans-serif !important; font-size: 25px !important; font-weight: 850 !important; line-height: 1.1 !important; text-align: center !important; letter-spacing: .025em !important; text-shadow: 0 2px 10px rgba(0,0,0,.52); } .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product .price, .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product .price *, .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product .amount, .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product bdi, .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product .woocommerce-Price-currencySymbol { color: var(--tz-orange) !important; } .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product .price del { display: none !important; } .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product .price ins { text-decoration: none !important; } /* Button */ .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product .button { position: absolute !important; left: 50% !important; bottom: 48px !important; z-index: 5; display: inline-flex !important; align-items: center; justify-content: center; min-width: 168px; height: 36px; margin: 0 !important; padding: 0 20px !important; transform: translateX(-50%); border-radius: 999px !important; border: 1px solid rgba(255,138,72,.42) !important; background: linear-gradient(180deg, rgba(180,80,32,.86), rgba(89,39,18,.94)) !important; color: rgba(255,244,236,.96) !important; font-family: "Inter", sans-serif !important; font-size: 12px !important; font-weight: 850 !important; line-height: 1 !important; letter-spacing: .08em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; box-shadow: 0 10px 24px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.16) !important; } .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product .button::after { content: " →"; margin-left: 8px; } /* Sale Badge */ .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product .onsale { position: absolute !important; top: 36px !important; left: 36px !important; right: auto !important; z-index: 6 !important; display: inline-flex !important; align-items: center; justify-content: center; min-width: 70px !important; min-height: 0 !important; height: 32px !important; padding: 0 14px !important; margin: 0 !important; border-radius: 3px !important; border: 1px solid rgba(255,150,88,.48) !important; background: linear-gradient(180deg, rgba(239,103,48,.97), rgba(165,61,25,.97)) !important; color: rgba(255,245,238,.98) !important; font-family: "Inter", sans-serif !important; font-size: 12px !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: .10em !important; text-transform: uppercase !important; box-shadow: 0 8px 18px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.18) !important; } /* Germanized + Wishlist in diesem Teaser ausblenden */ .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product .wc-gzd-additional-info, .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product .tax-info, .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product .shipping-costs-info, .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product .stw-wishlist-button-container { display: none !important; } /* Hover */ .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product:hover { box-shadow: 0 0 0 1px rgba(72,224,228,.18), 0 22px 60px rgba(0,0,0,.34); } .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product:hover img { transform: translateX(-50%) translateY(-5px) scale(1.035) !important; filter: drop-shadow(0 24px 24px rgba(0,0,0,.54)) drop-shadow(0 0 16px rgba(72,224,228,.16)) saturate(1.08) contrast(1.07); } .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product:hover .woocommerce-LoopProduct-link::before { opacity: 1; background: radial-gradient(ellipse at center, rgba(72,224,228,.48) 0%, rgba(72,224,228,.24) 32%, rgba(72,224,228,.10) 56%, transparent 75%); } .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product .button:hover { border-color: rgba(255,156,94,.62) !important; background: linear-gradient(180deg, rgba(205,90,36,.94), rgba(105,44,19,.98)) !important; } /* Echte Schnittmaske: Ränder weich + Ecken stärker ausgefressen */ .elementor-26642 .elementor-element.elementor-element-6e5b82bc { -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 7%, black 93%, transparent 100%), linear-gradient(180deg, transparent 0%, black 4%, black 82%, rgba(0,0,0,.72) 88%, rgba(0,0,0,.38) 94%, transparent 100%), radial-gradient(circle at top left, transparent 0 3%, black 3%), radial-gradient(circle at top right, transparent 0 3%, black 3%), radial-gradient(circle at bottom left, transparent 0 3%, black 3%), radial-gradient(circle at bottom right, transparent 0 3%, black 3%); -webkit-mask-composite: source-in, source-in, source-in, source-in, source-in; mask-image: linear-gradient(90deg, transparent 0%, black 7%, black 93%, transparent 100%), linear-gradient(180deg, transparent 0%, black 4%, black 82%, rgba(0,0,0,.72) 88%, rgba(0,0,0,.38) 94%, transparent 100%), radial-gradient(circle at top left, transparent 0 3%, black 3%), radial-gradient(circle at top right, transparent 0 3%, black 3%), radial-gradient(circle at bottom left, transparent 0 3%, black 3%), radial-gradient(circle at bottom right, transparent 0 3%, black 3%); mask-composite: intersect; } /* Tablet */ @media (max-width: 1199px){ .elementor-26642 .elementor-element.elementor-element-6e5b82bc ul.products.elementor-grid { gap: 0px !important; } .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product img { bottom: 34% !important; max-width: 88% !important; max-height: 52% !important; } .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product .woocommerce-loop-product__title { left: 18px !important; right: 18px !important; bottom: 70px !important; font-size: 12px !important; } .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product .price { left: 18px !important; right: 18px !important; bottom: 48px !important; font-size: 18px !important; } .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product .button { bottom: 12px !important; min-width: 142px; height: 32px; font-size: 10px !important; } .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product .onsale { top: 24px !important; left: 24px !important; } /* Tablet: Ecken weniger weich/ausgefressen */ .elementor-26642 .elementor-element.elementor-element-6e5b82bc { -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 3%, black 96%, transparent 100%), /* nur dieser Verlauf ist für unten geändert */ linear-gradient(180deg, transparent 0%, black 4%, black 94%, rgba(0,0,0,.76) 97%, rgba(0,0,0,.52) 98%, transparent 100%), radial-gradient(circle at top left, transparent 0 3%, black 3%), radial-gradient(circle at top right, transparent 0 3%, black 3%), radial-gradient(circle at bottom left, transparent 0 1%, black 2%), radial-gradient(circle at bottom right, transparent 0 1%, black 2%) !important; mask-image: linear-gradient(90deg, transparent 0%, black 3%, black 96%, transparent 100%), /* nur dieser Verlauf ist für unten geändert */ linear-gradient(180deg, transparent 0%, black 4%, black 94%, rgba(0,0,0,.76) 97%, rgba(0,0,0,.52) 98%, transparent 100%), radial-gradient(circle at top left, transparent 0 3%, black 3%), radial-gradient(circle at top right, transparent 0 3%, black 3%), radial-gradient(circle at bottom left, transparent 0 1%, black 2%), radial-gradient(circle at bottom right, transparent 0 1%, black 2%) !important; } } /* Mobil */ @media (max-width: 767px) { .elementor-26642 .elementor-element.elementor-element-6e5b82bc ul.products.elementor-grid { grid-template-columns: 1fr !important; gap: 18px !important; } .elementor-26642 .elementor-element.elementor-element-6e5b82bc ul.products li.product { width: 100% !important; max-width: 430px; margin-inline: auto !important; aspect-ratio: 2 / 3; } .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product img { bottom: 27% !important; max-width: 90% !important; max-height: 48% !important; } .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product .woocommerce-LoopProduct-link::before, .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product .woocommerce-LoopProduct-link::after { top: 73% !important; } .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product .woocommerce-loop-product__title { left: 10px !important; right: 10px !important; bottom: 84px !important; font-size: 14px !important; } .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product .price { left: 10px !important; right: 10px !important; bottom: 56px !important; font-size: 21px !important; } .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product .button { bottom: 12px !important; min-width: 148px; height: 32px; font-size: 10px !important; } .elementor-26642 .elementor-element.elementor-element-6e5b82bc li.product .onsale { top: 14px !important; left: 14px !important; height: 28px !important; min-width: 62px !important; font-size: 10px !important; } /* Mobil: Artikel volle Breite + Widget-Schnittmaske aus */ .elementor-26642 .elementor-element.elementor-element-6e5b82bc { -webkit-mask-image: none !important; mask-image: none !important; } .elementor-26642 .elementor-element.elementor-element-6e5b82bc ul.products.elementor-grid { grid-template-columns: 1fr !important; gap: 18px !important; } .elementor-26642 .elementor-element.elementor-element-6e5b82bc ul.products li.product { width: 100% !important; max-width: none !important; margin-inline: 0 !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-7c2b4f3d */.elementor-26642 .elementor-element.elementor-element-7c2b4f3d { position: relative !important; width: 100% !important; max-width: 1440px !important; } .elementor-26642 .elementor-element.elementor-element-7c2b4f3d .e-con-inner { gap: 0px } /* Mobil: Produktkarten wirklich volle Breite */ @media (max-width: 767px) { .elementor-26642 .elementor-element.elementor-element-7c2b4f3d { width: 100% !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; -webkit-mask-image: none !important; mask-image: none !important; } .elementor-26642 .elementor-element.elementor-element-7c2b4f3d .elementor-widget-container, .elementor-26642 .elementor-element.elementor-element-7c2b4f3d .woocommerce, .elementor-26642 .elementor-element.elementor-element-7c2b4f3d ul.products { width: 100% !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .elementor-26642 .elementor-element.elementor-element-7c2b4f3d ul.products.elementor-grid { grid-template-columns: 1fr !important; gap: 18px !important; } .elementor-26642 .elementor-element.elementor-element-7c2b4f3d ul.products li.product { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } }/* End custom CSS */ /* Start custom CSS *//* ---------- Startenseiten 3er Navigation ---------- */ .tz-cat-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% -6%, rgba(255,255,255,.18), transparent 22%), linear-gradient( 180deg, rgba(3,16,34,.20) 0%, rgba(3,16,34,.35) 28%, rgba(2,11,24,.62) 100% ); pointer-events: none; z-index: 0; } /* Kurse und Wissen minimal weicher wie in deiner Vorlage */ .tz-cat-courses::before { background: radial-gradient(circle at 50% -6%, rgba(255,255,255,.18), transparent 22%), linear-gradient( 90deg, rgba(2,11,24,.88) 0%, rgba(2,11,24,.78) 42%, rgba(2,11,24,.36) 68%, rgba(2,11,24,.16) 100% ), linear-gradient( 180deg, rgba(3,16,34,.08) 0%, rgba(2,11,24,.62) 100% ); } .tz-cat-info::before, .tz-cat-equipment::before { background: /* leichter Lichtsaum oben links */ radial-gradient( ellipse at 18% 8%, rgba(255,255,255,.20) 0%, rgba(255,170,110,.12) 18%, rgba(255,170,110,0) 42% ), /* Hauptmaske: oben links sichtbar, nach rechts/unten weich dunkler */ radial-gradient( ellipse 78% 92% at 0% 0%, rgba(2,11,24,0) 0%, rgba(2,11,24,.04) 24%, rgba(2,11,24,.20) 42%, rgba(2,11,24,.52) 58%, rgba(2,11,24,.82) 74%, rgba(2,11,24,1) 92%, rgba(2,11,24,1) 100% ), /* Grundabdunklung für Lesbarkeit */ linear-gradient( 180deg, rgba(2,11,24,.04) 0%, rgba(2,11,24,.32) 58%, rgba(2,11,24,.86) 100% ); } /* extra saubere innere Lichtkante */ .tz-cat-card::after { content: ""; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none; z-index: 1; box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 0 12px color-mix(in srgb, var(--tz-cat-color) 32%, transparent), inset 0 0 28px rgba(255,255,255,.035); } /* Alle direkten Inhalte über das Overlay heben */ .tz-cat-card > * { position: relative; z-index: 2; } /* ---------- Kartenhover ---------- */ .tz-cat-card:hover { transform: translateY(-6px); filter: brightness(1.13) saturate(1.08); box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 0 2px color-mix(in srgb, var(--tz-cat-color) 28%, transparent), 0 0 32px var(--tz-cat-glow-strong), 0 0 80px color-mix(in srgb, var(--tz-cat-color) 34%, transparent), 0 0 130px color-mix(in srgb, var(--tz-cat-color) 18%, transparent); } .tz-cat-badge .elementor-icon, .tz-cat-badge i, .tz-cat-badge svg { color: #ffffff; fill: #ffffff; font-size: 42px; width: 42px; height: 42px; } /* Textblock soll etwa links unter Badge beginnen */ .tz-cat-equipment .tz-cat-body { padding: 64px 28px 22px 28px; } /* ---------- Kartentext / Beschreibung ---------- */ .tz-cat-text p { line-height: 2em; } /* ---------- Button-Text ---------- */ .tz-cat-button .elementor-button, .tz-cat-button .elementor-button-text { font-family: "Inter", sans-serif; font-size: 15px; font-weight: 800; line-height: 1em; letter-spacing: 0.045em; text-transform: uppercase; } /* ---------- Untere Icon-Zeile: Text neben Icons ---------- */ .tz-cat-meta, .tz-cat-meta span, .tz-cat-meta a, .tz-cat-meta-item { font-family: "Inter", sans-serif; font-size: 12.5px; font-weight: 500; line-height: 1.25em; letter-spacing: 0; } /* ---------- Optional: Icon-Größe unten ---------- */ .tz-cat-meta-item .elementor-icon, .tz-cat-meta-item i, .tz-cat-meta-item svg { font-size: 22px; width: 22px; height: 22px; } /* ---------- Optional: Badge-Icon oben ---------- */ .tz-cat-badge .elementor-icon, .tz-cat-badge i, .tz-cat-badge svg { font-size: 40px; width: 40px; height: 40px; } @media (max-width: 1024px) { .tz-cat-title .elementor-heading-title { font-size: 34px; } .tz-cat-text, .tz-cat-text p { font-size: 16px; line-height: 1.42em; } .tz-cat-button .elementor-button, .tz-cat-button .elementor-button-text { font-size: 13px; } .tz-cat-meta, .tz-cat-meta span, .tz-cat-meta a, .tz-cat-meta-item { font-size: 12px; } } @media (max-width: 767px) { .tz-cat-title .elementor-heading-title { font-size: 30px; line-height: 1em; } .tz-cat-text, .tz-cat-text p { font-size: 15px; line-height: 1.4em; } .tz-cat-button .elementor-button, .tz-cat-button .elementor-button-text { font-size: 12.5px; letter-spacing: 0.04em; } .tz-cat-meta, .tz-cat-meta span, .tz-cat-meta a, .tz-cat-meta-item { font-size: 11.5px; line-height: 1.22em; } .tz-cat-meta-item .elementor-icon, .tz-cat-meta-item i, .tz-cat-meta-item svg { font-size: 20px; width: 20px; height: 20px; } .tz-cat-badge .elementor-icon, .tz-cat-badge i, .tz-cat-badge svg { font-size: 34px; width: 34px; height: 34px; } } /* Falls du Elementor Divider Widget nutzt */ .tz-cat-divider .elementor-divider-separator { border-color: var(--tz-cat-color); opacity: .9; } /* Wissen: Icons unten bewusst weiß wie in deiner Vorlage */ .tz-cat-info .tz-cat-meta-item .elementor-icon, .tz-cat-info .tz-cat-meta-item i, .tz-cat-info .tz-cat-meta-item svg { color: #ffffff; fill: #ffffff; filter: drop-shadow(0 0 8px rgba(255,255,255,.18)); } /* ---------- Tablet ---------- */ @media (max-width: 1024px) { .tz-cat-nav { flex-wrap: wrap; gap: 28px; } .tz-cat-card { flex: 1 1 calc(50% - 28px); min-height: 560px; } } /* ---------- Mobile ---------- */ @media (max-width: 767px) { .tz-cat-nav { flex-direction: column; gap: 72px; } .tz-cat-card { width: 100%; min-height: 520px; padding: 24px 24px 18px 24px; } .tz-cat-badge { width: 82px; height: 82px; top: -41px; } .tz-cat-spacer { height: 56px; flex-basis: 56px; } } /* ================================ TZ Bullaugen-Button ================================ */ .tz-porthole-btn { --tz-porthole-top: #ff7356; --tz-porthole-mid: #dc3b27; --tz-porthole-bottom: #8f2119; --tz-porthole-glow: rgba(255, 95, 55, .62); --tz-porthole-text-color: #ffffff; position: relative; width: 150px; height: 150px; border-radius: 50%; padding: 0; display: grid; place-items: center; text-decoration: none; } .tz-porthole-svg { position: absolute; inset: 0; width: 150px; height: 150px; display: block; } /* Gerichtete Innen-Nut am Metallring. Der Fehler vorher: diese Nut lag als .tz-porthole-face::before AUF der roten Scheibe. Jetzt liegt sie am Außencontainer, unter der farbigen Scheibe, und bildet nur den Randbereich. */ /* Inhalt exakt auf Innenfläche zentriert */ .tz-porthole-inner { position: absolute !important; inset: 18px !important; z-index: 2 !important; width: auto !important; height: auto !important; padding: 0 !important; margin-top: 10px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0 !important; text-align: center !important; box-sizing: border-box !important; } .tz-porthole-text { font-size: 20px !important; line-height: 0.95em !important; font-weight: 600 !important; letter-spacing: 0.005em !important; color: rgba(245,248,250,.9) !important; max-width: 118px !important; text-transform: uppercase; font-family: "Barlow Condensed", sans-serif !important; } .tz-porthole-arrow { margin-top: -2px !important; font-size: 34px !important; line-height: 1em !important; color: rgba(245,248,250,.9) !important; } .tz-porthole-text .elementor-widget-container, .tz-porthole-arrow .elementor-widget-container, .tz-porthole-text p, .tz-porthole-arrow p { padding: 0; margin: 0; } .tz-porthole-btn:hover { transform: translateY(-2px); filter: brightness(1.08) saturate(1.08); box-shadow: 0 15px 28px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.48) inset, 0 0 22px var(--tz-porthole-glow), 0 0 52px rgba(255,255,255,.14); } .tz-porthole-svg-wrap { position: absolute; inset: 0; z-index: 1; width: 150px; height: 150px; padding: 0; margin: 0; pointer-events: none; } .tz-porthole-svg-wrap .elementor-widget-container { width: 150px; height: 150px; padding: 0; margin: 0; } /* Farbvarianten */ .tz-porthole-red { --tz-porthole-top: #ff7356; --tz-porthole-mid: #dc3b27; --tz-porthole-bottom: #8f2119; --tz-porthole-glow: rgba(255, 95, 55, .62); --tz-porthole-text-color: #ffffff; } .tz-porthole-blue { --tz-porthole-top: #dff8ff; --tz-porthole-mid: #91cce2; --tz-porthole-bottom: #5b9eba; --tz-porthole-glow: rgba(120, 215, 255, .58); --tz-porthole-text-color: #0a2b42; } /* ================================ TZ Mini-Bullauge nach großem Button-System ================================ */ .tz-mini-porthole { --tz-mini-top: #6fa4c2; --tz-mini-mid: #2d668f; --tz-mini-bottom: #0f375a; --tz-mini-glow: rgba(65, 135, 180, .34); --tz-mini-icon-color: #ffffff; position: relative; width: 75px; height: 75px; min-width: 75px; min-height: 75px; max-width: 75px; max-height: 75px; aspect-ratio: 1 / 1; padding: 0; margin: 0; border-radius: 50%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; flex-direction: column; isolation: isolate; background: radial-gradient(circle at 50% 6%, #20231f 0 2.0%, #cfd2cc 2.5% 4.1%, transparent 4.6%), radial-gradient(circle at 79% 15%, #20231f 0 2.0%, #cfd2cc 2.5% 4.1%, transparent 4.6%), radial-gradient(circle at 94% 50%, #20231f 0 2.0%, #cfd2cc 2.5% 4.1%, transparent 4.6%), radial-gradient(circle at 79% 85%, #20231f 0 2.0%, #cfd2cc 2.5% 4.1%, transparent 4.6%), radial-gradient(circle at 50% 94%, #20231f 0 2.0%, #cfd2cc 2.5% 4.1%, transparent 4.6%), radial-gradient(circle at 21% 85%, #20231f 0 2.0%, #cfd2cc 2.5% 4.1%, transparent 4.6%), radial-gradient(circle at 6% 50%, #20231f 0 2.0%, #cfd2cc 2.5% 4.1%, transparent 4.6%), radial-gradient(circle at 21% 15%, #20231f 0 2.0%, #cfd2cc 2.5% 4.1%, transparent 4.6%), radial-gradient(circle at 34% 20%, rgba(255,255,255,.70) 0 3%, transparent 12%), radial-gradient(circle at 50% 50%, #e6e8e2 0 55%, transparent 56%), conic-gradient( from 15deg, #383e34 0deg, #c9ccc5 22deg, #5b6157 48deg, #f0f1ec 72deg, #474d43 100deg, #b8bbb4 132deg, #383e34 168deg, #d8dad3 204deg, #565c52 252deg, #e7e8e2 306deg, #383e34 360deg ); box-shadow: 0 6px 12px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.32) inset; } /* innere Farbfläche als echtes Element */ .tz-mini-face { position: absolute; inset: 9px; width: auto; height: auto; min-width: 0; min-height: 0; max-width: none; max-height: none; padding: 0; margin: 0; border-radius: 50%; box-sizing: border-box; display: block; flex: none; transform: none; z-index: 1; pointer-events: none; background: radial-gradient( ellipse at 38% 18%, rgba(255,255,255,.22) 0%, rgba(255,255,255,.12) 16%, transparent 30% ), linear-gradient( 180deg, var(--tz-mini-top) 0%, var(--tz-mini-mid) 42%, var(--tz-mini-bottom) 100% ); box-shadow: 0 0 0 2px rgba(18, 21, 18, .74), 0 0 0 3px rgba(255,255,255,.10), inset 0 1px 2px rgba(255,255,255,.10), inset 0 -2px 4px rgba(0,0,0,.14); } /* Hover-Leuchten innen */ .tz-mini-face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.42), transparent 34%), radial-gradient(circle at 50% 50%, var(--tz-mini-glow), transparent 62%); box-shadow: inset 0 0 14px rgba(255,255,255,.30), 0 0 18px var(--tz-mini-glow); transition: opacity .22s ease; } /* Icon exakt auf Innenfläche zentriert */ .tz-mini-inner { position: absolute !important; inset: 10px !important; z-index: 2; width: auto; height: auto; min-width: 0; min-height: 0; padding: 0; margin: 0; box-sizing: border-box; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; border-radius: 50%; pointer-events: none; } .tz-mini-inner .elementor-icon, .tz-mini-inner i, .tz-mini-inner svg { color: var(--tz-mini-icon-color); fill: var(--tz-mini-icon-color); font-size: 28px; width: 28px; height: 28px; filter: none; text-shadow: none; stroke-width: 1.2; } /* Elementor-Abstände killen */ .tz-mini-inner .elementor-widget-container { padding: 0; margin: 0; } /* Hover */ .tz-mini-porthole { transition: transform .22s ease, box-shadow .22s ease, filter .22s ease; } .tz-mini-porthole:hover { transform: translateY(-1px); filter: brightness(1.08) saturate(1.08); box-shadow: 0 9px 16px rgba(0,0,0,.44), 0 0 0 1px rgba(255,255,255,.55) inset, 0 0 16px var(--tz-mini-glow), 0 0 34px rgba(255,255,255,.12); } .tz-mini-porthole:hover .tz-mini-face::after { opacity: 1; } /* Varianten */ .tz-mini-blue { --tz-mini-top: #6fa4c2; --tz-mini-mid: #2d668f; --tz-mini-bottom: #0f375a; --tz-mini-glow: rgba(65, 135, 180, .34); --tz-mini-icon-color: #ffffff; } .tz-mini-red { --tz-mini-top: #ff7356; --tz-mini-mid: #dc3b27; --tz-mini-bottom: #8f2119; --tz-mini-glow: rgba(255, 95, 55, .62); --tz-mini-icon-color: #ffffff; } .tz-mini-cyan { --tz-mini-top: #32e1d4; --tz-mini-mid: #0aaea3; --tz-mini-bottom: #056e70; --tz-mini-glow: rgba(46, 208, 195, .58); --tz-mini-icon-color: #ffffff; } /* Hero Headline Startseite - Grounge Look */ .tz-hero-grunge { font-family: "Barlow Condensed", sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 0.005em; line-height: 1.05em; font-size: clamp(60px, 6vw, 76px) !important; white-space: nowrap; color: transparent; -webkit-text-fill-color: transparent; background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,.95) 0 1px, transparent 1.6px), radial-gradient(circle at 70% 60%, rgba(255,255,255,.70) 0 1px, transparent 1.8px), linear-gradient(180deg, #ffffff 0%, #d9e8f3 100%); background-size: 13px 17px, 19px 23px, 100% 100%; background-blend-mode: multiply, screen, normal; -webkit-background-clip: text; background-clip: text; text-shadow: 0 2px 8px rgba(0,0,0,.45), 0 0 18px rgba(120,210,255,.16); } @media (max-width: 1024px) { .tz-hero-grunge { font-size: clamp(42px, 6vw, 56px) !important; line-height: .94em !important; letter-spacing: .02em !important; } } @media (max-width: 767px) { .tz-hero-grunge { font-size: clamp(36px, 10vw, 46px) !important; line-height: .96em !important; letter-spacing: .018em !important; } } .tz-hero-grunge .tz-hero-accent { background-image: radial-gradient(circle at 25% 35%, rgba(255,255,255,.75) 0 1px, transparent 1.7px), radial-gradient(circle at 75% 65%, rgba(255,255,255,.45) 0 1px, transparent 1.8px), linear-gradient(180deg, #5ff3ef 0%, #1fc6cf 100%); background-size: 13px 17px, 19px 23px, 100% 100%; background-blend-mode: multiply, screen, normal; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* ========================================================= TZ Hero Scene Erste Bildschirm-Szene im bestehenden content_layer ========================================================= */ .tz-hero-scene { position: relative; width: 100%; height: 100svh; min-height: 680px; max-height: 1080px; overflow: hidden; background: transparent; } .tz-hero-inner { position: relative; width: 100%; max-width: 1440px; height: 100%; margin-inline: auto; z-index: 2; display: grid; grid-template-columns: minmax(420px, 560px) 1fr minmax(260px, 380px); grid-template-rows: 1fr; padding: clamp(90px, 12vh, 140px) clamp(42px, 6vw, 90px) clamp(54px, 8vh, 92px); box-sizing: border-box; } /* Linker Hero-Textblock */ .tz-hero-left { grid-column: 1; align-self: end; justify-self: stretch; width: 100%; min-width: 0; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-end !important; text-align: left !important; padding-bottom: clamp(110px, 14vh, 170px); margin: 0 !important; } .tz-hero-copy { position: static !important; transform: none !important; width: 560px; max-width: 560px; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; } /* Hero Headline */ .tz-hero-title .elementor-heading-title { font-family: "Barlow Condensed", sans-serif; font-size: clamp(40px, 5vw, 64px); line-height: .92em; font-weight: 800; letter-spacing: .025em; text-transform: uppercase; color: #edf6ff; margin: 0; } /* Türkis markiertes Wort */ .tz-hero-title .tz-hero-accent, .tz-hero-accent { color: #48E0E4; } /* Hero Subtext */ .tz-hero-subtext, .tz-hero-subtext p { font-family: "Inter", sans-serif; font-size: clamp(14px, 1.15vw, 16px); line-height: 1.45em; font-weight: 400; color: rgba(235,247,255,.88); max-width: 360px; margin: 0; } .tz-hero-subtext { margin-top: clamp(16px, 2vh, 22px); } /* Bullaugen-Reihe */ .tz-hero-actions { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 28px; margin-top: 32px; } /* Assistent Platzhalter rechts */ .tz-hero-assistant-placeholder { position: static !important; transform: none !important; width: 100%; min-height: 320px; pointer-events: none; } .tz-hero-center { position: absolute !important; left: 0 !important; right: 0 !important; bottom: clamp(34px, 4vh, 52px) !important; width: 100% !important; max-width: none !important; min-height: 0 !important; display: flex !important; justify-content: center !important; align-items: center !important; padding: 0 !important; margin: 0 !important; z-index: 5 !important; pointer-events: none; } .tz-scroll-hint { position: static !important; transform: none !important; width: max-content !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 8px; padding: 0 !important; margin: 0 !important; text-align: center; pointer-events: none; } .tz-scroll-icon, .tz-scroll-icon .elementor-widget-container { display: flex; justify-content: center; align-items: center; padding: 0; margin: 0; } .tz-scroll-mouse { width: 23px; height: auto; display: block; color: rgba(235,247,255,.82); filter: drop-shadow(0 0 8px rgba(120,210,255,.18)); } .tz-scroll-text, .tz-scroll-text p { margin: 0; padding: 0; font-family: "Inter", sans-serif; font-size: 10px; line-height: 1em; font-weight: 500; letter-spacing: .085em; text-transform: uppercase; color: rgba(235,247,255,.82); } .tz-scroll-mouse line { animation: tz-scroll-wheel 1.55s ease-in-out infinite; } @keyframes tz-scroll-wheel { 0% { opacity: .25; transform: translateY(0); } 45% { opacity: 1; transform: translateY(5px); } 100% { opacity: .25; transform: translateY(0); } } .tz-hero-right { grid-column: 3; align-self: end; justify-self: end; display: flex; align-items: flex-end; justify-content: flex-end; width: clamp(260px, 27vw, 360px); min-height: 320px; padding-bottom: clamp(105px, 13vh, 165px); } /* Video-Layer zwischen Hintergrund und Text */ .tz-hero-media-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .55s ease, visibility .55s ease; } .tz-hero-media-layer.is-active { opacity: 1; visibility: visible; } /* Video selbst */ .tz-hero-media-layer video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .86; } /* dezente Abdunklung, damit Text lesbar bleibt */ .tz-hero-media-layer::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 24%, rgba(255,255,255,.08), transparent 34%), linear-gradient(180deg, rgba(3,16,34,.08) 0%, rgba(2,11,24,.42) 100%); } /* ========================================================= TZ Startseite: Info-Card (Bereinigt & Optimiert) Bild liegt als Elementor-Hintergrund auf .tz-info-card ========================================================= */ /* ---------- Außenkarte ---------- */ .tz-info-card { --tz-info-color: #48E0E4; --tz-info-dark: rgb(2, 11, 24); position: relative; overflow: hidden; width: 100%; max-width: 1440px; margin-inline: auto; min-height: 150px; display: grid; grid-template-columns: minmax(420px, 38%) 1fr; align-items: stretch; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--tz-info-color) 46%, transparent); box-sizing: border-box; box-shadow: 0 0 0 1px rgba(255,255,255,.045) inset, 0 0 0 1px color-mix(in srgb, var(--tz-info-color) 12%, transparent), 0 0 28px color-mix(in srgb, var(--tz-info-color) 22%, transparent), 0 0 68px color-mix(in srgb, var(--tz-info-color) 10%, transparent), 0 18px 38px rgba(0,0,0,.30); } /* ---------- Overlay-Maske (Letzte, härtere Version) ---------- */ .tz-info-card::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background: /* linker Textbereich: stabil dunkel, kaum Glow */ radial-gradient( ellipse at 18% 56%, rgba(40,170,190,.07) 0%, rgba(40,170,190,.025) 32%, rgba(40,170,190,0) 58% ), /* Hauptmaske: links dunkel, Bildkante links enger & kräftiger, rechter Auslauf kürzer */ linear-gradient( 90deg, rgba(2,11,24,.198) 0%, rgba(2,11,24,.96) 46%, rgba(2,11,24,.98) 0%, rgba(2,11,24,.96) 46%, rgba(2,11,24,1) 51%, rgba(2,11,24,1) 55%, rgba(2,11,24,.82) 59%, rgba(2,11,24,.42) 64%, rgba(2,11,24,.14) 67%, rgba(2,11,24,0) 70%, rgba(2,11,24,0) 90%, rgba(2,11,24,.18) 91%, rgba(2,11,24,.52) 92%, rgba(2,11,24,.76) 93%, rgba(2,11,24,1) 94%, rgba(2,11,24,1) 100% ), /* oben/unten: 20px Bildrand sauber einweichen */ linear-gradient( 180deg, rgba(2,11,24,.94) 0px, rgba(2,11,24,.62) 12px, rgba(2,11,24,.18) 24px, rgba(2,11,24,0) 42px, rgba(2,11,24,0) calc(100% - 42px), rgba(2,11,24,.18) calc(100% - 24px), rgba(2,11,24,.62) calc(100% - 12px), rgba(2,11,24,.94) 100% ); } /* ---------- Innere Lichtkante ---------- */ .tz-info-card::after { content: ""; position: absolute; inset: 1px; z-index: 10; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 0 14px color-mix(in srgb, var(--tz-info-color) 34%, transparent), inset 0 0 34px rgba(255,255,255,.035); } /* Inhalte über Overlay */ .tz-info-card > * { position: relative; z-index: 2; } /* ========================================================= Textbereich links ========================================================= */ .tz-info-card-body { min-height: 150px; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 0 !important; box-sizing: border-box; /* Kombiniert aus Alt-Padding & den Zusatz-Paddings am Ende des alten Codes */ padding: 68px 36px 108px 56px; } .tz-info-card-body > .elementor-element, .tz-info-title, .tz-info-text, .tz-info-signature { display: block !important; width: 100% !important; max-width: 520px !important; flex: 0 0 auto !important; } /* Titel */ .tz-info-title, .tz-info-title h1, .tz-info-title h2, .tz-info-title h3, .tz-info-title .elementor-heading-title { margin: 0 0 12px 0 !important; font-family: "Barlow Condensed", sans-serif !important; font-size: clamp(34px, 2.8vw, 48px) !important; line-height: .95em !important; font-weight: 800 !important; letter-spacing: .065em !important; text-transform: uppercase !important; color: rgba(245,248,250,.96) !important; text-shadow: 0 1px 3px rgba(0,0,0,.38) !important; } /* Text */ .tz-info-text, .tz-info-text p { margin: 0 !important; font-family: "Inter", sans-serif !important; font-size: clamp(14px, 1.05vw, 16px) !important; line-height: 1.45em !important; font-weight: 400 !important; color: rgba(235,247,255,.86) !important; text-shadow: none !important; } .tz-info-text p + p { margin-top: 8px !important; } /* Signatur */ .tz-info-signature { margin-top: 18px !important; } .tz-info-signature, .tz-info-signature p { margin-bottom: 0 !important; font-family: "Inter", sans-serif !important; font-size: 14px !important; line-height: 1.25em !important; font-weight: 400 !important; color: rgba(235,247,255,.72) !important; text-shadow: none !important; } .tz-info-signature strong, .tz-info-signature b { display: block !important; margin-bottom: 3px !important; font-family: "Inter", sans-serif !important; font-size: 24px !important; line-height: 1.05em !important; font-weight: 800 !important; color: var(--tz-info-color) !important; text-shadow: none !important; } /* ========================================================= Rechte Seite ========================================================= */ .tz-info-visual { min-height: 150px; } /* ========================================================= Responsive Design: Tablet (max-width: 1024px) ========================================================= */ @media (max-width: 1024px) { .tz-info-card { grid-template-columns: 1fr; } .tz-info-visual { order: -1; min-height: 220px; } .tz-info-card-body { padding: 44px 28px 68px 48px; /* Angepasst an das Zusatz-Padding */ } .tz-info-card::before { background: radial-gradient( ellipse at 28% 78%, rgba(40, 170, 190, .10) 0%, rgba(40, 170, 190, .035) 38%, transparent 68% ), linear-gradient( 180deg, rgba(2, 11, 24, .08) 0%, rgba(2, 11, 24, .22) 44%, rgba(2, 11, 24, .92) 100% ); } } /* ========================================================= Responsive Design: Mobile (max-width: 767px) ========================================================= */ @media (max-width: 767px) { .tz-info-card { border-radius: 10px; } .tz-info-visual { min-height: 175px; } .tz-info-card-body { padding: 41px 21px 63px 41px; /* Angepasst für Mobile */ } .tz-info-title, .tz-info-title h1, .tz-info-title h2, .tz-info-title h3, .tz-info-title .elementor-heading-title { font-size: 26px !important; } .tz-info-text, .tz-info-text p { font-size: 13.5px !important; line-height: 1.43em !important; } .tz-info-signature strong, .tz-info-signature b { font-size: 20px !important; } } .tz-info-title{ padding-top: 20px; padding-left: 20px; } .tz-info-text{ padding-left: 20px; } .tz-info-signature{ padding-bottom: 40px; padding-left: 20px; }/* End custom CSS */