@font-face {
  font-family: 'Josefin Sans';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/josefinsans/v34/Qw3JZQNVED7rKGKxtqIqX5EUCGZ2dIn0FyA96fCTtINhKg.ttf) format('truetype');
}
@font-face {
  font-family: 'Josefin Sans';
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/josefinsans/v34/Qw3JZQNVED7rKGKxtqIqX5EUCGZ2dIn0FyA96fCTNIJhKg.ttf) format('truetype');
}
@font-face {
  font-family: 'Josefin Sans';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/josefinsans/v34/Qw3JZQNVED7rKGKxtqIqX5EUCGZ2dIn0FyA96fCT6oJhKg.ttf) format('truetype');
}
@font-face {
  font-family: 'Josefin Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/josefinsans/v34/Qw3JZQNVED7rKGKxtqIqX5EUCGZ2dIn0FyA96fCTtIJhKg.ttf) format('truetype');
}
@font-face {
  font-family: 'Josefin Sans';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/josefinsans/v34/Qw3JZQNVED7rKGKxtqIqX5EUCGZ2dIn0FyA96fCThoJhKg.ttf) format('truetype');
}
@font-face {
  font-family: 'Josefin Sans';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/josefinsans/v34/Qw3JZQNVED7rKGKxtqIqX5EUCGZ2dIn0FyA96fCTaoVhKg.ttf) format('truetype');
}
@font-face {
  font-family: 'Josefin Sans';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/josefinsans/v34/Qw3JZQNVED7rKGKxtqIqX5EUCGZ2dIn0FyA96fCTU4VhKg.ttf) format('truetype');
}
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/josefinsans/v34/Qw3PZQNVED7rKGKxtqIqX5E-AVSJrOCfjY46_DjRXME.ttf) format('truetype');
}
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/josefinsans/v34/Qw3PZQNVED7rKGKxtqIqX5E-AVSJrOCfjY46_LjQXME.ttf) format('truetype');
}
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/josefinsans/v34/Qw3PZQNVED7rKGKxtqIqX5E-AVSJrOCfjY46_GbQXME.ttf) format('truetype');
}
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/josefinsans/v34/Qw3PZQNVED7rKGKxtqIqX5E-AVSJrOCfjY46_DjQXME.ttf) format('truetype');
}
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/josefinsans/v34/Qw3PZQNVED7rKGKxtqIqX5E-AVSJrOCfjY46_ArQXME.ttf) format('truetype');
}
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/josefinsans/v34/Qw3PZQNVED7rKGKxtqIqX5E-AVSJrOCfjY46_ObXXME.ttf) format('truetype');
}
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/josefinsans/v34/Qw3PZQNVED7rKGKxtqIqX5E-AVSJrOCfjY46_N_XXME.ttf) format('truetype');
}
:root {
  --gelb: #ffd674;
  --blau: #172034;
  --kartenrand-odd: black;
  --kartenrand-even: #d1b167;
}
body {
  padding-top: 5px;
  background: radial-gradient(ellipse at 35% 25%, #2a3a57, #1f2d45 40%, #172034 80%);
  min-height: 100vh;
}
main {
  background-color: white;
}
.vorschauwrapper {
  width: 50%;
}
.cardbg {
  max-width: 100%;
  height: 100cqh;
}
.carddisplay {
  position: relative;
  container-type: size;
  max-height: fit-content;
  user-select: none;
  /* Standard */
}
.carddisplay .cardhead {
  position: absolute;
  top: 19%;
  left: 15%;
  right: 15%;
  height: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--gelb);
  font-size: 7cqw;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 300;
}
.carddisplay .cardtextwrapper {
  position: absolute;
  top: 40%;
  left: 15%;
  right: 15%;
  height: 48%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  align-content: flex-start;
  color: var(--gelb);
  font-size: 6cqw;
  font-family: "Josefin Sans", sans-serif;
  padding: 10px 5px 0 5px;
}
.publiccardwrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  height: 100vh;
  margin-top: 10px;
}
.publiccardwrapper .carddisplay {
  height: 85vh;
  aspect-ratio: 225 / 400;
}
.vorschauwrapper .carddisplay {
  aspect-ratio: 225 / 400;
}
.drawwrapper {
  position: absolute;
  top: 52.7%;
  right: 3.8%;
  width: 9%;
  aspect-ratio: 16/30;
  background-image: url("/images/right-01.svg");
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
  display: flex;
  justify-content: center;
  transition: all 0.2s ease;
  transform-origin: left center;
  animation: drawMove 6s ease-in-out infinite;
}
.drawwrapper button {
  background-color: transparent;
  border: none;
  padding-top: 2cqw;
  padding-right: 4cqw;
  font-size: 6cqw;
  font-family: "Josefin Sans", sans-serif;
}
.drawwrapper:hover {
  transform: scale(1.35);
}
@keyframes drawMove {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: scale(1.35);
  }
  100% {
    transform: translateX(0);
  }
}
.returnwrapper {
  position: absolute;
  top: 52.39%;
  left: 3.8%;
  width: 9%;
  aspect-ratio: 15/30;
  background-image: url("/images/left-01.svg");
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
  display: flex;
  justify-content: center;
  transition: all 0.2s ease;
  transform-origin: right center;
}
.returnwrapper button {
  cursor: pointer;
  background-color: transparent;
  border: none;
  padding-top: 1cqw;
  padding-left: 4cqw;
  font-size: 6cqw;
  font-family: "Josefin Sans", sans-serif;
}
.returnwrapper:hover {
  transform: scale(1.35);
}
.resetwrapper {
  position: absolute;
  bottom: 4.2%;
  left: 40%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  transform-origin: right center;
}
.resetwrapper:before {
  content: "";
  width: 3cqw;
  aspect-ratio: 15/30;
  background-image: url("/images/reset-01.svg");
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  transition: all 0.2s ease;
}
.resetwrapper button {
  background-color: transparent;
  border: none;
  font-size: 4cqw;
  font-family: "Josefin Sans", sans-serif;
  transform: translateY(0.7cqw);
  color: var(--gelb);
  transition: all 0.2s ease;
}
.resetwrapper:hover:before {
  transform: scale(1.35);
}
.resetwrapper:hover button {
  transform: scale(1.05);
}
.resetwrapper.final {
  bottom: 30%;
}
.maindrawwrapper {
  position: absolute;
  width: 100%;
  top: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.maindrawwrapper .dwkreis {
  background-image: url("/images/joinbg-01.svg");
  width: 30%;
  aspect-ratio: 1;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.maindrawwrapper .dwpfeil {
  background-image: url("/images/joinpfeil-01.svg");
  width: 15%;
  aspect-ratio: 20/37;
  background-size: cover;
  transition: all 0.3s ease;
}
.maindrawwrapper .dwtext {
  font-size: 7cqw;
  font-family: "Josefin Sans", sans-serif;
  color: var(--gelb) !important;
  transition: all 0.3s ease;
}
.maindrawwrapper .dwpfeil {
  animation: arrowMove 2s ease-in-out infinite;
}
.maindrawwrapper .dwkreis {
  animation: circleScale 2s ease-in-out infinite;
}
.maindrawwrapper .dwtext {
  animation: textScale 2s ease-in-out infinite;
}
.maindrawwrapper:hover .dwpfeil,
.xmaindrawwrapper:focus .dwpfeil {
  transform: translateX(2cqw);
  animation: none;
}
.maindrawwrapper:hover .dwkreis,
.xmaindrawwrapper:focus .dwkreis {
  transform: scale(1.05);
  animation: none;
}
.maindrawwrapper:hover .dwtext,
.xmaindrawwrapper:focus .dwtext {
  transform: scale(1.02);
  animation: none;
}
@keyframes arrowMove {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(2cqw);
  }
  100% {
    transform: translateX(0);
  }
}
/* Kreis leicht skalieren */
@keyframes circleScale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
/* Text leicht skalieren */
@keyframes textScale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}
.dwgameid {
  position: absolute;
  width: 100%;
  top: 76.5%;
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  font-size: 4.1cqw;
  font-family: "Josefin Sans", sans-serif;
  color: var(--gelb) !important;
}
.dwgameid.small {
  font-size: 4cqw;
  top: 88%;
}
.dwgameid .GameIdText {
  margin-left: 3px;
}
.dwjoinresult {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  top: 15cqw;
}
.dwnewwrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  padding-bottom: 5cqw;
  font-size: 6cqw;
  font-family: "Josefin Sans", sans-serif;
}
.dwfinalwrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  padding-top: 25cqw;
  font-size: 6cqw;
  font-family: "Josefin Sans", sans-serif;
}
.dwjoinwrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  font-size: 6cqw;
  font-family: "Josefin Sans", sans-serif;
}
.dwjoinwrapper input {
  text-align: center;
  width: 10ch;
  letter-spacing: 0.5ch;
  background-color: transparent;
  border: 1px solid var(--gelb);
  border-radius: 1cqw;
  color: var(--gelb);
}
.dwjoinwrapper input:focus {
  border: 1px solid white !important;
  outline: none;
}
.dwstandardbutton {
  border-radius: 1cqw;
  color: var(--gelb);
  border: 1px solid var(--gelb);
  background-color: transparent;
  margin-top: 2cqw;
  transition: all 0.5s ease;
  padding-left: 4cqw;
  padding-right: 4cqw;
}
.dwstandardbutton:hover {
  color: var(--blau);
  background-color: var(--gelb);
}
.show-card-False {
  display: none;
}
.cardeffectwrapper {
  position: relative;
}
.dwlastcard {
  position: absolute;
}
.dwlastcard .carddisplay {
  max-width: 100vw;
}
.dwlanguagewrapper {
  position: absolute;
  bottom: 26%;
  width: 100%;
}
.dwlanguagewrapper .dwlangde {
  position: absolute;
  left: 12%;
}
.dwlanguagewrapper .dwlangen {
  position: absolute;
  top: 0;
  right: 14%;
}
.dwlanguagewrapperdeck {
  position: absolute;
  bottom: 25%;
  width: 100%;
}
.dwlanguagewrapperdeck .dwlangde {
  position: absolute;
  left: 25%;
}
.dwlanguagewrapperdeck .dwlangen {
  position: absolute;
  top: 0;
  right: 24%;
}
.dwlangbutton {
  color: var(--gelb);
  border: none;
  background-color: transparent;
  margin-top: 2cqw;
  transition: all 0.3s ease;
  padding-left: 3cqw;
  padding-right: 3cqw;
  font-size: 4cqw;
}
.dwlangbutton:hover {
  transform-origin: center center;
  transform: scale(1.25);
}
@keyframes slideOut {
  from {
    transform: translateX(0);
    transform-origin: center center;
  }
  to {
    transform: translateX(-120%) rotate(15deg);
  }
}
@keyframes slideIn {
  from {
    transform: translateX(-100%) rotate(-15deg);
    transform-origin: center center;
  }
  to {
    transform: translateX(0) rotate(0deg);
  }
}
.do-animation-Forward {
  animation: slideOut 0.6s ease-out forwards;
}
.do-animation-Back {
  animation: slideIn 0.6s ease-out forwards;
}