/* Systemwissen overview comparison: header surfaces on the existing light page. */
body.systemwissen-hub-page .lexicon-preview-grid > .lexicon-preview-card:nth-child(n) {
  background: #12161b !important;
  border-top: 1px solid #cbb77f;
  box-shadow: 0 4px 9px rgba(7, 9, 11, .15);
  opacity: 1;
  filter: none;
  transform: none;
  transition: background-color 180ms ease, box-shadow 180ms ease;
}
body.systemwissen-hub-page .lexicon-preview-grid > .lexicon-preview-card:nth-child(n):hover,
body.systemwissen-hub-page .lexicon-preview-grid > .lexicon-preview-card:nth-child(n):focus-visible {
  background: #1c252b !important;
  transform: none;
  box-shadow: 0 4px 9px rgba(7, 9, 11, .2), inset 0 0 0 1px #cbb77f;
}
body.systemwissen-hub-page .lexicon-preview-grid > .lexicon-preview-card:nth-child(n):focus-visible {
  outline: 2px solid #12161b;
  outline-offset: 2px;
}
body.systemwissen-hub-page .lexicon-preview-grid > .lexicon-preview-card > strong {
  color: #f0f1ed !important;
  margin: 10px 12px 0 !important;
  padding-bottom: 10px;
  text-shadow: -1px -1px 0 #07090b, 0 -1px 0 #07090b, 1px -1px 0 #07090b,
    -1px 0 0 #07090b, 1px 0 0 #07090b,
    -1px 1px 0 #07090b, 0 1px 0 #07090b, 1px 1px 0 #07090b !important;
}
body.systemwissen-hub-page .lexicon-preview-grid > .lexicon-preview-card > strong::after {
  background: #cbb77f !important;
}
body.systemwissen-hub-page .lexicon-publication-label,
body.systemwissen-hub-page .lexicon-shelf > .lexicon-publication-label span,
body.systemwissen-hub-page .iot-overview-label.lexicon-publication-label span {
  color: #18221b !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}
body.systemwissen-hub-page .lexicon-shelf > .lexicon-publication-label::after,
body.systemwissen-hub-page .iot-overview-label.lexicon-publication-label::after {
  background: #cbb77f !important;
}
body.systemwissen-hub-page .lexicon-preview-grid {
  scrollbar-width: thin;
  scrollbar-color: #12161b rgba(18, 22, 27, .12) !important;
}
body.systemwissen-hub-page .lexicon-preview-grid::-webkit-scrollbar {
  display: block !important;
  width: 6px !important;
  height: 4px !important;
}
body.systemwissen-hub-page .lexicon-preview-grid::-webkit-scrollbar-track {
  background: rgba(18, 22, 27, .12) !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.systemwissen-hub-page .lexicon-preview-grid::-webkit-scrollbar-thumb {
  background: #12161b !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 4px;
}
body.systemwissen-hub-page .rubric-switch-overview .iot-overview-media {
  box-shadow: inset 0 0 0 1px #12161b !important;
  outline: 1px solid #12161b;
  outline-offset: -1px;
}

/* Add room outside the motif; preserve its dimensions, artwork and hover. */
body.systemwissen-hub-page .blockchain-overview-feature {
  margin-top: 44px !important;
  margin-bottom: 24px !important;
}
@media (min-width: 1001px) {
  body.systemwissen-hub-page .lexicon-library {
    height: calc(min(720px, max(620px, calc(100svh - var(--site-header-h, 129px) - 1px))) + 64px);
    padding-bottom: 364px !important;
  }
  body.systemwissen-hub-page .blockchain-overview-feature {
    bottom: 244px !important;
    margin: 0 !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.systemwissen-hub-page .lexicon-preview-grid > .lexicon-preview-card:nth-child(n) {
    transition: none;
  }
}

/* Let the code-face scene show subtly through the preview image area only.
   Keep the caption on an opaque dark surface for reliable text contrast. */
body.systemwissen-hub-page .lexicon-preview-grid > .lexicon-preview-card:nth-child(n),
body.systemwissen-hub-page .lexicon-preview-grid > .lexicon-preview-card:nth-child(n):hover,
body.systemwissen-hub-page .lexicon-preview-grid > .lexicon-preview-card:nth-child(n):focus-visible {
  background: transparent !important;
}
body.systemwissen-hub-page .lexicon-preview-grid > .lexicon-preview-card .article-screenshot-preview {
  opacity: .82 !important;
}
body.systemwissen-hub-page .lexicon-preview-grid > .lexicon-preview-card > strong {
  box-sizing: border-box;
  margin: 0 !important;
  padding: 10px 12px !important;
  background: #12161b;
}
body.systemwissen-hub-page .lexicon-preview-grid > .lexicon-preview-card > strong::after {
  left: 12px !important;
}
body.systemwissen-hub-page .lexicon-preview-grid > .lexicon-preview-card:hover > strong,
body.systemwissen-hub-page .lexicon-preview-grid > .lexicon-preview-card:focus-visible > strong {
  background: #1c252b;
}
@media (max-width: 620px) {
  body.systemwissen-hub-page .lexicon-preview-grid > .lexicon-preview-card > strong {
    padding-bottom: 8px !important;
  }
}

/* Use the empty desktop gap below the last previews; keep their positions. */
@media (min-width: 1001px) {
  body.systemwissen-hub-page .site-footer {
    margin-top: -32px;
  }
}