/* Layout */
.container {
  width: var(--container);
  margin-inline: auto;
  padding-inline: 16px;
}

.section {
  position: relative;
  padding: var(--section-pad) 0;
  border-top: 0 !important;
  border-bottom: 0 !important;
  isolation: isolate;
}

main {
  background: var(--bg-page);
}

main .section + .section {
  margin-top: -1px;
}

main .section + .section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -20px;
  height: 20px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(246, 251, 245, 0) 0%,
    rgba(246, 251, 245, 0.62) 100%
  );
}

:where(
    .nav-row,
    .hero-grid,
    .cards,
    .about,
    .contact-grid,
    .vorteile-grid,
    .footer-row
  )
  > * {
  min-width: 0;
}

/* Content-Links in <main> */
main a:not(.btn) {
  color: var(--primary-green);
  text-decoration: none;
  background-image: linear-gradient(
    to right,
    var(--accent-green),
    var(--accent-green)
  );
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 0.25s ease, filter 0.2s ease, color 0.15s ease;
  overflow-wrap: anywhere;
}
main a:not(.btn):hover,
main a:not(.btn):active {
  background-size: 100% 2px;
  filter: saturate(1.05);
}
main a:not(.btn):visited {
  color: var(--primary-green);
}
main a:not(.btn):focus-visible {
  outline: 3px solid #c1dcaf;
  outline-offset: 2px;
  border-radius: 6px;
}
main a[target="_blank"]:not(.btn)::after {
  content: "↗";
  font-size: 0.85em;
  margin-left: 0.25em;
  opacity: 0.85;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  background: #ffffff;
  color: var(--primary-green);
  text-decoration: none;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  transform: translateY(-200%);
}
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid #c1dcaf;
  outline-offset: 2px;
}

/* a11y */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* Scroll offset */
#hero,
#leistungen,
#ueber,
#zielgruppen,
#vorteile,
#ablauf,
#faq,
#kontakt {
  scroll-margin-top: calc(var(--header-height) + 12px);
}