:root {
  --primary-color: #009999;
  --secondary-color: #33cccc;
  --third-color: #ffffff;
}

body {
  padding-top: 35px;
}

.primary {
  color: var(--primary-color) !important;
}

.secondary {
  color: var(--secondary-color) !important;
}

.leistung {
  font-weight: bold;
  color: var(--primary-color) !important;
}

.primary-background {
  background-color: var(--primary-color) !important;
  color: var(--third-color) !important;
}

.secondary-background {
  background-color: var(--secondary-color) !important;
  color: var(--third-color) !important;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 15px;
  background-color: var(--primary-color);
  /* Farbe Streifen 1 */
  z-index: 9999;
}

body::after {
  content: "";
  position: fixed;
  top: 15px;
  /* Beginnt direkt unter dem ersten Streifen */
  left: 0;
  width: 100%;
  height: 15px;
  background-color: var(--secondary-color);
  /* Farbe Streifen 2 */
  z-index: 9999;
}

.hl-link {
  background-color: var(--secondary-color);
  padding: 2px 6px;
  border-radius: 8px;
  color: white;
  font-weight: bold;
  text-decoration: none;
}

.hl-link:hover {
  background-color: var(--primary-color);
}

footer a,
main a {
  text-decoration: none;
  color: var(--primary-color);
}