/* ============================================================
   04-BUTTONS.CSS
   Buttons (Core — plattform-unabhängig)
   ------------------------------------------------------------
   STANDARD = gefülltes Grün-Pill mit weißem Text (wie Mockup).
   Hover = dunkleres Grün.
   ============================================================ */


/* 1. BASIS-STYLE — Gefüllt Grün */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.cd-btn {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cd-space-xs);

    padding: 0.85em 1.9em;
    border-radius: var(--cd-radius-pill);
    border: 2px solid var(--cd-color-primary);

    font-family: var(--cd-font-body);
    font-weight: var(--cd-fw-semibold);
    font-size: var(--cd-fs-body);
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;

    background-color: var(--cd-color-primary);
    color: var(--cd-color-text-on-primary);

    cursor: pointer;
    user-select: none;

    transition:
        background-color var(--cd-transition-base),
        border-color var(--cd-transition-base),
        color var(--cd-transition-base),
        transform var(--cd-transition-fast);
}


/* 2. HOVER-STATE — dunkleres Grün */
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.cd-btn:hover {
    background-color: var(--cd-color-primary-soft);
    border-color: var(--cd-color-primary-soft);
    color: var(--cd-color-text-on-primary);
}


/* 3. FOCUS-STATE */
button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible,
.cd-btn:focus-visible {
    outline: 3px solid var(--cd-color-accent);
    outline-offset: 3px;
}


/* 4. ACTIVE-STATE */
button:active,
.cd-btn:active { transform: translateY(1px); }


/* 5. DISABLED-STATE */
button:disabled,
input:disabled,
.cd-btn:disabled,
.cd-btn.is-disabled {
    background-color: var(--cd-color-border);
    border-color: var(--cd-color-border);
    color: var(--cd-color-text-muted);
    cursor: not-allowed;
    pointer-events: none;
}


/* ============================================================
   VARIANTEN
   ============================================================ */

/* Outline — Grün-Rand, transparent (Hover füllt grün) */
button.cd-btn--outline,
.cd-btn--outline {
    background-color: transparent;
    border-color: var(--cd-color-primary);
    color: var(--cd-color-primary);
}

button.cd-btn--outline:hover,
.cd-btn--outline:hover {
    background-color: var(--cd-color-primary);
    border-color: var(--cd-color-primary);
    color: var(--cd-color-text-on-primary);
}

/* Dark — für helle Flächen, dunkler Button */
button.cd-btn--dark,
.cd-btn--dark {
    background-color: var(--cd-color-dark);
    border-color: var(--cd-color-dark);
    color: var(--cd-color-text-on-dark);
}

button.cd-btn--dark:hover,
.cd-btn--dark:hover {
    background-color: var(--cd-color-dark-soft);
    border-color: var(--cd-color-dark-soft);
    color: var(--cd-color-text-on-dark);
}

/* Ghost — Text-Link-artig */
button.cd-btn--ghost,
.cd-btn--ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--cd-color-primary);
    padding-inline: 0;
}

button.cd-btn--ghost:hover,
.cd-btn--ghost:hover {
    background-color: transparent;
    border-color: transparent;
    color: var(--cd-color-primary-soft);
}

/* On-Dark — für Buttons auf dunklen Sektionen */
button.cd-btn--on-dark,
.cd-btn--on-dark {
    background-color: var(--cd-color-bg);
    border-color: var(--cd-color-bg);
    color: var(--cd-color-text);
}

button.cd-btn--on-dark:hover,
.cd-btn--on-dark:hover {
    background-color: var(--cd-color-primary);
    border-color: var(--cd-color-primary);
    color: var(--cd-color-text-on-primary);
}


/* GRÖSSEN-VARIANTEN */
.cd-btn--sm {
    padding: 0.6em 1.35em;
    font-size: var(--cd-fs-small);
}

.cd-btn--lg {
    padding: 1.1em 2.5em;
    font-size: var(--cd-fs-h6);
}