/* ============================================================
   MICROINTERACTIONS & PREMIUM UX
   naturheilpraxis.eu — v14
   ============================================================ */

/* ── SCROLL PROGRESS BAR ── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, #c17b5c, #894559);
  z-index: 9999;
  transition: width 0.1s linear;
}

/* ── SCROLL ANIMATIONS ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }

/* ── HOVER KARTEN ── */
.fp-sit-card,
.fp-achse,
.fp-klarheit-card,
.fp-ang-card,
.fp-schritt-karte,
.tcard-new,
.fp-tcard,
.pcard {
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.fp-sit-card:hover,
.fp-achse:hover,
.fp-klarheit-card:hover,
.fp-ang-card:hover,
.fp-schritt-karte:hover,
.tcard-new:hover,
.fp-tcard:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 48px rgba(107,79,58,0.12) !important;
}

/* ── BUTTON HOVER ── */
.btn-primary,
.btn-secondary,
.fp-wa-btn,
.fp-ang-link,
.btn-cream {
  transition: all 0.2s ease !important;
}

.btn-primary:hover {
  transform: scale(1.02) translateY(-1px) !important;
  box-shadow: 0 8px 28px rgba(137,69,89,0.3) !important;
}

.btn-secondary:hover {
  transform: scale(1.02) translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(107,79,58,0.15) !important;
}

.fp-wa-btn:hover {
  transform: scale(1.02) translateY(-1px) !important;
  box-shadow: 0 8px 28px rgba(37,211,102,0.4) !important;
}

/* ── BUTTON CLICK FEEDBACK ── */
.btn-primary:active,
.btn-secondary:active,
.fp-wa-btn:active {
  transform: scale(0.98) translateY(0) !important;
  transition-duration: 0.1s !important;
}

/* ── TESTIMONIALS PREMIUM ── */
.tcard-new {
  position: relative;
  overflow: visible !important;
}

.tcard-new::before {
  content: '\201C';
  position: absolute;
  top: -16px;
  left: 20px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 80px;
  line-height: 1;
  color: var(--terracotta);
  opacity: 0.2;
  pointer-events: none;
}

.tcard-stars {
  color: #c17b5c;
  font-size: 14px;
  letter-spacing: 2px;
  margin-bottom: 14px;
}

/* ── 7 ACHSEN INTERAKTIV ── */
.fp-achse {
  cursor: default;
  position: relative;
  overflow: hidden;
}

.fp-achse::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--terracotta);
  transition: width 0.35s ease;
}

.fp-achse:hover::after {
  width: 100%;
}

.fp-achse:hover .fp-achse-title {
  color: var(--warm-brown);
  transition: color 0.25s ease;
}

.fp-achse:hover .fp-achse-num {
  color: var(--terracotta);
  transition: color 0.25s ease;
}

/* ── STICKY NAV BLUR ── */
nav,
header {
  transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

.nav-scrolled {
  background: rgba(250,248,245,0.85) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 1px 24px rgba(107,79,58,0.08) !important;
}

/* ── SPRUNGNAVIGATION ── */
#jump-nav {
  background: rgba(250,248,245,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(193,123,92,0.12);
  position: sticky;
  top: 60px;
  z-index: 90;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  transition: box-shadow 0.3s ease;
}

#jump-nav::-webkit-scrollbar { display: none; }

#jump-nav.stuck {
  box-shadow: 0 4px 24px rgba(107,79,58,0.08);
}

.jump-nav-inner {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 48px;
  white-space: nowrap;
  min-width: max-content;
}

.jump-link {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  text-decoration: none;
  padding: 14px 18px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
}

.jump-link:hover,
.jump-link.active {
  color: var(--warm-brown);
  border-bottom-color: var(--terracotta);
}

.jump-nav-cta {
  margin-left: auto;
  padding-left: 24px;
  flex-shrink: 0;
}

.jump-nav-cta a {
  display: inline-flex;
  align-items: center;
  background: var(--warm-brown);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 9px 20px;
  border-radius: 100px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
}

.jump-nav-cta a:hover {
  background: var(--terracotta);
  transform: translateY(-1px);
}

/* ── ICON ANIMATION ── */
.fp-sit-icon,
.fp-angebot-icon {
  display: inline-block;
  transition: transform 0.3s ease;
}

.fp-sit-card:hover .fp-sit-icon,
.fp-ang-card:hover .fp-angebot-icon {
  transform: translateY(-3px) scale(1.1);
}

/* ── SECTION CONNECTORS ── */
.section-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  background: var(--cream);
}

.section-connector-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(193,123,92,0.3), rgba(193,123,92,0.05));
}

/* ── ZAHLEN ANIMATION ── */
.count-up {
  display: inline-block;
}

/* ── PREMIUM FEINSCHLIFF ── */
.fp-sit-card,
.fp-achse,
.fp-klarheit-card,
.fp-ang-card {
  border-radius: 20px;
}

.fp-schritt-karte {
  border-radius: 24px;
}

/* Feinere Schatten */
.fp-sit-card {
  box-shadow: 0 2px 16px rgba(107,79,58,0.04);
}

/* Sanftere Übergänge zwischen Sektionen */
section {
  transition: none;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .jump-nav-inner { padding: 0 16px; }
  .jump-link { padding: 12px 12px; font-size: 11px; }
  .jump-nav-cta { padding-left: 12px; }
  #jump-nav { top: 56px; }

  .tcard-new::before { font-size: 60px; }
}

/* PILL JUMP NAV OVERRIDE */
#jump-nav .jump-link {
  background: rgba(193,123,92,0.08);
  border: 1px solid rgba(193,123,92,0.15);
  border-radius: 100px;
  margin: 6px 3px;
  padding: 7px 14px;
  font-size: 11px;
  border-bottom: 1px solid rgba(193,123,92,0.15);
}

#jump-nav .jump-link:hover,
#jump-nav .jump-link.active {
  background: var(--warm-brown);
  border-color: var(--warm-brown);
  color: #fff;
  border-bottom-color: var(--warm-brown);
}