body { padding: 60px; font-family: "Oxygen"; font-weight:300; font-size:21px; line-height: 1.5em;}
h1, h2 {text-transform: uppercase;}
p {font-size: 100%;}
input { min-width: 300px; max-width:600px; padding: 15px; border: 1px solid #007B3B; border-radius:4px;font-size:26px; }
ul { list-style: none; padding: 0; margin: 0; min-width: 330px; max-width:630px; }
li a { display: block; padding: 15px; background: #eee; color:#007B3B; margin-top: 2px; text-decoration: none; font-size:26px; }
li.used a { background: #007B3B; color:#ffffff; }
li.Not a { background: #b70505; color:#ffffff; }
li a:hover { background: #007B3B; color: #FFF }
.betrag { background: #a2dbbd; border: 1px solid #007B3B; width: 35%; height: 200px; text-align:center; font-size: 50px; color: #007B3B; border-radius:10px; font-weight:700;}
.einloesen { background: #FFE700; border: 1px solid #007B3B; width: 35%; height: 200px; border-radius:10px; font-weight:700;}
.zurueck { background: #626262; border: 1px solid #414141; width: 100%; height: 100px; text-align:center; border-radius:10px; margin-top:30px;}
.btn {display:flex; justify-content: center; align-items: center; font-size: 50px; color: #007B3B; text-decoration: none; width:100%; height: 100%; padding: 15px;}
.btn-zurueck { font-size: 26px; color: #FFF; padding: 15px;}

label {width:70px; display:block; float:left;}

@keyframes fadeOutOnly { 0% {opacity: 1;} 100% {opacity: 0;} }
#successMessage { transition: opacity 0.5s ease; }
#successMessage.fade-out { animation: fadeOutOnly 0.5s forwards; }
.style1 {width:60%;}
.style2 {width:40%;}
.flex1 {display:flex;width:100%;margin:0 auto;justify-content: center;flex-direction: row;}
.flex2 {display:flex;width:100%;margin:0 auto;align-content: center;justify-content: space-between;align-items: center;flex-direction: row;flex-wrap: wrap; margin-top:50px;}
@media screen and (max-width: 767px) { 
  body { padding: 30px; font-size:19px;}
  .betrag,.einloesen,.style1,.style2 { width: 100%; margin-bottom:20px;}
  .flex1, .flex2 {flex-direction: column;}
}