body {
      background-image: url(../_shared/bg.jpg);
    }

    p.todo {
      color: red;
      border: 2px solid red;
      /* roter Rahmen */
      padding: 4px;
    }

    /* Emojis */

    .emoji-row {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      justify-content: center
    }

    .emoji-button {
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      outline-offset: 2px;
    }

    .emoji-button img {
      width: 80px;
      height: auto;
      opacity: 0.5;
      transition: opacity 0.2s ease;
    }

    .emoji-button:not(.inactive) img {
      opacity: 1;
    }

    .emoji-button:focus {
      outline: 2px solid #000;
    }

    .emoji {
      width: 70px;
      height: 70px;
      margin-bottom: 6px;
    }

    .emoji img {
      width: 100%;
    }


    #order {
      max-width: 500px;
      margin: 0px auto;
    }

    .sortable {
      display: flex;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      margin: 5px;
      padding-top: 5px;
    }

    .item-li {
      width: 100%;
      line-height: 40px;
      margin: 1px 0;
    }

    .handle {
      cursor: pointer;
      display: block;
      float: right;
      font-size: 1.5em;
      color: var(--lighter-blue);
      margin-top: 8px;
    }

    .false {
      background-color: #AD1F2422 !important;
      border: 2px solid var(--red);
    }

    #feedback1 {
      margin-top: 12px;
      margin-bottom: 12px;
    }

    .talent {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      margin: 6px 3px;
    }


    .flex-row {
      display: flex;
      flex-wrap: wrap;

      justify-content: center;
    }

    .item {
      max-width: 250px;
      margin: 0px 3px;
    }

    #sort-ex2 h3,
    .item h3 {
      padding: 0px;
      margin: 3px 0px;
      text-align: center;
    }

    .portrait {
      width: 100%;
    }

    #itemZone1 {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 12px;
    }

    .item-talent img {
      height: 45px;
    }

    .item-talent {
      display: flex !important;
      flex-wrap: wrap !important;
      margin: 0 3px;
      padding: 3px;
    }

    #sort-ex1 .dropZone {
      height: 92px;
      border: 2px dashed var(--lighter-blue);
      margin: 3px 0px 12px 0px;
      padding: 0px;
    }

    #sort-ex1 .item-talent {
      display: block;
      margin: 0 auto;
      border: none;

    }

    #sort-ex2 .marker-drop {
      width: 70px;
      display: block;
      margin: 0 auto;

    }

    #sort-ex2 .row-img {
      max-width: 100%;
    }

    .wrap {
      text-align: center;
    }

    .wrap .link {
      display: inline-block;
      width: auto;
    }


    .flex-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      grid-gap: 1rem;
    }

    .grid-item {
      grid-row: span 5;
      display: grid;
      grid-template-rows: subgrid;
      padding: 0px 12px;
    }

    .sort-img {
      position: relative;
    }

    .sort-img::before {
      color: #fff;
      position: absolute;
      font: normal normal normal 24px/1 FontAwesome;
      content: "\F047";
      top: 6px;
      right: 6px;
      z-index: 10;
    }

    #feedback_sort2,
    #feedback_sort1 {
      margin-top: 24px;
      margin-bottom: 23px;
    }