/* ============================================
   Vemo Tool Layout — Complete Design System
   Animations, Interactions, Modern UI
   ============================================ */

/* --- Keyframe Animations --- */
@keyframes vemoFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes vemoFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes vemoScaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes vemoPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
@keyframes vemoShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes vemoSlideRight {
  from { width: 0; }
  to { width: 100%; }
}
@keyframes vemoBounceIn {
  0% { opacity: 0; transform: scale(0.3); }
  50% { transform: scale(1.05); }
  70% { transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes vemoCountUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Hero Section --- */
.vemo-tool-hero {
  padding: 120px 24px 48px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  animation: vemoFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.vemo-tool-hero h1 {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: 2.8rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 20px;
  letter-spacing: -0.03em;
  line-height: 1.1;
  animation: vemoFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.vemo-tool-hero h1 .dot {
  color: #7ed957;
}
.vemo-tool-hero p {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: 1.1rem;
  color: #64748b;
  line-height: 1.8;
  margin: 0;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
  animation: vemoFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

/* --- Tool Wrapper (the main calculator card) --- */
.vemo-tool-wrapper {
  animation: vemoFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}
.vemo-tool-card {
  transition: box-shadow 0.3s ease;
}

/* --- Global Tool Animations --- */

/* Buttons inside tools */
.vemo-tool-wrapper button,
.vemo-tool-wrapper .btn,
.vemo-tool-wrapper [type="submit"] {
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  cursor: pointer;
}
.vemo-tool-wrapper button:hover,
.vemo-tool-wrapper .btn:hover,
.vemo-tool-wrapper [type="submit"]:hover {
  transform: translateY(-2px) scale(1.02) !important;
}
.vemo-tool-wrapper button:active,
.vemo-tool-wrapper .btn:active,
.vemo-tool-wrapper [type="submit"]:active {
  transform: translateY(0) scale(0.98) !important;
  transition-duration: 0.1s !important;
}

/* Input fields inside tools */
.vemo-tool-wrapper input[type="text"],
.vemo-tool-wrapper input[type="number"],
.vemo-tool-wrapper input[type="email"],
.vemo-tool-wrapper input[inputmode],
.vemo-tool-wrapper select,
.vemo-tool-wrapper textarea {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease !important;
}
.vemo-tool-wrapper input:focus,
.vemo-tool-wrapper select:focus,
.vemo-tool-wrapper textarea:focus {
  border-color: #7ed957 !important;
  box-shadow: 0 0 0 3px rgba(126, 217, 87, 0.15), 0 2px 8px rgba(126, 217, 87, 0.1) !important;
  outline: none !important;
  transform: scale(1.01) !important;
}

/* Range sliders */
.vemo-tool-wrapper input[type="range"] {
  accent-color: #7ed957;
  cursor: pointer;
  transition: filter 0.2s ease;
}
.vemo-tool-wrapper input[type="range"]:hover {
  filter: brightness(1.05);
}
.vemo-tool-wrapper input[type="range"]:active {
  filter: brightness(0.95);
}

/* Option cards / radio-like selections */
.vemo-tool-wrapper .opt,
.vemo-tool-wrapper .option,
.vemo-tool-wrapper [class*="option"],
.vemo-tool-wrapper [class*="choice"] {
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  cursor: pointer;
}
.vemo-tool-wrapper .opt:hover,
.vemo-tool-wrapper .option:hover,
.vemo-tool-wrapper [class*="option"]:hover,
.vemo-tool-wrapper [class*="choice"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(126, 217, 87, 0.12) !important;
}

/* Cards and panels inside tools */
.vemo-tool-wrapper [class*="panel"],
.vemo-tool-wrapper [class*="card"],
.vemo-tool-wrapper [class*="result"],
.vemo-tool-wrapper [class*="kpi"] {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Labels */
.vemo-tool-wrapper label {
  transition: color 0.2s ease;
  cursor: pointer;
}

/* Links inside tool */
.vemo-tool-wrapper a:not(.dir-card):not(.public-nav-link) {
  transition: color 0.2s ease, opacity 0.2s ease;
}
.vemo-tool-wrapper a:not(.dir-card):not(.public-nav-link):hover {
  color: #7ed957;
}

/* --- SEO Content Section --- */
.vemo-tool-seo {
  max-width: 900px;
  margin: 0 auto;
  padding: 56px 24px 40px;
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  animation: vemoFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.vemo-tool-seo h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}
.vemo-tool-seo p {
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.8;
  margin: 0 0 16px;
}
.vemo-tool-seo .steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 24px;
}
.vemo-tool-seo .step-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: vemoFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.vemo-tool-seo .step-card:nth-child(1) { animation-delay: 0.05s; }
.vemo-tool-seo .step-card:nth-child(2) { animation-delay: 0.1s; }
.vemo-tool-seo .step-card:nth-child(3) { animation-delay: 0.15s; }
.vemo-tool-seo .step-card:nth-child(4) { animation-delay: 0.2s; }
.vemo-tool-seo .step-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
  border-color: rgba(126, 217, 87, 0.3);
}
.vemo-tool-seo .step-num {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, #7ed957, #5cb338);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(126, 217, 87, 0.3);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vemo-tool-seo .step-card:hover .step-num {
  transform: scale(1.05);
}
.vemo-tool-seo .step-text {
  font-size: 0.88rem;
  color: #334155;
  line-height: 1.6;
  font-weight: 500;
}

/* --- Tool Directory --- */
.vemo-tool-directory {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 24px 48px;
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
}
.vemo-tool-directory h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 20px;
  text-align: center;
  letter-spacing: -0.01em;
}
.vemo-tool-directory .dir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.vemo-tool-directory .dir-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #fff;
  text-decoration: none;
  color: #0f172a;
  font-weight: 600;
  font-size: 0.84rem;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
  animation: vemoFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.vemo-tool-directory .dir-card:nth-child(1) { animation-delay: 0.02s; }
.vemo-tool-directory .dir-card:nth-child(2) { animation-delay: 0.04s; }
.vemo-tool-directory .dir-card:nth-child(3) { animation-delay: 0.06s; }
.vemo-tool-directory .dir-card:nth-child(4) { animation-delay: 0.08s; }
.vemo-tool-directory .dir-card:nth-child(5) { animation-delay: 0.10s; }
.vemo-tool-directory .dir-card:nth-child(6) { animation-delay: 0.12s; }
.vemo-tool-directory .dir-card:nth-child(7) { animation-delay: 0.14s; }
.vemo-tool-directory .dir-card:hover {
  transform: translateY(-3px) scale(1.03);
  border-color: #7ed957;
  box-shadow: 0 8px 24px rgba(126, 217, 87, 0.18);
}
.vemo-tool-directory .dir-card:active {
  transform: scale(0.97);
  transition-duration: 0.1s;
}
.vemo-tool-directory .dir-card.active {
  background: linear-gradient(135deg, rgba(126, 217, 87, 0.12), rgba(126, 217, 87, 0.04));
  border-color: #7ed957;
  box-shadow: 0 4px 16px rgba(126, 217, 87, 0.15);
}
.vemo-tool-directory .dir-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vemo-tool-directory .dir-card:hover .dir-icon {
  transform: scale(1.06);
}

/* --- Disclaimer --- */
.vemo-tool-disclaimer {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px 32px;
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  animation: vemoFadeIn 0.5s ease 0.4s both;
}
.vemo-tool-disclaimer p {
  font-size: 0.7rem;
  color: #94a3b8;
  line-height: 1.6;
  text-align: center;
  margin: 0;
}

/* --- CTA Button Fix --- */
.public-header .nav-cta,
.public-header .btn-primary {
  color: #ffffff !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.public-header .nav-cta:hover,
.public-header .btn-primary:hover {
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 6px 20px rgba(126, 217, 87, 0.35) !important;
}
.public-header .nav-cta:active,
.public-header .btn-primary:active {
  transform: scale(0.97) !important;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .vemo-tool-hero {
    padding: 100px 20px 32px;
  }
  .vemo-tool-hero h1 {
    font-size: 2rem;
  }
  .vemo-tool-hero p {
    font-size: 0.95rem;
  }
}
@media (max-width: 640px) {
  .vemo-tool-hero {
    padding: 90px 16px 28px;
  }
  .vemo-tool-hero h1 {
    font-size: 1.5rem;
  }
  .vemo-tool-hero p {
    font-size: 0.88rem;
  }
  .vemo-tool-seo {
    padding: 36px 20px 28px;
  }
  .vemo-tool-seo h2 {
    font-size: 1.25rem;
  }
  .vemo-tool-seo .steps-grid {
    grid-template-columns: 1fr;
  }
  .vemo-tool-directory {
    padding: 28px 20px 36px;
  }
  .vemo-tool-directory .dir-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .vemo-tool-directory .dir-card {
    padding: 10px 12px;
    font-size: 0.78rem;
  }
}
@media (max-width: 400px) {
  .vemo-tool-directory .dir-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Dark Mode Support
   ============================================ */
body.dark-mode {
  --vemo-text: #f1f5f9;
  --vemo-muted: #94a3b8;
  --vemo-ring: #334155;
}
body.dark-mode .vemo-tool-hero h1 { color: #f1f5f9; }
body.dark-mode .vemo-tool-hero p { color: #94a3b8; }
body.dark-mode .vemo-tool-seo h2 { color: #e2e8f0; }
body.dark-mode .vemo-tool-seo p { color: #94a3b8; }
body.dark-mode .vemo-tool-seo .step-card { background: #1e293b; border-color: #334155; }
body.dark-mode .vemo-tool-seo .step-text { color: #cbd5e1; }
body.dark-mode .vemo-tool-directory h3 { color: #e2e8f0; }
body.dark-mode .vemo-tool-directory .dir-card { background: #1e293b; border-color: #334155; color: #e2e8f0; }
body.dark-mode .vemo-tool-directory .dir-card:hover { background: #1e3a2f; border-color: #7ed957; }
body.dark-mode .vemo-tool-directory .dir-card.active { background: rgba(126,217,87,0.08); border-color: #7ed957; }
body.dark-mode .vemo-tool-directory .dir-icon { opacity: 1; filter: brightness(1.3) saturate(1.2); }
body.dark-mode .vemo-tool-disclaimer p { color: #64748b; }
body.dark-mode .vemo-tool-card { background: #1e293b; border-color: #334155; }
body.dark-mode .vemo-tool-wrapper .wrap-card { background: #1e293b; border-color: #334155; }
body.dark-mode .vemo-tool-wrapper .option { background: #1e293b; border-color: #334155; color: #e2e8f0; }
body.dark-mode .vemo-tool-wrapper .option small { color: #94a3b8; }
body.dark-mode .vemo-tool-wrapper .option:hover { background: #253449; border-color: #7ed957; }
body.dark-mode .vemo-tool-wrapper .option[data-selected="true"] { background: rgba(126,217,87,0.08); border-color: #7ed957; color: #f1f5f9; }
body.dark-mode .vemo-tool-wrapper .select,
body.dark-mode .vemo-tool-wrapper .input { background: #1e293b; border-color: #334155; color: #e2e8f0; }
body.dark-mode .vemo-tool-wrapper input[type="text"],
body.dark-mode .vemo-tool-wrapper input[type="number"],
body.dark-mode .vemo-tool-wrapper input[type="email"],
body.dark-mode .vemo-tool-wrapper input[inputmode],
body.dark-mode .vemo-tool-wrapper select,
body.dark-mode .vemo-tool-wrapper textarea { background: #1e293b !important; color: #e2e8f0 !important; border-color: #334155 !important; }
body.dark-mode .vemo-tool-wrapper input::placeholder,
body.dark-mode .vemo-tool-wrapper textarea::placeholder { color: #64748b !important; }
body.dark-mode .vemo-tool-wrapper label { color: #cbd5e1; }
body.dark-mode .vemo-tool-wrapper .title { color: #f1f5f9; }
body.dark-mode .vemo-tool-wrapper .subtitle { color: #94a3b8; }
body.dark-mode .vemo-tool-wrapper .note { color: #64748b; }
body.dark-mode .vemo-tool-wrapper .pbar { background: #334155; }
body.dark-mode .vemo-tool-wrapper [class*="panel"] { background: #1e293b; border-color: #334155; }
body.dark-mode .vemo-tool-wrapper [class*="result"] { background: #1e293b; border-color: #334155; }
body.dark-mode .vemo-tool-wrapper h2,
body.dark-mode .vemo-tool-wrapper h3 { color: #e2e8f0; }
body.dark-mode .vemo-tool-wrapper p { color: #94a3b8; }
/* Global #vemo-ui dark mode — covers anlagerisiko, cashflow, zinseszins, tools-spiva etc. */
body.dark-mode #vemo-ui .shell,
body.dark-mode #vemo-ui .card { background: #1e293b !important; border-color: #334155 !important; }
body.dark-mode #vemo-ui .input,
body.dark-mode #vemo-ui .select,
body.dark-mode #vemo-ui select,
body.dark-mode #vemo-ui input[type="text"],
body.dark-mode #vemo-ui input[type="number"],
body.dark-mode #vemo-ui input[type="email"] { background: #0f172a !important; color: #f1f5f9 !important; border-color: #334155 !important; }
body.dark-mode #vemo-ui input::placeholder,
body.dark-mode #vemo-ui .input::placeholder { color: #64748b !important; }
body.dark-mode #vemo-ui label,
body.dark-mode #vemo-ui .label { color: #cbd5e1 !important; }
body.dark-mode #vemo-ui h2,
body.dark-mode #vemo-ui h3,
body.dark-mode #vemo-ui .title { color: #f1f5f9 !important; }
body.dark-mode #vemo-ui p,
body.dark-mode #vemo-ui .subtitle,
body.dark-mode #vemo-ui .note { color: #94a3b8 !important; }