/* T01 – statischer Gebäudeschnitt, ausschließlich in der unabhängigen Testkopie. */
.hero-blueprint {
  --blueprint-opacity: .12;
  position: absolute;
  top: clamp(235px, calc(14vw + 128px), 320px);
  left: 50%;
  width: 1300px;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: var(--blueprint-opacity);
  filter: drop-shadow(0 0 3px rgba(185, 154, 123, .45));
  /* Rand, 380-px-Porträtzone (40 %) und vertikales Auslaufen multiplizieren. */
  -webkit-mask-image:
    radial-gradient(ellipse 66% 63% at 50% 45%, #000 30%, transparent 77%),
    linear-gradient(to right, #000 calc(50% - 270px), rgba(0, 0, 0, .4) calc(50% - 190px), rgba(0, 0, 0, .4) calc(50% + 190px), #000 calc(50% + 270px)),
    linear-gradient(to bottom, transparent 3%, #000 18%, #000 64%, transparent 89%);
  -webkit-mask-composite: source-in, source-in;
  mask-image:
    radial-gradient(ellipse 66% 63% at 50% 45%, #000 30%, transparent 77%),
    linear-gradient(to right, #000 calc(50% - 270px), rgba(0, 0, 0, .4) calc(50% - 190px), rgba(0, 0, 0, .4) calc(50% + 190px), #000 calc(50% + 270px)),
    linear-gradient(to bottom, transparent 3%, #000 18%, #000 64%, transparent 89%);
  mask-composite: intersect, intersect;
}
.hero-blueprint img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 1550px) {
  .hero-blueprint { top: 337px; }
}
@media (max-width: 760px) {
  .hero-blueprint {
    --blueprint-opacity: .09;
    top: 130px;
    width: 680px;
    -webkit-mask-image:
      radial-gradient(ellipse 68% 66% at 50% 42%, #000 25%, transparent 79%),
      linear-gradient(to right, #000 calc(50% - 135px), rgba(0, 0, 0, .4) calc(50% - 95px), rgba(0, 0, 0, .4) calc(50% + 95px), #000 calc(50% + 135px)),
      linear-gradient(to bottom, transparent 0%, #000 16%, #000 58%, transparent 89%);
    -webkit-mask-composite: source-in, source-in;
    mask-image:
      radial-gradient(ellipse 68% 66% at 50% 42%, #000 25%, transparent 79%),
      linear-gradient(to right, #000 calc(50% - 135px), rgba(0, 0, 0, .4) calc(50% - 95px), rgba(0, 0, 0, .4) calc(50% + 95px), #000 calc(50% + 135px)),
      linear-gradient(to bottom, transparent 0%, #000 16%, #000 58%, transparent 89%);
    mask-composite: intersect, intersect;
  }
}
