/* Schlichtes Schema: Weiß / Grau / Schwarz */
:root{
  --shadow-soft: 0 18px 45px rgba(0,0,0,.08);
}

body{
  color: #0f1115;
}

.brand-dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #0f1115;
  display: inline-block;
}

.shadow-soft{
  box-shadow: var(--shadow-soft);
}

.badge-soft{
  border: 1px solid #e7e9ee;
  background: #ffffff;
  color: #0f1115;
}

.hero{
  background:
    radial-gradient(900px 450px at 12% 12%, rgba(0,0,0,.04), rgba(0,0,0,0)),
    #fff;
}

.hero-card{
  position: relative;
  box-shadow: var(--shadow-soft);
}

.hero-img{
  height: 520px;
  object-fit: cover;
  display:block;
  filter: grayscale(.1) contrast(1.05);
}

.hero-overlay{
  position:absolute;
  inset: 0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.74) 100%);
}

.feature-img{
  height: 320px;
  object-fit: cover;
  display:block;
  filter: grayscale(.12) contrast(1.05);
}

.gallery-img{
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;   /* sehr typisch für solche Vorlagen */
  object-fit: cover;
  border-radius: 18px;  /* weich, modern */
  display: block;
}

.icon-bubble{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid #e7e9ee;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 20px;
  background:#fff;
}

.mini-kpi{
  box-shadow: 0 10px 28px rgba(0,0,0,.05);
}

.step{
  background:#fff;
}

.step-nr{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid #e7e9ee;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
}

/* Responsive */
@media (max-width: 991.98px){
  .hero-img{ height: 380px; }
}

/* Höhe deiner Sticky Navbar ausgleichen (anpassen, falls nötig) */
:root{
  --nav-offset: 88px;
}

/* Jede Sektion mit ID scrollt mit Abstand zur Sticky Navbar */
section[id]{
  scroll-margin-top: var(--nav-offset);
}

/* Optional: Auch für andere Anchors wie divs mit id */
[id]:not(html):not(body){
  scroll-margin-top: var(--nav-offset);
}

/*softscroll*/
html { scroll-behavior: smooth; }