/* PROOF Redesign (2026-10-23): das Stylesheet des Prototyps (Downloads/PROOF Überarbeitung/redesign/assets/css/proof.css) mit Schriften als Dateien statt data-URIs. Am Ende: Brücke zu den alten Blöcken (pf-*). Änderungen am Prototyp hier nachziehen. */ /* PROOF – Startseite Redesign Aufbau: Tokens · Basis · Bausteine · Sektionen · Bewegung ------------------------------------------------------------------ */ @font-face { font-family: "Work Sans"; src: url("../fonts/work-sans-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* Farbe */ --ink: #101114; --ink-2: #2a2c31; --muted: #55574f; /* 6,1 : 1 auf --paper */ --paper: #f3f2f1; --paper-2: #eae8e5; --white: #ffffff; --rule: rgba(16, 17, 20, .1); --blue: #0b50c8; --blue-2: #1a62e0; --blue-soft: #dfe8fb; --navy: #062558; --navy-2: #0a3277; --lime: #adf71e; --lime-2: #c6fb5f; --lime-deep: #8fd60a; --on-dark: rgba(255, 255, 255, .78); /* Körnung: SVG-Rauschen, Deckkraft mit Kontrast aus dem Rauschwert */ --grain-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .07 0 0 0 0 .08 .3 0 0 0 -.14'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .26 0 0 0 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --grain-lime: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .3 0 0 0 0 0 .6 0 0 0 -.26'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* Typo */ --font: "Work Sans", "Helvetica Neue", Arial, sans-serif; --fs-h1: clamp(2.625rem, 1.2rem + 4.6vw, 5.5rem); --fs-h2: clamp(2.125rem, 1.45rem + 2.5vw, 4rem); --fs-h2-xl: clamp(2.375rem, 1.4rem + 3.6vw, 5.25rem); --fs-h3: clamp(1.375rem, 1.2rem + .55vw, 1.75rem); --fs-lead: clamp(1.125rem, 1.03rem + .35vw, 1.375rem); --fs-body: 1.0625rem; --fs-small: .9375rem; /* Raum */ --gutter: clamp(16px, 4.2vw, 56px); --max: 1320px; --max-wide: 1520px; --section: clamp(80px, 4rem + 5.5vw, 168px); --radius: 8px; --radius-lg: 10px; --header-h: 76px; --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); } /* ---------- Basis ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; font-family: var(--font); font-size: var(--fs-body); line-height: 1.6; color: var(--ink); background: var(--grain-paper), var(--paper); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; } img, picture, video, svg { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; } ul, ol { list-style: none; } :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 3px; } ::selection { background: var(--lime); color: var(--ink); } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 12px 18px; background: var(--ink); color: var(--white); border-radius: 6px; transition: top .2s; } .skip:focus { top: 16px; } .wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .wrap--wide { max-width: calc(var(--max-wide) + 2 * var(--gutter)); } .section { padding-block: var(--section); } .section--tint { background: var(--grain-paper), var(--paper-2); } /* ---------- Typo ---------- */ .h2 { font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -.035em; font-weight: 520; text-wrap: balance; } .h2--xl { font-size: var(--fs-h2-xl); line-height: 1; letter-spacing: -.04em; } .h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.02em; font-weight: 560; } .lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); max-width: 40ch; text-wrap: pretty; } .section-head { margin-bottom: clamp(44px, 2.5rem + 2.6vw, 88px); } .ln { display: inline; } @media (min-width: 600px) { .ln { display: block; } } .section-head--split { display: grid; gap: 28px 64px; max-width: none; } .section-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; } @media (min-width: 1200px) { .section-head--split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; } .section-head--split .lead { justify-self: end; } } /* ---------- Knöpfe und Links ---------- */ /* Primärknopf 1:1 wie auf get-proof.de: blauer Block, Lime-Pfeilmarke am rechten Ende angeschnitten. Hover: Marke dreht eine halbe Drehung gegen den Uhrzeigersinn und wächst, das Label hebt sich um 2 Einheiten und bekommt eine Unterstreichung. Feder-Kurve aus Figma („Slow“, 1,25 s). --s ist die Längeneinheit (1 = 64 px hoher Knopf). Die Marke sitzt über right statt left, damit auch längere Beschriftungen passen. */ .btn { --s: 1px; --btn-time: 1.25s; --btn-ease: linear(0, .105 5%, .291 10%, .467 15%, .61 20%, .719 25%, .799 30%, .857 35%, .898 40%, .928 45%, .949 50%, .964 55%, .974 60%, .982 65%, .987 70%, .991 75%, .994 80%, .995 85%, .997 90%, .998 95%, 1); position: relative; overflow: hidden; display: inline-flex; align-items: center; flex: none; box-sizing: border-box; min-width: calc(338 * var(--s)); height: calc(64 * var(--s)); padding: 0 calc(100 * var(--s)) 0 calc(28 * var(--s)); background: var(--blue); color: #fcfcf9; font-weight: 500; font-size: calc(20 * var(--s)); line-height: 1.2; letter-spacing: -.03em; white-space: nowrap; border-radius: 4px; transition: padding-bottom var(--btn-time) var(--btn-ease), background-color .2s; } .btn::after { content: ""; position: absolute; top: calc(-64 * var(--s)); right: calc(-14 * var(--s)); width: calc(153 * var(--s)); height: calc(192 * var(--s)); background: url("../img/btn-arrow.svg") no-repeat center / 100% 100%; transform: translateX(calc(33.5 * var(--s))) rotate(180deg) scale(.536, .531); transition: transform var(--btn-time) var(--btn-ease); pointer-events: none; } .btn__label { padding-bottom: calc(3 * var(--s)); margin-bottom: calc(-3 * var(--s)); background: linear-gradient(#fcfcf9, #fcfcf9) no-repeat 0 100% / 0 calc(2 * var(--s)); transition: background-size var(--btn-time) var(--btn-ease), padding-bottom var(--btn-time) var(--btn-ease), margin-bottom var(--btn-time) var(--btn-ease); } .btn:hover, .btn:focus-visible { padding-bottom: calc(4 * var(--s)); } .btn:is(:hover, :focus-visible) .btn__label { padding-bottom: calc(5 * var(--s)); margin-bottom: calc(-5 * var(--s)); background-size: 100% calc(2 * var(--s)); } .btn:hover::after, .btn:focus-visible::after { transform: translateX(0) rotate(0deg) scale(1); } .btn:focus-visible { outline-offset: 4px; } .btn--lg { --s: 1px; } .btn--sm { --s: .69px; min-width: 0; } .site-header__cta { --s: .7246px; } .btn--block { width: 100%; } @media (max-width: 1024px) { .btn { --s: .906px; } .btn--sm { --s: .69px; } } @media (max-width: 767px) { .btn { min-width: min(280px, 100%); } .btn--sm { min-width: 0; } } @media (prefers-reduced-motion: reduce) { .btn { --btn-time: .01s; } } .link-arrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 560; color: var(--blue); padding-block: 6px; transition: opacity .3s; } .link-arrow svg { width: 18px; height: 18px; transition: transform .45s var(--ease-out); } .link-arrow:hover { opacity: .82; } .link-arrow:hover svg { transform: translateX(4px); } .link-arrow--light { color: var(--white); } .link-inline { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; } .round-btn { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--rule); background: var(--white); color: var(--ink); transition: background-color .3s, color .3s, border-color .3s, transform .3s var(--ease-out); } .round-btn svg { width: 20px; height: 20px; } .round-btn:hover { background: var(--ink); color: var(--white); border-color: var(--ink); } .round-btn:disabled { opacity: .35; pointer-events: none; } .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; } .dot--used { background: var(--blue); } .dot--res { background: transparent; box-shadow: inset 0 0 0 2px var(--blue); } .dot--task { background: var(--blue); } .dot--advice { background: var(--lime-deep); } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 6px; font-size: .75rem; font-weight: 560; background: var(--blue-soft); color: var(--blue); white-space: nowrap; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); isolation: isolate; transition: height .4s var(--ease-out); } /* Glasfläche wie die Hauptnavigation: weiß, leicht transparent */ .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .78); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); box-shadow: 0 1px 0 var(--rule); opacity: 0; transition: opacity .35s var(--ease-out); } .site-header.is-scrolled { --header-h: 64px; } .site-header.is-scrolled::before, .site-header.is-menu::before { opacity: 1; } .site-header.is-menu::before { box-shadow: none; } .site-header__inner { height: 100%; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; } .brand { display: flex; align-items: center; justify-self: start; padding: 6px 0; } .brand__logo { width: 156px; height: 30px; color: var(--ink); fill: currentColor; } .nav { display: none; } .site-header__actions { display: flex; align-items: center; gap: 8px; justify-self: end; } .site-header__cta { display: none; } .icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--rule); transition: background-color .3s, color .3s, box-shadow .3s; } .icon-btn svg { width: 18px; height: 18px; } .icon-btn:hover { background: var(--ink); color: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink); } .burger { width: 44px; height: 44px; display: grid; place-content: center; gap: 6px; margin-right: -8px; } .burger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .4s var(--ease-out); } .burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); } .burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); } .mobilnav { position: fixed; inset: var(--header-h) 0 0; background: rgba(255, 255, 255, .94); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); overflow-y: auto; padding: 24px 0 40px; } .mobilnav[hidden] { display: none; } .mobilnav__label { font-size: var(--fs-small); color: var(--muted); margin-bottom: 8px; } .mobilnav__services { display: grid; margin-bottom: 24px; } .mobilnav__services a { display: block; padding: 10px 0; font-size: 1.125rem; font-weight: 520; } .mobilnav__pages { border-top: 1px solid var(--rule); margin-bottom: 32px; } .mobilnav__pages a { display: block; padding: 16px 0; border-bottom: 1px solid var(--rule); font-size: 1.375rem; font-weight: 520; letter-spacing: -.02em; } @media (min-width: 1024px) { .burger, .mobilnav { display: none !important; } .site-header__inner { grid-template-columns: 1fr auto 1fr; gap: 24px; } .nav { display: block; } .site-header__actions { gap: 10px; } .site-header__cta { display: inline-flex; margin-left: 6px; } .nav__list { display: flex; gap: 4px; } .nav__link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 6px; font-size: .9688rem; font-weight: 500; transition: background-color .25s; } .nav__link:hover, .nav__trigger[aria-expanded="true"] { background: rgba(16, 17, 20, .06); } .nav__chev { width: 16px; height: 16px; transition: transform .35s var(--ease-out); } .nav__trigger[aria-expanded="true"] .nav__chev { transform: rotate(180deg); } /* Mega-Menü über die volle Breite, gleiche Glasfläche wie der Header */ .mega { position: absolute; left: 0; right: 0; top: 100%; background: rgba(255, 255, 255, .78); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); border-top: 1px solid rgba(16, 17, 20, .06); box-shadow: 0 1px 0 var(--rule), 0 40px 80px -40px rgba(6, 37, 88, .28); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .55s var(--ease-out), visibility 0s .55s; } .mega::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } .nav__item--drop.is-open .mega { clip-path: inset(0 0 -80px 0); visibility: visible; transition-delay: 0s; } .mega__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 40px; padding: 36px 0 20px; } .mega__col { opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); } .is-open .mega__col { opacity: 1; transform: none; } .is-open .mega__col:nth-child(2) { transition-delay: .03s; } .is-open .mega__col:nth-child(3) { transition-delay: .06s; } .is-open .mega__col:nth-child(4) { transition-delay: .09s; } .is-open .mega__col:nth-child(5) { transition-delay: .12s; } .is-open .mega__col:nth-child(6) { transition-delay: .15s; } .mega__label { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); font-weight: 600; font-size: 1rem; letter-spacing: -.01em; } .mega__sub { margin: 2px 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); font-size: .8125rem; color: var(--muted); } .mega__links { display: grid; gap: 1px; } .mega__links a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font-size: .9375rem; line-height: 1.35; color: var(--ink-2); transition: color .25s, transform .35s var(--ease-out); } .mega__links a::before { content: ""; width: 6px; height: 6px; margin-left: -14px; border-radius: 50%; background: var(--lime-deep); opacity: 0; transform: scale(0); transition: opacity .25s, transform .35s var(--ease-out); } .mega__links a:hover { color: var(--blue); transform: translateX(14px); } .mega__links a:hover::before { opacity: 1; transform: none; } .mega__foot { display: flex; justify-content: flex-end; padding: 0 0 28px; } .mega__promo-title { font-weight: 600; letter-spacing: -.01em; } .mega__promo-text { margin-top: 2px; font-size: .875rem; color: var(--muted); max-width: 58ch; } .mega__facts { display: flex; gap: 32px; } .mega__facts div { display: flex; flex-direction: column-reverse; } .mega__facts dd { font-size: 1.375rem; line-height: 1.1; font-weight: 520; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .mega__facts dt { font-size: .75rem; color: var(--muted); } .mega__cta { display: flex; align-items: center; gap: 24px; } } @media (min-width: 1280px) { .mega__cols { grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media (max-width: 479px) { .site-header__actions .icon-btn { width: 36px; height: 36px; } } /* ---------- Hero ---------- */ .hero { position: relative; padding-top: clamp(40px, 2rem + 5vw, 120px); } .hero__title { font-size: var(--fs-h1); line-height: .98; letter-spacing: -.05em; font-weight: 540; isolation: isolate; text-wrap: balance; } .nowrap { white-space: nowrap; } .mark { position: relative; white-space: nowrap; display: inline-block; } .mark::before { content: ""; position: absolute; z-index: -1; left: -.1em; right: -.1em; top: .03em; bottom: -.1em; background: var(--lime); border-radius: 3px; transform-origin: left center; transform: scaleX(var(--mark, 1)); } .hero__row { display: grid; gap: 32px; margin-top: clamp(28px, 1.5rem + 2vw, 56px); } .hero__lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); max-width: 44ch; text-wrap: pretty; } .hero__lead strong { color: var(--ink); font-weight: 560; } .hero__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; } .assure { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; font-size: var(--fs-small); color: var(--muted); } .assure li { display: inline-flex; align-items: center; gap: 8px; } .assure svg { width: 16px; height: 16px; color: var(--blue); } @media (min-width: 960px) { .hero__row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } } /* ---------- Bühne + Board ---------- */ .stage { position: relative; border-radius: var(--radius-lg); overflow: hidden; isolation: isolate; } .stage--board { margin-top: clamp(48px, 2rem + 4vw, 104px); padding: clamp(20px, 4vw, 72px) clamp(12px, 4vw, 72px) 0; background: var(--grain-dark), radial-gradient(120% 90% at 50% 0%, var(--navy-2) 0%, var(--navy) 55%, #04183b 100%); perspective: 1600px; } .stage--board .board { -webkit-mask: linear-gradient(#000 74%, transparent 99%); mask: linear-gradient(#000 74%, transparent 99%); } .board { position: relative; display: grid; grid-template-columns: 1fr; max-width: 1240px; margin-inline: auto; min-height: 520px; background: #f7f7f5; border-radius: 8px 8px 0 0; box-shadow: 0 -1px 0 rgba(255, 255, 255, .5) inset, 0 40px 120px -30px rgba(0, 0, 0, .55); transform-origin: 50% 0; font-size: 14px; line-height: 1.4; color: var(--ink); overflow: hidden; } .board__side { display: none; } .board__main { padding: 18px; min-width: 0; } .board__top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .board__title { font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin-right: auto; } .board__search { display: none; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 6px; background: var(--white); color: #8a8c86; box-shadow: 0 0 0 1px var(--rule); min-width: 220px; font-size: 13px; } .board__search svg, .board__new svg { width: 15px; height: 15px; } .board__new { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 6px; background: var(--blue); color: var(--white); font-weight: 560; font-size: 13px; } .board__cols { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 24px; } .board__cols::-webkit-scrollbar { display: none; } .board__col { scroll-snap-align: start; background: #eeeeeb; border-radius: 8px; padding: 10px; min-height: 420px; } .board__col-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px; font-weight: 600; font-size: 13px; } .board__col-head::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); } [data-col="review"] .board__col-head::before { background: #7c5cff; } [data-col="done"] .board__col-head::before { background: var(--lime-deep); } .board__list { display: grid; gap: 10px; align-content: start; } .ticket { position: relative; background: var(--white); border-radius: 6px; padding: 12px 13px 13px; box-shadow: 0 0 0 1px rgba(16, 17, 20, .06), 0 6px 16px -10px rgba(6, 37, 88, .25); will-change: transform; } .ticket__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .ticket__title { font-weight: 560; font-size: 13.5px; letter-spacing: -.005em; line-height: 1.35; } .ticket__meta { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 12px; color: #6b6d66; } .ticket__bar { height: 4px; margin-top: 10px; border-radius: 3px; background: #ecece8; overflow: hidden; } .ticket__bar i { display: block; height: 100%; width: calc(var(--p, .2) * 100%); background: var(--blue); border-radius: inherit; transition: width .9s var(--ease-out); } .ticket__who { display: flex; align-items: center; gap: 6px; } .ticket__who img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; } .ticket__state { display: none; align-items: center; gap: 5px; font-weight: 560; } .ticket__state svg { width: 14px; height: 14px; } @media (max-width: 719px) { .ticket__meta span:last-child { display: none; } } [data-list="review"] .ticket__bar i { background: #7c5cff; } [data-list="review"] .ticket__state--review { display: inline-flex; color: #5b3fe0; } [data-list="done"] .ticket__bar i { background: var(--lime-deep); width: 100%; } [data-list="done"] .ticket__state--done { display: inline-flex; color: #4d7a00; } .ticket.is-flash { animation: flash 1.2s var(--ease-out); } @keyframes flash { 0% { box-shadow: 0 0 0 2px var(--lime), 0 10px 30px -8px rgba(143, 214, 10, .6); } 100% { box-shadow: 0 0 0 1px rgba(16, 17, 20, .06), 0 6px 16px -10px rgba(6, 37, 88, .25); } } .toast { position: absolute; z-index: 3; top: 14px; right: 14px; display: flex; gap: 12px; align-items: flex-start; width: min(330px, calc(100% - 28px)); padding: 13px 15px; border-radius: 8px; background: rgba(255, 255, 255, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 50px -20px rgba(6, 37, 88, .45), 0 0 0 1px rgba(16, 17, 20, .06); font-size: 13px; opacity: 0; transform: translateY(-12px) scale(.98); pointer-events: none; } .toast__mark { width: 30px; height: 30px; flex: none; padding: 7px; border-radius: 9px; background: var(--ink); fill: var(--lime); } .toast p { display: grid; gap: 1px; line-height: 1.35; } .toast strong { font-weight: 600; font-size: 12px; letter-spacing: .02em; } @media (min-width: 720px) { .board__cols { grid-auto-flow: initial; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; } .board__search { display: inline-flex; } } @media (min-width: 1024px) { .board { grid-template-columns: 232px minmax(0, 1fr); min-height: 600px; } .board__main { padding: 22px 24px; } .board__side { display: flex; flex-direction: column; gap: 28px; padding: 22px 16px; background: var(--blue); color: rgba(255, 255, 255, .86); } .board__logo { width: 92px; height: 18px; fill: var(--white); margin: 2px 8px 0; } .board__menu { display: grid; gap: 2px; } .board__menu li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; font-weight: 500; } .board__menu li.is-active { background: rgba(255, 255, 255, .14); color: var(--white); } .board__menu svg { width: 17px; height: 17px; } .board__points { margin-top: auto; padding: 14px; border-radius: 8px; background: rgba(4, 24, 59, .35); } .board__points-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; margin-bottom: 10px; } .board__points-head strong { color: var(--white); font-size: 14px; } .board__meter { position: relative; height: 8px; border-radius: 6px; background: rgba(255, 255, 255, .16); overflow: hidden; } .board__meter span { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 6px; transition: width 1s var(--ease-out), left 1s var(--ease-out); } .board__meter-used { width: 34%; background: var(--lime); } .board__meter-res { left: 34%; width: 18%; background: repeating-linear-gradient(-45deg, rgba(173, 247, 30, .9) 0 3px, rgba(173, 247, 30, .35) 3px 6px); } .board__legend { display: flex; gap: 14px; margin-top: 10px; font-size: 11.5px; } .board__legend li { display: flex; align-items: center; gap: 6px; } .board__legend .dot--used { background: var(--lime); } .board__legend .dot--res { box-shadow: inset 0 0 0 2px var(--lime); } .stage--board .toast { top: 28px; right: max(28px, calc(50% - 640px)); } } /* ---------- Logos ---------- */ .logos { padding-block: clamp(56px, 3rem + 3vw, 112px) 0; } .logos__inner { display: grid; gap: 28px; align-items: center; } .logos__label { font-size: var(--fs-small); color: var(--muted); max-width: 22ch; } .marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee__track { display: flex; width: max-content; align-items: center; gap: clamp(40px, 5vw, 88px); padding-inline: clamp(20px, 2.5vw, 44px); } .marquee__track img { height: 46px; width: auto; opacity: .78; filter: grayscale(1) contrast(1.1); mix-blend-mode: multiply; } .marquee__track img.logo--tall { height: 58px; } @media (min-width: 960px) { .logos__inner { grid-template-columns: 200px minmax(0, 1fr); gap: 48px; } } /* ---------- So funktioniert PROOF: vier Kacheln wie auf der Live-Seite ---------- */ .section-head--stack { display: grid; gap: 24px; max-width: none; } .section-head--stack .lead { max-width: 52ch; } .how__grid { --edge: max(var(--gutter), calc((100vw - var(--max)) / 2)); display: grid; grid-auto-flow: column; grid-auto-columns: min(80vw, 340px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); padding: 4px var(--edge) 12px; scrollbar-width: none; } .how__grid::-webkit-scrollbar { display: none; } .how-tile { scroll-snap-align: start; display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: var(--white); box-shadow: 0 0 0 1px var(--rule); transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); } .how-tile:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--rule), 0 36px 70px -36px rgba(6, 37, 88, .4); } .how-tile--dial { background: var(--grain-paper), var(--paper-2); box-shadow: none; } .how-tile--dark { background: var(--grain-dark), #121317; color: var(--white); box-shadow: none; } .how-tile__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; display: grid; place-items: center; } .how-tile__media > picture, .how-tile__media > picture img { position: absolute; inset: 0; width: 100%; height: 100%; } .how-tile__media img { object-fit: cover; transition: transform 1.2s var(--ease-out); } .how-tile:hover .how-tile__media img { transform: scale(1.04); } .how-tile__media--team img { object-position: 50% 18%; } .how-tile__body { display: grid; gap: 10px; padding: 22px 26px 28px; } .how-tile__title { display: flex; align-items: flex-end; min-height: 2.4em; font-size: clamp(1.1875rem, 1.05rem + .45vw, 1.375rem); line-height: 1.2; letter-spacing: -.02em; font-weight: 520; text-wrap: balance; } .how-tile__body p { font-size: .9375rem; line-height: 1.5; color: var(--muted); } .how-tile--dark .how-tile__body p { color: var(--on-dark); } .how__link { display: flex; justify-content: center; margin-top: clamp(40px, 4vw, 64px); } @media (min-width: 768px) { .how__grid { grid-auto-flow: initial; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding: 0 var(--gutter); overflow: visible; } } @media (min-width: 1200px) { .how__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } } /* Drehregler: die ersten 32 Striche laufen nacheinander in Lime an, der Pfeil dreht mit */ .dial { width: 74%; height: auto; } .dial__ring { fill: none; stroke: rgba(16, 17, 20, .07); stroke-width: 1.5; } .dial__ring--2 { fill: rgba(255, 255, 255, .55); } .dial__ticks line { stroke: rgba(16, 17, 20, .18); stroke-width: 2.6; stroke-linecap: round; } .dial__hub { fill: var(--white); stroke: rgba(16, 17, 20, .06); } .dial__arrow { transform-origin: 0 0; } .dial__arrow path { fill: none; stroke: var(--blue); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; } .is-in .dial__ticks line:nth-child(-n + 32) { animation: tick 4s ease-in-out infinite; animation-delay: calc(var(--n) * 28ms); } .is-in .dial__arrow { animation: dialArrow 4s ease-in-out infinite; } @keyframes tick { 0%, 12% { stroke: rgba(16, 17, 20, .18); } 30%, 78% { stroke: var(--lime-deep); } 92%, 100% { stroke: rgba(16, 17, 20, .18); } } @keyframes dialArrow { 0%, 12% { transform: rotate(0deg); } 40%, 78% { transform: rotate(45deg); } 92%, 100% { transform: rotate(0deg); } } /* Push auf dem Sperrbildschirm, blendet ein wie unter iOS */ .how-push { position: absolute; left: 24%; width: 50%; top: 37%; display: flex; gap: 7px; padding: 8px 9px; border-radius: 6px; background: rgba(255, 255, 255, .93); color: var(--ink); font-size: clamp(8px, .66vw, 11px); line-height: 1.3; rotate: -1.6deg; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); } .how-push .toast__mark { width: 22px; height: 22px; padding: 5px; border-radius: 6px; flex: none; } .how-push p { display: grid; gap: 1px; min-width: 0; } .how-push__head { display: flex; justify-content: space-between; gap: 8px; } .how-push__head span { color: rgba(16, 17, 20, .45); } .is-in .how-push { animation: push 7s ease-in-out infinite; } @keyframes push { 0%, 8% { opacity: 0; transform: scale(.86); filter: blur(3px); } 18%, 74% { opacity: 1; transform: none; filter: blur(0); } 86%, 100% { opacity: 0; transform: scale(.94); filter: blur(2px); } } /* Wachstum: Balken, Linie, Punkt */ .growth { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 22px 22px 18px; } .growth__label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .8125rem; color: var(--on-dark); } .growth__chip { padding: 3px 9px; border-radius: 6px; background: rgba(255, 255, 255, .1); font-size: .6875rem; color: rgba(255, 255, 255, .7); } .growth__chart { width: 100%; height: auto; margin-top: auto; overflow: visible; } .growth__bars rect { fill: rgba(255, 255, 255, .14); transform-box: fill-box; transform-origin: 50% 100%; } .growth__line { fill: none; stroke: var(--lime); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .growth__dot { fill: var(--lime); filter: drop-shadow(0 0 6px rgba(173, 247, 30, .8)); } /* Kacheln mit mehr Raum: ab 1100 px zwei große Kacheln je Reihe, Bild und Text nebeneinander */ @media (min-width: 1100px) { .how__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .how-tile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 400px; } .how-tile__media { aspect-ratio: auto; height: 100%; } .how-tile__body { align-content: end; gap: 14px; padding: 40px 36px 40px 32px; } .how-tile__title { min-height: 0; font-size: clamp(1.5rem, 1.1rem + .7vw, 1.875rem); line-height: 1.12; } .how-tile__body p { font-size: 1rem; } .how-tile--phone .how-tile__media img, .how-tile__media--team img { object-position: 50% 30%; } .dial { width: min(78%, 300px); } .growth { padding: 32px 28px 28px; } } /* ---------- Karussell (Leistungen + Stimmen) ---------- */ .carousel { --edge: max(var(--gutter), calc((100vw - var(--max)) / 2)); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); scrollbar-width: none; } .carousel::-webkit-scrollbar { display: none; } .carousel.is-dragging { scroll-snap-type: none; cursor: grabbing; } .carousel.is-dragging * { pointer-events: none; } [data-drag] { cursor: grab; } .carousel__track { display: flex; gap: clamp(12px, 1.2vw, 20px); width: max-content; padding-inline: var(--edge); padding-block: 8px 28px; } .carousel__track > li { scroll-snap-align: start; } .carousel-bar { display: flex; align-items: center; gap: 24px; margin-top: 8px; } .carousel-bar .progress { flex: 1; margin: 0; max-width: 420px; } .carousel-bar .link-arrow { margin-left: auto; } .carousel-bar .progress + .carousel-nav { margin-left: auto; } .carousel-nav { display: flex; gap: 10px; } .progress { display: grid; grid-auto-flow: column; gap: 6px; max-width: 360px; } .progress i { height: 3px; border-radius: 3px; background: var(--rule); overflow: hidden; } .progress i::after { content: ""; display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); } .progress i.is-on::after { transform: scaleX(1); } @media (max-width: 599px) { .carousel-bar { flex-wrap: wrap; } .carousel-bar .carousel-nav { display: none; } .carousel-bar .progress { flex-basis: 100%; max-width: none; } .carousel-bar .link-arrow { margin-left: 0; } } /* ---------- Leistungen ---------- */ .svc-card { width: min(82vw, 460px); display: flex; flex-direction: column; border-radius: var(--radius-lg); background: var(--white); box-shadow: 0 0 0 1px var(--rule); overflow: hidden; isolation: isolate; transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); } .svc-card:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--rule), 0 36px 70px -36px rgba(6, 37, 88, .4); } .svc-card__media { position: relative; aspect-ratio: 1100 / 854; margin: 8px 8px 0; border-radius: calc(var(--radius-lg) - 8px); overflow: hidden; background: var(--navy); } .svc-card__media > picture img, .svc-card__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .svc-card__media > picture img { transform: translateX(var(--px, 0)) scale(1.1); transition: transform .9s var(--ease-out); will-change: transform; } .svc-card:hover .svc-card__media > picture img { transform: translateX(var(--px, 0)) scale(1.14); } .svc-card__video { z-index: 1; opacity: 0; transition: opacity .6s; } .svc-card__video.is-playing { opacity: 1; } .svc-card__body { display: flex; flex-direction: column; flex: 1; gap: 18px; padding: clamp(20px, 2vw, 30px); } .svc-card__title { display: flex; align-items: center; gap: 14px; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.625rem); font-weight: 560; letter-spacing: -.02em; line-height: 1.2; } .tags { display: flex; flex-wrap: wrap; gap: 8px; } .tags li { padding: 6px 12px; border-radius: 6px; background: var(--paper); font-size: .875rem; font-weight: 500; color: var(--ink-2); } .svc-card__link { margin-top: auto; align-self: flex-start; } @media (min-width: 1100px) { .svc-card { width: calc((min(100vw, var(--max) + 2 * var(--gutter)) - 2 * var(--gutter) - 2 * clamp(12px, 1.2vw, 20px)) / 3); } } /* ---------- Tarife ---------- */ .billing { position: relative; display: inline-grid; grid-auto-flow: column; margin-top: 28px; padding: 5px; border-radius: 6px; background: var(--white); box-shadow: 0 0 0 1px var(--rule); } .billing button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 6px; font-weight: 560; font-size: .9375rem; transition: color .35s; } .billing button[aria-checked="true"] { color: var(--white); } .billing__save { font-size: .75rem; padding: 2px 8px; border-radius: 6px; background: var(--lime); color: var(--ink); } .billing__thumb { position: absolute; top: 5px; bottom: 5px; left: 5px; width: var(--tw, 50%); border-radius: 6px; background: var(--ink); transform: translateX(var(--tx, 0)); transition: transform .55s var(--ease-out), width .55s var(--ease-out); } .plans__grid { display: grid; gap: 16px; } .plan { position: relative; display: flex; flex-direction: column; padding: clamp(24px, 2.4vw, 36px); border-radius: var(--radius); background: var(--white); box-shadow: 0 0 0 1px var(--rule); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); } .plan:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--rule), 0 30px 60px -30px rgba(6, 37, 88, .3); } .plan--featured { background: var(--grain-dark), radial-gradient(120% 90% at 100% 0%, var(--navy-2), var(--navy) 70%); color: var(--white); box-shadow: none; } .plan--featured:hover { box-shadow: 0 30px 60px -24px rgba(6, 37, 88, .6); } .plan__badge { position: absolute; top: clamp(24px, 2.4vw, 36px); right: clamp(24px, 2.4vw, 36px); padding: 4px 11px; border-radius: 6px; background: var(--lime); color: var(--ink); font-size: .8125rem; font-weight: 600; } .plan__name { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; } .plan__for { margin-top: 6px; color: var(--muted); font-size: var(--fs-small); max-width: 32ch; min-height: 3em; } .plan--featured .plan__for, .plan--featured .plan__month, .plan--featured .plan__year, .plan--featured .plan__unit { color: var(--on-dark); } .plan__price { display: flex; align-items: flex-end; gap: 10px; margin-top: 28px; } .plan__amount { font-size: clamp(3rem, 2.4rem + 2vw, 4.25rem); line-height: .9; letter-spacing: -.05em; font-weight: 520; font-variant-numeric: tabular-nums; } .plan__unit { font-size: .875rem; line-height: 1.25; color: var(--muted); padding-bottom: 4px; } .plan__unit small { font-size: .8125rem; } .plan__year { position: relative; height: 1.5em; margin-top: 10px; font-size: .875rem; color: var(--muted); overflow: hidden; } .plan__year span { position: absolute; inset: 0; transition: transform .5s var(--ease-out), opacity .5s; } .plan__year [data-when="year"] { transform: translateY(100%); opacity: 0; font-weight: 560; color: var(--blue); } .plan--featured .plan__year [data-when="year"] { color: var(--lime); } .is-yearly .plan__year [data-when="month"] { transform: translateY(-100%); opacity: 0; } .is-yearly .plan__year [data-when="year"] { transform: none; opacity: 1; } .pts { --task: var(--blue); --advice: var(--lime-deep); --empty: rgba(16, 17, 20, .1); display: grid; grid-template-columns: repeat(20, 1fr); gap: 4px; margin: 24px 0 22px; padding: 12px; border-radius: 8px; background: var(--paper); } .plan--featured .pts { --task: #7ea6ff; --advice: var(--lime); --empty: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); } .pts i { aspect-ratio: 1; border-radius: 50%; background: var(--empty); } .pts i.t { background: var(--task); } .pts i.a { background: var(--advice); } .plan__facts { display: grid; gap: 10px; padding-bottom: 20px; border-bottom: 1px solid var(--rule); font-size: var(--fs-small); } .plan--featured .plan__facts { border-color: rgba(255, 255, 255, .14); } .plan__facts li { padding-left: 26px; position: relative; } .plan__facts li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 8px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg); } .plan--featured .plan__facts li::before { border-color: var(--lime); } .plan__facts strong { font-weight: 600; } .plan__month { margin-top: 18px; margin-bottom: 28px; font-size: .875rem; color: var(--muted); } .plan__month span { display: block; font-weight: 600; color: inherit; margin-bottom: 2px; } .plan:not(.plan--featured) .plan__month span { color: var(--ink); } .plan__cta { margin-top: auto; align-self: flex-start; } .plan__cta.btn { align-self: stretch; min-width: 0; width: 100%; } .plans__foot { display: grid; gap: 16px; margin-top: 32px; font-size: var(--fs-small); color: var(--muted); } .plans__foot p:first-child { display: flex; gap: 22px; flex-wrap: wrap; } .legend { display: inline-flex; align-items: center; gap: 8px; } @media (min-width: 960px) { .plans__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .plans__foot { grid-template-columns: auto minmax(0, 1fr); gap: 48px; } .plans__foot p:last-child { max-width: 72ch; justify-self: end; text-align: right; } } /* ---------- Story: Team und Größe ---------- */ .story { position: relative; overflow: hidden; color: var(--white); padding-block: var(--section) clamp(56px, 4vw, 88px); background: var(--grain-dark), radial-gradient(90% 80% at 85% 30%, #0d3a8a 0%, var(--navy) 50%, #04163a 100%); isolation: isolate; } .story__canvas { position: relative; aspect-ratio: 1 / .86; cursor: crosshair; touch-action: pan-y; } .story__fallback { position: absolute; inset: 8% 6%; width: 88%; height: 84%; } .story__canvas.is-webgl .story__fallback { display: none; } .story__canvas canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; } .story__inner { display: grid; gap: 48px; align-items: center; } .story .h2 { max-width: none; } .story__body { margin: 26px 0 32px; color: var(--on-dark); font-size: var(--fs-lead); line-height: 1.5; max-width: 44ch; text-wrap: pretty; } .crew { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; } .crew__faces { display: flex; } .crew__faces li + li { margin-left: -14px; } .crew__faces img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 3px solid var(--navy); } .crew p { display: grid; line-height: 1.35; } .crew strong { font-weight: 600; } .crew span { font-size: .875rem; color: var(--on-dark); max-width: 30ch; } .facts { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; margin-top: clamp(56px, 5vw, 104px); padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .16); } .facts div { display: flex; flex-direction: column-reverse; gap: 6px; } .facts dt { color: var(--on-dark); font-size: var(--fs-small); } .facts dd { font-size: clamp(2.5rem, 1.9rem + 2.4vw, 4.5rem); line-height: 1; letter-spacing: -.05em; font-weight: 500; color: var(--lime); font-variant-numeric: tabular-nums; } @media (min-width: 960px) { .story__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 112px); } .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 599px) { .crew { flex-wrap: wrap; } } /* ---------- Vergleich ---------- */ .table-scroll { position: relative; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: thin; } .cmp { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; font-size: var(--fs-small); } .cmp th, .cmp td { padding: 18px 16px; border-bottom: 1px solid var(--rule); text-align: center; } .cmp thead th { font-weight: 560; font-size: .875rem; color: var(--muted); border-bottom-color: var(--ink); padding-top: 22px; } .cmp tbody th { text-align: left; font-weight: 500; color: var(--ink); width: 34%; } @media (max-width: 959px) { .cmp tbody th, .cmp thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--paper); } } .cmp .cmp__us { background: rgba(173, 247, 30, .32); color: var(--ink); font-weight: 600; } .cmp thead .cmp__us { border-radius: 8px 8px 0 0; color: var(--ink); } .cmp tbody tr:last-child .cmp__us { border-radius: 0 0 8px 8px; } .cmp svg { width: 22px; height: 22px; margin-inline: auto; } .cmp .y, .cmp__legend .y { color: var(--ink); } .cmp .cmp__us .y { color: var(--ink); } .cmp .p, .cmp__legend .p { color: var(--muted); } .cmp .n, .cmp__legend .n { color: #9a9c95; } .cmp__legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 20px; font-size: .875rem; color: var(--muted); } .cmp__legend > span { display: inline-flex; align-items: center; gap: 8px; } .cmp__legend svg { width: 16px; height: 16px; } /* ---------- Stimmen ---------- */ .voice { width: min(82vw, 420px); display: flex; flex-direction: column; padding: clamp(24px, 2.4vw, 36px); border-radius: var(--radius-lg); background: var(--white); box-shadow: 0 0 0 1px var(--rule); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); } .voice:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--rule), 0 30px 60px -30px rgba(6, 37, 88, .25); } .voice blockquote p { font-size: clamp(1.375rem, 1.15rem + .8vw, 1.875rem); line-height: 1.2; letter-spacing: -.025em; font-weight: 520; text-wrap: balance; } .voice__person { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 40px; } .voice__person img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; } .voice__person p { display: grid; line-height: 1.35; font-size: .9375rem; } .voice__person strong { font-weight: 600; } .voice__person span { color: var(--muted); font-size: .875rem; } .voice__about { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: .875rem; color: var(--muted); } @media (min-width: 1100px) { .voice { width: calc((min(100vw, var(--max) + 2 * var(--gutter)) - 2 * var(--gutter) - 2 * clamp(12px, 1.2vw, 20px)) / 3); } } /* ---------- FAQ ---------- */ .faq__grid { display: grid; gap: 40px; } .faq__head .lead { margin-top: 20px; } .faq__list { border-top: 1px solid var(--ink); } .faq details { border-bottom: 1px solid var(--rule); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; list-style: none; cursor: pointer; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); font-weight: 540; letter-spacing: -.01em; } .faq summary::-webkit-details-marker { display: none; } /* Plus im blauen Kreis, beim Hover Lime mit dunklem Plus */ .faq summary svg { width: 40px; height: 40px; padding: 10px; flex: none; box-sizing: border-box; border-radius: 50%; background: var(--blue); color: var(--white); transition: transform .45s var(--ease-out), background-color .3s, color .3s; } .faq summary:hover svg, .faq summary:focus-visible svg { background: var(--lime); color: var(--ink); } .faq details[open] summary svg { transform: rotate(45deg); } .faq summary:hover { color: var(--blue); } .faq__a p { padding: 0 48px 24px 0; color: var(--muted); max-width: 64ch; } @supports (interpolate-size: allow-keywords) { .faq { interpolate-size: allow-keywords; } .faq details::details-content { height: 0; overflow: clip; transition: height .5s var(--ease-out), content-visibility .5s allow-discrete; } .faq details[open]::details-content { height: auto; } } @media (min-width: 960px) { .faq__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 120px); } .faq__head { position: sticky; top: calc(var(--header-h) + 40px); align-self: start; } } /* ---------- Demo-Buchung: blaue Bühne, Porträt wächst aus der Fläche ---------- */ .book { padding-block: var(--section) 8px; } .book__stage { position: relative; isolation: isolate; overflow: hidden; display: grid; border-radius: var(--radius-lg); color: var(--white); background: var(--grain-dark), linear-gradient(180deg, #3e82e4 0%, #2f6cdd 46%, #1166cd 100%); } .book__stage::after { content: ""; position: absolute; z-index: -1; left: -10%; bottom: -30%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(6, 37, 88, .55), transparent 68%); pointer-events: none; } .book__copy { position: relative; z-index: 2; padding: clamp(40px, 5vw, 88px) clamp(20px, 4.5vw, 80px); } .book .h2 { color: var(--white); } .book__lead { margin-top: 22px; font-size: var(--fs-lead); line-height: 1.5; color: rgba(255, 255, 255, .86); max-width: 40ch; text-wrap: pretty; } .book__steps { position: relative; display: grid; gap: 16px; margin: 40px 0 36px; } .book__steps li { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: center; } .book__steps span { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--lime); color: var(--ink); font-weight: 600; } .book__steps strong { font-weight: 600; font-size: 1.0625rem; } .book__steps small { font-size: .875rem; color: rgba(255, 255, 255, .78); } .book__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; } .book__team { display: flex; align-items: center; gap: 14px; } .book__team ul { display: flex; } .book__team li + li { margin-left: -12px; } .book__team img { width: 48px; height: 48px; border-radius: 50%; border: 3px solid #2f6cdd; object-fit: cover; } .book__team p { display: grid; line-height: 1.35; font-size: .875rem; } .book__team p span { color: rgba(255, 255, 255, .78); } .book__awards { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .22); } .book__awards p { font-size: .8125rem; color: rgba(255, 255, 255, .78); margin-bottom: 16px; } .book__awards ul { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; } .book__awards img { height: 78px; width: auto; opacity: .92; } .book__alt { margin-top: 28px; font-size: .9375rem; color: rgba(255, 255, 255, .86); } .book__alt a { color: var(--white); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } @keyframes pulse { 0% { transform: scale(.92); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } } .btn--ink { background: var(--ink); } .btn--ink:hover, .btn--ink:focus-visible { background: #000; } @media (min-width: 1024px) { .book__stage { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } .book__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .book__steps::before { content: ""; position: absolute; left: 20px; right: 12%; top: 20px; height: 2px; background: rgba(255, 255, 255, .28); } .book__steps li { position: relative; grid-template-columns: 1fr; row-gap: 4px; align-items: start; } .book__steps span { grid-row: auto; margin-bottom: 10px; box-shadow: 0 0 0 6px #2f6cdd; } } /* ---------- Footer ---------- */ .footer { position: relative; overflow: hidden; padding-top: clamp(72px, 7vw, 128px); color: var(--on-dark); background: var(--grain-dark), #0d0e11; } .footer__grid { display: grid; gap: 40px 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__brand { grid-column: 1 / -1; max-width: 34ch; } .footer__logo { width: 176px; height: 34px; fill: var(--white); margin-bottom: 20px; } .footer__brand p { font-size: var(--fs-small); } .footer__mail { display: inline-block; margin-top: 16px; color: var(--white); font-weight: 560; text-decoration: underline; text-underline-offset: 3px; } .footer__head { color: var(--white); font-weight: 600; margin-bottom: 14px; font-size: var(--fs-small); } .footer__col ul { display: grid; gap: 10px; font-size: var(--fs-small); } .footer a:hover { color: var(--white); } .footer__mail:hover { color: var(--lime-2) !important; } .footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 64px; padding-block: 24px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .875rem; } .footer__bottom ul { display: flex; flex-wrap: wrap; gap: 8px 22px; } .footer__word { width: calc(100% + 2vw); max-width: none; height: auto; aspect-ratio: 140.833 / 26.8743; margin: 8px -1vw -2.2vw; fill: rgba(255, 255, 255, .045); } @media (min-width: 960px) { .footer__grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); } .footer__brand { grid-column: auto; } } /* ---------- Dock ---------- */ .dock { position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border-radius: 8px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 20px 50px -20px rgba(6, 37, 88, .4), 0 0 0 1px var(--rule); transform: translateY(140%); transition: transform .6s var(--ease-out); } .dock.is-visible { transform: none; } .dock__avatars { display: none; } .dock__text { display: grid; min-width: 0; line-height: 1.25; font-size: .875rem; margin-right: auto; } .dock__text strong { font-weight: 600; } .dock__text span { color: var(--muted); font-size: .8125rem; } @media (min-width: 560px) { .dock { left: auto; right: 16px; width: 420px; } .dock__avatars { display: flex; } .dock__avatars img { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--white); object-fit: cover; } .dock__avatars img + img { margin-left: -10px; } } @media (min-width: 1024px) { .dock { right: 24px; bottom: calc(24px + env(safe-area-inset-bottom)); width: auto; gap: 16px; padding: 10px 10px 10px 12px; } } /* ---------- Tool-Kreise unten links im Leistungsbild ---------- Zwei Logo-Arten, damit alle optisch gleich groß wirken: App-Icons mit eigener Kachel füllen den Kreis, reine Zeichen sitzen in einem festen Feld und bekommen je nach Form einen Ausgleichsfaktor (--k). */ .tools--media { position: absolute; left: 16px; bottom: 16px; z-index: 2; display: flex; align-items: center; } .tool { --k: 1; position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 2.5px var(--white), 0 8px 18px -8px rgba(4, 24, 59, .55); transition: margin .45s var(--ease-out), transform .45s var(--ease-out); } .tool + .tool { margin-left: -6px; } .tool img { width: calc(21px * var(--k)); height: calc(21px * var(--k)); object-fit: contain; } .tool.is-fill { overflow: hidden; } .tool.is-fill img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.22); } .tool--wordpress, .tool--googleanalytics { --k: .92; } .tool--facebook, .tool--instagram { --k: .9; } .tool--tiktok { --k: .92; } .tool--semrush { --k: 1.14; } .tool--woocommerce { --k: 1.04; } .tool--microsoft-ads { --k: 1.1; } .tool--conductor { --k: .96; } .tool--ki { --k: 1.02; } .tool--figma { --k: 1; } .tool--indesign, .tool--illustrator, .tool--linkedin, .tool--conductor { --k: 1.02; } .tool--indesign img, .tool--illustrator img, .tool--linkedin img, .tool--conductor img { border-radius: 5px; } .tool--canva { --k: 1.08; } .tool--canva img { border-radius: 50%; } .tools__tip { position: absolute; bottom: calc(100% + 10px); left: 50%; padding: 5px 9px; border-radius: 6px; background: var(--ink); color: var(--white); font-size: .75rem; font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 4px); transition: opacity .25s, transform .3s var(--ease-out); } .tool:hover .tools__tip { opacity: 1; transform: translate(-50%, 0); } .tools--media:hover .tool + .tool { margin-left: 5px; } .tool:hover { transform: translateY(-3px); z-index: 1; } /* ---------- Vergleich: farbige Kennzeichnung ---------- */ .mark-y, .mark-p, .mark-n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; } .mark-y { background: var(--lime); color: var(--ink); } .mark-p { background: var(--blue); color: var(--white); } .mark-n { background: #e9e8e4; color: #8b8c86; } .mark-y svg, .mark-p svg, .mark-n svg { width: 18px; height: 18px; margin: 0; } .cmp__legend .mark-y, .cmp__legend .mark-p, .cmp__legend .mark-n { width: 24px; height: 24px; } .cmp__legend .mark-y svg, .cmp__legend .mark-p svg, .cmp__legend .mark-n svg { width: 14px; height: 14px; } /* ---------- Bewegung ---------- */ html.js.anim-pending [data-fade], html.js.anim-pending [data-split] { opacity: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } html.js.anim-pending [data-fade], html.js.anim-pending [data-split] { opacity: 1; } } @media (min-width: 1024px) { .book .h2 { font-size: clamp(2.375rem, .8rem + 2.6vw, 3.75rem); } .book .h2 .ln { white-space: nowrap; } } /* ---------- Vollbreite: Bühnen laufen randlos ---------- */ .hero__bleed .stage--board { border-radius: 0; padding-inline: clamp(12px, 4vw, 72px); } .hero__bleed .board { max-width: 1320px; } .book { padding-block: var(--section) 0; } .book > .wrap--wide { max-width: none; padding-inline: 0; } .book__stage { border-radius: 0; } @media (min-width: 1024px) { .book__copy { padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2)); padding-block: clamp(72px, 7vw, 128px); } } /* ---------- Karussells: Platz für Hover-Schatten ---------- overflow-x schneidet auch senkrecht ab. Innen Luft lassen, außen per negativem Rand ausgleichen, damit der Abstand zur nächsten Zeile gleich bleibt. */ .carousel { margin-block: -24px -56px; } .carousel__track { padding-block: 24px 64px; } .how__grid { margin-block: -20px -52px; padding-block: 20px 60px; } @media (min-width: 768px) { .how__grid { margin-block: 0; padding-block: 0; } } @media (min-width: 960px) and (max-width: 1199px) { .faq__head .h2 { font-size: 2.625rem; } } /* Demo-Buchung: Julian als gerahmte Video-Vorschau */ .book__media { position: relative; display: grid; align-items: center; padding: 0 clamp(20px, 4.5vw, 80px) clamp(28px, 5vw, 48px); order: 2; } @media (min-width: 1024px) { .book__media { order: 0; padding: clamp(56px, 6vw, 112px) max(var(--gutter), calc((100vw - var(--max)) / 2)) clamp(56px, 6vw, 112px) 0; } } .book .h2 .ln { display: block; } /* ---------- Mobil-Feinschliff ---------- */ @media (max-width: 599px) { .stage--board .toast { display: none; } .book__awards ul { gap: 12px 16px; flex-wrap: nowrap; justify-content: space-between; } .book__awards img { height: 46px; } .book__awards ul { flex-wrap: nowrap; justify-content: space-between; gap: 10px; } .table-scroll { margin-inline: 0; padding-inline: 0; overflow: visible; } .cmp { min-width: 0; table-layout: fixed; font-size: .8125rem; } .cmp th, .cmp td { padding: 12px 2px; } .cmp tbody th { width: 44%; padding-left: 0; padding-right: 10px; line-height: 1.3; position: static; } .cmp thead th { font-size: .6875rem; line-height: 1.2; padding-top: 14px; hyphens: auto; } .cmp thead th:first-child { position: static; } .mark-y, .mark-p, .mark-n { width: 28px; height: 28px; } .mark-y svg, .mark-p svg, .mark-n svg { width: 15px; height: 15px; } .section-head { margin-bottom: 36px; } .faq summary { padding: 18px 0; } } /* ---------- Hero, Variante Lime: Markenfläche mit Raster und Logo-Konturen ---------- */ .hero--lime { --lime-h: calc(100% - clamp(120px, 14vw, 220px)); position: relative; isolation: isolate; margin-top: calc(-1 * var(--header-h)); padding-top: calc(var(--header-h) + clamp(40px, 2rem + 5vw, 112px)); } .hero__bg { position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: var(--lime-h); overflow: hidden; background: linear-gradient(160deg, #d6ff86 0%, #b9fa3c 34%, #a6f219 62%, #8fdc0b 100%); } /* Körnung als oberste Ebene */ .hero__bg::after { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--grain-lime); opacity: .9; pointer-events: none; } /* weiche Farbinseln für den Verlauf */ .hero__blob { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; } .hero__blob--a { width: 60vw; aspect-ratio: 1; left: -14vw; top: -22vw; background: radial-gradient(circle, rgba(240, 255, 200, .95), transparent 68%); } .hero__blob--b { width: 70vw; aspect-ratio: 1; right: -22vw; bottom: -30vw; background: radial-gradient(circle, rgba(118, 196, 0, .7), transparent 66%); } /* Bildmarke der Live-Seite als Lichtform: weichgezeichnetes Leuchten (Form 2) unter der scharfen Marke (Form 1). Sitzt hinter dem Board, reagiert leicht auf die Maus (--sx/--sy aus dem Glow-Skript). */ .hero__shape { position: absolute; z-index: 1; inset: -3%; pointer-events: none; background: no-repeat center 30% / cover; translate: var(--sx, 0px) var(--sy, 0px); transition: translate 1.4s var(--ease-out); } .hero__shape--glow { background-image: url("../img/hero-shape-2.svg"); opacity: .95; } .hero__shape--mark { background-image: url("../img/hero-shape-1.svg"); translate: calc(var(--sx, 0px) * 1.8) calc(var(--sy, 0px) * 1.8); } /* Mauseffekt: sanftes Licht, das der Maus mit Verzögerung folgt */ .hero__glow { position: absolute; z-index: 2; left: 0; top: 0; width: 720px; height: 720px; margin: -360px 0 0 -360px; border-radius: 50%; background: radial-gradient(circle, rgba(250, 255, 228, .55) 0%, rgba(250, 255, 228, .2) 36%, transparent 66%); transform: translate3d(var(--gx, 70vw), var(--gy, 30vh), 0); opacity: var(--go, 0); transition: opacity .8s var(--ease-out); pointer-events: none; } .hero--lime .hero__title { position: relative; z-index: 2; color: var(--blue-deep, #062558); } /* Verlauf wie auf get-proof.de: PROOF-Blau zu Tiefblau, auf die Schrift geschnitten */ .hero--lime .hero__title, .hero--lime .hero__title .line { background: linear-gradient(173.8deg, #0b50c8 1.7%, #062558 73.2%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Nach dem Aufteilen trägt nur jede Zeile den Verlauf, sonst bleibt eine zweite Kopie an der Endposition stehen */ .hero--lime .hero__title.is-split { background: none; } .hero--lime .mark { color: var(--white); } .hero--lime .mark::before { background: var(--blue); } .hero--lime .hero__row { position: relative; z-index: 2; } .hero--lime .hero__lead { color: var(--ink-2); } .hero--lime .assure { color: var(--ink-2); } .hero--lime .assure svg { color: var(--ink); } .hero--lime .link-arrow { color: var(--ink); } /* Board gerahmt, ragt in die helle Fläche darunter */ .hero__box { position: relative; z-index: 2; } .hero__box .stage--board { margin-top: clamp(48px, 2rem + 4vw, 96px); padding: 0; background: none; border-radius: var(--radius-lg); overflow: visible; perspective: 1600px; } .hero__box .board { border-radius: var(--radius-lg); max-width: none; box-shadow: 0 0 0 1px rgba(16, 17, 20, .08), 0 60px 120px -50px rgba(6, 37, 88, .55), 0 24px 40px -24px rgba(6, 37, 88, .3); -webkit-mask: none; mask: none; } .hero__box .stage--board .toast { top: auto; bottom: -36px; right: 32px; } .hero--lime + .logos { padding-top: clamp(48px, 2.5rem + 2vw, 88px); } /* Header liegt über der Lime-Fläche */ .site-header:not(.is-scrolled) .icon-btn { box-shadow: inset 0 0 0 1.5px rgba(16, 17, 20, .18); } @media (max-width: 599px) { .hero--lime { --lime-h: calc(100% - 120px); } .hero__blob--a { width: 120vw; left: -40vw; top: -40vw; } .hero__blob--b { width: 130vw; right: -60vw; bottom: -40vw; } } /* Demo-Buchung: Calendly direkt eingebettet */ .cal { position: relative; width: 100%; max-width: 560px; justify-self: center; border-radius: 8px; background: var(--white); color: var(--ink); overflow: hidden; box-shadow: 0 50px 90px -40px rgba(4, 24, 59, .7), 0 0 0 1px rgba(255, 255, 255, .3); } .cal__head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--rule); } .cal__head img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; } .cal__head p { display: grid; line-height: 1.3; } .cal__head strong { font-weight: 600; } .cal__head span { font-size: .875rem; color: var(--muted); } .cal__widget { position: relative; min-height: 620px; } .cal__widget .calendly-inline-widget, .cal__widget iframe { width: 100%; min-height: 620px; border: 0; } .cal:not(.is-loaded) .cal__widget { position: absolute; left: 0; right: 0; top: 83px; opacity: 0; pointer-events: none; } .cal.is-loaded .cal__mock { display: none; } /* Calendly-Nachbildung: Maße, Farben und Aufbau wie das eingebettete Widget */ .cal__mock { --cm: #0b50c8; --cm-soft: rgba(11, 80, 200, .065); --cm-text: #1a1a1a; --cm-muted: rgba(26, 26, 26, .61); position: relative; min-height: 620px; overflow: hidden; color: var(--cm-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } .cm__pane { padding: 28px 24px 30px; max-width: 420px; margin-inline: auto; } .cm__title { font-size: 1.25rem; font-weight: 700; line-height: 1.4; margin: 0 0 22px; padding-right: 60px; letter-spacing: 0; } .cm__month { display: flex; align-items: center; justify-content: center; gap: 22px; margin-bottom: 16px; font-size: 1rem; } .cm__month span { min-width: 150px; text-align: center; } .cm__nav { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--cm-soft); color: var(--cm); cursor: pointer; transition: background-color .15s; } .cm__nav svg { width: 20px; height: 20px; } .cm__nav:hover { background: rgba(11, 80, 200, .15); } .cm__nav:disabled { background: none; color: rgba(26, 26, 26, .35); cursor: default; } .cm__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px 4px; justify-items: center; } .cm__grid b { font-size: .75rem; font-weight: 400; text-transform: uppercase; color: var(--cm-text); padding-bottom: 10px; } .cm__day { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: 1rem; color: var(--cm-text); opacity: .7; } .cm__day i { position: absolute; left: 50%; bottom: 6px; width: 4px; height: 4px; translate: -50% 0; border-radius: 50%; background: currentColor; } .cm__day.is-free { border: 0; opacity: 1; background: var(--cm-soft); color: var(--cm); font-weight: 700; cursor: pointer; transition: background-color .15s, color .15s; } .cm__day.is-free:hover { background: rgba(11, 80, 200, .15); } .cm__day.is-free:active { background: var(--cm); color: #fff; } .cm__tz { margin-top: 26px; font-size: .875rem; } .cm__tz strong { display: block; font-size: 1rem; font-weight: 700; margin-bottom: 8px; } .cm__tz span { display: inline-flex; align-items: center; gap: 6px; } .cm__tz svg { width: 16px; height: 16px; } .cm__tz .cm__caret { width: 20px; height: 20px; margin-left: -2px; } .cm__dayhead { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; padding-right: 60px; } .cm__dayhead p { display: grid; line-height: 1.35; } .cm__dayhead strong { font-size: 1.125rem; font-weight: 700; } .cm__dayhead span { font-size: 1rem; color: var(--cm-muted); } .cm__dayhead + .cm__tz { margin-top: 18px; } .cm__slots { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; max-height: 410px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; } .cm__slots li { display: flex; gap: 8px; } .cm__slots button, .cm__slots span, .cm__slots a { flex: 1; display: grid; place-items: center; height: 52px; border-radius: 4px; font-size: 1rem; font-weight: 700; text-decoration: none; transition: background-color .2s, border-color .2s, flex-basis .2s; } .cm__slots button { border: 1px solid rgba(11, 80, 200, .5); background: #fff; color: var(--cm); cursor: pointer; } .cm__slots button:hover { border: 2px solid var(--cm); } .cm__slots span { background: rgba(0, 0, 0, .6); color: #fff; } .cm__slots a { background: var(--cm); color: #fff; } .cm__slots a:hover { background: #0a47b3; } .cm__ribbon { position: absolute; top: 0; right: 0; width: 120px; height: 120px; overflow: hidden; pointer-events: none; z-index: 1; color: #fff; text-decoration: none; } .cm__ribbon i { position: absolute; top: 24px; right: -40px; width: 170px; height: 40px; rotate: 45deg; display: grid; place-content: center; text-align: center; background: #505960; font-style: normal; line-height: 1.05; } .cm__ribbon span { font-size: 7.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .cm__ribbon b { font-size: 12px; font-weight: 700; } .cm__nav:focus-visible, .cm__day.is-free:focus-visible, .cm__slots button:focus-visible, .cm__slots a:focus-visible { outline: 2px solid var(--cm); outline-offset: 2px; } .cal__fallback { padding: 40px 24px; text-align: center; } .cal__fallback a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .is-cal-open { overflow: hidden; } @media (min-width: 1024px) { .book__media { align-items: center; } .cal { justify-self: end; } } @media (max-width: 599px) { .book__media { padding-inline: 12px; padding-bottom: 12px; order: 2; } .cal { border-radius: 8px; } .cal__widget .calendly-inline-widget, .cal__widget iframe { min-height: 1000px; } .cm__pane { padding-inline: 16px; } .cm__day, .cm__nav { width: 40px; height: 40px; } } /* Hero-Headline: feste Umbrüche, mobil vier Zeilen */ .br-m { display: none; } @media (max-width: 599px) { .br-m { display: inline; } } @media (min-width: 600px) { .hero__title { white-space: nowrap; } } /* ========================================================= Mobil gerade ziehen (bis 599 px) Ein Abstandsraster: Sektion 72 px, Kopf → Inhalt 32 px, Karten 4:3-Bilder, Listen als Karussell mit 1,25 Karten. ========================================================= */ @media (max-width: 599px) { :root { --section: 72px; } .section-head, .section-head--stack, .section-head--split { margin-bottom: 32px; gap: 16px; } .lead, .hero__lead, .book__lead, .story__body { font-size: 1.0625rem; } /* Hero: kompaktes Board, eine Karte je Spalte, Spalten untereinander */ .hero--lime { padding-top: calc(var(--header-h) + 36px); --lime-h: calc(100% - 96px); } .hero__row { gap: 24px; margin-top: 20px; } .hero__buttons { gap: 14px 20px; } .hero__box .stage--board { margin-top: 40px; } .hero__box .board { min-height: 0; border-radius: 8px; } .board__main { padding: 14px; } .board__top { margin-bottom: 12px; } .board__title { font-size: 18px; } .board__new { padding: 7px 10px; font-size: 12px; } .board__cols { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; gap: 8px; overflow: visible; padding-bottom: 0; } .board__col { min-height: 0; padding: 8px; border-radius: 6px; } .board__col-head { padding: 2px 4px 8px; font-size: 12px; } .board__list { gap: 0; } .board__list .ticket:nth-child(n+2) { display: none; } .ticket { padding: 10px 11px 11px; border-radius: 6px; } .ticket__title { font-size: 13px; } .ticket__bar { margin-top: 8px; } .ticket__meta { margin-top: 8px; } .logos { padding-top: 40px; } .logos__inner { gap: 16px; } /* So funktioniert PROOF: Bilder 4:3 statt Hochformat */ .how__grid { grid-auto-columns: 82vw; gap: 12px; } .how-tile__media { aspect-ratio: 4 / 3; } .how-tile__media--team img { object-position: 50% 26%; } .how-tile__body { padding: 18px 20px 22px; gap: 8px; } .how-tile__title { min-height: 0; } .dial { width: 54%; } .how__link { margin-top: 28px; } /* Leistungen */ .svc-card { width: 82vw; } .svc-card__body { gap: 14px; padding: 18px 20px 22px; } .tags li { font-size: .8125rem; padding: 5px 10px; } /* Tarife als Karussell, empfohlener Tarif zuerst sichtbar */ .plans__grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin: -12px calc(-1 * var(--gutter)) -40px; padding: 12px var(--gutter) 48px; scrollbar-width: none; } .plans__grid::-webkit-scrollbar { display: none; } .plan { flex: none; width: 82vw; scroll-snap-align: start; padding: 22px 20px; } .plan:hover { transform: none; } .plan__for { min-height: 0; } .plan__price { margin-top: 18px; } .pts { margin: 16px 0; padding: 10px; gap: 3px; } .plan__month { margin: 14px 0 20px; } .plans__foot { margin-top: 20px; gap: 12px; } .billing { margin-top: 18px; } /* Story */ .story__inner { gap: 32px; } .story { padding-bottom: var(--section); } .story__body { margin: 18px 0 24px; } .facts { margin-top: 40px; padding-top: 24px; gap: 24px 16px; } .facts dd { font-size: 2.25rem; } /* Vergleich: jede Zeile als Karte, Kriterium oben, vier Marken darunter */ .cmp, .cmp thead, .cmp tbody, .cmp tr { display: block; } .cmp thead tr, .cmp tbody tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .cmp thead th:first-child { display: none; } .cmp thead { position: sticky; top: var(--header-h); z-index: 2; background: var(--paper); } .cmp thead th { padding: 12px 2px; font-size: .75rem; border-bottom: 1px solid var(--ink); } .cmp tbody th { grid-column: 1 / -1; width: auto; padding: 16px 0 10px; border-bottom: 0; font-size: .9375rem; line-height: 1.35; } .cmp tbody td { padding: 0 0 16px; } .cmp .cmp__us { border-radius: 0 !important; } .cmp tbody tr td.cmp__us { border-radius: 0 0 6px 6px !important; } .cmp tbody tr { border-bottom: 1px solid var(--rule); } .cmp tbody tr > * { border-bottom: 0; } /* Kundenstimmen, FAQ */ .voice { width: 82vw; padding: 22px 20px; } .voice__person { padding-top: 28px; } .faq__grid { gap: 28px; } /* Buchung: Kalender in passender Höhe */ .book__copy { padding: 56px var(--gutter) 32px; } .book__steps { margin: 28px 0 24px; gap: 12px; } .book__awards { margin-top: 28px; padding-top: 20px; } .book__awards ul { flex-wrap: wrap; justify-content: flex-start; gap: 14px 18px; } .book__awards img { height: 52px; } .book__media { padding: 0 12px 12px; } .cal__widget .calendly-inline-widget, .cal__widget iframe { min-height: 640px; } .footer { padding-top: 56px; } } @media (max-width: 599px) { /* Vergleich: statt Spaltenblöcken nur der PROOF-Kopf als Lime-Pille */ .cmp .cmp__us { background: none; } .cmp thead th.cmp__us { background: none; } .cmp thead th.cmp__us::before { content: ""; position: absolute; inset: 6px 4px; z-index: -1; border-radius: 6px; background: var(--lime); } .cmp thead th { position: relative; isolation: isolate; color: var(--ink); } .cmp thead th:not(.cmp__us) { color: var(--muted); } .plan__cta.link-arrow { font-size: .9375rem; } } @media (max-width: 599px) { .brand__logo { width: 132px; height: 25px; } } /* ========================================================= Leistungsseite (seo-agentur.html) ========================================================= */ .mega__links a[aria-current="page"] { color: var(--blue); font-weight: 600; } .cockpit { position: relative; z-index: 2; margin: clamp(48px, 2rem + 4vw, 96px) 0 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--white); box-shadow: 0 0 0 1px rgba(16, 17, 20, .08), 0 60px 120px -50px rgba(6, 37, 88, .55), 0 24px 40px -24px rgba(6, 37, 88, .3); } .cockpit img { width: 100%; height: auto; display: block; } .perks { padding-block: clamp(56px, 3rem + 3vw, 104px) 0; } .perks__grid { display: grid; gap: 28px 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } .perk { display: grid; gap: 10px; align-content: start; padding-top: 20px; border-top: 1px solid var(--rule); } .perk__dot { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--lime); color: var(--ink); } .perk__dot svg { width: 18px; height: 18px; } .perk__title { font-size: 1.25rem; line-height: 1.25; letter-spacing: -.02em; font-weight: 560; margin-top: 8px; } .perk p { color: var(--muted); font-size: var(--fs-small); } .perks + .logos { padding-top: clamp(48px, 3vw, 72px); } .catalog__grid { display: grid; gap: clamp(12px, 1.2vw, 20px); grid-template-columns: repeat(3, minmax(0, 1fr)); } .ccard { display: flex; flex-direction: column; border-radius: var(--radius-lg); background: var(--white); box-shadow: 0 0 0 1px var(--rule); overflow: hidden; transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); } .ccard:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--rule), 0 36px 70px -36px rgba(6, 37, 88, .4); } .ccard__media { margin: 8px 8px 0; border-radius: calc(var(--radius-lg) - 8px); overflow: hidden; aspect-ratio: 4 / 3; background: var(--navy); } .ccard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); } .ccard:hover .ccard__media img { transform: scale(1.04); } .ccard__body { display: flex; flex-direction: column; flex: 1; gap: 16px; padding: clamp(20px, 2vw, 28px); } .ccard__title { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.2; letter-spacing: -.02em; font-weight: 560; } .ccard__price { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; background: var(--blue-soft); color: var(--blue); font-size: .8125rem; font-weight: 600; } .ccard__price svg { width: 13px; height: 13px; } /* Long-Read mit Inhaltsverzeichnis */ .read__grid { display: grid; gap: 40px; } .prose { max-width: 68ch; } .prose h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -.025em; font-weight: 540; margin: 56px 0 18px; scroll-margin-top: calc(var(--header-h) + 24px); text-wrap: balance; } .prose h3:first-child { margin-top: 0; } .prose p { margin-bottom: 18px; color: var(--ink-2); line-height: 1.7; } .prose a:not(.btn) { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; } .prose__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 32px 0 8px; } .prose__facts div { display: flex; flex-direction: column-reverse; gap: 6px; padding: 18px; border-radius: var(--radius); background: var(--white); box-shadow: 0 0 0 1px var(--rule); } .prose__facts dd { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.5rem); line-height: 1; letter-spacing: -.04em; font-weight: 520; color: var(--blue); font-variant-numeric: tabular-nums; } .prose__facts dt { font-size: .8125rem; color: var(--muted); line-height: 1.4; } .prose__list { display: grid; gap: 12px; margin: 0 0 22px; } .prose__list li { position: relative; padding-left: 30px; color: var(--ink-2); line-height: 1.6; } .prose__list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 14px; height: 8px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg); } .prose__list strong { color: var(--ink); font-weight: 600; } .prose__box { margin: 28px 0 8px; padding: 24px 26px; border-radius: var(--radius); background: rgba(173, 247, 30, .28); } .prose__box-title { font-weight: 600; margin-bottom: 12px !important; color: var(--ink) !important; } .prose__box ul { display: grid; gap: 8px; } .prose__box li { position: relative; padding-left: 20px; color: var(--ink-2); } .prose__box li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); } @media (min-width: 1024px) { .read__grid { grid-template-columns: 300px minmax(0, 1fr); gap: clamp(48px, 6vw, 112px); align-items: start; } } /* Verwandte Leistungen und Ratgeber */ .related__grid, .guides__grid { display: grid; gap: clamp(12px, 1.2vw, 20px); grid-template-columns: repeat(3, minmax(0, 1fr)); } .guide__cat { align-self: flex-start; padding: 5px 11px; border-radius: 6px; background: var(--blue-soft); color: var(--blue); font-size: .8125rem; font-weight: 600; } .guide__text { color: var(--muted); font-size: var(--fs-small); line-height: 1.6; } .faq__mail { margin-top: 18px; } @media (max-width: 1023px) { .catalog__grid, .related__grid, .guides__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 599px) { .catalog__grid, .related__grid, .guides__grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin: -12px calc(-1 * var(--gutter)) -40px; padding: 12px var(--gutter) 48px; scrollbar-width: none; } .catalog__grid::-webkit-scrollbar, .related__grid::-webkit-scrollbar, .guides__grid::-webkit-scrollbar { display: none; } .catalog__grid > li, .related__grid > li, .guides__grid > li { flex: none; width: 82vw; scroll-snap-align: start; } .ccard:hover, .rel:hover, .guide:hover { transform: none; } .prose__facts { grid-template-columns: 1fr; } .perks { padding-top: 48px; } .perks__grid { gap: 20px; } .cockpit { margin-top: 40px; border-radius: 8px; } } @media (max-width: 599px) { .perk { grid-template-columns: 36px 1fr; column-gap: 14px; padding-top: 16px; } .perk__dot { grid-row: span 2; } .perk__title { margin-top: 4px; font-size: 1.125rem; } } /* ---------- Leistungsseite: Schritte um das 3D-Logo ---------- */ .steps__list { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "s1 v s3" "s2 v s4"; } .steps__list > :nth-child(1) { grid-area: s1; } .steps__list > :nth-child(2) { grid-area: s2; } .steps__list > :nth-child(3) { grid-area: v; } .steps__list > :nth-child(4) { grid-area: s3; } .steps__list > :nth-child(5) { grid-area: s4; } .step { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 2.2vw, 30px); border-radius: var(--radius-lg); color: var(--white); background: var(--grain-dark), linear-gradient(150deg, #1a62e0 0%, var(--blue) 45%, #0a3f9e 100%); } .step::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 52%, rgba(255, 255, 255, .07) 52%, transparent 78%); pointer-events: none; } .step__num { font-size: 2.25rem; line-height: 1; font-weight: 500; color: var(--lime); letter-spacing: -.03em; } .step__title { font-size: clamp(1.5rem, 1.2rem + .8vw, 2rem); line-height: 1.1; letter-spacing: -.03em; font-weight: 540; } .step p { color: rgba(255, 255, 255, .82); font-size: var(--fs-small); line-height: 1.6; } .step__tag { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: .875rem; font-weight: 500; } .step__tag svg { width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: var(--lime); fill: var(--ink); box-sizing: border-box; } .steps__visual { border-radius: var(--radius-lg); overflow: hidden; background: #3a7fe6; } .steps__visual picture, .steps__visual img { width: 100%; height: 100%; display: block; } .steps__visual img { object-fit: cover; } @media (max-width: 1023px) { .steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "v v" "s1 s2" "s3 s4"; } .steps__visual { aspect-ratio: 16 / 9; } } @media (max-width: 599px) { .steps__list { grid-template-columns: 1fr; grid-template-areas: "v" "s1" "s2" "s3" "s4"; gap: 12px; } .steps__visual { aspect-ratio: 4 / 3; } } /* ---------- Inhaltsverzeichnis als blaue Karte, aktiver Punkt mit Lime-Pfeil ---------- */ .toc { padding: 10px 20px; border-radius: var(--radius-lg); color: var(--white); background: var(--grain-dark), linear-gradient(160deg, #1a62e0, var(--blue) 60%, #0a3f9e); } .toc ol { display: grid; counter-reset: toc; } .toc li { counter-increment: toc; } .toc li + li { border-top: 1px solid rgba(255, 255, 255, .14); } @media (min-width: 1024px) { .toc { position: sticky; top: calc(var(--header-h) + 24px); } } /* ---------- Zitat und Demo-Box im Long-Read ---------- */ .pull { position: relative; margin: 32px 0; padding: 30px 0 24px; border-block: 1px dashed rgba(16, 17, 20, .22); } .pull::before { content: "“"; display: block; height: .55em; margin-bottom: 10px; font-size: 4.5rem; line-height: 1; font-weight: 700; color: var(--lime-deep); } .pull p { margin: 0; font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem); line-height: 1.4; letter-spacing: -.02em; font-weight: 500; color: var(--ink); text-wrap: pretty; } /* ---------- Verwandte Leistungen: Bildkarten ---------- */ .rel { display: flex; flex-direction: column; height: 100%; border-radius: var(--radius-lg); background: var(--white); box-shadow: 0 0 0 1px var(--rule); overflow: hidden; transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); } .rel:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--rule), 0 36px 70px -36px rgba(6, 37, 88, .4); } .rel__media { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--navy); } .rel__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); } .rel:hover .rel__media img { transform: scale(1.04); } .rel__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(4, 22, 58, .78) 100%); } .rel__title { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 20px; color: var(--white); font-size: clamp(1.5rem, 1.2rem + .8vw, 2rem); line-height: 1.1; letter-spacing: -.03em; font-weight: 540; } .rel__body { display: flex; flex-direction: column; flex: 1; gap: 16px; padding: 22px 24px 24px; } .rel__body .link-arrow { margin-top: auto; align-self: flex-start; } .related__grid > li { min-width: 0; } /* ---------- Abstände: Hero → Vorteile → Logos ---------- */ .hero--service + .perks { padding-top: clamp(72px, 4rem + 3vw, 128px); } .perks + .logos { padding-top: clamp(64px, 3rem + 3vw, 112px); padding-bottom: clamp(64px, 3rem + 3vw, 112px); } /* ---------- Eine Kundenstimme groß ---------- */ .feature__card { display: grid; gap: clamp(28px, 4vw, 72px); align-items: center; margin: 0; } .feature__photo { width: clamp(120px, 16vw, 220px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 8px var(--white), 0 40px 80px -40px rgba(6, 37, 88, .45); } .feature__photo img { width: 100%; height: 100%; object-fit: cover; } .feature__body { display: grid; gap: 20px; justify-items: start; max-width: 860px; } .feature__quote { position: relative; margin: 0; } .feature__quote p { font-size: clamp(2rem, 1.2rem + 3vw, 4rem); line-height: 1.05; letter-spacing: -.04em; font-weight: 520; color: var(--ink); text-wrap: balance; } .feature__who { display: grid; gap: 2px; line-height: 1.35; } .feature__who strong { font-weight: 600; font-size: 1.0625rem; } .feature__who span { color: var(--muted); font-size: .9375rem; } .feature__about { max-width: 58ch; color: var(--muted); font-size: var(--fs-small); padding-top: 16px; border-top: 1px solid var(--rule); } @media (min-width: 900px) { .feature__card { grid-template-columns: auto minmax(0, 1fr); } } .guide { display: flex; flex-direction: column; gap: 14px; height: 100%; padding: clamp(22px, 2.2vw, 32px); border-radius: var(--radius-lg); background: var(--white); box-shadow: 0 0 0 1px var(--rule); transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); } .guide:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--rule), 0 36px 70px -36px rgba(6, 37, 88, .4); } .guide__title { font-size: clamp(1.375rem, 1.15rem + .6vw, 1.75rem); line-height: 1.15; letter-spacing: -.025em; font-weight: 540; } .guide .link-arrow { margin-top: auto; align-self: flex-start; } .guides__grid > li { min-width: 0; } @media (max-width: 599px) { .guide:hover { transform: none; } } .guides + .book, .faq + .book { padding-top: 0; } /* Inhaltsverzeichnis: Nummer im Kreis, aktiv wird der Kreis Lime mit Doppelpfeil */ .toc a { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; font-size: 1.0625rem; line-height: 1.35; letter-spacing: -.01em; color: rgba(255, 255, 255, .66); transition: color .3s; } .toc a::before { content: counter(toc); flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-top: -2px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: var(--white); font-size: .8125rem; font-weight: 600; transition: background-color .3s, color .3s; } .toc a:hover { color: var(--white); } .toc a:hover::before { background: rgba(255, 255, 255, .24); } .toc a.is-active { color: var(--white); } .toc a.is-active::before { content: ""; background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 7 5 5-5 5M12 7l5 5-5 5' fill='none' stroke='%23101114' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; } /* Brotkrumen auf allen Unterseiten: eine ruhige Zeile, Haus-Icon, feine Pfeile, aktuelle Seite in Blau */ .crumbs { position: relative; z-index: 2; margin-bottom: clamp(20px, 2vw, 32px); } .crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: .875rem; line-height: 1.4; } .crumbs li { display: inline-flex; align-items: center; min-width: 0; } .crumbs li + li::before { content: ""; width: 14px; height: 14px; margin: 0 8px; flex: none; background: currentColor; opacity: .4; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 6 6 6-6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 6 6 6-6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } .crumbs a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink-2); transition: color .25s; } .crumbs a:hover { color: var(--blue); } .crumbs svg { width: 17px; height: 17px; } .crumbs [aria-current] { color: var(--blue); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Demo-Banner im Long-Read: Lime-Fläche wie im Hero, mit Verlauf, Körnung und angeschnittener Bildmarke */ /* Demo-Banner im Long-Read: gleiche Fläche wie die Buchungssektion (Blauverlauf, Körnung, dunkler Schein unten links) */ .prose__demo { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 18px; justify-items: start; margin: 40px 0; padding: clamp(26px, 3vw, 40px); border-radius: var(--radius-lg); color: var(--white); background: var(--grain-dark), linear-gradient(180deg, #3e82e4 0%, #2f6cdd 46%, #1166cd 100%); box-shadow: 0 30px 60px -36px rgba(6, 37, 88, .7); } .prose__demo::after { content: ""; position: absolute; z-index: -1; left: -10%; bottom: -60%; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(6, 37, 88, .55), transparent 68%); pointer-events: none; } .prose__demo p { display: grid; gap: 4px; margin: 0; max-width: 40ch; color: rgba(255, 255, 255, .86); } .prose__demo strong { color: var(--white); font-weight: 600; font-size: clamp(1.25rem, 1.05rem + .6vw, 1.5rem); line-height: 1.25; letter-spacing: -.02em; } .prose__demo small { font-size: .8125rem; color: rgba(255, 255, 255, .78); } .prose__demo .btn { box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), 0 14px 30px -14px rgba(4, 24, 59, .7); } /* Kundenstimme auf der dunklen Bühne wie „Seit 2015 im Mittelstand“ */ .feature { color: var(--white); background: var(--grain-dark), radial-gradient(90% 80% at 85% 30%, #0d3a8a 0%, var(--navy) 50%, #04163a 100%); } .feature .feature__quote p { color: var(--white); } .feature .feature__who span, .feature .feature__about { color: var(--on-dark); } .feature .feature__about { border-top-color: rgba(255, 255, 255, .16); } .feature .feature__photo { box-shadow: 0 0 0 6px rgba(173, 247, 30, .9), 0 40px 80px -30px rgba(0, 0, 0, .7); } /* ========================================================= KI macht die Arbeit: Bento mit vier Live-Elementen Desktop: Team breit oben links, Handy hoch rechts über zwei Reihen, darunter Tempo und Ergebnisse. Mobil: untereinander. ========================================================= */ .bento { display: grid; gap: clamp(12px, 1.2vw, 20px); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "team team" "phone phone" "speed growth"; } .bento__tile { position: relative; overflow: hidden; display: flex; flex-direction: column; border-radius: var(--radius-lg); background: var(--white); box-shadow: 0 0 0 1px var(--rule); min-width: 0; } .bento__tile--team { grid-area: team; background: linear-gradient(120deg, #e4ecfc 0%, #f4f7fe 55%, var(--white) 100%); } .bento__tile--phone { grid-area: phone; color: var(--white); background: var(--grain-dark), radial-gradient(120% 90% at 70% 10%, #0d3a8a 0%, var(--navy) 55%, #04163a 100%); box-shadow: none; } .bento__tile--speed { grid-area: speed; background: var(--grain-paper), var(--paper-2); box-shadow: none; } .bento__tile--growth { grid-area: growth; color: var(--white); background: var(--grain-dark), #121317; box-shadow: none; } .bento__media { position: relative; overflow: hidden; } .bento__body { display: grid; gap: 10px; padding: clamp(20px, 2.2vw, 32px); margin-top: auto; } .bento__title { font-size: clamp(1.25rem, 1.05rem + .6vw, 1.625rem); line-height: 1.15; letter-spacing: -.025em; font-weight: 540; text-wrap: balance; } .bento__body p { color: var(--muted); font-size: var(--fs-small); line-height: 1.55; max-width: 46ch; } .bento__tile--phone .bento__body p, .bento__tile--growth .bento__body p { color: var(--on-dark); } @media (min-width: 1024px) { .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: "team team team team team team team team phone phone phone phone" "speed speed speed speed growth growth growth growth phone phone phone phone"; } .bento__tile--team { flex-direction: row; align-items: stretch; min-height: 340px; } .bento__tile--team .bento__media { flex: 1 1 58%; } .bento__tile--team .bento__body { flex: 1 1 42%; align-content: end; } } /* Team: Karten laufen durch, die mittlere wird farbig und hebt sich */ .team-run { min-height: 300px; display: flex; align-items: center; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .team-run__track { display: flex; gap: 14px; width: max-content; padding: 26px 0; will-change: transform; } .team-card { flex: none; width: 150px; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; border: 3px solid var(--white); box-shadow: 0 18px 36px -20px rgba(6, 37, 88, .5); transform: rotate(var(--r, -4deg)) translateY(var(--y, 4%)) scale(var(--s, .92)); filter: grayscale(var(--g, 1)); transition: border-color .4s; } .team-card:nth-child(even) { --r: 4deg; --y: -4%; } .team-card img { width: 100%; height: 100%; object-fit: cover; } .team-card.is-focus { border-color: var(--lime); } .team-run__badge { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: .8125rem; font-weight: 500; white-space: nowrap; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .6); } .team-run__badge svg { width: 20px; height: 20px; padding: 4px; box-sizing: border-box; border-radius: 50%; background: var(--lime); color: var(--ink); } @media (min-width: 1024px) { .team-run { min-height: 0; } .team-card { width: 168px; } } /* Handy neu gebaut: Sperrbildschirm in CSS, Pushs laufen nacheinander ein */ .phone3-stage { display: grid; place-items: center; padding: clamp(28px, 3vw, 44px) 20px 0; min-height: 420px; } .phone3 { position: relative; width: min(270px, 74%); aspect-ratio: 9 / 19; padding: 9px; border-radius: 44px; background: linear-gradient(160deg, #3b3d44, #15161a 40%, #2b2d33); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14), 0 50px 80px -30px rgba(0, 0, 0, .8); transform: translateY(14%); } .phone3__screen { position: relative; height: 100%; overflow: hidden; border-radius: 36px; background: radial-gradient(90% 60% at 30% 20%, #3c6fd8 0%, transparent 60%), radial-gradient(80% 60% at 80% 80%, #1a3f9a 0%, transparent 60%), #071a44; display: flex; flex-direction: column; align-items: center; padding: 14px 10px; } .phone3__island { width: 34%; height: 22px; border-radius: 999px; background: #000; } .phone3__date { margin-top: 26px; font-size: .75rem; color: rgba(255, 255, 255, .82); } .phone3__time { font-size: 3.5rem; line-height: 1; font-weight: 300; letter-spacing: -.03em; color: var(--white); font-variant-numeric: tabular-nums; } .phone3__stack { position: relative; width: 100%; margin-top: 22px; display: grid; gap: 7px; } .push3 { display: flex; gap: 8px; align-items: flex-start; padding: 9px 10px; border-radius: 16px; background: rgba(255, 255, 255, .82); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); color: var(--ink); font-size: .6875rem; line-height: 1.3; box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .6); transform-origin: 50% 0; } .push3 .toast__mark { width: 26px; height: 26px; padding: 6px; border-radius: 7px; flex: none; } .push3__txt { display: grid; gap: 1px; min-width: 0; flex: 1; } .push3__head { display: flex; justify-content: space-between; gap: 6px; font-weight: 600; } .push3__head span { font-weight: 400; color: rgba(16, 17, 20, .45); } .push3__msg { color: var(--ink-2); } .push3.is-old { opacity: .62; transform: scale(.96); } .phone3__bar { position: absolute; bottom: 8px; left: 50%; width: 36%; height: 4px; translate: -50% 0; border-radius: 4px; background: rgba(255, 255, 255, .8); } @media (min-width: 1024px) { .bento__tile--phone .bento__media { flex: 1; } .phone3-stage { min-height: 0; } .phone3 { width: min(280px, 80%); } } /* Tempo und Ergebnisse */ .bento__media--dial { display: grid; place-items: center; padding: 28px 20px 0; } .bento__media--dial .dial { width: min(220px, 70%); } .bento__media--growth { min-height: 220px; } .bento__media--growth .growth { position: relative; inset: auto; padding: 26px 26px 0; } @media (prefers-reduced-motion: reduce) { .team-card { transition: none; } } @media (max-width: 599px) { .bento { grid-template-columns: 1fr; grid-template-areas: "team" "phone" "speed" "growth"; } .team-run { min-height: 260px; } .team-card { width: 128px; } .phone3-stage { min-height: 380px; } } /* ---------- Kundenstimmen: Porträts als Auswahl, aktives mit Fortschrittsring ---------- */ .vsel { display: grid; justify-items: center; text-align: center; gap: clamp(32px, 3vw, 48px); } .vsel__title { color: var(--white); } .vsel__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 1.4vw, 20px); } .vsel__tab { position: relative; width: clamp(64px, 7vw, 92px); aspect-ratio: 1; padding: 6px; border-radius: 50%; opacity: .45; transition: opacity .4s, transform .5s var(--ease-out); } .vsel__tab picture, .vsel__tab img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .vsel__tab:hover, .vsel__tab:focus-visible { opacity: .8; } .vsel__tab[aria-selected="true"] { opacity: 1; transform: scale(1.06); } .vsel__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; } .vsel__ring circle { fill: none; stroke-width: 3; stroke: transparent; } .vsel__tab[aria-selected="true"] .vsel__ring circle:first-child { stroke: rgba(255, 255, 255, .16); } .vsel__ring circle[data-vsel-ring] { stroke: var(--lime); stroke-linecap: round; stroke-dasharray: 295.3; stroke-dashoffset: 295.3; } .vsel__tab[aria-selected="true"] .vsel__ring circle[data-vsel-ring] { stroke-dashoffset: calc(295.3 * (1 - var(--p, 0))); } .vsel__panels { display: grid; width: 100%; max-width: 900px; } .vsel__panel { grid-area: 1 / 1; margin: 0; display: grid; gap: 22px; justify-items: center; align-content: start; } .vsel__panel[hidden] { display: grid; visibility: hidden; opacity: 0; } .vsel__panel blockquote { margin: 0; } .vsel__panel blockquote p { font-size: clamp(1.375rem, 1rem + 1.5vw, 2.25rem); line-height: 1.08; letter-spacing: -.035em; font-weight: 520; color: var(--white); text-wrap: balance; } .vsel__panel figcaption { display: grid; gap: 4px; line-height: 1.4; } .vsel__panel figcaption strong { font-weight: 600; font-size: 1.0625rem; color: var(--white); } .vsel__panel figcaption span { color: var(--on-dark); font-size: .9375rem; } .vsel__panel figcaption small { color: rgba(255, 255, 255, .6); font-size: .8125rem; } @media (prefers-reduced-motion: reduce) { .vsel__tab { transition: none; } } /* Vier Schritte: 3D-Bild ganz sichtbar und mittig, Fläche im Verlauf des Bildes */ .steps__visual { display: grid; place-items: center; background: linear-gradient(180deg, #0c56d4 0%, #d5e1f6 100%); } .steps__visual picture { display: grid; place-items: center; width: 100%; height: 100%; } .steps__visual img { width: 100%; height: 100%; object-fit: contain; object-position: center; } /* ---------- Startseite: Kundenstimmen als ruhige weiße Kacheln ---------- */ .voice { background: var(--white); box-shadow: 0 0 0 1px rgba(6, 37, 88, .08), 0 18px 40px -30px rgba(6, 37, 88, .35); user-select: none; } .voice:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(6, 37, 88, .1), 0 30px 60px -32px rgba(6, 37, 88, .4); } .voice blockquote p { color: var(--ink); } .voice__person img { box-shadow: none; } .voice img { -webkit-user-drag: none; } /* SEO-Seite: 3D-Bild füllt die Mitte, Fläche ohne Kanten */ .steps__visual { background: #0c56d4; } .steps__visual picture { display: block; width: 100%; height: 100%; } .steps__visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } @media (max-width: 599px) { .vsel__tabs { flex-wrap: nowrap; gap: 6px; } .vsel__tab { width: 60px; padding: 4px; } } /* ========================================================= Runde Feedback 2 (2026-10-23) ========================================================= */ /* Referenzen: hellblaue Bildmarke groß und transparent im Hintergrund */ .feature { position: relative; isolation: isolate; overflow: hidden; } .feature__mark { position: absolute; z-index: -1; inset: 0; background: url("../img/brand-shape-blue.svg") no-repeat center / cover; opacity: .55; pointer-events: none; } .feature--light { color: var(--ink); background: var(--grain-paper), linear-gradient(180deg, #eef3fd 0%, var(--paper) 100%); } .feature--light .feature__mark { opacity: .5; } .feature--light .vsel__title, .feature--light .vsel__panel blockquote p, .feature--light .vsel__panel figcaption strong { color: var(--ink); } .feature--light .vsel__panel figcaption span { color: var(--ink-2); } .feature--light .vsel__panel figcaption small { color: var(--muted); } .feature--light .vsel__tab[aria-selected="true"] .vsel__ring circle:first-child { stroke: rgba(62, 130, 228, .2); } .feature--light .vsel__ring circle[data-vsel-ring] { stroke: #3e82e4; } .vsel__tab:hover { opacity: .85; transform: scale(1.03); } /* Hero: drei Ansprechpartner, ohne Plus */ .hero__people { display: flex; align-items: center; gap: 14px; margin-top: 22px; } .hero__people ul { display: flex; } .hero__people li + li { margin-left: -12px; } .hero__people img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 3px solid #c6fb5f; } .hero__people p { font-size: var(--fs-small); color: var(--ink-2); font-weight: 500; } /* Tarife: gleiche Zeilen in allen drei Karten (subgrid), Details auf /preise/ */ .plans__grid { align-items: stretch; } .plan { display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 18px; } .plan__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; } .plan__badge { position: static; } .plan__for { min-height: 0; margin: 0; } .plan__price { margin: 0; } .plan__pricebox { display: grid; gap: 8px; padding-top: 18px; border-top: 1px solid var(--rule); } .plan--featured .plan__pricebox { border-top-color: rgba(255, 255, 255, .16); } .plan .pts { margin: 0; } .plan__rows { display: grid; margin: 0; } .plan__rows div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-small); } .plan__rows div:first-child { border-top: 1px solid var(--rule); } .plan__rows dt { color: var(--muted); } .plan__rows dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; } .plan--featured .plan__rows div { border-color: rgba(255, 255, 255, .16); } .plan--featured .plan__rows dt { color: var(--on-dark); } .plan__actions { display: grid; gap: 12px; justify-items: center; align-self: end; } .plan__actions .btn { width: 100%; min-width: 0; } .plan--featured .plan__more { color: var(--white); } @media (min-width: 960px) { .plans__grid { grid-template-rows: auto; } } @media (max-width: 959px) { .plan { grid-template-rows: none; grid-row: auto; display: flex; flex-direction: column; } .plan__actions { margin-top: auto; } } @supports not (grid-template-rows: subgrid) { .plan { display: flex; flex-direction: column; } .plan__actions { margin-top: auto; } } /* Interaktionen: Ziehen sichtbar machen, Klickflächen eindeutig */ .drag-cursor { position: fixed; z-index: 60; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: .8125rem; font-weight: 600; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.6); transition: opacity .25s, transform .35s var(--ease-out); } .drag-cursor svg { width: 14px; height: 14px; } .drag-cursor.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); } .carousel.is-dragging + * .drag-cursor, .is-dragging .drag-cursor { transform: translate(-50%, -50%) scale(.9); } [data-drag].has-cursor { cursor: none; } [data-drag].has-cursor a, [data-drag].has-cursor button { cursor: pointer; } .drag-hint { display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--muted); } .drag-hint svg { width: 16px; height: 16px; } .round-btn:hover { transform: scale(1.06); } .round-btn:active { transform: scale(.96); } .svc-card, .ccard, .rel, .guide, .plan { cursor: default; } .svc-card:hover .svc-card__link svg, .ccard:hover .link-arrow svg { transform: translateX(4px); } .svc-card:hover { box-shadow: 0 0 0 1.5px #3e82e4, 0 36px 70px -36px rgba(6, 37, 88, .4); } .link-arrow:hover { opacity: 1; color: var(--blue-2); } .link-arrow--light:hover { color: #c9dbff; } .mega__links a:hover, .footer__col a:hover { text-decoration: underline; text-underline-offset: 3px; } .faq summary:hover { color: var(--blue); } .tags li { cursor: default; } /* Leistungsseite: Ratgeber nur noch als Links, verwandte Leistungen als schmale Zeile */ .prose__more { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--rule); } .prose__more p { margin-bottom: 10px; font-size: .875rem; color: var(--muted); } .prose__more ul { display: flex; flex-wrap: wrap; gap: 8px 20px; } .prose__more a { color: var(--blue); font-weight: 560; text-decoration: underline; text-underline-offset: 3px; } .related--slim { padding-block: 0 clamp(56px, 5vw, 96px); } .related__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 24px; border-top: 1px solid var(--rule); } .related__label { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; } .related__links { display: flex; flex-wrap: wrap; gap: 10px; } .related__links a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--rule); font-size: .9375rem; font-weight: 500; transition: box-shadow .3s, color .3s, background-color .3s; } .related__links a svg { width: 15px; height: 15px; transition: transform .35s var(--ease-out); } .related__links a:hover { box-shadow: inset 0 0 0 1.5px var(--blue); color: var(--blue); background: var(--white); } .related__links a:hover svg { transform: translateX(3px); } .faq + .related--slim { margin-top: calc(-1 * var(--section) + 16px); } /* ---------- Hero-Board als Software-Tour: Board, Katalog, Reporting, Punkte ---------- */ .board__menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 6px; color: rgba(255, 255, 255, .78); font-weight: 500; font-size: 14px; text-align: left; transition: background-color .3s, color .3s; position: relative; overflow: hidden; } .board__menu button svg { width: 17px; height: 17px; } .board__menu button:hover { background: rgba(255, 255, 255, .1); color: var(--white); } .board__menu button.is-active { background: rgba(255, 255, 255, .16); color: var(--white); } .board__menu button.is-active::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--tour, 0) * 100%); background: var(--lime); } .board__menu li.is-active { background: none; } .board__views { display: grid; } .bview { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), visibility 0s .5s; } .bview.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .ctop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; } .ctop__search { display: inline-flex; align-items: center; gap: 8px; min-width: 260px; padding: 9px 12px; border-radius: 8px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--blue); font-weight: 500; font-size: 14px; } .ctop__search svg { width: 15px; height: 15px; color: var(--muted); } .ctop__filters { display: flex; flex-wrap: wrap; gap: 6px; } .ctop__filters span { padding: 5px 11px; border-radius: 6px; background: #eeeeeb; font-size: 12.5px; font-weight: 500; } .ctop__filters .is-on { background: var(--ink); color: var(--white); } .crows { display: grid; gap: 8px; } .crow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 8px; background: var(--white); box-shadow: 0 0 0 1px rgba(16, 17, 20, .06); font-size: 13.5px; } .crow.is-hit { box-shadow: 0 0 0 2px var(--blue), 0 12px 24px -16px rgba(11, 80, 200, .6); } .crow strong { font-weight: 600; } .crow__price { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); } .crow__price svg { width: 12px; height: 12px; } .crow__btn { display: grid; padding: 7px 12px; border-radius: 6px; background: var(--paper); font-size: 12px; font-weight: 600; overflow: hidden; } .crow__btn > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; } .crow__btn > span:last-child { opacity: 0; } .crow__btn svg { width: 12px; height: 12px; } .crow.is-ordered .crow__btn { background: var(--lime); } .crow.is-ordered .crow__btn > span:first-child { opacity: 0; } .crow.is-ordered .crow__btn > span:last-child { opacity: 1; } .cnote { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12.5px; color: var(--muted); opacity: 0; transition: opacity .4s; } .cnote.is-on { opacity: 1; } .rep__label { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 13px; font-weight: 600; } .kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .kpi { display: grid; gap: 6px; padding: 12px 14px; border-radius: 8px; background: var(--white); box-shadow: 0 0 0 1px rgba(16, 17, 20, .06); font-size: 12.5px; } .kpi span { color: var(--muted); } .kpi em { justify-self: start; padding: 2px 8px; border-radius: 6px; background: #e7f8c9; color: #3f6b00; font-style: normal; font-weight: 600; font-size: 11.5px; } .kpi__spark { width: 100%; height: 36px; } .kpi__spark path { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .rep__chart { margin-top: 10px; padding: 12px; border-radius: 8px; background: var(--white); box-shadow: 0 0 0 1px rgba(16, 17, 20, .06); } .rep__chart svg { width: 100%; height: 150px; display: block; } .rep__area { fill: rgba(11, 80, 200, .1); } .rep__line { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .rep__note { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--white); box-shadow: 0 0 0 1px rgba(16, 17, 20, .06); font-size: 12.5px; } .rep__note img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; } .rep__note p { display: grid; line-height: 1.35; } .rep__note span { color: var(--muted); } .pv__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .pv__head p { display: grid; line-height: 1.3; } .pv__head span:first-child { font-size: 12.5px; color: var(--muted); } .pv__head strong { font-size: 20px; letter-spacing: -.02em; } .pv__meter { position: relative; height: 14px; border-radius: 7px; background: #e7e7e3; overflow: hidden; } .pv__meter i { position: absolute; top: 0; bottom: 0; transition: width 1s var(--ease-out), left 1s var(--ease-out); } .pv__used { left: 0; width: 46%; background: var(--blue); border-radius: 7px 0 0 7px; } .pv__res { left: 46%; width: 16%; background: repeating-linear-gradient(-45deg, rgba(11, 80, 200, .85) 0 4px, rgba(11, 80, 200, .35) 4px 8px); } .pv__legend { display: flex; gap: 16px; margin: 10px 0 14px; font-size: 12px; color: var(--muted); } .pv__legend li { display: flex; align-items: center; gap: 6px; } .pv__free { background: #e7e7e3; } .ledger { display: grid; gap: 6px; } .ledger li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; background: var(--white); box-shadow: 0 0 0 1px rgba(16, 17, 20, .06); font-size: 13px; } .ledger strong { font-weight: 560; } .led__state { font-style: normal; font-size: 12px; font-weight: 600; color: var(--blue); } .led__state.is-res { color: var(--muted); } @media (max-width: 719px) { .ctop__search { min-width: 0; flex: 1; } .crow { grid-template-columns: auto minmax(0, 1fr) auto; } .crow__price { display: none; } .kpis { grid-template-columns: 1fr; } .kpi:nth-child(n+2) { display: none; } .ledger li:nth-child(n+3), .crows li:nth-child(n+3) { display: none; } .ctop__filters { display: none; } .rep__chart svg { height: 110px; } } .related--slim + .book { padding-top: 0; } .feature--light .feature__mark { opacity: .38; } /* Bildmarke deutlich zurückgenommen: Leistungsseite auf Dunkelblau, Startseite im Blau der Buchungssektion */ .feature .feature__mark { opacity: .16; } .feature--blue { color: var(--white); background: var(--grain-dark), linear-gradient(180deg, #3e82e4 0%, #2f6cdd 46%, #1166cd 100%); } .feature--blue::after { content: ""; position: absolute; z-index: -1; left: -10%; bottom: -30%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(6, 37, 88, .55), transparent 68%); pointer-events: none; } .feature--blue .feature__mark { opacity: .18; } .feature--blue .h2 { color: var(--white); } .feature--blue .progress i { background: rgba(255, 255, 255, .25); } .feature--blue .progress i::after { background: var(--white); } .feature--blue .round-btn { border-color: transparent; } .feature--blue .round-btn:hover { background: var(--navy); border-color: var(--navy); } .feature--blue .voice { color: var(--ink); box-shadow: 0 24px 50px -30px rgba(4, 22, 58, .55); } .feature--blue .voice:hover { box-shadow: 0 36px 70px -34px rgba(4, 22, 58, .7); } .faq + .related--slim .related__row { border-top: 0; } /* ========================================================= Runde 4 (2026-10-23): aus der Markenfassung übernommen ========================================================= */ @font-face { font-family: "Cousine"; src: url("../fonts/cousine-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* Logo größer: Header 180 px (auch mobil), Footer 200 px */ .brand__logo { width: 180px; height: 34px; } @media (max-width: 599px) { .brand__logo { width: 180px; height: 34px; } } .footer__logo { width: 200px; height: 38px; } /* Story: Dark Green #182101 als ruhige Fläche, Kennzahlen in Cousine */ .story { background: var(--grain-dark), #182101; } .facts dd { font-family: "Cousine", ui-monospace, Menlo, monospace; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: normal; font-size: clamp(2.25rem, 1.7rem + 2vw, 4rem); } @media (max-width: 599px) { .facts dd { font-size: 2.25rem; } } /* Footer: Dark Green mit Lockup „Building digital trust“ aus dem Brand Guide */ .footer { background: var(--grain-dark), #182101; } .footer__lockup { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .footer__lockup .footer__logo { margin-bottom: 0; } .footer__tag { font-weight: 600; font-size: .75rem; line-height: 1.15; letter-spacing: .02em; text-transform: uppercase; color: #f2f2f2; } /* Work Sans läuft breiter als Geist: Auf dem Tablet hält der feste Zeilenumbruch der H1 nur etwas kleiner */ @media (min-width: 600px) and (max-width: 899px) { .hero__title { font-size: min(var(--fs-h1), 6.6vw); } } /* Story wie in der Markenfassung: breitere Textspalte, Umbrüche halten mit Work Sans */ @media (min-width: 1024px) { .story__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } .story .h2 { font-size: clamp(2.25rem, 1.2rem + 2.2vw, 3.25rem); } .story .h2 .ln { white-space: nowrap; } } /* ========================================================= SEO-Parität (2026-10-23): Navigation und Footer 1:1 wie live ========================================================= */ @media (min-width: 1024px) { .mega__label { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .mega__all { display: flex; justify-content: flex-end; padding: 0 0 20px; } .mega__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 24px 48px; padding: 22px 0 26px; border-top: 1px solid var(--rule); } .mega__promo-meta { margin-bottom: 4px; font-size: .8125rem; color: var(--muted); } .mega__facts { display: flex; gap: 28px; } .mega__facts li { display: grid; gap: 2px; } .mega__facts strong { font-family: "Cousine", ui-monospace, Menlo, monospace; font-size: 1.25rem; line-height: 1.1; font-weight: 700; } .mega__facts span { font-size: .75rem; color: var(--muted); } } @media (max-width: 1279px) and (min-width: 1024px) { .mega__foot { grid-template-columns: minmax(0, 1fr) auto; } .mega__facts { grid-column: 1 / -1; } } /* Mobil: dieselben Gruppen und Links wie die Hauptnavigation, aufklappbar */ .mobilnav__services { display: grid; gap: 0; margin-bottom: 24px; border-top: 1px solid var(--rule); } .mobilnav__group { border-bottom: 1px solid var(--rule); } .mobilnav__group summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; cursor: pointer; list-style: none; } .mobilnav__group summary::-webkit-details-marker { display: none; } .mobilnav__group summary span { display: grid; gap: 2px; } .mobilnav__group summary strong { font-size: 1.125rem; font-weight: 560; } .mobilnav__group summary small { font-size: .8125rem; color: var(--muted); } .mobilnav__group summary svg { width: 18px; height: 18px; flex: none; transition: transform .3s var(--ease-out); } .mobilnav__group[open] summary svg { transform: rotate(180deg); } .mobilnav__group ul { display: grid; padding: 0 0 14px; } .mobilnav__group a { display: block; padding: 8px 0; font-size: 1rem; font-weight: 500; color: var(--ink-2); } /* Footer: Agentur, Leistungen, Kontakt, Social wie live */ .footer__text { margin-bottom: 12px; font-size: var(--fs-small); } .footer__col .footer__mail { margin-top: 0; } @media (min-width: 960px) { .footer__grid { grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); } } /* Kalenderkopf mit Link „Termin wählen“ wie live, Kennzahl im Wachstums-Tile */ .cal__open { margin-left: auto; font-size: .9375rem; white-space: nowrap; } @media (max-width: 479px) { .cal__open { display: none; } } .growth__metric { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; color: var(--white); } .growth__metric strong { font-family: "Cousine", ui-monospace, Menlo, monospace; font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); line-height: 1; font-weight: 700; color: var(--lime); } .growth__metric small { font-size: .875rem; color: var(--on-dark); } /* Footer nach Referenz (2026-10-23): Lime-Fläche, Infos in einer Dark-Green-Box, unten das PROOF-Logo groß in der Hintergrundfarbe, von der Box-Unterkante angeschnitten */ .footer { padding: clamp(72px, 8vw, 160px) 0 clamp(40px, 4vw, 72px); color: var(--on-dark); background: var(--grain-lime), var(--lime); } .footer__box { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--grain-dark), #182101; padding: clamp(28px, 3vw, 48px) clamp(24px, 3vw, 48px) 0; } .footer__box .footer__grid { display: grid; gap: 36px 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__col--contact { grid-column: 1 / -1; } .footer__head { margin-bottom: 10px; } .footer__legal { margin-top: 32px; display: grid; gap: 8px; font-size: var(--fs-small); } .footer__legal ul { display: grid; gap: 6px; } .footer__box .footer__word { display: block; width: 100%; height: auto; aspect-ratio: 140.833 / 26.8743; margin: clamp(56px, 6vw, 120px) 0 -7%; fill: var(--lime); } @media (min-width: 960px) { .footer__box .footer__grid { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); } .footer__col--contact { grid-column: auto; } } /* ========================================================= Leistungsseite mit vollem Live-Inhalt (2026-10-23) ========================================================= */ @media (min-width: 1024px) { .mega__sub { min-height: calc(2 * 1.45em + 14px); } } /* Katalogkarten mit Ziel wie live: ganze Karte klickbar */ .ccard--link { position: relative; } .ccard--link .ccard__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .ccard--link .ccard__title a:hover { color: var(--blue); } .ccard--link { cursor: pointer; } /* Das Tool: Text oben, Live-Board als Cockpit */ .cockpit-sec__side { display: grid; gap: 22px; justify-items: start; } .cockpit-sec__box .stage--board { margin-top: 0; } /* Tarife mit vollständigem Inhalt je Tarif */ .plans--full .plan { grid-row: span 7; } .plan__detail { display: grid; gap: 12px; align-content: start; font-size: var(--fs-small); line-height: 1.55; } .plan__detail p { color: var(--ink-2); } .plan__detail strong { display: block; margin-bottom: 2px; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .plan__list { display: grid; gap: 8px; margin-top: 4px; } .plan__list li { position: relative; padding-left: 22px; color: var(--ink-2); } .plan__list li::before { content: ""; position: absolute; left: 0; top: .45em; width: 12px; height: 7px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg); } .plan--featured .plan__detail p, .plan--featured .plan__list li { color: rgba(255, 255, 255, .86); } .plan--featured .plan__detail strong { color: var(--on-dark); } .plan--featured .plan__list li::before { border-color: var(--lime); } .plan__year--full { display: grid; gap: 2px; font-size: .8125rem; color: var(--muted); } .plan__year--full span { transform: none !important; opacity: 1 !important; } .plan__save { font-weight: 600; color: var(--blue) !important; } .plan--featured .plan__year--full { color: var(--on-dark); } .plan--featured .plan__save { color: var(--lime) !important; } .plan__cta--long .btn__label { white-space: normal; text-align: left; line-height: 1.2; } .plan__cta--long.btn { --s: .82px; } .plan__note { font-size: .75rem; color: var(--muted); text-align: center; } .plan--featured .plan__note { color: var(--on-dark); } .plans__trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; margin-top: 40px; padding: 22px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .plans__trust ul { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: var(--fs-small); font-weight: 500; } .plans__trust li { display: inline-flex; align-items: center; gap: 8px; } .plans__trust li svg { width: 16px; height: 16px; color: var(--blue); } .plans__trust figure { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: var(--fs-small); } .plans__trust blockquote p { font-weight: 600; } .plans__trust blockquote p::before { content: "„"; } .plans__trust blockquote p::after { content: "“"; } .plans__trust figcaption { color: var(--muted); } .plans__trust figcaption strong { color: var(--ink); font-weight: 600; } .plans--full .plans__foot { display: grid; gap: 12px; } /* Buchung: Liste wie live */ .book__checks { display: grid; gap: 10px; margin-top: 22px; } .book__checks li { position: relative; padding-left: 28px; color: rgba(255, 255, 255, .9); } .book__checks li::before { content: ""; position: absolute; left: 0; top: .25em; width: 18px; height: 18px; border-radius: 50%; background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12 4 4 8-8' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; } /* Long-Read: Zwischenüberschriften sind wie live h2 */ .prose h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -.025em; font-weight: 540; margin: 56px 0 18px; scroll-margin-top: calc(var(--header-h) + 24px); text-wrap: balance; } .prose h2:first-child { margin-top: 0; } .prose__box h3.prose__box-title { font-size: 1rem; line-height: 1.4; letter-spacing: 0; margin: 0 0 12px; } .plan__year--full { height: auto; overflow: visible; } .plan__year--full span { position: static; } .plan__cta--long.btn { --s: .74px; } .plan__cta--long .btn__label { white-space: nowrap; } /* Längere Live-Headline im FAQ der Leistungsseite */ .faq--long .faq__head .h2 { font-size: clamp(2rem, 1.4rem + 1.6vw, 2.875rem); } @media (min-width: 1200px) { .faq--long .faq__head .h2 .ln { white-space: nowrap; } } .plans--full .plans__foot p { text-align: left; } /* Feste Headline-Zeilen mit Work Sans: FAQ-Kopf breiter, Tablet bricht ausgeglichen statt fest */ @media (min-width: 960px) { .faq__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (min-width: 600px) and (max-width: 1023px) { .h2 .ln { display: inline; } } /* Footer: Fläche nur minimal heller als die Box, Logo ohne Rand bis an beide Kanten */ .footer { background: var(--grain-dark), #222c08; } .footer__box .footer__word { width: calc(100% + 2 * clamp(24px, 3vw, 48px)); max-width: none; margin-left: calc(-1 * clamp(24px, 3vw, 48px)); margin-right: 0; fill: #222c08; } /* Dropdown ohne Beschreibungen und ohne Demo-Block (Wunsch Dennis, 2026-10-23) */ @media (min-width: 1024px) { .mega__label { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); } .mega__all { padding: 4px 0 28px; } } /* Footer wieder im ursprünglichen Design: Schwarz, großes Logo in hellem Grau (2026-10-23) */ .footer { padding: clamp(72px, 7vw, 128px) 0 0; color: var(--on-dark); background: var(--grain-dark), #0d0e11; } .footer .footer__word { display: block; width: calc(100% + 2vw); max-width: none; height: auto; aspect-ratio: 140.833 / 26.8743; margin: 8px -1vw -2.2vw; fill: rgba(255, 255, 255, .045); } /* ========================================================= Ratgeber: Übersicht und Detailseite (2026-10-23) ========================================================= */ .hero--guide { --lime-h: 100%; padding-bottom: clamp(56px, 5vw, 104px); } .hero--guide .hero__row { margin-top: clamp(20px, 1.2rem + 1vw, 36px); } /* Filter nach Thema */ .gfilter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .gfilter__chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--rule); font-size: .875rem; font-weight: 500; color: var(--ink-2); transition: background-color .25s, color .25s, box-shadow .25s; } .gfilter__chip span { font-family: "Cousine", ui-monospace, Menlo, monospace; font-size: .75rem; font-weight: 700; color: var(--muted); } .gfilter__chip:hover { box-shadow: inset 0 0 0 1.5px var(--blue); color: var(--blue); } .gfilter__chip[aria-pressed="true"] { background: var(--ink); color: var(--white); box-shadow: none; } .gfilter__chip[aria-pressed="true"] span { color: var(--lime); } .gfilter__count { margin-bottom: 28px; font-size: var(--fs-small); color: var(--muted); } .guides__grid--all > li[hidden] { display: none; } @media (max-width: 599px) { .gfilter { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scrollbar-width: none; } .gfilter::-webkit-scrollbar { display: none; } .gfilter__chip { flex: none; } .guides__grid.guides__grid--all { display: grid; grid-template-columns: 1fr; overflow: visible; margin: 0; padding: 0; } .guides__grid--all > li { width: auto; } } /* CTA-Band unten auf der Übersicht */ .ctaband-sec { padding-bottom: var(--section); } .ctaband { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 28px; align-items: center; padding: clamp(32px, 4vw, 64px); border-radius: var(--radius-lg); color: var(--white); background: var(--grain-dark), linear-gradient(180deg, #3e82e4 0%, #2f6cdd 46%, #1166cd 100%); } .ctaband::before { content: ""; position: absolute; z-index: -1; inset: 0; background: url("../img/brand-shape-blue.svg") no-repeat center / cover; opacity: .18; } .ctaband .h2 { color: var(--white); } .ctaband__copy p { margin-top: 14px; font-size: var(--fs-lead); color: rgba(255, 255, 255, .86); max-width: 46ch; } .ctaband__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; } @media (min-width: 960px) { .ctaband { grid-template-columns: minmax(0, 1fr) auto; } } /* Detail: Kopf mit „Kurz gesagt“ und Autorenzeile */ .article-hero { display: grid; gap: 32px; } .article-hero__copy .hero__lead { margin-top: clamp(20px, 1.2rem + 1vw, 32px); max-width: 52ch; } .article-hero__copy .hero__buttons { margin-top: 28px; } .answer { padding: 24px 26px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, .72); box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); backdrop-filter: blur(8px); } .answer__title { margin-bottom: 8px; font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); } .answer p:last-child { color: var(--ink-2); line-height: 1.6; } .byline { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: var(--fs-small); } .byline img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 3px solid #c6fb5f; } .byline > span { display: grid; line-height: 1.35; } .byline strong { font-weight: 600; } .byline > span > span { color: var(--ink-2); } @media (min-width: 1024px) { .article-hero { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 96px); align-items: end; } } .hero--article .hero__title { white-space: normal; } /* Artikeltext */ .read--article { padding-top: clamp(56px, 5vw, 96px); } .prose > ul, .prose > ol { display: grid; gap: 10px; margin: 0 0 22px; } .prose > ul > li { position: relative; padding-left: 22px; color: var(--ink-2); line-height: 1.65; } .prose > ul > li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); } .prose > ol { counter-reset: step; } .prose > ol > li { position: relative; padding-left: 40px; color: var(--ink-2); line-height: 1.65; counter-increment: step; } .prose > ol > li::before { content: counter(step); position: absolute; left: 0; top: .1em; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--lime); color: var(--ink); font-family: "Cousine", ui-monospace, Menlo, monospace; font-size: .8125rem; font-weight: 700; } .prose li strong { color: var(--ink); font-weight: 600; } .prose h3 + p { margin-top: -6px; } .prose__note { margin: 28px 0; padding: 22px 26px; border-left: 3px solid var(--blue); border-radius: 0 var(--radius) var(--radius) 0; background: var(--white); box-shadow: 0 0 0 1px var(--rule); } .prose__note-title { margin-bottom: 6px !important; font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--blue) !important; } .prose__note p:last-child { margin-bottom: 0; color: var(--ink); font-weight: 500; line-height: 1.6; } .prose__figure { margin: 28px 0 30px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 0 0 1px var(--rule); background: var(--white); } .prose__svg { display: block; width: 100%; height: auto; } /* Autor */ .author-sec { padding-bottom: var(--section); } .author { display: grid; gap: 24px; align-items: center; max-width: 920px; padding: clamp(22px, 2.4vw, 36px); border-radius: var(--radius-lg); background: var(--white); box-shadow: 0 0 0 1px var(--rule); } .author__photo img { width: 100%; max-width: 220px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); } .author__label { font-size: .8125rem; color: var(--muted); } .author__name { margin-top: 4px; font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.01em; } .author__role { margin-top: 2px; font-size: var(--fs-small); color: var(--blue); font-weight: 600; } .author__text { margin: 14px 0 10px; color: var(--ink-2); line-height: 1.65; max-width: 60ch; } @media (min-width: 700px) { .author { grid-template-columns: 200px minmax(0, 1fr); gap: 36px; } } @media (min-width: 960px) and (max-width: 1199px) { .faq--long .faq__head .h2 { font-size: 2rem; } } /* ========================================================= Feedback-Runde 3 (2026-10-23) ========================================================= */ /* 1.1 Hero: Team links unter der Beschreibung, blauer Rahmen */ .hero__intro { display: grid; gap: 24px; justify-items: start; } .hero__intro .hero__people { margin-top: 0; } .hero__people img { border: 3px solid var(--blue); box-shadow: 0 6px 14px -8px rgba(11, 80, 200, .6); } /* 1.4 Kennzahlen: Zahl immer oben bündig, auch bei zweizeiligem Text */ .facts div { justify-content: flex-end; } /* 1.5 Vergleich: PROOF mit Bildmarke */ .cmp__logo { display: block; width: 78px; height: 15px; margin-inline: auto; fill: var(--ink); color: var(--ink); } @media (max-width: 599px) { .cmp__logo { width: 58px; height: 11px; } } /* 1.7 FAQ: Weg zur Terminbuchung */ .faq__cta { margin-top: 28px; } .faq__mail + .faq__cta { margin-top: 18px; } /* 1.6 Kundenstimmen: Profilkarten mit großem Porträt */ .voices .voice { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); width: min(86vw, 640px); padding: 0; gap: 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--white); } .voice__photo { position: relative; margin: 0; overflow: hidden; background: var(--paper-2); } .voice__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .9s var(--ease-out); } .voice:hover .voice__photo img { transform: scale(1.04); } .voice__body { position: relative; display: flex; flex-direction: column; padding: clamp(22px, 2.4vw, 34px); } .voice__mark { position: absolute; top: clamp(10px, 1vw, 16px); right: clamp(18px, 2vw, 28px); font-family: "Cousine", ui-monospace, Menlo, monospace; font-size: 5rem; line-height: 1; font-weight: 700; color: var(--blue); opacity: .16; } .voices .voice blockquote p { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem); line-height: 1.22; letter-spacing: -.015em; font-weight: 520; color: var(--ink); text-wrap: balance; padding-right: 32px; } .voice__who { display: grid; gap: 2px; margin-top: auto; padding-top: 26px; font-size: .9375rem; line-height: 1.35; } .voice__who strong { font-weight: 600; } .voice__who span { color: var(--muted); font-size: .875rem; } .voices .voice__about { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: .8125rem; line-height: 1.55; color: var(--muted); } @media (min-width: 1100px) { .voices .voice { width: 620px; } } @media (max-width: 699px) { .voices .voice { grid-template-columns: 1fr; width: 84vw; } .voice__photo { aspect-ratio: 16 / 10; } .voice__photo img { object-position: 50% 22%; } } /* 1.3 Tarife: Details unter den Kacheln, Demo-Button darunter */ .plan__toggle { display: inline-flex; align-items: center; gap: 8px; padding: 6px 2px; font-weight: 560; color: var(--blue); transition: opacity .3s; } .plan__toggle svg { width: 18px; height: 18px; transition: transform .45s var(--ease-out); } .plan__toggle:hover { opacity: .82; } .plan__toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .plan--featured .plan__toggle { color: var(--white); } .plan.is-selected { box-shadow: 0 0 0 2px var(--blue), 0 30px 60px -30px rgba(0, 0, 0, .3); } .plan--featured.is-selected { box-shadow: 0 0 0 2px var(--lime), 0 30px 60px -24px rgba(0, 0, 0, .6); } .plans__details { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease-out), margin-top .55s var(--ease-out); } .plans__details.is-open { grid-template-rows: 1fr; margin-top: 16px; } .pdet { min-height: 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--white); box-shadow: 0 0 0 1px var(--rule); opacity: 0; transition: opacity .35s; } .plans__details.is-open .pdet { opacity: 1; } .pdet__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px clamp(16px, 2.4vw, 32px); border-bottom: 1px solid var(--rule); } .pdet__tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 8px; background: var(--paper); } .pdet__tabs button { padding: 8px 16px; border-radius: 6px; font-size: .9375rem; font-weight: 560; color: var(--ink-2); transition: background-color .25s, color .25s; } .pdet__tabs button[aria-selected="true"] { background: var(--ink); color: var(--white); } .pdet__close { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--rule); transition: background-color .25s; } .pdet__close svg { width: 18px; height: 18px; transform: rotate(45deg); } .pdet__close:hover { background: var(--paper); } .pdet__panel { padding: clamp(20px, 2.6vw, 36px) clamp(16px, 2.4vw, 32px) clamp(22px, 2.6vw, 34px); } .pdet__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 22px; } .pdet__name { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.01em; } .pdet__price { font-size: var(--fs-small); color: var(--muted); } .pdet__price strong { color: var(--ink); font-weight: 600; } .pdet__price span { display: block; } .pdet__cols { display: grid; gap: 22px; } .pdet__label { margin-bottom: 6px; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .pdet__col p:not(.pdet__label) { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.6; } .pdet__col .plan__list { font-size: var(--fs-small); } .pdet__demo { margin-top: 22px; } @media (min-width: 960px) { .pdet__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } .pdet__price span { display: inline; margin-left: 6px; } } @media (max-width: 599px) { .pdet__tabs button { padding: 7px 11px; font-size: .875rem; } } .plans__cta { display: grid; justify-items: center; gap: 12px; margin-top: clamp(28px, 3vw, 44px); text-align: center; } .plans__cta p { font-size: var(--fs-small); color: var(--muted); } @media (prefers-reduced-motion: reduce) { .plans__details, .pdet, .plan__toggle svg { transition: none; } } /* 1.2 Reporting im Board: echte Achsen, Vorjahresvergleich, Kennzahlen mit Werten */ .kpi strong { font-family: "Cousine", ui-monospace, Menlo, monospace; font-size: 20px; line-height: 1.1; font-weight: 700; color: var(--ink); } .kpi em { background: #e7f8c9; color: #3f6b00; } .kpi__spark { height: 28px; } .rep__grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 10px; margin-top: 10px; } .rep__chart, .rep__side { margin: 0; padding: 12px 14px 10px; border-radius: 8px; background: var(--white); box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); } .rep__ctitle { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; font-weight: 600; } .rep__legend { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--muted); font-size: 11px; } .rep__legend i { width: 14px; height: 0; border-top: 2px solid var(--blue); } .rep__legend i.is-prev { border-top: 2px dashed rgba(0, 0, 0, .3); margin-left: 6px; } .rep__plot { position: relative; height: 150px; margin-left: 38px; } .rep__plot svg { width: 100%; height: 100%; display: block; overflow: visible; } .rep__grid-l { fill: none; stroke: rgba(0, 0, 0, .07); stroke-width: 1; vector-effect: non-scaling-stroke; } .rep__prev { fill: none; stroke: rgba(0, 0, 0, .28); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; } .rep__area { fill: rgba(11, 85, 212, .1); } .rep__line { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .rep__y { position: absolute; left: -38px; width: 32px; translate: 0 -50%; text-align: right; font-family: "Cousine", ui-monospace, Menlo, monospace; font-size: 10px; color: var(--muted); } .rep__dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(11, 85, 212, .2); } .rep__tip { position: absolute; right: 10px; translate: 0 calc(-100% - 12px); padding: 4px 8px; border-radius: 6px; background: var(--ink); color: var(--white); font-size: 11px; font-weight: 600; white-space: nowrap; } .rep__x { display: flex; justify-content: space-between; margin: 6px 0 0 38px; font-size: 10px; color: var(--muted); } .rep__table { width: 100%; border-collapse: collapse; font-size: 12px; } .rep__table th { padding: 0 0 6px; text-align: left; font-weight: 500; color: var(--muted); font-size: 11px; } .rep__table th:not(:first-child), .rep__table td:not(:first-child) { text-align: right; } .rep__table td { padding: 7px 0; border-top: 1px solid rgba(0, 0, 0, .06); font-family: "Cousine", ui-monospace, Menlo, monospace; font-size: 11.5px; } .rep__table td:first-child { font-family: var(--font); font-size: 12px; font-weight: 500; } .rep__table .is-up { color: #3f6b00; font-weight: 700; } .rep__bars { display: grid; gap: 10px; font-size: 12px; } .rep__bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; } .rep__bars i { grid-column: 1 / -1; grid-row: 2; display: block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--blue) var(--w), rgba(0, 0, 0, .06) var(--w)); } .rep__bars b { font-family: "Cousine", ui-monospace, Menlo, monospace; font-size: 11.5px; } @media (max-width: 959px) { .rep__grid { grid-template-columns: 1fr; } .rep__side { display: none; } .rep__plot { height: 110px; } .rep__tip { display: none; } } .cmp thead th .cmp__logo { width: 84px; height: 16px; max-width: none; } @media (max-width: 599px) { .cmp thead th .cmp__logo { width: 60px; height: 12px; } } .voices .voice__photo picture { position: absolute; inset: 0; display: block; } .voices .voice__photo img { position: absolute; inset: 0; } .voice__mark { font-family: var(--font); font-size: 6rem; font-weight: 700; top: 2px; } .cockpit-sec__box .stage--board .toast { top: auto; bottom: 28px; right: 28px; } .rep__tip { right: 0; translate: 0 calc(-100% - 16px); } @media (max-width: 699px) { .voices .voice__photo { position: relative; } } /* ========================================================= Leistungstemplate, Feedback (2026-10-23) ========================================================= */ /* Hero: eine ruhige Spalte statt Text links und Buttons rechts */ .hero__stack { display: grid; gap: 24px; justify-items: start; max-width: 720px; margin-top: clamp(24px, 1.4rem + 1.4vw, 44px); position: relative; z-index: 2; } .hero__stack .hero__lead { max-width: 60ch; } .hero__stack .assure { margin-top: -8px; } .hero__stack .hero__people { margin-top: 4px; } .hero--service .hero__box .stage--board { margin-top: clamp(40px, 2rem + 3vw, 80px); } /* Das Tool: Cockpit-Bild */ .cockpit-sec__box .cockpit { margin-top: 0; } /* Referenzen: Firmenbeschreibung schmaler */ .vsel__panel figcaption small { display: block; max-width: 52ch; margin: 8px auto 0; line-height: 1.55; text-wrap: pretty; } /* FAQ: Demo buchen zuerst, Mail darunter */ .faq__actions { display: grid; justify-items: start; gap: 16px; margin-top: 28px; } .faq__actions .faq__cta, .faq__actions .faq__mail { margin-top: 0; } /* Vier Schritte als Bühne: Glaslogo über die volle Breite, Linien zu den vier Schritten */ .steps-stage { position: relative; color: var(--white); background: #0c56d3; padding-top: var(--section); } .steps-stage .h2 { color: var(--white); } .steps-stage .lead { color: rgba(255, 255, 255, .86); } .steps-stage__sh { margin-bottom: clamp(16px, 2vw, 32px); } .steps-stage__media { position: relative; background: linear-gradient(180deg, #0c56d3 0%, #6f9be4 50%, #d3e1f5 100%); } .steps-stage__media::after { content: ""; display: block; height: clamp(56px, 6vw, 120px); background: linear-gradient(180deg, #d3e1f5, var(--paper)); } .steps-stage__canvas { position: relative; width: min(100%, 1320px); margin-inline: auto; aspect-ratio: 1320 / 760; } .steps-stage__img { position: absolute; left: 50%; top: 0; height: 100%; aspect-ratio: 1164 / 1108; translate: -50% 0; } .steps-stage__img img { width: 100%; height: 100%; object-fit: contain; } .steps-stage__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .steps-stage__lines path { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; } .steps-stage__lines .is-top { stroke: rgba(255, 255, 255, .7); } .steps-stage__lines .is-bot { stroke: rgba(11, 80, 200, .55); } .steps-stage__lines circle.is-top { fill: var(--lime); stroke: var(--white); stroke-width: 2; } .steps-stage__lines circle.is-bot { fill: var(--lime); stroke: #0b50c8; stroke-width: 2; } .steps-stage__list { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; } .sstep { position: absolute; width: 22.7%; display: grid; gap: 8px; } .sstep.is-tl { left: 0; top: 17%; } .sstep.is-bl { left: 0; top: 60.5%; } .sstep.is-tr { right: 0; top: 17%; } .sstep.is-br { right: 0; top: 60.5%; } .sstep__num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--lime); color: var(--ink); font-family: "Cousine", ui-monospace, Menlo, monospace; font-weight: 700; font-size: .9375rem; } .sstep__title { font-size: clamp(1.25rem, 1rem + .7vw, 1.625rem); line-height: 1.15; letter-spacing: -.015em; font-weight: 560; } .sstep p { font-size: var(--fs-small); line-height: 1.55; color: rgba(255, 255, 255, .86); } .sstep__tag { justify-self: start; margin-top: 4px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: .75rem; font-weight: 600; letter-spacing: .02em; } .sstep.is-bl, .sstep.is-br { color: var(--ink); } .sstep.is-bl p, .sstep.is-br p { color: var(--ink-2); } .sstep.is-bl .sstep__tag, .sstep.is-br .sstep__tag { background: rgba(11, 80, 200, .12); color: var(--blue); } .sstep.is-tr, .sstep.is-br { text-align: left; } @media (max-width: 1023px) { .steps-stage__canvas { aspect-ratio: auto; } .steps-stage__img { position: relative; left: auto; translate: none; display: block; width: min(100%, 560px); height: auto; margin: 0 auto; } .steps-stage__lines { display: none; } .steps-stage__list { position: static; display: grid; gap: 14px; padding: 24px var(--gutter) 8px; } .sstep { position: static; width: auto; padding: 18px 20px; border-radius: var(--radius-lg); background: var(--white); color: var(--ink); box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); } .sstep p, .sstep.is-bl p, .sstep.is-br p { color: var(--ink-2); } .sstep__tag, .sstep.is-bl .sstep__tag, .sstep.is-br .sstep__tag { background: rgba(11, 80, 200, .1); color: var(--blue); } } @media (min-width: 640px) and (max-width: 1023px) { .steps-stage__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Verlauf exakt wie im Bild gemessen, Bildränder weich auslaufen lassen */ .steps-stage__media { background: linear-gradient(180deg, #0c56d4 0%, #1e63d7 10%, #3372da 20%, #477fdd 30%, #5b8de2 40%, #709be4 50%, #84a9e8 60%, #98b7ec 70%, #adc6ee 80%, #c1d4f2 90%, #d4e1f6 100%); } .steps-stage__media::after { background: linear-gradient(180deg, #d4e1f6, var(--paper)); } .steps-stage { background: #0c56d4; } .steps-stage__img { -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); } @media (max-width: 1023px) { .steps-stage__img { -webkit-mask: none; mask: none; } } /* Board-Seitenleiste 1:1 wie im echten PROOF-Portal (ohne Kundenauswahl, die sehen nur Administratoren) */ @media (min-width: 960px) { .board__side { gap: 0; padding: 20px 14px 16px; background: linear-gradient(180deg, #1d4fc4 0%, #2557c9 100%); } .snav__brand { display: flex; align-items: center; gap: 7px; padding: 2px 8px 18px; margin-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .12); } .snav__mark { width: 22px; height: 18px; fill: var(--lime); color: var(--lime); } .snav__word { width: 70px; height: 15px; fill: var(--white); } .snav__panel { width: 16px; height: 16px; margin-left: auto; fill: rgba(255, 255, 255, .85); color: rgba(255, 255, 255, .85); } .snav__group { margin: 12px 8px 6px; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .6); } .snav .board__menu { gap: 2px; } .snav .board__menu li { padding: 0; } .snav__item, .snav .board__menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 8px; border-radius: 6px; color: rgba(255, 255, 255, .82); font-weight: 500; font-size: 13.5px; } .snav__item svg, .snav .board__menu button svg { width: 26px; height: 26px; padding: 4px; flex: none; border-radius: 4px; fill: currentColor; color: rgba(255, 255, 255, .72); } .snav .board__menu button.is-active { background: rgba(255, 255, 255, .16); color: var(--white); } .snav .board__menu button.is-active svg { background: #0f43b8; color: var(--lime); } .snav .board__menu button.is-active::after { left: 8px; right: auto; bottom: 2px; width: calc(var(--tour, 0) * (100% - 16px)); } } /* Vier Schritte: durchgehend blau bis zum Sektionsende, alle Texte weiß (Bild mit nachgefärbtem Hintergrund) */ .steps-stage { background: #0c56d4; padding-bottom: clamp(56px, 6vw, 112px); } .steps-stage__media { background: linear-gradient(180deg, #0c56d4 0%, #0b4fc6 45%, #093aa0 100%); } .steps-stage__media::after { display: none; } .steps-stage { background: linear-gradient(180deg, #0c56d4 0, #0c56d4 calc(100% - 200px), #093aa0 calc(100% - 200px)); } .steps-stage__img { -webkit-mask: none; mask: none; } .sstep.is-bl, .sstep.is-br { color: var(--white); } .sstep.is-bl p, .sstep.is-br p { color: rgba(255, 255, 255, .86); } .sstep.is-bl .sstep__tag, .sstep.is-br .sstep__tag { background: rgba(255, 255, 255, .16); color: var(--white); } .steps-stage__lines .is-bot { stroke: rgba(255, 255, 255, .7); } .steps-stage__lines circle.is-bot { stroke: var(--white); } @media (max-width: 1023px) { .sstep, .sstep.is-bl, .sstep.is-br { background: rgba(255, 255, 255, .08); color: var(--white); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); } .sstep p, .sstep.is-bl p, .sstep.is-br p { color: rgba(255, 255, 255, .86); } .sstep__tag, .sstep.is-bl .sstep__tag, .sstep.is-br .sstep__tag { background: rgba(255, 255, 255, .16); color: var(--white); } } .steps-stage__media { background: linear-gradient(180deg, #0c56d4 0%, #0b4cc0 50%, #093aa0 100%); } @media (min-width: 1024px) { .steps-stage__img { -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } } @media (max-width: 1023px) { .steps-stage__media { background: linear-gradient(180deg, #0c56d4 0%, #0b4cc0 50%, #093aa0 100%) 0 0 / 100% min(95.2vw, 533px) no-repeat, #093aa0; } .steps-stage__img { -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } } @media (max-width: 599px) { .steps-stage__img { -webkit-mask: none; mask: none; } } /* ========================================================= Glaslogo (Three.js) und Hintergrund-Mauseffekt (2026-10-23) ========================================================= */ /* Vier Schritte: leichter Verlauf über die ganze Sektion, das WebGL-Bild liegt dahinter */ .steps-stage { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, #0a4ac2 0%, #1659d3 50%, #2f6cdd 100%); } .steps-stage__media { background: none; } .steps-stage__gl { position: absolute; left: 0; top: 0; z-index: -1; display: block; pointer-events: none; opacity: 0; transition: opacity .8s var(--ease-out); } .steps-stage.is-webgl .steps-stage__gl { opacity: 1; } .steps-stage.is-webgl .steps-stage__img { visibility: hidden; } @media (max-width: 1023px) { .steps-stage__media { background: none; } } /* Schrittnummern größer: Glas-Kreis mit Lime-Ziffer */ .sstep__num { width: 58px; height: 58px; margin-bottom: 6px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: var(--lime); font-size: 1.375rem; letter-spacing: .02em; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28), 0 0 0 6px rgba(173, 247, 30, .08), 0 12px 30px -12px rgba(0, 0, 0, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); position: relative; } .sstep__num::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(173, 247, 30, .35); } @media (max-width: 1023px) { .sstep__num { width: 50px; height: 50px; font-size: 1.1875rem; } } /* Kundenstimmen: Licht, Punktraster und Ring folgen der Maus, nur im Hintergrund */ .feature__fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease-out); } .feature.is-fx .feature__fx { opacity: 1; } .fx-glow { position: absolute; inset: 0; background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(140, 190, 255, .38), rgba(90, 150, 255, .14) 40%, transparent 70%); } .fx-grid { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, .55) 1.2px, transparent 1.6px); background-size: 26px 26px; background-position: calc(var(--px, 0px) * .4) calc(var(--py, 0px) * .4); -webkit-mask: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0, 0, 0, .45) 45%, transparent 75%); mask: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0, 0, 0, .45) 45%, transparent 75%); } .fx-ring { position: absolute; left: var(--mx, 50%); top: var(--my, 50%); width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(173, 247, 30, .45), 0 0 40px rgba(173, 247, 30, .12); transition: transform .5s var(--ease-out); } .feature .feature__mark { translate: var(--px, 0px) var(--py, 0px); transition: translate 1.2s var(--ease-out); } /* Dunkle Variante (Leistungsseite) etwas zurückhaltender */ .feature:not(.feature--blue) .fx-glow { background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(64, 128, 255, .32), rgba(40, 100, 230, .12) 40%, transparent 70%); } .feature:not(.feature--blue) .fx-grid { background-image: radial-gradient(circle, rgba(160, 200, 255, .45) 1.2px, transparent 1.6px); } @media (prefers-reduced-motion: reduce) { .feature__fx { display: none; } } /* Leistungsseite Hero: Beschreibung und Vorteile mit mehr Raum, Buttons darunter */ .hero__stack { max-width: 980px; gap: 28px; } .hero__stack .hero__lead { max-width: 72ch; } .hero__stack .assure { margin-top: 0; gap: 10px 28px; } .hero__stack .hero__buttons { margin-top: 4px; } @media (min-width: 1024px) { .hero__stack .assure { flex-wrap: nowrap; } .hero__stack .assure li { white-space: nowrap; } } /* Das Tool: Board ohne Kippen und ohne Benachrichtigung */ .cockpit-sec__box .stage--board .toast { display: none; } /* Banner im Long-Read: Logostruktur als Hintergrund (cover, transparent) */ .prose__demo { position: relative; isolation: isolate; overflow: hidden; } .prose__demo::before { content: ""; position: absolute; z-index: -1; inset: 0; background: url("../img/brand-shape-blue.svg") no-repeat center / cover; opacity: .3; pointer-events: none; } .prose__box { position: relative; isolation: isolate; overflow: hidden; padding: clamp(24px, 2.6vw, 34px) clamp(24px, 2.6vw, 34px); border-radius: var(--radius-lg); background: var(--grain-lime), var(--lime); } .prose__box::before { content: ""; position: absolute; z-index: -1; inset: 0; background: url("../img/brand-shape-dark.svg") no-repeat center / cover; opacity: .1; pointer-events: none; } .prose__box .prose__box-title, .prose__box h3.prose__box-title { color: var(--ink) !important; font-size: 1.125rem; } .prose__box li { color: var(--ink); font-weight: 500; } .prose__box li::before { background: var(--ink); } /* Partikelfeld: Leinwand hinter den Inhalten, immer sichtbar (treibt ruhig), Licht nur bei Maus */ .feature__fx { opacity: 1; } .fx-canvas { position: absolute; inset: 0; display: block; } .fx-glow { opacity: 0; transition: opacity .6s var(--ease-out); } .is-fx .fx-glow { opacity: 1; } .footer { isolation: isolate; } .footer .fx-glow { background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 50%), rgba(173, 247, 30, .07), rgba(120, 160, 255, .06) 40%, transparent 70%); } /* Preis-Hinweise in der Aufklappkachel */ .pdet__foot { display: grid; gap: 8px; padding: 18px clamp(16px, 2.4vw, 32px) 22px; border-top: 1px solid var(--rule); background: var(--paper); font-size: .875rem; line-height: 1.55; color: var(--muted); } /* Liquid Light: Shader-Leinwand ganz unten, Bildmarke und Inhalte darüber */ .feature__fx { z-index: -2; opacity: 1; } .fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .footer.has-liquid { background: #0d0e11; } .footer .feature__fx { z-index: -1; } /* Preis-Hinweise direkt in der Tarif-Ansicht, Legende über dem Demo-Button links */ .pdet__foot { display: none; } .pdet__notes { display: grid; gap: 8px; margin-top: 26px; padding: 16px 18px; border-radius: var(--radius); background: var(--paper); font-size: .875rem; line-height: 1.55; color: var(--muted); } .pdet__notes p { margin: 0; } .plans__cta { justify-items: stretch; } .plans__legend { justify-self: start; display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 10px; font-size: var(--fs-small); color: var(--muted); } .plans__cta .btn, .plans__cta > p:last-child { justify-self: center; } /* Überschriften mit Verlauf: Unterlängen (g, p, y) gehören zur gefärbten Fläche */ .hero--lime .hero__title, .hero--lime .hero__title .line { padding-bottom: .2em; margin-bottom: -.2em; } /* Schrittnummern: groß und editorial, Lime-Verlauf, dezente Gesamtzahl */ .sstep__num, .sstep__num::after { all: unset; } .sstep__num { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; font-family: "Cousine", ui-monospace, Menlo, monospace; font-weight: 700; line-height: 1; } .sstep__num b { font-size: clamp(2.5rem, 1.6rem + 1.8vw, 3.5rem); letter-spacing: -.04em; background: linear-gradient(180deg, #e9ffb0 0%, #adf71e 70%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: .08em; text-shadow: none; filter: drop-shadow(0 6px 18px rgba(173, 247, 30, .28)); } .sstep__num i { font-style: normal; font-size: .875rem; color: rgba(255, 255, 255, .5); letter-spacing: .04em; } /* Körnung in der Terminbuchung: hinter Text und Kalender */ .book__stage > .feature__fx { z-index: -1; } .book__stage > :not(.feature__fx) { position: relative; } /* Vier Schritte in Dark Green (Markenfarbe), Logo mit der Maus drehbar */ .steps-stage { background: linear-gradient(180deg, #0f1700 0%, #182101 50%, #243203 100%); } .steps-stage.is-grab { cursor: grab; } .steps-stage.is-grabbing { cursor: grabbing; user-select: none; } .steps-stage .lead { color: rgba(242, 242, 242, .78); } .sstep p, .sstep.is-bl p, .sstep.is-br p { color: rgba(242, 242, 242, .78); } .sstep__tag, .sstep.is-bl .sstep__tag, .sstep.is-br .sstep__tag { background: rgba(173, 247, 30, .12); color: var(--lime); } .steps-stage__lines .is-top, .steps-stage__lines .is-bot { stroke: rgba(173, 247, 30, .45); } .steps-stage__lines circle.is-top, .steps-stage__lines circle.is-bot { fill: var(--lime); stroke: #182101; } .sstep__num i { color: rgba(242, 242, 242, .45); } @media (max-width: 1023px) { .steps-stage__media { background: radial-gradient(60% 50% at 50% 30%, rgba(173, 247, 30, .14), transparent 70%); } .sstep, .sstep.is-bl, .sstep.is-br { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(173, 247, 30, .16); } } /* ========================================================= Ratgeber: Suche + Bereiche, CTA-Band mit gestapelten Buttons (2026-10-23) ========================================================= */ .gfilter { display: none; } .gbar { position: sticky; top: calc(var(--header-h) + 12px); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .82); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 0 0 1px var(--rule), 0 18px 40px -28px rgba(6, 37, 88, .35); } .gsearch { position: relative; flex: 1 1 320px; display: flex; align-items: center; min-width: 0; } .gsearch > svg { position: absolute; left: 16px; width: 19px; height: 19px; color: var(--muted); pointer-events: none; } .gsearch input { width: 100%; height: 50px; padding: 0 46px 0 46px; border: 0; border-radius: 10px; background: var(--paper); font: inherit; font-size: 1rem; color: var(--ink); outline: none; box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .25s, background-color .25s; -webkit-appearance: none; appearance: none; } .gsearch input::placeholder { color: #8a8c86; } .gsearch input:focus { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--blue), 0 0 0 4px rgba(11, 80, 200, .12); } .gsearch input::-webkit-search-cancel-button { display: none; } .gsearch__clear { position: absolute; right: 8px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--muted); transition: background-color .2s; } .gsearch__clear svg { width: 16px; height: 16px; transform: rotate(45deg); } .gsearch__clear:hover { background: rgba(16, 17, 20, .07); color: var(--ink); } .gtabs { display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--paper); overflow-x: auto; scrollbar-width: none; } .gtabs::-webkit-scrollbar { display: none; } .gtab { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 7px; font-size: .9375rem; font-weight: 560; color: var(--ink-2); transition: background-color .25s, color .25s, box-shadow .25s; } .gtab b { display: grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 11px; background: rgba(16, 17, 20, .07); font-family: "Cousine", ui-monospace, Menlo, monospace; font-size: .75rem; font-weight: 700; color: var(--muted); transition: inherit; } .gtab:hover { color: var(--ink); background: rgba(255, 255, 255, .7); } .gtab[aria-pressed="true"] { background: var(--white); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 12px -6px rgba(6, 37, 88, .3); } .gtab[aria-pressed="true"] b { background: var(--lime); color: var(--ink); } .gtab:focus-visible, .gsearch__clear:focus-visible, .gstatus__reset:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .gstatus { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-bottom: 24px; } .gstatus .gfilter__count { margin: 0; font-size: var(--fs-small); color: var(--muted); } .gstatus__reset { font-size: var(--fs-small); font-weight: 560; color: var(--blue); } .gstatus__reset:hover { text-decoration: underline; text-underline-offset: 3px; } .gempty { display: grid; justify-items: center; gap: 8px; padding: 56px 20px; border-radius: var(--radius-lg); background: var(--white); box-shadow: 0 0 0 1px var(--rule); text-align: center; color: var(--muted); } .gempty[hidden] { display: none; } .gempty__title { font-size: 1.25rem; font-weight: 600; color: var(--ink); } .gempty .link-arrow { margin-top: 8px; } @media (max-width: 767px) { .gbar { top: calc(var(--header-h) + 8px); padding: 8px; gap: 8px; } .gsearch { flex-basis: 100%; } .gsearch input { height: 46px; } .gtabs { width: 100%; } .gtab { height: 38px; padding: 0 12px; } } /* CTA-Band: Text links mit Platz, Buttons rechts untereinander */ .ctaband__actions--stack { display: grid; gap: 14px; justify-items: stretch; min-width: 280px; } .ctaband__actions--stack .btn { width: 100%; min-width: 0; } .ctaband__actions--stack .link-arrow { justify-self: center; } @media (min-width: 960px) { .ctaband { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; } .ctaband__copy p { max-width: 60ch; } } .gsearch__clear[hidden], .gstatus__reset[hidden] { display: none; } @media (max-width: 767px) { .gtabs { -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); padding-right: 28px; } } /* Auszeichnungen als Slider in der weißen Kalenderbox: drei sichtbar */ .cal__awards { position: relative; overflow: hidden; border-top: 1px solid var(--rule); padding: 18px 0 20px; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .awards__track { display: flex; margin: 0; padding: 0; list-style: none; will-change: transform; } .awards__item { flex: none; width: 33.333%; display: grid; place-items: center; padding: 0 12px; } .awards__item img { height: 58px; width: auto; max-width: 100%; object-fit: contain; filter: brightness(0); opacity: .62; transition: opacity .3s; } .cal__awards:hover .awards__item img { opacity: .8; } @media (max-width: 599px) { .awards__item img { height: 44px; } } @media (min-width: 1024px) { .book__stage > .book__copy { align-self: center; } } /* ========================================================= Mobile-Feinschliff (2026-10-23) ========================================================= */ /* Vergleichstabellen mobil: jedes Kriterium als Karte, Anbieter mit Namen direkt am Symbol */ @media (max-width: 767px) { .table-scroll { overflow: visible; margin: 0; padding: 0; } .table-scroll .cmp, .table-scroll .cmp tbody, .table-scroll .cmp tr { display: block; width: 100%; min-width: 0; } .table-scroll .cmp thead { display: none; } .table-scroll .cmp tbody tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: 10px; padding: 16px 12px 14px; border-radius: var(--radius-lg); background: var(--white); box-shadow: 0 0 0 1px var(--rule); } .table-scroll .cmp tbody th { grid-column: 1 / -1; position: static; width: auto; padding: 0 4px 14px; border: 0; background: none; font-size: .9375rem; font-weight: 600; line-height: 1.35; text-align: left; } .table-scroll .cmp td { position: relative; display: grid; justify-items: center; gap: 7px; padding: 10px 2px 4px; border: 0; border-top: 1px solid var(--rule); background: none !important; border-radius: 0 !important; } .table-scroll .cmp td::after { content: attr(data-label); font-size: .6875rem; line-height: 1.2; color: var(--muted); text-align: center; hyphens: auto; } .table-scroll .cmp td.cmp__us { border-top-color: var(--lime); } .table-scroll .cmp td.cmp__us::after { color: var(--ink); font-weight: 700; } .table-scroll .cmp td.cmp__us::before { content: ""; position: absolute; inset: 0 3px -4px; z-index: -1; border-radius: 0 0 8px 8px; background: rgba(173, 247, 30, .28); } .table-scroll .cmp tbody tr { isolation: isolate; } .table-scroll .cmp svg { width: 20px; height: 20px; } .cmp__legend { gap: 8px 16px; font-size: .8125rem; } } /* Vier Schritte mobil: Bild weich eingebettet, Schritte als wischbare Karten */ @media (max-width: 1023px) { .steps-stage { padding-bottom: 56px; } .steps-stage__media { background: none; } .steps-stage__img { width: min(78%, 420px); -webkit-mask: radial-gradient(70% 68% at 50% 50%, #000 62%, transparent 100%); mask: radial-gradient(70% 68% at 50% 50%, #000 62%, transparent 100%); } .steps-stage__list { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: 20px var(--gutter) 8px; scrollbar-width: none; } .steps-stage__list::-webkit-scrollbar { display: none; } .sstep, .sstep.is-bl, .sstep.is-br { flex: none; width: min(82vw, 360px); scroll-snap-align: start; padding: 22px 22px 20px; } .steps-stage__dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; } .steps-stage__dots i { width: 22px; height: 3px; border-radius: 2px; background: rgba(242, 242, 242, .22); transition: background-color .3s, width .3s; } .steps-stage__dots i.is-on { width: 34px; background: var(--lime); } } @media (min-width: 640px) and (max-width: 1023px) { .steps-stage__list { display: flex; } } @media (min-width: 1024px) { .steps-stage__dots { display: none; } } /* Kalender: weniger Leerraum unter der Zeitzone */ .cal__mock { min-height: 0; } .cm__pane { padding-bottom: 22px; } .cm__tz { margin-top: 20px; } /* Auszeichnungen: vier sichtbar */ .awards__item { width: 25%; padding: 0 8px; } .awards__item img { height: 52px; } @media (max-width: 599px) { .awards__item img { height: 38px; } .awards__item { padding: 0 5px; } } /* Autorenbox Ratgeber: große Bühne in Dark Green, Porträt, Zitat und Fakten */ .author2 { position: relative; isolation: isolate; overflow: hidden; display: grid; border-radius: var(--radius-lg); color: var(--white); background: var(--grain-dark), linear-gradient(160deg, #243203 0%, #182101 55%, #0f1700 100%); box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .6); } .author2__mark { position: absolute; z-index: -1; inset: 0; background: url("../img/brand-shape-lime.svg") no-repeat 110% 40% / 70% auto; opacity: .1; pointer-events: none; } .author2__media { position: relative; margin: 0; min-height: 320px; overflow: hidden; } .author2__media picture, .author2__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; } .author2__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(15, 23, 0, .65) 100%); } .author2__badge { position: absolute; z-index: 1; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--lime); color: var(--ink); font-size: .8125rem; font-weight: 600; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); } .author2__badge svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--ink); color: var(--lime); } .author2__copy { display: flex; flex-direction: column; gap: 6px; padding: clamp(28px, 4vw, 56px); } .author2__label { font-family: "Cousine", ui-monospace, Menlo, monospace; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lime); } .author2__name { margin-top: 6px; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1.05; font-weight: 600; letter-spacing: -.02em; } .author2__role { font-size: var(--fs-small); color: rgba(242, 242, 242, .7); } .author2__text { position: relative; margin: 22px 0 0; padding-left: 22px; border-left: 2px solid var(--lime); } .author2__text p { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.55; color: rgba(242, 242, 242, .92); } .author2__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; } .author2__facts li { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--radius); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(173, 247, 30, .14); } .author2__facts strong { font-family: "Cousine", ui-monospace, Menlo, monospace; font-size: 1.25rem; line-height: 1.1; color: var(--lime); } .author2__facts span { font-size: .8125rem; line-height: 1.35; color: rgba(242, 242, 242, .7); } .author2__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; } .author2__meta { font-size: .8125rem; color: rgba(242, 242, 242, .6); } @media (min-width: 860px) { .author2 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .author2__media { min-height: 100%; } } @media (max-width: 599px) { .author2__media { min-height: 0; aspect-ratio: 4 / 3.6; } .author2__facts { grid-template-columns: 1fr 1fr; } .author2__facts li:last-child { grid-column: 1 / -1; } } .author-sec { padding-bottom: var(--section); } .author-sec .author { display: none; } /* Vier Schritte mobil: Bildränder komplett auslaufen lassen */ @media (max-width: 1023px) { .steps-stage__img { -webkit-mask: radial-gradient(closest-side, #000 72%, transparent 100%); mask: radial-gradient(closest-side, #000 72%, transparent 100%); } } /* Autorenzeile im Ratgeber-Hero: blauer Rahmen wie bei den Teambildern */ .byline img { border: 3px solid var(--blue); box-shadow: 0 6px 14px -8px rgba(11, 80, 200, .6); } .author2__badge svg { fill: var(--lime); } .author2 { min-width: 0; max-width: 100%; } .author2 > * { min-width: 0; } @media (max-width: 599px) { .author2__actions .btn { width: 100%; min-width: 0; } .author2__facts strong { font-size: 1.0625rem; } } /* Autorenbox in Blau, Porträt rechts */ .author2 { background: var(--grain-dark), linear-gradient(160deg, #3e82e4 0%, #1660d4 50%, #0b50c8 100%); box-shadow: 0 40px 80px -50px rgba(6, 37, 88, .7); } .author2__mark { background-image: url("../img/brand-shape-blue.svg"); opacity: .28; background-position: -10% 40%; } .author2__media::after { background: linear-gradient(180deg, transparent 55%, rgba(6, 37, 88, .55) 100%); } .author2__text p, .author2__role, .author2__meta { color: rgba(255, 255, 255, .88); } .author2__role, .author2__meta { color: rgba(255, 255, 255, .72); } @media (min-width: 860px) { .author2 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .author2__media { order: 2; } .author2__copy { order: 1; } } /* Autorenbox: Porträt vollständig, im Farbverlauf des Fotos eingebettet (kein Anschnitt, keine Kante) */ .author2 { background: var(--grain-dark), linear-gradient(180deg, #3a80dd 0%, #2770d3 50%, #0d5fbe 100%); } .author2__media::after { display: none; } .author2__media picture { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-end; } .author2__media img { position: static; width: auto; height: 100%; max-width: none; object-fit: contain; object-position: 50% 100%; -webkit-mask: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 8%, #000 100%); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 8%, #000 100%); mask-composite: intersect; } .author2__badge { left: 50%; translate: -50% 0; bottom: 20px; } @media (min-width: 860px) { .author2 { grid-template-columns: minmax(0, 1fr) clamp(300px, 34%, 420px); } .author2__media { min-height: 0; } .author2__media picture { justify-content: flex-end; } .author2__media img { -webkit-mask: linear-gradient(90deg, transparent 0%, #000 30%, #000 100%), linear-gradient(180deg, transparent 0%, #000 6%, #000 100%); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent 0%, #000 30%, #000 100%), linear-gradient(180deg, transparent 0%, #000 6%, #000 100%); mask-composite: intersect; } .author2__badge { left: auto; right: 24px; translate: none; } } @media (max-width: 859px) { .author2__media { min-height: 0; height: 340px; aspect-ratio: auto; } } /* Autorenbox: freigestelltes Porträt steht auf der Unterkante */ .author2__media { overflow: visible; } .author2__media picture { inset: 0; display: flex; align-items: flex-end; justify-content: center; } .author2__media img { height: auto; width: auto; max-height: calc(100% - 24px); max-width: 100%; -webkit-mask: none !important; mask: none !important; filter: drop-shadow(0 24px 40px rgba(6, 30, 90, .35)); } .author2__media::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 80%; height: 70%; translate: -50% 0; border-radius: 50% 50% 0 0 / 60% 60% 0 0; background: radial-gradient(closest-side, rgba(173, 247, 30, .28), rgba(173, 247, 30, .08) 55%, transparent 100%); filter: blur(8px); pointer-events: none; } @media (min-width: 860px) { .author2__media { min-height: 0; } .author2__media picture { justify-content: center; } .author2__media img { max-height: calc(100% - 28px); } .author2__badge { right: auto; left: 18px; translate: none; bottom: 22px; } } @media (max-width: 859px) { .author2__media { height: 320px; } .author2__badge { left: 18px; translate: none; } } /* Schultern seitlich weich auslaufen lassen, Unterkante steht hart auf dem Boxrand */ .author2__media img { -webkit-mask: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%) !important; mask: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%) !important; } .author2__media::before { bottom: 0; } /* Mobil: Text zuerst, Porträt steht unten auf der Kartenkante */ @media (max-width: 859px) { .author2__copy { order: 1; padding-bottom: 8px; } .author2__media { order: 2; height: 300px; } .author2__badge { left: auto; right: 18px; } } /* Autorenbox: Porträt links, Inhalt rechts */ @media (min-width: 860px) { .author2 { grid-template-columns: clamp(300px, 34%, 420px) minmax(0, 1fr); } .author2__media { order: 1; } .author2__copy { order: 2; } .author2__badge { left: 18px; right: auto; } .author2__mark { background-position: 110% 40%; } } /* ========================================================= Mindestschriftgrößen (2026-10-23) Fließtext und Beschreibungen ≥ 16 px · Sekundärtext und Hinweise ≥ 14 px · kurze Labels, Badges und Zähler ≥ 12–13 px · Software-Ansichten (Illustration) ≥ 11 px ========================================================= */ /* Fließtext und mehrzeilige Beschreibungen: 16 px */ .voices .voice__about, .vsel__panel figcaption small, .bento__body p, .plan__for, .pdet__col p:not(.pdet__label), .plan__list li, .perk p, .sstep p, .guide__text, .step p, .rel__body, .faq__a p, .ccard__body p, .story__body, .author2__text p, .answer p:last-child, .prose__note p:last-child, .book__lead, .footer__text { font-size: 1rem; line-height: 1.6; } .voices .voice__about { line-height: 1.55; } /* Sekundärtext: 14 px */ .plan__unit, .plan__unit small, .plan__year, .plan__year span, .plan__save, .dock__text span, .prose__demo small, .author2__meta, .author2__role, .pdet__notes, .pdet__price, .voice__who span, .prose__facts dt, .cmp__legend, .cmp__legend span, .tags li, .gstatus .gfilter__count, .gstatus__reset, .plans__cta p, .plans__legend, .book__steps small, .book__team span, .hero__people p, .crumbs, .footer__bottom, .mega__links a, .rep__note span { font-size: max(14px, 1em); } .plan__unit small, .plan__year span, .tags li, .cmp__legend span { font-size: .875rem; } .btn--sm, .site-header__cta { --s: .78px; } /* Kurze Labels und Badges: mindestens 12–13 px */ .pdet__label, .sstep__tag, .author2__badge, .guide__cat, .plan__badge, .answer__title, .prose__note-title { font-size: .8125rem; } .author2__badge { font-size: .875rem; } @media (max-width: 767px) { .table-scroll .cmp td::after { font-size: .75rem; } } /* Software-Ansichten: nichts unter 11 px */ .rep__y, .rep__x span { font-size: 11px; } .cm__ribbon span { font-size: 9px; } .crew p span, .crew span { font-size: .9375rem; line-height: 1.5; } /* Startseite Kundenstimmen: Bildmarke im Hintergrund deutlicher */ .feature--blue .feature__mark { opacity: .34; } .feature--blue .feature__mark { background-image: url("../img/brand-shape-light.svg"); opacity: .2; } .feature--blue .feature__mark { opacity: .26; } /* Footer: großes Logo vollständig, ohne Anschnitt links und rechts */ .footer .footer__word { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--max)); margin: 32px auto -1.6vw; display: block; } /* Footer-Wortmarke: exakt von Kante zu Kante, nicht darüber hinaus */ .footer .footer__word { width: 100%; max-width: none; margin: 32px 0 -1.6vw; } /* Aufzählungen im Long-Read: PROOF-Bildmarke als Bullet */ .prose__list li::before, .prose > ul > li::before, .prose__box li::before { content: ""; position: absolute; left: 0; top: .42em; width: 15px; height: 12px; border: 0; border-radius: 0; transform: none; background: var(--blue); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2033.35%2026.87%22%3E%3Cpath%20d%3D%22M22.1469%2010.1999L16.6744%2018.4085L11.202%2010.1999H0C0%2019.4106%207.46362%2026.8743%2016.6744%2026.8743C25.8852%2026.8743%2033.3488%2019.4106%2033.3488%2010.1999H22.1469Z%22/%3E%3Cpath%20d%3D%22M28.9482%200H4.40498L11.202%2010.1999H22.1469L28.9482%200Z%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2033.35%2026.87%22%3E%3Cpath%20d%3D%22M22.1469%2010.1999L16.6744%2018.4085L11.202%2010.1999H0C0%2019.4106%207.46362%2026.8743%2016.6744%2026.8743C25.8852%2026.8743%2033.3488%2019.4106%2033.3488%2010.1999H22.1469Z%22/%3E%3Cpath%20d%3D%22M28.9482%200H4.40498L11.202%2010.1999H22.1469L28.9482%200Z%22/%3E%3C/svg%3E") center / contain no-repeat; } .prose__list li, .prose > ul > li { padding-left: 28px; } .prose__box li { padding-left: 26px; } .prose__box li::before { background: var(--ink); top: .4em; } .prose li::marker { content: ""; } /* Vier Schritte: Linien mit Abstand zum Text, zeichnen sich ein, danach läuft ein feiner Lichtpunkt */ .steps-stage__lines path { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.2s var(--ease-out); } .steps-stage__lines circle { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); transition: opacity .4s, transform .5s var(--ease-out); } .steps-stage.is-drawn .steps-stage__lines path:not(.sl-run) { stroke-dashoffset: 0; } .steps-stage.is-drawn .steps-stage__lines circle { opacity: 1; transform: scale(1); transition-delay: .9s; } .steps-stage__lines .sl-run { stroke: var(--lime); stroke-width: 2; stroke-dasharray: 8 92; stroke-dashoffset: 108; opacity: 0; transition: none; } .steps-stage.is-drawn .steps-stage__lines .sl-run { opacity: .9; animation: sl-run 3.6s 1.4s cubic-bezier(.45, 0, .2, 1) infinite; } .steps-stage.is-drawn .steps-stage__lines .sl-run:nth-of-type(4) { animation-delay: 2.3s; } .steps-stage.is-drawn .steps-stage__lines .sl-run:nth-of-type(6) { animation-delay: 1.85s; } .steps-stage.is-drawn .steps-stage__lines .sl-run:nth-of-type(8) { animation-delay: 2.75s; } @keyframes sl-run { 0% { stroke-dashoffset: 108; } 55%, 100% { stroke-dashoffset: 0; } } .steps-stage.is-drawn .steps-stage__lines circle { animation: sl-dot 3.6s 2.3s ease-in-out infinite; } @keyframes sl-dot { 0%, 45%, 100% { r: 5; } 55% { r: 7; } } @media (prefers-reduced-motion: reduce) { .steps-stage__lines path, .steps-stage__lines circle { transition: none; stroke-dashoffset: 0; opacity: 1; transform: none; } .steps-stage__lines .sl-run { display: none; } .steps-stage.is-drawn .steps-stage__lines circle { animation: none; } } /* ========================================================= Karussell-Steuerung im PROOF-Look (2026-10-23) ========================================================= */ /* Pfeil-Knöpfe: Bildmarken-Look, Hover in Lime */ .round-btn { position: relative; overflow: hidden; isolation: isolate; border: 1.5px solid var(--rule); } .round-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--lime); transform: scale(0); transition: transform .45s var(--ease-out); } .round-btn:hover { background: var(--white); color: var(--ink); border-color: var(--lime); } .round-btn:hover::before { transform: scale(1); } .round-btn:hover svg { animation: rb-nudge .6s var(--ease-out); } .round-btn[data-prev]:hover svg { animation-name: rb-nudge-l; } @keyframes rb-nudge { 0% { translate: 0 0; } 40% { translate: 5px 0; } 100% { translate: 0 0; } } @keyframes rb-nudge-l { 0% { translate: 0 0; } 40% { translate: -5px 0; } 100% { translate: 0 0; } } .feature--blue .round-btn:hover { background: var(--white); border-color: var(--lime); color: var(--ink); } /* Fortschritt: aktive Segmente in Lime auf Blau, Blau auf Hell */ .progress i::after { background: var(--blue); } .feature--blue .progress i::after { background: var(--lime); } @media (prefers-reduced-motion: reduce) { .round-btn:hover svg { animation: none; } } /* Handy-Kachel mobil: nur der obere Teil des Handys mit Uhrzeit und Pushs, unten weich ausgeblendet */ @media (max-width: 1023px) { .bento__tile--phone .phone3-stage { min-height: 0; height: 330px; place-items: start center; padding-top: 28px; overflow: hidden; -webkit-mask: linear-gradient(180deg, #000 72%, transparent 100%); mask: linear-gradient(180deg, #000 72%, transparent 100%); } .bento__tile--phone .phone3 { width: min(250px, 72%); } } @media (max-width: 599px) { .bento__tile--phone .phone3-stage { height: 300px; } } /* Mobil: Uhr kompakter, damit die Pushs im sichtbaren Ausschnitt liegen */ @media (max-width: 1023px) { .bento__tile--phone .phone3-stage { height: 360px; -webkit-mask: linear-gradient(180deg, #000 80%, transparent 100%); mask: linear-gradient(180deg, #000 80%, transparent 100%); } .bento__tile--phone .phone3__date { margin-top: 14px; } .bento__tile--phone .phone3__time { font-size: 2.5rem; } .bento__tile--phone .phone3__stack { margin-top: 14px; } } @media (max-width: 599px) { .bento__tile--phone .phone3-stage { height: 340px; } } /* ========================================================= Buchung Variante B: Ablauf-Animation statt Calendly (2026-10-23) ========================================================= */ .book--b { padding-top: 24px; } .flowbox .cal__head { flex-wrap: wrap; } .cal__cta { margin-left: auto; } .flow { padding: 18px 22px 22px; } .flow__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; } .flow__steps li { display: grid; gap: 6px; justify-items: start; font-size: .8125rem; font-weight: 600; color: var(--muted); transition: color .3s; } .flow__steps li::before { content: ""; width: 100%; height: 3px; border-radius: 2px; background: var(--rule); } .flow__steps li span { display: none; } .flow__steps li.is-on { color: var(--ink); } .flow__steps li.is-on::before { background: var(--blue); } .flow__steps li.is-done::before { background: var(--lime); } .flow__stage { position: relative; height: 300px; overflow: hidden; border-radius: var(--radius); background: var(--paper); } .flow__scene { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 14px; padding: 20px; opacity: 0; } .flow__title { font-size: .9375rem; font-weight: 600; color: var(--ink); } .flow__cal { display: grid; grid-template-columns: repeat(5, 46px); gap: 8px; justify-items: center; } .flow__cal b { font-size: .75rem; font-weight: 600; color: var(--muted); } .flow__cal i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-style: normal; font-size: .9375rem; color: #9a9c95; } .flow__cal i.is-free { background: rgba(11, 80, 200, .08); color: var(--blue); font-weight: 700; } .flow__cal i.flow__pick.is-picked { background: var(--blue); color: var(--white); } .flow__slots { display: grid; gap: 8px; width: min(100%, 260px); margin: 0; padding: 0; list-style: none; } .flow__slots li { display: grid; place-items: center; height: 44px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgba(11, 80, 200, .35); background: var(--white); color: var(--blue); font-weight: 700; font-size: .9375rem; } .flow__slots li.flow__pick.is-picked { background: var(--blue); color: var(--white); box-shadow: none; } .flow__mail, .flow__call { display: flex; align-items: center; gap: 14px; width: min(100%, 360px); padding: 18px; border-radius: var(--radius-lg); background: var(--white); box-shadow: 0 0 0 1px var(--rule), 0 18px 36px -22px rgba(6, 37, 88, .4); } .flow__mail p, .flow__call p { display: grid; gap: 2px; flex: 1; font-size: .875rem; color: var(--muted); line-height: 1.4; } .flow__mail strong, .flow__call strong { font-size: 1rem; color: var(--ink); } .flow__mailicon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(11, 80, 200, .1); color: var(--blue); } .flow__mailicon svg { width: 24px; height: 24px; } .flow__ok { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--lime); color: var(--ink); } .flow__ok svg { width: 18px; height: 18px; } .flow__call img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 3px solid var(--blue); } .flow__live { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: .75rem; font-weight: 600; } .flow__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); animation: flow-pulse 1.2s ease-in-out infinite; } @keyframes flow-pulse { 50% { opacity: .3; } } .flow__cursor { position: absolute; left: 0; top: 0; width: 24px; height: 24px; z-index: 3; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .3)); opacity: 0; pointer-events: none; } @media (max-width: 599px) { .flow { padding: 14px 14px 18px; } .flow__stage { height: 270px; } .flow__cal { grid-template-columns: repeat(5, 40px); gap: 6px; } .flow__cal i { width: 38px; height: 38px; } .flow__steps li { font-size: .75rem; } .cal__cta { margin-left: 0; width: 100%; } } @media (prefers-reduced-motion: reduce) { .flow__live i { animation: none; } } .cal__head .cal__cta .btn__label { color: #fcfcf9; font-size: inherit; } .flow__scene--mail .flow__mail p span, .flow__call p span { white-space: normal; } /* Demo-Button: rechts neben dem Text, wenn er nicht passt, linksbündig darunter */ .flowbox .cal__head p { flex: 1 1 220px; } .flowbox .cal__cta { margin-left: 0; width: auto; } @media (max-width: 599px) { .flowbox .cal__cta { width: auto; margin-left: 60px; } } @media (max-width: 599px) { .flowbox .cal__cta { margin-left: 0; } } .book--b { padding-top: var(--section); } /* Vier Schritte und Story: Schwarz mit leichtem Verlauf ins Grau (wie der Footer) statt Dark Green */ .steps-stage { background: var(--grain-dark), linear-gradient(180deg, #0b0c0f 0%, #15171b 55%, #26292f 100%); } .story { background: var(--grain-dark), linear-gradient(180deg, #0b0c0f 0%, #15171b 60%, #24272d 100%); } .steps-stage .lead, .sstep p, .sstep.is-bl p, .sstep.is-br p { color: rgba(242, 242, 242, .75); } .steps-stage__lines circle.is-top, .steps-stage__lines circle.is-bot { stroke: #15171b; } @media (max-width: 1023px) { .sstep, .sstep.is-bl, .sstep.is-br { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); } } /* Vier Schritte: ganz schwarz, ohne Verlauf */ .steps-stage { background: var(--grain-dark), #08090b; } .steps-stage__lines circle.is-top, .steps-stage__lines circle.is-bot { stroke: #08090b; } /* ========================================================= Brücke zum rankeffect-Theme (2026-10-23) ========================================================= */ :root { --pf-sans: "Work Sans", "Helvetica Neue", Arial, sans-serif; } /* Die alten Heros (Leistungsseiten, Start, Preise …) tragen ihren Abstand zum Header selbst (156 u); der neue Header ist sticky im Fluss, also laufen sie wie die Lime-Fläche des Prototyps dahinter. */ .pf-main > .pf-block:first-child { margin-top: calc(-1 * var(--header-h)); } html.is-cal-open { overflow: hidden; } /* Alte Blöcke: Listen behalten ihre eigenen Zeichen, der globale Reset des Prototyps gilt dort nicht */ .pf-block :where(ul, ol):not([class]) { list-style: revert; padding-left: revert; } /* Ratgeber: Zitate im Artikel */ .prose blockquote { margin: 28px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--lime); font-size: 1.125rem; line-height: 1.55; color: var(--ink); font-weight: 500; } .prose blockquote p { margin-bottom: 0; color: inherit; } .prose blockquote cite { display: block; margin-top: 8px; font-size: .875rem; font-style: normal; color: var(--muted); } /* Kennzahlen-Block (proof/article-stats) im neuen Artikel */ .prose .pf-article-stats { margin: 28px 0; } /* Sticky-CTA der Live-Seite bleibt (chrome.css), aber über der Buchungsbühne verborgen wie das Dock */ /* Reset des alten Themes (assets/css/reset.css, theme.css von Hello Elementor) neutralisieren, wo er die Prototyp-Bausteine trifft: Header-Breite, Knöpfe, Tabellen. */ header.site-header:not(.dynamic-header) { max-width: none; width: 100%; padding-inline: 0; margin: 0; } :is(.site-header, .mobilnav, .gbar, .gstatus, .gempty, .faq, .flow, .cal, .plans, .pdet, .vsel) :is(button, [type="button"], [type="submit"]) { background: none; border: 0; border-radius: 0; color: inherit; padding: 0; font: inherit; width: auto; white-space: normal; } :is(.site-header, .mobilnav, .gbar, .gstatus, .gempty, .faq, .flow, .cal) :is(button, [type="button"]):is(:hover, :focus) { background: none; color: inherit; text-decoration: none; } .gtab[aria-pressed="true"], .gtab[aria-pressed="true"]:hover { background: var(--white); color: var(--ink); } .gtab:hover { background: rgba(255, 255, 255, .7); color: var(--ink); } .gsearch__clear:hover { background: rgba(16, 17, 20, .07); color: var(--ink); } .gstatus__reset { color: var(--blue); } .mobilnav__group summary { list-style: none; } .cmp, .cmp td, .cmp th { border-left: 0; border-right: 0; border-top: 0; } .cmp thead th { border-bottom: 1px solid var(--ink); padding: 22px 16px 18px; } .cmp td, .cmp th { padding: 18px 16px; vertical-align: middle; line-height: 1.5; } .cmp tbody > tr:nth-child(odd) > td, .cmp tbody > tr > td:hover, .cmp tbody tr:hover > td { background: transparent; } .cmp tbody > tr:nth-child(odd) > th, .cmp tbody tr:hover > th { background: var(--paper); } .cmp tbody > tr:nth-child(odd) > td.cmp__us, .cmp tbody tr:hover > td.cmp__us { background: rgba(173, 247, 30, .32); } .cmp { margin-block-end: 0; font-size: var(--fs-small); } .prose h2, .prose h3, .h2, .hero__title, .guide__title, .rel__title, .sstep__title, .author2__name { margin-block: 0; } .prose p { margin-block-start: 0; } .faq summary::-webkit-details-marker { display: none; } /* Breadcrumb auf den Leistungsseiten: wie im Prototyp (nav.crumbs), zentriert im alten Hero */ .pf-hfeat .crumbs { position: relative; z-index: 1; margin-bottom: calc(28 * var(--pf-u)); } .pf-hfeat .crumbs ol { justify-content: center; } .pf-sticky.is-blocked { opacity: 0 !important; pointer-events: none; transition: opacity .3s; } .faq__head .lead { margin-top: 24px; } /* Langes Inhaltsverzeichnis (z. B. 14 Kapitel): scrollt in sich, statt unten abgeschnitten zu werden */ @media (min-width: 1024px) { .toc { max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; scrollbar-width: thin; } } /* Faktenseite und andere Artikel im Guide-Layout: Definitionsliste, Lead und Prüfzeile */ .prose dl.data-grid { display: grid; grid-template-columns: minmax(0, 12em) minmax(0, 1fr); gap: 10px 24px; margin: 18px 0 32px; padding: 24px; border-radius: var(--radius-lg); background: var(--white); box-shadow: 0 0 0 1px var(--rule); } .prose dl.data-grid dt { margin: 0; padding-top: 2px; font-family: "Cousine", ui-monospace, Menlo, monospace; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .prose dl.data-grid dd { margin: 0; color: var(--ink-2); } .prose p.lead-definition { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); } .prose p.review-notice { font-family: "Cousine", ui-monospace, Menlo, monospace; font-size: .8125rem; letter-spacing: .04em; color: var(--muted); } @media (max-width: 767px) { .prose dl.data-grid { grid-template-columns: 1fr; gap: 4px 0; } .prose dl.data-grid dd { margin-bottom: 10px; } } /* Navigation: der Reset oben trifft auch den Mega-Menü-Knopf; hier wieder wie im Prototyp */ .site-header .nav__link, .site-header .nav__trigger { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 6px; font-size: .9688rem; font-weight: 500; line-height: 1.6; } .site-header .nav__link:hover, .site-header .nav__trigger[aria-expanded="true"] { background: rgba(16, 17, 20, .06); color: inherit; } /* Buchung: Headline-Zeilen dürfen umbrechen statt in die Kalender-Karte zu laufen (1024–1300 px) */ .book .h2 .ln { white-space: normal; } @media (min-width: 1024px) and (max-width: 1320px) { .book .h2 { font-size: clamp(2.125rem, .8rem + 2.3vw, 3.25rem); } } /* Knöpfe: der alte Reset färbt a:hover dunkel, das Label bleibt weiß (auch Fokus) */ a.btn, a.btn:hover, a.btn:active, a.btn:focus-visible, a.btn .btn__label { color: var(--white); } a.link-arrow:hover, a.link-arrow:active { color: var(--blue-2); } a.link-arrow--light:hover, a.link-arrow--light:active { color: #c9dbff; }