/* =============================================================================
   SK-Buttons (seitenweit seit 23.09.2026, vorher Seitenstil „Plus"):
   alle Buttons als Pille; Hauptbutton mit Pfeil im Mint-Kreis, der beim Hover nach rechts rückt.
   Lädt nach allen anderen Theme-Styles (functions.php, Priorität 40) und im Editor.
   ============================================================================= */

.btn-primary,
.btn-secondary,
.btn-ghost { border-radius: 999px; }

.btn-primary,
.section-cta-dark .btn-ghost { gap: 14px; padding: 6px 6px 6px 22px; }

.btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; box-shadow: 0 12px 24px -16px rgba(11, 72, 107, .9); }
.btn-primary:hover,
.btn-primary:focus-visible { background: #083650; border-color: #083650; color: #fff; box-shadow: 0 12px 24px -16px rgba(11, 72, 107, .9); }

.btn-primary::after,
.section-cta-dark .btn-ghost::after {
    content: '';
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B486B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 15px no-repeat;
    transition: transform .25s ease;
}
.btn-primary:hover::after,
.section-cta-dark .btn-ghost:hover::after { transform: translateX(3px); }

/* Icons, die schon im Button stehen (Haus, Pfeil, externer Link): der Kreis übernimmt */
.btn-primary > i[class*="fa-"],
.section-cta-dark .btn-ghost > i[class*="fa-"] { display: none; }

.btn-secondary { padding: 12px 22px; }

/* Kontakt im Header: kleiner Kreis */
.nav-cta.btn-primary { padding: 4px 4px 4px 18px; gap: 12px; }
.nav-cta.btn-primary::after { width: 28px; height: 28px; background-size: 13px; }

/* Kleinere Varianten */
.inline-cta-block .btn-primary,
.footer-brand .btn-primary { padding: 5px 5px 5px 18px; gap: 12px; }
.inline-cta-block .btn-primary::after,
.footer-brand .btn-primary::after { width: 30px; height: 30px; background-size: 14px; }

/* Formular-Absenden (Fluent Forms) und Kundenupload: Kreis rechts am Rand. Links so viel Abstand wie beim normalen Pfeil-Button
   (Sebastian 30.09.2026: vorher 54 px links, wirkte leer); nur bei voller Breite links wie rechts, damit der Text mittig steht. */
.fluentform .ff-btn-submit,
.kontakt-form-card .ff-btn-submit { position: relative; display: inline-flex !important; align-items: center; justify-content: center; min-height: 50px; border: 1px solid var(--color-primary) !important; border-radius: 999px !important; padding: 6px 54px 6px 24px !important; box-shadow: 0 12px 24px -16px rgba(11, 72, 107, .9); }
.fo__karte .ff_submit_btn_wrapper .ff-btn-submit,
.kontakt-form-card .ff-btn-submit { padding-left: 54px !important; }
.fluentform .ff-btn-submit::after,
.kmpku__submit.btn-primary::after { content: ''; position: absolute; top: 50%; right: 7px; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B486B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 15px no-repeat; transition: transform .25s ease; }
.fluentform .ff-btn-submit:hover::after { transform: translateX(3px); }
.kmpku__submit.btn-primary { position: relative; min-height: 54px; padding: 6px 56px !important; }
.kmpku__submit.btn-primary:disabled::after { display: none; }

/* Volle Breite (Mobil, Hamburger-Menü): Text mittig, Kreis rechts am Rand */
@media (max-width: 1023px) {
    .nav-cta.btn-primary { position: relative; min-height: 44px; padding: 4px 44px; justify-content: center; }
    .nav-cta.btn-primary::after { position: absolute; top: 50%; right: 6px; width: 32px; height: 32px; margin-top: -16px; }
}
@media (max-width: 767px) {
    .hero-actions .btn-primary,
    .lp-split__btn.btn-primary,
    .footer-brand .btn-primary { position: relative; min-height: 48px; padding: 6px 50px; justify-content: center; text-align: center; white-space: normal; line-height: 1.25; }
    .hero-actions .btn-primary::after,
    .lp-split__btn.btn-primary::after,
    .footer-brand .btn-primary::after { position: absolute; top: 50%; right: 6px; width: 36px; height: 36px; margin-top: -18px; }
    .hero-actions .btn-secondary { justify-content: center; min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
    .btn-primary::after,
    .section-cta-dark .btn-ghost::after { transition: none; }
}