@font-face { font-family: 'Schibsted Grotesk'; font-style: italic; font-weight: 400; font-display: swap; src: url('assets/fonts/schibsted-grotesk-400-italic.woff2') format('woff2'); 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; } @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/schibsted-grotesk-400.woff2') format('woff2'); 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; } @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/schibsted-grotesk-500.woff2') format('woff2'); 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; } @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/schibsted-grotesk-600.woff2') format('woff2'); 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; } @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/schibsted-grotesk-700.woff2') format('woff2'); 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; } @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 800; font-display: swap; src: url('assets/fonts/schibsted-grotesk-800.woff2') format('woff2'); 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; } @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/space-mono-700.woff2') format('woff2'); 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; } :root { --wolkenweiss: #FBFBF8; --sanftes-grau: #EDEFEA; --anthrazit: #16202B; --text-soft: #54606F; --nordisch-blau: #3F86BC; --nordisch-blau-700: #2B6390; --nordisch-blau-300: #8FBBD9; --nordisch-blau-050: #EAF3FA; --blue-panel: #D7E8F4; --blue-wash: #EAF3FA; --sonnengelb: #FFC83A; --sonnengelb-600: #E9A100; --yellow-wash: #FFF3CE; --himmelblau: #D7E8F4; --frisches-mint: #C7E3D6; --salbeigruen: #E2EAE0; --sand: #FFF3CE; --helles-holz: #F2E6C8; --coralle: #FF9D8D; --coralle-600: #F0857A; --mint-050: #EFF6F2; --ink-900: #0F1820; --ink-700: #16202B; --ink-500: #54606F; --ink-300: #939CA7; --ink-100: #C8CCC9; --surface-base: var(--wolkenweiss); --surface-card: #FFFFFF; --surface-muted: var(--sanftes-grau); --surface-sky: var(--blue-panel); --surface-sage: var(--salbeigruen); --surface-sand: var(--yellow-wash); --surface-mint: var(--frisches-mint); --surface-strong: var(--nordisch-blau-700); --text-primary: var(--anthrazit); --text-secondary: var(--ink-500); --text-muted: #6C7480; --text-inverse: #FFFFFF; --text-on-strong: rgba(255,255,255,.86); --text-brand: var(--nordisch-blau); --accent-primary: var(--nordisch-blau); --accent-cta: var(--sonnengelb); --accent-emotional: var(--coralle); --accent-fresh: var(--nordisch-blau); --brand-highlight: var(--sonnengelb); --border-subtle: #E7E9E2; --border-strong: #D6D9CF; --border-on-strong: rgba(255,255,255,.40); --focus-ring: var(--nordisch-blau); --status-positive: #3E8E6F; --status-warning: var(--sonnengelb-600); --status-critical: #D9695A; --status-info: var(--nordisch-blau); --font-display: "Schibsted Grotesk", system-ui, -apple-system, sans-serif; --font-body: "Schibsted Grotesk", system-ui, -apple-system, sans-serif; --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --fw-light: 400; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fs-display: clamp(46px, 7.5vw, 92px); --fs-h1: clamp(38px, 5vw, 64px); --fs-h2: clamp(30px, 3.8vw, 50px); --fs-h3: 26px; --fs-h4: 21px; --fs-lead: 20px; --fs-body: 18px; --fs-small: 15px; --fs-caption: 13px; --fs-eyebrow: 13px; --lh-display: 1.06; --lh-heading: 1.08; --lh-body: 1.65; --lh-tight: 1.4; --ls-display: -0.025em; --ls-heading: -0.025em; --ls-body: 0; --ls-eyebrow: 0.18em; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --section-y: 48px; --radius-xs: 6px; --radius-sm: 12px; --radius-md: 18px; --radius-lg: 22px; --radius-xl: 32px; --radius-pill: 999px; --shadow-xs: 0 1px 2px rgba(50,50,50,.04); --shadow-sm: 0 12px 40px rgba(50,50,50,.04); --shadow-md: 0 18px 50px rgba(50,50,50,.06); --shadow-lg: 0 24px 70px rgba(50,50,50,.08); --container: min(1160px, calc(100vw - 48px)); --container-narrow: min(820px, calc(100vw - 48px)); --header-h: 74px; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 420ms; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--surface-base); color: var(--text-primary); font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--fw-extrabold); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); margin: 0; color: var(--text-primary); } h1 { font-size: var(--fs-h1); line-height: var(--lh-display); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); } p { color: var(--text-secondary); margin: 0 0 var(--space-4); } ::selection { background: var(--sonnengelb); color: var(--anthrazit); } section[id], [id].scroll-anchor { scroll-margin-top: calc(var(--header-h) + 10px); } .container { width: var(--container); margin-inline: auto; } .container--narrow { width: var(--container-narrow); margin-inline: auto; } .section { border-bottom: 1px solid var(--border-subtle); } .section--muted { background: var(--surface-muted); } .section__inner { padding: 48px 0; } .dd-eyebrow, .dd-label { font-family: var(--font-body); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); } .dd-eyebrow { color: var(--nordisch-blau-700); } .dd-label { color: var(--text-muted); } .dd-lead { font-size: var(--fs-lead); color: var(--text-secondary); line-height: var(--lh-tight); } .dd-mark { position: relative; white-space: nowrap; } .dd-mark::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 0.08em; height: 0.34em; background: var(--brand-highlight); z-index: 0; border-radius: 2px; } .dd-mark > * { position: relative; z-index: 1; } .dd-arrows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .dd-arrows li { position: relative; padding-left: 28px; color: var(--text-secondary); } .dd-arrows li::before { content: "\2192"; position: absolute; left: 0; top: 0; color: var(--accent-primary); font-weight: var(--fw-bold); } .dd-hero-grad { background: radial-gradient(circle at 88% 8%, rgba(63,134,188,.10), transparent 34%), radial-gradient(circle at 4% 30%, rgba(255,200,58,.10), transparent 26%), var(--surface-base); } .eyebrow { display: flex; align-items: center; gap: 8px; } .eyebrow--center { justify-content: center; } .eyebrow__num { font-family: var(--font-mono); } .eyebrow__sep { color: var(--text-secondary); } .btn { font-family: var(--font-body); font-weight: var(--fw-semibold); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border: 1px solid transparent; border-radius: var(--radius-xs); cursor: pointer; text-decoration: none; line-height: 1; white-space: nowrap; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-base) var(--ease-soft), filter var(--dur-base) var(--ease-soft); } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0) scale(0.98); } .btn--sm { min-height: 38px; padding: 0 16px; font-size: 13px; } .btn--md { min-height: 48px; padding: 0 28px; font-size: 15px; } .btn--lg { min-height: 56px; padding: 0 36px; font-size: 17px; } .btn--primary { background: var(--accent-cta); color: var(--text-primary); } .btn--primary:hover { filter: brightness(0.95); } .btn--dark { background: var(--nordisch-blau-700); color: #fff; } .btn--dark:hover { filter: brightness(0.95); } .btn--secondary { background: transparent; color: var(--text-primary); border-color: var(--border-strong); } .btn--secondary:hover { background: var(--surface-muted); } .btn--full { width: 100%; } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; } .card { background: var(--surface-card); color: var(--text-primary); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); padding: 28px; } .brand-logo { --s: 20px; display: inline-flex; align-items: center; gap: 11px; text-decoration: none; } .brand-logo__bars { display: inline-flex; gap: 3px; align-items: flex-end; height: calc(var(--s) + 2px); } .brand-logo__bars i { width: 6px; border-radius: 2px; display: block; } .brand-logo__bars i:nth-child(1) { height: calc((var(--s) + 2px) * 0.46); background: var(--nordisch-blau); } .brand-logo__bars i:nth-child(2) { height: calc((var(--s) + 2px) * 0.71); background: var(--nordisch-blau); } .brand-logo__bars i:nth-child(3) { height: calc(var(--s) + 2px); background: var(--sonnengelb-600); } .brand-logo__word { display: inline-flex; align-items: baseline; font-family: var(--font-display); font-weight: var(--fw-bold); letter-spacing: -0.022em; font-size: calc(var(--s) * 0.92); color: var(--anthrazit); line-height: 1; white-space: nowrap; } .brand-logo__dot { width: 0.34em; height: 0.34em; border-radius: 50%; background: var(--sonnengelb); display: inline-block; align-self: flex-end; margin: 0 0.05em 0.06em; } .brand-logo--inverse { --s: 22px; } .brand-logo--inverse .brand-logo__bars i:nth-child(1), .brand-logo--inverse .brand-logo__bars i:nth-child(2) { background: #BBD7E6; } .brand-logo--inverse .brand-logo__word { color: #fff; } .field { display: flex; flex-direction: column; gap: var(--space-2); } .field label { font-family: var(--font-body); font-size: 13px; font-weight: var(--fw-semibold); color: var(--text-primary); } .field input, .field textarea { font-family: var(--font-body); font-weight: var(--fw-light); font-size: 16px; color: var(--text-primary); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xs); padding: 0 16px; min-height: 48px; width: 100%; outline: none; transition: border-color var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft); } .field textarea { padding: 12px 16px; min-height: unset; line-height: 1.5; resize: vertical; } .field input:focus, .field textarea:focus { border-color: var(--focus-ring); box-shadow: 0 0 0 3px rgba(74,107,138,.16); } .site-header { position: sticky; top: 0; z-index: 20; background: rgba(251,251,248,.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-subtle); } .site-header__inner { width: var(--container); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: var(--header-h); } .site-header__menu { display: flex; align-items: center; gap: 30px; } .site-nav { display: flex; gap: 30px; } .site-nav a { font-size: 15px; font-weight: 500; color: var(--text-secondary); text-decoration: none; } .site-nav a:hover { color: var(--text-primary); } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 0; background: none; border: 1px solid var(--border-subtle); border-radius: var(--radius-xs); cursor: pointer; } .nav-toggle span { display: block; width: 20px; height: 2px; margin: 0 auto; background: var(--text-primary); transition: transform var(--dur-base) var(--ease-soft), opacity var(--dur-base); } .site-header.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .site-header.is-open .nav-toggle span:nth-child(2) { opacity: 0; } .site-header.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .hero__inner { width: var(--container); margin: 0 auto; padding: 52px 0 48px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; } .hero__kicker { margin: 0 0 12px; font-size: clamp(26px,3vw,38px); font-weight: 500; color: var(--text-secondary); line-height: 1.2; letter-spacing: -0.015em; } .hero__title { margin: 0; font-size: clamp(46px,5.6vw,76px); } .hero .dd-lead { margin-top: 24px; max-width: 580px; } .hero__arrows { margin: 22px 0 30px; max-width: 580px; } .hero__cta { display: flex; gap: 20px; flex-wrap: wrap; } .hero__media { display: flex; justify-content: center; } .hero__frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--border-subtle); } .hero__img { width: 450px; height: auto; aspect-ratio: 450 / 675; display: block; } .pains__title { margin: 16px 0 0; } .pains__grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .pain { position: relative; overflow: hidden; display: flex; flex-direction: column; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 22px 22px 20px; transition: background var(--dur-base) var(--ease-soft), border-color var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-out); } .pain::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 85% at 50% -12%, rgba(63,134,188,.12), transparent 62%); opacity: 0; transition: opacity var(--dur-base) var(--ease-soft); } .pain:hover { background: var(--surface-card); border-color: var(--nordisch-blau-300); box-shadow: 0 24px 60px rgba(63,134,188,.14); transform: translateY(-6px); } .pain:hover::after { opacity: 1; } .pain__label { position: relative; z-index: 1; margin: 0 0 8px; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 16px; line-height: 1.2; letter-spacing: -0.01em; color: var(--text-secondary); transition: color var(--dur-base) var(--ease-soft); } .pain:hover .pain__label { color: var(--text-primary); } .pain__quote { position: relative; z-index: 1; flex: 1; margin: 0; padding-top: 32px; font-family: var(--font-body); font-weight: var(--fw-regular); font-size: 16px; line-height: 1.55; font-style: normal; color: var(--text-secondary); transition: color var(--dur-base) var(--ease-soft); } .pain:hover .pain__quote { color: var(--text-primary); } .pain__mark { position: absolute; top: 0; left: -2px; pointer-events: none; font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 44px; line-height: 1; color: var(--border-strong); transition: color var(--dur-base) var(--ease-soft); } .pain:hover .pain__mark { color: var(--nordisch-blau-300); } .pains__bridge { margin: 64px 0 0; } .pains__bridge-lead { margin: 0; font-size: 18px; line-height: 1.55; color: var(--text-secondary); } .pains__bridge-punch { margin: 8px 0 0; font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-h3); line-height: 1.25; letter-spacing: var(--ls-heading); color: var(--text-primary); } .connect__grid { display: grid; grid-template-columns: 1fr .52fr; gap: 72px; align-items: end; } .connect__media { margin: 0; display: flex; align-items: center; justify-content: flex-end; } .connect__media img { width: 100%; height: auto; max-width: 360px; display: block; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); } .connect__lead { max-width: none; } .connect__lead .dd-eyebrow { margin-bottom: 0; } .connect__title { margin: 14px 0 24px; } .connect__lead p { font-size: 18px; margin: 0 0 16px; max-width: 640px; } .connect__lead p:last-child { margin-bottom: 0; } .fit { margin-top: 36px; } .fit__heading { font-size: 24px; margin: 0 0 22px; } .fit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .fit__cta { margin-top: 40px; text-align: center; } .fit__card { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 24px 24px 12px; } .fit__card--yes { background: var(--mint-050); } .fit__card--no { background: var(--surface-muted); } .fit__card-title { font-family: var(--font-display); font-weight: 800; font-size: 16px; margin: 0 0 16px; color: var(--text-primary); } .fit__card--no .fit__card-title { color: var(--text-secondary); } .fit__list { list-style: none; margin: 0; padding: 0; } .fit__item { position: relative; padding-left: 30px; margin-bottom: 12px; font-size: 15px; line-height: 1.45; color: var(--text-primary); } .fit__item::before { position: absolute; left: 0; top: 0; font-weight: 700; } .fit__card--yes .fit__item::before { content: "\2713"; color: var(--status-positive); } .fit__card--no .fit__item { color: var(--text-secondary); } .fit__card--no .fit__item::before { content: "\2715"; color: var(--text-muted); } .person-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .person-card { display: flex; flex-direction: column; gap: 16px; } .person-card__head { display: flex; align-items: center; gap: 18px; } .person-card__avatar { width: 110px; height: 110px; border-radius: 50%; flex: none; overflow: hidden; border: 1px solid var(--border-subtle); background: var(--himmelblau); } .person-card__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; } .person-card__meta { display: flex; flex-direction: column; gap: 8px; } .person-card__name { color: var(--nordisch-blau-700); font-size: 17px; } .person-card__role { font-size: 22px; margin: 0; } .person-card__quote { font-size: 18px; color: var(--text-primary); font-style: italic; line-height: 1.45; margin: 0; } .person-card__desc { font-size: 16px; color: var(--text-secondary); line-height: 1.55; margin: 0; } .person-card .dd-arrows { margin-top: 4px; } .person-card .dd-arrows li { font-size: 15px; } .person-card__benefit { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-primary); background: var(--yellow-wash); border-left: 3px solid var(--sonnengelb); border-radius: var(--radius-xs); padding: 12px 16px; } .person-card__benefit strong { font-weight: var(--fw-bold); } .process__top { width: var(--container); margin: 0 auto; padding: 48px 0; display: grid; grid-template-columns: .95fr 1.05fr; gap: 52px; align-items: center; } .process__frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--border-subtle); } .process__frame img { width: 100%; max-width: 525px; height: auto; display: block; } .process__body p { font-size: 18px; } .process__title { margin: 18px 0 22px; } .process__panel { width: var(--container); margin: -24px auto 48px; background: var(--mint-050); border-radius: var(--radius-lg); padding: 36px 40px 40px; } .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .step { text-align: left; } .step__icon { margin: 0 0 16px; width: 54px; height: 54px; border-radius: 50%; background: var(--frisches-mint); color: var(--nordisch-blau-700); display: flex; align-items: center; justify-content: center; } .step__icon svg { width: 26px; height: 26px; display: block; stroke-width: 2; } .step__title { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 18px; color: var(--text-primary); margin: 0 0 8px; } .step__desc { margin: 0; font-size: 14px; color: var(--text-secondary); line-height: 1.5; } .focus__tabs { display: flex; flex-wrap: wrap; position: relative; } .focus__radio { position: absolute; width: 1px; height: 1px; opacity: 0; } .focus__tab { order: -1; width: 25%; padding: 6px 8px 18px; text-align: center; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.25; color: var(--text-secondary); border-bottom: 2px solid var(--border-subtle); transition: color .2s ease; } .focus__tab:hover { color: var(--text-primary); } .focus__radio:checked + .focus__tab { color: var(--text-primary); font-weight: 800; border-bottom-color: var(--anthrazit); } .focus__radio:focus-visible + .focus__tab { outline: 2px solid var(--focus-ring); outline-offset: 3px; } .focus__panel { order: 0; width: 100%; display: none; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; margin-top: 48px; } .focus__radio:checked + .focus__tab + .focus__panel { display: grid; animation: ddFocusIn .32s ease; } .focus__panel-title { font-size: clamp(28px,3vw,40px); line-height: 1.15; margin: 0; letter-spacing: -0.015em; } .focus__panel p { font-size: 17px; margin: 14px 0 0; max-width: 560px; } .focus__panel p:first-of-type { margin-top: 22px; } .focus__panel-frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--border-subtle); } .focus__panel-frame img { width: 100%; max-width: 550px; height: auto; display: block; } @keyframes ddFocusIn { from { transform: translateY(10px); } to { transform: none; } } .scale__inner { width: var(--container); margin: 0 auto; padding: 48px 0; display: grid; grid-template-columns: .85fr 1fr; gap: 64px; align-items: center; } .scale__figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--border-subtle); width: fit-content; } .scale__figure img { width: 100%; max-width: 650px; height: auto; display: block; } .scale__title { margin: 18px 0 16px; max-width: 620px; } .scale__body { font-size: 18px; margin: 0 0 16px; max-width: none; color: var(--text-secondary); } .scale__body:last-child { margin-bottom: 0; } .scale__list { margin: 0 0 16px; } .clients__text { font-size: 18px; max-width: 680px; color: var(--text-secondary); } .clients__text--first { margin-top: 16px; } .stats { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .stats__item { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 34px 32px; border-left: 1px solid var(--border-subtle); } .stats__item:first-child { border-left: none; } .stats__kicker { font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nordisch-blau-700); } .stats__num { position: relative; padding-bottom: 14px; white-space: nowrap; font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: clamp(38px, 4vw, 50px); line-height: 0.95; letter-spacing: var(--ls-heading); color: var(--text-primary); } .stats__num em { font-style: normal; font-size: 0.5em; color: var(--nordisch-blau-700); } .stats__num::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 6px; border-radius: 3px; background: var(--sonnengelb); } .stats__label { font-size: 15px; color: var(--text-secondary); line-height: 1.45; } .clients__top { display: grid; grid-template-columns: 1.85fr 1fr; gap: 44px; align-items: center; margin-top: 24px; } .stats--stack { margin: 0; grid-template-columns: 1fr; max-width: 250px; justify-self: center; } .stats--stack .stats__item { border-left: none; border-top: 1px solid var(--border-subtle); padding: 18px 24px; gap: 6px; } .stats--stack .stats__item:first-child { border-top: none; } .stats--stack .stats__num { font-size: 30px; padding-bottom: 10px; } .stats--stack .stats__num::after { width: 30px; height: 4px; } .stats--stack .stats__kicker { font-size: 11px; } .stats--stack .stats__label { font-size: 13px; } .clients__caption { margin: 40px 0 0; font-size: 13px; letter-spacing: 0.04em; color: var(--text-secondary); text-align: center; } .clients__logos { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 26px 48px; } .clients__logo { display: flex; align-items: center; justify-content: center; } .clients__logo img { width: auto; height: auto; max-height: 30px; max-width: 200px; object-fit: contain; display: block; } .contact__inner { width: var(--container-narrow); margin: 0 auto; padding: 56px 0; text-align: center; } .contact__lead { max-width: none; margin: 0 auto 14px; } .contact__lead:last-of-type { margin-bottom: 32px; } .contact__lead strong { font-weight: var(--fw-bold); color: var(--text-primary); } .contact__card { max-width: 520px; margin: 0 auto; text-align: left; } .contact__form { display: flex; flex-direction: column; gap: 16px; } .contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .contact__note { font-size: 13px; color: var(--text-muted); margin: 2px 0 0; line-height: 1.5; } .contact__note a { color: var(--nordisch-blau-700); } .contact__error { font-size: 13px; color: var(--status-critical); margin-top: -4px; } .contact__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .contact__success { text-align: center; padding: 20px 0; } .contact__success-title { font-family: var(--font-display); font-weight: 800; font-size: 26px; } .contact__success-reset { margin-top: 18px; background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-size: 15px; font-weight: 600; color: var(--nordisch-blau); text-decoration: underline; text-underline-offset: 3px; } .contact.is-sent .contact__intro, .contact.is-sent .contact__form { display: none; } .contact:not(.is-sent) .contact__success { display: none; } .legal { padding: 56px 0 88px; } .legal__back { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: var(--fw-semibold); color: var(--nordisch-blau); text-decoration: none; margin-bottom: 24px; } .legal__back:hover { text-decoration: underline; text-underline-offset: 3px; } .legal h1 { font-size: var(--fs-h2); margin-bottom: 10px; } .legal h2 { font-size: 24px; margin: 44px 0 12px; } .legal h3 { font-size: 18px; margin: 26px 0 8px; } .legal p, .legal li { font-size: 16px; color: var(--text-secondary); line-height: 1.6; } .legal ul { padding-left: 22px; margin: 0 0 var(--space-4); } .legal li { margin-bottom: 6px; } .legal a { color: var(--nordisch-blau); } .legal address { font-style: normal; color: var(--text-secondary); font-size: 16px; line-height: 1.7; } .legal__updated { font-size: 14px; color: var(--text-muted); margin-top: 40px; } .site-footer { background: var(--anthrazit); color: #fff; border-top: 1px solid var(--border-subtle); padding: 56px 24px; } .site-footer__top { width: var(--container); margin-inline: auto; display: flex; justify-content: space-between; align-items: end; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,0.12); margin-bottom: 24px; } .site-footer__tagline { color: rgba(255,255,255,0.85); margin: 0; max-width: 360px; } .site-footer__logo { margin-bottom: 14px; } .site-footer__legal { display: flex; flex-direction: row; gap: 32px; } .site-footer__legal a { color: rgba(255,255,255,0.85); font-size: 15px; text-decoration: none; } .site-footer__copy { width: var(--container); margin-inline: auto; color: rgba(255,255,255,0.7); font-size: 13px; } .is-zoomable { cursor: zoom-in; } .lightbox { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 40px; background: rgba(15, 24, 32, 0.82); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .lightbox[aria-hidden="false"] { display: flex; animation: lightboxIn var(--dur-base) var(--ease-out); } .lightbox__img { max-width: min(1100px, 92vw); max-height: 88vh; width: auto; height: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); background: #fff; } .lightbox__close { position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; border: none; border-radius: var(--radius-pill); background: rgba(255,255,255,0.14); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--dur-base) var(--ease-soft); } .lightbox__close:hover { background: rgba(255,255,255,0.26); } body.has-lightbox { overflow: hidden; } @keyframes lightboxIn { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 1024px) { .hero__inner { grid-template-columns: 1fr; gap: 40px; padding: 40px 0; } .hero__media { justify-content: flex-start; } .connect__grid { grid-template-columns: 1fr; gap: 24px; } .connect__media { display: block; margin: 0; justify-content: flex-start; } .connect__media img { height: auto; width: 100%; max-width: 320px; } .process__top { grid-template-columns: 1fr; gap: 36px; padding: 40px 0; } .steps { grid-template-columns: repeat(2, 1fr); gap: 32px; } .process__panel { padding: 32px 30px 36px; } .focus__panel { grid-template-columns: 1fr; gap: 32px; } .scale__inner { grid-template-columns: 1fr; gap: 40px; padding: 40px 0; } .scale__figure { width: 100%; order: 2; } .section__inner { padding: 40px 0; } } @media (max-width: 768px) { .nav-toggle { display: flex; } .site-header__menu { position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 4px; background: var(--surface-base); border-bottom: 1px solid var(--border-subtle); padding: 12px 24px 20px; box-shadow: var(--shadow-md); display: none; } .site-header.is-open .site-header__menu { display: flex; } .site-nav { flex-direction: column; gap: 4px; } .site-nav a { padding: 10px 0; font-size: 16px; } .site-header__menu .btn { align-self: flex-start; margin-top: 8px; } .person-grid { grid-template-columns: 1fr; } .pains__grid { grid-template-columns: 1fr; gap: 16px; } .pain__label, .pain__quote { color: var(--text-primary); } .pain:nth-child(1) { background: var(--blue-wash); border-color: rgba(63,134,188,.20); } .pain:nth-child(2) { background: var(--yellow-wash); border-color: rgba(233,161,0,.22); } .pain:nth-child(3) { background: var(--mint-050); border-color: rgba(62,142,111,.22); } .pain:nth-child(1) .pain__mark { color: var(--nordisch-blau); } .pain:nth-child(2) .pain__mark { color: var(--sonnengelb-600); } .pain:nth-child(3) .pain__mark { color: var(--status-positive); } .pains__bridge { margin-top: 28px; } .pains__bridge-punch { font-size: 20px; } .fit__grid { grid-template-columns: 1fr; } #referenzen .section__inner { display: flex; flex-direction: column; } .clients__top { display: contents; } .stats--stack { order: 1; margin-top: 32px; max-width: none; grid-template-columns: 1fr 1fr; } .stats--stack .stats__item { border-top: none; border-left: 1px solid var(--border-subtle); padding: 22px 18px; } .stats--stack .stats__item:first-child { border-left: none; } .clients__logos { gap: 22px 40px; } .clients__logo img { max-height: 24px; } .contact__row { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; gap: 22px; } .step { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; } .step__icon { margin: 0; } .step__title { margin: 0; } .step__desc { grid-column: 1 / -1; margin-top: 8px; } .focus__tabs { display: block; } .focus__tab { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; padding: 16px 2px; font-size: 17px; border-bottom: 1px solid var(--border-strong); } .focus__tab::after { content: ""; width: 8px; height: 8px; flex: none; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .55; transition: transform .25s ease; margin-top: -3px; } .focus__radio:checked + .focus__tab { border-bottom-color: var(--border-strong); } .focus__radio:checked + .focus__tab::after { transform: rotate(-135deg); opacity: 1; margin-top: 3px; } .focus__panel { margin-top: 0; gap: 22px; padding: 8px 2px 26px; } .hero__img { width: 100%; max-width: 100%; } .hero__frame { width: 100%; } .site-footer__top { flex-direction: column; align-items: start; gap: 24px; } .site-footer__legal { flex-direction: column; gap: 8px; } .section__inner, .hero__inner, .process__top, .scale__inner, .contact__inner { padding-top: 36px; padding-bottom: 36px; } .process__panel { padding: 26px 20px 30px; margin: -12px auto 36px; } .hero__kicker { font-size: 22px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
.article{padding:48px 0 88px}.article__back{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:var(--fw-semibold);color:var(--nordisch-blau-700);text-decoration:none;margin-bottom:22px}.article__back:hover{text-decoration:underline}.article__eyebrow{font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--nordisch-blau-700);margin:0 0 14px}.article h1{font-size:var(--fs-h2);margin-bottom:8px}.article h2{font-size:clamp(24px,3.2vw,33px);line-height:var(--lh-heading);margin:52px 0 16px}.article h3{font-size:var(--fs-h4);margin:30px 0 8px}.article__main p{margin:0 0 18px}.article__main a[href]:not(.btn){color:var(--nordisch-blau-700);text-decoration:underline;text-underline-offset:2px}.article strong{font-weight:var(--fw-semibold)}.article hr{border:0;border-top:1px solid var(--border-subtle);margin:44px 0 8px}.article__main ol{counter-reset:li;list-style:none;margin:0 0 20px;padding:0}.article__main ol>li{position:relative;padding-left:40px;margin-bottom:12px;color:var(--text-secondary)}.article__main ol>li::before{counter-increment:li;content:counter(li);position:absolute;left:0;top:1px;width:26px;height:26px;border-radius:50%;background:var(--nordisch-blau-050);color:var(--nordisch-blau-700);font-family:var(--font-mono);font-size:13px;font-weight:var(--fw-bold);display:flex;align-items:center;justify-content:center;line-height:1}.article__main ul{list-style:none;margin:0 0 20px;padding:0}.article__main ul>li{position:relative;padding-left:28px;margin-bottom:12px;color:var(--text-secondary)}.article__main ul>li::before{content:"\2192";position:absolute;left:0;top:0;color:var(--accent-primary);font-weight:var(--fw-bold)}.callout{background:var(--frisches-mint);border-radius:var(--radius-md);padding:24px 28px;margin:26px 0 8px}.callout__label{font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:#1F5C42;margin:0 0 10px}.callout p{margin:0 0 12px}.callout p:last-child{margin-bottom:0}.ledger{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:24px 0}.ledger__col{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:20px 22px}.ledger__col--yes{background:var(--mint-050)}.ledger__col--no{background:var(--surface-muted)}.ledger__head{font-family:var(--font-display);font-weight:var(--fw-extrabold);font-size:var(--fs-h4);margin:0 0 14px}.ledger ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.ledger ul>li{position:relative;padding-left:26px;margin:0;font-size:var(--fs-small);line-height:var(--lh-tight);color:var(--text-secondary)}.ledger ul>li::before{position:absolute;left:0;top:0;font-weight:var(--fw-bold)}.ledger__col--yes ul>li::before{content:"\2713";color:var(--status-positive)}.ledger__col--no ul>li::before{content:"\00D7";color:var(--status-critical)}.pull{background:var(--yellow-wash);border-radius:var(--radius-md);padding:24px 28px;margin:22px 0}.pull p{margin:0}@media (max-width:640px){.ledger{grid-template-columns:1fr}}
.article__grid{width:var(--container);margin-inline:auto;display:grid;grid-template-columns:232px minmax(0,1fr);gap:64px;align-items:start}.article__main{max-width:760px}.article__main section[id]{scroll-margin-top:calc(var(--header-h) + 20px)}.article__main p.article__lead{font-size:var(--fs-body);color:var(--text-secondary);line-height:var(--lh-body);margin:24px 0 0}.article__aside{position:sticky;top:calc(var(--header-h) + 28px)}.toc{margin-top:30px}.toc__title{font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted);margin:0 0 14px}.toc__list{list-style:none;margin:0;padding:0;border-left:1px solid var(--border-subtle)}.toc__list li{margin:0}.toc__list a{display:block;padding:8px 0 8px 18px;margin-left:-1px;border-left:2px solid transparent;font-size:15px;line-height:1.35;color:var(--text-secondary);text-decoration:none}.toc__list a:hover{color:var(--text-primary)}.toc__list a.is-active{color:var(--text-primary);border-left-color:var(--nordisch-blau);font-weight:var(--fw-medium)}.article__meta{font-family:var(--font-body);font-weight:var(--fw-regular);font-size:13px;line-height:1.7;color:var(--text-muted);margin-top:28px}.article__cta{margin-top:8px}.article__cta p{margin:0 0 18px}.article__cta-kicker{font-family:var(--font-display);font-weight:var(--fw-extrabold);font-size:var(--fs-h4);line-height:var(--lh-heading);color:var(--text-primary);margin:0 0 18px}@media (max-width:900px){.article__grid{grid-template-columns:1fr;gap:0}.article__aside{position:static;margin-bottom:4px}.toc{display:none}.article__meta{margin-top:14px}}
.article__meta a[href]{color:var(--text-secondary);text-decoration:none}.article__meta a[href]:hover{text-decoration:underline}.article__sources{margin-top:44px;padding-top:24px;border-top:1px solid var(--border-subtle);font-size:var(--fs-small);color:var(--text-muted)}.article__sources-title{font-weight:var(--fw-semibold);color:var(--text-secondary);margin:0 0 12px}.article__sources ul{list-style:none;margin:0;padding:0}.article__sources ul>li{padding-left:0;margin:0 0 8px;line-height:var(--lh-tight)}.article__sources ul>li::before{content:none}.article__main .article__sources a[href]{color:var(--text-secondary);text-decoration:underline;text-underline-offset:2px}.article__main .article__sources a[href]:hover{color:var(--text-primary)}