:root {
      --brand: #34b0d7;
      --brand-2: #1190b6;
      --brand-dark: #0d7a9a;
      --accent: #25D366;
      --text: #0f172a;
      --muted: #64748b;
      --bg: #ffffff;
      --card: #f8fafc;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body { 
      font-family: 'Inter', -apple-system, system-ui, sans-serif;
      color: var(--text); 
      background: var(--bg);
      line-height: 1.6;
      overflow-x: hidden;
    }
    img { max-width: 100%; display: block; }
    .container { width: min(1200px, 92%); margin: 0 auto; }

    /* Header */
    .header { 
      position: sticky; 
      top: 0; 
      z-index: 100; 
      background: rgba(255,255,255,.98); 
      backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(226,232,240,.8);
      box-shadow: 0 2px 12px rgba(0,0,0,.04);
      transition: all .3s ease;
    }
    .header.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,.08); }
    .header__inner { 
      display: flex; 
      align-items: center; 
      justify-content: space-between; 
      padding: 1rem 0;
    }
    .brand { 
      display: flex; 
      align-items: center; 
      gap: .7rem; 
      font-weight: 900; 
      color: var(--brand-2); 
      text-decoration: none;
      font-size: 1.4rem;
      transition: transform .3s ease;
    }
    .brand:hover { transform: scale(1.05); }
    .brand img { 
      height: 42px; 
      filter: drop-shadow(0 2px 6px rgba(52,176,215,.3));
    }
    .nav { display: flex; align-items: center; gap: .3rem; }
    .nav a { 
      padding: .6rem 1.1rem;
      font-weight: 600; 
      color: var(--text); 
      text-decoration: none;
      border-radius: .6rem;
      transition: all .3s ease;
      position: relative;
    }
    .nav a:not(.btn):hover {
      color: var(--brand-2);
      background: rgba(52,176,215,.08);
    }

    /* Buttons */
    .btn { 
      display: inline-block; 
      padding: .95rem 1.5rem; 
      border-radius: .85rem; 
      border: 2px solid transparent; 
      font-weight: 700; 
      text-decoration: none;
      transition: all .35s cubic-bezier(.4,0,.2,1);
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255,255,255,.2);
      transform: translateX(-100%);
      transition: transform .5s ease;
    }
    .btn:hover::before { transform: translateX(0); }
    .btn--sm { padding: .65rem 1.1rem; font-size: .95rem; }
    .btn--primary { 
      background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%); 
      color: #fff; 
      box-shadow: 0 10px 30px rgba(52,176,215,.35);
    }
    .btn--primary:hover { 
      transform: translateY(-3px);
      box-shadow: 0 15px 40px rgba(52,176,215,.45);
    }
    .btn--outline { 
      border-color: var(--brand); 
      color: var(--brand);
    }
    .btn--outline:hover {
      background: var(--brand);
      color: #fff;
      transform: translateY(-2px);
    }
    .btn--ghost { 
      background: linear-gradient(135deg, #e7f6fb, #d4f0f7); 
      color: var(--brand-dark);
    }
    .btn--ghost:hover {
      background: linear-gradient(135deg, #d4f0f7, #c0eaf3);
      transform: translateY(-2px);
    }

    /* Hero */
    .hero { 
      position: relative; 
      overflow: hidden;
      min-height: 85vh;
      display: flex;
      align-items: center;
    }
    .hero__bg { position: absolute; inset: 0; z-index: 0; }
    .hero__bg img { 
      width: 100%; 
      height: 85vh; 
      object-fit: cover; 
      filter: brightness(.7) contrast(1.15);
    }
    .hero__wave { 
      position: absolute; 
      inset: 0; 
      background:
        radial-gradient(1400px 500px at 25% 0%, rgba(52,176,215,.4), transparent 65%),
        radial-gradient(1100px 400px at 85% 15%, rgba(17,144,182,.35), transparent 65%),
        linear-gradient(180deg, rgba(15,23,42,.15) 0%, rgba(15,23,42,.6) 100%);
    }
    .hero__content { 
      padding: 8rem 0 6rem; 
      color: #fff; 
      position: relative;
      z-index: 10;
    }
    .hero h1 { 
      font-size: clamp(2.8rem, 7vw, 4.5rem); 
      margin: 0 0 .8rem;
      font-weight: 900;
      line-height: 1.1;
      letter-spacing: -.02em;
      text-shadow: 0 4px 20px rgba(0,0,0,.4);
    }
    .hero p { 
      font-size: 1.3rem; 
      max-width: 720px;
      line-height: 1.7;
      text-shadow: 0 2px 10px rgba(0,0,0,.3);
      margin-bottom: 2.5rem;
      opacity: .95;
    }
    .cta { 
      display: flex; 
      gap: 1rem; 
      margin: 2.5rem 0;
      flex-wrap: wrap;
    }
    .badges { 
      display: flex; 
      gap: 2rem; 
      list-style: none; 
      margin: 3rem 0 0;
      flex-wrap: wrap;
    }
    .badges li {
      padding: .8rem 1.3rem;
      background: rgba(255,255,255,.12);
      backdrop-filter: blur(12px);
      border-radius: .75rem;
      border: 1px solid rgba(255,255,255,.25);
      font-weight: 600;
      font-size: 1.05rem;
      text-shadow: 0 1px 4px rgba(0,0,0,.2);
      transition: all .3s ease;
    }
    .badges li:hover {
      background: rgba(255,255,255,.22);
      transform: translateY(-4px);
    }

    /* Sections */
    .section { padding: 6rem 0; position: relative; }
    .section--alt { 
      background: linear-gradient(180deg, #fff 0%, #f6fbfe 50%, #fff 100%);
    }
    .section h2 {
      font-size: clamp(2rem, 5vw, 3rem);
      margin-bottom: 1rem;
      font-weight: 900;
      letter-spacing: -.01em;
    }
    .section__lead { 
      color: var(--muted); 
      font-size: 1.2rem;
      margin-bottom: 3.5rem;
    }

    /* Cards */
    .grid { display: grid; gap: 1.5rem; }
    .cards { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
    .card { 
      background: #fff;
      border: 1px solid rgba(226,232,240,.7);
      border-radius: 20px; 
      padding: 2.2rem 2rem;
      transition: all .4s cubic-bezier(.4,0,.2,1);
      position: relative;
      overflow: hidden;
    }
    .card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 5px;
      background: linear-gradient(90deg, var(--brand), var(--brand-2));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .4s ease;
    }
    .card:hover::before { transform: scaleX(1); }
    .card:hover { 
      transform: translateY(-10px) scale(1.02);
      box-shadow: 0 25px 60px rgba(0,0,0,.12);
      border-color: rgba(52,176,215,.4);
    }
    .card h3 { 
      margin: 0 0 .7rem; 
      color: var(--brand-2);
      font-size: 1.5rem;
      font-weight: 800;
    }
    .card p { color: var(--muted); line-height: 1.7; font-size: 1.05rem; }

    /* Why Section */
    .why { 
      display: grid; 
      grid-template-columns: 1.15fr 1fr; 
      gap: 4rem; 
      align-items: center;
    }
    .why__list { 
      list-style: none; 
      margin: 2.5rem 0 3rem;
    }
    .why__list li { 
      padding: 1.3rem 0;
      font-size: 1.2rem;
      border-bottom: 1px solid rgba(226,232,240,.5);
      transition: all .3s ease;
    }
    .why__list li:hover {
      padding-left: 1.2rem;
      color: var(--brand-2);
    }
    .why__list li:last-child { border-bottom: none; }
    .why__photo { position: relative; }
    .why__photo::before {
      content: '';
      position: absolute;
      top: -25px;
      right: -25px;
      width: 220px;
      height: 220px;
      background: linear-gradient(135deg, var(--brand), var(--brand-2));
      opacity: .08;
      border-radius: 35% 65% 70% 30% / 35% 35% 65% 65%;
      z-index: -1;
      animation: float 6s ease-in-out infinite;
    }
    @keyframes float {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-15px) rotate(5deg); }
    }
    .why__photo img { 
      border-radius: 24px; 
      box-shadow: 0 25px 65px rgba(0,0,0,.2);
      transition: transform .5s ease;
    }
    .why__photo:hover img { transform: scale(1.04) rotate(2deg); }

    /* Slider galerie */
    .slider { 
      position: relative; 
      overflow: hidden; 
      border-radius: 24px; 
      box-shadow: 0 25px 65px rgba(0,0,0,.15);
      border: 1px solid rgba(226,232,240,.4);
    }
    .slides { 
      display: flex; 
      transition: transform .8s cubic-bezier(.4,0,.2,1);
    }
   .slides img { 
  width: 100%; 
  flex: 0 0 100%; 
  object-fit: contain; /* الصورة تظهر كاملة */
  max-height: 580px;
  background: radial-gradient(circle, #dcf3f3, #34b0d7);

  }


    .slider__btn { 
      position: absolute; 
      top: 50%; 
      transform: translateY(-50%); 
      background: rgba(255,255,255,.97); 
      backdrop-filter: blur(12px);
      border: 1px solid rgba(226,232,240,.6);
      border-radius: 50%; 
      width: 56px; 
      height: 56px; 
      display: grid; 
      place-items: center; 
      font-size: 28px; 
      cursor: pointer;
      transition: all .3s ease;
      box-shadow: 0 10px 30px rgba(0,0,0,.15);
      z-index: 10;
      color: var(--brand-2);
      font-weight: bold;
    }
    .slider__btn:hover { 
      background: #fff;
      transform: translateY(-50%) scale(1.15);
      box-shadow: 0 12px 35px rgba(0,0,0,.2);
    }
    .slider__btn.prev { left: 24px; } 
    .slider__btn.next { right: 24px; }
    .slider__dots { 
      position: absolute; 
      left: 50%; 
      bottom: 24px; 
      transform: translateX(-50%); 
      display: flex; 
      gap: 14px;
      z-index: 10;
    }
    .slider__dots button { 
      width: 14px; 
      height: 14px; 
      border-radius: 50%; 
      border: 2px solid rgba(255,255,255,.9);
      background: rgba(255,255,255,.6); 
      cursor: pointer;
      transition: all .3s ease;
      backdrop-filter: blur(6px);
    }
    .slider__dots button:hover { transform: scale(1.3); }
    .slider__dots button.active { 
      background: #fff;
      width: 36px;
      border-radius: 20px;
    }

    /* Contact */
    .contact { 
      display: grid; 
      grid-template-columns: 1fr 1.2fr; 
      gap: 3rem; 
      align-items: start;
    }
    .contact__card { 
      background: linear-gradient(135deg, #fff 0%, var(--card) 100%);
      border: 1px solid rgba(226,232,240,.6);
      border-radius: 24px; 
      padding: 3rem 2.5rem;
      box-shadow: 0 15px 45px rgba(0,0,0,.08);
      position: relative;
      overflow: hidden;
    }
    .contact__card::before {
      content: '';
      position: absolute;
      top: -120px;
      right: -120px;
      width: 240px;
      height: 240px;
      background: linear-gradient(135deg, var(--brand), var(--brand-2));
      opacity: .04;
      border-radius: 50%;
    }
    .contact__card h2 { margin-bottom: 1.2rem; }
    .contact__list { list-style: none; margin: 2.5rem 0; }
    .contact__list li {
      padding: 1.2rem 0;
      border-bottom: 1px solid rgba(226,232,240,.4);
      font-size: 1.05rem;
    }
    .contact__list li:last-child { border-bottom: none; }
    .contact__list a {
      color: var(--brand-2);
      text-decoration: none;
      font-weight: 600;
      transition: color .3s ease;
    }
    .contact__list a:hover { color: var(--brand); }
    .contact__cta { margin-top: 2rem; }
    .contact__form { 
      background: #fff; 
      border: 1px solid rgba(226,232,240,.6);
      border-radius: 24px; 
      padding: 3rem 2.5rem;
      box-shadow: 0 15px 45px rgba(0,0,0,.08);
    }
    .contact__form label { 
      display: grid; 
      gap: .7rem; 
      margin-bottom: 1.5rem; 
      font-weight: 600;
      font-size: 1rem;
    }
    .contact__form input, 
    .contact__form textarea { 
      padding: 1rem 1.2rem; 
      border: 2px solid #e2e8f0;
      border-radius: 1rem; 
      outline: none;
      transition: all .3s ease;
      font-family: inherit;
      font-size: 1rem;
    }
    .contact__form input:focus, 
    .contact__form textarea:focus { 
      border-color: var(--brand); 
      box-shadow: 0 0 0 5px rgba(52,176,215,.15);
    }
    .form-hint { 
      color: var(--muted); 
      font-size: .92rem;
      margin-top: 1.2rem;
      line-height: 1.6;
    }

    /* Footer */
    .footer { 
      border-top: 1px solid rgba(226,232,240,.6);
      background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    }
    .footer__inner { 
      display: flex; 
      flex-wrap: wrap; 
      align-items: center; 
      justify-content: space-between; 
      gap: 2.5rem; 
      padding: 2.5rem 0;
    }
    .footer__brand { 
      display: flex; 
      align-items: center; 
      gap: .8rem; 
      font-weight: 900; 
      color: var(--brand-2);
      font-size: 1.3rem;
    }
    .footer__brand img { 
      height: 36px;
      filter: drop-shadow(0 2px 6px rgba(52,176,215,.25));
    }
    .footer__links { display: flex; gap: 2rem; }
    .footer__links a {
      color: var(--muted);
      text-decoration: none;
      font-weight: 600;
      transition: color .3s ease;
    }
    .footer__links a:hover { color: var(--brand-2); }

    /* WhatsApp FAB */
    .fab { 
      position: fixed; 
      right: 26px; 
      bottom: 26px; 
      width: 68px; 
      height: 68px; 
      border-radius: 50%; 
      background: linear-gradient(135deg, var(--accent) 0%, #20ba5a 100%);
      box-shadow: 0 12px 35px rgba(162, 238, 190, 0.45);
      display: grid; 
      place-items: center;
      z-index: 90;
      transition: all .4s cubic-bezier(.4,0,.2,1);
      animation: pulse 2.5s infinite;
    }
    .fab:hover {
      transform: scale(1.2) rotate(10deg);
      box-shadow: 0 16px 45px rgba(37,211,102,.55);
    }
    .fab img { 
      width: 36px; 
      height: 36px;
    }
    @keyframes pulse {
      0%, 100% { box-shadow: 0 12px 35px rgba(37,211,102,.45); }
      50% { box-shadow: 0 12px 35px rgba(37,211,102,.65), 0 0 0 10px rgba(37,211,102,.15); }
    }

    /* Animations */
    .reveal-up { 
      opacity: 0; 
      transform: translateY(40px);
    }
    .reveal-fade { 
      opacity: 0;
      transform: scale(.94);
    }
    .revealed { 
      opacity: 1 !important; 
      transform: none !important; 
      transition: all 1s cubic-bezier(.22,.61,.36,1);
    }
    .delay-1 { transition-delay: .2s; }
    .delay-2 { transition-delay: .4s; }
    .delay-3 { transition-delay: .6s; }

    /* Responsive */
    @media (max-width: 1024px) {
      .cards { grid-template-columns: repeat(2, 1fr); }
      .why { grid-template-columns: 1fr; }
      .contact { grid-template-columns: 1fr; }
    }
    @media (max-width: 768px) {
      .cards { grid-template-columns: 1fr; }
      .hero__content { padding: 6rem 0 4rem; }
      .section { padding: 4rem 0; }
      .hero h1 { font-size: 2.5rem; }
      .hero p { font-size: 1.15rem; }
    }
    @media (max-width: 640px) {
      .nav { flex-direction: column; align-items: stretch; }
      .nav a { text-align: center; }
      .fab { width: 60px; height: 60px; right: 20px; bottom: 20px; }
      .fab img { width: 30px; height: 30px; }
    }
/* *************************************************************************** */
/* Bewertungen Section */
.rating-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  margin: 2.5rem 0 4rem;
  background: #fff;
  padding: 2rem;
  border-radius: 1.5rem;
  border: 1px solid rgba(226,232,240,.7);
  box-shadow: 0 12px 40px rgba(0,0,0,.05);
}

.rating-score {
  flex: 0 0 180px;
  text-align: center;
}
.rating-number {
  font-size: 3rem;
  font-weight: 900;
  color: var(--brand-2);
}
.rating-stars {
  color: #fbbf24;
  font-size: 1.4rem;
  margin: .4rem 0;
}
.rating-bars {
  flex: 1;
  display: grid;
  gap: .6rem;
  font-weight: 600;
}
.bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--muted);
  font-size: .95rem;
}
.bar-fill {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  opacity: .7;
}

/* Kunden Reviews */
.reviews-list {
  display: grid;
  gap: 2rem;
}
.review {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  background: #fff;
  padding: 1.8rem;
  border-radius: 1.2rem;
  border: 1px solid rgba(226,232,240,.6);
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
  transition: all .3s ease;
}
.review:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 45px rgba(0,0,0,.08);
}
.review img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
}
.review h3 {
  margin: 0;
  color: var(--brand-2);
  font-weight: 800;
  font-size: 1.1rem;
}
.review p {
  margin-top: .5rem;
  color: var(--muted);
  line-height: 1.6;
}
/* Rate Us box */
.rate-us {
  text-align: center;
  margin-top: 3rem;
  background: linear-gradient(135deg, #f8fcfe, #e7f6fb);
  border-radius: 1.5rem;
  padding: 3rem 2rem;
  border: 1px solid rgba(226,232,240,.6);
  box-shadow: 0 12px 35px rgba(0,0,0,.05);
  transition: all .3s ease;
}
.rate-us:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgba(0,0,0,.07);
}
.rate-us h3 {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--brand-2);
  margin-bottom: .7rem;
}
.rate-us p {
  font-size: 1.05rem;
  color: var(--muted);
  margin-bottom: 1.6rem;
}

/*    ********************/