:root {
    --accent-color-1: #C2004B;
    --accent-color-2: #5C748D;

    --button-color: #4e5c6c;
    --button-color-hover: #d7dde2;

    --cta-button-color: #C2004B;
    --cta-button-color-hover: #9D0318;

    --title-color: #c1004b;

    --radius: 6px;
    --radius--card: 8px;
    --radius--large: 12px;
}

/* The underline marks the current page only; hover no longer draws one. */
.nav-header__navigation-item:before,
.nav-header__navigation-item--active:before {
    border: 2px solid #C2004B;
}

/* Header row hover is defined once, in header.scss, which reads
   --button-color-hover and --accent-color-1 from the block above. These rules
   used to duplicate it against the older markup: they tinted
   .nav-header__dropdown (the wrapper) while header.scss tinted the trigger
   button inside it, so a hovered dropdown came out a different colour from
   every other row, with its label and its chevron disagreeing. What remains
   here is the .settings-dropdown menus outside the header — comments and
   edit-content — which still use that older component. */
.footer__hoplr a:hover,
.settings-dropdown .dropdown-button:hover,
.settings-dropdown .dropdown-menu ul > li > a:hover,
.settings-dropdown .dropdown-menu ul > li > a:focus {
    color: #000D6D;
    background-color: #d7dde2;
}


.nav-header .nav-header__navigation-item-text {
  color: var(--title-color);
}

.nav-header__navigation-item--active .nav-header__navigation-item-text {
    color: #C2004B;
}

.pp-button {
    color: #4e5c6c;
    border-color: #4e5c6c;
}

.pp-button:hover {
    background-color: #d7dde2;
}

.pp-button--primary {
    background-color: #C2004B;
    border-color: #C2004B;
    color: white;
}

.pp-button--primary:hover {
    background-color: #C2004B;
    border-color: #C2004B;
}

.pp-button--cta {
    background-color: #C2004B;
    color: white;
    border-color: #C2004B;
}

.pp-button--cta:hover {
    background-color: #9D0318;
    border-color: #9D0318;
}

.bgcolor-theme-1 {
  background-color: #C2004B;
}
.bgcolor-theme-2 {
  background-color: #5C748D;
}

.bgcolor-theme-1--lightened-5 {
  background-color: rgba(194, 0, 75, 0.05);
}
.bgcolor-theme-2--lightened-5 {
  background-color: rgba(92, 116, 141, 0.05);
}

.bgcolor-button {
    background-color: #4e5c6c;
}
.bgcolor-button--hover {
    background-color: #d7dde2;
}

.bgcolor-cta-button {
    background-color: #C2004B;
}
.bgcolor-cta-button--hover {
    background-color: #9D0318;
}

.color-theme-1 {
  color: #C2004B;
}
.color-theme-2 {
  color: #5C748D;
}
.color-title {
    color: #c1004b;
}
.color-cta-button {
    color: #C2004B;
}
.color-button {
    color: #4e5c6c;
}

.border-color-theme-1 {
  border-color: #C2004B;
}
.border-color-theme-2 {
  border-color: #5C748D;
}

.overview .idea-cta {
    background-color: #d7dde2;
}

.perception__button {
    background-color: rgba(194, 0, 75, 0.7);
}

.perception__button:not(:last-child) {
    border-color: rgba(194, 0, 75, 0.2);
}

.perception__button--selected, .perception__button:hover {
    background-color: rgba(194, 0, 75, 1);
}

.project-timeline__circle {
    border-color: #C2004B;
    color: #C2004B;
}

.project-timeline__phase:hover .project-timeline__circle,
.project-timeline__phase--active .project-timeline__circle {
    color: white;
    background-color: #C2004B;
}

.project-timeline .phase-container .phase-info__circle {
    color: #C2004B;
    border-color: #C2004B;
}

.project-timeline .phase-container--active .phase-info__circle {
    color: white;
    background-color: #C2004B;
    border-color: #C2004B;
}

.phase-info-list {
    background-color:#d7dde2;
}

.overview .tile__img-placeholder {
    background-color: #d7dde2;
}

.overview .tile__img-placeholder i {
    color: #4e5c6c;
}

.overview .tile--news .tile__content-info-description p:last-child::before {
    background: linear-gradient(rgba(255,255,255,0.001) 200px, #d7dde2);
}

.survey-questionnaire .survey-item--done .survey-item__question {
    color: #c1004b;
}

.input-checkbox__input:checked + .input-checkbox__click-area:hover {
    background-color: #d7dde2;
}

.input-checkbox__input:checked + .input-checkbox__click-area {
    background-color: #d7dde2;
}

.input-checkbox__input:checked + .input-checkbox__click-area .input-checkbox__button {
    border-color: #4e5c6c;
    background-color: rgba(194, 0, 75, 0.7);
}

.input-radio__input:checked + .input-radio__click-area .input-radio__button {
    border-color: #4e5c6c;
    background-color: rgba(194, 0, 75, 0.7);
}

.input-radio__input:checked + .input-radio__click-area:hover,
.input-radio__input:checked + .input-radio__click-area {
    border-color: #4e5c6c;
    background-color: #d7dde2;
}

.q-rating-scale__options .input-radio__input:checked + .input-radio__click-area:hover {
    background-color: #4e5c6c;
}

.q-rating-scale__options .input-radio__input:checked + .input-radio__click-area {
    border-color: #4e5c6c;
    background-color: rgba(194, 0, 75, 0.7);
}

.project-navigation {
    background-color: rgba(194, 0, 75, 0.05);
    border-bottom: 1px solid rgba(194, 0, 75, 0.15);
}

.about__text a:not(.pp-button) {
    color: #C2004B;
}

.about__text a:not(.pp-button):hover {
    color: rgba(194, 0, 75, 0.75);
}

.about .about-button {
    border-color: #C2004B;
}


@media screen and (min-width: 961px) and (min-width: 1025px) {
  .overview__header-mask {
    display: none;
  }
}

.overview-search .overview-search__input-container:nth-child(2) {
  display: none;
}

body main.main img {
  border-radius: 0;
}

body main.main .overview img {
  border-radius: 0;
}

body main.main .overview__header-info-icon img {
  border-radius: 50%;
}

.pp-button {
  border-radius: 0;
}

.about__logo {
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  background-color: transparent;
}

@font-face {
  font-family: "PFDINStencilBold";
  font-weight: 700;
  src: url("/fonts/PFDINStencilBold/font.woff2") format("woff2"), url("/fonts/PFDINStencilBold/font.woff") format("woff");
}
@font-face {
  font-family: "DINNext";
  font-weight: 400;
  src: url("/fonts/DINNextRegular/font.woff2") format("woff2"), url("/fonts/DINNextRegular/font.woff") format("woff");
}
@font-face {
  font-family: "DINNext";
  font-weight: 500;
  src: url("/fonts/DINNextMedium/font.woff2") format("woff2"), url("/fonts/DINNextMedium/font.woff") format("woff");
}
@font-face {
  font-family: "DINNext";
  font-weight: 200;
  src: url("/fonts/DINNextLight/font.woff2") format("woff2"), url("/fonts/DINNextLight/font.woff") format("woff");
}
@font-face {
  font-family: "DINNext";
  font-weight: 700;
  src: url("/fonts/DINNextBold/font.woff2") format("woff2"), url("/fonts/DINNextBold/font.woff") format("woff");
}

.overview__header-title, .main h1 {
  font-family: "PFDINStencilBold";
  font-weight: 700;
  text-wrap: balance;
}

.main *, body, .nav-header * {
  font-family: "DINNext", "Roboto", sans-serif;
}

.main .overview-search__select-chevron {
  font-family: "Material Icons";
}

.nav-header__navigation-item-text {
  font-size: 16px;
}

.overview .tile__content-info-description {
  font-size: 16px;
}

.message-body__text {
  font-size: 16px;
}

.nav-header__icon {
  font-family: "Material Icons";
}

.about__logo img {
    max-height: 100px;
}