/*
 * Einheitliches Button-System.
 * Primär: Hauptfarbe in der Fläche.
 * Sekundär: weiße Fläche, Rahmen und Schatten in Hauptfarbe.
 */
:is(.button, .nt-button) {
    display: inline-flex;
    min-height: var(--control-height);
    padding: 0.8rem var(--control-padding-inline);
    border: var(--border-width) solid var(--color-primary);
    border-radius: var(--radius-pill);
    align-items: center;
    justify-content: center;
    gap: var(--control-gap);
    color: #fff !important;
    background: var(--color-primary);
    box-shadow: var(--shadow-primary);
    font-family: var(--font-heading);
    font-size: var(--type-button);
    font-weight: 700;
    letter-spacing: 0.065em;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    transition:
        color var(--transition),
        background-color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

:is(.button, .nt-button):hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: var(--color-primary-hover);
    color: #fff !important;
    background: var(--color-primary-hover);
    box-shadow: var(--shadow-primary-hover);
    transform: translateY(-2px);
}

:is(.button, .nt-button):active:not(:disabled):not([aria-disabled="true"]),
:is(.button, .nt-button).is-active {
    border-color: var(--color-primary-active);
    color: #fff !important;
    background: var(--color-primary-active);
    box-shadow: 0 0.35rem 1rem rgba(71, 127, 39, 0.24);
    transform: translateY(0);
}

:is(.button-secondary, .button--secondary, .nt-button--glass) {
    border-color: var(--color-primary);
    color: var(--color-primary-dark) !important;
    background: var(--color-surface);
    box-shadow: var(--shadow-primary);
}

:is(.button-secondary, .button--secondary, .nt-button--glass):hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: var(--color-primary-hover);
    color: var(--color-primary-dark) !important;
    background: var(--color-primary-softer);
    box-shadow: var(--shadow-primary-hover);
}

:is(.button-secondary, .button--secondary, .nt-button--glass):active:not(:disabled):not([aria-disabled="true"]),
:is(.button-secondary, .button--secondary, .nt-button--glass).is-active {
    border-color: var(--color-primary-active);
    color: var(--color-primary-dark) !important;
    background: var(--color-primary-soft);
    box-shadow: 0 0.35rem 1rem rgba(71, 127, 39, 0.2);
    transform: translateY(0);
}

:is(.button, .nt-button):focus-visible,
:is(.card-slider__button, .flip-card-slider__button, .menu-toggle, .nt-ticker__toggle):focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px var(--color-surface), var(--shadow-primary);
}

:is(.button, .nt-button):disabled,
:is(.button, .nt-button)[aria-disabled="true"] {
    border-color: var(--color-line-strong);
    color: var(--color-muted) !important;
    background: var(--color-surface-alt);
    box-shadow: none;
    opacity: 0.72;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

.button-small {
    min-height: var(--control-height-small);
    padding: 0.65rem 1.1rem;
    font-size: clamp(0.64rem, 0.61rem + 0.1vw, 0.74rem);
}

.slider-arrow-icon {
    width: 1.3rem;
    height: 1.3rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

/* Aktive Slider- und Tickersteuerungen: grüne Fläche, weißer Pfeil/Text. */
:is(.card-slider__button, .flip-card-slider__button, .nt-ticker__toggle) {
    border: var(--border-width) solid var(--color-primary);
    color: #fff !important;
    background: var(--color-primary);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition:
        color var(--transition),
        background-color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

:is(.card-slider__button, .flip-card-slider__button, .nt-ticker__toggle):hover:not(:disabled) {
    border-color: var(--color-primary-hover);
    color: #fff !important;
    background: var(--color-primary-hover);
    box-shadow: var(--shadow-primary);
    transform: translateY(-2px);
}

:is(.card-slider__button, .flip-card-slider__button, .nt-ticker__toggle):active:not(:disabled),
:is(.nt-ticker__toggle[aria-pressed="true"]) {
    border-color: var(--color-primary-active);
    color: #fff !important;
    background: var(--color-primary-active);
    box-shadow: var(--shadow-xs);
    transform: translateY(0);
}

:is(.card-slider__button, .flip-card-slider__button):disabled {
    border-color: var(--color-line);
    color: var(--color-muted) !important;
    background: var(--color-surface-alt);
    box-shadow: none;
    opacity: 0.48;
    cursor: not-allowed;
    transform: none;
}

/* Der mobile Menübutton bleibt als ruhige, sekundäre Steuerung erhalten. */
.menu-toggle {
    border: var(--border-width) solid var(--color-primary);
    color: var(--color-primary-dark) !important;
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition:
        color var(--transition),
        background-color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}
.menu-toggle:hover {
    border-color: var(--color-primary-hover);
    background: var(--color-primary-softer);
    box-shadow: var(--shadow-primary);
    transform: translateY(-2px);
}
.menu-toggle:active,
.menu-toggle[aria-expanded="true"] {
    border-color: var(--color-primary-active);
    background: var(--color-primary-soft);
    transform: translateY(0);
}

@media (max-width: 767px) {
    :is(.button, .nt-button) { width: auto; }
    .main-navigation :is(.button, .nt-button) { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
    :is(.button, .nt-button, .card-slider__button, .flip-card-slider__button, .menu-toggle, .nt-ticker__toggle) {
        transition: none;
    }
}

@media (forced-colors: active) {
    :is(.button, .nt-button, .card-slider__button, .flip-card-slider__button, .menu-toggle, .nt-ticker__toggle) {
        border: 1px solid ButtonText;
        box-shadow: none;
        forced-color-adjust: auto;
    }
}