/* De två betalningsvägarna i presentationsscenen: dator med QR och mobil med direktlänk. */
#anmalan.berattelsescen {
  grid-template-columns: 1fr;
  gap: 2rem;
}
#anmalan .scenbeskrivning {
  order: 1;
  max-width: 52rem;
}
#anmalan .scenyta {
  order: 2;
  height: 36rem;
}
.betalningsspar {
  position: absolute;
  inset: .8rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
}
.betalkedja {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: .7rem;
  border: 1px solid rgb(54 31 21 / .14);
  border-radius: .9rem;
  background: rgb(255 255 255 / .58);
}
.sparrubrik {
  display: flex;
  gap: .4rem;
  align-items: center;
  min-height: 1.7rem;
  margin: 0 0 .55rem;
  font: 900 .62rem var(--hs-ui);
}
.sparrubrik span {
  padding: .25rem .4rem;
  border-radius: 999px;
  color: #fff;
  background: var(--hs-bla);
  font-size: .52rem;
  letter-spacing: .08em;
}
.demowebblasare {
  position: relative;
  width: 75%;
  height: 19rem;
  overflow: hidden;
  border: 1px solid #b8b7ad;
  border-radius: .55rem;
  background: #fff;
  box-shadow: 0 .7rem 1.5rem rgb(54 31 21 / .14);
}
.datorformular,
.datorkvitto {
  position: absolute;
  inset: 1.8rem 0 0;
  padding: .65rem;
  background: #fff;
  font: 500 .58rem/1.3 var(--hs-ui);
}
.datorformular h3,
.datorkvitto h3 { margin: .05rem 0 .3rem; font-size: .95rem; }
.datorformular h4 { margin: .55rem 0 .3rem; font-size: .68rem; }
.demofakta { margin: 0; padding: .35rem; border-left: .18rem solid var(--hs-bla); background: #f7f6f1; }
.demofalt { display: block; margin-top: .3rem; font-weight: 900; }
.demofalt i {
  display: block;
  margin-top: .1rem;
  padding: .27rem .35rem;
  border: 1px solid #ccc7bc;
  border-radius: .18rem;
  color: #57534d;
  font-style: normal;
  font-weight: 500;
}
.demoknapp {
  display: block;
  margin-top: .45rem;
  padding: .38rem;
  border-radius: .2rem;
  color: #fff;
  background: var(--hs-bla);
  text-align: center;
  font-weight: 900;
}
.datorkvitto { z-index: 2; text-align: center; opacity: 0; }
.datorkvitto p { margin: .25rem 0; }
.datorkvitto img { display: block; width: 5.4rem; height: 5.4rem; margin: .35rem auto .15rem; }
.datorkvitto small { display: block; color: #57534d; }

.skannertelefon {
  position: absolute;
  z-index: 4;
  right: .7rem;
  bottom: .7rem;
  width: 7.5rem;
  height: 13.5rem;
  overflow: hidden;
  padding: .3rem;
  border-radius: 1rem;
  background: #211d1b;
  box-shadow: 0 .8rem 1.5rem rgb(54 31 21 / .3);
  opacity: 0;
  transform: translateY(2rem) rotate(5deg);
}
.skannervy,
.spar-swishvy {
  position: absolute;
  inset: .3rem;
  overflow: hidden;
  border-radius: .72rem;
  background: #fff;
  text-align: center;
  font: 500 .56rem/1.25 var(--hs-ui);
}
.skannervy { padding: 1.35rem .55rem .5rem; }
.skannervy > img { width: 1.7rem; height: 1.7rem; object-fit: contain; }
.skannervy p { margin: .25rem 0 .45rem; font-weight: 900; }
.skannerram {
  position: relative;
  display: block;
  width: 5rem;
  height: 5rem;
  overflow: hidden;
  margin: auto;
  border: .18rem solid var(--hs-bla);
  border-radius: .35rem;
  background: repeating-conic-gradient(#342b27 0 25%, #fff 0 50%) 50% / .55rem .55rem;
}
.skannerram i {
  position: absolute;
  inset: 0 0 auto;
  height: .12rem;
  background: var(--hs-rod);
  box-shadow: 0 0 .35rem var(--hs-rod);
}
.spar-swishvy {
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.35rem .45rem .45rem;
  opacity: 0;
}
.spar-swishvy > img { width: 1.7rem; height: 1.7rem; object-fit: contain; margin-bottom: .3rem; }
.spar-swishvy small { color: var(--hs-rod); font-size: .4rem; font-weight: 900; letter-spacing: .05em; }
.spar-swishvy strong { margin: .4rem 0; font-size: 1rem; }
.spar-swishvy span { min-height: 2.2rem; }
.spar-swishvy b {
  width: 100%;
  margin-top: auto;
  padding: .4rem;
  border-radius: .22rem;
  color: #fff;
  background: var(--hs-bla);
}

.mobiltelefon {
  position: relative;
  width: min(13rem, 100%);
  height: 28rem;
  margin: 0 auto;
  opacity: 1;
  transform: rotate(1.5deg);
}
.mobil-formvy,
.mobilkvitto {
  position: absolute;
  inset: 0;
  padding: 2.15rem .75rem .6rem;
  color: var(--hs-brun);
  background: #f7f6f1;
  text-align: left;
}
.mobiltelefon .telefonstatus { color: var(--hs-brun); }
.mobiltelefon .mobilavsandare img { width: 6.4rem; }
.mobiltelefon .mobilanmalan { padding-top: .45rem; }
.mobiltelefon .mobilanmalan h3 { font-size: 1rem; }
.mobiltelefon .mobilanmalan h4 { margin: .45rem 0 .25rem; }
.mobiltelefon .mobilfalt { margin-top: .3rem; }
.mobiltelefon .mobilfalt i { padding: .3rem .35rem; }
.mobiltelefon .mobilskicka { margin-top: .45rem; padding: .4rem; }
.mobilkvitto { z-index: 2; padding-top: 3rem; background: #fff; opacity: 0; }
.mobilkvitto h3 { margin: .1rem 0 .7rem; font-size: 1.05rem; }
.mobilkvitto p { margin: .45rem 0; }
.mobil-swishknapp {
  position: relative;
  display: flex;
  gap: .3rem;
  justify-content: center;
  align-items: center;
  margin-top: .8rem;
  padding: .55rem;
  border-radius: .3rem;
  color: #fff;
  background: var(--hs-bla);
  font-weight: 900;
}
.mobil-swishknapp > img { width: 1.1rem; height: 1.1rem; object-fit: contain; }
.mobil-swishknapp .handmarkor {
  top: calc(50% - 1.15rem);
  right: auto;
  left: calc(50% - 1.15rem);
}
.mobiltelefon > .telefonskarm > .spar-swishvy {
  inset: 0;
  border-radius: 1.58rem;
  padding: 3.2rem .9rem .8rem;
  font-size: .62rem;
}
.mobiltelefon .spar-swishvy > img { width: 3rem; height: 3rem; }
.mobiltelefon .spar-swishvy strong { font-size: 1.55rem; }
.mobiltelefon .spar-swishvy b { padding: .65rem; font-size: .7rem; }

.spelar .datorformular,
.spelar .mobil-formvy { animation: betalsteg-ut .2s 1.3s both; }
.spelar .datorkvitto,
.spelar .mobilkvitto { animation: betalsteg-in .2s 1.3s both; }
.spelar .skannertelefon { animation: skanner-in .45s 2.4s both; }
.spelar .skannerram i { animation: skanna 1.35s 3s both; }
.spelar .mobil-swishknapp { animation: puls .7s 3.15s 2; }
.spelar .mobil-swishknapp .handmarkor { animation: tryck 1s 4.1s both; }
.spelar .betalkedja-dator .spar-swishvy { animation: betalsteg-in .12s 4.55s both; }
.spelar .betalkedja-mobil .spar-swishvy { animation: betalsteg-in .08s 4.9s both; }
.spelar .spar-swishvy b { animation: puls .7s 5.1s 2; }

@keyframes betalsteg-ut { to { opacity: 0; } }
@keyframes betalsteg-in { to { opacity: 1; } }
@keyframes skanner-in { to { opacity: 1; transform: translateY(0) rotate(5deg); } }
@keyframes skanna {
  from { transform: translateY(.15rem); }
  to { transform: translateY(3.3rem); }
}

@media (max-width: 700px) {
  #anmalan .scenyta { height: 61rem; }
  .betalningsspar {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .demowebblasare { width: 76%; height: 18rem; }
  .skannertelefon { width: 5.8rem; height: 10.6rem; }
  .skannertelefon .skannervy,
  .skannertelefon .spar-swishvy { font-size: .46rem; }
  .skannertelefon .skannervy { padding: 1.15rem .45rem .4rem; }
  .skannertelefon .skannervy > img { width: 1.35rem; height: 1.35rem; }
  .skannertelefon .skannerram { width: 3.8rem; height: 3.8rem; }
  .mobiltelefon { height: 25rem; }
}

@media (max-width: 520px) {
  .betalningsspar { inset: .45rem; gap: .4rem; }
  .betalkedja { padding: .4rem; }
  .sparrubrik { gap: .25rem; min-height: 1.9rem; margin-bottom: .35rem; font-size: .48rem; }
  .sparrubrik span { padding: .2rem .3rem; font-size: .42rem; }
  .demowebblasare { height: 13.2rem; }
  .datorformular, .datorkvitto { padding: .45rem; font-size: .48rem; }
  .datorformular h3, .datorkvitto h3 { font-size: .78rem; }
  .datorformular h4 { margin-top: .35rem; }
  .datorkvitto img { width: 4.5rem; height: 4.5rem; }
  .skannertelefon { right: .4rem; bottom: .4rem; width: 5rem; height: 9.2rem; }
  .skannervy { padding-top: 1rem; }
  .skannerram { width: 3.2rem; height: 3.2rem; }
  .mobiltelefon { height: 22.7rem; }
  .mobil-formvy { padding: 1.9rem .55rem .4rem; }
  .mobiltelefon .mobilanmalan { padding-top: .3rem; }
  .mobiltelefon .mobilanmalan h4 { margin-top: .3rem; }
  .mobiltelefon .mobilskicka { margin-top: .32rem; }
  .mobilkvitto { padding: 2.7rem .55rem .5rem; }
  .mobil-swishknapp { font-size: .54rem; }
}

@media (prefers-reduced-motion: reduce) {
  .datorformular, .mobil-formvy, .skannervy, .mobilkvitto, .handmarkor { display: none; }
  .datorkvitto, .skannertelefon, .spar-swishvy { opacity: 1; transform: none; }
}