.bt-card {
      background: #ffffff;
      border-radius: 12px;
      box-shadow:
          0 12px 28px rgba(0,0,0,0.22),
          0 1px 1px rgba(255,255,255,0.4) inset;
      border: 1px solid rgba(0,0,0,0.06);
  }

  /* Hover-Effekt und Clickbarkeit der Tickets */
  .bt-card--ticket {
      cursor: pointer;
      transition: box-shadow .15s ease, transform .15s ease;
  }
  .bt-card--ticket:hover,
  .bt-card--ticket:focus {
      box-shadow:
          0 16px 40px rgba(0,0,0,0.4),
          0 0 0 4px rgba(255,204,0,0.8); /* ffcc00 Brand-Glow */
      transform: translateY(-1px);
      outline: none;
  }

  
  /* LogOut Button explizit aus Weiß rausnehmen */
  .bt-authbar .logout,
  .bt-authbar .logout i {
      color: #575757 !important;   /* dein dunkles Grau */
      text-shadow: none !important;
      filter: none !important;
  }

  /* optional: leichter Button-Look für Logout */
  .bt-authbar .logout {
      background: rgba(255,255,255,0.9);
      border: 1px solid rgba(0,0,0,0.15);
      border-radius: 8px;
      padding: .4rem .6rem;
      line-height: 1.2;
      font-weight: 500;
  }

  /* Hover-Effekt auf Logout separat definieren */
  .bt-authbar .logout:hover {
      background: #ffcc00;
      border-color: #ffcc00;
      color: #000 !important;
  }
  .bt-authbar .logout:hover i {
      color: #000 !important;
  }

/* Basis-Style der Fortschritts-Buttons (falls du schon was hast, kannst du diesen Block anpassen) */
.bt-progress-set {
    background: #575757;
    color: #fff;
    border: 0;
    cursor: pointer;
    transition: transform 0.12s ease;
}

/* Exakter Treffer (z. B. Eingabe 75 → Button 75) */
.bt-progress--exact {
    background: #ffcc00 !important;
    color: #575757 !important;
}

/* Näher dran (primärer Kandidat) */
.bt-progress--near {
    background: #ffe064 !important;
    color: #575757 !important;
}

/* Zweitnächster Kandidat / Gleichstand */
.bt-progress--second {
    background: #fff3c4 !important;
    color: #575757 !important;
}

/* kleiner Aufmerksamkeitspuls, wenn Wert sich ändert über Pfeile/Klick */
.bt-progress--bump {
    transform: scale(1.06);
}

/* Wrapper um das Eingabefeld + die Anzeige */
.bt-progress-fieldwrap {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.bt-progress-fieldwrap {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.bt-progressbar-outer {
    position: relative;
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(0,0,0,0.2);
    box-shadow: inset 0 0 2px rgba(0,0,0,0.4);
    overflow: hidden;
}

.bt-progressbar-inner {
    position: relative;
    height: 100%;
    border-radius: inherit;
    background: #dffff3; /* JS überschreibt Farbe dynamisch */
    width: 0%;
    transition: width 0.2s ease, background-color 0.2s ease;
    box-shadow: 0 0 6px rgba(0,0,0,0.15);
    overflow: hidden; /* Shine bleibt im gefüllten Bereich */
}

/* Shine-Fleck selbst */
.bt-progressbar-inner::after {
    content: "";
    position: absolute;
    top: 0;
    width: 40%;
    height: 100%;
    border-radius: inherit;

    /* Firmen-Gelb Shine (wie besprochen) */
    background: radial-gradient(
        circle at 20% 50%,
        rgb(255, 204, 0) 0%,
        rgba(255, 204, 0, 0.712) 35%,
        rgba(255, 204, 0, 0.295) 60%,
        rgba(255,204,0,0) 80%
    );

    opacity: 0;
    pointer-events: none;
    filter: blur(2px);
}

/* Shine bei Fortschritt NACH OBEN (Links -> Rechts) */
.bt-progressbar-inner.bt-progressbar-shine-up::after {
    animation: shine-move-forward 0.8s ease-out forwards;
    opacity: 1;
    /* Startposition für die Anim: links außerhalb */
    left: -40%;
}

/* Shine bei Fortschritt NACH UNTEN (Rechts -> Links) */
.bt-progressbar-inner.bt-progressbar-shine-down::after {
    animation: shine-move-back 1.5s ease-out forwards;
    opacity: 1;
    /* Startposition für die Anim: rechts außerhalb */
    left: 100%;
}

/* Vorwärtslauf (links → rechts) */
@keyframes shine-move-forward {
    0% {
        left: -40%;
        opacity: 0;
    }
    10% {
        left: -20%;
        opacity: 1;
    }
    50% {
        left: 40%;
        opacity: 1;
    }
    100% {
        left: 120%;
        opacity: 0;
    }
}

/* Rückwärtslauf (rechts → links) */
@keyframes shine-move-back {
    0% {
        left: 100%;
        opacity: 0;
    }
    10% {
        left: 80%;
        opacity: 1;
    }
    50% {
        left: 20%;
        opacity: 1;
    }
    100% {
        left: -40%;
        opacity: 0;
    }
}


.bt-progress-set {
    background: #575757;
    color: #fff;
    border: 0;
    cursor: pointer;
    transition: transform 0.12s ease;
}

.bt-progress--exact {
    background: #ffcc00 !important;
    color: #575757 !important;
}

.bt-progress--near {
    background: #ffe064 !important;
    color: #575757 !important;
}

.bt-progress--second {
    background: #fff3c4 !important;
    color: #575757 !important;
}

.bt-progress--bump {
    transform: scale(1.06);
}