/**
 * Start page (P5.2): schwarz.htm in the allesre frame.
 *
 * Two Dreamweaver layers. Layer 1 is a 3×3 table of 60 px cells with
 * 5 px padding (70 px boxes): a #666 square and a #333 bar. Layer 2
 * puts Geneva 18 px bold #999999 on top of the bar. Absolute left is
 * from the frame viewport (it ignores marginwidth 30). Sizes and
 * offsets measured on docs/reference/schwarz.png (1024×768).
 */

.start {
  position: relative;
  min-height: 100%;
  margin-left: calc(-1 * var(--content-margin));
  margin-right: calc(-1 * var(--content-margin));
  overflow: hidden;
}

.start-fit {
  position: relative;
  width: 100%;
  max-width: 450px;
  height: 360px;
}

.start-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 450px;
  height: 360px;
}

.start-square {
  position: absolute;
  left: 143px;
  top: 206px;
  width: 70px;
  height: 62px;
  background: var(--color-gray-66);
}

.start-bar {
  position: absolute;
  left: 213px;
  top: 146px;
  width: 70px;
  height: 182px;
  background: var(--color-gray-33);
}

.start-title {
  position: absolute;
  left: 224px;
  top: 232px;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-4);
  font-weight: bold;
  color: var(--color-text-home);
  line-height: normal;
}

.start-name,
.start-tag {
  display: block;
}

.start-tag {
  margin-top: 1em;
}

@media (max-width: 767px) {
  .start {
    min-height: 0;
  }
}

@media (max-width: 449px) {
  .start-fit {
    height: calc(100vw * 360 / 450);
  }

  .start-stage {
    transform: scale(calc(100vw / 450px));
    transform-origin: top left;
  }
}