/* Grundlayout Slider */
.hero-slider {
  position: relative;
  width: 100%;
  height: 100vh;
  max-height: none;
  overflow: hidden;
  font-family: inherit;
}

.slides {
  position: absolute;
  inset: 0;
}

.slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  animation: fade 18s infinite;
}

.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 6s; }
.slide:nth-child(3) { animation-delay: 12s; }

@keyframes fade {
  0% { opacity: 0; }
  10% { opacity: 1; }
  30% { opacity: 1; }
  40% { opacity: 0; }
  100% { opacity: 0; }
}

/* Mobile: Standard-Bilder */
.slide-1 { background-image: url('https://carley.de/wp-content/uploads/2026/03/carley-auto-verkaufen-slider-mobile-1.jpg'); }
.slide-2 { background-image: url('https://carley.de/wp-content/uploads/2026/03/carley-auto-verkaufen-slider-mobile-2.jpg'); }
.slide-3 { background-image: url('https://carley.de/wp-content/uploads/2026/03/carley-auto-verkaufen-slider-mobile-1.jpg'); }

/* Tablet: andere Bilder */
@media (min-width: 768px) {
  .slide-1 { background-image: url('https://carley.de/wp-content/uploads/2026/03/carley-auto-verkaufen-slider-tablet-1.jpg'); }
  .slide-2 { background-image: url('https://carley.de/wp-content/uploads/2026/03/carley-auto-verkaufen-slider-tablet-2.jpg'); }
  .slide-3 { background-image: url('https://carley.de/wp-content/uploads/2026/03/carley-auto-verkaufen-slider-tablet-1.jpg'); }
}

/* Desktop: andere Bilder + Text sichtbar */
@media (min-width: 1025px) {
  .slide-1 { background-image: url('https://carley.de/wp-content/uploads/2025/04/carley-header-bewertung-auf-smartphone-scaled.jpg'); }
  .slide-2 { background-image: url('https://carley.de/wp-content/uploads/2024/12/carley-frau-auf-dem-auto.png'); }
  .slide-3 { background-image: url('https://carley.de/wp-content/uploads/2025/04/carley-header-bewertung-auf-smartphone-scaled.jpg'); }

  .hero-content {
    position: relative;
    z-index: 10;
    top: 50%;
    transform: translateY(-50%);
    max-width: 600px;
    padding-left: 80px;
    color: #fff;
  }

  .hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 10px;
    font-weight: 700;
  }

  .hero-content p {
    font-size: 1.7rem;
    margin-bottom: 20px;
  }

  .scroll-btn {
    display: inline-block;
    padding: 14px 28px;
    background: #ff6600;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 1.7rem;
    font-weight: 600;
    transition: 0.3s;
  }

  .scroll-btn:hover {
    background: #e05500;
  }
}

/* Standard: Text auf Mobile & Tablet ausblenden */
.hero-content {
  display: none;
}

/* Nur Desktop zeigt Text + Button */
@media (min-width: 1025px) {
  .hero-content {
    display: block;
  }
}

html {
  scroll-behavior: smooth;
}

/* Grundstil */
.scroll-btn {
  display: inline-block;
  padding: 14px 28px;
  background: #ff6600;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 1.7rem;
  font-weight: 600;
  transition: background 0.25s ease, transform 0.2s ease;
}

/* Kein visited vom Theme */
.scroll-btn:visited {
  color: #fff !important;
  background: #ff6600 !important;
}

/* Hover-Effekt */
.scroll-btn:hover {
  background: #e05500 !important; /* etwas dunkler */
  transform: translateY(-2px);     /* leichter Lift-Effekt */
}

/* Active (Klick) */
.scroll-btn:active {
  background: #cc4a00 !important; /* noch dunkler */
  transform: translateY(0);       /* zurück */
}