/******* Do not edit this file ******* Simple Custom CSS and JS - by Silkypress.com Saved: Oct 21 2026 | 22:14:59 */ /* ========================================================= STICKER-UND-CO MAX POWER DESIGNSYSTEM KONSOLIDIERTE GESAMTVERSION Stand: 22.07.2026 Enthalten: - Zentrales SUC-Basissystem - PLANET WOW / Geckos-Kategorie - Produkt-Landingpages - Premium-Einzelfiguren - Kompakte Empfehlungen - Miraculous Friends Forever ========================================================= */ /* SUC: Kategorie-Kacheln - Bild frei, Text kompakt darunter */ .woocommerce ul.products li.product-category>a{display:flex!important;flex-direction:column!important;height:100%!important;overflow:hidden!important;background:#fff!important;border-radius:14px!important;text-decoration:none!important} .woocommerce ul.products li.product-category>a>img{display:block!important;width:100%!important;height:auto!important;aspect-ratio:477/460!important;object-fit:contain!important;object-position:center!important;margin:0!important;background:#fff!important} .woocommerce ul.products li.product-category .woocommerce-loop-category__title{position:static!important;inset:auto!important;transform:none!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;min-height:82px!important;margin:0!important;padding:12px 10px 13px!important;background:#fff!important;color:#17223b!important;font-size:17px!important;line-height:1.22!important;font-weight:800!important;text-align:center!important;box-shadow:none!important;opacity:1!important} .woocommerce ul.products li.product-category .woocommerce-loop-category__title .count{display:block!important;margin:5px 0 0!important;padding:0!important;background:transparent!important;color:#7b8494!important;font-size:12px!important;line-height:1.2!important;font-weight:700!important;opacity:1!important} @media(max-width:767px){.woocommerce ul.products li.product-category .woocommerce-loop-category__title{min-height:76px!important;padding:10px 8px 11px!important;font-size:15px!important;line-height:1.18!important}.woocommerce ul.products li.product-category .woocommerce-loop-category__title .count{margin-top:4px!important;font-size:11px!important}} /* ---------- BASIS ---------- */ .suc-layout, .suc-layout * { box-sizing: border-box; } .suc-layout { --suc-blue: #0874d8; --suc-blue-dark: #0069c9; --suc-blue-bright: #1290e8; --suc-blue-soft: #f4faff; --suc-blue-extra-soft: #f8fcff; --suc-border: #d8e8f7; --suc-border-strong: #b8d8f3; --suc-heading: #07162f; --suc-text: #263b59; --suc-muted: #607089; --suc-white: #ffffff; --suc-warning-bg: #fff8e8; --suc-warning-border: #f0d28d; --suc-warning-text: #654800; position: relative; display: block; width: 100%; max-width: 1180px; margin: 26px auto; padding: 0 12px; clear: both; color: var(--suc-text); font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.6; } .suc-layout h1, .suc-layout h2, .suc-layout h3, .suc-layout h4, .suc-layout p { padding: 0; text-transform: none; letter-spacing: normal; } .suc-layout h1, .suc-layout h2, .suc-layout h3, .suc-layout h4 { color: var(--suc-heading); font-family: Arial, Helvetica, sans-serif; font-weight: 800; } .suc-layout p { color: var(--suc-text); } .suc-layout img { display: block; float: none; max-width: 100%; height: auto; margin: 0; border: 0; box-shadow: none; } .suc-layout a { text-decoration: none !important; box-shadow: none !important; } .suc-layout h1, .suc-layout h2, .suc-layout h3, .suc-layout p, .suc-layout span, .suc-layout strong, .suc-layout a { overflow-wrap: anywhere; } /* ---------- PLANET WOW: AUS SCHMALEM THEME-CONTAINER AUSBRECHEN ---------- */ .suc-layout.suc-planet-wow { left: 50%; width: calc(100vw - 40px); max-width: 1180px; margin-right: 0; margin-left: 0; padding-right: 0; padding-left: 0; transform: translateX(-50%); } /* ---------- ALLGEMEINE ABSCHNITTE ---------- */ .suc-section { width: 100%; margin: 0 0 22px; padding: clamp(22px, 3vw, 32px); background: var(--suc-white); border: 1px solid var(--suc-border); border-radius: 24px; } .suc-section-soft { background: linear-gradient( 180deg, var(--suc-blue-soft) 0%, var(--suc-white) 100% ); } .suc-section-title { margin: 0 0 14px; font-size: clamp(24px, 3vw, 32px); line-height: 1.22; } .suc-section-intro { max-width: 820px; margin: 0 auto 24px; text-align: center; } .suc-section-intro p { margin: 0; font-size: 15px; line-height: 1.8; } /* ---------- HERO ---------- */ .suc-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr); gap: 28px; align-items: center; width: 100%; margin: 0 0 22px; padding: clamp(24px, 3vw, 36px); background: linear-gradient( 135deg, var(--suc-blue-soft) 0%, var(--suc-white) 56%, var(--suc-blue-extra-soft) 100% ); border: 1px solid var(--suc-border); border-radius: 24px; overflow: hidden; } .suc-hero-content, .suc-hero-media { min-width: 0; } .suc-hero-title { margin: 0 0 14px; font-size: clamp(31px, 4vw, 46px); line-height: 1.1; } .suc-hero-lead { margin: 0 0 16px; font-size: clamp(16px, 2.2vw, 21px); line-height: 1.55; } .suc-hero-media { width: 100%; padding: 20px; background: var(--suc-white); border: 1px solid var(--suc-border); border-radius: 22px; text-align: center; box-shadow: 0 14px 34px rgba(8, 116, 216, 0.1); } .suc-hero-images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; } .suc-hero-image { display: flex; align-items: center; justify-content: center; height: 180px; padding: 10px; background: var(--suc-blue-extra-soft); border-radius: 15px; overflow: hidden; } .suc-hero-image img { width: 100%; height: 100%; object-fit: contain; } /* ---------- BADGES ---------- */ .suc-badge { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; margin-bottom: 14px; padding: 8px 13px; color: var(--suc-blue); background: var(--suc-white); border: 1px solid var(--suc-border); border-radius: 999px; font-size: 13px; font-weight: 900; } .suc-badge-square { border-radius: 12px; } .suc-card-badge { position: absolute; top: 13px; right: 13px; z-index: 3; padding: 7px 11px; color: #ffffff; background: var(--suc-blue); border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: 0.3px; } /* ---------- GRID ---------- */ .suc-grid { display: grid; width: 100%; gap: 16px; } .suc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .suc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .suc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .suc-grid-auto { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } /* ---------- SERIENKARTEN ---------- */ .suc-series-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-rows: 1fr; gap: 20px; width: 100%; align-items: stretch; } .suc-card { position: relative; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; float: none !important; clear: none !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 100% !important; margin: 0 !important; padding: 18px !important; color: var(--suc-text) !important; background: var(--suc-white) !important; border: 1px solid var(--suc-border) !important; border-radius: 20px !important; box-shadow: 0 9px 25px rgba(8, 116, 216, 0.08) !important; text-align: left !important; overflow: hidden !important; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .suc-card-highlight { background: linear-gradient( 180deg, var(--suc-blue-soft) 0%, var(--suc-white) 100% ) !important; border: 2px solid var(--suc-blue) !important; box-shadow: 0 15px 34px rgba(8, 116, 216, 0.15) !important; } .suc-card-image { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto; width: 100% !important; height: 235px !important; min-height: 235px !important; margin: 0 0 16px !important; padding: 14px !important; background: var(--suc-blue-extra-soft) !important; border-radius: 16px !important; overflow: hidden !important; } .suc-card-image img { display: block !important; float: none !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; margin: 0 auto !important; object-fit: contain !important; } .suc-card-kicker { display: block !important; float: none !important; width: 100% !important; margin: 0 0 8px !important; color: var(--suc-blue) !important; font-size: 12px !important; font-weight: 900 !important; line-height: 1.4 !important; letter-spacing: 0.45px !important; text-align: left !important; text-transform: uppercase !important; } .suc-card h3 { display: block !important; float: none !important; width: 100% !important; margin: 0 0 9px !important; color: var(--suc-heading) !important; font-size: 21px !important; font-weight: 800 !important; line-height: 1.28 !important; text-align: left !important; } .suc-card p { display: block !important; float: none !important; width: 100% !important; margin: 0 0 16px !important; color: var(--suc-muted) !important; font-size: 14px !important; line-height: 1.65 !important; text-align: left !important; } .suc-card-link { display: block !important; float: none !important; width: 100% !important; margin-top: auto !important; padding-top: 6px !important; color: var(--suc-blue) !important; font-size: 14px !important; font-weight: 900 !important; text-align: left !important; } @media (hover: hover) { .suc-card:hover { transform: translateY(-4px); border-color: var(--suc-border-strong) !important; box-shadow: 0 17px 36px rgba(8, 116, 216, 0.14) !important; } } /* ---------- INFO- UND TRUSTKARTEN ---------- */ .suc-trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; } .suc-trust-item { min-width: 0; padding: 14px; background: var(--suc-white); border: 1px solid var(--suc-border); border-radius: 14px; } .suc-trust-item strong, .suc-trust-item span { display: block; } .suc-trust-item strong { margin-bottom: 4px; color: var(--suc-heading); } .suc-trust-item span { color: var(--suc-muted); font-size: 13px; line-height: 1.5; } .suc-info-card { min-width: 0; padding: 18px; background: var(--suc-blue-extra-soft); border: 1px solid var(--suc-border); border-radius: 16px; } .suc-info-card strong { display: block; margin-bottom: 7px; color: var(--suc-heading); } .suc-info-card span { display: block; color: var(--suc-muted); font-size: 14px; line-height: 1.7; } /* ---------- BUTTONS ---------- */ .suc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; max-width: 100%; padding: 13px 22px; border-radius: 13px; font-size: 14px; font-weight: 900; line-height: 1.3; text-align: center; } .suc-btn-primary { color: #ffffff !important; background: linear-gradient( 135deg, var(--suc-blue-bright), var(--suc-blue-dark) ); border: 1px solid var(--suc-blue-dark); } .suc-btn-secondary { color: var(--suc-blue) !important; background: var(--suc-white); border: 1px solid var(--suc-blue); } /* ---------- HINWEIS ---------- */ .suc-note { display: flex; align-items: flex-start; gap: 12px; width: 100%; margin: 0 0 22px; padding: 18px 20px; color: var(--suc-warning-text); background: var(--suc-warning-bg); border: 1px solid var(--suc-warning-border); border-radius: 20px; } .suc-note-icon { flex: 0 0 auto; font-size: 26px; line-height: 1; } .suc-note strong { display: block; margin-bottom: 5px; } .suc-note p { margin: 0; color: var(--suc-warning-text); font-size: 14px; line-height: 1.7; } /* ---------- FAQ ---------- */ .suc-faq { border: 1px solid var(--suc-border); border-radius: 16px; overflow: hidden; } .suc-faq-item { padding: 17px; background: var(--suc-white); border-bottom: 1px solid var(--suc-border); } .suc-faq-item:last-child { border-bottom: 0; } .suc-faq-item strong { display: block; color: var(--suc-heading); } .suc-faq-item p { margin: 6px 0 0; color: var(--suc-muted); font-size: 14px; line-height: 1.7; } /* ---------- INSTAGRAM ---------- */ .suc-instagram { width: 100%; margin: 0 0 22px; padding: clamp(22px, 3vw, 30px); color: #ffffff; background: linear-gradient( 135deg, var(--suc-blue-bright), var(--suc-blue-dark) ); border-radius: 22px; text-align: center; } .suc-instagram h2, .suc-instagram p { color: #ffffff; } .suc-instagram h2 { margin: 0 0 9px; font-size: 24px; line-height: 1.3; } .suc-instagram p { margin: 0 0 15px; font-size: 15px; line-height: 1.7; } /* ---------- SICHERHEIT ---------- */ .suc-safety-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .suc-safety-card { padding: 16px; color: var(--suc-text); background: var(--suc-blue-extra-soft); border: 1px solid var(--suc-border); border-radius: 16px; font-size: 14px; line-height: 1.7; } .suc-safety-card strong { display: block; margin-bottom: 6px; color: var(--suc-heading); } /* ---------- TABLET ---------- */ @media only screen and (max-width: 960px) { .suc-layout.suc-planet-wow { width: calc(100vw - 28px); } .suc-hero { grid-template-columns: 1fr 1fr; gap: 20px; padding: 24px; } .suc-series-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .suc-grid-4, .suc-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- SMARTPHONE ---------- */ @media only screen and (max-width: 767px) { .suc-layout, .suc-layout.suc-planet-wow { left: auto; width: 100%; max-width: 100%; margin: 16px 0 24px; padding: 0 4px; transform: none; } .suc-hero { grid-template-columns: 1fr; gap: 18px; padding: 18px; border-radius: 20px; } .suc-hero-title { font-size: 29px; line-height: 1.15; } .suc-hero-images { grid-template-columns: repeat(2, minmax(0, 1fr)); } .suc-hero-image { height: 160px; } .suc-section { padding: 18px; border-radius: 20px; } .suc-section-title { font-size: 25px; line-height: 1.22; } .suc-series-grid, .suc-grid-2, .suc-grid-3, .suc-grid-4, .suc-grid-auto { grid-template-columns: 1fr !important; } .suc-card-image { height: 245px !important; min-height: 245px !important; } .suc-btn { width: 100%; } } /* ---------- KLEINE SMARTPHONES ---------- */ @media only screen and (max-width: 420px) { .suc-layout, .suc-layout.suc-planet-wow { padding-right: 0; padding-left: 0; } .suc-hero, .suc-section { padding: 16px; } .suc-hero-title { font-size: 27px; } .suc-section-title { font-size: 23px; } .suc-card { padding: 15px !important; } .suc-card-image { height: 210px !important; min-height: 210px !important; } } /* ========================================================= GECKOS NEXT LEVEL – KATEGORIEERWEITERUNG Diesen Block unten an das bestehende zentrale CSS anhängen. Wirkt nur innerhalb von .suc-geckos-next-level ========================================================= */ .suc-layout.suc-geckos-next-level { left: 50%; width: calc(100vw - 40px); max-width: 1180px; margin-right: 0; margin-left: 0; padding-right: 0; padding-left: 0; transform: translateX(-50%); } .suc-geckos-next-level .suc-product-choice-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; } .suc-geckos-next-level .suc-choice-card { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%; padding: 16px; background: #ffffff; border: 1px solid #d8e8f7; border-radius: 18px; box-shadow: 0 8px 22px rgba(8,116,216,.07); } .suc-geckos-next-level .suc-choice-card-highlight { background: #f4faff; border: 2px solid #0874d8; box-shadow: 0 14px 30px rgba(8,116,216,.14); } .suc-geckos-next-level .suc-choice-image { display: flex; align-items: center; justify-content: center; width: 100%; height: 210px; margin: 0 0 14px; padding: 10px; background: #f8fcff; border-radius: 14px; overflow: hidden; } .suc-geckos-next-level .suc-choice-card-highlight .suc-choice-image { background: #ffffff; } .suc-geckos-next-level .suc-choice-image img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; } .suc-geckos-next-level .suc-choice-content { display: flex; flex: 1; flex-direction: column; } .suc-geckos-next-level .suc-choice-kicker { display: block; margin: 0 0 8px; color: #0874d8; font-size: 12px; font-weight: 900; line-height: 1.4; letter-spacing: .5px; text-transform: uppercase; } .suc-geckos-next-level .suc-choice-card h3 { margin: 0 0 8px; color: #07162f; font-size: 20px; line-height: 1.3; } .suc-geckos-next-level .suc-choice-card p { margin: 0 0 16px; color: #607089; font-size: 14px; line-height: 1.65; } .suc-geckos-next-level .suc-choice-card .suc-btn { width: 100%; margin-top: auto; } .suc-geckos-next-level .suc-effect-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .suc-geckos-next-level .suc-effect-card { min-width: 0; padding: 18px; background: #ffffff; border: 1px solid #d8e8f7; border-radius: 16px; } .suc-geckos-next-level .suc-effect-card-highlight { background: #f4faff; border: 2px solid #0874d8; } .suc-geckos-next-level .suc-effect-card strong { display: block; margin-bottom: 7px; color: #07162f; } .suc-geckos-next-level .suc-effect-card span { display: block; color: #607089; font-size: 14px; line-height: 1.7; } .suc-geckos-next-level .suc-link-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .suc-geckos-next-level .suc-link-card { display: block; padding: 18px; color: #102033 !important; background: #ffffff; border: 1px solid #d8e8f7; border-radius: 16px; font-weight: 900; } @media (hover:hover) { .suc-geckos-next-level .suc-choice-card:hover, .suc-geckos-next-level .suc-link-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(8,116,216,.13); } } @media only screen and (max-width: 960px) { .suc-layout.suc-geckos-next-level { width: calc(100vw - 28px); } .suc-geckos-next-level .suc-product-choice-grid, .suc-geckos-next-level .suc-link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .suc-geckos-next-level .suc-effect-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media only screen and (max-width: 767px) { .suc-layout.suc-geckos-next-level { left: auto; width: 100%; max-width: 100%; margin: 16px 0 24px; padding: 0 4px; transform: none; } .suc-geckos-next-level .suc-product-choice-grid, .suc-geckos-next-level .suc-effect-grid, .suc-geckos-next-level .suc-link-grid { grid-template-columns: 1fr; } .suc-geckos-next-level .suc-choice-image { height: 235px; } } @media only screen and (max-width: 420px) { .suc-geckos-next-level .suc-choice-card { padding: 14px; } .suc-geckos-next-level .suc-choice-image { height: 205px; } } /* ========================================================= PRODUKT-LANDINGPAGE IM STIL DER PANINI-VORLAGE Wirkt nur innerhalb von .suc-product-page ========================================================= */ .suc-layout.suc-product-page { position: relative !important; left: 50% !important; display: block !important; width: calc(100vw - 40px) !important; max-width: 1080px !important; margin: 24px 0 !important; padding: 0 12px !important; transform: translateX(-50%) !important; float: none !important; clear: both !important; } .suc-product-page, .suc-product-page * { box-sizing: border-box; } /* HERO */ .suc-product-page .suc-product-landing-hero { width: 100% !important; margin: 0 0 18px !important; padding: clamp(18px,3vw,26px) !important; background: #ffffff !important; border: 1px solid #d8e8f7 !important; border-radius: 22px !important; box-shadow: 0 10px 26px rgba(17,119,183,.08) !important; } .suc-product-page .suc-product-landing-grid { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 22px !important; align-items: center !important; } .suc-product-page .suc-product-landing-media { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; min-height: 390px !important; padding: clamp(16px,2.5vw,20px) !important; background: linear-gradient(180deg,#f4fbff 0%,#ffffff 100%) !important; border-radius: 18px !important; text-align: center !important; overflow: hidden !important; } .suc-product-page .suc-product-landing-media img { display: block !important; float: none !important; width: 100% !important; height: 100% !important; max-width: 430px !important; max-height: 360px !important; margin: 0 auto !important; object-fit: contain !important; filter: drop-shadow(0 14px 24px rgba(0,0,0,.18)) !important; } .suc-product-page .suc-product-orange-badge { position: absolute !important; top: 12px !important; left: 12px !important; z-index: 2 !important; padding: 10px 12px !important; color: #ffffff !important; background: linear-gradient(135deg,#ffb300,#f07a00) !important; border-radius: 999px !important; box-shadow: 0 8px 18px rgba(240,122,0,.25) !important; font-size: 12px !important; font-weight: 800 !important; line-height: 1.2 !important; } .suc-product-page .suc-product-landing-copy { display: block !important; min-width: 0 !important; } .suc-product-page .suc-product-landing-title { margin: 0 0 10px !important; color: #07162f !important; font-size: clamp(28px,4vw,34px) !important; font-weight: 900 !important; line-height: 1.15 !important; } .suc-product-page .suc-product-landing-lead { margin: 0 0 14px !important; color: #263b59 !important; font-size: clamp(17px,2.6vw,20px) !important; line-height: 1.4 !important; } .suc-product-page .suc-product-stock-pill { display: inline-block !important; margin: 0 0 14px !important; padding: 10px 14px !important; color: #6a4100 !important; background: #fff8e8 !important; border: 1px solid #f1d08c !important; border-radius: 12px !important; font-size: 14px !important; font-weight: 800 !important; } .suc-product-page .suc-product-landing-facts { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 10px !important; margin: 0 0 18px !important; } .suc-product-page .suc-product-landing-fact { min-width: 0 !important; padding: 13px !important; background: #f8fcff !important; border: 1px solid #d8e8f7 !important; border-radius: 14px !important; color: #263b59 !important; font-size: 13px !important; line-height: 1.5 !important; } .suc-product-page .suc-product-landing-fact strong { display: block !important; margin-bottom: 4px !important; color: #07162f !important; } /* PREISBOX */ .suc-product-page .suc-product-pricebox { padding: clamp(16px,2.5vw,18px) !important; background: #ffffff !important; border: 1px solid #d8e8f7 !important; border-radius: 18px !important; box-shadow: 0 10px 24px rgba(17,119,183,.08) !important; } .suc-product-page .suc-product-pricebox-row { display: flex !important; flex-wrap: wrap !important; gap: 14px !important; align-items: center !important; justify-content: space-between !important; } .suc-product-page .suc-product-price { margin: 0 0 6px !important; color: #0874d8 !important; font-size: clamp(32px,5vw,40px) !important; font-weight: 900 !important; line-height: 1 !important; } .suc-product-page .suc-product-saving { margin: 0 0 4px !important; color: #0c8c4f !important; font-size: 14px !important; font-weight: 900 !important; } .suc-product-page .suc-product-price-note { color: #607089 !important; font-size: 14px !important; line-height: 1.5 !important; } .suc-product-page .suc-product-order-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 48px !important; padding: 16px 26px !important; color: #ffffff !important; background: linear-gradient(135deg,#1290e8 0%,#0069c9 100%) !important; border: 0 !important; border-radius: 14px !important; box-shadow: 0 14px 28px rgba(0,105,201,.25) !important; font-size: 17px !important; font-weight: 800 !important; line-height: 1.2 !important; text-decoration: none !important; } /* CONTENT BOXES */ .suc-product-page .suc-product-box { width: 100% !important; margin: 0 0 18px !important; padding: clamp(18px,3vw,24px) !important; background: #ffffff !important; border: 1px solid #d8e8f7 !important; border-radius: 22px !important; box-shadow: 0 10px 26px rgba(17,119,183,.06) !important; } .suc-product-page .suc-product-box-soft { background: #f4faff !important; box-shadow: none !important; } .suc-product-page .suc-product-box-warning { background: #fff8e8 !important; border-color: #f1d08c !important; box-shadow: none !important; } .suc-product-page .suc-product-two-columns { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 18px !important; margin: 0 0 18px !important; } .suc-product-page .suc-product-detail-table { overflow: hidden !important; border: 1px solid #d8e8f7 !important; border-radius: 16px !important; } .suc-product-page .suc-product-detail-row { display: grid !important; grid-template-columns: minmax(92px,34%) minmax(0,66%) !important; border-bottom: 1px solid #d8e8f7 !important; } .suc-product-page .suc-product-detail-row:last-child { border-bottom: 0 !important; } .suc-product-page .suc-product-detail-label, .suc-product-page .suc-product-detail-value { padding: 12px !important; font-size: 14px !important; line-height: 1.6 !important; } .suc-product-page .suc-product-detail-label { background: #f3f7fc !important; color: #07162f !important; font-weight: 800 !important; } .suc-product-page .suc-product-benefit-list { display: grid !important; gap: 12px !important; } .suc-product-page .suc-product-benefit { padding: 14px !important; color: #263b59 !important; background: #f8fcff !important; border: 1px solid #d8e8f7 !important; border-radius: 14px !important; font-size: 14px !important; line-height: 1.7 !important; } .suc-product-page .suc-product-benefit strong { display: block !important; margin-bottom: 3px !important; color: #07162f !important; } @media only screen and (max-width:960px) { .suc-layout.suc-product-page { width: calc(100vw - 28px) !important; } .suc-product-page .suc-product-landing-grid { grid-template-columns: 1fr 1fr !important; } .suc-product-page .suc-product-landing-facts { grid-template-columns: 1fr !important; } } @media only screen and (max-width:767px) { .suc-layout.suc-product-page { left: auto !important; width: 100% !important; max-width: 100% !important; margin: 16px 0 24px !important; padding: 0 4px !important; transform: none !important; } .suc-product-page .suc-product-landing-grid, .suc-product-page .suc-product-two-columns { grid-template-columns: 1fr !important; } .suc-product-page .suc-product-landing-media { min-height: 330px !important; } .suc-product-page .suc-product-pricebox-row { align-items: stretch !important; } .suc-product-page .suc-product-order-button { width: 100% !important; } } /* ========================================================= GECKOS NEXT LEVEL – KOMPAKTER EMPFEHLUNGSBLOCK Wirkt nur innerhalb von .suc-product-page ========================================================= */ .suc-product-page .suc-recommendations { overflow: hidden; } .suc-product-page .suc-recommendations .suc-section-intro { margin-bottom: 20px; } .suc-product-page .suc-recommend-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; width: 100% !important; align-items: stretch !important; } .suc-product-page .suc-recommend-card { display: grid !important; grid-template-columns: 112px minmax(0, 1fr) !important; gap: 16px !important; align-items: center !important; width: 100% !important; min-width: 0 !important; min-height: 150px !important; padding: 14px !important; color: #263b59 !important; background: #ffffff !important; border: 1px solid #d8e8f7 !important; border-radius: 17px !important; box-shadow: 0 8px 20px rgba(8,116,216,.07) !important; text-decoration: none !important; overflow: hidden !important; } .suc-product-page .suc-recommend-card-highlight { border: 2px solid #0874d8 !important; background: linear-gradient(180deg,#f4faff 0%,#ffffff 100%) !important; } .suc-product-page .suc-recommend-image { display: flex !important; align-items: center !important; justify-content: center !important; width: 112px !important; height: 112px !important; padding: 7px !important; background: #f8fcff !important; border-radius: 13px !important; overflow: hidden !important; } .suc-product-page .suc-recommend-image img { display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; margin: 0 !important; object-fit: contain !important; } .suc-product-page .suc-recommend-content { display: flex !important; flex-direction: column !important; min-width: 0 !important; height: 100% !important; } .suc-product-page .suc-recommend-kicker { display: block !important; margin: 0 0 5px !important; color: #0874d8 !important; font-size: 11px !important; font-weight: 900 !important; line-height: 1.3 !important; letter-spacing: .35px !important; text-transform: uppercase !important; } .suc-product-page .suc-recommend-card h3 { margin: 0 0 6px !important; color: #07162f !important; font-size: 17px !important; font-weight: 900 !important; line-height: 1.25 !important; } .suc-product-page .suc-recommend-card p { margin: 0 0 8px !important; color: #607089 !important; font-size: 13px !important; line-height: 1.5 !important; } .suc-product-page .suc-recommend-link { display: block !important; margin-top: auto !important; color: #0874d8 !important; font-size: 13px !important; font-weight: 900 !important; } .suc-product-page .suc-recommend-all { margin-top: 18px !important; text-align: center !important; } @media (hover:hover) { .suc-product-page .suc-recommend-card:hover { transform: translateY(-3px) !important; border-color: #9ccaf0 !important; box-shadow: 0 14px 28px rgba(8,116,216,.12) !important; } } @media only screen and (max-width: 767px) { .suc-product-page .suc-recommend-grid { grid-template-columns: 1fr !important; } .suc-product-page .suc-recommend-card { grid-template-columns: 88px minmax(0,1fr) !important; min-height: 122px !important; padding: 12px !important; } .suc-product-page .suc-recommend-image { width: 88px !important; height: 88px !important; } .suc-product-page .suc-recommend-card h3 { font-size: 16px !important; } .suc-product-page .suc-recommend-card p { font-size: 12px !important; } } @media only screen and (max-width: 420px) { .suc-product-page .suc-recommend-card { grid-template-columns: 76px minmax(0,1fr) !important; gap: 11px !important; } .suc-product-page .suc-recommend-image { width: 76px !important; height: 76px !important; } } /* SUC PREMIUM PRODUCT – ausschließlich innerhalb der Premium-Produktseite */ .suc-product-page.suc-premium-product{--pp-blue:#0874d8;--pp-blue-dark:#0064bd;--pp-soft:#f2f8fd;--pp-navy:#07162f;--pp-text:#263b59;--pp-muted:#607089;--pp-border:#d8e8f7;--pp-green:#0c8c4f;width:100%} .suc-product-page.suc-premium-product,.suc-product-page.suc-premium-product *{box-sizing:border-box} .suc-premium-product .suc-premium-hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:26px;margin:0 0 18px;padding:22px;background:radial-gradient(circle at 0 0,rgba(8,116,216,.09),transparent 34%),linear-gradient(135deg,#fff 0%,#f8fcff 100%);border:1px solid var(--pp-border);border-radius:24px;box-shadow:0 16px 40px rgba(8,116,216,.09)} .suc-premium-product .suc-premium-gallery,.suc-premium-product .suc-premium-copy{min-width:0} .suc-premium-product .suc-premium-main-image{position:relative;display:flex;align-items:center;justify-content:center;min-height:440px;padding:18px;background:#fff;border:1px solid var(--pp-border);border-radius:20px;overflow:hidden} .suc-premium-product .suc-premium-main-image img{width:100%;height:100%;max-height:405px;object-fit:contain} .suc-premium-product .suc-premium-badge{position:absolute;top:14px;left:14px;z-index:2;padding:9px 13px;color:#fff;background:linear-gradient(135deg,#ffae00,#ef7d00);border-radius:999px;font-size:12px;font-weight:900;box-shadow:0 8px 18px rgba(239,125,0,.22)} .suc-premium-product .suc-premium-thumbs{display:flex;gap:10px;margin-top:10px}.suc-premium-product .suc-premium-thumb{width:76px;height:76px;padding:5px;background:#fff;border:1px solid var(--pp-border);border-radius:12px;overflow:hidden}.suc-premium-product .suc-premium-thumb.is-active{border:2px solid var(--pp-blue)}.suc-premium-product .suc-premium-thumb img{width:100%;height:100%;object-fit:contain} .suc-premium-product .suc-premium-copy{display:flex;flex-direction:column;justify-content:center}.suc-premium-product .suc-premium-eyebrow{display:block;margin-bottom:8px;color:var(--pp-blue);font-size:12px;font-weight:900;letter-spacing:.5px;text-transform:uppercase}.suc-premium-product .suc-premium-title{margin:0 0 10px;color:var(--pp-navy);font-size:clamp(32px,4.2vw,48px);line-height:1.05}.suc-premium-product .suc-premium-subtitle{margin:0 0 16px;color:var(--pp-text);font-size:18px;line-height:1.55} .suc-premium-product .suc-premium-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}.suc-premium-product .suc-premium-pills span{padding:8px 11px;color:var(--pp-blue-dark);background:#fff;border:1px solid var(--pp-border);border-radius:999px;font-size:12px;font-weight:900} .suc-premium-product .suc-premium-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:18px}.suc-premium-product .suc-premium-checks div{color:var(--pp-text);font-size:14px;line-height:1.45} .suc-premium-product .suc-premium-buybox{padding:18px;background:#fff;border:1px solid var(--pp-border);border-radius:18px;box-shadow:0 12px 30px rgba(8,116,216,.08)}.suc-premium-product .suc-premium-stock{display:flex;align-items:center;gap:8px;margin-bottom:8px;color:var(--pp-green);font-size:13px;font-weight:900}.suc-premium-product .suc-premium-stock i,.suc-premium-product .suc-premium-stock .suc-premium-dot{display:inline-block;width:9px;height:9px;flex:0 0 9px;background:var(--pp-green);border-radius:50%;box-shadow:0 0 0 4px rgba(12,140,79,.12)}.suc-premium-product .suc-premium-price{color:var(--pp-blue);font-size:40px;font-weight:900;line-height:1}.suc-premium-product .suc-premium-price-note{margin-top:7px;color:var(--pp-muted);font-size:13px} .suc-premium-product .suc-premium-buybutton{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin-top:15px;padding:14px 18px;color:#fff!important;background:linear-gradient(135deg,var(--pp-blue),var(--pp-blue-dark));border-radius:14px;font-size:16px;font-weight:900;text-decoration:none!important;box-shadow:0 12px 26px rgba(0,100,189,.22)}.suc-premium-product .suc-premium-microtrust{margin-top:10px;color:var(--pp-muted);font-size:12px;text-align:center} .suc-premium-product .suc-premium-trustbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px}.suc-premium-product .suc-premium-trustbar div{padding:14px;background:#fff;border:1px solid var(--pp-border);border-radius:14px}.suc-premium-product .suc-premium-trustbar strong,.suc-premium-product .suc-premium-trustbar span{display:block}.suc-premium-product .suc-premium-trustbar strong{color:var(--pp-navy);font-size:14px}.suc-premium-product .suc-premium-trustbar span{margin-top:3px;color:var(--pp-muted);font-size:12px} /* bestehende Inhaltsbereiche optisch angleichen */ .suc-premium-product .suc-product-box,.suc-premium-product .suc-section,.suc-premium-product .suc-instagram{box-shadow:0 10px 26px rgba(8,116,216,.055)} .suc-premium-product .suc-card{border-radius:18px!important;box-shadow:0 10px 24px rgba(8,116,216,.08)!important}.suc-premium-product .suc-card-image{height:220px!important}.suc-premium-product .suc-card h3{font-size:20px!important} @media (hover:hover){.suc-premium-product .suc-premium-buybutton:hover{filter:brightness(.97)}.suc-premium-product .suc-card:hover{transform:translateY(-4px)!important;box-shadow:0 17px 36px rgba(8,116,216,.14)!important}} @media only screen and (max-width:960px){.suc-premium-product .suc-premium-hero{grid-template-columns:1fr 1fr}.suc-premium-product .suc-premium-trustbar{grid-template-columns:repeat(2,minmax(0,1fr))}} @media only screen and (max-width:767px){.suc-premium-product .suc-premium-hero{grid-template-columns:1fr;padding:16px;border-radius:18px}.suc-premium-product .suc-premium-main-image{min-height:320px}.suc-premium-product .suc-premium-main-image img{max-height:290px}.suc-premium-product .suc-premium-title{font-size:31px}.suc-premium-product .suc-premium-checks{grid-template-columns:1fr}.suc-premium-product .suc-premium-trustbar{grid-template-columns:repeat(2,minmax(0,1fr))}.suc-premium-product .suc-card-image{height:245px!important}} @media only screen and (max-width:420px){.suc-premium-product .suc-premium-trustbar{grid-template-columns:1fr}.suc-premium-product .suc-premium-price{font-size:36px}} /* ========================================================= SUC PREMIUM PRODUCT – VOLLSTÄNDIGE INHALTSBEREICHE Gehört zum zentralen Designsystem. Wirkt nur innerhalb von .suc-product-page.suc-premium-product ========================================================= */ /* ---------- GEÖFFNETE TÜTE / HINWEIS ---------- */ .suc-premium-product .suc-premium-warning { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 18px; align-items: center; width: 100%; margin: 0 0 22px; padding: 20px 22px; background: linear-gradient(135deg, #fffaf0, #ffffff); border: 1px solid #f3d59b; border-radius: 18px; box-shadow: 0 10px 26px rgba(177, 112, 0, .07); } .suc-premium-product .suc-premium-warning-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: #ffffff; background: linear-gradient(135deg, #f4a000, #e07800); border-radius: 50%; font-size: 25px; font-weight: 900; } .suc-premium-product .suc-premium-warning h2 { margin: 0 0 6px; color: var(--pp-navy); font-size: 21px; line-height: 1.25; } .suc-premium-product .suc-premium-warning p { margin: 0; color: var(--pp-text); font-size: 15px; line-height: 1.65; } /* ---------- STORY / ARTENPORTRÄT ---------- */ .suc-premium-product .suc-premium-story { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 28px; align-items: center; width: 100%; margin: 0 0 22px; padding: 24px; background: #ffffff; border: 1px solid var(--pp-border); border-radius: 22px; box-shadow: 0 14px 34px rgba(8, 116, 216, .07); } .suc-premium-product .suc-premium-story-image { min-width: 0; overflow: hidden; background: var(--pp-soft); border-radius: 18px; } .suc-premium-product .suc-premium-story-image img { display: block; width: 100%; height: 410px; object-fit: contain; } .suc-premium-product .suc-premium-section-kicker { display: block; margin-bottom: 7px; color: var(--pp-blue); font-size: 12px; font-weight: 900; letter-spacing: .55px; text-transform: uppercase; } .suc-premium-product .suc-premium-story h2, .suc-premium-product .suc-premium-panel h2, .suc-premium-product .suc-premium-section-head h2, .suc-premium-product .suc-premium-display h2, .suc-premium-product .suc-premium-instagram h2, .suc-premium-product .suc-premium-safety h2 { margin: 0 0 12px; color: var(--pp-navy); font-size: clamp(25px, 3vw, 34px); line-height: 1.15; } .suc-premium-product .suc-premium-story p, .suc-premium-product .suc-premium-section-head p, .suc-premium-product .suc-premium-display p, .suc-premium-product .suc-premium-instagram p, .suc-premium-product .suc-premium-safety p { color: var(--pp-text); font-size: 15px; line-height: 1.7; } .suc-premium-product .suc-premium-species { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; } .suc-premium-product .suc-premium-species div { padding: 13px 14px; background: var(--pp-soft); border: 1px solid var(--pp-border); border-radius: 13px; } .suc-premium-product .suc-premium-species strong, .suc-premium-product .suc-premium-species span { display: block; } .suc-premium-product .suc-premium-species strong { margin-bottom: 4px; color: var(--pp-muted); font-size: 11px; text-transform: uppercase; } .suc-premium-product .suc-premium-species span { color: var(--pp-navy); font-size: 14px; font-weight: 800; } /* ---------- DETAILS UND VORTEILE ---------- */ .suc-premium-product .suc-premium-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; width: 100%; margin: 0 0 22px; } .suc-premium-product .suc-premium-panel { min-width: 0; padding: 22px; background: #ffffff; border: 1px solid var(--pp-border); border-radius: 20px; box-shadow: 0 12px 30px rgba(8, 116, 216, .06); } .suc-premium-product .suc-premium-table { display: grid; gap: 0; overflow: hidden; border: 1px solid var(--pp-border); border-radius: 14px; } .suc-premium-product .suc-premium-table div { display: grid; grid-template-columns: minmax(130px, .72fr) minmax(0, 1.28fr); gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--pp-border); } .suc-premium-product .suc-premium-table div:last-child { border-bottom: 0; } .suc-premium-product .suc-premium-table span { color: var(--pp-muted); font-size: 13px; } .suc-premium-product .suc-premium-table strong { color: var(--pp-navy); font-size: 13px; text-align: right; overflow-wrap: anywhere; } .suc-premium-product .suc-premium-benefits { display: grid; gap: 10px; } .suc-premium-product .suc-premium-benefits div { padding: 14px; background: var(--pp-soft); border: 1px solid var(--pp-border); border-radius: 14px; } .suc-premium-product .suc-premium-benefits b, .suc-premium-product .suc-premium-benefits span { display: block; } .suc-premium-product .suc-premium-benefits b { margin-bottom: 5px; color: var(--pp-navy); font-size: 15px; } .suc-premium-product .suc-premium-benefits span { color: var(--pp-text); font-size: 13px; line-height: 1.55; } /* ---------- EMPFOHLENE GECKOS-PRODUKTE ---------- */ .suc-premium-product .suc-premium-related, .suc-premium-product .suc-premium-faq { width: 100%; margin: 0 0 22px; padding: 24px; background: #ffffff; border: 1px solid var(--pp-border); border-radius: 22px; box-shadow: 0 14px 34px rgba(8, 116, 216, .06); } .suc-premium-product .suc-premium-section-head { max-width: 760px; margin-bottom: 20px; } .suc-premium-product .suc-premium-section-head p { margin: 0; } .suc-premium-product .suc-premium-cardgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; } .suc-premium-product .suc-premium-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; color: inherit !important; background: #ffffff; border: 1px solid var(--pp-border); border-radius: 18px; text-decoration: none !important; box-shadow: 0 10px 24px rgba(8, 116, 216, .07); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .suc-premium-product .suc-premium-card-image { display: flex; align-items: center; justify-content: center; height: 235px; padding: 14px; background: linear-gradient(180deg, #f7fbff, #ffffff); } .suc-premium-product .suc-premium-card-image img { width: 100%; height: 100%; object-fit: contain; } .suc-premium-product .suc-premium-card-body { display: flex; flex: 1; flex-direction: column; padding: 17px; } .suc-premium-product .suc-premium-card-body > span { color: var(--pp-blue); font-size: 11px; font-weight: 900; text-transform: uppercase; } .suc-premium-product .suc-premium-card h3 { margin: 5px 0 7px; color: var(--pp-navy); font-size: 21px !important; } .suc-premium-product .suc-premium-card p { flex: 1; margin: 0 0 12px; color: var(--pp-text); font-size: 13px; line-height: 1.6; } .suc-premium-product .suc-premium-card b { color: var(--pp-blue); font-size: 13px; } .suc-premium-product .suc-premium-display { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-top: 18px; padding: 20px 22px; background: linear-gradient(135deg, var(--pp-navy), #0c2c55); border-radius: 18px; } .suc-premium-product .suc-premium-display h2, .suc-premium-product .suc-premium-display p { color: #ffffff; } .suc-premium-product .suc-premium-display p { margin: 0; opacity: .85; } .suc-premium-product .suc-premium-display a { flex: 0 0 auto; padding: 13px 17px; color: var(--pp-navy) !important; background: #ffffff; border-radius: 12px; font-weight: 900; text-decoration: none !important; } /* ---------- FAQ ---------- */ .suc-premium-product .suc-premium-faq details { margin-bottom: 10px; overflow: hidden; background: var(--pp-soft); border: 1px solid var(--pp-border); border-radius: 14px; } .suc-premium-product .suc-premium-faq details:last-child { margin-bottom: 0; } .suc-premium-product .suc-premium-faq summary { padding: 15px 17px; color: var(--pp-navy); font-size: 15px; font-weight: 900; cursor: pointer; } .suc-premium-product .suc-premium-faq details p { margin: 0; padding: 0 17px 16px; color: var(--pp-text); font-size: 14px; line-height: 1.65; } /* ---------- INSTAGRAM ---------- */ .suc-premium-product .suc-premium-instagram { display: flex; align-items: center; justify-content: space-between; gap: 22px; width: 100%; margin: 0 0 22px; padding: 23px; background: linear-gradient(135deg, #f5f0ff, #fff5fb); border: 1px solid #e9d9f6; border-radius: 20px; } .suc-premium-product .suc-premium-instagram span { color: #a43bb6; font-size: 12px; font-weight: 900; text-transform: uppercase; } .suc-premium-product .suc-premium-instagram p { margin: 0; } .suc-premium-product .suc-premium-instagram a { flex: 0 0 auto; padding: 13px 18px; color: #ffffff !important; background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); border-radius: 13px; font-weight: 900; text-decoration: none !important; } /* ---------- HERSTELLER UND SICHERHEIT ---------- */ .suc-premium-product .suc-premium-safety { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; width: 100%; margin-bottom: 22px; } .suc-premium-product .suc-premium-safety > div { min-width: 0; padding: 20px; background: #ffffff; border: 1px solid var(--pp-border); border-radius: 18px; } .suc-premium-product .suc-premium-safety h2 { font-size: 20px; } .suc-premium-product .suc-premium-safety p { margin: 0; font-size: 14px; } .suc-premium-product .suc-premium-safety-note { grid-column: 1 / -1; background: #fff8ed !important; border-color: #f1d5a6 !important; } .suc-premium-product .suc-premium-safety-note strong { display: block; margin-bottom: 6px; color: #9b5800; font-size: 15px; } @media (hover: hover) { .suc-premium-product .suc-premium-card:hover { transform: translateY(-4px); border-color: #9ccaf0; box-shadow: 0 17px 36px rgba(8, 116, 216, .14); } } /* ---------- PREMIUM RESPONSIVE ---------- */ @media only screen and (max-width: 960px) { .suc-premium-product .suc-premium-story { grid-template-columns: 1fr; } .suc-premium-product .suc-premium-story-image img { height: 350px; } .suc-premium-product .suc-premium-cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media only screen and (max-width: 767px) { .suc-premium-product .suc-premium-warning { grid-template-columns: 42px minmax(0, 1fr); padding: 16px; } .suc-premium-product .suc-premium-warning-icon { width: 40px; height: 40px; font-size: 21px; } .suc-premium-product .suc-premium-story, .suc-premium-product .suc-premium-related, .suc-premium-product .suc-premium-faq { padding: 17px; border-radius: 18px; } .suc-premium-product .suc-premium-story-image img { height: 290px; } .suc-premium-product .suc-premium-split, .suc-premium-product .suc-premium-safety { grid-template-columns: 1fr; } .suc-premium-product .suc-premium-safety-note { grid-column: auto; } .suc-premium-product .suc-premium-cardgrid { grid-template-columns: 1fr; } .suc-premium-product .suc-premium-card-image { height: 250px; } .suc-premium-product .suc-premium-display, .suc-premium-product .suc-premium-instagram { align-items: flex-start; flex-direction: column; } .suc-premium-product .suc-premium-species { grid-template-columns: 1fr; } } @media only screen and (max-width: 420px) { .suc-premium-product .suc-premium-table div { grid-template-columns: 1fr; gap: 4px; } .suc-premium-product .suc-premium-table strong { text-align: left; } } /* ========================================================= MIRACULOUS FRIENDS FOREVER – KATEGORIEERWEITERUNG Ergänzung für das vorhandene SUC Max Power Designsystem Wirkt ausschließlich innerhalb von .suc-miraculous ========================================================= */ .suc-layout.suc-miraculous { --suc-blue: #ec0872; --suc-blue-dark: #b80056; --suc-blue-bright: #ff2d8d; --suc-blue-soft: #fff1f8; --suc-blue-extra-soft: #fff8fc; --suc-border: #f2c9dd; --suc-border-strong: #ec8fbb; --suc-heading: #24101b; --suc-text: #493542; --suc-muted: #75616d; left: 50%; width: calc(100vw - 40px); max-width: 1180px; margin-right: 0; margin-left: 0; padding-right: 0; padding-left: 0; transform: translateX(-50%); } /* ---------- MIRACULOUS HERO ---------- */ .suc-miraculous .suc-miraculous-hero { position: relative; display: grid; grid-template-columns: minmax(0, .88fr) minmax(400px, 1.12fr); gap: 24px; align-items: center; min-height: 490px; margin: 0 0 22px; padding: clamp(26px, 4vw, 48px); color: #ffffff; background: radial-gradient( circle at 77% 22%, rgba(255,255,255,.28), transparent 24% ), radial-gradient( circle at 15% 20%, rgba(255,210,232,.18), transparent 23% ), linear-gradient( 125deg, #760037 0%, #c00059 40%, #f10a75 72%, #ff70ad 100% ); border: 1px solid rgba(255,255,255,.22); border-radius: 26px; box-shadow: 0 18px 44px rgba(111,0,49,.2); overflow: hidden; isolation: isolate; } .suc-miraculous .suc-miraculous-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .27; background-image: radial-gradient(circle, #ffffff 0 2px, transparent 2.5px), radial-gradient(circle, #ffffff 0 1px, transparent 1.5px); background-position: 0 0, 28px 38px; background-size: 70px 70px, 96px 96px; } .suc-miraculous .suc-miraculous-hero::after { content: ""; position: absolute; right: -130px; bottom: -235px; z-index: -1; width: 650px; height: 650px; border: 7px solid rgba(255,255,255,.13); border-radius: 50%; box-shadow: 0 0 0 30px rgba(255,255,255,.025), 0 0 95px rgba(255,255,255,.15); } .suc-miraculous .suc-miraculous-copy { position: relative; z-index: 4; min-width: 0; } .suc-miraculous .suc-miraculous-copy .suc-badge { color: #ffffff; background: rgba(0,0,0,.22); border-color: rgba(255,255,255,.3); } .suc-miraculous .suc-miraculous-title { margin: 0 0 16px; color: #ffffff; font-size: clamp(38px, 5vw, 64px); line-height: 1; letter-spacing: -1.8px; text-shadow: 0 8px 22px rgba(65,0,29,.28); } .suc-miraculous .suc-miraculous-title span { display: block; margin-top: 8px; color: #ffd9eb; font-size: .57em; line-height: 1.12; } .suc-miraculous .suc-miraculous-lead { max-width: 590px; margin: 0 0 22px; color: rgba(255,255,255,.93); font-size: clamp(16px, 2vw, 20px); line-height: 1.55; } .suc-miraculous .suc-miraculous-hero .suc-btn-primary { color: #a8004e !important; background: #ffffff; border-color: #ffffff; box-shadow: 0 13px 28px rgba(64,0,29,.22); } .suc-miraculous .suc-miraculous-hero .suc-btn-secondary { color: #ffffff !important; background: rgba(0,0,0,.18); border-color: rgba(255,255,255,.45); } /* ---------- HERO-PRODUKTE ---------- */ .suc-miraculous .suc-miraculous-products { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 405px; } .suc-miraculous .suc-miraculous-products::after { content: ""; position: absolute; right: 5%; bottom: 10px; left: 5%; height: 35px; background: rgba(72,0,32,.28); border-radius: 50%; filter: blur(16px); } .suc-miraculous .suc-miraculous-album, .suc-miraculous .suc-miraculous-display, .suc-miraculous .suc-miraculous-blister, .suc-miraculous .suc-miraculous-pack { position: absolute; z-index: 2; object-fit: contain; filter: drop-shadow(0 19px 21px rgba(62,0,28,.3)); } .suc-miraculous .suc-miraculous-album { left: 23%; bottom: 2px; z-index: 3; width: 44%; transform: rotate(-2deg); } .suc-miraculous .suc-miraculous-display { right: -1%; bottom: 4px; z-index: 4; width: 43%; transform: rotate(2deg); } .suc-miraculous .suc-miraculous-blister { left: 0; bottom: 0; z-index: 5; width: 27%; transform: rotate(-5deg); } .suc-miraculous .suc-miraculous-pack { right: 35%; bottom: 0; z-index: 6; width: 18%; transform: rotate(5deg); } /* ---------- FAKTENLEISTE ---------- */ .suc-miraculous .suc-miraculous-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 22px; color: #ffffff; background: #151014; border-radius: 20px; overflow: hidden; } .suc-miraculous .suc-miraculous-fact { position: relative; min-width: 0; padding: 19px; } .suc-miraculous .suc-miraculous-fact:not(:last-child)::after { content: ""; position: absolute; top: 18px; right: 0; bottom: 18px; width: 1px; background: rgba(255,255,255,.14); } .suc-miraculous .suc-miraculous-fact strong { display: block; margin-bottom: 4px; color: #ffffff; font-size: 17px; } .suc-miraculous .suc-miraculous-fact span { display: block; color: rgba(255,255,255,.7); font-size: 13px; line-height: 1.45; } /* ---------- PRODUKTAUSWAHL ---------- */ .suc-miraculous .suc-product-choice-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; } .suc-miraculous .suc-choice-card { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%; padding: 16px; background: #ffffff; border: 1px solid var(--suc-border); border-radius: 18px; box-shadow: 0 9px 24px rgba(125,0,55,.08); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .suc-miraculous .suc-choice-image { display: flex; align-items: center; justify-content: center; width: 100%; height: 235px; margin: 0 0 14px; padding: 10px; background: var(--suc-blue-extra-soft); border-radius: 15px; overflow: hidden; } .suc-miraculous .suc-choice-image img { width: 100%; height: 100%; object-fit: contain; } .suc-miraculous .suc-choice-content { display: flex; flex: 1; flex-direction: column; } .suc-miraculous .suc-choice-kicker { display: block; margin: 0 0 7px; color: var(--suc-blue); font-size: 11px; font-weight: 900; letter-spacing: .45px; text-transform: uppercase; } .suc-miraculous .suc-choice-card h3 { margin: 0 0 8px; color: var(--suc-heading); font-size: 20px; line-height: 1.28; } .suc-miraculous .suc-choice-card p { margin: 0 0 15px; color: var(--suc-muted); font-size: 14px; line-height: 1.6; } .suc-miraculous .suc-choice-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; } .suc-miraculous .suc-choice-meta span { padding: 6px 9px; color: var(--suc-blue-dark); background: var(--suc-blue-soft); border-radius: 8px; font-size: 12px; font-weight: 800; } @media (hover:hover) { .suc-miraculous .suc-choice-card:hover { transform: translateY(-4px); border-color: var(--suc-border-strong); box-shadow: 0 16px 32px rgba(125,0,55,.14); } } /* ---------- FAQ-FARBE ---------- */ .suc-miraculous .suc-faq-item strong { color: var(--suc-heading); } /* ---------- MIRACULOUS INSTAGRAM ---------- */ .suc-miraculous .suc-instagram { background: radial-gradient( circle at 100% 0, rgba(255,255,255,.18), transparent 30% ), linear-gradient( 135deg, #f72083, #a9004e ); } /* ---------- RESPONSIVE ---------- */ @media only screen and (max-width: 960px) { .suc-layout.suc-miraculous { width: calc(100vw - 28px); } .suc-miraculous .suc-miraculous-hero { grid-template-columns: 1fr 1fr; padding: 28px; } .suc-miraculous .suc-product-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .suc-miraculous .suc-miraculous-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .suc-miraculous .suc-miraculous-fact:nth-child(2)::after { display: none; } .suc-miraculous .suc-miraculous-fact:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.13); } } @media only screen and (max-width: 767px) { .suc-layout.suc-miraculous { left: auto; width: 100%; max-width: 100%; margin: 16px 0 24px; padding: 0 4px; transform: none; } .suc-miraculous .suc-miraculous-hero { grid-template-columns: 1fr; min-height: 0; padding: 23px 17px 17px; border-radius: 20px; } .suc-miraculous .suc-miraculous-title { font-size: 39px; } .suc-miraculous .suc-miraculous-products { min-height: 345px; margin-top: 12px; } .suc-miraculous .suc-product-choice-grid { grid-template-columns: 1fr; } .suc-miraculous .suc-choice-image { height: 275px; } } @media only screen and (max-width: 520px) { .suc-miraculous .suc-miraculous-facts { grid-template-columns: 1fr; } .suc-miraculous .suc-miraculous-fact:not(:last-child)::after { top: auto; right: 18px; bottom: 0; left: 18px; width: auto; height: 1px; } .suc-miraculous .suc-miraculous-fact { border-bottom: 0 !important; } .suc-miraculous .suc-miraculous-products { min-height: 300px; } .suc-miraculous .suc-choice-image { height: 245px; } }/* ========================================================= MIRACULOUS – FIX FÜR SCHWARZE FAKTENLEISTE ========================================================= */ .suc-layout.suc-miraculous .suc-miraculous-facts, .suc-layout.suc-miraculous .suc-miraculous-facts * { color: #ffffff !important; } .suc-layout.suc-miraculous .suc-miraculous-fact strong { display: block !important; margin: 0 0 5px !important; color: #ffffff !important; font-size: 17px !important; font-weight: 900 !important; line-height: 1.25 !important; } .suc-layout.suc-miraculous .suc-miraculous-fact span { display: block !important; margin: 0 !important; color: rgba(255, 255, 255, 0.78) !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.5 !important; } .suc-layout.suc-miraculous .suc-miraculous-facts { background: linear-gradient( 135deg, #171116 0%, #090708 100% ) !important; } /* ========================================================= PREMIUM-PRODUKT – ROBUSTE KARTEN UND CTA-BUTTONS Ergänzung zur konsolidierten Gesamtdatei ========================================================= */ .suc-premium-product .suc-premium-card { color: var(--pp-text) !important; } .suc-premium-product .suc-premium-card-button { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 43px !important; margin-top: auto !important; padding: 11px 14px !important; color: #ffffff !important; background: linear-gradient(135deg, var(--pp-blue), var(--pp-blue-dark)) !important; border-radius: 11px !important; font-size: 13px !important; font-weight: 900 !important; line-height: 1.25 !important; text-align: center !important; text-decoration: none !important; } .suc-premium-product .suc-premium-display-copy, .suc-premium-product .suc-premium-display-action, .suc-premium-product .suc-premium-instagram-copy, .suc-premium-product .suc-premium-instagram-action { min-width: 0; } .suc-premium-product .suc-premium-display-action, .suc-premium-product .suc-premium-instagram-action { flex: 0 0 auto; } .suc-premium-product .suc-premium-display-action a, .suc-premium-product .suc-premium-instagram-action a { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 155px !important; min-height: 46px !important; white-space: nowrap !important; text-align: center !important; } @media only screen and (max-width: 767px) { .suc-premium-product .suc-premium-display-action, .suc-premium-product .suc-premium-instagram-action { width: 100%; } .suc-premium-product .suc-premium-display-action a, .suc-premium-product .suc-premium-instagram-action a { width: 100% !important; } } /* ========================================================= GECKOS NEXT LEVEL CHECKLISTE – BLOG-FIX Nur Darstellung. Kein JavaScript, PHP oder Redis-Zugriff. ========================================================= */ .suc-geckos-checkliste { width: 100%; } /* Die 20 Figuren im Blog als sauberes responsives Raster */ .suc-geckos-checkliste .suc-product-choice-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; } .suc-geckos-checkliste .suc-choice-card { min-width: 0; height: 100%; display: flex; flex-direction: column; } .suc-geckos-checkliste .suc-choice-image { aspect-ratio: 1 / 1; overflow: hidden; } .suc-geckos-checkliste .suc-choice-image img { width: 100%; height: 100%; object-fit: contain; display: block; } .suc-geckos-checkliste .suc-choice-content { display: flex; flex: 1; flex-direction: column; } .suc-geckos-checkliste .suc-choice-content .suc-btn { margin-top: auto; } /* Kompakte echte Checkliste */ .suc-geckos-checkliste .suc-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .suc-geckos-checkliste .suc-check-row { display: grid; grid-template-columns: 34px 54px minmax(0, 1fr); gap: 10px; align-items: center; padding: 14px; background: #fff; border: 1px solid rgba(12, 78, 120, 0.14); border-radius: 14px; box-shadow: 0 8px 24px rgba(17, 56, 84, 0.06); } .suc-geckos-checkliste .suc-check-box { width: 28px; height: 28px; display: grid; place-items: center; border: 2px solid #0b7bd8; border-radius: 7px; color: transparent; background: #f4faff; font-size: 0; } .suc-geckos-checkliste .suc-check-box::before { content: ""; width: 11px; height: 6px; border-left: 2px solid transparent; border-bottom: 2px solid transparent; transform: rotate(-45deg); } .suc-geckos-checkliste .suc-check-number { font-weight: 800; color: #0874d8; white-space: nowrap; } .suc-geckos-checkliste .suc-check-name { min-width: 0; } .suc-geckos-checkliste .suc-check-name strong { display: block; line-height: 1.3; } .suc-geckos-checkliste .suc-check-name span { display: block; margin-top: 3px; color: #667785; font-size: 12px; line-height: 1.35; } .suc-geckos-checkliste .suc-check-effect { grid-column: 3; color: #394b59; font-size: 13px; line-height: 1.4; } .suc-geckos-checkliste .suc-check-action { grid-column: 1 / -1; } .suc-geckos-checkliste .suc-check-action .suc-btn { width: 100%; text-align: center; box-sizing: border-box; } /* Blog-Inhaltsbereich darf die Gestaltung nicht unnötig zusammendrücken */ .single-post .suc-geckos-checkliste, .blog .suc-geckos-checkliste { max-width: none; } /* Tablet */ @media (max-width: 1100px) { .suc-geckos-checkliste .suc-product-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Mobil */ @media (max-width: 767px) { .suc-geckos-checkliste .suc-product-choice-grid, .suc-geckos-checkliste .suc-checklist { grid-template-columns: 1fr; } .suc-geckos-checkliste .suc-check-row { grid-template-columns: 32px 52px minmax(0, 1fr); padding: 12px; } } /* Geckos Next Level – PDF-Block */ .suc-geckos-next-level .suc-geckos-pdf-download { border: 1px solid rgba(8,116,216,.12); } .suc-geckos-next-level .suc-geckos-pdf-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 22px; } .suc-geckos-next-level .suc-geckos-pdf-actions .suc-btn { min-width: 290px; text-align: center; } @media (max-width: 767px) { .suc-geckos-next-level .suc-geckos-pdf-actions .suc-btn { width: 100%; min-width: 0; } } /* ========================================================= PRODUKT-LANDINGPAGE – SOFORT VERFÜGBAR Ergänzung für grüne Lager- und Lieferstatus-Elemente Wirkt nur innerhalb von .suc-product-page ========================================================= */ .suc-product-page .suc-product-stock-pill.is-available { color: #14532d !important; background: #effbf3 !important; border-color: #bfe8c9 !important; } .suc-product-page .suc-product-availability-badge { position: absolute !important; top: 12px !important; left: 12px !important; z-index: 2 !important; padding: 10px 13px !important; color: #ffffff !important; background: linear-gradient(135deg, #19a15f, #0c7b45) !important; border-radius: 999px !important; box-shadow: 0 8px 18px rgba(12, 123, 69, .22) !important; font-size: 12px !important; font-weight: 900 !important; line-height: 1.2 !important; } .suc-product-page .suc-product-availability-box { width: 100% !important; margin: 0 0 18px !important; padding: clamp(18px, 3vw, 24px) !important; color: #154d27 !important; background: #effbf3 !important; border: 1px solid #bfe8c9 !important; border-radius: 22px !important; } .suc-product-page .suc-product-availability-box h2, .suc-product-page .suc-product-availability-box p { color: #154d27 !important; } .suc-product-page .suc-product-availability-box h2 { margin: 0 0 9px !important; font-size: clamp(22px, 3vw, 25px) !important; line-height: 1.25 !important; } .suc-product-page .suc-product-availability-box p { margin: 0 !important; font-size: 15px !important; line-height: 1.75 !important; } /* ========================================================= MIRACULOUS FRIENDS FOREVER – PREMIUM-PRODUKTSEITEN Wirkt nur innerhalb von .suc-miraculous-product ========================================================= */ .suc-product-page.suc-premium-product.suc-miraculous-product { --pp-blue: #ec0872; --pp-blue-dark: #b80056; --pp-soft: #fff2f8; --pp-navy: #25101c; --pp-text: #4a3542; --pp-muted: #75616d; --pp-border: #f1c9dc; --pp-green: #16884f; } /* Hero mit eigener Miraculous-Bildwelt */ .suc-miraculous-product .suc-premium-hero { position: relative; overflow: hidden; background: radial-gradient( circle at 0 0, rgba(236, 8, 114, .12), transparent 34% ), radial-gradient( circle at 100% 15%, rgba(255, 87, 160, .13), transparent 28% ), linear-gradient( 135deg, #ffffff 0%, #fff6fa 55%, #fff0f7 100% ); border-color: var(--pp-border); box-shadow: 0 16px 40px rgba(151, 0, 67, .10); } .suc-miraculous-product .suc-premium-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22; background-image: radial-gradient(circle, #ec0872 0 1.5px, transparent 2px), radial-gradient(circle, #ec0872 0 1px, transparent 1.5px); background-position: 0 0, 31px 35px; background-size: 72px 72px, 96px 96px; } /* Produktbild */ .suc-miraculous-product .suc-premium-main-image { min-height: 455px; background: radial-gradient( circle at center, #ffffff 0%, #ffffff 48%, #fff1f8 100% ); border-color: var(--pp-border); } .suc-miraculous-product .suc-premium-main-image img { max-width: 470px; max-height: 415px; filter: drop-shadow(0 20px 26px rgba(103, 0, 45, .24)); } /* Verfügbarkeits-Badge */ .suc-miraculous-product .suc-premium-badge { background: linear-gradient(135deg, #1ba561, #087c46); box-shadow: 0 8px 18px rgba(8, 124, 70, .22); } /* Überschrift und kleine Fakten */ .suc-miraculous-product .suc-premium-eyebrow { color: var(--pp-blue); } .suc-miraculous-product .suc-premium-pills span { color: var(--pp-blue-dark); background: #ffffff; border-color: var(--pp-border); } /* Kaufbox */ .suc-miraculous-product .suc-premium-buybox { border-color: var(--pp-border); box-shadow: 0 12px 30px rgba(151, 0, 67, .09); } .suc-miraculous-product .suc-premium-price { color: var(--pp-blue); } .suc-miraculous-product .suc-premium-buybutton, .suc-miraculous-product .suc-premium-card-button { background: linear-gradient( 135deg, #ff2d8d 0%, #b80056 100% ) !important; box-shadow: 0 12px 26px rgba(184, 0, 86, .24) !important; } /* Trustbar */ .suc-miraculous-product .suc-premium-trustbar div { border-color: var(--pp-border); background: linear-gradient( 180deg, #ffffff 0%, #fff8fc 100% ); } /* Story- und Inhaltsbereiche */ .suc-miraculous-product .suc-premium-story, .suc-miraculous-product .suc-premium-panel, .suc-miraculous-product .suc-premium-related, .suc-miraculous-product .suc-premium-faq, .suc-miraculous-product .suc-premium-safety > div { border-color: var(--pp-border); box-shadow: 0 12px 30px rgba(151, 0, 67, .065); } .suc-miraculous-product .suc-premium-story-image { background: radial-gradient( circle at center, #ffffff, #fff2f8 ); } /* Detailtabelle */ .suc-miraculous-product .suc-premium-table { border-color: var(--pp-border); } .suc-miraculous-product .suc-premium-table div { border-color: var(--pp-border); } /* Vorteile */ .suc-miraculous-product .suc-premium-benefits div { background: var(--pp-soft); border-color: var(--pp-border); } /* Empfehlungskarten */ .suc-miraculous-product .suc-premium-card { border-color: var(--pp-border); box-shadow: 0 10px 24px rgba(151, 0, 67, .07); } .suc-miraculous-product .suc-premium-card-image { background: linear-gradient( 180deg, #fff5fa, #ffffff ); } .suc-miraculous-product .suc-premium-card-body > span, .suc-miraculous-product .suc-premium-card b { color: var(--pp-blue); } /* Serien-CTA */ .suc-miraculous-product .suc-premium-display { background: radial-gradient( circle at 100% 0, rgba(255,255,255,.16), transparent 30% ), linear-gradient( 135deg, #2b071a, #a9004e ); } /* FAQ */ .suc-miraculous-product .suc-premium-faq details { background: #fff7fb; border-color: var(--pp-border); } /* Instagram */ .suc-miraculous-product .suc-premium-instagram { background: radial-gradient( circle at 100% 0, rgba(255,255,255,.24), transparent 30% ), linear-gradient( 135deg, #fff0f7, #ffe1f0 ); border-color: var(--pp-border); } /* Hover */ @media (hover: hover) { .suc-miraculous-product .suc-premium-card:hover { border-color: #e98ab6; box-shadow: 0 17px 36px rgba(151, 0, 67, .14); } .suc-miraculous-product .suc-premium-buybutton:hover, .suc-miraculous-product .suc-premium-card-button:hover { filter: brightness(.97); transform: translateY(-1px); } } /* Mobil */ @media only screen and (max-width: 767px) { .suc-miraculous-product .suc-premium-main-image { min-height: 335px; } .suc-miraculous-product .suc-premium-main-image img { max-height: 305px; } } /* ========================================================= TURBO ATTAX 2026 STARTERPACK – PRODUKTSEITE Ergänzung zum vorhandenen SUC Designsystem Wirkt nur innerhalb von .suc-turbo-starter ========================================================= */ .suc-product-page.suc-turbo-starter { --ta-navy: #07162f; --ta-blue: #0874d8; --ta-blue-dark: #0069c9; --ta-soft: #f4faff; --ta-extra-soft: #f8fcff; --ta-border: #d8e8f7; --ta-text: #263b59; --ta-muted: #607089; --ta-green: #0c8c4f; } /* HERO */ .suc-turbo-starter .suc-product-landing-hero { position: relative; overflow: hidden; background: radial-gradient(circle at 100% 0, rgba(18,144,232,.11), transparent 30%), radial-gradient(circle at 0 100%, rgba(227,29,43,.07), transparent 28%), linear-gradient(135deg,#ffffff 0%,#f4faff 58%,#eef8ff 100%) !important; } .suc-turbo-starter .suc-product-landing-media { min-height: 430px !important; background: radial-gradient(circle at center,#ffffff 0%,#ffffff 48%,#eef8ff 100%) !important; } .suc-turbo-starter .suc-product-landing-media img { max-width: 470px !important; max-height: 395px !important; filter: drop-shadow(0 16px 24px rgba(0,0,0,.16)) !important; } .suc-turbo-starter .suc-product-landing-title { font-size: clamp(31px,4.4vw,43px) !important; } .suc-turbo-starter .suc-product-landing-lead { line-height: 1.55 !important; } /* GRÜNES VERFÜGBARKEITS-BADGE */ .suc-turbo-starter .suc-product-availability-badge { background: linear-gradient(135deg,#19a15f,#0c7b45) !important; } /* INHALTSKARTEN */ .suc-turbo-starter .suc-starter-content-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; } .suc-turbo-starter .suc-starter-content-card { min-width: 0; padding: 18px; background: var(--ta-extra-soft); border: 1px solid var(--ta-border); border-radius: 17px; } .suc-turbo-starter .suc-starter-content-card.is-highlight { background: #fff8e9; border-color: #efd9aa; } .suc-turbo-starter .suc-starter-content-card.is-total { background: #effbf3; border-color: #bfe8c9; } .suc-turbo-starter .suc-starter-content-icon { display: block; margin-bottom: 8px; font-size: 30px; line-height: 1; } .suc-turbo-starter .suc-starter-content-card h3 { margin: 0 0 7px; color: var(--ta-navy); font-size: 18px; line-height: 1.3; } .suc-turbo-starter .suc-starter-content-card p { margin: 0; color: var(--ta-muted); font-size: 14px; line-height: 1.7; } /* DUNKLER SAMMLUNGSBLOCK */ .suc-turbo-starter .suc-starter-collection { position: relative; overflow: hidden; color: #ffffff; background: radial-gradient(circle at 100% 100%,rgba(255,255,255,.08),transparent 28%), linear-gradient(135deg,#07162f 0%,#0b3e70 62%,#23152f 100%); border: 0; } .suc-turbo-starter .suc-starter-collection h2, .suc-turbo-starter .suc-starter-collection p, .suc-turbo-starter .suc-starter-collection strong { color: #ffffff; } .suc-turbo-starter .suc-starter-collection p { color: #d9ecff; } .suc-turbo-starter .suc-starter-collection-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; margin-top: 18px; } .suc-turbo-starter .suc-starter-collection-card { padding: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.13); border-radius: 15px; font-size: 14px; line-height: 1.6; } .suc-turbo-starter .suc-starter-collection-card span { display: block; margin-top: 3px; color: #d9ecff; } /* CTA */ .suc-turbo-starter .suc-starter-cta { display: flex; align-items: center; justify-content: space-between; gap: 22px; color: #ffffff; background: linear-gradient(135deg,#0874d8 0%,#005fb8 58%,#07162f 100%); border: 0; } .suc-turbo-starter .suc-starter-cta h2, .suc-turbo-starter .suc-starter-cta p { color: #ffffff; } .suc-turbo-starter .suc-starter-cta p { margin-bottom: 0; color: #e4f2ff; } .suc-turbo-starter .suc-starter-cta .suc-btn { flex: 0 0 auto; background: #ffffff; color: #0874d8 !important; border-color: #ffffff; } /* INTERNE LINKS */ .suc-turbo-starter .suc-starter-link-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; } .suc-turbo-starter .suc-starter-link-card { display: block; padding: 16px; color: #102033 !important; background: #f8fcff; border: 1px solid #d8e8f7; border-radius: 14px; font-weight: 900; line-height: 1.45; } /* FAQ MIT DETAILS */ .suc-turbo-starter .suc-starter-faq details { margin-bottom: 10px; overflow: hidden; background: #fafdff; border: 1px solid #d8e8f7; border-radius: 14px; } .suc-turbo-starter .suc-starter-faq details:last-child { margin-bottom: 0; } .suc-turbo-starter .suc-starter-faq summary { padding: 15px 17px; color: #07162f; font-size: 15px; font-weight: 900; line-height: 1.5; cursor: pointer; } .suc-turbo-starter .suc-starter-faq details p { margin: 0; padding: 0 17px 16px; color: #607089; font-size: 14px; line-height: 1.7; } /* RESPONSIVE */ @media only screen and (max-width:960px) { .suc-turbo-starter .suc-starter-content-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .suc-turbo-starter .suc-starter-collection-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media only screen and (max-width:767px) { .suc-turbo-starter .suc-product-landing-media { min-height: 340px !important; } .suc-turbo-starter .suc-product-landing-media img { max-height: 310px !important; } .suc-turbo-starter .suc-starter-content-grid, .suc-turbo-starter .suc-starter-collection-grid, .suc-turbo-starter .suc-starter-link-grid { grid-template-columns: 1fr; } .suc-turbo-starter .suc-starter-cta { align-items: flex-start; flex-direction: column; } .suc-turbo-starter .suc-starter-cta .suc-btn { width: 100%; } } /* ========================================================= FINALER FIX – MENGENFELD OHNE PLUS/MINUS Für WooCommerce + ShopLentor ========================================================= */ /* Gesamte Warenkorbzeile ordentlich ausrichten */ .single-product form.cart, .single-product .cart { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; align-items: center !important; } /* ALLE Plus-/Minus-Bedienelemente im Warenkorbformular ausblenden */ .single-product form.cart .plus, .single-product form.cart .minus, .single-product form.cart button.plus, .single-product form.cart button.minus, .single-product form.cart input.plus, .single-product form.cart input.minus, .single-product form.cart a.plus, .single-product form.cart a.minus, .single-product form.cart [class*="quantity-plus"], .single-product form.cart [class*="quantity-minus"], .single-product form.cart [class*="qty-plus"], .single-product form.cart [class*="qty-minus"], .single-product form.cart [class*="increase"], .single-product form.cart [class*="decrease"], .single-product form.cart [data-action="plus"], .single-product form.cart [data-action="minus"], .single-product form.cart [aria-label*="Increase"], .single-product form.cart [aria-label*="Decrease"], .single-product form.cart [aria-label*="erhöhen"], .single-product form.cart [aria-label*="verringern"] { display: none !important; visibility: hidden !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; } /* Pseudoelemente entfernen, die als Plus/Minus dargestellt werden */ .single-product form.cart .quantity::before, .single-product form.cart .quantity::after, .single-product form.cart .quantity-wrapper::before, .single-product form.cart .quantity-wrapper::after, .single-product form.cart [class*="quantity"]::before, .single-product form.cart [class*="quantity"]::after { content: none !important; } /* Mengencontainer */ .single-product form.cart .quantity { position: relative !important; display: block !important; flex: 0 0 82px !important; width: 82px !important; min-width: 82px !important; max-width: 82px !important; height: 52px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Direkt beschreibbares Zahlenfeld */ .single-product form.cart input.qty, .single-product form.cart .quantity input[type="number"] { position: static !important; display: block !important; width: 82px !important; min-width: 82px !important; max-width: 82px !important; height: 52px !important; margin: 0 !important; padding: 0 10px !important; color: #07162f !important; background: #ffffff !important; border: 1px solid #c9dced !important; border-radius: 13px !important; box-shadow: 0 5px 14px rgba(8, 116, 216, 0.08) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 18px !important; font-weight: 900 !important; line-height: 50px !important; text-align: center !important; appearance: textfield !important; -moz-appearance: textfield !important; } /* Native Browserpfeile entfernen */ .single-product form.cart input.qty::-webkit-inner-spin-button, .single-product form.cart input.qty::-webkit-outer-spin-button, .single-product form.cart .quantity input[type="number"]::-webkit-inner-spin-button, .single-product form.cart .quantity input[type="number"]::-webkit-outer-spin-button { display: none !important; margin: 0 !important; -webkit-appearance: none !important; appearance: none !important; } /* Fokus */ .single-product form.cart input.qty:focus, .single-product form.cart .quantity input[type="number"]:focus { border-color: #0874d8 !important; outline: 3px solid rgba(8, 116, 216, 0.16) !important; outline-offset: 1px !important; } /* Warenkorbbutton passend daneben */ .single-product form.cart .single_add_to_cart_button { flex: 1 1 220px !important; width: auto !important; min-width: 180px !important; min-height: 52px !important; height: 52px !important; margin: 0 !important; padding: 13px 24px !important; border-radius: 13px !important; } /* Mobil */ @media only screen and (max-width: 520px) { .single-product form.cart { display: grid !important; grid-template-columns: 82px minmax(0, 1fr) !important; gap: 10px !important; width: 100% !important; } .single-product form.cart .single_add_to_cart_button { width: 100% !important; min-width: 0 !important; } } /* Sehr kleine Smartphones */ @media only screen and (max-width: 360px) { .single-product form.cart { grid-template-columns: 1fr !important; } .single-product form.cart .quantity, .single-product form.cart input.qty, .single-product form.cart .quantity input[type="number"] { width: 100% !important; min-width: 100% !important; max-width: 100% !important; } } /* Beschriftung für das Mengenfeld */ .single-product form.cart .quantity::before { content: "Menge"; position: absolute; top: -22px; left: 0; display: block; color: #607089; font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; } .single-product form.cart { margin-top: 24px !important; } /* ========================================================= SUC MOBILE STABILITY FIX Einheitlichere Darstellung auf Android und iPhone Stand: 05.08.2026 ========================================================= */ /* Einheitliche Größenberechnung und Textskalierung */ .suc-layout, .suc-layout *, .suc-layout *::before, .suc-layout *::after { box-sizing: border-box; } .suc-layout { width: 100%; max-width: 100%; overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Verhindert, dass Grid- und Flexelemente auf Android durch lange Texte oder Links breiter werden */ .suc-premium-product .suc-premium-gallery, .suc-premium-product .suc-premium-copy, .suc-premium-product .suc-premium-panel, .suc-premium-product .suc-premium-story-image, .suc-premium-product .suc-premium-display-copy, .suc-premium-product .suc-premium-display-action, .suc-premium-product .suc-premium-instagram-copy, .suc-premium-product .suc-premium-instagram-action, .suc-premium-product .suc-premium-buybox, .suc-premium-product .suc-premium-trustbar > div { min-width: 0; max-width: 100%; } /* Lange Titel, EANs und Buttons sauber umbrechen */ .suc-premium-product .suc-premium-title, .suc-premium-product .suc-premium-subtitle, .suc-premium-product .suc-premium-microtrust, .suc-premium-product .suc-premium-table strong, .suc-premium-product .suc-premium-buybutton, .suc-premium-product .suc-premium-display a, .suc-premium-product .suc-premium-instagram a { overflow-wrap: anywhere; word-break: normal; } /* Smartphone */ @media only screen and (max-width: 767px) { .suc-layout.suc-product-page { left: auto !important; width: 100% !important; max-width: 100% !important; margin: 16px 0 24px !important; padding-right: 4px !important; padding-left: 4px !important; transform: none !important; overflow-x: clip !important; } .suc-premium-product .suc-premium-hero { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; width: 100% !important; padding: 16px !important; } .suc-premium-product .suc-premium-gallery, .suc-premium-product .suc-premium-copy { width: 100% !important; min-width: 0 !important; } .suc-premium-product .suc-premium-main-image { width: 100% !important; min-height: 300px !important; padding: 14px !important; } .suc-premium-product .suc-premium-main-image img { width: 100% !important; height: auto !important; max-width: 100% !important; max-height: 290px !important; object-fit: contain !important; } .suc-premium-product .suc-premium-thumbs { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; width: 100% !important; } .suc-premium-product .suc-premium-thumb { flex: 0 0 64px !important; width: 64px !important; height: 64px !important; } .suc-premium-product .suc-premium-title { font-size: clamp(27px, 8vw, 31px) !important; line-height: 1.12 !important; } .suc-premium-product .suc-premium-subtitle { font-size: 16px !important; line-height: 1.55 !important; } .suc-premium-product .suc-premium-pills { display: flex !important; flex-wrap: wrap !important; gap: 7px !important; } .suc-premium-product .suc-premium-checks { grid-template-columns: minmax(0, 1fr) !important; } .suc-premium-product .suc-premium-buybox { width: 100% !important; padding: 16px !important; } .suc-premium-product .suc-premium-buybutton { display: flex !important; width: 100% !important; min-width: 0 !important; white-space: normal !important; text-align: center !important; } .suc-premium-product .suc-premium-story, .suc-premium-product .suc-premium-split, .suc-premium-product .suc-premium-safety { grid-template-columns: minmax(0, 1fr) !important; } .suc-premium-product .suc-premium-story-image { width: 100% !important; } .suc-premium-product .suc-premium-story-image img { width: 100% !important; height: auto !important; max-height: 320px !important; object-fit: contain !important; } .suc-premium-product .suc-premium-display, .suc-premium-product .suc-premium-instagram { display: flex !important; align-items: stretch !important; flex-direction: column !important; } .suc-premium-product .suc-premium-display-action, .suc-premium-product .suc-premium-instagram-action { width: 100% !important; } .suc-premium-product .suc-premium-display-action a, .suc-premium-product .suc-premium-instagram-action a { width: 100% !important; min-width: 0 !important; white-space: normal !important; } } /* Sehr schmale Smartphones */ @media only screen and (max-width: 420px) { .suc-layout.suc-product-page { padding-right: 0 !important; padding-left: 0 !important; } .suc-premium-product .suc-premium-hero { padding: 14px !important; } .suc-premium-product .suc-premium-title { font-size: 27px !important; } .suc-premium-product .suc-premium-main-image { min-height: 280px !important; } .suc-premium-product .suc-premium-main-image img { max-height: 265px !important; } .suc-premium-product .suc-premium-price { font-size: 35px !important; } .suc-premium-product .suc-premium-table div { grid-template-columns: minmax(0, 1fr) !important; } .suc-premium-product .suc-premium-table strong { text-align: left !important; } } /* ========================================================= MATCH ATTAX 2026/27 – V6 FULL-BLEED / VISUAL Kompletter eigenstaendiger Bereich. ========================================================= */ .ma2627-v6{ --m6-navy:#061a3d; --m6-blue:#0b5ab7; --m6-cyan:#13a8ff; --m6-gold:#ffb20d; --m6-gold2:#ffd96a; --m6-red:#bd2222; --m6-text:#172033; --m6-muted:#607087; --m6-border:#d9e7f4; position:relative!important; left:50%!important; width:calc(100vw - 36px)!important; max-width:1240px!important; margin:28px 0 42px!important; transform:translateX(-50%)!important; clear:both!important; color:var(--m6-text)!important; font-family:Arial,Helvetica,sans-serif!important; font-size:15px!important; line-height:1.55!important; isolation:isolate!important; } .ma2627-v6 *, .ma2627-v6 *::before, .ma2627-v6 *::after{box-sizing:border-box!important} .ma2627-v6 img{display:block!important;max-width:100%!important;height:auto!important;margin:0!important;border:0!important} .ma2627-v6 a{text-decoration:none!important;box-shadow:none!important} /* HERO */ .ma2627-v6-hero{ position:relative!important; overflow:hidden!important; display:grid!important; grid-template-columns:minmax(0,1.08fr) minmax(400px,.92fr)!important; gap:34px!important; align-items:center!important; min-height:470px!important; padding:46px 50px!important; border-radius:26px!important; background: radial-gradient(circle at 86% 16%,rgba(19,168,255,.34),transparent 25%), radial-gradient(circle at 72% 90%,rgba(255,178,13,.18),transparent 32%), linear-gradient(135deg,#05142f 0%,#092f65 54%,#0b5ab7 100%)!important; color:#fff!important; box-shadow:0 22px 55px rgba(5,25,60,.22)!important; } .ma2627-v6-hero::before{ content:""!important; position:absolute!important; inset:0!important; background:linear-gradient(115deg,transparent 0 65%,rgba(255,255,255,.07) 65% 67%,transparent 67% 100%)!important; pointer-events:none!important; } .ma2627-v6-hero-copy{position:relative!important;z-index:2!important;max-width:680px!important} .ma2627-v6-kicker{ display:inline-flex!important; padding:7px 11px!important; border-radius:999px!important; background:var(--m6-gold)!important; color:#241600!important; font-size:11px!important; font-weight:900!important; letter-spacing:.05em!important; text-transform:uppercase!important; } .ma2627-v6 .ma2627-v6-hero h2{ margin:18px 0 12px!important; color:#fff!important; font-size:clamp(38px,4.7vw,62px)!important; line-height:.98!important; font-weight:900!important; letter-spacing:-.035em!important; } .ma2627-v6 .ma2627-v6-hero p{ margin:0!important; color:rgba(255,255,255,.9)!important; font-size:18px!important; line-height:1.5!important; } .ma2627-v6-hero-pills{display:flex!important;flex-wrap:wrap!important;gap:8px!important;margin-top:22px!important} .ma2627-v6-hero-pills span{ padding:7px 10px!important; border:1px solid rgba(255,255,255,.2)!important; border-radius:999px!important; background:rgba(255,255,255,.08)!important; color:#fff!important; font-size:11px!important; font-weight:800!important; backdrop-filter:blur(8px)!important; } .ma2627-v6-hero-actions{display:flex!important;flex-wrap:wrap!important;gap:10px!important;margin-top:26px!important} .ma2627-v6-btn{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-height:46px!important; padding:10px 18px!important; border-radius:11px!important; font-size:13px!important; font-weight:900!important; transition:transform .18s ease,filter .18s ease!important; } .ma2627-v6-btn:hover{transform:translateY(-2px)!important} .ma2627-v6-btn-gold{background:var(--m6-gold)!important;color:#211500!important} .ma2627-v6-btn-ghost{border:1px solid rgba(255,255,255,.34)!important;background:rgba(255,255,255,.08)!important;color:#fff!important} .ma2627-v6-btn-red{background:var(--m6-red)!important;color:#fff!important} .ma2627-v6-stage{ position:relative!important; z-index:2!important; display:grid!important; grid-template-columns:1.25fr .75fr!important; grid-template-rows:1fr 1fr!important; gap:12px!important; } .ma2627-v6-stage-card{ position:relative!important; overflow:hidden!important; display:flex!important; align-items:center!important; justify-content:center!important; min-width:0!important; padding:18px!important; border:1px solid rgba(255,255,255,.22)!important; border-radius:20px!important; background:rgba(255,255,255,.93)!important; box-shadow:0 18px 30px rgba(0,0,0,.18)!important; } .ma2627-v6-stage-main{grid-row:1 / 3!important;min-height:345px!important} .ma2627-v6-stage-small{min-height:165px!important} .ma2627-v6-stage-card span{ position:absolute!important; top:10px!important; left:10px!important; z-index:2!important; padding:5px 8px!important; border-radius:999px!important; background:var(--m6-navy)!important; color:#fff!important; font-size:9px!important; font-weight:900!important; letter-spacing:.05em!important; } .ma2627-v6-stage-card img{max-height:100%!important;object-fit:contain!important;filter:drop-shadow(0 16px 18px rgba(0,0,0,.18))!important} /* FACTS */ .ma2627-v6-facts{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; margin:12px 0 0!important; overflow:hidden!important; border:1px solid var(--m6-border)!important; border-radius:16px!important; background:#fff!important; box-shadow:0 8px 26px rgba(6,26,61,.06)!important; } .ma2627-v6-facts>div{padding:18px 12px!important;text-align:center!important;border-right:1px solid var(--m6-border)!important} .ma2627-v6-facts>div:last-child{border-right:0!important} .ma2627-v6-facts strong{display:block!important;color:var(--m6-blue)!important;font-size:30px!important;line-height:1!important} .ma2627-v6-facts span{display:block!important;margin-top:5px!important;color:var(--m6-muted)!important;font-size:11px!important;font-weight:800!important} /* STANDARD */ .ma2627-v6-section{ margin-top:18px!important; padding:30px!important; border:1px solid var(--m6-border)!important; border-radius:20px!important; background:#fff!important; box-shadow:0 8px 28px rgba(6,26,61,.05)!important; } .ma2627-v6-head{margin-bottom:20px!important} .ma2627-v6-head>span,.ma2627-v6-overline{ display:block!important; margin-bottom:5px!important; color:#c47a00!important; font-size:10px!important; font-weight:900!important; letter-spacing:.08em!important; text-transform:uppercase!important; } .ma2627-v6 .ma2627-v6-head h2{ margin:0 0 6px!important; color:var(--m6-navy)!important; font-size:30px!important; line-height:1.1!important; font-weight:900!important; } .ma2627-v6 .ma2627-v6-head p{margin:0!important;color:var(--m6-muted)!important} /* CHOOSER */ .ma2627-v6-chooser{ display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; gap:12px!important; } .ma2627-v6-chooser>a{ overflow:hidden!important; display:flex!important; flex-direction:column!important; min-width:0!important; border:1px solid var(--m6-border)!important; border-radius:15px!important; background:linear-gradient(180deg,#f7fbff,#fff)!important; color:var(--m6-text)!important; transition:transform .18s ease,box-shadow .18s ease!important; } .ma2627-v6-chooser>a:hover{transform:translateY(-4px)!important;box-shadow:0 14px 28px rgba(9,80,150,.11)!important} .ma2627-v6-chooser-image{ display:flex!important; align-items:center!important; justify-content:center!important; height:150px!important; padding:12px!important; border-bottom:1px solid #e9f1f8!important; background:#fff!important; } .ma2627-v6-chooser-image img{width:100%!important;height:100%!important;object-fit:contain!important} .ma2627-v6-chooser>a>div:last-child{padding:13px!important} .ma2627-v6-chooser span{display:block!important;color:#c67900!important;font-size:9px!important;font-weight:900!important;letter-spacing:.05em!important} .ma2627-v6-chooser strong{display:block!important;margin-top:3px!important;color:var(--m6-navy)!important;font-size:15px!important;line-height:1.15!important} .ma2627-v6-chooser small{display:block!important;margin-top:4px!important;color:var(--m6-muted)!important;font-size:10px!important;line-height:1.3!important} /* DISPLAY FEATURE */ .ma2627-v6-display{ display:grid!important; grid-template-columns:minmax(330px,.86fr) minmax(0,1.14fr)!important; gap:34px!important; align-items:center!important; margin-top:18px!important; padding:34px!important; border-radius:22px!important; background: radial-gradient(circle at 12% 20%,rgba(255,178,13,.2),transparent 28%), linear-gradient(135deg,#fff7de,#fff 55%)!important; border:1px solid #ecd18b!important; box-shadow:0 10px 34px rgba(97,68,0,.08)!important; } .ma2627-v6-display-image{ position:relative!important; display:flex!important; align-items:center!important; justify-content:center!important; min-height:340px!important; padding:22px!important; border-radius:18px!important; background:#fff!important; box-shadow:0 14px 30px rgba(7,29,69,.07)!important; } .ma2627-v6-display-image img{max-height:310px!important;object-fit:contain!important;filter:drop-shadow(0 16px 18px rgba(0,0,0,.13))!important} .ma2627-v6-badge{ position:absolute!important; top:13px!important; left:13px!important; padding:6px 9px!important; border-radius:999px!important; background:var(--m6-gold)!important; color:#251700!important; font-size:10px!important; font-weight:900!important; } .ma2627-v6 .ma2627-v6-display-copy h2{ margin:4px 0 10px!important; color:var(--m6-navy)!important; font-size:34px!important; line-height:1.05!important; font-weight:900!important; } .ma2627-v6 .ma2627-v6-display-copy>p{margin:0!important;color:var(--m6-muted)!important;font-size:15px!important} .ma2627-v6-hero-cards{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px!important; margin:18px 0!important; } .ma2627-v6-hero-cards>div{ display:flex!important; gap:8px!important; align-items:center!important; padding:11px!important; border:1px solid #ead8ab!important; border-radius:10px!important; background:#fff!important; } .ma2627-v6-hero-cards b{color:#c67a00!important;font-size:15px!important} .ma2627-v6-hero-cards span{font-size:11px!important;font-weight:800!important} .ma2627-v6-display-bottom{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:14px!important} .ma2627-v6-display-bottom>div{display:flex!important;flex-direction:column!important} .ma2627-v6-display-bottom small{color:var(--m6-muted)!important;font-size:10px!important} .ma2627-v6-display-bottom strong{color:var(--m6-navy)!important;font-size:32px!important;line-height:1!important} /* TINS */ .ma2627-v6-tins{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:16px!important; } .ma2627-v6-tin{ overflow:hidden!important; min-width:0!important; padding:22px!important; border-radius:18px!important; } .ma2627-v6-tin-light{border:1px solid var(--m6-border)!important;background:linear-gradient(145deg,#f4faff,#fff)!important} .ma2627-v6-tin-dark{border:1px solid #174983!important;background:linear-gradient(145deg,#061a3d,#0d4f92)!important;color:#fff!important} .ma2627-v6-tin-top{ display:flex!important; align-items:flex-start!important; justify-content:space-between!important; gap:12px!important; padding-bottom:12px!important; border-bottom:1px solid rgba(120,150,180,.2)!important; } .ma2627-v6-tin-top span{display:block!important;color:#c67800!important;font-size:9px!important;font-weight:900!important;letter-spacing:.08em!important} .ma2627-v6-tin-dark .ma2627-v6-tin-top span{color:#ffd159!important} .ma2627-v6 .ma2627-v6-tin h3{margin:2px 0 0!important;color:var(--m6-navy)!important;font-size:25px!important} .ma2627-v6 .ma2627-v6-tin-dark h3{color:#fff!important} .ma2627-v6-tin-top>strong{ flex:0 0 auto!important; padding:6px 8px!important; border-radius:8px!important; background:#e8f2fd!important; color:var(--m6-navy)!important; font-size:10px!important; } .ma2627-v6-tin-dark .ma2627-v6-tin-top>strong{background:rgba(255,255,255,.12)!important;color:#fff!important} .ma2627-v6-tin-body{ display:grid!important; grid-template-columns:42% minmax(0,1fr)!important; gap:16px!important; align-items:center!important; padding:16px 0!important; } .ma2627-v6-tin-image{ display:flex!important; align-items:center!important; justify-content:center!important; min-height:220px!important; padding:9px!important; border-radius:14px!important; background:rgba(255,255,255,.92)!important; } .ma2627-v6-tin-image img{max-height:205px!important;object-fit:contain!important} .ma2627-v6 .ma2627-v6-tin p{margin:0 0 9px!important;color:var(--m6-muted)!important;font-size:12px!important} .ma2627-v6 .ma2627-v6-tin-dark p{color:rgba(255,255,255,.82)!important} .ma2627-v6-tin ul{margin:0 0 10px!important;padding-left:18px!important;font-size:12px!important} .ma2627-v6-price-pills{display:flex!important;flex-wrap:wrap!important;gap:6px!important} .ma2627-v6-price-pills span{padding:5px 7px!important;border-radius:8px!important;background:#e8f2fd!important;color:var(--m6-navy)!important;font-size:10px!important} .ma2627-v6-tin-dark .ma2627-v6-price-pills span{background:rgba(255,255,255,.13)!important;color:#fff!important} .ma2627-v6-tin>a{display:inline-block!important;color:var(--m6-blue)!important;font-size:11px!important;font-weight:900!important} .ma2627-v6-tin-dark>a{color:#ffd159!important} /* ADVENT */ .ma2627-v6-advent{ display:grid!important; grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr)!important; gap:32px!important; align-items:center!important; margin-top:18px!important; padding:30px!important; border:1px solid #e8b5b5!important; border-radius:22px!important; background: radial-gradient(circle at 8% 85%,rgba(22,112,44,.1),transparent 25%), linear-gradient(135deg,#fff6f2,#fff)!important; } .ma2627-v6-advent-image{display:flex!important;align-items:center!important;justify-content:center!important} .ma2627-v6-advent-image img{max-height:330px!important;object-fit:contain!important;filter:drop-shadow(0 16px 20px rgba(0,0,0,.13))!important} .ma2627-v6-advent-copy>span{color:#a51c1c!important;font-size:10px!important;font-weight:900!important;letter-spacing:.08em!important} .ma2627-v6 .ma2627-v6-advent-copy h2{margin:4px 0 8px!important;color:#761717!important;font-size:31px!important} .ma2627-v6 .ma2627-v6-advent-copy>p{margin:0!important;color:var(--m6-muted)!important} .ma2627-v6-warning{ margin:14px 0!important; padding:14px!important; border:2px solid #e09a28!important; border-radius:11px!important; background:#fff5d2!important; } .ma2627-v6-warning>strong{color:#8a4000!important;font-size:14px!important} .ma2627-v6-warning p{margin:5px 0 0!important;color:#504532!important;font-size:11px!important;line-height:1.4!important} .ma2627-v6-advent-bottom{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important} .ma2627-v6-advent-bottom>strong{color:#8e1515!important;font-size:29px!important} /* TABLE */ .ma2627-v6-table-wrap{width:100%!important;overflow-x:auto!important;border:1px solid var(--m6-border)!important;border-radius:12px!important} .ma2627-v6-table{width:100%!important;min-width:720px!important;margin:0!important;border-collapse:collapse!important;background:#fff!important} .ma2627-v6-table th{padding:11px 12px!important;border:0!important;background:var(--m6-navy)!important;color:#fff!important;text-align:left!important;font-size:11px!important} .ma2627-v6-table td{padding:10px 12px!important;border:0!important;border-bottom:1px solid #e5edf6!important;color:var(--m6-text)!important;font-size:11px!important} .ma2627-v6-table tbody tr:nth-child(even){background:#f8fbff!important} .ma2627-v6-table td:last-child{font-weight:900!important} .ma2627-v6-table-hot{background:#fff3cf!important} /* TRUST */ .ma2627-v6-trust{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; margin-top:18px!important; overflow:hidden!important; border-radius:14px!important; background:var(--m6-navy)!important; } .ma2627-v6-trust>div{padding:15px!important;text-align:center!important;border-right:1px solid rgba(255,255,255,.12)!important} .ma2627-v6-trust>div:last-child{border-right:0!important} .ma2627-v6-trust strong{display:block!important;color:#fff!important;font-size:12px!important} .ma2627-v6-trust span{display:block!important;margin-top:2px!important;color:rgba(255,255,255,.68)!important;font-size:9px!important} /* FAQ */ .ma2627-v6-faq details{border-bottom:1px solid var(--m6-border)!important} .ma2627-v6-faq details:last-child{border-bottom:0!important} .ma2627-v6-faq summary{padding:12px 3px!important;cursor:pointer!important;color:var(--m6-navy)!important;font-size:13px!important;font-weight:900!important} .ma2627-v6-faq details p{margin:0!important;padding:0 3px 12px!important;color:var(--m6-muted)!important;font-size:12px!important} /* TABLET */ @media only screen and (max-width:960px){ .ma2627-v6{ width:calc(100vw - 24px)!important; max-width:none!important; } .ma2627-v6-hero{ grid-template-columns:1fr!important; min-height:0!important; padding:36px!important; } .ma2627-v6-stage{ grid-template-columns:1.2fr .8fr!important; } .ma2627-v6-stage-main{min-height:280px!important} .ma2627-v6-stage-small{min-height:134px!important} .ma2627-v6-chooser{grid-template-columns:repeat(3,minmax(0,1fr))!important} .ma2627-v6-display{grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr)!important} .ma2627-v6-tin-body{grid-template-columns:36% minmax(0,1fr)!important} .ma2627-v6-advent{grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr)!important} } /* MOBILE */ @media only screen and (max-width:600px){ .ma2627-v6{ left:auto!important; width:100%!important; max-width:100%!important; margin:16px 0 28px!important; transform:none!important; font-size:13px!important; } .ma2627-v6-hero{ padding:22px 16px!important; border-radius:16px!important; text-align:center!important; } .ma2627-v6 .ma2627-v6-hero h2{font-size:31px!important} .ma2627-v6 .ma2627-v6-hero p{font-size:13px!important} .ma2627-v6-hero-pills,.ma2627-v6-hero-actions{justify-content:center!important} .ma2627-v6-stage{ grid-template-columns:1fr 1fr!important; grid-template-rows:auto auto!important; } .ma2627-v6-stage-main{grid-column:1/3!important;grid-row:auto!important;min-height:190px!important} .ma2627-v6-stage-small{min-height:120px!important} .ma2627-v6-facts{grid-template-columns:repeat(2,minmax(0,1fr))!important} .ma2627-v6-facts>div:nth-child(2){border-right:0!important} .ma2627-v6-facts>div:nth-child(-n+2){border-bottom:1px solid var(--m6-border)!important} .ma2627-v6-section{padding:16px 12px!important;border-radius:13px!important} .ma2627-v6 .ma2627-v6-head h2{font-size:21px!important} .ma2627-v6-chooser{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important} .ma2627-v6-chooser-image{height:105px!important;padding:8px!important} .ma2627-v6-chooser>a>div:last-child{padding:9px!important} .ma2627-v6-chooser strong{font-size:12px!important} .ma2627-v6-display{ grid-template-columns:1fr!important; gap:12px!important; padding:14px 12px!important; border-radius:14px!important; } .ma2627-v6-display-image{min-height:190px!important;padding:10px!important} .ma2627-v6-display-image img{max-height:180px!important} .ma2627-v6 .ma2627-v6-display-copy h2{font-size:22px!important} .ma2627-v6-hero-cards{gap:5px!important} .ma2627-v6-hero-cards>div{padding:7px!important} .ma2627-v6-hero-cards span{font-size:9px!important} .ma2627-v6-display-bottom{align-items:stretch!important;flex-direction:column!important} .ma2627-v6-display-bottom .ma2627-v6-btn{width:100%!important} .ma2627-v6-tins{grid-template-columns:1fr!important;gap:9px!important} .ma2627-v6-tin{padding:12px!important} .ma2627-v6-tin-top>strong{font-size:9px!important} .ma2627-v6 .ma2627-v6-tin h3{font-size:19px!important} .ma2627-v6-tin-body{grid-template-columns:94px minmax(0,1fr)!important;gap:10px!important;padding:10px 0!important} .ma2627-v6-tin-image{min-height:118px!important;padding:4px!important} .ma2627-v6-tin-image img{max-height:110px!important} .ma2627-v6 .ma2627-v6-tin p,.ma2627-v6-tin ul{font-size:10px!important} .ma2627-v6-advent{ grid-template-columns:1fr!important; gap:10px!important; padding:14px 12px!important; border-radius:14px!important; } .ma2627-v6-advent-image img{max-height:190px!important} .ma2627-v6 .ma2627-v6-advent-copy h2{font-size:21px!important} .ma2627-v6-warning{padding:10px!important} .ma2627-v6-warning p{font-size:10px!important} .ma2627-v6-advent-bottom{align-items:stretch!important;flex-direction:column!important} .ma2627-v6-advent-bottom .ma2627-v6-btn{width:100%!important} .ma2627-v6-trust{grid-template-columns:repeat(2,minmax(0,1fr))!important} } /* ========================================================= MATCH ATTAX V6.1 – KOMPAKTE KAUFBERATUNG Absichtlich Flex statt Grid, um Theme-Konflikte zu vermeiden. ========================================================= */ .ma2627-v6-decision-section{ overflow:hidden!important; background:linear-gradient(135deg,#f8fbff 0%,#ffffff 55%,#fff9ea 100%)!important; } .ma2627-v6-decision-head{ display:flex!important; align-items:flex-end!important; justify-content:space-between!important; gap:22px!important; margin-bottom:18px!important; } .ma2627-v6-decision-head>div{min-width:0!important} .ma2627-v6-decision-head>p{ flex:0 1 420px!important; margin:0!important; text-align:right!important; color:var(--m6-muted)!important; font-size:12px!important; } .ma2627-v6-decision-grid{ display:flex!important; flex-wrap:wrap!important; align-items:stretch!important; gap:12px!important; width:100%!important; } .ma2627-v6-decision{ position:relative!important; display:flex!important; flex:1 1 calc(25% - 12px)!important; width:calc(25% - 9px)!important; max-width:calc(25% - 9px)!important; min-width:0!important; min-height:150px!important; overflow:hidden!important; align-items:stretch!important; border:1px solid #d8e7f5!important; border-radius:15px!important; background:#fff!important; color:#172033!important; box-shadow:0 8px 20px rgba(6,26,61,.055)!important; transition:transform .18s ease,box-shadow .18s ease!important; } .ma2627-v6-decision:hover{ transform:translateY(-3px)!important; box-shadow:0 14px 28px rgba(6,26,61,.11)!important; } .ma2627-v6-decision-image{ position:relative!important; display:flex!important; flex:0 0 42%!important; width:42%!important; min-width:0!important; align-items:center!important; justify-content:center!important; padding:11px!important; background:linear-gradient(180deg,#f6faff,#fff)!important; border-right:1px solid #e6eef7!important; } .ma2627-v6-decision-image img{ width:100%!important; height:118px!important; max-height:118px!important; object-fit:contain!important; filter:drop-shadow(0 9px 11px rgba(0,0,0,.12))!important; } .ma2627-v6-decision-copy{ display:flex!important; flex:1 1 auto!important; min-width:0!important; flex-direction:column!important; justify-content:center!important; padding:13px 12px!important; } .ma2627-v6-decision-copy>span{ display:block!important; margin-bottom:3px!important; color:#c67800!important; font-size:8px!important; font-weight:900!important; letter-spacing:.07em!important; } .ma2627-v6-decision-copy>strong{ display:block!important; color:var(--m6-navy)!important; font-size:15px!important; line-height:1.15!important; } .ma2627-v6-decision-copy>small{ display:block!important; margin-top:4px!important; color:var(--m6-muted)!important; font-size:9px!important; line-height:1.3!important; } .ma2627-v6-decision-copy>b{ display:block!important; margin-top:auto!important; padding-top:9px!important; color:var(--m6-blue)!important; font-size:10px!important; font-weight:900!important; } .ma2627-v6-decision-display{ border:2px solid var(--m6-gold)!important; background:#fffaf0!important; } .ma2627-v6-decision-display .ma2627-v6-decision-image{ background:linear-gradient(180deg,#fff3c7,#fff)!important; } .ma2627-v6-decision-badge{ position:absolute!important; top:8px!important; left:8px!important; z-index:2!important; padding:4px 6px!important; border-radius:999px!important; background:var(--m6-gold)!important; color:#211500!important; font-size:7px!important; font-weight:900!important; } .ma2627-v6-decision-tins{ border-color:#acd3f3!important; } .ma2627-v6-decision-tins .ma2627-v6-decision-image{ background:linear-gradient(180deg,#eaf5ff,#fff)!important; } .ma2627-v6-decision-advent{ border-color:#edc1c1!important; background:#fffafa!important; } .ma2627-v6-decision-advent .ma2627-v6-decision-image{ background:linear-gradient(180deg,#fff0ec,#fff)!important; } .ma2627-v6-decision-advent .ma2627-v6-decision-copy>span, .ma2627-v6-decision-advent .ma2627-v6-decision-copy>b{ color:#a91d1d!important; } @media only screen and (max-width:960px){ .ma2627-v6-decision-head{ align-items:flex-start!important; flex-direction:column!important; gap:5px!important; } .ma2627-v6-decision-head>p{ flex:auto!important; text-align:left!important; } .ma2627-v6-decision{ flex:1 1 calc(50% - 8px)!important; width:calc(50% - 6px)!important; max-width:calc(50% - 6px)!important; } } @media only screen and (max-width:600px){ .ma2627-v6-decision-grid{gap:7px!important} .ma2627-v6-decision{ flex:1 1 calc(50% - 5px)!important; width:calc(50% - 4px)!important; max-width:calc(50% - 4px)!important; min-height:116px!important; flex-direction:column!important; } .ma2627-v6-decision-image{ flex:0 0 auto!important; width:100%!important; height:92px!important; padding:6px!important; border-right:0!important; border-bottom:1px solid #e6eef7!important; } .ma2627-v6-decision-image img{ height:82px!important; max-height:82px!important; } .ma2627-v6-decision-copy{ padding:8px!important; } .ma2627-v6-decision-copy>strong{font-size:12px!important} .ma2627-v6-decision-copy>small{font-size:8px!important} .ma2627-v6-decision-copy>b{padding-top:6px!important;font-size:8px!important} } /* ========================================================= MATCH ATTAX 2026/27 – V6.2 FINAL Layout-Reset + neuer Checklisten-Block + Kontrastfix ========================================================= */ /* Alte Grid-/Spaltenkonflikte neutralisieren */ .ma2627-v6 .ma2627-v6-section{ display:block!important; width:100%!important; max-width:none!important; } .ma2627-v6 .ma2627-v6-section > .ma2627-v6-head{ display:block!important; width:100%!important; max-width:none!important; } /* Tin-Bereich immer volle Breite, zwei echte Spalten */ .ma2627-v6 .ma2627-v6-tins{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; width:100%!important; max-width:none!important; margin:0!important; gap:16px!important; align-items:stretch!important; } .ma2627-v6 .ma2627-v6-tin{ width:100%!important; max-width:none!important; margin:0!important; } /* Helle Tin: Text deutlich dunkler */ .ma2627-v6 .ma2627-v6-tin-light, .ma2627-v6 .ma2627-v6-tin-light p, .ma2627-v6 .ma2627-v6-tin-light li{ color:#314a66!important; } .ma2627-v6 .ma2627-v6-tin-light h3{color:#061a3d!important} /* Dunkle Tin: echter Kontrast statt transparenter Schrift */ .ma2627-v6 .ma2627-v6-tin-dark{ background:linear-gradient(145deg,#061a3d,#0b4f91)!important; color:#ffffff!important; } .ma2627-v6 .ma2627-v6-tin-dark h3, .ma2627-v6 .ma2627-v6-tin-dark p, .ma2627-v6 .ma2627-v6-tin-dark li, .ma2627-v6 .ma2627-v6-tin-dark strong, .ma2627-v6 .ma2627-v6-tin-dark b{ color:#ffffff!important; } .ma2627-v6 .ma2627-v6-tin-dark .ma2627-v6-tin-top span, .ma2627-v6 .ma2627-v6-tin-dark > a{ color:#ffd45a!important; } .ma2627-v6 .ma2627-v6-tin-dark .ma2627-v6-price-pills span{ background:rgba(255,255,255,.16)!important; color:#ffffff!important; } /* CHECKLISTEN-GUIDE: komplett eigener Block, keine Tin-Regeln */ .ma2627-v6-guide{ display:grid!important; grid-template-columns:minmax(0,1.35fr) minmax(290px,.65fr)!important; gap:24px!important; align-items:center!important; width:100%!important; max-width:none!important; margin-top:18px!important; padding:28px 30px!important; border:1px solid #b8d7f3!important; border-radius:20px!important; background:linear-gradient(135deg,#f5faff 0%,#ffffff 62%)!important; box-shadow:0 8px 28px rgba(6,26,61,.06)!important; } .ma2627-v6-guide-copy{width:100%!important;min-width:0!important} .ma2627-v6-guide-kicker{ display:block!important; margin-bottom:5px!important; color:#9b5300!important; font-size:10px!important; font-weight:900!important; letter-spacing:.08em!important; text-transform:uppercase!important; } .ma2627-v6 .ma2627-v6-guide h2{ margin:0 0 9px!important; color:#061a3d!important; font-size:30px!important; line-height:1.1!important; font-weight:900!important; } .ma2627-v6 .ma2627-v6-guide p{ margin:0!important; color:#344d68!important; font-size:13px!important; line-height:1.5!important; } .ma2627-v6-guide-points{ display:flex!important; flex-wrap:wrap!important; gap:7px!important; margin-top:15px!important; } .ma2627-v6-guide-points span{ display:inline-flex!important; align-items:center!important; gap:4px!important; padding:6px 9px!important; border:1px solid #d6e5f3!important; border-radius:999px!important; background:#ffffff!important; color:#344d68!important; font-size:10px!important; font-weight:700!important; } .ma2627-v6-guide-points b{color:#0b5ab7!important} .ma2627-v6-guide-actions{ display:flex!important; flex-wrap:wrap!important; gap:8px!important; margin-top:17px!important; } .ma2627-v6-guide-btn{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-height:42px!important; padding:9px 14px!important; border-radius:10px!important; font-size:11px!important; font-weight:900!important; text-decoration:none!important; } .ma2627-v6-guide-btn-main{background:#0b5ab7!important;color:#ffffff!important} .ma2627-v6-guide-btn-pdf{border:1px solid #b9d3ea!important;background:#ffffff!important;color:#0b5ab7!important} .ma2627-v6-guide-rates{ display:grid!important; grid-template-columns:1fr!important; gap:8px!important; width:100%!important; min-width:0!important; } .ma2627-v6-guide-rates > div{ display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; grid-template-rows:auto auto!important; column-gap:12px!important; align-items:center!important; padding:13px 14px!important; border:1px solid #d5e4f2!important; border-radius:12px!important; background:#ffffff!important; } .ma2627-v6-guide-rates small{ color:#5b7086!important; font-size:9px!important; font-weight:900!important; letter-spacing:.07em!important; } .ma2627-v6-guide-rates strong{ grid-column:2!important; grid-row:1/3!important; color:#0b5ab7!important; font-size:20px!important; line-height:1!important; } .ma2627-v6-guide-rates span{color:#5b7086!important;font-size:9px!important} .ma2627-v6-guide-rate-hot{border-color:#e7c46f!important;background:#fff7d9!important} .ma2627-v6-guide-rate-hot strong{color:#995600!important} /* Allgemeine Lesbarkeit */ .ma2627-v6 .ma2627-v6-head p, .ma2627-v6 .ma2627-v6-display-copy > p, .ma2627-v6 .ma2627-v6-advent-copy > p, .ma2627-v6 .ma2627-v6-faq details p{ color:#344d68!important; } .ma2627-v6 .ma2627-v6-head h2, .ma2627-v6 .ma2627-v6-faq summary{ color:#061a3d!important; } @media only screen and (max-width:960px){ .ma2627-v6-guide{grid-template-columns:1fr!important} .ma2627-v6-guide-rates{grid-template-columns:repeat(3,minmax(0,1fr))!important} .ma2627-v6-guide-rates > div{display:block!important;text-align:center!important} .ma2627-v6-guide-rates strong{display:block!important;margin:4px 0 2px!important} } @media only screen and (max-width:600px){ .ma2627-v6-guide{ gap:14px!important; padding:16px 12px!important; border-radius:14px!important; } .ma2627-v6 .ma2627-v6-guide h2{font-size:21px!important} .ma2627-v6 .ma2627-v6-guide p{font-size:11px!important} .ma2627-v6-guide-actions{flex-direction:column!important} .ma2627-v6-guide-btn{width:100%!important} .ma2627-v6-guide-rates{grid-template-columns:1fr!important} .ma2627-v6 .ma2627-v6-tins{grid-template-columns:1fr!important} } /* ========================================================= STICKER-UND-CO MAX POWER – FIXED 2-COLUMN PAIR Stand: 04.09.2026 Für Produktdetails + Sammlerboxen ========================================================= */ .suc-product-page.suc-premium-product .sucmp-pair { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 18px !important; width: 100% !important; max-width: none !important; margin: 0 0 18px !important; padding: 0 !important; align-items: stretch !important; clear: both !important; } .suc-product-page.suc-premium-product .sucmp-pair > * { width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; } /* Erst auf wirklich kleinen Smartphones untereinander */ @media only screen and (max-width: 560px) { .suc-product-page.suc-premium-product .sucmp-pair { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; } } /* ========================================================= STICKER-UND-CO MAX POWER PRODUCT SYSTEM V3 FINAL MASTER FOR ALL PRODUCT PAGES Desktop / Tablet / Mobile Use one wrapper only:
...
No product-specific CSS should be added below this block. ========================================================= */ /* ---------- 01 ROOT ---------- */ .sucv2 { --sucv2-blue: #0874d8; --sucv2-blue-dark: #0064bd; --sucv2-blue-bright: #1290e8; --sucv2-navy: #07162f; --sucv2-text: #263b59; --sucv2-muted: #607089; --sucv2-soft: #f4faff; --sucv2-extra-soft: #f8fcff; --sucv2-border: #d8e8f7; --sucv2-border-strong: #b8d8f3; --sucv2-green: #0c8c4f; --sucv2-green-soft: #effbf3; --sucv2-orange: #ef8500; --sucv2-warning: #fff8e8; --sucv2-warning-border: #f1d08c; --sucv2-shadow: 0 14px 34px rgba(17,119,183,.08); position: relative !important; left: 50% !important; display: block !important; width: calc(100vw - 40px) !important; max-width: 1180px !important; margin: 28px 0 42px !important; padding: 0 !important; transform: translateX(-50%) !important; clear: both !important; float: none !important; overflow-x: clip !important; color: var(--sucv2-text) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 15px !important; line-height: 1.65 !important; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; isolation: isolate !important; } .sucv2, .sucv2 *, .sucv2 *::before, .sucv2 *::after { box-sizing: border-box !important; } .sucv2 img { display: block !important; float: none !important; max-width: 100% !important; height: auto !important; margin: 0 !important; border: 0 !important; } .sucv2 a { text-decoration: none !important; box-shadow: none !important; } .sucv2 h2, .sucv2 h3, .sucv2 p, .sucv2 span, .sucv2 strong, .sucv2 a { overflow-wrap: anywhere !important; } .sucv2 h2, .sucv2 h3 { color: var(--sucv2-navy) !important; font-weight: 900 !important; } .sucv2 p { color: var(--sucv2-text) !important; } /* ---------- 02 SHARED TYPOGRAPHY ---------- */ .sucv2-kicker { display: block !important; margin: 0 0 8px !important; color: var(--sucv2-blue) !important; font-size: 12px !important; font-weight: 900 !important; line-height: 1.3 !important; letter-spacing: .55px !important; text-transform: uppercase !important; } .sucv2-title { margin: 0 0 12px !important; color: var(--sucv2-navy) !important; font-size: clamp(31px,4vw,46px) !important; font-weight: 900 !important; line-height: 1.07 !important; letter-spacing: -.5px !important; } .sucv2-lead { margin: 0 0 16px !important; color: var(--sucv2-text) !important; font-size: clamp(17px,2vw,20px) !important; line-height: 1.52 !important; } .sucv2-section-title, .sucv2-box h2, .sucv2-section h2, .sucv2-duo-col h2, .sucv2-story h2, .sucv2-cta h2, .sucv2-category-cta h2, .sucv2-instagram h2, .sucv2-gpsr h2, .sucv2-faq h2 { margin: 0 0 12px !important; color: var(--sucv2-navy) !important; font-size: clamp(24px,3vw,31px) !important; font-weight: 900 !important; line-height: 1.18 !important; } /* ---------- 03 HERO ---------- */ .sucv2-hero { display: grid !important; grid-template-columns: minmax(0,1.02fr) minmax(360px,.98fr) !important; gap: 26px !important; align-items: center !important; width: 100% !important; margin: 0 0 18px !important; padding: clamp(20px,3vw,28px) !important; background: linear-gradient(135deg,#ffffff 0%,#f8fcff 100%) !important; border: 1px solid var(--sucv2-border) !important; border-radius: 24px !important; box-shadow: 0 16px 40px rgba(8,116,216,.09) !important; } .sucv2-hero-media, .sucv2-hero-copy { min-width: 0 !important; max-width: 100% !important; } .sucv2-hero-media { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; min-height: 410px !important; padding: 20px !important; background: linear-gradient(180deg,#f4fbff 0%,#ffffff 100%) !important; border: 1px solid var(--sucv2-border) !important; border-radius: 20px !important; overflow: hidden !important; } .sucv2-hero-media img { width: 100% !important; height: 100% !important; max-width: 440px !important; max-height: 380px !important; object-fit: contain !important; filter: drop-shadow(0 15px 24px rgba(0,0,0,.16)) !important; } .sucv2-badge { position: absolute !important; top: 14px !important; left: 14px !important; z-index: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 38px !important; padding: 9px 13px !important; color: #ffffff !important; background: linear-gradient(135deg,#ffae00,#ef7d00) !important; border-radius: 999px !important; box-shadow: 0 8px 18px rgba(239,125,0,.22) !important; font-size: 12px !important; font-weight: 900 !important; line-height: 1.2 !important; } .sucv2-rating { margin: 0 0 13px !important; color: var(--sucv2-text) !important; font-size: 14px !important; line-height: 1.4 !important; } .sucv2-rating-stars { color: #f1ad00 !important; letter-spacing: 1px !important; } .sucv2-stock { display: inline-flex !important; align-items: center !important; gap: 8px !important; max-width: 100% !important; margin: 0 0 16px !important; padding: 9px 12px !important; color: #154d27 !important; background: var(--sucv2-green-soft) !important; border: 1px solid #bfe8c9 !important; border-radius: 11px !important; font-size: 13px !important; font-weight: 900 !important; } .sucv2-stock-dot { width: 9px !important; height: 9px !important; flex: 0 0 9px !important; background: var(--sucv2-green) !important; border-radius: 50% !important; box-shadow: 0 0 0 4px rgba(12,140,79,.12) !important; } .sucv2-quickfacts { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 9px !important; margin: 0 0 17px !important; } .sucv2-quickfact { min-width: 0 !important; padding: 12px !important; background: #ffffff !important; border: 1px solid var(--sucv2-border) !important; border-radius: 13px !important; box-shadow: 0 6px 18px rgba(17,119,183,.05) !important; } .sucv2-quickfact strong, .sucv2-quickfact span { display: block !important; } .sucv2-quickfact strong { margin-bottom: 3px !important; color: var(--sucv2-navy) !important; font-size: 13px !important; } .sucv2-quickfact span { color: var(--sucv2-muted) !important; font-size: 12px !important; line-height: 1.45 !important; } /* ---------- 04 BUY BOX ---------- */ .sucv2-buybox { width: 100% !important; padding: 18px !important; background: #ffffff !important; border: 1px solid var(--sucv2-border) !important; border-radius: 18px !important; box-shadow: 0 12px 30px rgba(8,116,216,.08) !important; } .sucv2-price-row { display: flex !important; flex-wrap: wrap !important; align-items: flex-end !important; gap: 10px !important; margin-bottom: 5px !important; } .sucv2-oldprice { color: var(--sucv2-muted) !important; font-size: 14px !important; line-height: 1.2 !important; } .sucv2-price { margin: 0 !important; color: var(--sucv2-blue) !important; font-size: clamp(34px,5vw,42px) !important; font-weight: 900 !important; line-height: 1 !important; } .sucv2-saving { display: inline-flex !important; margin: 0 0 7px !important; padding: 5px 8px !important; color: #0b7441 !important; background: #edf9f2 !important; border-radius: 8px !important; font-size: 12px !important; font-weight: 900 !important; } .sucv2-price-note { margin: 0 !important; color: var(--sucv2-muted) !important; font-size: 13px !important; line-height: 1.55 !important; } .sucv2-cart { width: 100% !important; margin-top: 14px !important; } .sucv2-cart .add_to_cart_inline { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } .sucv2-cart .button, .sucv2-cart .add_to_cart_button, .sucv2-buybutton { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 54px !important; margin: 0 !important; padding: 14px 18px !important; color: #ffffff !important; background: linear-gradient(135deg,var(--sucv2-blue-bright),var(--sucv2-blue-dark)) !important; border: 0 !important; border-radius: 14px !important; box-shadow: 0 13px 27px rgba(0,105,201,.24) !important; font-size: 16px !important; font-weight: 900 !important; line-height: 1.25 !important; text-align: center !important; white-space: normal !important; } .sucv2-cart .button:hover, .sucv2-cart .add_to_cart_button:hover, .sucv2-buybutton:hover { color: #ffffff !important; filter: brightness(.96) !important; } .sucv2-cart .added_to_cart { display: block !important; margin-top: 8px !important; color: var(--sucv2-blue-dark) !important; font-size: 13px !important; font-weight: 900 !important; text-align: center !important; } .sucv2-microtrust { margin: 10px 0 0 !important; color: var(--sucv2-muted) !important; font-size: 12px !important; line-height: 1.5 !important; text-align: center !important; } /* ---------- 05 TRUST BAR ---------- */ .sucv2-trust { display: grid !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 10px !important; width: 100% !important; margin: 0 0 18px !important; } .sucv2-trust-item { min-width: 0 !important; padding: 14px !important; background: #ffffff !important; border: 1px solid var(--sucv2-border) !important; border-radius: 14px !important; } .sucv2-trust-item strong, .sucv2-trust-item span { display: block !important; } .sucv2-trust-item strong { color: var(--sucv2-navy) !important; font-size: 14px !important; } .sucv2-trust-item span { margin-top: 3px !important; color: var(--sucv2-muted) !important; font-size: 12px !important; line-height: 1.45 !important; } /* ---------- 06 GENERIC BOX / SEO INTRO ---------- */ .sucv2-box, .sucv2-section, .sucv2-faq { width: 100% !important; margin: 0 0 18px !important; padding: clamp(20px,3vw,28px) !important; background: #ffffff !important; border: 1px solid var(--sucv2-border) !important; border-radius: 22px !important; box-shadow: var(--sucv2-shadow) !important; } .sucv2-box-soft, .sucv2-section-soft { background: linear-gradient(180deg,var(--sucv2-soft),#ffffff) !important; } .sucv2-box p:last-child, .sucv2-section p:last-child { margin-bottom: 0 !important; } .sucv2-section-head { max-width: 800px !important; margin-bottom: 19px !important; } .sucv2-section-head p { margin: 0 !important; } /* ---------- 07 DETAILS + BUY 50/50 ---------- */ .sucv2-duobox { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 0 18px !important; padding: 0 !important; background: #ffffff !important; border: 1px solid var(--sucv2-border) !important; border-radius: 22px !important; box-shadow: var(--sucv2-shadow) !important; overflow: hidden !important; clear: both !important; } .sucv2-duo { display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .sucv2-duo-col { min-width: 0 !important; padding: 25px !important; } .sucv2-duo-col + .sucv2-duo-col { border-left: 1px solid var(--sucv2-border) !important; } .sucv2-table { width: 100% !important; overflow: hidden !important; border: 1px solid var(--sucv2-border) !important; border-radius: 14px !important; } .sucv2-table-row { display: grid !important; grid-template-columns: minmax(105px,.72fr) minmax(0,1.28fr) !important; gap: 12px !important; padding: 12px 14px !important; border-bottom: 1px solid var(--sucv2-border) !important; } .sucv2-table-row:nth-child(odd) { background: #fbfdff !important; } .sucv2-table-row:last-child { border-bottom: 0 !important; } .sucv2-table-row span { color: var(--sucv2-muted) !important; font-size: 13px !important; } .sucv2-table-row strong { color: var(--sucv2-navy) !important; font-size: 13px !important; font-weight: 900 !important; text-align: right !important; } .sucv2-benefits { display: grid !important; gap: 10px !important; width: 100% !important; } .sucv2-benefit { padding: 14px !important; background: var(--sucv2-extra-soft) !important; border: 1px solid var(--sucv2-border) !important; border-radius: 14px !important; } .sucv2-benefit strong, .sucv2-benefit span { display: block !important; } .sucv2-benefit strong { margin-bottom: 4px !important; color: var(--sucv2-navy) !important; font-size: 15px !important; } .sucv2-benefit span { color: var(--sucv2-text) !important; font-size: 13px !important; line-height: 1.55 !important; } /* ---------- 08 STORY / SECOND IMAGE ---------- */ .sucv2-story { display: grid !important; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr) !important; gap: 28px !important; align-items: center !important; width: 100% !important; } .sucv2-story-media { min-width: 0 !important; padding: 18px !important; background: var(--sucv2-soft) !important; border: 1px solid var(--sucv2-border) !important; border-radius: 18px !important; } .sucv2-story-media img { width: 100% !important; height: 350px !important; object-fit: contain !important; } .sucv2-facts { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 10px !important; margin-top: 17px !important; } .sucv2-fact { padding: 12px 13px !important; background: #ffffff !important; border: 1px solid var(--sucv2-border) !important; border-radius: 12px !important; } .sucv2-fact strong, .sucv2-fact span { display: block !important; } .sucv2-fact strong { margin-bottom: 3px !important; color: var(--sucv2-muted) !important; font-size: 11px !important; text-transform: uppercase !important; } .sucv2-fact span { color: var(--sucv2-navy) !important; font-size: 14px !important; font-weight: 900 !important; } /* ---------- 09 CARDS / BENEFITS ---------- */ .sucv2-cardgrid { display: grid !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 14px !important; width: 100% !important; } .sucv2-cardgrid-3 { grid-template-columns: repeat(3,minmax(0,1fr)) !important; } .sucv2-card { display: flex !important; flex-direction: column !important; min-width: 0 !important; height: 100% !important; padding: 18px !important; background: var(--sucv2-extra-soft) !important; border: 1px solid var(--sucv2-border) !important; border-radius: 16px !important; } .sucv2-card strong, .sucv2-card span { display: block !important; } .sucv2-card strong { margin-bottom: 5px !important; color: var(--sucv2-navy) !important; font-size: 15px !important; } .sucv2-card span, .sucv2-card p { margin: 0 !important; color: var(--sucv2-muted) !important; font-size: 13px !important; line-height: 1.6 !important; } /* ---------- 10 NOTE ---------- */ .sucv2-note { display: grid !important; grid-template-columns: 46px minmax(0,1fr) !important; gap: 14px !important; align-items: start !important; width: 100% !important; margin: 0 0 18px !important; padding: 18px 20px !important; background: var(--sucv2-warning) !important; border: 1px solid var(--sucv2-warning-border) !important; border-radius: 18px !important; } .sucv2-note-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; color: #ffffff !important; background: linear-gradient(135deg,#f4a000,#e07800) !important; border-radius: 50% !important; font-size: 20px !important; font-weight: 900 !important; } .sucv2-note strong { display: block !important; margin-bottom: 4px !important; color: #8d5600 !important; } .sucv2-note p { margin: 0 !important; color: #654800 !important; font-size: 14px !important; } /* ---------- 11 SECOND BUY CTA ---------- */ .sucv2-cta { display: grid !important; grid-template-columns: minmax(0,1.2fr) minmax(250px,.8fr) !important; gap: 24px !important; align-items: center !important; width: 100% !important; margin: 0 0 18px !important; padding: 26px !important; background: linear-gradient(135deg,#eef7ff,#ffffff) !important; border: 1px solid var(--sucv2-border) !important; border-radius: 22px !important; box-shadow: var(--sucv2-shadow) !important; } .sucv2-cta p { margin: 0 !important; } .sucv2-cta-buy { min-width: 0 !important; padding: 18px !important; background: #ffffff !important; border: 1px solid var(--sucv2-border) !important; border-radius: 17px !important; text-align: center !important; } .sucv2-cta-buy .sucv2-price { display: block !important; margin-bottom: 7px !important; } /* ---------- 12 SHIPPING ---------- */ .sucv2-shipping { width: 100% !important; margin: 0 0 18px !important; padding: 20px 22px !important; background: linear-gradient(135deg,#edf9f2,#f8fffb) !important; border: 1px solid #c9ead5 !important; border-radius: 18px !important; } .sucv2-shipping strong { display: block !important; margin-bottom: 4px !important; color: #126b3b !important; font-size: 18px !important; } .sucv2-shipping p { margin: 0 !important; color: #365a46 !important; font-size: 14px !important; } /* ---------- 13 CATEGORY / CROSS SELL CTA ---------- */ .sucv2-category-cta { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 24px !important; width: 100% !important; margin: 0 0 18px !important; padding: 24px !important; color: #ffffff !important; background: linear-gradient(135deg,var(--sucv2-navy),#0b3768) !important; border-radius: 20px !important; } .sucv2-category-cta h2, .sucv2-category-cta p { color: #ffffff !important; } .sucv2-category-cta p { margin: 0 !important; opacity: .86 !important; } .sucv2-category-button { display: inline-flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: center !important; min-height: 46px !important; padding: 12px 17px !important; color: var(--sucv2-navy) !important; background: #ffffff !important; border-radius: 12px !important; font-size: 13px !important; font-weight: 900 !important; } /* ---------- 14 FAQ ---------- */ .sucv2-faq details { margin: 0 0 9px !important; background: var(--sucv2-soft) !important; border: 1px solid var(--sucv2-border) !important; border-radius: 13px !important; overflow: hidden !important; } .sucv2-faq details:last-child { margin-bottom: 0 !important; } .sucv2-faq summary { cursor: pointer !important; padding: 15px 17px !important; color: var(--sucv2-navy) !important; font-size: 15px !important; font-weight: 900 !important; } .sucv2-faq details p { margin: 0 !important; padding: 0 17px 16px !important; color: var(--sucv2-text) !important; font-size: 14px !important; line-height: 1.65 !important; } /* ---------- 15 INSTAGRAM ---------- */ .sucv2-instagram { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 24px !important; width: 100% !important; margin: 0 0 18px !important; padding: 23px !important; background: linear-gradient(135deg,#f7f1ff,#fff5fb) !important; border: 1px solid #e9d9f6 !important; border-radius: 20px !important; } .sucv2-instagram-copy { min-width: 0 !important; } .sucv2-instagram p { margin: 0 !important; } .sucv2-instagram-button { display: inline-flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: center !important; min-height: 46px !important; padding: 12px 18px !important; color: #ffffff !important; background: linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045) !important; border-radius: 12px !important; font-weight: 900 !important; } /* ---------- 16 GPSR ---------- */ .sucv2-gpsr { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 15px !important; width: 100% !important; margin: 0 0 18px !important; } .sucv2-gpsr-box, .sucv2-gpsr-note { min-width: 0 !important; padding: 20px !important; background: #ffffff !important; border: 1px solid var(--sucv2-border) !important; border-radius: 18px !important; } .sucv2-gpsr-box h2 { font-size: 20px !important; } .sucv2-gpsr-box p { margin: 0 !important; color: var(--sucv2-text) !important; font-size: 14px !important; } .sucv2-gpsr-note { grid-column: 1 / -1 !important; background: #fff8ed !important; border-color: #f1d5a6 !important; color: #634b2c !important; font-size: 13px !important; line-height: 1.6 !important; } .sucv2-gpsr-note strong { display: block !important; margin-bottom: 5px !important; color: #9b5800 !important; font-size: 15px !important; } /* ---------- 17 HOVER ---------- */ @media (hover:hover) { .sucv2-card, .sucv2-trust-item, .sucv2-quickfact { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important; } .sucv2-card:hover, .sucv2-trust-item:hover, .sucv2-quickfact:hover { transform: translateY(-3px) !important; border-color: var(--sucv2-border-strong) !important; box-shadow: 0 14px 28px rgba(8,116,216,.11) !important; } } /* ---------- 18 TABLET 768-960 ---------- */ @media only screen and (min-width:768px) and (max-width:960px) { .sucv2 { width: calc(100vw - 28px) !important; } .sucv2-hero { grid-template-columns: minmax(0,1fr) minmax(300px,.9fr) !important; gap: 20px !important; padding: 20px !important; } .sucv2-hero-media { min-height: 350px !important; } .sucv2-hero-media img { max-height: 325px !important; } .sucv2-quickfacts { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } .sucv2-trust, .sucv2-cardgrid, .sucv2-cardgrid-3 { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } .sucv2-story { grid-template-columns: minmax(260px,.9fr) minmax(0,1.1fr) !important; } } /* ---------- 19 SMARTPHONE <=767 ---------- */ @media only screen and (max-width:767px) { .sucv2 { left: auto !important; width: 100% !important; max-width: 100% !important; margin: 18px 0 28px !important; padding: 0 4px !important; transform: none !important; } .sucv2-hero { grid-template-columns: minmax(0,1fr) !important; gap: 17px !important; padding: 16px !important; border-radius: 19px !important; } .sucv2-hero-media { min-height: 300px !important; padding: 14px !important; } .sucv2-hero-media img { max-width: 100% !important; max-height: 275px !important; } .sucv2-title { font-size: 29px !important; } .sucv2-lead { font-size: 16px !important; } .sucv2-quickfacts, .sucv2-trust, .sucv2-facts { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } .sucv2-duo, .sucv2-story, .sucv2-cta, .sucv2-gpsr { grid-template-columns: minmax(0,1fr) !important; } .sucv2-duo-col { padding: 19px !important; } .sucv2-duo-col + .sucv2-duo-col { border-left: 0 !important; border-top: 1px solid var(--sucv2-border) !important; } .sucv2-story-media img { height: 280px !important; } .sucv2-cardgrid, .sucv2-cardgrid-3 { grid-template-columns: minmax(0,1fr) !important; } .sucv2-category-cta, .sucv2-instagram { align-items: stretch !important; flex-direction: column !important; } .sucv2-category-button, .sucv2-instagram-button { width: 100% !important; } .sucv2-gpsr-note { grid-column: auto !important; } .sucv2-cart .button, .sucv2-cart .add_to_cart_button, .sucv2-buybutton { width: 100% !important; } } /* ---------- 20 SMALL PHONES <=420 ---------- */ @media only screen and (max-width:420px) { .sucv2 { padding-right: 0 !important; padding-left: 0 !important; } .sucv2-hero { padding: 13px !important; } .sucv2-hero-media { min-height: 270px !important; } .sucv2-hero-media img { max-height: 250px !important; } .sucv2-title { font-size: 27px !important; } .sucv2-quickfacts, .sucv2-trust, .sucv2-facts { grid-template-columns: minmax(0,1fr) !important; } .sucv2-table-row { grid-template-columns: minmax(0,1fr) !important; gap: 3px !important; } .sucv2-table-row strong { text-align: left !important; } .sucv2-note { grid-template-columns: 38px minmax(0,1fr) !important; padding: 16px !important; } .sucv2-note-icon { width: 36px !important; height: 36px !important; font-size: 17px !important; } } /* ========================================================= BLUEY SERIE 3 – FUNNY YUMMY CATEGORY ========================================================= */ .bluey3-hub{ --b-blue:#1476d4; --b-dark:#063b73; --b-light:#eaf6ff; --b-yellow:#ffd54a; --b-cream:#fffaf0; --b-text:#18324a; --b-shadow:0 14px 36px rgba(12,64,110,.13); max-width:1180px; margin:42px auto 0; color:var(--b-text); font-family:inherit; } .bluey3-hub *{ box-sizing:border-box; } .bluey3-hub img{ display:block; max-width:100%; height:auto; } /* HERO */ .bluey3-hero{ position:relative; overflow:hidden; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; min-height:480px; padding:52px 56px; border-radius:30px; background: radial-gradient(circle at 85% 20%,rgba(255,213,74,.95) 0 6%,transparent 7%), radial-gradient(circle at 93% 78%,rgba(255,255,255,.20) 0 8%,transparent 9%), linear-gradient(135deg,#0759ad 0%,#1786df 56%,#73cfff 100%); box-shadow:0 24px 55px rgba(5,71,132,.25); } .bluey3-hero:before{ content:""; position:absolute; width:360px; height:360px; right:-90px; top:-130px; border-radius:50%; border:52px solid rgba(255,255,255,.12); } .bluey3-hero__copy{ position:relative; z-index:2; color:#fff; } .bluey3-pill, .bluey3-kicker{ display:inline-block; font-weight:900; letter-spacing:.06em; text-transform:uppercase; } .bluey3-pill{ padding:8px 15px; border-radius:999px; background:var(--b-yellow); color:#173451; font-size:14px; } .bluey3-hero h2{ margin:18px 0 18px; color:#fff; font-size:clamp(38px,5vw,66px); line-height:.98; letter-spacing:-.035em; } .bluey3-hero h2 span{ color:var(--b-yellow); } .bluey3-lead{ max-width:650px; margin:0; color:#fff; font-size:19px; line-height:1.6; } .bluey3-hero__facts{ display:flex; flex-wrap:wrap; gap:10px; margin:24px 0; } .bluey3-hero__facts span{ padding:8px 12px; border-radius:10px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); color:#fff; font-weight:800; } .bluey3-btn{ display:inline-flex; align-items:center; justify-content:center; margin-top:5px; padding:14px 22px; border-radius:12px; background:var(--b-yellow); color:#16334d !important; text-decoration:none !important; font-weight:900; box-shadow:0 8px 20px rgba(0,0,0,.14); } .bluey3-btn:hover{ transform:translateY(-2px); } .bluey3-hero__image{ position:relative; z-index:2; display:flex; justify-content:center; align-items:center; } .bluey3-hero__image img{ max-height:385px; object-fit:contain; filter:drop-shadow(0 20px 22px rgba(0,43,85,.25)); } /* KPI */ .bluey3-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:18px 0 50px; } .bluey3-kpis > div{ padding:18px 12px; text-align:center; border-radius:17px; background:#fff; border:1px solid #d9eafb; box-shadow:0 8px 22px rgba(13,73,124,.08); } .bluey3-kpis strong{ display:block; color:var(--b-blue); font-size:30px; line-height:1; } .bluey3-kpis span{ display:block; margin-top:7px; font-size:14px; font-weight:700; } /* GENERAL */ .bluey3-head{ max-width:760px; margin:0 auto 28px; text-align:center; } .bluey3-kicker{ color:var(--b-blue); font-size:13px; } .bluey3-head h2, .bluey3-story h2, .bluey3-display h2, .bluey3-packs h2, .bluey3-final h2{ margin:8px 0 12px; color:#123c66; font-size:clamp(28px,3.5vw,42px); line-height:1.12; } .bluey3-head p{ margin:0; font-size:17px; } /* STORY */ .bluey3-story{ display:grid; grid-template-columns:.8fr 1.2fr; gap:52px; align-items:center; margin:0 0 65px; padding:36px 50px; border-radius:26px; background:linear-gradient(135deg,#fff8d9,#f4fbff); } .bluey3-story__image{ display:flex; justify-content:center; } .bluey3-story__image img{ max-height:330px; filter:drop-shadow(0 15px 22px rgba(0,60,105,.16)); } .bluey3-story__copy p{ font-size:17px; line-height:1.7; } /* PRODUCT CHOICE */ .bluey3-products{ margin:0 0 70px; } .bluey3-productgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .bluey3-productcard{ position:relative; overflow:hidden; padding:22px; border-radius:23px; background:#fff; border:1px solid #dbeaf6; box-shadow:var(--b-shadow); } .bluey3-productcard--yellow{ background:linear-gradient(180deg,#fffceb,#fff); } .bluey3-productcard--featured{ border:3px solid var(--b-yellow); transform:translateY(-8px); background:linear-gradient(180deg,#eef8ff,#fff); } .bluey3-tag{ display:inline-block; padding:6px 9px; border-radius:8px; background:#e7f4ff; color:#0963b4; font-size:11px; font-weight:900; } .bluey3-productcard--featured .bluey3-tag{ background:var(--b-yellow); color:#173451; } .bluey3-productcard__img{ height:230px; margin:14px 0 8px; display:flex; align-items:center; justify-content:center; } .bluey3-productcard__img img{ max-height:220px; object-fit:contain; } .bluey3-productcard h3{ margin:10px 0 8px; color:#123f6a; font-size:23px; } .bluey3-productcard p{ min-height:72px; margin:0 0 12px; line-height:1.55; } .bluey3-value{ display:block; color:var(--b-blue); font-size:17px; } /* DISPLAY */ .bluey3-display{ position:relative; overflow:hidden; display:grid; grid-template-columns:1fr 1fr; align-items:center; margin:0 0 70px; padding:50px 55px; border-radius:28px; background:linear-gradient(135deg,#073c76,#0b77ca); box-shadow:0 20px 46px rgba(3,56,105,.22); color:#fff; } .bluey3-display:after{ content:""; position:absolute; width:420px; height:420px; right:-90px; bottom:-220px; border-radius:50%; background:rgba(255,213,74,.17); } .bluey3-pill--dark{ background:#fff; color:#075ba5; } .bluey3-display h2{ color:#fff; font-size:48px; } .bluey3-display h2 span{ color:var(--b-yellow); } .bluey3-display p{ max-width:550px; color:#fff; font-size:17px; line-height:1.6; } .bluey3-display__numbers{ display:flex; gap:12px; margin:24px 0; } .bluey3-display__numbers div{ min-width:140px; padding:13px 18px; border-radius:14px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.18); } .bluey3-display__numbers strong{ display:block; color:var(--b-yellow); font-size:30px; } .bluey3-display__numbers span{ font-size:13px; font-weight:700; } .bluey3-display__image{ position:relative; z-index:2; display:flex; justify-content:center; } .bluey3-display__image img{ max-height:390px; filter:drop-shadow(0 22px 25px rgba(0,0,0,.28)); } .bluey3-small{ font-size:13px !important; opacity:.85; } /* BUNDLES */ .bluey3-bundles{ margin:0 0 70px; } .bluey3-bundlegrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .bluey3-bundlegrid article{ display:flex; align-items:center; min-height:150px; padding:16px; border-radius:18px; background:#fff; border:1px solid #dbeaf6; box-shadow:0 8px 22px rgba(13,73,124,.08); } .bluey3-bundlegrid__best{ background:linear-gradient(135deg,#fff8d6,#fff); border:2px solid var(--b-yellow) !important; } .bluey3-bundlegrid img{ width:44%; max-height:125px; object-fit:contain; } .bluey3-bundlegrid article > div{ padding-left:12px; } .bluey3-bundlegrid strong, .bluey3-bundlegrid span{ display:block; } .bluey3-bundlegrid strong{ color:#123f6a; font-size:18px; } .bluey3-bundlegrid span{ margin-top:6px; font-size:14px; } /* PACKS */ .bluey3-packs{ display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:35px; margin:0 0 60px; padding:32px 40px; border-radius:24px; background:#edf8ff; } .bluey3-packs__copy p{ font-size:17px; line-height:1.6; } .bluey3-packs__images{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .bluey3-packs__images img{ max-height:210px; margin:auto; } /* TRUST */ .bluey3-trust{ display:grid; grid-template-columns:repeat(4,1fr); margin:0 0 65px; overflow:hidden; border-radius:20px; background:#0d4f89; } .bluey3-trust > div{ padding:20px 15px; text-align:center; border-right:1px solid rgba(255,255,255,.15); } .bluey3-trust > div:last-child{ border-right:0; } .bluey3-trust strong, .bluey3-trust span{ display:block; color:#fff; } .bluey3-trust strong{ font-size:17px; } .bluey3-trust span{ margin-top:5px; font-size:13px; opacity:.85; } /* FAQ */ .bluey3-faq{ max-width:900px; margin:0 auto 70px; } .bluey3-faq details{ margin:9px 0; padding:0; overflow:hidden; border-radius:13px; border:1px solid #d9e8f4; background:#fff; } .bluey3-faq summary{ cursor:pointer; padding:17px 20px; color:#123f6a; font-weight:800; } .bluey3-faq details p{ margin:0; padding:0 20px 18px; line-height:1.6; } /* FINAL */ .bluey3-final{ display:grid; grid-template-columns:1fr .75fr; align-items:center; min-height:330px; padding:38px 50px; overflow:hidden; border-radius:27px; background:linear-gradient(135deg,#fff2aa,#ffda4f); } .bluey3-final p{ max-width:620px; font-size:17px; line-height:1.6; } .bluey3-final img{ max-height:270px; margin:auto; } .bluey3-parentlink{ margin:22px 0 0; text-align:center; font-size:14px; } /* MOBILE */ @media (max-width:767px){ .bluey3-hub{ margin-top:24px; } .bluey3-hero{ grid-template-columns:1fr; padding:30px 22px 24px; border-radius:22px; } .bluey3-hero h2{ font-size:39px; } .bluey3-lead{ font-size:16px; } .bluey3-hero__image{ margin-top:24px; } .bluey3-hero__image img{ max-height:280px; } .bluey3-kpis{ grid-template-columns:1fr 1fr; gap:8px; margin-bottom:38px; } .bluey3-kpis > div{ padding:14px 8px; } .bluey3-kpis strong{ font-size:25px; } .bluey3-story, .bluey3-display, .bluey3-packs, .bluey3-final{ grid-template-columns:1fr; } .bluey3-story{ padding:24px 20px; gap:20px; } .bluey3-productgrid, .bluey3-bundlegrid{ grid-template-columns:1fr; } .bluey3-productcard--featured{ transform:none; } .bluey3-productcard__img{ height:190px; } .bluey3-display{ padding:30px 22px; } .bluey3-display h2{ font-size:37px; } .bluey3-display__image{ margin-top:20px; } .bluey3-bundlegrid article{ min-height:125px; } .bluey3-packs{ padding:24px 20px; } .bluey3-trust{ grid-template-columns:1fr 1fr; } .bluey3-trust > div{ border-bottom:1px solid rgba(255,255,255,.12); } .bluey3-final{ padding:28px 22px; } } .sucv2-duo > :not(.sucv2-duo-col) { display: none !important; } .sucv2-duo > .sucv2-duo-col { min-width: 0 !important; width: auto !important; max-width: none !important; grid-column: auto !important; grid-row: auto !important; /* ========================================================= MATCH ATTAX 2026/27 EINZELKARTEN MAX POWER - SAFE V2 NUR OPTIK / KEINE FUNKTIONSÄNDERUNG Greift ausschließlich auf Produktseiten, deren Produkt-Meta auf die Einzelkarten-Kategorie verweist. ========================================================= */ /* --------------------------------------------------------- BASIS --------------------------------------------------------- */ body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) div.product { box-sizing: border-box; } /* --------------------------------------------------------- PRODUKTBILD / GALERIE Bestehendes WooCommerce-Layout bleibt erhalten. --------------------------------------------------------- */ body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) div.product > .woocommerce-product-gallery, body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) div.product > .images { position: relative !important; padding: clamp(18px, 3vw, 30px) !important; background: linear-gradient( 180deg, #f4fbff 0%, #ffffff 100% ) !important; border: 1px solid #d8e8f7 !important; border-radius: 24px !important; box-shadow: 0 14px 34px rgba(17,119,183,.10) !important; box-sizing: border-box !important; } /* Blaues Badge über dem Bild */ body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) div.product > .woocommerce-product-gallery::before, body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) div.product > .images::before { content: "MATCH ATTAX 2026/27 · EINZELKARTE"; position: absolute !important; top: 14px !important; left: 14px !important; z-index: 20 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 9px 13px !important; color: #ffffff !important; background: linear-gradient( 135deg, #1290e8 0%, #0069c9 100% ) !important; border-radius: 999px !important; box-shadow: 0 8px 20px rgba(0,105,201,.24) !important; font-size: 11px !important; font-weight: 900 !important; line-height: 1.2 !important; letter-spacing: .04em !important; pointer-events: none !important; } /* Kartenbild */ body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) .woocommerce-product-gallery__image { text-align: center !important; } body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) .woocommerce-product-gallery__image img { display: block !important; width: auto !important; max-width: 100% !important; height: auto !important; max-height: 520px !important; margin-right: auto !important; margin-left: auto !important; object-fit: contain !important; filter: drop-shadow( 0 16px 25px rgba(0,0,0,.17) ) !important; } /* Thumbnail etwas hochwertiger */ body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) .flex-control-thumbs img { border: 1px solid #d8e8f7 !important; border-radius: 10px !important; background: #ffffff !important; } /* --------------------------------------------------------- RECHTE PRODUKTBOX --------------------------------------------------------- */ body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) div.product > .summary { padding: clamp(20px, 3vw, 30px) !important; background: linear-gradient( 180deg, #ffffff 0%, #fbfdff 100% ) !important; border: 1px solid #d8e8f7 !important; border-radius: 24px !important; box-shadow: 0 14px 34px rgba(17,119,183,.10) !important; box-sizing: border-box !important; } /* Kleine Serienkennzeichnung */ body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) div.product > .summary::before { content: "TOPPS · MATCH ATTAX 2026/27"; display: inline-flex !important; align-items: center !important; margin: 0 0 11px !important; padding: 7px 11px !important; color: #0874d8 !important; background: #f4faff !important; border: 1px solid #d8e8f7 !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 900 !important; line-height: 1.2 !important; letter-spacing: .05em !important; } /* --------------------------------------------------------- TITEL --------------------------------------------------------- */ body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) .summary .product_title { margin: 0 0 12px !important; color: #07162f !important; font-size: clamp( 27px, 3.6vw, 39px ) !important; line-height: 1.12 !important; font-weight: 900 !important; letter-spacing: -.025em !important; overflow-wrap: anywhere !important; } /* --------------------------------------------------------- BEWERTUNG --------------------------------------------------------- */ body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) .woocommerce-product-rating { margin: 0 0 12px !important; padding-bottom: 12px !important; border-bottom: 1px solid #e4edf5 !important; } /* --------------------------------------------------------- PREIS --------------------------------------------------------- */ body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) .summary .price { display: block !important; margin: 15px 0 14px !important; color: #0874d8 !important; font-size: clamp( 34px, 5vw, 44px ) !important; line-height: 1 !important; font-weight: 900 !important; } body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) .summary .price .amount { color: #0874d8 !important; font-weight: 900 !important; } /* --------------------------------------------------------- LAGERSTATUS --------------------------------------------------------- */ body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) .summary p.stock { display: inline-flex !important; align-items: center !important; margin: 0 0 17px !important; padding: 10px 13px !important; color: #154d27 !important; background: #effbf3 !important; border: 1px solid #bfe8c9 !important; border-radius: 12px !important; font-size: 14px !important; font-weight: 900 !important; line-height: 1.3 !important; } /* grüner Punkt vor Auf Lager */ body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) .summary p.stock::before { content: ""; display: inline-block !important; width: 9px !important; height: 9px !important; margin-right: 8px !important; background: #0c8c4f !important; border-radius: 50% !important; box-shadow: 0 0 0 4px rgba(12,140,79,.12) !important; } /* --------------------------------------------------------- KURZBESCHREIBUNG --------------------------------------------------------- */ body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) .woocommerce-product-details__short-description { margin: 0 0 18px !important; color: #263b59 !important; font-size: 15px !important; line-height: 1.6 !important; } /* --------------------------------------------------------- PRODUKT-META / SKU / KATEGORIEN --------------------------------------------------------- */ body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) .product_meta { margin: 16px 0 0 !important; padding: 14px 0 0 !important; color: #607089 !important; border-top: 1px solid #e4edf5 !important; font-size: 12px !important; line-height: 1.65 !important; } body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) .product_meta a { color: #0874d8 !important; font-weight: 700 !important; text-decoration: none !important; } /* --------------------------------------------------------- WARENKORB / BUYBOX Originaler WooCommerce-Warenkorb bleibt vollständig erhalten --------------------------------------------------------- */ body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) .summary form.cart { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; width: 100% !important; margin: 23px 0 18px !important; padding: 17px !important; background: linear-gradient( 180deg, #ffffff 0%, #f4faff 100% ) !important; border: 1px solid #d8e8f7 !important; border-radius: 18px !important; box-shadow: 0 10px 24px rgba(17,119,183,.08) !important; box-sizing: border-box !important; } /* Mengenfeld */ body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) form.cart .quantity { position: relative !important; flex: 0 0 82px !important; margin: 0 !important; } body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) form.cart input.qty { width: 82px !important; min-width: 82px !important; height: 58px !important; padding: 8px !important; color: #07162f !important; background: #ffffff !important; border: 1px solid #cbddea !important; border-radius: 13px !important; font-size: 16px !important; font-weight: 800 !important; text-align: center !important; box-sizing: border-box !important; } /* Mengenbeschriftung aus dem bestehenden globalen CSS bei dieser Buybox etwas enger positionieren */ body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) form.cart .quantity::before { top: -19px !important; color: #607089 !important; font-size: 11px !important; } /* ORIGINALER WooCommerce-Warenkorbbutton */ body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) form.cart .single_add_to_cart_button { flex: 1 1 230px !important; width: auto !important; min-width: 200px !important; min-height: 58px !important; height: auto !important; margin: 0 !important; padding: 16px 28px !important; color: #ffffff !important; background: linear-gradient( 135deg, #1290e8 0%, #0069c9 100% ) !important; border: 0 !important; border-radius: 14px !important; box-shadow: 0 15px 30px rgba(0,105,201,.27) !important; font-size: 17px !important; font-weight: 900 !important; line-height: 1.2 !important; text-shadow: none !important; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important; } @media (hover:hover) { body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) form.cart .single_add_to_cart_button:hover { transform: translateY(-2px) !important; filter: brightness(.98) !important; box-shadow: 0 19px 34px rgba(0,105,201,.32) !important; } } /* --------------------------------------------------------- GERMANIZED / PREIS- UND VERSANDHINWEISE --------------------------------------------------------- */ body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) .wc-gzd-additional-info, body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) .legal-price-info { color: #607089 !important; font-size: 12px !important; line-height: 1.5 !important; } /* --------------------------------------------------------- BESCHREIBUNG / TABS Nur optisch leicht angleichen --------------------------------------------------------- */ body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) .woocommerce-tabs { margin-top: 30px !important; } body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) .woocommerce-tabs .panel { color: #263b59 !important; line-height: 1.7 !important; } body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) .woocommerce-tabs .panel h2, body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) .woocommerce-tabs .panel h3 { color: #07162f !important; font-weight: 900 !important; } /* --------------------------------------------------------- TABLET --------------------------------------------------------- */ @media only screen and (max-width: 900px) { body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) div.product > .woocommerce-product-gallery, body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) div.product > .images, body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) div.product > .summary { border-radius: 20px !important; } } /* --------------------------------------------------------- SMARTPHONE --------------------------------------------------------- */ @media only screen and (max-width: 600px) { body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) div.product > .woocommerce-product-gallery, body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) div.product > .images, body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) div.product > .summary { padding: 15px !important; border-radius: 17px !important; } body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) div.product > .woocommerce-product-gallery::before, body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) div.product > .images::before { top: 10px !important; left: 10px !important; padding: 7px 10px !important; font-size: 9px !important; } body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) .summary .product_title { font-size: 25px !important; line-height: 1.15 !important; } body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) .summary .price { font-size: 36px !important; } body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) .summary form.cart { display: grid !important; grid-template-columns: 76px minmax(0,1fr) !important; gap: 8px !important; padding: 12px !important; } body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) form.cart .quantity { width: 76px !important; min-width: 76px !important; } body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) form.cart input.qty { width: 76px !important; min-width: 76px !important; height: 54px !important; } body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) form.cart .single_add_to_cart_button { width: 100% !important; min-width: 0 !important; min-height: 54px !important; padding: 14px 12px !important; font-size: 15px !important; } } /* --------------------------------------------------------- SEHR KLEINE SMARTPHONES --------------------------------------------------------- */ @media only screen and (max-width: 370px) { body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) .summary form.cart { grid-template-columns: 1fr !important; } body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) form.cart .quantity, body.single-product:has( .product_meta a[href*="topps-match-attax-champions-league-2026-27-einzelkarten"] ) form.cart input.qty { width: 100% !important; min-width: 100% !important; } } .single-product div.product.suc-ma-single-card .summary { outline: 3px solid #1290e8 !important; } /* ========================================================= PANINI STITCH GOOD VIBES 2026 CATEGORY LANDING PAGE ========================================================= */ .stitchgv26{ --sg-navy:#26396b; --sg-blue:#5269a8; --sg-pink:#ed7fb5; --sg-pink-dark:#d95798; --sg-lilac:#eee8ff; --sg-lilac2:#f8f5ff; --sg-yellow:#ffd95a; --sg-text:#252738; --sg-muted:#686b7c; --sg-line:#ebe8f2; --sg-white:#fff; color:var(--sg-text); font-size:16px; line-height:1.65; } .stitchgv26 *{ box-sizing:border-box; } .stitchgv26 img{ display:block; max-width:100%; height:auto; } .stitchgv26 h2, .stitchgv26 h3, .stitchgv26 p{ margin-top:0; } .stitchgv26 a{ text-decoration:none; } /* HERO */ .stitchgv26-hero{ position:relative; overflow:hidden; display:grid; grid-template-columns:1.05fr .95fr; gap:38px; align-items:center; padding:48px; margin:0 0 24px; border-radius:28px; background: radial-gradient(circle at 90% 10%, rgba(255,217,90,.40), transparent 26%), radial-gradient(circle at 8% 90%, rgba(237,127,181,.30), transparent 30%), linear-gradient(135deg,#f8f5ff 0%,#eee8ff 45%,#ffeaf5 100%); border:1px solid #e9e0f5; } .stitchgv26-kicker, .stitchgv26-overline{ display:block; margin-bottom:10px; color:var(--sg-pink-dark); font-size:12px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; } .stitchgv26-hero h2{ max-width:650px; margin-bottom:18px; color:var(--sg-navy); font-size:clamp(34px,5vw,60px); line-height:1.02; letter-spacing:-.035em; } .stitchgv26-hero-copy > p{ max-width:720px; font-size:17px; } .stitchgv26-hero-pills{ display:flex; flex-wrap:wrap; gap:8px; margin:22px 0; } .stitchgv26-hero-pills span{ padding:8px 13px; border-radius:999px; background:rgba(255,255,255,.76); border:1px solid rgba(82,105,168,.14); color:var(--sg-navy); font-size:13px; font-weight:700; } .stitchgv26-hero-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; } /* BUTTONS */ .stitchgv26-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:11px 20px; border-radius:12px; font-weight:800; transition:.2s ease; } .stitchgv26-btn:hover{ transform:translateY(-1px); } .stitchgv26-btn-main{ background:var(--sg-navy); color:#fff !important; } .stitchgv26-btn-light{ background:#fff; color:var(--sg-navy) !important; border:1px solid #ddd7ef; } .stitchgv26-btn-pink{ background:var(--sg-pink-dark); color:#fff !important; } /* HERO IMAGE STAGE */ .stitchgv26-stage{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .stitchgv26-stage-card{ min-width:0; padding:13px; border-radius:18px; background:rgba(255,255,255,.90); box-shadow:0 12px 35px rgba(52,39,84,.09); } .stitchgv26-stage-main{ grid-row:span 2; display:flex; flex-direction:column; justify-content:center; } .stitchgv26-stage-card span{ display:block; margin-bottom:8px; color:var(--sg-navy); font-size:11px; font-weight:900; letter-spacing:.06em; } .stitchgv26-stage-card img{ width:100%; max-height:290px; object-fit:contain; } /* FACTS */ .stitchgv26-facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; overflow:hidden; margin-bottom:36px; border-radius:18px; background:#dcd7ea; } .stitchgv26-facts > div{ padding:22px 16px; background:var(--sg-navy); text-align:center; } .stitchgv26-facts strong{ display:block; color:var(--sg-yellow); font-size:28px; line-height:1; } .stitchgv26-facts span{ display:block; margin-top:6px; color:#fff; font-size:13px; } /* GENERIC SECTION */ .stitchgv26-section{ padding:42px 0; } .stitchgv26-head{ max-width:780px; margin:0 auto 28px; text-align:center; } .stitchgv26-head > span{ display:block; margin-bottom:7px; color:var(--sg-pink-dark); font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; } .stitchgv26-head h2{ margin-bottom:12px; color:var(--sg-navy); font-size:clamp(28px,4vw,42px); line-height:1.1; } .stitchgv26-head p{ color:var(--sg-muted); } /* CARD TYPES */ .stitchgv26-cardtypes{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; } .stitchgv26-cardtypes article{ padding:22px 16px; border-radius:18px; background:linear-gradient(180deg,#fff,#faf8ff); border:1px solid var(--sg-line); text-align:center; } .stitchgv26-cardtypes strong{ display:block; color:var(--sg-pink-dark); font-size:32px; line-height:1; } .stitchgv26-cardtypes h3{ margin:9px 0 7px; color:var(--sg-navy); font-size:17px; } .stitchgv26-cardtypes p{ margin:0; color:var(--sg-muted); font-size:13px; line-height:1.5; } .stitchgv26-note{ margin-top:15px; padding:16px 20px; border-radius:14px; background:#fff6ca; color:#554a1b; text-align:center; } /* DISPLAY FEATURE */ .stitchgv26-feature{ display:grid; grid-template-columns:.9fr 1.1fr; gap:38px; align-items:center; margin:24px 0; padding:38px; border-radius:26px; background:linear-gradient(135deg,#f7f4ff,#fff0f7); border:1px solid #e9e0f5; } .stitchgv26-feature-image{ position:relative; padding:22px; border-radius:20px; background:#fff; } .stitchgv26-feature-image img{ width:100%; max-height:390px; object-fit:contain; } .stitchgv26-badge{ position:absolute; z-index:2; top:13px; left:13px; padding:7px 10px; border-radius:999px; background:var(--sg-pink-dark); color:#fff; font-size:10px; font-weight:900; } .stitchgv26-feature-copy h2{ margin-bottom:14px; color:var(--sg-navy); font-size:clamp(29px,4vw,43px); line-height:1.08; } .stitchgv26-mini-facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:20px 0; } .stitchgv26-mini-facts div{ padding:13px 8px; border-radius:12px; background:#fff; text-align:center; font-size:12px; } .stitchgv26-mini-facts b{ display:block; color:var(--sg-pink-dark); font-size:22px; } /* PRODUCTS */ .stitchgv26-products{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .stitchgv26-product{ overflow:hidden; border:1px solid var(--sg-line); border-radius:22px; background:#fff; } .stitchgv26-product-image{ display:flex; align-items:center; justify-content:center; min-height:285px; padding:22px; background:var(--sg-lilac2); } .stitchgv26-product-image > img{ max-height:260px; object-fit:contain; } .stitchgv26-product-image.stitchgv26-tins{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; } .stitchgv26-tins img{ width:100%; max-height:220px; object-fit:contain; } .stitchgv26-product-copy{ padding:24px; } .stitchgv26-product-copy > span{ color:var(--sg-pink-dark); font-size:11px; font-weight:900; letter-spacing:.08em; } .stitchgv26-product-copy h3{ margin:6px 0 10px; color:var(--sg-navy); font-size:25px; } .stitchgv26-product-copy a{ color:var(--sg-pink-dark); font-weight:800; } /* STARTERS */ .stitchgv26-starters{ margin:30px 0; padding:42px; border-radius:26px; background:var(--sg-lilac2); } .stitchgv26-starter-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .stitchgv26-starter-grid > article{ padding:26px; border-radius:20px; background:#fff; border:1px solid var(--sg-line); } .stitchgv26-starter-hot{ border:2px solid var(--sg-pink) !important; } .stitchgv26-starter-image{ display:flex; justify-content:center; height:280px; margin-bottom:16px; } .stitchgv26-starter-image img{ max-height:100%; object-fit:contain; } .stitchgv26-starter-grid article > span{ color:var(--sg-pink-dark); font-size:11px; font-weight:900; letter-spacing:.07em; } .stitchgv26-starter-grid h3{ margin:5px 0 12px; color:var(--sg-navy); font-size:24px; } .stitchgv26-starter-grid ul{ padding-left:20px; margin-bottom:20px; } /* BLOSSOM */ .stitchgv26-blossom{ display:grid; grid-template-columns:.72fr 1.1fr .72fr; gap:24px; align-items:center; margin:38px 0; padding:38px; border-radius:28px; background: radial-gradient(circle at 0 0,rgba(255,255,255,.85),transparent 32%), linear-gradient(135deg,#ffe6f2,#f5e9ff); border:1px solid #efd3e5; } .stitchgv26-blossom-image, .stitchgv26-blossom-cards{ padding:15px; border-radius:18px; background:#fff; } .stitchgv26-blossom-image img, .stitchgv26-blossom-cards img{ width:100%; max-height:340px; object-fit:contain; } .stitchgv26-blossom-copy > span{ color:var(--sg-pink-dark); font-size:11px; font-weight:900; letter-spacing:.08em; } .stitchgv26-blossom-copy h2{ margin:5px 0 14px; color:var(--sg-navy); font-size:clamp(29px,4vw,42px); } .stitchgv26-blossom-facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:18px 0; } .stitchgv26-blossom-facts div{ padding:11px 5px; border-radius:11px; background:#fff; text-align:center; } .stitchgv26-blossom-facts b{ display:block; color:var(--sg-pink-dark); font-size:21px; } .stitchgv26-blossom-facts span{ display:block; font-size:10px; } /* TABLE */ .stitchgv26-table-wrap{ overflow-x:auto; border:1px solid var(--sg-line); border-radius:16px; } .stitchgv26-table{ width:100%; min-width:680px; border-collapse:collapse; background:#fff; } .stitchgv26-table th, .stitchgv26-table td{ padding:14px 16px; border-bottom:1px solid var(--sg-line); text-align:left; } .stitchgv26-table th{ background:var(--sg-navy); color:#fff; font-size:13px; } .stitchgv26-table tr:last-child td{ border-bottom:0; } .stitchgv26-table-hot td{ background:#fff0f7; font-weight:700; } /* TRUST */ .stitchgv26-trust{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; overflow:hidden; margin:28px 0; border-radius:18px; background:#d7d4e0; } .stitchgv26-trust > div{ padding:20px 12px; background:var(--sg-navy); text-align:center; } .stitchgv26-trust strong{ display:block; color:var(--sg-yellow); } .stitchgv26-trust span{ display:block; margin-top:4px; color:#fff; font-size:12px; } /* SEO */ .stitchgv26-seo{ max-width:930px; margin:auto; } .stitchgv26-seo > p{ color:#4f5262; } /* FAQ */ .stitchgv26-faq{ max-width:930px; margin:0 auto; } .stitchgv26-faq details{ margin-bottom:10px; overflow:hidden; border:1px solid var(--sg-line); border-radius:14px; background:#fff; } .stitchgv26-faq summary{ cursor:pointer; padding:16px 18px; color:var(--sg-navy); font-weight:800; } .stitchgv26-faq details p{ padding:0 18px 17px; margin:0; color:var(--sg-muted); } /* MOBILE */ @media (max-width:900px){ .stitchgv26-hero, .stitchgv26-feature, .stitchgv26-blossom{ grid-template-columns:1fr; } .stitchgv26-cardtypes{ grid-template-columns:repeat(2,1fr); } .stitchgv26-cardtypes article:last-child{ grid-column:span 2; } .stitchgv26-blossom-cards{ display:none; } } @media (max-width:640px){ .stitchgv26{ font-size:15px; } .stitchgv26-hero{ padding:24px 16px; border-radius:20px; } .stitchgv26-hero h2{ font-size:36px; } .stitchgv26-stage{ grid-template-columns:1fr 1fr; } .stitchgv26-stage-main{ grid-column:span 2; grid-row:auto; } .stitchgv26-facts{ grid-template-columns:1fr 1fr; } .stitchgv26-section{ padding:30px 0; } .stitchgv26-feature{ padding:20px 15px; } .stitchgv26-mini-facts{ grid-template-columns:1fr 1fr 1fr; } .stitchgv26-products, .stitchgv26-starter-grid{ grid-template-columns:1fr; } .stitchgv26-starters{ padding:28px 14px; } .stitchgv26-product-image{ min-height:230px; } .stitchgv26-starter-image{ height:230px; } .stitchgv26-blossom{ padding:24px 15px; } .stitchgv26-blossom-facts{ grid-template-columns:1fr 1fr; } .stitchgv26-trust{ grid-template-columns:1fr 1fr; } } /* ========================================================= SUC MAX POWER 2.0 – FINALER EMPFEHLUNGS-MASTER Bild oben, Text darunter. Diesen Block verwenden statt aller bisherigen Recommendation- Feinschliff-/Zoom-Blöcke. Scope: nur neue Description-only-Seiten. ========================================================= */ .suc2-description-only .suc2-final-rec-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; width: 100% !important; align-items: stretch !important; } .suc2-description-only .suc2-final-rec-card { display: flex !important; flex-direction: column !important; min-width: 0 !important; height: 100% !important; overflow: hidden !important; background: #ffffff !important; border: 1px solid #d8e8f7 !important; border-radius: 18px !important; box-shadow: 0 10px 24px rgba(8, 116, 216, .07) !important; } .suc2-description-only .suc2-final-rec-card-highlight { border: 2px solid #0874d8 !important; background: linear-gradient(180deg, #f4faff 0%, #ffffff 100%) !important; } .suc2-description-only .suc2-final-rec-image { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 190px !important; padding: 16px !important; background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%) !important; overflow: hidden !important; } .suc2-description-only .suc2-final-rec-image img { display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; margin: 0 auto !important; object-fit: contain !important; transform: none !important; } .suc2-description-only .suc2-final-rec-body { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; min-width: 0 !important; padding: 17px !important; } .suc2-description-only .suc2-final-rec-kicker { display: block !important; margin: 0 0 5px !important; color: #0874d8 !important; font-size: 11px !important; font-weight: 900 !important; line-height: 1.35 !important; letter-spacing: .35px !important; text-transform: uppercase !important; } .suc2-description-only .suc2-final-rec-card h3 { margin: 0 0 7px !important; color: #07162f !important; font-size: 19px !important; font-weight: 900 !important; line-height: 1.25 !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; } .suc2-description-only .suc2-final-rec-card p { flex: 1 1 auto !important; margin: 0 0 12px !important; color: #607089 !important; font-size: 13px !important; line-height: 1.55 !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; } .suc2-description-only .suc2-final-rec-link { display: inline-block !important; align-self: flex-start !important; margin-top: auto !important; color: #0874d8 !important; font-size: 13px !important; font-weight: 900 !important; line-height: 1.35 !important; text-decoration: none !important; overflow-wrap: normal !important; word-break: normal !important; } @media (hover:hover) { .suc2-description-only .suc2-final-rec-card:hover { transform: translateY(-3px); border-color: #9ccaf0 !important; box-shadow: 0 15px 30px rgba(8,116,216,.12) !important; } } @media only screen and (max-width: 767px) { .suc2-description-only .suc2-final-rec-grid { grid-template-columns: 1fr !important; } .suc2-description-only .suc2-final-rec-image { height: 220px !important; } .suc2-description-only .suc2-final-rec-body { padding: 16px !important; } } @media only screen and (max-width: 420px) { .suc2-description-only .suc2-final-rec-image { height: 190px !important; padding: 14px !important; } .suc2-description-only .suc2-final-rec-card h3 { font-size: 18px !important; } }
Topps Bundesliga Sticker Saison 2021/2022 Nr 237 Mannschaftsfoto
  • Topps Bundesliga Sticker Saison 2021/2022 Nr 237 Mannschaftsfoto

Topps Bundesliga Sticker Saison 2021/2022 Nr 237 Mannschaftsfoto

(0 Produktbewertungen)
Artikelnummer: 439322 Kategorien: , Schlagwörter: , ,

Verfügbarkeit: Auf Lager

0,39 €

Verfügbarkeit: Auf Lager

- +
Wie gefällt dir dieses Angebot?
Noch keine Stimme Gib die erste Stimme ab.
Einfach auf die gewünschte Anzahl Sterne klicken:
Wie werden die Sterne ermittelt?

Besucher können dieses Angebot freiwillig mit 1 bis 5 Sternen bewerten. Eine Anmeldung, ein Kauf oder ein Kaufnachweis ist dafür nicht erforderlich. Alle abgegebenen Sternwerte fließen gleichberechtigt in den Durchschnitt ein. Pro Browser und Produkt ist technisch eine Stimme vorgesehen.

Topps Bundesliga Sticker Saison 2021/2022

Sie erhalten:

1x Nr 237 Mannschaftsfoto

 

 

 

 

 

 

Ihre gesetzlichen Gewährleistungsrechte: Mindestens zwei Jahre gesetzliche Gewährleistung der Vertragsmäßigkeit für Waren, die in der Europäischen Union verkauft werden.

Produktsicherheit

Herstellerinformationen

Topps Europe Limited
18 Vincent Avenue
MK8 0AW Milton Keynes
England
uk.topps.com
infoen@toppsdirect.com

Topps Deutschland
Bleichstr. 64-66
Frankfurt, DE, 60313
kontakt@topps.com

Rezensionen

Es gibt noch keine Rezensionen.

Schreiben Sie die erste Rezension für „Topps Bundesliga Sticker Saison 2021/2022 Nr 237 Mannschaftsfoto“

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Text und „Enter“ eingeben, um eine Suche zu starten.

Nach oben scrollen