@layer components {
/* stylelint-disable length-zero-no-unit, unit-disallowed-list, scss/no-global-function-names */
/* stylelint-disable scss/no-global-function-names, function-no-unknown, unit-disallowed-list */
/* stylelint-disable no-invalid-position-at-import-rule */
#header {
  --color-primary: var(--color-blue);
  --link-text-color: var(--color-primary);
  --header-background-color: var(--color-white);
  position: fixed;
  z-index: 5;
  inset-block-start: 0;
  background-color: var(--header-background-color);
  inline-size: 100%;
  font-size: var(--font-size-md);
  color: var(--color-primary);
  box-shadow: 0 0 1.2rem 0 rgba(0, 0, 0, 0.1);
}
#header :any-link {
  transition: color var(--transition);
  text-decoration: none;
}
#header :any-link:where(:focus-visible, :hover) {
  color: var(--color-accent);
}

.header-holder {
  display: grid;
  grid-template-rows: 1fr auto auto;
  grid-template-columns: 1fr auto;
  grid-template-areas: "logo toggle" "address address" "nav nav";
  column-gap: calc(var(--gutter-fluid) / 2);
  justify-content: space-between;
  align-items: center;
  inline-size: 100%;
  max-block-size: var(--viewport-height);
  margin-inline: auto;
  padding-block-start: var(--header-block-padding);
  padding-inline: calc(var(--container-inline-padding) * 2);
  will-change: grid-template-rows, row-gap;
  transition: padding var(--transition);
}
@media (min-width: 992px) {
  .header-holder {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 4fr;
    grid-template-areas: "logo address" "logo nav";
    align-items: center;
    gap: calc(var(--gutter-var) / 2) var(--gutter);
    padding-inline: var(--container-inline-padding);
    padding-block: var(--header-block-padding);
    transition: grid-template-rows var(--transition), row-gap var(--transition);
  }
  [data-user-scroll=true] .header-holder {
    row-gap: calc(var(--gutter-var) * 0.4);
  }
}
[data-user-scroll=true] .header-holder {
  --header-block-padding: 0.5rem;
}
@media (min-width: 1200px) {
  .header-holder {
    row-gap: var(--gutter-var);
    max-inline-size: calc(var(--container-width));
  }
}

.logo-wrap {
  display: flex;
  grid-area: logo;
  position: relative;
}
@media (min-width: 768px) {
  .logo-wrap {
    min-inline-size: calc(var(--gutter-var) * 10);
    padding-inline-end: var(--gutter-var);
  }
}
@media (min-width: 992px) {
  .logo-wrap {
    align-self: center;
    min-inline-size: calc(var(--gutter-var) * 7);
  }
  .logo-wrap::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 0;
    inline-size: 0.1rem;
    block-size: calc(100% + 2rem);
    background-color: var(--color-border);
    transform: translateY(-50%);
    max-block-size: var(--header-height);
  }
}
@media (min-width: 1400px) {
  .logo-wrap {
    min-inline-size: 30rem;
  }
}
.logo-wrap img {
  inline-size: fit-content;
  block-size: var(--logo-size);
  object-fit: contain;
  transition: block-size var(--transition);
}
@media (orientation: landscape) {
  .logo-wrap img {
    block-size: calc(var(--logo-size) * 0.8);
  }
}
@media (min-width: 992px) and (orientation: landscape) {
  .logo-wrap img {
    block-size: var(--logo-size);
  }
}
[data-user-scroll=true] .logo-wrap img {
  block-size: calc(var(--logo-size) * 0.8);
}
#header button {
  grid-area: toggle;
  line-height: 0.6;
}

#header-nav {
  --color-canvas-text: var(--color-primary);
  display: grid;
  grid-template-rows: 1fr;
  grid-area: nav;
  justify-self: center;
  font-weight: 600;
  transition: grid-template-rows var(--transition);
  contain: content;
  inline-size: 100%;
  max-inline-size: calc(var(--content-width-condensed) - var(--gutter-var) * 2);
}
@media (orientation: landscape) {
  #header-nav {
    max-block-size: calc(100vh - var(--header-height));
    overflow: auto;
  }
}
@media (min-width: 992px) and (orientation: landscape) {
  #header-nav {
    max-block-size: unset;
    overflow: initial;
  }
}
@media (min-width: 768px) {
  #header-nav {
    font-size: var(--font-size-sm);
  }
}
@media (min-width: 992px) {
  #header-nav {
    justify-self: stretch;
    inline-size: auto;
    max-inline-size: 100%;
    margin-block-end: calc(var(--header-block-padding) * -1);
  }
}
@media (min-width: 1200px) {
  #header-nav {
    font-size: var(--font-size-md);
    justify-self: end;
  }
}
#header-nav nav {
  grid-row: 1/span 2;
}
#header-nav ul {
  display: flex;
  flex-flow: column nowrap;
  max-inline-size: 25rem;
  margin-inline: auto;
  text-align: center;
  gap: var(--gutter-var);
  margin-block-start: var(--gutter-fluid);
  padding: 0.25rem;
  max-block-size: calc(var(--content-height) - var(--gutter-fluid));
  overflow-clip-margin: 0.3rem;
  overflow-x: clip;
}
@media (min-width: 992px) {
  #header-nav ul {
    max-inline-size: none;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    margin-block-start: 0;
  }
}
@media (min-width: 1200px) {
  #header-nav ul {
    gap: calc((var(--gutter) + var(--gutter-var) * 2) / 4);
  }
}
#header-nav ul ul {
  padding-inline-start: calc(var(--gutter-fluid) * 1.25);
}
#header-nav li {
  position: relative;
  line-height: 1.425;
  margin: 0;
  padding-block-end: calc(var(--gutter) / 2);
  margin-block-end: calc(var(--gutter) / 2);
  border-bottom: var(--border-line) var(--color-border);
  transition: padding var(--transition), margin-block-end var(--transition);
}
@media (min-width: 992px) {
  #header-nav li {
    padding-block-end: calc(var(--header-block-padding) * 2);
    margin-block-end: 0;
    border-bottom: none;
  }
}
#header-nav li:last-child {
  border-bottom: none;
}
#header-nav .nav-link {
  --border-height: 0.4rem;
  position: static;
}
#header-nav .nav-link:after {
  content: "+";
}
@media (min-width: 992px) {
  #header-nav .nav-link:after {
    content: "";
    position: absolute;
    inset-block-end: calc(var(--border-height) * -1 + 0.1rem);
    inset-inline: 0;
    block-size: 0;
    inline-size: 100%;
    background-color: var(--color-accent);
    transition: block-size var(--transition);
  }
}
#header-nav .nav-link:where(:focus-visible, :hover, [aria-current=page]) {
  color: var(--color-accent);
}
#header-nav .nav-link:where(:focus-visible, :hover, [aria-current=page]):after {
  block-size: var(--border-height);
}
#header-nav li[aria-hidden=true]:first-child,
#header-nav li[aria-hidden=true]:last-child {
  display: none;
}
#header-nav [data-current-ancestor=true] {
  color: var(--color-accent);
}

#header-nav[inert] {
  grid-template-rows: 0fr;
}
@media (min-width: 992px) {
  #header-nav[inert] {
    grid-template-rows: 1fr;
  }
}

.header-address {
  display: flex;
  grid-area: address;
  flex-flow: row nowrap;
  gap: calc((var(--gutter) + var(--gutter-var) * 3) / 12);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--color-secondary);
  font-style: normal;
  margin-block-start: calc(var(--header-block-padding));
  margin-inline: calc(var(--container-inline-padding) * 2 * -1);
}
@media (min-width: 992px) {
  .header-address {
    justify-content: flex-end;
    align-self: center;
    font-size: 1.575rem;
    margin-block: calc(var(--header-block-padding) * -1) 0;
    margin-inline: 0;
  }
}
.header-address [class^=fa-] {
  line-height: 0.7;
}
.header-address :any-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-end: 0;
  padding: calc(var(--gutter-fluid) / 8);
  color: var(--color-secondary);
}
@media (min-width: 992px) {
  .header-address :any-link {
    position: relative;
  }
  .header-address :any-link:not(:first-child)::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: calc(100% + var(--gutter-var) * 3 / 12 / 2);
    inline-size: 0.2rem;
    block-size: 100%;
    background-color: var(--color-primary);
  }
}
.header-address :any-link:where(:focus-visible, :hover) {
  color: var(--color-accent);
}

.contact-list {
  display: flex;
  justify-content: flex-end;
  list-style: none;
  padding-block: 1rem;
  padding-inline: 0;
  margin: 0;
  background-color: var(--color-light-gray);
  flex-basis: 100%;
}
@media (min-width: 992px) {
  .contact-list {
    flex-basis: auto;
  }
}
.contact-list li {
  padding-inline: 1rem;
  margin: 0;
  transition: padding var(--transition);
}
@media (min-width: 992px) {
  .contact-list li {
    padding-inline: 2rem;
  }
  [data-user-scroll=true] .contact-list li {
    padding-inline: 1rem;
  }
}
.contact-list li > :not(.contact-link) {
  display: none;
}
.contact-list li:not(:last-child) {
  border-right: var(--border-line) var(--color-border);
}
.contact-list .contact-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: padding var(--transition);
}
@media (min-width: 992px) {
  [data-user-scroll=true] .contact-list .contact-link {
    padding: 0;
  }
  .contact-list .contact-link:where(:focus-visible, :hover) .description,
  .contact-list .contact-link:where(:focus-visible, :hover) .icon-fa {
    transform: scale(1);
  }
}
.contact-list .description {
  font-size: 1rem;
  transition: transform var(--transition);
  overflow: hidden;
}
@media (min-width: 992px) {
  .contact-list .description {
    font-size: 1.2rem;
    transform: scale(0.9);
  }
}
.contact-list .icon-fa {
  font-size: 1em;
  transition: transform var(--transition);
}
@media (min-width: 992px) {
  .contact-list .icon-fa {
    font-size: 2em;
    transform: scale(0.9);
  }
}

#header-nav-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color var(--transition), color var(--transition);
  cursor: pointer;
  background: none;
  aspect-ratio: 1/1;
  inline-size: auto;
  font-size: var(--font-size-md);
  padding: 0;
}
@media (min-width: 992px) {
  #header-nav-toggle {
    display: none;
  }
}

:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
}

[id=hero] {
  --padding-block: calc(var(--gutter) / 2);
  --padding-inline: calc(var(--gutter) / 2);
  --padding-content: calc(var(--content-height) * 0.4 / 3);
  --link-color: var(--color-primary);
  contain: content;
  color: var(--color-secondary);
  display: flex;
  flex-direction: column-reverse;
  position: relative;
  justify-content: end;
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
}
@media (min-width: 576px) {
  [id=hero] {
    font-size: var(--font-size-md);
  }
}
@media (min-width: 992px) {
  [id=hero] {
    min-block-size: var(--content-height);
  }
}
[id=hero]:has(video) {
  min-block-size: var(--content-height);
}
[data-pid="1"] [id=hero] {
  min-block-size: var(--content-height);
}
@media (min-width: 576px) {
  [data-pid="1"] [id=hero] {
    min-block-size: calc(var(--content-height) * 0.7);
  }
}
@media (min-width: 992px) {
  [data-pid="1"] [id=hero] {
    min-block-size: var(--content-height);
  }
}
@media (max-width: 991px) and (orientation: landscape) {
  [data-pid="1"] [id=hero] {
    min-block-size: 40rem;
  }
}
[id=hero] .media,
[id=hero] .media * {
  inline-size: 100%;
}
[data-pid="1"] [id=hero] .media,
[data-pid="1"] [id=hero] .media * {
  position: absolute;
  inset: -0.1em 0 0 0;
  block-size: 100%;
}
@media (min-width: 992px) {
  [id=hero] .media,
  [id=hero] .media * {
    position: absolute;
    inset: -0.1em 0 0 0;
    block-size: 100%;
  }
}
[id=hero] .media {
  view-timeline: --view-timeline-hero-media vertical;
  view-timeline: --view-timeline-hero-media y;
  z-index: -1;
}
[id=hero] .media img {
  --object-position-y: 25%;
  will-change: transform;
}
[id=hero] .content {
  z-index: 1;
  position: absolute;
  padding-block-end: 0;
}
@media (min-width: 992px) {
  [id=hero] .content {
    position: relative;
    padding-block-start: var(--padding-content);
  }
}
@media (min-width: 1200px) {
  [id=hero] .content {
    padding-block-end: calc(var(--padding-content) / 2);
  }
}
[id=hero] :where(h1, h2) {
  font-family: var(--font-family-secondary);
  font-weight: 400;
  font-size: var(--font-size-lg-alt);
}
@media (min-width: 400px) {
  [id=hero] :where(h1, h2) {
    font-size: var(--font-size-xl);
  }
}
@media (min-width: 1200px) {
  [id=hero] :where(h1, h2) {
    font-size: var(--font-size-xxl);
  }
}
[id=hero] :where(h1, h2):last-child {
  margin-block-end: 0;
}
[id=hero] .holder {
  inline-size: 100%;
  position: relative;
  padding-block: var(--padding-block);
  padding-inline-end: var(--padding-inline);
}
@media (min-width: 992px) {
  [id=hero] .holder {
    padding-block: var(--gutter);
  }
}
[id=hero] [data-content] {
  margin-block-end: calc(var(--gutter) / 2);
  position: relative;
  padding-block: calc(var(--gutter) / 2);
  padding-inline-end: calc(var(--gutter) / 2);
  max-inline-size: fit-content;
}
@media (min-width: 992px) {
  [id=hero] [data-content] {
    padding-block: var(--gutter);
    padding-inline-end: calc(var(--gutter) * 2);
    margin-block-end: var(--gutter);
    max-inline-size: fit-content;
  }
}
[id=hero] [data-content]:last-child {
  margin-block-end: 0;
}
[id=hero] [data-content]:before {
  content: "";
  position: absolute;
  inset: 0 0 0 -50vw;
  z-index: -1;
  background-color: var(--color-white);
  opacity: 0.9;
}
@media (min-width: 992px) {
  [id=hero] [data-content]:before {
    inset: 0 0 0 -50vw;
  }
}
[id=hero] .page {
  display: block;
  margin-block-end: calc(var(--gutter) / 4);
}
@media (min-width: 992px) {
  [id=hero] .page {
    display: inline-block;
    margin-block-end: 0;
  }
}
[id=hero] .page:last-child {
  margin-block-end: 0;
}
[id=hero] .page + .page {
  padding-block-start: calc(var(--gutter) / 4);
  border-block-start: var(--border-line) var(--color-border);
}
@media (min-width: 992px) {
  [id=hero] .page + .page {
    margin-inline-start: var(--gutter);
    border-inline-start: var(--border-line) var(--color-border);
    border-block-start: none;
    padding-block-start: 0;
    padding-inline-start: var(--gutter);
  }
}
[id=hero] .page:after {
  content: "+";
  font-family: var(--font-family-fontawesome);
  display: inline-block;
  vertical-align: middle;
  margin-inline-start: 0.3em;
  font-weight: 300;
  font-size: 1em;
  line-height: 1;
  transition: transform var(--transition);
}
@media (min-width: 992px) {
  [id=hero] .page:after {
    font-size: 1.2em;
  }
}
[id=hero] .page:where(:hover, :focus-visible):after {
  transform: rotate(45deg);
}
[id=hero].media-slider .content {
  padding-block-end: 0;
}
@media (min-width: 992px) {
  [id=hero].media-slider .content {
    padding-block-end: var(--padding-content);
  }
}
[id=hero].media-slider .holder {
  padding: 0;
}
[id=hero].media-slider .holder > [data-content] {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  padding-block: var(--padding-block) var(--gutter);
}
@media (min-width: 768px) {
  [id=hero].media-slider .holder > [data-content] {
    padding-inline-end: var(--padding-inline);
    padding-block: var(--gutter);
  }
}
[id=hero].media-slider .holder > [data-content].active {
  opacity: 1;
  visibility: visible;
  position: relative;
  transition: opacity 0.1s ease, visibility 0.1s ease;
}
[id=hero] header:last-child :where(h1, h2, h3, h4, h5, h6) {
  margin-block-end: 0;
}

#nohero-title h1 {
  margin-block-end: 0;
}

#hero .slick-dotted.slick-slider {
  margin-bottom: 0;
}

.sliderContainer {
  position: absolute;
  inline-size: 100%;
  block-size: 100%;
  inset: -0.1em 0 0;
  display: flex;
  flex-direction: column;
}
.sliderContainer .banner-slider {
  display: flex;
  flex-direction: column;
  max-block-size: 100%;
  flex-grow: 1;
  margin: 0;
}
.sliderContainer .slick-list {
  display: flex;
  flex-grow: 1;
}
.sliderContainer .slick-track {
  display: flex;
  flex-grow: 1;
}
.sliderContainer .slick-slide {
  height: initial;
}
.sliderContainer .slick-slide img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  object-fit: cover;
  object-position: center;
}
.sliderContainer .slider-dots {
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 10;
  position: absolute;
  inset-inline: 0;
  inline-size: 100%;
  display: flex;
  gap: 1rem;
  inset-block-end: 0.5rem;
  padding-inline: calc(var(--gutter) / 2);
}
@media (min-width: 992px) {
  .sliderContainer .slider-dots {
    inline-size: calc(var(--content-width) / 2);
    inset-block-end: calc(var(--content-height) * 0.4 / 3 - var(--gutter));
    inset-inline-start: calc((100vw - var(--content-width)) / 2);
    padding: 0;
  }
}
.sliderContainer .slider-dots li {
  flex-grow: 1;
}
.sliderContainer .slider-dots button {
  position: relative;
  width: 100%;
  height: 1rem;
  border: 0.1rem solid var(--color-white);
  background-color: var(--color-white);
  font-size: 0;
}
.sliderContainer .slider-dots button:after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 0%;
  height: 100%;
}
.sliderContainer .slider-dots .slick-active button:after {
  background-color: var(--color-primary);
  animation: progress 5s linear forwards;
}

@keyframes progress {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}
@supports (view-timeline: none) {
  @media (min-width: 992px) {
    #hero:not(.alt-layout) .media img {
      animation-name: parallax;
      animation-timeline: --view-timeline-hero-media;
      animation-duration: 1ms;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-range-start: exit-crossing 4rem;
      animation-range-end: exit-crossing calc(100% + 1.6rem);
    }
  }
}
@keyframes parallax {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(62.5%);
  }
}
@keyframes scale {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
@keyframes in-left {
  0%, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
    transform: translate3d(-3000px, 0, 0) scaleX(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
    transform: translate3d(25px, 0, 0) scaleX(1);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
    transform: translate3d(-10px, 0, 0) scaleX(0.98);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
    transform: translate3d(5px, 0, 0) scaleX(0.995);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
/* headlines */
:where(h1, .h1, h2, .h2, h3, .h3, h4, .h4) {
  display: block;
  margin-block-start: 0;
  margin-block-end: 0.7em;
  inline-size: fit-content;
  /*max-inline-size: 64ch;*/
  color: var(--header-color, inherit);
  line-height: 1.25;
  -webkit-hyphens: auto;
  hyphens: auto;
  letter-spacing: -0.01875em;
}
:where(h1, .h1, h2, .h2, h3, .h3, h4, .h4):is(.underline) {
  padding-block-end: var(--gutter);
  margin-block-end: var(--gutter);
}
:where(h1, .h1, h2, .h2, h3, .h3, h4, .h4):is(.underline)::after {
  content: "";
  height: 0.3rem;
  background: var(--color-accent);
  display: block;
  position: absolute;
  bottom: 0;
  inset-inline: 0;
}
:where(h1, .h1, h2, .h2, h3, .h3, h4, .h4) .icon-fa {
  font-size: 1.25em;
}

:where(h1, .h1, h2, .h2, h3, .h3, h4, .h4):not(header :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4)):not(:first-child):not(:where(h1, .h1, h2, .h2, h3, .h3, h4, .h4) + :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4)) {
  margin-block-start: 1.25em;
}

:where(h1, .h1) + :where(h2, .h2) {
  color: var(--color-secondary);
  font-family: var(--font-family-primary);
}

:where(h3, .h3, h4, .h4) {
  --header-color: var(--color-secondary);
}

:where(h4, .h4) {
  font-size: var(--font-size-md);
}

:where(h2),
:is(.h2) {
  font-size: var(--font-size-xl);
  max-inline-size: 40ch;
  font-weight: 400;
}

:where(h3),
:is(.h3) {
  font-size: var(--font-size-lg);
  font-family: var(--font-family-primary);
  font-weight: 400;
}

:where(h1),
:is(.h1) {
  font-size: var(--font-size-xxl);
  margin-bottom: 0.3em;
  max-inline-size: 30ch;
}

:any-link {
  transition: color var(--transition);
  color: var(--link-color, inherit);
  text-decoration: none;
}
:any-link [class*=fa-] {
  transition: transform var(--transition);
}

.previous-link:any-link:where(:hover, :focus-visible) [class*=fa-] {
  transform: translateX(-0.25em);
}

[role=link][aria-current=page] {
  opacity: calc(100% - var(--bg-transparency));
  color: var(--color-accent);
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.125em;
}

#content :any-link {
  text-decoration: var(--link-decoration);
}

:any-link:where(:hover, :focus-visible) {
  color: var(--color-accent);
}

:any-link,
button,
details,
summary,
input,
select,
textarea,
label {
  cursor: pointer;
}

button,
input:where([type=checkbox], [type=radio], [type=submit], [type=button], [type=reset]) {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

button,
input:where([type=submit], [type=button], [type=reset]) {
  appearance: none;
  margin: 0;
  border: transparent;
  background-color: transparent;
  padding: 0;
  color: inherit;
  font: inherit;
}

textarea {
  min-block-size: calc(4.5em + (0.5em + 0.1rem) * 2);
  min-block-size: calc(3lh + (0.5em + 0.1rem) * 2);
  resize: vertical;
  line-height: 1.5;
}

.frame-buttons-menu ul > li > :any-link,
.btn {
  --item-inline-padding: 5rem;
  --link-decoration: none;
  display: inline-block;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
  background-color: var(--button-bg-color, var(--color-accent));
  border: var(--border-line) var(--button-border-color, var(--color-accent));
  padding: 1em 1em;
  color: var(--button-link-color, var(--link-color));
  -webkit-user-select: none;
  user-select: none;
  font-weight: 600;
  position: relative;
  padding-inline: var(--item-inline-padding) calc(var(--item-inline-padding) * 2);
}
.frame-buttons-menu ul > li > :any-link::before,
.btn::before {
  content: "";
  position: absolute;
  block-size: calc(100% - 2rem);
  inline-size: 0.1rem;
  background-color: var(--button-link-color, var(--link-color));
  inset-block-start: 50%;
  inset-inline-end: calc(var(--item-inline-padding) * 1.25);
  transform: translateY(-50%);
}
.frame-buttons-menu ul > li > :any-link:after,
.btn:after {
  content: "+";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: calc(var(--item-inline-padding) * 0.5);
  transform: translateY(-50%);
  font-family: var(--font-family-fontawesome);
  font-weight: 400;
  line-height: 1;
  transition: transform var(--transition);
  font-size: 1.2em;
  transform-origin: center;
}
.frame-buttons-menu ul > li > :any-link [class*=fa-],
.btn [class*=fa-] {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: calc(var(--item-inline-padding) * 0.5);
  transform: translateY(-50%);
  transition: transform var(--transition);
}
.frame-buttons-menu ul > li > :any-link:has([class*=fa-]):after,
.btn:has([class*=fa-]):after {
  display: none;
}
.frame-buttons-menu ul > li > :any-link.back,
.btn.back {
  padding-inline: calc(var(--item-inline-padding) * 2) var(--item-inline-padding);
}
.frame-buttons-menu ul > li > :any-link.back:before,
.btn.back:before {
  inset-inline-start: calc(var(--item-inline-padding) * 1.25);
  inset-inline-end: auto;
}
.frame-buttons-menu ul > li > :any-link.back [class*=fa-],
.btn.back [class*=fa-] {
  inset-inline-start: calc(var(--item-inline-padding) * 0.5);
}

.btn:where(:hover, :focus-visible) {
  background-color: var(--button-bg-color-hover, var(--color-primary));
  color: var(--button-link-color-hover, var(--color-white));
  border-color: var(--button-border-color-hover, var(--color-primary));
}
.btn:where(:hover, :focus-visible):after {
  transform: translateY(-50%) rotate(45deg);
}
.btn:where(:hover, :focus-visible) [class*=fa-] {
  transform: translateY(-50%) translateX(1rem);
}
.btn:where(:hover, :focus-visible).back [class*=fa-] {
  transform: translateY(-50%) translateX(-1rem);
}

.button-secondary,
:any-link.internal-link {
  color: var(--color-accent);
}
.form-group .button-secondary,
.form-group :any-link.internal-link {
  font-size: inherit;
}
.button-secondary:hover:after, .button-secondary:focus-visible:after,
:any-link.internal-link:hover:after,
:any-link.internal-link:focus-visible:after {
  transform: translateX(0.25em);
}

.ce-uploads > li {
  margin: 0 !important;
  border-block-start: var(--border-line) rgb(var(--text-color)/var(--bg-alpha));
  padding: calc(var(--gutter) / 2);
}
.ce-uploads > li:last-child {
  border-block-end: var(--border-line) rgb(var(--text-color)/var(--bg-alpha));
}
.ce-uploads > li .download {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: calc(var(--gutter) / 2);
}
.ce-uploads > li .download > .file-icon {
  font-size: 1.5em;
}
.ce-uploads > li .download > .file-name {
  hyphens: auto;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

[data-content=gridgallery_gallery] + [data-content=gridgallery_gallery] {
  margin-block-start: calc(var(--gutter) * -1.5 - 2px);
}

.container-fluid {
  contain: paint;
  padding-inline: 0;
}

.frame-two-cols {
  column-gap: var(--gutter);
  columns: 2;
  column-width: 40ch;
}
.frame-two-cols:has(> .container) {
  columns: 1;
}
.frame-two-cols:has(> .container) > .container {
  column-gap: var(--gutter);
  columns: 2;
  column-width: 40ch;
}

.frame-backgroundbox {
  --bg-color: var(--color-secondary);
  --text-color: var(--color-white);
  --selection-color: var(--color-white);
  border-radius: 2rem;
  background-color: rgb(var(--bg-color));
  padding: calc(var(--gutter) * 0.5) calc(var(--gutter) * 0.5);
  inline-size: fit-content;
  max-inline-size: 64ch;
  color: rgb(var(--text-color));
  font-size: var(--font-size-lg);
}
@media (min-width: 768px) {
  .frame-backgroundbox {
    padding: calc(var(--gutter) * 1.25) var(--gutter);
  }
}
.frame-backgroundbox * {
  --link-text-color: var(--color-white) !important;
  --link-text-hover-color: var(--color-white) !important;
  --link-bg-color: var(--color-secondary);
  --link-bg-hover-color: var(--color-secondary-contrast);
}
.frame-backgroundbox:not(:first-child) {
  margin-block-start: var(--gutter);
}
.frame-backgroundbox > :first-child {
  margin-block-start: 0;
}

@supports (mask-composite: exclude) {
  .frame-image-mask {
    border-radius: 100vmax;
  }
  .frame-image-mask img {
    mask: var(--image-mask);
    aspect-ratio: 1/1;
  }
}

.frame-banner-image {
  block-size: calc(var(--content-height) / 3);
  min-block-size: 24rem;
  padding-block: 0;
}
@media (min-width: 768px) {
  .frame-banner-image {
    min-block-size: 35rem;
    block-size: calc(var(--content-height) / 2);
  }
}
.frame-banner-image * {
  block-size: 100%;
}
.frame-banner-image img {
  border-radius: 0;
  object-fit: cover;
  inline-size: 100%;
}

.frame-banner-dynamic-image {
  padding-block: 0;
}
.frame-banner-dynamic-image img {
  border-radius: 0;
  object-fit: cover;
  inline-size: 100%;
}

.frame-menu-cards ul {
  padding: 0;
  list-style: none;
}
.frame-menu-cards li {
  margin: 0;
}
.frame-menu-cards .card {
  display: grid;
  position: relative;
  grid-template-rows: 1fr auto;
  grid-template-areas: "title" "image";
  contain: paint;
  border-radius: 2rem;
  block-size: 100%;
}
.frame-menu-cards .card:is(:hover, :focus-visible):not([aria-disabled=true]:not([tabindex]:not([tabindex=""]))) .card-title {
  background-color: rgb(var(--color-secondary-contrast));
}
.frame-menu-cards .card:is(:hover, :focus-visible):not([aria-disabled=true]:not([tabindex]:not([tabindex=""]))) .card-image {
  transform: scale(1.125);
}
.frame-menu-cards .card:is(:hover, :focus-visible):not([aria-disabled=true]:not([tabindex]:not([tabindex=""]))) .card-icon {
  background-color: rgb(var(--color-primary-contrast));
}
.frame-menu-cards .card:not(:has(.card-image)) .card-title {
  padding-block-end: 3em;
}
.frame-menu-cards .card-title {
  grid-area: title;
  transition: background-color var(--transition);
  background-color: rgb(var(--color-secondary));
  padding: 0.8em 1.15em;
  color: rgb(var(--color-white));
  font-style: italic;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-sm);
  text-transform: none;
}
.frame-menu-cards .card-image {
  grid-area: image;
  z-index: -1;
  transition: transform var(--transition);
  block-size: calc(var(--content-height) / 3);
  min-block-size: 24rem;
  object-fit: cover;
  object-position: center;
}
.frame-menu-cards .card-icon {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  z-index: 1;
  transition: background-color var(--transition);
  inset: auto 0 0 auto;
  border-top-left-radius: 2rem;
  background-color: rgb(var(--color-primary));
  inline-size: 4.75ch;
  block-size: 4ch;
  color: rgb(var(--color-white));
  font-size: calc(var(--font-size-md) * 1.1);
}

#content .breadcrumbs {
  --block-margin: var(--block-padding);
  padding-block-end: 0;
}

.breadcrumbs {
  --link-decoration: none;
}
.breadcrumbs + [data-content] {
  padding-block-start: 0;
}
.breadcrumbs ol {
  display: flex;
  gap: 0.5em;
  padding-block: 0;
  padding-inline: 0;
  border-block-end: var(--border-line) var(--color-border);
  padding-block-end: calc(var(--gutter) / 2);
  margin-block-end: calc(var(--gutter) / 2);
}
@media (min-width: 992px) {
  .breadcrumbs ol {
    padding-block-end: var(--gutter);
    margin-block-end: var(--gutter);
  }
}
.breadcrumbs ol li {
  list-style: none;
  margin: 0;
  white-space: nowrap;
}
.breadcrumbs ol li:not(:first-child) {
  overflow: hidden;
  text-overflow: ellipsis;
}
.breadcrumbs ol li:not(:last-child) > *::after {
  content: "|";
  margin-inline-start: 0.5em;
  display: inline-block;
  transition: transform var(--transition);
}
form {
  --color-placeholder: var(--color-primary);
  display: flex;
  flex-flow: column nowrap;
  gap: 1.25em;
  max-inline-size: 72rem;
  margin-inline: auto;
}

form > div:first-child:not([class]) {
  position: absolute;
  visibility: hidden;
}

form > * {
  margin-block-end: 0;
}

form [role=toolbar] {
  padding-block-start: calc(var(--gutter) / 2);
}

form [role=toolbar] > * {
  display: flex;
  gap: 1em;
}

form table {
  text-align: left;
}

form table td,
form table th {
  padding: 0.5em 1em;
}

fieldset {
  margin: 0;
  border: none;
  padding: 0;
}

label > span:first-child {
  display: inline-block;
  margin-block-end: 0.325em;
}

label .required {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  vertical-align: 0.15em;
  margin-inline: 0.125em;
  border-radius: 0.15rem;
  background-color: color-mix(in srgb, var(--color-bg), currentColor 16.25%);
  padding: 0.15em 0.25em;
  font-size: 0.725em;
  line-height: 1;
}

label + label:has([type=checkbox], [type=radio]) {
  padding-inline-start: 1.225em;
}

#content > :nth-child(odd) label .required {
  background-color: color-mix(in srgb, var(--color-bg), currentColor 1.75%);
}

form .error-message {
  font-size: 0.9em;
  padding-inline-start: 0.125em;
  padding-block-start: 0.125em;
  line-height: 1.425;
  color: red;
}

form .select-wrapper {
  position: relative;
  inline-size: 100%;
}
form .select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding-right: 2.5em;
}
form .select-wrapper::after {
  content: "\f103";
  font-family: var(--font-family-fontawesome);
  position: absolute;
  right: 1.065em;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-primary);
  font-size: 1.2em;
  pointer-events: none;
}
form .title {
  margin-block-end: 0.75em;
  display: inline-block;
  font-weight: 700;
}
@media (min-width: 768px) {
  form .input-container {
    display: flex;
    gap: 1em;
  }
}
form .input-container .custom-input {
  margin-inline-end: 0.5rem;
}
@media (min-width: 768px) {
  form .input-container .custom-input {
    margin-inline-end: 0;
  }
}
form .radio-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
form label {
  line-height: inherit;
}
form :is(textarea) {
  block-size: 22rem;
}

.date-input-wrapper {
  position: relative;
  display: inline-block;
  flex-grow: 1;
  max-inline-size: 100%;
  display: flex;
}
.date-input-wrapper input.placeholder[type=date] {
  color: transparent !important;
  position: relative;
  width: 100%;
  text-align: left;
}
.date-input-wrapper input.placeholder[type=date]::-webkit-datetime-edit-text, .date-input-wrapper input.placeholder[type=date]::-webkit-datetime-edit-month-field, .date-input-wrapper input.placeholder[type=date]::-webkit-datetime-edit-day-field, .date-input-wrapper input.placeholder[type=date]::-webkit-datetime-edit-year-field {
  color: transparent;
}
.date-input-wrapper input.placeholder[type=date]:focus::-webkit-datetime-edit-text, .date-input-wrapper input.placeholder[type=date]:focus::-webkit-datetime-edit-month-field, .date-input-wrapper input.placeholder[type=date]:focus::-webkit-datetime-edit-day-field, .date-input-wrapper input.placeholder[type=date]:focus::-webkit-datetime-edit-year-field {
  color: var(--color-text);
}
.date-input-wrapper input.placeholder[type=date]:valid::-webkit-datetime-edit-text, .date-input-wrapper input.placeholder[type=date]:valid::-webkit-datetime-edit-month-field, .date-input-wrapper input.placeholder[type=date]:valid::-webkit-datetime-edit-day-field, .date-input-wrapper input.placeholder[type=date]:valid::-webkit-datetime-edit-year-field {
  color: var(--color-text);
}
.date-input-wrapper input.placeholder[type=date]:focus, .date-input-wrapper input.placeholder[type=date]:valid {
  color: var(--color-text) !important;
}
.date-input-wrapper input.placeholder[type=date]:not(:focus):not(:valid) {
  color: transparent !important;
}
.date-input-wrapper::before {
  content: attr(data-placeholder);
  color: var(--color-placeholder);
  position: absolute;
  left: 0.75em;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  white-space: nowrap;
  z-index: 1;
  opacity: 0.5;
}
input.placeholder[type=date]:focus ~ .date-input-wrapper::before, input.placeholder[type=date]:valid ~ .date-input-wrapper::before, input.placeholder[type=date]:focus + .date-input-wrapper::before, input.placeholder[type=date]:valid + .date-input-wrapper::before {
  display: none;
}
.date-input-wrapper:has(input.placeholder[type=date]:focus)::before, .date-input-wrapper:has(input.placeholder[type=date]:valid)::before {
  display: none;
}

:where(select, textarea, input):not([type=checkbox],
[type=radio],
[type=submit],
[type=reset],
[type=button],
[type=image],
[type=range]) {
  border: var(--border-line) var(--color-border);
  border-radius: 0;
  background-color: var(--color-bg);
  padding: 0.75em 1em;
  inline-size: 100%;
  font-size: max(1.6rem, var(--font-size-sm));
  color: var(--color-text);
}
:where(select, textarea, input):not([type=checkbox],
[type=radio],
[type=submit],
[type=reset],
[type=button],
[type=image],
[type=range])::placeholder {
  color: var(--color-placeholder);
}

form label:has(input:is([type=checkbox], [type=radio])) {
  position: relative;
}

.custom-input {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  font-size: 0;
  line-height: 0;
}
.custom-input :is([type=checkbox], [type=radio]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  accent-color: var(--color-border);
  flex-shrink: 0;
  border-radius: 0;
  border-color: var(--color-border);
  inline-size: 2rem;
  block-size: 2rem;
  border: var(--border-line) var(--color-border);
}
.custom-input :is([type=checkbox], [type=radio]):checked {
  background-color: var(--color-border);
}
.custom-input [type=radio] {
  border-radius: 50%;
}
.custom-input:has([type=checkbox])::after {
  border-width: 0 2px 2px 0;
  inset-block-start: 0.3rem;
  inset-inline-start: 0.7rem;
  inline-size: 0.5rem;
  block-size: 1rem;
  border: var(--border-line) var(--color-white);
  border-width: 0 0.2rem 0.2rem 0;
  transform: rotate(45deg);
}
.custom-input:has([type=radio])::after {
  inset: 0.5rem;
  background-color: var(--color-white);
  border-radius: 50%;
}
.custom-input::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

form input:is([type=checkbox], [type=radio]) {
  vertical-align: middle;
  inline-size: 1.12em;
  block-size: 1.12em;
  accent-color: var(--color-border);
}

.has-error input,
.has-error textarea {
  border: 1px solid transparent;
  box-shadow: 0 0 6px 2px rgba(255, 0, 0, 0.6);
  background-color: var(--color-white);
  color: black;
}

[data-content=form_formframework] [data-content=text] {
  border: var(--border-line) var(--color-border);
  padding: 3em 2em;
  max-inline-size: fit-content;
  margin-inline: auto;
}

#footer {
  --link-text-color: var(--color-primary);
  --footer-padding: calc(var(--gutter) * 2);
  position: relative;
  color: var(--color-primary);
  padding-block-start: var(--footer-padding);
  background-color: var(--color-light-gray);
}

#footer :any-link {
  transition: color var(--transition);
  text-decoration: underline;
  text-decoration-thickness: 0.0625em;
  text-underline-offset: 0.1em;
}

#footer :any-link:where(:focus-visible, :hover) {
  text-decoration: none;
}

#footer > .footer-container {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  margin-block: 5rem;
}

#footer p {
  margin-block-start: 0;
}

#footer .footer-contact,
#footer .footer-legal {
  flex-grow: 1;
}

#footer nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#footer .footer-contact address {
  font-style: normal;
}

#footer .footer-contact address > * {
  flex-grow: 1;
}

#footer .footer-contact .icon-fa {
  margin-inline-end: 0.25em;
}

#footer :where(h2, .h2, h3, .h3) {
  font-size: var(--font-size-lg);
  margin-block: 0 calc(var(--gutter) * 0.7);
  color: var(--color-secondary);
  font-weight: normal;
}

.footer-copyright-holder {
  --color-selection: var(--color-blue);
  --color-highlight: var(--color-blue);
  display: flex;
  flex-direction: column;
  padding-block: var(--gutter);
  font-weight: 600;
}

.footer-wrapper {
  padding-block-end: var(--gutter);
}

.footer-wrapper ul li {
  margin-block-end: calc(var(--gutter) / 2);
}

.footer-copyright {
  color: var(--color-primary);
  background-color: var(--color-beige);
}

.footer-copyright nav ul {
  display: flex;
  align-items: center;
  margin: 0;
}

.footer-copyright nav li {
  margin: 0;
}

.footer-copyright nav li::before {
  content: "|";
  margin-inline: calc(var(--gutter) / 4);
}

.footer-copyright nav li:first-child::before {
  content: none;
}

.footer-copyright :any-link {
  text-decoration: none;
  color: inherit;
}

.footer-copyright :any-link:where(:hover) {
  color: var(--color-selection);
}

.copyright {
  position: relative;
}

.asw-menu-btn {
  left: auto !important;
  right: 1rem !important;
}

@media (min-width: 744px) {
  #footer > .footer-container {
    flex-direction: row;
    margin-block: 10rem;
  }
  .sprechstunden {
    order: 1;
  }
}
@media (min-width: 992px) {
  #footer {
    padding-block-start: calc(var(--footer-padding) * 1.5);
  }
  #footer > .footer-container {
    margin-block: 15rem;
  }
  .footer-wrapper {
    padding-block-end: calc(var(--footer-padding) * 1.5);
  }
  #footer .icon-fa {
    font-size: 1.4em;
    font-weight: 300;
  }
  .sprechstunden {
    order: revert;
  }
  .footer-copyright-holder {
    flex-direction: row;
  }
  .footer-copyright nav li:first-child::before {
    content: "|";
  }
}
@media (min-width: 1260px) {
  #footer .footer-contact address {
    flex-direction: row;
    gap: var(--gutter);
  }
  .asw-menu-btn {
    right: auto !important;
    left: 1rem !important;
  }
}
}