:root{
  --accent:#95C11F; /* Akzentfarbe */
  --mutedlight:#eeeeee; 
  --muted:#c6c6c6;  /* sparsam einsetzen */
  --text:#000000;   /* Primärtext */
  --text-white:#fff;
  --header-h:64px;  /* fixe Header-Höhe */
}

html,body{ height:100%; }
body{
  font-family:"Barlow",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:#fff;
  margin:0;
}

/* Header */
.header-shadow{
  z-index:1040;
  border-bottom:1px solid var(--muted);
}
.brand-logo{
  max-height:40px;
  width:auto;
}
/* NAV-LINK + animierter Balken */
nav a{
  position: relative;
  font-size: 1.2em;
  color: var(--text);
  text-decoration: none;
  padding-bottom: 6px;                     /* Platz für Balken */
  transition: color .25s ease;
}

/* Start: kleiner Punkt zentriert */
nav a::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 3px;
  background: var(--accent);
  transform: translateX(-50%);
  transition: width .28s ease, left .28s ease, transform .28s ease;
  border-radius: 2px;
}

/* Hover-Farbe (dein Wunsch) */
nav a:hover{ color: var(--accent) !important; }

/* Hover: Punkt wird zum Balken */
nav a:hover::after{
  width: 100%;
  left: 0;
  transform: none;
}

/* AKTIV: Balken bleibt stehen + Farbe bleibt Akzent */
nav a.active,
nav a:focus-visible{
  color: var(--accent) !important;
}
nav a.active::after,
nav a:focus-visible::after{
  width: 100%;
  left: 0;
  transform: none;
}



/* Scroll-Snapping Container: füllt Viewport abzüglich Header */
.snap-container{
  height: calc(100vh - var(--header-h));
  margin-top: var(--header-h);
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
  scroll-padding-top:24px; /* Anker-Offset unter dem Header */
}

/* Slides: jede Sektion füllt die sichtbare Höhe */
.slide{
  min-height: calc(100vh - var(--header-h));
  display:flex;
  align-items:center;
  position:relative;
  scroll-snap-align:start;
}

/* Ghost Button: clean + modern */
.btn-ghost {
  border: 2px solid var(--accent);
  background: transparent;
  color: var(--text);
  font-weight: 500;
  border-radius: 999px; /* schön pillenförmig */
  padding: 0.6rem 1.5rem;
  transition: all 0.25s ease;
}

.btn-ghost:hover,
.btn-ghost:focus {
  background: var(--accent);
  color: var(--text-white);
  border-color: var(--accent);
  text-decoration: none;
}

/* Sorgt für saubere Textzeilenhöhe insgesamt */
body { line-height: 1.5; }

/* Gruppe der Features bekommt eigenen Kontext */
.features { position: relative; }

/* Chips: etwas interner Abstand, damit sich nichts „klebt“ */
.feature-chip { padding: 4px 2px; }

/* Falls Icons zu hoch wirken: baseline justieren */
.feature-chip i { line-height: 1; display: inline-flex; align-items: center; }


.footer-bar {
  background: var(--mutedlight);
  color: var(--text);
  padding: 10px 0;
  font-size: 0.95rem;
  border-top: 1px solid rgba(0,0,0,0.05);
}


/* Parallax utility */
.parallax{ will-change:transform; }

/* Clean layout helpers */
.maxw{ max-width:1100px; }
.lead-hero{ font-size:clamp(1.2rem, 2.2vw, 1.6rem); color:#000; }
.accent{ color:var(--accent)!important; }
.muted{ color:var(--muted)!important; }
.btn-accent{ border-color:var(--accent); color:#000; }
.btn-accent:hover{ background:var(--accent); color:#000; }

/* Dots navigation */
.dots{
  position:fixed; right:24px; top:50%;
  transform:translateY(-50%); z-index:1050;
  display:flex; flex-direction:column; gap:10px;
}
.dot{
  width:10px; height:10px; border-radius:999px;
  background:var(--muted); opacity:.6;
  transition:all .2s ease; display:block;
}
.dot.active{ background:var(--accent); opacity:1; transform:scale(1.15); }

/* Minimal separators */
.hairline{ height:1px; background:var(--muted); opacity:.4; }

/* Accent stripe */
.accent-stripe{
  position:absolute; inset:auto 0 0 0; height:6px; background:var(--accent);
}

/* Abwechselnde Hintergründe */
.bg-light-gray{ background-color:#f8f8f8; }

.heealzlogo{
	max-height:80px;
	padding-top:20px;
	padding-bottom:20px;
}

/* Reduced motion: disable parallax */
@media (prefers-reduced-motion: reduce){
  .snap-container{ scroll-behavior:auto; }
  [data-parallax]{ transform:none!important; }
}