/* LeanPlus® – self-hosted stylesheet */

@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('fonts/inter-var.woff2') format('woff2');
}
@font-face{
  font-family:'Instrument Serif';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('fonts/instrument-serif-italic.woff2') format('woff2');
}

:root{
  --cream:#FFFDF9;
  --cream-2:#F7F5EF;
  --ink:#14161F;
  --ink-soft:#4B4E5A;
  --muted:#8A8D99;
  --accent:#0F586E;       /* Primär: dunkles Teal, aus dem LeanPlus-Icon gesampelt */
  --accent-soft:#E7F1F4;
  --accent-2:#E19744;     /* Sekundär: warmes Gold/Orange, ebenfalls aus dem Icon gesampelt */
  --accent-2-soft:#FBF3E3;
  --line:#EAE6DB;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.5;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
::selection{ background:var(--accent-soft); }

.script{ font-family:'Instrument Serif', Georgia, serif; font-style:italic; }
.accent{ color:var(--accent); }
.accent2{ color:var(--accent-2); }

.wrap{ max-width:1152px; margin:0 auto; padding:0 20px; }
.wrap-md{ max-width:960px; margin:0 auto; padding:0 20px; }
.wrap-sm{ max-width:768px; margin:0 auto; padding:0 20px; }

/* ---- Notice banner (Entwurf) ---- */
.notice{ background:#FEF3C7; color:#78350F; text-align:center; font-size:12px; padding:8px 14px; border-bottom:1px solid #FDE68A; }

/* ---- Header ---- */
header{ position:sticky; top:0; z-index:40; background:rgba(255,253,249,.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
.header-inner{ max-width:1152px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:10px; font-size:18px; font-weight:600; letter-spacing:-.01em; }
.brand img{ width:36px; height:36px; object-fit:contain; }
nav.mainnav{ display:flex; align-items:center; gap:28px; font-size:14px; font-weight:500; flex-wrap:wrap; }
nav.mainnav a{ color:var(--ink-soft); }
nav.mainnav a:hover{ color:var(--ink); }

/* ---- Buttons ---- */
.pill{ border-radius:999px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:14px; padding:10px 22px; transition:transform .15s ease, background .15s ease, border-color .15s ease; white-space:nowrap; }
.btn-dark{ background:var(--ink); color:var(--cream); }
.btn-dark:hover{ background:#2a2d3a; transform:translateY(-1px); }
.btn-light{ background:var(--cream-2); color:var(--ink); }
.btn-light:hover{ background:#eeebe2; transform:translateY(-1px); }
.btn-outline{ border:1.5px solid var(--line); color:var(--ink); background:transparent; }
.btn-outline:hover{ border-color:var(--ink); transform:translateY(-1px); }
.btn-lg{ padding:14px 28px; font-size:15px; }

/* ---- Hero ---- */
.hero{ text-align:center; padding:72px 20px 36px; max-width:860px; margin:0 auto; }
.badge{ display:inline-block; border:1px solid var(--line); border-radius:999px; padding:6px 16px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:26px; }
h1{ font-size:40px; line-height:1.1; font-weight:500; letter-spacing:-.01em; margin:0; }
.hero p.lead{ margin-top:26px; font-size:18px; color:var(--ink-soft); line-height:1.65; max-width:620px; margin-left:auto; margin-right:auto; }
.hero-ctas{ margin-top:34px; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.hero-trust{ margin-top:22px; font-size:12px; color:var(--muted); }

/* ---- Cards / grids ---- */
.card{ background:var(--cream-2); border-radius:28px; }
.stat-card{ max-width:960px; margin:0 auto; padding:0 20px 80px; }
.stat-card-inner{ padding:40px 28px; position:relative; }
.stat-grid{ display:grid; gap:30px; text-align:center; }
.stat-num{ font-size:36px; font-weight:600; color:var(--accent); }
.stat-label{ font-size:14px; color:var(--ink-soft); margin-top:4px; }
.kicker{ font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); text-align:center; margin-bottom:12px; }

.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.feature-card{ background:var(--cream-2); border-radius:24px; padding:28px; }
.icon-badge{ width:40px; height:40px; border-radius:999px; background:var(--ink); color:var(--cream); display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:16px; }
.feature-card h3{ font-size:16px; font-weight:600; margin:0 0 6px; }
.feature-card p{ font-size:14px; color:var(--ink-soft); margin:0; }

/* ---- Section generic ---- */
section{ padding:0; }
.section-pad{ padding:80px 20px; }
.section-alt{ background:var(--cream-2); }
.section-border{ border-top:1px solid var(--line); }
h2{ font-size:32px; font-weight:500; text-align:center; margin:0 0 16px; letter-spacing:-.01em; }
.section-sub{ text-align:center; color:var(--ink-soft); max-width:640px; margin:0 auto 48px; }

/* ---- Herausforderung (scroll-reveal) ---- */
.problem-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:40px; align-items:start; }
.problem-grid h2{ text-align:left; font-size:32px; line-height:1.25; margin:0; }
.sticky-wrap{ position:sticky; top:120px; }
.reveal-text{ font-size:26px; line-height:1.4; font-weight:500; min-height:150vh; padding-top:6vh; }
.reveal-line{ display:block; margin-bottom:18vh; color:#D9D6C9; transition:color .35s ease, background-color .35s ease; border-radius:6px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.reveal-line:last-child{ margin-bottom:6vh; }
.reveal-line.active{ color:var(--ink); background-color:var(--accent-soft); }
/* Kein JS verfügbar (Fallback, z.B. falls Script blockiert): alles direkt sichtbar */
.no-js .reveal-line{ color:var(--ink); background-color:var(--accent-soft); }

/* ---- Steps ---- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; text-align:center; }
.step-num{ width:40px; height:40px; border-radius:999px; background:var(--ink); color:var(--cream); display:flex; align-items:center; justify-content:center; font-weight:600; margin:0 auto 18px; }
.steps h3{ font-size:16px; font-weight:600; margin:0 0 8px; }
.steps p{ font-size:14px; color:var(--ink-soft); line-height:1.6; margin:0; }

/* ---- Netzwerk / partner cards ---- */
.quote{ text-align:center; max-width:640px; margin:0 auto 6px; font-size:22px; }
.quote-by{ text-align:center; font-size:12px; color:var(--muted); margin-bottom:48px; }
.partner-card{ background:var(--cream-2); border-radius:24px; padding:28px; display:flex; flex-direction:column; position:relative; }
.partner-card h3{ font-size:17px; font-weight:600; margin:14px 0 8px; }
.partner-card p{ font-size:14px; color:var(--ink-soft); flex:1; margin:0 0 20px; }
.partner-card .btn{ align-self:stretch; }

/* ---- Trust pills ---- */
.pills{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.trust-pill{ border:1px solid var(--line); background:var(--cream); border-radius:999px; padding:9px 16px; font-size:12px; font-weight:500; }

/* ---- Hero-Bild (voller Breite, unter den CTAs) ---- */
.hero-image{ max-width:1152px; margin:0 auto; padding:8px 20px 56px; }
.hero-image img{ width:100%; height:auto; }

/* ---- Wavy divider ---- */
.wavy-wrap{ line-height:0; }
.wavy-wrap svg{ display:block; width:100%; height:auto; }

/* ---- Footer ---- */
footer{ background:#14161F; color:#B7B9C4; }
.footer-inner{ max-width:1152px; margin:0 auto; padding:48px 20px 40px; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.footer-brand img{ width:36px; height:36px; object-fit:contain; }
.footer-brand span{ color:#fff; font-size:18px; font-weight:600; }
footer p{ font-size:14px; margin:0; }
footer .col-title{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#6E7180; margin-bottom:12px; }
footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:14px; }
footer ul a:hover{ color:#fff; }
.footer-legal{ border-top:1px solid rgba(255,255,255,.1); padding-top:24px; display:flex; flex-wrap:wrap; gap:16px; font-size:12px; }
.footer-legal summary{ cursor:pointer; list-style:none; }
.footer-legal summary:hover{ color:#fff; }
.footer-legal details{ max-width:520px; }
.footer-legal .legal-body{ margin-top:12px; line-height:1.7; }
.footer-legal .legal-body p{ margin:0 0 10px; }
.footer-copy{ margin-top:24px; font-size:12px; color:#6E7180; }

/* ---- Responsive ---- */
@media (min-width: 761px){
  .stat-grid{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width: 760px){
  h1{ font-size:30px; }
  h2{ font-size:26px; }
  .grid3, .grid2, .stat-grid, .footer-grid, .problem-grid, .steps{ grid-template-columns:1fr; }
  .sticky-wrap{ position:static; }
  nav.mainnav{ gap:14px; width:100%; order:3; justify-content:center; padding-top:10px; border-top:1px solid var(--line); margin-top:10px; }
  .header-inner{ justify-content:center; text-align:center; }
}