/* ========================================================================== Service Pages — Shared Styles Einheitliches Design-System für alle Leistungsseiten Nutzt Design-Tokens aus styles.css (:root) ========================================================================== */ /* -------------------------------------------------------------------------- Service Accent Colors (per page via data-service on ) -------------------------------------------------------------------------- */ [data-service="datenanreicherung"] { --svc-accent: #3b82f6; --svc-accent-rgb: 59,130,246; } [data-service="performance-ads"] { --svc-accent: #8b5cf6; --svc-accent-rgb: 139,92,246; } [data-service="neukunden"] { --svc-accent: #ec4899; --svc-accent-rgb: 236,72,153; } [data-service="serverseitiges"] { --svc-accent: #06b6d4; --svc-accent-rgb: 6,182,212; } [data-service="tracking-architektur"] { --svc-accent: #6366f1; --svc-accent-rgb: 99,102,241; } [data-service="websites"] { --svc-accent: #10b981; --svc-accent-rgb: 16,185,129; } [data-service="shopify"] { --svc-accent: #95bf47; --svc-accent-rgb: 149,191,71; } [data-service="beratung"] { --svc-accent: #f59e0b; --svc-accent-rgb: 245,158,11; } [data-service="custom-tracking"] { --svc-accent: #4f46e5; --svc-accent-rgb: 79,70,229; } /* -------------------------------------------------------------------------- Breadcrumb -------------------------------------------------------------------------- */ .svc-breadcrumb { padding: calc(80px + var(--space-lg)) 0 0; } .svc-breadcrumb__list { display: flex; align-items: center; gap: var(--space-sm); list-style: none; font-size: var(--font-size-sm); color: var(--color-text-muted); } .svc-breadcrumb__list a { color: var(--color-text-muted); text-decoration: none; transition: color var(--transition-fast); } .svc-breadcrumb__list a:hover { color: var(--svc-accent, var(--color-accent)); } .svc-breadcrumb__sep { opacity: 0.4; font-size: 0.75rem; } .svc-breadcrumb__current { color: var(--color-text); font-weight: 500; } /* -------------------------------------------------------------------------- Hero — Base -------------------------------------------------------------------------- */ .svc-hero { position: relative; padding: var(--space-3xl) 0 var(--space-4xl); overflow: hidden; } .svc-hero::before { content: ""; position: absolute; top: -200px; left: 50%; transform: translateX(-50%); width: 900px; height: 900px; background: radial-gradient(circle, rgba(var(--svc-accent-rgb, 59,130,246), 0.1) 0%, transparent 60%); pointer-events: none; z-index: 0; } .svc-hero .container { position: relative; z-index: 1; } .svc-hero__tag { display: inline-block; font-size: var(--font-size-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--svc-accent, var(--color-accent)); margin-bottom: var(--space-md); } .svc-hero__title { font-size: clamp(2rem, 5vw, var(--font-size-5xl)); font-weight: 800; line-height: var(--line-height-tight); margin-bottom: var(--space-lg); background: linear-gradient(135deg, #fff 0%, var(--color-text) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .svc-hero__title span { background: linear-gradient(135deg, var(--svc-accent, var(--color-accent)) 0%, #fff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .svc-hero__subtitle { font-size: var(--font-size-lg); color: var(--color-text-muted); max-width: 560px; line-height: 1.6; margin-bottom: var(--space-xl); } .svc-hero__subtitle strong { color: var(--color-text); } /* Hero Tech Tags */ .svc-hero__tags { display: flex; flex-wrap: wrap; gap: var(--space-sm); } .svc-hero__tag-pill { display: inline-flex; align-items: center; padding: 0.375rem 0.875rem; background: rgba(var(--svc-accent-rgb, 59,130,246), 0.1); border: 1px solid rgba(var(--svc-accent-rgb, 59,130,246), 0.2); border-radius: 100px; font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text); white-space: nowrap; } /* Hero Floating Badges */ .svc-hero__badges { display: flex; flex-direction: column; gap: var(--space-md); } .svc-hero__badge { display: flex; align-items: center; gap: 0.5rem; background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--color-border); border-radius: var(--border-radius); padding: 0.625rem 1rem; font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); box-shadow: var(--shadow-md); animation: svcBadgeFadeIn 0.6s ease both; } .svc-hero__badge:nth-child(2) { animation-delay: 0.15s; } .svc-hero__badge:nth-child(3) { animation-delay: 0.3s; } .svc-hero__badge-value { font-weight: 800; font-size: var(--font-size-lg); color: var(--svc-accent, var(--color-accent)); } @keyframes svcBadgeFadeIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } /* -------------------------------------------------------------------------- Hero — Grid Variant (2-column: content left, visual right) -------------------------------------------------------------------------- */ .svc-hero--grid .svc-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: center; } .svc-hero--grid .svc-hero__visual { position: relative; } .svc-hero--grid .svc-hero__img-wrap { position: relative; border-radius: var(--border-radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); } .svc-hero--grid .svc-hero__img-wrap img { width: 100%; height: auto; display: block; } /* -------------------------------------------------------------------------- Hero — Overlay Variant (full-width image with gradient overlay) -------------------------------------------------------------------------- */ .svc-hero--overlay { min-height: 520px; display: flex; align-items: flex-end; border-radius: var(--border-radius-xl); margin: var(--space-md) var(--space-md) var(--space-4xl); padding: 0; } .svc-hero--overlay .svc-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--border-radius-xl); z-index: 0; } .svc-hero--overlay .svc-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,8,16,0.3) 0%, rgba(5,8,16,0.85) 70%, rgba(5,8,16,1) 100%); border-radius: var(--border-radius-xl); z-index: 1; } .svc-hero--overlay .svc-hero__content { position: relative; z-index: 2; padding: var(--space-3xl) var(--space-2xl) var(--space-2xl); width: 100%; } .svc-hero--overlay .svc-hero__badges { position: absolute; top: var(--space-2xl); right: var(--space-2xl); z-index: 3; } /* -------------------------------------------------------------------------- Hero — Split Variant (two-column split for NK/BK) -------------------------------------------------------------------------- */ .svc-hero--split .svc-hero__split { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border-radius: var(--border-radius-xl); overflow: hidden; } .svc-hero--split .svc-hero__half { padding: var(--space-3xl) var(--space-2xl); position: relative; } .svc-hero--split .svc-hero__half--left { background: rgba(59, 130, 246, 0.06); border-right: 1px solid var(--color-border); } .svc-hero--split .svc-hero__half--right { background: rgba(236, 72, 153, 0.06); } /* -------------------------------------------------------------------------- Content Sections -------------------------------------------------------------------------- */ .svc-section { padding: var(--space-4xl) 0; } .svc-section--alt { background: rgba(30, 41, 59, 0.2); } .svc-section__header { text-align: center; max-width: 700px; margin: 0 auto var(--space-3xl); } .svc-section__eyebrow { display: block; font-size: var(--font-size-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--svc-accent, var(--color-accent)); margin-bottom: var(--space-sm); } .svc-section__title { font-size: clamp(1.5rem, 3vw, var(--font-size-3xl)); font-weight: 800; line-height: var(--line-height-tight); background: linear-gradient(135deg, #fff 0%, #94a3b8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .svc-section__subtitle { color: var(--color-text-muted); font-size: var(--font-size-lg); margin-top: var(--space-md); line-height: 1.6; } /* Content text (max 3 lines per paragraph) */ .svc-section__text { color: var(--color-text-muted); font-size: var(--font-size-lg); line-height: 1.7; max-width: 680px; } .svc-section__text p { margin-bottom: var(--space-lg); } .svc-section__text strong { color: var(--color-text); font-weight: 600; } /* -------------------------------------------------------------------------- Grid Layouts -------------------------------------------------------------------------- */ .svc-grid--2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: start; } .svc-grid--3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); } .svc-grid--4col { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); } /* -------------------------------------------------------------------------- Cards -------------------------------------------------------------------------- */ .svc-card { background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(148, 163, 184, 0.1); border-radius: var(--border-radius-lg); padding: var(--space-xl); transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); } .svc-card:hover { transform: translateY(-4px); border-color: rgba(var(--svc-accent-rgb, 59,130,246), 0.3); box-shadow: 0 0 30px rgba(var(--svc-accent-rgb, 59,130,246), 0.1), var(--shadow-md); } .svc-card__icon { font-size: 2rem; margin-bottom: var(--space-md); line-height: 1; } .svc-card__title { font-size: var(--font-size-lg); font-weight: 700; color: #fff; margin-bottom: var(--space-sm); line-height: 1.3; } .svc-card__text { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.6; } /* -------------------------------------------------------------------------- Comparison Table -------------------------------------------------------------------------- */ .svc-compare { border-radius: var(--border-radius-lg); overflow: hidden; border: 1px solid var(--color-border); } .svc-compare__header { display: grid; grid-template-columns: 1fr 1fr; background: rgba(30, 41, 59, 0.6); font-weight: 700; font-size: var(--font-size-base); } .svc-compare__header > div { padding: var(--space-lg) var(--space-xl); } .svc-compare__header > div:first-child { border-right: 1px solid var(--color-border); color: var(--color-text-muted); } .svc-compare__header > div:last-child { color: var(--svc-accent, var(--color-accent)); } .svc-compare__row { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(148, 163, 184, 0.08); } .svc-compare__row:hover { background: rgba(var(--svc-accent-rgb, 59,130,246), 0.03); } .svc-compare__cell { padding: var(--space-md) var(--space-xl); font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.5; } .svc-compare__cell:first-child { border-right: 1px solid rgba(148, 163, 184, 0.08); } .svc-compare__cell--highlight { color: var(--color-text); } /* -------------------------------------------------------------------------- Process Steps -------------------------------------------------------------------------- */ .svc-steps { counter-reset: step; } .svc-step { display: grid; grid-template-columns: 60px 1fr; gap: var(--space-xl); margin-bottom: var(--space-2xl); align-items: start; } .svc-step__number { counter-increment: step; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: var(--border-radius); background: rgba(var(--svc-accent-rgb, 59,130,246), 0.1); border: 1px solid rgba(var(--svc-accent-rgb, 59,130,246), 0.2); font-weight: 800; font-size: var(--font-size-xl); color: var(--svc-accent, var(--color-accent)); } .svc-step__content h3 { font-size: var(--font-size-lg); font-weight: 700; color: #fff; margin-bottom: var(--space-sm); } .svc-step__content p { font-size: var(--font-size-base); color: var(--color-text-muted); line-height: 1.6; } /* -------------------------------------------------------------------------- FAQ Section -------------------------------------------------------------------------- */ .svc-faq { padding: var(--space-4xl) 0; } .svc-faq__title { font-size: clamp(1.5rem, 3vw, var(--font-size-3xl)); font-weight: 800; text-align: center; margin-bottom: var(--space-sm); background: linear-gradient(135deg, #fff 0%, #94a3b8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .svc-faq__subtitle { text-align: center; color: var(--color-text-muted); font-size: var(--font-size-base); margin-bottom: var(--space-3xl); max-width: 600px; margin-left: auto; margin-right: auto; } /* Inner .faq-list, .faq-item, .faq-question, .faq-answer from styles.css */ /* -------------------------------------------------------------------------- CTA Section -------------------------------------------------------------------------- */ .svc-cta { padding: var(--space-4xl) 0 var(--space-5xl); } .svc-cta__box { text-align: center; background: rgba(30, 41, 59, 0.4); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(var(--svc-accent-rgb, 59,130,246), 0.15); border-radius: var(--border-radius-xl); padding: var(--space-3xl) var(--space-2xl); box-shadow: 0 0 60px rgba(var(--svc-accent-rgb, 59,130,246), 0.06); } .svc-cta__title { font-size: clamp(1.5rem, 3vw, var(--font-size-3xl)); font-weight: 800; margin-bottom: var(--space-md); background: linear-gradient(135deg, #fff 0%, #94a3b8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .svc-cta__text { color: var(--color-text-muted); font-size: var(--font-size-lg); margin-bottom: var(--space-2xl); max-width: 500px; margin-left: auto; margin-right: auto; } .svc-cta__buttons { display: flex; justify-content: center; gap: var(--space-md); flex-wrap: wrap; } .svc-cta__btn { display: inline-flex; align-items: center; gap: 8px; padding: var(--space-md) var(--space-2xl); font-size: var(--font-size-lg); font-weight: 700; border-radius: var(--border-radius); text-decoration: none; transition: transform var(--transition-fast), box-shadow var(--transition-base); } .svc-cta__btn:hover { transform: translateY(-2px); } .svc-cta__btn--primary { background: linear-gradient(135deg, var(--svc-accent, var(--color-gradient-1)), color-mix(in srgb, var(--svc-accent, var(--color-gradient-2)) 60%, #fff)); color: #fff; box-shadow: 0 0 30px rgba(var(--svc-accent-rgb, 59,130,246), 0.3); } .svc-cta__btn--primary:hover { box-shadow: 0 0 50px rgba(var(--svc-accent-rgb, 59,130,246), 0.5); color: #fff; } .svc-cta__btn--secondary { border: 1px solid rgba(var(--svc-accent-rgb, 59,130,246), 0.3); color: var(--color-text); background: rgba(var(--svc-accent-rgb, 59,130,246), 0.06); } .svc-cta__btn--secondary:hover { border-color: var(--svc-accent, var(--color-accent)); box-shadow: 0 0 24px rgba(var(--svc-accent-rgb, 59,130,246), 0.15); color: #fff; } /* -------------------------------------------------------------------------- Related Services -------------------------------------------------------------------------- */ .svc-related { padding: var(--space-3xl) 0; } .svc-related__title { font-size: var(--font-size-xl); font-weight: 700; color: #fff; margin-bottom: var(--space-xl); text-align: center; } .svc-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } .svc-related__link { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-lg); background: rgba(30, 41, 59, 0.4); border: 1px solid var(--color-border); border-radius: var(--border-radius); text-decoration: none; color: var(--color-text); font-weight: 500; transition: border-color var(--transition-base), background var(--transition-base); } .svc-related__link:hover { border-color: var(--svc-accent, var(--color-accent)); background: rgba(var(--svc-accent-rgb, 59,130,246), 0.06); color: #fff; } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 1024px) { .svc-hero--grid .svc-hero__grid { grid-template-columns: 1fr; gap: var(--space-2xl); } .svc-hero--grid .svc-hero__visual { order: -1; max-width: 500px; margin: 0 auto; } .svc-hero--split .svc-hero__split { grid-template-columns: 1fr; } .svc-grid--3col { grid-template-columns: repeat(2, 1fr); } .svc-grid--4col { grid-template-columns: repeat(2, 1fr); } .svc-related__grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .svc-hero { padding: var(--space-2xl) 0 var(--space-3xl); } .svc-hero--overlay { min-height: 400px; margin: var(--space-sm); } .svc-hero--overlay .svc-hero__badges { position: static; flex-direction: row; flex-wrap: wrap; margin-top: var(--space-lg); } .svc-section { padding: var(--space-3xl) 0; } .svc-grid--2col { grid-template-columns: 1fr; } .svc-grid--3col { grid-template-columns: 1fr; } .svc-step { grid-template-columns: 44px 1fr; } .svc-step__number { width: 44px; height: 44px; font-size: var(--font-size-base); } .svc-faq { padding: var(--space-3xl) 0; } .svc-cta { padding: var(--space-3xl) 0 var(--space-4xl); } .svc-cta__box { padding: var(--space-2xl) var(--space-lg); } .svc-cta__buttons { flex-direction: column; align-items: center; } .svc-cta__btn { width: 100%; justify-content: center; max-width: 320px; } } @media (max-width: 480px) { .svc-hero__tags { gap: 0.375rem; } .svc-hero__tag-pill { font-size: 0.75rem; padding: 0.25rem 0.625rem; } .svc-hero__badges { gap: var(--space-sm); } .svc-hero__badge { font-size: 0.75rem; padding: 0.5rem 0.75rem; } }