@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap");
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css");
@import url("https://fonts.cdnfonts.com/css/lapsus-pro");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Figtree", sans-serif;
}
body {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  max-width: 1400px;
  background-color: #eef5f4;
}

a {
  color: inherit;
  display: inline-block;
}

img {
  pointer-events: none;
}

header img,
.nav-1,
.nav-2 {
  border-radius: 5px;
  background-color: #3c5a67;
}

header {
  display: flex;
  gap: 5px;
  height: 100px;
  color: #afdbee;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.logo {
  width: 100px;
  height: 100px;

  border-radius: 5px;
}

.logo-wrapper {
  transition-property: width;
  transition: transform 500ms ease-in-out;
}

.logo-wrapper a:hover,
.logo-wrapper:hover {
  transform: scale(1.05);
}

h1 {
  font-weight: 800;
  font-size: 60px;
  line-height: 45px;
}

h2 {
  font-size: 18px;
}

h3 {
  font-weight: lighter;
  font-style: italic;
  font-size: 13px;
}

h4 {
  font-family: "Lapsus Pro", sans-serif;
  font-size: 30px;
  letter-spacing: 4px;
  color: transparent;
  background: #cd7b08;
  background: linear-gradient(
    180deg,
    rgba(205, 123, 8, 1) 0%,
    rgba(255, 226, 0, 1) 84%
  );
  color: transparent;
  background-clip: text;
}

.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 5px;
}

.nav {
  padding: 8px 20px;
}

.process-title {
  display: flex;
  gap: 5px;
}

.process-title svg {
  margin-top: 1px;
}

.prompt-error,
.prompt-warning,
.prompt-info,
.prompt-success {
  border-radius: 5px;
  font-size: 13px;
  font-weight: 400;

  display: flex;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 8px;
  border: 1px solid rgb(212, 223, 221);
  border-left: 3px solid #476a79;
}

.prompt-error {
  color: #673c3c;
  background-color: rgb(221, 193, 193);
  font-size: 15px;
  display: none;
}

.prompt-warning {
  color: #797047;
  background-color: rgb(235, 232, 227);
}

.prompt-info {
  color: #476a79;
  background-color: rgb(227, 235, 233);
}

.prompt-success {
  color: #4b7947;
  background-color: rgb(230, 235, 227);
}

.prompt-error i,
.prompt-warning i,
.prompt-info i,
.prompt-success i {
  padding-top: 1px;
  padding-right: 15px;
}

.prompt a {
  padding-left: 5px;
}

.nav-1 {
  flex: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.online {
  display: flex;
}

.contact {
  float: right;
  display: flex;
  gap: 10px;
}

.contact a {
  text-decoration: none;
  color: #afdbee;
  display: flex;
  justify-content: center;
  gap: 3px;
}

.simillar-products,
.simillar-products2 {
  display: flex;
  flex-wrap: wrap;
}

.simillar-products2 {
  justify-content: center;
  gap: 8px;
  padding: 5px;
  border-radius: 4px;
  background-color: rgb(227, 235, 233);
  border: 1px solid rgb(212, 223, 221);
  margin-bottom: 15px;
}

.simillar-products {
  gap: 8px;
  margin-top: 15px;
}

.visit {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 60px 0 70px 0;
  flex-direction: column-reverse;
}

.visit h4 {
  color: #476a79;
  margin-top: -20px;
}

.visit img {
  width: 80px;
  height: auto;
}

.simillar-products a,
.simillar-products2 a {
  display: flex;
  text-decoration: none;
  background-color: rgb(227, 235, 233);
  align-items: center;
  border: 1px solid rgb(212, 223, 221);
  border-radius: 4px;
  padding: 2px 5px 2px 3px;
  gap: 3px;
  transition: transform 500ms ease;
  color: #476a79;
}

.simillar-products2 a:hover,
.simillar-products a:hover {
  transform: scale(1.05);
}
.simillar-products2 img,
.simillar-products img {
  height: 20px;
  border-radius: 4px;
}

.simillar-products2 a {
  padding: 8px;
  border-radius: 5px;
  background-color: #eef5f4;
}

.title {
  display: flex;
  align-items: center;
}

.mobile-contact {
  display: none;
}

.contact a:hover,
.contact span:hover,
.dropbtn:hover {
  color: #dde6e4;
}

.discord::after {
  content: "luca7128";
}

.mail::after {
  content: "koboldcontact@pm.me";
}

.message::after {
  content: "Ebay Chat";
}

.discord,
.mail,
.message {
  gap: 10px;
  font-size: 14px;
  color: #afdbee;
}

.nav-2 {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.time::after {
  content: "Montag bis Sonntag";
}

.going-online::before {
  content: "9:00";
}

.going-offline::before {
  content: "24:00 CET";
}

.dropbtn {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  font-weight: 600;
}

.dropbtn2 {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  font-weight: 600;
  margin-right: 15px;
}

.dropbtn2:hover {
  color: #dde6e4;
}

.bold {
  font-weight: 700;
}

.menu {
  float: left;
}

.main {
  padding: 50px;
  display: flex;
  gap: 40px;
  margin: 45px 0px 50px;
}

.main-picture {
  flex: 3;
  display: flex;
  justify-content: center;
  transition: transform 500ms ease;
}

.main-picture img {
  width: 100%;
  height: auto;
  border-radius: 15px;
}

.main-picture:hover {
  transform: scale(1.02);
}

.main-description {
  flex: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #476a79;
  gap: 20px;
}

.platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.platform {
  display: flex;
  align-items: center;
  font-weight: 700;
  gap: 5px;
}

.xbox {
  color: #477958;
}

.ps {
  color: #475479;
}

.pc {
  color: #476a79;
}

.delivery-time,
.delivery-method {
  color: #5d4779;
}

.contentGer,
.contentEng {
  --gap: 20px;
  display: flex;
  flex-wrap: wrap;
  color: #476a79;
  gap: var(--gap);
  text-align: left;
}

.contentGer a,
.contentEng a {
  border: 1px solid rgb(212, 223, 221);
  flex: 0 0 calc(50% - var(--gap) / 2);
  border-radius: 5px;
  padding: 10px;
  padding-left: 15px;
  background-color: rgb(227, 235, 233);
  border-left: 3px solid #476a79;
}

.process-title {
  margin-bottom: 5px;
}

.contentEng {
  display: none;
}
.contentGer {
  display: flex;
}

.process {
  text-align: right;
}

.english,
.german {
  color: #476a79;
  font-weight: 600;
}

#check {
  position: relative;
  width: 50px;
  margin-bottom: 12px;
}

#check::before {
  content: "";
  position: absolute;
  width: 35px;
  height: 16px;
  background-color: rgb(227, 235, 233);
  border-radius: 25px;
  box-sizing: border-box;
  border: 2px solid rgb(212, 223, 221);
}

#check:checked::before {
  background: #476a79;
}

#check::after {
  content: "";
  position: absolute;
  left: 0px;
  margin-top: -2px;
  width: 20px;
  height: 20px;
  background: #eef5f4;
  border-radius: 20px;
  transition: 0.25s;
  border: 2px solid #476a79;
  box-sizing: border-box;
}

#check:checked::after {
  left: 20px;
  border: 2px solid #476a79;
}

#check:checked ~ .contentEng {
  display: flex;
}

#check:checked ~ .contentGer {
  display: none;
}

.product:hover {
  transform: scale(1.05);
}

.product img {
  width: 100%;
  border-radius: 5px;
}

.other-products {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.product {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  transition-delay: 0.15s;
  transition-property: width;
  transition: transform 330ms ease-in-out;
  border-radius: 7px;
  overflow: hidden;
  max-height: 70px;
  border-bottom: 3px solid #476a79;
}

.product:hover {
  transform: scale(1.03);
}

.product h4 {
  position: absolute;
  font-size: 30px;
  letter-spacing: normal;
}

.visit-shop {
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  color: #476a79;
  gap: 4px;
  margin-right: 4px;
  margin-bottom: 3px;
  font-weight: 600;
}

.visit-shop div {
  display: flex;
  gap: 1px;
  transition-delay: 0.15s;

  transition: transform 330ms ease-in-out;
}

.visit-shop div:hover {
  transform: scale(1.05);
}

.process-step span {
  padding: 2px;
  margin-right: 4px;
  border-radius: 5px;
  background-color: #eef5f4;
  border: 1px solid rgb(212, 223, 221);
  font-weight: 600;
}

.details {
  line-height: 28px;
}

/* Footer */

footer {
  border-radius: 5px;
  background-color: #3c5a67;
  color: #afdbee;
  padding: 10px;

  display: flex;
  justify-content: center;
}

footer span {
  text-align: center;
}

.footer-text::after {
  content: "Bei diesem Angebot handelt es sich nicht um den Verkauf eines digitalen Produkts oder virtuellen Gegenstands im rechtlichen Sinne, sondern um eine Dienstleistung, die ich individuell für Sie erbringe. Sie zahlen ausschließlich die erbrachte Leistung und den Zeitaufwand. Es findet kein gewerblicher Verkauf von digitalen Gütern, Lizenzen oder urheberrechtlich geschützten Inhalten statt. Alle Rechte an Spielinhalten verbleiben bei den jeweiligen Rechteinhabern. Alle gennannten Markennamen sind eingetragene Warenzeichen bzw. Eigentum der jeweiligen Firmen. Sie dienen nur der Produktbeschreibung.";
}

.footer-text {
  font-size: 12px;
}

/* Copyright Text */

.copyright {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.copyright-text {
  color: #476a79;
  font-size: 10px;
    text-decoration: none;
}

.copyright-text::after {
  content: "Design by Koboldcoin (Copyright 2025). Keiner unserer Logos wurde mit AI erstellt, wir beauftragen echte Künstler.";
}

@media (max-width: 950px) {
  .main {
    margin: 40px 0px 30px;
    text-align: center;
  }

  .infos {
    align-items: center;
  }

  .simillar-products {
    justify-content: center;
    margin-top: 15px;
    margin-bottom: 45px;
  }

  h1 {
    /* Produkttitel */
    font-size: 45px;
  }

  .title {
    justify-content: center;
  }

  .main {
    flex-direction: column;
    padding: 30px;
  }

  .main-picture img {
    display: none;
  }

  .platforms {
    justify-content: center;
  }

  .process {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .process a {
    flex: 100%;
  }
}

@media (max-width: 650px) {
  header {
    height: auto;
    flex-direction: column;
  }

  .process {
    text-align: center;
  }

  .main {
    padding: 20px;
  }

  .logo {
    width: 75px;
    height: 75px;
  }

  footer {
    margin-top: 20px;
  }
  .container {
    flex-direction: column-reverse;
  }

  .nav-1 {
    gap: 10px;
    flex-direction: column-reverse;
  }

  .dropbtn {
    display: none;
  }

  .dropbtn2 {
    margin-right: 0px;
  }

  .dropbtn2:hover {
    color: #dde6e4;
  }

  .contact {
    display: none;
  }

  .product {
    width: 100%;
  }

  .menu {
    padding: 10px;
  }

  .time::after {
    content: "Mo. - So.";
  }

  .more-info {
    flex-direction: column;
    gap: 20px;
  }

  .mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .mobile-contact {
    display: flex;
    flex-direction: column;
    gap: 9px;
  }

  .mobile-contact a {
    text-decoration: none;
    color: #476a79;
    display: flex;
    justify-content: end;
    gap: 7px;
  }

  .mobile-contact span {
    color: #476a79;
    font-weight: 800;
  }

  .process-step {
    width: 100%;
  }

  .other-products {
    display: none;
  }
}