/* ==========================================================
   DT Industrieservice UG – Scroll Animations & Hover Effects
   ========================================================== */

/* ──────────────────────────────────────────────────────────
   REDUCED MOTION – Deaktiviert alles für Nutzer mit Präferenz
   ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .a-init { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ──────────────────────────────────────────────────────────
   SCROLL ANIMATIONS – Basisklassen
   ────────────────────────────────────────────────────────── */
.a-init {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.a-fade-up    { transform: translateY(28px); }
.a-fade-in    { transform: none; }
.a-fade-left  { transform: translateX(-26px); }
.a-fade-right { transform: translateX(26px); }
.a-scale-in   { transform: scale(0.94); }

/* Sichtbarer Zustand – wird per JS gesetzt */
.a-init.a-visible {
  opacity: 1;
  transform: none !important;
}

/* ──────────────────────────────────────────────────────────
   HOVER: Nav-Links – Unterstrich-Animation von links
   ────────────────────────────────────────────────────────── */
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background: rgba(255,255,255,0.85);
  border-radius: 2px;
  transition: width 0.25s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

/* ──────────────────────────────────────────────────────────
   HOVER: Care-Cards (halbtransparent auf Navy)
   ────────────────────────────────────────────────────────── */
.care-card {
  transition: background 0.28s ease, border-color 0.28s ease, transform 0.28s ease;
}
.care-card:hover {
  background: rgba(255,255,255,0.14) !important;
  border-color: rgba(255,255,255,0.3) !important;
  transform: translateY(-5px);
}
.care-icon {
  transition: background 0.28s ease;
}
.care-card:hover .care-icon {
  background: rgba(255,255,255,0.22);
}

/* ──────────────────────────────────────────────────────────
   HOVER: Stärken-Cards (weiß auf light-blue)
   ────────────────────────────────────────────────────────── */
.staerken-card {
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.staerken-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 38px rgba(12,39,86,0.13);
}
.staerken-card-icon {
  transition: background 0.28s ease;
}
.staerken-card-icon svg {
  transition: stroke 0.28s ease;
}
.staerken-card:hover .staerken-card-icon {
  background: var(--navy, #0c2756);
}
.staerken-card:hover .staerken-card-icon svg {
  stroke: #fff;
}

/* ──────────────────────────────────────────────────────────
   HOVER: Market-Items (Kreise)
   ────────────────────────────────────────────────────────── */
.market-item {
  transition: transform 0.3s ease;
}
.market-item:hover {
  transform: translateY(-7px);
}
.market-img {
  transition: transform 0.4s ease, box-shadow 0.35s ease;
}
.market-item:hover .market-img {
  transform: scale(1.07);
  box-shadow: 0 14px 36px rgba(0,0,0,0.22);
}
.market-name {
  transition: color 0.25s ease;
}
.market-item:hover .market-name {
  color: var(--accent, #2563eb);
}

/* ──────────────────────────────────────────────────────────
   HOVER: Kontakt-Cards (halbtransparent auf Navy)
   ────────────────────────────────────────────────────────── */
.kontakt-card {
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.kontakt-card:hover {
  background: rgba(255,255,255,0.14) !important;
  border-color: rgba(255,255,255,0.3) !important;
  transform: translateX(5px);
}
.kontakt-card-icon {
  transition: background 0.25s ease;
}
.kontakt-card:hover .kontakt-card-icon {
  background: rgba(255,255,255,0.24);
}

/* ──────────────────────────────────────────────────────────
   HOVER: Statistik-Zahlen
   ────────────────────────────────────────────────────────── */
.stat-item {
  transition: background 0.25s ease;
}
.stat-item:hover {
  background: #eef4ff;
}
.stat-number {
  transition: transform 0.25s ease, color 0.25s ease;
}
.stat-item:hover .stat-number {
  transform: scale(1.09);
  color: var(--accent, #2563eb);
}

/* ──────────────────────────────────────────────────────────
   HOVER: FAQ-Items
   ────────────────────────────────────────────────────────── */
.faq-q {
  transition: background 0.2s ease;
  border-radius: 0.5rem 0.5rem 0 0;
}
.faq-q:hover {
  background: #f8fafc !important;
}

/* ──────────────────────────────────────────────────────────
   HOVER: Service-Cards – Overlay dunkler + Titel-Shift
   ────────────────────────────────────────────────────────── */
.service-card-overlay {
  transition: background 0.4s ease;
}
.service-card:hover .service-card-overlay {
  background: linear-gradient(to top,
    rgba(12,39,86,0.96) 0%,
    rgba(12,39,86,0.35) 55%,
    rgba(12,39,86,0.05) 100%);
}
.service-card-title {
  transition: transform 0.3s ease;
}
.service-card:hover .service-card-title {
  transform: translateY(-3px);
}

/* ──────────────────────────────────────────────────────────
   HOVER: Specialist-Cards (ueber-uns)
   ────────────────────────────────────────────────────────── */
.specialist-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.specialist-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 54px rgba(0,0,0,0.32);
}

/* ──────────────────────────────────────────────────────────
   HOVER: Hero-Bild – subtiles Schweben
   ────────────────────────────────────────────────────────── */
.hero-image-wrap img {
  transition: transform 0.45s ease, box-shadow 0.45s ease;
}
.hero-image-wrap:hover img {
  transform: translateY(-5px);
  box-shadow: 0 30px 76px rgba(0,0,0,0.5);
}

/* ──────────────────────────────────────────────────────────
   HOVER: Hero-Circles (leistungen.html)
   ────────────────────────────────────────────────────────── */
.hero-circle {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.hero-circle:hover {
  transform: scale(1.05);
  box-shadow: 0 14px 36px rgba(0,0,0,0.2);
}

/* ──────────────────────────────────────────────────────────
   HOVER: Footer-Links – Unterstrich-Animation
   ────────────────────────────────────────────────────────── */
.footer-col a {
  position: relative;
  display: inline-block;
}
.footer-col a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: rgba(255,255,255,0.65);
  transition: width 0.22s ease;
}
.footer-col a:hover::after {
  width: 100%;
}

/* ──────────────────────────────────────────────────────────
   HOVER: detail-page usecase-cards
   ────────────────────────────────────────────────────────── */
.usecase-card {
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.usecase-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 36px rgba(12,39,86,0.1);
}
.usecase-icon {
  transition: background 0.28s ease;
}
.usecase-card:hover .usecase-icon {
  background: var(--navy, #0c2756);
}
.usecase-card:hover .usecase-icon svg {
  stroke: #fff;
}
.usecase-icon svg {
  transition: stroke 0.28s ease;
}