/* Kurs-Branding-Overlay: passt Kernfarben/Typografie an die Kursseite an,
   ohne die kompilierte React-App selbst zu verändern. */

.course-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  background: #08726f;
  color: #dff6f3;
  font-family: Inter, Arial, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  text-align: center;
}
.course-banner a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.course-banner a:hover { color: #e8a33b; }

/* Hero-Header: vom Violett-Gradient auf das Teal/Ink der Kursseite umstellen */
header {
  background: linear-gradient(150deg, #0d8d88 0%, #08726f 55%, #0e2746 100%) !important;
}

/* Überschriften: Georgia-Serife wie auf der Kursseite statt Fraunces */
h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif !important;
}

/* Seiten-Grundton dezent an die Kursseite angleichen */
body { background: #eef3f3; }