@import url('https://fonts.googleapis.com/css2?family=Salsa&display=swap');

      * {
         box-sizing: border-box;
         font-family: 'Salsa', cursive;
      }

      body {
         margin: 0;
         padding: 0;
         background: #ffffff;
         color: #000000;
         font-size: 16px;
         line-height: 24px;
      }

      #wrapper {
         width: 100%;
         max-width: 500px;
         margin: 0 auto;
         padding: 20px;
         text-align: center;
      }

      #logo {
         display: block;
         width: 100%;
         height: auto;
         margin-bottom: 20px;
      }

      #logo img {
         display: block;
         width: 100%;
      }

      #textblock2 {
         margin-bottom: 20px;
      }

      #preview-holder {
         display: none;
         /* Anfangs unsichtbar */
         width: 100%;
         max-width: 500px;
         height: 500px;
         border: 1px solid #000000;
         overflow: hidden;
         position: relative;
         margin: 0 auto;
      }

      #preview {
         width: 100%;
         height: 100%;
         transform: scaleX(1) !important;
         position: absolute;
         top: 0;
         left: 0;
      }

      #res {
         border-left-style: solid;
         border-color: #2196F3;
         background: #DDFFFF;
      }

      #history {
         font-size: 18px;
         margin-top: 20px;
      }

      #resultDiv {
         font-size: 18px;

      }

      #startButton {
         margin: 10px 0;
         padding: 10px 20px;
         background-color: #009933;
         color: #fff;
         border: none;
         cursor: pointer;
         margin: 0 auto;
         font-weight: bold;
         font-size: 23px;
         width: 60%;
         border-radius: 12px;
         box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      }

      #resultImage {
         width: 300px;
         height: 300px;
         background-size: contain;
         background-position: center center;
         background-repeat: no-repeat;
         margin: 0 auto;
         margin-top: 20px;
      }

      .descimage {
         width: 100%;
         height: auto;
      }

      .resultCode {
         font-size: 13px;
         line-height: 16px;
         margin-bottom: 20px;
      }

      .resultFig {
         font-size: 16px;
         line-height: 20px;

      }

      #footer {
         margin-top: 40px;
         font-size: 14px;
         line-height: 20px;
         text-align: center;
         margin-bottom: 20px;
      }

      #footer a {
         text-decoration: none;
         color: #007BFF;
      }

      .switch {
         position: relative;
         display: inline-block;
         width: 50px;
         height: 26px;
      }

      .switch input {
         opacity: 0;
         width: 0;
         height: 0;
      }

      .slider {
         position: absolute;
         cursor: pointer;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background-color: #ccc;
         -webkit-transition: .4s;
         transition: .4s;
      }

      .slider:before {
         position: absolute;
         content: "";
         height: 20px;
         width: 20px;
         left: 5px;
         bottom: 3px;
         background-color: white;
         -webkit-transition: .4s;
         transition: .4s;
      }

      input:checked+.slider {
         background-color: #2196F3;
      }

      input:focus+.slider {
         box-shadow: 0 0 1px #2196F3;
      }

      input:checked+.slider:before {
         -webkit-transform: translateX(20px);
         -ms-transform: translateX(20px);
         transform: translateX(20px);
      }

      /* Rounded sliders */
      .slider.round {
         border-radius: 34px;
      }

      .slider.round:before {
         border-radius: 50%;
      }

      .blink_me {
         animation: blinker 0.5s linear infinite;
         color: red;
      }

      @keyframes blinker {
         50% {
            opacity: 0;
         }
      }