/* Topic photographs stay within the existing compact intro area. */
body.subpage.qt-consistent .hero.qt-topic-hero { isolation: isolate; }
.qt-topic-hero > .qt-topic-visual {
  position: absolute;
  inset: 0 0 0 auto;
  width: 48%;
  height: 100%;
  display: block;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.06) 24%, rgba(0,0,0,.84) 55%, #000 75%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.06) 24%, rgba(0,0,0,.84) 55%, #000 75%);
}
.qt-topic-hero > .qt-topic-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 60% 50%;
}
/* Orient equipment towards the open visual edge of the page. */
.qt-topic-hero :is(.qt-topic-visual--it-sicherheit, .qt-topic-visual--datensicherung, .qt-topic-visual--software-ki) img { transform: scaleX(-1); }
body.subpage.qt-consistent .hero.qt-topic-hero > .wrap > * { max-width: var(--qt-topic-copy-width, 65%); }
body.subpage.qt-consistent .hero.qt-topic-hero > .wrap > :is(h1, .business-scope-note, .provider-switch-hero-note, .security-check-commitment, .emergency-availability) { max-width: var(--qt-topic-title-width, 75%); }
body.subpage.qt-consistent .hero.qt-topic-hero h1 { font-size: clamp(30px, 3.2vw, 40px); }
@media (min-width: 1600px) {
  .qt-topic-hero > .qt-topic-visual { width: calc(50% - 20px); }
}
@media (max-width: 1100px) {
  .qt-topic-hero > .qt-topic-visual { width: 44%; opacity: .36; }
  body.subpage.qt-consistent .hero.qt-topic-hero { --qt-topic-copy-width: 92%; --qt-topic-title-width: 92%; }
}
@media (max-width: 760px) {
  .qt-topic-hero > .qt-topic-visual {
    width: 100%;
    opacity: .16;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 72%);
    mask-image: linear-gradient(90deg, transparent, #000 72%);
  }
  body.subpage.qt-consistent .hero.qt-topic-hero { --qt-topic-copy-width: 100%; --qt-topic-title-width: 100%; }
  body.subpage.qt-consistent .hero.qt-topic-hero h1 { font-size: 28px; }
}
@media (max-width: 360px) {
  body.subpage.qt-consistent .hero.qt-topic-hero h1 { font-size: 26px; }
}
