/* ==========================================================================
   Button-System "A Kante" – 29.09.2026
   Eckig, Headline-Schrift, rechts schräg angeschnitten (Echo der Hero-Diagonale), Pfeil.
   Zweitaktionen (Outline-Buttons) werden Textlinks mit grünem Strich.
   Farben bleiben wie redaktionell gesetzt. Lädt nach sms.css und kurse.css.
   Rollback: zsh _snapshot-buttons-2026-09-29/restore-buttons.sh
   ========================================================================== */

:root {
  --btn-cut: 14px;
  --btn-font: var(--wp--preset--font-family--big-shoulders), "Arial Narrow", sans-serif;
  --btn-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M0 6h13M9 1.5 13.5 6 9 10.5' stroke='black' stroke-width='2.4' fill='none'/%3E%3C/svg%3E");
  --btn-shade: rgba(19, 35, 44, 0.16);
}

/* --- 1 Primäre Buttons: Form und Schrift -------------------------------- */
.wp-block-button .wp-block-button__link,
.sms-levels-more a,
.sms-review-actions a.sms-rev-primary,
.sms-checkin-btn,
.sms-offer-card a.sms-offer-btn,
.sms-map-consent .sms-map-load,
.wpcf7 input.wpcf7-submit,
.sms-form-card input[type=submit],
.sms-kurse .sms-course-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  font-family: var(--btn-font);
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.86em calc(1.05em + var(--btn-cut)) 0.82em 1.05em;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  transform: none;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--btn-cut)) 100%, 0 100%);
  background-image: linear-gradient(transparent, transparent);
  transition: clip-path 0.18s ease, background-image 0.18s ease;
  cursor: pointer;
}

/* Hover: Kante wird fast gerade, Fläche leicht abgedunkelt, kein Hochhüpfen */
.wp-block-button .wp-block-button__link:hover,
.sms-levels-more a:hover,
.sms-review-actions a.sms-rev-primary:hover,
.sms-checkin-btn:hover,
.sms-offer-card a.sms-offer-btn:hover,
.sms-map-consent .sms-map-load:hover,
.wpcf7 input.wpcf7-submit:hover,
.sms-form-card input[type=submit]:hover,
.sms-kurse .sms-course-btn:hover {
  clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
  background-image: linear-gradient(var(--btn-shade), var(--btn-shade));
  transform: none;
  filter: none;
}

/* Fokus: Ring nach innen (ein Outline würde vom Anschnitt abgeschnitten) */
.wp-block-button .wp-block-button__link:focus-visible,
.sms-levels-more a:focus-visible,
.sms-review-actions a.sms-rev-primary:focus-visible,
.sms-checkin-btn:focus-visible,
.sms-offer-card a.sms-offer-btn:focus-visible,
.sms-map-consent .sms-map-load:focus-visible,
.wpcf7 input.wpcf7-submit:focus-visible,
.sms-form-card input[type=submit]:focus-visible,
.sms-kurse .sms-course-btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px var(--wp--preset--color--contrast);
  transform: none;
  filter: none;
}

/* --- 2 Pfeil (nur im Inhalt; nicht im Header, nicht bei Inputs, nicht wenn "→" schon im Text steht) */
main .wp-block-button .wp-block-button__link::after,
.sms-levels-more a::after,
.sms-review-actions a::after,
.sms-checkin-btn::after,
.sms-map-consent .sms-map-load::after,
.sms-kurse .sms-course-btn::after {
  content: "";
  flex: none;
  width: 1em;
  height: 0.75em;
  background: currentColor;
  -webkit-mask: var(--btn-arrow) center / contain no-repeat;
  mask: var(--btn-arrow) center / contain no-repeat;
  transition: transform 0.18s ease;
}
main .wp-block-button .wp-block-button__link:hover::after,
.sms-levels-more a:hover::after,
.sms-review-actions a:hover::after,
.sms-checkin-btn:hover::after,
.sms-map-consent .sms-map-load:hover::after,
.sms-kurse .sms-course-btn:hover::after {
  transform: translateX(4px);
}

/* --- 3 Zweitaktion: Textlink mit grünem Strich statt Outline-Pille ------- */
.wp-block-button.is-style-outline .wp-block-button__link,
.sms-review-actions a:not(.sms-rev-primary) {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--btn-font);
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  background-color: transparent;
  background-image: none;
  border: 0;
  border-bottom: 3px solid var(--wp--preset--color--secondary);
  border-radius: 0;
  padding: 0.4em 0 0.32em;
  clip-path: none;
  box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.sms-review-actions a:not(.sms-rev-primary):hover {
  background-image: none;
  clip-path: none;
  border-bottom-color: currentColor;
}
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
.sms-review-actions a:not(.sms-rev-primary):focus-visible {
  box-shadow: none;
  outline: 3px solid var(--wp--preset--color--secondary);
  outline-offset: 3px;
}

/* --- 4 Header-Button: gleiche Form, ruhiger ------------------------------ */
header .wp-block-button .wp-block-button__link {
  --btn-cut: 10px;
  font-size: 1rem;
  padding: 0.72em calc(0.9em + var(--btn-cut)) 0.68em 0.9em;
}
@media (min-width: 481px) and (max-width: 640px) {
  header .wp-block-button .wp-block-button__link {
    font-size: 0.95rem !important;
    padding-left: 12px !important;
    padding-right: 22px !important;
  }
}
@media (max-width: 480px) {
  header .wp-block-button .wp-block-button__link {
    padding: 10px 24px 10px 14px !important;
  }
  header .wp-block-button .wp-block-button__link::after {
    font-size: 0.95rem !important;
    font-weight: 800;
    letter-spacing: 0.05em;
  }
}

/* --- 5 Ruhige Bewegung ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wp-block-button .wp-block-button__link,
  .sms-levels-more a, .sms-review-actions a, .sms-checkin-btn, .sms-offer-card a.sms-offer-btn,
  .sms-map-consent .sms-map-load, .wpcf7 input.wpcf7-submit, .sms-form-card input[type=submit],
  .sms-kurse .sms-course-btn,
  main .wp-block-button .wp-block-button__link::after, .sms-levels-more a::after, .sms-review-actions a::after,
  .sms-checkin-btn::after, .sms-map-consent .sms-map-load::after, .sms-kurse .sms-course-btn::after {
    transition: none;
  }
}