/* Klostergarten microsite variant.
   Loaded only when Branding -> Microsite design is set to "Klostergarten". */

.ill-variant-klostergarten {
  --ill-kloster-serif: "berthold-baskerville-pro", Baskerville, Georgia, serif;
  --ill-kloster-violet: #7a6972;
  --ill-kloster-panel: var(--Klostergarten-light, var(--ill-bg-light, #F7F5F4));
  --ill-kloster-paper: #f8f7f6;
  --ill-accent: var(--ill-kloster-violet);
  --ill-h1-font: var(--ill-kloster-serif);
  --ill-h1-color: var(--ill-kloster-violet);
  --ill-h1-weight: 400;
}

.ill-variant-klostergarten h1,
.ill-variant-klostergarten h2,
.ill-variant-klostergarten .ill-heading--h1,
.ill-variant-klostergarten .ill-heading--h2 {
  font-family: var(--ill-h1-font, var(--ill-kloster-serif));
  color: var(--ill-h1-color, var(--ill-kloster-violet));
}

.ill-variant-klostergarten h1,
.ill-variant-klostergarten h2,
.ill-variant-klostergarten h3,
.ill-variant-klostergarten h4,
.ill-variant-klostergarten h5,
.ill-variant-klostergarten h6,
.ill-variant-klostergarten .ill-heading--h1,
.ill-variant-klostergarten .ill-heading--h2 {
  hyphens: auto;
}

.ill-variant-klostergarten .ill-title-block--split .ill-title-block__split {
  grid-template-columns: minmax(44rem, 52%) minmax(0, 48%);
  min-height: clamp(33rem, 48vw, 43rem);
  background: var(--ill-kloster-panel);
}

.ill-variant-klostergarten .ill-title-block--split .ill-title-block__text-pane {
  position: relative;
  background: transparent;
  justify-content: flex-start;
  min-width: 0;
  z-index: 1;
}

.ill-variant-klostergarten .ill-title-block--split .ill-title-block__text-inner {
  box-sizing: border-box;
  max-width: none;
  min-width: 0;
  padding-left: max(1.5rem, calc((100vw - 1320px) / 2));
  padding-right: clamp(5rem, 10vw, 15rem);
}

.ill-variant-klostergarten .ill-title-block--split .ill-title-block__media {
  min-height: inherit;
  width: calc(100% + clamp(6rem, 10vw, 14rem));
  margin-left: clamp(-14rem, -10vw, -6rem);
  background: var(--ill-kloster-panel);
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
}

.ill-variant-klostergarten .ill-title-block--split .ill-title-block__img {
  object-position: center center;
}

.ill-variant-klostergarten .ill-title-block--split h1,
.ill-variant-klostergarten .ill-title-block--split h2 {
  margin-bottom: clamp(2.25rem, 4vw, 4.25rem);
  color: var(--ill-h1-color, var(--ill-kloster-violet));
  font-family: var(--ill-h1-font, var(--ill-kloster-serif));
  font-size: clamp(3.25rem, 4.45vw, 4rem);
  font-weight: var(--ill-h1-weight, 400);
  line-height: .92;
  letter-spacing: 0;
  hyphens: auto;
  max-width: min(100%, 38rem);
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
}

.ill-variant-klostergarten .ill-title-block--split p {
  color: var(--ill-kloster-violet);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.34;
}

.ill-variant-klostergarten .ill-title-block--split .lead,
.ill-variant-klostergarten .ill-title-block--split strong,
.ill-variant-klostergarten .ill-title-block--split b {
  font-weight: 700;
}

.ill-variant-klostergarten .areoi-element:has(> .areoi-background) {
  color: #fff;
}

.ill-variant-klostergarten .areoi-element:has(> .areoi-background) :where(h1, h2, h3, h4, h5, h6, p, li, a, span, strong, em) {
  color: #fff !important;
  opacity: 1;
}

.ill-variant-klostergarten .ill-hero__band,
.ill-variant-klostergarten .ill-hero-tone--light .ill-hero__band {
  position: relative;
  overflow: hidden;
  background: var(--ill-kloster-paper);
  color: var(--ill-kloster-violet);
}

.ill-variant-klostergarten .ill-hero__band::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 54%;
  background: var(--ill-kloster-panel);
  clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%);
  z-index: 0;
}

.ill-variant-klostergarten .ill-hero__container {
  position: relative;
  z-index: 1;
}

.ill-variant-klostergarten .ill-hero__band-grid {
  align-items: end;
}

.ill-variant-klostergarten .ill-hero__band-left .ill-heading--h3 {
  display: none;
}

.ill-variant-klostergarten .ill-hero__band-left .ill-heading--h1 {
  margin: 0;
  color: var(--ill-h1-color, var(--ill-kloster-violet));
  font-family: var(--ill-h1-font, var(--ill-kloster-serif));
  font-size: clamp(3rem, 4.45vw, 4rem);
  font-weight: var(--ill-h1-weight, 400);
  line-height: .92;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ill-variant-klostergarten .ill-hero__band-right {
  color: var(--ill-kloster-violet);
}

.ill-variant-klostergarten .ill-hero__band-right p,
.ill-variant-klostergarten .ill-hero-tone--light .ill-hero__band-right p {
  color: var(--ill-kloster-violet);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.34;
}

.ill-variant-klostergarten .ill-hero__band-right p:first-child {
  font-weight: 700;
}

.ill-variant-klostergarten .ill-hero__cta {
  margin-top: 1.3rem;
  background: var(--ill-accent, var(--ill-kloster-violet));
  color: #fff !important;
  padding: .65rem 1.2rem;
  font-weight: 700;
}

.ill-variant-klostergarten .ill-hero__cta:hover,
.ill-variant-klostergarten .ill-hero__cta:focus {
  color: #fff !important;
}

.ill-variant-klostergarten .ill-drawer {
  background: var(--ill-kloster-violet);
}

.ill-variant-klostergarten .ill-drawer,
.ill-variant-klostergarten .ill-drawer__intro,
.ill-variant-klostergarten .ill-drawer__contact-name,
.ill-variant-klostergarten .ill-drawer__contact-mail {
  color: #fff;
}

.ill-variant-klostergarten .ill-drawer__list a {
  color: var(--Klostergarten-beige, #E4DFDA) !important;
  transition: color .18s ease, opacity .18s ease;
}

.ill-variant-klostergarten .ill-drawer__list a:hover,
.ill-variant-klostergarten .ill-drawer__list a:focus {
  color: #fff !important;
  opacity: 1 !important;
}

.ill-variant-klostergarten .ill-drawer__download.btn,
.ill-variant-klostergarten .ill-drawer__download.btn.btn-primary {
  background: var(--ill-kloster-panel);
  border-color: var(--ill-kloster-panel);
  color: var(--ill-kloster-violet) !important;
  font-family: 'HelveticaNeueStd-Cn', Arial, sans-serif;
  font-weight: 700;
}

.ill-variant-klostergarten .ill-drawer__download.btn:hover,
.ill-variant-klostergarten .ill-drawer__download.btn:focus {
  background: #fff;
  border-color: #fff;
  color: var(--ill-kloster-violet) !important;
  filter: none;
  opacity: 1 !important;
}

.ill-variant-klostergarten .ill-drawer__contacts-title {
  color: #fff;
  font-family: var(--ill-kloster-serif);
  font-weight: 400;
}

.ill-variant-klostergarten .ill-drawer__contact-name {
  font-family: 'HelveticaNeueStd-Cn', Arial, sans-serif;
  font-weight: 700;
}

.ill-variant-klostergarten .ill-drawer__contact-mail {
  font-family: 'HelveticaNeueStd-Cn', Arial, sans-serif;
  font-weight: 400;
}

.ill-variant-klostergarten .ill-footer {
  --ill-footer-bg: var(--ill-footer-bg-override, var(--ill-kloster-violet));
  --ill-footer-text: #fff;
  --ill-footer-link: #fff;
  background: var(--ill-footer-bg);
  color: #fff;
}

.ill-variant-klostergarten .ill-footer__inner.py-5 {
  padding-top: clamp(4rem, 6vw, 5.75rem) !important;
  padding-bottom: clamp(4rem, 6vw, 5.75rem) !important;
}

.ill-variant-klostergarten .ill-footer__inner > .container > .row {
  grid-template-columns: minmax(15rem, .95fr) minmax(18rem, .9fr) minmax(18rem, .9fr);
  column-gap: clamp(4rem, 8vw, 8.75rem);
  align-items: start;
}

.ill-variant-klostergarten .ill-footer,
.ill-variant-klostergarten .ill-footer p,
.ill-variant-klostergarten .ill-footer strong,
.ill-variant-klostergarten .ill-footer b,
.ill-variant-klostergarten .ill-footer a {
  color: #fff;
}

.ill-variant-klostergarten .ill-footer a {
  text-decoration-color: rgba(255, 255, 255, .72);
}

.ill-variant-klostergarten .ill-footer__inner > .container > .row > :first-child .widget_media_image img {
  width: 192px !important;
  max-width: min(12rem, 100%);
  opacity: .72;
}

.ill-variant-klostergarten .ill-footer__inner > .container > .row > :first-child .widget_text {
  margin-top: clamp(1.75rem, 2.6vw, 2.75rem);
}

.ill-variant-klostergarten .ill-footer__inner > .container > .row > :first-child .widget_text p,
.ill-variant-klostergarten .ill-footer__inner > .container > .row > :nth-child(2) .widget_text p,
.ill-variant-klostergarten .ill-footer__inner > .container > .row > :nth-child(3) .widget_text p {
  font-size: clamp(1rem, .98vw, 1.125rem) !important;
  font-weight: 400 !important;
  line-height: 1.34 !important;
}

.ill-variant-klostergarten .ill-footer__inner > .container > .row > :nth-child(2) .widget_text strong,
.ill-variant-klostergarten .ill-footer__inner > .container > .row > :nth-child(2) .widget_text b,
.ill-variant-klostergarten .ill-footer__inner > .container > .row > :nth-child(3) .widget_text strong,
.ill-variant-klostergarten .ill-footer__inner > .container > .row > :nth-child(3) .widget_text b {
  display: inline;
  font-weight: 700 !important;
}

.ill-variant-klostergarten .ill-footer__inner > .container > .row > :first-child .ill-footer-widget:last-child {
  margin-top: clamp(3rem, 5vw, 4.6rem);
}

.ill-variant-klostergarten .ill-footer__inner > .container > .row > :first-child .ill-footer-widget:last-child .row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  margin: 0 !important;
}

.ill-variant-klostergarten .ill-footer__inner > .container > .row > :first-child .ill-footer-widget:last-child .col {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: max-content !important;
  padding: 0 !important;
}

.ill-variant-klostergarten .ill-footer__inner > .container > .row > :first-child .ill-footer-widget:last-child p {
  margin: 0;
}

.ill-variant-klostergarten .ill-footer__inner > .container > .row > :first-child .ill-footer-widget:last-child a {
  font-size: clamp(1rem, .98vw, 1.125rem);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: .07em;
  text-underline-offset: .16em;
}

.ill-variant-klostergarten .ill-footer__inner > .container > .row > :nth-child(2) .wp-block-heading,
.ill-variant-klostergarten .ill-footer__inner > .container > .row > :nth-child(3) .wp-block-heading {
  margin: 0 0 clamp(1.25rem, 1.6vw, 1.8rem);
  color: rgba(255, 255, 255, .72);
  font-family: var(--ill-kloster-serif);
  font-size: clamp(1.85rem, 2vw, 2.35rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ill-variant-klostergarten .ill-footer__inner > .container > .row > :nth-child(2) .widget_text,
.ill-variant-klostergarten .ill-footer__inner > .container > .row > :nth-child(3) .widget_text {
  margin-top: 0;
  max-width: 23rem;
}

@media (max-width: 991.98px) {
  .ill-variant-klostergarten .ill-title-block--split .ill-title-block__split {
    grid-template-columns: 1fr;
    min-height: 0;
    background: var(--ill-kloster-paper);
  }

  .ill-variant-klostergarten .ill-title-block--split .ill-title-block__media {
    width: 100%;
    margin-left: 0;
    clip-path: none;
  }

  .ill-variant-klostergarten .ill-title-block--split .ill-title-block__text-inner {
    min-width: 0;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .ill-variant-klostergarten .ill-title-block--split h1,
  .ill-variant-klostergarten .ill-title-block--split h2 {
    font-size: clamp(1.8rem, 8vw, 2.25rem);
    min-width: 0;
  }

  .ill-variant-klostergarten .ill-hero__band::before {
    width: 100%;
    clip-path: none;
  }

  .ill-variant-klostergarten .ill-hero__band-grid {
    grid-template-columns: 1fr;
  }

  .ill-variant-klostergarten .ill-hero__band-left .ill-heading--h1 {
    font-size: clamp(2.75rem, 15vw, 4.5rem);
  }

  .ill-variant-klostergarten .ill-footer__inner > .container > .row {
    grid-template-columns: 1fr;
    row-gap: 3rem;
  }

  .ill-variant-klostergarten .ill-footer__inner > .container > .row > :first-child .ill-footer-widget:last-child {
    margin-top: 2.5rem;
  }

}