/* ========================================================================== Compalia Landing Page — Styles Tokens extrahiert Design (6uu6ThTyoNxj35orPhV5up · Node 1728-71838) ========================================================================== */ /* -------- 1. DESIGN TOKENS ---------------------------------------------- */ :root { /* Brand */ --c-brand-900: #0d2125; --c-brand-800: #17363c; --c-brand-700: #105671; --c-brand-600: #115671; --c-brand-500: #2e6677; --c-brand-400: #2d7981; --c-brand-300: #39b4c0; /* Hero gradient stops */ --c-hero-1: rgb(5, 46, 54); --c-hero-2: rgb(21, 71, 76); /* Accents (yellow) */ --c-accent-300: #ffe03d; --c-accent-500: #e6be00; --c-accent-600: #c8a00a; --c-accent-700: #b48c00; --c-accent-50: #fff3cd; /* Contrast-safe ink tone for accent text on light surfaces (WCAG AA ≥ 4.5:1) */ --c-accent-ink: #8a6d1a; /* Text */ --c-text: #21304a; --c-text-soft: #4d6669; /* Darkened from #7d989c (2.96:1) → 5.2:1 on white for WCAG AA */ --c-text-muted: #557276; --c-text-on-dark: #ffffff; --c-text-on-dark-soft: #d8d8d8; /* Surfaces */ --c-surface: #ffffff; --c-surface-alt: #f3f5f4; --c-surface-tint: #eaf2f5; --c-surface-neutral: #eeeeef; --c-divider: #d6dcdb; --c-border: #d3d3d3; /* Status pills */ /* Darkened from #2a7a47 (4.00:1 on #c1ebd0) → 6.2:1 for WCAG AA on pill bg */ --c-success: #1e5a33; --c-success-bg: #c1ebd0; --c-success-bg-soft: #e6f4ea; --c-warn-bg: #fff3cd; --c-warn-fg: #8a6d1a; --c-danger: #8a2a22; --c-danger-bg: #eec5c0; --c-info: #2b3f8a; --c-info-bg: #aebeee; --c-accent-violet: #dfc7e3; /* Shadow */ --shadow-xl: 0 16px 56px 0 rgba(13, 33, 37, 0.18); --shadow-md: 0 8px 24px 0 rgba(13, 33, 37, 0.10); --shadow-sm: 0 2px 8px 0 rgba(13, 33, 37, 0.06); /* Typography */ --f-display: "Source Sans 3", "Helvetica Neue", Arial, sans-serif; --f-body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif; --f-ui: "Inter", "Helvetica Neue", Arial, sans-serif; --f-stat: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif; /* Spacing (fluid) — matches Design-Grid: 132px Seitenrand auf Desktop (ab ~1886px) 6.875vw erreicht 132px bei exakt 1920px; 7vw schon bei 1886px. */ --space-px: clamp(16px, 7vw, 132px); /* section horizontal */ /* Gap zwischen Grid-Spalten (20px) */ --grid-gap: 20px; --space-py: clamp(64px, 9vw, 128px); /* section vertical */ --space-py-lg: clamp(80px, 12vw, 196px); /* cta */ --gap-xs: 8px; --gap-sm: 12px; --gap-md: 16px; --gap: 24px; --gap-lg: 36px; --gap-xl: 48px; --gap-xxl: 96px; /* Radius */ --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; /* Layout */ --content-max: 1656px; --content-max-narrow: 1100px; /* Semantischer Card-Surface (wird im Dark Mode gekippt) */ --c-surface-card: #ffffff; --c-surface-elev: #ffffff; } /* -------- 1b. DARK MODE TOKEN OVERRIDES ------------------------------- Globaler Dark Theme. Wird über [data-theme="dark"] auf aktiviert. Token-basiert: nur Farb-/Schatten-Variablen werden gekippt, die Struktur (Spacing, Typography, Layout) bleibt identisch. */ html[data-theme="dark"] { /* Text */ --c-text: #e8ecec; --c-text-soft: #b8c2c4; --c-text-muted: #8da0a3; /* Surfaces (von dunkel → heller = Elevation) */ --c-surface: #0a1c20; /* body / section--light */ --c-surface-alt: #112a30; /* section--alt */ --c-surface-tint: #173a42; /* Akzent-Flächen, Stat-Chips, Tier-Hover */ --c-surface-neutral: #0f252a; --c-surface-card: #17363c; /* Karten, Dashcard, Tiers */ --c-surface-elev: #1d434b; /* Accordion[open], elevated surface */ --c-divider: #2a4349; --c-border: #334d55; /* Akzent-Text auf dunkler Fläche (statt #8a6d1a → helleres Gelb) */ --c-accent-ink: #ffe974; /* Brand-Text-Farben ans Akzent-Gelb angenähert, damit Headlines + Preise auf dunkler Fläche lesbar sind */ --c-brand-700: #5bd6e3; /* Status-Pills: gedimmte Backgrounds + hellere Foregrounds */ --c-success: #8fd3a6; --c-success-bg: #1d3a26; --c-success-bg-soft: #17301f; --c-warn-bg: #3a2f12; --c-warn-fg: #e8c66a; --c-info: #a9b7ec; --c-info-bg: #1e2a55; --c-danger: #e8a8a2; --c-danger-bg: #3a1f1c; /* Schatten tiefer & kräftiger auf dunklem Grund */ --shadow-xl: 0 16px 56px 0 rgba(0, 0, 0, 0.55); --shadow-md: 0 8px 24px 0 rgba(0, 0, 0, 0.35); --shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.22); } /* Sanfter Theme-Übergang (nur auf Farb-Eigenschaften – keine Layoutshifts) */ html[data-theme] body, html[data-theme] .section, html[data-theme] .section--light, html[data-theme] .section--alt, html[data-theme] .card, html[data-theme] .card--problem, html[data-theme] .fcard, html[data-theme] .tier, html[data-theme] .tiers, html[data-theme] .dashcard, html[data-theme] .stat, html[data-theme] .accordion, html[data-theme] .theme-toggle { transition: background-color .3s ease, color .3s ease, border-color .3s ease; } /* -------- 2. BASE / RESET ------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; } body { margin: 0; font-family: var(--f-body); font-size: 16px; line-height: 1.6; color: var(--c-text); background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: 0; background: none; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, p { margin: 0; } .container { width: 100%; max-width: var(--content-max); margin-inline: auto; } /* -------- 3. TYPOGRAPHY ------------------------------------------------- */ .h1 { font-family: var(--f-display); font-weight: 700; font-size: clamp(32px, 5vw, 52px); line-height: 1.15; letter-spacing: -0.01em; color: var(--c-text-on-dark); } .h2 { font-family: var(--f-display); font-weight: 700; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.2; letter-spacing: -0.01em; color: var(--c-text); /* 34ch statt 22ch – Design-Headlines laufen über die volle Breite von ~1096px (bei 44px Schrift ≈ 33–34ch). */ max-width: 34ch; } .sec-head--center .h2 { margin-inline: auto; } .h2--on-dark { color: var(--c-text-on-dark); } .kicker { font-family: var(--f-ui); /* 700 statt 500 — Design-Marker waren auf beiden Hintergründen zu filigran; Bold macht sie stabil lesbar. */ font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; /* accent-ink statt accent-600: 4.95:1 auf Weiß statt 2.47:1 (WCAG AA) */ color: var(--c-accent-ink); margin: 0 0 16px; } .kicker--on-dark { color: var(--c-accent-300); } .intro { font-family: var(--f-body); font-size: clamp(16px, 1.4vw, 18px); line-height: 1.7; color: var(--c-text-soft); max-width: 58ch; } .intro--on-dark { color: var(--c-text-on-dark-soft); } .sec-head--center .intro { margin-inline: auto; } /* -------- 4. BUTTONS ---------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: var(--r-sm); font-family: var(--f-ui); font-weight: 500; font-size: 16px; line-height: 1; letter-spacing: 0.01em; transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn--primary { background: var(--c-brand-600); color: #fff; box-shadow: 0 6px 18px rgba(17, 86, 113, .28); } .btn--primary:hover { background: var(--c-brand-700); box-shadow: 0 10px 24px rgba(17, 86, 113, .35); } /* Auf dunklen Sektionen wirkt der Brand-Schatten unsichtbar und sieht je nach Browser uneinheitlich aus. Daher dort konsequent ohne Schatten – der Brand-Kontrast trägt allein. */ .section--dark .btn--primary, .cta .btn--primary { box-shadow: none; } .section--dark .btn--primary:hover, .cta .btn--primary:hover { box-shadow: none; } .btn--outline { background: transparent; color: var(--c-brand-600); border: 1.5px solid var(--c-brand-600); } .btn--outline:hover { background: var(--c-brand-600); color: #fff; } .section--dark .btn--outline, .cta .btn--outline { color: #fff; border-color: rgba(255,255,255,.6); } .section--dark .btn--outline:hover, .cta .btn--outline:hover { background: #fff; color: var(--c-brand-600); border-color: #fff; } /* Secondary-CTA dezent, kein Primärgewicht. Hell: sanfter Button mit Border. Dunkel: glasige Transparenz auf Dark-BG. */ .btn--secondary { background: transparent; color: var(--c-text); border: 1.5px solid var(--c-border); } .btn--secondary:hover { background: var(--c-surface); border-color: var(--c-text-soft); } .section--dark .btn--secondary, .cta .btn--secondary { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .section--dark .btn--secondary:hover, .cta .btn--secondary:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.6); color: #fff; } .btn--lg { padding: 16px 32px; font-size: 17px; } .btn--xl { padding: 20px 40px; font-size: 18px; font-weight: 600; } .btn--block { width: 100%; } /* -------- 5. NAV -------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 50; background: var(--c-brand-900); color: var(--c-text-on-dark-soft); height: 100px; display: flex; align-items: center; /* Seitenpadding gehört hier hin, damit das Logo linksbündig zum Content-Grid sitzt (--space-px = 132px auf Desktop). */ padding-inline: var(--space-px); } .nav__inner { width: 100%; max-width: var(--content-max); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; } /* Logo darf nie schrumpfen/verschwinden, wenn das Menü eng wird. */ .nav__logo { flex: 0 0 auto; display: inline-flex; align-items: center; } .nav__logo img { height: 34px; width: auto; } .nav__menu { display: flex; align-items: center; gap: 36px; font-family: var(--f-ui); font-size: 16px; font-weight: 500; } .nav__menu a { color: var(--c-text-on-dark-soft); transition: color .2s ease; } .nav__menu a:hover { color: #fff; } /* CTA-Button in der Navigation – Secondary-Stil in Akzentgold: transparenter Hintergrund, Gold-Border + Gold-Text. Höhere Specificity gegen `.nav__menu a`. */ .nav__menu .nav__cta { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--c-accent-300); border: 1.5px solid var(--c-accent-300); padding: 9px 18px; border-radius: 999px; font-family: var(--f-ui); font-weight: 600; font-size: 14px; letter-spacing: 0.01em; white-space: nowrap; line-height: 1; transition: background .2s ease, color .2s ease, border-color .2s ease; } .nav__menu .nav__cta:hover { background: var(--c-accent-300); /* Dunkler Ink auf Gelb – wirkt in Light & Dark. accent-ink ist im Dark-Theme hellgelb (#ffe974) → wäre auf Gelb unleserlich. */ color: var(--c-brand-900); border-color: var(--c-accent-300); } .nav__burger { display: none; width: 40px; height: 40px; color: #fff; flex-direction: column; justify-content: center; gap: 5px; align-items: center; } .nav__burger span { display: block; width: 24px; height: 2px; background: currentColor; transition: transform .2s, opacity .2s; } .nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* -------- 6. HERO ------------------------------------------------------- */ .hero { background: linear-gradient(113.66deg, var(--c-hero-1) 0%, var(--c-hero-2) 100%); color: #fff; padding: var(--space-py) var(--space-px); position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 15% 10%, rgba(57,180,192,0.08) 0, transparent 40%), radial-gradient(circle at 85% 90%, rgba(255,224,61,0.05) 0, transparent 40%); pointer-events: none; } .hero__grid { position: relative; width: 100%; max-width: var(--content-max); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: clamp(32px, 6vw, 96px); align-items: center; } .hero__copy { max-width: 660px; } .hero__paragraphs { display: flex; flex-direction: column; gap: 16px; margin: 24px 0 28px; font-size: 17px; line-height: 1.65; color: rgba(255,255,255,0.92); } .hero__bullets { display: flex; flex-direction: column; gap: 10px; margin: 0 0 32px; font-family: var(--f-ui); font-size: 16px; color: #fff; } .hero__bullets li { display: flex; align-items: center; gap: 12px; } .check { width: 22px; height: 22px; color: var(--c-accent-300); flex-shrink: 0; } /* Dashboard preview card */ .hero__preview { display: flex; justify-content: center; } .dashcard { background: #fff; color: var(--c-text); border-radius: var(--r-md); padding: 28px; box-shadow: var(--shadow-xl); width: 100%; max-width: 560px; } .dashcard__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .dashcard__title { font-family: var(--f-display); font-weight: 600; font-size: 20px; color: var(--c-text); } .pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-family: var(--f-ui); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; } .pill--muted { background: var(--c-surface-alt); color: var(--c-text-soft); } .pill--success { background: var(--c-success-bg); color: var(--c-success); } .pill--success-soft { background: var(--c-success-bg-soft); color: var(--c-success); } .pill--info { background: var(--c-info-bg); color: var(--c-info); } .pill--danger { background: var(--c-danger-bg); color: var(--c-danger); } .pill--warn { background: var(--c-warn-bg); color: var(--c-warn-fg); } .dashcard__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; } .stat { background: var(--c-surface-alt); border-radius: var(--r-md); padding: 16px 14px; text-align: left; } .stat__num { font-family: var(--f-stat); font-weight: 700; font-size: 28px; letter-spacing: -0.02em; color: var(--c-brand-700); line-height: 1.1; } .stat__num span { font-size: 18px; margin-left: 2px; font-weight: 600; } .stat__label { font-family: var(--f-display); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-soft); margin-top: 2px; } .dashcard__table { width: 100%; border-collapse: collapse; font-size: 14px; } .dashcard__table th, .dashcard__table td { padding: 10px 0; border-bottom: 1px solid var(--c-divider); text-align: left; vertical-align: middle; } .dashcard__table tbody tr:last-child td { border-bottom: 0; } .dashcard__table th { font-family: var(--f-ui); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-text-muted); padding-bottom: 8px; } .dashcard__table td:first-child { font-weight: 500; color: var(--c-text); } /* -------- 7. SECTIONS --------------------------------------------------- */ .section { padding: var(--space-py) var(--space-px); } .section--light { background: #fff; } /* Erste Section direkt unter der Nav (ohne Hero): leicht erhöhtes Top-Padding, damit der Wechsel vom dunklen Nav-Band zum hellen Sectionsstart nicht zu abrupt wirkt. */ .section--first { padding-top: clamp(80px, 10vw, 144px); } .section--alt { background: var(--c-surface-alt); } .section--dark { background: linear-gradient(135deg, var(--c-brand-900) 0%, var(--c-brand-800) 100%); color: #fff; } .sec-head { /* Design-Referenz: Headline-Block 1096px; 1200px gibt der Überschrift etwas Luft, ohne über die halbe Content-Breite (1656) hinauszulaufen. */ max-width: 1200px; margin-bottom: 64px; } /* Abstand zwischen Headline und Lede (deutliche Trennung, nicht direkt unter der H2 klebend). */ .sec-head .intro { margin-top: 24px; } .sec-head--center { text-align: center; margin-inline: auto; } /* -------- 8. GRIDS ------------------------------------------------------ */ .grid { display: grid; gap: var(--gap-lg); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .card { background: #fff; border: 1px solid var(--c-divider); border-radius: var(--r-md); padding: 32px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; } .card__title { font-family: var(--f-display); font-weight: 600; font-size: 20px; margin: 20px 0 10px; color: var(--c-text); line-height: 1.35; } .card p { color: var(--c-text-soft); line-height: 1.65; font-size: 15.5px; } .icon-chip { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: var(--c-brand-900); color: var(--c-accent-300); } .icon-chip svg { width: 22px; height: 22px; } .card--feature .icon-chip { background: var(--c-brand-900); color: var(--c-accent-300); } /* -------- 7.1 PROBLEM CARDS (weiß auf grau, 2px Gap, flache Kanten) ------ */ .problem__cards { /* Enger zusammenrücken Karten sitzen quasi bündig nebeneinander mit 2px sichtbarer Fuge als visuelles Detail. */ gap: 2px; } .card--problem { /* Weiße, flache Karten auf grauer Fläche – keine sichtbare Border, kein Shadow. Karten sind nicht klickbar → kein Hover-Lift. */ background: #fff; border: none; border-radius: 0; padding: 40px 36px 56px; transition: none; display: flex; flex-direction: column; gap: 20px; } .card--problem:hover { transform: none; box-shadow: none; border-color: transparent; } /* Größerer Icon-Rahmen als ästhetische Eigenheit */ .card--problem .icon-chip { width: 64px; height: 64px; border-radius: 14px; } .card--problem .icon-chip svg { width: 30px; height: 30px; } .card--problem .card__title { margin: 0; } .card--problem p { margin: 0; } /* -------- 9. HOW IT WORKS (Scroll-Lock) -------------------------------- */ /* Tall outer container → inner pin sticks while user scrolls. Progress drives active step on the rail + visible slide on the stage. */ .scrolllock { position: relative; background: #fff; /* 4 steps × ~95vh reading distance each → 380vh total */ min-height: 380vh; } .scrolllock__pin { position: sticky; /* Pin klebt unterhalb der sticky Navigation (z-index 50, 100 px hoch). Sonst würde die Navi die Headline der Sektion verdecken. */ top: 100px; height: calc(100vh - 100px); min-height: 540px; display: flex; align-items: center; padding: clamp(24px, 3vw, 56px) var(--space-px); overflow: hidden; } /* Drei-Spalten-Layout: Intro (links) · Rail (mitte) · Stage (rechts). Reduziert die Gesamthöhe der Sektion und verhindert, dass Inhalte unten abgeschnitten werden, weil Intro nicht mehr über dem Body steht. Mittlere Spalte breit genug, damit Rail-Texte nicht in 5–6 Zeilen umbrechen. */ .scrolllock__inner { display: grid; grid-template-columns: minmax(240px, 320px) minmax(340px, 460px) minmax(0, 1fr); gap: clamp(28px, 3.5vw, 56px); align-items: center; width: 100%; } .how__intro { /* Linke Spalte im 3-Spalten-Layout: kompakter Intro-Stack (Kicker · Headline · Lede · CTA) links neben Rail und Stage. */ display: flex; flex-direction: column; align-items: flex-start; } .how__intro .kicker { color: var(--c-accent-ink); } .how__intro .h2 { max-width: 14ch; margin-bottom: 20px; text-wrap: balance; } .how__intro .intro { max-width: none; margin-bottom: 8px; } .how__intro .btn { margin-top: 28px; } /* Rail --------------------------------------------------------------- */ .rail { position: relative; display: flex; flex-direction: column; gap: 36px; padding-left: 68px; margin: 0; list-style: none; /* eigenes Marker-System, keine Browser-Ziffern */ counter-reset: step; /* --progress is set by JS — 0 at first step, 1 at last */ --progress: 0; } /* Fortschrittslinie zentriert mit Ziffern-Kreis (Ø 40 px, Mittelpunkt x = 34). Linie deshalb left: 33, width: 2. */ .rail__line { position: absolute; top: 20px; bottom: 20px; left: 33px; width: 2px; background: var(--c-divider); border-radius: 2px; overflow: hidden; } /* Fortschritt füllt die Linie von oben nach unten im Brand-Ton (kein Gelb mehr – die Rail bleibt kühl/technisch). */ .rail__progress { position: absolute; inset: 0 0 auto 0; height: calc(var(--progress) * 100%); background: var(--c-brand-700); border-radius: 2px; transition: height .35s cubic-bezier(.2,.8,.2,1); } .rail__dot { display: none; } .rail__step { position: relative; min-height: 44px; color: var(--c-text-muted); opacity: 0.55; counter-increment: step; transition: opacity .3s ease, color .3s ease, transform .3s ease; } /* Ziffern-Kreis (ersetzt den alten 14 px-Dot UND die ol-Standardziffer in einem Element). 40 × 40 px, links bündig mit der Rail-Linie. */ .rail__step::before { content: counter(step); position: absolute; left: -54px; top: 0; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-weight: 700; font-size: 17px; line-height: 1; color: var(--c-text-muted); background: var(--c-surface); border: 2px solid var(--c-divider); transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease; } .rail__step h3 { font-family: var(--f-display); font-weight: 500; font-size: clamp(21px, 1.5vw, 25px); line-height: 1.3; color: inherit; margin-bottom: 8px; letter-spacing: -0.01em; text-wrap: balance; } .rail__step p { font-size: 15.5px; line-height: 1.55; color: inherit; margin: 0; } .rail__step.is-active { opacity: 1; color: var(--c-text); } .rail__step.is-active h3 { color: var(--c-brand-700); font-weight: 600; } .rail__step.is-active p { color: var(--c-text-soft); } /* Aktiver Step: heller Kreis, Brand-Kontur + Brand-Ziffer, dezenter Glow als Anker. Kein Gelb – die Nummern atmen auf hellem Grund. */ .rail__step.is-active::before { background: var(--c-surface); border-color: var(--c-brand-700); color: var(--c-brand-700); box-shadow: 0 0 0 4px rgba(30, 107, 126, 0.12); } .rail__step.is-done { opacity: 0.9; } /* Bereits durchlaufen: Brand-Outline, aber mittelsoftes Label. */ .rail__step.is-done::before { background: var(--c-surface); border-color: var(--c-brand-700); color: var(--c-brand-700); } /* Stage (illustrations) --------------------------------------------- */ .stage { position: relative; aspect-ratio: 4 / 3; width: 100%; /* 4:3 Illustrationen. Skaliert konservativ mit der Viewport-Höhe, damit Rail und Intro im 3-Spalten-Pin nicht unten weggeschnitten werden. */ max-width: min(560px, 56vh); min-width: 320px; margin: 0 auto; justify-self: center; } .stage__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); pointer-events: none; } .stage__slide.is-active { opacity: 1; transform: translateY(0) scale(1); } .stage__slide svg, .stage__slide img.stage__svg { width: 100%; height: 100%; } /* Wrapper für animierte Illustrationen nimmt die volle Stage-Fläche ein */ .stage__slide .compalia-ill { position: absolute; inset: 0; width: 100%; height: 100%; } /* -------- 10. COVERAGE / ACCORDION MODULES ---------------------------- */ .coverage__head { margin-bottom: clamp(40px, 6vw, 72px); } .coverage__head .h2 { max-width: 24ch; margin-inline: auto; } .coverage__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: start; } .coverage__media { margin: 0; position: sticky; top: 96px; } .coverage__media img { width: 100%; height: auto; border-radius: var(--r-md); box-shadow: var(--shadow-md); /* 30% weniger Höhe: von 4/5 ~ 1.25 auf ca. 10/9 ~ 0.875 */ aspect-ratio: 10 / 9; object-fit: cover; object-position: center 30%; display: block; } .coverage__modules { display: flex; flex-direction: column; gap: 16px; } /* Funktions-Cards unterhalb der Gesetze/Module (2×3 Grid, weiße Karten auf grauem Section-Background, dunkler Icon-Chip mit gelbem Icon). Gleiche Optik wie Problem-Cards: 2px Gap, großzügiger Icon-Rahmen. */ .coverage__features { margin-top: clamp(48px, 6vw, 88px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; } .fcard { background: #fff; border: none; border-radius: 0; padding: 40px 36px 48px; display: flex; flex-direction: column; gap: 20px; } .fcard__chip { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: var(--c-brand-900); color: var(--c-accent-300); border-radius: 14px; flex: 0 0 auto; } .fcard__chip svg { width: 30px; height: 30px; } .fcard__title { font-family: var(--f-display); font-weight: 700; font-size: clamp(17px, 1.2vw, 19px); line-height: 1.3; color: var(--c-text); margin: 0; text-wrap: balance; } .fcard__desc { font-family: var(--f-ui); color: var(--c-text-muted); line-height: 1.55; margin: 0; } .accordion { /* Deutlich dezenter: keine umlaufende Border mehr, nur ein schmaler Trenner nach unten. Kein prägnanter Rahmen um die Elemente. */ border: none; border-bottom: 1px solid var(--c-divider); border-radius: 0; background: transparent; overflow: hidden; transition: background .2s; } .accordion[open] { background: rgba(255, 255, 255, 0.55); box-shadow: none; } .accordion__summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 22px 24px; cursor: pointer; list-style: none; font-family: var(--f-display); transition: background .2s; } .accordion__summary::-webkit-details-marker { display: none; } /* Hover nur auf geschlossenen Accordions, dezent. */ .accordion:not([open]) .accordion__summary:hover { background: rgba(255,255,255,0.5); } .accordion[open] .accordion__summary { border-bottom: 1px dashed var(--c-divider); } .accordion__num { font-family: var(--f-stat); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; color: var(--c-accent-ink); min-width: 28px; } .accordion__title { font-weight: 600; font-size: clamp(16px, 1.6vw, 18px); color: var(--c-text); line-height: 1.35; } .accordion__icon { width: 20px; height: 20px; color: var(--c-text-muted); flex-shrink: 0; transition: transform .25s ease, color .2s; } .accordion[open] .accordion__icon { transform: rotate(180deg); color: var(--c-brand-700); } .accordion__body { padding: 22px 24px 24px 70px; animation: accordion-reveal .25s ease both; } @keyframes accordion-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .law-chips { display: flex; flex-wrap: wrap; gap: 8px; } .law-chips li { padding: 7px 13px; border-radius: 999px; background: var(--c-surface-tint); border: 1px solid var(--c-divider); font-family: var(--f-ui); font-size: 13px; font-weight: 500; color: var(--c-brand-700); white-space: nowrap; } /* -------- 11. AUDIENCE -------------------------------------------------- */ .section--audience { background: var(--c-surface-alt); } .industry-grid { margin: 48px 0; } /* Industry-Karten (Software-Unternehmen / IT-Dienstleister & MSP) sind nicht klickbar → kein Hover-Lift. */ .card--industry { transition: none; } .card--industry:hover { transform: none; box-shadow: none; border-color: var(--c-divider); } .card--industry .card__title { margin-top: 0; } .card--industry .card__desc { font-size: 14.5px; line-height: 1.6; color: var(--c-text-soft); margin: 10px 0 6px; } .law-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 20px; } .law-list li { padding: 6px 12px; border-radius: 6px; background: var(--c-surface-alt); font-family: var(--f-ui); font-size: 13px; color: var(--c-brand-700); font-weight: 500; } .card--industry .meta { color: var(--c-text-muted); font-size: 14px; padding-top: 16px; border-top: 1px dashed var(--c-divider); } .persona-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-lg); margin-top: 48px; } .persona { background: #fff; border: 1px solid var(--c-divider); border-radius: var(--r-md); padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; transition: transform .2s, box-shadow .25s, border-color .25s; } /* Persona-Karten sind nicht klickbar → kein Hover-Lift . Vormalige:hover-Regel entfernt, Transition neutralisiert. */ .persona { transition: none; } .persona:hover { transform: none; box-shadow: none; border-color: var(--c-divider); } /* Persona-Avatar: einheitliche Brand-Farbe für alle Rollen, weißes Icon. Verzichtet bewusst auf bunte Pro-Rolle-Akzente und verwendet nur Compalia-Brand-Tokens, damit die Sektion ruhig bleibt. */ .persona__avatar { width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--c-brand-700); color: #fff; flex-shrink: 0; } .persona__avatar svg { width: 26px; height: 26px; display: block; } .persona__role { font-family: var(--f-display); font-weight: 700; font-size: 18px; color: var(--c-text); } .persona__type { font-family: var(--f-ui); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-accent-ink); margin-top: -6px; } .persona__quote { font-family: var(--f-display); font-style: italic; font-size: 15px; line-height: 1.55; color: var(--c-text-soft); margin: 0; padding: 12px 0 8px; border-top: 1px solid var(--c-divider); } .persona__traits { display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--f-ui); font-size: 12px; } .persona__traits li { padding: 4px 10px; border-radius: 999px; background: var(--c-surface-tint); color: var(--c-brand-700); font-weight: 500; } /* -------- 12. WHY COMPALIA -------------------------------------------- */ .why__head { text-align: center; max-width: 760px; margin: 0 auto 72px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .why__head .h2 { max-width: 22ch; margin: 0 auto; } /* Left-aligned variant (Design-System-Variante) */ .why__head--left { text-align: left; /* Deutlich breiter, damit „Wir schaffen Klarheit, wo andere nur Paragrafen sehen." auf Desktop in 2 Zeilen statt 3 läuft, ohne dass die Schriftgröße reduziert werden muss. */ max-width: 1100px; margin: 0 0 64px 0; align-items: flex-start; } .why__head--left .h2 { margin-left: 0; max-width: 36ch; text-wrap: balance; } .why__quote { display: inline-flex; color: var(--c-accent-300); width: 44px; height: 32px; margin-bottom: 8px; } .why__quote svg { width: 100%; height: 100%; } .why__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Why-Cards: editorial Numerik-Spalten Keine Card-Surface mehr – nur ein gelber Trennstrich oben markiert jede Spalte. Inhalt sitzt direkt auf dem dunklen Section-Background. */ .why-card { position: relative; background: transparent; border: 0; border-radius: 0; padding: clamp(20px, 2vw, 28px) 0 0; display: flex; flex-direction: column; gap: 16px; isolation: isolate; } .why-card::before { content: ""; position: absolute; top: 0; left: 0; width: 50%; height: 2px; background: var(--c-accent-300); opacity: 0.9; } .why-card__num { font-family: var(--f-stat); font-size: 13px; font-weight: 700; letter-spacing: 0.16em; color: var(--c-accent-300); line-height: 1; margin-bottom: 4px; } .why-card__icon { width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.06); color: var(--c-accent-300); border: 1px solid rgba(255, 255, 255, 0.10); } .why-card__icon svg { width: 26px; height: 26px; } .why-card h3 { font-family: var(--f-display); font-weight: 600; font-size: clamp(19px, 1.4vw, 22px); line-height: 1.25; letter-spacing: -0.005em; color: #fff; margin-bottom: 0; } .why-card p { font-size: 15px; line-height: 1.65; color: var(--c-text-on-dark-soft); } /* -------- 13. PRICING -------------------------------------------------- */ .pricing__layout { display: grid; grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; } .pricing__head .btn { margin-top: 28px; } .pricing__head .h2 { max-width: 18ch; } .tiers { display: flex; flex-direction: column; background: #fff; border-radius: var(--r-md); border: 1px solid var(--c-divider); box-shadow: var(--shadow-md); overflow: hidden; } .tier { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; padding: 28px 32px; border-bottom: 1px solid var(--c-divider); transition: background .25s; } .tier:last-child { border-bottom: 0; } /* Kein Hover-Effekt – Tiers sind keine klickbaren Elemente. */ .tier__info { display: flex; flex-direction: column; gap: 8px; } .tier__pricebox { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; text-align: right; } .tier__tag { font-family: var(--f-ui); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-accent-ink); font-weight: 600; } .tier__price { font-family: var(--f-stat); font-weight: 700; font-size: 32px; color: var(--c-brand-700); letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; } .tier__price span { font-size: 14px; color: var(--c-text-soft); font-weight: 500; margin-left: 4px; } .tier__period { font-size: 12px; color: var(--c-text-muted); } .tier__desc { font-family: var(--f-display); font-weight: 600; font-size: 15px; color: var(--c-text); margin: 0; } /* -------- 14. CTA ------------------------------------------------------- */ .cta { /* Einfarbig dunkel Footerbereich komplett ohne Verlauf. CTA + Footer bilden einen homogenen dunklen Block. */ background: var(--c-brand-900); color: #fff; /* Unten bündig zum Footer – kein sichtbarer Margin mehr zwischen Logo & Footer */ padding: var(--space-py-lg) var(--space-px) 0; text-align: center; position: relative; overflow: hidden; } /*::before-Gradient entfernt – kein Glow mehr im Footerbereich. */ .cta::before { content: none; } .cta__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; max-width: 1140px; } .cta__logo { /* Nahtloser Übergang ins Footer-Band: kein zusätzlicher Bottom-Abstand. Logo sitzt direkt über dem Footer-Verlauf. */ margin-top: clamp(48px, 6vw, 72px); padding-bottom: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0.9; } .cta__tagline { font-family: var(--f-display); font-style: italic; font-weight: 500; color: var(--c-accent-300); font-size: 14px; letter-spacing: 0.04em; } .cta .h2--on-dark { max-width: 1100px; margin-inline: auto; text-wrap: balance; } .cta .intro--on-dark { max-width: 680px; margin-inline: auto; } /* -------- 14.5 SKIP LINK + SUBPAGE STUBS ------------------------------ */ /* Visually-Hidden Utility (nur für Screenreader sichtbar) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -40px; left: 8px; background: var(--c-brand-900); color: #fff; padding: 10px 16px; border-radius: 6px; font-family: var(--f-ui); font-weight: 600; z-index: 1000; transition: top .2s ease; } .skip-link:focus-visible { top: 12px; outline: 2px solid var(--c-accent-300); outline-offset: 2px; } /* Aktiv-Markierung im Hauptmenü (WCAG: aria-current="page") */ .nav__menu a[aria-current="page"] { color: var(--c-accent-300); } .nav__menu a[aria-current="page"]::after { content: ""; display: block; width: 20px; height: 2px; background: var(--c-accent-300); margin-top: 4px; border-radius: 2px; } .subpage { background: linear-gradient(180deg, var(--c-brand-900) 0%, var(--c-brand-800) 100%); color: #fff; padding: calc(96px + 40px) var(--space-px) calc(var(--space-py-lg)); min-height: 72vh; position: relative; overflow: hidden; } .subpage::before { content: ""; position: absolute; inset: auto -5% -40% -5%; height: 60%; background: radial-gradient(ellipse at 50% 0%, rgba(57,180,192,0.18) 0%, transparent 60%); pointer-events: none; } .subpage__inner { position: relative; max-width: 860px; display: flex; flex-direction: column; gap: 20px; } .subpage__inner .h1 { color: #fff; max-width: 22ch; } .subpage__inner .intro { color: var(--c-text-on-dark-soft); max-width: 62ch; } .subpage__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; } /* -------- 14.9 DARK MODE SURFACE OVERRIDES --------------------------- Hartkodierte Whites und strukturelle Backgrounds im Dark Mode kippen. Reihenfolge: so spät wie möglich im File, damit Spezifität gewinnt. */ html[data-theme="dark"] body { background: var(--c-surface); } html[data-theme="dark"] .section--light { background: var(--c-surface); } html[data-theme="dark"] .section--alt { background: var(--c-surface-alt); } /* Karten & Panels */ html[data-theme="dark"] .card, html[data-theme="dark"] .card--problem, html[data-theme="dark"] .fcard, html[data-theme="dark"] .dashcard, html[data-theme="dark"] .tiers { background: var(--c-surface-card); color: var(--c-text); border-color: var(--c-divider); } html[data-theme="dark"] .card:hover { border-color: transparent; } /* Scroll-Lock Sektion komplett in Dark Mode überführen */ html[data-theme="dark"] .scrolllock { background: var(--c-surface); } /* Ziffern-Kreis im Dark Mode: dünne Outline, kein Gelb. Aktiv/done nutzen einen hellen Türkiston als Brand-Akzent. */ html[data-theme="dark"] .rail__step::before { /* Deckend = scrolllock-Section-BG, damit die Fortschrittslinie hinter der Ziffer abgedeckt wird (transparent ließ die Linie durchscheinen und „zerschnitt" die Zahl). */ background: var(--c-surface); border-color: var(--c-border); color: var(--c-text-muted); } html[data-theme="dark"] .rail__step.is-active::before, html[data-theme="dark"] .rail__step.is-done::before { background: var(--c-surface); border-color: var(--c-brand-300); color: var(--c-brand-300); } html[data-theme="dark"] .rail__step.is-active::before { box-shadow: 0 0 0 4px rgba(57, 180, 192, 0.16); } /* Steps in Dark lesbar */ html[data-theme="dark"] .rail__step h3 { color: var(--c-text); } html[data-theme="dark"] .rail__step p { color: var(--c-text-muted); } html[data-theme="dark"] .rail__step.is-active h3 { color: var(--c-brand-300); } /* Stage-Slides im Dark Mode: Die animierten Illustrationen erben die Dark-Vars via html[data-theme="dark"].compalia-ill (siehe Section 15.15). */ html[data-theme="dark"] .stage__slide { filter: none; } /* Dashcard-Details */ html[data-theme="dark"] .stat { background: var(--c-surface-tint); } html[data-theme="dark"] .dashcard__title { color: var(--c-text); } /* Pricing */ html[data-theme="dark"] .tiers { box-shadow: var(--shadow-md); } html[data-theme="dark"] .tier { border-bottom-color: var(--c-divider); } /* Kein Tier-Hover im Dark Mode – konsistent zu Light. */ html[data-theme="dark"] .tier__price { color: var(--c-accent-300); } /* Accordion (Coverage-Sektion im Dark: sanft elevierte Box) */ html[data-theme="dark"] .accordion { background: transparent; border-bottom-color: var(--c-divider); } html[data-theme="dark"] .accordion[open] { background: rgba(255, 255, 255, 0.04); } html[data-theme="dark"] .accordion:not([open]) .accordion__summary:hover { background: rgba(255, 255, 255, 0.03); } html[data-theme="dark"] .accordion__summary .accordion__title { color: var(--c-text); } html[data-theme="dark"] .accordion__body p { color: var(--c-text-soft); } /* Persona-Cards */ html[data-theme="dark"] .persona { background: var(--c-surface-card); border-color: var(--c-divider); } /* Nav-Shadow beim Scrollen gegen dunkle Body-Fläche */ html[data-theme="dark"] .nav.is-scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); } /* Secondary CTA (btn--outline) im Dark Mode: Brand-Teal #115671 auf #0a1c20 ergibt nur 2.3:1 (WCAG AA Fail). Umschalten auf Akzent-Gelb → 14:1 auf Main, 11:1 auf Section-Alt, 9:1 auf Karten. Brand-konform. Wird NICHT von der bestehenden `.section--dark.btn--outline`-Regel überschrieben (höhere Spezifität dort → bleibt weiß in Why-Sektion). */ html[data-theme="dark"] .btn--outline { color: var(--c-accent-300); border-color: var(--c-accent-300); } html[data-theme="dark"] .btn--outline:hover { background: var(--c-accent-300); color: var(--c-brand-900); border-color: var(--c-accent-300); } /* Primary CTA im Dark Mode: brand-600 (#115671) weiter verwenden, aber Schatten dämpfen – die hellen Box-Shadows wirken auf dunkler Fläche zu laut. */ html[data-theme="dark"] .btn--primary { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); } html[data-theme="dark"] .btn--primary:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55); } /* Secondary CTA im Dark Mode: wie Light, aber Border/Text angepasst. */ html[data-theme="dark"] .btn--secondary { color: var(--c-text); border-color: var(--c-border); } html[data-theme="dark"] .btn--secondary:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--c-text-soft); } /* Divider bei ausgeklapptem Accordion etwas kräftiger im Dark Mode */ html[data-theme="dark"] .accordion[open] .accordion__summary { border-bottom-color: rgba(255, 255, 255, 0.08); } /* -------- 15. FOOTER --------------------------------------------------- */ .footer { /* Einfarbig dunkel Design-System) – kein Verlauf mehr. */ background: var(--c-brand-900); color: var(--c-text-on-dark-soft); padding: 20px var(--space-px) 28px; font-family: var(--f-ui); font-size: 14px; } .footer__inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; } /* Meta-Block links im Footer: Copyright + Bredex-Byline untereinander */ .footer__meta { display: flex; flex-direction: column; gap: 4px; line-height: 1.4; } .footer__copy { margin: 0; } .footer__byline { margin: 0; font-size: 13px; opacity: 0.7; } .footer__byline strong { font-weight: 600; } .footer__links { display: flex; gap: 24px; } .footer__links a { transition: color .2s; } .footer__links a:hover { color: #fff; } /* Gruppe auf der rechten Seite: Rechtliches-Links + Dark-Mode-Toggle */ .footer__actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } /* -------- 15.1 THEME TOGGLE (Dark Mode) ------------------------------ */ .theme-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.04); color: var(--c-text-on-dark-soft); font-family: var(--f-ui); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease; } .theme-toggle:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.32); color: #fff; } .theme-toggle:active { transform: scale(0.97); } .theme-toggle:focus-visible { outline: 2px solid var(--c-accent-300); outline-offset: 2px; } .theme-toggle__icon { width: 18px; height: 18px; flex-shrink: 0; } .theme-toggle__icon--sun { color: var(--c-accent-300); } .theme-toggle__icon--moon { color: var(--c-text-on-dark-soft); } /* Light-Mode: Mond sichtbar (→ „Dark Mode aktivieren"), Sonne versteckt */ .theme-toggle__icon--sun { display: none; } .theme-toggle__icon--moon { display: block; } /* Dark-Mode: Sonne sichtbar (→ „Light Mode aktivieren"), Mond versteckt */ html[data-theme="dark"] .theme-toggle__icon--sun { display: block; } html[data-theme="dark"] .theme-toggle__icon--moon { display: none; } /* Auf Mobile (Touch-Geräten) keine Hover-Tilt-Animation und kein active:scale, weil dort durch wiederholte Taps ein hakeliges Verhalten (Zwischen-Frames) entsteht und der Klick verschluckt wird. */ @media (hover: hover) and (pointer: fine) { .theme-toggle:hover .theme-toggle__icon { transform: rotate(-15deg); } html[data-theme="dark"] .theme-toggle:hover .theme-toggle__icon { transform: rotate(20deg); } } @media (hover: none), (pointer: coarse) { .theme-toggle { transition: none; } .theme-toggle:active { transform: none; } .theme-toggle__icon { transition: none; } } /* -------- 15.9 LIZENZEN-PAGE ----------------------------------------- */ /* Eigene Vergleichstabelle für die Detail-Lizenzseite. Bewusst schlicht: helle Oberfläche, feine Divider, Basis-Spalte dezent hervorgehoben. */ .subpage--light { background: var(--c-surface-alt); color: var(--c-text); padding: calc(96px + 40px) var(--space-px) var(--space-py); min-height: auto; } .subpage--light::before { display: none; } .subpage--light .h1 { color: var(--c-text); max-width: 22ch; } .subpage--light .intro { color: var(--c-text-soft); max-width: 62ch; } .subpage--light .kicker { color: var(--c-accent-ink); } /* Vergleichstabelle ------------------------------------------------- */ /* Desktop: 4 Spalten (Label | Preview | Basis | Premium), 11 Zeilen. HTML-Struktur ist spaltenweise (label-col + 3 tier-cols), jede Spalte nutzt display:contents, damit die Cells ins übergeordnete Grid fließen. grid-auto-flow: column sorgt dafür, dass die Zellen spaltenweise gesetzt werden (ansonsten würde die Reihenfolge durcheinander geraten). */ .compare { --compare-rows: 12; display: grid; grid-template-columns: minmax(180px, 0.9fr) repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(var(--compare-rows), auto); grid-auto-flow: column; background: var(--c-surface); border: 1px solid var(--c-divider); border-radius: var(--r-md); box-shadow: var(--shadow-md); overflow: hidden; } .compare__label-col, .compare__tier { display: contents; } .compare__cell { padding: 20px 22px; border-bottom: 1px solid var(--c-divider); display: flex; align-items: center; min-height: 64px; font-size: 15.5px; color: var(--c-text); line-height: 1.45; } .compare__row:last-child .compare__cell { border-bottom: none; } .compare__label { font-family: var(--f-ui); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-text-muted); background: var(--c-surface-alt); } .compare__tier-name { font-family: var(--f-display); font-weight: 600; font-size: clamp(20px, 1.6vw, 24px); color: var(--c-brand-700); line-height: 1.15; display: flex; flex-direction: column; gap: 4px; padding-top: 26px; padding-bottom: 22px; border-bottom: 2px solid var(--c-divider); } .compare__tier-name small { font-family: var(--f-ui); font-weight: 500; font-size: 13px; color: var(--c-text-muted); letter-spacing: 0; text-transform: none; } .compare__price { font-family: var(--f-stat); font-weight: 700; font-size: 28px; color: var(--c-brand-700); padding-top: 22px; padding-bottom: 22px; border-bottom: none; letter-spacing: -0.02em; line-height: 1.1; align-items: baseline; gap: 4px; } .compare__price span { font-size: 13px; color: var(--c-text-muted); font-weight: 500; } .compare__muted { color: var(--c-text-muted); } /* Empfehlung: Basis-Spalte gelblich unterstrichen..compare__tier nutzt display:contents → Hintergrund kann nur auf den einzelnen Zellen gesetzt werden, daher Modifier.compare__cell--highlight. */ .compare__cell--highlight { background: #fffbe8; } .compare__cell--highlight.compare__tier-name { color: var(--c-brand-900); } .compare__cell--highlight.compare__price { color: var(--c-brand-900); } /* Label "Preis" in der Label-Spalte: gleiche kleine Caps-Optik wie die anderen Zeilen-Labels – nicht im großen Preis-Styling. */ .compare__cell.compare__label.compare__price { font-family: var(--f-ui); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-muted); } /* Empfohlen-Badge: absolut in der Ecke der Basis-Cell, damit alle drei Tier-Namen (Preview, Basis, Premium) auf gleicher Y-Achse starten. */ .compare__cell--highlight.compare__tier-name { position: relative; } .compare__badge { position: absolute; top: 12px; right: 14px; display: inline-flex; align-items: center; background: var(--c-accent-300); color: var(--c-brand-900); font-family: var(--f-ui); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; } /* Mobile-Fallback: Karten pro Tier */ .compare__mobile-label { display: none; } @media (max-width: 860px) { .compare { display: flex; flex-direction: column; border: none; background: transparent; box-shadow: none; gap: 20px; } .compare__head, .compare__row { display: contents; } .compare__label-col { display: none; } .compare__tier { display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-divider); border-radius: var(--r-md); box-shadow: var(--shadow-md); overflow: hidden; } .compare__tier--highlight { border-color: var(--c-accent-300); box-shadow: 0 0 0 3px rgba(255, 224, 61, 0.22), var(--shadow-md); } .compare__cell { border-bottom: 1px solid var(--c-divider); padding: 14px 20px; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 0; } .compare__cell:last-child { border-bottom: none; } .compare__mobile-label { display: block; font-family: var(--f-ui); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-text-muted); } } /* Add-on / Externe Beauftragten-Rollen (Lizenzen-Page) ------------- Single-Column-Layout: Header oben volle Breite, darunter die Karten als 2-Spalten-Raster. Selektor ist bewusst spezifischer (.container.addon), damit die später definierte Inline-Aside- Variante auf der Landing-Page (Pricing-Section) nicht durchschlägt – sonst rutschten Padding und Border-Top in den Lizenzen-Block hinein und der Header verlor die linke Bündigkeit zur Vergleichstabelle. */ .container.addon { display: block; padding: 0; margin-inline: auto; border: 0; } .addon__head { max-width: 760px; margin: 0 0 clamp(32px, 4vw, 48px); } .addon__head .h2 { max-width: 32ch; } .addon__head .intro { max-width: 64ch; } .addon__price-tag { display: inline-flex; align-items: baseline; gap: 8px; background: var(--c-surface); border: 1px solid var(--c-divider); padding: 14px 20px; border-radius: var(--r-sm); margin-top: 22px; font-family: var(--f-stat); font-weight: 700; font-size: 28px; color: var(--c-brand-700); letter-spacing: -0.02em; } .addon__price-tag span { font-family: var(--f-ui); font-size: 14px; color: var(--c-text-muted); font-weight: 500; letter-spacing: 0; } .addon__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .addon__card { background: var(--c-surface); border: 1px solid var(--c-divider); border-radius: var(--r-md); padding: 26px 26px; display: flex; flex-direction: column; gap: 10px; transition: transform .2s, box-shadow .2s; } .addon__card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .addon__card h3 { font-family: var(--f-display); font-size: 18px; font-weight: 600; color: var(--c-brand-700); margin: 0; } .addon__card .chip { align-self: flex-start; background: var(--c-surface-tint); color: var(--c-brand-700); font-family: var(--f-ui); font-weight: 600; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; margin-bottom: 2px; } .addon__card p { color: var(--c-text-soft); margin: 0; font-size: 14.5px; line-height: 1.55; } @media (max-width: 900px) { .addon { grid-template-columns: 1fr; } .addon__list { grid-template-columns: 1fr; } } /* Dark-Mode für Lizenzen-Page -------------------------------------- */ html[data-theme="dark"] .subpage--light { background: var(--c-surface); color: var(--c-text); } html[data-theme="dark"] .subpage--light .h1 { color: var(--c-text); } html[data-theme="dark"] .subpage--light .intro { color: var(--c-text-soft); } html[data-theme="dark"] .compare { background: var(--c-surface-card); border-color: var(--c-divider); } html[data-theme="dark"] .compare__cell { border-bottom-color: var(--c-divider); color: var(--c-text); } html[data-theme="dark"] .compare__label { background: var(--c-surface-alt); color: var(--c-text-muted); } html[data-theme="dark"] .compare__muted { color: var(--c-text-muted); } html[data-theme="dark"] .compare__tier-name { color: var(--c-accent-300); border-bottom-color: var(--c-divider); } html[data-theme="dark"] .compare__tier-name small { color: var(--c-text-muted); } html[data-theme="dark"] .compare__price { color: var(--c-accent-300); } html[data-theme="dark"] .compare__col-highlight { background: linear-gradient(180deg, rgba(255,224,61,0.08) 0%, rgba(255,224,61,0.04) 100%); } html[data-theme="dark"] .compare__col-highlight .compare__tier-name, html[data-theme="dark"] .compare__col-highlight .compare__price { color: var(--c-accent-300); } /* Basis-Tier (Empfohlen) im Dark Mode lesbar halten: Hintergrund bleibt hell-gelb, deshalb Textfarbe explizit auf Brand-900 zwingen, sonst würde der globale.compare__cell Light-Text auf hellem Gelb stehen. */ html[data-theme="dark"] .compare__cell--highlight { color: var(--c-brand-900); } html[data-theme="dark"] .compare__cell--highlight a { color: var(--c-brand-900); } html[data-theme="dark"] .addon__price-tag { background: var(--c-surface-card); border-color: var(--c-divider); color: var(--c-accent-300); } html[data-theme="dark"] .addon__card { background: var(--c-surface-card); border-color: var(--c-divider); } html[data-theme="dark"] .addon__card h3 { color: var(--c-accent-300); } html[data-theme="dark"] .addon__card .chip { background: rgba(255, 224, 61, 0.1); color: var(--c-accent-300); } /* -------- 15.10 FEATURES-PAGE ---------------------------------------- */ /* Alternierende Feature-Rows (Text / Medien) mit großzügigen Abständen. Light-Look; nimmt die Token-Farben der Landing Page auf. Jede Zeile ist ein 2-Spalten-Grid. DOM-Reihenfolge bestimmt Spalte, d.h. "text-left" Rows haben Content zuerst, "media-left" Medien zuerst. Auf Mobile wird einspaltig gestackt – die Medienkachel steht stets oben. */ .features { /* Vertikales Padding eigen, horizontales via Token (--space-px) wie auf der Landing Page, damit Inhalte nicht bis zum Viewport-Rand laufen. */ padding: clamp(72px, 10vw, 120px) var(--space-px); } .feature-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(40px, 6vw, 96px); margin-bottom: clamp(72px, 10vw, 128px); } .feature-row:last-child { margin-bottom: 0; } /* Content-Block ---------------------------------------------------------- */ .feature-content { max-width: 52ch; } .feature-eyebrow { font-family: var(--f-ui); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent-ink); margin: 0 0 14px; } .feature-title { font-family: var(--f-display); font-size: clamp(26px, 3.2vw, 36px); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; color: var(--c-text); margin: 0 0 16px; max-width: 22ch; } .feature-lede { font-size: clamp(16px, 1.15vw, 18px); line-height: 1.6; color: var(--c-text-soft); margin: 0 0 22px; } .feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .feature-list li { position: relative; padding-left: 28px; color: var(--c-text); font-size: 15.5px; line-height: 1.55; } .feature-list li::before { /* Dezenter Bullet ohne gelben Akzent – sitzt als kleiner Punkt in Text-Soft-Farbe vor dem Listen-Eintrag. */ content: ""; position: absolute; left: 6px; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: var(--c-text-soft); } /* Medien-Kachel: animierte Feature-SVGs ----------------- Die Feature-Page nutzt 4 selbsterklärende, dezent animierte SVG-Mockups. Animationen sind im SVG