/* v309: Echte Praxisbeispiele aus der Excel-VBA-Dokumentationslösung im Visualbereich */

.sampro-topic-v305__doc-visual{
  gap:22px !important;
  padding:24px !important;
}

.sampro-topic-v309__doc-showcase{
  position:relative !important;
  z-index:2 !important;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:16px !important;
  margin-top:54px !important;
}

.sampro-topic-v309__doc-showcase::before{
  content:"Dokumentations-Cockpit" !important;
  position:absolute !important;
  left:0 !important;
  top:-42px !important;
  color:#ffffff !important;
  font-size:22px !important;
  font-weight:850 !important;
  letter-spacing:-.01em !important;
}

.sampro-topic-v309__doc-example{
  margin:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  padding:10px !important;
  border-radius:22px !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 14px 30px rgba(2,21,47,.18), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.sampro-topic-v309__doc-example--primary{
  grid-column:1 / -1 !important;
}

.sampro-topic-v309__doc-example img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  border-radius:14px !important;
  background:#0e2f5d !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 12px 22px rgba(2,21,47,.18) !important;
}

.sampro-topic-v309__doc-example figcaption{
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
  padding:2px 2px 4px !important;
}

.sampro-topic-v309__doc-example figcaption strong{
  color:#ffffff !important;
  font-size:16px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
}

.sampro-topic-v309__doc-example figcaption span{
  color:rgba(255,255,255,.82) !important;
  font-size:13.5px !important;
  line-height:1.45 !important;
}

.sampro-topic-v305__doc-stats{
  position:relative !important;
  z-index:2 !important;
  margin-top:4px !important;
}

@media (max-width:1180px){
  .sampro-topic-v309__doc-showcase{
    grid-template-columns:1fr !important;
  }
  .sampro-topic-v309__doc-example--primary{
    grid-column:auto !important;
  }
}

@media (max-width:720px){
  .sampro-topic-v305__doc-visual{
    padding:20px !important;
  }
  .sampro-topic-v309__doc-showcase{
    margin-top:50px !important;
    gap:14px !important;
  }
  .sampro-topic-v309__doc-showcase::before{
    top:-38px !important;
    font-size:20px !important;
  }
  .sampro-topic-v309__doc-example{
    border-radius:18px !important;
    padding:8px !important;
  }
  .sampro-topic-v309__doc-example img{
    border-radius:12px !important;
  }
}