/* ============================================================
   ATOM: Button
   Datei: page-builder/components/atoms/button/button.css
   Varianten: primary (Default) | outline | secondary-link | ghost
   ============================================================ */
@import "../../../assets/tokens.css" layer(sdc-tokens);

.as-btn {
    display: inline-block;
    font-family: var(--as-font-sans);
    font-size: clamp(0.9375rem, 0.75rem + 0.3125vw, 1.125rem); /* fluid-size(15,18) */
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.556; /* toEm(28,18) */
    padding: clamp(0.4375rem, 0.125rem + 0.625vw, 1.25rem) clamp(0.9375rem, 0.1875rem + 1.5625vw, 2.8125rem); /* fluid-size(7,20) / (15,45) */
    border-radius: 7px;
    text-decoration: none;
    transition: background-color 0.7s cubic-bezier(0.22, 1, 0.36, 1), color 0.7s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.15s ease;
    border: 2px solid transparent;
    cursor: pointer;
}
.as-btn:hover {
    transform: translateY(-1px);
    text-decoration: none;
}
.as-btn:active {
    transform: translateY(3px);
}

/* ---- primary (Default — gefüllt hellblau, Hover navy) ---- */
.as-btn--primary {
    background: var(--as-color-accent-brand);   /* $primary #056ab4 */
    color: var(--as-color-white);
    border-color: var(--as-color-accent-brand);
}
.as-btn--primary:hover {
    background: var(--as-color-navy);        /* Navy (zentraler Token) */
    border-color: var(--as-color-navy);
    color: var(--as-color-white);
}

/* ---- outline (transparent, blauer Rahmen/Text, Hover gefüllt) ---- */
.as-btn--outline {
    background: transparent;
    color: var(--as-color-accent-brand);
    border-color: var(--as-color-accent-brand);
}
.as-btn--outline:hover {
    background: var(--as-color-accent-brand);
    color: var(--as-color-white);
    border-color: var(--as-color-accent-brand);
}

/* ---- secondary-link (Text-Link mit herausschwebendem Pfeil) ---- */
.as-btn--secondary-link {
    background: transparent;
    color: var(--as-color-accent-brand);
    border-color: transparent;
    padding: 0;
    margin-right: calc(var(--as-btn-arrow-w, 1.5625rem) + 40px); /* Platz für Pfeil */
    position: relative;
}
.as-btn--secondary-link:hover {
    color: var(--as-color-navy);
    transform: none;
}
.as-btn--secondary-link::after {
    content: "";
    position: absolute;
    right: calc(var(--as-btn-arrow-w, 1.5625rem) * -1 - 20px);
    top: 50%;
    transform: translateY(-50%);
    width: var(--as-btn-arrow-w, 1.5625rem);
    height: var(--as-btn-arrow-w, 1.5625rem);
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: right center;
    mask-position: right center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.as-btn--secondary-link:hover::after {
    transform: translateY(-50%) translateX(18%);
}

/* ---- ghost (für dunkle Sektionen) ---- */
.as-btn--ghost {
    background: transparent;
    color: var(--as-color-white);
    border-color: rgba(255, 255, 255, 0.6);
}
.as-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--as-color-white);
    color: var(--as-color-white);
}

/* Automatische Farbanpassung auf dunklen Sektionen (Outline/Secondary-Link) */
.as-text--bg-dark .as-btn--outline,
.as-text--bg-dark .as-btn--secondary-link {
    color: var(--as-color-white);
    border-color: var(--as-color-white);
}
.as-text--bg-dark .as-btn--outline:hover {
    background: var(--as-color-white);
    color: var(--as-color-navy);
    border-color: var(--as-color-white);
}