/* ============================================================
   DESIGN AUDIT FIXES — webseiteerstellen.eu
   Автор: Claude Code | Дата: 2026-04-15
   Обновлено: 2026-04-15 — Единый стиль кнопок

   Файл подключается ПОСЛЕ custom-enhancements.css
   ============================================================ */

/* ============================================================
   1. ЕДИНЫЕ CSS-ПЕРЕМЕННЫЕ
   ============================================================ */
:root {
  --wee-gold: #d4af37;
  --wee-gold-light: #e6ca72;
  --wee-gold-dark: #b8962e;
  --wee-gold-soft: rgba(209, 180, 90, 0.1);
  --wee-text-strong: #f8fafc;
  --wee-text-main: #e5e7eb;
  --wee-text-muted: #94a3b8;
  --wee-bg: #020617;
  --wee-card-bg: rgba(15, 23, 42, 0.96);
  --wee-radius-sm: 8px;
  --wee-radius: 14px;
  --wee-radius-lg: 20px;
  --wee-radius-pill: 999px;
  --wee-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.25);
  --wee-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
  --wee-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.45);
  --wee-shadow-gold: 0 8px 24px rgba(212, 175, 55, 0.25);
  --wee-ease: cubic-bezier(.4, 0, .2, 1);
  --wee-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
}


/* ============================================================
   2. КНОПКИ — ЕДИНЫЙ СТИЛЬ (как в «Unsere Leistungen» .card .btn)

   Эталон: полупрозрачный gold фон, золотой текст,
   тонкий gold border, radius 10px, shimmer sweep на hover,
   lift -3px + gold glow
   ============================================================ */

/* --- BASE: Все кнопки на сайте --- */
.card .btn,
.elementor-button,
.wee-btn.wee-btn-primary,
.wee-btn.wee-btn-secondary,
.wee-hero-cta .wee-btn,
.pp-btn.pp-btn-gold,
.pp-btn.pp-btn-outline,
.pk-btn.pk-btn-next,
.pk-btn.pk-btn-submit,
.wee-cta-btn,
.wee-portfolio-btn,
.wee-pf-link,
#wee-portfolio .wee-pf-link,
#wee-pf .wee-pf-link,
.wee-cert-btn,
.wee-strip-cta,
.wee-cta-section a[class*="btn"],
a.pp-btn.pp-btn-gold,
a.pp-btn.pp-btn-outline {
  background: linear-gradient(135deg, rgba(209,180,90,0.12), rgba(209,180,90,0.06)) !important;
  color: #d1b45a !important;
  border: 1px solid rgba(209,180,90,0.2) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  padding: 12px 24px !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: transform 0.3s var(--wee-ease),
              box-shadow 0.3s var(--wee-ease),
              background 0.3s var(--wee-ease),
              border-color 0.3s var(--wee-ease),
              color 0.3s var(--wee-ease) !important;
  height: auto !important;
  line-height: 1.4 !important;
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* --- SHIMMER SWEEP (::before) --- */
.card .btn::before,
.elementor-button::before,
.wee-btn.wee-btn-primary::before,
.wee-btn.wee-btn-secondary::before,
.wee-hero-cta .wee-btn::before,
.pp-btn.pp-btn-gold::before,
.pp-btn.pp-btn-outline::before,
.pk-btn.pk-btn-next::before,
.pk-btn.pk-btn-submit::before,
.wee-cta-btn::before,
.wee-portfolio-btn::before,
.wee-pf-link::before,
#wee-portfolio .wee-pf-link::before,
#wee-pf .wee-pf-link::before,
.wee-cert-btn::before,
.wee-strip-cta::before,
a.pp-btn.pp-btn-gold::before,
a.pp-btn.pp-btn-outline::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent) !important;
  transition: left 0.6s ease !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* --- HOVER --- */
.card .btn:hover,
.elementor-button:hover,
.wee-btn.wee-btn-primary:hover,
.wee-btn.wee-btn-secondary:hover,
.wee-hero-cta .wee-btn:hover,
.pp-btn.pp-btn-gold:hover,
.pp-btn.pp-btn-outline:hover,
.pk-btn.pk-btn-next:hover,
.pk-btn.pk-btn-submit:hover,
.wee-cta-btn:hover,
.wee-portfolio-btn:hover,
.wee-pf-link:hover,
#wee-portfolio .wee-pf-link:hover,
#wee-pf .wee-pf-link:hover,
.wee-cert-btn:hover,
.wee-strip-cta:hover,
a.pp-btn.pp-btn-gold:hover,
a.pp-btn.pp-btn-outline:hover {
  background: linear-gradient(135deg, rgba(209,180,90,0.22), rgba(209,180,90,0.12)) !important;
  color: #e6ca72 !important;
  border-color: rgba(209,180,90,0.4) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 40px rgba(209,180,90,0.2) !important;
}

/* --- HOVER: shimmer sweep --- */
.card .btn:hover::before,
.elementor-button:hover::before,
.wee-btn.wee-btn-primary:hover::before,
.wee-btn.wee-btn-secondary:hover::before,
.wee-hero-cta .wee-btn:hover::before,
.pp-btn.pp-btn-gold:hover::before,
.pp-btn.pp-btn-outline:hover::before,
.pk-btn.pk-btn-next:hover::before,
.pk-btn.pk-btn-submit:hover::before,
.wee-cta-btn:hover::before,
.wee-portfolio-btn:hover::before,
.wee-pf-link:hover::before,
#wee-portfolio .wee-pf-link:hover::before,
#wee-pf .wee-pf-link:hover::before,
.wee-cert-btn:hover::before,
.wee-strip-cta:hover::before,
a.pp-btn.pp-btn-gold:hover::before,
a.pp-btn.pp-btn-outline:hover::before {
  left: 100% !important;
}

/* --- ACTIVE (press) --- */
.card .btn:active,
.elementor-button:active,
.wee-btn:active,
.pp-btn:active,
.pk-btn:active,
.wee-cta-btn:active,
.wee-portfolio-btn:active,
.wee-pf-link:active,
.wee-cert-btn:active,
.wee-strip-cta:active {
  transform: translateY(0) scale(0.97) !important;
  box-shadow: none !important;
}

/* --- Кнопка «Zurück» в калькуляторе (lighter) --- */
.pk-btn.pk-btn-back {
  background: transparent !important;
  color: var(--wee-text-muted) !important;
  border: 1px solid rgba(148,163,184,0.15) !important;
  border-radius: 10px !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  padding: 12px 24px !important;
  transition: all 0.3s var(--wee-ease) !important;
  cursor: pointer !important;
}

.pk-btn.pk-btn-back:hover {
  border-color: rgba(209,180,90,0.3) !important;
  color: #d1b45a !important;
  background: rgba(209,180,90,0.04) !important;
}

/* --- "Termin vereinbaren" зелёная кнопка — тот же стиль, но с зелёным оттенком --- */
.card .btn[style*="green"] {
  background: linear-gradient(135deg, rgba(74,222,128,0.12), rgba(74,222,128,0.06)) !important;
  color: #4ade80 !important;
  border-color: rgba(74,222,128,0.25) !important;
}

.card .btn[style*="green"]:hover {
  background: linear-gradient(135deg, rgba(74,222,128,0.22), rgba(74,222,128,0.12)) !important;
  color: #86efac !important;
  border-color: rgba(74,222,128,0.4) !important;
  box-shadow: 0 14px 40px rgba(74,222,128,0.15) !important;
}

/* --- Header CTA «Kostenlos beraten» — компактнее --- */
.wee-header-actions .wee-btn,
.wee-header .wee-btn {
  padding: 8px 20px !important;
  font-size: 0.85rem !important;
  height: auto !important;
}

/* --- Hero кнопки — крупнее --- */
.wee-hero-cta .wee-btn {
  padding: 14px 32px !important;
  font-size: 1rem !important;
}

/* --- Portfolio card links — full width --- */
#wee-portfolio .wee-pf-link,
#wee-pf .wee-pf-link {
  width: 100% !important;
  text-align: center !important;
  padding: 10px 22px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
}

/* --- Cookie buttons — не трогаем их стиль --- */
.cmplz-btn {
  all: revert !important;
}

/* --- WooCommerce buttons — тот же стиль --- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.woocommerce .checkout-button,
.woocommerce #place_order,
.single_add_to_cart_button {
  background: linear-gradient(135deg, rgba(209,180,90,0.12), rgba(209,180,90,0.06)) !important;
  color: #d1b45a !important;
  border: 1px solid rgba(209,180,90,0.2) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 12px 24px !important;
  transition: all 0.3s var(--wee-ease) !important;
  position: relative !important;
  overflow: hidden !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button.alt:hover,
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover,
.single_add_to_cart_button:hover {
  background: linear-gradient(135deg, rgba(209,180,90,0.22), rgba(209,180,90,0.12)) !important;
  color: #e6ca72 !important;
  border-color: rgba(209,180,90,0.4) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 40px rgba(209,180,90,0.2) !important;
}


/* ============================================================
   3. ACCESSIBILITY — focus-visible
   ============================================================ */
.elementor-button:focus-visible,
.wee-btn:focus-visible,
.pp-btn:focus-visible,
.pk-btn:focus-visible,
.wee-cta-btn:focus-visible,
.wee-portfolio-btn:focus-visible,
.wee-pf-link:focus-visible,
.wee-cert-btn:focus-visible,
.card .btn:focus-visible {
  outline: 2px solid #d1b45a !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(209, 180, 90, 0.2) !important;
}

a:focus-visible {
  outline: 2px solid #d1b45a;
  outline-offset: 2px;
  border-radius: 4px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none !important;
  border-color: #d1b45a !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15) !important;
}


/* ============================================================
   4. SCROLL-TRIGGERED АНИМАЦИИ
   ============================================================ */
.wee-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--wee-ease),
              transform 0.6s var(--wee-ease);
}

.wee-animate.wee-visible {
  opacity: 1;
  transform: translateY(0);
}

.wee-animate-stagger > .wee-animate:nth-child(1) { transition-delay: 0.05s; }
.wee-animate-stagger > .wee-animate:nth-child(2) { transition-delay: 0.1s; }
.wee-animate-stagger > .wee-animate:nth-child(3) { transition-delay: 0.15s; }
.wee-animate-stagger > .wee-animate:nth-child(4) { transition-delay: 0.2s; }
.wee-animate-stagger > .wee-animate:nth-child(5) { transition-delay: 0.25s; }
.wee-animate-stagger > .wee-animate:nth-child(6) { transition-delay: 0.3s; }
.wee-animate-stagger > .wee-animate:nth-child(7) { transition-delay: 0.35s; }
.wee-animate-stagger > .wee-animate:nth-child(8) { transition-delay: 0.4s; }

.wee-animate-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s var(--wee-ease), transform 0.6s var(--wee-ease);
}
.wee-animate-left.wee-visible { opacity: 1; transform: translateX(0); }

.wee-animate-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s var(--wee-ease), transform 0.6s var(--wee-ease);
}
.wee-animate-right.wee-visible { opacity: 1; transform: translateX(0); }

.wee-animate-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.5s var(--wee-ease), transform 0.5s var(--wee-ease-bounce);
}
.wee-animate-scale.wee-visible { opacity: 1; transform: scale(1); }


/* ============================================================
   5. КАРТОЧКИ — HOVER-ЭФФЕКТЫ
   ============================================================ */
.wee-service-card,
.wee-leistung-card,
[class*="service-card"] {
  border-radius: var(--wee-radius-lg) !important;
  border: 1px solid rgba(148, 163, 184, 0.1) !important;
  transition: transform 0.35s var(--wee-ease),
              box-shadow 0.35s var(--wee-ease),
              border-color 0.35s var(--wee-ease) !important;
}

.wee-service-card:hover,
.wee-leistung-card:hover,
[class*="service-card"]:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--wee-shadow-lg) !important;
  border-color: rgba(209, 180, 90, 0.25) !important;
}

.wee-partner-card {
  border-radius: var(--wee-radius-lg) !important;
  transition: transform 0.35s var(--wee-ease),
              border-color 0.35s var(--wee-ease),
              box-shadow 0.35s var(--wee-ease) !important;
}

.wee-partner-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(209, 180, 90, 0.3) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3) !important;
}

.wee-process-step-card {
  border-radius: var(--wee-radius-lg) !important;
  transition: transform 0.3s var(--wee-ease), box-shadow 0.3s var(--wee-ease) !important;
}

.wee-process-step-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35) !important;
}

.wee-faq-item {
  border-radius: var(--wee-radius) !important;
  transition: border-color 0.3s var(--wee-ease) !important;
}

.wee-faq-item:hover {
  border-color: rgba(209, 180, 90, 0.2) !important;
}

.wee-tech-tag {
  border-radius: var(--wee-radius-sm) !important;
  transition: all 0.25s var(--wee-ease) !important;
}

.wee-tech-tag:hover {
  border-color: #d1b45a !important;
  background: rgba(209, 180, 90, 0.06) !important;
  transform: translateY(-2px) !important;
}


/* ============================================================
   6. HERO — BADGE PULSE + STAT HOVER
   ============================================================ */
.wee-section-badge,
[class*="-badge"] {
  animation-iteration-count: 3 !important;
}

.wee-stat-item {
  transition: transform 0.3s var(--wee-ease), background 0.3s var(--wee-ease) !important;
  border-radius: var(--wee-radius) !important;
  padding: 12px 16px !important;
}

.wee-stat-item:hover {
  transform: translateY(-2px) !important;
  background: rgba(209, 180, 90, 0.04) !important;
}


/* ============================================================
   7. ТИПОГРАФИКА
   ============================================================ */
#wee-hero h1 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
}

.wee-section-title,
#wee-why h2,
#wee-process h2,
#wee-tech h2,
#wee-faq h2,
#wee-portfolio .wee-pf-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
}


/* ============================================================
   8. PROCESS STEPS — БЫСТРЫЕ ЗАДЕРЖКИ
   ============================================================ */
.wee-process-step:nth-child(1) { animation-delay: 0.1s !important; }
.wee-process-step:nth-child(2) { animation-delay: 0.2s !important; }
.wee-process-step:nth-child(3) { animation-delay: 0.3s !important; }
.wee-process-step:nth-child(4) { animation-delay: 0.4s !important; }
.wee-process-step:nth-child(5) { animation-delay: 0.5s !important; }
.wee-process-step:nth-child(6) { animation-delay: 0.6s !important; }


/* ============================================================
   9. MOBILE STICKY CTA
   ============================================================ */
@media (max-width: 768px) {
  .wee-mobile-sticky-cta {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 12px 16px !important;
    background: rgba(2, 6, 23, 0.96) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    z-index: 9990 !important;
    border-top: 1px solid rgba(209, 180, 90, 0.15) !important;
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translateY(100%) !important;
    transition: transform 0.4s var(--wee-ease) !important;
  }

  .wee-mobile-sticky-cta.wee-sticky-visible {
    transform: translateY(0) !important;
  }

  /* Sticky btn — тот же card .btn стиль */
  .wee-mobile-sticky-cta .wee-sticky-btn {
    background: linear-gradient(135deg, rgba(209,180,90,0.12), rgba(209,180,90,0.06)) !important;
    color: #d1b45a !important;
    border: 1px solid rgba(209,180,90,0.2) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    flex: 1 !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .wee-mobile-sticky-cta .wee-sticky-phone {
    background: rgba(148, 163, 184, 0.06) !important;
    color: #d1b45a !important;
    border: 1px solid rgba(209,180,90,0.15) !important;
    padding: 12px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    flex-shrink: 0 !important;
  }

  body {
    padding-bottom: 72px !important;
  }
}

@media (min-width: 769px) {
  .wee-mobile-sticky-cta {
    display: none !important;
  }
}


/* ============================================================
   10. КАЛЬКУЛЯТОР — PROGRESS BAR
   ============================================================ */
.pk-progress {
  background: rgba(148, 163, 184, 0.1) !important;
  border-radius: var(--wee-radius-pill) !important;
  height: 6px !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
}

.pk-progress-bar {
  background: linear-gradient(135deg, rgba(209,180,90,0.5), rgba(209,180,90,0.3)) !important;
  height: 100% !important;
  border-radius: var(--wee-radius-pill) !important;
  transition: width 0.5s var(--wee-ease) !important;
}


/* ============================================================
   11. ПРОЧЕЕ
   ============================================================ */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wee-animate,
  .wee-animate-left,
  .wee-animate-right,
  .wee-animate-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.wee-header {
  transition: background 0.35s var(--wee-ease),
              box-shadow 0.35s var(--wee-ease),
              padding 0.35s var(--wee-ease) !important;
}

.wee-header.scrolled {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
}

.wee-footer-social-link,
.wee-social-link {
  transition: transform 0.3s var(--wee-ease), box-shadow 0.3s var(--wee-ease) !important;
}

.wee-footer-social-link:hover,
.wee-social-link:hover {
  transform: translateY(-3px) !important;
}

::selection {
  background: rgba(212, 175, 55, 0.3);
  color: var(--wee-text-strong);
}

::-moz-selection {
  background: rgba(212, 175, 55, 0.3);
  color: var(--wee-text-strong);
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--wee-bg); }
::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.35); }