@font-face {
  font-family: "Favorit";
  src: url(./fonts/FavoritStd-Light.woff2) format("woff2");
  font-display: block;
}
@font-face {
  font-family: "Favorit";
  src: url(./fonts/FavoritStd-Regular.woff2) format("woff2");
  font-display: block;
  font-weight: 600 700;
}
@font-face {
  font-family: "Favorit Regular";
  src: url(./fonts/FavoritStd-Regular.woff2) format("woff2");
  font-display: block;
  font-weight: 400;
}

:root {
  /*** Fonts ***/
  --system-typography-font-family: "Favorit";
  --hl-font-family: "Favorit";
  --button-font-family: "Favorit Regular";

  font-family: var(--system-typography-font-family);

  /*** COLOR CARD ***/
  --cc-background-color: #ffffff;
  --cc-background-tint1-color: #f5f5f5;
  --cc-background-tint2-color: #d6d6d6;
  --cc-placeholder-color: #858585;
  --cc-text-color: #333333;
  --cc-text-tint1-color: #1a1a1a;
  --cc-text-tint2-color: #242221;
  --cc-primary-color: #141414;
  --cc-secondary-color: #003e51;
  --cc-tertiary-color: #333333;
  --cc-hover-color: #ffffff;

  --cc-success-color: #17582e;
  --cc-success-background-color: #dae4dd;
  --cc-info-color: #1e369b;
  --cc-info-background-color: #dbdfef;
  --cc-warning-color: #ffe668;
  --cc-warning-background-color: #fffbe7;
  --cc-error-color: #ff0012;
  --cc-error-background-color: #ffd6d9;

  /*** THEME ***/
  --theme-html-background: var(--cc-secondary-color);
  --theme-page-background-color: var(--cc-background-color);

  /*** CONTROLS ***/

  /* Button */
  --button-ext-filled-border-radius: 24px;
  --button-ext-filled-border: 1px solid var(--cc-primary-color);
  --button-ext-filled-color: var(--cc-background-color);
  --button-ext-filled-background-color: var(--cc-primary-color);
  --button-ext-filled-background-color-hover: var(--cc-hover-color);
  --button-ext-filled-background-color-active: var(--cc-hover-color);
  --button-ext-filled-font-weight: 400;

  --button-ext-filled-inverted-color: var(--cc-primary-color);
  --button-ext-filled-inverted-background-color: var(--cc-background-color);
  --button-ext-filled-inverted-background-color-hover: var(--cc-background-tint2-color);
  --button-ext-filled-inverted-background-color-active: var(--cc-background-tint2-color);

  --button-ext-outlined-border-radius: 24px;
  --button-ext-outlined-border: 1px solid var(--cc-text-color);
  --button-ext-outlined-color: var(--cc-primary-color);
  --button-ext-outlined-background-color: var(--cc-background-color);
  --button-ext-outlined-background-color-hover: var(--cc-primary-color);
  --button-ext-outlined-background-color-active: var(--cc-hover-color);
  --button-ext-outlined-font-weight: 400;

  --button-ext-outlined-inverted-color: var(--cc-background-color);
  --button-ext-outlined-inverted-background-color: var(--cc-primary-color);
  --button-ext-outlined-inverted-background-color-hover: var(--cc-secondary-color);
  --button-ext-outlined-inverted-background-color-active: var(--cc-hover-color);

  --button-ext-tonal-border-radius: 24px;
  --button-ext-tonal-border: 2px solid var(--cc-text-tint1-color);
  --button-ext-tonal-color: var(--cc-text-color);
  --button-ext-tonal-background-color: var(--cc-text-tint1-color);
  --button-ext-tonal-background-color-hover: var(--cc-hover-color);
  --button-ext-tonal-background-color-active: var(--cc-hover-color);
  --button-ext-tonal-font-weight: 400;

  /* Checkbox */
  --checkbox-background-color: var(--cc-background-tint2-color);
  --checkbox-background-color-checked: var(--cc-text-tint2-color);
  --checkbox-background-color-hover: var(--cc-background-tint1-color);
  --checkbox-checkmark-color: var(--cc-secondary-color);
  --checkbox-border: 1px solid var(--cc-text-tint1-color);
  --checkbox-border-radius: 0px 4px 0 4px;

  /* Divider */
  --divider-color: var(--cc-background-tint2-color);

  /* IconExt */
  --icon-ext-expand-transform: rotate(45deg);

  /* LinkExt */
  --link-ext-link-color: var(--cc-tertiary-color);
  --link-ext-link-with-arrow-color: var(--cc-text-color);
  --link-ext-link-with-icon-color: var(--cc-text-color);

  /* Loader */
  --loader-embedded-background-color: var(--cc-secondary-color);

  /* Field Input */
  --field-input-placeholder-color: var(--cc-placeholder-color);
  --field-input-background-color: var(--cc-background-tint1-color);
  --field-input-outline-focus: 1px solid var(--cc-text-tint2-color);
  --field-input-border-top: none;
  --field-input-border-left: none;
  --field-input-border-right: none;
  --field-input-border-bottom: 1px solid var(--cc-placeholder-color);
  --field-input-border-radius: 6px 6px 0 0;
  --field-input-border-color-focus: var(--cc-text-color);
  --field-input-border-color-active: var(--cc-text-color);
  --field-input-label-color-focus: var(--cc-primary-color);
  --field-input-error-color: var(--cc-error-color);

  /* Field Select */
  --field-select-option-color: var(--cc-primary-color);
  --field-select-option-background-color: var(--cc-background-tint2-color);
  --field-select-dropdown-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ctitle%3Edown-arrow%3C/title%3E%3Cg fill='%23000000'%3E%3Cpath d='M10.293,3.293,6,7.586,1.707,3.293A1,1,0,0,0,.293,4.707l5,5a1,1,0,0,0,1.414,0l5-5a1,1,0,1,0-1.414-1.414Z' fill='%23000000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");

  /* Modal */
  --modal-border-radius: 4px 4px 0 0;

  --modal-header-color: var(--cc-text-color);
  --modal-header-background-color: var(--cc-background-tint1-color);
  --modal-header-border: 1px solid var(--cc-background-tint1-color);
  --modal-color: var(--cc-text-color);
  --modal-background-color: var(--cc-background-tint2-color);

  --modal-header-error-color: var(--cc-text-color);
  --modal-header-error-background-color: var(--cc-error-background-color);
  --modal-header-error-border: 1px solid var(--cc-error-color);
  --modal-error-color: var(--cc-text-color);
  --modal-error-background-color: var(--cc-background-tint2-color);

  --modal-header-warning-color: var(--cc-text-color);
  --modal-header-warning-background-color: var(--cc-warning-background-color);
  --modal-header-warning-border: 1px solid var(--cc-warning-color);
  --modal-warning-color: var(--cc-text-color);
  --modal-warning-background-color: var(--cc-background-tint2-color);

  --modal-header-info-color: var(--cc-text-color);
  --modal-header-info-background-color: var(--cc-info-background-color);
  --modal-header-info-border: 1px solid var(--cc-info-color);
  --modal-info-color: var(--cc-text-color);
  --modal-info-background-color: var(--cc-background-tint2-color);

  --modal-header-success-color: var(--cc-text-color);
  --modal-header-success-background-color: var(--cc-success-background-color);
  --modal-header-success-border: 1px solid var(--cc-success-color);
  --modal-success-color: var(--cc-text-color);
  --modal-success-background-color: var(--cc-background-tint2-color);

  /* Popover */
  --tooltip-background-color: var(--cc-text-tint2-color);

  /* Swipable Slides */
  --swipable-slides-navigation-icon-background-color: var(--cc-primary-color);
  --swipable-slides-navigation-icon-background-color-hover: var(--cc-background-tint1-color);

  /* Tabs */
  --tab-header-color: var(--cc-text-color);
  --tab-header-color-active: var(--cc-text-color);
  --tab-header-background-color: var(--cc-background-tint1-color);
  --tab-header-background-color-active: var(--cc-background-tint2-color);
  --tab-header-expand-icon-transform: rotate(45deg);
  --tab-content-color: var(--cc-text-color);
  --tab-content-background-color: var(--cc-background-tint2-color);

  /*** BLOCKS ***/

  /* Accordion */
  --accordion-block-border: 1px solid var(--cc-background-tint2-color);
  --accordion-block-expand-icon-transform: rotate(45deg);
  --accordion-block-border-radius: 0;
  --accordion-block-gap: 0;
  --accordion-block-header-background-color: var(--cc-background-tint1-color);
  --accordion-block-open-header-background-color: var(--cc-background-color);
  --accordion-block-open-content-background-color: var(--cc-background-color);

  /* Banner top */
  --banner-top-background-color: var(--cc-primary-color);
  --banner-top-text-color: var(--cc-background-color);

  /* BreadCrumbs */
  --breadcrumbs-background-color: var(--cc-background-tint1-color);
  --breadcrumbs-link-separator-color: var(--cc-primary-color);

  /* Card Information Block */
  --card-information-block-header-color: var(--cc-background-color);
  --card-information-block-header-background-color: var(--cc-primary-color);
  --card-information-block-content-color: var(--cc-background-color);
  --card-information-block-content-background-color: var(--cc-primary-color);
  --card-information-block-border-color: 1px solid var(--cc-primary-color);
  --card-information-block-border-radius: 12px;

  /* Fact And Icon Block */
  --fact-and-icon-block-background-color: var(--cc-background-color);
  --fact-and-icon-block-icon-background-color: var(--cc-background-color);

  /* Footer */
  --footer-background-color: var(--cc-background-color);
  --footer-color: var(--cc-tertiary-color);
  --footer-link-color-hover: var(--cc-tertiary-color);
  --footer-divider-color: var(--cc-background-tint2-color);
  --footer-links-block-divider-color: var(--cc-background-tint2-color);

  /* GDPR Link Area */
  --gdpr-link-decoration: underline;

  /* Header */
  --header-color: var(--cc-text-color);
  --header-background-color: var(--cc-background-color);
  --header-navigation-color-active: var(--cc-text-color);
  --header-login-background: var(--cc-background-color);
  --header-login-background-hover: var(--cc-background-color);
  --header-bottom-border: 1px solid var(--cc-background-tint2-color);
  --header-sitelinks-color: var(--cc-primary-color);
  --header-sitelinks-color-active: var(--cc-primary-color);

  /* Hero block */
  --hero-headline-wrap-background-color: var(--cc-primary-color);
  --hero-headline-wrap-color: var(--cc-background-color);
  --hero-headline-li-icon: url("data:image/svg+xml;utf8,%0A%20%20%20%20%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M6.35547%2010.1949L11.2901%2015.1279L21.9999%204.41974%22%20stroke%3D%22%23FFFFFF%22%20stroke-miterlimit%3D%2210%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M19.1028%204.96822C18.8882%204.75206%2018.664%204.54396%2018.4317%204.34715C16.6927%202.8824%2014.4472%202%2011.9952%202C6.47493%202%202%206.47491%202%2011.9935C2%2017.5122%206.47493%2021.9871%2011.9952%2021.9871C17.5154%2021.9871%2021.9903%2017.5122%2021.9903%2011.9935C21.9903%2010.9627%2021.8339%209.96741%2021.5435%209.03178C21.3967%208.56074%2021.2176%208.1026%2021.0063%207.66382%22%20stroke%3D%22%23FFFFFF%22%20stroke-miterlimit%3D%2210%22%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20%20%20")
    no-repeat 0 2px;

  /* Large USP Teaser Block */
  --large-usp-teaser-block-background: var(--cc-background-color);

  /* Navigation */
  --navigation-popup-background-color: #f8f8f8;
  --navigation-popup-color: var(--cc-text-tint1-color);
  --navigation-block-mobile-item-border-bottom: 1px solid var(--cc-background-tint2-color);

  /* Search */
  --search-page-prompt-background: var(--cc-background-tint2-color);

  /* Small Teaser Article Container Block */
  --small-teaser-article-container-block-band-color: var(--cc-background-tint2-color);

  /* Teaser-full-page-block */
  --teaser-full-page-block-content-wrap-background-color: var(--cc-background-color);
  --teaser-full-page-block-content-wrap-header-font-weight: 400;
  --teaser-full-page-block-content-wrap-link-font-weight: 700;
  --teaser-full-page-block-border: none;

  /* Text block */
  --text-block-border: 1px solid var(--cc-background-tint2-color);
  --text-block-border-radius: 0px;
  --text-block-error-color: var(--cc-text-color);
  --text-block-error-background-color: var(--cc-error-background-color);
  --text-block-warning-color: var(--cc-text-color);
  --text-block-warning-background-color: var(--cc-warning-background-color);
  --text-block-info-color: var(--cc-text-color);
  --text-block-info-background-color: var(--cc-info-background-color);
  --text-block-success-color: var(--cc-text-color);
  --text-block-success-background-color: var(--cc-success-background-color);
  --text-block-variation1-color: var(--cc-background-color);
  --text-block-variation1-background-color: var(--cc-tertiary-color);
  --text-block-variation2-color: var(--cc-background-color);
  --text-block-variation2-background-color: var(--cc-text-tint1-color);
  --text-block-table-headline-background-color: var(--cc-background-tint1-color);
  --text-block-table-body-background-color: var(--cc-background-color);
  --text-block-table-odd-colored-background-color: var(--cc-background-tint1-color);
  --text-block-li-icon: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M10.3333%2015.1034L7.34483%2012.1149C7.2682%2012.0383%207.1772%2011.9952%207.07184%2011.9856C6.96648%2011.9761%206.8659%2012.0192%206.77011%2012.1149C6.67433%2012.2107%206.62644%2012.3065%206.62644%2012.4023C6.62644%2012.4981%206.67433%2012.5939%206.77011%2012.6897L9.72989%2015.6494C9.9023%2015.8218%2010.1034%2015.908%2010.3333%2015.908C10.5632%2015.908%2010.7644%2015.8218%2010.9368%2015.6494L17.1724%209.41379C17.249%209.33716%2017.2921%209.24617%2017.3017%209.1408C17.3113%209.03544%2017.2682%208.93487%2017.1724%208.83908C17.0766%208.7433%2016.9808%208.6954%2016.8851%208.6954C16.7893%208.6954%2016.6935%208.7433%2016.5977%208.83908L10.3333%2015.1034ZM12.005%2022C10.6224%2022%209.32224%2021.7376%208.10465%2021.2129C6.88705%2020.6882%205.8279%2019.976%204.92721%2019.0765C4.02654%2018.1769%203.31351%2017.1191%202.7881%2015.903C2.2627%2014.687%202%2013.3876%202%2012.005C2%2010.6224%202.26237%209.32224%202.7871%208.10466C3.31185%206.88705%204.02399%205.82791%204.92353%204.92724C5.82309%204.02655%206.8809%203.31351%208.09695%202.7881C9.31301%202.2627%2010.6124%202%2011.995%202C13.3776%202%2014.6778%202.26237%2015.8953%202.7871C17.1129%203.31185%2018.1721%204.02399%2019.0728%204.92353C19.9734%205.82309%2020.6865%206.8809%2021.2119%208.09695C21.7373%209.31301%2022%2010.6124%2022%2011.995C22%2013.3776%2021.7376%2014.6778%2021.2129%2015.8953C20.6882%2017.113%2019.976%2018.1721%2019.0765%2019.0728C18.1769%2019.9735%2017.1191%2020.6865%2015.903%2021.2119C14.687%2021.7373%2013.3876%2022%2012.005%2022ZM12%2021.1954C14.567%2021.1954%2016.7414%2020.3046%2018.523%2018.523C20.3046%2016.7414%2021.1954%2014.567%2021.1954%2012C21.1954%209.43295%2020.3046%207.25862%2018.523%205.47701C16.7414%203.6954%2014.567%202.8046%2012%202.8046C9.43295%202.8046%207.25862%203.6954%205.47701%205.47701C3.6954%207.25862%202.8046%209.43295%202.8046%2012C2.8046%2014.567%203.6954%2016.7414%205.47701%2018.523C7.25862%2020.3046%209.43295%2021.1954%2012%2021.1954Z%22%20fill%3D%22%23141414%22%2F%3E%0A%20%20%20%20%20%20%3C%2Fsvg%3E%0A%20%20%20%20%20%20")
    no-repeat 0 2px;

  /* USP Container */
  --usp-container-block-background: var(--cc-tertiary-color);
  --usp-block-title-color: var(--cc-secondary-color);
  --usp-block-text-color: var(--cc-secondary-color);

  /* Webshop Entry Block */
  --webshop-entry-block-background: var(--cc-background-color);
  --webshop-entry-block-header-color: var(--cc-text-color);
  --webshop-entry-block-full-background: var(--cc-background-tint2-color);
  --webshop-entry-block-full-background-color: var(--cc-text-tint1-color);
  --webshop-entry-block-header-font-weight: 700;

  /* TODO: Add variable for border-radius? */
  --mg-card-border-radius: 12px;
}

/* Custom styling */

.teaser-full-page-block img,
.large-usp-teaser-block img,
.text-block img {
  border-radius: var(--mg-card-border-radius);
}

.article-teaser-block img {
  border-top-left-radius: var(--mg-card-border-radius);
  border-top-right-radius: var(--mg-card-border-radius);
}

.article-teaser-block-wrapper,
.fact-and-icon-block {
  border: 1px solid var(--cc-background-tint2-color);
  border-radius: var(--mg-card-border-radius);
}

.article-teaser-block-wrapper .article-teaser-block {
  border: none;
}

a.button-primary {
  font-family: var(--button-font-family);
  color: var(--cc-primary-color) !important;
  background-color: var(--cc-background-color) !important;
}

a.button-primary:hover {
  color: var(--cc-background-color) !important;
  background-color: var(--cc-primary-color) !important;
  border: 2px solid var(--cc-background-color); /* → candidate: --button-hover-border-width */
}

.button-ext.filled:hover {
  border: 2px solid var(--cc-primary-color); /* → candidate: --button-hover-border-width */
  color: var(--cc-primary-color) !important;
}

.button-ext.outlined:hover {
  color: var(--cc-background-color) !important;
}

.link-ext.link:hover,
.navigation-popup .menu-item .link-ext:hover,
.navigation-item .link-ext.link:hover,
.navigation-item-wrapper summary:hover {
  color: var(--cc-primary-color);
  text-decoration: underline;
}

.footer-links-block .link-ext.link,
.footer-links-bottom .link-ext.link {
  text-decoration: none;
  font-family: var(--button-font-family);
  &:hover {
    text-decoration: underline;
  }
}

.footer-links-block .link-ext.linkWithArrow,
.footer-links-bottom .link-ext.linkWithArrow,
.card-information-block .link-ext.linkWithArrow,
.navigation-body,
.navigation-popup .links {
  font-family: var(--button-font-family);
}

.accordion-items-wrapper {
  background-color: var(--accordion-block-header-background-color);
  border: var(--accordion-block-border);
  border-radius: 12px;
  overflow: hidden;

  .accordion-block {
    border: none;

    &:not([open]) + &:not([open]) > summary.accordion-title {
      border-top: var(--accordion-block-border);
    }
  }
}

details.accordion-block[open] {
  border-radius: var(--mg-card-border-radius);
}

details.accordion-block summary.accordion-title:hover {
  text-decoration: none;
}

.card-information-block .link-ext.linkWithArrow:hover,
.text-block a:not(.button-primary):not(.button-secondary):not(.button-ext):hover {
  color: #5c5c5c;
}

.tab-header {
  border-radius: var(--mg-card-border-radius);
}

.navigation-block-mobile .navigation-body details.navigation-item .openNode > .icon-ext.expand {
  width: 24px !important;
  height: 24px !important;
}

.accordion-content .text-block {
  padding-top: 0;
  padding-bottom: 0;
}

.headline-area .text-block {
  padding-top: 24px;
  padding-bottom: 32px;
}

@media (max-width: 960px) {
  .hero .headline-wrap .headline-content {
    padding-bottom: 0;
  }
}

.text-block .text-area {
  gap: 0;
}

.container.main-content-area > .text-block-wrapper > .text-block {
  padding-top: 20px;
}

.page-header-wrapper > .page-header {
  padding-bottom: 0;
}

.button-ext.menu-open-button,
.login-and-search-block a.link-ext.link,
button.search-input-prompt {
  font-family: var(--system-typography-font-family);
}