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

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



    h3 {
      text-align: center;
    }

    /* 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: 75px;
      height: 75px;
      margin-bottom: 0px;
    }

    .emoji img {
      width: 100%;
    }

    .logo_kinokultur {
      width: 100px;
      padding-right: 5px;
    }

    .logo_ammma {
      width: 100px;
    }

    #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;
    }


    /*Sortable*/
    .sort-img {
      position: relative;
      cursor: pointer;
    }

    .sort-img i {
      pointer-events: none;
      position: absolute;
      top: 6px;
      right: 6px;
      z-index: 10;
      color: #fff;
    }

    .sort-img img {
      width: 100%;
    }

    .form-control {

      width: auto;
      margin: 0 auto;
    }


    #feedbacka1 {
      margin-top: 20px;
      margin-bottom: 20px;
    }

    .false {
      border: 4px dashed #CC3A67;
      padding: 2px;
    }


    #tierwohl-group {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    #tierwohl-group .label {
      width: 100px;
      white-space: normal;
      font-weight: 400;
    }

    #tierwohl-group .btn-group {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;
      margin: 0px 3px 3px 3px;
    }

    #tierwohl-group .btn-group .btn-interactive img {
      width: 80px;
    }

         /* Container für Ziele-Bilder */
         .ziele {
           display: flex;
           align-items: center;
           gap: 0.3em;
           flex-wrap: wrap;
           margin-top: 0.1em;
           margin-left: 1em;
         }
    
         /* Bilder in Ziele skalieren */
         .ziele .figure {
           height: 4em;
           width: auto;
           vertical-align: middle;
           flex-shrink: 0;
         }