:root {
  --primary:#3bb6d6;
  --dark:#0b1320;
  --muted:#6b7280;
  --bg:#f5f8fc;
  --radius:68px;
}

* { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family:Inter,sans-serif;
  background:linear-gradient(135deg,#eef4fb,#fff);
  color:var(--dark);
}

.blob {
  position: absolute;
  width: 420px;
  height: 360px;

  background: radial-gradient(
    circle at 40% 30%,
    rgba(59, 182, 214, 0.35),
    rgba(59, 182, 214, 0.18),
    rgba(59, 182, 214, 0.08),
    transparent 70%
  );

  filter: blur(70px);

  border-radius: 58% 42% 60% 40% / 55% 45% 55% 45%;

  /* ⬇️ absichtlich NICHT mittig */
  top: 18%;
  left: 55%;

  z-index: -1;
}


/* NAVBAR */
.header { padding:24px; max-width:1200px; margin:auto;  z-index: 100; }
.navbar { display:flex; align-items:center; justify-content:space-between; }
.logo { height:55px; }

nav ul { display:flex; gap:28px; list-style:none; }
nav a { text-decoration:none; color:var(--dark); }

.lang { position:relative; margin-left:20px; }
.lang-dropdown {
  position:absolute; top:36px; right:0;
  background:#fff; padding:10px 14px;
  border-radius:12px; display:none;
}
.lang:hover .lang-dropdown { display:block; }

.order-btn {
  padding:10px 18px; border-radius:999px;
  border:1px solid #e5e7eb;
  background:#fff; font-weight:400;
  z-index: 101;
}

.menu-toggle { display:none; }

/* HERO */
.hero {
  max-width:1200px; margin:auto;
  margin-top: -100px;
  margin-bottom: -200px;
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:4px; align-items:center;
}
.hero h1 { font-size:86px; font-weight:600;white-space: nowrap; margin-left: 20px; }
.hero span { color:var(--primary);}
.hero-image {margin-left: -250px;} 
.hero p {margin-left: 20px;}



/* FEATURES */
.features {
  max-width:1200px; margin:auto;
  padding:0 24px 120px;
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:28px;
}
.feature-card {
  background:#fff; padding:28px;
  border-radius:var(--radius);
  box-shadow:0 20px 40px rgba(0,0,0,.06);
}
.feature-card h3 {
	font-size: 2rem;
	font-weight:400;
	margin-left: 20px;
	margin-top: 6px;
	margin-bottom: 6px;
}
.feature-card p {
	margin-left: 20px;
}

/* NAGENE */
.nagene { max-width:1200px; margin:auto; padding:0 24px 120px; }
.nagene h2 { font-size: 50px; font-weight: 400; margin-bottom:50px; }
.nagene h2 span { font-size: 50px; font-weight: 400; color:var(--primary); margin-bottom:50px; }
.nagene-image img { width:100%; border-radius:32px; }

.quote {
  background:#f3f6fb;
    backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius:24px;
  padding:32px;
  margin:-80px auto 0;
  max-width:720px;
   font-size: 16px;
  line-height: 1.75;
  font-weight: 400;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}


/* PROCESS */
.process { max-width:1200px; margin:auto; padding:120px 24px; }
.process h2 span { color:var(--primary); }
.process-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:24px; margin-top:48px;
}
.step {
  background:#fff; padding:28px;
  border-radius:24px; text-align:center;
  font-size: 1.5em;
  position: relative; /* wichtig */
}
.step-number {
  position: absolute;
  top: 18px;
  right: 20px;

  font-size: 35px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.08em;
}


/* END TO END */
.endtoend { padding:120px 24px; }
.endtoend-card {
  max-width:1200px; margin:auto;
  background:#fff; border-radius:0px;
  padding:0px; display:flex; gap:0px;
  max-height: 300px;
}

/* ACTIVITIES */
.activities { max-width:1200px; margin:auto; padding:120px 24px; }
.activities span { color:var(--primary); }
.activities-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:24px; margin-top:48px;
}
.activity {
  background:#fff; padding:24px;
  border-radius:24px;
}

/* ABOUT */
.about {
  max-width:1200px; margin:auto;
  padding:120px 24px;
  display:grid; grid-template-columns:1fr 1fr;
  gap:40px;
}
.about span { color:var(--primary); }

/* FAQ */
.faq { max-width:1200px; margin:auto; padding:120px 24px; }
.faq span { color:var(--primary); }
.faq-item {
  padding:20px 0;
  border-bottom:1px solid #e5e7eb;
  
  
}

/* ================= FOOTER ================= */
.footer {
  background: --primary;
  padding: 80px 24px 60px;
  margin-top: 120px;
}

.footer-inner {
  max-width: 1200px;
  margin: auto;
}

.footer h3 {
  font-size: 28px;
  font-weight: 500;
  margin-bottom: 24px;
}

.footer p {
  font-size: 16px;
  line-height: 1.7;
}

.footer-phone {
  margin-top: 20px;
  font-size: 18px;
  font-weight: 500;
}


/* ================= MOBILE NAV ================= */
@media (max-width: 768px) {

  /* ===== HEADER ===== */
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: white;
    z-index: 1000;
  }

  .navbar {
    max-width: 100%;
  }

  .menu-toggle {
    display: block;
    font-size: 28px;
    cursor: pointer;
    z-index: 1001;
  }

  .order-btn {
    display: none;
  }

  /* ===== MOBILE MENU OVERLAY ===== */
  nav {
    position: fixed;
    top: 88px; /* Höhe der Navbar */
    left: 0;
    width: 100%;
    background: white;
    z-index: 999;
  }

  #menu {
    display: flex;
    flex-direction: column;
    gap: 24px;

    max-height: 0;
    overflow: hidden;
    padding: 0 24px;

    transition: max-height 0.35s ease, padding 0.35s ease;
  }

  #menu.open {
    max-height: 100vh;
    padding: 24px;
  }

  /* ===== CONTENT FIXES ===== */
 /* Hero darf auf Mobile KEINE negativen Margins haben */
  .hero {
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    min-height: calc(100vh - 100px); /* Platz für Header */
    padding: 140px 24px 100px;

    background-image: url("images/dna_helix.avif");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: grid;
    align-items: center;
    grid-template-columns: 1fr;
  }
  .hero-text {
  position: relative;
  z-index: 2;

  background: rgba(255, 255, 255, 0.5); /* halbtransparent */
  backdrop-filter: blur(8px);           /* Blur-Effekt */
  -webkit-backdrop-filter: blur(8px);   /* Safari-Unterstützung */

  padding: 20px 24px;
  border-radius: 20px;
  max-width: 520px;
}

  /* Text sauber über Bild */
  .hero-text {
    max-width: 100%;
  }

  .hero h1 {
    font-size: 36px;
    white-space: normal; /* wichtig! */
    margin: 0 0 16px;
  }

  .hero p {
    margin: 0;
  }

  .hero-image {
    display: none;
  }

 /* FEATURES GRID */
  .features {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-bottom: 80px;
  }

  /* FEATURE CARD KOMPAKT */
  .feature-card {
    padding: 18px;                /* ↓ von 28px */
    border-radius: 18px;          /* ↓ von 28px */
  }

  .feature-card img {
    width: 100%;
    height: 180px;                /* kontrollierte Höhe */
    object-fit: cover;
    border-radius: 14px;
  }

  .feature-card h3 {
    font-size: 1.4rem;            /* ↓ ~30% */
    margin-left: 0;
    margin-top: 12px;
  }

  .feature-card p {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-left: 0;
  }

  /* PROCESS */
  .process-grid {
    grid-template-columns: 1fr;
  }
  .footer {
    padding: 60px 24px 40px;
  }

  .footer h3 {
    font-size: 24px;
  }

  .footer p {
    font-size: 15px;
  }
}
}