/* ============================================================================ * LeadSuche — Master Stylesheet · Marketing Site + App Shell * Plus Jakarta Sans + Inter · blue → violet → orange-red brand gradient · * navy-to-violet dark stages · single --ds-* token namespace * * Structure: @font-face → ONE :root (all tokens) → base/reset → typography → * shared primitives (forms bridge, alerts, blog, badges) → marketing * components (one-pager, landing sections, hero) → Phase-2 ds components * (buttons, cards, forms, tables, shells, sidebar, footer) → app components * (search/filter, records, billing, detail) → late component singletons → * @media print (always last). * * Cascade rule of thumb: a component's LAST definition block is its home; * earlier blocks only carry layout-era groundwork. Never re-style a * component by appending an override layer at the end of the file — edit * its home block instead. * ============================================================================ */ /* === Plus Jakarta Sans (variable font, wght 200–800, self-hosted) === Display type, headings, buttons and navigation. */ @font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/PlusJakartaSans-VariableFont.52d04440a9fa.woff2") format("woff2-variations"), url("../fonts/PlusJakartaSans-VariableFont.52d04440a9fa.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; } /* === Display hyphen and punctuation === Plus Jakarta Sans draws its hyphen almost as wide as an en dash, which turns "DACH-Raum" into "DACH–Raum" at display sizes, and its period and comma carry a wide left bearing that the tight display tracking turns into a visible gap ("Raum ."). This face borrows only those glyphs from Inter and leads the display stack. */ @font-face { font-family: "LS Display Hyphen"; src: url("../fonts/inter/inter-latin-opsz-normal.4b73e2ff3024.woff2") format("woff2-variations"), url("../fonts/inter/inter-latin-opsz-normal.4b73e2ff3024.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+002C-002E, U+2010-2011; } /* === Inter (variable font, opsz + wght axes, Latin subset, self-hosted) === Body copy, forms and app data; the optical-size axis gives the text cut and tabular figures for prices and tables. */ @font-face { font-family: "Inter"; src: url("../fonts/inter/inter-latin-opsz-normal.4b73e2ff3024.woff2") format("woff2-variations"), url("../fonts/inter/inter-latin-opsz-normal.4b73e2ff3024.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* === Bootstrap Icons (self-hosted) === */ @font-face { font-family: "bootstrap-icons"; src: url("../fonts/bootstrap-icons/bootstrap-icons.cc1e5eda776b.woff2") format("woff2"), url("../fonts/bootstrap-icons/bootstrap-icons.ba49e8448923.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } /* === Brand Variables === */ :root { /* Bootstrap variable overrides — re-point Bootstrap's own tokens to the brand --ds-* set so framework components inherit the design system. */ --bs-primary: var(--ds-blue); --bs-primary-rgb: var(--ds-blue-rgb); --bs-link-color: var(--ds-blue); --bs-link-hover-color: var(--ds-blue-dark); --bs-body-font-family: var(--ds-font-body); --bs-body-color: var(--ds-ink); --bs-heading-color: var(--ds-ink); --bs-border-radius: var(--ds-radius-xs); --bs-border-radius-lg: var(--ds-radius-sm); --bs-border-radius-xl: var(--ds-radius-md); color-scheme: light; /* ======================================================================== * .ds-* Design System Tokens — the sole token set, defined in this ONE * :root block. Direction: the logo blue and orange-red joined by a * violet into one brand gradient, navy-to-violet dark stages for the * hero, the comparison, the closing band and the footer, white and * softly tinted light sections in between. Every text pair below was * measured against WCAG 2.x (relative luminance, 4.5:1 floor). * ====================================================================== */ /* Brand. The interactive blue sits between the logo blue (#1374ea) and the former #074eb9: white on it 6.67:1, it on white 6.67:1, on the tint 6.22:1. Links, focus rings and the start of every gradient. */ --ds-blue: #0b55c8; --ds-blue-rgb: 11, 85, 200; --ds-blue-dark: #0846a6; --ds-blue-deep: #06388a; /* Violet joins blue and orange-red. White on it 6.37:1, it on white 6.37:1, so it can end a button gradient and colour text. */ --ds-purple: #6a3fd6; --ds-purple-rgb: 106, 63, 214; --ds-purple-dark: #5730b8; --ds-purple-light: #c4b5fd; /* Logo orange-red: 3.71:1 on white, so decoration only (gradient ends, glows, hairlines), never text and never under white text. Readable red text uses --ds-red-deep (5.37:1 on white, 5.01:1 on the tint). */ --ds-red: #ee4a33; --ds-red-rgb: 238, 74, 51; --ds-red-deep: #c4362c; /* Readable accent pair for highlight badges (5.21:1). */ --ds-accent-text: #b83a12; --ds-accent-tint-bg: #fff1eb; /* Ink (text), a navy with an indigo cast. --ds-ink 17.14:1 on white and 15.99:1 on the tint; --ds-ink-soft 7.73:1 and --ds-ink-mute 5.52:1 on the tint; --ds-ink-dim is 2.90:1, icons and disabled states only. */ --ds-ink: #141a33; --ds-ink-rgb: 20, 26, 51; --ds-ink-soft: #464d6b; --ds-ink-mute: #5c6380; --ds-ink-dim: #9097b0; /* Surfaces. The light tints carry a trace of the brand blue. */ --ds-surface: #ffffff; --ds-surface-tint: #f5f7fc; --ds-surface-muted: #edf0fa; --ds-surface-3: #e3e7f3; --ds-surface-4: #cdd3e4; /* Dark stage: near-black navy, deep navy and a violet-black end stop. */ --ds-surface-dark: #0a0f1a; --ds-surface-dark-2: #0f1a30; --ds-surface-dark-violet: #1a1035; --ds-surface-dark-border: rgba(var(--ds-white-rgb), 0.1); /* Glass panels on the dark stage (cards, the comparison table). */ --ds-surface-glass: rgba(var(--ds-white-rgb), 0.05); --ds-surface-glass-strong: rgba(var(--ds-white-rgb), 0.08); --ds-border-glass: rgba(var(--ds-white-rgb), 0.12); /* Borders: solid, blue-tinted values, so a border looks the same on every light surface. --ds-border-control clears the 3:1 non-text floor (WCAG 1.4.11) a form control's outline needs (3.33:1 on white, 3.10:1 on the tint); the softer borders are dividers. */ --ds-border-subtle: #e8ebf5; --ds-border: #dde2ef; --ds-border-strong: #c5cce0; --ds-border-gray: #e3e7f3; --ds-border-control: #858ca8; /* Status (WCAG AA on --ds-surface and --ds-surface-tint) */ --ds-success: #0a7a3e; --ds-success-rgb: 10, 122, 62; --ds-warn: #b45309; --ds-warn-rgb: 180, 83, 9; --ds-danger: #c42b1f; --ds-danger-rgb: 196, 43, 31; --ds-info: #0b55c8; --ds-info-rgb: 11, 85, 200; /* Status-Tints (low-opacity backgrounds for alerts, badges, icon-halos). Use as: background: var(--ds-success-tint); color: var(--ds-success); */ --ds-success-tint: rgba(var(--ds-success-rgb), 0.1); --ds-warn-tint: rgba(var(--ds-warn-rgb), 0.1); --ds-danger-tint: rgba(var(--ds-danger-rgb), 0.1); --ds-info-tint: rgba(var(--ds-info-rgb), 0.1); /* Brighter "live/positive" green for activity dots only; never text. The status green --ds-success is reserved for text, alerts and forms. */ --ds-success-bright: #22c55e; --ds-success-bright-rgb: 34, 197, 94; /* Deep status inks for alert text on tinted alert backgrounds. */ --ds-success-deep: #0b5c30; --ds-warn-deep: #6b3e0a; /* Danger hover fill: darker than --ds-danger (white text 7.11:1). */ --ds-danger-bright: #a9241a; --ds-danger-bright-rgb: 169, 36, 26; /* Amber accent (sticky-CTA star) + bright amber channel used for warning tints on dark surfaces. */ --ds-amber: #f5a524; --ds-warn-bright-rgb: 245, 158, 11; /* Solid pastel tint pairs for ds-badge (bg + text per status), each pair at least 6.5:1. The violet pair marks brand highlights (7.47:1). */ --ds-neutral-tint-bg: #ebf0fc; --ds-neutral-tint-text: #0a44a8; --ds-violet-tint-bg: #f1ecfe; --ds-violet-tint-text: #5328c0; --ds-success-tint-bg: #e6f4ec; --ds-success-tint-text: #0b5c30; --ds-warn-tint-bg: #fdf1e2; --ds-warn-tint-text: #8a4209; --ds-danger-tint-bg: #fce9e7; --ds-danger-tint-text: #9e1f16; --ds-info-tint-bg: #ebf0fc; --ds-info-tint-text: #0a44a8; /* On the dark stage. Measured against the brightest point the mesh glows reach (#143568): strong 10.93:1, body 8.14:1, muted 5.57:1, accent 6.83:1; on the base navy all clear 8:1. --ds-ink-on-dark-subtle (5.06:1 on navy, 3.53:1 on a glow peak) is for separators and icons. */ --ds-ink-on-dark-strong: #f1f3ff; --ds-ink-on-dark-body: #cdd3ee; --ds-ink-on-dark-muted: #a6afd3; --ds-ink-on-dark-subtle: #7f89b3; --ds-ink-on-dark-accent: #9ec5ff; /* Lighter blues for dark surfaces, where --ds-blue would read as near-black (2.87:1): -glow for ambient glows, -on-dark for readable accents. Declared as channels so every use runs through rgba(). */ --ds-blue-glow-rgb: 31, 116, 236; --ds-blue-on-dark-rgb: 158, 197, 255; --ds-lavender: #c4b5fd; --ds-lavender-light: #ddd6fe; --ds-success-on-dark: #4ade80; --ds-danger-on-dark: #fca5a5; --ds-warn-on-dark: #fcd34d; --ds-info-on-dark: #9ec5ff; /* Gradients. The full brand sweep ends in the logo orange-red and is therefore decoration only (accent lines, borders, glows). Anything that carries white text or is text itself uses a stop set in which every stop clears 4.5:1: --ds-gradient-cta (white on blue 6.67:1, on violet 6.37:1), --ds-gradient-text (on white 6.67 / 6.37 / 5.37:1, on the tint 6.22 / 5.95 / 5.01:1) and --ds-gradient-text-on-dark (above 9.4:1 on the navy, 6.34:1 on a glow peak). */ --ds-gradient-brand: linear-gradient( 135deg, var(--ds-blue) 0%, var(--ds-purple) 55%, var(--ds-red) 100% ); --ds-gradient-cta: linear-gradient( 120deg, var(--ds-blue) 0%, var(--ds-purple) 100% ); --ds-gradient-cta-active: linear-gradient( 120deg, var(--ds-blue-dark) 0%, var(--ds-purple-dark) 100% ); --ds-gradient-text: linear-gradient( 100deg, var(--ds-blue) 0%, var(--ds-purple) 55%, var(--ds-red-deep) 100% ); --ds-gradient-text-on-dark: linear-gradient( 100deg, var(--ds-ink-on-dark-accent) 0%, var(--ds-lavender) 50%, var(--ds-danger-on-dark) 100% ); /* Score meters (Kaufbereitschaft, Innovationsgrad, digitale Reife) fill blue to violet and never reach the orange-red: a high score drawn in red would read as a warning. The -on-dark pair is the pastel version. */ --ds-gradient-meter: linear-gradient( 90deg, var(--ds-blue) 0%, var(--ds-purple) 100% ); --ds-gradient-meter-on-dark: linear-gradient( 90deg, var(--ds-ink-on-dark-accent) 0%, var(--ds-lavender) 100% ); /* Older name of the on-dark text gradient, kept for existing references. */ --ds-gradient-brand-on-dark: var(--ds-gradient-text-on-dark); --ds-gradient-brand-soft: linear-gradient( 135deg, rgba(var(--ds-blue-rgb), 0.08) 0%, rgba(var(--ds-purple-rgb), 0.07) 55%, rgba(var(--ds-red-rgb), 0.06) 100% ); /* Icon tiles: white glyph on blue to violet (6.67 / 6.37:1). */ --ds-gradient-icon-tile: linear-gradient( 135deg, var(--ds-blue) 0%, var(--ds-purple) 100% ); /* The dark stage: a navy-to-violet base under three soft glows (blue top left, violet right, orange-red low right). The glows stay below the alpha the on-dark ink pairs above were measured against. */ --ds-gradient-mesh-dark: radial-gradient( 60% 70% at 12% 8%, rgba(var(--ds-blue-glow-rgb), 0.3) 0%, transparent 62% ), radial-gradient( 50% 60% at 88% 30%, rgba(var(--ds-purple-rgb), 0.32) 0%, transparent 65% ), radial-gradient( 45% 55% at 78% 100%, rgba(var(--ds-red-rgb), 0.16) 0%, transparent 70% ), linear-gradient( 160deg, var(--ds-surface-dark-2) 0%, var(--ds-surface-dark) 55%, var(--ds-surface-dark-violet) 100% ); /* The softly tinted light sections: the tint under two faint glows. */ --ds-gradient-mesh-light: radial-gradient( 50% 60% at 0% 0%, rgba(var(--ds-blue-rgb), 0.06) 0%, transparent 70% ), radial-gradient( 45% 55% at 100% 100%, rgba(var(--ds-purple-rgb), 0.06) 0%, transparent 70% ), var(--ds-surface-tint); /* The fine grid laid over the dark stage, 48px cells, white at 4.5%. */ --ds-pattern-grid-dark: linear-gradient(rgba(var(--ds-white-rgb), 0.045) 1px, transparent 1px), linear-gradient( 90deg, rgba(var(--ds-white-rgb), 0.045) 1px, transparent 1px ); /* Neutrals (universal, non-brand) + their RGB channels for rgba() */ --ds-white: #ffffff; --ds-black: #000000; --ds-white-rgb: 255, 255, 255; --ds-black-rgb: 0, 0, 0; /* Typography. Plus Jakarta Sans sets display type, headings, buttons and navigation; Inter sets body copy, forms and app data (tabular figures). Jakarta falls back to Inter for the glyphs it lacks (≈, →), and its hyphen comes from Inter through the "LS Display Hyphen" face. */ --ds-font-display: "LS Display Hyphen", "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ds-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ds-font-mono: ui-monospace, "SF Mono", Consolas, monospace; /* Type scale: display (hero) · h1 (page hero) · h2 (section) · h3 · h4 (card titles) · lead · body · small · caption · eyebrow. */ --ds-text-hero-dramatic: clamp(2.5rem, 1.55rem + 3.6vw, 4rem); --ds-text-hero-standard: clamp(2.125rem, 1.6rem + 2.2vw, 3.25rem); --ds-text-section: clamp(1.875rem, 1.4rem + 1.9vw, 2.75rem); --ds-text-title-3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); /* App page H1: a fixed 24px, app pages are tools, not landing pages. */ --ds-text-page-title: 1.5rem; --ds-text-subsection: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); --ds-text-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); --ds-text-lg: 1.125rem; --ds-text-body: 1rem; --ds-text-body-sm: 0.875rem; --ds-text-caption: 0.8125rem; --ds-text-eyebrow: 0.75rem; --ds-lh-display: 1.04; --ds-lh-tight: 1.12; --ds-lh-snug: 1.3; --ds-lh-base: 1.55; --ds-lh-prose: 1.7; --ds-fw-regular: 400; --ds-fw-medium: 500; --ds-fw-semi: 600; --ds-fw-bold: 700; --ds-fw-black: 800; --ds-tracking-display: -0.035em; --ds-tracking-tight: -0.025em; --ds-tracking-snug: -0.012em; --ds-tracking-base: 0; --ds-tracking-eyebrow: 0.12em; --ds-tracking-meta: 0.06em; /* Chrome and layout rhythm. --ds-gutter is the only page gutter: a section adds no inline padding of its own. --ds-control-h keeps inputs and default buttons at the 44px touch target. */ --ds-site-header-h: 72px; --ds-app-header-h: 64px; --ds-sidebar-width: 248px; --ds-sidebar-width-collapsed: 64px; --ds-gutter: clamp(1rem, 4vw, 2.5rem); --ds-section-y: clamp(4rem, 8vw, 7rem); --ds-control-h: 44px; --ds-control-h-sm: 36px; --ds-control-h-lg: 52px; /* Radius */ --ds-radius-xs: 6px; --ds-radius-sm: 10px; --ds-radius-md: 14px; --ds-radius-lg: 20px; --ds-radius-xl: 28px; --ds-radius-full: 9999px; /* Shadows: soft, long and tinted with the brand blue on light surfaces; deep and dark under the floating product mockup. */ --ds-shadow-sm: 0 1px 2px rgba(var(--ds-ink-rgb), 0.05), 0 1px 3px rgba(var(--ds-blue-rgb), 0.04); --ds-shadow-md: 0 1px 2px rgba(var(--ds-ink-rgb), 0.04), 0 10px 28px -8px rgba(var(--ds-blue-rgb), 0.16); --ds-shadow-lg: 0 2px 6px rgba(var(--ds-ink-rgb), 0.05), 0 28px 56px -16px rgba(var(--ds-blue-rgb), 0.26); --ds-shadow-xl: 0 2px 6px rgba(var(--ds-black-rgb), 0.12), 0 48px 96px -24px rgba(var(--ds-black-rgb), 0.55); --ds-shadow-gradient: 0 16px 40px -12px rgba(var(--ds-purple-rgb), 0.35); --ds-shadow-icon-tile: 0 8px 18px -6px rgba(var(--ds-blue-rgb), 0.5); --ds-shadow-icon-tile-lg: 0 12px 24px -8px rgba(var(--ds-purple-rgb), 0.5); --ds-shadow-float: 0 18px 40px -14px rgba(var(--ds-ink-rgb), 0.28); /* Glow under the gradient CTA: violet below, blue closer in. */ --ds-shadow-primary: inset 0 1px 0 rgba(var(--ds-white-rgb), 0.18), 0 6px 16px -6px rgba(var(--ds-blue-rgb), 0.6); --ds-shadow-primary-hover: inset 0 1px 0 rgba(var(--ds-white-rgb), 0.2), 0 10px 28px -6px rgba(var(--ds-purple-rgb), 0.6), 0 4px 12px -4px rgba(var(--ds-blue-rgb), 0.5); /* Recommended plan: a brand-coloured halo around the gradient frame. */ --ds-shadow-glow-featured: 0 0 0 6px rgba(var(--ds-purple-rgb), 0.06), 0 30px 60px -20px rgba(var(--ds-purple-rgb), 0.38); --ds-shadow-danger-hover: 0 4px 12px rgba(var(--ds-danger-rgb), 0.25); --ds-shadow-toast: 0 16px 36px rgba(var(--ds-ink-rgb), 0.24); --ds-shadow-modal: 0 24px 56px rgba(var(--ds-ink-rgb), 0.22); --ds-shadow-tour: 0 22px 48px rgba(var(--ds-ink-rgb), 0.26); --ds-shadow-tooltip: 0 8px 18px rgba(var(--ds-ink-rgb), 0.2); --ds-shadow-pill: inset 0 1px 0 rgba(var(--ds-white-rgb), 0.7), 0 2px 8px rgba(var(--ds-blue-rgb), 0.06); --ds-shadow-pill-on-dark: inset 0 1px 0 rgba(var(--ds-white-rgb), 0.06), 0 8px 24px rgba(var(--ds-black-rgb), 0.25); /* Dimming backdrop behind modals, tour steps and drawers. */ --ds-backdrop: rgba(var(--ds-ink-rgb), 0.55); /* Focus rings. The inner 3px band is an OPAQUE brand tone so the ring itself clears the WCAG 1.4.11 3:1 floor against the page (--ds-blue 6.67:1 on white); the outer 16% halo is decorative only. Never reduce the opaque band to a translucent tint — that was the 1.30:1 regression. The -on-brand/-on-danger variants add an inset white band so the ring stays visible on a control whose own fill is blue or red. On the dark stage --ds-blue measures 2.87:1, so dark contexts use the -on-dark ring in the on-dark accent (9.82:1 on the navy). */ --ds-shadow-focus: 0 0 0 3px var(--ds-blue), 0 0 0 6px rgba(var(--ds-blue-rgb), 0.16); --ds-shadow-focus-on-brand: inset 0 0 0 2px var(--ds-white), 0 0 0 3px var(--ds-blue), 0 0 0 6px rgba(var(--ds-blue-rgb), 0.16); --ds-shadow-focus-on-dark: inset 0 0 0 2px var(--ds-white), 0 0 0 3px var(--ds-ink-on-dark-accent), 0 0 0 6px rgba(var(--ds-blue-on-dark-rgb), 0.2); --ds-shadow-focus-on-danger: inset 0 0 0 2px var(--ds-white), 0 0 0 3px var(--ds-danger), 0 0 0 6px rgba(var(--ds-danger-rgb), 0.16); --ds-shadow-focus-danger: 0 0 0 3px var(--ds-danger), 0 0 0 6px rgba(var(--ds-danger-rgb), 0.16); --ds-shadow-focus-success: 0 0 0 3px var(--ds-success), 0 0 0 6px rgba(var(--ds-success-rgb), 0.16); /* Persistent field-validation halos. The states above are focus rings and vanish with the focus; .ls-field-invalid / .ls-field-valid and the server-rendered .is-invalid stay on the control after blur, so they use the soft tint instead. */ --ds-shadow-field-danger: 0 0 0 4px rgba(var(--ds-danger-rgb), 0.16); --ds-shadow-field-success: 0 0 0 4px rgba(var(--ds-success-rgb), 0.16); /* Motion */ --ds-dur-fast: 150ms; --ds-dur-base: 220ms; --ds-dur-slow: 600ms; --ds-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ds-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ds-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* Spacing (4px rhythm). The `-N-5` half steps below 20px are deliberate: component-internal padding (button, badge, chip, input) lives between the whole steps, and a scale that omits them forces every small component off-scale by construction. Layout rhythm still uses the whole steps only. */ --ds-space-0-5: 2px; --ds-space-1: 4px; --ds-space-1-5: 6px; --ds-space-2: 8px; --ds-space-2-5: 10px; --ds-space-3: 12px; --ds-space-3-5: 14px; --ds-space-4: 16px; --ds-space-4-5: 18px; --ds-space-5: 20px; --ds-space-6: 24px; --ds-space-8: 32px; --ds-space-10: 40px; --ds-space-12: 48px; --ds-space-16: 64px; --ds-space-20: 80px; --ds-space-24: 96px; /* Z-index scale — the deliberate stacking order of every floating layer: consent banner < modal backdrop < modal/filter sheet < toast < onboarding tour. An open modal must never be painted over by the cookie banner. */ --ds-z-base: 1; --ds-z-dropdown: 1000; --ds-z-sticky: 1020; --ds-z-fixed: 1030; --ds-z-consent: 1035; --ds-z-modal-backdrop: 1040; --ds-z-modal: 1050; --ds-z-toast: 1080; --ds-z-tour: 1090; /* Cards: only interactive cards lift; static cards keep still. */ --ds-card-lift: -4px; --ds-card-transition: transform var(--ds-dur-base) var(--ds-ease-out), box-shadow var(--ds-dur-base) var(--ds-ease-standard), border-color var(--ds-dur-fast) var(--ds-ease-standard); } /* === Base / Reset === */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } section[id] { scroll-margin-top: calc(var(--ds-site-header-h) + var(--ds-space-4)); } /* Safety net against accidental horizontal scroll on mobile from oversized decorative layers (glow orbs, hero gradients, etc.). `clip` is preferred over `hidden` because it does not establish a scroll container and so does not break `position: sticky` ancestors. */ html, body { overflow-x: clip; } body { font-family: var(--ds-font-body); font-optical-sizing: auto; color: var(--ds-ink); font-size: var(--ds-text-body); line-height: var(--ds-lh-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--ds-surface); } /* Short paragraphs avoid a one-word last line where the browser can. */ p { text-wrap: pretty; } a { color: var(--ds-blue); text-decoration: none; transition: color var(--ds-dur-fast) var(--ds-ease-standard); } a:hover { color: var(--ds-blue-dark); } ::selection { background: rgba(var(--ds-purple-rgb), 0.18); color: var(--ds-ink); } /* === Typography === The type scale: display (--ds-text-hero-dramatic, the home hero only), h1 (--ds-text-hero-standard, page heroes), h2 (--ds-text-section), h3 (--ds-text-title-3), h4 (--ds-text-subsection, card titles), lead, body, small, caption and eyebrow. Headings are Plus Jakarta Sans with tight tracking that loosens as the size drops. Components set their own classed sizes; these element rules are the fallback ramp for unclassed headings, one step below the marketing scale so an app card heading stays calm. */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--ds-font-display); color: var(--ds-ink); font-weight: var(--ds-fw-bold); line-height: var(--ds-lh-snug); margin-bottom: 1rem; letter-spacing: var(--ds-tracking-snug); /* Balanced lines keep a heading from ending on a one-word widow. */ text-wrap: balance; } h1, .h1 { font-size: var(--ds-text-section); font-weight: var(--ds-fw-black); line-height: var(--ds-lh-tight); letter-spacing: var(--ds-tracking-tight); } h2, .h2 { font-size: var(--ds-text-title-3); line-height: 1.2; letter-spacing: var(--ds-tracking-tight); } h3, .h3 { font-size: var(--ds-text-subsection); } h4, .h4 { font-size: var(--ds-text-lg); } h5, .h5 { font-size: var(--ds-text-body); } h6, .h6 { font-size: var(--ds-text-body-sm); } /* Prices, counters and table figures keep their columns. */ .ds-num { font-variant-numeric: tabular-nums; } /* Keeps a compound such as "DACH-Raum" from breaking at its hyphen. */ .ds-nowrap { white-space: nowrap; } /* Spinning */ @keyframes spin { to { transform: rotate(360deg); } } /* Shake */ @keyframes shake { 0%, 100% { transform: translateX(0); } 25%, 75% { transform: translateX(-5px); } 50% { transform: translateX(5px); } } /* === Forms — the ONE sanctioned crispy bridge === Crispy renders Bootstrap form classes (.form-control/.form-select); this bridge restyles them to the exact computed values of the canonical .ds-form-control so crispy output is visually indistinguishable from hand-written ds-form markup. Keep both definitions in sync. */ .form-control, .form-select { min-height: var(--ds-control-h); border: 1px solid var(--ds-border-control); border-radius: var(--ds-radius-sm); padding: var(--ds-space-2-5) var(--ds-space-3); font-size: var(--ds-text-body); line-height: 1.4; /* background-color (not the shorthand) — .form-select carries Bootstrap's chevron as a background-image that must survive this restyle. */ background-color: var(--ds-surface); color: var(--ds-ink); transition: border-color var(--ds-dur-fast) var(--ds-ease-out), box-shadow var(--ds-dur-fast) var(--ds-ease-out); } .form-control:focus, .form-select:focus { border-color: var(--ds-blue); box-shadow: var(--ds-shadow-focus); outline: none; } /* Disabled parity with .ds-form-control:disabled — without it a crispy- rendered disabled field looked fully enabled next to a hand-written one. */ .form-control:disabled, .form-select:disabled { opacity: 0.6; cursor: not-allowed; background-color: var(--ds-surface-tint); } /* Error parity with .ds-form-control--error. The shake is the one deliberate difference: this class arrives with a server-rendered response, where the nudge points at the field that was rejected. The --error modifier is set live while typing, where a shake on every keystroke would be punishing. */ .form-control.is-invalid, .form-select.is-invalid { border-color: var(--ds-danger); background-color: var(--ds-danger-tint); box-shadow: var(--ds-shadow-field-danger); animation: shake var(--ds-dur-fast) ease-in-out; } .form-control.is-invalid:focus-visible, .form-select.is-invalid:focus-visible { box-shadow: var(--ds-shadow-focus-danger); } /* Select chevron — the ds-form-control/.form-select background fills would otherwise erase Bootstrap's arrow. The element-qualified selectors outrank both base classes regardless of source order. */ select.form-select, select.form-control, select.ds-form-control { padding-right: 36px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px 14px; appearance: none; -webkit-appearance: none; } .form-control::placeholder { color: var(--ds-ink-mute); } .form-label { font-weight: var(--ds-fw-semi); font-size: var(--ds-text-body-sm); color: var(--ds-ink); margin-bottom: var(--ds-space-1-5); } /* Required fields carry no asterisk: every field is required unless its label says "(optional)". */ .asteriskField { display: none; } .form-text { font-size: var(--ds-text-caption); color: var(--ds-ink-mute); } .invalid-feedback { font-size: var(--ds-text-caption); color: var(--ds-danger); } .form-check-input { border: 1px solid var(--ds-border-control); } .form-check-input:checked { background-color: var(--ds-blue); border-color: var(--ds-blue); } .form-check-input:focus { box-shadow: var(--ds-shadow-focus); border-color: var(--ds-blue); } /* === Blog === Article cards on the blog index and under an article: a link card with a cluster badge, a Jakarta title, two lines of excerpt and a meta row. The card lifts like every a.ds-card and shows the brand hairline on top. */ .blog-card { color: var(--ds-ink); height: 100%; padding: var(--ds-space-6); border-radius: var(--ds-radius-lg); } .blog-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--ds-gradient-brand); opacity: 0; transition: opacity var(--ds-dur-base) var(--ds-ease-standard); } .blog-card:hover::before, .blog-card:focus-visible::before { opacity: 1; } /* Cluster pill on blog cards — pure layout modifier on ds-badge--neutral. align-self stops the flex-column card from stretching the inline badge to full card width; the badge skin itself stays canonical. */ .blog-card .badge-cluster { align-self: flex-start; margin-bottom: var(--ds-space-1); } .blog-card h2, .blog-card h3 { color: var(--ds-ink); font-size: var(--ds-text-subsection); font-weight: var(--ds-fw-black); letter-spacing: var(--ds-tracking-tight); line-height: var(--ds-lh-snug); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .blog-card .excerpt { color: var(--ds-ink-soft); font-size: var(--ds-text-body-sm); line-height: var(--ds-lh-base); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .blog-card .meta { display: flex; gap: var(--ds-space-4); align-items: center; font-size: var(--ds-text-caption); color: var(--ds-ink-mute); /* Auto margin, not a growing excerpt, keeps the meta rows of a card row level: a stretched excerpt box would show a fourth line past the clamp. */ margin-top: auto; padding-top: var(--ds-space-4); border-top: 1px solid var(--ds-border-subtle); } .ds-prose.blog-article { font-size: 1.0625rem; } /* "Das Wichtigste auf einen Blick" box at the top of an article. */ .key-takeaways, .ds-prose .alert-info { margin: 0 0 var(--ds-space-10); padding: var(--ds-space-6) var(--ds-space-6) var(--ds-space-5); background: var(--ds-gradient-brand-soft); border: 1px solid rgba(var(--ds-purple-rgb), 0.16); border-left: 4px solid var(--ds-purple); border-radius: var(--ds-radius-md); color: var(--ds-ink-soft); } .ds-prose .key-takeaways h2 { margin: 0 0 var(--ds-space-3); padding: 0; border: 0; font-size: var(--ds-text-lg); color: var(--ds-purple-dark); } .ds-prose .key-takeaways ul { margin-bottom: 0; } .ds-prose .alert-info > :last-child { margin-bottom: 0; } /* === Tables === */ .table { --bs-table-color: var(--ds-ink); border-collapse: separate; border-spacing: 0; } .table thead th { background: var(--ds-surface-tint); color: var(--ds-ink-mute); font-size: var(--ds-text-caption); text-transform: none; letter-spacing: 0; font-weight: var(--ds-fw-semi); border-bottom: 1px solid var(--ds-border); padding: var(--ds-space-3) var(--ds-space-4); } .table tbody td { padding: var(--ds-space-3) var(--ds-space-4); border-color: var(--ds-surface-3); vertical-align: middle; } /* ds-table is the canonical DS table: sentence-case header on the tint, 14px rows with tabular figures, a tint hover. Long German headers ("Freigeschaltet") read better in sentence case than in capitals. */ .ds-table { --bs-table-color: var(--ds-ink); border-collapse: separate; border-spacing: 0; width: 100%; } .ds-table thead th { background: var(--ds-surface-tint); color: var(--ds-ink-mute); font-size: var(--ds-text-caption); text-transform: none; letter-spacing: 0; font-weight: var(--ds-fw-semi); border-bottom: 1px solid var(--ds-border); padding: var(--ds-space-3) var(--ds-space-4); white-space: nowrap; } .ds-table tbody td { padding: var(--ds-space-3) var(--ds-space-4); font-size: var(--ds-text-body-sm); font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--ds-border-subtle); vertical-align: middle; } .ds-table tbody tr { transition: background var(--ds-dur-fast) var(--ds-ease-out); } .ds-table tbody tr:hover { background: var(--ds-surface-tint); } .ds-table tbody tr:last-child td { border-bottom: 0; } /* Removes the default table margin when the table sits directly inside a card body that already handles spacing. */ .ds-table--flush { margin: 0; } /* Right-align a column header in data tables (e.g. numeric columns). */ .ds-col--right { text-align: right; } /* Numeric data column — right-aligned with fixed-width digits to keep values visually aligned across rows. */ .ds-col--numeric { text-align: right; font-variant-numeric: tabular-nums; } /* Canonical DS wrapper for data tables — provides the border-radius, scroll container, and box-shadow that were previously on .data-table-wrap. */ .ds-table-wrap { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); overflow: auto; } /* Compact column for row action buttons (download, retry). Sits mid-table right after the status column so the primary action stays visible first when the table scrolls horizontally on small screens. */ .ds-table__actions-cell { width: 80px; white-space: nowrap; } /* Fixed-width, centred column for row-selection checkboxes. */ .ds-lead-table__row-select { width: 40px; padding-inline: 8px; text-align: center; } /* Token-mapped spacing utilities for elements that need a single margin-top override without a bespoke block selector. */ .ds-mt-3 { margin-top: var(--ds-space-3); } .ds-mt-8 { margin-top: var(--ds-space-8); } /* === Alerts === */ .alert { border: 1px solid transparent; border-radius: var(--ds-radius-sm); padding: 0.85rem 1rem; font-size: var(--ds-text-body-sm); } .alert-info { background: rgba(var(--ds-blue-rgb), 0.08); color: var(--ds-blue-dark); border-color: rgba(var(--ds-blue-rgb), 0.25); } /* === Skip-Link === */ .skip-link { position: absolute; top: -100px; left: 0; background: var(--ds-ink); color: var(--ds-white); padding: var(--ds-space-3) var(--ds-space-5); /* Above the whole z-ramp on purpose: the skip link is the keyboard user's escape hatch and must stay reachable even with a modal or toast open. */ z-index: 9999; border-radius: 0 0 var(--ds-radius-sm) 0; } .skip-link:focus { top: 0; color: var(--ds-white); } /* === Lazy-Loaded Images === */ img[loading="lazy"] { transition: opacity 0.4s ease-in; } img { max-width: 100%; height: auto; } /* Breadcrumb navigation strip — small muted text row above hero headlines. Replaces the Bootstrap .small + .text-muted + .mb-3 combination. */ .ds-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1-5); font-size: var(--ds-text-body-sm); color: var(--ds-ink-mute); margin-bottom: var(--ds-space-4); } .ds-breadcrumb a { color: var(--ds-blue); text-decoration: none; } .ds-breadcrumb a:hover { color: var(--ds-ink); text-decoration: underline; } /* === Blog Cluster Chips (blog_index.html filter row) === White pills with a hairline; the active cluster wears the CTA gradient (white text 6.37:1 at its violet end). */ .cluster-chip-row { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin: 0 0 var(--ds-space-10); } .cluster-chip { display: inline-flex; align-items: center; min-height: var(--ds-control-h-sm); padding: 0 var(--ds-space-4); background: var(--ds-surface); border: 1px solid var(--ds-border); color: var(--ds-ink-soft); border-radius: var(--ds-radius-full); font-family: var(--ds-font-display); font-size: var(--ds-text-body-sm); font-weight: var(--ds-fw-semi); text-decoration: none; box-shadow: var(--ds-shadow-sm); transition: border-color var(--ds-dur-fast) var(--ds-ease-standard), color var(--ds-dur-fast) var(--ds-ease-standard), box-shadow var(--ds-dur-fast) var(--ds-ease-standard); } .cluster-chip:hover { border-color: rgba(var(--ds-blue-rgb), 0.45); color: var(--ds-ink); } .cluster-chip.is-active, .cluster-chip.is-active:hover { background: var(--ds-gradient-cta); border-color: transparent; color: var(--ds-white); box-shadow: var(--ds-shadow-primary); } .cluster-chip:focus-visible { outline: none; box-shadow: var(--ds-shadow-focus); } /* ============================================================ ONE-PAGER HOME Classes use the .ds-op- prefix within the .ds- design system. ============================================================ */ .container { max-width: 1280px; margin: 0 auto; padding: 0 var(--ds-gutter); } /* Inside a .container the gutter already exists; the inner column must not add a second one. */ .container .ds-section__inner { padding-inline: 0; } /* Width modifiers carry doubled specificity so they always beat the .ds-section__inner base (max-width 1200px, defined at the Phase-2 component home) regardless of source order. */ .ds-section__inner.ds-section__inner--centered { text-align: center; } /* Centered hero-inner with the default 760 px cap — mirrors the most common marketing hero pattern (blog index, contact). Combines margin + center alignment in one modifier rather than two classes. */ .ds-section__inner.ds-section__inner--hero { max-width: 760px; margin: 0 auto; text-align: center; } /* Long-form text columns — blog article bodies (prose-body) and the legal pages (impressum, datenschutz, agb, widerruf). Deliberately uncapped: running text takes the full width of the section column (the 1200 px .ds-section__inner base), and the distance to the edge comes from the section padding alone. A reading-width cap left a wide empty strip beside every paragraph while the tables next to it ran to the edge. tests/test_design_gates.py keeps any max-width off these columns and off prose paragraphs, lists and headings. */ .ds-section__inner.ds-section__inner--prose-body, .ds-section__inner.ds-section__inner--legal { margin: 0 auto; } /* Narrow panel — 560 px cap for single-focus confirmation/empty-state layouts. */ .ds-section__inner.ds-section__inner--narrow { max-width: 560px; margin: 0 auto; } /* Section variant that vertically centers its content within a 60 vh minimum height (used on the contact-thanks single-state screen). */ .ds-section--vh60 { min-height: 60vh; display: flex; align-items: center; } /* Error pages: the layout-shell body is flex:1 — let the single section absorb that height and center its content so no dead band remains between the tinted section and the footer at tall viewports. */ .ds-section--fill { flex: 1; display: flex; flex-direction: column; justify-content: center; } /* Error pages (the only users of .ds-section--fill) place the status badge directly above the headline. Give the badge breathing room so it does not crowd the title — applies to every error/status page at once. */ .ds-section--fill .ds-eyebrow { margin-bottom: var(--ds-space-5); } .ds-section--fill .ds-section__title { font-size: var(--ds-text-hero-standard); letter-spacing: var(--ds-tracking-display); } .ds-section__inner .ds-section__lead { margin-left: auto; margin-right: auto; } /* Button row used inside .ds-section__inner for error pages and other centered CTA layouts. Token-based gap, wraps on narrow viewports. */ .ds-button-group { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ds-space-3, 0.75rem); margin-top: var(--ds-space-4, 1rem); } /* Single-column FAQ stack — blog articles render their FAQ accordion inside the prose column; the landing page uses .ds-faq-grid instead. */ .ds-faq-stack { display: flex; flex-direction: column; gap: var(--ds-space-3); margin-top: var(--ds-space-6); } /* FAQ accordion (custom.js toggles .is-open and the answer's max-height). White cards on the page; the open item takes a violet edge and a deeper shadow, its "+" turns into a gradient "×". The ring sits inset, because the item clips its overflow and an outset ring would be cut off. */ .ds-op-faq-item { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-sm); overflow: hidden; } .ds-op-faq-item:hover { border-color: var(--ds-border-strong); } .ds-op-faq-item.is-open { border-color: rgba(var(--ds-purple-rgb), 0.32); box-shadow: var(--ds-shadow-md); } .ds-op-faq-question { width: 100%; background: transparent; border: none; padding: var(--ds-space-4-5) var(--ds-space-5); display: flex; align-items: center; justify-content: space-between; /* Keeps the "+" clear of a question that wraps to the full width. */ gap: var(--ds-space-4); text-align: left; font-family: var(--ds-font-display); font-size: var(--ds-text-body); font-weight: var(--ds-fw-bold); letter-spacing: var(--ds-tracking-snug); color: var(--ds-ink); cursor: pointer; } .ds-op-faq-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--ds-radius-full); background: var(--ds-neutral-tint-bg); color: var(--ds-blue); font-size: var(--ds-text-body); transition: transform var(--ds-dur-base) var(--ds-ease-out), background-color var(--ds-dur-fast) var(--ds-ease-standard), color var(--ds-dur-fast) var(--ds-ease-standard); } .ds-op-faq-item.is-open .ds-op-faq-icon { transform: rotate(45deg); background: var(--ds-gradient-icon-tile); color: var(--ds-white); } .ds-op-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ds-ease-out); } .ds-op-faq-answer p { padding: 0 var(--ds-space-5) var(--ds-space-5); margin: 0; font-size: 0.9375rem; line-height: var(--ds-lh-prose); color: var(--ds-ink-soft); } .ds-op-faq-question:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--ds-blue); border-radius: var(--ds-radius-md); } .ds-op-faq-question:hover { background: var(--ds-surface-tint); } /* ============================================================ Graphics, badges, decorative patterns ============================================================ */ @keyframes opSparkleTwinkle { 0%, 100% { opacity: 0.4; transform: scale(0.9) rotate(0deg); } 50% { opacity: 1; transform: scale(1.05) rotate(10deg); } } /* ============================================================ Block A — Design-System Unification Card shadows, eyebrow shape and headline typography unified across marketing, app and error surfaces. The former .btn.btn-primary gradient layer was deleted; every submit button (incl. the contact form) now renders through the ds-button ds-button--primary classes. ============================================================ */ /* --- Section-title typography consistency --- */ .ds-section__title { font-family: var(--ds-font-display); } /* --- Subtitle typography consistency --- */ .ds-section__lead { font-family: var(--ds-font-body); font-weight: var(--ds-fw-regular); } /* ======================================================================== Block B — UX-Polish additions (toasts, skeletons, empty-states, tooltips, form-validation, onboarding tour, htmx indicator). ======================================================================== */ /* === Toast notifications =============================================== */ .ls-toast-container { position: fixed; top: 20px; right: 20px; z-index: var(--ds-z-toast); display: flex; flex-direction: column; gap: var(--ds-space-3); max-width: 360px; width: calc(100vw - 40px); pointer-events: none; } .ls-toast { position: relative; display: flex; align-items: flex-start; gap: var(--ds-space-3); padding: var(--ds-space-3-5) var(--ds-space-4); background: rgba(var(--ds-ink-rgb), 0.96); color: var(--ds-white); border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-toast); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(var(--ds-white-rgb), 0.06); overflow: hidden; pointer-events: auto; opacity: 0; transform: translateX(24px); transition: opacity 0.24s ease, transform 0.24s ease; font-family: var(--ds-font-body); } .ls-toast::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: var(--ds-blue); } .ls-toast-in { opacity: 1; transform: translateX(0); } .ls-toast-leaving { opacity: 0; transform: translateX(24px); } .ls-toast-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--ds-radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; background: rgba(var(--ds-white-rgb), 0.08); color: var(--ds-white); } .ls-toast-success .ls-toast-icon { background: rgba(var(--ds-success-bright-rgb), 0.22); color: var(--ds-success-on-dark); } .ls-toast-error .ls-toast-icon { background: rgba(var(--ds-red-rgb), 0.22); color: var(--ds-danger-on-dark); } .ls-toast-warning .ls-toast-icon { background: rgba(var(--ds-warn-bright-rgb), 0.22); color: var(--ds-warn-on-dark); } .ls-toast-info .ls-toast-icon { background: rgba(var(--ds-blue-rgb), 0.25); color: var(--ds-info-on-dark); } .ls-toast-body { flex: 1; min-width: 0; padding-top: var(--ds-space-1); } .ls-toast-message { display: block; font-size: var(--ds-text-body-sm); line-height: 1.45; color: rgba(var(--ds-white-rgb), 0.94); word-break: break-word; } .ls-toast-close { flex-shrink: 0; width: 28px; height: 28px; border: 0; background: transparent; color: rgba(var(--ds-white-rgb), 0.55); border-radius: var(--ds-radius-xs); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: var(--ds-text-lg); transition: background 0.18s, color 0.18s; } .ls-toast-close:hover { background: rgba(var(--ds-white-rgb), 0.08); color: var(--ds-white); } .ls-toast-close:focus-visible { background: rgba(var(--ds-white-rgb), 0.08); color: var(--ds-white); outline: none; box-shadow: 0 0 0 3px rgba(var(--ds-white-rgb), 0.35); } /* === Skeleton loaders ================================================== */ .ls-skel { display: block; border-radius: var(--ds-radius-xs); background: linear-gradient( 90deg, rgba(var(--ds-ink-rgb), 0.08) 0%, rgba(var(--ds-ink-rgb), 0.14) 50%, rgba(var(--ds-ink-rgb), 0.08) 100% ); background-size: 200% 100%; animation: lsSkelShimmer 1.4s ease-in-out infinite; } .ls-skel-line { height: 12px; width: 100%; } /* HTMX live-count indicator — only visible during htmx-request. */ .ls-skel-count { display: none; margin-top: var(--ds-space-1); max-width: 160px; } .htmx-request .ls-skel-count, .htmx-request.ls-skel-count { display: block; } @keyframes lsSkelShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* === Inline form validation ============================================ */ /* !important sanctioned: the JS-applied validation state must outrank the :focus border/shadow of every input system while the user is typing. */ .ls-field-invalid { border-color: var(--ds-danger) !important; box-shadow: var(--ds-shadow-field-danger) !important; } .ls-field-valid { border-color: var(--ds-success) !important; box-shadow: var(--ds-shadow-field-success) !important; } /* While the field has keyboard focus the opaque ring takes over again, so the state colour never costs the control its 3:1 focus indicator. */ .ls-field-invalid:focus-visible { box-shadow: var(--ds-shadow-focus-danger) !important; } .ls-field-valid:focus-visible { box-shadow: var(--ds-shadow-focus-success) !important; } .ls-field-error { display: flex; align-items: center; gap: var(--ds-space-1-5); margin-top: var(--ds-space-1-5); color: var(--ds-danger); font-size: var(--ds-text-body-sm); line-height: 1.3; } .ls-field-error i { flex-shrink: 0; font-size: var(--ds-text-body); } .ls-field-ok { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--ds-success); font-size: 1.05rem; pointer-events: none; } .ls-validate-wrap { position: relative; display: block; } /* === Onboarding tour =================================================== */ .ls-tour-overlay { position: fixed; inset: 0; z-index: var(--ds-z-tour); pointer-events: none; opacity: 1; transition: opacity 0.22s ease; } .ls-tour-overlay.ls-tour-leaving { opacity: 0; } .ls-tour-backdrop { position: absolute; inset: 0; background: var(--ds-backdrop); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); pointer-events: auto; } .ls-tour-highlight { position: absolute; border-radius: var(--ds-radius-md); box-shadow: 0 0 0 4px rgba(var(--ds-white-rgb), 0.9), 0 0 0 9999px var(--ds-backdrop); transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease; pointer-events: none; display: none; } .ls-tour-tooltip { position: absolute; width: 360px; max-width: calc(100vw - 40px); padding: 22px 22px 18px; background: var(--ds-white); border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-tour); pointer-events: auto; font-family: var(--ds-font-body); transition: top 0.25s ease, left 0.25s ease; } /* Overrides the JS-driven absolute top/left coordinates set per-step so the centered-mode tooltip lands at viewport mid-point regardless of scroll. */ .ls-tour-tooltip-center { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); } .ls-tour-step { font-size: var(--ds-text-caption); font-weight: var(--ds-fw-bold); color: var(--ds-blue); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: var(--ds-space-2); } .ls-tour-title { margin: 0 0 var(--ds-space-2); font-size: 1.2rem; font-weight: var(--ds-fw-black); color: var(--ds-ink); letter-spacing: -0.01em; } .ls-tour-body { margin: 0 0 var(--ds-space-4-5); font-size: var(--ds-text-body-sm); color: var(--ds-ink-soft); line-height: var(--ds-lh-base); } .ls-tour-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--ds-space-3); } .ls-tour-skip { border: 0; background: transparent; color: var(--ds-ink-mute); font-weight: var(--ds-fw-semi); font-size: var(--ds-text-body-sm); cursor: pointer; padding: var(--ds-space-2) var(--ds-space-3); border-radius: var(--ds-radius-xs); transition: background 0.18s, color 0.18s; } .ls-tour-skip:hover, .ls-tour-skip:focus { background: rgba(var(--ds-ink-rgb), 0.08); color: var(--ds-ink); outline: none; } /* The tour is a modal layer with a focus trap, so the ring is the only cue telling a keyboard user which of the two buttons is selected — the hover styling above is identical for both and cannot carry that job. */ .ls-tour-skip:focus-visible { box-shadow: var(--ds-shadow-focus); } .ls-tour-next { border: 0; padding: var(--ds-space-2-5) var(--ds-space-5); background: var(--ds-blue); color: var(--ds-white); font-weight: var(--ds-fw-semi); font-size: var(--ds-text-body-sm); border-radius: var(--ds-radius-sm); cursor: pointer; box-shadow: var(--ds-shadow-sm); transition: transform 0.18s ease, box-shadow 0.18s ease; } .ls-tour-next:hover, .ls-tour-next:focus { background: var(--ds-blue-dark); box-shadow: var(--ds-shadow-primary-hover); outline: none; } /* Same reasoning as the skip button. The face carries the brand gradient, so the ring has to be the on-brand variant; the lift shadow is repeated because box-shadow does not merge across rules. */ .ls-tour-next:focus-visible { box-shadow: 0 10px 20px rgba(var(--ds-blue-rgb), 0.3), var(--ds-shadow-focus-on-brand); } /* Cursor-follow glow layer. The element is created by motion.js (cursorFollowGlow) and appended to a dark container; only its opacity and GSAP transform are set from script, so the appearance stays token-driven here instead of in an inline style string. */ .ls-cursor-glow { position: absolute; top: 0; left: 0; width: 400px; height: 400px; margin: -200px 0 0 -200px; background: radial-gradient( circle, rgba(var(--ds-blue-glow-rgb), 0.25), transparent 60% ); pointer-events: none; z-index: 2; opacity: 0; transition: opacity 300ms ease; } /* === Tooltips ========================================================== */ .ls-tooltip { position: absolute; top: -9999px; left: -9999px; z-index: 1100; max-width: 240px; padding: var(--ds-space-2) var(--ds-space-3); background: var(--ds-ink); color: var(--ds-white); border-radius: var(--ds-radius-xs); font-size: var(--ds-text-caption); font-weight: var(--ds-fw-medium); line-height: 1.4; font-family: var(--ds-font-body); box-shadow: var(--ds-shadow-tooltip); opacity: 0; transform: translateY(-2px); transition: opacity 0.16s ease, transform 0.16s ease; pointer-events: none; white-space: normal; } .ls-tooltip-visible { opacity: 1; transform: translateY(0); } [data-tooltip] { cursor: help; } [data-tooltip].btn, [data-tooltip] button, [data-tooltip] a { cursor: inherit; } /* === HTMX loading indicator polish ===================================== */ .htmx-request, .htmx-request.htmx-request { opacity: 0.6; animation: lsHtmxPulse 1.2s ease-in-out infinite; transition: opacity 0.18s ease; } .htmx-indicator { opacity: 0; transition: opacity 0.18s ease; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; } @keyframes lsHtmxPulse { 0%, 100% { opacity: 0.65; } 50% { opacity: 0.92; } } /* --- Disabled form controls (globally; affects marketing + app + auth) */ input:disabled, textarea:disabled, select:disabled, .form-control:disabled, .form-select:disabled, input[readonly], textarea[readonly], .form-control[readonly] { background-color: var(--ds-surface-tint); color: var(--ds-ink-mute); border-color: var(--ds-surface-3); cursor: not-allowed; opacity: 0.7; box-shadow: none; } /* Disabled state unification — generic fallback for non-ds buttons. */ button:disabled, [type="submit"]:disabled { cursor: not-allowed; opacity: 0.55; pointer-events: none; box-shadow: none; transform: none; } /* --- Keyboard focus rings. Bootstrap & Crispy defaults are disabled in many places; this restores a consistent 3-px ring in brand blue. The colour is the OPAQUE --ds-blue (7.5:1 on white), never the translucent --ds-border-strong: that token composites to #c8d8ef and measures 1.44:1, far below the 3:1 that WCAG 1.4.11 requires of a focus indicator. Controls carrying their own --ds-shadow-focus ring were unaffected; every other link and button fell back to here and had, in practice, no visible focus at all. */ .blog-card:focus-visible, .ds-op-faq-item:focus-visible { outline: 3px solid var(--ds-blue); outline-offset: 3px; } button:focus-visible, [type="submit"]:focus-visible, [type="button"]:focus-visible { outline: 3px solid var(--ds-blue); outline-offset: 3px; } a:focus-visible { outline: 2px solid var(--ds-blue); outline-offset: 2px; border-radius: var(--ds-radius-xs); } /* Same ring on dark surfaces, in the on-dark accent. Brand blue measures 6.67:1 against the light page but only 2.87:1 against the navy stage, so the dark marketing sections and the full footer would sit below the 3:1 floor of WCAG 1.4.11 on exactly the links that carry no ring of their own (footer columns, links inside dark bands). The accent measures 9.82:1 on the navy. */ .ds-section--dark a:focus-visible, .ds-section--dark button:focus-visible, .ds-site-footer a:focus-visible, .ds-site-footer button:focus-visible, .ds-cta-band a:focus-visible, .ds-home-hero a:focus-visible, .ds-page-hero a:focus-visible, .ds-sticky-cta a:focus-visible, .ds-sticky-cta button:focus-visible { outline-color: var(--ds-ink-on-dark-accent); } /* Table rows receive focus-within (users tab through embedded links) */ .table tbody tr:focus-within { background: var(--ds-surface-tint); outline: 2px solid var(--ds-blue); outline-offset: -2px; } /* ============================================================ Utility classes — replace inline font-size/color overrides that were previously scattered across templates. Define once, reuse wherever a size/weight override is genuinely needed. ============================================================ */ /* Standardized icon size for alert / hint panels. */ .alert-icon-lg { font-size: 1.5rem; flex-shrink: 0; } /* ============================================================ Shared card hover — blog cards and FAQ items take their transition from --ds-card-transition; blog cards lift by --ds-card-lift like every link card (a.ds-card). ============================================================ */ .blog-card, .ds-op-faq-item { transition: var(--ds-card-transition); } /* ============================================================ Article metadata strip (blog article hero) — date / reading-time / pillar badge displayed as an icon-led row. ============================================================ */ .article-metadata { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2) var(--ds-space-5); margin-top: var(--ds-space-5); font-size: var(--ds-text-body-sm); color: var(--ds-ink-mute); } .article-metadata-item { display: inline-flex; align-items: center; gap: 0.4rem; line-height: 1; white-space: nowrap; } .article-metadata-item > i { font-size: var(--ds-text-body); color: var(--ds-ink-mute); } .article-metadata-badge { padding: var(--ds-space-0-5) var(--ds-space-2); border-radius: var(--ds-radius-full); background: var(--ds-neutral-tint-bg); color: var(--ds-neutral-tint-text); font-size: var(--ds-text-caption); font-weight: var(--ds-fw-semi); } /* ============================================================ Mobile polish — remaining responsive gaps flagged in the audit. ============================================================ */ /* FAQ accordion tap targets must hit the 44-px mobile minimum. */ .ds-op-faq-question { min-height: 44px; } /* ============================================================ Page-level fade-in + toast / flash-message animations. Defined last so they can reference the motion tokens without needing overrides. ============================================================ */ @keyframes ls-page-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* App-shell pages fade in when they load — subtle 300 ms entrance so every navigation within the app feels intentional. Marketing pages get no page fade: their entrance motion is the .ds-reveal scroll reveal below (custom.js, every page) plus, on the home page only, the GSAP stagger home.js runs on .ds-stagger-child-gsap. fill-mode is `backwards` (not `both`): a forwards-filled transform keeps computing as a transform after the animation ends, which turns the container into the containing block for every position:fixed descendant (mobile filter sheet, modals) and pins them to the page instead of the viewport. */ .app-shell .app-container { animation: ls-page-fade-in 340ms var(--ds-ease-standard) backwards; } /* ============================================================ Global scroll-reveal + stagger system Driven by custom.js IntersectionObserver. Any element with class .ds-reveal starts hidden and animates into place when it scrolls into view. Stagger delays are injected inline by the JS observer for children of a .ds-stagger-parent. Most children of a .ds-stagger-parent-gsap grid on the home page (all but the FAQ items) carry .ds-reveal too, so this transition and the GSAP tween in home.js both run on them. ============================================================ */ .ds-reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--ds-dur-slow) var(--ds-ease-out), transform var(--ds-dur-slow) var(--ds-ease-out); } .ds-reveal.is-revealed { opacity: 1; transform: none; } /* One-time entrance for the hero mockup on page load: it rises into place while the text, the LCP element, renders at once. The reduced-motion block at the end of the file collapses the animation. */ @keyframes ds-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } /* ============================================================ Icon micro-interactions Icons next to CTAs or inline links nudge slightly when the parent is hovered. Nothing flashy — 2 px translate for arrows, subtle rotate for gear / chevron icons. ============================================================ */ a .bi-arrow-right, button .bi-arrow-right { display: inline-block; transition: transform var(--ds-dur-fast) var(--ds-ease-standard); } a:hover > .bi-arrow-right, button:hover > .bi-arrow-right { transform: translateX(3px); } a:hover > .bi-arrow-left { transform: translateX(-3px); } .bi-arrow-left { display: inline-block; transition: transform var(--ds-dur-fast) var(--ds-ease-standard); } /* ============================================================ Inline link underline slide Links in FAQ answers get a subtle underline-slide on hover; article and legal links keep the permanent underline of .ds-prose. ============================================================ */ .ds-op-faq-answer a { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.35s var(--ds-ease-standard), color var(--ds-dur-fast) var(--ds-ease-standard); text-decoration: none; } .ds-op-faq-answer a:hover { background-size: 100% 1px; color: var(--ds-blue); } /* ======================================================================== LANDING PAGE (lp-*) — Full-bleed landing page on home.html Dashboard language (palette, typography, orbs, gradients) preserved. ======================================================================== */ .ds-shell { background: var(--ds-white); /* `overflow-x: clip` (set globally on html/body above) is preferred over `hidden` because hidden auto-promotes overflow-y to auto, which makes the body itself the scroll container and breaks `position: sticky` on the .ds-site-header. The global clip rule already handles horizontal overflow for decorative orbs, so this scope only sets the surface. */ } .ds-wrap { position: relative; z-index: 1; /* Explicit width: inside a flex parent (e.g. .ds-hero--dramatic) the auto inline margins suppress cross-axis stretching, so without it the wrap sizes to fit-content — a nowrap child (hero ticker marquee) then inflates it past the viewport and the hero clips below 1280px. */ width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--ds-gutter); } /* Constrained-width variant for staff-only metrics pages (960 px reading column, narrower than the default 1280 px full-width wrap). */ .ds-wrap--metrics { max-width: 960px; } @media (max-width: 991px) { .ds-hero { min-height: auto; } } /* ----- Section headings ----- Eyebrow pill, H2 with a short brand-gradient accent line under it, and a lead. A heading block, not running text, so the 780px cap is a layout width. --start aligns the block left for split layouts. On the dark stage the colours switch to the on-dark set. */ .ds-section-head { max-width: 780px; margin: 0 auto var(--ds-space-12); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-4); } .ds-section-head h2 { font-size: var(--ds-text-section); font-weight: var(--ds-fw-black); color: var(--ds-ink); line-height: var(--ds-lh-tight); letter-spacing: var(--ds-tracking-tight); margin: 0; } .ds-section-head h2::after { content: ""; display: block; width: 56px; height: 4px; margin: var(--ds-space-5) auto 0; border-radius: var(--ds-radius-full); background: var(--ds-gradient-brand); } .ds-section-head p { font-size: var(--ds-text-lead); line-height: var(--ds-lh-base); color: var(--ds-ink-soft); margin: 0; } /* The eyebrow is a

inside the head; it must not take the lead style. */ .ds-section-head p.ds-eyebrow { font-size: var(--ds-text-eyebrow); line-height: 1.2; color: var(--ds-blue-dark); } .ds-section-head--start { align-items: flex-start; text-align: left; margin-inline: 0; } .ds-section-head--start h2::after { margin-left: 0; } .ds-section--dark .ds-section-head h2 { color: var(--ds-ink-on-dark-strong); } .ds-section--dark .ds-section-head p { color: var(--ds-ink-on-dark-body); } .ds-section--dark .ds-section-head p.ds-eyebrow { color: var(--ds-ink-on-dark-accent); } /* ----- FAQ ----- */ .ds-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-space-3) var(--ds-space-6); align-items: start; } @media (max-width: 767px) { .ds-faq-grid { grid-template-columns: 1fr; } } /* ================================================================ LP Hero — Dark Aesthetic (Iteration 2) Layered atmosphere, glassmorphic mockup, mini-stats, ticker, scroll cue. Overrides .ds-section--atmo background on the dramatic hero. ================================================================ */ @keyframes ds-hero-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes ds-orb-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(3%, -2%) scale(1.04); } 100% { transform: translate(-2%, 3%) scale(0.98); } } @keyframes ds-particle-float { 0% { transform: translateY(110vh) scale(0.8); opacity: 0; } 10% { opacity: 0.7; } 85% { opacity: 0.4; } 100% { transform: translateY(-20vh) scale(1.15); opacity: 0; } } @keyframes ds-beam-slide { 0%, 100% { transform: translateY(-10%) rotate(6deg); opacity: 0; } 50% { transform: translateY(10%) rotate(6deg); opacity: 0.55; } } @keyframes ds-beam-slide-alt { 0%, 100% { transform: translateY(10%) rotate(-8deg); opacity: 0; } 50% { transform: translateY(-10%) rotate(-8deg); opacity: 0.55; } } @keyframes ds-gradient-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes ds-float-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes ds-ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes ds-scroll-dive { 0% { top: -60%; opacity: 0; } 20% { opacity: 1; } 100% { top: 110%; opacity: 0; } } /* ================================================================ Gradient icon tile — the one icon voice of the site: a white glyph on the blue-to-violet tile (6.67 / 6.37:1) with a soft blue shadow. Card icons, link-card icons and the feature tiles all share it; size modifiers live with their components. ================================================================ */ .ds-card .ds-card__icon, .ds-link-card__icon, .ds-icon-tile { width: 44px; height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ds-radius-sm); background: var(--ds-gradient-icon-tile); color: var(--ds-white); font-size: 20px; line-height: 1; box-shadow: var(--ds-shadow-icon-tile); } /* Small tile for dense rows (fact strip, field lists, footer facts). */ .ds-icon-tile--sm { width: 32px; height: 32px; border-radius: var(--ds-radius-xs); font-size: 16px; } /* Large tile for timeline steps and bento highlights. */ .ds-icon-tile--lg { width: 56px; height: 56px; border-radius: var(--ds-radius-md); font-size: 24px; box-shadow: var(--ds-shadow-icon-tile-lg); } /* ============================================================================ * DS COMPONENTS — Phase 2 Unification * The unified .ds-* namespace. The former legacy namespaces (.lp-*, * .app-prem-*, etc.) were consolidated into it during the Phase 2 migration. * ========================================================================== */ /* === Layout Shells === */ .ds-layout-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--ds-surface-tint); color: var(--ds-ink); font-family: var(--ds-font-body); font-size: var(--ds-text-body); line-height: var(--ds-lh-base); } .ds-layout-shell__body { flex: 1; display: flex; flex-direction: column; } .ds-layout-shell--app .ds-layout-shell__body { padding: 0; } /* App pages sit on the flat tint; cards and tables are the white islands. */ body.ds-layout-shell--app, .ds-layout-shell--app { background: var(--ds-surface-tint); } /* ============================================================================ * App-Sidebar — sticky left rail on app pages * Desktop (>= 1200px): 248px expanded; click-to-collapse to 64px (icons only) * Tablet (768-1199): 64px icon-rail by default; hover expands as overlay * Mobile (< 768): slide-over drawer via header burger; backdrop overlays main * ============================================================================ */ .ds-app-sidebar { position: fixed; top: var(--ds-app-header-h); left: 0; bottom: 0; width: var(--ds-sidebar-width); background: var(--ds-surface); border-right: 1px solid var(--ds-border); z-index: 90; overflow-x: hidden; overflow-y: auto; transition: width var(--ds-dur-base) var(--ds-ease-out), transform var(--ds-dur-base) var(--ds-ease-out); scrollbar-width: thin; scrollbar-color: var(--ds-surface-4) transparent; } .ds-app-sidebar::-webkit-scrollbar { width: 6px; } .ds-app-sidebar::-webkit-scrollbar-thumb { background: var(--ds-surface-4); border-radius: var(--ds-radius-xs); } .ds-app-sidebar__inner { display: flex; flex-direction: column; min-height: 100%; padding: var(--ds-space-4) var(--ds-space-3); gap: var(--ds-space-3); } /* Nav */ .ds-app-sidebar__nav { display: flex; flex-direction: column; gap: var(--ds-space-0-5); flex: 1 1 auto; } .ds-app-sidebar__item { position: relative; display: flex; align-items: center; gap: var(--ds-space-3); min-height: 40px; padding: 0 var(--ds-space-3); border-radius: var(--ds-radius-sm); color: var(--ds-ink-soft); font-size: var(--ds-text-body-sm); font-weight: var(--ds-fw-medium); text-decoration: none; transition: background var(--ds-dur-fast) var(--ds-ease-out), color var(--ds-dur-fast) var(--ds-ease-out); white-space: nowrap; } .ds-app-sidebar__icon { flex-shrink: 0; width: 20px; text-align: center; font-size: 18px; color: var(--ds-ink-mute); transition: color var(--ds-dur-fast) var(--ds-ease-out); } .ds-app-sidebar__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ds-app-sidebar__item:hover { background: var(--ds-surface-tint); color: var(--ds-ink); } .ds-app-sidebar__item:focus-visible { outline: none; box-shadow: var(--ds-shadow-focus); } /* The current page: the neutral tint, semibold label and a short gradient bar along the left edge, the app's one brand accent in the navigation. */ .ds-app-sidebar__item.is-active { background: var(--ds-neutral-tint-bg); color: var(--ds-neutral-tint-text); font-weight: var(--ds-fw-semi); } .ds-app-sidebar__item.is-active::before { content: ""; position: absolute; left: 0; top: var(--ds-space-2); bottom: var(--ds-space-2); width: 3px; border-radius: var(--ds-radius-full); background: var(--ds-gradient-cta); } .ds-app-sidebar__item.is-active .ds-app-sidebar__icon { color: var(--ds-blue); } /* Secondary items differ by colour only — the size matches the base item. */ .ds-app-sidebar__item--secondary { color: var(--ds-ink-mute); } /* Collapsed-sidebar state: center icon-only items inside the 64px rail. The labels further down the cascade keep `opacity: 0` (used in transition) but stay in flow, so we must collapse them out of the flex layout here — otherwise their `flex: 1 1 auto` would swallow the free space and pin the icon to the left of the item, breaking `justify-content: center`. */ body.ds-layout-shell--app.ds-sidebar-collapsed .ds-app-sidebar__item, body.ds-layout-shell--app.ds-sidebar-collapsed .ds-app-sidebar__collapse { justify-content: center; padding-inline: 0; gap: 0; } body.ds-layout-shell--app.ds-sidebar-collapsed .ds-app-sidebar__label, body.ds-layout-shell--app.ds-sidebar-collapsed .ds-app-sidebar__collapse-label { flex: 0 0 0; width: 0; overflow: hidden; } /* Group label above a block of items ("Suchen", "Konto"). */ .ds-app-sidebar__section-label { font-size: var(--ds-text-eyebrow); font-weight: var(--ds-fw-semi); letter-spacing: var(--ds-tracking-eyebrow); text-transform: uppercase; color: var(--ds-ink-mute); padding: var(--ds-space-4) var(--ds-space-3) var(--ds-space-1-5); white-space: nowrap; } /* Mobile-only marketing block — hidden on tablet/desktop */ .ds-app-sidebar__mobile-marketing { display: none; } /* Footer: wallet card + collapse toggle */ .ds-app-sidebar__footer { display: flex; flex-direction: column; gap: var(--ds-space-2); flex-shrink: 0; margin-top: auto; padding-top: var(--ds-space-3); border-top: 1px solid var(--ds-border-subtle); } /* The wallet card is the single credit display on desktop: the balance in tabular figures and a compact "Nachkaufen" control. */ .ds-app-sidebar__wallet { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ds-space-2) var(--ds-space-3); padding: var(--ds-space-3); border-radius: var(--ds-radius-md); background: var(--ds-surface-tint); border: 1px solid var(--ds-border); color: var(--ds-ink); text-decoration: none; } a.ds-app-sidebar__wallet:hover { color: var(--ds-ink); border-color: var(--ds-border-strong); } .ds-app-sidebar__wallet:focus-visible { outline: none; box-shadow: var(--ds-shadow-focus); } .ds-app-sidebar__wallet .bi-coin { font-size: var(--ds-text-lg); color: var(--ds-blue); flex-shrink: 0; } .ds-app-sidebar__wallet-text { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-2); min-width: 0; flex: 1; } .ds-app-sidebar__wallet-caption { font-size: var(--ds-text-caption); color: var(--ds-ink-mute); line-height: 1.2; } .ds-app-sidebar__wallet-value { white-space: nowrap; font-size: var(--ds-text-lg); font-weight: var(--ds-fw-bold); font-variant-numeric: tabular-nums; color: var(--ds-ink); line-height: 1.3; } .ds-app-sidebar__wallet-label { display: inline-flex; align-items: center; min-height: var(--ds-control-h-sm); padding: 0 var(--ds-space-3); font-size: var(--ds-text-body-sm); font-weight: var(--ds-fw-semi); color: var(--ds-ink); background: var(--ds-surface); border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius-xs); } a.ds-app-sidebar__wallet:hover .ds-app-sidebar__wallet-label { border-color: var(--ds-border-control); } .ds-app-sidebar__wallet.is-low { background: var(--ds-warn-tint-bg); border-color: transparent; } .ds-app-sidebar__wallet.is-low .bi-coin, .ds-app-sidebar__wallet.is-low .ds-app-sidebar__wallet-value { color: var(--ds-warn-tint-text); } .ds-app-sidebar__wallet.is-critical { background: var(--ds-danger-tint-bg); border-color: transparent; } .ds-app-sidebar__wallet.is-critical .bi-coin, .ds-app-sidebar__wallet.is-critical .ds-app-sidebar__wallet-value { color: var(--ds-danger-tint-text); } .ds-app-sidebar__logout-form { margin: 0; padding: 0; } .ds-app-sidebar__logout { display: flex; align-items: center; gap: var(--ds-space-3); width: 100%; min-height: 40px; padding: 0 var(--ds-space-3); border: 0; background: transparent; border-radius: var(--ds-radius-sm); color: var(--ds-ink-soft); font-size: var(--ds-text-body-sm); font-weight: var(--ds-fw-medium); text-align: left; cursor: pointer; transition: background var(--ds-dur-fast) var(--ds-ease-out), color var(--ds-dur-fast) var(--ds-ease-out); } .ds-app-sidebar__logout:hover { background: var(--ds-surface-tint); color: var(--ds-ink); } .ds-app-sidebar__logout:focus-visible { outline: none; box-shadow: var(--ds-shadow-focus); } .ds-app-sidebar__collapse { display: flex; align-items: center; gap: var(--ds-space-2-5); min-height: 36px; padding: 0 var(--ds-space-3); border: 0; background: transparent; border-radius: var(--ds-radius-sm); color: var(--ds-ink-mute); font-size: var(--ds-text-caption); font-weight: var(--ds-fw-medium); cursor: pointer; transition: background var(--ds-dur-fast) var(--ds-ease-out), color var(--ds-dur-fast) var(--ds-ease-out); } .ds-app-sidebar__collapse:hover { background: var(--ds-surface-tint); color: var(--ds-ink); } .ds-app-sidebar__collapse:focus-visible { outline: none; box-shadow: var(--ds-shadow-focus); } .ds-app-sidebar__collapse .bi { font-size: var(--ds-text-body); transition: transform var(--ds-dur-base) var(--ds-ease-out); } body.ds-sidebar-collapsed .ds-app-sidebar__collapse .bi { transform: rotate(180deg); } /* Main-content offset (desktop default). Only the left side clears the fixed sidebar; the right side keeps a small gutter instead of mirroring the sidebar width. The former symmetric "phantom space" centered the content but squeezed it so far that the lead tables clipped their score and action columns on every common desktop width — content-first wins, and the minor horizontal shift on sidebar toggle is the accepted trade-off. */ @media (min-width: 1200px) { body.ds-layout-shell--app .ds-layout-shell__body, body.ds-layout-shell--app .ds-site-footer { padding-inline: var(--ds-sidebar-width) var(--ds-space-6); } body.ds-layout-shell--app.ds-sidebar-collapsed .ds-app-sidebar { width: var(--ds-sidebar-width-collapsed); } body.ds-layout-shell--app.ds-sidebar-collapsed .ds-app-sidebar__label, body.ds-layout-shell--app.ds-sidebar-collapsed .ds-app-sidebar__wallet-text, body.ds-layout-shell--app.ds-sidebar-collapsed .ds-app-sidebar__collapse-label, body.ds-layout-shell--app.ds-sidebar-collapsed .ds-app-sidebar__section-label { opacity: 0; pointer-events: none; } } /* Tablet: icon-rail by default, hover expands as overlay */ @media (min-width: 768px) and (max-width: 1199px) { body.ds-layout-shell--app .ds-app-sidebar { width: var(--ds-sidebar-width-collapsed); } body.ds-layout-shell--app .ds-layout-shell__body, body.ds-layout-shell--app .ds-site-footer { /* Left clears the 64px icon-rail; right keeps a small gutter so the constrained tablet width goes to content, not symmetry. */ padding-inline: var(--ds-sidebar-width-collapsed) var(--ds-space-4); } body.ds-layout-shell--app .ds-app-sidebar__label, body.ds-layout-shell--app .ds-app-sidebar__wallet-text, body.ds-layout-shell--app .ds-app-sidebar__collapse-label, body.ds-layout-shell--app .ds-app-sidebar__section-label { opacity: 0; pointer-events: none; } body.ds-layout-shell--app .ds-app-sidebar:hover { width: var(--ds-sidebar-width); box-shadow: var(--ds-shadow-lg); } body.ds-layout-shell--app .ds-app-sidebar:hover .ds-app-sidebar__label, body.ds-layout-shell--app .ds-app-sidebar:hover .ds-app-sidebar__wallet-text, body.ds-layout-shell--app .ds-app-sidebar:hover .ds-app-sidebar__collapse-label, body.ds-layout-shell--app .ds-app-sidebar:hover .ds-app-sidebar__section-label { opacity: 1; pointer-events: auto; } body.ds-layout-shell--app .ds-app-sidebar__collapse { display: none; } } /* Mobile: slide-over drawer */ @media (max-width: 767px) { body.ds-layout-shell--app .ds-app-sidebar { width: 280px; transform: translateX(-100%); box-shadow: var(--ds-shadow-lg); /* A translated drawer stays in the tab order: from the burger, keyboard focus walked into nine invisible nav links parked at x=-268 with no visible indicator anywhere on screen. `visibility: hidden` takes the closed drawer out of the tab order; it is delayed by the slide duration so the closing animation still plays, and reverts instantly on open. */ visibility: hidden; transition: width var(--ds-dur-base) var(--ds-ease-out), transform var(--ds-dur-base) var(--ds-ease-out), visibility 0s linear var(--ds-dur-base); } body.ds-layout-shell--app.ds-sidebar-open .ds-app-sidebar { transform: translateX(0); visibility: visible; transition-delay: 0s; } body.ds-layout-shell--app .ds-layout-shell__body { padding-inline: 0; } /* Only neutralize the desktop sidebar offset — the minimal footer keeps its own gutter, otherwise its link row touches the viewport edge. */ body.ds-layout-shell--app .ds-site-footer { padding-inline: var(--ds-gutter); } body.ds-layout-shell--app .ds-app-sidebar__collapse { display: none; } body.ds-layout-shell--app .ds-app-sidebar__mobile-marketing { display: flex; flex-direction: column; gap: var(--ds-space-0-5); } .ds-app-sidebar__backdrop { position: fixed; top: var(--ds-app-header-h); left: 0; right: 0; bottom: 0; background: var(--ds-backdrop); backdrop-filter: blur(2px); z-index: 89; opacity: 0; pointer-events: none; transition: opacity var(--ds-dur-base) var(--ds-ease-out); } body.ds-layout-shell--app.ds-sidebar-open .ds-app-sidebar__backdrop { opacity: 1; pointer-events: auto; } } /* === Auth layout === Sign-in, signup, password reset, e-mail confirmation and unsubscribe sit on the tinted light mesh. A single card carries a short brand-gradient bar on top. Login and signup pair the form with a dark brand panel (.ds-auth-aside): side by side in one framed split card from 992px, stacked below the form on smaller screens. */ .ds-layout-shell--auth .ds-layout-shell__body { align-items: center; justify-content: center; padding: clamp(2rem, 6vw, 4.5rem) var(--ds-space-4); min-height: calc(100vh - 120px); background: var(--ds-gradient-mesh-light); } .ds-layout-shell--auth .ds-auth-card { position: relative; width: 100%; max-width: 440px; background: var(--ds-surface); border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-lg); padding: var(--ds-space-10) var(--ds-space-6) var(--ds-space-8); overflow: hidden; } .ds-layout-shell--auth .ds-auth-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--ds-gradient-brand); } @media (min-width: 576px) { .ds-layout-shell--auth .ds-auth-card { padding: var(--ds-space-12) var(--ds-space-10) var(--ds-space-10); } } .ds-layout-shell--auth .ds-auth-layout { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 480px; background: var(--ds-surface); border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-xl); box-shadow: var(--ds-shadow-lg); overflow: hidden; } .ds-layout-shell--auth .ds-auth-layout > .ds-auth-card { max-width: none; border: 0; border-radius: 0; box-shadow: none; } .ds-layout-shell--auth .ds-auth-aside { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: var(--ds-space-5); padding: var(--ds-space-10) var(--ds-space-6); background: var(--ds-gradient-mesh-dark); color: var(--ds-ink-on-dark-body); } .ds-layout-shell--auth .ds-auth-aside::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--ds-pattern-grid-dark); background-size: 40px 40px; -webkit-mask-image: radial-gradient( ellipse 80% 70% at 70% 20%, var(--ds-black) 10%, transparent 75% ); mask-image: radial-gradient( ellipse 80% 70% at 70% 20%, var(--ds-black) 10%, transparent 75% ); pointer-events: none; } .ds-layout-shell--auth .ds-auth-aside > .ds-eyebrow { align-self: flex-start; } @media (min-width: 992px) { .ds-layout-shell--auth .ds-auth-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); max-width: 1040px; } .ds-layout-shell--auth .ds-auth-aside { justify-content: center; padding: var(--ds-space-16) var(--ds-space-12); } } .ds-layout-shell--marketing .ds-layout-shell__body { padding: 0; } /* === Eyebrow === The pill above a marketing heading: uppercase Jakarta, a gradient dot, a faint blue fill and hairline. Text --ds-blue-dark on the composited fill 7.73:1. On the dark stage it turns into a glass pill with the on-dark accent (above 6.8:1 on every glow). App pages carry no eyebrow. The two legacy dot elements stay hidden wherever an old template still renders them; the dot is drawn by ::before. */ .ds-eyebrow { display: inline-flex; align-items: center; gap: var(--ds-space-2); max-width: 100%; padding: var(--ds-space-1-5) var(--ds-space-3) var(--ds-space-1-5) var(--ds-space-2-5); font-family: var(--ds-font-display); font-size: var(--ds-text-eyebrow); font-weight: var(--ds-fw-bold); line-height: 1.2; letter-spacing: var(--ds-tracking-eyebrow); text-transform: uppercase; color: var(--ds-blue-dark); background: rgba(var(--ds-blue-rgb), 0.07); border: 1px solid rgba(var(--ds-blue-rgb), 0.16); border-radius: var(--ds-radius-full); box-shadow: var(--ds-shadow-pill); margin: 0; } .ds-eyebrow::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; border-radius: var(--ds-radius-full); background: var(--ds-gradient-cta); box-shadow: 0 0 0 3px rgba(var(--ds-purple-rgb), 0.14); } .ds-eyebrow--on-dark, .ds-section--dark .ds-eyebrow, .ds-home-hero .ds-eyebrow, .ds-page-hero .ds-eyebrow, .ds-cta-band .ds-eyebrow, .ds-auth-aside .ds-eyebrow { color: var(--ds-ink-on-dark-accent); background: var(--ds-surface-glass); border-color: var(--ds-border-glass); box-shadow: var(--ds-shadow-pill-on-dark); } .ds-eyebrow--on-dark::before, .ds-section--dark .ds-eyebrow::before, .ds-home-hero .ds-eyebrow::before, .ds-page-hero .ds-eyebrow::before, .ds-cta-band .ds-eyebrow::before, .ds-auth-aside .ds-eyebrow::before { background: var(--ds-success-bright); box-shadow: 0 0 0 3px rgba(var(--ds-success-bright-rgb), 0.2); } .ds-eyebrow-dot, .ds-app-eyebrow-dot { display: none; } /* === Gradient Text === One emphasised phrase per headline in the brand gradient. On light surfaces every stop clears 4.5:1 (blue 6.67, violet 6.37, deep red 5.37:1 on white); on the dark stage the pastel set clears 6.3:1 even on a glow. Forced-colors mode falls back to plain system text. */ .ds-gradient-text { background: var(--ds-gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .ds-gradient-text--on-dark, .ds-section--dark .ds-gradient-text, .ds-home-hero .ds-gradient-text, .ds-page-hero .ds-gradient-text, .ds-cta-band .ds-gradient-text { background-image: var(--ds-gradient-text-on-dark); } /* When SplitType wraps the phrase in per-character spans for a reveal, motion.js gives every span its slice of the word's gradient; each span then has to clip that background to its own glyph. */ .ds-gradient-text .char { background-image: var(--ds-gradient-text); background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } @media (forced-colors: active) { .ds-gradient-text { background: none; color: CanvasText; -webkit-text-fill-color: currentColor; } } .ds-badge { display: inline-flex; align-items: center; gap: var(--ds-space-1); padding: 2px var(--ds-space-2-5); font-size: 0.75rem; font-weight: var(--ds-fw-semi); letter-spacing: 0; text-transform: none; border-radius: var(--ds-radius-full); line-height: 1.5; white-space: nowrap; } /* Solid badge backgrounds (not semi-transparent) for predictable WCAG AA contrast regardless of parent surface. At 12px + 600 weight every pair clears 6.5:1 on its own background. */ .ds-badge--neutral { background: var(--ds-neutral-tint-bg); color: var(--ds-neutral-tint-text); } .ds-badge--success { background: var(--ds-success-tint-bg); color: var(--ds-success-tint-text); } .ds-badge--warn { background: var(--ds-warn-tint-bg); color: var(--ds-warn-tint-text); } .ds-badge--danger { background: var(--ds-danger-tint-bg); color: var(--ds-danger-tint-text); } .ds-badge--info { background: var(--ds-info-tint-bg); color: var(--ds-info-tint-text); } .ds-badge--violet { background: var(--ds-violet-tint-bg); color: var(--ds-violet-tint-text); } /* The recommended plan ("Empfohlen"): white on the CTA gradient, 6.37:1 at its violet end. */ .ds-badge--gradient { background: var(--ds-gradient-cta); color: var(--ds-white); font-weight: var(--ds-fw-bold); box-shadow: var(--ds-shadow-icon-tile); } /* Accent highlight ("Kein Abo nötig"): the logo orange as a readable pair. */ .ds-badge--accent { background: var(--ds-accent-tint-bg); color: var(--ds-accent-text); } /* Step counter — fixed round 24px square for numbered onboarding steps; the inline flow of the surrounding heading provides the gap. */ .ds-badge--step { width: 24px; height: 24px; padding: 0; justify-content: center; border-radius: var(--ds-radius-full); } /* === Alerts (info / success / warn / danger) === Inline contextual banners for dashboards, auth-flow and form responses. Replaces Bootstrap .alert .alert-* — uses ds-tokens, radius-md, and the status-tint backgrounds from :root for consistent visual language. */ .ds-alert { display: flex; align-items: flex-start; gap: var(--ds-space-3); padding: var(--ds-space-3) var(--ds-space-4); border-radius: var(--ds-radius-md); font-size: var(--ds-text-body-sm); line-height: var(--ds-lh-base); border: 1px solid transparent; color: var(--ds-ink); } .ds-alert > i.bi, .ds-alert > i[class*="bi-"] { flex-shrink: 0; font-size: var(--ds-text-lg); line-height: 1.2; margin-top: 1px; } .ds-alert strong { color: inherit; } .ds-alert--success { background: var(--ds-success-tint); border-color: rgba(var(--ds-success-rgb), 0.18); color: var(--ds-success); } .ds-alert--warn { background: var(--ds-warn-tint); border-color: rgba(var(--ds-warn-rgb), 0.18); /* --ds-warn measures 4.39:1 on the warn tint and misses the 4.5:1 AA floor for body text; --ds-warn-deep reaches 7.92:1. The sibling variants (info/success/danger) already clear AA on their own tints, so only this one changes. */ color: var(--ds-warn-deep); } .ds-alert--danger { background: var(--ds-danger-tint); border-color: rgba(var(--ds-danger-rgb), 0.18); color: var(--ds-danger); } /* Alert body text inherits ink-body, only icon + title carry the status-color. */ .ds-alert--info .ds-alert__body, .ds-alert--success .ds-alert__body, .ds-alert--warn .ds-alert__body, .ds-alert--danger .ds-alert__body { color: var(--ds-ink); } /* === Buttons === Jakarta labels at 700. The primary carries the CTA gradient (blue to violet; white text 6.67:1 and 6.37:1 at its two ends), a soft inner highlight and a blue glow; on hover the gradient slides toward violet, the glow deepens and the button rises 1px. Secondary is white with a hairline, ghost is text-only, and both have on-dark variants for the dark stage. Every variant shares the 44px control height (WCAG 2.5.8); --sm is the compact 36px step for dense tables, --lg the 52px hero size. */ .ds-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2); min-height: var(--ds-control-h); padding: 0 var(--ds-space-5); font-family: var(--ds-font-display); font-size: 0.9375rem; font-weight: var(--ds-fw-bold); line-height: 1.25; letter-spacing: -0.005em; text-align: center; border: 1px solid transparent; border-radius: var(--ds-radius-sm); text-decoration: none; cursor: pointer; transition: background-color var(--ds-dur-fast) var(--ds-ease-standard), background-position var(--ds-dur-base) var(--ds-ease-out), border-color var(--ds-dur-fast) var(--ds-ease-standard), color var(--ds-dur-fast) var(--ds-ease-standard), box-shadow var(--ds-dur-base) var(--ds-ease-standard), transform var(--ds-dur-base) var(--ds-ease-out); position: relative; white-space: nowrap; /* A button can never be wider than the column it sits in. Without this a long label plus nowrap simply pushes past the viewport, and the page-level overflow-x:clip hides the fact instead of scrolling to it. */ max-width: 100%; } .ds-button:focus-visible { outline: none; box-shadow: var(--ds-shadow-focus); } /* Filled buttons carry the ring colour as their own background, so they need the inset white band to keep the focus indicator distinguishable. */ .ds-button--primary:focus-visible { box-shadow: var(--ds-shadow-focus-on-brand); } /* On the dark stage the blue ring measures 2.87:1, so every button there takes the on-dark ring (9.82:1). */ .ds-section--dark .ds-button:focus-visible, .ds-home-hero .ds-button:focus-visible, .ds-page-hero .ds-button:focus-visible, .ds-cta-band .ds-button:focus-visible, .ds-site-footer .ds-button:focus-visible, .ds-sticky-cta .ds-button:focus-visible, .ds-button--secondary--on-dark:focus-visible { box-shadow: var(--ds-shadow-focus-on-dark); } .ds-button:disabled, .ds-button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* Press state: hover is a pointer-only signal, so a touch tap needs its own confirmation that it registered. The button settles back down. */ .ds-button:not(:disabled):not([aria-disabled="true"]):active { transform: translateY(1px); } /* Only the forward arrow moves on hover: it tells where the button leads. */ .ds-button i, .ds-button svg { flex-shrink: 0; transition: transform var(--ds-dur-fast) var(--ds-ease-out); } .ds-button:hover i.bi-arrow-right { transform: translateX(3px); } .ds-button--primary { color: var(--ds-white); background-color: var(--ds-blue); background-image: var(--ds-gradient-cta); background-size: 180% 100%; background-position: 0% 50%; box-shadow: var(--ds-shadow-primary); } /* The explicit color + a.:hover selector defeats the global a:hover { color: var(--ds-blue-dark) } base rule, which would otherwise recolour the label to dark blue on the gradient. */ .ds-button--primary:hover, a.ds-button--primary:hover { color: var(--ds-white); background-position: 100% 50%; box-shadow: var(--ds-shadow-primary-hover); transform: translateY(-1px); } .ds-button--primary:not(:disabled):active { background-image: var(--ds-gradient-cta-active); } .ds-button--secondary { background: var(--ds-surface); color: var(--ds-ink); border-color: var(--ds-border-strong); box-shadow: var(--ds-shadow-sm); } .ds-button--secondary:hover, a.ds-button--secondary:hover { background: var(--ds-surface); color: var(--ds-blue-dark); border-color: rgba(var(--ds-blue-rgb), 0.45); box-shadow: var(--ds-shadow-md); } /* On the dark stage: a glass button with a light hairline. Also applied automatically to a plain --secondary inside a dark section. */ .ds-button--secondary--on-dark, .ds-section--dark .ds-button--secondary, .ds-home-hero .ds-button--secondary, .ds-page-hero .ds-button--secondary, .ds-cta-band .ds-button--secondary { background: var(--ds-surface-glass); color: var(--ds-ink-on-dark-strong); border-color: rgba(var(--ds-white-rgb), 0.22); box-shadow: var(--ds-shadow-pill-on-dark); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .ds-button--secondary--on-dark:hover, a.ds-button--secondary--on-dark:hover, .ds-section--dark .ds-button--secondary:hover, .ds-home-hero .ds-button--secondary:hover, .ds-page-hero .ds-button--secondary:hover, .ds-cta-band .ds-button--secondary:hover { background: rgba(var(--ds-white-rgb), 0.12); color: var(--ds-white); border-color: rgba(var(--ds-white-rgb), 0.4); } .ds-button--ghost { background: transparent; color: var(--ds-blue); } .ds-button--ghost:hover, a.ds-button--ghost:hover { background: var(--ds-neutral-tint-bg); color: var(--ds-blue-dark); } .ds-button--ghost--on-dark { color: var(--ds-ink-on-dark-strong); } .ds-button--ghost--on-dark:hover, a.ds-button--ghost--on-dark:hover { background: var(--ds-surface-glass-strong); color: var(--ds-white); } .ds-button--danger { background: var(--ds-danger); color: var(--ds-white); } .ds-button--danger:hover, a.ds-button--danger:hover { background: var(--ds-danger-bright); color: var(--ds-white); box-shadow: var(--ds-shadow-danger-hover); } .ds-button--danger:focus-visible { box-shadow: var(--ds-shadow-focus-on-danger); } .ds-button--sm { min-height: var(--ds-control-h-sm); padding: 0 var(--ds-space-3-5); font-size: var(--ds-text-body-sm); border-radius: var(--ds-radius-xs); } .ds-button--lg { min-height: var(--ds-control-h-lg); padding: 0 var(--ds-space-6); font-size: var(--ds-text-body); border-radius: var(--ds-radius-md); } /* A full-width button may wrap: a long label (the sample-card CTA, the app plan CTA with its price) breaks onto a second line instead of being cut. */ .ds-button--block { display: flex; width: 100%; white-space: normal; padding-block: var(--ds-space-2); } /* On a phone a sentence-length label has no room to stay on one line. Allowing the wrap costs nothing for short labels and is the only alternative to cutting the label off at the screen edge. */ @media (max-width: 575px) { .ds-button { white-space: normal; padding-block: var(--ds-space-2); } } /* Loading state — applied while a submit/POST is in flight. Pairs with an inline