/* Approved three-step composition, using the site's locally hosted Roboto. */
#einblick {
  --bsr-paper: var(--paper);
  --bsr-ink: var(--ink);
  --bsr-gap: clamp(24px, 3.6vw, 50px);
}
#einblick .bsr-process {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bsr-gap);
  padding-top: 65px;
}
#einblick .bsr-step { min-width: 0; }
#einblick .bsr-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 220 / 190;
  container-type: inline-size;
  margin-bottom: 30px;
}
#einblick .bsr-step:not(:last-child) .bsr-stage::after {
  content: '';
  position: absolute;
  top: 48%;
  left: 91%;
  width: calc(9% + var(--bsr-gap));
  height: 1px;
  background: #f3f3ef80;
}
#einblick .bsr-step:not(:last-child) .bsr-stage::before {
  content: '';
  position: absolute;
  top: calc(48% - 3px);
  right: calc(3px - var(--bsr-gap));
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--bsr-paper);
  border-top: 1px solid var(--bsr-paper);
  transform: rotate(45deg);
}
#einblick .bsr-interface {
  position: absolute;
  background: var(--bsr-paper);
  color: var(--bsr-ink);
  border: 1px solid #0a1c2910;
  box-shadow: 7px 10px 0 #901c1926;
}
#einblick .bsr-collection { top: 4.7%; left: 1%; width: 86%; height: 81.6%; transform: rotate(-6deg); padding: 5.9cqw 5.4cqw; z-index: 2; }
#einblick .bsr-sheet-back { position: absolute; background: #f3f3ef45; width: 84%; height: 81.6%; top: 7.9%; left: 7.3%; transform: rotate(3deg); }
#einblick .bsr-interface-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-bottom: 4.5cqw; border-bottom: 1px solid #0a1c2924; font-size: max(12px, 4.1cqw); letter-spacing: .045em; font-weight: 600; line-height: 1.3; }
#einblick .bsr-doc-row { padding: 4.5cqw 0; border-bottom: 1px solid #0a1c2916; display: grid; grid-template-columns: 7.3cqw 1fr; align-items: center; gap: 3.2cqw; font-size: max(14px, 5cqw); line-height: 1.1; font-weight: 600; }
#einblick .bsr-doc-icon { display: block; width: 5.9cqw; height: 7.7cqw; border: 1px solid #0a1c2960; position: relative; }
#einblick .bsr-doc-icon::before { content: ''; width: 3.2cqw; height: 1px; background: #0a1c2960; position: absolute; top: 2.3cqw; left: .9cqw; box-shadow: 0 1.4cqw 0 #0a1c2960, 0 2.8cqw 0 #0a1c2960; }
#einblick .bsr-doc-row:last-child { border: 0; }
#einblick .bsr-electro { color: var(--red); }
#einblick .bsr-caption-tag { position: absolute; z-index: 3; right: 1%; bottom: 1px; padding: 3.6cqw 5cqw; transform: rotate(-4deg); background: var(--bsr-ink); color: var(--bsr-paper); font-size: max(12px, 4.5cqw); line-height: 1.2; font-weight: 800; letter-spacing: .035em; }
#einblick .bsr-lv { top: 1%; left: 2%; width: 91%; height: 90%; padding: 5.9cqw 5.4cqw; transform: rotate(2deg); z-index: 2; }
#einblick .bsr-lv-header { padding: 5cqw 0 3.6cqw; font-size: max(14px, 5.5cqw); line-height: 1.2; font-weight: 800; }
#einblick .bsr-lv-lines { display: grid; gap: 2.7cqw; margin: .9cqw 0 4.1cqw; }
#einblick .bsr-lv-lines span { display: block; height: 1.4cqw; background: #0a1c2926; width: 94%; }
#einblick .bsr-lv-lines span:nth-child(2) { width: 73%; }
#einblick .bsr-highlight { margin: 0 -9cqw; padding: 4.1cqw 3.6cqw; background: var(--bsr-ink); color: var(--bsr-paper); transform: rotate(-2deg); box-shadow: 0 5px 14px #0a1c291f; display: flex; align-items: center; justify-content: space-between; gap: 5px; font-size: max(13px, 4.5cqw); font-weight: 800; line-height: 1.2; }
#einblick .bsr-highlight strong { font-size: max(18px, 6.8cqw); font-weight: 800; white-space: nowrap; }
#einblick .bsr-lv-bottom { display: flex; justify-content: space-between; gap: 3px; padding-top: 4.5cqw; font-size: max(12px, 4.1cqw); line-height: 1.2; color: #42505a; }
#einblick .bsr-result { width: 94%; top: 3.2%; left: 3%; min-height: 87.4%; padding: 5.9cqw 5.4cqw; background: var(--bsr-ink); color: var(--bsr-paper); transform: rotate(-3deg); z-index: 2; }
#einblick .bsr-result .bsr-interface-top { border-color: #f3f3ef40; }
#einblick .bsr-filters { display: flex; flex-wrap: wrap; gap: 4px; padding: 5cqw 0 4.5cqw; }
#einblick .bsr-filter { font-size: max(12px, 4.1cqw); font-weight: 500; border: 1px solid #f3f3ef50; padding: 1.8cqw 2.3cqw; line-height: 1.15; }
#einblick .bsr-result-title { font-weight: 800; font-size: max(16px, 5.9cqw); line-height: 1.16; margin-bottom: 3.6cqw; }
#einblick .bsr-match { padding-top: 3.6cqw; border-top: 1px solid #f3f3ef40; display: flex; justify-content: space-between; align-items: baseline; gap: 4px; font-size: max(12px, 4.1cqw); line-height: 1.2; }
#einblick .bsr-match strong { font-size: max(16px, 5.5cqw); font-weight: 800; white-space: nowrap; }
#einblick .bsr-result-tag { background: var(--bsr-paper); color: var(--bsr-ink); }
#einblick .bsr-step-label { display: flex; gap: 7px; align-items: baseline; padding-bottom: 18px; border-bottom: 1px solid #f3f3ef55; margin-bottom: 18px; font-size: 12px; font-weight: 600; letter-spacing: .055em; line-height: 1.4; }
#einblick .bsr-step-label b { font-style: italic; font-size: 32px; line-height: 1; font-weight: 800; letter-spacing: -.05em; margin-right: 3px; }
#einblick .bsr-copy h3 { font-size: 27px; font-weight: 800; line-height: 1.13; letter-spacing: -.035em; margin: 0 0 16px; color: var(--bsr-paper); }
#einblick .bsr-copy p { font-size: 16px; font-weight: 400; line-height: 1.6; margin: 0; max-width: 340px; color: #fff0ed; }
@media (max-width: 1050px) {
  #einblick .bsr-process { grid-template-columns: 1fr; gap: 48px; }
  #einblick .bsr-step { display: grid; grid-template-columns: minmax(240px, .9fr) 1.4fr; gap: 40px; align-items: center; }
  #einblick .bsr-stage { max-width: 320px; aspect-ratio: 220 / 205; margin: 0 auto; }
  #einblick .bsr-step:not(:last-child) .bsr-stage::after { top: 97%; left: 46%; width: 1px; height: 43px; }
  #einblick .bsr-step:not(:last-child) .bsr-stage::before { top: calc(97% + 37px); right: auto; left: calc(46% - 3px); transform: rotate(135deg); }
  #einblick .bsr-copy p { max-width: none; }
}
@media (max-width: 650px) {
  #einblick .bsr-process { padding-top: 42px; gap: 44px; }
  #einblick .bsr-step { display: block; }
  #einblick .bsr-stage { width: min(100%, 310px); margin: 0 auto 30px; }
  #einblick .bsr-step:not(:last-child) .bsr-stage::after,
  #einblick .bsr-step:not(:last-child) .bsr-stage::before { display: none; }
  #einblick .bsr-step-label { margin-bottom: 15px; padding-bottom: 15px; }
  #einblick .bsr-copy h3 { font-size: 25px; }
}