/* ========================================================= WHITEFOX – SINGLE PRODUCT CSS (Phase 1.2 – safe extract) Target live path: /wp-content/plugins/whitefox-suite/modules/assets/css/whitefox-single-product.css Extracted safely from current Customizer CSS: - hero/media layout - description/content styling - technical/restrictions accordion + PEGI - buybox shell/title/rating/badges Intentionally NOT included in this first extract: - hard Elementor-ID selectors - price block styling - add-to-cart/form grid styling with widget IDs - Product Kit media stage (wpk-media-*) ========================================================= */ /* ========================================================= BASE ========================================================= */ .wf-single-hero, .wf-single-description, .wf-single-technical{ color:#f1f5ff; } /* ========================================================= SECTION 1: HERO / MEDIA ========================================================= */ .wf-single-hero{ padding:50px 0; margin-bottom:10px; position:relative; overflow:visible !important; } .wf-single-hero .e-con-inner, .wf-single-hero-inner{ gap:24px; align-items:flex-start !important; position:relative; overflow:visible !important; } /* Media */ .wf-single-media iframe, .wf-single-media video{ width:100%; aspect-ratio:16/9; height:auto; display:block; border-radius:18px; border:1px solid rgba(148,163,184,.28); box-shadow:0 18px 35px rgba(0,0,0,.55); background:rgba(15,23,42,.9); } .wf-single-media img{ width:100%; height:auto; display:block; border-radius:18px; border:1px solid rgba(148,163,184,.28); box-shadow:0 18px 35px rgba(0,0,0,.55); background:rgba(15,23,42,.9); } /* ========================================================= SECTION 3–4: DESCRIPTION / TECHNICAL (BASIC) ========================================================= */ .wf-single-description{ padding:50px 0; } .wf-single-description .elementor-widget-text-editor, .wf-single-description .woocommerce-product-details__short-description, .wf-single-description .woocommerce-Tabs-panel{ color:#d6dcff; line-height:1.75; font-size:15px; } /* ========================================================= SECTION 4: SYSTEM & RESTRICTIONS ========================================================= */ .wf-single-technical .elementor-accordion .elementor-tab-title{ background:rgba(11,14,28,.85); border:1px solid rgba(148,163,184,.28); border-radius:14px; padding:14px; margin-bottom:10px; } .wf-single-technical .elementor-accordion .elementor-tab-title, .wf-single-technical .elementor-accordion .elementor-tab-title a{ color: #f1f5ff; font-weight:700; letter-spacing:.02em; } .wf-single-technical .elementor-accordion .elementor-tab-content{ background:rgba(7,8,26,.75); border:1px solid rgba(148,163,184,.22); border-top:0; border-radius:0 0 14px 14px; padding:16px 16px 14px; color:#d6dcff; line-height:1.7; margin-top:-10px; margin-bottom:14px; } /* ========================================================= RESPONSIVE BASICS ========================================================= */ @media (max-width:1100px){ .wf-single-hero{ padding:34px 0; } } @media (max-width:768px){ .wf-single-hero, .wf-single-description, .wf-single-technical{ padding:28px 0; } } /* ========================================================= WHITEFOX – DESCRIPTION / CONTENT: HEADLINE-LOOK (NUR HIER) h4 = Spieletitel (ORANGE/edel) h5 = Abschnittstitel (deutlich größer) ========================================================= */ /* h4 – Spieletitel: orange + edel + “Glow” */ .wf-single-description h4{ font-size: clamp(30px, 2.2vw, 38px); font-weight: 900; line-height: 1.12; margin: 0 0 18px 0 !important; letter-spacing: .01em; /* Orange-Gradient + edel */ background: linear-gradient( 135deg, #fff3e6 0%, #ffb25b 22%, #ff7a18 55%, #ffd19a 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 2px 0 rgba(0,0,0,.25), 0 10px 26px rgba(0,0,0,.65), 0 0 22px rgba(255,122,24,.22); padding-bottom: 12px !important; position: relative; } /* Akzentlinie unter h4 */ .wf-single-description h4::after{ content:""; display:block; margin-top: 14px; height: 3px; width: 90px; border-radius: 999px; background: linear-gradient(90deg, rgba(255,122,24,.95), rgba(56,189,248,.55), transparent); box-shadow: 0 0 18px rgba(255,122,24,.25); } /* h5 – Abschnittstitel (Key Features, About This Product, etc.) */ .wf-single-description h5{ font-size: clamp(20px, 1.35vw, 24px); font-weight: 900; line-height: 1.25; margin: 28px 0 12px 0 !important; padding: 14px 16px !important; /* “Card-Header” Look */ border-radius: 14px; border: 1px solid rgba(148,163,184,.22); background: radial-gradient(circle at top left, rgba(56,189,248,.12), rgba(15,23,42,.55)); color: #f8fafc; letter-spacing: .02em; box-shadow: inset 0 0 0 1px rgba(56,189,248,.10), 0 12px 26px rgba(0,0,0,.35); position: relative; } /* kleiner “Neon-Accent” links in h5 */ .wf-single-description h5::before{ content:""; position:absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 4px; height: 60%; border-radius: 2px; background: linear-gradient(180deg, rgba(56,189,248,1), rgba(255,122,24,.55)); box-shadow: 0 0 14px rgba(56,189,248,.35); opacity: .95; } /* damit Text nicht auf dem Accent klebt */ .wf-single-description h5{ padding-left: 22px !important; } /* h6 – Subtitel (Minimum/Recommended) etwas klarer */ .wf-single-description h6{ font-size: 15px; font-weight: 800; margin: 18px 0 8px 0 !important; letter-spacing: .08em; text-transform: uppercase; color: rgba(226,232,255,.92); } /* Text / Absätze: mehr “Luft” */ .wf-single-description p{ margin: 0 0 1.15em 0 !important; line-height: 1.9; } /* Listen angenehmer */ .wf-single-description ul{ margin: 10px 0 18px 20px !important; } .wf-single-description li{ margin: 10px 0 !important; } /* Mobile */ @media (max-width: 768px){ .wf-single-description h4{ font-size: 28px; } .wf-single-description h5{ font-size: 19px; padding: 12px 14px !important; padding-left: 22px !important; } } /* ========================================================= WHITEFOX – SYSTEM & RESTRICTIONS (Elementor Nested Accordion) Ziel: .wf-single-technical + .e-n-accordion + PEGI Icons (wf-pegi-*) ========================================================= */ .wf-single-technical{ padding: 44px 0 56px; } /* Accordion Wrapper */ .wf-single-technical .e-n-accordion{ display: grid; gap: 12px; } /* Einzelnes Item (details) */ .wf-single-technical .e-n-accordion .e-n-accordion-item{ border: 0; } /* Titelzeile (summary) */ .wf-single-technical .e-n-accordion .e-n-accordion-item-title{ background: radial-gradient(circle at top left, rgba(148,163,184,.10), rgba(11,14,28,.88) ); border: 1px solid rgba(148,163,184,.28); border-radius: 16px; padding: 14px 16px !important; box-shadow: 0 14px 28px rgba(0,0,0,.45), inset 0 0 0 1px rgba(56,189,248,.12); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease; } /* Hover */ .wf-single-technical .e-n-accordion .e-n-accordion-item-title:hover{ transform: translateY(-1px); border-color: rgba(56,189,248,.55); box-shadow: 0 18px 36px rgba(0,0,0,.55), inset 0 0 0 1px rgba(56,189,248,.18); } /* Titeltext */ .wf-single-technical .e-n-accordion .e-n-accordion-item-title-text{ color: #f1f5ff; font-weight: 850; letter-spacing: .02em; font-size: 16px; line-height: 1.2; } /* Icon (Plus/Minus) */ .wf-single-technical .e-n-accordion .e-n-accordion-item-title-icon{ color: rgba(125,211,252,.95); } .wf-single-technical .e-n-accordion .e-n-accordion-item-title-icon svg{ width: 18px; height: 18px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.55)); } /* OPEN State (details[open]) */ .wf-single-technical .e-n-accordion details[open] > summary.e-n-accordion-item-title{ border-color: rgba(56,189,248,.70); background: radial-gradient(circle at top left, rgba(56,189,248,.14), rgba(11,14,28,.90) ); } /* Content Container unter dem Summary (bei Elementor nested accordion ist der Content ein e-con Container) */ .wf-single-technical .e-n-accordion details[open] > summary + .e-con{ background: radial-gradient(circle at top left, rgba(148,163,184,.08), rgba(7,8,26,.82) ); border: 1px solid rgba(148,163,184,.22); border-top: 0; border-radius: 0 0 16px 16px; padding: 0 !important; /* Padding kommt auf inneren Content */ margin-top: -10px !important; box-shadow: 0 18px 35px rgba(0,0,0,.45); overflow: hidden; } /* Innerer Inhalt (dein Shortcode output) */ .wf-single-technical .e-n-accordion details[open] > summary + .e-con .wf-meta-row{ padding: 18px 18px 16px !important; color: #d6dcff; line-height: 1.75; font-size: 15px; font-weight: 550; } /* Strong Prefix im Content (Systemanforderungen:, Hinweis:) */ .wf-single-technical .e-n-accordion .wf-meta-row strong{ display: inline-block; margin: 0 8px 8px 0; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; color: #eaf2ff; opacity: .95; } /* Links im Content */ .wf-single-technical .e-n-accordion .wf-meta-row a{ color: #7dd3fc; text-decoration: none; border-bottom: 1px solid rgba(125,211,252,.25); } .wf-single-technical .e-n-accordion .wf-meta-row a:hover{ color: #a5f3fc; border-bottom-color: rgba(165,243,252,.6); } /* ========================================================= PEGI / Restrictions Icons (aus Plugin: .wf-pegi-*) - TRUE: rot/orange Verlauf + feuerrotes "!" - FALSE: transparenter/gedimmt, aber lesbar ========================================================= */ /* kleine Überschrift "Einschränkungen" (falls im HTML vorhanden) */ .wf-single-technical .wf-pegi-title{ margin: 14px 0 10px !important; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; color: #eaf2ff; opacity: .95; } /* Grid */ .wf-single-technical .wf-pegi-grid{ display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 10px !important; margin-top: 10px !important; } /* Item (Basis) */ .wf-single-technical .wf-pegi-item{ position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px !important; border-radius: 14px; background: rgba(15,23,42,.55); border: 1px solid rgba(148,163,184,.22); box-shadow: inset 0 0 0 1px rgba(56,189,248,.06), 0 10px 22px rgba(0,0,0,.25); color: #d6dcff; font-size: 14px; font-weight: 650; line-height: 1.25; } /* Icon-Pill links (Basis) */ .wf-single-technical .wf-pegi-item::before{ content: ""; width: 28px; height: 28px; border-radius: 999px; flex: 0 0 28px; display: grid; place-items: center; border: 1px solid rgba(148,163,184,.25); background: rgba(7,8,26,.55); box-shadow: 0 10px 20px rgba(0,0,0,.25); } /* Zustand: OFF (false) – transparenter, aber klar lesbar */ .wf-single-technical .wf-pegi-off{ opacity: .52; filter: saturate(.65); } .wf-single-technical .wf-pegi-off::before{ content: "—"; color: rgba(226,232,240,.55); background: rgba(7,8,26,.38); border-color: rgba(148,163,184,.18); } /* Zustand: ON (true) – rot/orange Verlauf + stärkere Präsenz */ .wf-single-technical .wf-pegi-on{ opacity: 1; border-color: rgba(255,120,64,.42); background: linear-gradient( 135deg, rgba(255, 80, 80, .22) 0%, rgba(255, 140, 0, .18) 45%, rgba(15,23,42,.60) 100% ); box-shadow: 0 16px 34px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,140,0,.18), 0 0 26px rgba(255, 80, 80, .12); } /* Feuerrotes "!" als Icon-Pill (ON) */ .wf-single-technical .wf-pegi-on::before{ content: "!"; color: #ff2a2a; font-weight: 900; text-shadow: 0 0 10px rgba(255, 42, 42, .65), 0 6px 18px rgba(0,0,0,.55); border-color: rgba(255, 70, 70, .55); background: radial-gradient(circle at top left, rgba(255, 70, 70, .35), rgba(255, 120, 40, .18) ); box-shadow: 0 0 18px rgba(255, 42, 42, .22), 0 10px 22px rgba(0,0,0,.25); } /* Labels je Flag (falls Plugin Klassen nutzt: wf-pegi-violence etc.) (Icone bleiben auch im ON sichtbar, aber das "!" hat Priorität) */ .wf-single-technical .wf-pegi-violence::before{ content: "?"; } .wf-single-technical .wf-pegi-profanity::before{ content: "??"; } .wf-single-technical .wf-pegi-discrimination::before{ content: "?"; } .wf-single-technical .wf-pegi-drugs::before{ content: "??"; } .wf-single-technical .wf-pegi-fear::before{ content: "??"; } .wf-single-technical .wf-pegi-gambling::before{ content: "??"; } .wf-single-technical .wf-pegi-online::before{ content: "??"; } .wf-single-technical .wf-pegi-sex::before{ content: "??"; } /* ON soll wirklich immer "!" zeigen (statt Emoji) */ .wf-single-technical .wf-pegi-on.wf-pegi-violence::before, .wf-single-technical .wf-pegi-on.wf-pegi-profanity::before, .wf-single-technical .wf-pegi-on.wf-pegi-discrimination::before, .wf-single-technical .wf-pegi-on.wf-pegi-drugs::before, .wf-single-technical .wf-pegi-on.wf-pegi-fear::before, .wf-single-technical .wf-pegi-on.wf-pegi-gambling::before, .wf-single-technical .wf-pegi-on.wf-pegi-online::before, .wf-single-technical .wf-pegi-on.wf-pegi-sex::before{ content: "!"; } /* OFF: Icons leicht grauer (falls OFF + Flag-Klasse) */ .wf-single-technical .wf-pegi-off.wf-pegi-violence::before, .wf-single-technical .wf-pegi-off.wf-pegi-profanity::before, .wf-single-technical .wf-pegi-off.wf-pegi-discrimination::before, .wf-single-technical .wf-pegi-off.wf-pegi-drugs::before, .wf-single-technical .wf-pegi-off.wf-pegi-fear::before, .wf-single-technical .wf-pegi-off.wf-pegi-gambling::before, .wf-single-technical .wf-pegi-off.wf-pegi-online::before, .wf-single-technical .wf-pegi-off.wf-pegi-sex::before{ color: rgba(226,232,240,.50); background: rgba(7,8,26,.38); border-color: rgba(148,163,184,.16); } /* Mobile */ @media (max-width: 768px){ .wf-single-technical{ padding: 30px 0 40px; } .wf-single-technical .e-n-accordion .e-n-accordion-item-title{ padding: 12px 14px !important; border-radius: 14px; } .wf-single-technical .e-n-accordion details[open] > summary + .e-con{ border-radius: 0 0 14px 14px; } .wf-single-technical .e-n-accordion details[open] > summary + .e-con .wf-meta-row{ padding: 14px 14px 12px !important; } .wf-single-technical .wf-pegi-grid{ grid-template-columns: 1fr; } } /* ========================================================= BUYBOX – SAFE SHELL / TITLE / RATING / BADGES ========================================================= */ body.single-product .wf-single-right{ min-width: 0; } body.single-product .wf-single-buybox{ position: sticky; top: 108px; display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 30px 24px 24px !important; border-radius: 28px; border: 1px solid rgba(125,211,252,.20); background: radial-gradient(900px 420px at 92% -8%, rgba(56,189,248,.16), transparent 46%), radial-gradient(640px 340px at 10% 12%, rgba(14,165,233,.08), transparent 42%), linear-gradient(180deg, rgba(11,18,34,.96), rgba(5,10,22,.97)); box-shadow: 0 18px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05); overflow: hidden; isolation: isolate; } body.single-product .wf-single-buybox::before{ content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.04), transparent 28%), linear-gradient(180deg, transparent 0%, rgba(56,189,248,.03) 100%); z-index: 0; } body.single-product .wf-single-buybox > .elementor-element{ position: relative; z-index: 1; margin: 0 !important; } /* ========================================================= TITELBLOCK – hochwertiger / ruhiger / edler ========================================================= */ body.single-product .wf-single-buybox .wf-product-title{ position: relative; display: flex; flex-direction: column; gap: 14px; margin: 0 !important; padding-bottom: 18px; font-size: clamp(2.2rem, 3vw, 3.35rem); line-height: .98; letter-spacing: -.04em; font-weight: 900; color: #eef6ff; text-wrap: balance; text-shadow: 0 1px 0 rgba(255,255,255,.02), 0 10px 26px rgba(0,0,0,.42); } body.single-product .wf-single-buybox .wf-product-title::after{ content: ""; position: absolute; left: 0; bottom: 0; width: 88px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, rgba(120,255,208,0) 0%, rgba(120,255,208,.95) 18%, rgba(96,233,255,.95) 72%, rgba(96,233,255,0) 100%); box-shadow: 0 0 12px rgba(120,255,208,.22), 0 0 24px rgba(96,233,255,.16); } body.single-product .wf-single-buybox .wf-product-title strong{ display: inline-flex; align-self: flex-start; margin: 0; padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(125,211,252,.24); background: linear-gradient(180deg, rgba(56,189,248,.10), rgba(16,24,40,.45)); color: #9ce7ff; font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; line-height: 1; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 18px rgba(0,0,0,.18); } /* ========================================================= RATING ========================================================= */ body.single-product .wf-single-buybox .wf-rating-summary{ margin: -2px 0 2px !important; } body.single-product .wf-single-buybox .wf-rating-link{ color: #d9e7f8; text-decoration: none; font-size: 15px; opacity: .92; } body.single-product .wf-single-buybox .wf-rating-link:hover{ color: #8ddcff; } /* ========================================================= BADGES / META ========================================================= */ body.single-product .wf-single-buybox .wf-badges{ display: flex; flex-wrap: wrap; gap: 10px; margin: 0 !important; } body.single-product .wf-single-buybox .wf-badge{ min-height: 38px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(148,163,184,.24); background: linear-gradient(180deg, rgba(17,24,39,.82), rgba(8,15,29,.88)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 6px 18px rgba(0,0,0,.22); color: #e8f3ff; font-size: 12px; font-weight: 700; letter-spacing: .03em; } body.single-product .wf-single-buybox .wf-badge .wf-meta-row{ margin: 0 !important; display: flex; align-items: center; gap: 6px; } body.single-product .wf-single-buybox .wf-badge .wf-meta-row strong{ display: none; } body.single-product .wf-single-buybox .wf-badge a{ color: inherit; text-decoration: none; } body.single-product .wf-single-buybox .wf-badge a:hover{ color: #8ddcff; } body.single-product .wf-single-buybox .wf-badge-region:empty{ display: none !important; } /* ========================================================= HOTFIX 2026-05-18 Restrictions / PEGI block restore Ursache: [product_restrictions_notice] rendert eigenes Markup (.wf-restrictions-wrap, .wf-restrictions-notice, .wf-pegi-grid, .wf-pegi-item, .wf-pegi-icon, .wf-pegi-label). Diese Micro-Styles waren im ersten Extract nicht vollst ndig ber cksichtigt. ========================================================= */ .wf-single-technical .wf-restrictions-wrap{ display: grid; gap: 12px; } .wf-single-technical .wf-restrictions-notice{ color: #d6dcff; line-height: 1.75; } .wf-single-technical .wf-pegi-grid{ display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px !important; margin-top: 8px !important; } .wf-single-technical .wf-pegi-item{ display: flex !important; align-items: center; gap: 10px; min-width: 0; width: 100%; box-sizing: border-box; vertical-align: top; white-space: normal; text-decoration: none; } .wf-single-technical .wf-pegi-icon{ width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(148,163,184,.25); background: rgba(7,8,26,.55); box-shadow: 0 10px 20px rgba(0,0,0,.25); font-size: 14px; line-height: 1; } .wf-single-technical .wf-pegi-label{ display: block; min-width: 0; line-height: 1.25; } .wf-single-technical .wf-pegi-on .wf-pegi-icon{ border-color: rgba(255, 70, 70, .55); background: radial-gradient(circle at top left, rgba(255, 70, 70, .35), rgba(255, 120, 40, .18) ); box-shadow: 0 0 18px rgba(255, 42, 42, .22), 0 10px 22px rgba(0,0,0,.25); } .wf-single-technical .wf-pegi-off .wf-pegi-icon{ opacity: .72; } /* Pseudo-Icons aus der ersten Version abschalten, damit nur die echten Markup-Icons verwendet werden. */ .wf-single-technical .wf-pegi-item::before{ content: none !important; display: none !important; } @media (max-width: 768px){ .wf-single-technical .wf-pegi-grid{ grid-template-columns: 1fr; } } /* ========================================================= WHITEFOX SINGLE PRODUCT REST MIGRATION PHASE 8.2-A Quelle: Customizer-Inventar 2026-05-20 Status: nur migriert, Customizer danach noch unver ndert lassen. Enthalten: - WPK Media Stage / Galerie / Thin Frame - Quick Facts - System Requirements Grid - wf-sr-only Helper ========================================================= */ /* ========================================================= WPK MEDIA STAGE Titelbild / Galerie / Video -> FIX: kein Abschneiden, kein Stretch (contain) ========================================================= */ .wpk-media-stage{ position: relative !important; width: 100% !important; height: 0 !important; padding-top: 56.25% !important; /* 16:9 */ min-height: 0 !important; overflow: hidden !important; border-radius: 18px; background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 45%, #0b1a2f 100%); border: 1px solid rgba(56,189,248,.45); box-shadow: inset 0 0 0 1px rgba(56,189,248,.35), 0 18px 35px rgba(0,0,0,.55); } /* Inhalt absolut in die 16:9 Fl che */ .wpk-media-stage .wpk-media-box{ position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; } /* ?? HARTER TITELBILD-FIX: niemals cover/fill immer contain */ .wpk-media-stage .wpk-media-box img{ width: 100% !important; height: 100% !important; object-fit: contain; object-position: center center; display: block !important; max-width: 100% !important; max-height: 100% !important; } /* Video darf cover */ .wpk-media-stage .wpk-media-box iframe, .wpk-media-stage .wpk-media-box video{ width: 100% !important; height: 100% !important; display: block !important; border: 0; object-fit: cover; } /* ========================================================= WHITEFOX SINGLE PRODUCT SECTION 2: QUICK FACTS (NEW) (ab HIER unter deinem Trennstrich einf gen) ========================================================= */ /* Section spacing + Anker */ .wf-single-facts{ padding: 34px 0 26px !important; position: relative; } /* Optional: ganz leichter Section-Glow (subtil) */ .wf-single-facts::before{ content:""; position:absolute; inset: 0; pointer-events:none; background: radial-gradient(circle at 20% 0%, rgba(56,189,248,0.10), transparent 55%); opacity: .9; } /* Grid-Container (Elementor Container / inner wrapper) */ .wf-facts-grid, .wf-single-facts .e-con-inner{ gap: 18px !important; align-items: stretch !important; } /* Einzelne Fact-Card */ .wf-fact{ background: radial-gradient(circle at top left, rgba(148,163,184,.12), rgba(15,23,42,.92) ); border: 1px solid rgba(148,163,184,.24); border-radius: 16px; padding: 16px 16px 14px !important; box-shadow: 0 14px 28px rgba(0,0,0,.48); position: relative; overflow: hidden; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } /* feiner Edge Glow */ .wf-fact::after{ content:""; position:absolute; inset:-1px; border-radius: 16px; pointer-events:none; background: linear-gradient(135deg, rgba(56,189,248,.18), transparent 40%, rgba(16,185,129,.10) ); opacity: .55; mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000); -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000); padding:1px; } /* Hover: minimal lift */ .wf-fact:hover{ transform: translateY(-2px); border-color: rgba(56,189,248,.38); box-shadow: 0 18px 34px rgba(0,0,0,.56); } /* Titel/Label innerhalb Fact */ .wf-fact .elementor-heading-title, .wf-fact h3, .wf-fact h4{ font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(203,213,255,.86); margin: 0 0 8px 0 !important; line-height: 1.2; } /* Wert/Text */ .wf-fact, .wf-fact .elementor-widget-text-editor, .wf-fact .elementor-shortcode, .wf-fact .elementor-text-editor{ font-size: 15px; font-weight: 650; color: rgba(241,245,255,.94); line-height: 1.45; } /* Links in Facts (z.B. Plattformen o. .) */ .wf-fact a{ color: rgba(125,211,252,.95); text-decoration: none; border-bottom: 1px solid rgba(125,211,252,.22); } .wf-fact a:hover{ color: rgba(255,255,255,.98); border-bottom-color: rgba(56,189,248,.55); } /* Wenn in Quick Facts Icons/Listen drin sind: sauber & ruhig */ .wf-single-facts .elementor-icon-list-items{ margin: 0 !important; padding: 0 !important; } .wf-single-facts .elementor-icon-list-item{ padding: 6px 0 !important; } .wf-single-facts .elementor-icon-list-text{ color: rgba(241,245,255,.92); font-weight: 650; } /* Responsive Feinschliff */ @media (max-width: 768px){ .wf-single-facts{ padding: 26px 0 18px !important; } .wf-fact{ padding: 14px 14px 12px !important; } .wf-fact .elementor-heading-title, .wf-fact h3, .wf-fact h4{ font-size: 11px !important; } .wf-fact, .wf-fact .elementor-widget-text-editor, .wf-fact .elementor-shortcode, .wf-fact .elementor-text-editor{ font-size: 14px !important; } } /* SYSTEMVORAUSSETZUNGEN */ .wf-requirements{ display:grid; grid-template-columns: repeat(2,1fr); gap:24px; } .wf-req-col{ background: radial-gradient( circle at top left, rgba(56,189,248,.14), rgba(15,23,42,.96) ); border:1px solid rgba(148,163,184,.28); border-radius:16px; padding:16px 18px; } .wf-req-col h4{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#93c5fd; margin-bottom:12px; } .wf-req-col ul{ list-style:none; padding:0; margin:0; } .wf-req-col li{ display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid rgba(148,163,184,.12); } .wf-req-col li:last-child{ border-bottom:0; } .wf-req-col span{ color:#94a3b8; font-size:13px; } .wf-req-col strong{ color:#f1f5ff; font-weight:600; text-align:right; } /* Fallback */ .wf-req-empty{ display:flex; align-items:center; gap:14px; padding:18px; background:rgba(248,113,113,.08); border:1px solid rgba(248,113,113,.35); border-radius:16px; color:#fecaca; } .wf-req-warning{ font-size:24px; } /* ========================================================= WHITEFOX SEO / Accessibility helper Unsichtbare berschriften (H2) f r Struktur (Google/Reader), ohne optische nderungen. ========================================================= */ .wf-sr-only{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ========================================================= WHITEFOX Thin Media Frame Override (GLOBAL) Zweck: - D nner, dezenter Rahmen wie im Mobile-Look - Entfernt kr ftige Gradients/Glows aus Customizer/Kit Hinweis: nur Optik, keine Layout-/Order- nderungen. ========================================================= */ /* Stage (gro es Bild/Video oben) berall clean */ body.single-product .wpk-media-stage{ background: transparent; background-image: none; box-shadow: none; border: 1px solid rgba(56,189,248,.35); } /* Thumbs (Titelbild/Galerie/Video Buttons) Gradient vom Elementor-Kit killen */ body.single-product .wf-single-media .wpk-media-thumbs button.wpk-media-thumb{ background: transparent; /* shorthand -> killt linear-gradient */ background-image: none; background-color: transparent; box-shadow: none; border: 1px solid rgba(56,189,248,.35); border-radius: 14px; padding: 10px !important; } /* Auch bei Hover/Focus darf kein Gradient zur ckkommen */ body.single-product .wf-single-media .wpk-media-thumbs button.wpk-media-thumb:hover, body.single-product .wf-single-media .wpk-media-thumbs button.wpk-media-thumb:focus, body.single-product .wf-single-media .wpk-media-thumbs button.wpk-media-thumb:active{ background: transparent; background-image: none; background-color: transparent; box-shadow: none; } /* Caption ruhig & stimmig (inkl. GTranslate */ body.single-product .wf-single-media .wpk-media-tthumbs button.wpk-media-thumb .wpk-thumb-caption, body.single-product .wf-single-media .wpk-media-thumbs button.wpk-media-thumb .wpk-thumb-caption *{ color: rgba(186,220,255,.85); } /* ========================================================= WHITEFOX PHASE 8.3-A MIGRATION ONLY Buybox Rest Inventar: Preisblock + Info/Hinweise + Subheads Quelle: bisher stabil getesteter Customizer nach Phase 8.2-B. Zweck: erst in whitefox-single-product.css spiegeln, Customizer bleibt unver ndert. Entfernung aus Customizer erst nach Sichttest in Phase 8.3-B. Bewusst NICHT enthalten: - Add-to-Cart / Quantity / Button-Final-Fix - PayPal / Express Wrapper - Trust List / Share - Woo Notices / Progressbar - Restore Critical Styles ========================================================= */ /* ========================================================= PREISBLOCK edler Verlauf inkl. Zeichen ========================================================= */ body.single-product .wf-single-buybox .elementor-element-d3019c1 .elementor-shortcode{ position: relative; padding: 20px 18px 18px; border-radius: 22px; border: 1px solid rgba(125,211,252,.18); background: radial-gradient(340px 140px at 10% 0%, rgba(56,189,248,.10), transparent 70%), linear-gradient(180deg, rgba(12,20,38,.78), rgba(8,14,28,.90)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 28px rgba(0,0,0,.24); overflow: hidden; } body.single-product .wf-single-buybox .elementor-element-d3019c1 .elementor-shortcode::after{ content: ""; position: absolute; inset: auto -10% -40% -10%; height: 90px; pointer-events: none; background: radial-gradient(circle at 50% 0%, rgba(110,255,184,.18), transparent 58%); filter: blur(18px); } body.single-product .wf-single-buybox .elementor-element-d3019c1 .wf-meta-row{ margin: 0 !important; } body.single-product .wf-single-buybox .elementor-element-d3019c1 .wf-meta-row strong{ display: block; margin: 0 0 12px; color: #8fb2d6; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; } body.single-product .wf-single-buybox .elementor-element-d3019c1 .wf-platform-inline{ display: inline-flex; align-items: center; justify-content: center; margin-right: 10px; vertical-align: middle; transform: translateY(-2px); } body.single-product .wf-single-buybox .elementor-element-d3019c1 .wf-platform-inline img{ width: 19px; height: 19px; display: block; filter: drop-shadow(0 0 10px rgba(56,189,248,.18)); } body.single-product .wf-single-buybox .elementor-element-d3019c1 .woocommerce-Price-amount.amount{ display: inline-flex; align-items: center; gap: 8px; font-size: clamp(2.28rem, 3.2vw, 3.6rem); line-height: 1; font-weight: 900; letter-spacing: -.045em; background: linear-gradient( 135deg, #f6fff9 0%, #dfffea 18%, #b8ffd3 40%, #7cf0b7 62%, #9cf2ff 100% ); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 8px rgba(115,236,175,.10)) drop-shadow(0 0 18px rgba(115,236,175,.08)); } body.single-product .wf-single-buybox .elementor-element-d3019c1 .woocommerce-Price-currencySymbol{ background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; } /* ========================================================= INFO / HINWEISE ========================================================= */ body.single-product .wf-single-buybox .elementor-element-e53f984{ padding: 16px 18px; border-radius: 20px; border: 1px solid rgba(148,163,184,.16); background: rgba(8,14,28,.56); color: #c0d2e7; font-size: 12.5px; line-height: 1.68; } body.single-product .wf-single-buybox .elementor-element-e53f984 p, body.single-product .wf-single-buybox .elementor-element-e53f984 ul{ margin-top: 0; margin-bottom: 12px; } body.single-product .wf-single-buybox .elementor-element-e53f984 p:last-child, body.single-product .wf-single-buybox .elementor-element-e53f984 ul:last-child{ margin-bottom: 0; } body.single-product .wf-single-buybox .elementor-element-e53f984 strong{ color: #eef7ff; } body.single-product .wf-single-buybox .elementor-element-e53f984 a{ color: #6fddff !important; text-decoration: none; } body.single-product .wf-single-buybox .elementor-element-e53f984 a:hover{ color: #9decff !important; text-decoration: underline; } /* ========================================================= SUBHEADS ========================================================= */ body.single-product .wf-single-buybox .elementor-element-5c2dacb, body.single-product .wf-single-buybox .elementor-element-0c0d0a9{ margin-top: 2px !important; } body.single-product .wf-single-buybox .elementor-element-5c2dacb > div, body.single-product .wf-single-buybox .elementor-element-0c0d0a9 > div{ color: #8fb2d6; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; } /* ========================================================= WHITEFOX SINGLE PRODUCT ADD TO CART / QUANTITY (Ausgelagert nach whitefox-single-product.css Phase 8.4-A) Nur Migration, keine Customizer-L schung. Enth lt: - Legacy/Sticky Buybox Button + Quantity Fallbacks - Mobile Add-to-Cart Normalisierung - Elementor/Woo Add-to-Cart Grid im aktuellen Buybox-Widget - Restore Critical Button Look nach !important-Reduktion ========================================================= */ /* Preis & Vorr tig NICHT klein machen Legacy Sticky Buybox */ .wf-buybox-sticky .price, .wf-buybox-sticky .woocommerce-Price-amount, .wf-buybox-sticky .stock{ font-size: inherit; letter-spacing: normal; text-transform: none; line-height: normal; } /* Legacy/Sticky Buybox: "In den Warenkorb" Button */ .wf-buybox-sticky .single_add_to_cart_button, .wf-buybox-sticky button.single_add_to_cart_button, .wf-buybox-sticky .woocommerce button.button.single_add_to_cart_button, .wf-buybox-sticky form.cart button.single_add_to_cart_button{ width:100%; min-height:46px; border-radius: 14px; border: 1px solid rgba(110, 231, 183, 0.40); background: linear-gradient( 135deg, rgba(16, 185, 129, 0.32), rgba(56, 189, 248, 0.22), rgba(15, 23, 42, 0.92) ); color: #ecfeff; font-weight: 800; letter-spacing: .04em; box-shadow: 0 12px 24px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(110, 231, 183, 0.22); backdrop-filter: blur(10px); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, filter .15s ease; } .wf-buybox-sticky .single_add_to_cart_button:hover, .wf-buybox-sticky button.single_add_to_cart_button:hover, .wf-buybox-sticky form.cart button.single_add_to_cart_button:hover{ transform: translateY(-1px); border-color: rgba(110, 231, 183, 0.70); box-shadow: 0 16px 30px rgba(0,0,0,0.55), 0 0 18px rgba(16, 185, 129, 0.20); filter: brightness(1.06); } .wf-buybox-sticky .single_add_to_cart_button:active{ transform: translateY(0px); filter: brightness(0.98); } /* Legacy/Sticky Buybox: Mengenfeld */ .wf-buybox-sticky input.qty, .wf-buybox-sticky input.input-text.qty{ width: 80px !important; height: 44px !important; background: rgba(15, 23, 42, 0.85); border: 1px solid rgba(148, 163, 184, 0.35); border-radius: 10px; font-family: "Manrope", system-ui, sans-serif; font-size: 16px; font-weight: 700; color: #f1f5ff; text-align: center; box-shadow: inset 0 0 0 1px rgba(56,189,248,.12); } .wf-buybox-sticky input.qty:focus{ outline: none; border-color: rgba(56,189,248,.6); box-shadow: 0 0 0 3px rgba(56,189,248,.2), inset 0 0 0 1px rgba(56,189,248,.25); } .wf-buybox-sticky input.qty::-webkit-inner-spin-button, .wf-buybox-sticky input.qty::-webkit-outer-spin-button{ filter: brightness(1.2); } /* Mobile Add-to-Cart Normalisierung */ @media (max-width: 768px){ body.single-product button.single_add_to_cart_button.button.alt{ appearance: none; -webkit-appearance: none; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; line-height: 1.1 !important; white-space: nowrap !important; text-transform: none !important; min-height: 46px !important; padding: 12px 16px !important; border-radius: 999px !important; border-width: 1px !important; border-style: solid !important; border-color: rgba(255,255,255,.10) !important; box-sizing: border-box !important; } body.single-product button.single_add_to_cart_button.button.alt:focus{ outline: none !important; box-shadow: 0 0 0 4px rgba(56,189,248,.14) !important; } body.single-product button.single_add_to_cart_button.button.alt::after{ margin-left: 10px !important; } } /* Aktuelle Buybox: Add-to-Cart / Button Fix */ body.single-product .wf-single-buybox .wf-add-to-cart{ display: block !important; width: 100% !important; min-width: 0 !important; } body.single-product .wf-single-buybox .elementor-element-41c7864, body.single-product .wf-single-buybox .elementor-element-41c7864 .elementor-add-to-cart, body.single-product .wf-single-buybox .elementor-element-41c7864 .elementor-product-simple{ width: 100% !important; min-width: 0 !important; } body.single-product .wf-single-buybox .elementor-product-simple{ display: grid; gap: 14px; } body.single-product .wf-single-buybox .wf-add-to-cart .stock{ width: fit-content; margin: 0 !important; padding: 8px 14px 8px 34px !important; border-radius: 12px !important; font-size: 14px !important; font-weight: 800 !important; box-shadow: 0 8px 18px rgba(0,0,0,.18); } body.single-product .wf-single-buybox .elementor-element-41c7864 form.cart{ display: grid !important; grid-template-columns: 74px minmax(0,1fr) !important; gap: 12px !important; align-items: stretch !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; } body.single-product .wf-single-buybox .elementor-element-41c7864 form.cart::before, body.single-product .wf-single-buybox .elementor-element-41c7864 form.cart::after{ content: none !important; display: none !important; } body.single-product .wf-single-buybox .elementor-element-41c7864 form.cart .quantity{ width: 100% !important; min-width: 0 !important; margin: 0 !important; } body.single-product .wf-single-buybox .wf-add-to-cart input.qty{ width: 100% !important; min-width: 0 !important; height: 54px !important; border-radius: 16px !important; border: 1px solid rgba(125,211,252,.22) !important; background: rgba(7,15,30,.88) !important; color: #eef7ff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); text-align: center !important; font-weight: 700 !important; } body.single-product .wf-single-buybox .elementor-element-41c7864 form.cart button.single_add_to_cart_button{ position: relative; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: none !important; min-width: 0 !important; flex: unset !important; height: 54px !important; min-height: 54px !important; padding: 0 20px !important; margin: 0 !important; box-sizing: border-box !important; border-radius: 16px !important; border: 1px solid rgba(110,231,183,.36) !important; background: linear-gradient(135deg, rgba(16,185,129,.34), rgba(56,189,248,.26), rgba(10,18,34,.92)) !important; color: #eefcff !important; font-size: 15px !important; font-weight: 800 !important; letter-spacing: .03em !important; line-height: 1 !important; text-align: center !important; text-indent: 0 !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; box-shadow: 0 14px 28px rgba(0,0,0,.38), inset 0 0 0 1px rgba(110,231,183,.16) !important; } body.single-product .wf-single-buybox .elementor-element-41c7864 form.cart button.single_add_to_cart_button::before, body.single-product .wf-single-buybox .elementor-element-41c7864 form.cart button.single_add_to_cart_button::after{ content: none !important; display: none !important; } body.single-product .wf-single-buybox .wf-add-to-cart button.single_add_to_cart_button:hover{ transform: translateY(-1px); box-shadow: 0 16px 34px rgba(0,0,0,.46), 0 0 28px rgba(56,189,248,.18), inset 0 0 0 1px rgba(125,211,252,.20) !important; } @media (max-width: 640px){ body.single-product .wf-single-buybox .elementor-element-41c7864 form.cart{ grid-template-columns: 68px minmax(0,1fr) !important; gap: 10px !important; } body.single-product .wf-single-buybox .wf-add-to-cart input.qty, body.single-product .wf-single-buybox .wf-add-to-cart button.single_add_to_cart_button{ min-height: 50px !important; height: 50px !important; border-radius: 14px !important; } } /* Restore Critical Button Look nach !important-Reduktion */ .single-product .single_add_to_cart_button.button.alt, .wf-buybox-sticky .single_add_to_cart_button, .wf-buybox-sticky button.single_add_to_cart_button{ border-radius: 14px !important; border: 1px solid rgba(110, 231, 183, 0.40) !important; background: linear-gradient( 135deg, rgba(16, 185, 129, 0.32), rgba(56, 189, 248, 0.22), rgba(15, 23, 42, 0.92) ) !important; color: #ecfeff !important; font-weight: 800 !important; letter-spacing: .04em !important; box-shadow: 0 12px 24px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(110, 231, 183, 0.22) !important; } .wf-buybox-sticky .single_add_to_cart_button:hover, .wf-buybox-sticky button.single_add_to_cart_button:hover, .single-product .single_add_to_cart_button.button.alt:hover{ border-color: rgba(110, 231, 183, 0.70) !important; box-shadow: 0 16px 30px rgba(0,0,0,0.55), 0 0 18px rgba(16, 185, 129, 0.20) !important; } /* ========================================================= PHASE 8.5-A PAYPAL / EXPRESS + TRUST LIST + SHARE Migriert aus Customizer nach erfolgreicher Phase 8.4-B. Hinweis: Customizer bleibt bei 8.5-A noch unver ndert. ========================================================= */ /* ========================================================= PAYPAL / EXPRESS WRAPPER ========================================================= */ body.single-product .wf-single-buybox .ppcp-messages{ margin: -4px 0 0 !important; padding: 10px 12px; border-radius: 16px; border: 1px solid rgba(148,163,184,.14); background: rgba(7,13,26,.56); } body.single-product .wf-single-buybox .ppc-button-wrapper, body.single-product .wf-single-buybox #ppc-button-ppcp-gateway{ width: 100%; } body.single-product .wf-single-buybox #ppc-button-ppcp-gateway{ border-radius: 18px; overflow: hidden; } /* ========================================================= TRUST LIST ========================================================= */ body.single-product .wf-single-buybox .wf-trust-placeholder{ display: grid; gap: 10px; padding: 16px 18px; border-radius: 20px; border: 1px solid rgba(125,211,252,.14); background: rgba(8,14,28,.52); } body.single-product .wf-single-buybox .wf-trust-placeholder > div{ display: flex; align-items: center; gap: 10px; color: #ddeafb; font-size: 14px; line-height: 1.45; } body.single-product .wf-single-buybox .wf-trust-placeholder .emoji{ width: 14px; height: 14px; flex: 0 0 14px; } /* ========================================================= SHARE ========================================================= */ body.single-product .wf-single-buybox .elementor-element-90e2ae5{ padding-bottom: 2px; } /* ========================================================= WHITEFOX SINGLE PRODUCT Phase 8.6-A Woo Notices / Progressbar Source: Customizer migration, tested first with Customizer unchanged. Scope: product pages only because this CSS is enqueued only on single product. ========================================================= */ /* ========================================================= WHITEFOX Woo Notices (INLINE unter Header, Mobile only) Ziel: zwischen Header und Content (kein Overlay) ========================================================= */ @media (max-width: 768px){ /* Wrapper bleibt im Flow, aber bekommt Luft unter sticky Header */ body.single-product .woocommerce-notices-wrapper{ position: relative !important; margin: calc(var(--wf-header-h, 108px) + 10px) 12px 12px !important; padding: 0 !important; background: transparent !important; z-index: 5 !important; } /* EXAKT Woo Default berschreiben (die macht sonst wei ) */ body.single-product .woocommerce-message, body.single-product .woocommerce-info, body.single-product .woocommerce-error{ margin: 0 !important; padding: 14px 14px 14px 46px !important; border-radius: 16px !important; border: 1px solid rgba(125,211,252,.28) !important; border-top: 3px solid rgba(110,231,183,.55) !important; background-color: transparent !important; background: linear-gradient(180deg, rgba(15,23,42,.78), rgba(2,6,23,.94)) !important; color: rgba(226,232,240,.96) !important; box-shadow: 0 18px 50px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.05) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } body.single-product .woocommerce-message::before, body.single-product .woocommerce-info::before, body.single-product .woocommerce-error::before{ left: 14px !important; top: 50% !important; transform: translateY(-50%) !important; opacity: .95 !important; } body.single-product .woocommerce-message a.button.wc-forward, body.single-product .woocommerce-info a.button, body.single-product .woocommerce-error a.button{ display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-top: 10px !important; padding: 10px 14px !important; min-height: 40px !important; border-radius: 12px !important; border: 1px solid rgba(110,231,183,.38) !important; background: linear-gradient(135deg, rgba(16,185,129,.26), rgba(56,189,248,.18), rgba(15,23,42,.92) ) !important; color: rgba(236,254,255,.98) !important; font-weight: 900 !important; letter-spacing: .02em !important; white-space: nowrap !important; } } /* ========================================================= WHITEFOX SINGLE PRODUCT PRICE / INFO / SUBHEADS (Ausgelagert nach whitefox-single-product.css Phase 8.3) ========================================================= */ /* ========================================================= WHITEFOX SINGLE PRODUCT Add-to-Cart / Button Fix kompletter Grid-Block (Ausgelagert nach whitefox-single-product.css Phase 8.4) ========================================================= */ /* ========================================================= WHITEFOX SINGLE PRODUCT PayPal / Trust / Share (Ausgelagert nach whitefox-single-product.css Phase 8.5) ========================================================= */ /* ========================================================= TYPOGRAFIE GL TTUNG ========================================================= */ body.single-product .wf-single-buybox, body.single-product .wf-single-buybox *{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1024px){ body.single-product .wf-single-buybox{ position: relative; top: auto; padding: 22px 18px 18px !important; border-radius: 22px; } body.single-product .wf-single-buybox .wf-product-title{ font-size: clamp(1.9rem, 8vw, 2.75rem); } body.single-product .wf-single-buybox .elementor-element-d3019c1 .woocommerce-Price-amount.amount{ font-size: clamp(2rem, 8vw, 2.95rem); } } @media (max-width: 640px){/* ========================================================= WHITEFOX SINGLE PRODUCT Mobile Add-to-Cart Responsive-Regeln im Buybox Responsive Block (Ausgelagert nach whitefox-single-product.css Phase 8.4) ========================================================= */ body.single-product .wf-single-buybox .wf-badge{ width: auto; max-width: 100%; } } /* ========================================================= WHITEFOX Woo Notices (Mobile) Fix: WooCommerce setzt auf Mobile Standard wei (#f6f5f8) Ziel: Glass/Dark wie Desktop ========================================================= */ @media (max-width: 768px){ /* Allgemein: Abstand + nichts "wei es" dahinter */ .woocommerce-notices-wrapper{ background: transparent !important; margin: 12px 0 16px !important; } /* Gewinner-Klasse ist .woocommerce-message (nicht zwingend im Wrapper) */ html body .woocommerce-message, html body .woocommerce-info, html body .woocommerce-error{ position: relative !important; margin: 12px 0 16px !important; padding: 14px 14px 14px 46px !important; border-radius: 16px !important; border: 1px solid rgba(125,211,252,.28) !important; /* kill Woo standard */ background-color: transparent !important; background: linear-gradient(180deg, rgba(15,23,42,.72), rgba(2,6,23,.92)) !important; color: rgba(226,232,240,.96) !important; box-shadow: 0 16px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); width: auto !important; } /* Woo setzt bei message gern nur border-top-color wir vereinheitlichen */ html body .woocommerce-message{ border-top-color: rgba(110,231,183,.55) !important; } html body .woocommerce-info{ border-top-color: rgba(56,189,248,.55) !important; } html body .woocommerce-error{ border-top-color: rgba(248,113,113,.55) !important; } /* Icon links (Woo ::before) */ html body .woocommerce-message::before, html body .woocommerce-info::before, html body .woocommerce-error::before{ left: 14px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 18px !important; opacity: .95 !important; } /* Links im Text */ html body .woocommerce-message a:not(.button), html body .woocommerce-info a:not(.button), html body .woocommerce-error a:not(.button){ color: rgba(125,211,252,.95) !important; text-decoration: none !important; font-weight: 800 !important; } /* Button "Warenkorb anzeigen" */ html body .woocommerce-message a.button.wc-forward, html body .woocommerce-info a.button, html body .woocommerce-error a.button{ display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-top: 10px !important; padding: 10px 14px !important; min-height: 40px !important; border-radius: 12px !important; border: 1px solid rgba(110,231,183,.38) !important; background: linear-gradient(135deg, rgba(16,185,129,.26), rgba(56,189,248,.18), rgba(15,23,42,.92) ) !important; color: rgba(236,254,255,.98) !important; font-weight: 900 !important; letter-spacing: .02em !important; box-shadow: 0 10px 22px rgba(0,0,0,.50), inset 0 0 0 1px rgba(110,231,183,.20) !important; } } /* Whitefox Notice Progressbar (Track + Fill als echte Elemente) */ .woocommerce-message.wf-auto-dismiss, .woocommerce-info.wf-auto-dismiss, .woocommerce-error.wf-auto-dismiss{ position: relative !important; overflow: hidden !important; /* WICHTIG: Platz unten f r Bar */ padding-bottom: 26px !important; } /* Track */ .wf-notice-track{ position: absolute !important; left: 14px !important; right: 14px !important; bottom: 10px !important; height: 6px !important; /* etwas dicker */ border-radius: 999px !important; background: rgba(255,255,255,.14) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important; pointer-events: none !important; opacity: 1 !important; z-index: 50 !important; } /* Fill (l uft rechts -> links) */ .wf-notice-bar{ position: absolute !important; left: 14px !important; right: 14px !important; bottom: 10px !important; height: 6px !important; border-radius: 999px !important; transform-origin: right center !important; transform: scaleX(1) !important; background: linear-gradient(90deg, rgba(110,231,183,.85), rgba(56,189,248,.70)) !important; box-shadow: 0 0 18px rgba(56,189,248,.18) !important; pointer-events: none !important; opacity: 1 !important; z-index: 60 !important; /* ber Track + Inhalt */ } /* Fade-out */ .wf-notice-hide{ opacity: 0 !important; transform: translateY(-6px) !important; max-height: 0 !important; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border-width: 0 !important; transition: opacity .25s ease, transform .25s ease, max-height .25s ease, margin .25s ease, padding .25s ease, border-width .25s ease; } /* ========================================================= WHITEFOX SINGLE PRODUCT Phase 8.7A Residual Product CSS Quelle: letzter Customizer-Rest nach Phase 8.6 Ziel: Produktseiten-Rest aus dem Customizer testweise in whitefox-single-product.css abdecken. Nach erfolgreichem Sichttest k nnen diese Produkt-Regeln im Customizer entfernt werden. ========================================================= */ /* Produktbeschreibung-Video begrenzen */ .single-product .woocommerce-Tabs-panel iframe { max-width: 1280px; width: 100%; aspect-ratio: 16 / 9; height: auto; display: block; margin: 0 auto 1.5rem; } /* Minimaler Legacy-Fallback f r Quick Facts */ .wf-single-facts { color:#f1f5ff; } /* Legacy Trust / Iconlist innerhalb alter Buybox-Struktur */ .wf-buybox-sticky .elementor-icon-list-items, .wf-buybox-sticky .elementor-icon-list-item{ margin:0; padding:0; } .wf-buybox-sticky .elementor-icon-list-item{ padding:6px 0; } .wf-buybox-sticky .elementor-icon-list-text{ color:#cbd5ff; font-size:13px; font-weight:600; } /* Legacy Buybox-Sticky Responsive-Fallback */ @media (max-width:1100px){ .wf-buybox-sticky, .wf-buybox-sticky.elementor-sticky--active{ position:relative !important; top:auto !important; } } @media (max-width:768px){ .wf-buybox-sticky{ padding:16px; } .wf-fact{ padding:14px; } } /* ========================================================= WHITEFOX – SINGLE PRODUCT (Elementor Template) Scope: .single-product + .wf-single-* Ziel: - Sauberes Responsive Verhalten (Hero 2-col -> 1-col) - Buybox sticky nur Desktop - Sprach-Tabs (DE/EN) für Beschreibung + Anforderungen - Mobile: Right zuerst, Media danach + Rotation stabil ========================================================= */ body.single-product .wf-single-hero, body.single-product .wf-single-facts, body.single-product .wf-single-description, body.single-product .wf-single-technical{ color: #f1f5ff; } /* ========================= HERO: Spacing ========================= */ body.single-product .wf-single-hero{ padding: 46px 0; } /* Elementor Container (Flex) */ body.single-product .wf-single-hero-inner{ gap: 24px; align-items: start !important; } /* ========================= MEDIA Stage (Images only here) - Video/iframe werden über .wpk-media-stage geregelt, damit nichts doppelt Aspect-Ratio/Height erzwingt. ========================= */ body.single-product .wf-single-media img{ width: 100%; height: auto; display: block; border-radius: 18px; border: 1px solid rgba(148,163,184,.28); box-shadow: 0 18px 35px rgba(0,0,0,.55); background: rgba(15,23,42,.9); } /* ========================= BUYBOX (Card + Sticky) ========================= */ body.single-product .wf-buybox-sticky{ background: radial-gradient(circle at top left, rgba(148,163,184,.16), rgba(15,23,42,.96)); border: 1px solid rgba(148,163,184,.38); border-radius: 18px; box-shadow: 0 18px 35px rgba(0,0,0,.6); padding: 18px 18px 16px; z-index: 50; } /* Sticky nur Desktop (sonst nervig + Layout bricht) */ @media (min-width: 981px){ body.single-product .wf-buybox-sticky{ position: sticky; top: 110px; align-self: start; } } @media (max-width: 980px){ body.single-product .wf-buybox-sticky{ position: relative !important; top: auto !important; } } /* Titel (Shortcode Output ist meist .wf-meta-row) */ body.single-product .wf-buybox-sticky .wf-meta-row:first-child strong{ display:none !important; } body.single-product .wf-buybox-sticky .wf-meta-row:first-child{ font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; font-size: clamp(30px, 3vw, 46px) !important; font-weight: 900 !important; line-height: 1.12 !important; letter-spacing: .02em !important; margin: 0 0 14px 0 !important; padding-bottom: 10px !important; text-shadow: 0 1px 0 rgba(255,255,255,0.08), 0 6px 18px rgba(0,0,0,0.65) !important; background: linear-gradient(135deg, #ffffff 0%, #dbeafe 35%, #7dd3fc 70%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } body.single-product .wf-buybox-sticky .wf-meta-row:first-child::after{ content:""; display:block; margin-top:12px; height:3px; width:64px; border-radius:999px; background: linear-gradient(90deg, #38bdf8, rgba(56,189,248,0.25), transparent); box-shadow: 0 0 12px rgba(56,189,248,0.6); } /* Badges */ body.single-product .wf-buybox-sticky .wf-badges{ display:flex; gap:10px; flex-wrap:wrap; margin: 10px 0 14px; } body.single-product .wf-buybox-sticky .wf-badges .wf-badge{ display:inline-flex; align-items:center; justify-content:center; padding:6px 12px; border-radius:999px; border:1px solid rgba(148,163,184,.35); background: rgba(15,23,42,.7); color:#e5e7eb; } body.single-product .wf-buybox-sticky .wf-badges .wf-badge .wf-meta-row{ display:flex; align-items:center; gap:8px; font-size: 13px; font-weight: 800; letter-spacing: .06em; line-height: 1.4; color:#e5e7eb; } /* ========================================================= EMPTY BADGES / EMPTY SHORTCODE BUBBLES Wichtig: :empty greift nur, wenn im DIV KEIN Whitespace ist. => HTML-Widget Shortcodes inline schreiben (ohne Zeilenumbrüche) ========================================================= */ /* Buybox Badges: wenn Shortcode leer -> Bubble weg */ body.single-product .wf-buybox-sticky .wf-badges .wf-badge:empty{ display: none !important; } /* Optional: falls Elementor im Shortcode-Widget einen leeren Wrapper lässt */ body.single-product .wf-buybox-sticky .wf-badges .wf-badge:has(.elementor-shortcode:empty){ display: none !important; } /* Quick Facts: leere Shortcode-Widgets im Facts-Bereich ausblenden */ body.single-product .wf-single-facts .elementor-widget-shortcode:has(.elementor-shortcode:empty){ display: none !important; } /* Menge */ body.single-product .wf-buybox-sticky input.qty, body.single-product .wf-buybox-sticky input.input-text.qty{ width: 80px !important; height: 44px !important; background: rgba(15, 23, 42, 0.85) !important; border: 1px solid rgba(148, 163, 184, 0.35) !important; border-radius: 10px !important; font-family: "Manrope", system-ui, sans-serif !important; font-size: 16px !important; font-weight: 800 !important; color: #f1f5ff !important; text-align: center !important; } /* ========================= DESCRIPTION: Language Tabs ========================= */ body.single-product .wf-single-description{ padding: 42px 0; } body.single-product .wf-lang-tabs{ display: inline-flex; gap: 10px; padding: 6px; border-radius: 999px; border: 1px solid rgba(148,163,184,.22); background: rgba(2,6,23,.35); box-shadow: 0 18px 45px rgba(0,0,0,.25); margin: 10px 0 18px; } body.single-product .wf-lang-tab{ appearance: none; border: 1px solid transparent; background: transparent; color: rgba(226,232,240,.92); font-weight: 900; letter-spacing: .02em; padding: 10px 14px; border-radius: 999px; cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease; } body.single-product .wf-lang-tab:hover{ transform: translateY(-1px); border-color: rgba(56,189,248,.35); background: rgba(56,189,248,.10); } body.single-product .wf-lang-tab.is-active{ background: linear-gradient(135deg, rgba(56,189,248,.30), rgba(15,23,42,.92)); border-color: rgba(56,189,248,.45); color: rgba(248,250,252,.98); } body.single-product .wf-lang-panel{ display:none; } body.single-product .wf-lang-panel.is-active{ display:block; } /* Headline-Look in Description (optional, aber clean) */ body.single-product .wf-single-description h4{ font-size: clamp(28px, 2.2vw, 36px); font-weight: 950; line-height: 1.12; margin: 0 0 18px 0; } body.single-product .wf-single-description p{ margin: 0 0 1.15em 0; line-height: 1.9; } body.single-product .wf-single-description ul{ margin: 10px 0 18px 20px; } body.single-product .wf-single-description li{ margin: 10px 0; } /* ========================= TECHNICAL (Accordion) ========================= */ body.single-product .wf-single-technical{ padding: 36px 0 52px; } /* Elementor Nested Accordion */ body.single-product .wf-single-technical .e-n-accordion{ display: grid; gap: 12px; } body.single-product .wf-single-technical .e-n-accordion .e-n-accordion-item-title{ background: radial-gradient(circle at top left, rgba(148,163,184,.10), rgba(11,14,28,.88)); border: 1px solid rgba(148,163,184,.28); border-radius: 16px; padding: 14px 16px; box-shadow: 0 14px 28px rgba(0,0,0,.45); } body.single-product .wf-single-technical .e-n-accordion .e-n-accordion-item-title-text{ color: #f1f5ff; font-weight: 900; letter-spacing: .02em; font-size: 16px; } body.single-product .wf-single-technical .e-n-accordion details[open] > summary + .e-con{ background: radial-gradient(circle at top left, rgba(148,163,184,.08), rgba(7,8,26,.82)); border: 1px solid rgba(148,163,184,.22); border-top: 0; border-radius: 0 0 16px 16px; margin-top: -10px; overflow: hidden; } body.single-product .wf-single-technical .e-n-accordion details[open] > summary + .e-con .wf-meta-row{ padding: 18px 18px 16px; color: #d6dcff; line-height: 1.75; font-size: 15px; } /* ========================= WPK MEDIA STAGE – stable (no rotation chaos) - Alles Video/iframe hier rein, nicht doppelt global ========================= */ body.single-product .wpk-media-stage{ position: relative !important; width: 100% !important; height: 0 !important; padding-top: 56.25% !important; /* 16:9 */ overflow: hidden !important; border-radius: 18px; background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 45%, #0b1a2f 100%) !important; border: 1px solid rgba(56,189,248,.45); box-shadow: inset 0 0 0 1px rgba(56,189,248,.35), 0 18px 35px rgba(0,0,0,.55); } body.single-product .wpk-media-stage .wpk-media-box{ position: absolute !important; inset: 0 !important; } body.single-product .wpk-media-stage .wpk-media-box img{ width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center center !important; display: block !important; } body.single-product .wpk-media-stage .wpk-media-box iframe, body.single-product .wpk-media-stage .wpk-media-box video{ width: 100% !important; height: 100% !important; display: block !important; border: 0 !important; object-fit: cover !important; } /* ========================================================= MOBILE FIX: Reihenfolge + Media Größe (Portrait) ========================================================= */ @media (max-width: 980px){ body.single-product .wf-single-hero{ padding: 28px 0; } body.single-product .wf-single-hero-inner{ display: flex !important; flex-direction: column !important; gap: 18px !important; } body.single-product .wf-single-right{ order: 1 !important; } body.single-product .wf-single-media{ order: 2 !important; } body.single-product .wf-single-media{ width: 100%; } body.single-product .wf-single-media .swiper, body.single-product .wf-single-media .swiper-wrapper{ max-height: 320px; } body.single-product .wf-single-media .swiper-slide img{ height: 320px !important; object-fit: cover !important; } } @media (max-width: 480px){ body.single-product .wf-single-media .swiper-slide img{ height: 240px !important; } } /* ========================================================= MOBILE: Preview-Stage nur für Bilder ausblenden (Video bleibt) ========================================================= */ @media (max-width: 980px){ body.single-product .wpk-media-stage{ display:block; } body.single-product .wpk-media-stage:has(iframe), body.single-product .wpk-media-stage:has(video){ display: block !important; } } /* ========================================================= MOBILE TYPO FIX – Titel explizit groß, Meta bewusst kleiner ========================================================= */ @media (max-width: 980px){ body.single-product .wf-buybox-sticky .wf-meta-row{ font-size: 14px; } body.single-product .wf-buybox-sticky .wf-meta-row:has(+ .wf-badges), body.single-product .wf-buybox-sticky .wf-meta-row:first-of-type{ font-size: clamp(32px, 7.6vw, 44px) !important; font-weight: 900 !important; line-height: 1.08 !important; letter-spacing: .02em !important; margin-bottom: 14px !important; } body.single-product .wf-buybox-sticky .wf-badges .wf-badge{ padding: 5px 10px !important; } body.single-product .wf-buybox-sticky .wf-badges .wf-meta-row{ font-size: 12px !important; font-weight: 800 !important; letter-spacing: .05em !important; } body.single-product .wf-buybox-sticky .price, body.single-product .wf-buybox-sticky .wf-price{ font-size: 22px !important; font-weight: 900 !important; } } /* ========================================================= PAYPAL MESSAGE – Abstand & iFrame Margin ========================================================= */ body.single-product .wf-buybox-sticky form.cart{ margin-bottom: 14px !important; } body.single-product .wf-buybox-sticky iframe[name^="__zoid__paypal"], body.single-product .wf-buybox-sticky iframe[src*="paypal.com"]{ display: block !important; margin-top: 12px !important; margin-bottom: 18px !important; } /* ========================================================= DESKTOP FIX – Chips/Shortcode Meta kleiner (Desktop/Tablet) ========================================================= */ @media (min-width: 981px){ body.single-product .wf-buybox-sticky .wf-badges .wf-badge{ padding: 6px 12px !important; } body.single-product .wf-buybox-sticky .wf-badges .wf-badge .wf-meta-row{ font-size: 12px !important; font-weight: 800 !important; letter-spacing: .05em !important; } } /* ========================================================= QUICK FACTS: leere "Blasen"/Container ausblenden Regel: - Container verstecken, wenn ALLE Shortcodes darin leer sind - Wenn mindestens 1 Shortcode Inhalt hat -> anzeigen ========================================================= */ /* 1) Einzelne leere Shortcode-Widgets weg (falls Elementor ein leeres Widget stehen lässt) */ body.single-product .wf-single-facts .elementor-widget-shortcode:has(.elementor-shortcode:empty){ display: none !important; } /* 2) Ganze Quick-Fact-Container weg, wenn sie NUR leere Shortcodes enthalten */ body.single-product .wf-single-facts .e-con:has(.elementor-widget-shortcode) { /* nix – nur Scope-Klammer (lesbar) */ } /* Container AUSBLENDEN, wenn kein Shortcode-Inhalt existiert: -> Es gibt Shortcode-Widgets, -> aber KEINES davon enthält echten Inhalt (nicht :empty) */ body.single-product .wf-single-facts .e-con:has(.elementor-widget-shortcode):not(:has(.elementor-shortcode:not(:empty))){ display: none !important; } /* 3) Falls du zusätzlich einen "Badge/Box"-Wrapper hast (optional): Manche Shortcodes rendern ein leeres

oder statt wirklich leer. Dann hilft der Trim-Fallback, indem wir auch "nur whitespace" killen. (CSS kann whitespace nicht trimmen, aber wir können typische leere Tags verstecken) */ body.single-product .wf-single-facts .elementor-shortcode p:empty, body.single-product .wf-single-facts .elementor-shortcode span:empty{ display:none !important; } /* ========================================================= FIX: Systemvoraussetzungen Mobile/Portrait – kein X-Scroll Ziel: - Minimum + Empfohlen untereinander - Überschriften/Text brechen sauber um ========================================================= */ @media (max-width: 980px){ /* Sicherheitsnetz gegen horizontales Scrollen nur auf Mobile */ body.single-product{ overflow-x: hidden; } /* Requirements Wrapper: 2 Spalten -> 1 Spalte */ body.single-product .wf-requirements{ display: flex !important; flex-direction: column !important; gap: 14px !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Jede Spalte darf NICHT breiter werden als der Viewport */ body.single-product .wf-requirements .wf-req-col{ width: 100% !important; max-width: 100% !important; min-width: 0 !important; /* wichtig bei Flex, verhindert overflow */ overflow: hidden !important; } /* UL/LI dürfen nicht rausdrücken */ body.single-product .wf-requirements ul{ width: 100% !important; max-width: 100% !important; padding-left: 0 !important; /* falls Padding zu breit drückt */ margin: 0 !important; } body.single-product .wf-requirements li{ width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* Texte (inkl. GTranslate ) sauber umbrechen */ body.single-product .wf-requirements, body.single-product .wf-requirements *{ max-width: 100% !important; min-width: 0 !important; overflow-wrap: anywhere !important; word-break: break-word !important; } /* Falls als inline-block o.ä. rendern und rausdrücken */ body.single-product .wf-requirements li strong{ display: inline !important; white-space: normal !important; } /* Optional: Überschrift minimal kleiner, damit sie nie clippt */ body.single-product .wf-requirements .wf-req-col h4{ max-width: 100% !important; } } /* Extra streng für sehr schmale Geräte */ @media (max-width: 480px){ body.single-product .wf-requirements .wf-req-col{ padding-left: 0 !important; padding-right: 0 !important; } } /* ========================================================= Mobile: Requirements H2 (wf-sr-only) kleiner + bricht sauber um ========================================================= */ @media (max-width: 980px){ body.single-product .wf-requirements, body.single-product .wf-requirements .wf-sr-only{ max-width: 100% !important; } body.single-product .wf-requirements .wf-sr-only{ font-size: 16px !important; /* deutlich kleiner */ line-height: 1.15 !important; margin: 0 0 14px 0 !important; letter-spacing: 0 !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; } /* Falls GTranslate die Größe “festhält” */ body.single-product .wf-requirements .wf-sr-only font{ font-size: inherit !important; line-height: inherit !important; } } /* ========================================================= MOBILE PORTRAIT: Nur TITELBILD (active thumb) nach oben - Titelbild = button.wpk-media-thumb.is-active - Buybox bleibt darunter - Galerie/Video (andere thumbs) bleiben darunter - Caption "Titelbild" entfernen (nur beim Titelbild) ========================================================= */ @media (max-width: 980px){ /* Container muss flex-spalte sein (hast du bereits – hier nur als Safety) */ body.single-product .wf-single-hero-inner{ display: flex !important; flex-direction: column !important; } /* 1) Titelbild-Thumb (active) nach oben */ body.single-product .wf-single-media button.wpk-media-thumb.is-active{ order: 0 !important; } /* 2) Buybox danach */ body.single-product .wf-single-right{ order: 1 !important; } /* 3) Alle anderen Thumbs (Galerie/Video) danach */ body.single-product .wf-single-media button.wpk-media-thumb:not(.is-active){ order: 2 !important; } /* ===== Titelbild optisch clean (nur dünner Rand) ===== */ body.single-product .wf-single-media button.wpk-media-thumb.is-active{ background: transparent !important; border: 1px solid rgba(56,189,248,.65) !important; /* feiner blauer Rand */ border-radius: 14px !important; box-shadow: none !important; padding: 10px !important; /* leichter Innenabstand wie Card */ } /* Das Bild selbst */ body.single-product .wf-single-media button.wpk-media-thumb.is-active .wpk-thumb-media img{ display: block !important; width: 100% !important; height: auto !important; border-radius: 12px !important; } /* "Titelbild" Schriftzug NUR beim Titelbild ausblenden */ body.single-product .wf-single-media button.wpk-media-thumb.is-active .wpk-thumb-caption{ display: none !important; } } /* ========================================================= MOBILE: NUR Titelbild (active wpk-media-thumb) nach ganz oben DOM laut Screenshot: .wf-single-hero-inner (flex) .wf-single-media .wpk-media-thumbs button.wpk-media-thumb.is-active <-- Titelbild button.wpk-media-thumb <-- Galerie/Video .wf-single-right (Buybox) ========================================================= */ @media (max-width: 980px){ /* Safety: Hero ist Flex-Spalte */ body.single-product .wf-single-hero-inner{ display: flex !important; flex-direction: column !important; } /* ?? Wrapper "auflösen", damit Buttons im gleichen Layout-Kontext ordern können */ body.single-product .wf-single-media{ display: contents !important; } body.single-product .wf-single-media .wpk-media-thumbs{ display: contents !important; } /* Reihenfolge: Titelbild -> Buybox -> Rest */ body.single-product .wf-single-media button.wpk-media-thumb.is-active{ order: 0 !important; } body.single-product .wf-single-right{ order: 1 !important; } body.single-product .wf-single-media button.wpk-media-thumb:not(.is-active){ order: 2 !important; } /* Titelbild: Caption weg (du hattest es schon, hier final) */ body.single-product .wf-single-media button.wpk-media-thumb.is-active .wpk-thumb-caption{ display: none !important; } /* Titelbild: nur feiner blauer Rahmen */ body.single-product .wf-single-media button.wpk-media-thumb.is-active{ background: transparent !important; border: 1px solid rgba(56,189,248,.65) !important; border-radius: 14px !important; box-shadow: none !important; padding: 10px !important; overflow: hidden !important; } body.single-product .wf-single-media button.wpk-media-thumb.is-active .wpk-thumb-media img{ width: 100% !important; height: auto !important; display: block !important; border-radius: 12px !important; } } /* ========================================================= FINAL – MOBILE PORTRAIT: Titelbild (Stage) ganz nach oben Reihenfolge: 1) .wpk-media-stage (Titelbild/Video Stage) 2) .wf-single-right (Buybox) 3) .wpk-media-thumbs (Galerie-Thumbs) + aktives Thumb (Titelbild) in den Thumbs ausblenden (keine Doppelung) ========================================================= */ @media (max-width: 980px){ /* Hero sauber als Spalte */ body.single-product .wf-single-hero-inner{ display: flex !important; flex-direction: column !important; gap: 18px !important; } /* Backup: ganze Media-Section vor die Buybox (falls Elementor Siblings anders sortiert) */ body.single-product .wf-single-media{ order: 0 !important; width: 100%; } body.single-product .wf-single-right{ order: 1 !important; } /* 1) Stage-Widget (Titelbild) wirklich nach ganz oben in der Media-Section */ body.single-product .wf-single-media .elementor-widget-shortcode:has(.wpk-media-stage){ order: 0 !important; width: 100% !important; } /* 2) Thumbs danach */ body.single-product .wf-single-media .elementor-widget-shortcode:has(.wpk-media-thumbs){ order: 2 !important; width: 100% !important; } /* Stage: auf Mobile/Portrait eher “hochkantiger” als 16:9 */ body.single-product .wpk-media-stage{ display: block !important; height: auto !important; padding-top: 0 !important; /* deine 16:9-Logik überschreiben */ aspect-ratio: 4 / 5 !important; /* Portrait-ish */ max-height: 520px !important; overflow: hidden !important; border: 1px solid rgba(56,189,248,.65) !important; border-radius: 14px !important; box-shadow: none !important; background: transparent !important; position: relative !important; } body.single-product .wpk-media-stage .wpk-media-box{ position: absolute !important; inset: 0 !important; } body.single-product .wpk-media-stage .wpk-media-box img, body.single-product .wpk-media-stage .wpk-media-box video, body.single-product .wpk-media-stage .wpk-media-box iframe{ width: 100% !important; height: 100% !important; object-fit: cover !important; /* wenn du lieber “contain” willst -> contain */ border-radius: 0 !important; box-shadow: none !important; } /* In der Thumb-Liste das aktive Thumb (= Titelbild) ausblenden -> keine Doppelung */ body.single-product .wpk-media-thumbs .wpk-media-thumb.is-active{ display: none !important; } } /* Extra klein: Stage etwas niedriger */ @media (max-width: 480px){ body.single-product .wpk-media-stage{ max-height: 420px !important; aspect-ratio: 3 / 4 !important; } } /* ========================================================= WHITEFOX – Galerie & Video Thumbs Ziel: - Gleicher dünner blauer Rahmen wie Titelbild - Einheitlicher Hintergrund - Stimmige Caption-Farbe - KEINE Änderung an Layout / Reihenfolge / Logik ========================================================= */ body.single-product .wf-single-media button.wpk-media-thumb:not(.is-active){ background: transparent !important; border: 1px solid rgba(56,189,248,.45) !important; border-radius: 14px !important; padding: 10px !important; box-shadow: none !important; } body.single-product .wf-single-media button.wpk-media-thumb:not(.is-active) .wpk-thumb-media img, body.single-product .wf-single-media button.wpk-media-thumb:not(.is-active) .wpk-thumb-media video{ width: 100% !important; height: auto !important; display: block !important; border-radius: 12px !important; } /* Caption unter Galerie/Video – ruhiger, passend zum Blau */ body.single-product .wf-single-media button.wpk-media-thumb:not(.is-active) .wpk-thumb-caption{ margin-top: 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(186,220,255,.85); text-align: center; } /* ========================================================= WHITEFOX – Galerie & Video Thumbs (ALL VIEWPORTS) Einheitlicher Rahmen & Caption wie Titelbild ========================================================= */ /* Galerie- & Video-Thumbnails */ body.single-product .wf-single-media button.wpk-media-thumb{ background: transparent !important; border: 1px solid rgba(56,189,248,.45) !important; border-radius: 14px !important; padding: 10px !important; box-shadow: none !important; } /* Media-Inhalt */ body.single-product .wf-single-media button.wpk-media-thumb .wpk-thumb-media img, body.single-product .wf-single-media button.wpk-media-thumb .wpk-thumb-media video{ width: 100% !important; height: auto !important; display: block !important; border-radius: 12px !important; } /* Caption */ body.single-product .wf-single-media button.wpk-media-thumb .wpk-thumb-caption{ margin-top: 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(186,220,255,.85); text-align: center; } /* ========================================================= WHITEFOX – FINAL UNIFIED FRAME (DESKTOP + MOBILE) Ziel: - Überall derselbe dezente, dünne Rahmen - Kein kräftiges Blau mehr auf Desktop - Mobile-Optik wird global erzwungen ========================================================= */ /* Einheitlicher Rahmen für Stage + Thumbs */ body.single-product .wpk-media-stage, body.single-product .wf-single-media button.wpk-media-thumb{ border: 1px solid rgba(56,189,248,.35) !important; /* deutlich dezenter */ background: transparent !important; box-shadow: none !important; } /* Sicherheit: keine Desktop-Overrides mit stärkerem Blau */ @media (min-width: 981px){ body.single-product .wpk-media-stage, body.single-product .wf-single-media button.wpk-media-thumb{ border-color: rgba(56,189,248,.35) !important; box-shadow: none !important; background: transparent !important; } } /* Caption-Farbe ebenfalls vereinheitlichen */ body.single-product .wf-single-media .wpk-thumb-caption{ color: rgba(186,220,255,.85) !important; } /* ========================================================= HOTFIX v2 – Desktop greift noch altes "Blue Card" Styling -> Ultra-spezifische Overrides für .wpk-media-thumbs Buttons (nur Optik: Rahmen/Hintergrund/Caption) ========================================================= */ /* Falls der Thumbs-Wrapper selbst einen blauen BG hat */ body.single-product .wf-single-media .wpk-media-thumbs{ background: transparent !important; } /* Buttons in der Thumb-Leiste (Desktop + alle anderen) */ body.single-product .wf-single-media .wpk-media-thumbs > button.wpk-media-thumb, body.single-product .wf-single-media .wpk-media-thumbs button.wpk-media-thumb{ background: transparent !important; background-image: none !important; border: 1px solid rgba(56,189,248,.35) !important; border-radius: 14px !important; box-shadow: none !important; filter: none !important; outline: none !important; } /* Manche Themes/Plugins legen ein Overlay per Pseudo-Element */ body.single-product .wf-single-media .wpk-media-thumbs button.wpk-media-thumb::before, body.single-product .wf-single-media .wpk-media-thumbs button.wpk-media-thumb::after{ content: none !important; background: transparent !important; box-shadow: none !important; } /* Auch innere Wrapper dürfen keinen BG setzen */ body.single-product .wf-single-media .wpk-media-thumbs button.wpk-media-thumb .wpk-thumb-media, body.single-product .wf-single-media .wpk-media-thumbs button.wpk-media-thumb .wpk-media-box{ background: transparent !important; box-shadow: none !important; } /* Media */ body.single-product .wf-single-media .wpk-media-thumbs button.wpk-media-thumb .wpk-thumb-media img, body.single-product .wf-single-media .wpk-media-thumbs button.wpk-media-thumb .wpk-thumb-media video, body.single-product .wf-single-media .wpk-media-thumbs button.wpk-media-thumb .wpk-thumb-media iframe{ border-radius: 12px !important; } /* Caption global ruhig/clean (inkl. GTranslate ) */ body.single-product .wf-single-media .wpk-media-thumbs button.wpk-media-thumb .wpk-thumb-caption, body.single-product .wf-single-media .wpk-media-thumbs button.wpk-media-thumb .wpk-thumb-caption *{ color: rgba(186,220,255,.85) !important; } /* ========================================================= HOTFIX v3 – Force-Reset gegen Elementor-Kit "button" Gradient Problem: - Elementor Kit setzt global auf alle