/* Word-nahe Darstellung der Vorher-nachher-Beispiele. */
.bkx {
  --bkx-edge-top: #fff;
  --bkx-edge-bottom: #f5f7fa;
  border-top: 0;
  border-bottom: 0;
  background: linear-gradient(
    180deg,
    var(--bkx-edge-top) 0,
    #eef1f5 48px,
    #eef1f5 calc(100% - 48px),
    var(--bkx-edge-bottom) 100%
  );
}
.nsteps ~ .bkx { --bkx-edge-top: #f5f7fa; }
.article .bkx { --bkx-edge-bottom: #fff; }
.bkx .bkx-stage { align-items: stretch; }
.bkx .bkx-col { display: flex; min-width: 0; flex-direction: column; }
.bkx .bkx-col[hidden] { display: none; }
.bkx .bkx-cap { display: flex; min-height: 2.7em; align-items: flex-end; }
.bkx .bkx-doc { display: flex; flex: 1; flex-direction: column; }
.bkx .bkx-sheet { flex: 1; font-size: .95rem; }

.bkx .bkx-wordbar {
  flex: 0 0 auto;
  font-family: "Segoe UI", Arial, sans-serif;
  color: #202630;
  background: #fff;
}
.bkx .bkx-word-titlebar {
  display: grid;
  min-height: 28px;
  grid-template-columns: 60px minmax(0, 1fr) 60px;
  align-items: center;
  padding: 0 .65rem;
  color: #fff;
  background: linear-gradient(90deg, #2677ee 0%, #1351c8 100%);
  font-size: .72rem;
}
.bkx .bkx-word-titlebar strong {
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bkx .bkx-word-titlebar strong span { font-weight: 500; }
.bkx .bkx-word-dots { display: flex; gap: .32rem; }
.bkx .bkx-word-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff6258;
}
.bkx .bkx-word-dots i:nth-child(2) { background: #ffc342; }
.bkx .bkx-word-dots i:nth-child(3) { background: #49c95c; }
.bkx .bkx-word-window { display: none; }
.bkx .bkx-word-tabs {
  display: flex;
  min-height: 25px;
  align-items: flex-end;
  gap: .9rem;
  padding: 0 .65rem;
  border-bottom: 1px solid #d8dee8;
  color: #3b4654;
  background: #fff;
  font-size: .69rem;
  white-space: nowrap;
}
.bkx .bkx-word-tabs span,
.bkx .bkx-word-tabs b { padding: .34rem 0 .27rem; font-weight: 500; }
.bkx .bkx-word-tabs b {
  border-bottom: 3px solid #1768e8;
  color: #075fcf;
  font-weight: 700;
}
.bkx .bkx-word-ribbon {
  display: grid;
  grid-template-columns: minmax(112px, 1.55fr) minmax(88px, 1.15fr) repeat(5, minmax(54px, .78fr));
  height: 36px;
  min-height: 36px;
  padding: 1px .45rem;
  border-bottom: 1px solid #d5dce6;
  background: #fbfcfe;
}
.bkx .bkx-word-tool {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  padding: 0 .2rem;
  border-right: 1px solid #e0e5ec;
  text-align: center;
}
.bkx .bkx-word-tool:last-child { border-right: 0; }
.bkx .bkx-word-tool i {
  color: #253142;
  font-size: .82rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}
.bkx .bkx-word-tool b {
  overflow: hidden;
  font-size: .5rem;
  font-weight: 600;
  line-height: 1.05;
  white-space: nowrap;
}
.bkx .bkx-word-tool.is-active {
  border-radius: 5px;
  color: #075fcf;
  background: #e2edff;
}
.bkx .bkx-word-tool.is-active i { color: #1768e8; }
.bkx .bkx-word-tool.is-comment i { color: #ff9700; }
.bkx .bkx-word-tool.is-accept i { color: #009d58; }
.bkx .bkx-word-tool.is-reject i { color: #ef233c; }

.bkx .bkx-doc.is-after .bkx-file { color: #435064; background: #edf1f6; }
.bkx .bkx-doc.is-after .bkx-sheet {
  position: relative;
  padding: 1rem 1.1rem;
  background: #fff;
}
.bkx .bkx-doc.is-after .bkx-sheet > p {
  margin: 0 0 .85rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.bkx .bkx-doc.is-after .bkx-sheet > p:last-of-type { margin-bottom: 0; }
.bkx .bkx-doc.is-after .bkx-sheet.is-split {
  grid-template-columns: minmax(0, 1fr) 200px;
  column-gap: .75rem;
}
.bkx .bkx-doc.is-after .bkx-sheet.is-split > p { align-self: stretch; }
.bkx .bkx-cmt-cell { gap: .5rem; padding-left: 0; border-left: 0; }
.bkx .bkx-cmt {
  border: 1px solid #d9dee7;
  border-left: 4px solid #ef233c;
  border-radius: 7px;
  color: #333b47;
  background: #fff;
  box-shadow: 0 3px 10px rgba(35, 49, 67, .12);
}
.bkx .bkx-cmt .bkx-cmt-h { color: #303744; }
.bkx .bkx-pin,
.bkx .bkx-cmt .bkx-pin { background: #ef233c; }

.bkx del {
  color: #d0101b;
  background: transparent;
  text-decoration-color: #d0101b;
  text-decoration-line: line-through;
  text-decoration-thickness: 2px;
}
.bkx ins {
  color: #007a4f;
  background: transparent;
  text-decoration-color: #007a4f;
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .12em;
}
.bkx .bkx-comment-mark {
  background: #ffef8a;
  box-shadow: 0 0 0 .12em #ffef8a;
}
.bkx .bkx-change-bars {
  position: absolute;
  inset: 0 auto 0 0;
  width: .55rem;
  pointer-events: none;
}
.bkx .bkx-change-bar {
  position: absolute;
  left: .28rem;
  width: 2px;
  border-radius: 2px;
  background: #ef233c;
}
.bkx .bkx-legend mark { color: inherit; background: #ffef8a; }

@media (max-width: 900px) {
  .bkx .bkx-doc.is-after .bkx-sheet.is-split { grid-template-columns: 1fr; }
  .bkx .bkx-cmt-cell {
    grid-column: 1;
    padding-left: .7rem;
    border-left: 3px solid #ef233c;
  }
}
@media (max-width: 760px) {
  .bkx .bkx-cap { min-height: 0; }
}
@media (max-width: 520px) {
  .bkx .bkx-wordbar { overflow-x: auto; }
  .bkx .bkx-word-titlebar,
  .bkx .bkx-word-tabs,
  .bkx .bkx-word-ribbon { min-width: 590px; }
}