/* ══════════════════════════════════
   TOKENS
══════════════════════════════════ */
:root {
  --green:    #3B6D11;
  --green-l:  #639922;
  --green-d:  #27500A;
  --green-p:  #EAF3DE;
  --green-m:  #C0DD97;
  --off:      #F7F9F5;
  --grey-l:   #EDEEE9;
  --grey-m:   #8a9280;
  --grey-d:   #3a3e36;
  --nav-h:    72px;
  --serif:    'Cormorant Garamond', Georgia, serif;
  --sans:     'Outfit', sans-serif;
  --shadow:   0 8px 40px rgba(59,109,17,.10);
  --r:        10px;
}
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--sans); background:#fff; color:var(--grey-d); overflow-x:hidden; }


.hero-bg {
background-image: url("https://joomla.evolution-step.de/images/bg-image_home.png");
}


/* PAIN headline */
.pain-headline {
  font-family:var(--serif);
  font-size:clamp(52px,7.5vw,96px);
  font-weight:300; line-height:.98;
  color:white; letter-spacing:-.02em;
  margin-bottom:1.5rem;
}
.pain-headline .line2 {
  font-style:italic; color:var(--green-m);
  display:block;
}
.pain-sub {
  font-size:17px; font-weight:300; line-height:1.78;
  color:rgba(255,255,255,.72);
  max-width:560px; margin-bottom:.75rem;
}
.pain-proof {
  display:inline-flex; align-items:center; gap:.6rem;
  background:rgba(255,255,255,.08); backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.18); border-radius:4px;
  padding:.55rem 1.1rem; margin-bottom:2.5rem;
  font-size:12px; font-weight:400; color:rgba(255,255,255,.7);
  letter-spacing:.03em;
}
.pain-proof strong { color:var(--green-m); font-weight:600; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.hero-scroll {
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:.4rem;
  color:rgba(255,255,255,.4); font-size:9px; letter-spacing:.15em; text-transform:uppercase;
}
.scroll-line {
  width:1px; height:44px; background:rgba(255,255,255,.25);
  animation:scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse { 0%,100%{opacity:.2} 50%{opacity:.7} 

/* ── BUTTONS ── */
.btn-p {
  display:inline-block; padding:14px 32px;
  background:var(--green-l); color:white; border:none; border-radius:4px;
  font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:.04em;
  cursor:pointer; text-decoration:none; transition:background .2s,transform .15s;
}
.btn-p:hover { background:var(--green); transform:translateY(-1px); }
.btn-g {
  display:inline-block; padding:13px 28px;
  background:transparent; color:white;
  border:1.5px solid rgba(255,255,255,.45); border-radius:4px;
  font-family:var(--sans); font-size:14px; font-weight:400; letter-spacing:.04em;
  cursor:pointer; text-decoration:none; transition:all .2s;
}
.btn-g:hover { border-color:var(--green-m); background:rgba(192,221,151,.1); }
.btn-o {
  display:inline-block; padding:12px 28px;
  background:transparent; color:var(--green);
  border:1.5px solid var(--green); border-radius:4px;
  font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:.04em;
  cursor:pointer; text-decoration:none; transition:all .2s;
}
.btn-o:hover { background:var(--green); color:white; }
.btn-green {
  display:inline-block; padding:16px 36px;
  background:var(--green); color:white; border:none; border-radius:4px;
  font-family:var(--sans); font-size:14px; font-weight:600;
  cursor:pointer; letter-spacing:.04em; white-space:nowrap; transition:all .2s;
}
.btn-green:hover { background:var(--green-d); transform:translateY(-1px); }

/* ── PAIN SECTION (diagnose) ── */
.pain-section {
  background:var(--grey-d); padding:6rem 4rem;
}
.pain-inner { max-width:1160px; margin:0 auto; }
.pain-intro {
  text-align:center; margin-bottom:4rem;
}
.pain-intro-eyebrow {
  font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--green-m); margin-bottom:1rem;
  display:flex; align-items:center; justify-content:center; gap:.7rem;
}
.pain-intro-eyebrow::before, .pain-intro-eyebrow::after {
  content:''; display:block; width:28px; height:1.5px; background:var(--green-m);
}
.pain-intro-title {
  font-family:var(--serif);
  font-size:clamp(30px,4vw,50px);
  font-weight:300; color:white; line-height:1.1;
}
.pain-intro-title em { font-style:italic; color:var(--green-m); }
.pain-numbers {
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  background:rgba(255,255,255,.05); border-radius:var(--r); overflow:hidden;
  margin-bottom:3rem;
}
.pain-num-item {
  padding:2.5rem 1.75rem;
  background:rgba(255,255,255,.03);
  text-align:center;
  transition:background .2s;
}
.pain-num-item:hover { background:rgba(255,255,255,.07); }
.pni-num {
  font-family:var(--serif); font-size:52px; font-weight:300;
  color:var(--green-m); line-height:1; margin-bottom:.5rem;
}
.pni-label {
  font-size:12px; font-weight:300; color:rgba(255,255,255,.55); line-height:1.55;
}
.pni-source {
  font-size:9.5px; color:rgba(255,255,255,.25); margin-top:.4rem; font-style:italic;
}
.pain-conclusion {
  display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center;
}
.pc-text {
  font-family:var(--serif); font-size:clamp(22px,3vw,32px);
  font-weight:300; color:white; line-height:1.25;
}
.pc-text em { font-style:italic; color:var(--green-m); }
.pc-boxes { display:flex; flex-direction:column; gap:1rem; }
.pc-box {
  padding:1.25rem 1.5rem;
  background:rgba(255,255,255,.04);
  border-left:3px solid var(--green-l);
  border-radius:0 6px 6px 0;
}
.pc-box-label {
  font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-m); margin-bottom:.3rem;
}
.pc-box-text {
  font-size:13.5px; font-weight:300; color:rgba(255,255,255,.65); line-height:1.65;
}