/**
 * Home page — hero, intro, leistungen, projekte
 */

/* ——— Above the fold: hero + intro ——— */
@media (min-width: 1024px) {
  .home-above-fold {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100svh;
    overflow: visible;
  }
}

/* ——— Hero ——— */
.hero-home {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  height: 100vh;
  height: 100svh;
  overflow: clip;
  color: var(--color-cd);
}

@media (min-width: 1024px) {
  .hero-home {
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
  }
}

.hero-home__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-home__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: scale(1.05);
  transform-origin: center center;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .hero-home__image {
    transform: none;
    will-change: auto;
  }
}

.hero-home__content {
  position: relative;
  z-index: 1;
  width: min(calc(100% - (var(--page-margin) * 2)),
      var(--container-max));
}

.hero-home__title {
  margin: 0;
  color: var(--color-cd);
  text-align: center;
  text-wrap: balance;
}

.hero-home__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

/* ——— Intro ——— */
.home-intro {
  background: var(--color-gray-light);
  border-radius: 0 0 2.25rem 2.25rem;
  padding-block: 7.8125rem;
}

@media (min-width: 1024px) {
  .home-intro {
    position: relative;
    flex: 0 0 auto;
    border-radius: 0;
    padding-top: 6rem;
    /* 96px */
    padding-bottom: 6rem;
    /* 96px — zählt in die 100vh */
  }

  /* +48px (144 − 96) ragt unter dem Viewport heraus */
  .home-intro::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 3rem;
    /* 48px */
    background: var(--color-gray-light);
    border-radius: 0 0 3.75rem 3.75rem;
  }
}

.home-intro__text {
  margin: 0;
  color: var(--color-cd);
}

/* ——— Leistungen ——— */
.home-leistungen {
  padding-top: 80px;
  padding-bottom: 80px;
}

@media (min-width: 1024px) {
  .home-leistungen {
    padding-top: 128px;
    padding-bottom: 128px;
  }
}

.home-leistungen__panel {
  border-radius: 1.875rem;
  background: var(--color-cd);
  color: var(--color-white);
  overflow: clip;
}

@media (min-width: 1024px) {
  .home-leistungen__panel {
    min-height: 44rem;
    /* 704px — wächst bei Bedarf */
  }
}

.home-leistungen__layout {
  align-items: start;
}

@media (min-width: 1024px) {
  .home-leistungen__layout {
    min-height: 44rem;
  }
}

.home-leistungen__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

@media (min-width: 1024px) {
  .home-leistungen__content {
    align-self: stretch;
    min-height: 44rem;
    padding-block: 72px;
  }
}

.home-leistungen__title {
  margin: 0;
  color: var(--color-white);
  flex-shrink: 0;
}

.home-leistungen__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  flex-shrink: 0;
}

@media (max-width: 1023px) {
  .home-leistungen__tags {
    margin-top: 48px;
    margin-bottom: 124px;
  }
}

@media (min-width: 1024px) {
  .home-leistungen__tags {
    margin-top: 2rem;
    /* 32px */
    margin-bottom: 160px;
  }
}

.home-leistungen__text {
  margin: 0;
  color: var(--color-white);
}

@media (min-width: 1024px) {
  .home-leistungen__text {
    margin-top: auto;
    margin-bottom: 0;
    max-width: calc(((100% - (4 * var(--grid-gutter))) / 5) * 4 + (3 * var(--grid-gutter)));
  }
}

.home-leistungen__cta {
  flex-shrink: 0;
}

@media (max-width: 1023px) {
  .home-leistungen__cta {
    margin-top: 32px;
  }
}

@media (min-width: 1024px) {
  .home-leistungen__cta {
    margin-top: 1.5rem;
    /* 24px */
  }
}

.home-leistungen__media {
  position: relative;
  aspect-ratio: 348 / 410;
  border-radius: 1.875rem;
  overflow: clip;
}

.home-leistungen__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  z-index: 0;
  will-change: opacity;
}

.home-leistungen__image.is-active {
  opacity: 1;
  z-index: 1;
}

@media (min-width: 1024px) {
  .home-leistungen__media {
    align-self: stretch;
    margin-top: 0;
    aspect-ratio: auto;
    min-height: 44rem;
    height: auto;
    border-radius: 1.875rem;
  }
}

@media (max-width: 1023px) {
  .home-leistungen__panel {
    padding: 48px 1.5rem 0;
  }

  .home-leistungen__media {
    margin-top: 80px;
    margin-inline: -1.5rem;
    margin-bottom: 0;
    border-radius: 0 0 1.875rem 1.875rem;
  }

  .home-leistungen__layout>.home-leistungen__media {
    order: 10;
  }
}

/* ——— Projekte ——— */
.home-projekte {
  /*
   * 100vw (nicht 100%): sonst zyklische Breite mit width/max-content am Track
   * → massiver Horizontal-Overflow.
   */
  --projekte-grid-width: min(calc(100vw - (var(--page-margin) * 2)),
      var(--container-max));
  --projekte-inline: calc((100vw - var(--projekte-grid-width)) / 2);
  --projekte-col: calc((var(--projekte-grid-width) - ((var(--grid-columns) - 1) * var(--grid-gutter))) / var(--grid-columns));
  /* Wide home cards: 5 cols + 4 gutters (~peek of next slide) */
  --projekte-card: calc((var(--projekte-col) * 5) + (var(--grid-gutter) * 4));

  padding-top: 0;
  padding-bottom: 4rem;
  overflow-x: clip;
}

@media (min-width: 1024px) {
  .home-projekte {
    padding-block: 0 5rem;
  }
}

.home-projekte__scroller {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}

.home-projekte__scroller a,
.home-projekte__scroller img {
  -webkit-user-drag: none;
}

.home-projekte__scroller.is-dragging {
  cursor: grabbing;
  user-select: none;
  pointer-events: auto;
}

.home-projekte__scroller.is-dragging a {
  cursor: grabbing;
}

.home-projekte__scroller::-webkit-scrollbar {
  display: none;
}

.home-projekte__track {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--projekte-card);
  column-gap: var(--grid-gutter);
  padding-left: var(--projekte-inline);
  padding-right: var(--projekte-inline);
  vertical-align: top;
}

.home-projekte .projekt-card {
  width: var(--projekte-card);
  max-width: var(--projekte-card);
}

.home-projekte .projekt-card__media {
  margin-bottom: 0.8125rem;
}

@media (min-width: 1024px) {
  .home-projekte .projekt-card__media {
    margin-bottom: 2rem;
  }
}