/* ============================================================
   04-BUTTONS.CSS
   Buttons (Core — plattform-unabhängig)
   ------------------------------------------------------------
   STANDARD = gefülltes Teal-Pill mit weißem Text
   (passt zum Pill-Logo im Moodboard). Hover = dunkleres Teal.

   Varianten als Modifier-Klassen (.cd-btn--outline etc.).
   Plattform-Mappings in 07-elementor.css / 08-gutenberg.css.
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   1. BASIS-STYLE — Gefüllt Teal (greift automatisch)
   ──────────────────────────────────────────────────────────── */

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.75em;
    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 Teal
   ──────────────────────────────────────────────────────────── */

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 (Tastatur-Navigation)
   ──────────────────────────────────────────────────────────── */

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 — Modifier-Klassen
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   VARIANTE: Outline — Teal-Rand, transparent
   ────────────────────────────────────────────────────────────
   Zurückhaltende Alternative; Hover füllt sich teal.
   ──────────────────────────────────────────────────────────── */

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);
}


/* ────────────────────────────────────────────────────────────
   VARIANTE: Secondary — Salbei gefüllt
   ────────────────────────────────────────────────────────────
   Weiche Sekundär-Aktion in der Akzentfarbe.
   ──────────────────────────────────────────────────────────── */

button.cd-btn--secondary,
.cd-btn--secondary {
    background-color: var(--cd-color-accent);
    border-color: var(--cd-color-accent);
    color: var(--cd-color-text);
}

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


/* ────────────────────────────────────────────────────────────
   VARIANTE: Ghost — Text-Link-artiger Button
   ──────────────────────────────────────────────────────────── */

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);
}


/* ────────────────────────────────────────────────────────────
   VARIANTE: On-Dark — für dunkle/farbige Hintergründe
   ──────────────────────────────────────────────────────────── */

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-primary);
}

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


/* ────────────────────────────────────────────────────────────
   GRÖSSEN-VARIANTEN
   ──────────────────────────────────────────────────────────── */

.cd-btn--sm {
    padding: 0.6em 1.25em;
    font-size: var(--cd-fs-small);
}

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