/* Gemeinsame Button‑Styles für Komponenten‑Seiten (DE)
   Entspricht visuell der Klasse `cta-button` von den Startseiten. */

/* Sicherstellen, dass die Tailwind-Textopazitätsvariable existiert */
:root {
  --tw-text-opacity: 1;
  /* OS-/Browser-Darkmode global deaktivieren (Form Controls/Scrollbars etc.) */
  color-scheme: light;
}

.cta-button {
  display: inline-block;
  background-color: #3b82f6; /* light-primary */
  color: #ffffff;
  font-weight: 600; /* semibold */
  padding: 0.75rem 2rem; /* py-3 px-8 */
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.cta-button:hover {
  background-color: #2563eb; /* light-primary-hover */
  transform: translateZ(0) scale(1.05);
}

.cta-button:focus {
  outline: none; /* focus:outline-none */
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #3b82f6; /* focus:ring-2 focus:ring-offset-2 focus:ring-light-primary */
}

/* Darkmode-Varianten deaktiviert: Wir unterstützen keinen System-Darkmode. */

/* Vereinheitlichte H2‑Typografie für Inhaltsbereiche wie auf index.html */
.prose h2 {
  font-size: 1.3125rem; /* ~30% kleiner als 1.875rem (text-3xl) */
  line-height: 1.575rem; /* ~30% kleiner als 2.25rem */
  font-weight: 700; /* font-bold */
  color: #0f172a; /* light-text-primary */
  margin-top: 1.25rem; /* mt-5 (nahe an space-y-3 Rhythmus) */
  margin-bottom: 0.5rem; /* kleiner Abstand zur folgenden Einleitung */
}

@media (min-width: 768px) { /* md */
  .prose h2 {
    font-size: 1.575rem; /* ~30% kleiner als 2.25rem (text-4xl) */
    line-height: 1.75rem; /* ~30% kleiner als 2.5rem */
  }
}

/* Überschriften bleiben unabhängig vom System-Darkmode konsistent */
.prose h2 { color: #0f172a; }

/* Vereinheitlichte Navigations-Textfarbe (nur im Light Mode)
   Entspricht Tailwind slate-600: rgb(71 85 105 / var(--tw-text-opacity, 1)) */
html:not(.dark) header nav a:not(.cta-button),
html:not(.dark) header nav button,
html:not(.dark) header #mobile-menu a:not(.cta-button) {
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

/* Erzwinge: 3 Kacheln auf Komponenten-Seiten immer im Light-Design
   (unabhängig vom System-/Browser-Darkmode). Zielt auf das gemeinsame
   3-Spalten-Grid mit `.rounded-lg.p-6.border`-Cards, ohne den Darkmode
   der restlichen Seite zu beeinflussen. */
@media (prefers-color-scheme: dark) {
  /* Kachel-Container */
  .md\:grid-cols-3 .rounded-lg.p-6.border {
    background-color: #ffffff !important; /* Light Surface */
    border-color: #e5e7eb !important;     /* slate-200 */
    color: #0f172a !important;            /* Light Text Primary */
  }

  /* Überschriften in den Kacheln */
  .md\:grid-cols-3 .rounded-lg.p-6.border h3,
  .md\:grid-cols-3 .rounded-lg.p-6.border h4 {
    color: #0f172a !important;
  }

  /* Fließtext in den Kacheln */
  .md\:grid-cols-3 .rounded-lg.p-6.border p,
  .md\:grid-cols-3 .rounded-lg.p-6.border li {
    color: #334155 !important; /* slate-700 */
  }
}