@font-face {
  font-family: 'AdigianaToybox';
  src: url('fonts/AdigianaToyboxRegular-g59P.ttf') format('truetype');
}
h1, h2 {
  font-family: 'AdigianaToybox', sans-serif !important;
  color: #f78138 !important;
}
.h2, h2 {
  font-size: 1.6rem;
}




.main-wrapper {
    background-color:#f7f1eb;  /*  ADD8E6 e2d5f7 Babyblau f7f1eb */
    border-radius: 5px;  /* Optional: für abgerundete Ecken */
    padding: 15px 20px 15px 20px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    max-width: 800px;  /* Maximale Breite des Containers */
    margin: auto;  /* Zentriert den Container */
}
.info-item {
    margin-right: 10px;  /* Abstand zwischen den Elementen */
}
.footer { 
    margin-top: 10px;
    padding: 15px;
}
      .btn-primary {
        background-color: #FA711C !important;
        border-color: #FA711C !important;
        color: #fff !important;
    }
    .btn-primary:hover {
        background-color: #d16319 !important; /* Eine etwas dunklere Farbe für den Hover-Effekt */
        border-color: #d16319 !important;
    }
    .btn-primary:focus {
        box-shadow: 0 0 0 0.2rem rgba(250, 113, 28, 0.5) !important; /* Schatten mit einer leicht transparenten Version der Hauptfarbe */
    }

    .btn-success {
      background-color: #5d60f7 !important;
      border-color: #5d60f7 !important;
      color: #fff !important;
  }
  .btn-success:hover {
      background-color: #1c20fa !important; /* Eine etwas dunklere Farbe für den Hover-Effekt */
      border-color: #1c20fa !important;
  }
  .btn-success:focus {
      box-shadow: 0 0 0 0.2rem rgba(250, 113, 28, 0.5) !important; /* Schatten mit einer leicht transparenten Version der Hauptfarbe */
  }


    .btn-danger {
      color: #fff !important;
    }

.btn-secondary {
    color: #fff !important;

  }
    .info-container {
        background-color: #e9ecef;  /* Eine hellgraue Farbe */
        padding: 5px;
        margin-bottom: 15px;  /* Abstand zum nächsten Inhaltsblock */
    }

     #medalContainer {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      display: none;
      opacity: 0;
      animation: spinPopInOut 3s ease-out forwards;
    }
     #showMedalButton {
      cursor: pointer;
      padding: 10px 20px;
      background-color: #28a745;
      color: #fff;
      border: none;
      border-radius: 5px;
    }

    @keyframes spinPopInOut {
      0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
      }
      20% {
        transform: translate(-50%, -50%) scale(1.2) rotate(20deg);
        opacity: 1;
      }
      40% {
        transform: translate(-50%, -50%) scale(0.9) rotate(-10deg);
        opacity: 1;
      }
      60% {
        transform: translate(-50%, -50%) scale(1.05) rotate(7deg);
        opacity: 1;
      }
      80% {
        transform: translate(-50%, -50%) scale(0.98) rotate(-3deg);
        opacity: 1;
      }
      100% {
        transform: translate(-50%, -50%) scale(1) rotate(0);
        opacity: 0;
      }
    }

.tutor {
    background-color: #fbdfdf !important;
}

.paginate_button current {
        background-color: #FA711C !important;
        border-color: #FA711C !important;
    }

a {
  color: #FA711C !important;
  }

  .dataTables_wrapper .dataTables_filter input {

    background-color: white !important;
  }

  .dataTables_wrapper .dataTables_length select {
    background-color: white !important;
  }

  .featurelist li {
    list-style-type: none; /* Entfernt die standardmäßigen Listenpunkte */
    position: relative; /* Ermöglicht die Positionierung des Haken-Symbols */
    padding-left: 30px; /* Schafft Platz für das Haken-Symbol */
}

.featurelist li::before {
    content: '✔'; /* Haken-Symbol */
    position: absolute;
    left: 0; /* Position des Symbols am Anfang des Listenelements */
    color: green; /* Farbe des Haken-Symbols */
    /* Weitere Stilangaben nach Bedarf */
}

#fangdenkreis {
  max-width: 100%;
  height: auto;
}