.btn-new-xs, .btn-new-s, .btn-new-m, .btn-new-l {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #cfa467;
    color: white;
    font-weight: 500; /* Änderung von bold zu medium */
    border-radius: 9999px; /* Für vollständig runde Ecken */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-new-xs:hover, .btn-new-s:hover, .btn-new-m:hover, .btn-new-l:hover {
    background-color: #b88d4f;
    transform: translateY(-2px);
}

.btn-new-xs:focus, .btn-new-s:focus, .btn-new-m:focus, .btn-new-l:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(207, 164, 103, 0.5);
}

.btn-new-xs {
    padding: 0.1rem 0.35rem; /* Reduzierte Höhe, erhöhte Breite */
    height: 1.75rem;
    font-size: 0.75rem;
    min-width: 80px; /* Mindestbreite hinzugefügt */
}

.btn-new-s {
    padding: 0.2rem 1rem;
    height: 2rem;
    font-size: 0.875rem;
}

.btn-new-m {
    padding: 0.3rem 1.2rem;
    height: 2.25rem;
    font-size: 1rem;
}

.btn-new-l {
    padding: 0.4rem 1.5rem;
    height: 2.5rem;
    font-size: 1.125rem;
}

.btn-round-xs, .btn-round-s, .btn-round-m, .btn-round-l {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #cfa467;
    color: white;
    border-radius: 50%;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-round-xs:hover, .btn-round-s:hover, .btn-round-m:hover, .btn-round-l:hover {
    background-color: #b88d4f;
    transform: translateY(-2px);
}

.btn-round-xs:focus, .btn-round-s:focus, .btn-round-m:focus, .btn-round-l:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(207, 164, 103, 0.5);
}

.btn-round-xs {
    width: 1.75rem;
    height: 1.75rem;
}

.btn-round-s {
    width: 2rem;
    height: 2rem;
}

.btn-round-m {
    width: 2.25rem;
    height: 2.25rem;
}

.btn-round-l {
    width: 2.5rem;
    height: 2.5rem;
}

.btn-play-xs, .btn-play-s, .btn-play-m, .btn-play-l {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #cfa467;
    color: white;
    border-radius: 50%;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-play-xs:hover, .btn-play-s:hover, .btn-play-m:hover, .btn-play-l:hover {
    background-color: #b88d4f;
    transform: translateY(-2px);
}

.btn-play-xs:focus, .btn-play-s:focus, .btn-play-m:focus, .btn-play-l:focus,
.btn-play-xs.play-button-animated:focus,
.btn-play-s.play-button-animated:focus,
.btn-play-m.play-button-animated:focus,
.btn-play-l.play-button-animated:focus {
    outline: none;
    box-shadow: none;
}

.btn-play-xs {
    width: 1.75rem;
    height: 1.75rem;
}

.btn-play-s {
    width: 2rem;
    height: 2rem;
}

.btn-play-m {
    width: 2.25rem;
    height: 2.25rem;
}

.btn-play-l {
    width: 2.5rem;
    height: 2.5rem;
}

.btn-play-xs i {
    font-size: 0.75rem;
}

.btn-play-s i {
    font-size: 0.875rem;
}

.btn-play-m i {
    font-size: 1rem;
}

.btn-play-l i {
    font-size: 1.25rem;
}

.btn-play-long-xs, .btn-play-long-s, .btn-play-long-m, .btn-play-long-l {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #cfa467;
    color: white;
    font-weight: 500;
    border-radius: 9999px;
    transition: background-color 0.3s ease, transform 0.3s ease, color 0.3s ease;
    border: 2px solid transparent; /* Transparenter Rand im Normalzustand */
    box-sizing: border-box;
}

.btn-play-long-xs:hover, .btn-play-long-s:hover, .btn-play-long-m:hover, .btn-play-long-l:hover {
    background-color: #b88d4f;
    transform: translateY(-2px);
}

.btn-play-long-xs:focus, .btn-play-long-s:focus, .btn-play-long-m:focus, .btn-play-long-l:focus {
    outline: none;
}

.btn-play-long-xs {
    padding: 0.1rem 0.35rem;
    height: 1.75rem;
    font-size: 0.75rem;
    min-width: 80px;
    width: 80px; /* Mindestbreite als feste Breite */
}

.btn-play-long-s {
    padding: 0.2rem 1rem;
    height: 2rem;
    font-size: 0.875rem;
    width: 100px; /* Beispielwert, passen Sie dies nach Bedarf an */
}

.btn-play-long-m {
    padding: 0.3rem 1.2rem;
    height: 2.25rem;
    font-size: 1rem;
    width: 120px; /* Beispielwert, passen Sie dies nach Bedarf an */
}

.btn-play-long-l {
    padding: 0.4rem 1.5rem;
    height: 2.5rem;
    font-size: 1.125rem;
    width: 140px; /* Beispielwert, passen Sie dies nach Bedarf an */
}

.btn-play-long-xs i,
.btn-play-long-xs .spinner-pulse,
.btn-play-long-s i,
.btn-play-long-s .spinner-pulse,
.btn-play-long-m i,
.btn-play-long-m .spinner-pulse,
.btn-play-long-l i,
.btn-play-long-l .spinner-pulse {
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-play-long-xs i,
.btn-play-long-xs .spinner-pulse {
    margin-right: 0.4em;
}

.btn-play-long-s i,
.btn-play-long-s .spinner-pulse {
    margin-right: 0.5em;
}

.btn-play-long-m i,
.btn-play-long-m .spinner-pulse {
    margin-right: 0.6em;
}

.btn-play-long-l i,
.btn-play-long-l .spinner-pulse {
    margin-right: 0.7em;
}

.btn-play-long-xs.loading,
.btn-play-long-s.loading,
.btn-play-long-m.loading,
.btn-play-long-l.loading {
    background-color: #f9f5f0; /* Noch hellerer Hintergrund */
    color: #6a6a6a;
    border: 2px solid #ebdecc; /* Dunkelgrauer Rand im Arbeitszustand */
}

/* Anpassung der Spinner-Farbe im Ladezustand */
.btn-play-long-xs.loading .spinner-pulse,
.btn-play-long-s.loading .spinner-pulse,
.btn-play-long-m.loading .spinner-pulse,
.btn-play-long-l.loading .spinner-pulse {
    background-color: #cfa467; /* Passt die Spinner-Farbe an */
}

.loading-icon {
    display: none;
}

.loading .loading-icon {
    display: inline-block !important; /* Fügen Sie !important hinzu */
    color: #cfa467 !important; /* Stellen Sie sicher, dass die Farbe sichtbar ist */
}

.loading .play-icon {
    display: none !important; /* Fügen Sie !important hinzu */
}

.btn-play-long-xs .loading-icon,
.btn-play-long-s .loading-icon,
.btn-play-long-m .loading-icon,
.btn-play-long-l .loading-icon {
    color: #cfa467;
}

.spinner-pulse {
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color: #cfa467;
    animation: pulse 1s infinite ease-in-out;
}

@keyframes pulse {
    0% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.8); opacity: 0.5; }
}

.btn-play-xs.loading,
.btn-play-s.loading,
.btn-play-m.loading,
.btn-play-l.loading {
    background-color: #f9f5f0;
    color: #6a6a6a;
    border: 2px solid #ebdecc;
}

.btn-play-xs.loading .spinner-pulse,
.btn-play-s.loading .spinner-pulse,
.btn-play-m.loading .spinner-pulse,
.btn-play-l.loading .spinner-pulse {
    background-color: #cfa467;
}

.btn-play-xs .loading-icon,
.btn-play-s .loading-icon,
.btn-play-m .loading-icon,
.btn-play-l .loading-icon {
    color: #cfa467;
}

.custom-checkbox {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 1.5px solid #6B7280;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    margin: 0;
}

.custom-checkbox:checked {
    background-color: white;
    border-color: #cfa467;
}

.custom-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #cfa467;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-label {
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    line-height: 1;
}

.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.custom-checkbox-large {
    appearance: none;
    width: 24px;
    height: 24px;
    border: 1.5px solid #6B7280;
    border-radius: 7px;
    cursor: pointer;
    position: relative;
    margin: 0;
}

.custom-checkbox-large:checked {
    background-color: white;
    border-color: #cfa467;
}

.custom-checkbox-large:checked::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 12px;
    border: solid #cfa467;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-label-large {
    font-size: 16px;
    color: #374151;
    cursor: pointer;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    line-height: 1;
}