/* T10 – freigegebene Sepia-Icons, gemeinsame Karten-Typografie und Foto-Auslauf. */
.hero-card img,
.problem-art img,
.vision-art img,
.service-card img {
  mix-blend-mode: normal;
  filter: none;
}

.voice-content .voice-role,
.service-card em {
  font: italic 400 18px/1.2 var(--serif);
  color: #806950;
}
.voice-content .voice-role { margin: 0 0 8px; }

.voice-content h3,
.service-card h3 {
  font: 500 41px/42px var(--serif);
  letter-spacing: -.8px;
  color: #141414;
}
.voice-content h3 { margin: 0 0 18px; }

.voice-content blockquote,
.services .service-card p {
  font: 400 15px/27px var(--sans);
  color: #5D554B;
}
.voice-content blockquote { margin: 0; }

/* Die vollständige Haus-Ebene einschließlich ihrer Masken rückt nach oben.
   Bei 1440 px liegt die oberste SVG-Linie damit bei 115 px (Navigation bis 104 px). */
#hero .hero-blueprint { top: -2px; }
@media (min-width: 1550px) {
  #hero .hero-blueprint { top: -4px; }
}
@media (max-width: 760px) {
  /* Oberste Zeichnungslinie bei rund 100 px, unter der Navigation (bis 80 px). */
  #hero .hero-blueprint { top: 60px; }
  .about { grid-template-columns: minmax(0, 1fr); }
  .about-photo {
    width: min(375px, 100vw);
    height: 420px;
    justify-self: center;
    margin-inline: 0;
  }
}

.about-photo img {
  object-fit: cover;
  object-position: 45% 20%;
  /* T09-Auslauf unten und seitlich; neu: oben weich über 10 % ausblenden. */
  -webkit-mask-image:
    linear-gradient(to top, transparent, #000 45%),
    linear-gradient(to right, transparent, #000 8%, #000 92%, transparent),
    linear-gradient(to bottom, transparent, #000 10%);
  -webkit-mask-composite: source-in, source-in;
  mask-image:
    linear-gradient(to top, transparent, #000 45%),
    linear-gradient(to right, transparent, #000 8%, #000 92%, transparent),
    linear-gradient(to bottom, transparent, #000 10%);
  mask-composite: intersect, intersect;
}