/* liebevoll codiert sn */
.theme-violet-velvet {
  /* Colors */
  --color-primary-75: #7f6391;
  --color-primary-100: #574464;
  --color-neutral-10: #f2ecf5;
  --color-neutral-70: #7b658a;
  --color-neutral-80: #382b40;
  /* Headlines */
  /* --headline-family: "fertigo-pro", serif;
  --headline-large-family: "fertigo-pro", lora, "fertigo-pro", serif;
  --headline-medium-family: "fertigo-pro", lora, "fertigo-pro", serif;
  --headline-small-family: "fertigo-pro", lora, "fertigo-pro", serif;
  --subline--large: "fertigo-pro", lora, "fertigo-pro", serif; */

  /* neue font defin */
  /* Headlines */
  --headline-family: "fertigo-pro";
  --headline-weight: 500;
  --headline-line-height: 1.1;
  --headline-letter-spacing: 0;

  --headline-large-family: var(--headline-family);
  --headline-large-size: 38px;
  --headline-large-style: ;
  --headline-large-weight: var(--headline-weight);
  --headline-large-line-height: var(--headline-line-height);
  --headline-large-letter-spacing: var(--headline-letter-spacing);

  --headline-medium-family: var(--headline-family);
  --headline-medium-size: 40px;
  --headline-medium-style: ;
  --headline-medium-weight: var(--headline-weight);
  --headline-medium-line-height: var(--headline-line-height);
  --headline-medium-letter-spacing: var(--headline-letter-spacing);

  --headline-small-family: var(--headline-family);
  --headline-small-size: 32px;
  --headline-small-style: ;
  --headline-small-weight: var(--headline-weight);
  --headline-small-line-height: var(--headline-line-height);
  --headline-small-letter-spacing: var(--headline-letter-spacing);

  /* Sublines */
  --subline-family: pelago;
  --subline-weight: 300;
  --subline-line-height: 1.5;
  --subline-letter-spacing: 0;

  --subline-large-family: var(--subline-family);
  --subline-large-size: 24px;
  --subline-large-style: ;
  --subline-large-weight: var(--subline-weight);
  --subline-large-line-height: var(--subline-line-height);
  --subline-large-letter-spacing: var(--subline-letter-spacing);

  --subline-medium-family: var(--subline-family);
  --subline-medium-size: 20px;
  --subline-medium-style: ;
  --subline-medium-weight: var(--subline-weight);
  --subline-medium-line-height: var(--subline-line-height);
  --subline-medium-letter-spacing: var(--subline-letter-spacing);

  --subline-small-family: var(--subline-family);
  --subline-small-size: 20px;
  --subline-small-style: ;
  --subline-small-weight: var(--subline-weight);
  --subline-small-line-height: var(--subline-line-height);
  --subline-small-letter-spacing: var(--subline-letter-spacing);

  /* Titles */
  --title-family: pelago;
  --title-weight: 700;
  --title-line-height: 1.1;
  --title-letter-spacing: 0;

  --title-large-family: var(--title-family);
  /* --title-large-size: 20px; */
  --title-large-style: ;
  --title-large-weight: var(--title-weight);
  --title-large-line-height: var(--title-line-height);
  --title-large-letter-spacing: var(--title-letter-spacing);

  --title-medium-family: var(--title-family);
  --title-medium-size: 18px;
  --title-medium-style: ;
  --title-medium-weight: var(--title-weight);
  --title-medium-line-height: var(--title-line-height);
  --title-medium-letter-spacing: var(--title-letter-spacing);

  --title-small-family: var(--title-family);
  --title-small-size: 16px;
  --title-small-style: ;
  --title-small-weight: var(--title-weight);
  --title-small-line-height: var(--title-line-height);
  --title-small-letter-spacing: var(--title-letter-spacing);

  /* Labels */
  --label-family: pelago;
  --label-weight: 500;
  --label-line-height: 1.1;

  --label-large-family: var(--label-family);
  --label-large-size: 18px;
  --label-large-style: ;
  --label-large-weight: var(--label-weight);
  --label-large-line-height: var(--label-line-height);
  --label-large-letter-spacing: 0.1;

  --label-medium-family: var(--label-family);
  --label-medium-size: 16px;
  --label-medium-style: ;
  --label-medium-weight: var(--label-weight);
  --label-medium-line-height: var(--label-line-height);
  --label-medium-letter-spacing: 0.2;

  --label-small-family: var(--label-family);
  --label-small-size: 12px;
  --label-small-style: ;
  --label-small-weight: var(--label-weight);
  --label-small-line-height: var(--label-line-height);
  --label-small-letter-spacing: 0.25;

  /* Body */
  --body-family: pelago;
  --body-weight: 300;
  --body-line-height: 1.5;
  --body-letter-spacing: 0;

  --body-large-family: var(--body-family);
  --body-large-size: 20px;
  --body-large-style: ;
  --body-large-weight: var(--body-weight);
  --body-large-line-height: var(--body-line-height);
  --body-large-letter-spacing: var(--body-letter-spacing);

  --body-medium-family: var(--body-family);
  --body-medium-size: 18px;
  --body-medium-style: ;
  --body-medium-weight: var(--body-weight);
  --body-medium-line-height: var(--body-line-height);
  --body-medium-letter-spacing: var(--body-letter-spacing);

  --body-small-family: var(--body-family);
  --body-small-size: 16px;
  --body-small-style: ;
  --body-small-weight: var(--body-weight);
  --body-small-line-height: var(--body-line-height);
  --body-small-letter-spacing: 0.1;

  /**
 * Viewports
 */

  /* Small */
  @media (min-width: 768px) {
    :root {
      --component-margin-vertical: 56px;
      --component-neutral-padding-horizontal: 32px;
      --component-colored-padding-horizontal: 32px;
      --hero-content-padding-vertical: 48px;
      --inline-card-padding: 24px;
    }
  }

  /* Medium */
  @media (min-width: 1024px) {
    :root {
      --headline-small-size: 40px;
      --headline-large-size: 58px;
      --headline-medium-size: 48px;
      --subline-large-size: 32px;
      --subline-medium-size: 24px;
      --component-margin-vertical: 80px;
      --hero-content-padding-vertical: 52px;
    }
  }

  /* Large */
  @media (min-width: 1280px) {
    :root {
      /* 8-col */
      --max-width-paragraph: 808px;
      --header-height: 50px;
    }
  }

  --body-medium-size: 1.3rem;
  /* Schriftgrösse Footer Datenschutz nötig */
  .footer__meta .linklist__item {
    font-size: 80%;
  }
  /* wenn mehr als ein Bild pro componente */
  .logo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    --image-border-radius: 0px;
    --corners-l: 0px;
  } /* mehrere svg nebeneinander maximale grösse */
  .logo-grid__item img[src$=".svg"] {
    max-width: 200px;
  } /**
 * Viewports
 */
  @media (width <= 768px) {
    /* zweiter Teaser knapp sichtbar */
    .textmedia-teaser-grid {
      --textmedia-teaser-width: 258px;
    }
  }
  @media (min-width: 768px) {
    .logo-grid {
      grid-template-columns: repeat(3, 1fr);
      align-items: center;
    }
  }
  @media (min-width: 1024px) {
    --body-medium-size: 1.5rem;
    --headline-large-size: 58px;
    --subline-large-size: 30px;
  }
  /* Navigation verbessert */
  .header__nav-item--has-subnav {
    /* padding-right: var(--spacing-xs); */
    padding-right: 0;
  }
  .header__mobile-subnav-toggle {
    background: none;
    border: 0;
  }
  .header__nav-item-wrapper {
    display: flex;
    align-items: self-start;
  }
  @media (max-width: 1280px) {
    /* Unterseiten aufgeklappt weil hier nur eine subnav */
    .header__subnav {
      display: block !important;
      padding-left: 1rem;
    }
    /* Ohne chevron weil Unterseiten aufgeklappt */
    .header__mobile-subnav-toggle svg {
      display: none;
    }
  }
}