/* ============================================================
   YOU NAME IT — Brand CSS (gemaess Brand CD §4)
   Cosmic / Hub — Dachmarke, spacig
   Body-Class: body.home (WordPress-Frontpage)
   ============================================================ */

body.home {
  --bg-deep:         #050B14;   /* Cosmic-Void */
  --bg-card:         #0D1B2A;   /* Cosmic-Navy */
  --bg-elevated:     #1B2D44;   /* Cosmic-Deep */
  --bg-section-alt:  #0A1422;

  --orange:          #4FB7E0;   /* Sky-Cyan (uebernimmt Primary-Accent Slot) */
  --orange-bright:   #7BD4F2;   /* Nebula-Glow */
  --orange-dim:      #2A8FB7;   /* Nebula-Deep */

  --teal:            #2A8FB7;
  --teal-dim:        #1A6F94;
  --teal-deep:       #0D4A66;

  --text-primary:    #E8F0FF;   /* Starlight-Ice */
  --text-secondary:  #B0BED4;
  --text-muted:      #6C7A8C;

  --border:          rgba(232, 240, 255, 0.10);
  --border-accent:   rgba(79, 183, 224, 0.30);

  --font-display:    'Space Grotesk', 'Inter Display', -apple-system, sans-serif;
}

body.home {
  background: var(--bg-deep);
  color: var(--text-primary);
  position: relative;
}

/* ---- Subtiler Star-Field als globaler BG ---- */
body.home::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(232,240,255,0.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 60%, rgba(232,240,255,0.3) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 50% 30%, rgba(232,240,255,0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 80%, rgba(232,240,255,0.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 85% 15%, rgba(232,240,255,0.3) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 25% 90%, rgba(232,240,255,0.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 95% 50%, rgba(232,240,255,0.3) 50%, transparent 51%);
  background-size: 800px 800px;
  background-repeat: repeat;
  opacity: 0.6;
}
body.home > * { position: relative; z-index: 1; }

/* ---- Accent-Bar oben: Cosmic-Verlauf ---- */
body.home .accent-bar {
  background: linear-gradient(90deg,
    #050B14 0%,
    #4FB7E0 30%,
    #7BD4F2 50%,
    #4FB7E0 70%,
    #050B14 100%);
  height: 1px;
}

/* ---- Nav: cosmic-dark mit Sky-Cyan-Akzent ---- */
body.home .site-nav {
  background: rgba(5, 11, 20, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
body.home .site-nav .nav-logo {
  color: var(--text-primary);
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}
body.home .site-nav .nav-logo-dot {
  color: #4FB7E0;
  text-shadow: 0 0 8px rgba(79, 183, 224, 0.6);
}
body.home .site-nav .nav-links a {
  color: var(--text-secondary);
}
body.home .site-nav .nav-links a:hover {
  color: #7BD4F2;
}

/* ---- HERO: Video bleibt, aber Overlays auf Cosmic ---- */
body.home .hero-overlay--dim {
  background: linear-gradient(180deg,
    rgba(5, 11, 20, 0.50) 0%,
    rgba(5, 11, 20, 0.75) 100%);
}
body.home .hero-overlay--left {
  background: linear-gradient(90deg,
    rgba(13, 27, 42, 0.95) 0%,
    rgba(13, 27, 42, 0.55) 50%,
    transparent 100%);
}

body.home .hero-headline,
body.home .hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 5.5vw, 72px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--text-primary);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}

body.home .hero-brand-tag,
body.home .hero-content .label {
  color: #7BD4F2;
  letter-spacing: 0.18em;
  font-size: 12px;
  text-transform: uppercase;
}

body.home .hero-subtext,
body.home .hero-content p {
  color: var(--text-primary);
  opacity: 0.92;
}

/* ---- Sections: Cosmic alternating ---- */
body.home .section {
  background: transparent;
  padding: 100px 0;
}
body.home .about-strip,
body.home .reviews,
body.home .stats-strip {
  background: rgba(13, 27, 42, 0.5);
  backdrop-filter: blur(4px);
}

body.home h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 48px);
  color: var(--text-primary);
  letter-spacing: -0.015em;
  text-transform: none;
  margin-bottom: 32px;
}

body.home h3 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--text-primary);
  text-transform: none;
}

body.home p {
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ---- Leistungsfelder / Brand-Tiles ---- */
body.home .feature-grid,
body.home .services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

body.home .feature-item,
body.home .service-item {
  background: rgba(13, 27, 42, 0.6);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 32px 28px;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  overflow: hidden;
}
body.home .feature-item::before,
body.home .service-item::before {
  /* Glow von links unten als "Nebula" */
  content: '';
  position: absolute;
  bottom: -40%;
  left: -20%;
  width: 200%;
  height: 80%;
  background: radial-gradient(ellipse at center, rgba(79, 183, 224, 0.10) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
body.home .feature-item:hover,
body.home .service-item:hover {
  border-color: var(--border-accent);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 24px rgba(79, 183, 224, 0.15);
}
body.home .feature-item:hover::before,
body.home .service-item:hover::before {
  opacity: 1;
}

body.home .feature-item h3,
body.home .service-item h3 {
  font-size: 20px;
  color: var(--text-primary);
  margin: 12px 0;
}

body.home .feature-icon,
body.home .service-icon {
  color: #4FB7E0;
  font-size: 28px;
}

/* ---- Buttons: Sky-Cyan glow ---- */
body.home .btn-primary {
  background: #4FB7E0;
  border-color: #4FB7E0;
  color: #050B14;
  font-weight: 600;
  letter-spacing: 0.02em;
}
body.home .btn-primary:hover {
  background: #7BD4F2;
  border-color: #7BD4F2;
  box-shadow: 0 0 24px rgba(79, 183, 224, 0.35);
  transform: translateY(-2px);
}

body.home .btn-outline {
  border-color: rgba(232, 240, 255, 0.35);
  color: var(--text-primary);
  background: transparent;
}
body.home .btn-outline:hover {
  border-color: #4FB7E0;
  color: #4FB7E0;
  background: rgba(79, 183, 224, 0.05);
}

/* ---- Stats / Kennzahlen Strip ---- */
body.home .stats-strip,
body.home .kennzahlen {
  background: rgba(13, 27, 42, 0.6);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
body.home .stat-num,
body.home .kennzahl-num {
  font-family: var(--font-display);
  color: #4FB7E0;
  font-weight: 600;
  text-shadow: 0 0 12px rgba(79, 183, 224, 0.3);
}

/* ---- About-Section (Sascha Manke) ---- */
body.home .about-strip {
  background: rgba(13, 27, 42, 0.5);
}
body.home .about-meta-item {
  color: var(--text-secondary);
}

/* ---- Reviews / Google-Badge ---- */
body.home .google-badge-link,
body.home .reviews-google-badge {
  background: rgba(13, 27, 42, 0.6);
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* ---- Footer ---- */
body.home .site-footer {
  background: #050B14;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  position: relative;
  z-index: 1;
}
body.home .site-footer a {
  color: var(--text-secondary);
}
body.home .site-footer a:hover {
  color: #4FB7E0;
}

/* ---- Selection ---- */
body.home ::selection {
  background: #4FB7E0;
  color: #050B14;
}