/*****************************************************************************/
/* Action-Buttons */
/*****************************************************************************/
.actionButton {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 10.2rem;          /* ~163px */
    min-height: 1rem;          /* ~105px */
    padding: 0.6rem 1rem;
    border: 0.5px solid rgba(189, 207, 167, 0.25);
    border-radius: 8px;
    background-color: rgb(52, 17, 25);
    box-shadow: inset 0 0 0 0.5px rgb(46, 45, 41);
    color: var(--dead-red);
    font-family: "Bebas Neue", sans-serif;
    font-weight: 700;
    font-size: 2.4rem;           /* näher an den 60px */
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
}
/* Photoshop-Glanz: heller Streifen oben, Abdunklung unten */
.actionButton::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 7px;
    background: linear-gradient(
        180deg,
        rgba(255, 236, 220, 0.16) 0%,
        rgba(255, 236, 220, 0.05) 28%,
        rgba(255, 255, 255, 0) 46%,
        rgba(0, 0, 0, 0.22) 100%
    );
    pointer-events: none;
    z-index: 0;
}

.actionButton > * ,
.actionButton {
    z-index: 1;
}
.actionButton:hover,
.actionButton:focus-visible {
    background-color: rgb(52, 17, 25);
    border-color: rgba(189, 207, 167, 0.25);
    box-shadow: inset 0 0 0 0.5px rgb(46, 45, 41);
    color:var(--text-color-active);
    transform: translateY(-1px);
    outline: none;
}

.actionButton:active {
    transform: translateY(0);
}

.actionButton--primary {
    border-color: rgba(189, 207, 167, 0.25);
    background-color: rgb(52, 17, 25);
    box-shadow: inset 0 0 0 0.5px rgb(46, 45, 41);
    color: var(--text-color-active);
}

.actionButton--primary:hover,
.actionButton--primary:focus-visible {
    background-color: rgb(52, 17, 25);
    box-shadow: inset 0 0 0 0.5px rgb(46, 45, 41);
}

.actionButton--ghost {
    background-color: rgb(52, 17, 25);
    box-shadow: inset 0 0 0 0.5px rgb(46, 45, 41);
    color: var(--text-color-active);
}

.actionButton--ghost:hover,
.actionButton--ghost:focus-visible {
    background-color: rgb(52, 17, 25);
}

.actionButton--badge {
    min-width: 8.4rem;
    min-height: 0;
    width: 8.4rem;
    padding: 0.95rem 0.85rem 1.4rem;
    border-radius: 8px 8px 0 0;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.2rem;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    color: var(--text-color-active);
    transition:
        transform 180ms ease,
        color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        background-color 180ms ease;
}

.actionButton--badge .actionButton__label {
    position: relative;
    z-index: 1;
    display: block;
    font-size: 1.5rem;
    letter-spacing: 0.12em;
    line-height: 1;
    color: var(--dead-red);
}

.actionButton--badge:hover,
.actionButton--badge:focus-visible {
    color: var(--text-color-active);
    border-color: rgba(189, 207, 167, 0.42);
    box-shadow: inset 0 0 0 0.5px rgba(189, 207, 167, 0.42);
    background-color: rgb(52, 17, 25);
}

.actionButton--badge:hover .actionButton__label,
.actionButton--badge:focus-visible .actionButton__label {
    color: var(--text-color-active);
}

.actionButton--small {
    min-width: 10rem;
    min-height: 3rem;
    padding: 0.7rem 1.15rem;
    font-size: 1rem;
}

.actionButton:disabled,
.actionButton[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}