/* Text markieren */
    .markerbox {
      padding: 10px;
      border-left: 5px solid #efcad6;
      background-color: #fcedf2;
    }

    .marker:hover {
      cursor: pointer;
      background-color: #EBD0D0;
    }

    .marker.highlight {
      background-color: #EBD0D0;
      font-weight: bold;
      color: #A73536;
    }

    /* Text markieren Ende */

    /*UMDREH-KAERTCHEN*/

    .card:hover .front {
      transform: rotateY(7deg);
      /* kleines Neigen */
      transition: transform 0.3s ease;
    }


    .front h3 {
      margin-bottom: 12px;
      padding-bottom: 12px;
    }

    .container-wrapper {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    .flip-container {
      display: block;
      width: auto;
    }

    /* flip the pane when hovered */
    .flip-container.hover .card {
      transform: rotateY(180deg);
    }

    .flip-container-wrapper {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    .card {
      margin: 6px 12px;
    }

    .card,
    .card .front,
    .card .back {
      width: 420px;
      height: 390px;
      box-shadow: none;
      border-radius: 18px;

    }

    .card .back {
      background-color: #F9F1F1;
    }

    /* flip speed */
    .card {
      transition: 0.8s;
      transform-style: preserve-3d;
      position: relative;
      display: inline-block;
      cursor: pointer;
      user-select: none;
    }

    .card-img {
      display: block;
      margin: 12px auto;
    }

    /* hide back of pane during swap */
    .card .front,
    .card .back {
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      position: absolute;
      top: 0;
      left: 0;
      padding: 15px;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
    }

    /* front pane, placed above back */
    .card .front {
      z-index: 2;
      transform: rotateY(0deg);
      background-color: #CB6C6D;
      color: #000000;
      font-size: 1.3em;
    }

    /* back, initially hidden pane */
    .card .back {
      transform: rotateY(180deg);
      background-color: #EDC8C9;
      color: #000;
      align-content: flex-start;
    }

    .card p {
      align-self: center;
      text-align: center;
      font-weight: bold;
    }

    .card .back p {
      text-align: left;
    }

    .card h4 {
      background-color: transparent;
      color: #000;
      text-align: center;
      align-self: center;
      width: 100%;
      margin-top: 0px;
      font-size: 20px;
      line-height: 22px;
      font-weight: bold;
    }

    .card h4 span {
      font-weight: normal;
      white-space: nowrap;
    }

    .card .back p {
      font-weight: normal;
      font-size: 16px;
    }

    .front-face h3,
    .card h3 {
      background-color: transparent;
      color: #fff;
      text-align: center;
      align-self: center;
      width: 100%;
      margin-top: 0px;
      margin-bottom: 0px;
      font-size: 25px;
      line-height: 22px;
      font-weight: normal;
    }

    .front-face h3 {
      font-size: 20px;
    }

    .front-img {
      height: 150px;
      padding-left: 12px;
      padding-right: 12px;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }


    .front-img-flip {
      position: absolute;
      top: 10px;
      /* Abstand nach oben */
      right: 10px;
      /* Abstand nach rechts */
      width: 70px;
      height: auto;
      /* Proportionen beibehalten */
      z-index: 3;
      /* über dem Front-Content */
      pointer-events: none;
      /* verhindert, dass das Bild den Hover beeinflusst */
    }

    /*UMDREH-KAERTCHEN ENDE*/




    /* Emojjis von blass zu bunt */
    .emoji-row {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      justify-content: center;
    }


    .emoji-button {
      background: none;
      border: 3px solid transparent;
      /* Platz für Rahmen reservieren */
      border-radius: 10px;
      padding: 2px;
      /* gleiche Padding wie active-border */
      box-sizing: border-box;
      /* Border + Padding zählen zur Größe */
      cursor: pointer;
      outline: none;
      /* Outline nur bei Fokus separat */
    }


    .emoji-button img {
      width: 80px;
      height: auto;
      opacity: 0.3;
      /* Standard: durchsichtig */
      transition: opacity 0.2s ease;
    }

    /* Aktivierte Buttons (nach Klick) */
    .emoji-button:not(.inactive) img {
      opacity: 1;
      /* Sichtbar, solange .inactive fehlt */
    }

    /* Hover-Effekt */
    .emoji-button:hover img {
      opacity: 1;
      /* Immer sichtbar beim Überfahren */
    }

    /* Fokus für Tastatur-Navigation */
    .emoji-button:focus {
      border: 3px solid #000;
      /* gleiche Farbe wie active-border */
      border-radius: 10px;
      /* gleiche Rundung */
      padding: 2px;
      /* gleiche Padding */
      box-sizing: border-box;
      outline: none;
      /* alten Standard-Outline entfernen */
    }

    /* Rahmen für aktive Buttons */
    .emoji-button.active-border {
      border: 3px solid #000;
      /* sichtbarer Rahmen */
      border-radius: 10px;
      /* optional: abgerundete Ecken */
      padding: 2px;
      /* damit der Rahmen nicht das Bild überdeckt */
      box-sizing: border-box;
    }

    /* Emojjis von blass zu bunt Ende */


    /*Spende-Emojis in Canvas*/
    .spende {
      width: 75px;
      height: 75px;
      margin-bottom: 3px;
    }

    .spende img {
      width: 100%;
    }

    /*Spende-Emojis in Canvas Ende*/


    /* Liste ohne Punkte, ohne Einrückung */
    .icon-text-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      /* Abstand zwischen den Einträgen */
    }

    /* Jeder Eintrag horizontal ausgerichtet */
    .icon-text-list li {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      /* Abstand zwischen Icon und Text */
    }

    /* Maximalhöhe 30 px, Breite automatisch */
    .icon-30 {
      height: 40px;
      width: auto;
      display: block;
    }

    /* Liste ohne Punkte, ohne Einrückung Ende */



    /* zentrierte überschrift */
    .center {
      display: block;
      width: 100%;
      text-align: center !important;
      color: #9A1010;
      font-size: 2rem;
      font-weight: bold;
    }

    /* zentrierte überschrift Ende*/




    /*Sortable*/

    /* Sortable Header */
    .sort-wrapper h4 {
      margin-top: 0px;
    }

    /* Drop-Zonen mit Farben */

    #sort1,
    #sort2,
    #sort3 {
      padding: 3px 3px 12px 3px;
      min-height: 200px;
      border-radius: 10px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }


    #sort1 {
      background-color: #d4edda;
    }

    #sort2 {
      background-color: #f8d7da;
    }

    #sort3 {
      background-color: #fff3cd;
    }

    /* Container für die Items */
    #itemZone {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    /* Überschriftenfarben passend zur Zone */
    .col-xs-4:nth-child(1) h3 {
      color: #155724;
      /* dunkelgrün */
      text-align: center;
    }

    .col-xs-4:nth-child(2) h3 {
      color: #721c24;
      /* dunkelrot */
      text-align: center;
    }

    .col-xs-4:nth-child(3) h3 {
      color: #856404;
      /* dunkelgelb */
      text-align: center;
    }

    /* Sortable Items: transparent mit grauem Rahmen */
    .sort-li {
      display: inline-flex;
      flex-direction: column;
      /* Bild über Text */
      align-items: center;
      /* horizontal zentriert */
      justify-content: center;
      text-align: center;
      padding: 10px 15px;
      margin: 5px;
      cursor: grab;
      /* zeigt Drag-Icon */
      background-color: rgba(255, 255, 255, 0.7);
      /* transparent */
      border: 3px solid #ccc;
      /* grauer Rahmen */
      border-radius: 6px;
      width: auto;
      position: relative;
      padding-right: 36px;
      /* Platz für Anfasser */
      font-size: 16px;
      line-height: 1.1em;
      transition: border-color 0.2s;
      /* sanfte Animation */
    }


    /* Hover-Effekt für Box */
    .sort-li:hover {
      border-color: #999;
      /* etwas dunklerer Rahmen */
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
      /* leichter Schatten */
    }

    /* Anfasser (Drag-Icon) - unverändert */
    .sort-li:before {
      content: "\F047";
      color: #A73536;
      position: absolute;
      right: 6px;
      top: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #EBD0D0;
      font: normal normal normal 20px / 1 FontAwesome;
      text-align: center;
      line-height: 30px;
      cursor: grab;
    }

    /* Aktiv beim Ziehen */
    .sort-li:active:before {
      cursor: grabbing;
      transform: scale(1.2);
      /* größer beim Ziehen */
    }

    /* Inhalt der Items sichtbar halten */
    .sort-li .item-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      background-color: transparent;
      /* transparent */
    }

    /* Bild */
    .sort-li .item-image {
      display: block;
      height: 100px;
      width: auto;
      margin-bottom: 8px;
    }

    /* Text */
    .sort-li .item-text {
      font-size: 16px;
      color: inherit;
      font-weight: bold;
      /* Textfarbe unverändert */
    }

    /*Sortable Ende*/


    .legende {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    .legende>div {
      display: flex;
      flex-wrap: wrap;
      justify-items: center;
      align-items: center;
      margin: 0 0.5em;
    }

    @media(max-width:576px) {

      .card {
        margin: 6px 12px;
      }

      .card,
      .card .front,
      .card .back {
        width: 320px;
        height: 460px;

      }

      .legende {
        justify-content: flex-start;
        flex-direction: column;

      }

      .legende>div {
        margin-bottom: 0.25em;
      }

      .emoji-row {
        gap: 0.25em;
      }

      .emoji-button img {
        width: 50px;
      }
    }