/* ============================================================
   FFM AG — Landing Page Styles (production handoff)
   Self-contained: tokens + components + layout in one file.
   Framework-free. Fonts via Google Fonts, icons via Lucide CDN.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---------- DESIGN TOKENS ---------- */
:root {
  /* Brand blue scale (steel → steel navy) */
  --blue-50:#F1F6FB; --blue-100:#E2EDF7; --blue-200:#C3DAEE; --blue-300:#9DBFDF;
  --blue-400:#6E9CCB; --blue-500:#3F7CB8; --blue-600:#2C619C; --blue-700:#214D7E;
  --blue-800:#173A60; --blue-900:#0E2742; --blue-950:#081A2E;

  /* Slate neutrals */
  --slate-50:#F7F9FB; --slate-100:#EEF1F5; --slate-200:#DEE3EA; --slate-300:#C5CDD7;
  --slate-400:#9BA6B3; --slate-500:#717C8A; --slate-600:#5A6573; --slate-700:#434C58;
  --slate-800:#2E353F; --slate-900:#1A1F26; --white:#FFFFFF;

  /* Semantic aliases */
  --brand:var(--blue-600); --brand-strong:var(--blue-700); --brand-deep:var(--blue-900);
  --brand-accent:var(--blue-500); --brand-soft:var(--blue-100);
  --text-strong:var(--slate-900); --text-body:var(--slate-700); --text-muted:var(--slate-500);
  --text-faint:var(--slate-400); --text-on-dark:var(--white); --text-on-dark-muted:#AFC2D6;
  --text-brand:var(--blue-600);
  --surface-page:var(--slate-50); --surface-card:var(--white); --surface-sunken:var(--slate-100);
  --surface-soft:var(--blue-50); --surface-dark:var(--blue-900); --surface-dark-2:var(--blue-950);
  --border-subtle:var(--slate-200); --border-default:var(--slate-300); --border-strong:var(--slate-400);
  --border-on-dark:rgba(157,191,223,0.22); --focus-ring:var(--blue-500);

  /* Type */
  --font-display:'Sora',system-ui,sans-serif;
  --font-sans:'IBM Plex Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  /* Spacing (8px grid) */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:2.5rem; --space-8:3rem; --space-9:4rem; --space-10:5rem;
  --section-y:clamp(4rem,9vw,8rem); --container-max:1200px; --container-wide:1320px;

  /* Radii */
  --radius-xs:3px; --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px;

  /* Shadows */
  --shadow-xs:0 1px 2px rgba(14,39,66,.06); --shadow-sm:0 2px 6px rgba(14,39,66,.07);
  --shadow-md:0 8px 24px rgba(14,39,66,.09); --shadow-lg:0 18px 48px rgba(14,39,66,.13);
  --shadow-focus:0 0 0 3px rgba(63,124,184,.35);

  /* Motion */
  --ease-out:cubic-bezier(.22,.61,.36,1); --dur-fast:130ms; --dur-base:220ms; --dur-slow:420ms;
}

/* ---------- RESET ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; font-family:var(--font-sans); color:var(--text-body);
  background:var(--surface-card); -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img { display:block; max-width:100%; }
a { color:inherit; }
h1,h2,h3,p { margin:0; }
.container { max-width:var(--container-max); margin:0 auto; padding:0 var(--space-6); }
.container-wide { max-width:var(--container-wide); margin:0 auto; padding:0 var(--space-6); }

/* ---------- SHARED TYPOGRAPHY ---------- */
.eyebrow {
  font-family:var(--font-mono); font-size:.75rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-brand); display:inline-block;
}
.eyebrow--on-dark { color:var(--blue-300); }
.section-title {
  font-family:var(--font-display); font-weight:700; color:var(--text-strong);
  font-size:clamp(2rem,3.4vw,3rem); line-height:1.08; letter-spacing:-0.02em; margin-top:var(--space-5);
}
.lead { font-size:1.1875rem; line-height:1.6; color:var(--text-muted); margin-top:18px; }

/* ---------- BUTTON ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:46px; padding:0 20px; font-family:var(--font-sans); font-size:.9375rem; font-weight:600;
  line-height:1; letter-spacing:.005em; border-radius:var(--radius-sm); border:1.5px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform:translateY(1px); }
.btn:focus-visible { outline:none; box-shadow:var(--shadow-focus); }
.btn--sm { height:36px; padding:0 14px; font-size:.8125rem; gap:7px; }
.btn--lg { height:56px; padding:0 28px; font-size:1.0625rem; gap:10px; }
.btn .icon { width:18px; height:18px; flex:0 0 auto; }

.btn--primary { background:var(--brand); color:#fff; border-color:var(--brand); }
.btn--primary:hover { background:var(--brand-strong); border-color:var(--brand-strong); }
.btn--secondary { background:transparent; color:var(--brand-strong); border-color:var(--border-default); }
.btn--secondary:hover { background:var(--surface-soft); border-color:var(--brand-accent); }
.btn--light { background:#fff; color:var(--brand-strong); border-color:#fff; }
.btn--light:hover { background:var(--blue-50); }
.btn--outline-light { background:transparent; color:#fff; border-color:var(--border-on-dark); }
.btn--outline-light:hover { background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.55); }

/* ---------- HEADER ---------- */
.site-header {
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--border-subtle);
}
.site-header__inner {
  max-width:var(--container-wide); margin:0 auto; padding:0 var(--space-6); height:76px;
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-5);
}
.site-header__logo img { height:38px; }
.site-nav { display:flex; align-items:center; gap:var(--space-6); }
.site-nav a {
  font-size:.9375rem; font-weight:500; color:var(--text-body); text-decoration:none;
  transition:color var(--dur-fast) var(--ease-out);
}
.site-nav a:hover { color:var(--brand); }

/* ---------- HERO ---------- */
.hero { position:relative; background:var(--surface-dark); overflow:hidden; }
.hero__discs { position:absolute; inset:0; pointer-events:none; }
.disc { position:absolute; border-radius:50%; mix-blend-mode:screen; }
.hero .disc--a { width:520px; height:520px; background:#3F7CB8; opacity:.30; top:-120px; right:60px; }
.hero .disc--b { width:460px; height:460px; background:#6E9CCB; opacity:.26; top:-40px; right:-90px; }
.hero .disc--c { width:360px; height:360px; background:#9DBFDF; opacity:.22; top:120px; right:200px; }
.hero__vignette { position:absolute; inset:0; background:radial-gradient(120% 90% at 80% 0%, transparent 40%, rgba(8,26,46,.55) 100%); }
.hero__inner { position:relative; max-width:var(--container-wide); margin:0 auto; padding:96px var(--space-6) 72px; }
.hero__grid { display:grid; grid-template-columns:1.15fr .85fr; gap:var(--space-9); align-items:center; min-height:560px; }
.hero__title {
  font-family:var(--font-display); font-weight:800; color:#fff;
  font-size:clamp(2.4rem,4.4vw,3.9rem); line-height:1.06; letter-spacing:-0.025em; margin-top:22px;
}
.hero__title .accent { color:var(--blue-300); }
.hero__sub { color:var(--text-on-dark-muted); font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.55; max-width:560px; margin-top:24px; }
.hero__actions { display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-7); }

/* Vorsorge-Check card */
.check-card {
  width:100%; max-width:380px; margin:0 auto; background:rgba(255,255,255,.06);
  border:1px solid var(--border-on-dark); border-radius:var(--radius-xl);
  backdrop-filter:blur(8px); padding:var(--space-6); box-shadow:var(--shadow-lg);
}
.check-card__head { display:flex; align-items:center; justify-content:space-between; }
.check-card__rows { margin-top:22px; display:flex; flex-direction:column; gap:14px; }
.check-row__label { display:flex; justify-content:space-between; margin-bottom:6px; }
.check-row__label span:first-child { font-size:13px; color:#fff; font-weight:500; }
.check-row__label span:last-child { font-family:var(--font-mono); font-size:11px; color:var(--blue-300); }
.check-bar { height:5px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden; }
.check-bar > span { display:block; height:100%; border-radius:999px; background:var(--blue-400); }
.check-bar--full > span { background:var(--blue-300); }
.check-card__foot { margin-top:22px; padding-top:18px; border-top:1px solid var(--border-on-dark); display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text-on-dark-muted); }

/* trust bar */
.trustbar { display:flex; flex-wrap:wrap; gap:var(--space-8); align-items:center; padding:26px 0; border-top:1px solid var(--border-on-dark); }
.stat { display:flex; flex-direction:column; gap:4px; }
.stat__value { font-family:var(--font-display); font-weight:700; font-size:1.75rem; color:#fff; line-height:1; }
.stat__label { font-size:13px; color:var(--text-on-dark-muted); }

/* ---------- ABOUT ---------- */
.about { background:var(--surface-card); padding:var(--section-y) 0; }
.about__grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--space-9); align-items:start; }
.about__intro { position:sticky; top:110px; }
.about__intro .section-title { font-size:clamp(2rem,3.4vw,3rem); }
.about__note {
  margin-top:var(--space-6); max-width:380px; display:flex; gap:14px; align-items:flex-start;
  background:var(--surface-soft); border:1px solid var(--blue-100); border-radius:var(--radius-lg); padding:var(--space-5);
}
.about__note .icon { width:22px; height:22px; color:var(--brand); flex:0 0 auto; }
.about__note p { font-size:14px; line-height:1.55; color:var(--text-body); }
.about__body { display:flex; flex-direction:column; gap:var(--space-5); }
.about__body p { font-size:1.1875rem; line-height:1.65; color:var(--text-body); }
.about__body strong { color:var(--text-strong); }
.value-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); margin-top:var(--space-4); }
.value-tile {
  display:flex; flex-direction:column; gap:10px; padding:var(--space-4);
  border-left:2px solid var(--brand-accent); background:var(--surface-page);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.value-tile .icon { width:22px; height:22px; color:var(--brand); }
.value-tile span { font-weight:600; font-size:15px; color:var(--text-strong); }

/* ---------- SERVICES (3 pillars) ---------- */
.services { background:var(--surface-page); padding:var(--section-y) 0; }
.services__head { max-width:720px; }
.services__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); margin-top:var(--space-8); align-items:start; }
.pillar {
  background:var(--surface-card); border:1px solid var(--border-subtle); box-shadow:var(--shadow-sm);
  border-radius:var(--radius-lg); padding:var(--space-6); display:flex; flex-direction:column;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.pillar:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--blue-300); }
.pillar__head { display:flex; align-items:flex-start; justify-content:space-between; }
.pillar__icon { width:48px; height:48px; border-radius:var(--radius-md); background:var(--brand-soft); display:flex; align-items:center; justify-content:center; }
.pillar__icon .icon { width:24px; height:24px; color:var(--brand); }
.pillar__no { font-family:var(--font-mono); font-size:13px; font-weight:500; letter-spacing:.12em; color:var(--text-faint); }
.pillar__title { font-family:var(--font-display); font-weight:600; font-size:1.375rem; color:var(--text-strong); letter-spacing:-0.01em; margin:18px 0 4px; }
.pillar__blurb { font-size:14px; color:var(--text-muted); margin-bottom:16px; }
.pillar__items { display:flex; flex-direction:column; gap:12px; margin-top:auto; }
.pillar-item { display:flex; gap:11px; padding-top:12px; border-top:1px solid var(--border-subtle); }
.pillar-item .icon { width:16px; height:16px; color:var(--brand-accent); flex:0 0 auto; margin-top:2px; }
.pillar-item__t { font-weight:600; font-size:14.5px; color:var(--text-strong); }
.pillar-item__d { font-size:13.5px; line-height:1.5; color:var(--text-body); margin-top:2px; }

/* ---------- PROCESS (3 steps) ---------- */
.process { background:var(--surface-card); padding:var(--section-y) 0; }
.process__head { max-width:640px; }
.process__grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:var(--space-8); border-top:1px solid var(--border-subtle); border-left:1px solid var(--border-subtle); }
.step { padding:var(--space-6); border-right:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); display:flex; gap:var(--space-4); }
.step__rail { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:12px; }
.step__no { font-family:var(--font-mono); font-size:13px; font-weight:500; color:var(--brand-accent); letter-spacing:.1em; }
.step__line { width:1px; flex:1; background:var(--border-subtle); }
.step__icon { width:44px; height:44px; border-radius:var(--radius-md); background:var(--brand-soft); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.step__icon .icon { width:22px; height:22px; color:var(--brand); }
.step__title { font-family:var(--font-display); font-weight:600; font-size:1.25rem; color:var(--text-strong); letter-spacing:-0.01em; margin-bottom:8px; }
.step__body { font-size:15px; line-height:1.6; color:var(--text-body); }

/* ---------- CTA ---------- */
.cta { position:relative; background:var(--surface-dark-2); overflow:hidden; padding:var(--section-y) 0; }
.cta .disc--a { width:440px; height:440px; background:#3F7CB8; opacity:.26; bottom:-180px; left:8%; }
.cta .disc--b { width:380px; height:380px; background:#6E9CCB; opacity:.22; bottom:-140px; left:20%; }
.cta__inner { position:relative; max-width:var(--container-max); margin:0 auto; padding:0 var(--space-6); text-align:center; }
.cta__title { font-family:var(--font-display); font-weight:700; color:#fff; font-size:clamp(2.2rem,4vw,3.4rem); line-height:1.06; letter-spacing:-0.025em; margin:22px auto 0; max-width:760px; }
.cta__sub { font-size:1.1875rem; line-height:1.55; color:var(--text-on-dark-muted); margin:20px auto 0; max-width:580px; }
.cta__tag { font-family:var(--font-mono); font-size:13px; letter-spacing:.08em; color:var(--blue-300); margin:18px auto 0; }
.cta__actions { display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:center; margin-top:var(--space-7); }

/* ---------- FOOTER ---------- */
.site-footer { background:var(--surface-dark); color:var(--text-on-dark-muted); }
.site-footer__inner { max-width:var(--container-wide); margin:0 auto; padding:var(--space-9) var(--space-6) var(--space-6); }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--space-7); }
.site-footer img { height:40px; }
.footer-about p { font-size:15px; line-height:1.6; margin-top:20px; max-width:300px; }
.footer-social { display:flex; gap:12px; margin-top:22px; }
.footer-social a { width:40px; height:40px; border-radius:var(--radius-sm); border:1px solid var(--border-on-dark); display:flex; align-items:center; justify-content:center; color:var(--blue-300); }
.footer-social .icon { width:17px; height:17px; }
.footer-col__title { font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-300); margin-bottom:18px; }
.footer-col__links { display:flex; flex-direction:column; gap:11px; }
.footer-col__links a { font-size:14.5px; color:var(--text-on-dark-muted); text-decoration:none; transition:color var(--dur-fast) var(--ease-out); }
.footer-col__links a:hover { color:#fff; }
.footer-legal { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; margin-top:var(--space-8); padding-top:var(--space-5); border-top:1px solid var(--border-on-dark); }
.footer-legal__copy { font-family:var(--font-mono); font-size:12px; color:var(--text-faint); }
.footer-legal__links { display:flex; gap:24px; }
.footer-legal__links a { font-size:13px; color:var(--text-faint); text-decoration:none; }
.footer-legal__links a:hover { color:#fff; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px) {
  .hero__grid, .about__grid { grid-template-columns:1fr; gap:var(--space-7); }
  .about__intro { position:static; }
  .services__grid, .process__grid, .value-tiles { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:720px) {
  .site-nav { display:none; }
  .footer-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  * { scroll-behavior:auto !important; transition:none !important; }
}

/* ---------- CMS ADDITIONS ---------- */
.contact-form {
  display:grid;
  gap:var(--space-4);
  max-width:820px;
  margin:var(--space-7) auto 0;
}
.form-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-3);
}
.contact-form input,
.contact-form textarea {
  width:100%;
  border:1px solid var(--border-on-dark);
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.08);
  color:#fff;
  padding:15px 16px;
  font:inherit;
}
.contact-form textarea {
  min-height:130px;
  resize:vertical;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color:var(--text-on-dark-muted);
}
.checkline {
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:var(--text-on-dark-muted);
  font-size:14px;
  text-align:left;
}
.checkline input {
  width:auto;
  margin-top:2px;
}
.cookie-banner {
  position:fixed;
  left:var(--space-5);
  right:var(--space-5);
  bottom:var(--space-5);
  z-index:80;
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  max-width:920px;
  margin:0 auto;
  padding:var(--space-4);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  background:#fff;
  box-shadow:var(--shadow-lg);
}
.cookie-banner.is-visible {
  display:flex;
}
.cookie-banner p {
  line-height:1.5;
  color:var(--text-body);
}
.legal-page {
  padding-top:var(--space-9);
  padding-bottom:var(--space-9);
  min-height:55vh;
}
.legal-page h1,
.legal-page h2 {
  font-family:var(--font-display);
  color:var(--text-strong);
  margin:0 0 var(--space-5);
}
.legal-page p,
.legal-page li {
  line-height:1.7;
}
.edit-toolbar {
  position:fixed;
  top:14px;
  left:50%;
  z-index:120;
  display:flex;
  align-items:center;
  gap:10px;
  transform:translateX(-50%);
  padding:10px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  background:#fff;
  box-shadow:var(--shadow-lg);
}
.edit-toolbar strong {
  color:var(--text-strong);
  padding:0 8px;
  white-space:nowrap;
}
.edit-mode [data-edit-label] {
  position:relative;
  outline:2px dashed rgba(63,124,184,.75);
  outline-offset:-2px;
}
.edit-mode [data-edit-label]::before {
  content:attr(data-edit-label);
  position:absolute;
  top:10px;
  left:10px;
  z-index:30;
  padding:5px 8px;
  border-radius:var(--radius-sm);
  background:var(--brand);
  color:#fff;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:var(--shadow-sm);
}
@media (max-width:720px) {
  .form-grid { grid-template-columns:1fr; }
  .cookie-banner {
    align-items:stretch;
    flex-direction:column;
  }
  .edit-toolbar {
    left:var(--space-3);
    right:var(--space-3);
    transform:none;
    flex-wrap:wrap;
  }
}