:root {
  /* page size */
  --page-max-width: 90rem; /* TODO: 90rem */

  /* background colors */
  --color-bg-boxes: #f0f0f0;
  --color-bg-footer: #f0f0f0;
  --color-bg-page: #ffffff;
  --color-bg-background: #f7f7f7;
  --color-bg-mainnav-active: #f0f0f0;

  /* container size */
  --container-x-padding: 4rem;
  --container-x-padding-sm: 1rem; /* small displays */

  /* CTA */
  --color-cta: #0065bd;
  --cta-padding-bottom: 6rem; /* damit genug Platz für den Button ist */

  /* font colors */
  --color-font-dark: #282828;
  --color-font-middle: #737373;
  --color-font-highlight: #0065bd;
  --color-font-light: #b4b4b4;

  /* box padding and distances */
  --box-padding: 1rem;
  --box-margin-bottom: 1rem;
}

#footer {
  background: linear-gradient(37deg, #144b5c, #195d72) !important;
}

#c5,
#c6 {
  background: transparent;
  color: #fff;
}

#c5 a,
#c6 a {
  color: #d6d327 !important;
}

/********************************** Hover-effects *********************************/
/********************** Based on hover-effects from WordPress *********************/
/* Styling */
.css-card {
  border-radius: 5px 40px 5px 40px !important;
  background-color: transparent;
}

.css-cta {
  background: linear-gradient(37deg, #1e7090 23%, #04943d);
  overflow-wrap: break-word;
  border-radius: 5px !important;
}

.text-link-a .bg-colored {
  background: linear-gradient(37deg, #1e7090 23%, #04943d);
  color: #f0ec2a;
}

.text-link-a:hover.bg-colored {
  color: #f0ec2a;
}

/* Parent class for hover effect */
.css-card,
.css-cta, .contact, .text-link {
  transition: all 450ms ease;
  position: relative;
}

/* Hover-effect for card --> box-shadow */
.css-card:hover, .contact:hover, .text-link:hover {
  box-shadow: #cecece 1px 1px 15px 1px;
}

/* Hover-effect --> lift up*/
.text-link:hover
 {
  transform:  translateY(-5px);
}

/* Hover-effect for card --> round corners */
.css-cta:hover {
  border-radius: 5px 40px 5px 40px !important;
}

/* Effect for 'Typ Teaser (kspwidgets_cards) --> colored bar */
.css-img-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 5px 40px 0px 0px;
}

.css-img-wrapper::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.5rem;
  background-color: #8cb65f;
  z-index: 1;
}

.css-img-wrapper::after {
  transition: all 450ms ease;
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0.5rem;
  background-color: #a0ca73;
  z-index: 1;
}

.css-card:hover > .css-img-wrapper::after {
  width: 100%;
}

/* Effect for 'Typ Teaser (kspwidgets_cards) --> shrinking image */
.css-img-wrapper .css-card-img {
  transform: scale3d(1.1, 1.1, 1);
  transition: all 450ms ease;
}

.css-card:hover > .css-img-wrapper .css-card-img {
  transform: scale3d(1, 1, 1);
  transition: transform 1s ease;
}