/* ---------------------------------------------------
   FinanzPro De – Global Styles
   Minimalistisch · Deutsch · Corporate
--------------------------------------------------- */

body {
  font-family: 'Inter', sans-serif;
  background-color: #051923;
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------
   Inputs & Controls
--------------------------------------------------- */

.base-input {
  width: 100%;
  padding: 8px 10px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid #334155;
  border-radius: 6px;
  color: #e2e8f0;
  font-size: 13px;
  transition: 0.2s ease;
}

.base-input:focus {
  outline: none;
  border-color: #0ea5e9;
  background: rgba(15, 23, 42, 0.8);
}

.range-input {
  width: 100%;
  cursor: pointer;
  accent-color: #0ea5e9;
}

/* ---------------------------------------------------
   Buttons
--------------------------------------------------- */

.primary-btn {
  width: 100%;
  padding: 10px 14px;
  background: #0ea5e9;
  color: #051923;
  font-weight: 600;
  font-size: 13px;
  border-radius: 8px;
  transition: 0.2s ease;
}

.primary-btn:hover {
  background: #38bdf8;
}

/* ---------------------------------------------------
   Calculator Cards
--------------------------------------------------- */

.calc-card {
  backdrop-filter: blur(6px);
  transition: 0.25s ease;
}

.calc-card:hover {
  border-color: #475569;
  background: rgba(15, 23, 42, 0.75);
}

/* ---------------------------------------------------
   Result Cards
--------------------------------------------------- */

.result-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid #334155;
  padding: 14px;
  border-radius: 10px;
  animation: fadeIn 0.25s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------
   Footer Links
--------------------------------------------------- */

.footer-link {
  color: #94a3b8;
  transition: 0.2s ease;
}

.footer-link:hover {
  color: #ffffff;
}

/* ---------------------------------------------------
   Cookie Banner
--------------------------------------------------- */

#cookie-banner {
  backdrop-filter: blur(6px);
  border-top: 1px solid #334155;
}

/* ---------------------------------------------------
   SPA Navigation Tabs
--------------------------------------------------- */

.nav-tab {
  cursor: pointer;
  transition: 0.2s ease;
}

.nav-tab:hover {
  color: #ffffff;
}

/* ---------------------------------------------------
   Responsive Tweaks
--------------------------------------------------- */

@media (max-width: 640px) {
  .calc-card {
    padding: 16px;
  }

  .primary-btn {
    padding: 12px;
  }
}