/* KMC.Studio — targeted project-card layout correction.
   Only the project page is affected. All original images remain untouched.
   Media participates in the card grid; no negative offset or page-heading overlap. */
.projects-page .project-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.projects-page .project-card {
  display: grid;
  min-width: 0;
  isolation: isolate;
  overflow: hidden;
}
.projects-page .feature-project {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  min-height: 390px;
}
.projects-page .feature-copy {
  width: auto;
  min-width: 0;
  padding: 34px 30px 34px 34px;
}
.projects-page .project-heading .app-icon { flex: 0 0 auto; }
.projects-page .feature-copy .project-description { max-width: 44ch; }
.projects-page .project-media {
  position: relative;
  inset: auto;
  min-width: 0;
  width: auto;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  align-self: stretch;
  z-index: 1;
  -webkit-mask-image: none;
  mask-image: none;
}
.projects-page .feature-art {
  padding: 24px 24px 24px 0;
}
.projects-page .feature-art img {
  width: 100%;
  height: auto;
  max-height: 390px;
  object-fit: contain;
  object-position: center;
  border-radius: 7px;
  /* A narrow side-edge transition affects only the empty scene background.
     The phone starts beyond 10% of the source width; the Watch ends before 80%. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.projects-page .dev-project {
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  align-items: center;
  min-height: 308px;
  padding: 24px;
  gap: 14px;
}
.projects-page .dev-copy,
.projects-page .wristdesk-project .dev-copy {
  min-width: 0;
  width: auto;
  padding: 24px 0 0;
  align-self: start;
}
.projects-page .dev-project .project-heading {
  gap: 14px;
  align-items: center;
}
.projects-page .dev-project .app-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
}
.projects-page .dev-project h2 { font-size: 25px; }
.projects-page .dev-project .status { font-size: 13px; }
.projects-page .dev-copy .project-description {
  max-width: 24ch;
  margin: 22px 0 0;
  font-size: 16px;
  line-height: 1.6;
}
.projects-page .dev-art {
  height: 260px;
  align-self: center;
}
.projects-page .keyfall-art {
  position: static;
  inset: auto;
  min-width: 0;
  min-height: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
}
.projects-page .wristdesk-crop {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 6 / 5;
  overflow: hidden;
  position: relative;
  /* Crop only unused lateral background, not the Watch or its controls. */
}
.projects-page .wristdesk-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 1;
  transform: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 94%, transparent);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}
@media (max-width: 1120px) and (min-width: 1001px) {
  .projects-page .dev-project { padding: 22px; gap: 12px; }
  .projects-page .dev-project h2 { font-size: 22px; }
  .projects-page .dev-project .app-icon { width: 44px; height: 44px; }
  .projects-page .dev-project .project-heading { gap: 10px; }
  .projects-page .dev-copy .project-description { font-size: 15px; }
}
@media (max-width: 1000px) {
  .projects-page .project-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .projects-page .dev-project {
    grid-template-columns: minmax(0, 1fr) minmax(0, .86fr);
    min-height: 300px;
    padding: 26px 30px;
    gap: 24px;
  }
  .projects-page .dev-art { height: 248px; }
  .projects-page .dev-copy .project-description { max-width: 28ch; }
}
@media (max-width: 800px) {
  .projects-page .feature-project { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .projects-page .feature-copy { padding: 28px 28px 14px; }
  .projects-page .feature-copy .project-description { max-width: 48ch; }
  .projects-page .feature-art { padding: 10px 24px 26px; }
  .projects-page .feature-art img { max-width: 620px; max-height: none; }
}
@media (max-width: 600px) {
  .projects-page .project-grid { gap: 16px; }
  .projects-page .feature-copy { padding: 24px 20px 12px; }
  .projects-page .feature-art { padding: 6px 16px 20px; }
  .projects-page .feature-art img { border-radius: 5px; }
  .projects-page .dev-project {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding: 22px 20px;
    gap: 20px;
  }
  .projects-page .dev-copy,
  .projects-page .wristdesk-project .dev-copy { padding: 0; }
  .projects-page .dev-project .app-icon { width: 48px; height: 48px; }
  .projects-page .dev-project h2 { font-size: 23px; }
  .projects-page .dev-project .status { font-size: 11.5px; }
  .projects-page .dev-copy .project-description {
    max-width: 32ch;
    margin-top: 17px;
    font-size: 14px;
  }
  .projects-page .dev-art { height: 238px; width: 100%; }
  .projects-page .wristdesk-crop { width: min(100%, 268px); }
}
@media (max-width: 359px) {
  .projects-page .feature-copy { padding-inline: 18px; }
  .projects-page .dev-project { padding: 21px 18px; }
  .projects-page .dev-art { height: 220px; }
  .projects-page .project-heading { gap: 11px; }
  .projects-page .project-actions { gap: 14px; }
}


/* 2026-09-15 — continuous card scenes, derived from the existing artwork.
   Backdrops belong to the full card, not the media box. Devices are separate
   lossless RGBA cut-outs; no gradient, mask, tint or blur is applied to a display.
   The existing grid and all text/device positions above remain in place. */
.projects-page .feature-project {
  background: #07131d;
}
.projects-page .feature-project::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,17,26,.98) 0%, rgba(6,17,26,.88) 28%, rgba(6,17,26,.35) 48%, rgba(6,17,26,.04) 76%, rgba(6,17,26,.12) 100%),
    linear-gradient(180deg, rgba(4,13,22,.05) 30%, rgba(5,14,22,.22) 100%),
    url('assets/wartezeiten-backdrop.webp') center 55% / cover no-repeat;
}
.projects-page .feature-art img {
  border-radius: 0;
  -webkit-mask-image: none;
  mask-image: none;
  filter: drop-shadow(0 10px 10px rgba(0,0,0,.22));
}
.projects-page .feature-copy,
.projects-page .dev-copy { position: relative; z-index: 2; }
.projects-page .feature-art,
.projects-page .wristdesk-media { position: relative; z-index: 1; }
.projects-page .wristdesk-project {
  background: radial-gradient(ellipse at 87% 65%, #173347 0%, #0a1c29 48%, #07131d 89%);
}
.projects-page .wristdesk-project::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('assets/wristdesk-backdrop.webp') right center / auto 100% no-repeat;
  opacity: .42;
  -webkit-mask-image: linear-gradient(90deg, transparent 62%, #000 94%);
  mask-image: linear-gradient(90deg, transparent 62%, #000 94%);
}
.projects-page .wristdesk-art {
  -webkit-mask-image: none;
  mask-image: none;
  filter: none;
}
@media (max-width: 800px) {
  .projects-page .feature-project::before {
    background:
      linear-gradient(180deg, rgba(6,17,26,.94) 0%, rgba(6,17,26,.88) 33%, rgba(6,17,26,.24) 68%, rgba(6,17,26,.48) 100%),
      linear-gradient(90deg,rgba(6,17,26,.30),rgba(6,17,26,0) 65%),
      url('assets/wartezeiten-backdrop.webp') center bottom / auto 100% no-repeat;
  }
}
@media (max-width: 600px) {
  .projects-page .wristdesk-project {
    background: radial-gradient(ellipse at 65% 77%,#193747 0%,#0a1c29 47%,#07131d 83%);
  }
  .projects-page .wristdesk-project::before {
    background-position: right bottom;
    background-size: auto 65%;
    -webkit-mask-image: linear-gradient(150deg,transparent 26%,rgba(0,0,0,.4) 55%,#000 94%);
    mask-image: linear-gradient(150deg,transparent 26%,rgba(0,0,0,.4) 55%,#000 94%);
  }
}

/* The card owns one continuous coaster scene. Keep the original foreground
   devices separate; a second, differently scaled scene here creates light seams. */
.projects-page .feature-device-stage {
  width: 100%;
  max-width: 608.333px;
  aspect-ratio: 730 / 468;
  position: relative;
  isolation: isolate;
}
.projects-page .feature-art .feature-device-stage img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  filter: none;
}
.projects-page .wristdesk-project::before {
  background-size: cover;
  width: 34%;
  inset: 0 0 0 auto;
  opacity: .28;
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 90%);
  mask-image: linear-gradient(90deg,transparent,#000 90%);
}
.projects-page .wristdesk-crop::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('assets/wristdesk-scene.webp') center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent),linear-gradient(180deg,transparent,#000 20%,#000 75%,transparent);
  mask-image: linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent),linear-gradient(180deg,transparent,#000 20%,#000 75%,transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
@media (max-width: 800px) {
  .projects-page .feature-device-stage { max-width: 620px; }
  .projects-page .feature-project::before {
    background:
      linear-gradient(180deg, rgba(6,17,26,.97) 0%, rgba(6,17,26,.91) 33%, rgba(6,17,26,.46) 68%, rgba(6,17,26,.57) 100%),
      linear-gradient(90deg,rgba(6,17,26,.30),rgba(6,17,26,0) 65%),
      url('assets/wartezeiten-backdrop.webp') center bottom / auto 100% no-repeat;
  }
}
@media (max-width: 600px) {
  .projects-page .wristdesk-project::before {
    inset: 35% 0 0 auto;
    width: 45%;
    background-size: cover;
    -webkit-mask-image: linear-gradient(90deg,transparent,#000 90%);
    mask-image: linear-gradient(90deg,transparent,#000 90%);
  }
}