/* ── Geist · selbst gehostet (OFL, DSGVO-konform) · ersetzt Google Fonts ── */ @font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/geist-400.woff2') format('woff2')} @font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/geist-500.woff2') format('woff2')} @font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/geist-600.woff2') format('woff2')} @font-face{font-family:'Geist';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/geist-700.woff2') format('woff2')} @font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/geist-mono-400.woff2') format('woff2')} @font-face{font-family:'Geist Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/geist-mono-500.woff2') format('woff2')} @font-face{font-family:'Geist Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/geist-mono-600.woff2') format('woff2')} /* ===================================================================== FLORIN+ · calc-v2.css Production stylesheet for Rechner / calculator tool pages. Class-based, token-driven. No inline styles, no framework. Self-contained: re-declares the shared FLORIN+ token set + primitives so it can ship independently of blog-v9.css. Author: FLORIN+ Design · 2026 ===================================================================== */ /* --------------------------------------------------------------------- 1. DESIGN TOKENS (shared FLORIN+ system — identical to blog-v9) --------------------------------------------------------------------- */ :root { --fp-ink:#11201d; --fp-ink-2:#2a3633; --fp-body:#3a4744; --fp-muted:#6b7975; --fp-faint:#7c8884; --fp-disabled:#a4adaa; --fp-white:#ffffff; --fp-surface:#f6f8f7; --fp-surface-2:#f1f4f3; --fp-teal:#00afa3; --fp-teal-ink:#018b81; --fp-teal-deep:#016a62; --fp-teal-tint:#ecf8f6; --fp-teal-line:#cdeee8; --fp-teal-on:#04453f; --fp-teal-on-2:#2f534e; --fp-amber-bg:#fcf4e8; --fp-amber-line:#f0dcbf; --fp-amber-ink:#8a5413; --fp-amber-body:#6e4a18; --fp-amber-icon:#e0922e; --fp-line:rgba(17,32,29,.10); --fp-line-soft:rgba(17,32,29,.07); --fp-line-hair:rgba(17,32,29,.06); --fp-focus:#00afa3; --fp-focus-ring:0 0 0 3px rgba(0,175,163,.35); /* result panel (dark) tokens */ --fp-dark:#11201d; --fp-dark-2:#9fb0ac; --fp-dark-3:#c6d0cd; --fp-bar-tax:#e89b8a; /* taxes (warm) */ --fp-bar-social:#8fa09c; /* social contributions (neutral) */ --fp-bar-gross:#7d8c88; --fp-net:#5fd4c9; --fp-font:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; --fp-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace; --fs-eyebrow:.78rem; --fs-meta:.8125rem; --fs-small:.875rem; --fs-ui:.9375rem; --fs-body:1.0625rem; --fs-lead:clamp(1.05rem,2.2vw,1.28rem); --fs-h3:1.4rem; --fs-h2:clamp(1.5rem,3vw,1.9rem); --fs-h1:clamp(2.1rem,5.4vw,3.3rem); --fs-display:clamp(2.6rem,7vw,3.4rem); --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --lh-tight:1.06; --lh-snug:1.3; --lh-normal:1.5; --lh-body:1.68; --ls-tight:-.03em; --ls-snug:-.02em; --ls-wide:.04em; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:28px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-14:56px; --sp-16:64px; --sp-20:80px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px; --r-2xl:24px; --r-pill:999px; --sh-sm:0 1px 3px rgba(0,0,0,.08); --sh-card:0 1px 2px rgba(17,32,29,.04); --sh-pop:0 8px 30px rgba(17,32,29,.10); --fp-container:1180px; --fp-measure:680px; --fp-nav-h:60px; --fp-ease:cubic-bezier(.4,0,.2,1); --fp-dur:.2s; /* Breakpoints (reference; @media uses literals) --bp-lg: 920px input/result two-col → single column (result un-sticks) --bp-md: 768px nav links + net-chip hide --bp-sm: 600px select pair → single column, grids → single column */ } /* --------------------------------------------------------------------- 2. BASE (scoped to .fp-doc) --------------------------------------------------------------------- */ .fp-doc *, .fp-doc *::before, .fp-doc *::after { box-sizing: border-box; } .fp-doc { margin: 0; font-family: var(--fp-font); font-size: 16px; line-height: var(--lh-normal); color: var(--fp-ink); background: var(--fp-white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .fp-doc h1,.fp-doc h2,.fp-doc h3,.fp-doc p,.fp-doc ul,.fp-doc ol { margin: 0; } .fp-doc :where(a) { color: inherit; text-decoration: none; } .fp-hidden { display: none !important; } /* Vergleich (Szenario A/B) im dunklen Ergebnis-Panel */ .fp-scenarios { display: flex; flex-direction: column; gap: var(--sp-5); } .fp-scenario__title { font-size: 13px; font-weight: var(--fw-semibold); color: var(--fp-dark-3); letter-spacing: var(--ls-snug); } .fp-scenario__rows { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: 9px; } .fp-scenario__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); } .fp-scenario__k { font-size: 13.5px; color: var(--fp-dark-2); } .fp-scenario__v { font-family: var(--fp-mono); font-size: 13.5px; font-weight: var(--fw-medium); color: #fff; } .fp-scenario--b .fp-scenario__v { color: var(--fp-net); } .fp-scenario__delta { font-family: var(--fp-mono); font-size: 11.5px; font-weight: 400; color: rgba(255,255,255,.45); margin-left: 7px; } .fp-savenote { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid rgba(255,255,255,.12); font-size: 13.5px; line-height: 1.55; color: var(--fp-dark-3); } .fp-savenote strong { color: var(--fp-net); font-weight: var(--fw-semibold); } .fp-doc img { max-width: 100%; display: block; } .fp-doc ::selection { background:#bdeee8; color:#04302b; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .fp-doc *, .fp-doc *::before, .fp-doc *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; } } .fp-doc :focus-visible { outline: 2px solid var(--fp-focus); outline-offset: 2px; border-radius: 4px; } .fp-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; } .fp-skip { position:absolute; left:-999px; top:0; z-index:200; background:var(--fp-ink); color:#fff; padding:10px 16px; border-radius:0 0 var(--r-sm) 0; font-size:var(--fs-small); font-weight:var(--fw-semibold); } .fp-skip:focus { left:0; } /* --------------------------------------------------------------------- 3. LAYOUT + SHARED PRIMITIVES (nav, buttons, atoms, footer, faq) --------------------------------------------------------------------- */ .fp-container { max-width: var(--fp-container); margin: 0 auto; padding: 0 var(--sp-8); } .fp-nav { position:sticky; top:0; z-index:100; background:rgba(255,255,255,.78); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--fp-line-soft); } .fp-nav__inner { max-width:var(--fp-container); margin:0 auto; padding:0 var(--sp-8); height:var(--fp-nav-h); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5); } .fp-logo { font-weight:var(--fw-bold); font-size:19px; letter-spacing:var(--ls-snug); color:var(--fp-ink); } .fp-logo__plus { color:var(--fp-teal); } .fp-nav__links { display:flex; align-items:center; gap:30px; } .fp-nav__link { font-size:var(--fs-small); color:var(--fp-muted); text-decoration:none; font-weight:var(--fw-medium); transition:color var(--fp-dur) var(--fp-ease); } .fp-nav__link:hover { color:var(--fp-ink); } .fp-nav__link.is-active { color:var(--fp-ink); font-weight:var(--fw-semibold); } .fp-nav__right { display:flex; align-items:center; gap:var(--sp-5); } /* Live net-result chip in the nav — quiet: label + mono value, hairline, no fill */ .fp-netchip { display:flex; align-items:baseline; gap:8px; background:none; border:0; border-radius:0; padding:0; } .fp-netchip__label { font-size:12.5px; font-weight:var(--fw-medium); color:var(--fp-faint); } .fp-netchip__value { font-family:var(--fp-mono); font-weight:var(--fw-semibold); font-size:15px; color:var(--fp-teal-deep); background:none; border-radius:0; padding:0; } .fp-btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); height:44px; padding:0 22px; border-radius:12px; border:1px solid transparent; font-family:inherit; font-size:var(--fs-ui); font-weight:var(--fw-semibold); cursor:pointer; white-space:nowrap; transition:background var(--fp-dur) var(--fp-ease), border-color var(--fp-dur) var(--fp-ease), transform var(--fp-dur) var(--fp-ease); } .fp-btn:active { transform:translateY(1px); } .fp-btn--sm { height:38px; padding:0 18px; font-size:var(--fs-small); border-radius:var(--r-sm); } .fp-btn--lg { height:50px; padding:0 30px; font-size:1rem; border-radius:var(--r-md); } .fp-btn--block { width:100%; } .fp-btn--primary { background:var(--fp-ink); color:#fff; } .fp-btn--primary:hover { background:#1c322d; } .fp-btn--accent { background:var(--fp-teal); color:#fff; } .fp-btn--accent:hover { background:#019b90; } .fp-btn--ghost { background:#fff; border-color:var(--fp-line); color:var(--fp-ink); } .fp-btn--ghost:hover { border-color:var(--fp-teal); color:var(--fp-teal-deep); } .fp-chip { display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-eyebrow); font-weight:var(--fw-semibold); letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--fp-teal-ink); background:none; padding:0; border-radius:0; } .fp-chip::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--fp-teal); } .fp-eyebrow { font-size:var(--fs-eyebrow); font-weight:var(--fw-semibold); letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--fp-faint); } .fp-breadcrumb { display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-meta); color:var(--fp-faint); padding-top:16px; } .fp-breadcrumb a:hover { color:var(--fp-ink); } .fp-breadcrumb [aria-current] { color:var(--fp-ink); } /* --------------------------------------------------------------------- 4. HERO / MAST --------------------------------------------------------------------- */ .fp-hero { max-width:720px; padding-top:var(--sp-2); } .fp-hero__title { font-size:var(--fs-h1); line-height:var(--lh-tight); letter-spacing:var(--ls-tight); font-weight:var(--fw-semibold); color:var(--fp-ink); margin-top:var(--sp-2); text-wrap:balance; } .fp-hero__lead { font-size:var(--fs-lead); line-height:var(--lh-normal); color:var(--fp-body); margin-top:var(--sp-2); max-width:640px; text-wrap:pretty; } /* --------------------------------------------------------------------- 5. CALCULATOR GRID (inputs + sticky result) --------------------------------------------------------------------- */ .fp-calc { display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:var(--sp-7); padding-top:var(--sp-6); align-items:start; } .fp-result-col { position:sticky; top:calc(var(--fp-nav-h) + var(--sp-6)); display:flex; flex-direction:column; gap:var(--sp-4); } /* --------------------------------------------------------------------- 6. INPUT PANEL --------------------------------------------------------------------- */ .fp-panel { background:#fff; border:1px solid var(--fp-line); border-radius:var(--r-2xl); padding:30px 30px 32px; } .fp-panel__head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; } .fp-panel__title { font-size:18px; font-weight:var(--fw-semibold); color:var(--fp-ink); } .fp-field { margin-top:var(--sp-7); } .fp-field:first-of-type { margin-top:var(--sp-7); } .fp-field__row { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); } .fp-label { font-size:14.5px; font-weight:var(--fw-semibold); color:var(--fp-ink); } .fp-field__hint { font-size:var(--fs-meta); color:var(--fp-disabled); margin-top:6px; } .fp-field__value { font-family:var(--fp-mono); font-size:14px; font-weight:var(--fw-semibold); color:var(--fp-teal-ink); } /* — Segmented control (Monatlich/Jährlich) — */ .fp-seg { display:inline-flex; background:var(--fp-surface-2); border-radius:11px; padding:3px; } .fp-seg__btn { border:none; background:transparent; color:var(--fp-faint); font-family:inherit; font-size:13.5px; font-weight:var(--fw-semibold); padding:8px 16px; border-radius:9px; cursor:pointer; transition:background var(--fp-dur) var(--fp-ease), color var(--fp-dur) var(--fp-ease), box-shadow var(--fp-dur) var(--fp-ease); } .fp-seg__btn:hover { color:var(--fp-ink); } .fp-seg__btn[aria-pressed="true"] { background:#fff; color:var(--fp-ink); box-shadow:var(--sh-sm); } /* — Numeric stepper field — */ .fp-numbox { display:flex; align-items:center; gap:6px; background:var(--fp-surface); border:1px solid var(--fp-line); border-radius:var(--r-sm); padding:6px 12px; transition:border-color var(--fp-dur) var(--fp-ease), box-shadow var(--fp-dur) var(--fp-ease); } .fp-numbox:focus-within { border-color:var(--fp-teal); box-shadow:var(--fp-focus-ring); } .fp-numbox__input { width:78px; border:none; background:none; font-family:var(--fp-mono); font-size:16px; font-weight:var(--fw-semibold); color:var(--fp-ink); text-align:right; outline:none; } .fp-numbox__unit { font-size:14px; color:var(--fp-faint); font-weight:var(--fw-medium); } /* — Range slider — */ .fp-range { -webkit-appearance:none; appearance:none; width:100%; height:6px; margin:16px 0 0; border-radius:var(--r-pill); background:linear-gradient(var(--fp-teal),var(--fp-teal)) no-repeat, var(--fp-surface-2); background-size:50% 100%; cursor:pointer; } .fp-range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%; background:#fff; border:1px solid var(--fp-line); box-shadow:var(--sh-sm); cursor:grab; transition:transform var(--fp-dur) var(--fp-ease); } .fp-range::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:#fff; border:1px solid var(--fp-line); box-shadow:var(--sh-sm); cursor:grab; } .fp-range::-webkit-slider-thumb:hover { transform:scale(1.08); } .fp-range:active::-webkit-slider-thumb { cursor:grabbing; } .fp-range:focus-visible { outline:none; } .fp-range:focus-visible::-webkit-slider-thumb { box-shadow:var(--fp-focus-ring); } .fp-range__scale { display:flex; justify-content:space-between; font-size:12px; color:var(--fp-disabled); font-family:var(--fp-mono); margin-top:6px; } /* — Select — */ .fp-selects { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); margin-top:var(--sp-7); } .fp-selects__full { grid-column:1 / -1; } .fp-select-wrap { position:relative; margin-top:var(--sp-2); } .fp-select { -webkit-appearance:none; appearance:none; width:100%; height:46px; padding:0 38px 0 14px; border:1px solid var(--fp-line); border-radius:11px; font-family:inherit; font-size:14.5px; color:var(--fp-ink); background:#fff; cursor:pointer; outline:none; transition:border-color var(--fp-dur) var(--fp-ease), box-shadow var(--fp-dur) var(--fp-ease); } .fp-select:hover { border-color:rgba(17,32,29,.22); } .fp-select:focus-visible { border-color:var(--fp-teal); box-shadow:var(--fp-focus-ring); } .fp-select-wrap__chev { position:absolute; right:14px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--fp-faint); display:flex; } /* — Switch toggle (Kirchensteuer) — */ .fp-switchrow { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-top:var(--sp-6); padding:16px 18px; background:var(--fp-surface); border-radius:var(--r-md); } .fp-switchrow__title { font-size:14.5px; font-weight:var(--fw-semibold); color:var(--fp-ink); } .fp-switchrow__sub { font-size:var(--fs-meta); color:var(--fp-faint); margin-top:2px; } .fp-switch { position:relative; width:48px; height:28px; border-radius:var(--r-pill); border:none; cursor:pointer; flex:none; background:#cfd6d4; transition:background var(--fp-dur) var(--fp-ease); } .fp-switch__knob { position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform var(--fp-dur) var(--fp-ease); } .fp-switch[aria-checked="true"] { background:var(--fp-teal); } .fp-switch[aria-checked="true"] .fp-switch__knob { transform:translateX(20px); } .fp-switch:focus-visible { box-shadow:var(--fp-focus-ring); } /* --------------------------------------------------------------------- 7. RESULT PANEL (dark, sticky) --------------------------------------------------------------------- */ .fp-result { position:relative; overflow:hidden; background:var(--fp-dark); border-radius:var(--r-2xl); padding:30px; color:#fff; } .fp-result__glow { position:absolute; right:-50px; top:-50px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle,var(--fp-teal) 0%,transparent 70%); opacity:.3; pointer-events:none; } .fp-result__inner { position:relative; } .fp-result__label { font-size:13px; font-weight:var(--fw-medium); color:var(--fp-dark-2); } .fp-result__amount { display:flex; align-items:baseline; gap:8px; margin-top:var(--sp-2); } .fp-result__big { font-family:var(--fp-mono); font-size:var(--fs-display); font-weight:var(--fw-semibold); letter-spacing:var(--ls-tight); line-height:1; } .fp-result__cur { font-size:16px; color:var(--fp-dark-2); } .fp-result__sub { font-size:13.5px; color:var(--fp-dark-2); margin-top:var(--sp-2); } .fp-result__rule { height:1px; background:rgba(255,255,255,.12); margin:var(--sp-5) 0; } /* breakdown rows + bars */ .fp-breakdown { display:flex; flex-direction:column; gap:13px; } .fp-brow__head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); } .fp-brow__label { font-size:13.5px; color:var(--fp-dark-3); } .fp-brow__amt { font-family:var(--fp-mono); font-size:13.5px; font-weight:var(--fw-medium); } .fp-brow__amt--tax { color:var(--fp-bar-tax); } .fp-brow__amt--social { color:#aeb9b5; } .fp-brow__amt--gross { color:var(--fp-dark-3); } .fp-brow__track { height:4px; border-radius:2px; background:rgba(255,255,255,.08); margin-top:6px; overflow:hidden; } .fp-brow__fill { height:100%; border-radius:2px; transition:width .3s var(--fp-ease); } .fp-brow__fill--tax { background:var(--fp-bar-tax); } .fp-brow__fill--social { background:var(--fp-bar-social); } .fp-brow__fill--gross { background:var(--fp-bar-gross); } .fp-result__total { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid rgba(255,255,255,.12); } .fp-result__total-label { font-size:15px; font-weight:var(--fw-semibold); color:#fff; } .fp-result__total-val { font-family:var(--fp-mono); font-size:18px; font-weight:var(--fw-semibold); color:var(--fp-net); } /* result-side inline CTA */ .fp-result-cta { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); background:var(--fp-teal-tint); border:1px solid var(--fp-teal-line); border-radius:var(--r-md); padding:18px 20px; } .fp-result-cta__title { font-size:14.5px; font-weight:var(--fw-semibold); color:var(--fp-teal-on); } .fp-result-cta__sub { font-size:var(--fs-meta); color:var(--fp-teal-on-2); margin-top:2px; } .fp-result-cta__icon { flex:none; width:28px; height:28px; border-radius:50%; background:var(--fp-teal); color:#fff; display:flex; align-items:center; justify-content:center; } .fp-result-cta__icon svg { width:14px; height:14px; } /* --------------------------------------------------------------------- 8. INFO PANELS · definition, methodology, TL;DR --------------------------------------------------------------------- */ .fp-defbox { margin-top:var(--sp-5); background:var(--fp-surface); border:0; border-radius:var(--r-xl); padding:22px 26px; } .fp-defbox__text { font-size:16px; line-height:var(--lh-body); color:var(--fp-body); margin-top:var(--sp-3); max-width:760px; } .fp-defbox__text strong { font-weight:var(--fw-semibold); color:var(--fp-ink); } .fp-defbox__src { font-size:12.5px; color:var(--fp-disabled); margin-top:var(--sp-3); font-family:var(--fp-mono); } .fp-tldr { margin-top:var(--sp-4); border:0; border-radius:var(--r-xl); background:var(--fp-surface); padding:22px 26px; } .fp-tldr__head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; } .fp-tldr__title { font-size:var(--fs-h3); font-weight:var(--fw-semibold); letter-spacing:var(--ls-snug); color:var(--fp-ink); } .fp-tldr__sub { font-size:var(--fs-ui); color:var(--fp-faint); margin:6px 0 18px; } /* Rating (stars + score + count) */ .fp-rating { display:inline-flex; align-items:center; gap:var(--sp-2); } .fp-rating__stars { display:inline-flex; gap:2px; color:var(--fp-teal); } .fp-rating__stars svg { width:15px; height:15px; } .fp-rating__score { font-size:var(--fs-small); font-weight:var(--fw-semibold); color:var(--fp-ink); } .fp-rating__count { font-size:var(--fs-meta); color:var(--fp-faint); } /* "So funktioniert" result note — quiet accent-rule line */ .fp-hownote { margin-top:var(--sp-6); font-size:var(--fs-ui); line-height:var(--lh-body); color:var(--fp-muted); border-left:2px solid var(--fp-teal); padding:4px 0 4px var(--sp-5); } /* Methodology long-form block */ .fp-method { margin-top:var(--sp-6); background:var(--fp-surface); border:0; border-radius:var(--r-xl); padding:22px 26px; } .fp-method__title { font-size:var(--fs-h3); font-weight:var(--fw-semibold); letter-spacing:var(--ls-snug); color:var(--fp-ink); } .fp-method__p { font-size:var(--fs-ui); line-height:var(--lh-body); color:var(--fp-body); margin-top:var(--sp-4); max-width:780px; } .fp-method__src { font-size:12.5px; color:var(--fp-disabled); margin-top:var(--sp-5); font-family:var(--fp-mono); line-height:var(--lh-normal); } .fp-checklist { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--sp-5); } .fp-checklist li { display:flex; gap:14px; align-items:flex-start; } .fp-check { flex:none; margin-top:2px; width:20px; height:20px; border-radius:0; background:none; display:inline-flex; align-items:center; justify-content:center; color:var(--fp-teal); } .fp-check svg { width:18px; height:18px; stroke:var(--fp-teal); } .fp-checklist span { font-size:var(--fs-ui); line-height:1.6; color:var(--fp-ink-2); } .fp-checklist strong { font-weight:var(--fw-semibold); color:var(--fp-ink); } /* Apple-pure note: thin accent rule, no fill, no icon circle */ .fp-callout { display:block; border:0; border-left:2px solid var(--fp-line); border-radius:0; background:none; padding:4px 0 4px var(--sp-5); margin-top:var(--sp-8); max-width:var(--fp-measure); } .fp-callout__icon { display:none; } .fp-callout__title { font-weight:var(--fw-semibold); font-size:var(--fs-small); letter-spacing:var(--ls-snug); } .fp-callout__body { font-size:var(--fs-ui); line-height:1.65; color:var(--fp-muted); margin-top:6px; max-width:780px; } .fp-callout--info { border-left-color:var(--fp-teal); } .fp-callout--info .fp-callout__title { color:var(--fp-teal-deep); } .fp-callout--info .fp-callout__body { color:var(--fp-muted); } /* --------------------------------------------------------------------- 9. SECTION HEADINGS + GRIDS --------------------------------------------------------------------- */ .fp-section { margin-top:36px; scroll-margin-top:calc(var(--fp-nav-h) + var(--sp-6)); } .fp-h2 { font-size:var(--fs-h2); font-weight:var(--fw-semibold); letter-spacing:var(--ls-snug); color:var(--fp-ink); } .fp-section__intro { font-size:16px; color:var(--fp-faint); margin:10px 0 0; max-width:620px; } .fp-howgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--sp-4); margin-top:var(--sp-6); } .fp-howcard { border:1px solid var(--fp-line); border-radius:var(--r-lg); padding:24px; } .fp-howcard__n { font-family:var(--fp-mono); font-size:13px; font-weight:var(--fw-semibold); color:var(--fp-teal); } .fp-howcard__title { font-weight:var(--fw-semibold); font-size:16.5px; color:var(--fp-ink); margin-top:var(--sp-3); } .fp-howcard__body { font-size:var(--fs-small); line-height:var(--lh-normal); color:var(--fp-muted); margin-top:var(--sp-2); } /* "Auf einen Blick" / verdict cards */ .fp-insights { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--sp-4); margin-top:var(--sp-6); } .fp-insight { border:1px solid var(--fp-line); border-radius:var(--r-lg); padding:22px 24px; } .fp-insight__tag { font-size:var(--fs-eyebrow); font-weight:var(--fw-semibold); letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--fp-teal-ink); } .fp-insight__body { font-size:var(--fs-ui); line-height:var(--lh-body); color:var(--fp-body); margin-top:var(--sp-3); } /* use-case cards */ .fp-cases { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:var(--sp-4); margin-top:var(--sp-6); } .fp-case { display:flex; gap:var(--sp-4); border:1px solid var(--fp-line); border-radius:var(--r-lg); padding:22px 24px; align-items:flex-start; } .fp-case__n { flex:none; width:36px; height:36px; border-radius:50%; border:1.5px solid var(--fp-teal); color:var(--fp-teal-ink); font-weight:var(--fw-semibold); font-size:15px; display:flex; align-items:center; justify-content:center; font-family:var(--fp-mono); } .fp-case__title { font-weight:var(--fw-semibold); font-size:16px; color:var(--fp-ink); } .fp-case__body { font-size:var(--fs-small); line-height:var(--lh-normal); color:var(--fp-muted); margin-top:6px; } /* --------------------------------------------------------------------- 10. CHART / VISUALISATION (placeholder) --------------------------------------------------------------------- */ .fp-chart { margin-top:var(--sp-6); border:1px solid var(--fp-line); border-radius:var(--r-xl); padding:26px 28px; } .fp-chart__head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; } .fp-chart__title { font-size:16.5px; font-weight:var(--fw-semibold); color:var(--fp-ink); } .fp-chart__legend { display:flex; gap:var(--sp-4); flex-wrap:wrap; } .fp-legend { display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-meta); color:var(--fp-muted); } .fp-legend__dot { width:10px; height:10px; border-radius:3px; } .fp-legend__dot--net { background:var(--fp-teal); } .fp-legend__dot--tax { background:var(--fp-bar-tax); } .fp-legend__dot--social { background:var(--fp-bar-social); } /* stacked horizontal bar (pure CSS; widths set via width utility classes) */ .fp-stack { display:flex; height:44px; border-radius:var(--r-sm); overflow:hidden; margin-top:var(--sp-5); background:var(--fp-surface-2); } .fp-stack__seg { display:flex; align-items:center; justify-content:center; font-size:var(--fs-meta); font-weight:var(--fw-semibold); color:#fff; min-width:0; white-space:nowrap; } .fp-stack__seg--net { background:var(--fp-teal); } .fp-stack__seg--tax { background:var(--fp-bar-tax); color:#5a2e22; } .fp-stack__seg--social { background:var(--fp-bar-social); color:#28332f; } .fp-stack__note { font-size:var(--fs-meta); color:var(--fp-disabled); margin-top:var(--sp-3); font-family:var(--fp-mono); } /* width helpers used by the stacked bar (data-driven on server/JS) */ .fp-w-net { flex:0 0 65%; } .fp-w-tax { flex:0 0 14%; } .fp-w-social { flex:0 0 21%; } /* assumptions / sources */ .fp-assumptions { margin-top:var(--sp-6); padding:18px 22px; background:var(--fp-surface); border-radius:var(--r-md); } .fp-assumptions__label { font-size:var(--fs-eyebrow); font-weight:var(--fw-semibold); letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--fp-faint); } .fp-assumptions__text { font-size:var(--fs-meta); color:var(--fp-muted); margin-top:var(--sp-2); line-height:var(--lh-normal); } /* --------------------------------------------------------------------- 11. FAQ (shared) --------------------------------------------------------------------- */ .fp-faq { margin-top:var(--sp-5); border-top:1px solid var(--fp-line); } .fp-faq__item { border-bottom:1px solid var(--fp-line); } .fp-faq__q { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); padding:20px 0; font-size:16.5px; font-weight:var(--fw-semibold); color:var(--fp-ink); } .fp-faq__q::-webkit-details-marker { display:none; } .fp-faq__chev { flex:none; color:var(--fp-teal); transition:transform .25s var(--fp-ease); } .fp-faq__item[open] .fp-faq__chev { transform:rotate(180deg); } .fp-faq__a { font-size:var(--fs-ui); line-height:var(--lh-body); color:var(--fp-body); padding:0 0 22px; max-width:760px; } /* --------------------------------------------------------------------- 12. CROSS-LINK BANNER (dark) --------------------------------------------------------------------- */ .fp-xbanner { position:relative; overflow:hidden; margin-top:var(--sp-14); background:var(--fp-dark); border-radius:var(--r-2xl); padding:38px 40px; color:#fff; } .fp-xbanner__glow { position:absolute; right:-60px; bottom:-80px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle,var(--fp-teal) 0%,transparent 70%); opacity:.3; pointer-events:none; } .fp-xbanner__inner { position:relative; max-width:620px; } .fp-xbanner__title { font-size:clamp(1.5rem,3.4vw,2rem); font-weight:var(--fw-semibold); letter-spacing:var(--ls-snug); line-height:var(--lh-snug); } .fp-xbanner__text { font-size:var(--fs-ui); line-height:var(--lh-body); color:#b9c5c2; margin-top:var(--sp-3); } .fp-xbanner__actions { display:flex; align-items:center; gap:var(--sp-4); margin-top:var(--sp-6); flex-wrap:wrap; } .fp-xbanner__meta { font-size:var(--fs-meta); color:#8fa09c; font-family:var(--fp-mono); } /* --------------------------------------------------------------------- 13. RELATED TILES + FOOTER (shared) --------------------------------------------------------------------- */ .fp-related { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--sp-5); margin-top:var(--sp-6); } .fp-relcard { display:block; border:1px solid var(--fp-line); border-radius:var(--r-lg); padding:22px; transition:border-color var(--fp-dur) var(--fp-ease), transform var(--fp-dur) var(--fp-ease), box-shadow var(--fp-dur) var(--fp-ease); } .fp-relcard:hover { border-color:var(--fp-teal); transform:translateY(-2px); box-shadow:var(--sh-pop); } .fp-relcard__cat { font-size:var(--fs-eyebrow); font-weight:var(--fw-semibold); letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--fp-teal-ink); } .fp-relcard__title { font-size:16.5px; font-weight:var(--fw-semibold); color:var(--fp-ink); margin-top:var(--sp-3); line-height:var(--lh-snug); } .fp-relcard__desc { font-size:var(--fs-small); line-height:var(--lh-normal); color:var(--fp-muted); margin:var(--sp-3) 0 var(--sp-4); } .fp-relcard__more { font-size:var(--fs-small); font-weight:var(--fw-semibold); color:var(--fp-teal); } .fp-footer { margin-top:var(--sp-20); border-top:1px solid var(--fp-line-soft); background:#fff; } .fp-footer__grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--sp-8); padding-top:var(--sp-12); } .fp-footer__about { font-size:var(--fs-meta); line-height:var(--lh-normal); color:var(--fp-faint); margin-top:var(--sp-3); max-width:240px; } .fp-footer__h { font-size:var(--fs-meta); font-weight:var(--fw-semibold); color:var(--fp-ink); margin-bottom:var(--sp-3); } .fp-footer__link { display:block; font-size:var(--fs-small); color:var(--fp-muted); padding:5px 0; } .fp-footer__link:hover { color:var(--fp-teal-deep); } .fp-footer__legal { font-size:var(--fs-meta); color:var(--fp-disabled); margin-top:var(--sp-8); padding:var(--sp-5) 0 var(--sp-12); border-top:1px solid var(--fp-line-hair); } /* Dark footer variant (token-based — replaces inline-styled dark footer). Usage: