@layer components {

  .sust-parallax {
    container-type: inline-size;
    container-name: sust-parallax;
    position: relative;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding-block: var(--space-4xl);

    /* CSS-only parallax: fixed background. Falls back to a regular cover
       on touch/scroll-perf-sensitive devices via the media query below. */
    background-image: url('/assets/img/parallax-gebaeude-neu-1537.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
  }

  .sust-parallax__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      135deg,
      oklch(0.12 0.02 142 / 0.68) 0%,
      oklch(0.10 0.01 142 / 0.56) 40%,
      oklch(0.15 0.02 91 / 0.42) 100%
    );
  }

  .sust-parallax__content {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .sust-parallax__inner {
    max-width: 72rem;
    margin: 0 auto;
    text-align: center;
  }

  /* ---- Certification strip ---- */
  .sust-parallax__cert-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-m);
    margin-bottom: var(--space-2xl);
  }

  .sust-parallax__cert-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--always-light);
    opacity: 0.85;
    letter-spacing: 0.03em;
  }

  .sust-parallax__cert-item .icon {
    width: 1.4rem;
    height: 1.4rem;
    color: var(--primary);
  }

  .sust-parallax__cert-divider {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: var(--radius-full);
    background: var(--always-light);
    opacity: 0.35;
  }

  /* ---- Headline ---- */
  .sust-parallax__headline-block { margin-bottom: var(--space-xl); }

  .sust-parallax__accent {
    width: 5.6rem;
    height: 0.4rem;
    background: var(--primary);
    border-radius: var(--radius-full);
    margin: 0 auto var(--space-l);
  }

  .sust-parallax__title {
    font-size: var(--text-4xl);
    font-weight: var(--weight-semibold);
    color: var(--always-light);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-l);
  }

  .sust-parallax__subtitle {
    font-size: var(--text-ml);
    color: var(--always-light);
    opacity: 0.8;
    line-height: 1.65;
    max-width: 60rem;
    margin: 0 auto;
  }

  /* ---- Keyword row ---- */
  .sust-parallax__keywords {
    text-align: center;
    margin-bottom: var(--space-2xl);
    font-size: var(--text-s);
    font-weight: var(--weight-medium);
    color: var(--always-light);
    opacity: 0.85;
    letter-spacing: 0.02em;
    line-height: 1.9;
  }

  .sust-parallax__keyword {
    color: var(--primary);
    font-weight: var(--weight-bold);
  }

  .sust-parallax__keyword-sep {
    margin: 0 var(--space-xs);
    color: var(--primary);
    opacity: 0.9;
  }

  /* ---- CTAs ---- */
  .sust-parallax__actions {
    display: flex;
    justify-content: center;
    gap: var(--space-m);
    align-items: center;
  }

  .sust-parallax__cta .icon { width: 1.6rem; height: 1.6rem; }

  .sust-parallax__cta-secondary {
    background: transparent;
    color: var(--always-light);
    border: 1.5px solid oklch(1 0 0 / 0.4);
  }

  .sust-parallax__cta-secondary:hover {
    background: oklch(1 0 0 / 0.1);
    border-color: oklch(1 0 0 / 0.6);
    color: var(--always-light);
  }

  /* ---- Capability row ---- */
  .sust-parallax__capabilities {
    position: relative;
    z-index: 2;
    margin-top: var(--space-4xl);
  }

  .sust-parallax__cap-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-l);
    padding-top: var(--space-xl);
    border-top: 1px solid oklch(1 0 0 / 0.15);
  }

  .sust-parallax__cap { text-align: center; }

  .sust-parallax__cap-value {
    font-family: var(--font-primary);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--primary);
    letter-spacing: 0.04em;
    margin-bottom: var(--space-3xs);
  }

  .sust-parallax__cap-label {
    font-size: var(--text-xs);
    color: var(--always-light);
    opacity: 0.7;
    line-height: 1.4;
  }

  /* ---- Touch / mobile: drop the fixed background (poor jank story) ---- */
  @media (hover: none), (max-width: 768px) {
    .sust-parallax { background-attachment: scroll; }
  }

  /* ---- Responsive ---- */
  @container sust-parallax (max-width: 968px) {
    .sust-parallax__cap-grid { grid-template-columns: repeat(2, 1fr); }
  }

  @container sust-parallax (max-width: 768px) {
    .sust-parallax        { min-height: 70vh; padding-block: var(--space-3xl); }
    .sust-parallax__title { font-size: var(--text-3xl); }
    .sust-parallax__overlay {
      background: linear-gradient(
        180deg,
        oklch(0.12 0.02 142 / 0.72) 0%,
        oklch(0.15 0.02 91 / 0.52) 100%
      );
    }
    .sust-parallax__cert-strip   { flex-wrap: wrap; gap: var(--space-s); }
    .sust-parallax__cert-divider { display: none; }
  }

  @container sust-parallax (max-width: 640px) {
    .sust-parallax__title    { font-size: var(--text-2xl); line-height: 1.15; }
    .sust-parallax__subtitle { font-size: var(--text-m); }
    .sust-parallax__actions  { flex-direction: column; align-items: center; }
    .sust-parallax__actions .btn { width: 100%; justify-content: center; }
    .sust-parallax__accent       { width: 4rem; height: 0.3rem; }
    .sust-parallax__cap-grid     { grid-template-columns: repeat(2, 1fr); gap: var(--space-m); }
  }

  @container sust-parallax (max-width: 480px) {
    .sust-parallax              { min-height: auto; padding-block: var(--space-2xl); }
    .sust-parallax__title       { font-size: var(--text-2xl); line-height: 1.18; }
    .sust-parallax__subtitle    { font-size: var(--text-s); }
    .sust-parallax__keywords    { font-size: var(--text-xs); line-height: 2; }
    .sust-parallax__keyword-sep { margin: 0 var(--space-3xs); }
    .sust-parallax__capabilities { margin-top: var(--space-2xl); }
    .sust-parallax__cap-value   { font-size: var(--text-l); }
  }
}