:root{
  --navy:#0d1b2a;
  --navy-2:#14263a;
  --gold:#f0b429;
  --soft:#f6f8fb;
  --text:#1b2430;
  --muted:#6b7380;
  --white:#fff;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:#fff;
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(13,27,42,.96);
  backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.container{
  width:min(1200px, 92%);
  margin-inline:auto;
}
.nav-container{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:700}
.logo{height:38px; width:auto}
.main-nav{display:flex; align-items:center; gap:22px}
.main-nav a{color:#dbe4f0; text-decoration:none; font-weight:500}
.main-nav a:hover{color:#fff}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border-radius:10px; text-decoration:none; font-weight:600; cursor:pointer}
.btn-primary{background:var(--gold); color:#000}
.btn-primary:hover{filter:brightness(.95)}
.btn-outline{border:1px solid #31465d; color:#e5edf6; padding:10px 16px; border-radius:10px}
.btn-outline:hover{border-color:#6b86a3; color:#fff}
.btn-light{background:#e8eef6; color:#0d1b2a}
.btn-light:hover{filter:brightness(.97)}
.w-100{width:100%}

.nav-toggle{display:none; background:transparent; border:none; cursor:pointer}
.nav-toggle span{display:block; width:26px; height:2px; background:#fff; margin:6px 0}

@media (max-width:920px){
  .main-nav{position:fixed; inset:62px 0 auto; background:var(--navy); padding:18px; transform:translateY(-120%); transition:.3s; flex-direction:column; gap:14px; border-bottom:1px solid #294058}
  .main-nav.open{transform:translateY(0)}
  .nav-toggle{display:block}
}

/* Hero */
.hero{
  position:relative; min-height:68vh; display:grid; place-items:center; color:#fff;
  background:no-repeat center/cover var(--navy-2);
}
.hero::before{
  content:""; position:absolute; inset:0; background:var(--navy-2) center/cover;
  background-image:var(--bg);
  opacity:.35;
}
.overlay{position:absolute; inset:0; background:radial-gradient(60% 60% at 50% 30%, rgba(13,27,42,.15), rgba(13,27,42,.85))}
.hero-content{position:relative; text-align:center; padding:80px 0}
.hero h1{font-size:clamp(28px,4vw,48px); margin:0 0 10px}
.hero p{max-width:850px; margin:0 auto 22px; color:#dfe7f2}
.hero-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.contact-line{margin-top:14px; color:#c8d5e5}
.contact-line a{color:#fff}

/* Sections */
.section{padding:70px 0}
.section-title{font-size:clamp(24px,3.2vw,34px); margin:0 0 18px}
.bg-soft{background:var(--soft)}

/* Services */
.grid{display:grid; gap:18px}
.services-grid{grid-template-columns:repeat(5,1fr)}
@media (max-width:1200px){.services-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:780px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.services-grid{grid-template-columns:1fr}}

/* === تحسين الخدمات === */
.services-grid a.card {
  display:block;
  text-decoration:none !important;
  color:inherit !important;
  border:1px solid #e8edf3;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.04);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
  cursor:pointer;
}

.services-grid a.card:hover {
  box-shadow:0 10px 24px rgba(0,0,0,0.15);
}

.services-grid .card-img {
  aspect-ratio:16/10;
  background:#eee center/cover;
  transition:transform 0.4s ease;
}

.services-grid a.card:hover .card-img {
  transform:scale(1.08);
}

.card-body {
  padding:14px 16px;
}

.card-body h3 {
  margin:4px 0 6px;
  font-size:18px;
  color:var(--text);
  text-decoration:none;
}

.card-body p {
  margin:0;
  color:var(--muted);
  font-size:14px;
  text-decoration:none;
}

/* About */
.about-grid {
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:28px;
  align-items:center;
}
@media (max-width:900px){
  .about-grid{grid-template-columns:1fr}
}
.muted{color:var(--muted)}
.bullets{margin:0; padding-left:18px; line-height:1.9}
.about-cta{margin-top:14px; display:flex; gap:12px; flex-wrap:wrap}

/* Toast */
.toast{
  display:none; margin-bottom:14px; padding:12px 14px; border-radius:10px; background:#e7f8ec; color:#0b6c2e; border:1px solid #c9f0d7;
}
.toast.show{display:block}
.toast.error{background:#fdecea; color:#8f1d1d; border-color:#f5c3c0}

/* Footer */
.site-footer{background:var(--navy); color:#cdd7e6; padding:18px 0; margin-top:20px}
.footer-flex{display:flex; align-items:center; justify-content:space-between; gap:16px}
.footer-links{display:flex; align-items:center; gap:8px}
.footer-links a{color:#fff; text-decoration:none}

/* Fixes */
html, body {overflow-x:hidden;}
img, svg, video, canvas {max-width:100%; height:auto;}
.nav-toggle {position:relative; z-index:1101;}
@media (max-width:920px){.main-nav{z-index:1100;}}
body.nav-open {overflow:hidden;}

/* Contact fix */
#kontakt {
  padding:60px 20px;
}
#kontakt .container {
  max-width:1200px;
  margin:0 auto;
  padding-left:15px;
  padding-right:15px;
}

/* Preise */
.price-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:20px;
  margin-top:30px;
}
.price-card {
  background:white;
  border-radius:12px;
  padding:25px;
  text-align:center;
  box-shadow:0 3px 10px rgba(0,0,0,0.1);
  transition:transform 0.2s ease;
}
.price-card:hover {transform:translateY(-5px);}
.price-card h3 {color:#0d1b2a; margin-bottom:10px;}
.price-card p {color:#333; font-size:15px;}
.section-intro {text-align:center; color:#666; margin-bottom:25px;}

/* Promo Bar */
.promo-bar{
  width:100%;
  background:var(--gold);
  color:#000;
  font-size:0.9rem;
  padding:4px 0;
  overflow:hidden;
  border-bottom:1px solid rgba(0,0,0,0.06);
}


.promo-track{
  display:inline-block;
  white-space:nowrap;
  padding-left:100%;
  animation:promo-scroll 18s linear infinite;
}

.promo-bar span{
  font-weight:600;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

@keyframes promo-scroll{
  0%{
    transform:translateX(0);
  }
  100%{
    transform:translateX(-100%);
  }
}

/* Fix Promo Bar on Mobile */
.promo-bar {
  position: sticky;
  top: 0;
  z-index: 1102; /* أعلى من الهيدر والقائمة */
}
.nav-toggle { z-index: 1200; }
.main-nav { z-index: 1100; }

/* ========================= */
/* Hero Slider (Startseite)  */
/* ========================= */

.hero-slider {
  position: relative;
  height: 75vh;
  overflow: hidden;
}

.hero-slider .slide {
  position: absolute;
  inset: 0;
  background-image: var(--bg); /* هذا السطر المهم */
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.hero-slider .slide .overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.7));
}

.hero-slider .slide .hero-content {
  position:relative;
  z-index:10;
}

.hero-slider .slide.active {
  opacity: 1;
}

.hero-buttons {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
  z-index: 20;
}

/* Responsive Anpassungen für Hero Slider */
@media (max-width: 768px) {
  .hero-slider {
    height: 60vh;
  }
  .hero-slider .hero-content h1 {
    font-size: 24px;
  }
  .hero-slider .hero-content p {
    font-size: 16px;
  }
  .hero-buttons {
    flex-direction: column;
    gap: 10px;
    bottom: 6%;
  }
}