@media (min-aspect-ratio: 5/9) {
  #content {
    width: calc(100 * var(--vw));
    height: 100vh;
    left: calc((100vw - 100 * var(--vw)) / 2);
  }
  :root {
    --vw: calc(1vh * 5 / 9);
  }
}
#board {
  top: calc(5 * var(--vw));
}
.kom #board2 {
  background-image: url("kom/bg slice.jpg");
  border-radius: 0;
  box-shadow: 0vmin 2vmin 2vmin black;
}
.kom .field div, .kom .mill {
  background: black;
}
.kom .piece div {
  width: 100%;
  height: 100%;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.kom .piece[pos^='off'] div:before {
  content: "x";
  font-size: 7vmin;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.kom .black.piece[pos^='off'] div:before {
  color: white;
}
.kom .piece[pos='off0'] div:before {
  content: "1";
}
.kom .piece[pos='off1'] div:before {
  content: "2";
}
.kom .piece[pos='off2'] div:before {
  content: "3";
}
.kom .piece[pos='off3'] div:before {
  content: "4";
}
.kom .piece[pos='off4'] div:before {
  content: "5";
}
.kom .piece[pos='off5'] div:before {
  content: "6";
}
.kom .piece[pos='off6'] div:before {
  content: "7";
}
.kom .piece[pos='off7'] div:before {
  content: "8";
}
.kom .piece[pos='off8'] div:before {
  content: "9";
}
.kom .piece[pos='off9'] div:before {
  content: "10";
}
.kom .piece[pos='off10'] div:before {
  content: "11";
}
.kom .piece[pos='off11'] div:before {
  content: "12";
}
.black.piece div {
  background-image: url(kom/Black-Coin.png);
}
.white.piece div {
  background-image: url(kom/White-Coin.png);
}
.wts  {
  background-image: url(kom/Black-Coins.png);
}
.whites.piece div {
  background-image: url(kom/White-Coins.png);
}
.variantspringer .black.piece div, .kom .variantspringer2 .black.piece div {
  background-image: url(kom/09.png);
  background-size: 75%;
}

.variantspringer .white.piece div, .kom .variantspringer2 .white.piece div {
  background-image: url(kom/10.png);
  background-size: 75%;
}
.variantspringer .dummy.piece div {
  background-image: none !important;
}
.variantspringer2 .dummy.black.piece div {
  background: none;
  background-image: url(kom/hellrot_150x150.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  border-radius: 0;
  width: 100%;
  height: 100%;

}
.variantspringer2 .dummy.white.piece div {
  background: none;
  background-image: url(kom/grün_150x150.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  border-radius: 0;
  width: 100%;
  height: 100%;
}
.kom .piece.taken {
  opacity: 0;
}
.kom :not(.selected)[pos^='off'] {
}
.kom .selected {
  z-index: 3;
}
.kom .selected[pos^='off'] {
  z-index: 3;
}
.kom .dummy.piece div {
  background-image: none;
  width: 70%;
  height: 70%;
}
.kom .mill {
  height: calc(5% / var(--max-coord));
}
.kom #board .white.piece[pos^='off'], .kom #board.switch .black.piece[pos^='off'] {
  transform: translate(calc(13 * var(--vw)), calc((95 * var(--ystretch) + 10) * var(--vw))) translate(-50%, -50%);
}
.kom #board .black.piece[pos^='off'], .kom #board.switch .white.piece[pos^='off'] {
  transform: translate(calc(87 * var(--vw)), calc((95 * var(--ystretch) + 10) * var(--vw))) translate(-50%, -50%);
}
.white.piece:not(.selected)[pos^='off'] div {
  
  transform: translate(-50%, -50%) scale(1.2, 1.2);
}
.black.piece:not(.selected)[pos^='off'] div {
  transform: translate(-50%, -50%) scale(1.2, 1.2);
}

.white.piece.selected div {
  transform: translate(-50%, -50%) scale(1.2, 1.2);
}
.black.selected div {
  transform: translate(-50%, -50%) scale(1.2, 1.2);
}
.kom .cup, .kom .lid {
  display: none;
}
#screen.kom {
  background: #005b2a;
}
.kom #close {
  background-image: url(kom/Menu-Icon.png);
  left: 0%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  top: -28%;
  height: 10%;
}
.kom #close {
  display: none;
}
.kom .navigation {
  transform: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  top: 152%;
  height: 10%;
  width: 10%;
}
.kom .navigation svg {
  display: none;
}
.kom #togglegamemenu, .kom #togglechatmenu {
  display: none;
}
.kom #gamemenu {
  width: 60%;
  top: 152%;
  left: 20%;
}
.kom #gamemenu div {
  height: 95%;
  width: 0%;
  background: none;
  background-size: contain;
  background-repeat: no-repeat;
  display: none;
}
.kom #gamemenu .rematch {
  display: block;
  width: 20%;
  left: 15%;
  background-image: url(kom/Repitition-Icon.png);
}
.kom .variantspringer #gamemenu .rematch, .kom .variantspringer2 #gamemenu .rematch {
  left: 40%;
}
.kom #gamemenu .togglehints {
  display: block;
  width: 20%;
  left: 70%;
  background-image: url(kom/Analysis.png);
}
.kom .variantspringer #gamemenu .togglehints, .kom .variantspringer2 #gamemenu .togglehints {
  display: none;
}
.kom #forward {
  background-image: url(kom/Forward-Icon.png);
  transform: none;
  left: 85%;
}
.kom #fastforward {
  display: none;
}
.kom #back {
  background-image: url(kom/Back-Icon.png);
  left: 5%;
}
.kom .navigation {

}
.kom .navigation div {
  display: none;
}
.kom .player .name, .kom .player .avatar, .kom .player .evaluationx, .kom .player .result, .kom .player .score, .kom .save {
  display: none;
}
.kom .player .evaluation {
  left: 50%;
  top: 32%;
  width: 80%;
  background: none;
  color: white;
  font-size: calc(5.5 * var(--vw));
  opacity: 1;
}
.kom .black.player .evaluation {
  top: 32%;
}
.kom .player .evaluation.hidden {
  display: none;
}
.kom #chatinput {
  display: none;
}
.kom .hint {
  opacity: 1;
  border-color: grey;
  background: grey;
}
.kom .hint div {
  color: white;
  display: block;
}
.kom .hint.arrow {
  height: 1%;
}
.kom .hint.arrow.best {
  height: 1%;
}
.kom .hint.target {
  background: none;
}
.kom .hint.target {
  border: solid;
  border-width: calc(1 * var(--vw));
  border-color: #4c4c4c;
}
.kom .hint.w {
  border-color: #00a54c;
}
.kom .hint.w.best {
  border-color: #005b2a;
}
.kom .hint.l {
  border-color: #8b0000;
}
.kom .hint.l.best {
  border-color: #ea0000;
}

.kom .hint.best {
  height: 7%;
  width: 7%;
}
.kom .hint.arrow {
  background: #4c4c4c;
}
.kom .hint.arrow.w {
  background: #00a54c;
}
.kom .hint.arrow.w.best {
  background: #005b2a;
}
.kom .hint.arrow.l {
  background: #8b0000;
}
.kom .hint.arrow.l.best {
  background: #ea0000;

}
.kom .hint.arrow:after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: calc(2 * var(--vw)) solid transparent;
  border-left-color: inherit;
  border-right: 0;
  margin-top: calc(-2 * var(--vw));
  margin-right: calc(-1 * var(--vw));
  text-align: center;
}
.kom #whitecomment, .kom #blackcomment {
}
#blackcomment, #board.switch #whitecomment {
  top: calc(100% * var(--ystretch));

}
.comment {
  background: none;
  color: white;
  font-size: calc(6 * var(--vw));
  left: 50%;
  transform: translate(-50%, 0);
}
.comment:after {
  content: '';
  position: absolute;
  left: 0;
  top: calc(8 * var(--vw));
  width: 0;
  height: 0;
  border: none;
  margin-top: calc(0 * var(--vw));
  margin-left: calc(0 * var(--vw));
  text-align: center;
}
#notification.active {
  display: none;
}
#player1, #board.switch #player2 {
  top: calc(100% * var(--ystretch) + 15%);
}
#player2, #board.switch #player1 {
  top: calc(100% * var(--ystretch) + 15%);
}
.computer, .variant {
  position: absolute;
  transform: translate(-30%, 0);
  top: calc(122 * var(--vw));
  font-size: calc(5 * var(--vw));
   left: 13%;
  color: white;
  width: 25%;
  margin: 1%;
  text-align: left;
  height: 20px;
}

.yellow {
  color: #e5c143;
}

.support {
  position: absolute;
  transform: translate(-50%, 0);
  top: calc(122 * var(--vw));
  font-size: calc(4.4 * var(--vw));
  left: 70%;
 
  color: white;
  width: 50%;
  margin: 1%;
  line-height: calc(6.7 * var(--vw));
  text-align: left;
  height: 20px;
}


.variant {
  display: none;
  top: calc(130 * var(--vw));
}
.variantspringer .variant, .variantspringer2 .variant {
  display: block;
}
.variant.springer {
  left: 25%;
}
.variant.springer2 {
  left: 70%;
}
.computer.medium {
    left: 13%;
  margin-top: 8%;

}

.textforum{
  color: white;
  left: 53.3%;
}

.computer.hard {
    left: 13%;
  margin-top: 15%;
}
.computer.local {
     left: 13%;
  margin-top: 22%;
}

.computer.active::before,
.variant.active::before {
  content: "►";
  color: #e5c143;
}



.computer.active, .variant.active {
  color: #e5c143;
}
.variantspringer .computer, .variantspringer2 .computer {
  display: none;
}
.variantspringer .computer.hard, .variantspringer2 .computer.hard {
  display: block;
  left: 25%;
}
.variantspringer .computer.local, .variantspringer2 .computer.local {
  display: block;
  left: 70%;
}
.version {
  position: absolute;
  bottom: calc(0 * var(--vm));
  z-index: 100;
}