/* cards: existing family composition and intentional responsive variants. */
.rating-half-star {
  clip-path: inset(0 50% 0 0);
}

.home-work-card {
  overflow: hidden;
  border-radius: var(--fs-radius-lg);
}

.home-work-card > div:last-child {
  align-self: stretch;
  min-height: 0;
  height: auto;
  justify-content: space-between;
  gap: var(--fs-space-6);
}

.home-work-card .block-heading {
  max-width: min(100%, 22rem);
  color: #fff;
  text-shadow: 0 0.1rem 1.25rem rgb(0 0 0 / 0.32);
}

.home-work-card a {
  align-self: flex-start;
}

.home-service-card {
  min-width: 0;
  min-height: clamp(14rem, 22vw, 18rem);
}

.home-service-card__number {
  margin-bottom: var(--fs-space-4);
  color: var(--accent);
  font-size: var(--fs-font-xs);
  line-height: var(--fs-line-snug);
  font-weight: var(--fs-weight-bold);
  letter-spacing: 0.1em;
}

.home-service-card .block-heading {
  max-width: 30rem;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

@media (max-width: 47.999rem) {
  .home-service-card {
    min-height: 0;
  }}

.content-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--fs-radius-md);
  background: var(--background);
}

.content-card--highlight {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-foreground);
}

.content-card__link {
  display: flex;
  height: 100%;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.content-card__link:focus-visible,
.content-card__action--button:focus-visible,
.content-card__action--link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.content-card__media {
  overflow: hidden;
  aspect-ratio: var(--content-card-media-aspect, 4 / 3);
  background: var(--muted);
}

.content-card__media :where(picture, img) {
  width: 100%;
  height: 100%;
}

.content-card__media img {
  object-fit: cover;
  transition: transform 180ms ease;
}

.content-card__link:hover .content-card__media img {
  transform: scale(1.025);
}

.content-card--wide .content-card__media {
  aspect-ratio: 16 / 9;
}

.content-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fs-space-3);
  padding: var(--fs-space-6);
}

.content-card__title {
  margin: 0;
  color: var(--foreground);
  font-size: var(--fs-font-heading-sm);
  line-height: var(--fs-line-snug);
  font-weight: var(--fs-weight-semibold);
}

.content-card__excerpt {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: var(--fs-font-sm);
  line-height: var(--fs-line-snug);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.content-card--highlight .content-card__title,
.content-card--highlight .content-card__excerpt {
  color: inherit;
}

.content-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fs-space-3);
  margin-top: auto;
}

.content-card__action--button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fs-radius-pill);
  padding: var(--fs-space-3) var(--fs-space-6);
  font-size: var(--fs-font-sm);
  font-weight: var(--fs-weight-semibold);
  line-height: var(--fs-line-snug);
  text-decoration: none;
  transition: opacity 180ms ease;
}

.content-card__action--button:hover {
  opacity: 0.88;
}

.content-card__action.content-card__action--link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fs-space-2);
  padding-block: var(--fs-space-3);
  color: inherit;
  font-size: var(--fs-font-sm);
  font-weight: var(--fs-weight-semibold);
  line-height: var(--fs-line-snug);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 180ms ease;
}

.content-card__action--link:hover {
  opacity: 0.8;
}

.content-card__action--primary {
  background: var(--accent);
  color: var(--accent-foreground);
}

.content-card--highlight .content-card__action--primary {
  background: var(--background);
  color: var(--foreground);
}

.work-case-list {
  display: flex;
  flex-direction: column;
  gap: var(--fs-space-16);
}

.work-case-item {
  display: grid;
  gap: var(--fs-space-6);
  align-items: start;
}

.work-case-item__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--fs-radius-lg);
  background: var(--muted);
  color: inherit;
  text-decoration: none;
}

.work-case-item__media:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.work-case-item__media :where(picture, img) {
  width: 100%;
  height: 100%;
}

.work-case-item__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 180ms ease;
}

.work-case-item__media:hover .work-case-item__image {
  transform: scale(1.025);
}

@media (prefers-reduced-motion: reduce) {
.content-card__media img,
.work-case-item__image {
    transition: none;
  }

  .content-card__link:hover .content-card__media img,
  .work-case-item__media:hover .work-case-item__image {
    transform: none;
  }}

.work-case-item__placeholder {
  display: flex;
  height: 100%;
  align-items: flex-end;
  padding: var(--fs-space-6);
  color: var(--muted-foreground);
  font-size: var(--fs-font-heading-sm);
  font-weight: var(--fs-weight-semibold);
  line-height: var(--fs-line-snug);
}

.work-case-item__content {
  min-width: 0;
}

.work-case-item__content-inner {
  display: flex;
  max-width: 36rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.work-case-item__title {
  margin: 0;
  color: var(--foreground);
  font-size: 2rem;
  line-height: 0.98;
  font-weight: var(--fs-weight-bold);
  letter-spacing: 0;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.work-case-item__excerpt {
  margin: 0;
  color: var(--foreground);
  font-size: var(--fs-font-lg);
  line-height: var(--fs-line-relaxed);
}

.work-case-item__title + .work-case-item__excerpt {
  margin-top: var(--fs-space-4);
}

.work-case-item__actions {
  margin-top: var(--fs-space-4);
}

@media (min-width: 48rem) {
  .work-case-item__title {
    font-size: 3rem;
  }

  .work-case-item__title + .work-case-item__excerpt {
    margin-top: var(--fs-space-6);
  }}

@media (min-width: 64rem) {
  .work-case-list {
    gap: var(--fs-space-24);
  }

  .work-case-item {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(var(--fs-space-8), 4vw, var(--fs-space-16));
  }

  .work-case-item__media {
    height: auto;
  }

  .work-case-item__content {
    display: flex;
    align-self: stretch;
    align-items: flex-start;
  }

  .work-case-item__content-inner {
    position: sticky;
    top: var(--fs-space-8);
  }

  .work-case-item__title {
    font-size: 4rem;
  }

  .work-case-item__title + .work-case-item__excerpt {
    margin-top: var(--fs-space-8);
  }

  .work-case-item:nth-child(even) .work-case-item__media {
    order: 2;
  }

  .work-case-item:nth-child(even) .work-case-item__content {
    order: 1;
  }}

.work-post-related-card {
  min-width: 0;
}

.work-post-related-card__link {
  display: grid;
  gap: var(--fs-space-4);
  color: inherit;
  text-decoration: none;
}

.work-post-related-card__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.work-post-related-card__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--fs-radius-lg);
  background: var(--muted);
}

.work-post-related-card__media :where(picture, img) {
  width: 100%;
  height: 100%;
}

.work-post-related-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 180ms ease;
}

.work-post-related-card__link:hover .work-post-related-card__image {
  transform: scale(1.025);
}

.work-post-related-card__placeholder {
  display: flex;
  height: 100%;
  align-items: flex-end;
  padding: var(--fs-space-5);
  color: var(--muted-foreground);
  font-size: var(--fs-font-heading-sm);
  line-height: var(--fs-line-snug);
  font-weight: var(--fs-weight-semibold);
}

.work-post-related-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--fs-space-2);
}

.work-post-related-card__title {
  color: var(--foreground);
  font-size: var(--fs-font-heading-sm);
  line-height: var(--fs-line-snug);
  font-weight: var(--fs-weight-semibold);
  text-wrap: balance;
}

.work-post-related-card__excerpt {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: var(--fs-font-sm);
  line-height: var(--fs-line-relaxed);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

@media (prefers-reduced-motion: reduce) {
  .work-post-related-card__image {
    transition: none;
  }

  .work-post-related-card__link:hover .work-post-related-card__image {
    transform: none;
  }}

@media (min-width: 64rem) {




  .content-card--wide {
    grid-column: 1 / -1;
  }}

@media (min-width: 48rem) and (max-width: 63.999rem) {




  .content-card--wide {
    grid-column: 1 / -1;
  }}

/* Compact capability cards: four columns on desktop, two on smaller screens. */
#diensten .grid:has(>.home-service-card){grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:0;padding:0}
#diensten .home-service-card{min-width:0;min-height:0;padding:clamp(1rem,2vw,1.5rem);border-radius:var(--fs-radius-lg)}
#diensten .home-service-card>div{gap:1rem;justify-content:flex-start}
#diensten .home-service-card .block-heading{font-size:clamp(1rem,1.7vw,1.375rem);line-height:1.2;overflow-wrap:anywhere;hyphens:auto;text-wrap:pretty}
#diensten .home-service-card p{overflow-wrap:anywhere}
@media(min-width:64rem){#diensten .grid:has(>.home-service-card){grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Numbered service option cards retain their existing composition. */
#site-content .service-theme-options>article:has(>.service-theme-option__number){display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
#site-content .service-theme-options>article:has(>.service-theme-option__number)>h3{margin:0}

/* Service essentials card composition. */
#site-content .service-theme-essentials article{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;text-align:left}
#site-content .service-theme-essentials h3,#site-content .service-theme-essentials p{margin:0}

/* Family-owned background media composition; shared playback remains in background-media.css. */
.home-studio-cta-media .background-media :is(img,video) {object-position:50% 50%}
.home-studio-cta-media {position:relative;isolation:isolate;overflow:hidden;width:100%;aspect-ratio:5/4;margin:0;border-radius:var(--fs-radius-lg)}
.home-studio-cta-media>.home-studio-cta-image {height:100%}