/* ============================================================
   04-BUTTONS.CSS
   Buttons (Core — plattform-unabhängig)
   ------------------------------------------------------------
   STANDARD = Outline-Koral (laut CD-Mockup S. 7):
   Koral-Rand, koraler Text, transparenter Hintergrund.
   Beim Hover füllt sich der Button koral mit weißem Text.

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


/* ────────────────────────────────────────────────────────────
   1. BASIS-STYLE — Outline-Koral (greift automatisch)
   ──────────────────────────────────────────────────────────── */

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.cd-btn {

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

    /* — Größe & Form ———————————————————————————————————————— */
    padding: 0.85em 1.75em;
    border-radius: var(--cd-radius-pill);
    border: 2px solid var(--cd-color-primary);

    /* — Typografie —————————————————————————————————————————— */
    font-family: var(--cd-font-family);
    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;

    /* — Farben (Default = Outline-Koral) ——————————————————— */
    background-color: transparent;
    color: var(--cd-color-primary);

    /* — Verhalten ————————————————————————————————————————— */
    cursor: pointer;
    user-select: none;

    /* — Übergänge ————————————————————————————————————————— */
    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 — füllt sich koral
   ──────────────────────────────────────────────────────────── */

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.cd-btn:hover {
    background-color: var(--cd-color-primary);
    border-color: var(--cd-color-primary);
    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 (während des Klickens)
   ──────────────────────────────────────────────────────────── */

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: Solid — gefüllter Koral-Button
   ────────────────────────────────────────────────────────────
   Für prominente Haupt-CTAs, wenn ein gefüllter Button gewünscht ist.
   ──────────────────────────────────────────────────────────── */

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

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


/* ────────────────────────────────────────────────────────────
   VARIANTE: Secondary — Outline in Navy
   ────────────────────────────────────────────────────────────
   Zurückhaltende Alternative — Navy-Border statt Koral.
   ──────────────────────────────────────────────────────────── */

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

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


/* ────────────────────────────────────────────────────────────
   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
   ────────────────────────────────────────────────────────────
   Wenn ein Button auf einer Navy- oder Koral-Section liegt.
   ──────────────────────────────────────────────────────────── */

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