﻿main section.section--background {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-block: var(--spacing-130);
}

main section.section--background .container > .row > .block {
  background-color: var(--colors-neutral-50);
  border: 0 none;
  grid-column: 1 / span 12;
  margin-inline: auto;
  padding: var(--spacing-50);
}

main section.section--background .container > .row > .block h2 {
  font-size: var(--heading-3, 2rem);
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.02em;
  max-width: 24ch;
}

main section.section--background .container > .row > .block .disclaimer {
  margin-top: var(--spacing-30);
}

main section.section--background .esg {
  margin-top: var(--spacing-70);
}

main section.section--background .esg .row {
  display: grid;
  grid-gap: var(--grid-column-gap);
}

main section.section--background .esg .row .esgblock {
  background-color: var(--colors-neutral-100);
  padding: var(--spacing-50) var(--spacing-10) var(--spacing-40) ;
}

main section.section--background .esg .row .esgblock .box {
  border-top: unset;
  padding-top: unset;
}

main section.section--background .esg .row .esgblock .box-content {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-30);
  justify-content: center;
}

main section.section--background .esg .row .esgblock img {
  background-color: var(--colors-brand-primary-50);
  height: var(--spacing-90);
  width: var(--spacing-90);
}

main section.section--background .esg .row .esgblock dl,
main section.section--background .esg .row .esgblock dl dt,
main section.section--background .esg .row .esgblock dl dd {
  margin: 0;
  text-align: center;
}

main section.section--background .esg .row .esgblock dl dt {
  font-weight: 400;
  padding-right: var(--spacing-40);
  position: relative;
}

main section.section--background .esg .row .esgblock dl dt button {
  appearance: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3.75C7.44365 3.75 3.75 7.44365 3.75 12C3.75 16.5563 7.44365 20.25 12 20.25C16.5563 20.25 20.25 16.5563 20.25 12C20.25 7.44365 16.5563 3.75 12 3.75ZM2.25 12C2.25 6.61522 6.61522 2.25 12 2.25C17.3848 2.25 21.75 6.61522 21.75 12C21.75 17.3848 17.3848 21.75 12 21.75C6.61522 21.75 2.25 17.3848 2.25 12Z' fill='%23002D36'/%3E%3Cpath d='M13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7C12.5523 7 13 7.44772 13 8Z' fill='%23002D36'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 10.25C12.4142 10.25 12.75 10.5858 12.75 11V16C12.75 16.4142 12.4142 16.75 12 16.75C11.5858 16.75 11.25 16.4142 11.25 16V11C11.25 10.5858 11.5858 10.25 12 10.25Z' fill='%23002D36'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1.5rem;
  border: 0 none;
  border-radius: 50%;
  box-shadow: none;
  height: 2.75rem;
  padding: 0;
  position: absolute;
  right: -.75rem;
  top: -.5625rem;
  width: 2.75rem;
}

main section.section--background .esg .row .esgblock dl dd {
  color: var(--colors-body-primary);  
  font-size: var(--heading-5, 1.125rem);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 105%;
  margin-top: var(--spacing-15);
}

main section.section--background .esg .row .esgblock dl dd::after {
  color: var(--colors-body-secondary);  
  font-size: var(--body-medium, 1rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 140%;
}

main section.section--background .esg + .row .button-container {
  justify-content: center;
}

main section.section--background .esg .row .esgblock dl dd.esgblock__score,
main section.section--background .esg .row .esgblock dl dt.esgblock__fund,
main section.section--background .esg .row .esgblock dl .esgblock__benchmark {
  display: none;
}

main section.section--background .esg .row .esgblock dl dd.esgblock__fund {
  flex: 1 0 auto;
}

main section.section--background .esg .row .esgblock dl dd.esgblock__fund::after {
  display: block;
}

main section.section--background .esg .row .esgblock img[src*=carbon] ~ dl dd.esgblock__fund::after {
  content: "ton";
}

main section.section--background .esg .row .esgblock img[src*=water] ~ dl dd.esgblock__fund::after {
  content: "liter (x1000)";
}

main section.section--background .esg .row .esgblock dl dt .esgblock__unit {
  display: none;
}

main section.section--background .esg + .row {
  align-items: center;
  justify-content: center;
  margin-top: var(--spacing-50);
}

#risicometer img {
  aspect-ratio: 1 / 1;
  display: block;
  height: auto;
  margin-inline: auto;
  max-width: 18.75rem;
  min-width: 12.5rem;
  width: 100%;
}

#banner-vbdo {
  background-color: var(--colors-neutral-100);
  padding: var(--spacing-50);
}

#banner-vbdo h2 {
  color: var(--colors-brand-tertiary-01-700);
  font-size: var(--heading-3, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 100%;
} 

#banner-vbdo h2 + p {
  margin-block: var(--spacing-50);
}

#banner-vbdo #logo-vbdo {
  margin-bottom: 0;
}

#banner-vbdo #logo-vbdo + p {
  margin-top: 0;
}



@media (min-width: 640px){
  main section.section--background .esg .row {
    grid-template-columns: repeat(3, 1fr); 
  }
}

@media (min-width: 1024px){
  main section.section--background .container > .row > .block {
    grid-column: 3 / span 8;
  }
  
  main section.section--background .esg .row .esgblock img {
    height: var(--spacing-130);
    width: var(--spacing-130);
  }
}

@media (min-width: 1280px){
  main section.section--background .container > .row > .block {
    grid-column: 4 / span 6;
  }
}



/* ------ without ESG ----- */

main section.section--background .container > .row > .bannerteaserblock {
  --colors-heading-primary: var(--colors-brand-tertiary-03-800);
  --colors-body-primary: var(--colors-brand-tertiary-03-800);
  --colors-body-secondary: var(--colors-brand-tertiary-03-500);
  --colors-link: var(--colors-body-cta-primary);
  --colors-link-hover: var(--colors-body-cta-brand);
  --colors-link-outline: var(--colors-neutral-800);
  --link-color: var(--colors-link);
  --link-color-hover: var(--colors-link);
  width: 100% !important;
}

main section.section--background .container > .row > .bannerteaserblock .box {
  all: unset;  
}

main section.section--background .container > .row > .bannerteaserblock .box-background {
  display: none;
}

main section.section--background .container > .row > .bannerteaserblock .box-content {
  padding: 0;
  width: 100%;
  max-width: unset;
}

main section.section--background .container > .row > .bannerteaserblock .box-content::before {
  content: none;
}

main section.section--background .container > .row > .bannerteaserblock .box .box-content p, 
main section.section--background .container > .row > .bannerteaserblock .box .box-content ul,
main section.section--background .container > .row > .bannerteaserblock .box .box-content ol, 
main section.section--background .container > .row > .bannerteaserblock .box .box-content dl {
  color: var(--colors-body-secondary);
}



/* ------ nested linklist ------ */

@media (min-width: 640px) {
  .linklist:is(details .linklist) {
    max-width: calc(100% - var(--grid-column-width) * 2 - var(--grid-column-gap) * 2); 
  }

  summary + .linklist:is(details .linklist) {
    padding-top: var(--spacing-70); 
  }
  
  .linklist:is(details .linklist):last-child {
    border-bottom: 0 none;
    padding-bottom: var(--spacing-70); 
  }
  
  .linklist:is(details .linklist) li {
    border-color: var(--colors-divider-secondary);
  }

  .linklist:is(details .linklist):last-child li:last-child {
    border-bottom: 1px solid var(--colors-divider-secondary);
  }
  
  .linklist:is(details .linklist) li a {
    font-weight: 400;
  }
}



/* ------ temporary #1642755 ------ */

hr, .divider {
  margin-block: calc(var(--divider-margin-block, var(--spacing-130)) - var(--divider-row-gap, 0rem));
}
