/* =============================================
   BUTTON SYSTEM: Einheitliche Buttons für Kranatu
   Datei: button_styles.css
============================================= */

/* =============================================
   1) BASIS-BUTTON
   Der Button selbst: Optik, Größe, Typografie
============================================= */

.k-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;

    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;

    padding: 0.75rem 1.5rem;
    box-sizing: border-box;

    border-radius: 2rem;
    border: none;

    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, border-color 0.3s ease;

    background-color: #C55254;
    color: #fefcf9;
}

/* =============================================
   2) BUTTON-VARIANTEN
============================================= */

.k-button--primary {
    background-color: #C55254;
    color: #fefcf9;
}

.k-button--secondary {
    background-color: transparent;
    color: #C55254;
    border: 2px solid #C55254;
}

.k-button--dark {
    background-color: #100f0d;
    color: #fefcf9;
}

.k-button--light {
    background-color: #fefcf9;
    color: #100f0d;
    border: 1px solid #100f0d;
}

.k-button--green {
    background-color: #a5b39f;
    color: #100f0d;
}

.k-button--outline {
    background-color: transparent;
    color: #100f0d;
    border: 2px solid #100f0d;
}

.k-button--outline-dark {
    background-color: transparent;
    color: #fefcf9;
    border: 2px solid #fefcf9;
}

.k-button--lighttrans {
    background-color: transparent;
    color: #fefcf9;
    border: 1px solid #fefcf9;
}

/* =============================================
   3) HOVER / ACTIVE / DISABLED
============================================= */

.k-button:hover {
    transform: translateY(-2px);
}

.k-button--primary:hover {
    background-color: #a93d3e;
}

.k-button--secondary:hover {
    background-color: rgba(197, 82, 84, 0.08);
}

.k-button--dark:hover {
    background-color: #000;
}

.k-button--light:hover {
    background-color: #e5e5e5;
}

.k-button--green:hover {
    background-color: #93a08d;
}

.k-button--outline:hover {
    background-color: #100f0d;
    color: #fefcf9;
}

.k-button--outline-dark:hover {
    background-color: #fff;
    color: #100f0d;
}

.k-button--lighttrans:hover {
    background-color: #a5b39f;
    color: #fefcf9;
}

.k-button:active {
    transform: scale(0.97);
}

.k-button--primary:active {
    background-color: #7d2f30;
}

.k-button--dark:active {
    background-color: #000;
}

.k-button--light:active {
    background-color: #ddd;
}

.k-button--outline:active {
    background-color: #100f0d;
    color: #fff;
}

.k-button:disabled,
.k-button.is-disabled {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

/* =============================================
   4) GRÖSSEN
============================================= */

.k-button--small {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
}

.k-button--large {
    font-size: 1.125rem;
    padding: 1rem 2rem;
}

/* =============================================
   5) WRAPPER / AUSRICHTUNG
   Wrapper positioniert, Button bleibt kompakt
============================================= */

.k-button-wrap--center {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.k-button-wrap--left {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.k-button-wrap--right {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* =============================================
   6) GUTENBERG / WP BUTTON RESET
   Nur technische Korrektur, keine globale Zerstörung
============================================= */

.wp-block-button .wp-block-button__link.k-button,
.wp-block-button__link.k-button,
.wp-element-button.k-button,
.wp-block-button.k-button .wp-block-button__link,
.wp-block-button__link.wp-element-button.k-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    box-sizing: border-box !important;

    text-decoration: none !important;
    box-shadow: none !important;
}

/* =============================================
   7) SPECTRA / UAGB BUTTONS
============================================= */

/* Normale Spectra Buttons mit k-button */
.uagb-buttons__wrap a.wp-block-button__link.k-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
}

/* Innerer Spectra Textcontainer */
.uagb-buttons__wrap a.wp-block-button__link.k-button .uagb-button__link {
    display: inline !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* InfoBox CTA Wrapper: volle Breite für saubere Zentrierung */
.uagb-ifb-button-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* InfoBox CTA Button bleibt kompakt */
.uagb-ifb-button-wrapper .wp-block-button__link {
    width: auto !important;
}

/* =============================================
   8) CONTACT FORM 7
============================================= */

.wpcf7 form input.k-button {
    width: auto !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

/* Optionaler Formular-Button-Wrapper */
.k-form-actions {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* =============================================
   9) RESPONSIVE
============================================= */

@media (max-width: 767px) {
    .k-button {
        font-size: 1rem;
        padding: 0.75rem 1.5rem;
        width: auto !important;
        max-width: 100%;
    }
}