/* ----------------------------------------------
   CryptoTax Inc. – Corporate Style (Custom CSS)
   Gültig ab 2025, Stand: Styleguide PDF
---------------------------------------------- */

/* 1. Farbdefinitionen (als CSS-Variablen für universellen Einsatz) */
:root {
  /* Primärfarben */
  --color-ct-primary: #022a39;
  --color-ct-primary-light: #004d78;
  --color-ct-accent: #9abae3;
  --color-ct-white: #fff;
  --color-ct-black: #000;

  /* Grautöne */
  --color-ct-gray-900: #3c3c3b;
  --color-ct-gray-700: #706f6f;
  --color-ct-gray-500: #9d9d9c;
  --color-ct-gray-100: #ededed;

  /* Sekundärfarben */
  --color-ct-secondary-yellow: #ffe163;
  --color-ct-secondary-orange: #f7a600;
  --color-ct-secondary-green: #95c11f;
  --color-ct-secondary-red: #d20a11;
  --color-ct-secondary-pink: #f6b1ae;

  /* Ausnahme (nur für Co-Branding): Rot */
  --color-ct-coop-red: #d20a11;
}

/* 2. Typografie (Brand: Roboto, falls nicht geladen: Arial/Helvetica) */
body, html {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-weight: 300;
  color: var(--color-ct-primary);
  background-color: var(--color-ct-white);
  letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-weight: 700;
  color: var(--color-ct-primary);
  letter-spacing: 0.01em;
}
h1      { font-size: 2.5rem; line-height: 1.1; }
h2      { font-size: 2rem;   line-height: 1.15;}
h3      { font-size: 1.5rem; line-height: 1.2; }
h4, h5, h6 { font-weight: 500; }

p, li, label, input, select, textarea {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: var(--color-ct-gray-900);
}

.subheadline, .subtitle, .subhead {
  font-weight: 300;
  font-size: 1.15rem;
  color: var(--color-ct-primary-light);
}

blockquote, .quote, .italic {
  font-style: italic;
  font-weight: 400;
  color: var(--color-ct-primary-light);
}

/* 3. Logo-Mindestgröße & Freiraum */
.logo-ct {
  min-width: 300px;
  min-height: 138px;
  display: inline-block;
  padding: calc(0.625 * 138px);
  background: transparent;
}
@media (max-width: 400px) {
  .logo-ct { min-width: 180px; min-height: 80px; padding: 16px; }
}

/* 4. Buttons */
.btn, .button, .btn-primary {
  background-color: var(--color-ct-primary);
  color: var(--color-ct-white);
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-weight: 700;
  padding: 0.75rem 2rem;
  border-radius: 2rem;
  border: none;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 12px 0 rgba(2,42,57,0.04);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.btn:hover, .button:hover, .btn-primary:hover {
  background-color: var(--color-ct-primary-light);
  color: var(--color-ct-white);
}
.btn-secondary {
  background-color: var(--color-ct-accent);
  color: var(--color-ct-primary);
  border: none;
}
.btn-secondary:hover {
  background-color: var(--color-ct-primary-light);
  color: var(--color-ct-white);
}
.btn-large {
  font-size: 1.25rem;
  padding: 1rem 2.5rem;
}
.btn-full {
  width: 100%;
  display: block;
}

/* 5. Card-Elemente */
.card,
.feature-card,
.service-card,
.testimonial-card,
.pricing-card,
.faq-card {
  background: var(--color-ct-white);
  border-radius: 1.25rem;
  box-shadow: 0 2px 16px 0 rgba(2,42,57,0.06);
  padding: 2.5rem 2rem;
  border: 1px solid var(--color-ct-gray-100);
  margin-bottom: 2rem;
  transition: box-shadow 0.2s, border 0.2s;
}
.card:hover,
.feature-card:hover,
.service-card:hover,
.testimonial-card:hover,
.pricing-card:hover,
.faq-card:hover {
  box-shadow: 0 4px 24px 0 rgba(2,42,57,0.13);
  border-color: var(--color-ct-accent);
}

.card-title, .feature-card h3, .service-card h3, .testimonial-card h3, .pricing-card h3, .faq-card h3 {
  color: var(--color-ct-primary);
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.feature-card,
.testimonial-card,
.pricing-card,
.faq-card {
  margin-bottom: 0;
}

/* 6. Footer */
footer, .main-footer {
  background: var(--color-ct-white);
  color: var(--color-ct-gray-900);
  border-top: 1px solid var(--color-ct-gray-100);
  font-size: 1rem;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
}
footer a, .main-footer a {
  color: var(--color-ct-primary-light);
  text-decoration: none;
  transition: color 0.15s;
}
footer a:hover, .main-footer a:hover {
  color: var(--color-ct-primary);
  text-decoration: underline;
}
.footer-section-title {
  font-weight: 700;
  color: var(--color-ct-primary);
}
.footer-legal {
  color: var(--color-ct-gray-500);
  font-size: 0.95rem;
}

/* 7. Darkmode (CSS-Variable Umschaltung) */
@media (prefers-color-scheme: dark) {
  :root {
    --color-ct-white: #181c20;
    --color-ct-black: #fff;
    --color-ct-gray-900: #ededed;
    --color-ct-gray-700: #9d9d9c;
    --color-ct-gray-500: #706f6f;
    --color-ct-gray-100: #3c3c3b;
  }
  body, html {
    background: var(--color-ct-white);
    color: var(--color-ct-black);
  }
  footer, .main-footer {
    background: var(--color-ct-white);
    color: var(--color-ct-black);
    border-top: 1px solid var(--color-ct-gray-100);
  }
}

/* 8. Utility/Spacing */
.section, .py-section {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-4 { margin-top: 1rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.pt-8 { padding-top: 2rem !important; }
.pb-8 { padding-bottom: 2rem !important; }

/* 9. Formulare */
input, select, textarea {
  border-radius: 0.7rem;
  border: 1px solid var(--color-ct-gray-100);
  padding: 0.75rem 1rem;
  background: var(--color-ct-white);
  color: var(--color-ct-primary);
  font-size: 1rem;
  transition: border 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-ct-accent);
}
label {
  color: var(--color-ct-gray-900);
  font-weight: 500;
}

/* 10. Tabellen, Listen */
.table-ct {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background: var(--color-ct-white);
}
.table-ct th, .table-ct td {
  padding: 1rem;
  border-bottom: 1px solid var(--color-ct-gray-100);
  font-size: 1rem;
}
.table-ct th {
  font-weight: 700;
  color: var(--color-ct-primary);
  background: var(--color-ct-gray-100);
}

/* 11. Specials (Trust Badges, Logos, etc. – Platzhalter für später) */
/* .trust-badge {...} */

/* 12. Extra: Utility für Darkmode per class="dark" (falls JS/Framework) */
html.dark, .dark body {
  background: var(--color-ct-white);
  color: var(--color-ct-black);
}
.dark footer, .dark .main-footer {
  background: var(--color-ct-white);
  color: var(--color-ct-black);
  border-top: 1px solid var(--color-ct-gray-100);
}

/* 13. Extra: Animations, Micro-Interactions (Platzhalter) */
/* .btn:active { transform: scale(0.98); } */

/* 14. Print (Optional) */
/* @media print { ... } */