/* ============================================================
   KIKS Systems – Belebung (Animation & Interaktion)
   Nutzt ausschließlich bestehende Markenfarben aus style.css.
   Am Ende von style.css anhängen ODER als eigene Datei laden.
   ============================================================ */

/* --- Prozess-Panel: laufende Hervorhebung --- */
.system-flow li{
  transition:background .35s ease,border-color .35s ease,transform .35s ease;
}
.system-flow li:before{transition:background .35s ease,transform .35s ease}
.system-flow li.is-active{
  background:#edf5ff;
  border-color:var(--accent);
  transform:translateX(2px);
}
.system-flow li.is-active:before{
  background:var(--accent);
  transform:scale(1.08);
}
.system-flow li.is-active.is-final{
  background:#edfdf6;
  border-color:var(--green);
}
.system-flow li.is-active.is-final:before{background:var(--green)}

/* Status-Punkt im Panel-Header (JS setzt .is-final für Amber) */
.panel-header .status-dot{
  display:inline-block;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--green);
  margin-right:6px;
  vertical-align:middle;
  transition:background .35s ease;
  animation:kiks-pulse 2s ease-in-out infinite;
}
.panel-header.is-final .status-dot{background:var(--amber)}
@keyframes kiks-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(18,132,91,.34)}
  50%{box-shadow:0 0 0 5px rgba(18,132,91,0)}
}

/* --- Karten: dezentes Anheben beim Hovern --- */
.card{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.card:hover{
  transform:translateY(-3px);
  border-color:#bcc6d4;
  box-shadow:0 22px 60px rgba(17,19,24,.12);
}
.card.muted:hover,.compact:hover,.compact-signal-card:hover{
  box-shadow:0 16px 40px rgba(17,19,24,.10);
}

/* Buttons: etwas lebendigeres Feedback (ergänzt bestehendes) */
.btn-secondary:hover{background:var(--surface-soft)}

/* --- Mobile Hauptnavigation --- */
.nav-toggle{display:none}

@media(max-width:760px){
  .nav.nav-enhanced{
    min-height:0;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 0;
  }
  .nav-toggle{
    display:inline-flex;
    width:44px;
    height:44px;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    padding:0;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:#fff;
    color:var(--text);
    cursor:pointer;
  }
  .nav-toggle:hover,
  .nav-toggle.is-open{background:var(--surface-soft)}
  .nav-toggle:focus-visible{
    outline:3px solid var(--accent);
    outline-offset:2px;
  }
  .nav-toggle-icon{
    display:block;
    font-size:25px;
    line-height:1;
  }
  .nav.nav-enhanced .navlinks{
    display:none;
    width:100%;
    flex:1 0 100%;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:2px;
    padding:2px 0 4px;
  }
  .nav.nav-enhanced .navlinks.is-open{display:flex}
  .nav.nav-enhanced .navlinks > a{
    width:100%;
    border:0;
    border-radius:var(--radius);
    padding:10px 12px;
    background:transparent;
  }
  .nav.nav-enhanced .navlinks > a:hover,
  .nav.nav-enhanced .navlinks > a:focus-visible{
    background:var(--surface-soft);
    color:var(--text);
  }
  .nav.nav-enhanced .lang-switch{
    align-self:stretch;
    justify-content:flex-start;
    margin-top:4px;
    padding:10px 12px 4px;
    border:0;
    border-top:1px solid var(--line);
    border-radius:0;
    background:transparent;
  }
}

/* --- Sanfte Einblendung beim Reinscrollen --- */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .55s ease,transform .55s ease;
}
.reveal.in{opacity:1;transform:none}

/* --- Barrierefreiheit: Bewegung respektieren --- */
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .system-flow li,
  .system-flow li:before,
  .card,
  .panel-header .status-dot{transition:none;animation:none}
}