/* ========================================================= DYNATAG / PETTAG - UNIFIED CUSTOM.CSS Version: FINAL v2.0 (safe consolidated) Ziel: - Einheitliches Landingpage- / CMS- / Produktseiten-System - Container-Breite Desktop: 1600px - Wiederverwendbare Section-, Card- und Button-Logik - Theme-fähig für Pet / Kids / Adult in späterem Schritt ========================================================= */ /* ========================================================= 1. DESIGN TOKENS ========================================================= */ :root { /* Container */ --site-container: 1600px; --content-container: 1320px; --content-container-narrow: 980px; --space-inline-desktop: 32px; --space-inline-tablet: 24px; --space-inline-mobile: 16px; /* Radius */ --radius-xs: 12px; --radius-sm: 16px; --radius-md: 20px; --radius-lg: 24px; --radius-xl: 30px; --radius-pill: 999px; /* Shadows */ --shadow-soft: 0 14px 30px rgba(20, 56, 103, 0.05); --shadow-medium: 0 18px 34px rgba(20, 56, 103, 0.08); --shadow-strong: 0 24px 44px rgba(20, 56, 103, 0.12); --shadow-dark: 0 18px 34px rgba(0, 0, 0, 0.18); /* Brand */ --pet-primary: #0e65af; --pet-primary-2: #338df1; --pet-primary-dark: #16345f; --pet-accent: #ff7a59; --pet-accent-soft: #ffb39b; --pet-mint: #47c6a3; --pet-glow: #a8ff60; /* Neutrals */ --pet-text: #16345f; --pet-text-soft: #42566f; --pet-text-muted: #5f6f86; --pet-text-light: #60718a; --pet-white: #ffffff; --pet-bg-white: #ffffff; --pet-bg-soft: #fffaf7; --pet-bg-soft-2: #f7faff; --pet-bg-soft-3: #f8fbff; --pet-bg-soft-4: #edf5ff; --pet-border: rgba(51, 141, 241, 0.10); --pet-border-strong: rgba(51, 141, 241, 0.18); /* Dark Surfaces */ --pet-dark-1: #242a37; --pet-dark-2: #1f2430; --pet-dark-3: #181d27; --pet-dark-4: #151922; /* Typography */ --pet-h1: clamp(40px, 6vw, 72px); --pet-h2: clamp(32px, 4vw, 50px); --pet-h3: 22px; --pet-body-lg: 18px; --pet-body: 16px; --pet-body-sm: 15px; --pet-label: 13px; } /* ========================================================= 1B. THEME SYSTEM / FUTURE LANDINGPAGES Einheitliche Layouts, nur Farben wechseln Anwendung: - - - - - Alternativ auf Wrapper: - .dt-theme--pet - .dt-theme--sos - .dt-theme--business - .dt-theme--luggage - .dt-theme--sticker ========================================================= */ /* Basis-Theme = Pet / aktuelle Hauptfarbe */ :root, body.theme-pet, .dt-theme--pet { --dt-theme-primary: #0e65af; --dt-theme-primary-2: #338df1; --dt-theme-primary-dark: #16345f; --dt-theme-accent: #ff7a59; --dt-theme-accent-soft: #ffb39b; --dt-theme-mint: #47c6a3; --dt-theme-glow: #a8ff60; --dt-theme-text: #16345f; --dt-theme-text-soft: #42566f; --dt-theme-text-muted: #5f6f86; --dt-theme-text-light: #60718a; --dt-theme-white: #ffffff; --dt-theme-bg-white: #ffffff; --dt-theme-bg-soft: #fffaf7; --dt-theme-bg-soft-2: #f7faff; --dt-theme-bg-soft-3: #f8fbff; --dt-theme-bg-soft-4: #edf5ff; --dt-theme-border: rgba(51, 141, 241, 0.10); --dt-theme-border-strong: rgba(51, 141, 241, 0.18); --dt-theme-dark-1: #242a37; --dt-theme-dark-2: #1f2430; --dt-theme-dark-3: #181d27; --dt-theme-dark-4: #151922; /* Aliases für bestehende Klassen */ --pet-primary: var(--dt-theme-primary); --pet-primary-2: var(--dt-theme-primary-2); --pet-primary-dark: var(--dt-theme-primary-dark); --pet-accent: var(--dt-theme-accent); --pet-accent-soft: var(--dt-theme-accent-soft); --pet-mint: var(--dt-theme-mint); --pet-glow: var(--dt-theme-glow); --pet-text: var(--dt-theme-text); --pet-text-soft: var(--dt-theme-text-soft); --pet-text-muted: var(--dt-theme-text-muted); --pet-text-light: var(--dt-theme-text-light); --pet-white: var(--dt-theme-white); --pet-bg-white: var(--dt-theme-bg-white); --pet-bg-soft: var(--dt-theme-bg-soft); --pet-bg-soft-2: var(--dt-theme-bg-soft-2); --pet-bg-soft-3: var(--dt-theme-bg-soft-3); --pet-bg-soft-4: var(--dt-theme-bg-soft-4); --pet-border: var(--dt-theme-border); --pet-border-strong: var(--dt-theme-border-strong); --pet-dark-1: var(--dt-theme-dark-1); --pet-dark-2: var(--dt-theme-dark-2); --pet-dark-3: var(--dt-theme-dark-3); --pet-dark-4: var(--dt-theme-dark-4); } /* SOS Bracelets */ body.theme-sos, .dt-theme--sos { --dt-theme-primary: #c62828; --dt-theme-primary-2: #ef5350; --dt-theme-primary-dark: #8e1b1b; --dt-theme-accent: #ff8a65; --dt-theme-accent-soft: #ffccbc; --dt-theme-mint: #26a69a; --dt-theme-glow: #d4ff72; --dt-theme-text: #4a1111; --dt-theme-text-soft: #6b2a2a; --dt-theme-text-muted: #8a4a4a; --dt-theme-text-light: #9b6666; --dt-theme-bg-white: #ffffff; --dt-theme-bg-soft: #fff7f6; --dt-theme-bg-soft-2: #fff4f2; --dt-theme-bg-soft-3: #fffafa; --dt-theme-bg-soft-4: #ffe7e5; --dt-theme-border: rgba(198, 40, 40, 0.12); --dt-theme-border-strong: rgba(198, 40, 40, 0.20); --dt-theme-dark-1: #351717; --dt-theme-dark-2: #2a1414; --dt-theme-dark-3: #1f1010; --dt-theme-dark-4: #180b0b; } /* Digitale Businesskarten */ body.theme-business, .dt-theme--business { --dt-theme-primary: #0f3d75; --dt-theme-primary-2: #2f6db4; --dt-theme-primary-dark: #0a274b; --dt-theme-accent: #caa25f; --dt-theme-accent-soft: #ead8b3; --dt-theme-mint: #1fa38a; --dt-theme-glow: #c5f277; --dt-theme-text: #10233d; --dt-theme-text-soft: #334863; --dt-theme-text-muted: #53657d; --dt-theme-text-light: #6b7a90; --dt-theme-bg-white: #ffffff; --dt-theme-bg-soft: #f9fbfe; --dt-theme-bg-soft-2: #f5f8fc; --dt-theme-bg-soft-3: #f8fbff; --dt-theme-bg-soft-4: #e8f0fb; --dt-theme-border: rgba(47, 109, 180, 0.12); --dt-theme-border-strong: rgba(47, 109, 180, 0.20); --dt-theme-dark-1: #1a2433; --dt-theme-dark-2: #141d29; --dt-theme-dark-3: #0f1720; --dt-theme-dark-4: #0a1017; } /* Luggage Tags */ body.theme-luggage, .dt-theme--luggage { --dt-theme-primary: #00695c; --dt-theme-primary-2: #26a69a; --dt-theme-primary-dark: #004d43; --dt-theme-accent: #ffb74d; --dt-theme-accent-soft: #ffe0b2; --dt-theme-mint: #66bb6a; --dt-theme-glow: #d7ff78; --dt-theme-text: #12352f; --dt-theme-text-soft: #355951; --dt-theme-text-muted: #55766e; --dt-theme-text-light: #708b85; --dt-theme-bg-white: #ffffff; --dt-theme-bg-soft: #f6fbfa; --dt-theme-bg-soft-2: #f2faf8; --dt-theme-bg-soft-3: #f7fcfb; --dt-theme-bg-soft-4: #e3f4f1; --dt-theme-border: rgba(0, 105, 92, 0.12); --dt-theme-border-strong: rgba(0, 105, 92, 0.20); --dt-theme-dark-1: #1f2e2d; --dt-theme-dark-2: #182524; --dt-theme-dark-3: #111b1a; --dt-theme-dark-4: #0c1313; } /* QR-Code Sticker */ body.theme-sticker, .dt-theme--sticker { --dt-theme-primary: #6a1b9a; --dt-theme-primary-2: #9c4dcc; --dt-theme-primary-dark: #4a1370; --dt-theme-accent: #ff8f00; --dt-theme-accent-soft: #ffd180; --dt-theme-mint: #26c6da; --dt-theme-glow: #dbff7c; --dt-theme-text: #35194a; --dt-theme-text-soft: #56346c; --dt-theme-text-muted: #725585; --dt-theme-text-light: #8a7398; --dt-theme-bg-white: #ffffff; --dt-theme-bg-soft: #fcf9ff; --dt-theme-bg-soft-2: #f9f5ff; --dt-theme-bg-soft-3: #fbf8ff; --dt-theme-bg-soft-4: #efe5fb; --dt-theme-border: rgba(106, 27, 154, 0.12); --dt-theme-border-strong: rgba(106, 27, 154, 0.20); --dt-theme-dark-1: #2a2331; --dt-theme-dark-2: #211b27; --dt-theme-dark-3: #19141e; --dt-theme-dark-4: #120f16; } /* Gemeinsame Theme-Helfer */ .dt-theme--pet, .dt-theme--sos, .dt-theme--business, .dt-theme--luggage, .dt-theme--sticker, body.theme-pet, body.theme-sos, body.theme-business, body.theme-luggage, body.theme-sticker { color: var(--pet-text); } .dt-theme--pet .current-price .price, .dt-theme--sos .current-price .price, .dt-theme--business .current-price .price, .dt-theme--luggage .current-price .price, .dt-theme--sticker .current-price .price, body.theme-pet .current-price .price, body.theme-sos .current-price .price, body.theme-business .current-price .price, body.theme-luggage .current-price .price, body.theme-sticker .current-price .price { color: var(--pet-primary) !important; } /* ========================================================= 2. GLOBAL / RESET / SHOP BASICS ========================================================= */ html { scroll-behavior: smooth; } body { background-color: #ffffff !important; color: var(--pet-text); } .page-content, .container, .section, #wrapper, #content { background-color: #ffffff !important; } .current-price .price { color: var(--pet-primary) !important; } /* Breadcrumbs */ .ce-breadcrumbs, .elementor-widget-breadcrumb, .category .breadcrumb, body.product .breadcrumb, #wrapper .breadcrumb { background-color: #f9f9f9 !important; padding: 8px 15px !important; font-size: 12px !important; } .breadcrumb a, .ce-breadcrumbs a, .elementor-widget-breadcrumb a, body.product .breadcrumb a, .breadcrumb li, .breadcrumb span { color: #555555 !important; font-size: 12px !important; } /* CMS Breadcrumb + Titel ausblenden */ html body#cms nav.breadcrumb, html body#cms .breadcrumb, html body#cms header.page-header, html body#cms .page-header, html body#cms .page-header h1, html body#cms h1.h1, html body#cms h1.page-title, html body.page-cms nav.breadcrumb, html body.page-cms .breadcrumb, html body.page-cms header.page-header, html body.page-cms .page-header, html body.page-cms .page-header h1, html body.page-cms h1.h1, html body.page-cms h1.page-title { display: none !important; visibility: hidden !important; } body#cms .page-header, body.page-cms .page-header { margin: 0 !important; padding: 0 !important; height: 0 !important; } /* ========================================================= 3. LAYOUT SYSTEM ========================================================= */ .dt-section { position: relative; width: 100%; padding: 96px 0; } .dt-section--light { background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); } .dt-section--soft { background: var(--pet-bg-soft); } .dt-section--dark { background: linear-gradient(180deg, var(--pet-dark-1) 0%, var(--pet-dark-3) 100%); } .dt-container { width: 100%; max-width: var(--site-container); margin: 0 auto; padding: 0 var(--space-inline-desktop); box-sizing: border-box; } .dt-content { width: 100%; max-width: var(--content-container); margin: 0 auto; } .dt-content--narrow { max-width: var(--content-container-narrow); } .dt-section-intro { max-width: 780px; margin: 0 auto 44px; text-align: center; } .dt-eyebrow { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: var(--pet-label); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .dt-eyebrow--accent { color: var(--pet-accent); } .dt-eyebrow--light { color: var(--pet-accent-soft); } .dt-title { margin: 0 0 16px; font-size: var(--pet-h2); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; color: var(--pet-text); } .dt-title--light { color: var(--pet-white); } .dt-subtitle { margin: 0; font-size: var(--pet-body-lg); line-height: 1.75; color: var(--pet-text-muted); } .dt-subtitle--light { color: rgba(255,255,255,0.74); } /* ========================================================= 4. CARD SYSTEM ========================================================= */ .dt-card { border-radius: var(--radius-lg); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .dt-card:hover { transform: translateY(-5px); } .dt-card--light { background: rgba(255,255,255,0.92); border: 1px solid var(--pet-border); box-shadow: var(--shadow-soft); } .dt-card--light:hover { box-shadow: var(--shadow-medium); } .dt-card--dark { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08); box-shadow: var(--shadow-dark); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .dt-card--flat:hover { transform: none; } .dt-card-icon { width: 56px; height: 56px; margin-bottom: 18px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; } .dt-card-icon--light { background: linear-gradient(135deg, rgba(255, 122, 89, 0.12) 0%, rgba(51, 141, 241, 0.12) 100%); } .dt-card-icon--dark { background: rgba(255,255,255,0.10); } .dt-card h3 { margin: 0 0 12px; font-size: 22px; line-height: 1.2; font-weight: 750; } .dt-card--light h3 { color: var(--pet-text); } .dt-card--dark h3 { color: var(--pet-white); } .dt-card p { margin: 0; font-size: var(--pet-body); line-height: 1.75; } .dt-card--light p { color: var(--pet-text-light); } .dt-card--dark p { color: rgba(255,255,255,0.72); } .dt-highlight-box { padding: 24px 28px; border-radius: var(--radius-lg); text-align: center; } .dt-highlight-box--light { background: linear-gradient(135deg, #edf5ff 0%, #fff1ea 100%); border: 1px solid var(--pet-border); } .dt-highlight-box--dark { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08); } .dt-highlight-box--brand { background: linear-gradient(135deg, var(--pet-primary-dark) 0%, var(--pet-primary) 100%); box-shadow: 0 20px 40px rgba(20, 56, 103, 0.14); } .dt-highlight-label { display: inline-block; margin-bottom: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .dt-highlight-box--light .dt-highlight-label { color: var(--pet-accent); } .dt-highlight-box--dark .dt-highlight-label { color: var(--pet-accent-soft); } .dt-highlight-box--brand .dt-highlight-label { color: rgba(255,255,255,0.72); } .dt-highlight-box p { margin: 0; font-size: 17px; line-height: 1.8; } .dt-highlight-box--light p { color: var(--pet-text-muted); } .dt-highlight-box--dark p { color: rgba(255,255,255,0.84); } .dt-highlight-box--brand p { color: #ffffff; } /* ========================================================= 5. BUTTON SYSTEM 5 spezifische Button-Typen Aufrufbare Klassen: - .dt-btn--cta - .dt-btn--info - .dt-btn--cart - .dt-btn--buy - .dt-btn--sample - .dt-btn--glow ========================================================= */ .dt-btn, .pet-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: var(--radius-pill); text-decoration: none !important; font-size: 15px; font-weight: 700; line-height: 1; border: 1px solid transparent; transition: all 0.28s ease; cursor: pointer; position: relative; overflow: hidden; } /* 1. CTA - Fokus / Hauptaktion */ .dt-btn--cta { color: #ffffff !important; background: linear-gradient(135deg, var(--pet-primary) 0%, var(--pet-primary-2) 55%, color-mix(in srgb, var(--pet-primary-2) 78%, white 22%) 100%); box-shadow: 0 14px 28px rgba(51, 141, 241, 0.24); } .dt-btn--cta:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(51, 141, 241, 0.32); } /* 2. Intro / More Info - Outline */ .dt-btn--info { color: var(--pet-primary-dark) !important; background: rgba(255,255,255,0.96); border: 1.5px solid rgba(14, 101, 175, 0.72); box-shadow: 0 10px 24px rgba(20, 56, 103, 0.07); } .dt-btn--info:hover { transform: translateY(-2px); background: #f3f8ff; border-color: var(--pet-primary); } /* 3. In den Warenkorb */ .dt-btn--cart { color: #ffffff !important; background: linear-gradient(135deg, var(--pet-primary-dark) 0%, var(--pet-primary) 100%); box-shadow: 0 14px 26px rgba(20, 56, 103, 0.22); } .dt-btn--cart:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(20, 56, 103, 0.30); } /* 4. Sofort Kaufen */ .dt-btn--buy { color: #ffffff !important; background: linear-gradient(135deg, var(--pet-accent) 0%, color-mix(in srgb, var(--pet-accent) 75%, white 25%) 100%); box-shadow: 0 14px 28px rgba(255, 122, 89, 0.24); } .dt-btn--buy:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(255, 122, 89, 0.32); } /* 5. Muster / Beispiel anschauen */ .dt-btn--sample { color: var(--pet-primary-dark) !important; background: color-mix(in srgb, var(--pet-primary) 8%, transparent); border: 1px solid color-mix(in srgb, var(--pet-primary) 10%, transparent); } .dt-btn--sample:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--pet-primary) 14%, transparent); } /* 6. Spezial / Glow */ .dt-btn--glow { color: #173400 !important; background: linear-gradient(135deg, #89d400 0%, #b8f24b 55%, #d8ff7d 100%); box-shadow: 0 0 0 1px rgba(137, 212, 0, 0.16), 0 0 14px rgba(168, 255, 96, 0.30), 0 14px 28px rgba(137, 212, 0, 0.22); } .dt-btn--glow::before { content: ""; position: absolute; top: 0; left: -130%; width: 70%; height: 100%; background: linear-gradient( 100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 100% ); transform: skewX(-20deg); transition: left 0.55s ease; } .dt-btn--glow:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(137, 212, 0, 0.18), 0 0 18px rgba(168, 255, 96, 0.42), 0 18px 34px rgba(137, 212, 0, 0.28); } .dt-btn--glow:hover::before { left: 130%; } /* Shop Button Mapping */ .btn-primary, .elementor-button, .btn-comment.post-product-comment { border-radius: 999px !important; } .btn-primary, .btn-comment.post-product-comment { background: linear-gradient(135deg, var(--pet-primary), var(--pet-primary-2)) !important; border: none !important; color: #fff !important; transition: all 0.3s ease-in-out; } .btn-primary:hover, .btn-comment.post-product-comment:hover { background: linear-gradient(135deg, color-mix(in srgb, var(--pet-primary-dark) 82%, black 18%), var(--pet-primary)) !important; color: #fff !important; transform: translateY(-2px); } /* Produktseite – Mengenfeld / Plus-Minus neutral */ .qty .bootstrap-touchspin-up, .qty .bootstrap-touchspin-down, .qty .input-group-btn-vertical > .btn { width: 30px !important; min-width: 30px !important; height: 22px !important; padding: 0 !important; margin: 0 !important; border: 1px solid #d8e0ea !important; border-radius: 0 !important; background: #ffffff !important; box-shadow: none !important; color: #16345f !important; transform: none !important; } .qty .bootstrap-touchspin-up:hover, .qty .bootstrap-touchspin-down:hover, .qty .input-group-btn-vertical > .btn:hover { background: #f4f7fb !important; color: #0e65af !important; } /* Produktseite – Mengenfeld / Plus-Minus Standard-Layout */ .qty { display: flex; align-items: flex-start; } .qty .input-group.bootstrap-touchspin { display: flex !important; align-items: stretch !important; flex-wrap: nowrap !important; } .qty .input-group-btn-vertical { display: flex !important; flex-direction: column !important; margin-left: 0 !important; } .qty .form-control, .qty input[name="qty"], #quantity_wanted { width: 64px !important; min-width: 64px !important; height: 44px !important; padding: 0 10px !important; border: 1px solid #d8e0ea !important; border-right: 0 !important; border-radius: 0 !important; background: #ffffff !important; box-shadow: none !important; text-align: center !important; font-size: 16px !important; font-weight: 500 !important; color: #16345f !important; } .qty .bootstrap-touchspin-up, .qty .bootstrap-touchspin-down, .qty .btn-touchspin, .qty .input-group-btn-vertical > .btn { width: 30px !important; min-width: 30px !important; height: 22px !important; padding: 0 !important; margin: 0 !important; border: 1px solid #d8e0ea !important; border-radius: 0 !important; background: #ffffff !important; box-shadow: none !important; color: #16345f !important; display: flex !important; align-items: center !important; justify-content: center !important; transform: none !important; } .qty .bootstrap-touchspin-up, .qty .input-group-btn-vertical > .bootstrap-touchspin-up { border-bottom: 0 !important; } .qty .bootstrap-touchspin-up:hover, .qty .bootstrap-touchspin-down:hover, .qty .btn-touchspin:hover, .qty .input-group-btn-vertical > .btn:hover { background: #f4f7fb !important; color: #0e65af !important; } .qty .bootstrap-touchspin-up i, .qty .bootstrap-touchspin-down i, .qty .btn-touchspin i, .qty .input-group-btn-vertical > .btn i { position: static !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100%; height: 100%; font-size: 18px !important; line-height: 1 !important; } .qty .bootstrap-touchspin-up i::after, .qty .bootstrap-touchspin-down i::after { font-size: 18px !important; line-height: 1 !important; } .qty .form-control:focus, .qty input[name="qty"]:focus, #quantity_wanted:focus { outline: none !important; box-shadow: none !important; border-color: #bfcbd8 !important; } /* ========================================================= 6. HEADER - SHOP / LANDINGPAGE Zielbild: Screenshot ========================================================= */ .pet-topbar-section, .pet-header-section { position: sticky; top: 0; z-index: 1000; width: 100%; background: rgba(255,255,255,0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(22, 52, 95, 0.08); box-shadow: 0 8px 24px rgba(20, 56, 103, 0.04); } .pet-header-container { width: 100%; max-width: var(--site-container); margin: 0 auto; padding: 0 var(--space-inline-desktop); box-sizing: border-box; } .pet-header-inner { min-height: 106px; display: grid; grid-template-columns: 260px 1fr auto auto; align-items: center; gap: 24px; } .pet-header-logo { display: inline-flex; align-items: center; text-decoration: none; } .pet-header-logo img { display: block; max-width: 180px; height: auto; } .pet-header-nav { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; } .pet-header-nav a { color: #1f2d3d; font-size: 17px; font-weight: 700; text-decoration: none; transition: color 0.2s ease; } .pet-header-nav a:hover, .pet-header-nav a.is-active { color: var(--pet-primary); } .pet-header-actions { display: inline-flex; align-items: center; gap: 16px; } .pet-header-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 999px; background: linear-gradient(135deg, var(--pet-primary) 0%, var(--pet-primary-2) 100%); color: #ffffff !important; font-size: 15px; font-weight: 700; text-decoration: none; box-shadow: 0 12px 24px rgba(51, 141, 241, 0.22); transition: all 0.28s ease; } .pet-header-btn:hover { transform: translateY(-2px); } .pet-header-utility { display: inline-flex; align-items: center; gap: 20px; justify-self: end; } .pet-header-link { color: var(--pet-primary); font-size: 17px; font-weight: 700; text-decoration: none; } .pet-header-account, .pet-header-cart { display: inline-flex; align-items: center; gap: 10px; color: var(--pet-primary); text-decoration: none; font-size: 17px; font-weight: 700; } .pet-header-cart-price { color: #6e7b8e; } .pet-header-divider { width: 100%; height: 18px; background: linear-gradient(90deg, #f5e5dc 0%, #f5f5f5 45%, #eaf1fb 100%); border-top: 1px solid rgba(22,52,95,0.04); } /* ========================================================= 7. HERO ========================================================= */ .pet-hero-section { position: relative; overflow: hidden; width: 100%; padding: 96px 0; background: radial-gradient(circle at 12% 18%, rgba(255, 133, 95, 0.18) 0%, transparent 30%), radial-gradient(circle at 88% 22%, rgba(51, 141, 241, 0.16) 0%, transparent 34%), linear-gradient(180deg, #fffaf7 0%, #f4f7fc 100%); } .pet-hero-container { width: 100%; max-width: var(--site-container); margin: 0 auto; padding: 0 var(--space-inline-desktop); box-sizing: border-box; } .pet-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .pet-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #ff7a59; } .pet-hero-title { margin: 0 0 20px; font-size: var(--pet-h1); line-height: 1.02; font-weight: 800; letter-spacing: -0.04em; color: #16345f; } .pet-hero-subtitle { max-width: 660px; margin: 0 0 28px; font-size: 18px; line-height: 1.75; color: #5c6f89; } .pet-hero-points { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 32px; } .pet-hero-point { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.76); border: 1px solid rgba(51, 141, 241, 0.10); box-shadow: 0 10px 24px rgba(20, 56, 103, 0.05); color: #42566f; font-size: 15px; font-weight: 600; } .pet-hero-point-icon { width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(51, 141, 241, 0.12); color: #0e65af; font-size: 14px; font-weight: 800; } .pet-hero-buttons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } .pet-hero-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 24px; border-radius: 999px; font-size: 15px; font-weight: 700; line-height: 1; text-decoration: none; border: 1px solid transparent; transition: all 0.28s ease; } .pet-hero-btn-primary { background: linear-gradient(135deg, #338df1 0%, #5aa6f5 100%); color: #ffffff !important; border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 14px 34px rgba(51, 141, 241, 0.28); } .pet-hero-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(51, 141, 241, 0.34); } .pet-hero-btn-secondary { background: rgba(255, 255, 255, 0.96); color: #143867 !important; border: 1.5px solid rgba(14, 101, 175, 0.75); box-shadow: 0 10px 24px rgba(20, 56, 103, 0.08); } .pet-hero-btn-secondary:hover { transform: translateY(-2px); background: #f3f8ff; } .pet-hero-visual-box { position: relative; min-height: 540px; border-radius: 34px; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.92) 100%); border: 1px solid rgba(51, 141, 241, 0.10); box-shadow: 0 30px 60px rgba(20, 56, 103, 0.10); } .pet-hero-placeholder { width: 100%; height: 100%; min-height: 540px; display: flex; align-items: center; justify-content: center; padding: 40px; text-align: center; color: #7d8ca3; font-size: 18px; font-weight: 600; } .pet-hero-placeholder img { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; display: block; } .pet-hero-floating-card { position: absolute; display: flex; flex-direction: column; gap: 4px; min-width: 150px; padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(51, 141, 241, 0.10); box-shadow: 0 18px 32px rgba(20, 56, 103, 0.10); } .pet-hero-floating-card strong { font-size: 16px; font-weight: 800; color: #16345f; } .pet-hero-floating-card span { font-size: 14px; font-weight: 600; color: #5f6f86; } .pet-hero-floating-card-top { top: 28px; right: 24px; } .pet-hero-floating-card-bottom { bottom: 28px; left: 24px; } /* ========================================================= 8. LANDINGPAGE SECTIONS CLEANED / FINAL ========================================================= */ /* ========================================================= 8. LANDINGPAGE SECTIONS ========================================================= */ /* Keyfacts */ .pet-keyfacts-section { padding: 96px 0; background: #fffaf7; } .pet-keyfacts-container, .pet-problem-container, .pet-solution-container, .pet-compare-container, .pet-options-container, .pet-steps-container, .pet-benefits-container, .pet-usecases-container { max-width: var(--content-container); margin: 0 auto; padding: 0 var(--space-inline-desktop); } .pet-keyfacts-intro, .pet-problem-intro, .pet-solution-intro, .pet-compare-intro, .pet-options-intro, .pet-steps-intro, .pet-benefits-intro, .pet-usecases-intro { max-width: 780px; margin: 0 auto 42px; text-align: center; } .pet-keyfacts-eyebrow, .pet-solution-eyebrow, .pet-compare-eyebrow, .pet-options-eyebrow, .pet-usecases-eyebrow { display: inline-block; margin-bottom: 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #ff7a59; } .pet-problem-eyebrow, .pet-steps-eyebrow, .pet-benefits-eyebrow { display: inline-block; margin-bottom: 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #ffb39b; } .pet-keyfacts-title, .pet-solution-title, .pet-compare-title, .pet-options-title, .pet-usecases-title { margin: 0 0 16px; font-size: var(--pet-h2); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; color: #16345f; } .pet-problem-title, .pet-steps-title, .pet-benefits-title { margin: 0 0 16px; font-size: var(--pet-h2); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; color: #ffffff; } .pet-keyfacts-subtitle, .pet-solution-subtitle, .pet-compare-subtitle, .pet-options-subtitle, .pet-usecases-subtitle { margin: 0; font-size: 18px; line-height: 1.75; color: #5f6f86; } .pet-problem-subtitle, .pet-steps-subtitle, .pet-benefits-subtitle { margin: 0; font-size: 18px; line-height: 1.75; color: rgba(255,255,255,0.76); } /* Keyfacts cards */ .pet-keyfacts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .pet-keyfact-card { padding: 28px 24px; border-radius: 24px; background: rgba(255,255,255,0.90); border: 1px solid rgba(51, 141, 241, 0.10); box-shadow: var(--shadow-soft); transition: transform 0.25s ease, box-shadow 0.25s ease; } .pet-keyfact-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-medium); } .pet-keyfact-card h3 { margin: 0 0 12px; font-size: 22px; line-height: 1.2; font-weight: 750; color: #16345f; } .pet-keyfact-card p { margin: 0; font-size: 16px; line-height: 1.7; color: #60718a; } .pet-keyfact-image2 { width: 40px; height: 40px; margin-bottom: 18px; display: inline-flex; align-items: center; justify-content: center; } .pet-keyfact-image2 img { width: 100%; height: 100%; object-fit: contain; display: block; } /* ========================================================= PROBLEM SECTION Heller Blue-Grey Look, harmonisch mit dunkler Schrift ========================================================= */ .pet-problem-section { padding: 104px 0; background: radial-gradient(circle at 14% 18%, rgba(51, 141, 241, 0.10) 0%, transparent 26%), radial-gradient(circle at 86% 20%, rgba(126, 166, 214, 0.14) 0%, transparent 24%), linear-gradient(180deg, #e7eff9 0%, #d9e5f2 100%); } /* Intro / Header */ .pet-problem-section .section-label, .pet-problem-section .section-label-light, .pet-problem-section .pet-problem-eyebrow { color: #ff9f86 !important; } .pet-problem-section .section-title, .pet-problem-section .pet-problem-title, .pet-problem-section h2, .pet-problem-section .animate, .pet-problem-section .section-title.animate { color: #16345f !important; } .pet-problem-section .section-subtitle, .pet-problem-section .pet-problem-subtitle, .pet-problem-section .pet-problem-intro p, .pet-problem-section .section-subtitle.animate { color: #5b7190 !important; } /* Grid */ .pet-problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 30px; } /* Cards */ .pet-problem-card { padding: 28px 24px; border-radius: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 251, 255, 0.94) 100%); border: 1px solid rgba(20, 56, 103, 0.08); box-shadow: 0 18px 36px rgba(20, 56, 103, 0.08), 0 4px 12px rgba(20, 56, 103, 0.04); transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } .pet-problem-card:hover { transform: translateY(-6px); border-color: rgba(51, 141, 241, 0.16); box-shadow: 0 24px 44px rgba(20, 56, 103, 0.12), 0 8px 18px rgba(20, 56, 103, 0.06); } .pet-problem-card--premium:hover { box-shadow: 0 24px 44px rgba(20, 56, 103, 0.13), 0 0 24px rgba(126, 166, 214, 0.10); } /* Icon / Badge */ .pet-problem-icon, .pet-problem-icon-badge { width: 56px; height: 56px; margin-bottom: 18px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #edf4ff 0%, #dfeaff 100%); color: #2a5f9f !important; font-size: 24px; font-weight: 800; border: 1px solid rgba(51, 141, 241, 0.10); box-shadow: 0 10px 24px rgba(20, 56, 103, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.72); } .pet-problem-icon span, .pet-problem-icon strong, .pet-problem-icon-badge span, .pet-problem-icon-badge strong, .pet-problem-card .pet-problem-icon, .pet-problem-card .pet-problem-icon *, .pet-problem-card .pet-problem-icon-badge, .pet-problem-card .pet-problem-icon-badge * { color: #2a5f9f !important; } /* Premium Icon / Badge */ .pet-problem-card--premium .pet-problem-icon, .pet-problem-card--premium .pet-problem-icon-badge { background: linear-gradient(180deg, #f6f8df 0%, #eef4c8 100%); color: #a3b91d !important; border: 1px solid rgba(163, 185, 29, 0.14); } .pet-problem-card--premium .pet-problem-icon *, .pet-problem-card--premium .pet-problem-icon-badge * { color: #a3b91d !important; } /* Card Typography */ .pet-problem-card h3 { margin: 0 0 12px; font-size: 22px; line-height: 1.2; font-weight: 750; color: #16345f !important; } .pet-problem-card p { margin: 0; font-size: 16px; line-height: 1.75; color: #4f6788 !important; } /* Shared bottom / highlight wrappers */ .pet-problem-highlight, .pet-solution-bottom, .pet-compare-note, .pet-options-note, .pet-steps-bottom, .pet-benefits-highlight, .pet-usecases-bottom { max-width: 920px; margin: 0 auto; } .pet-problem-highlight-inner, .pet-steps-bottom-box, .pet-benefits-highlight-box { padding: 24px 28px; border-radius: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(245, 249, 255, 0.92) 100%); border: 1px solid rgba(20, 56, 103, 0.08); text-align: center; box-shadow: 0 16px 34px rgba(20, 56, 103, 0.07), 0 4px 10px rgba(20, 56, 103, 0.04); } .pet-problem-highlight-label, .pet-steps-bottom-label, .pet-benefits-highlight-label { display: inline-block; margin-bottom: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #338df1; } .pet-problem-highlight-inner p, .pet-steps-bottom-box p, .pet-benefits-highlight-box p { margin: 0; font-size: 17px; line-height: 1.8; color: #456180 !important; } /* Safety override for leftover dark-theme styles */ .pet-problem-section h3, .pet-problem-section h4 { color: #16345f; } .pet-problem-section p { color: #5b7190; } /* Responsive */ @media (max-width: 991px) { .pet-problem-section { padding: 88px 0; } .pet-problem-grid { grid-template-columns: 1fr; gap: 20px; } .pet-problem-card { padding: 24px 22px; } .pet-problem-card h3 { font-size: 20px; } .pet-problem-card p { font-size: 15px; line-height: 1.7; } .pet-problem-highlight-inner, .pet-steps-bottom-box, .pet-benefits-highlight-box { padding: 22px 22px; } } @media (max-width: 767px) { .pet-problem-section { padding: 72px 0; } .pet-problem-icon, .pet-problem-icon-badge { width: 52px; height: 52px; border-radius: 16px; font-size: 21px; margin-bottom: 16px; } .pet-problem-card { border-radius: 22px; } .pet-problem-highlight-inner, .pet-steps-bottom-box, .pet-benefits-highlight-box { border-radius: 22px; padding: 20px 18px; } .pet-problem-highlight-inner p, .pet-steps-bottom-box p, .pet-benefits-highlight-box p { font-size: 16px; line-height: 1.7; } } /* Compare */ .pet-compare-section { padding: 100px 0; background: #fffaf7; } .pet-compare-note { max-width: 920px; margin: 48px auto 0; } .pet-compare-note-box { padding: 24px 28px; border-radius: 24px; background: linear-gradient(135deg, #f4f8ff 0%, #fff3ea 100%); border: 1px solid rgba(51, 141, 241, 0.08); box-shadow: 0 12px 28px rgba(20, 56, 103, 0.04), inset 0 1px 0 rgba(255,255,255,0.8); text-align: center; } .pet-compare-note-label { display: inline-block; margin-bottom: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #ff7a59; } .pet-compare-note-box p { margin: 0; font-size: 17px; line-height: 1.8; color: #2f3e55; } .pet-compare-table-wrap { overflow-x: auto; border-radius: 26px; background: #ffffff; border: 1px solid rgba(20, 56, 103, 0.08); box-shadow: 0 30px 60px rgba(20, 56, 103, 0.08), 0 8px 20px rgba(20, 56, 103, 0.04); } .pet-compare-table { width: 100%; min-width: 760px; border-collapse: collapse; font-family: inherit; table-layout: fixed; } /* Spaltenbreiten */ .pet-compare-table th:nth-child(1), .pet-compare-table td:nth-child(1) { width: 44%; } .pet-compare-table th:nth-child(2), .pet-compare-table td:nth-child(2), .pet-compare-table th:nth-child(3), .pet-compare-table td:nth-child(3) { width: 28%; } .pet-compare-table thead { background: linear-gradient(180deg, #eef4ff 0%, #e6efff 100%); } .pet-compare-table th { padding: 20px 18px; font-size: 14px; font-weight: 700; color: #16345f; text-align: left; border-bottom: 1px solid #e6edf5; text-transform: uppercase; letter-spacing: 0.04em; } .pet-compare-table td { padding: 18px 18px; font-size: 15px; color: #60718a; border-top: 1px solid #eef2f7; vertical-align: middle; } .pet-compare-table th:first-child, .pet-compare-table td:first-child { text-align: left; font-weight: 500; color: #16345f; } .pet-compare-table th:not(:first-child), .pet-compare-table td:not(:first-child) { text-align: center; } .pet-compare-table td:not(:first-child) span { display: inline-flex; align-items: center; justify-content: center; width: 100%; } .pet-compare-highlight { background: linear-gradient(180deg, #f2f8ff 0%, #e9f2ff 100%); font-weight: 600; } .pet-compare-table th.pet-compare-highlight { color: #0e65af; font-weight: 800; } .pet-compare-table .yes, .pet-compare-yes { color: #16a34a; font-weight: 800; font-size: 18px; } .pet-compare-table .no, .pet-compare-no { color: #cbd5e1; font-weight: 600; } .pet-compare-table .limited { color: #f97316; font-weight: 700; } .pet-compare-table tbody tr { transition: background 0.2s ease; } .pet-compare-table tbody tr:hover { background: #f5f9ff; } @media (max-width: 767px) { .pet-compare-table th, .pet-compare-table td { padding: 14px 12px; font-size: 14px; } .pet-compare-table .yes, .pet-compare-yes { font-size: 16px; } } /* ========================================================= BUTTON FIX OVERRIDE Fuer Hero / Landingpage Buttons ========================================================= */ a.dt-btn, a.dt-btn:link, a.dt-btn:visited { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 52px !important; padding: 0 22px !important; border-radius: 999px !important; text-decoration: none !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1 !important; border: 1px solid transparent !important; cursor: pointer !important; transition: all 0.28s ease !important; } a.dt-btn--cta, a.dt-btn--cta:link, a.dt-btn--cta:visited { color: #ffffff !important; background: linear-gradient(135deg, #0e65af 0%, #338df1 55%, #5aa6f5 100%) !important; box-shadow: 0 14px 28px rgba(51, 141, 241, 0.24) !important; } a.dt-btn--cta:hover, a.dt-btn--cta:focus, a.dt-btn--cta:active { color: #ffffff !important; transform: translateY(-2px) !important; box-shadow: 0 18px 34px rgba(51, 141, 241, 0.32) !important; } a.dt-btn--info, a.dt-btn--info:link, a.dt-btn--info:visited { color: #16345f !important; background: rgba(255,255,255,0.96) !important; border: 1.5px solid rgba(14, 101, 175, 0.72) !important; box-shadow: 0 10px 24px rgba(20, 56, 103, 0.07) !important; } a.dt-btn--info:hover, a.dt-btn--info:focus, a.dt-btn--info:active { color: #16345f !important; background: #f3f8ff !important; border-color: #0e65af !important; transform: translateY(-2px) !important; } .pet-keyfact-icon-badge { width: 60px; height: 60px; margin-bottom: 18px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; position: relative; background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%); border: 1px solid rgba(51, 141, 241, 0.12); box-shadow: 0 12px 24px rgba(20, 56, 103, 0.05), inset 0 1px 0 rgba(255,255,255,0.95); } .pet-keyfact-icon-badge span { font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #16345f; } .pet-keyfact-icon-badge--pet { background: linear-gradient(180deg, #fff8f4 0%, #fffdfb 100%); border-color: rgba(255, 122, 89, 0.16); } .pet-keyfact-icon-badge--material { background: linear-gradient(180deg, #f4f8ff 0%, #fbfdff 100%); border-color: rgba(51, 141, 241, 0.16); } .pet-keyfact-icon-badge--smart { background: linear-gradient(180deg, #f3fbf8 0%, #fbfffe 100%); border-color: rgba(71, 198, 163, 0.16); } /* Premium / Glow Badge */ .pet-keyfact-icon-badge--premium { background: linear-gradient(180deg, #fffef7 0%, #f8ffe8 100%); border: 1px solid rgba(193, 170, 82, 0.28); box-shadow: 0 12px 24px rgba(20, 56, 103, 0.05), 0 0 18px rgba(193, 255, 104, 0.12), inset 0 1px 0 rgba(255,255,255,0.95); } .pet-keyfact-icon-badge--premium span { color: #6d7f1f; letter-spacing: 0.10em; } /* Premium Card leicht hervorheben */ .pet-keyfact-card--premium { background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(251,255,244,0.96) 100%); border: 1px solid rgba(193, 170, 82, 0.16); box-shadow: 0 14px 30px rgba(20, 56, 103, 0.05), 0 0 22px rgba(193, 255, 104, 0.06); } .pet-keyfact-card--premium:hover { transform: translateY(-6px); box-shadow: 0 20px 36px rgba(20, 56, 103, 0.09), 0 0 28px rgba(193, 255, 104, 0.10); } .pet-keyfact-card--premium h3 { min-height: 54px; } .pet-problem-card { background: linear-gradient(180deg, rgba(255,255,255,0.11) 0%, rgba(255,255,255,0.08) 100%); border: 1px solid rgba(255,255,255,0.11); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255,255,255,0.04); } .pet-problem-card:hover { border-color: rgba(255,255,255,0.16); box-shadow: 0 24px 44px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255,255,255,0.05); } .pet-problem-badge { width: 66px; height: 66px; border-radius: 19px; } .pet-problem-badge--default { background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.09) 100%); border: 1px solid rgba(255,255,255,0.11); box-shadow: 0 10px 24px rgba(0,0,0,0.13), inset 0 1px 0 rgba(255,255,255,0.12); } .pet-problem-badge--premium { background: linear-gradient(180deg, rgba(246,255,220,0.16) 0%, rgba(255,255,255,0.08) 100%); border: 1px solid rgba(212, 194, 112, 0.26); box-shadow: 0 10px 24px rgba(0,0,0,0.14), 0 0 16px rgba(215, 255, 130, 0.10), inset 0 1px 0 rgba(255,255,255,0.10); } .pet-problem-badge--premium span { color: #f4ffd8; } .pet-problem-card--premium { border-color: rgba(212, 194, 112, 0.14); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.20), 0 0 20px rgba(215, 255, 130, 0.04); } .pet-problem-card--premium:hover { box-shadow: 0 24px 44px rgba(0, 0, 0, 0.24), 0 0 26px rgba(215, 255, 130, 0.06); } .pet-problem-card h3 { min-height: 72px; } .pet-problem-highlight-inner { background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.07) 100%); box-shadow: 0 18px 34px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.04); } /* ========================================================= PROBLEM BADGE FIX ========================================================= */ .pet-problem-badge, .pet-problem-badge--default, .pet-problem-badge--premium, .pet-problem-badge--accent { width: 66px; height: 66px; margin-bottom: 18px; border-radius: 19px; display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative; overflow: hidden; box-sizing: border-box; } .pet-problem-badge span, .pet-problem-badge--default span, .pet-problem-badge--premium span, .pet-problem-badge--accent span { display: inline-block; width: auto; margin: 0; padding: 0; font-size: 12px; line-height: 1; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; } /* Standard */ .pet-problem-badge, .pet-problem-badge--default { background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.09) 100%); border: 1px solid rgba(255,255,255,0.11); box-shadow: 0 10px 24px rgba(0,0,0,0.13), inset 0 1px 0 rgba(255,255,255,0.12); } .pet-problem-badge span, .pet-problem-badge--default span { color: #ffffff; } /* Premium / Accent */ .pet-problem-badge--premium, .pet-problem-badge--accent { background: linear-gradient(180deg, rgba(246,255,220,0.16) 0%, rgba(255,255,255,0.08) 100%); border: 1px solid rgba(212, 194, 112, 0.26); box-shadow: 0 10px 24px rgba(0,0,0,0.14), 0 0 16px rgba(215, 255, 130, 0.10), inset 0 1px 0 rgba(255,255,255,0.10); } .pet-problem-badge--premium span, .pet-problem-badge--accent span { color: #f4ffd8; } /* ========================================================= SOLUTION SECTION FIX Badges + Hover + Accent ========================================================= */ .pet-solution-section { padding: 104px 0; background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%); } .pet-solution-container { max-width: 1320px; margin: 0 auto; padding: 0 32px; } .pet-solution-intro { max-width: 780px; margin: 0 auto 44px; text-align: center; } .pet-solution-eyebrow { display: inline-block; margin-bottom: 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #ff7a59; } .pet-solution-title { margin: 0 0 16px; font-size: clamp(32px, 4vw, 50px); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; color: #16345f; } .pet-solution-subtitle { margin: 0; font-size: 18px; line-height: 1.75; color: #5f6f86; } /* GRID */ .pet-solution-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 34px; } /* CARD */ .pet-solution-card { padding: 28px 24px; border-radius: 24px; background: rgba(255,255,255,0.94); border: 1px solid rgba(51, 141, 241, 0.10); box-shadow: 0 16px 34px rgba(20, 56, 103, 0.06); transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } .pet-solution-card:hover { transform: translateY(-6px); box-shadow: 0 22px 40px rgba(20, 56, 103, 0.10); border-color: rgba(51, 141, 241, 0.18); } /* STANDARD BADGE */ .pet-solution-badge { width: 100px; height: 60px; margin-bottom: 18px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%); border: 1px solid rgba(51, 141, 241, 0.12); box-shadow: 0 10px 20px rgba(20, 56, 103, 0.05), inset 0 1px 0 rgba(255,255,255,0.95); } .pet-solution-badge span { display: inline-block; margin: 0; padding: 0; font-size: 12px; line-height: 1; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #16345f; text-align: center; } /* ACCENT CARD */ .pet-solution-card--accent { border-color: rgba(193, 170, 82, 0.16); box-shadow: 0 14px 30px rgba(20, 56, 103, 0.05), 0 0 20px rgba(193, 255, 104, 0.05); } .pet-solution-card--accent:hover { box-shadow: 0 22px 40px rgba(20, 56, 103, 0.10), 0 0 24px rgba(193, 255, 104, 0.08); } /* ACCENT BADGE */ .pet-solution-badge--accent { background: linear-gradient(180deg, #fffef7 0%, #f4ffe3 100%); border: 1px solid rgba(193, 170, 82, 0.28); box-shadow: 0 10px 20px rgba(20, 56, 103, 0.05), 0 0 14px rgba(193, 255, 104, 0.10), inset 0 1px 0 rgba(255,255,255,0.95); } .pet-solution-badge--accent span { color: #6d7f1f; } /* TEXT */ .pet-solution-card h3 { margin: 0 0 12px; min-height: 54px; font-size: 22px; line-height: 1.2; font-weight: 750; color: #16345f; } .pet-solution-card p { margin: 0; font-size: 16px; line-height: 1.75; color: #60718a; } /* BOTTOM BOX */ .pet-solution-bottom { max-width: 920px; margin: 0 auto; } .pet-solution-bottom-box { padding: 24px 28px; border-radius: 24px; background: linear-gradient(135deg, #edf5ff 0%, #fff4ec 100%); border: 1px solid rgba(51, 141, 241, 0.10); text-align: center; box-shadow: 0 12px 28px rgba(20, 56, 103, 0.04), inset 0 1px 0 rgba(255,255,255,0.8); } .pet-solution-bottom-label { display: inline-block; margin-bottom: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #ff7a59; } .pet-solution-bottom-box p { margin: 0; font-size: 17px; line-height: 1.8; color: #5f6f86; } /* RESPONSIVE */ @media (max-width: 991px) { .pet-solution-grid { grid-template-columns: 1fr; } .pet-solution-card h3 { min-height: auto; } } @media (max-width: 767px) { .pet-solution-section { padding: 68px 0; } .pet-solution-container { padding: 0 16px; } .pet-solution-card, .pet-solution-bottom-box { padding: 22px 20px; border-radius: 20px; } } /* ========================================================= PRODUCT GROUPS SECTION Classic / Comfort / Premium ========================================================= */ .pet-productgroups-section { position: relative; padding: 104px 0; background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%); } .pet-productgroups-container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; } .pet-productgroups-intro { max-width: 820px; margin: 0 auto 48px; text-align: center; } .pet-productgroups-eyebrow { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #ff7a59; } .pet-productgroups-title { margin: 0 0 16px; font-size: clamp(32px, 4.6vw, 54px); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; color: #16345f; } .pet-productgroups-subtitle { margin: 0; font-size: 18px; line-height: 1.75; color: #5c6f89; } /* GRID */ .pet-productgroups-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } /* CARD */ .pet-productgroup-card { display: flex; flex-direction: column; min-height: 100%; border-radius: 30px; overflow: hidden; background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(51, 141, 241, 0.10); box-shadow: 0 20px 44px rgba(20, 56, 103, 0.08); transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } .pet-productgroup-card:hover { transform: translateY(-6px); box-shadow: 0 28px 56px rgba(20, 56, 103, 0.12); border-color: rgba(51, 141, 241, 0.18); } .pet-productgroup-card-featured { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(20, 56, 103, 0.14); border-color: rgba(51, 141, 241, 0.18); } .pet-productgroup-card-featured:hover { transform: translateY(-12px); } /* ========================================================= PRODUCT GROUP IMAGES Zentrierte Bildkacheln mit runden Ecken ========================================================= */ .pet-productgroup-image { position: relative; display: flex; align-items: center; justify-content: center; min-height: 300px; padding: 24px; border-radius: 24px; overflow: hidden; border: 1px solid rgba(20, 56, 103, 0.08); } .pet-productgroup-image-classic { background: linear-gradient(180deg, #eef4ff 0%, #e9f1ff 100%); } .pet-productgroup-image-comfort { background: linear-gradient(180deg, #fff3ec 0%, #fff8f4 100%); } .pet-productgroup-image-glow { background: linear-gradient(180deg, #f4f9df 0%, #eef6d2 100%); } .pet-productgroup-img { display: block; width: 100%; max-width: 320px; height: auto; object-fit: contain; margin: 0 auto; border-radius: 24px !important; } .pet-productgroup-image img { border-radius: 24px !important; } .pet-productgroup-image-classic, .pet-productgroup-image-comfort, .pet-productgroup-image-glow { border-radius: 24px; } .pet-productgroup-img { display: block; width: 100%; max-width: 320px; height: auto; object-fit: contain; margin: 0 auto; border-radius: 24px; } .pet-productgroup-badge { position: absolute; top: 16px; left: 16px; z-index: 3; } .pet-productgroup-placeholder { display: none; } /* Optional: etwas mehr Raum in der Karte */ .pet-productgroup-card .pet-productgroup-image { margin-bottom: 0; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 991px) { .pet-productgroup-image { min-height: 260px; padding: 20px; } .pet-productgroup-img { max-width: 280px; } } @media (max-width: 767px) { .pet-productgroup-image { min-height: 220px; padding: 18px; border-radius: 20px; } .pet-productgroup-img { max-width: 240px; border-radius: 20px; } .pet-productgroup-badge { top: 14px; left: 14px; } } /* Container MUSS schneiden */ .pet-productgroup-image { border-radius: 24px; overflow: hidden; /* wichtig! */ } /* Bild selbst */ .pet-productgroup-img { display: block; width: 100%; height: auto; border-radius: 24px !important; /* überschreibt Theme */ object-fit: cover; } /* Falls PrestaShop globale img-Regeln hat */ .pet-productgroup-image img { border-radius: 24px !important; } /* CONTENT */ .pet-productgroup-content { display: flex; flex-direction: column; padding: 28px 28px 30px; flex: 1; } .pet-productgroup-tag { display: inline-flex; align-self: flex-start; margin-bottom: 14px; padding: 8px 12px; border-radius: 999px; background: rgba(51, 141, 241, 0.10); color: #0e65af; font-size: 13px; font-weight: 700; } .pet-productgroup-content h3 { margin: 0 0 14px; font-size: 30px; line-height: 1.1; font-weight: 800; color: #16345f; } .pet-productgroup-text { margin: 0 0 20px; font-size: 16px; line-height: 1.8; color: #5c6f89; } /* FEATURES */ .pet-productgroup-features { margin: 0 0 24px; padding: 0; list-style: none; } .pet-productgroup-features li { position: relative; padding-left: 24px; margin-bottom: 10px; font-size: 15px; line-height: 1.7; color: #42566f; } .pet-productgroup-features li::before { content: "✓"; position: absolute; top: 0; left: 0; font-weight: 800; color: #0e65af; } /* META */ .pet-productgroup-meta { display: grid; gap: 18px; margin-bottom: 26px; } .pet-productgroup-meta-block { padding: 16px 16px 14px; border-radius: 18px; background: #f8fbff; border: 1px solid rgba(51, 141, 241, 0.10); } .pet-productgroup-meta-label { display: inline-block; margin-bottom: 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #16345f; } .pet-shape-list { display: flex; flex-wrap: wrap; gap: 8px; } .pet-shape-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 12px; border-radius: 999px; background: #ffffff; border: 1px solid rgba(22, 52, 95, 0.10); color: #42566f; font-size: 13px; font-weight: 700; } /* COLOR DOTS */ .pet-color-dots { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; } .pet-color-dot { width: 22px; height: 22px; border-radius: 999px; border: 2px solid #ffffff; box-shadow: 0 0 0 1px rgba(22, 52, 95, 0.12), 0 6px 14px rgba(20, 56, 103, 0.10); } .pet-productgroup-meta-note { margin: 0; font-size: 13px; line-height: 1.7; color: #667992; } /* BUTTONS */ .pet-productgroup-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 20px; border-radius: 999px; text-decoration: none; font-size: 15px; font-weight: 700; transition: all 0.28s ease; margin-top: auto; } .pet-productgroup-btn-primary { color: #ffffff !important; background: linear-gradient(135deg, var(--pet-primary) 0%, var(--pet-primary-2) 100%); box-shadow: 0 14px 28px rgba(51, 141, 241, 0.22); } .pet-productgroup-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(51, 141, 241, 0.30); } .pet-productgroup-btn-secondary { color: #16345f !important; background: #ffffff; border: 1px solid rgba(22, 52, 95, 0.12); box-shadow: 0 10px 24px rgba(20, 56, 103, 0.05); } .pet-productgroup-btn-secondary:hover { transform: translateY(-2px); background: #f8fbff; border-color: rgba(14, 101, 175, 0.28); } /* COLOR DOT DEFINITIONS */ .pet-color-blue { background: #338df1; } .pet-color-black { background: #1b1f27; } .pet-color-orangegold { background: linear-gradient(135deg, #ff9b2f 0%, #d68a11 100%); } .pet-color-pink { background: #ff5fa2; } .pet-color-green { background: #38b26d; } .pet-color-red { background: #ef4444; } .pet-color-violet { background: #8b5cf6; } .pet-color-navy { background: #1f4f8f; } .pet-color-metal { background: linear-gradient(135deg, #d5dbe3 0%, #8d98a7 100%); } .pet-color-white { background: #ffffff; } .pet-color-yellow { background: #ffd84d; } .pet-color-orange { background: #ff8b38; } .pet-color-coral { background: #ff7f6a; } .pet-color-glow-pink { background: #ff78c8; box-shadow: 0 0 0 1px rgba(22, 52, 95, 0.12), 0 0 12px rgba(255, 120, 200, 0.45); } .pet-color-glow-yellow { background: #f7ff66; box-shadow: 0 0 0 1px rgba(22, 52, 95, 0.12), 0 0 12px rgba(247, 255, 102, 0.48); } .pet-color-glow-orange { background: #ffb347; box-shadow: 0 0 0 1px rgba(22, 52, 95, 0.12), 0 0 12px rgba(255, 179, 71, 0.48); } .pet-color-glow-green { background: #a8ff60; box-shadow: 0 0 0 1px rgba(22, 52, 95, 0.12), 0 0 12px rgba(168, 255, 96, 0.48); } .pet-color-glow-blue { background: #76c7ff; box-shadow: 0 0 0 1px rgba(22, 52, 95, 0.12), 0 0 12px rgba(118, 199, 255, 0.48); } /* NOTE BLOCK */ .pet-productgroups-note { max-width: 1120px; margin: 42px auto 0; padding: 0 8px; box-sizing: border-box; } .pet-productgroups-note-box { padding: 26px 26px 28px; border-radius: 24px; background: linear-gradient(135deg, #edf5ff 0%, #fff4ec 100%); border: 1px solid rgba(51, 141, 241, 0.10); box-shadow: 0 12px 28px rgba(20, 56, 103, 0.04), inset 0 1px 0 rgba(255,255,255,0.8); } .pet-productgroups-note-eyebrow { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase; color: #ff7a59; } .pet-productgroups-note-title { max-width: 760px; margin: 0 0 20px; font-size: clamp(24px, 3vw, 32px); line-height: 1.18; font-weight: 800; color: #16345f; } .pet-productgroups-note-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .pet-productgroups-note-card { padding: 18px 18px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.90); border: 1px solid rgba(22, 52, 95, 0.07); } .pet-productgroups-note-card h4 { margin: 0 0 10px; font-size: 17px; line-height: 1.25; font-weight: 800; color: #16345f; } .pet-productgroups-note-card p { margin: 0; font-size: 14px; line-height: 1.72; color: #5c6f89; } /* RESPONSIVE */ @media (max-width: 1199px) { .pet-productgroups-grid { grid-template-columns: 1fr; } .pet-productgroup-card-featured { transform: none; } .pet-productgroup-card-featured:hover { transform: translateY(-6px); } } @media (max-width: 991px) { .pet-productgroups-note { max-width: 100%; margin-top: 30px; padding: 0; } .pet-productgroups-note-grid { grid-template-columns: 1fr; } } @media (max-width: 767px) { .pet-productgroups-section { padding: 72px 0; } .pet-productgroups-container { padding: 0 16px; } .pet-productgroups-intro { margin-bottom: 34px; } .pet-productgroups-subtitle { font-size: 16px; line-height: 1.7; } .pet-productgroup-image { min-height: 220px; padding: 18px; } .pet-productgroup-placeholder { min-height: 180px; font-size: 15px; } .pet-productgroup-content { padding: 22px 20px 24px; } .pet-productgroup-content h3 { font-size: 26px; } .pet-color-dot { width: 20px; height: 20px; } .pet-productgroups-note { margin-top: 24px; } .pet-productgroups-note-box { padding: 22px 18px 22px; border-radius: 20px; } .pet-productgroups-note-title { margin-bottom: 16px; font-size: 22px; } .pet-productgroups-note-card { padding: 16px 15px 15px; border-radius: 15px; } .pet-productgroups-note-card h4 { font-size: 16px; } .pet-productgroups-note-card p { font-size: 14px; line-height: 1.68; } } .pet-productgroup-btn-glow { color: #173400 !important; background: linear-gradient(135deg, #89d400 0%, #b8f24b 55%, #d8ff7d 100%); box-shadow: 0 0 0 1px rgba(137, 212, 0, 0.16), 0 0 14px rgba(168, 255, 96, 0.30), 0 14px 28px rgba(137, 212, 0, 0.22); } .pet-productgroup-btn-glow:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(137, 212, 0, 0.18), 0 0 18px rgba(168, 255, 96, 0.42), 0 18px 34px rgba(137, 212, 0, 0.28); } /* ========================================================= OPTIONS SECTION Ausfuehrungen / Personalisierung ========================================================= */ .pet-options-section { padding: 104px 0; background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%); } .pet-options-container { max-width: 1320px; margin: 0 auto; padding: 0 32px; } .pet-options-intro { max-width: 780px; margin: 0 auto 44px; text-align: center; } .pet-options-eyebrow { display: inline-block; margin-bottom: 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #ff7a59; } .pet-options-title { margin: 0 0 16px; font-size: clamp(32px, 4vw, 50px); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; color: #16345f; } .pet-options-subtitle { margin: 0; font-size: 18px; line-height: 1.75; color: #5f6f86; } /* GRID */ .pet-options-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 32px; } /* CARD */ .pet-option-card { display: flex; flex-direction: column; padding: 28px 24px; border-radius: 24px; background: #ffffff; border: 1px solid rgba(51, 141, 241, 0.10); box-shadow: 0 18px 34px rgba(20, 56, 103, 0.06); transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } .pet-option-card:hover { transform: translateY(-6px); box-shadow: 0 24px 42px rgba(20, 56, 103, 0.10); border-color: rgba(51, 141, 241, 0.18); } /* FEATURED CARD */ .pet-option-card-featured { border-color: rgba(51, 141, 241, 0.22); box-shadow: 0 24px 44px rgba(51, 141, 241, 0.12), 0 0 20px rgba(51, 141, 241, 0.04); transform: translateY(-8px); } .pet-option-card-featured:hover { transform: translateY(-12px); box-shadow: 0 28px 50px rgba(51, 141, 241, 0.16), 0 0 24px rgba(51, 141, 241, 0.06); } /* TOP */ .pet-option-top { margin-bottom: 18px; } .pet-option-label { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 12px; margin-bottom: 16px; border-radius: 999px; background: rgba(255, 122, 89, 0.12); color: #ff7a59; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .pet-option-label-smart { background: rgba(51, 141, 241, 0.12); color: #0e65af; } .pet-option-top h3 { margin: 0 0 12px; min-height: 62px; font-size: 28px; line-height: 1.1; font-weight: 800; color: #16345f; } .pet-option-top p { margin: 0; font-size: 16px; line-height: 1.78; color: #60718a; } /* FEATURES */ .pet-option-features { margin: 0 0 24px; padding: 0; list-style: none; } .pet-option-features li { position: relative; padding-left: 22px; margin-bottom: 10px; font-size: 15px; line-height: 1.68; color: #52667f; } .pet-option-features li::before { content: "•"; position: absolute; left: 0; top: 0; color: #0e65af; font-weight: 800; } /* BUTTONS */ .pet-option-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; border-radius: 14px; text-decoration: none; font-size: 15px; font-weight: 700; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; margin-top: auto; } .pet-option-btn-primary { color: #ffffff !important; background: linear-gradient(135deg, var(--pet-primary) 0%, var(--pet-primary-2) 100%); box-shadow: 0 14px 24px rgba(51, 141, 241, 0.20); } .pet-option-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 30px rgba(51, 141, 241, 0.28); } .pet-option-btn-secondary { color: #16345f !important; background: color-mix(in srgb, var(--pet-primary) 8%, transparent); border: 1px solid rgba(14, 101, 175, 0.08); } .pet-option-btn-secondary:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--pet-primary) 14%, transparent); } /* NOTE */ .pet-options-note { max-width: 920px; margin: 0 auto; } .pet-options-note-box { padding: 24px 28px; border-radius: 24px; background: linear-gradient(135deg, #fff1ea 0%, #fff8f5 100%); border: 1px solid rgba(255, 122, 89, 0.12); text-align: center; box-shadow: 0 16px 30px rgba(255, 122, 89, 0.06); } .pet-options-note-label { display: inline-block; margin-bottom: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #ff7a59; } .pet-options-note-box p { margin: 0; font-size: 17px; line-height: 1.8; color: #5f6f86; } /* RESPONSIVE */ @media (max-width: 991px) { .pet-options-grid { grid-template-columns: 1fr; } .pet-option-card-featured { transform: none; } .pet-option-card-featured:hover { transform: translateY(-6px); } .pet-option-top h3 { min-height: auto; } } @media (max-width: 767px) { .pet-options-section { padding: 66px 0; } .pet-options-container { padding: 0 16px; } .pet-option-card, .pet-options-note-box { padding: 22px 20px; border-radius: 20px; } .pet-option-top h3 { font-size: 26px; } } /* ========================================================= PROMO SECTION Mehrere Haustiere / Paket-Angebote ========================================================= */ .pet-promo-section { padding: 96px 0; background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); } .pet-promo-container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; } .pet-promo-intro { max-width: 760px; margin: 0 auto 42px; text-align: center; } .pet-promo-title { margin: 0 0 14px; font-size: clamp(34px, 4vw, 52px); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; color: #0f2147; } .pet-promo-subtitle { margin: 0; font-size: 18px; line-height: 1.7; color: #6a7b93; } /* GRID */ .pet-promo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1100px; margin: 0 auto; } /* CARD */ .pet-promo-card { position: relative; padding: 34px 24px 28px; border-radius: 24px; background: #ffffff; border: 1px solid rgba(20, 56, 103, 0.08); box-shadow: 0 14px 30px rgba(20, 56, 103, 0.06); text-align: center; transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } .pet-promo-card:hover { transform: translateY(-6px); box-shadow: 0 22px 40px rgba(20, 56, 103, 0.10); border-color: rgba(51, 141, 241, 0.16); } /* FEATURED */ .pet-promo-card-featured { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(20, 56, 103, 0.09); border-color: rgba(51, 141, 241, 0.14); } .pet-promo-card-featured:hover { transform: translateY(-8px); } /* GLOW */ .pet-promo-card-glow { border-color: rgba(137, 212, 0, 0.20); box-shadow: 0 18px 36px rgba(20, 56, 103, 0.09), 0 0 20px rgba(168, 255, 96, 0.08); } .pet-promo-card-glow:hover { transform: translateY(-6px); box-shadow: 0 24px 44px rgba(20, 56, 103, 0.12), 0 0 28px rgba(168, 255, 96, 0.14); } /* TOP BADGES */ .pet-promo-top-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 14px; margin-bottom: 18px; border-radius: 999px; background: rgba(22, 52, 95, 0.06); color: #16345f; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid rgba(22, 52, 95, 0.08); } .pet-promo-top-badge-featured { background: linear-gradient(180deg, #edf5ff 0%, #e3efff 100%); color: #0e65af; border: 1px solid rgba(51, 141, 241, 0.18); box-shadow: 0 8px 18px rgba(51, 141, 241, 0.10); } .pet-promo-top-badge-glow { background: linear-gradient(180deg, #eefbd9 0%, #e3f7bf 100%); color: #4d6d12; border: 1px solid rgba(137, 212, 0, 0.20); box-shadow: 0 8px 18px rgba(137, 212, 0, 0.10), 0 0 10px rgba(168, 255, 96, 0.10); } /* HEADINGS */ .pet-promo-card h3 { margin: 0 0 10px; font-size: clamp(28px, 3vw, 42px); line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; color: #0f2147; } .pet-promo-card p { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: #6a7b93; } /* DISCOUNT BADGE */ .pet-promo-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 16px; border-radius: 999px; background: linear-gradient(180deg, #e5f6e6 0%, #d8f0d9 100%); color: #246b38; font-size: 14px; font-weight: 800; letter-spacing: -0.01em; } .pet-promo-badge-glow { background: linear-gradient(180deg, #eefbd9 0%, #ddf5b0 100%); color: #3f5f0c; box-shadow: 0 0 0 1px rgba(137, 212, 0, 0.10), 0 0 12px rgba(168, 255, 96, 0.16); } /* ACTIONS */ .pet-promo-actions { margin-top: 22px; } /* BUTTONS */ .pet-promo-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; border-radius: 999px; text-decoration: none; font-size: 15px; font-weight: 700; transition: all 0.28s ease; } .pet-promo-btn-primary { color: #ffffff !important; background: linear-gradient(135deg, var(--pet-primary) 0%, var(--pet-primary-2) 100%); box-shadow: 0 14px 24px rgba(51, 141, 241, 0.20); } .pet-promo-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 30px rgba(51, 141, 241, 0.28); } .pet-promo-btn-secondary { color: #16345f !important; background: #ffffff; border: 1px solid rgba(22, 52, 95, 0.12); box-shadow: 0 10px 24px rgba(20, 56, 103, 0.05); } .pet-promo-btn-secondary:hover { transform: translateY(-2px); background: #f8fbff; border-color: rgba(14, 101, 175, 0.28); } .pet-promo-btn-glow { color: #173400 !important; background: linear-gradient(135deg, #89d400 0%, #b8f24b 55%, #d8ff7d 100%); box-shadow: 0 0 0 1px rgba(137, 212, 0, 0.16), 0 0 14px rgba(168, 255, 96, 0.30), 0 14px 28px rgba(137, 212, 0, 0.22); } .pet-promo-btn-glow:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(137, 212, 0, 0.18), 0 0 18px rgba(168, 255, 96, 0.42), 0 18px 34px rgba(137, 212, 0, 0.28); } /* RESPONSIVE */ @media (max-width: 991px) { .pet-promo-grid { grid-template-columns: 1fr; max-width: 520px; } .pet-promo-card-featured { transform: none; } .pet-promo-card-featured:hover { transform: translateY(-6px); } } @media (max-width: 767px) { .pet-promo-section { padding: 68px 0; } .pet-promo-container { padding: 0 16px; } .pet-promo-intro { margin-bottom: 30px; } .pet-promo-subtitle { font-size: 16px; line-height: 1.65; } .pet-promo-card { padding: 28px 20px 24px; border-radius: 20px; } .pet-promo-card h3 { font-size: 28px; } .pet-promo-btn { width: 100%; } } /* ========================================================= STEPS SECTION Frisch, hell, modern ========================================================= */ .pet-steps-section { position: relative; padding: 104px 0; background: radial-gradient(circle at 16% 18%, rgba(51, 141, 241, 0.10) 0%, transparent 26%), radial-gradient(circle at 84% 20%, rgba(255, 122, 89, 0.08) 0%, transparent 24%), linear-gradient(180deg, #f7fbff 0%, #edf4fb 100%); } .pet-steps-container { width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; } .pet-steps-intro { max-width: 780px; margin: 0 auto 48px; text-align: center; } .pet-steps-eyebrow { display: inline-block; margin-bottom: 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #ff9f86; } .pet-steps-title { margin: 0 0 16px; font-family: 'Inter Tight', sans-serif; font-size: clamp(34px, 4vw, 52px); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; color: #16345f; } .pet-steps-subtitle { margin: 0; font-size: 18px; line-height: 1.75; color: #5b7190; } .pet-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 34px; } .pet-step-card { position: relative; padding: 30px 28px 28px; border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(247,250,255,0.94) 100%); border: 1px solid rgba(20, 56, 103, 0.08); box-shadow: 0 18px 36px rgba(20, 56, 103, 0.08), 0 4px 12px rgba(20, 56, 103, 0.04); transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } .pet-step-card:hover { transform: translateY(-6px); border-color: rgba(51, 141, 241, 0.16); box-shadow: 0 24px 44px rgba(20, 56, 103, 0.12), 0 8px 18px rgba(20, 56, 103, 0.06); } .pet-step-number { display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; margin-bottom: 22px; border-radius: 22px; background: linear-gradient(180deg, #edf4ff 0%, #dfeaff 100%); border: 1px solid rgba(51, 141, 241, 0.10); box-shadow: 0 10px 24px rgba(20, 56, 103, 0.06), inset 0 1px 0 rgba(255,255,255,0.72); } .pet-step-number img { display: block; width: 54px; height: 54px; object-fit: contain; } .pet-step-card h3 { margin: 0 0 12px; font-size: 24px; line-height: 1.2; font-weight: 750; color: #16345f; } .pet-step-card p { margin: 0; font-size: 16px; line-height: 1.75; color: #4f6788; } .pet-steps-bottom { max-width: 960px; margin: 0 auto; } .pet-steps-bottom-box { padding: 26px 30px; border-radius: 24px; text-align: center; background: linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(245,249,255,0.92) 100%); border: 1px solid rgba(20, 56, 103, 0.08); box-shadow: 0 16px 34px rgba(20, 56, 103, 0.07), 0 4px 10px rgba(20, 56, 103, 0.04); } .pet-steps-bottom-label { display: inline-block; margin-bottom: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #338df1; } .pet-steps-bottom-box p { margin: 0; font-size: 17px; line-height: 1.8; color: #456180; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 991px) { .pet-steps-section { padding: 88px 0; } .pet-steps-container { padding: 0 24px; } .pet-steps-grid { grid-template-columns: 1fr; gap: 20px; } .pet-step-card { padding: 26px 24px; } .pet-step-card h3 { font-size: 22px; } .pet-step-card p { font-size: 15px; line-height: 1.7; } .pet-steps-bottom-box { padding: 22px 22px; } } @media (max-width: 767px) { .pet-steps-section { padding: 72px 0; } .pet-steps-container { padding: 0 16px; } .pet-steps-title { font-size: 32px; line-height: 1.12; } .pet-steps-subtitle { font-size: 16px; line-height: 1.7; } .pet-step-card { border-radius: 22px; padding: 24px 20px; } .pet-step-number { width: 78px; height: 78px; border-radius: 20px; margin-bottom: 18px; } .pet-step-number img { width: 48px; height: 48px; } .pet-step-card h3 { font-size: 21px; } .pet-steps-bottom-box { border-radius: 22px; padding: 20px 18px; } .pet-steps-bottom-box p { font-size: 16px; line-height: 1.7; } } /* RESPONSIVE */ @media (max-width: 991px) { .pet-steps-grid { grid-template-columns: 1fr; } .pet-step-card h3 { min-height: auto; } } @media (max-width: 767px) { .pet-steps-section { padding: 68px 0; } .pet-steps-container { padding: 0 16px; } .pet-step-card, .pet-steps-bottom-box { padding: 22px 20px; border-radius: 20px; } .pet-step-number { width: 76px; height: 76px; border-radius: 18px; } } /* ========================================================= BENEFITS SECTION Soft Navy / volle Bildschirmbreite ========================================================= */ .pet-benefits-section { padding: 104px 0; background: radial-gradient(circle at 15% 20%, rgba(255, 122, 89, 0.10) 0%, transparent 24%), radial-gradient(circle at 85% 18%, rgba(51, 141, 241, 0.10) 0%, transparent 22%), linear-gradient(180deg, #33415c 0%, #24324b 100%); } .pet-benefits-container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; } .pet-benefits-intro { max-width: 780px; margin: 0 auto 44px; text-align: center; } .pet-benefits-eyebrow { display: inline-block; margin-bottom: 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #ffd2c2; } .pet-benefits-title { margin: 0 0 16px; font-size: clamp(32px, 4vw, 50px); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; color: #ffffff; } .pet-benefits-subtitle { margin: 0; font-size: 18px; line-height: 1.75; color: rgba(255,255,255,0.78); } /* GRID */ .pet-benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 30px; } /* CARD */ .pet-benefit-card { padding: 30px 24px 26px; border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.10) 100%); border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 18px 34px rgba(12, 24, 44, 0.18), inset 0 1px 0 rgba(255,255,255,0.05); transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } .pet-benefit-card:hover { transform: translateY(-6px); box-shadow: 0 24px 42px rgba(12, 24, 44, 0.22), inset 0 1px 0 rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); } /* ACCENT CARD */ .pet-benefit-card--accent { border-color: rgba(212, 194, 112, 0.18); box-shadow: 0 18px 36px rgba(12, 24, 44, 0.20), 0 0 20px rgba(215, 255, 130, 0.05); } .pet-benefit-card--accent:hover { box-shadow: 0 24px 44px rgba(12, 24, 44, 0.24), 0 0 26px rgba(215, 255, 130, 0.08); } /* BADGES */ .pet-benefit-badge { width: 66px; height: 66px; margin-bottom: 18px; border-radius: 19px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.10) 100%); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 10px 24px rgba(12,24,44,0.14), inset 0 1px 0 rgba(255,255,255,0.10); } .pet-benefit-badge span { display: inline-block; margin: 0; padding: 0; font-size: 12px; line-height: 1; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; color: #ffffff; } .pet-benefit-badge--accent { background: linear-gradient(180deg, rgba(246,255,220,0.18) 0%, rgba(255,255,255,0.10) 100%); border: 1px solid rgba(212, 194, 112, 0.28); box-shadow: 0 10px 24px rgba(12,24,44,0.14), 0 0 16px rgba(215, 255, 130, 0.10), inset 0 1px 0 rgba(255,255,255,0.10); } .pet-benefit-badge--accent span { color: #f4ffd8; } /* TEXT */ .pet-benefit-card h3 { margin: 0 0 12px; min-height: 58px; font-size: 22px; line-height: 1.2; font-weight: 750; color: #ffffff; } .pet-benefit-card p { margin: 0; font-size: 16px; line-height: 1.75; color: rgba(255,255,255,0.78); } /* HIGHLIGHT */ .pet-benefits-highlight { max-width: 920px; margin: 0 auto; } .pet-benefits-highlight-box { padding: 24px 28px; border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.09) 100%); border: 1px solid rgba(255,255,255,0.10); text-align: center; box-shadow: 0 18px 34px rgba(12,24,44,0.14), inset 0 1px 0 rgba(255,255,255,0.05); } .pet-benefits-highlight-label { display: inline-block; margin-bottom: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #ffd2c2; } .pet-benefits-highlight-box p { margin: 0; font-size: 17px; line-height: 1.8; color: rgba(255,255,255,0.86); } /* RESPONSIVE */ @media (max-width: 991px) { .pet-benefits-grid { grid-template-columns: 1fr; } .pet-benefit-card h3 { min-height: auto; } } @media (max-width: 767px) { .pet-benefits-section { padding: 68px 0; } .pet-benefits-container { padding: 0 16px; } .pet-benefit-card, .pet-benefits-highlight-box { padding: 22px 20px; border-radius: 20px; } } /* ========================================================= USECASES SECTION Einfache Kachel-Ansicht ========================================================= */ .pet-usecases-section { padding: 96px 0 108px; background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); } .pet-usecases-container { max-width: 1320px; margin: 0 auto; padding: 0 32px; } .pet-usecases-intro { max-width: 780px; margin: 0 auto 42px; text-align: center; } .pet-usecases-eyebrow { display: inline-block; margin-bottom: 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #2c7a63; } .pet-usecases-title { margin: 0 0 16px; font-size: clamp(32px, 4vw, 50px); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; color: #16345f; } .pet-usecases-subtitle { margin: 0; font-size: 18px; line-height: 1.75; color: #5f6f86; } /* GRID */ .pet-usecases-grid--simple { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 32px; } /* SIMPLE CARD */ .pet-usecase-card--simple { min-height: 178px; padding: 28px 20px; border-radius: 22px; background: #ffffff; border: 1px solid rgba(22, 52, 95, 0.08); box-shadow: 0 12px 26px rgba(20, 56, 103, 0.05); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition: transform 0.26s ease, box-shadow 0.26s ease, border-color 0.26s ease; } .pet-usecase-card--simple:hover { transform: translateY(-5px); box-shadow: 0 18px 34px rgba(20, 56, 103, 0.09); border-color: rgba(51, 141, 241, 0.14); } .pet-usecase-card--simple .pet-usecase-icon { margin-bottom: 18px; font-size: 38px; line-height: 1; } .pet-usecase-card--simple h3 { margin: 0; font-size: 16px; line-height: 1.35; font-weight: 800; color: #0f2147; } /* BOTTOM BOX */ .pet-usecases-bottom { max-width: 920px; margin: 0 auto; } .pet-usecases-bottom-box { padding: 24px 28px; border-radius: 24px; background: linear-gradient(135deg, #fff1ea 0%, #edf5ff 100%); border: 1px solid rgba(51, 141, 241, 0.10); text-align: center; box-shadow: 0 12px 28px rgba(20, 56, 103, 0.04), inset 0 1px 0 rgba(255,255,255,0.8); } .pet-usecases-bottom-label { display: inline-block; margin-bottom: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #ff7a59; } .pet-usecases-bottom-box p { margin: 0; font-size: 17px; line-height: 1.8; color: #5f6f86; } /* RESPONSIVE */ @media (max-width: 991px) { .pet-usecases-grid--simple { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .pet-usecases-section { padding: 62px 0 72px; } .pet-usecases-container { padding: 0 16px; } .pet-usecases-grid--simple { grid-template-columns: 1fr; gap: 16px; } .pet-usecase-card--simple { min-height: 150px; padding: 24px 18px; border-radius: 20px; } .pet-usecase-card--simple .pet-usecase-icon { font-size: 34px; margin-bottom: 14px; } .pet-usecase-card--simple h3 { font-size: 15px; } .pet-usecases-bottom-box { padding: 22px 20px; border-radius: 20px; } } /* ========================================================= FAQ SECTION Accordion ========================================================= */ .pet-faq-section { padding: 96px 0; background: linear-gradient(180deg, #fffaf7 0%, #f8fbff 100%); } .pet-faq-container { max-width: 980px; margin: 0 auto; padding: 0 32px; } .pet-faq-intro { max-width: 760px; margin: 0 auto 38px; text-align: center; } .pet-faq-eyebrow { display: inline-block; margin-bottom: 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #ff7a59; } .pet-faq-title { margin: 0 0 16px; font-size: clamp(32px, 4vw, 48px); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; color: #16345f; } .pet-faq-subtitle { margin: 0; font-size: 18px; line-height: 1.75; color: #5f6f86; } .pet-faq-list { display: grid; gap: 16px; } .pet-faq-item { border-radius: 22px; background: #ffffff; border: 1px solid rgba(51, 141, 241, 0.10); box-shadow: 0 14px 28px rgba(20, 56, 103, 0.05); overflow: hidden; transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease; } .pet-faq-item:hover { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(20, 56, 103, 0.08); border-color: rgba(51, 141, 241, 0.16); } .pet-faq-item summary::-webkit-details-marker { display: none; } .pet-faq-question { list-style: none; cursor: pointer; padding: 22px 64px 22px 24px; position: relative; } .pet-faq-question span { display: block; font-size: 20px; line-height: 1.35; font-weight: 750; color: #16345f; } .pet-faq-question::before, .pet-faq-question::after { content: ""; position: absolute; right: 24px; top: 50%; width: 14px; height: 2px; background: #0e65af; border-radius: 999px; transform: translateY(-50%); transition: transform 0.24s ease, opacity 0.24s ease; } .pet-faq-question::after { transform: translateY(-50%) rotate(90deg); } .pet-faq-item[open] .pet-faq-question::after { transform: translateY(-50%) rotate(0deg); opacity: 0; } .pet-faq-answer { padding: 0 24px 22px; } .pet-faq-answer p { margin: 0; font-size: 16px; line-height: 1.8; color: #60718a; } .pet-faq-bottom { margin-top: 28px; } .pet-faq-bottom-box { padding: 24px 28px; border-radius: 24px; background: linear-gradient(135deg, #edf5ff 0%, #fff1ea 100%); border: 1px solid rgba(51, 141, 241, 0.10); text-align: center; box-shadow: 0 12px 28px rgba(20, 56, 103, 0.04), inset 0 1px 0 rgba(255,255,255,0.8); } .pet-faq-bottom-label { display: inline-block; margin-bottom: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #ff7a59; } .pet-faq-bottom-box p { margin: 0; font-size: 17px; line-height: 1.8; color: #5f6f86; } @media (max-width: 767px) { .pet-faq-section { padding: 62px 0; } .pet-faq-container { padding: 0 16px; } .pet-faq-item, .pet-faq-bottom-box { border-radius: 20px; } .pet-faq-question { padding: 20px 56px 20px 20px; } .pet-faq-answer, .pet-faq-bottom-box { padding-left: 20px; padding-right: 20px; } .pet-faq-question span { font-size: 18px; } .pet-faq-question::before, .pet-faq-question::after { right: 20px; } } /* ========================================================= 9. NEW CONTACT SECTION ========================================================= */ .pet-contact-section { padding: 100px 0; background: radial-gradient(circle at 15% 20%, rgba(255, 122, 89, 0.10) 0%, transparent 24%), radial-gradient(circle at 85% 25%, rgba(51, 141, 241, 0.10) 0%, transparent 22%), linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); } .pet-contact-container { max-width: var(--content-container); margin: 0 auto; padding: 0 var(--space-inline-desktop); } .pet-contact-intro { max-width: 760px; margin: 0 auto 40px; text-align: center; } .pet-contact-eyebrow { display: inline-block; margin-bottom: 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #ff7a59; } .pet-contact-title { margin: 0 0 16px; font-size: clamp(32px, 4vw, 48px); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; color: #16345f; } .pet-contact-subtitle { margin: 0; font-size: 18px; line-height: 1.75; color: #5f6f86; } .pet-contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 28px; } .pet-contact-card, .pet-contact-info { border-radius: 28px; background: rgba(255,255,255,0.92); border: 1px solid rgba(51, 141, 241, 0.10); box-shadow: 0 18px 34px rgba(20, 56, 103, 0.06); } .pet-contact-card { padding: 30px; } .pet-contact-info { padding: 30px; background: linear-gradient(135deg, var(--pet-primary-dark) 0%, var(--pet-primary) 100%); color: #ffffff; box-shadow: 0 22px 42px rgba(20, 56, 103, 0.16); } .pet-contact-list { display: grid; gap: 18px; } .pet-contact-item { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; } .pet-contact-icon { width: 52px; height: 52px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: rgba(14, 101, 175, 0.10); color: #0e65af; font-size: 22px; font-weight: 800; } .pet-contact-info .pet-contact-icon { background: rgba(255,255,255,0.12); color: #ffffff; } .pet-contact-item h3, .pet-contact-info h3 { margin: 0 0 6px; font-size: 20px; line-height: 1.2; font-weight: 800; } .pet-contact-item h3 { color: #16345f; } .pet-contact-item p, .pet-contact-item a { margin: 0; font-size: 15px; line-height: 1.75; color: #60718a; text-decoration: none; } .pet-contact-info h3 { color: #ffffff; } .pet-contact-info p, .pet-contact-info a, .pet-contact-info li { color: rgba(255,255,255,0.84); font-size: 15px; line-height: 1.8; text-decoration: none; } .pet-contact-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; } .pet-contact-note { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.14); } /* ========================================================= 10. NEW FOOTER SECTION ========================================================= */ .pet-footer-section { position: relative; padding: 78px 0 28px; background: radial-gradient(circle at 20% 10%, rgba(51, 141, 241, 0.08) 0%, transparent 24%), linear-gradient(180deg, #18202d 0%, #111722 100%); color: rgba(255,255,255,0.75); } .pet-footer-container { width: 100%; max-width: var(--site-container); margin: 0 auto; padding: 0 var(--space-inline-desktop); box-sizing: border-box; } .pet-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 34px; } .pet-footer-brand img { max-width: 190px; height: auto; display: block; margin-bottom: 18px; } .pet-footer-brand p { max-width: 420px; margin: 0; font-size: 15px; line-height: 1.8; color: rgba(255,255,255,0.70); } .pet-footer-title { margin: 0 0 18px; font-size: 14px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #ffffff; } .pet-footer-links { list-style: none; margin: 0; padding: 0; } .pet-footer-links li + li { margin-top: 10px; } .pet-footer-links a { color: rgba(255,255,255,0.72); text-decoration: none; font-size: 15px; line-height: 1.6; transition: color 0.2s ease; } .pet-footer-links a:hover { color: #ffffff; } .pet-footer-bottom { padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.10); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .pet-footer-bottom p { margin: 0; font-size: 14px; color: rgba(255,255,255,0.62); } .pet-footer-badges { display: flex; flex-wrap: wrap; gap: 10px; } .pet-footer-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.82); font-size: 13px; font-weight: 700; } /* ========================================================= 11. SHOP MODULE ELEMENTS ========================================================= */ .sos-box { border: 1px solid #ddd; border-radius: 20px; background-color: #f9f9f9; padding: 15px; margin: 10px 0; overflow: hidden; } .attachment-separator { border: none; border-top: 1px solid #ddd; margin: 15px 0; } .product-attachments { background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 6px; padding: 15px; margin: 15px 0; } .product-attachments .attachment p { margin-bottom: 8px; } .product-attachments .attachment h4 { margin-top: 0; } .dynatag-sale-banner { display: block; width: 100%; background-color: #fdb900; color: #ffffff; padding: 14px 22px; margin: 0 0 15px 0; text-align: center; font-weight: 700; font-size: 16px; line-height: 1.4; border-radius: 20px; overflow: hidden; position: relative; border: none !important; } .dynatag-sale-banner:hover { transform: scale(1.01); transition: all 0.2s ease-in-out; } .dynatag-sale-banner1 { display: block; width: 50%; background-color: #fdb900; color: #0e65af; padding: 14px 22px; margin: 0 0 15px 0; text-align: center; font-weight: 700; font-size: 16px; line-height: 1.4; border-radius: 10px; overflow: hidden; position: relative; border: none !important; } .xyfreeshipping-progress-container { background: #E9EDF3 !important; color: #2B3244 !important; border-radius: 999px !important; height: 28px !important; line-height: 28px !important; font-size: 14px !important; } .xyfreeshipping-progress-container .xyfreeshipping-progress-bar { background: linear-gradient(90deg,#0E65AF,#2B3244) !important; border-radius: 999px !important; box-shadow: none !important; height: 28px !important; line-height: 28px !important; } .xyfreeshipping-progress-text { line-height: 28px !important; font-weight: 500 !important; } .xyfreeshipping-alert { background: #F4F7FB !important; border: 1px solid #E3E8F1 !important; border-radius: 14px !important; font-size: 14px !important; padding: 16px 20px !important; } /* ========================================================= 12. RESPONSIVE ========================================================= */ @media (max-width: 1399px) { .pet-header-inner { grid-template-columns: 220px 1fr auto; } .pet-header-actions { display: none; } } @media (max-width: 1199px) { .pet-productgroups-grid, .pet-options-grid, .pet-contact-grid { grid-template-columns: 1fr; } .pet-productgroup-card-featured { transform: none; } .pet-keyfacts-grid { grid-template-columns: repeat(2, 1fr); } .pet-problem-grid, .pet-solution-grid, .pet-steps-grid, .pet-benefits-grid, .pet-usecases-grid { grid-template-columns: 1fr; } .pet-header-inner { grid-template-columns: 1fr; justify-items: start; gap: 18px; padding: 18px 0; } .pet-header-nav { justify-content: flex-start; } .pet-header-utility { justify-self: start; } .pet-hero-grid { grid-template-columns: 1fr; gap: 36px; } .pet-footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 991px) { .pet-hero-container, .pet-keyfacts-container, .pet-problem-container, .pet-solution-container, .pet-compare-container, .pet-productgroups-container, .pet-options-container, .pet-steps-container, .pet-benefits-container, .pet-usecases-container, .pet-contact-container, .pet-footer-container, .pet-header-container, .pet-faq-container { padding-left: var(--space-inline-tablet); padding-right: var(--space-inline-tablet); } .pet-hero-visual-box, .pet-hero-placeholder { min-height: 460px; } .pet-productgroups-note { max-width: 100%; margin-top: 30px; padding: 0; } .pet-productgroups-note-grid { grid-template-columns: 1fr; } } @media (max-width: 767px) { .dt-section, .pet-keyfacts-section, .pet-problem-section, .pet-solution-section, .pet-productgroups-section, .pet-options-section, .pet-steps-section, .pet-benefits-section, .pet-usecases-section, .pet-faq-section, .pet-contact-section, .pet-compare-section { padding-top: 66px; padding-bottom: 66px; } .pet-hero-container, .pet-keyfacts-container, .pet-problem-container, .pet-solution-container, .pet-compare-container, .pet-productgroups-container, .pet-options-container, .pet-steps-container, .pet-benefits-container, .pet-usecases-container, .pet-contact-container, .pet-footer-container, .pet-header-container, .pet-faq-container { padding-left: var(--space-inline-mobile); padding-right: var(--space-inline-mobile); } .pet-header-inner { min-height: auto; } .pet-header-nav { gap: 14px 18px; } .pet-header-nav a, .pet-header-account, .pet-header-cart, .pet-header-link { font-size: 15px; } .pet-header-btn { min-height: 46px; padding: 0 18px; } .pet-hero-title { font-size: clamp(34px, 10vw, 48px); line-height: 1.06; } .pet-hero-subtitle, .pet-keyfacts-subtitle, .pet-solution-subtitle, .pet-compare-subtitle, .pet-options-subtitle, .pet-steps-subtitle, .pet-benefits-subtitle, .pet-usecases-subtitle, .pet-faq-subtitle, .pet-contact-subtitle { font-size: 16px; line-height: 1.7; } .pet-hero-point { width: 100%; } .pet-hero-buttons, .pet-contact-actions { flex-direction: column; } .pet-hero-btn, .pet-contact-actions .dt-btn { width: 100%; } .pet-hero-visual-box, .pet-hero-placeholder { min-height: 360px; border-radius: 24px; } .pet-hero-floating-card { min-width: 124px; padding: 14px 14px; border-radius: 14px; } .pet-keyfacts-grid { grid-template-columns: 1fr; gap: 18px; } .pet-keyfact-card, .pet-solution-card, .pet-usecase-card, .pet-option-card, .pet-step-card, .pet-benefit-card, .pet-contact-card, .pet-contact-info, .pet-problem-card, .pet-problem-highlight-inner, .pet-solution-bottom-box, .pet-compare-note-box, .pet-options-note-box, .pet-steps-bottom-box, .pet-benefits-highlight-box, .pet-usecases-bottom-box, .pet-faq-bottom-box { padding: 22px 20px; border-radius: 20px; } .pet-productgroup-image { min-height: 220px; padding: 18px; } .pet-productgroup-placeholder { min-height: 180px; font-size: 15px; } .pet-productgroup-content { padding: 22px 20px 24px; } .pet-productgroup-content h3, .pet-option-top h3 { font-size: 26px; } .pet-color-dot { width: 20px; height: 20px; } .pet-productgroups-note { margin-top: 24px; } .pet-productgroups-note-box { padding: 22px 18px 22px; border-radius: 20px; } .pet-productgroups-note-title { margin-bottom: 16px; font-size: 22px; } .pet-productgroups-note-card { padding: 16px 15px 15px; border-radius: 15px; } .pet-productgroups-note-card h4 { font-size: 16px; } .pet-footer-grid { grid-template-columns: 1fr; } .pet-footer-bottom { flex-direction: column; align-items: flex-start; } .pet-faq-question, .pet-faq-answer, .pet-faq-bottom-box { padding-left: 20px; padding-right: 20px; } .pet-faq-item, .pet-faq-bottom-box { border-radius: 20px; } .pet-faq-question h3 { font-size: 18px; } } /* ========================================================= TABLET LAYOUT OVERRIDE 3 Karten nebeneinander statt 1 Spalte ========================================================= */ @media (min-width: 768px) and (max-width: 1199px) { /* Allgemeine Container etwas kompakter */ .pet-keyfacts-container, .pet-problem-container, .pet-solution-container, .pet-compare-container, .pet-productgroups-container, .pet-options-container, .pet-steps-container, .pet-benefits-container, .pet-usecases-container, .pet-contact-container, .pet-faq-container { padding-left: 24px; padding-right: 24px; } /* Intro-Texte leicht kompakter */ .pet-keyfacts-title, .pet-problem-title, .pet-solution-title, .pet-compare-title, .pet-productgroups-title, .pet-options-title, .pet-steps-title, .pet-benefits-title, .pet-usecases-title, .pet-faq-title, .pet-contact-title { font-size: clamp(28px, 3.6vw, 40px); } .pet-keyfacts-subtitle, .pet-problem-subtitle, .pet-solution-subtitle, .pet-compare-subtitle, .pet-productgroups-subtitle, .pet-options-subtitle, .pet-steps-subtitle, .pet-benefits-subtitle, .pet-usecases-subtitle, .pet-faq-subtitle, .pet-contact-subtitle { font-size: 16px; line-height: 1.65; } /* WICHTIG: Grids auf 3 Spalten */ .pet-keyfacts-grid, .pet-problem-grid, .pet-solution-grid, .pet-options-grid, .pet-steps-grid, .pet-benefits-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px !important; } /* Usecases je nach Stil */ .pet-usecases-grid.pet-usecases-grid--simple, .pet-usecases-grid.pet-usecases-grid--minimal { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px !important; } /* Produktgruppen besser 3 oder 2? Wenn du sie auch auf Tablet 3-spaltig willst, aktiv lassen */ .pet-productgroups-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px !important; } /* Karten kompakter */ .pet-keyfact-card, .pet-problem-card, .pet-solution-card, .pet-option-card, .pet-step-card, .pet-benefit-card, .pet-usecase-card.pet-usecase-card--simple, .pet-usecase-tile, .pet-productgroup-card { padding: 22px 18px !important; border-radius: 20px !important; } /* Headlines in Cards etwas kleiner */ .pet-keyfact-card h3, .pet-problem-card h3, .pet-solution-card h3, .pet-option-card h3, .pet-step-card h3, .pet-benefit-card h3, .pet-productgroup-content h3 { font-size: 20px !important; line-height: 1.2 !important; min-height: auto !important; } .pet-keyfact-card p, .pet-problem-card p, .pet-solution-card p, .pet-option-card p, .pet-step-card p, .pet-benefit-card p, .pet-productgroup-text, .pet-usecase-card h3, .pet-usecase-tile h3 { font-size: 14px !important; line-height: 1.6 !important; } /* Produktgruppen Bildbereiche etwas kompakter */ .pet-productgroup-image { min-height: 210px !important; padding: 18px !important; } .pet-productgroup-placeholder { min-height: 170px !important; font-size: 14px !important; } /* Buttons etwas kompakter */ .pet-productgroup-btn, .pet-option-btn, .pet-promo-btn, .pet-hero-btn, .dt-btn { min-height: 46px !important; padding: 0 16px !important; font-size: 14px !important; } } /* ========================================================= 13. ADDITIONAL DYNATAG MODULES Aus custom (1).css integriert und bereinigt ========================================================= */ /* ========================================================= 6. DYNATAG BANNER MIT ICON ========================================================= */ .dynatag-banner-1, .dynatag-banner-2, .dynatag-banner-3, .dynatag-banner-4, .dynatag-banner-5, .dynatag-banner-6 { display: flex; align-items: center; justify-content: flex-start; padding: 10px 20px; margin-bottom: 30px; border-radius: 20px; font-weight: 700; overflow: hidden; position: relative; border: none !important; transition: all 0.2s ease-in-out; } .dynatag-banner-1 img, .dynatag-banner-2 img, .dynatag-banner-3 img, .dynatag-banner-4 img, .dynatag-banner-5 img, .dynatag-banner-6 img { display: block; margin-right: 12px; } .dynatag-banner-1:hover, .dynatag-banner-2:hover, .dynatag-banner-3:hover, .dynatag-banner-4:hover, .dynatag-banner-5:hover, .dynatag-banner-6:hover { transform: scale(1.01); } .dynatag-banner-1 { background-color: #0e65af; color: #ffffff; } .dynatag-banner-2 { background-color: #ff6b00; color: #ffffff; } .dynatag-banner-3 { background-color: #d90429; color: #ffffff; } .dynatag-banner-4 { background-color: #ffd60a; color: #1c1c1c; } .dynatag-banner-5 { background-color: #2e7d32; color: #ffffff; } .dynatag-banner-6 { background-color: #111111; color: #ffd60a; } /* ========================================================= 9. DYNATAG PDP TEMPLATES ========================================================= */ .dynatag-pdp-card { display: block; width: 100%; background: #ffffff; border: 1px solid #e6eef7; border-radius: 18px; padding: 18px; box-shadow: 0 8px 22px rgba(16, 24, 40, 0.08); overflow: hidden; position: relative; transition: all 0.15s ease-in-out; } .dynatag-pdp-card:hover { transform: translateY(-1px); } .dynatag-rating-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 0 0 14px 0; border-radius: 12px; background: #f6fbff; border: 1px solid #d9eaff; } .dynatag-rating-stars { font-size: 16px; line-height: 1; color: #f5a623; } .dynatag-rating-text { font-size: 14px; color: #0f172a; } .dynatag-rating-text span { color: #64748b; } .dynatag-pdp-title { margin: 0 0 8px 0; color: #0e65af; font-weight: 700; font-size: 16px; line-height: 1.3; } .dynatag-pdp-intro, .dynatag-intro-text { margin: 0 0 14px 0; color: #334155; line-height: 1.5; } .dynatag-benefits { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px 0; padding: 0; } .dynatag-benefit { display: flex; align-items: flex-start; gap: 10px; } .dynatag-benefit img { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 18px; } .dynatag-benefit div { color: #0f172a; line-height: 1.4; } .dynatag-highlight { display: block; padding: 12px; margin: 0 0 14px 0; border-radius: 14px; background: #fff7ed; border: 1px solid #fed7aa; color: #7c2d12; line-height: 1.4; } .dynatag-highlight-title { color: #0e65af; font-weight: 700; margin: 0 0 10px; } .dynatag-highlight-note { color: #0e65af; margin: 14px 0 0; } .dynatag-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 10px 0; } .dynatag-info-box { border: 1px solid #eef2f7; border-radius: 14px; padding: 12px; color: #475569; background: #ffffff; line-height: 1.4; } .dynatag-pdp-footer { margin: 10px 0 0 0; color: #0e65af; font-weight: 700; } .dynatag-benefit-list { list-style: none; padding: 0; margin: 0; } .dynatag-benefit-list li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; line-height: 1.5; } .dynatag-benefit-list li img { flex-shrink: 0; margin-top: 3px; } /* ========================================================= 10. SOS PDP HERO / PREIS / FEATURE-CARDS ========================================================= */ .sos-pdp-hero { padding: 10px 0 30px; } .sos-pdp-container { max-width: 980px; margin: 0 auto; } .sos-pdp-title { margin: 0 0 14px; font-family: "Inter Tight", sans-serif; font-size: 54px; line-height: 1.05; font-weight: 800; color: #082a59; letter-spacing: -0.02em; } .sos-pdp-subtitle { margin: 0 0 30px; max-width: 920px; font-family: "Inter", sans-serif; font-size: 18px; line-height: 1.55; font-weight: 400; color: #5c6f88; } .sos-pdp-subtitle strong { color: #0b1f3f; font-weight: 800; } .sos-price-box { display: flex; align-items: center; gap: 28px; background: #ffffff; border: 1px solid #e7eaf0; border-radius: 28px; padding: 26px 28px; margin-bottom: 30px; box-shadow: 0 4px 18px rgba(16, 24, 40, 0.04); } .sos-price-left { flex: 0 0 auto; } .sos-price { font-family: "Inter Tight", sans-serif; font-size: 64px; line-height: 1; font-weight: 800; color: #082a59; letter-spacing: -0.03em; } .sos-price-right { display: flex; flex-direction: column; gap: 6px; } .sos-vat { font-family: "Inter", sans-serif; font-size: 18px; line-height: 1.3; color: #7c8798; } .sos-shipping { font-family: "Inter", sans-serif; font-size: 18px; line-height: 1.4; font-weight: 700; color: #10b981; } .sos-pill { display: inline-flex; align-items: center; width: fit-content; padding: 8px 14px; border-radius: 12px; background: #e9e8ff; color: #4b46d1; font-family: "Inter", sans-serif; font-size: 16px; line-height: 1.2; font-weight: 700; } .sos-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .sos-feature-card { display: flex; align-items: center; gap: 18px; min-height: 124px; padding: 22px 20px; background: #ffffff; border: 1px solid #e7eaf0; border-radius: 24px; box-shadow: 0 4px 18px rgba(16, 24, 40, 0.03); } .sos-feature-icon { width: 56px; height: 56px; min-width: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #4b5d7a; } .sos-feature-icon svg { width: 28px; height: 28px; display: block; } .bg-blue { background: linear-gradient(180deg, #d9e6ff 0%, #c7dafc 100%); } .bg-green { background: linear-gradient(180deg, #d8f6e8 0%, #bff0d8 100%); } .bg-lilac { background: linear-gradient(180deg, #ece1ff 0%, #ddd0fa 100%); } .bg-yellow { background: linear-gradient(180deg, #f9ecb3 0%, #f4df86 100%); } .sos-feature-content h3 { margin: 0 0 4px; font-family: "Inter", sans-serif; font-size: 19px; line-height: 1.3; font-weight: 800; color: #0b1f3f; } .sos-feature-content p { margin: 0; font-family: "Inter", sans-serif; font-size: 18px; line-height: 1.45; font-weight: 400; color: #4f5f75; } /* ========================================================= 11. DYNATAG FEATURE GRID / KACHELN ========================================================= */ .dynatag-pdp-layout { --dynatag-gap: 14px; } .dynatag-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dynatag-gap); margin-top: var(--dynatag-gap); } .dynatag-feature-box { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; background: #ffffff; border: 1px solid #d9dee7; border-radius: 18px; padding: 14px 16px; box-sizing: border-box; min-height: 86px; } .dynatag-feature-icon { grid-column: 1; grid-row: 1 / span 2; width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: #e8f1ff; flex-shrink: 0; } .dynatag-feature-icon img { display: block; width: 22px; height: 22px; } .dynatag-feature-box h3, .dynatag-feature-box h4 { grid-column: 2; grid-row: 1; margin: 0 0 2px 0; font-family: "Inter", sans-serif; font-size: 14px; line-height: 1.2; font-weight: 700; color: #0f2947; } .dynatag-feature-box p { grid-column: 2; grid-row: 2; margin: 0; font-family: "Inter", sans-serif; font-size: 10px; line-height: 1.3; font-weight: 400; color: #667085; } /* Icon-Farben pro Kachel */ .dynatag-feature-box:nth-child(1) .dynatag-feature-icon { background: #dbeafe; } .dynatag-feature-box:nth-child(2) .dynatag-feature-icon { background: #c9f2dc; } .dynatag-feature-box:nth-child(3) .dynatag-feature-icon { background: #e9defa; } .dynatag-feature-box:nth-child(4) .dynatag-feature-icon { background: #f7e08a; } /* Breite Kachel */ .dynatag-feature-box--full { grid-column: 1 / -1; display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; background: #dfeafb; border: 1px solid #9fc1fa; border-radius: 18px; padding: 8px 16px; box-sizing: border-box; min-height: auto; } .dynatag-feature-box--full .dynatag-feature-icon { grid-column: 1; grid-row: 1 / span 2; width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: #cfe0fb; } .dynatag-feature-box--full .dynatag-feature-icon img { display: block; width: 22px; height: 22px; opacity: 1; } .dynatag-feature-box--full .dynatag-feature-content { grid-column: 2; display: contents; } .dynatag-feature-box--full .dynatag-feature-content h3, .dynatag-feature-box--full .dynatag-feature-content h4 { grid-column: 2; grid-row: 1; margin: 0 0 2px 0; font-family: "Inter", sans-serif; font-size: 14px; line-height: 1.2; font-weight: 700; color: #0f2947; } .dynatag-feature-box--full .dynatag-feature-content p { grid-column: 2; grid-row: 2; margin: 0; font-family: "Inter", sans-serif; font-size: 10px; line-height: 1.3; font-weight: 400; color: #667085; } /* ========================================================= 12. MOBILE MENUE (ETS MEGAMENU) ========================================================= */ @media (max-width: 767px) { .ets_mm_megamenu, .ets_mm_megamenu_container, .ets_mm_menu, #ets_mm_megamenu, .ets_mm_block { display: none !important; } .ets_mm_mobile_menu, .ets_mm_mobile_toggle, .ets_mm_mobile { display: block !important; } } /* ========================================================= 13. RESPONSIVE ========================================================= */ @media (max-width: 991px) { .sos-pdp-title { font-size: 44px; } .sos-pdp-subtitle { font-size: 18px; } .sos-price { font-size: 54px; } .sos-feature-content h3 { font-size: 18px; } .sos-feature-content p { font-size: 17px; } .dynatag-feature-grid { grid-template-columns: 1fr; } .dynatag-feature-box, .dynatag-feature-box--full { grid-template-columns: 48px 1fr; column-gap: 11px; padding: 12px 14px; } .dynatag-feature-icon, .dynatag-feature-box--full .dynatag-feature-icon { width: 48px; height: 48px; border-radius: 13px; } .dynatag-feature-icon img, .dynatag-feature-box--full .dynatag-feature-icon img { width: 20px; height: 20px; } .dynatag-feature-box h3, .dynatag-feature-box h4, .dynatag-feature-box--full .dynatag-feature-content h3, .dynatag-feature-box--full .dynatag-feature-content h4 { font-size: 13px; } .dynatag-feature-box p, .dynatag-feature-box--full .dynatag-feature-content p { font-size: 10px; } .dynatag-feature-box--full { grid-column: auto; } } @media (max-width: 767px) { .dynatag-info-grid { grid-template-columns: 1fr; } .sos-pdp-title { font-size: 34px; } .sos-pdp-subtitle { font-size: 16px; margin-bottom: 24px; } .sos-price-box { flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px 20px; border-radius: 22px; } .sos-price { font-size: 48px; } .sos-vat, .sos-shipping { font-size: 17px; } .sos-pill { font-size: 15px; } .sos-feature-grid { grid-template-columns: 1fr; gap: 14px; } .sos-feature-card { min-height: auto; padding: 18px 16px; border-radius: 20px; } .sos-feature-icon { width: 52px; height: 52px; min-width: 52px; border-radius: 14px; } .sos-feature-content h3 { font-size: 17px; } .sos-feature-content p { font-size: 16px; } .dynatag-feature-grid { gap: 10px; margin-top: 10px; } .dynatag-feature-box, .dynatag-feature-box--full { grid-template-columns: 44px 1fr; column-gap: 10px; padding: 10px 12px; border-radius: 16px; min-height: auto; } .dynatag-feature-icon, .dynatag-feature-box--full .dynatag-feature-icon { width: 44px; height: 44px; border-radius: 12px; } .dynatag-feature-icon img, .dynatag-feature-box--full .dynatag-feature-icon img { width: 18px; height: 18px; } .dynatag-feature-box h3, .dynatag-feature-box h4, .dynatag-feature-box--full .dynatag-feature-content h3, .dynatag-feature-box--full .dynatag-feature-content h4 { font-size: 12px; line-height: 1.2; } .dynatag-feature-box p, .dynatag-feature-box--full .dynatag-feature-content p { font-size: 9px; line-height: 1.25; } } /* ========================================================= HINWEIS ZUR KOMPAKTEN VARIANTE Die 'Kompakte Variante' aus custom (1).css wurde bewusst nicht aktiv integriert, weil sie viele Standardwerte global überschreibt. Bei Bedarf sollte sie als separate optionale Override-Datei oder als auskommentierter Block gepflegt werden. ========================================================= */ /* ========================================================= THEME-SPECIFIC LANDINGPAGE HELPERS Gleiche Typografie / gleiche Abstände / nur Farben wechseln ========================================================= */ .lp-theme-surface-soft { background: var(--pet-bg-soft) !important; } .lp-theme-surface-light { background: linear-gradient(180deg, #ffffff 0%, var(--pet-bg-soft-3) 100%) !important; } .lp-theme-surface-dark { background: linear-gradient(180deg, var(--pet-dark-1) 0%, var(--pet-dark-3) 100%) !important; } .lp-theme-card { background: rgba(255,255,255,0.92); border: 1px solid var(--pet-border); box-shadow: var(--shadow-soft); } .lp-theme-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: color-mix(in srgb, var(--pet-primary) 10%, white 90%); color: var(--pet-primary); border: 1px solid var(--pet-border); } .lp-theme-accent-text { color: var(--pet-accent) !important; } .lp-theme-primary-text { color: var(--pet-primary) !important; } .lp-theme-gradient-primary { background: linear-gradient(135deg, var(--pet-primary) 0%, var(--pet-primary-2) 100%) !important; color: #ffffff !important; } .lp-theme-gradient-dark { background: linear-gradient(135deg, var(--pet-primary-dark) 0%, var(--pet-primary) 100%) !important; color: #ffffff !important; } .lp-theme-border { border-color: var(--pet-border) !important; } /* ========================================================= FINAL OVERRIDE - PROBLEM SECTION / BADGES Korrigiert dunkle Alt-Styles und setzt den finalen hellen Look durch ========================================================= */ .pet-problem-section { padding: 104px 0; background: radial-gradient(circle at 14% 18%, rgba(51, 141, 241, 0.10) 0%, transparent 26%), radial-gradient(circle at 86% 20%, rgba(126, 166, 214, 0.14) 0%, transparent 24%), linear-gradient(180deg, #e7eff9 0%, #d9e5f2 100%) !important; } .pet-problem-section .section-label, .pet-problem-section .section-label-light, .pet-problem-section .pet-problem-eyebrow { color: #ff9f86 !important; } .pet-problem-section .section-title, .pet-problem-section .pet-problem-title, .pet-problem-section h2, .pet-problem-section .animate, .pet-problem-section .section-title.animate { color: #16345f !important; } .pet-problem-section .section-subtitle, .pet-problem-section .pet-problem-subtitle, .pet-problem-section .pet-problem-intro p, .pet-problem-section .section-subtitle.animate { color: #5b7190 !important; } .pet-problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 30px; } .pet-problem-card { padding: 28px 24px; border-radius: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 251, 255, 0.94) 100%) !important; border: 1px solid rgba(20, 56, 103, 0.08) !important; box-shadow: 0 18px 36px rgba(20, 56, 103, 0.08), 0 4px 12px rgba(20, 56, 103, 0.04) !important; transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } .pet-problem-card:hover { transform: translateY(-6px); border-color: rgba(51, 141, 241, 0.16) !important; box-shadow: 0 24px 44px rgba(20, 56, 103, 0.12), 0 8px 18px rgba(20, 56, 103, 0.06) !important; } .pet-problem-card--premium { border-color: rgba(163, 185, 29, 0.14) !important; box-shadow: 0 18px 36px rgba(20, 56, 103, 0.09), 0 0 18px rgba(163, 185, 29, 0.04) !important; } .pet-problem-card--premium:hover { box-shadow: 0 24px 44px rgba(20, 56, 103, 0.13), 0 0 24px rgba(163, 185, 29, 0.08) !important; } .pet-problem-icon, .pet-problem-icon-badge, .pet-problem-badge, .pet-problem-badge--default { width: 66px; height: 66px; margin-bottom: 18px; border-radius: 19px; display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative; overflow: hidden; box-sizing: border-box; background: linear-gradient(180deg, #edf4ff 0%, #dfeaff 100%) !important; color: #2a5f9f !important; border: 1px solid rgba(51, 141, 241, 0.10) !important; box-shadow: 0 10px 24px rgba(20, 56, 103, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important; } .pet-problem-icon span, .pet-problem-icon strong, .pet-problem-icon-badge span, .pet-problem-icon-badge strong, .pet-problem-badge span, .pet-problem-badge strong, .pet-problem-badge--default span, .pet-problem-badge--default strong, .pet-problem-card .pet-problem-icon, .pet-problem-card .pet-problem-icon *, .pet-problem-card .pet-problem-icon-badge, .pet-problem-card .pet-problem-icon-badge *, .pet-problem-card .pet-problem-badge, .pet-problem-card .pet-problem-badge *, .pet-problem-card .pet-problem-badge--default, .pet-problem-card .pet-problem-badge--default * { color: #2a5f9f !important; } .pet-problem-badge span, .pet-problem-badge--default span, .pet-problem-badge--premium span, .pet-problem-badge--accent span { display: inline-block; width: auto; margin: 0; padding: 0; font-size: 12px; line-height: 1; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; } .pet-problem-card--premium .pet-problem-icon, .pet-problem-card--premium .pet-problem-icon-badge, .pet-problem-badge--premium, .pet-problem-badge--accent { background: linear-gradient(180deg, #f6f8df 0%, #eef4c8 100%) !important; color: #a3b91d !important; border: 1px solid rgba(163, 185, 29, 0.14) !important; box-shadow: 0 10px 24px rgba(20, 56, 103, 0.06), 0 0 14px rgba(163, 185, 29, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important; } .pet-problem-card--premium .pet-problem-icon *, .pet-problem-card--premium .pet-problem-icon-badge *, .pet-problem-badge--premium *, .pet-problem-badge--accent * { color: #a3b91d !important; } .pet-problem-card h3 { min-height: 72px; margin: 0 0 12px; font-size: 22px; line-height: 1.2; font-weight: 750; color: #16345f !important; } .pet-problem-card p, .pet-problem-section p { color: #5b7190 !important; } .pet-problem-card p { margin: 0; font-size: 16px; line-height: 1.75; } .pet-problem-highlight, .pet-solution-bottom, .pet-compare-note, .pet-options-note, .pet-steps-bottom, .pet-benefits-highlight, .pet-usecases-bottom { max-width: 920px; margin: 0 auto; } .pet-problem-highlight-inner, .pet-steps-bottom-box, .pet-benefits-highlight-box { padding: 24px 28px; border-radius: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(245, 249, 255, 0.92) 100%) !important; border: 1px solid rgba(20, 56, 103, 0.08) !important; text-align: center; box-shadow: 0 16px 34px rgba(20, 56, 103, 0.07), 0 4px 10px rgba(20, 56, 103, 0.04) !important; } .pet-problem-highlight-label, .pet-steps-bottom-label, .pet-benefits-highlight-label { display: inline-block; margin-bottom: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #338df1 !important; } .pet-problem-highlight-inner p, .pet-steps-bottom-box p, .pet-benefits-highlight-box p { margin: 0; font-size: 17px; line-height: 1.8; color: #456180 !important; } .pet-problem-section h3, .pet-problem-section h4 { color: #16345f !important; } @media (max-width: 991px) { .pet-problem-section { padding: 88px 0; } .pet-problem-grid { grid-template-columns: 1fr; gap: 20px; } .pet-problem-card { padding: 24px 22px; } .pet-problem-card h3 { font-size: 20px; min-height: 0; } .pet-problem-card p { font-size: 15px; line-height: 1.7; } .pet-problem-highlight-inner, .pet-steps-bottom-box, .pet-benefits-highlight-box { padding: 22px 22px; } } @media (max-width: 767px) { .pet-problem-section { padding: 72px 0; } .pet-problem-icon, .pet-problem-icon-badge, .pet-problem-badge, .pet-problem-badge--default, .pet-problem-badge--premium, .pet-problem-badge--accent { width: 52px; height: 52px; border-radius: 16px; margin-bottom: 16px; } .pet-problem-badge span, .pet-problem-badge--default span, .pet-problem-badge--premium span, .pet-problem-badge--accent span { font-size: 11px; } .pet-problem-card { border-radius: 22px; } .pet-problem-highlight-inner, .pet-steps-bottom-box, .pet-benefits-highlight-box { border-radius: 22px; padding: 20px 18px; } .pet-problem-highlight-inner p, .pet-steps-bottom-box p, .pet-benefits-highlight-box p { font-size: 16px; line-height: 1.7; } } /* ========================================================= 14. FINAL OPTIMIZATION PATCH Conservative overrides to preserve shop rules - Keeps current shop / product-page CSS intact - Harmonises solution badges - Fixes accent badge contrast to match lighter reference look ========================================================= */ /* Solution badges: cleaner, lighter, less button-like */ .pet-solution-badge { box-shadow: 0 6px 14px rgba(20, 56, 103, 0.04), inset 0 1px 0 rgba(255,255,255,0.95); } /* Accent badge: soft outline / light glow style */ .pet-solution-badge--accent { background: linear-gradient(180deg, #f7faef 0%, #eef4dc 100%) !important; border: 1px solid rgba(170, 190, 110, 0.42) !important; box-shadow: none !important; } .pet-solution-badge--accent span { color: #70852b !important; font-weight: 700; letter-spacing: 0.06em; } /* Slightly softer accent card to fit the lighter badge */ .pet-solution-card--accent { border-color: rgba(170, 190, 110, 0.14) !important; box-shadow: 0 14px 30px rgba(20, 56, 103, 0.05), 0 0 16px rgba(193, 255, 104, 0.04) !important; } .pet-solution-card--accent:hover { box-shadow: 0 22px 40px rgba(20, 56, 103, 0.10), 0 0 20px rgba(193, 255, 104, 0.06) !important; } /* ========================================================= FOLLOW-UP FIXES - Lighter accent badge in solution section - Restore green luggage hero background ========================================================= */ /* Solution accent badge: softer and airier */ .pet-solution-badge--accent { background: linear-gradient(180deg, #fafcf2 0%, #f1f6df 100%) !important; border: 1px solid rgba(170, 190, 110, 0.34) !important; box-shadow: 0 3px 10px rgba(150, 175, 85, 0.08), inset 0 1px 0 rgba(255,255,255,0.82) !important; } .pet-solution-badge--accent span { color: #769032 !important; font-weight: 700; letter-spacing: 0.06em; } /* Luggage hero: restore travel green background */ .dt-theme--luggage.pet-hero-section, body.theme-luggage .pet-hero-section { background: radial-gradient(circle at 12% 18%, rgba(242, 166, 90, 0.14) 0%, transparent 30%), radial-gradient(circle at 88% 22%, rgba(73, 163, 154, 0.16) 0%, transparent 34%), linear-gradient(180deg, #f7fcf9 0%, #eef8f4 100%) !important; } .dt-theme--luggage .pet-hero-eyebrow, body.theme-luggage .pet-hero-eyebrow { color: #f2a65a !important; } .dt-theme--luggage .pet-hero-title, body.theme-luggage .pet-hero-title { color: #12352f !important; } .dt-theme--luggage .pet-hero-subtitle, body.theme-luggage .pet-hero-subtitle { color: #55766e !important; } .dt-theme--luggage .pet-hero-point, body.theme-luggage .pet-hero-point { background: rgba(255, 255, 255, 0.82) !important; border: 1px solid rgba(0, 105, 92, 0.12) !important; color: #355951 !important; box-shadow: 0 10px 24px rgba(18, 53, 47, 0.05) !important; } .dt-theme--luggage .pet-hero-point-icon, body.theme-luggage .pet-hero-point-icon { background: rgba(73, 163, 154, 0.12) !important; color: #00695c !important; } .dt-theme--luggage .pet-hero-btn-primary, body.theme-luggage .pet-hero-btn-primary { background: linear-gradient(135deg, #00695c 0%, #26a69a 100%) !important; color: #ffffff !important; box-shadow: 0 14px 34px rgba(73, 163, 154, 0.26) !important; } .dt-theme--luggage .pet-hero-btn-primary:hover, body.theme-luggage .pet-hero-btn-primary:hover { box-shadow: 0 18px 38px rgba(73, 163, 154, 0.34) !important; } .dt-theme--luggage .pet-hero-btn-secondary, body.theme-luggage .pet-hero-btn-secondary { background: rgba(255, 255, 255, 0.96) !important; color: #12352f !important; border: 1.5px solid rgba(0, 105, 92, 0.38) !important; box-shadow: 0 10px 24px rgba(18, 53, 47, 0.06) !important; } .dt-theme--luggage .pet-hero-btn-secondary:hover, body.theme-luggage .pet-hero-btn-secondary:hover { background: #f2faf8 !important; border-color: #00695c !important; } .dt-theme--luggage .pet-hero-visual-box, body.theme-luggage .pet-hero-visual-box { background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.94) 100%) !important; border: 1px solid rgba(0, 105, 92, 0.12) !important; box-shadow: 0 30px 60px rgba(18, 53, 47, 0.10) !important; } .dt-theme--luggage .pet-hero-floating-card, body.theme-luggage .pet-hero-floating-card { background: rgba(255, 255, 255, 0.94) !important; border: 1px solid rgba(0, 105, 92, 0.12) !important; box-shadow: 0 18px 32px rgba(18, 53, 47, 0.08) !important; } .dt-theme--luggage .pet-hero-floating-card strong, body.theme-luggage .pet-hero-floating-card strong { color: #12352f !important; } .dt-theme--luggage .pet-hero-floating-card span, body.theme-luggage .pet-hero-floating-card span { color: #55766e !important; } /* ========================================================= 15. LANDINGPAGE THEME LAYER V3 Conservative layer on top of latest file - Keeps shop / product-page rules intact - Pet remains default - Luggage sections can be themed per section with .dt-theme--luggage - Accent badges are lighter / cleaner ========================================================= */ /* --------------------------------- SOLUTION ACCENT BADGE – LIGHTER --------------------------------- */ .pet-solution-badge--accent { background: linear-gradient(180deg, #fcfdf6 0%, #f4f8e9 100%) !important; border: 1px solid rgba(170, 190, 110, 0.26) !important; box-shadow: 0 2px 8px rgba(150, 175, 85, 0.06), inset 0 1px 0 rgba(255,255,255,0.88) !important; } .pet-solution-badge--accent span { color: #7b9438 !important; font-weight: 700; letter-spacing: 0.06em; } .pet-solution-card--accent { border-color: rgba(170, 190, 110, 0.12) !important; box-shadow: 0 14px 30px rgba(20, 56, 103, 0.05), 0 0 12px rgba(193, 255, 104, 0.03) !important; } .pet-solution-card--accent:hover { box-shadow: 0 22px 40px rgba(20, 56, 103, 0.10), 0 0 16px rgba(193, 255, 104, 0.05) !important; } /* --------------------------------- LUGGAGE THEME – HERO Apply by adding .dt-theme--luggage on the section --------------------------------- */ .pet-hero-section.dt-theme--luggage, .dt-theme--luggage.pet-hero-section, body.theme-luggage .pet-hero-section { background: radial-gradient(circle at 12% 18%, rgba(242, 166, 90, 0.14) 0%, transparent 30%), radial-gradient(circle at 88% 22%, rgba(73, 163, 154, 0.16) 0%, transparent 34%), linear-gradient(180deg, #f7fcf9 0%, #eef8f4 100%) !important; } .pet-hero-section.dt-theme--luggage .pet-hero-eyebrow, .dt-theme--luggage .pet-hero-eyebrow, body.theme-luggage .pet-hero-eyebrow { color: #f2a65a !important; } .pet-hero-section.dt-theme--luggage .pet-hero-title, .dt-theme--luggage .pet-hero-title, body.theme-luggage .pet-hero-title { color: #12352f !important; } .pet-hero-section.dt-theme--luggage .pet-hero-subtitle, .dt-theme--luggage .pet-hero-subtitle, body.theme-luggage .pet-hero-subtitle { color: #55766e !important; } .pet-hero-section.dt-theme--luggage .pet-hero-point, .dt-theme--luggage .pet-hero-point, body.theme-luggage .pet-hero-point { background: rgba(255, 255, 255, 0.82) !important; border: 1px solid rgba(0, 105, 92, 0.12) !important; color: #355951 !important; box-shadow: 0 10px 24px rgba(18, 53, 47, 0.05) !important; } .pet-hero-section.dt-theme--luggage .pet-hero-point-icon, .dt-theme--luggage .pet-hero-point-icon, body.theme-luggage .pet-hero-point-icon { background: rgba(73, 163, 154, 0.12) !important; color: #00695c !important; } .pet-hero-section.dt-theme--luggage .pet-hero-btn-primary, .dt-theme--luggage .pet-hero-btn-primary, body.theme-luggage .pet-hero-btn-primary { background: linear-gradient(135deg, #00695c 0%, #26a69a 100%) !important; color: #ffffff !important; box-shadow: 0 14px 34px rgba(73, 163, 154, 0.26) !important; } .pet-hero-section.dt-theme--luggage .pet-hero-btn-primary:hover, .dt-theme--luggage .pet-hero-btn-primary:hover, body.theme-luggage .pet-hero-btn-primary:hover { box-shadow: 0 18px 38px rgba(73, 163, 154, 0.34) !important; } .pet-hero-section.dt-theme--luggage .pet-hero-btn-secondary, .dt-theme--luggage .pet-hero-btn-secondary, body.theme-luggage .pet-hero-btn-secondary { background: rgba(255, 255, 255, 0.96) !important; color: #12352f !important; border: 1.5px solid rgba(0, 105, 92, 0.38) !important; box-shadow: 0 10px 24px rgba(18, 53, 47, 0.06) !important; } .pet-hero-section.dt-theme--luggage .pet-hero-btn-secondary:hover, .dt-theme--luggage .pet-hero-btn-secondary:hover, body.theme-luggage .pet-hero-btn-secondary:hover { background: #f2faf8 !important; border-color: #00695c !important; } .pet-hero-section.dt-theme--luggage .pet-hero-visual-box, .dt-theme--luggage .pet-hero-visual-box, body.theme-luggage .pet-hero-visual-box { background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.94) 100%) !important; border: 1px solid rgba(0, 105, 92, 0.12) !important; box-shadow: 0 30px 60px rgba(18, 53, 47, 0.10) !important; } .pet-hero-section.dt-theme--luggage .pet-hero-floating-card, .dt-theme--luggage .pet-hero-floating-card, body.theme-luggage .pet-hero-floating-card { background: rgba(255, 255, 255, 0.94) !important; border: 1px solid rgba(0, 105, 92, 0.12) !important; box-shadow: 0 18px 32px rgba(18, 53, 47, 0.08) !important; } .pet-hero-section.dt-theme--luggage .pet-hero-floating-card strong, .dt-theme--luggage .pet-hero-floating-card strong, body.theme-luggage .pet-hero-floating-card strong { color: #12352f !important; } .pet-hero-section.dt-theme--luggage .pet-hero-floating-card span, .dt-theme--luggage .pet-hero-floating-card span, body.theme-luggage .pet-hero-floating-card span { color: #55766e !important; } /* --------------------------------- LUGGAGE THEME – KEYFACTS --------------------------------- */ .pet-keyfacts-section.dt-theme--luggage, .dt-theme--luggage.pet-keyfacts-section, body.theme-luggage .pet-keyfacts-section { background: radial-gradient(circle at 12% 18%, rgba(200, 230, 120, 0.14) 0%, transparent 30%), radial-gradient(circle at 88% 22%, rgba(38, 166, 154, 0.12) 0%, transparent 34%), linear-gradient(180deg, #f7fcfb 0%, #eef8f4 100%) !important; } .pet-keyfacts-section.dt-theme--luggage .pet-keyfacts-eyebrow, .dt-theme--luggage .pet-keyfacts-eyebrow, body.theme-luggage .pet-keyfacts-eyebrow { color: #f2a65a !important; } .pet-keyfacts-section.dt-theme--luggage .pet-keyfacts-title, .dt-theme--luggage .pet-keyfacts-title, body.theme-luggage .pet-keyfacts-title { color: #12352f !important; } .pet-keyfacts-section.dt-theme--luggage .pet-keyfacts-subtitle, .dt-theme--luggage .pet-keyfacts-subtitle, body.theme-luggage .pet-keyfacts-subtitle { color: #55766e !important; } .pet-keyfacts-section.dt-theme--luggage .pet-keyfact-card, .dt-theme--luggage .pet-keyfact-card, body.theme-luggage .pet-keyfact-card { background: rgba(255,255,255,0.94) !important; border: 1px solid rgba(0, 105, 92, 0.12) !important; box-shadow: 0 18px 36px rgba(18, 53, 47, 0.06) !important; } .pet-keyfacts-section.dt-theme--luggage .pet-keyfact-card:hover, .dt-theme--luggage .pet-keyfact-card:hover, body.theme-luggage .pet-keyfact-card:hover { border-color: rgba(0, 105, 92, 0.20) !important; box-shadow: 0 22px 40px rgba(18, 53, 47, 0.10) !important; } .pet-keyfacts-section.dt-theme--luggage .pet-keyfact-card h3, .dt-theme--luggage .pet-keyfact-card h3, body.theme-luggage .pet-keyfact-card h3 { color: #12352f !important; } .pet-keyfacts-section.dt-theme--luggage .pet-keyfact-card p, .dt-theme--luggage .pet-keyfact-card p, body.theme-luggage .pet-keyfact-card p { color: #55766e !important; } .pet-keyfacts-section.dt-theme--luggage .pet-keyfact-icon-badge, .dt-theme--luggage .pet-keyfact-icon-badge, body.theme-luggage .pet-keyfact-icon-badge { border-color: rgba(0, 105, 92, 0.12) !important; box-shadow: 0 10px 24px rgba(18, 53, 47, 0.05), inset 0 1px 0 rgba(255,255,255,0.95) !important; } .pet-keyfacts-section.dt-theme--luggage .pet-keyfact-icon-badge span, .dt-theme--luggage .pet-keyfact-icon-badge span, body.theme-luggage .pet-keyfact-icon-badge span { color: #12352f !important; } .pet-keyfacts-section.dt-theme--luggage .pet-keyfact-icon-badge--pet, .dt-theme--luggage .pet-keyfact-icon-badge--pet, body.theme-luggage .pet-keyfact-icon-badge--pet { background: linear-gradient(180deg, #f7fcf6 0%, #eff8ed 100%) !important; border-color: rgba(102, 187, 106, 0.18) !important; } .pet-keyfacts-section.dt-theme--luggage .pet-keyfact-icon-badge--material, .dt-theme--luggage .pet-keyfact-icon-badge--material, body.theme-luggage .pet-keyfact-icon-badge--material { background: linear-gradient(180deg, #f1faf8 0%, #e8f5f2 100%) !important; border-color: rgba(38, 166, 154, 0.18) !important; } .pet-keyfacts-section.dt-theme--luggage .pet-keyfact-icon-badge--smart, .dt-theme--luggage .pet-keyfact-icon-badge--smart, body.theme-luggage .pet-keyfact-icon-badge--smart { background: linear-gradient(180deg, #f5fbf8 0%, #eef7f3 100%) !important; border-color: rgba(0, 105, 92, 0.16) !important; } .pet-keyfacts-section.dt-theme--luggage .pet-keyfact-icon-badge--premium, .dt-theme--luggage .pet-keyfact-icon-badge--premium, body.theme-luggage .pet-keyfact-icon-badge--premium { background: linear-gradient(180deg, #fdfaf1 0%, #f7f0d8 100%) !important; border-color: rgba(242, 166, 90, 0.24) !important; box-shadow: 0 10px 24px rgba(18, 53, 47, 0.05), inset 0 1px 0 rgba(255,255,255,0.95) !important; } .pet-keyfacts-section.dt-theme--luggage .pet-keyfact-icon-badge--premium span, .dt-theme--luggage .pet-keyfact-icon-badge--premium span, body.theme-luggage .pet-keyfact-icon-badge--premium span { color: #9b6a18 !important; } /* --------------------------------- Generic helper for future section theming --------------------------------- */ .pet-compare-section.dt-theme--luggage, .pet-options-section.dt-theme--luggage, .pet-usecases-section.dt-theme--luggage, .pet-faq-section.dt-theme--luggage { color: #12352f; } /* ========================================================= 16. KEYCHAIN THEME LAYER Added only for Keychain landingpage preparation - Keeps all existing rules intact - Activate per section with .dt-theme--keychain ========================================================= */ /* Base theme tokens */ body.theme-keychain, .dt-theme--keychain { --dt-theme-primary: #2f5f8f; --dt-theme-primary-2: #4d7cad; --dt-theme-primary-dark: #1f3d5c; --dt-theme-accent: #f0a44b; --dt-theme-accent-soft: #f8d9b0; --dt-theme-mint: #6fa5a0; --dt-theme-glow: #d9e88f; --dt-theme-text: #18324a; --dt-theme-text-soft: #3f566c; --dt-theme-text-muted: #607487; --dt-theme-text-light: #7a8d9c; --dt-theme-bg-white: #ffffff; --dt-theme-bg-soft: #f8fbfd; --dt-theme-bg-soft-2: #f3f8fb; --dt-theme-bg-soft-3: #f9fbfc; --dt-theme-bg-soft-4: #eaf2f7; --dt-theme-border: rgba(47, 95, 143, 0.12); --dt-theme-border-strong: rgba(47, 95, 143, 0.20); --dt-theme-dark-1: #223447; --dt-theme-dark-2: #1a2a3a; --dt-theme-dark-3: #14212e; --dt-theme-dark-4: #0f1822; } /* Hero */ .pet-hero-section.dt-theme--keychain, .dt-theme--keychain.pet-hero-section, body.theme-keychain .pet-hero-section { background: radial-gradient(circle at 12% 18%, rgba(240, 164, 75, 0.14) 0%, transparent 30%), radial-gradient(circle at 88% 22%, rgba(77, 124, 173, 0.16) 0%, transparent 34%), linear-gradient(180deg, #fbfcfe 0%, #f2f7fb 100%) !important; } .pet-hero-section.dt-theme--keychain .pet-hero-eyebrow, .dt-theme--keychain .pet-hero-eyebrow, body.theme-keychain .pet-hero-eyebrow { color: #f0a44b !important; } .pet-hero-section.dt-theme--keychain .pet-hero-title, .dt-theme--keychain .pet-hero-title, body.theme-keychain .pet-hero-title { color: #18324a !important; } .pet-hero-section.dt-theme--keychain .pet-hero-subtitle, .dt-theme--keychain .pet-hero-subtitle, body.theme-keychain .pet-hero-subtitle { color: #607487 !important; } .pet-hero-section.dt-theme--keychain .pet-hero-point, .dt-theme--keychain .pet-hero-point, body.theme-keychain .pet-hero-point { background: rgba(255,255,255,0.84) !important; border: 1px solid rgba(47, 95, 143, 0.12) !important; color: #3f566c !important; box-shadow: 0 10px 24px rgba(24, 50, 74, 0.05) !important; } .pet-hero-section.dt-theme--keychain .pet-hero-point-icon, .dt-theme--keychain .pet-hero-point-icon, body.theme-keychain .pet-hero-point-icon { background: rgba(77, 124, 173, 0.12) !important; color: #2f5f8f !important; } .pet-hero-section.dt-theme--keychain .pet-hero-btn-primary, .dt-theme--keychain .pet-hero-btn-primary, body.theme-keychain .pet-hero-btn-primary { background: linear-gradient(135deg, #2f5f8f 0%, #4d7cad 100%) !important; color: #ffffff !important; box-shadow: 0 14px 34px rgba(77, 124, 173, 0.24) !important; } .pet-hero-section.dt-theme--keychain .pet-hero-btn-secondary, .dt-theme--keychain .pet-hero-btn-secondary, body.theme-keychain .pet-hero-btn-secondary { background: rgba(255,255,255,0.96) !important; color: #18324a !important; border: 1.5px solid rgba(47, 95, 143, 0.38) !important; box-shadow: 0 10px 24px rgba(24, 50, 74, 0.06) !important; } .pet-hero-section.dt-theme--keychain .pet-hero-visual-box, .dt-theme--keychain .pet-hero-visual-box, body.theme-keychain .pet-hero-visual-box { background: linear-gradient(180deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.94) 100%) !important; border: 1px solid rgba(47, 95, 143, 0.12) !important; box-shadow: 0 30px 60px rgba(24, 50, 74, 0.10) !important; } .pet-hero-section.dt-theme--keychain .pet-hero-floating-card, .dt-theme--keychain .pet-hero-floating-card, body.theme-keychain .pet-hero-floating-card { background: rgba(255,255,255,0.94) !important; border: 1px solid rgba(47, 95, 143, 0.12) !important; box-shadow: 0 18px 32px rgba(24, 50, 74, 0.08) !important; } .pet-hero-section.dt-theme--keychain .pet-hero-floating-card strong, .dt-theme--keychain .pet-hero-floating-card strong, body.theme-keychain .pet-hero-floating-card strong { color: #18324a !important; } .pet-hero-section.dt-theme--keychain .pet-hero-floating-card span, .dt-theme--keychain .pet-hero-floating-card span, body.theme-keychain .pet-hero-floating-card span { color: #607487 !important; } /* Light info sections */ .pet-keyfacts-section.dt-theme--keychain, .dt-theme--keychain.pet-keyfacts-section, body.theme-keychain .pet-keyfacts-section { background: radial-gradient(circle at 12% 18%, rgba(240, 164, 75, 0.08) 0%, transparent 28%), radial-gradient(circle at 88% 22%, rgba(77, 124, 173, 0.10) 0%, transparent 30%), linear-gradient(180deg, #fbfcfe 0%, #f3f8fb 100%) !important; } .pet-problem-section.dt-theme--keychain, .dt-theme--keychain.pet-problem-section, body.theme-keychain .pet-problem-section { background: radial-gradient(circle at 14% 18%, rgba(77, 124, 173, 0.10) 0%, transparent 26%), radial-gradient(circle at 86% 20%, rgba(240, 164, 75, 0.08) 0%, transparent 24%), linear-gradient(180deg, #eef4f8 0%, #e4edf4 100%) !important; } .pet-solution-section.dt-theme--keychain, .dt-theme--keychain.pet-solution-section, body.theme-keychain .pet-solution-section, .pet-options-section.dt-theme--keychain, .dt-theme--keychain.pet-options-section, body.theme-keychain .pet-options-section, .pet-usecases-section.dt-theme--keychain, .dt-theme--keychain.pet-usecases-section, body.theme-keychain .pet-usecases-section, .pet-contact-section.dt-theme--keychain, .dt-theme--keychain.pet-contact-section, body.theme-keychain .pet-contact-section { background: linear-gradient(180deg, #ffffff 0%, #f5f9fc 100%) !important; } .pet-compare-section.dt-theme--keychain, .dt-theme--keychain.pet-compare-section, body.theme-keychain .pet-compare-section, .pet-faq-section.dt-theme--keychain, .dt-theme--keychain.pet-faq-section, body.theme-keychain .pet-faq-section { background: radial-gradient(circle at 16% 18%, rgba(240, 164, 75, 0.07) 0%, transparent 24%), linear-gradient(180deg, #fafcfd 0%, #f1f6fa 100%) !important; } .pet-productgroups-section.dt-theme--keychain, .dt-theme--keychain.pet-productgroups-section, body.theme-keychain .pet-productgroups-section, .pet-promo-section.dt-theme--keychain, .dt-theme--keychain.pet-promo-section, body.theme-keychain .pet-promo-section { background: radial-gradient(circle at 18% 18%, rgba(77, 124, 173, 0.08) 0%, transparent 24%), radial-gradient(circle at 82% 22%, rgba(240, 164, 75, 0.08) 0%, transparent 24%), linear-gradient(180deg, #ffffff 0%, #f4f9fc 100%) !important; } .pet-steps-section.dt-theme--keychain, .dt-theme--keychain.pet-steps-section, body.theme-keychain .pet-steps-section { background: radial-gradient(circle at 16% 18%, rgba(77, 124, 173, 0.10) 0%, transparent 26%), radial-gradient(circle at 84% 20%, rgba(240, 164, 75, 0.08) 0%, transparent 24%), linear-gradient(180deg, #f4f8fb 0%, #eaf1f6 100%) !important; } .pet-benefits-section.dt-theme--keychain, .dt-theme--keychain.pet-benefits-section, body.theme-keychain .pet-benefits-section { background: radial-gradient(circle at 15% 20%, rgba(240, 164, 75, 0.10) 0%, transparent 24%), radial-gradient(circle at 85% 18%, rgba(111, 165, 160, 0.10) 0%, transparent 22%), linear-gradient(180deg, #32485f 0%, #26394e 100%) !important; } /* Warm/clean note boxes */ .pet-compare-section.dt-theme--keychain .pet-compare-note-box, .dt-theme--keychain .pet-compare-note-box, body.theme-keychain .pet-compare-note-box, .pet-options-section.dt-theme--keychain .pet-options-note-box, .dt-theme--keychain .pet-options-note-box, body.theme-keychain .pet-options-note-box, .pet-usecases-section.dt-theme--keychain .pet-usecases-bottom-box, .dt-theme--keychain .pet-usecases-bottom-box, body.theme-keychain .pet-usecases-bottom-box, .pet-faq-section.dt-theme--keychain .pet-faq-bottom-box, .dt-theme--keychain .pet-faq-bottom-box, body.theme-keychain .pet-faq-bottom-box, .pet-productgroups-section.dt-theme--keychain .pet-productgroups-note-box, .dt-theme--keychain .pet-productgroups-note-box, body.theme-keychain .pet-productgroups-note-box { background: linear-gradient(135deg, #eef4f8 0%, #faf4ea 100%) !important; } .pet-steps-section.dt-theme--keychain .pet-steps-bottom-box, .dt-theme--keychain .pet-steps-bottom-box, body.theme-keychain .pet-steps-bottom-box { background: linear-gradient(180deg, rgba(255,255,255,0.90) 0%, rgba(242,246,249,0.96) 100%) !important; } /* ========================================================= 99. FINAL LANDINGPAGE OVERRIDES Stand: 2026-04-24 Fokus: - Landingpages konsolidieren - bestehende Shop-/Produkt-/Checkout-Regeln nicht veraendern - doppelte/alte Landingpage-Styles per Cascade sauber uebersteuern ========================================================= */ /* ---------- Landingpage Basis ---------- */ .dt-section, .pet-hero-section, .pet-keyfacts-section, .pet-problem-section, .pet-solution-section, .pet-compare-section, .pet-options-section, .pet-productgroups-section, .pet-steps-section, .pet-benefits-section, .pet-usecases-section, .pet-contact-section { box-sizing: border-box; } .pet-hero-container, .pet-keyfacts-container, .pet-problem-container, .pet-solution-container, .pet-compare-container, .pet-options-container, .pet-productgroups-container, .pet-steps-container, .pet-benefits-container, .pet-usecases-container, .pet-contact-container { width: 100%; max-width: var(--content-container) !important; margin-left: auto !important; margin-right: auto !important; padding-left: var(--space-inline-desktop) !important; padding-right: var(--space-inline-desktop) !important; box-sizing: border-box; } .pet-keyfacts-intro, .pet-problem-intro, .pet-solution-intro, .pet-compare-intro, .pet-options-intro, .pet-productgroups-intro, .pet-steps-intro, .pet-benefits-intro, .pet-usecases-intro, .pet-contact-intro { max-width: 820px !important; margin: 0 auto 44px !important; text-align: center !important; } .pet-keyfacts-eyebrow, .pet-problem-eyebrow, .pet-solution-eyebrow, .pet-compare-eyebrow, .pet-options-eyebrow, .pet-productgroups-eyebrow, .pet-steps-eyebrow, .pet-benefits-eyebrow, .pet-usecases-eyebrow, .pet-contact-eyebrow { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 0 14px !important; font-size: 13px !important; line-height: 1.2 !important; font-weight: 800 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--pet-accent) !important; } .pet-keyfacts-title, .pet-problem-title, .pet-solution-title, .pet-compare-title, .pet-options-title, .pet-productgroups-title, .pet-steps-title, .pet-benefits-title, .pet-usecases-title, .pet-contact-title { margin: 0 0 16px !important; font-size: var(--pet-h2) !important; line-height: 1.08 !important; font-weight: 850 !important; letter-spacing: -0.035em !important; color: var(--pet-text) !important; } .pet-keyfacts-subtitle, .pet-problem-subtitle, .pet-solution-subtitle, .pet-compare-subtitle, .pet-options-subtitle, .pet-productgroups-subtitle, .pet-steps-subtitle, .pet-benefits-subtitle, .pet-usecases-subtitle, .pet-contact-subtitle { margin: 0 !important; font-size: var(--pet-body-lg) !important; line-height: 1.75 !important; color: var(--pet-text-muted) !important; } /* ---------- Hero ---------- */ .pet-hero-section { padding: 96px 0 !important; background: radial-gradient(circle at 10% 18%, color-mix(in srgb, var(--pet-accent) 18%, transparent) 0%, transparent 31%), radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--pet-primary-2) 16%, transparent) 0%, transparent 34%), linear-gradient(180deg, var(--pet-bg-soft) 0%, var(--pet-bg-soft-3) 100%) !important; } .pet-hero-grid { display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important; gap: 56px !important; align-items: center !important; } .pet-hero-title { color: var(--pet-text) !important; } .pet-hero-subtitle { color: var(--pet-text-muted) !important; } .pet-hero-point { background: rgba(255,255,255,0.82) !important; border: 1px solid var(--pet-border) !important; color: var(--pet-text-soft) !important; } .pet-hero-point-icon { background: color-mix(in srgb, var(--pet-primary) 12%, white 88%) !important; color: var(--pet-primary) !important; } .pet-hero-visual-box { min-height: 540px !important; border-radius: 34px !important; background: rgba(255,255,255,0.86) !important; border: 1px solid var(--pet-border) !important; box-shadow: 0 30px 60px rgba(20, 56, 103, 0.10) !important; } .pet-hero-placeholder img, .pet-hero-visual-box img { border-radius: 24px !important; } /* ---------- helle Section-Cards ---------- */ .pet-keyfact-card, .pet-solution-card, .pet-options-card, .pet-productgroup-card, .pet-usecase-card, .pet-contact-card { border-radius: 24px !important; background: rgba(255,255,255,0.94) !important; border: 1px solid var(--pet-border) !important; box-shadow: var(--shadow-soft) !important; transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important; } .pet-keyfact-card:hover, .pet-solution-card:hover, .pet-options-card:hover, .pet-productgroup-card:hover, .pet-usecase-card:hover, .pet-contact-card:hover { transform: translateY(-6px) !important; border-color: var(--pet-border-strong) !important; box-shadow: var(--shadow-medium) !important; } .pet-keyfact-card h3, .pet-solution-card h3, .pet-options-card h3, .pet-productgroup-card h3, .pet-usecase-card h3, .pet-contact-card h3 { color: var(--pet-text) !important; } .pet-keyfact-card p, .pet-solution-card p, .pet-options-card p, .pet-productgroup-card p, .pet-usecase-card p, .pet-contact-card p { color: var(--pet-text-light) !important; } /* ---------- Keyfacts ---------- */ .pet-keyfacts-section { padding: 96px 0 !important; background: var(--pet-bg-soft) !important; } .pet-keyfacts-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 24px !important; } .pet-keyfact-icon-badge, .pet-solution-badge, .pet-productgroup-badge, .pet-usecase-icon, .pet-contact-icon { background: linear-gradient(180deg, #ffffff 0%, var(--pet-bg-soft-3) 100%) !important; border: 1px solid var(--pet-border) !important; color: var(--pet-primary) !important; } /* ---------- Problem Section final hell ---------- */ .pet-problem-section { padding: 104px 0 !important; background: radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--pet-primary-2) 11%, transparent) 0%, transparent 28%), radial-gradient(circle at 86% 20%, rgba(126,166,214,0.14) 0%, transparent 25%), linear-gradient(180deg, #e7eff9 0%, #d9e5f2 100%) !important; } .pet-problem-card { padding: 28px 24px !important; border-radius: 24px !important; background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,251,255,0.94) 100%) !important; border: 1px solid rgba(20,56,103,0.08) !important; box-shadow: 0 18px 36px rgba(20,56,103,0.08), 0 4px 12px rgba(20,56,103,0.04) !important; } .pet-problem-card:hover { transform: translateY(-6px) !important; border-color: var(--pet-border-strong) !important; box-shadow: 0 24px 44px rgba(20,56,103,0.12), 0 8px 18px rgba(20,56,103,0.06) !important; } .pet-problem-card h3, .pet-problem-section h2, .pet-problem-section h3 { color: var(--pet-text) !important; } .pet-problem-card p, .pet-problem-section p { color: #4f6788 !important; } .pet-problem-badge, .pet-problem-badge--default, .pet-problem-icon, .pet-problem-icon-badge { background: linear-gradient(180deg, #edf4ff 0%, #dfeaff 100%) !important; border: 1px solid var(--pet-border) !important; color: var(--pet-primary) !important; box-shadow: 0 10px 24px rgba(20,56,103,0.06), inset 0 1px 0 rgba(255,255,255,0.72) !important; } .pet-problem-badge span, .pet-problem-badge--default span, .pet-problem-icon *, .pet-problem-icon-badge * { color: var(--pet-primary) !important; } .pet-problem-card--premium .pet-problem-badge, .pet-problem-card--premium .pet-problem-icon, .pet-problem-badge--premium, .pet-problem-badge--accent { background: linear-gradient(180deg, #f6f8df 0%, #eef4c8 100%) !important; border-color: rgba(163,185,29,0.18) !important; color: #7a8f14 !important; } .pet-problem-card--premium .pet-problem-badge span, .pet-problem-card--premium .pet-problem-icon *, .pet-problem-badge--premium span, .pet-problem-badge--accent span { color: #7a8f14 !important; } .pet-problem-highlight-inner, .pet-steps-bottom-box, .pet-benefits-highlight-box { background: linear-gradient(180deg, rgba(255,255,255,0.90) 0%, rgba(245,249,255,0.94) 100%) !important; border: 1px solid rgba(20,56,103,0.08) !important; box-shadow: 0 16px 34px rgba(20,56,103,0.07), 0 4px 10px rgba(20,56,103,0.04) !important; } .pet-problem-highlight-inner p, .pet-steps-bottom-box p, .pet-benefits-highlight-box p { color: #456180 !important; } /* ---------- Solution / Options ---------- */ .pet-solution-section, .pet-options-section, .pet-usecases-section { padding: 104px 0 !important; background: linear-gradient(180deg, #ffffff 0%, var(--pet-bg-soft-3) 100%) !important; } .pet-solution-grid, .pet-options-grid, .pet-usecases-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px !important; } .pet-solution-card, .pet-options-card, .pet-usecase-card { padding: 28px 24px !important; } /* ---------- Product Groups ---------- */ .pet-productgroups-section { padding: 104px 0 !important; background: var(--pet-bg-soft) !important; } .pet-productgroups-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 26px !important; align-items: stretch !important; } .pet-productgroup-card { overflow: hidden !important; display: flex !important; flex-direction: column !important; } .pet-productgroup-image { min-height: 280px !important; border-radius: 24px !important; overflow: hidden !important; background: linear-gradient(180deg, #f7fbff 0%, #edf5ff 100%) !important; } .pet-productgroup-image img, .pet-productgroup-img { border-radius: 24px !important; object-fit: cover !important; } .pet-productgroup-tag { background: color-mix(in srgb, var(--pet-primary) 10%, white 90%) !important; color: var(--pet-primary) !important; } .pet-productgroup-features li::before { color: var(--pet-primary) !important; } /* ---------- Compare ---------- */ .pet-compare-section { padding: 100px 0 !important; background: var(--pet-bg-soft) !important; } .pet-compare-table-wrap { border-radius: 26px !important; background: #ffffff !important; border: 1px solid rgba(20,56,103,0.08) !important; box-shadow: 0 30px 60px rgba(20,56,103,0.08), 0 8px 20px rgba(20,56,103,0.04) !important; } .pet-compare-table { width: 100% !important; min-width: 760px !important; border-collapse: collapse !important; table-layout: fixed !important; } .pet-compare-table thead { background: linear-gradient(180deg, #eef4ff 0%, #e6efff 100%) !important; } .pet-compare-table th { color: var(--pet-text) !important; } .pet-compare-table th.pet-compare-highlight { color: var(--pet-primary) !important; } .pet-compare-highlight { background: linear-gradient(180deg, color-mix(in srgb, var(--pet-primary) 7%, white 93%) 0%, color-mix(in srgb, var(--pet-primary) 12%, white 88%) 100%) !important; } .pet-compare-note-box, .pet-options-note-box, .pet-productgroups-note-box, .pet-usecases-bottom-box { border-radius: 24px !important; background: linear-gradient(135deg, var(--pet-bg-soft-4) 0%, #fff3ea 100%) !important; border: 1px solid var(--pet-border) !important; box-shadow: 0 12px 28px rgba(20,56,103,0.04), inset 0 1px 0 rgba(255,255,255,0.8) !important; } /* ---------- Steps / Benefits hell statt dunkle Altwerte ---------- */ .pet-steps-section, .pet-benefits-section { padding: 104px 0 !important; background: radial-gradient(circle at 15% 15%, color-mix(in srgb, var(--pet-primary-2) 10%, transparent) 0%, transparent 30%), linear-gradient(180deg, #eef4fb 0%, #dfeaf6 100%) !important; } .pet-steps-title, .pet-benefits-title, .pet-steps-section h2, .pet-benefits-section h2 { color: var(--pet-text) !important; } .pet-steps-subtitle, .pet-benefits-subtitle, .pet-steps-section p, .pet-benefits-section p { color: #4f6788 !important; } .pet-steps-grid, .pet-benefits-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px !important; } .pet-step-card, .pet-benefit-card { padding: 28px 24px !important; border-radius: 24px !important; background: rgba(255,255,255,0.92) !important; border: 1px solid rgba(20,56,103,0.08) !important; box-shadow: 0 18px 36px rgba(20,56,103,0.08) !important; } .pet-step-card h3, .pet-benefit-card h3 { color: var(--pet-text) !important; } .pet-step-card p, .pet-benefit-card p { color: #4f6788 !important; } /* ---------- Contact ---------- */ .pet-contact-section { padding: 104px 0 !important; background: linear-gradient(180deg, #ffffff 0%, var(--pet-bg-soft-3) 100%) !important; } .pet-contact-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px !important; } /* ---------- Landingpage Buttons ---------- */ .pet-hero-btn, .pet-header-btn, a.dt-btn, a.pet-btn, .pet-productgroup-button, .pet-contact-card a { border-radius: 999px !important; } a.dt-btn--cta, .pet-hero-btn-primary, .pet-productgroup-button, .pet-header-btn { background: linear-gradient(135deg, var(--pet-primary) 0%, var(--pet-primary-2) 100%) !important; color: #ffffff !important; box-shadow: 0 14px 28px color-mix(in srgb, var(--pet-primary-2) 24%, transparent) !important; } a.dt-btn--info, .pet-hero-btn-secondary { background: rgba(255,255,255,0.96) !important; color: var(--pet-primary-dark) !important; border: 1.5px solid color-mix(in srgb, var(--pet-primary) 70%, transparent) !important; } /* ---------- Responsive Landingpages ---------- */ @media (max-width: 1199px) { .pet-hero-grid { gap: 40px !important; } .pet-keyfacts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .pet-productgroups-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 991px) { .pet-hero-container, .pet-keyfacts-container, .pet-problem-container, .pet-solution-container, .pet-compare-container, .pet-options-container, .pet-productgroups-container, .pet-steps-container, .pet-benefits-container, .pet-usecases-container, .pet-contact-container { padding-left: var(--space-inline-tablet) !important; padding-right: var(--space-inline-tablet) !important; } .pet-hero-section, .pet-keyfacts-section, .pet-problem-section, .pet-solution-section, .pet-compare-section, .pet-options-section, .pet-productgroups-section, .pet-steps-section, .pet-benefits-section, .pet-usecases-section, .pet-contact-section { padding-top: 82px !important; padding-bottom: 82px !important; } .pet-hero-grid { grid-template-columns: 1fr !important; } .pet-hero-visual-box, .pet-hero-placeholder { min-height: 420px !important; } .pet-problem-grid, .pet-solution-grid, .pet-options-grid, .pet-steps-grid, .pet-benefits-grid, .pet-usecases-grid, .pet-contact-grid { grid-template-columns: 1fr !important; } } @media (max-width: 767px) { .pet-hero-container, .pet-keyfacts-container, .pet-problem-container, .pet-solution-container, .pet-compare-container, .pet-options-container, .pet-productgroups-container, .pet-steps-container, .pet-benefits-container, .pet-usecases-container, .pet-contact-container { padding-left: var(--space-inline-mobile) !important; padding-right: var(--space-inline-mobile) !important; } .pet-hero-section, .pet-keyfacts-section, .pet-problem-section, .pet-solution-section, .pet-compare-section, .pet-options-section, .pet-productgroups-section, .pet-steps-section, .pet-benefits-section, .pet-usecases-section, .pet-contact-section { padding-top: 68px !important; padding-bottom: 68px !important; } .pet-keyfacts-grid, .pet-productgroups-grid { grid-template-columns: 1fr !important; } .pet-hero-buttons, .pet-hero-points { align-items: stretch !important; } .pet-hero-btn, a.dt-btn { width: 100% !important; } .pet-hero-visual-box, .pet-hero-placeholder { min-height: 320px !important; border-radius: 24px !important; } .pet-hero-floating-card { position: relative !important; inset: auto !important; margin: 12px 16px !important; } .pet-compare-table { min-width: 720px !important; } } /* PDP Checkmark-Liste */ .dynatag-checklist { display: flex; flex-direction: column; gap: 18px; margin-top: 28px; } .dynatag-checkitem { display: flex; align-items: flex-start; gap: 8px; font-size: 16px; line-height: 1.35; color: #13294b; } .dynatag-checkitem img { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 3px; } .dynatag-checkitem span { display: block; } /* ========================================================= PDP FEATURE BOXES – CARD STYLE FIX ========================================================= */ .dynatag-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 24px; } .dynatag-feature-box { display: grid; grid-template-columns: 48px 1fr; align-items: flex-start; column-gap: 16px; padding: 18px 20px; border-radius: 20px; background: rgba(255,255,255,0.95); border: 1px solid var(--pet-border); box-shadow: var(--shadow-soft); transition: all 0.25s ease; } .dynatag-feature-box:hover { transform: translateY(-4px); box-shadow: var(--shadow-medium); } .dynatag-feature-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #edf5ff 0%, #e6efff 100%); } .dynatag-feature-icon img { width: 28px; height: 28px; object-fit: contain; } .dynatag-feature-box h4 { margin: 0 0 6px; font-size: 16px; line-height: 1.2; font-weight: 700; color: var(--pet-text); } .dynatag-feature-box p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--pet-text-muted); } /* Full width Box unten */ .dynatag-feature-box--full { grid-column: span 2; align-items: center; background: linear-gradient(135deg, #edf5ff 0%, #e3efff 100%); border: 1px solid var(--pet-border-strong); box-shadow: var(--shadow-medium); } .dynatag-feature-box--full .dynatag-feature-content { display: block; } .dynatag-feature-box--full h4 { margin: 0; } .dynatag-feature-box--full h4 span { font-size: 14px; font-weight: 500; } /* ========================================================= PDP TITLE – softer & hochwertiger ========================================================= */ body#product .col-md-6 > h1.h1 { margin: 0 0 18px; font-size: clamp(26px, 3.2vw, 36px); line-height: 1.2; font-weight: 750; letter-spacing: -0.02em; color: #2c3e57; /* softer als schwarz */ } /* Nur bei Bild-Galerie anzeigen */ body#product .product-cover + .scroll-box-arrows { display: block; } /* überall sonst ausblenden */ body#product .scroll-box-arrows { display: none; } /* ========================================================= PRICE CARD – harmonisch integriert ========================================================= */ body#product .product-prices { margin: 0 0 18px; padding: 20px 22px; margin-bottom: 10px; border-radius: 20px; background: rgba(255,255,255,0.92); backdrop-filter: blur(6px); border: 1px solid rgba(51, 141, 241, 0.12); box-shadow: 0 18px 40px rgba(20, 56, 103, 0.08), 0 4px 12px rgba(20, 56, 103, 0.04); } /* Preis selbst */ body#product .current-price-value { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.1; font-weight: 750; color: #16345f !important; /* weniger hart */ } /* MwSt Text */ body#product .tax-shipping-delivery-label { display: block; margin-top: 6px; font-size: 14px; font-weight: 500; color: #6b7c93; } /* Vorteile unter Preis */ body#product .product-prices::after { display: none !important; content: none !important; } content: "✓ Kostenloser Versand ab CHF 50.– ✓ Einmalige Zahlung" "\A" "✓ Kein Abo ✓ Keine App notwendig"; white-space: pre-line; display: block; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(20, 56, 103, 0.06); font-size: 14px; line-height: 1.85; font-weight: 650; color: #249a63; } /* ========================================================= PDP LEFT REASSURANCE / TRUST BLOCK ========================================================= */ body#product .product-information .blockreassurance_product { display: none !important; } body#product .dynatag-product-trust { margin-top: 22px; } body#product .dynatag-product-trust-card { padding: 22px; border-radius: 24px; background: rgba(255,255,255,0.96); border: 1px solid rgba(51, 141, 241, 0.12); box-shadow: 0 18px 40px rgba(20, 56, 103, 0.07), 0 4px 12px rgba(20, 56, 103, 0.04); } body#product .dynatag-product-trust-card:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(20, 56, 103, 0.10), 0 6px 14px rgba(20, 56, 103, 0.05); transition: all 0.25s ease; } body#product .dynatag-product-trust-item { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid rgba(20, 56, 103, 0.07); } body#product .dynatag-product-trust-item:first-child { padding-top: 0; } body#product .dynatag-product-trust-item:last-child { padding-bottom: 0; border-bottom: 0; } .dynatag-product-trust-item { display: flex; align-items: flex-start; gap: 16px; padding: 18px 0; } .dynatag-product-trust-icon { width: 54px; height: 54px; min-width: 52px; border-radius: 18px; background: linear-gradient(145deg, #eaf3ff, #dbeaff); display: flex; align-items: center; justify-content: center; } .dynatag-product-trust-icon img { width: 38px; height: 38px; object-fit: contain; display: block; } .dynatag-product-trust-item h3 { margin: 0 0 5px; font-size: 20px; line-height: 1.25; font-weight: 800; color: #082b5f; } .dynatag-product-trust-item p { margin: 0; font-size: 16px; line-height: 1.4; color: #3f5575; } .dynatag-product-trust-item + .dynatag-product-trust-item { border-top: 1px solid rgba(8, 43, 95, 0.10); } /* Mobile ausblenden, damit der Block nicht vor Titel/Preis erscheint */ @media (max-width: 767px) { body#product .dynatag-product-trust { display: none !important; } } /* ========================================================= PRODUCT PAGE – mehr Seitenbreite im Classic Theme ========================================================= */ body#product #wrapper .container { max-width: 1440px; width: 100%; } body#product #content-wrapper, body#product #main { max-width: 1320px; margin-left: auto; margin-right: auto; } /* ========================================================= MOBILE FIX – Feature Kacheln untereinander ========================================================= */ @media (max-width: 767px) { .dynatag-feature-grid { grid-template-columns: 1fr !important; } .dynatag-feature-box { grid-column: span 1 !important; width: 100%; } } /* ========================================================= MOBILE FIX – Wishlist Icon verhindert horizontalen Scroll ========================================================= */ @media (max-width: 767px) { body#product .product-quantity { display: flex !important; flex-wrap: wrap !important; align-items: center; gap: 10px; max-width: 100%; } body#product .product-quantity .qty { flex: 0 0 auto; } body#product .product-quantity .add { flex: 1 1 auto; min-width: 0; } body#product .product-quantity .add-to-cart { width: 100%; max-width: 100%; padding-left: 14px !important; padding-right: 14px !important; white-space: nowrap; } body#product .wishlist-button-add, body#product .wishlist-button-product { flex: 0 0 42px; width: 42px !important; min-width: 42px !important; height: 42px !important; margin-left: 0 !important; } } /* ========================================================= DYNATAG FINAL OVERRIDES v2.0 Zweck: - Einheitliche Card-Shadows / Radien für PDP und Landingpages - Neue PDP Buybox direkt unter Preis - Trust-Block links + 3-Schritte-Block - Mobile Fixes: Feature-Kacheln, Wishlist, Sticky CTA Hinweis: Dieser Block steht bewusst am Ende und überschreibt ältere Regeln. ========================================================= */ :root { --dt-card-bg: rgba(255,255,255,0.96); --dt-card-bg-soft: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); --dt-card-border: rgba(51, 141, 241, 0.12); --dt-card-border-strong: rgba(51, 141, 241, 0.18); --dt-card-radius: 22px; --dt-card-radius-lg: 24px; --dt-card-shadow: 0 18px 40px rgba(20, 56, 103, 0.07), 0 4px 12px rgba(20, 56, 103, 0.04); --dt-card-shadow-soft: 0 14px 30px rgba(20, 56, 103, 0.055), 0 4px 10px rgba(20, 56, 103, 0.03); --dt-card-shadow-hover: 0 22px 48px rgba(20, 56, 103, 0.10), 0 6px 14px rgba(20, 56, 103, 0.05); --dt-green: #249a63; --dt-green-soft: rgba(42,163,107,0.12); } body#product #wrapper .container { max-width: 1440px; width: 100%; } body#product #content-wrapper, body#product #main { max-width: 1320px; margin-left: auto; margin-right: auto; } body#product .col-md-6 > h1.h1 { margin: 0 0 18px; font-size: clamp(26px, 3.2vw, 36px); line-height: 1.2; font-weight: 750; letter-spacing: -0.02em; color: #2c3e57; } body#product .product-prices, body#product .product-actions, body#product .dynatag-pdp-card, body#product .dynatag-product-trust-card, body#product .dynatag-product-steps-card { background: var(--dt-card-bg); border: 1px solid var(--dt-card-border); box-shadow: var(--dt-card-shadow-soft); } body#product .product-prices { margin: 0 0 18px; padding: 20px 22px; border-radius: var(--dt-card-radius); } body#product .product-price { margin-bottom: 10px; } body#product .current-price-value { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.1; font-weight: 750; color: var(--pet-text) !important; } body#product .tax-shipping-delivery-label { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--pet-text-muted); } body#product .product-prices::after { content: "✓ Kostenloser Versand ab CHF 50.– ✓ Einmalige Zahlung" "\A" "✓ Kein Abo ✓ Keine App notwendig"; white-space: pre-line; display: block; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(20, 56, 103, 0.06); font-size: 14px; line-height: 1.85; font-weight: 650; color: var(--dt-green); } body#product .product-actions { margin: 18px 0 20px; padding: 18px 20px; border-radius: var(--dt-card-radius); } body#product .product-variants { margin-bottom: 14px; } body#product .product-variants .control-label, body#product .product-add-to-cart .control-label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 750; color: var(--pet-text-soft); } body#product .add-to-cart { min-height: 46px; border-radius: 999px !important; font-weight: 750 !important; box-shadow: 0 12px 24px rgba(51, 141, 241, 0.20); } body#product .dynatag-pdp-card { padding: 22px; border-radius: var(--dt-card-radius-lg); } body#product .sos-pdp-subtitle { margin: 0; font-size: 15px; line-height: 1.65; color: var(--pet-text-muted); } body#product .dynatag-checklist { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; } body#product .dynatag-checkitem { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--pet-text-soft); } body#product .dynatag-checkitem img { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 3px; } body#product .dynatag-checkitem span { display: block; } body#product .dynatag-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; } body#product .dynatag-feature-box { display: grid; grid-template-columns: 48px 1fr; align-items: flex-start; column-gap: 16px; padding: 18px 20px; border-radius: 20px; background: var(--dt-card-bg); border: 1px solid var(--dt-card-border); box-shadow: var(--dt-card-shadow-soft); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } body#product .dynatag-feature-box:hover { transform: translateY(-4px); box-shadow: var(--dt-card-shadow-hover); border-color: var(--dt-card-border-strong); } body#product .dynatag-feature-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #edf5ff 0%, #e6efff 100%); } body#product .dynatag-feature-icon img { width: 28px; height: 28px; object-fit: contain; } body#product .dynatag-feature-box h4 { margin: 0 0 6px; font-size: 16px; line-height: 1.2; font-weight: 750; color: var(--pet-text); } body#product .dynatag-feature-box p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--pet-text-muted); } body#product .dynatag-feature-box--full { grid-column: span 2; align-items: center; background: linear-gradient(135deg, #edf5ff 0%, #e3efff 100%); border: 1px solid var(--dt-card-border-strong); } body#product .dynatag-feature-box--full h4 span { font-size: 14px; font-weight: 500; } body#product .product-information .blockreassurance_product, body#product .product-actions + .blockreassurance_product { display: none !important; } body#product .dynatag-product-trust { margin-top: 18px; } body#product .dynatag-product-trust-card { padding: 22px; border-radius: var(--dt-card-radius-lg); box-shadow: var(--dt-card-shadow); transition: transform 0.25s ease, box-shadow 0.25s ease; } body#product .dynatag-product-trust-card:hover { transform: translateY(-3px); box-shadow: var(--dt-card-shadow-hover); } body#product .dynatag-product-trust-item { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid rgba(20, 56, 103, 0.07); } body#product .dynatag-product-trust-item:first-child { padding-top: 0; } body#product .dynatag-product-trust-item:last-child { padding-bottom: 0; border-bottom: 0; } body#product .dynatag-product-trust-icon { width: 42px; height: 42px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--dt-green-soft); color: var(--dt-green); font-size: 18px; font-weight: 800; } body#product .dynatag-product-trust-item h3 { margin: 0 0 5px; font-size: 15px; line-height: 1.25; font-weight: 750; color: var(--pet-text); } body#product .dynatag-product-trust-item p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--pet-text-muted); } body#product .dynatag-product-steps { margin-top: 18px; } body#product .dynatag-product-steps-card { padding: 22px; border-radius: var(--dt-card-radius-lg); background: var(--dt-card-bg-soft); box-shadow: var(--dt-card-shadow); } body#product .dynatag-product-steps-head { margin-bottom: 18px; } body#product .dynatag-product-steps-head span { display: inline-block; margin-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pet-primary-2); } body#product .dynatag-product-steps-head h3 { margin: 0; font-size: 18px; line-height: 1.25; font-weight: 800; color: var(--pet-text); } body#product .dynatag-product-steps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } body#product .dynatag-product-step { display: flex; flex-direction: column; align-items: flex-start; padding: 18px; border-radius: 18px; background: #ffffff; border: 1px solid rgba(20, 56, 103, 0.08); box-shadow: var(--dt-card-shadow-soft); transition: transform 0.25s ease, box-shadow 0.25s ease; } body#product .dynatag-product-step:hover { transform: translateY(-4px); box-shadow: var(--dt-card-shadow-hover); } body#product .dynatag-product-step-badge, body#product .dynatag-product-step-icon { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: linear-gradient(135deg, var(--pet-primary) 0%, var(--pet-primary-2) 100%); color: #ffffff; font-size: 16px; font-weight: 800; margin-bottom: 12px; box-shadow: 0 6px 14px rgba(51,141,241,0.22); } body#product .dynatag-product-step strong { display: block; margin-bottom: 6px; font-size: 15px; line-height: 1.25; font-weight: 750; color: var(--pet-text); } body#product .dynatag-product-step p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--pet-text-muted); } @media (max-width: 767px) { body#product { overflow-x: hidden; } body#product .col-md-6 > h1.h1 { font-size: clamp(24px, 7vw, 30px); margin-bottom: 14px; } body#product .product-prices, body#product .product-actions, body#product .dynatag-pdp-card { border-radius: 20px; } body#product .product-prices::after { font-size: 13px; line-height: 1.75; } body#product .dynatag-feature-grid { grid-template-columns: 1fr !important; max-width: 100%; overflow: hidden; } body#product .dynatag-feature-box, body#product .dynatag-feature-box--full { grid-column: span 1 !important; width: 100%; max-width: 100%; padding: 16px; border-radius: 18px; } body#product .product-quantity { display: flex !important; flex-wrap: wrap !important; align-items: center; gap: 10px; max-width: 100%; } body#product .product-quantity .qty { flex: 0 0 auto; } body#product .product-quantity .add { flex: 1 1 auto; min-width: 0; } body#product .product-quantity .add-to-cart { width: 100%; max-width: 100%; padding-left: 14px !important; padding-right: 14px !important; white-space: nowrap; } body#product .wishlist-button-add, body#product .wishlist-button-product { flex: 0 0 42px; width: 42px !important; min-width: 42px !important; height: 42px !important; margin-left: 0 !important; } body#product .dynatag-product-trust, body#product .dynatag-product-steps { display: none !important; } body#product .product-add-to-cart { position: sticky; bottom: 0; z-index: 999; padding: 12px; margin: 0 -12px; background: rgba(255,255,255,0.96); border-top: 1px solid rgba(20, 56, 103, 0.10); box-shadow: 0 -10px 28px rgba(20, 56, 103, 0.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } } @media (max-width: 420px) { body#product .product-quantity .add { flex: 1 1 100%; } body#product .wishlist-button-add, body#product .wishlist-button-product { margin-top: 4px !important; } } @media (min-width: 768px) and (max-width: 991px) { body#product .dynatag-product-steps-grid { grid-template-columns: 1fr; } } /* ========================================================= PDP LEFT STEPS BLOCK – COMPACT PREMIUM passend zu aktuellem HTML ========================================================= */ body#product .dynatag-product-steps { margin-top: 18px !important; } body#product .dynatag-product-steps-card { padding: 20px 22px !important; border-radius: 24px !important; background: rgba(255,255,255,0.96) !important; border: 1px solid rgba(51, 141, 241, 0.12) !important; box-shadow: 0 18px 40px rgba(20, 56, 103, 0.07), 0 4px 12px rgba(20, 56, 103, 0.04) !important; } body#product .dynatag-product-steps-header { margin-bottom: 14px !important; } body#product .dynatag-product-steps-eyebrow { display: block !important; margin: 0 0 4px !important; font-size: 13px !important; line-height: 1.2 !important; font-weight: 500 !important; color: #42566f !important; } body#product .dynatag-product-steps-header h2 { margin: 0 !important; font-size: 22px !important; line-height: 1.15 !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: #16345f !important; } body#product .dynatag-product-step { display: grid !important; grid-template-columns: 34px 1fr !important; gap: 12px !important; align-items: flex-start !important; padding: 13px 14px !important; margin-bottom: 10px !important; border-radius: 18px !important; background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important; border: 1px solid rgba(51, 141, 241, 0.10) !important; box-shadow: 0 10px 22px rgba(20, 56, 103, 0.045), 0 2px 8px rgba(20, 56, 103, 0.025) !important; } body#product .dynatag-product-step:last-child { margin-bottom: 0 !important; } body#product .dynatag-product-step-number { width: 34px !important; height: 34px !important; border-radius: 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: linear-gradient(180deg, #edf5ff 0%, #e1edff 100%) !important; color: #0e65af !important; font-size: 14px !important; line-height: 1 !important; font-weight: 800 !important; } body#product .dynatag-product-step h3 { margin: 0 0 4px !important; font-size: 15px !important; line-height: 1.25 !important; font-weight: 750 !important; letter-spacing: -0.01em !important; color: #16345f !important; } body#product .dynatag-product-step p { margin: 0 !important; font-size: 13px !important; line-height: 1.45 !important; color: #5f6f86 !important; } @media (max-width: 767px) { body#product .dynatag-product-steps { display: none !important; } } /* ========================================================= MOBILE STICKY ADD TO CART – SAFE NO OVERFLOW ========================================================= */ @media (max-width: 767px) { html, body#product { overflow-x: hidden !important; } body#product { padding-bottom: 76px !important; } body#product .product-add-to-cart { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 99999 !important; width: 100vw !important; max-width: 100vw !important; box-sizing: border-box !important; padding: 10px 12px !important; background: rgba(255,255,255,0.97) !important; border-top: 1px solid rgba(51,141,241,0.16) !important; box-shadow: 0 -10px 24px rgba(20,56,103,0.12) !important; } body#product .product-add-to-cart > .control-label, body#product #product-availability, body#product .wishlist-button-add, body#product .wishlist-button-product { display: none !important; } body#product .product-quantity { display: grid !important; grid-template-columns: 72px 1fr !important; gap: 8px !important; align-items: center !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box !important; } body#product .product-quantity .qty { width: 72px !important; min-width: 72px !important; max-width: 72px !important; } body#product #quantity_wanted { width: 48px !important; min-width: 48px !important; max-width: 48px !important; height: 42px !important; font-size: 14px !important; } body#product .qty .input-group-btn-vertical > .btn, body#product .qty .bootstrap-touchspin-up, body#product .qty .bootstrap-touchspin-down { width: 24px !important; min-width: 24px !important; height: 21px !important; } body#product .product-quantity .add { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } body#product .product-quantity .add-to-cart { width: 100% !important; max-width: 100% !important; height: 44px !important; min-height: 44px !important; padding: 0 12px !important; border-radius: 999px !important; font-size: 14px !important; font-weight: 800 !important; white-space: nowrap !important; box-sizing: border-box !important; } body#product .product-quantity .add-to-cart i { font-size: 19px !important; margin-right: 5px !important; } } /* PDP Color Picker groesser */ body#product .product-variants .input-color + .color, body#product .product-variants .color { width: 28px !important; height: 28px !important; border-radius: 4px !important; margin-right: 10px !important; } body#product .product-variants .input-color:checked + .color { border: 2px solid #0e65af !important; box-shadow: 0 0 0 3px rgba(14,101,175,0.12) !important; } /* ========================================================= PDP THUMBNAIL ARROWS – FINAL ========================================================= */ body#product .dynatag-thumbnail-wrapper { position: relative !important; } body#product .dynatag-thumbnail-wrapper .scroll-box-arrows { display: flex !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: 18px !important; z-index: 20 !important; justify-content: space-between !important; align-items: center !important; pointer-events: none !important; } body#product .dynatag-thumbnail-wrapper .scroll-box-arrows i { display: flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; border-radius: 50% !important; background: rgba(255,255,255,0.96) !important; color: #16345f !important; box-shadow: 0 6px 16px rgba(20,56,103,0.16) !important; font-size: 24px !important; cursor: pointer !important; pointer-events: auto !important; } body#product .dynatag-thumbnail-wrapper .scroll-box-arrows .left { margin-left: 6px !important; } body#product .dynatag-thumbnail-wrapper .scroll-box-arrows .right { margin-right: 6px !important; } body#product .dynatag-price-card { margin: 0 0 18px; padding: 20px 22px; border-radius: 20px; background: rgba(255,255,255,0.92); border: 1px solid rgba(51,141,241,0.12); box-shadow: 0 12px 26px rgba(20,56,103,0.06), 0 4px 12px rgba(20,56,103,0.03); } body#product .dynatag-price-card .product-prices { margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; } body#product .dynatag-price-benefits { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(20,56,103,0.06); color: #1f9b63; font-size: 14px; line-height: 1.6; font-weight: 650; } body#product .dynatag-price-benefit::before { content: "✓"; margin-right: 6px; color: #1f9b63; font-weight: 800; } body#product .product-prices::after { display: none !important; content: none !important; } /* Oben: Review Button AUSBLENDEN */ body#product .product-list-reviews .post-product-comment, body#product .product-list-reviews .btn-comment, body#product .product-list-reviews a[href*="comment"] { display: none !important; } /* Unten im Tab: wieder anzeigen */ body#product #tab-content .post-product-comment, body#product #tab-content .btn-comment, body#product #tab-content a[href*="comment"] { display: inline-block !important; } /* ========================================================= PDP BADGE / PREMIUM LABEL ========================================================= */ .dynatag-pdp-badge { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin-bottom: 14px; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 800; line-height: 1.2; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; } .dynatag-pdp-badge--premium { color: #7a3b00; background: linear-gradient(135deg, #fff4cf 0%, #ffd36a 100%); border: 1px solid rgba(184, 119, 0, 0.28); box-shadow: 0 8px 18px rgba(184, 119, 0, 0.16); } @media (max-width: 575px) { .dynatag-pdp-badge { white-space: normal; font-size: 12px; padding: 7px 12px; } } .dynatag-service-tab { max-width: 1180px; margin: 0 auto; padding: 34px; border-radius: 28px; background: linear-gradient(135deg, #f3fbf6 0%, #eef7ff 100%); color: #082a4d; } .dynatag-service-hero { margin-bottom: 28px; } .dynatag-service-badge { display: inline-block; margin-bottom: 12px; padding: 7px 14px; border-radius: 999px; background: #dff6e8; color: #136b3a; font-weight: 700; font-size: 14px; } .dynatag-service-hero h2 { margin: 0 0 12px; font-size: clamp(28px, 4vw, 42px); line-height: 1.1; color: #052b55; } .dynatag-service-hero p { max-width: 760px; font-size: 18px; line-height: 1.6; } .dynatag-service-grid, .dynatag-service-contact-grid, .dynatag-service-info-grid { display: grid; gap: 18px; } .dynatag-service-grid { grid-template-columns: repeat(3, 1fr); margin-bottom: 22px; } .dynatag-service-card, .dynatag-service-contact, .dynatag-service-info-card { background: #ffffff; border: 1px solid rgba(51, 141, 241, 0.16); border-radius: 22px; padding: 22px; box-shadow: 0 12px 28px rgba(8, 42, 77, 0.06); } .dynatag-service-icon { width: 46px; height: 46px; margin-bottom: 14px; border-radius: 16px; background: #eaf4ff; display: flex; align-items: center; justify-content: center; font-size: 22px; } .dynatag-service-card h3, .dynatag-service-contact h3, .dynatag-service-info-card h3 { margin: 0 0 10px; color: #052b55; font-size: 20px; } .dynatag-service-card p, .dynatag-service-info-card p { margin: 0; line-height: 1.55; } .dynatag-service-contact { margin: 22px 0; } .dynatag-service-contact-grid { grid-template-columns: repeat(3, 1fr); } .dynatag-service-contact-item { display: block; padding: 16px; border-radius: 18px; background: #f6fbff; text-decoration: none; color: #082a4d; border: 1px solid #dcecff; } .dynatag-service-contact-item strong, .dynatag-service-contact-item span { display: block; } .dynatag-service-contact-item span { margin-top: 6px; color: #0069c9; font-weight: 700; } .dynatag-service-info-grid { grid-template-columns: repeat(2, 1fr); } .dynatag-service-info-card--wide { grid-column: 1 / -1; } @media (max-width: 900px) { .dynatag-service-tab { padding: 22px; } .dynatag-service-grid, .dynatag-service-contact-grid, .dynatag-service-info-grid { grid-template-columns: 1fr; } .dynatag-service-hero p { font-size: 16px; } } .dynatag-service-cta { margin-top: 22px; padding: 24px; border-radius: 22px; background: linear-gradient(135deg, #eaf4ff 0%, #e9f8ef 100%); border: 1px solid rgba(51, 141, 241, 0.22); text-align: center; } .dynatag-service-cta h3 { margin: 0 0 10px; color: #052b55; font-size: 22px; } .dynatag-service-cta p { margin: 0 auto 18px; max-width: 680px; line-height: 1.55; } .dynatag-service-button { display: inline-flex; align-items: center; justify-content: center; padding: 13px 24px; border-radius: 999px; background: #111827; color: #ffffff !important; font-weight: 700; text-decoration: none !important; } .dynatag-service-button:hover { background: #0069c9; color: #ffffff !important; } /* ========================================================= DYNATAG PRODUCT DESCRIPTION Klassen: .dynatag-desc / .dynatag-box / .dynatag-webapp ========================================================= */ .dynatag-desc { max-width: 1180px; margin: 0 auto; color: #082a4d; font-family: inherit; } .dynatag-desc * { box-sizing: border-box; } .dynatag-desc h2, .dynatag-desc h3, .dynatag-desc h4 { color: #052b55; font-weight: 800; line-height: 1.15; } .dynatag-desc h2 { margin: 0 0 16px; font-size: clamp(30px, 4vw, 46px); } .dynatag-desc h3 { margin: 0 0 18px; font-size: clamp(26px, 3vw, 36px); } .dynatag-desc h4 { margin: 0 0 10px; font-size: 20px; } .dynatag-desc p { margin: 0 0 16px; font-size: 17px; line-height: 1.6; } .dynatag-desc img { max-width: 100%; height: auto; display: block; border-radius: 22px; } /* BADGE */ .dynatag-badge { display: inline-block; margin-bottom: 14px; padding: 7px 14px; border-radius: 999px; background: #dff3e6; color: #136b3a; font-size: 14px; font-weight: 800; } /* HERO */ .dynatag-desc-hero { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 32px; align-items: center; margin-bottom: 26px; padding: 34px; border-radius: 28px; background: linear-gradient(135deg, #eef5ff 0%, #f6f2ec 100%); border: 1px solid rgba(51, 141, 241, 0.14); box-shadow: 0 14px 34px rgba(8, 42, 77, 0.06); } /* CHECKLIST */ .dynatag-checks { display: grid; gap: 10px; margin-top: 22px; font-size: 16px; font-weight: 700; } .dynatag-checks div { padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(51, 141, 241, 0.12); } /* SPLIT AREA */ .dynatag-split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 26px; } .dynatag-box { padding: 30px; border-radius: 26px; border: 1px solid rgba(51, 141, 241, 0.14); box-shadow: 0 12px 28px rgba(8, 42, 77, 0.05); } .dynatag-box-beige { background: #f6f2ec; } .dynatag-box-green { background: #eaf6ee; } .dynatag-box ul, .dynatag-webapp ul { margin: 0; padding: 0; list-style: none; } .dynatag-box li, .dynatag-webapp li { position: relative; margin-bottom: 13px; padding-left: 30px; font-size: 16px; line-height: 1.5; } .dynatag-box li::before, .dynatag-webapp li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #338df1; font-weight: 900; } /* WEBAPP SECTION */ .dynatag-webapp { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 34px; align-items: center; margin-bottom: 26px; padding: 34px; border-radius: 28px; background: #eef5ff; border: 1px solid rgba(51, 141, 241, 0.14); box-shadow: 0 14px 34px rgba(8, 42, 77, 0.06); } /* BUTTON */ .dynatag-btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 18px; padding: 13px 24px; border-radius: 999px; background: #338df1; color: #ffffff !important; font-size: 16px; font-weight: 800; text-decoration: none !important; box-shadow: 0 10px 22px rgba(51, 141, 241, 0.24); transition: all 0.2s ease; } .dynatag-btn:hover { background: #0069c9; color: #ffffff !important; transform: translateY(-1px); } /* VIDEO */ .dynatag-video { margin-bottom: 26px; padding: 30px; border-radius: 28px; background: #eef5ff; border: 1px solid rgba(51, 141, 241, 0.14); box-shadow: 0 14px 34px rgba(8, 42, 77, 0.06); } .dynatag-video-frame { position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; border-radius: 22px; background: #dbeafe; } .dynatag-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* NOTE */ .dynatag-note { margin-bottom: 26px; padding: 18px 22px; border-radius: 18px; background: #eaf4ff; border: 1px solid #cfe5ff; color: #082a4d; font-size: 16px; line-height: 1.5; } /* MOBILE */ @media (max-width: 900px) { .dynatag-desc-hero, .dynatag-split, .dynatag-webapp { grid-template-columns: 1fr; } .dynatag-desc-hero, .dynatag-webapp, .dynatag-video, .dynatag-box { padding: 24px; border-radius: 22px; } .dynatag-desc h2 { font-size: 30px; } .dynatag-desc h3 { font-size: 26px; } } @media (max-width: 520px) { .dynatag-desc { padding: 0 4px; } .dynatag-desc-hero, .dynatag-webapp, .dynatag-video, .dynatag-box { padding: 20px; } .dynatag-desc p, .dynatag-box li, .dynatag-webapp li { font-size: 15px; } .dynatag-btn { width: 100%; } } /* HERO IMAGES */ .dynatag-hero-images { display: grid; gap: 14px; justify-items: center; } .dynatag-hero-images img { border-radius: 22px; width: 100%; } /* FRISCHERE BOXEN */ .dynatag-box-fresh { background: linear-gradient(135deg, #fffef9 0%, #fff6d6 100%); border: 1px solid rgba(255, 200, 0, 0.22); box-shadow: 0 10px 24px rgba(255, 200, 0, 0.10); } .dynatag-box-fresh:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(255, 200, 0, 0.18); transition: all 0.2s ease; } .dynatag-box-fresh-green { background: linear-gradient(135deg,#f3fff7,#e6f7ee); } /* MOBILE */ @media (max-width:900px){ .dynatag-hero-images { grid-template-columns: 1fr; } } /* ========================================================= DYNATAG IMAGE SCALE (30% kleiner) ========================================================= */ /* HERO Bilder */ .dynatag-hero-images img { width: 70%; max-width: 320px; margin: 0 auto; } /* WEBAPP Bild */ .dynatag-webapp img { width: 70%; max-width: 360px; margin: 0 auto; } /* QR + App Bilder */ .dynatag-split .dynatag-box img { width: 70%; max-width: 300px; margin: 12px auto 0; display: block; } /* Optional: etwas mehr Luft */ .dynatag-box img { margin-top: 10px; } @media (max-width: 768px) { .breadcrumb { display: none !important; } } /* ========================================================= FULL WIDTH FIX PRODUCT DESCRIPTION ========================================================= */ /* ========================================================= MOBILE FULL WIDTH PRODUCT DESCRIPTION ========================================================= */ @media (max-width: 768px) { #product .dynatag-desc { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: 12px; padding-right: 12px; } } .dynatag-box-image { width: 100%; height: auto; margin-top: 18px; border-radius: 18px; display: block; } /* ========================================================= DYNATAG IMAGE POPUP / LIGHTBOX ========================================================= */ .dynatag-image-popup-trigger { display: block; cursor: zoom-in; } .dynatag-image-popup-trigger img { width: 100%; height: auto; display: block; border-radius: 18px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .dynatag-image-popup-trigger:hover img { transform: scale(1.02); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18); } .dynatag-image-popup { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 23, 42, 0.78); } .dynatag-image-popup:target { display: flex; } .dynatag-image-popup-content { max-width: min(920px, 94vw); max-height: 90vh; } .dynatag-image-popup-content img { width: auto; max-width: 100%; max-height: 90vh; display: block; border-radius: 22px; background: #ffffff; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35); } .dynatag-image-popup-close { position: fixed; top: 18px; right: 24px; z-index: 100000; width: 44px; height: 44px; border-radius: 999px; background: #ffffff; color: #111827; font-size: 34px; line-height: 40px; text-align: center; text-decoration: none; font-weight: 300; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22); } .dynatag-image-popup-close:hover { color: #0e65af; text-decoration: none; } .dynatag-pdp-badge--neutral { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; padding: 8px 18px; border-radius: 999px; background: #f3f6fa; border: 1px solid #d9e2ec; color: #2f4054; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }