/*
 * og-buttons-fallback.css — Aussehen der Frontend-Buttons ohne ACSS (Stand og-events 1.1.4).
 *
 * Wird nur geladen, wenn ButtonFallback kein ACSS-Stylesheet erkennt (Divi-Prod bis zum etch-Cutover).
 * Mit ACSS (etch) kommt diese Datei nicht auf die Seite; ACSS gestaltet die Buttons allein.
 * Selektor-Staerke wie in 1.1.4, damit die Regeln auch gegen Theme-Regeln wie `a { color }` bestehen.
 * Nutzt die Design-Tokens (--og-*) aus og-form.css. Ausnahme: das Schliessen-×, siehe og-form.css.
 */

/* Absenden (Anmelde- und Aenderungsformular) und «Zurueck zum Formular» */
.og-form__submit,
.og-form__back {
    display: block;
    width: 100%;
    margin-top: var(--og-space-md);
    padding: 0.8rem var(--og-space-lg);
    font-family: var(--og-font);
    font-size: var(--og-font-size-md);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: var(--og-accent-text);
    background: var(--og-accent);
    border: none;
    border-radius: var(--og-radius-md);
    box-shadow: var(--og-shadow-sm);
    cursor: pointer;
    min-height: 3rem;
    transition: background var(--og-transition), box-shadow var(--og-transition), transform var(--og-transition);
    letter-spacing: 0.01em;
}

.og-form__submit:hover,
.og-form__back:hover {
    background: var(--og-accent-hover);
    box-shadow: 0 2px 8px rgba(58, 125, 94, 0.25);
    color: var(--og-accent-text);
}

.og-form__submit:active,
.og-form__back:active {
    transform: translateY(1px);
    box-shadow: none;
}

.og-form__submit:focus-visible,
.og-form__back:focus-visible {
    outline: 3px solid var(--og-accent);
    outline-offset: 3px;
}

/* «Zurueck zum Formular» ist ein Link: nur so breit wie sein Text (Layout steht ungeschichtet bei .og-state-error) */
.og-state-error .og-form__back {
    width: auto;
    padding-left: var(--og-space-lg);
    padding-right: var(--og-space-lg);
}

/* Details (Listenzeile, Outline) */
.og-row__details-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem var(--og-space-md);
    font-family: var(--og-font);
    font-size: var(--og-font-size-sm);
    font-weight: 600;
    color: var(--og-accent);
    background: transparent;
    border: 1.5px solid var(--og-accent);
    border-radius: var(--og-radius-md);
    cursor: pointer;
    min-height: 2.5rem;
    transition: background var(--og-transition), color var(--og-transition), box-shadow var(--og-transition);
    white-space: nowrap;
}

.og-row__details-btn:hover {
    background: var(--og-accent);
    color: var(--og-accent-text);
    box-shadow: 0 2px 6px rgba(58, 125, 94, 0.2);
}

.og-row__details-btn:focus-visible {
    outline: 3px solid var(--og-accent);
    outline-offset: 3px;
}

@media (max-width: 29.99rem) {
    .og-row__details-btn {
        padding: 0.4rem 0.625rem;
        font-size: 0.75rem;
    }
}

/* Abbrechen (Modal, sekundaer, Outline) */
.og-modal__cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem var(--og-space-md);
    font-family: var(--og-font);
    font-size: var(--og-font-size-sm);
    font-weight: 600;
    color: var(--og-gray-600);
    background: transparent;
    border: 1.5px solid var(--og-gray-300);
    border-radius: var(--og-radius-md);
    cursor: pointer;
    min-height: 2.75rem;
    transition: background var(--og-transition), border-color var(--og-transition), color var(--og-transition);
}

.og-modal__cancel:hover {
    background: var(--og-gray-100);
    border-color: var(--og-gray-400);
    color: var(--og-gray-900);
}

.og-modal__cancel:focus-visible {
    outline: 3px solid var(--og-accent);
    outline-offset: 2px;
}

/* Anmelden (Modal, aktiv) */
.og-modal__cta.og-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem var(--og-space-lg);
    font-family: var(--og-font);
    font-size: var(--og-font-size-sm);
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    color: var(--og-accent-text);
    background: var(--og-accent);
    border: none;
    border-radius: var(--og-radius-md);
    cursor: pointer;
    min-height: 2.75rem;
    transition: background var(--og-transition), box-shadow var(--og-transition);
}

.og-modal__cta.og-cta:hover {
    background: var(--og-accent-hover);
    box-shadow: 0 2px 10px rgba(58, 125, 94, 0.3);
    color: var(--og-accent-text);
}

.og-modal__cta.og-cta:focus-visible {
    outline: 3px solid var(--og-accent);
    outline-offset: 3px;
}

/* Stornieren (Verwaltungsseite, dezent rot) */
.og-card form button.og-form__cancel {
    display: inline-block;
    margin: 0 var(--og-space-lg) var(--og-space-lg);
    padding: 0.4rem var(--og-space-md);
    font-family: var(--og-font);
    font-size: var(--og-font-size-sm);
    font-weight: 600;
    color: var(--og-color-error);
    background: transparent;
    border: 1.5px solid var(--og-color-error);
    border-radius: var(--og-radius-md);
    cursor: pointer;
    min-height: 2.5rem;
    transition: background var(--og-transition), color var(--og-transition), box-shadow var(--og-transition);
    opacity: 0.85;
}

.og-card form button.og-form__cancel:hover {
    background: var(--og-bg-error);
    opacity: 1;
}

.og-card form button.og-form__cancel:focus-visible {
    outline: 3px solid var(--og-color-error);
    outline-offset: 2px;
    opacity: 1;
}