/* Einbettung in Joomlaplates Classic / Astroid. Der eigentliche App-Stil ist auf
   #share-scanner-root begrenzt und kann deshalb Navigation und Footer des
   Joomla-Templates nicht verändern. */
.mod-share-scanner {
  position: relative;
  z-index: auto;
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  background: #fff;
  container-name: mod-share-scanner;
  container-type: inline-size;
}

.mod-share-scanner--full {
  left: auto;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
}

.mod-share-scanner noscript {
  display: block;
  padding: 24px;
  text-align: center;
}

#share-scanner-root {
  width: 100%;
  max-width: 100%;
}

.share-drone-bridge {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 10cqw, 130px) clamp(24px, 7cqw, 92px);
  color: #07111f;
  background:
    radial-gradient(circle at 88% 25%, rgba(22, 137, 255, 0.14), transparent 30%),
    #f4f7fa;
}

.share-drone-bridge__inner {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: clamp(40px, 8cqw, 110px);
  align-items: center;
}

.share-drone-bridge__eyebrow {
  margin: 0 0 18px;
  color: #1689ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.share-drone-bridge h2 {
  margin: 0;
  max-width: 760px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(38px, 5.6cqw, 68px);
  font-weight: 750;
  line-height: .98;
  letter-spacing: -.055em;
}

.share-drone-bridge h2 span {
  color: #1689ff;
}

.share-drone-bridge__text {
  max-width: 690px;
  margin: 28px 0 0;
  color: #667180;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.7;
}

.share-drone-bridge__button {
  min-height: 51px;
  margin-top: 31px;
  padding: 0 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  background: #1689ff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .25s ease, background .25s ease;
}

.share-drone-bridge__button:hover {
  color: #fff;
  background: #3098ff;
  transform: translateY(-2px);
}

.share-drone-bridge__visual {
  position: relative;
  min-height: 330px;
  padding: 38px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  color: #fff;
  background: #071321;
  box-shadow: 0 30px 70px rgba(7, 17, 31, .2);
}

.share-drone-bridge__visual::before,
.share-drone-bridge__visual::after {
  content: "";
  position: absolute;
  inset: 12% 8%;
  border: 1px solid rgba(78, 177, 255, .28);
  background-image: radial-gradient(circle, rgba(78, 177, 255, .75) 0 1px, transparent 1.7px);
  background-size: 13px 13px;
  transform: rotateX(62deg) rotate(-18deg);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.share-drone-bridge__visual::after {
  inset: 25% 4% 3% 18%;
  opacity: .45;
  transform: rotateX(65deg) rotate(20deg);
}

.share-drone-bridge__visual > * {
  position: relative;
  z-index: 2;
}

.share-drone-bridge__visual span {
  color: #4eb1ff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.share-drone-bridge__visual strong {
  margin-top: 8px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(28px, 3.5cqw, 42px);
  line-height: 1;
  letter-spacing: -.04em;
}

.share-drone-bridge__visual small {
  margin-top: 10px;
  color: rgba(255, 255, 255, .58);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

@container mod-share-scanner (max-width:720px) {
  .share-drone-bridge__inner {
    grid-template-columns: 1fr;
  }

  .share-drone-bridge__visual {
    min-height: 260px;
  }
}