/* ==========================================================
   NOWAG AUTOMATION – Animationen
   Dezent, professionell, nicht ablenkend
   ========================================================== */

/* ----------------------------------------------------------
   1. KEYFRAME-DEFINITIONEN
   ---------------------------------------------------------- */

/* Scroll-Down-Pfeil */
@keyframes scrollArrow {
  0%   { opacity: 0.3; transform: rotate(45deg) translateY(0); }
  50%  { opacity: 1;   transform: rotate(45deg) translateY(6px); }
  100% { opacity: 0.3; transform: rotate(45deg) translateY(0); }
}

/* Online-Status-Puls */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.85); }
}

/* Tipp-Indikator im Chat */
@keyframes typingDot {
  0%, 100% { transform: translateY(0);   opacity: 0.4; }
  50%       { transform: translateY(-5px); opacity: 1; }
}

/* Nachrichten erscheinen */
@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Modal öffnet sich */
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.95) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}


/* Einblenden eines Elements */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Einblenden + hochschieben */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Einblenden + leicht nach rechts */
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}


/* Einlauf von links (für Demo-Inbox) */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}


/* Badge-Bounce */
@keyframes badgeBounce {
  0%   { transform: scale(0); }
  50%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}


/* ----------------------------------------------------------
   2. SCROLL-REVEAL SYSTEM
   Elemente starten unsichtbar, IntersectionObserver
   fügt .is-visible hinzu (via main.js)
   ---------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  /* Weiches, edles Ease-Out (easeOutExpo-artig) */
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Verzögerungen – feiner gestaffelt für ruhigen Auftritt */
.reveal--delay-1 { transition-delay: 0.08s; }
.reveal--delay-2 { transition-delay: 0.16s; }
.reveal--delay-3 { transition-delay: 0.24s; }
.reveal--delay-4 { transition-delay: 0.32s; }

/* Varianten für spezielle Richtungen */
.reveal--left {
  transform: translateX(-24px);
}
.reveal--left.is-visible {
  transform: translateX(0);
}

.reveal--right {
  transform: translateX(24px);
}
.reveal--right.is-visible {
  transform: translateX(0);
}

/* Für Nutzer die reduzierte Bewegung bevorzugen */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero__scroll-arrow,
  .chatbot-popup__status-dot,
  .chatbot-typing span {
    animation: none;
  }
}


/* ----------------------------------------------------------
   3. DEMO-SPEZIFISCHE STYLES
   (visuell komplex, daher hier separat)
   ---------------------------------------------------------- */

/* ---- Geteilte Demo-Bausteine (Nachricht, Tipp-Indikator, Restart) ---- */
.demo-msg {
  max-width: 78%;
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  animation: msgIn 0.35s ease;
}

.demo-typing {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 0.7rem 0.9rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 14px 4px 14px 14px;
  align-self: flex-end;
  width: fit-content;
  box-shadow: 0 1px 2px rgba(26, 43, 71, 0.05);
}
.demo-typing span {
  width: 6px;
  height: 6px;
  background: var(--color-text-faint);
  border-radius: 50%;
  animation: typingDot 1.2s ease-in-out infinite;
}
.demo-typing span:nth-child(2) { animation-delay: 0.2s; }
.demo-typing span:nth-child(3) { animation-delay: 0.4s; }

/* Demo-Navigation (Beispiel wechseln / neu starten) */
.demo-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding-top: 0.9rem;
  animation: fadeUp 0.4s ease;
}
.demo-nav__counter {
  font-size: var(--fs-xs);
  color: var(--color-text-faint);
  font-weight: var(--fw-medium);
}
.demo-nav__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.demo-nav__restart {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  padding: 0.4em 0.5em;
  transition: color var(--transition-fast);
}
.demo-nav__restart:hover { color: var(--color-accent); }
.demo-nav__next {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: #fff;
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-full);
  padding: 0.55em 1.2em;
  cursor: pointer;
  font-family: var(--font-body);
  transition:
    background var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-fast);
}
.demo-nav__next:hover {
  background: #1d4fd6;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
  transform: translateY(-1px);
}
.demo-nav__next:active { transform: translateY(0); }


/* ---- Messenger-Demo (sauberes, helles Chat-Interface) ---- */
.demo-messenger {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.demo-messenger__header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1rem;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.demo-messenger__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  font-family: var(--font-heading);
  flex-shrink: 0;
}

.demo-messenger__header-info { flex: 1; min-width: 0; }

.demo-messenger__header-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demo-messenger__header-status {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.demo-messenger__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  animation: pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

.demo-messenger__scenario {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  background: var(--color-accent-dim);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-full);
  padding: 0.25em 0.7em;
  white-space: nowrap;
  flex-shrink: 0;
}

.demo-messenger__messages {
  flex: 1;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 300px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--color-bg-2);
}
.demo-messenger__messages::-webkit-scrollbar { width: 5px; }
.demo-messenger__messages::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 99px; }

/* Systemzeile (verpasster Anruf / Notfall-Priorisierung) */
.demo-messenger__system {
  align-self: center;
  max-width: 92%;
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-accent);
  background: var(--color-accent-dim);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-full);
  padding: 0.35em 0.9em;
  margin: 0.15rem 0;
  animation: fadeIn 0.4s ease;
}

/* Nachricht-Text + Zeitstempel */
.demo-msg__text { display: block; }
.demo-msg__time {
  display: block;
  font-size: 0.62rem;
  margin-top: 0.25rem;
  text-align: right;
  opacity: 0.75;
}

.demo-msg--customer {
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  align-self: flex-start;
  border-radius: 4px 14px 14px 14px;
  max-width: 80%;
  box-shadow: 0 1px 2px rgba(26, 43, 71, 0.05);
}
.demo-msg--customer .demo-msg__time { color: var(--color-text-faint); }

.demo-msg--auto {
  background: var(--color-accent);
  color: #fff;
  align-self: flex-end;
  border-radius: 14px 4px 14px 14px;
  max-width: 80%;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}
.demo-msg--auto .demo-msg__time { color: rgba(255, 255, 255, 0.85); }

.demo-messenger__input-row {
  display: flex;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  align-items: center;
  flex-shrink: 0;
}

.demo-messenger__input {
  flex: 1;
  background: var(--color-bg-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.55rem 1rem;
  font-size: var(--fs-sm);
  color: var(--color-text);
  font-family: var(--font-body);
  transition: border-color var(--transition-fast);
}
.demo-messenger__input:focus { outline: none; border-color: var(--color-accent); }
.demo-messenger__input::placeholder { color: var(--color-text-faint); }

.demo-messenger__send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.demo-messenger__send:hover { background: #1d4fd6; transform: scale(1.05); }
.demo-messenger__send svg { width: 16px; height: 16px; }


/* ---- Angebots-Demo ---- */
.demo-angebot {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Kundenanfrage */
.demo-angebot__request {
  background: var(--color-bg-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  animation: slideInLeft 0.4s ease;
}
.demo-angebot__request-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.35rem;
}
.demo-angebot__request-text {
  font-size: var(--fs-sm);
  color: var(--color-text);
  line-height: 1.55;
}

/* Status "Angebot wird erstellt …" */
.demo-angebot__status {
  background: var(--color-bg-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  animation: fadeIn 0.4s ease;
}
.demo-angebot__status-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.demo-angebot__status-label::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: pulse 1s ease-in-out infinite;
  flex-shrink: 0;
}
.demo-angebot__progress {
  height: 4px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.demo-angebot__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent), #4f83ff);
  border-radius: var(--radius-full);
  width: 0;
  transition: width 1.4s ease;
}

/* Fertiges Angebot */
.demo-angebot__doc {
  background: var(--color-bg);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-md);
  overflow: hidden;
  animation: fadeUp 0.45s ease;
}
.demo-angebot__doc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 0.75rem 1rem;
  background: var(--color-accent-dim);
  border-bottom: 1px solid var(--color-border);
}
.demo-angebot__doc-title {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  line-height: 1.1;
}
.demo-angebot__doc-num {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: 0.15rem;
}
.demo-angebot__doc-badge {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  background: var(--color-bg);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-full);
  padding: 0.2em 0.7em;
  white-space: nowrap;
  flex-shrink: 0;
}

.demo-angebot__pos {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding: 0.55rem 1rem;
  font-size: var(--fs-sm);
  border-bottom: 1px solid rgba(26, 43, 71, 0.06);
  animation: fadeRight 0.35s ease;
}
.demo-angebot__pos span:first-child { color: var(--color-text); }
.demo-angebot__pos span:last-child {
  color: var(--color-heading);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.demo-angebot__sums {
  padding: 0.5rem 1rem 0.75rem;
  animation: fadeIn 0.4s ease;
}
.demo-angebot__sum-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding: 0.28rem 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.demo-angebot__sum-row span:last-child {
  color: var(--color-text);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.demo-angebot__sum-row--total {
  margin-top: 0.35rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
}
.demo-angebot__sum-row--total span:last-child {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
}

.demo-angebot__done {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: rgba(37, 99, 235, 0.06);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-md);
  padding: 0.7rem 1rem;
  font-size: var(--fs-sm);
  color: var(--color-text);
  animation: fadeUp 0.4s ease;
}
.demo-angebot__done-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}


/* ---- Demo-Feinschliff auf Mobil ---- */
@media (max-width: 480px) {
  .demo-messenger__status-extra { display: none; }
  .demo-messenger__header { gap: 0.55rem; padding: 0.6rem 0.75rem; }
  .demo-messenger__avatar { width: 34px; height: 34px; }
  .demo-messenger__scenario { font-size: 0.62rem; padding: 0.22em 0.6em; }
  .demo-messenger__messages { min-height: 260px; }
  .demo-nav { justify-content: center; }
}