.doc-figure {
  width: min(100%, 420px);
  margin: 28px 0;
  overflow: hidden;
  border: 1px solid rgba(11, 73, 91, .16);
  border-radius: 20px;
  background: #e9f4f5;
  box-shadow: 0 14px 34px rgba(8, 42, 57, .1);
}

.top-actions { display: flex; align-items: center; gap: 12px; }
.language-label { font-size: .82rem; color: #b9d9dd; }
.language-select { min-height: 41px; padding: 8px 28px 8px 10px; border: 1px solid #78c4c46b; border-radius: 8px; background: #123b4e; color: #fff; font: inherit; font-size: .84rem; cursor: pointer; }
.language-select:focus-visible { outline: 3px solid #eaac2d; outline-offset: 3px; }

@media (max-width: 700px) {
  .language-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

@media (max-width: 420px) {
  .topbar { height: auto; min-height: 62px; flex-wrap: wrap; gap: 7px; padding-top: 8px; padding-bottom: 8px; }
  .top-actions { gap: 7px; }
  .language-select { min-height: 36px; padding: 6px 5px; font-size: .75rem; }
  .app-link { padding: 7px 8px; }
}

.doc-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.doc-figure figcaption {
  padding: 13px 16px 15px;
  color: #34566a;
  background: #f4faf9;
  font-size: .875rem;
  line-height: 1.5;
}

.screenshot-language-note { max-width: 660px; color: #59707b; font-size: .875rem; }
html[lang="de"] .screenshot-language-note { display: none; }

.doc-figure-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px;
}

.doc-figure-pair .doc-figure {
  flex: 1 1 250px;
  max-width: 350px;
  margin-top: 12px;
}

@media (max-width: 650px) {
  .doc-figure { width: min(100%, 350px); margin: 22px auto; }
  .doc-figure-pair { gap: 0; }
  .doc-figure-pair .doc-figure { flex-basis: 100%; }
}