/* ============================================================
   Jep & Timmer Elektroinstallation — Shared Stylesheet
   Elektrotechnik Jepp & Timmer GbR
   ============================================================ */

/* === Hero: sticky container below nav (h-20 = 5rem = 80px) === */
#hero-scroll > div.sticky {
  height: calc(100vh - 5rem) !important;
  min-height: 560px;
}

/* === Startseite: Canvas-Hero (Scroll-Scrub) — zuvor inline in index.md === */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-badge-anim  { animation: heroFadeUp  0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both; }
.hero-title-anim  { animation: heroFadeUp  0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both; }
.hero-text-anim   { animation: heroFadeUp  0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.75s both; }
.hero-cta-anim    { animation: heroFadeUp  0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.95s both; }

#hero-progress {
  position: fixed; top: 0; left: 0; height: 6px;
  background: #94c02c; z-index: 500;
  transition: width 0.05s linear, opacity 0.4s ease;
  pointer-events: none;
  border-radius: 0 3px 3px 0;
}

.scroll-mouse {
  width: 28px; height: 44px;
  border: 2.5px solid rgba(148,192,44,0.7);
  border-radius: 14px;
  position: relative;
  display: flex; justify-content: center;
}
.scroll-mouse::before {
  content: '';
  width: 4px; height: 9px;
  background: #94c02c;
  border-radius: 2px;
  position: absolute;
  top: 7px;
  animation: scroll-dot 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes scroll-dot {
  0%   { opacity: 1; transform: translateY(0); }
  60%  { opacity: 0; transform: translateY(16px); }
  61%  { opacity: 0; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}
.scroll-arrows {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin-top: 6px;
}
.scroll-arrows span {
  display: block; width: 10px; height: 10px;
  border-right: 2.5px solid rgba(148,192,44,0.7);
  border-bottom: 2.5px solid rgba(148,192,44,0.7);
  transform: rotate(45deg);
  animation: arrow-fade 1.6s ease-in-out infinite;
}
.scroll-arrows span:nth-child(1) { animation-delay: 0s; }
.scroll-arrows span:nth-child(2) { animation-delay: 0.2s; }
@keyframes arrow-fade {
  0%, 100% { opacity: 0.2; }
  50%       { opacity: 0.9; }
}

.plug-anchor { display: none; }
@media (hover: hover) and (min-width: 1024px) {
  .plug-anchor { display: block; }
  .plug-wrap { position: relative; }
  .plug-wrap > * { position: relative; z-index: 1; }
  .plug-anchor {
    position: absolute; bottom: 0; left: 50%;
    width: 36px; height: 68px;
    transform: translateX(-50%) translateY(0px);
    z-index: 0; pointer-events: none;
    filter: drop-shadow(0 4px 8px rgba(148,192,44,0.4));
  }
  .plug-anchor svg { width: 36px; height: 68px; display: block; }
  @keyframes plug-drop {
    0%   { transform: translateX(-50%) translateY(0px); }
    60%  { transform: translateX(-50%) translateY(90px); }
    78%  { transform: translateX(-50%) translateY(60px); }
    100% { transform: translateX(-50%) translateY(72px); }
  }
  @keyframes plug-retract {
    0%   { transform: translateX(-50%) translateY(72px); }
    20%  { transform: translateX(-50%) translateY(82px); }
    100% { transform: translateX(-50%) translateY(0px); }
  }
  .plug-anchor.drop    { animation: plug-drop    0.55s cubic-bezier(0.34,1.56,0.64,1) forwards; }
  .plug-anchor.retract { animation: plug-retract 0.42s cubic-bezier(0.4,0,0.2,1)       forwards; }
}

#hero-loading {
  position: absolute; inset: 0;
  background: rgba(12, 20, 4, 0.96);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 20; border-radius: 1.5rem;
  transition: opacity 0.6s ease;
}
#hero-load-bar-wrap {
  width: 180px; height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px; margin-top: 18px; overflow: hidden;
}
#hero-load-bar {
  height: 100%; width: 0; background: #94c02c;
  transition: width 0.08s linear;
}

/* === Seite 404 — zuvor inline in 404.md === */
@keyframes flicker {
  0%, 100% { opacity: 1; }
  8%        { opacity: .85; }
  10%       { opacity: 1; }
  20%       { opacity: .7; }
  22%       { opacity: 1; }
  60%       { opacity: 1; }
  62%       { opacity: .6; }
  64%       { opacity: 1; }
  70%       { opacity: .9; }
  72%       { opacity: 1; }
}
.flicker { animation: flicker 4s ease-in-out infinite; }
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  15%       { transform: rotate(-12deg); }
  30%       { transform: rotate(10deg); }
  45%       { transform: rotate(-8deg); }
  60%       { transform: rotate(6deg); }
  75%       { transform: rotate(-3deg); }
}
.wiggle { animation: wiggle 2.5s ease-in-out infinite; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Nur 404-Inhalt nutzt diese Klassen */
.fade-up-1 { animation: fadeUp .6s ease both .1s; }
.fade-up-2 { animation: fadeUp .6s ease both .25s; }
.fade-up-3 { animation: fadeUp .6s ease both .4s; }
.fade-up-4 { animation: fadeUp .6s ease both .55s; }
.grid-bg {
  background-image:
    linear-gradient(rgba(148,192,44,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,192,44,.07) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* === Base === */
body {
  font-family: 'Inter', sans-serif;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.fill-1 {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ============================================================
   Scroll Reveal System
   Usage: data-anim="fade-up|fade-left|fade-right|scale-in"
          data-delay="1..6"  → stagger only on entry
   ============================================================ */
[data-anim] {
  will-change: opacity, transform;
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-anim="fade-up"]    { opacity: 0; transform: translateY(40px); }
[data-anim="fade-left"]  { opacity: 0; transform: translateX(44px); }
[data-anim="fade-right"] { opacity: 0; transform: translateX(-44px); }
[data-anim="scale-in"]   { opacity: 0; transform: scale(0.92) translateY(24px); }

[data-anim].is-visible   { opacity: 1; transform: none; }

/* Stagger: delay nur beim Einfahren (is-visible), sofortiger Exit */
[data-delay="1"].is-visible { transition-delay: 0.10s; }
[data-delay="2"].is-visible { transition-delay: 0.20s; }
[data-delay="3"].is-visible { transition-delay: 0.30s; }
[data-delay="4"].is-visible { transition-delay: 0.40s; }
[data-delay="5"].is-visible { transition-delay: 0.50s; }
[data-delay="6"].is-visible { transition-delay: 0.60s; }

/* ============================================================
   Card Micro-Interactions
   Usage: class="card-lift"
   ============================================================ */
.card-lift {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease,
              border-color 0.25s ease !important;
}

.card-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(148, 192, 44, 0.14);
}

/* ============================================================
   Button Micro-Interactions
   Usage: class="btn-bounce"  or  class="btn-ghost-bounce"
   ============================================================ */
.btn-bounce {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.22s ease !important;
}
.btn-bounce:hover  { transform: scale(1.05); box-shadow: 0 12px 28px rgba(148, 192, 44, 0.35); }
.btn-bounce:active { transform: scale(0.97); }

.btn-ghost-bounce {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.btn-ghost-bounce:hover  { transform: scale(1.04); }
.btn-ghost-bounce:active { transform: scale(0.97); }

/* ============================================================
   Number Flip Animation
   Usage: JS adds/removes .num-exit / .num-enter on value change
   ============================================================ */
@keyframes num-exit {
  from { opacity: 1; filter: blur(0px);  transform: translateY(0)     scale(1);    }
  to   { opacity: 0; filter: blur(12px); transform: translateY(-28px)  scale(1.12); }
}

@keyframes num-enter {
  from { opacity: 0; filter: blur(12px); transform: translateY(28px)   scale(0.88); }
  to   { opacity: 1; filter: blur(0px);  transform: translateY(0)     scale(1);    }
}

.num-exit  { animation: num-exit  0.18s cubic-bezier(0.4, 0, 1, 1)  forwards; }
.num-enter { animation: num-enter 0.26s cubic-bezier(0, 0.8, 0.2, 1) forwards; }

/* ============================================================
   FAQ Smooth Open/Close
   ============================================================ */
details > div {
  overflow: hidden;
}

/* ============================================================
   Reduced Motion — respect user preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-anim],
  [data-anim].is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .num-exit,
  .num-enter {
    animation: none !important;
  }

  .card-lift,
  .card-lift:hover {
    transform: none !important;
    transition: none !important;
  }

  .btn-bounce,
  .btn-bounce:hover,
  .btn-ghost-bounce,
  .btn-ghost-bounce:hover {
    transform: none !important;
    transition: none !important;
  }
}