/* ========================================================================== Self-hosted fonts (Inter + Sora) Loaded from assets/fonts/ instead of Google's CDN (fonts.googleapis.com / fonts.gstatic.com), so the browser never contacts a Google server just to render text — no IP address is transmitted to a third party without consent, satisfying GDPR/DSGVO Art. 6 (see LG München I, 20.01.2022, Az. 3 O 17493/20). WOFF2 is listed first (smallest, ~97% browser support); TTF is kept as a fallback for the remaining legacy browsers. ========================================================================== */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-v20-latin-regular.woff2") format("woff2"), url("../fonts/inter-v20-latin-regular.ttf") format("truetype"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-v20-latin-500.woff2") format("woff2"), url("../fonts/inter-v20-latin-500.ttf") format("truetype"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-v20-latin-600.woff2") format("woff2"), url("../fonts/inter-v20-latin-600.ttf") format("truetype"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-v20-latin-700.woff2") format("woff2"), url("../fonts/inter-v20-latin-700.ttf") format("truetype"); } @font-face { font-family: "Sora"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/sora-v17-latin-600.woff2") format("woff2"), url("../fonts/sora-v17-latin-600.ttf") format("truetype"); } @font-face { font-family: "Sora"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/sora-v17-latin-700.woff2") format("woff2"), url("../fonts/sora-v17-latin-700.ttf") format("truetype"); } /* ========================================================================== DPaaS Landing Page — Custom Styles Design system: color & type tokens are defined once as CSS custom properties, then mapped onto MDB5's own variables (--mdb-*) so that native MDB/Bootstrap components (buttons, navbar, accordion, forms) inherit the brand automatically without per-component overrides. Theming: light is the default; [data-mdb-theme="dark"] on flips every --dpaas-* token to its dark counterpart. Brand gradient (indigo → violet) and the teal automation accent stay constant across themes. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Design tokens — light (default) -------------------------------------------------------------------------- */ :root, [data-mdb-theme="light"] { /* Brand gradient — premium enterprise identity, constant across themes */ --dpaas-accent-1: #4338CA; /* indigo-700 */ --dpaas-accent-2: #7C3AED; /* violet-600 */ --dpaas-accent-grad: linear-gradient(135deg, var(--dpaas-accent-1) 0%, var(--dpaas-accent-2) 100%); --dpaas-teal: #0A7167; /* automation / efficiency accent (darkened from #0D9488 for WCAG AA text contrast) */ --dpaas-navy: #1E1B4B; /* headings */ --dpaas-navy-dark: #14123A; --dpaas-blue: #4338CA; /* interactive accent: links, icons */ --dpaas-bg: #F6F6FB; --dpaas-surface: #FFFFFF; --dpaas-surface-alt: #EEEEF8; --dpaas-border: #E1E1F0; --dpaas-text: #14132B; --dpaas-text-muted: #56567A; --dpaas-header-bg: rgba(255, 255, 255, 0.78); --dpaas-header-border: rgba(20, 19, 43, 0.08); --dpaas-dark: #0B0A1F; /* footer / permanently dark sections */ --dpaas-dark-text: #C7C6E0; --dpaas-shadow-color: 17, 15, 55; color-scheme: light; } [data-mdb-theme="dark"] { --dpaas-accent-1: #6D6AF5; --dpaas-accent-2: #9D5CF5; --dpaas-accent-grad: linear-gradient(135deg, var(--dpaas-accent-1) 0%, var(--dpaas-accent-2) 100%); --dpaas-teal: #2DD4BF; --dpaas-navy: #F5F5FF; --dpaas-navy-dark: #FFFFFF; --dpaas-blue: #A5A0FF; --dpaas-bg: #07061A; --dpaas-surface: #0F0E28; --dpaas-surface-alt: #14132F; --dpaas-border: rgba(255, 255, 255, 0.09); --dpaas-text: #EEEEFA; --dpaas-text-muted: #A5A3C6; --dpaas-header-bg: rgba(7, 6, 26, 0.72); --dpaas-header-border: rgba(255, 255, 255, 0.08); --dpaas-dark: #050414; --dpaas-dark-text: #A5A3C6; --dpaas-shadow-color: 0, 0, 0; color-scheme: dark; } :root { /* Type */ --font-display: "Sora", "Segoe UI", sans-serif; --font-body: "Inter", "Segoe UI", sans-serif; /* Motion */ --transition-base: 180ms ease; /* Space reserved at the top of for the fixed floating header; the mobile nav panel below also aligns to this so both stay in sync. */ --header-offset: 5.75rem; /* -- Map onto Bootstrap 5.3 CSS variables ------------------------------ */ --mdb-body-font-family: var(--font-body); --mdb-body-color: var(--dpaas-text); --mdb-body-bg: var(--dpaas-bg); --mdb-border-color: var(--dpaas-border); --mdb-primary: var(--dpaas-accent-1); --mdb-primary-rgb: 67, 56, 202; --mdb-link-color: var(--dpaas-blue); --mdb-link-hover-color: var(--dpaas-accent-2); } /* -------------------------------------------------------------------------- CookieConsent (orestbida/vanilla-cookieconsent) theme overrides The vendor stylesheet (assets/css/cookieconsent.css) is themeable purely through --cc-* custom properties, so instead of editing that file we just re-point its variables at the site's own --dpaas-* tokens here. Colors were chosen and contrast-checked (WCAG AA) per theme rather than reused verbatim from --dpaas-accent-1/2, since those tokens' *dark*-mode values are deliberately pastel (meant for text on a dark background) and fail AA when used as a button fill behind white text; teal already exists site-wide as a strong-contrast, brand-appropriate alternative for both themes and reads as an "action" color distinct from navigation. */[data-mdb-theme="light"] { --cc-font-family: var(--font-body); --cc-modal-border-radius: 1rem; --cc-btn-border-radius: 0.6rem; --cc-bg: var(--dpaas-surface); --cc-primary-color: var(--dpaas-text); --cc-secondary-color: var(--dpaas-text-muted); --cc-link-color: var(--dpaas-blue); --cc-btn-primary-bg: #0A7167; --cc-btn-primary-color: #FFFFFF; --cc-btn-primary-hover-bg: #085E56; --cc-btn-secondary-bg: var(--dpaas-surface-alt); --cc-btn-secondary-color: var(--dpaas-text); --cc-btn-secondary-hover-bg: var(--dpaas-border); --cc-separator-border-color: var(--dpaas-border); --cc-cookie-category-block-bg: var(--dpaas-surface-alt); --cc-cookie-category-block-border: var(--dpaas-border); --cc-cookie-category-block-hover-bg: var(--dpaas-border); --cc-toggle-on-bg: #0A7167; --cc-toggle-off-bg: var(--dpaas-text-muted); --cc-overlay-bg: rgba(20, 19, 43, 0.55); --cc-footer-bg: var(--dpaas-surface-alt); --cc-footer-color: var(--dpaas-text-muted); --cc-footer-border-color: var(--dpaas-border); } [data-mdb-theme="dark"] { --cc-font-family: var(--font-body); --cc-modal-border-radius: 1rem; --cc-btn-border-radius: 0.6rem; --cc-bg: var(--dpaas-surface); --cc-primary-color: var(--dpaas-text); --cc-secondary-color: var(--dpaas-text-muted); --cc-link-color: var(--dpaas-blue); --cc-btn-primary-bg: #2DD4BF; --cc-btn-primary-color: #0B0A1F; --cc-btn-primary-hover-bg: #5EEADB; --cc-btn-secondary-bg: var(--dpaas-surface-alt); --cc-btn-secondary-color: var(--dpaas-text); --cc-btn-secondary-hover-bg: var(--dpaas-border); --cc-separator-border-color: var(--dpaas-border); --cc-cookie-category-block-bg: var(--dpaas-surface-alt); --cc-cookie-category-block-border: var(--dpaas-border); --cc-cookie-category-block-hover-bg: var(--dpaas-border); --cc-toggle-on-bg: #2DD4BF; --cc-toggle-on-knob-bg: #0B0A1F; --cc-toggle-off-bg: var(--dpaas-text-muted); --cc-overlay-bg: rgba(0, 0, 0, 0.7); --cc-footer-bg: var(--dpaas-surface-alt); --cc-footer-color: var(--dpaas-text-muted); --cc-footer-border-color: var(--dpaas-border); } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--dpaas-text); background-color: var(--dpaas-bg); transition: background-color var(--transition-base), color var(--transition-base); } h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display-heading { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; color: var(--dpaas-navy); } p { color: var(--dpaas-text-muted); } /* Respect reduced-motion preference site-wide */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Visible keyboard focus ring everywhere (WCAG 2.4.7) */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .nav-link:focus-visible, .accordion-button:focus-visible { outline: 3px solid var(--dpaas-teal); outline-offset: 2px; } /* Bootstrap's own ".btn:focus" rule sets "outline: 0" (relying on its own box-shadow ring instead) and has higher specificity than the plain "a:focus-visible" rule above, so it otherwise wins and hides the focus ring on any button-styled link (e.g. the header's "Enterprise-Demo" CTA). Restore it explicitly at matching specificity. */ .btn:focus-visible { outline: 3px solid var(--dpaas-teal); outline-offset: 2px; } /* Skip-to-content link, visible only on keyboard focus */ .skip-link { position: absolute; top: -48px; left: 1rem; z-index: 2000; padding: 0.6rem 1rem; background: var(--dpaas-accent-grad); color: #fff; border-radius: 0 0 0.5rem 0.5rem; transition: top var(--transition-base); } .skip-link:focus { top: 0; color: #fff; } /* -------------------------------------------------------------------------- 3. Layout helpers -------------------------------------------------------------------------- */ .section { padding-block: clamp(3.5rem, 6vw, 6.5rem); } .section-alt { background-color: var(--dpaas-surface-alt); } .section-dark { background-color: var(--dpaas-dark); color: var(--dpaas-dark-text); } .section-dark h2, .section-dark h3 { color: #fff; } .section-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dpaas-teal); margin-bottom: 0.9rem; } .section-eyebrow::before { content: ""; width: 1.5rem; height: 2px; background: currentColor; display: inline-block; } /* Pill badge — used for the hero chip, integration badges, tags */ .has-tooltip { cursor: help; } .badge-pill-dpaas { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 1rem; border-radius: 999px; border: 1px solid var(--dpaas-border); background: var(--dpaas-surface); font-size: 0.8rem; font-weight: 600; color: var(--dpaas-text); box-shadow: 0 1px 2px rgba(var(--dpaas-shadow-color), 0.06); } .badge-pill-dpaas .dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--dpaas-accent-grad); flex: none; } .container-narrow { max-width: 46rem; } /* -------------------------------------------------------------------------- 4. Header / navbar — floating glass pill, inspired by tailscan.com -------------------------------------------------------------------------- */ .site-header { position: fixed; inset-inline: 0; top: 0; z-index: 1030; padding-top: 1rem; } .navbar-dpaas { position: relative; background-color: var(--dpaas-header-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--dpaas-header-border); border-radius: 999px; padding-block: 0.55rem; padding-inline: 0.65rem 0.9rem; box-shadow: 0 12px 32px -18px rgba(var(--dpaas-shadow-color), 0.35); transition: box-shadow var(--transition-base), background-color var(--transition-base); } /* Glossy glass highlight along the top edge — a thin, soft light streak that sells the "frosted glass pill" feel without any extra markup. NOTE: the navbar itself must NOT use overflow:hidden to achieve this (that would also clip the mobile nav collapse panel and the language dropdown menu, both of which need to render outside the pill's own box) — instead, the highlight gets its own matching rounded top corners so it never pokes out past the pill's silhouette. */ .navbar-dpaas::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 50%; border-radius: 999px 999px 0 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.35), transparent); opacity: 0.5; pointer-events: none; z-index: 0; } [data-mdb-theme="dark"] .navbar-dpaas::before { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.10), transparent); } .navbar-dpaas.is-scrolled { box-shadow: 0 16px 40px -16px rgba(var(--dpaas-shadow-color), 0.45); } .navbar-brand-dpaas { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--dpaas-navy); } .navbar-brand-dpaas img { width: 2.25rem; height: 2.25rem; border-radius: 0.6rem; object-fit: contain; background: var(--dpaas-surface-alt); padding: 0.3rem; } .navbar-brand-dpaas small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.65rem; color: var(--dpaas-text-muted); letter-spacing: 0.04em; } .navbar-dpaas .nav-link { font-weight: 500; font-size: 0.92rem; color: var(--dpaas-text); padding-inline: 0.85rem; transition: background-color var(--transition-base), color var(--transition-base); } .navbar-dpaas .nav-link.active, .navbar-dpaas .nav-link:hover { color: var(--dpaas-accent-1); } .navbar-actions { display: flex; align-items: center; gap: 0.6rem; } /* Theme toggle button */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--dpaas-border); background: var(--dpaas-surface); color: var(--dpaas-text); flex: none; transition: background-color var(--transition-base), transform var(--transition-base); } .theme-toggle:hover { transform: translateY(-1px); } .theme-toggle svg { width: 1.15rem; height: 1.15rem; } .theme-toggle .icon-sun { display: none; } [data-mdb-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-mdb-theme="dark"] .theme-toggle .icon-moon { display: none; } /* Language switcher (round button, reuses .theme-toggle look) + dropdown */ .lang-switcher { position: relative; } .lang-toggle { /* Inherits size/shape from .theme-toggle; no extra rules needed. */ } .lang-menu.dropdown-menu { min-width: 11rem; padding: 0.4rem; border: 1px solid var(--dpaas-border); border-radius: 0.9rem; background: var(--dpaas-surface); box-shadow: 0 20px 40px -18px rgba(var(--dpaas-shadow-color), 0.45); } .lang-option.dropdown-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.7rem; border-radius: 0.6rem; font-size: 0.92rem; font-weight: 500; color: var(--dpaas-text); } .lang-option.dropdown-item:hover, .lang-option.dropdown-item:focus-visible { background-color: var(--dpaas-surface-alt); color: var(--dpaas-text); } .lang-option.dropdown-item.active { background-color: var(--dpaas-surface-alt); color: var(--dpaas-accent-1); font-weight: 600; } .lang-flag { width: 1.35rem; height: 0.9rem; flex: none; border-radius: 0.15rem; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); overflow: hidden; } .lang-label { flex: 1; } /* --- Mobile menu panel --------------------------------------------------- Below the "lg" breakpoint the collapsed menu detaches from the floating pill (which stays compact) and instead opens as a full viewport-width panel directly under the header, with menu items stacked one per row and a soft hover highlight. */ @media (max-width: 991.98px) { .navbar-collapse { position: fixed; top: var(--header-offset); left: 0; right: 0; width: 100%; margin: 0; max-height: calc(100vh - var(--header-offset)); overflow-y: auto; background: var(--dpaas-surface); border-top: 1px solid var(--dpaas-border); border-bottom: 1px solid var(--dpaas-border); box-shadow: 0 24px 48px -24px rgba(var(--dpaas-shadow-color), 0.45); padding: 0.5rem 0; z-index: 1029; } .navbar-dpaas .navbar-nav { width: 100%; margin: 0 !important; } .navbar-dpaas .nav-item { width: 100%; } .navbar-dpaas .nav-item + .nav-item { border-top: 1px solid var(--dpaas-border); } .navbar-dpaas .nav-link { display: block; width: 100%; padding: 1rem 1.5rem; border-radius: 0; } .navbar-dpaas .nav-link:hover, .navbar-dpaas .nav-link:focus-visible { background-color: var(--dpaas-surface-alt); color: var(--dpaas-accent-1); } .navbar-dpaas .nav-item.d-sm-none { padding: 0.75rem 1.5rem 0.25rem; } } /* Body padding so the fixed floating header never overlaps content */ body { padding-top: var(--header-offset); } /* -------------------------------------------------------------------------- 5. Buttons -------------------------------------------------------------------------- */ .btn { font-weight: 600; border-radius: 999px; padding-inline: 1.5rem; } .btn-primary { position: relative; background: var(--dpaas-accent-grad); border: none; box-shadow: 0 10px 24px -10px rgba(var(--dpaas-shadow-color), 0.55); overflow: hidden; isolation: isolate; } .btn-primary:hover, .btn-primary:focus { filter: brightness(1.08); box-shadow: 0 14px 28px -10px rgba(var(--dpaas-shadow-color), 0.65); } /* Glossy "shine sweep" — a soft diagonal light streak that travels across the button on hover, a classic tactile glass/CTA flourish. */ .btn-primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: skewX(-20deg); transition: left 650ms ease; pointer-events: none; z-index: 1; } .btn-primary:hover::after { left: 130%; } @media (prefers-reduced-motion: reduce) { .btn-primary::after { transition: none; display: none; } } .btn-outline-light-dpaas { border: 1px solid var(--dpaas-border); color: var(--dpaas-text); background: var(--dpaas-surface); } .btn-outline-light-dpaas:hover { background: var(--dpaas-surface-alt); color: var(--dpaas-text); } /* -------------------------------------------------------------------------- 6. Hero -------------------------------------------------------------------------- */ .hero { position: relative; padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(3rem, 7vw, 5.5rem); overflow: hidden; } .hero::before, .hero::after { content: ""; position: absolute; pointer-events: none; z-index: 0; } /* Two independently-drifting "glass orb" gradient layers — a subtle, slow-motion aurora effect behind the hero copy. Movement is generous enough to read as alive without ever distracting from the text. */ .hero::before { inset: -10% -10% auto -10%; height: 34rem; background: radial-gradient(40rem 22rem at 15% 0%, rgba(67, 56, 202, 0.16), transparent 60%), radial-gradient(34rem 20rem at 85% 10%, rgba(124, 58, 237, 0.14), transparent 60%); animation: heroOrbDriftA 22s ease-in-out infinite alternate; } .hero::after { inset: 0 -15% auto -15%; top: 4rem; height: 30rem; background: radial-gradient(28rem 18rem at 55% 30%, rgba(45, 212, 191, 0.10), transparent 65%); animation: heroOrbDriftB 28s ease-in-out infinite alternate; } [data-mdb-theme="dark"] .hero::before { background: radial-gradient(40rem 22rem at 15% 0%, rgba(109, 106, 245, 0.22), transparent 60%), radial-gradient(34rem 20rem at 85% 10%, rgba(157, 92, 245, 0.18), transparent 60%); } [data-mdb-theme="dark"] .hero::after { background: radial-gradient(28rem 18rem at 55% 30%, rgba(45, 212, 191, 0.16), transparent 65%); } @keyframes heroOrbDriftA { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(3%, 4%) scale(1.06); } } @keyframes heroOrbDriftB { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-4%, -3%) scale(1.08); } } @media (prefers-reduced-motion: reduce) { .hero::before, .hero::after { animation: none; } } .hero .container { position: relative; z-index: 1; } .hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); line-height: 1.1; } .hero-lead { font-size: 1.15rem; max-width: 42rem; } .hero-stats { border-top: 1px solid var(--dpaas-border); margin-top: clamp(2rem, 5vw, 3.5rem); padding-top: 1.75rem; } .hero-stats dt { font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 700; color: var(--dpaas-navy); } .hero-stats dd { font-size: 0.85rem; color: var(--dpaas-text-muted); margin-bottom: 0; } /* Trust strip under the hero */ .trust-strip { display: flex; flex-wrap: wrap; gap: 0.6rem; } /* -------------------------------------------------------------------------- 6b. Signature element — the product demo "window" with click-to-play video -------------------------------------------------------------------------- */ .video-frame { position: relative; border-radius: 1.1rem; overflow: hidden; background: var(--dpaas-surface); border: 1px solid var(--dpaas-border); box-shadow: 0 32px 64px -28px rgba(var(--dpaas-shadow-color), 0.45); } .video-frame::before { content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; background: var(--dpaas-accent-grad); opacity: 0.35; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .video-frame-bar { position: relative; display: flex; align-items: center; gap: 0.4rem; padding: 0.7rem 1rem; background: var(--dpaas-surface-alt); border-bottom: 1px solid var(--dpaas-border); } .video-frame-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--dpaas-border); } .video-frame-url { margin-inline-start: 0.75rem; font-size: 0.75rem; color: var(--dpaas-text-muted); font-family: var(--font-body); } .video-frame-body { position: relative; aspect-ratio: 16 / 9; background: radial-gradient(60% 80% at 50% 0%, rgba(124, 58, 237, 0.16), transparent 70%), var(--dpaas-navy-dark, #14123A); display: flex; align-items: center; justify-content: center; } [data-mdb-theme="dark"] .video-frame-body { background: radial-gradient(60% 80% at 50% 0%, rgba(157, 92, 245, 0.2), transparent 70%), #05041a; } .video-frame-body::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 2.5rem 2.5rem; opacity: 0.5; pointer-events: none; } .video-frame-caption { position: absolute; left: 1.25rem; bottom: 1.25rem; color: rgba(255, 255, 255, 0.85); font-size: 0.85rem; font-weight: 600; z-index: 1; } .video-play-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; border: none; background: var(--dpaas-accent-grad); color: #fff; box-shadow: 0 16px 32px -12px rgba(67, 56, 202, 0.65); transition: transform var(--transition-base); } .video-play-btn:hover { transform: scale(1.06); } .video-play-btn svg { width: 1.6rem; height: 1.6rem; margin-left: 0.2rem; } .video-frame-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video-frame-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; } .video-frame-body.is-playing::after, .video-frame-body.is-playing .video-frame-caption { display: none; } /* --- Signature element (legacy): the document pipeline, now used in the "So funktioniert's" aside ---------------------------------------- */ .pipeline { position: relative; background: var(--dpaas-surface); border: 1px solid var(--dpaas-border); border-radius: 1rem; padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2rem) 1.75rem; box-shadow: 0 24px 48px -32px rgba(var(--dpaas-shadow-color), 0.35); } .pipeline-track { position: relative; height: 4px; background: var(--dpaas-border); border-radius: 999px; margin: 0 1.4rem 1.75rem; overflow: hidden; } .pipeline-progress { position: absolute; inset-block: 0; left: 0; width: 40%; border-radius: 999px; background: var(--dpaas-accent-grad); animation: pipeline-flow 5s ease-in-out infinite; } @keyframes pipeline-flow { 0% { left: -40%; } 60% { left: 100%; } 100% { left: 100%; } } @media (prefers-reduced-motion: reduce) { .pipeline-progress { animation: none; left: 0; width: 100%; } } .pipeline-stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; list-style: none; margin: 0; padding: 0; text-align: center; } .pipeline-stages li { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .stage-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--dpaas-surface-alt); color: var(--dpaas-accent-1); } .stage-icon svg { width: 1.35rem; height: 1.35rem; } .stage-label { font-size: 0.8rem; font-weight: 600; color: var(--dpaas-text); } @media (max-width: 575.98px) { .stage-label { font-size: 0.7rem; } } /* -------------------------------------------------------------------------- 7. Feature cards -------------------------------------------------------------------------- */ .feature-card { height: 100%; padding: 1.75rem; background: var(--dpaas-surface); border: 1px solid var(--dpaas-border); border-radius: 1rem; transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); } .feature-card:hover { transform: translateY(-4px); border-color: rgba(124, 58, 237, 0.35); box-shadow: 0 20px 32px -24px rgba(var(--dpaas-shadow-color), 0.4); } /* Vorher / Nachher comparison cards */ .before-after-card { height: 100%; padding: 1.75rem; border-radius: 1rem; border: 1px solid var(--dpaas-border); } .before-after-card--before { background: var(--dpaas-surface-alt); opacity: 0.85; } .before-after-card--after { background: var(--dpaas-surface); border: 2px solid transparent; background-image: linear-gradient(var(--dpaas-surface), var(--dpaas-surface)), var(--dpaas-accent-grad); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: 0 24px 48px -30px rgba(var(--dpaas-shadow-color), 0.4); } .before-after-label { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 1.1rem; } .before-after-card--before .before-after-label { color: var(--dpaas-text-muted); } .before-after-card--after .before-after-label { color: var(--dpaas-accent-1); } .before-after-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; } .before-after-steps li { position: relative; padding-left: 1.6rem; font-size: 0.92rem; color: var(--dpaas-text); } .before-after-card--before .before-after-steps li::before { content: ""; position: absolute; left: 0; top: 0.4rem; width: 0.55rem; height: 0.55rem; border-radius: 50%; border: 2px solid var(--dpaas-text-muted); } .before-after-card--after .before-after-steps li::before { content: ""; position: absolute; left: 0; top: 0.15rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--dpaas-teal); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 65% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 65% no-repeat; } .feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 0.75rem; background: rgba(124, 58, 237, 0.12); color: var(--dpaas-accent-1); margin-bottom: 1rem; } .feature-icon svg { width: 1.5rem; height: 1.5rem; } /* -------------------------------------------------------------------------- 8. Process steps ("So funktioniert's") -------------------------------------------------------------------------- */ .process-step { position: relative; padding-left: 3.75rem; } .process-step .step-number { position: absolute; left: 0; top: 0; width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--dpaas-accent-grad); color: #fff; font-family: var(--font-display); font-weight: 700; } .process-step:not(:last-child)::before { content: ""; position: absolute; left: 1.35rem; top: 2.75rem; bottom: -1.5rem; width: 2px; background: var(--dpaas-border); } /* -------------------------------------------------------------------------- 8c. IDP process tabs ("So funktioniert's — visuell") -------------------------------------------------------------------------- */ .idp-tabs { border-bottom: 1px solid var(--dpaas-border); gap: 0.25rem; } .idp-tabs .nav-link { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.75rem 1.1rem; border: 0; border-bottom: 2px solid transparent; border-radius: 0; font-weight: 600; color: var(--dpaas-text-muted); background: transparent; transition: color var(--transition-base), border-color var(--transition-base); } .idp-tabs .nav-link i { width: 1.25rem; font-size: 1.1rem; text-align: center; flex: none; } .idp-tabs .nav-link:hover { color: var(--dpaas-text); } .idp-tabs .nav-link.active { color: var(--dpaas-accent-1); border-bottom-color: var(--dpaas-accent-1); background: transparent; } .idp-tab-content p { margin-bottom: 1.25rem; } .idp-figure-trigger { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; text-align: left; } .idp-figure-img { display: block; width: 100%; border-radius: 1rem; border: 1px solid var(--dpaas-border); background: var(--dpaas-surface); box-shadow: 0 20px 40px -24px rgba(var(--dpaas-shadow-color), 0.4); transition: transform var(--transition-base), box-shadow var(--transition-base); } .idp-figure-trigger:hover .idp-figure-img, .idp-figure-trigger:focus-visible .idp-figure-img { transform: translateY(-2px); box-shadow: 0 28px 52px -24px rgba(var(--dpaas-shadow-color), 0.5); } /* Enlarge-view modal: let the illustration breathe, minimal chrome */ .idp-modal .modal-content { background: var(--dpaas-surface); border-radius: 1.1rem; border: 1px solid var(--dpaas-border); } .idp-modal .modal-header { border-bottom: 0; padding-bottom: 0; } .idp-modal .modal-body { padding-top: 0.5rem; } .idp-modal .modal-body img { display: block; border-radius: 0.75rem; } /* -------------------------------------------------------------------------- 8b. Product tour — vertical video tabs -------------------------------------------------------------------------- */ .tour-tablist { position: relative; display: flex; flex-direction: column; gap: 0.5rem; padding-left: 1.75rem; border-left: 1px solid var(--dpaas-border); } .tour-tablist-indicator { position: absolute; left: -1px; width: 3px; border-radius: 999px; background: var(--dpaas-accent-grad); transition: top var(--transition-base), height var(--transition-base); } .tour-tab { display: flex; align-items: flex-start; gap: 0.9rem; width: 100%; padding: 0.9rem 1rem; border: 0; background: transparent; border-radius: 0.9rem; text-align: left; color: var(--dpaas-text); opacity: 0.6; cursor: pointer; transition: background-color var(--transition-base), opacity var(--transition-base); } .tour-tab:hover { opacity: 1; background-color: var(--dpaas-surface-alt); } .tour-tab.active { opacity: 1; background-color: var(--dpaas-surface-alt); } .tour-tab-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; background: rgba(124, 58, 237, 0.12); color: var(--dpaas-accent-1); transition: background-color var(--transition-base), color var(--transition-base); } .tour-tab-icon svg { width: 1.35rem; height: 1.35rem; } .tour-tab.active .tour-tab-icon { background: var(--dpaas-accent-grad); color: #fff; } .tour-tab-text { display: flex; flex-direction: column; gap: 0.3rem; } .tour-tab-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--dpaas-navy); } .tour-tab-subtitle { font-size: 0.85rem; line-height: 1.55; color: var(--dpaas-text-muted); } .tour-panels { position: relative; height: 100%; } .tour-panel { height: 100%; } .tour-panel[hidden] { display: none; } .tour-video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 1.1rem; overflow: hidden; background: radial-gradient(60% 80% at 50% 0%, rgba(124, 58, 237, 0.16), transparent 70%), var(--dpaas-navy-dark, #14123A); border: 1px solid var(--dpaas-border); box-shadow: 0 32px 64px -28px rgba(var(--dpaas-shadow-color), 0.45); } /* Purely decorative "select a tab to preview" hint shown only while the frame has no iframe child yet (before the first interaction). Uses a background-image (not text content), so nothing is exposed to assistive technologies — the tabs themselves already carry the accessible names/state via aria-selected. */ .tour-video-frame:empty::after { content: ""; position: absolute; inset: 0; margin: auto; width: 4rem; height: 4rem; border-radius: 50%; background-color: rgba(255, 255, 255, 0.12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 56% center; background-size: 1.6rem; pointer-events: none; } .tour-video-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } @media (max-width: 991.98px) { .tour-video-frame { margin-top: 0.5rem; } } /* -------------------------------------------------------------------------- 9. Audience / use-case cards -------------------------------------------------------------------------- */ .audience-card { height: 100%; display: flex; flex-direction: column; border-radius: 1rem; border: 1px solid var(--dpaas-border); background: var(--dpaas-surface); overflow: hidden; } .audience-card .audience-tag { align-self: flex-start; display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dpaas-teal); background: rgba(10, 113, 103, 0.12); padding: 0.2rem 0.6rem; border-radius: 999px; margin-bottom: 0.75rem; } .audience-card p { flex: 1; } .audience-cta { align-self: flex-start; display: inline-block; margin-top: 1rem; font-weight: 600; font-size: 0.9rem; color: var(--dpaas-blue); } .audience-cta:hover { text-decoration: underline; } /* -------------------------------------------------------------------------- 10. Stats / benefits band -------------------------------------------------------------------------- */ .stat-block { text-align: center; padding: 1.5rem 1rem; } .stat-block .stat-value { font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 700; background: var(--dpaas-accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; } .stat-block .stat-label { margin-top: 0.5rem; font-size: 0.9rem; color: var(--dpaas-text-muted); } /* -------------------------------------------------------------------------- 11. Integrations -------------------------------------------------------------------------- */ .integration-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 8.5rem; padding: 0.75rem 1.25rem; background: var(--dpaas-surface); border: 1px solid var(--dpaas-border); border-radius: 0.6rem; font-family: var(--font-display); font-weight: 600; color: var(--dpaas-navy); } /* -------------------------------------------------------------------------- 11b. Pricing -------------------------------------------------------------------------- */ /* Billing period toggle (Monatlich / Jährlich) */ .pricing-billing-toggle { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.3rem; border-radius: 999px; background: var(--dpaas-surface); border: 1px solid var(--dpaas-border); } .pricing-billing-option { display: inline-flex; align-items: center; gap: 0.45rem; border: 0; background: transparent; padding: 0.55rem 1.1rem; border-radius: 999px; font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; color: var(--dpaas-text-muted); cursor: pointer; transition: background-color var(--transition-base), color var(--transition-base); } .pricing-billing-option:hover { color: var(--dpaas-text); } .pricing-billing-option.active { background: var(--dpaas-accent-grad); color: #fff; box-shadow: 0 10px 24px -14px rgba(var(--dpaas-shadow-color), 0.6); } .pricing-billing-save { font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 999px; background: rgba(10, 113, 103, 0.14); color: var(--dpaas-teal); white-space: nowrap; } .pricing-billing-option.active .pricing-billing-save { background: rgba(255, 255, 255, 0.25); color: #fff; } .pricing-billing-hint { opacity: 0.9; } /* Pricing cards */ .pricing-card { position: relative; height: 100%; display: flex; flex-direction: column; padding: 2rem; border-radius: 1.25rem; border: 1px solid var(--dpaas-border); background: var(--dpaas-surface); transition: transform var(--transition-base), box-shadow var(--transition-base); } .pricing-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgba(var(--dpaas-shadow-color), 0.4); } .pricing-card.is-highlighted { border: 2px solid transparent; background: linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)) padding-box, var(--dpaas-accent-grad) border-box; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 32px 64px -26px rgba(var(--dpaas-shadow-color), 0.5); } [data-mdb-theme="dark"] .pricing-card.is-highlighted { background: linear-gradient(rgba(15, 14, 40, 0.6), rgba(15, 14, 40, 0.6)) padding-box, var(--dpaas-accent-grad) border-box; } /* Soft glowing blur "behind the glass", peeking out around the card edges — reinforces the frosted-glass read without hurting contrast, since it only affects what's visually behind/around the panel. */ .pricing-card.is-highlighted::before { content: ""; position: absolute; inset: -1.5rem; z-index: -1; background: var(--dpaas-accent-grad); filter: blur(2.5rem); opacity: 0.22; border-radius: inherit; } .pricing-card-badge { position: absolute; top: -0.9rem; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--dpaas-accent-grad); color: #fff; border: 0; } .pricing-card-name { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--dpaas-navy); margin-bottom: 0.5rem; } .pricing-card-desc { color: var(--dpaas-text-muted); font-size: 0.92rem; min-height: 3.4rem; margin-bottom: 1.5rem; } .pricing-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.55rem; } .pricing-price-original { font-size: 1.1rem; font-weight: 600; color: var(--dpaas-text-muted); text-decoration: line-through; display: none; } .pricing-price-value { font-family: var(--font-display); font-weight: 700; font-size: 2.65rem; color: var(--dpaas-navy); line-height: 1; } .pricing-price-period { color: var(--dpaas-text-muted); font-size: 0.95rem; } .pricing-price-custom { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; color: var(--dpaas-navy); margin-bottom: 0.1rem; } .pricing-billed-note { margin: 0.2rem 0 0; } .pricing-billed-note[hidden] { display: none; } .pricing-users-note { font-size: 0.85rem; color: var(--dpaas-text-muted); margin: 0.4rem 0 1.5rem; } .pricing-cta { width: 100%; margin-bottom: 1.75rem; } .pricing-features { list-style: none; margin: 0; padding-top: 1.5rem; border-top: 1px solid var(--dpaas-border); display: flex; flex-direction: column; gap: 0.85rem; } .pricing-feature { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.88rem; color: var(--dpaas-text); } .pricing-feature-icon { flex: none; width: 1.3rem; height: 1.3rem; margin-top: 0.05rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; } .pricing-feature-icon svg { width: 0.75rem; height: 0.75rem; } .pricing-feature-icon.is-included { background: rgba(10, 113, 103, 0.15); color: var(--dpaas-teal); } .pricing-feature-icon.is-excluded { background: var(--dpaas-surface-alt); color: var(--dpaas-text-muted); } .pricing-feature-label { flex: 1; line-height: 1.45; } .pricing-tooltip-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; margin-top: 0.05rem; padding: 0; border: 0; background: transparent; color: var(--dpaas-text-muted); cursor: help; transition: color var(--transition-base); } .pricing-tooltip-btn:hover, .pricing-tooltip-btn:focus-visible { color: var(--dpaas-accent-1); } .pricing-tooltip-btn svg { width: 100%; height: 100%; } /* Tooltip content is HTML (bold text etc.); keep line length readable */ .tooltip.pricing-tooltip .tooltip-inner, .tooltip .tooltip-inner { max-width: 15rem; text-align: left; font-size: 0.8rem; line-height: 1.5; } /* -------------------------------------------------------------------------- 12. Testimonial -------------------------------------------------------------------------- */ .testimonial-card { background: var(--dpaas-surface); border: 1px solid var(--dpaas-border); border-radius: 1rem; padding: clamp(1.75rem, 3vw, 3rem); } .testimonial-quote { font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--dpaas-navy); line-height: 1.5; } .testimonial-avatar { width: 3rem; height: 3rem; border-radius: 50%; background: var(--dpaas-accent-grad); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; color: #fff; } .testimonial-carousel { position: relative; } .testimonial-carousel-viewport { position: relative; } .testimonial-slide[hidden] { display: none; } .testimonial-carousel-controls { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 2rem; } .testimonial-carousel-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--dpaas-border); background: var(--dpaas-surface); color: var(--dpaas-text); flex: none; transition: background-color var(--transition-base), transform var(--transition-base), border-color var(--transition-base); } .testimonial-carousel-btn:hover { border-color: rgba(124, 58, 237, 0.35); transform: translateY(-1px); } .testimonial-carousel-btn svg { width: 1.15rem; height: 1.15rem; } .testimonial-dots { display: flex; align-items: center; gap: 0.55rem; } .testimonial-dot { width: 0.6rem; height: 0.6rem; padding: 0; border: 0; border-radius: 50%; background: var(--dpaas-text-muted); cursor: pointer; transition: background-color var(--transition-base), transform var(--transition-base); } .testimonial-dot:hover { background: var(--dpaas-accent-2); } .testimonial-dot.active { background: var(--dpaas-accent-grad); transform: scale(1.35); } @media (prefers-reduced-motion: reduce) { .testimonial-carousel-btn, .testimonial-dot { transition: none; } } /* -------------------------------------------------------------------------- 13. FAQ accordion -------------------------------------------------------------------------- */ .accordion-dpaas .accordion-item { background: var(--dpaas-surface); border: 1px solid var(--dpaas-border); border-radius: 0.75rem !important; overflow: hidden; margin-bottom: 0.75rem; } .accordion-dpaas .accordion-button { font-family: var(--font-display); font-weight: 600; color: var(--dpaas-navy); background: var(--dpaas-surface); } .accordion-dpaas .accordion-button:not(.collapsed) { background-color: var(--dpaas-surface-alt); color: var(--dpaas-navy); box-shadow: none; } .accordion-dpaas .accordion-button:focus { box-shadow: none; } .accordion-dpaas .accordion-body { background: var(--dpaas-surface); color: var(--dpaas-text-muted); } /* -------------------------------------------------------------------------- 14. Final CTA band -------------------------------------------------------------------------- */ .cta-band { background: var(--dpaas-accent-grad); color: #fff; border-radius: 1.25rem; padding: clamp(2.5rem, 5vw, 4rem); } .cta-band h2 { color: #fff; } .cta-band p { color: rgba(255, 255, 255, 0.85); } /* -------------------------------------------------------------------------- 15. Contact form -------------------------------------------------------------------------- */ .form-control, .form-select { background-color: var(--dpaas-surface); border-color: var(--dpaas-border); color: var(--dpaas-text); } .form-control:focus, .form-select:focus { border-color: var(--dpaas-accent-1); box-shadow: 0 0 0 0.2rem rgba(124, 58, 237, 0.18); } .form-label { font-weight: 600; color: var(--dpaas-text); } .form-check-label a { color: var(--dpaas-blue); font-weight: 600; } /* -------------------------------------------------------------------------- 16. Footer -------------------------------------------------------------------------- */ .footer-dpaas { background-color: var(--dpaas-dark); color: var(--dpaas-dark-text); } .footer-dpaas a { color: var(--dpaas-dark-text); text-decoration: none; } .footer-dpaas p { /* The global "p { color: var(--dpaas-text-muted); }" rule directly matches every paragraph and otherwise wins over inheriting the correct light-on-dark color from .footer-dpaas, since a direct match always beats an inherited value regardless of specificity. */ color: var(--dpaas-dark-text); } .footer-dpaas a:hover, .footer-dpaas a:focus { color: #fff; text-decoration: underline; } .footer-dpaas h2, .footer-dpaas h3 { color: #fff; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; } .footer-contact-list { color: var(--dpaas-dark-text); } .footer-contact-list li { display: flex; gap: 0.6rem; align-items: flex-start; } .footer-contact-list svg { width: 1.05rem; height: 1.05rem; flex: none; margin-top: 0.15rem; color: var(--dpaas-teal); } .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); } .footer-social svg { width: 1rem; height: 1rem; } /* -------------------------------------------------------------------------- 19. ROI-Rechner -------------------------------------------------------------------------- */ .roi-tabs.justify-content-center { justify-content: center; border-bottom: 1px solid var(--dpaas-border); } .roi-slider-wrap { max-width: 32rem; margin: 0 auto; } .roi-slider-label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.5rem; font-weight: 600; } .roi-slider-value { font-family: var(--font-display); font-size: 1.1rem; color: var(--dpaas-accent-1); } .roi-slider-value small { font-family: var(--font-body); font-weight: 400; font-size: 0.75rem; color: var(--dpaas-text-muted); margin-left: 0.25rem; } .roi-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--dpaas-accent-1), var(--dpaas-teal)); outline: none; cursor: pointer; } .roi-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--dpaas-surface); border: 3px solid var(--dpaas-accent-1); box-shadow: 0 2px 8px rgba(var(--dpaas-shadow-color), 0.35); cursor: pointer; transition: transform var(--transition-base); } .roi-slider::-webkit-slider-thumb:hover { transform: scale(1.12); } .roi-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--dpaas-surface); border: 3px solid var(--dpaas-accent-1); box-shadow: 0 2px 8px rgba(var(--dpaas-shadow-color), 0.35); cursor: pointer; } .roi-slider-scale { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--dpaas-text-muted); margin-top: 0.35rem; } .roi-result-card { height: 100%; padding: 1.5rem; border-radius: 1rem; border: 1px solid var(--dpaas-border); text-align: center; } .roi-result-card--manual { background: var(--dpaas-surface-alt); opacity: 0.9; } .roi-result-card--dpaas { background: var(--dpaas-surface); border: 2px solid transparent; background-image: linear-gradient(var(--dpaas-surface), var(--dpaas-surface)), var(--dpaas-accent-grad); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: 0 24px 48px -30px rgba(var(--dpaas-shadow-color), 0.4); } .roi-result-label { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 1rem; } .roi-result-card--manual .roi-result-label { color: var(--dpaas-text-muted); } .roi-result-card--dpaas .roi-result-label { color: var(--dpaas-accent-1); } .roi-result-value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--dpaas-text); margin-bottom: 0; line-height: 1.2; } .roi-result-sub { font-size: 0.8rem; color: var(--dpaas-text-muted); margin-bottom: 1rem; } .roi-result-sub:last-child { margin-bottom: 0; } .roi-savings-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1.75rem; margin-top: 1.5rem; padding: 1.1rem 1.5rem; border-radius: 1rem; background: rgba(45, 212, 191, 0.12); text-align: center; } .roi-savings-label { font-family: var(--font-display); font-weight: 700; color: var(--dpaas-teal); text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.03em; } .roi-savings-item strong { font-family: var(--font-display); font-size: 1.1rem; color: var(--dpaas-text); } .roi-assumption-note { text-align: center; font-size: 0.78rem; color: var(--dpaas-text-muted); margin-top: 0.9rem; margin-bottom: 0; } .roi-dpaas-assumption, .roi-error-rate, .roi-disclaimer { margin-bottom: 0.35rem; } /* ROI comparison table (per document type) */ .roi-compare-table-wrap { margin-top: 1.5rem; overflow-x: auto; border-radius: 0.9rem; border: 1px solid var(--dpaas-border); } .roi-compare-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .roi-compare-table th, .roi-compare-table td { padding: 0.65rem 1rem; text-align: left; border-bottom: 1px solid var(--dpaas-border); } .roi-compare-table thead th { background: var(--dpaas-surface-alt); font-weight: 700; font-size: 0.82rem; } .roi-compare-table tbody th { font-weight: 600; color: var(--dpaas-text-muted); white-space: nowrap; } .roi-compare-table tbody tr:last-child th, .roi-compare-table tbody tr:last-child td { border-bottom: 0; } .roi-compare-table tbody td:last-child { color: var(--dpaas-teal); font-weight: 600; } /* -------------------------------------------------------------------------- 20. Impressum-Modal (fullscreen) -------------------------------------------------------------------------- */ #imprintModal .modal-content, #privacyModal .modal-content { background: var(--dpaas-bg); } #imprintModal .modal-header, #privacyModal .modal-header { border-bottom: 1px solid var(--dpaas-border); } #imprintModal .modal-body, #privacyModal .modal-body { overflow-y: auto; } .imprint-modal-inner { max-width: 46rem; margin: 0 auto; padding-block: 1rem 3rem; } .imprint-legal-basis { font-size: 0.9rem; margin-bottom: 1.5rem; } #imprintAccordion .accordion-body p, #privacyAccordion .accordion-body p { margin-bottom: 0.9rem; } #imprintAccordion .accordion-body p:last-child, #privacyAccordion .accordion-body p:last-child { margin-bottom: 0; } #privacyAccordion .accordion-body table { width: 100%; border-collapse: collapse; margin-bottom: 1.2rem; font-size: 0.92rem; } #privacyAccordion .accordion-body table td { padding: 0.5rem 0.75rem; border: 1px solid var(--dpaas-border); } #privacyAccordion .accordion-body table tr:first-child td { background: var(--dpaas-surface-alt); }