/* Button Base Styles */
.btn,
button[type="submit"],
input[type="submit"],
.btn--sub,
.btn-primary {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background-color 0.3s ease;
    background-color: #00e6d3;  /* Default color for all buttons */
    color: white;
}

/* Default/Primary Button hover state */
.btn:hover,
.btn--sub:hover,
.btn-primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    background-color: #00ccc0;
}

/* Active button state */
.btn.active,
.btn--sub.active,
.btn-primary.active {
    background-color: #00e6d3;  /* Gleiche Farbe wie andere Buttons */
    color: white;
}

/* Delete/Danger Button - Red */
.btn--danger,
.btn-danger,
button[data-action="delete"] {
    background-color: #e60000;
    color: white;
}

.btn--danger:hover,
.btn-danger:hover,
button[data-action="delete"]:hover {
    background-color: #cc0000;
}

/* Disabled state */
.btn:disabled,
button[type="submit"]:disabled,
input[type="submit"]:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Primary/Default Buttons with high specificity */
html body .btn:not(.btn--danger),
html body .btn--sub:not(.btn--danger),
html body .btn-primary:not(.btn--danger),
html body button[type="submit"]:not(.btn--danger),
html body input[type="submit"]:not(.btn--danger) {
    background-color: #00e6d3 !important;
    color: white !important;
}

/* Danger Buttons with high specificity */
html body .btn--danger,
html body .btn.btn--danger,
html body button.btn--danger,
html body a.btn--danger {
    background-color: #e60000 !important;
    color: white !important;
}

/* Hover states */
html body .btn:not(.btn--danger):hover,
html body .btn--sub:not(.btn--danger):hover,
html body .btn-primary:not(.btn--danger):hover {
    background-color: #00ccc0 !important;
}

html body .btn--danger:hover {
    background-color: #cc0000 !important;
}

/* Active state */
html body .btn.active:not(.btn--danger),
html body .btn--sub.active:not(.btn--danger) {
    background-color: #00e6d3 !important;
    color: white !important;
}


.card.project {
    width: 100%;
    max-width: 250px;
}

.card.project .project__thumbnail {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: 0.7rem;
}

.singleProject {
    width: 100%;
    max-width: 400px;
}

.singleProject__preview {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: top center;
    margin-bottom: 3rem;
    border-radius: 0.7rem;
    display: block;
}