/*Alternierend-farbige Checkboxen-Liste mit Richig-Falsch-Auswertung*/
    .checkbox-list .form-check {
      padding: 6px 3px;
    }

    .checkbox-list .form-check:nth-child(even) {
      background-color: #F9F1F1;
    }

    .checkbox-list {
      display: flex;
      flex-direction: column;
      gap: 0.1em;
    }

    .form-check .form-check-input {
      position: relative;
    }

    .checkbox-list .form-check-input {
      min-width: 20px;
    }

    .form-check label {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px;
      cursor: pointer;
      white-space: normal;
    }

    /*Checkboxen-Liste Ende*/


    /* Radiobuttons, die keine Auswertung erfordern (no-check) */
    .no-check-list {
      display: flex;
      flex-direction: row;
      gap: 1rem;
    }

    .no-check-list .form-check label {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      cursor: pointer;
    }

    /* no-check-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: 250px;
      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 3 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: 30px;
      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;
      margin-bottom: 0.5em;
    }

    @media(max-width:576px) {

      .card {
        margin: 6px 12px;
      }

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

      }
    }