@font-face {
  font-family: "Skoda-Next";
  src: url(./fonts/SKODANextW01-Regular.woff2) format("woff2");
  font-display: block;
}

@font-face {
  font-family: "Skoda-Next";
  src: url(./fonts/SKODANextW01-Bold.woff2) format("woff2");
  font-display: block;
  font-weight: 700;
}

:root {
  /*** Fonts ***/
  --system-typography-font-family: "Skoda-Next";
  --hl-font-family: "Skoda-Next";
  --button-font-family: "Skoda-Next";

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

  /*** COLOR CARD ***/
  --cc-background-color: #ffffff;
  --cc-background-tint1-color: #f1f1f1;
  --cc-background-tint2-color: #d8d8d8;
  --cc-placeholder-color: #7c7d7e;
  --cc-text-color: #161718;
  --cc-text-tint1-color: #303132;
  --cc-text-tint2-color: #464748;
  --cc-primary-color: #419468;
  --cc-secondary-color: #78faae;
  --cc-tertiary-color: #0e3a2f;
  --cc-hover-color: #464748;

  --cc-success-color: #37d002;
  --cc-success-background-color: #dff7d7;
  --cc-info-color: #2d71d7;
  --cc-info-background-color: #dde8f9;
  --cc-warning-color: #ec6513;
  --cc-warning-background-color: #fce6d9;
  --cc-error-color: #e82b37;
  --cc-error-background-color: #fbdddf;

  --cc-custom-primary-button-background-color-hover: #A8FFCC;

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

  /*** CONTROLS ***/

  /* Button */
  --button-ext-filled-border-radius: 24px;
  --button-ext-filled-border: 2px solid var(--cc-secondary-color);
  --button-ext-filled-color: var(--cc-text-color);
  --button-ext-filled-background-color: var(--cc-secondary-color);
  --button-ext-filled-background-color-hover: var(--cc-custom-primary-button-background-color-hover);
  --button-ext-filled-background-color-active: var(--cc-custom-primary-button-background-color-hover);
  --button-ext-filled-font-weight: 700;

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

  --button-ext-outlined-border-radius: 24px;
  --button-ext-outlined-border: 2px solid var(--cc-text-tint2-color);
  --button-ext-outlined-color: var(--cc-text-color);
  --button-ext-outlined-background-color: #00000000;
  --button-ext-outlined-background-color-hover: #00000055;
  --button-ext-outlined-background-color-active: var(--cc-hover-color);
  --button-ext-outlined-font-weight: 700;

  --button-ext-outlined-inverted-color: var(--cc-background-tint2-color);
  --button-ext-outlined-inverted-background-color: var(--cc-text-tint2-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: 700;

  /* 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-primary-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);

  /* 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: 4px 4px 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-tertiary-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-background-color);
  --tab-header-background-color: var(--cc-background-tint2-color);
  --tab-header-background-color-active: var(--cc-tertiary-color);
  --tab-header-expand-icon-transform: rotate(-45deg);
  --tab-content-color: var(--cc-background-color);
  --tab-content-background-color: var(--cc-tertiary-color);

  /*** BLOCKS ***/

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

  /* Banner top */
  --banner-top-background-color: var(--cc-tertiary-color);
  --banner-top-text-color: var(--cc-secondary-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-tertiary-color);
  --card-information-block-content-color: var(--cc-background-color);
  --card-information-block-content-background-color: var(--cc-tertiary-color);

  /* Comparison Table */
  --comparison-table-expand-icon-transform: rotate(45deg);

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

  /* Footer */
  --footer-background-color: var(--cc-tertiary-color);
  --footer-color: var(--cc-background-color);
  --footer-link-arrow-display: none;
  --footer-divider-color: var(--cc-placeholder-color);
  --footer-links-block-divider-color: transparent;

  /* 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-hover-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-tertiary-color);
  --hero-headline-wrap-color: var(--cc-background-color);
  --hero-headline-li-icon: url("data:image/svg+xml;utf8,%3Csvg%20%0A%20%20%20%20width%3D%2224%22%20%0A%20%20%20%20height%3D%2224%22%20%0A%20%20%20%20viewBox%3D%220%200%2024%2024%22%20%0A%20%20%20%20fill%3D%22none%22%0A%20%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%0A%20%20%3E%0A%20%20%20%20%3Cpath%20%0A%20%20%20%20%20%20fill-rule%3D%22evenodd%22%20%0A%20%20%20%20%20%20clip-rule%3D%22evenodd%22%20%0A%20%20%20%20%20%20d%3D%22M3%2011.5C3%209.24566%203.89553%207.08365%205.48959%205.48959C7.08365%203.89553%209.24566%203%2011.5%203C13.7543%203%2015.9163%203.89553%2017.5104%205.48959C19.1045%207.08365%2020%209.24566%2020%2011.5C20%2013.7543%2019.1045%2015.9163%2017.5104%2017.5104C15.9163%2019.1045%2013.7543%2020%2011.5%2020C9.24566%2020%207.08365%2019.1045%205.48959%2017.5104C3.89553%2015.9163%203%2013.7543%203%2011.5ZM11.5%202C10.2524%202%209.0171%202.24572%207.86451%202.72314C6.71191%203.20056%205.66464%203.90033%204.78249%204.78249C3.90033%205.66464%203.20056%206.71191%202.72314%207.86451C2.24572%209.0171%202%2010.2524%202%2011.5C2%2012.7476%202.24572%2013.9829%202.72314%2015.1355C3.20056%2016.2881%203.90033%2017.3354%204.78249%2018.2175C5.66464%2019.0997%206.71191%2019.7994%207.86451%2020.2769C9.0171%2020.7543%2010.2524%2021%2011.5%2021C14.0196%2021%2016.4359%2019.9991%2018.2175%2018.2175C19.9991%2016.4359%2021%2014.0196%2021%2011.5C21%208.98044%2019.9991%206.56408%2018.2175%204.78249C16.4359%203.00089%2014.0196%202%2011.5%202ZM9.854%2014.854L16.354%208.354L15.646%207.646L9.5%2013.793L7.354%2011.646L6.646%2012.354L9.146%2014.854L9.5%2015.207L9.854%2014.854Z%22%20%0A%20%20%20%20%20%20fill%3D%22%2378FAAE%22%0A%20%20%20%20%2F%3E%0A%20%20%3C%2Fsvg%3E") no-repeat 0 2px;

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

  /* Logos */
  --logo-main-align-self: flex-start;

  /* Navigation */
  --navigation-popup-background-color: var(--cc-background-tint1-color);
  --navigation-popup-color: var(--cc-text-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: 700;

  /* 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,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" ><path fillRule="evenodd" clipRule="evenodd" d="M3 11.5C3 9.24566 3.89553 7.08365 5.48959 5.48959C7.08365 3.89553 9.24566 3 11.5 3C13.7543 3 15.9163 3.89553 17.5104 5.48959C19.1045 7.08365 20 9.24566 20 11.5C20 13.7543 19.1045 15.9163 17.5104 17.5104C15.9163 19.1045 13.7543 20 11.5 20C9.24566 20 7.08365 19.1045 5.48959 17.5104C3.89553 15.9163 3 13.7543 3 11.5ZM11.5 2C10.2524 2 9.0171 2.24572 7.86451 2.72314C6.71191 3.20056 5.66464 3.90033 4.78249 4.78249C3.90033 5.66464 3.20056 6.71191 2.72314 7.86451C2.24572 9.0171 2 10.2524 2 11.5C2 12.7476 2.24572 13.9829 2.72314 15.1355C3.20056 16.2881 3.90033 17.3354 4.78249 18.2175C5.66464 19.0997 6.71191 19.7994 7.86451 20.2769C9.0171 20.7543 10.2524 21 11.5 21C14.0196 21 16.4359 19.9991 18.2175 18.2175C19.9991 16.4359 21 14.0196 21 11.5C21 8.98044 19.9991 6.56408 18.2175 4.78249C16.4359 3.00089 14.0196 2 11.5 2ZM9.854 14.854L16.354 8.354L15.646 7.646L9.5 13.793L7.354 11.646L6.646 12.354L9.146 14.854L9.5 15.207L9.854 14.854Z" fill="%23419468" /></svg>') 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-tertiary-color);
  --webshop-entry-block-full-background-color: var(--cc-background-color);
  --webshop-entry-block-header-font-weight: 700;
  --webshop-entry-full-background-field-input-label-color: var(--cc-background-color);
}