/**
 * TEN Button System — Soft Precision (DE / WCAG-aware)
 * Loads after main.css. Style hierarchy > CI; TEN red used with restraint.
 *
 * Hierarchy
 *   Primary   .btn-ten / .btn-checkin / .button_red  — solid, one clear CTA
 *   Secondary .btn-ten--secondary / .btn-myten (desktop) — outline
 *   Ghost     .btn-ten--ghost / .button_arrow (desktop) — text + arrow
 *   Mobile    secondary/ghost → hero-style underline links where appropriate
 *
 * Specs (DE / EN 301 549 / WCAG 2.2): min hit ≥44×44, contrast ≥4.5:1,
 * focus-visible ring, gap between sibling CTAs ≥12px.
 */
:root {
  --ten-btn-ink: #1a1a1a;
  --ten-btn-muted: #5a5a5a;
  --ten-btn-red: #cc0607;
  --ten-btn-red-hover: #a80506;
  --ten-btn-red-soft: rgba(204, 6, 7, 0.08);
  --ten-btn-line: #d4d4d4;
  --ten-btn-radius: 6px;
  --ten-btn-pad-y: 12px;
  --ten-btn-pad-x: 22px;
  --ten-btn-font: 14px;
  --ten-btn-weight: 600;
  --ten-btn-tracking: 0.01em;
  --ten-btn-gap: 8px;
  --ten-btn-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ten-btn-shadow: 0 8px 24px rgba(204, 6, 7, 0.18);
  --ten-btn-focus: 0 0 0 2px #fff, 0 0 0 4px var(--ten-btn-red);
}

/* ------------------------------------------------------------------
   Primary — shared shell (.btn-ten / .btn-checkin)
   ------------------------------------------------------------------ */
a.btn-checkin,
.btn-checkin,
a.btn-ten,
.btn-ten,
button.btn-ten,
button.btn-checkin {
  --ten-track: transparent;
  --ten-red-muted: transparent;
  --ten-red: var(--ten-btn-red);
  --checkin-red: var(--ten-btn-red);
  --checkin-charcoal: var(--ten-btn-ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ten-btn-gap);
  overflow: visible;
  isolation: auto;
  box-sizing: border-box;
  min-height: 44px;
  border-radius: var(--ten-btn-radius) !important;
  text-decoration: none !important;
  color: #fff !important;
  font-weight: var(--ten-btn-weight);
  font-size: var(--ten-btn-font);
  letter-spacing: var(--ten-btn-tracking);
  line-height: 1.25;
  border: 1px solid transparent !important;
  padding: var(--ten-btn-pad-y) var(--ten-btn-pad-x) !important;
  margin: 0;
  background: var(--ten-btn-red) !important;
  background-image: none !important;
  filter: none !important;
  box-shadow: none !important;
  transform: none;
  vertical-align: middle;
  cursor: pointer;
  transition:
    background-color 0.28s var(--ten-btn-ease),
    border-color 0.28s var(--ten-btn-ease),
    color 0.28s var(--ten-btn-ease),
    box-shadow 0.28s var(--ten-btn-ease),
    transform 0.28s var(--ten-btn-ease);
  -webkit-appearance: none;
  appearance: none;
}

/* Kill dual-track fill pseudo */
a.btn-checkin::before,
.btn-checkin::before,
a.btn-ten::before,
.btn-ten::before {
  content: none !important;
  display: none !important;
}

a.btn-checkin:hover,
.btn-checkin:hover,
a.btn-checkin:focus-visible,
.btn-checkin:focus-visible,
a.btn-ten:hover,
.btn-ten:hover,
a.btn-ten:focus-visible,
.btn-ten:focus-visible {
  color: #fff !important;
  opacity: 1;
  background: var(--ten-btn-red-hover) !important;
  background-image: none !important;
  box-shadow: var(--ten-btn-shadow) !important;
  transform: translateY(-1px);
}

a.btn-checkin:active,
.btn-checkin:active,
a.btn-ten:active,
.btn-ten:active {
  transform: translateY(0);
  box-shadow: none !important;
}

a.btn-checkin:focus-visible,
.btn-checkin:focus-visible,
a.btn-ten:focus-visible,
.btn-ten:focus-visible {
  outline: none;
  box-shadow: var(--ten-btn-focus), var(--ten-btn-shadow) !important;
}

.btn-checkin__label,
.btn-ten__label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  min-width: 0;
  padding: 0 !important;
  margin: 0;
  background: transparent !important;
  color: inherit !important;
  white-space: nowrap;
  transition: none;
}

a.btn-checkin:hover .btn-checkin__label,
.btn-checkin:hover .btn-checkin__label,
a.btn-checkin:focus-visible .btn-checkin__label,
.btn-checkin:focus-visible .btn-checkin__label,
a.btn-ten:hover .btn-ten__label,
.btn-ten:hover .btn-ten__label,
a.btn-ten:focus-visible .btn-ten__label,
.btn-ten:focus-visible .btn-ten__label {
  background: transparent !important;
}

.btn-checkin__arrow,
.btn-ten__arrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  padding: 0;
  margin: 0;
  background: transparent !important;
  color: inherit !important;
  font-size: 1.05em;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.35s var(--ten-btn-ease);
}

a.btn-checkin:hover .btn-checkin__arrow,
.btn-checkin:hover .btn-checkin__arrow,
a.btn-checkin:focus-visible .btn-checkin__arrow,
.btn-checkin:focus-visible .btn-checkin__arrow,
a.btn-ten:hover .btn-ten__arrow,
.btn-ten:hover .btn-ten__arrow,
a.btn-ten:focus-visible .btn-ten__arrow,
.btn-ten:focus-visible .btn-ten__arrow {
  transform: translateX(3px);
}

.btn-checkin--inactive,
a.btn-checkin.btn-checkin--inactive,
.btn-ten--inactive,
a.btn-ten.btn-ten--inactive {
  cursor: not-allowed;
  opacity: 0.45;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
}

.btn-checkin.button_small,
.btn-ten.button_small,
.button_small.btn-checkin,
.button_small.btn-ten {
  min-height: 40px;
  padding: 9px 16px !important;
  font-size: 13px;
}

.btn-checkin.button_small .btn-checkin__label,
.btn-ten.button_small .btn-ten__label,
.button_small.btn-checkin .btn-checkin__label,
.button_small.btn-ten .btn-ten__label {
  padding: 0 !important;
  font-size: inherit;
}

.btn-checkin.button_small .btn-checkin__arrow,
.btn-ten.button_small .btn-ten__arrow,
.button_small.btn-checkin .btn-checkin__arrow,
.button_small.btn-ten .btn-ten__arrow {
  flex-basis: auto;
  width: auto;
  font-size: 1em;
}

/* Icon CTA */
.btn-ten--icon .btn-ten__label {
  gap: 10px;
  padding: 0 !important;
}
.btn-ten--icon .btn-ten__label img {
  display: block;
  width: 18px;
  height: auto;
  flex-shrink: 0;
}
.btn-ten--icon .btn-ten__text {
  display: inline-block;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  line-height: 1.2;
}

/* ------------------------------------------------------------------
   Secondary — outline (correct / back / quiet actions)
   ------------------------------------------------------------------ */
a.btn-ten.btn-ten--secondary,
.btn-ten.btn-ten--secondary,
button.btn-ten.btn-ten--secondary,
a.btn-checkin.btn-ten--secondary {
  color: var(--ten-btn-ink) !important;
  background: #fff !important;
  border-color: var(--ten-btn-ink) !important;
  box-shadow: none !important;
}

a.btn-ten.btn-ten--secondary:hover,
.btn-ten.btn-ten--secondary:hover,
a.btn-ten.btn-ten--secondary:focus-visible,
.btn-ten.btn-ten--secondary:focus-visible,
button.btn-ten.btn-ten--secondary:hover,
button.btn-ten.btn-ten--secondary:focus-visible {
  color: var(--ten-btn-red) !important;
  background: #fff !important;
  border-color: var(--ten-btn-red) !important;
  box-shadow: 0 6px 18px rgba(26, 26, 26, 0.08) !important;
  transform: translateY(-1px);
}

/* ------------------------------------------------------------------
   Ghost — text + arrow (Mehr / Abbrechen / tertiary)
   ------------------------------------------------------------------ */
a.btn-ten.btn-ten--ghost,
.btn-ten.btn-ten--ghost,
button.btn-ten.btn-ten--ghost {
  color: var(--ten-btn-ink) !important;
  background: transparent !important;
  border-color: transparent !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  font-weight: 500;
}

a.btn-ten.btn-ten--ghost::after,
.btn-ten.btn-ten--ghost::after {
  content: none;
}

a.btn-ten.btn-ten--ghost:hover,
.btn-ten.btn-ten--ghost:hover,
a.btn-ten.btn-ten--ghost:focus-visible,
.btn-ten.btn-ten--ghost:focus-visible,
button.btn-ten.btn-ten--ghost:hover,
button.btn-ten.btn-ten--ghost:focus-visible {
  color: var(--ten-btn-red) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none;
}

a.btn-ten.btn-ten--ghost .btn-ten__label,
.btn-ten.btn-ten--ghost .btn-ten__label {
  position: relative;
}

a.btn-ten.btn-ten--ghost .btn-ten__label::after,
.btn-ten.btn-ten--ghost .btn-ten__label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.32s var(--ten-btn-ease);
}

a.btn-ten.btn-ten--ghost:hover .btn-ten__label::after,
.btn-ten.btn-ten--ghost:hover .btn-ten__label::after,
a.btn-ten.btn-ten--ghost:focus-visible .btn-ten__label::after,
.btn-ten.btn-ten--ghost:focus-visible .btn-ten__label::after {
  transform: scaleX(1);
}

/* Destructive quiet (cancel) — ghost, red on hover */
a.btn-ten.btn-ten--danger-ghost,
.btn-ten.btn-ten--danger-ghost {
  color: var(--ten-btn-muted) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
  font-weight: 500;
}
a.btn-ten.btn-ten--danger-ghost:hover,
.btn-ten.btn-ten--danger-ghost:hover,
a.btn-ten.btn-ten--danger-ghost:focus-visible,
.btn-ten.btn-ten--danger-ghost:focus-visible {
  color: var(--ten-btn-red) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none;
}

/* ------------------------------------------------------------------
   My TEN® — desktop secondary; mobile hero-text (kept)
   ------------------------------------------------------------------ */
@media screen and (min-width: 1161px) {
  .head .head2 > .inner .loginnav li.last > a.open_loginform.btn-myten,
  .head .loginnav .btn-myten,
  a.btn-myten {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 9px 18px !important;
    background: #fff !important;
    color: var(--ten-btn-ink) !important;
    border: 1px solid var(--ten-btn-ink) !important;
    border-radius: var(--ten-btn-radius) !important;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: var(--ten-btn-tracking);
    line-height: 1.2;
    text-decoration: none;
    box-shadow: none !important;
    transform: none;
    transition:
      color 0.25s var(--ten-btn-ease),
      border-color 0.25s var(--ten-btn-ease),
      background-color 0.25s var(--ten-btn-ease),
      box-shadow 0.25s var(--ten-btn-ease),
      transform 0.25s var(--ten-btn-ease);
  }
  .head .head2 > .inner .loginnav li.last > a.open_loginform.btn-myten:hover,
  .head .loginnav .btn-myten:hover,
  a.btn-myten:hover,
  .head .head2 > .inner .loginnav li.last > a.open_loginform.btn-myten:focus-visible,
  .head .loginnav .btn-myten:focus-visible,
  a.btn-myten:focus-visible {
    opacity: 1;
    color: var(--ten-btn-red) !important;
    border-color: var(--ten-btn-red) !important;
    background: #fff !important;
    box-shadow: 0 6px 18px rgba(26, 26, 26, 0.08) !important;
    transform: translateY(-1px);
  }
  .head .head2 > .inner .loginnav li.last > a.open_loginform.btn-myten:focus-visible,
  a.btn-myten:focus-visible {
    outline: none;
    box-shadow: var(--ten-btn-focus) !important;
  }
}

/* Authenticated portal link: override the generic My TEN login button. */
.head a.btn-myten.btn-myten--portal,
.head .loginnav.loginnav--authenticated a.btn-myten.btn-myten--portal {
  color: #ffffff !important;
  background: transparent !important;
  border-color: #ffffff !important;
  position: relative;
  z-index: 92;
  pointer-events: auto !important;
}
.head a.btn-myten.btn-myten--portal::before,
.head a.btn-myten.btn-myten--portal::after {
  pointer-events: none !important;
}
.head a.btn-myten.btn-myten--portal,
.head a.btn-myten.btn-myten--portal * {
  color: #ffffff !important;
}
.head a.btn-myten.btn-myten--portal {
  cursor: pointer;
}
.head a.btn-myten.btn-myten--portal:hover,
.head a.btn-myten.btn-myten--portal:focus,
.head .loginnav.loginnav--authenticated a.btn-myten.btn-myten--portal:hover,
.head .loginnav.loginnav--authenticated a.btn-myten.btn-myten--portal:focus {
  color: #ffffff !important;
  background: rgba(217, 4, 41, 0.92) !important;
  border-color: #d90429 !important;
}

/* ------------------------------------------------------------------
   Legacy .button_red / .button_yellow / form submits → primary
   ------------------------------------------------------------------ */
a.button_red:not(.btn-ten):not(.btn-checkin),
.button_red:not(.btn-ten):not(.btn-checkin),
a.button_yellow:not(.btn-ten):not(.btn-checkin),
.button_yellow:not(.btn-ten):not(.btn-checkin),
input.order_btn[type="submit"],
button.order_btn:not(.btn-ten),
.order_btn:not(.btn-ten):not(.btn-checkin),
.iconbutton a.button_red:not(.btn-ten),
.tx-courses a.button_red:not(.btn-ten):not(.btn-checkin),
.tx-courses .button_red:not(.btn-ten):not(.btn-checkin),
.tx-courses a.button_yellow:not(.btn-ten),
.tx-courses .button_yellow:not(.btn-ten),
.tx-powermail input[type="submit"],
form .submit_wrap input[type="submit"],
.femanager input[type="submit"],
.femanager button[type="submit"]:not(.btn-ten) {
  --ten-track: transparent;
  --ten-red-muted: transparent;
  --ten-red: var(--ten-btn-red);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ten-btn-gap);
  overflow: visible;
  isolation: auto;
  box-sizing: border-box;
  min-height: 44px;
  border-radius: var(--ten-btn-radius) !important;
  text-decoration: none !important;
  color: #fff !important;
  font-weight: var(--ten-btn-weight);
  font-size: var(--ten-btn-font);
  letter-spacing: var(--ten-btn-tracking);
  line-height: 1.25;
  border: 1px solid transparent !important;
  padding: var(--ten-btn-pad-y) 28px var(--ten-btn-pad-y) var(--ten-btn-pad-x) !important;
  margin: 0;
  background: var(--ten-btn-red) !important;
  background-image: none !important;
  filter: none !important;
  box-shadow: none !important;
  transform: none;
  cursor: pointer;
  vertical-align: middle;
  transition:
    background-color 0.28s var(--ten-btn-ease),
    box-shadow 0.28s var(--ten-btn-ease),
    transform 0.28s var(--ten-btn-ease);
  -webkit-appearance: none;
  appearance: none;
}

a.button_red:not(.btn-ten):not(.btn-checkin)::before,
.button_red:not(.btn-ten):not(.btn-checkin)::before,
a.button_yellow:not(.btn-ten):not(.btn-checkin)::before,
.button_yellow:not(.btn-ten):not(.btn-checkin)::before,
button.order_btn:not(.btn-ten)::before,
.order_btn:not(input):not(.btn-ten):not(.btn-checkin)::before,
.iconbutton a.button_red:not(.btn-ten)::before,
.tx-courses a.button_red:not(.btn-ten):not(.btn-checkin)::before,
.tx-courses .button_red:not(.btn-ten):not(.btn-checkin)::before,
.tx-courses a.button_yellow:not(.btn-ten)::before,
.tx-courses .button_yellow:not(.btn-ten)::before,
.femanager button[type="submit"]:not(.btn-ten)::before {
  content: none !important;
  display: none !important;
}

a.button_red:not(.btn-ten):not(.btn-checkin)::after,
.button_red:not(.btn-ten):not(.btn-checkin)::after,
a.button_yellow:not(.btn-ten):not(.btn-checkin)::after,
.button_yellow:not(.btn-ten):not(.btn-checkin)::after,
button.order_btn:not(.btn-ten)::after,
.order_btn:not(input):not(.btn-ten):not(.btn-checkin)::after,
.iconbutton a.button_red:not(.btn-ten)::after,
.tx-courses a.button_red:not(.btn-ten):not(.btn-checkin)::after,
.tx-courses .button_red:not(.btn-ten):not(.btn-checkin)::after,
.tx-courses a.button_yellow:not(.btn-ten)::after,
.tx-courses .button_yellow:not(.btn-ten)::after {
  content: "→";
  position: static;
  display: inline-flex;
  align-items: center;
  width: auto;
  height: auto;
  margin: 0;
  color: inherit;
  font-size: 1.05em;
  font-weight: 400;
  line-height: 1;
  pointer-events: none;
  transition: transform 0.35s var(--ten-btn-ease);
}

a.button_red:hover,
.button_red:hover,
a.button_red:focus-visible,
.button_red:focus-visible,
a.button_yellow:hover,
.button_yellow:hover,
a.button_yellow:focus-visible,
.button_yellow:focus-visible,
input.order_btn[type="submit"]:hover,
button.order_btn:hover,
.order_btn:hover,
input.order_btn[type="submit"]:focus-visible,
button.order_btn:focus-visible,
.order_btn:focus-visible,
.iconbutton a.button_red:hover,
.tx-courses a.button_red:hover,
.tx-courses .button_red:hover,
.tx-courses a.button_yellow:hover,
.tx-courses .button_yellow:hover,
.tx-powermail input[type="submit"]:hover,
form .submit_wrap input[type="submit"]:hover,
.femanager input[type="submit"]:hover,
.femanager button[type="submit"]:hover {
  color: #fff !important;
  opacity: 1;
  background: var(--ten-btn-red-hover) !important;
  background-image: none !important;
  box-shadow: var(--ten-btn-shadow) !important;
  transform: translateY(-1px);
}

a.button_red:not(.btn-ten):not(.btn-checkin):hover::after,
.button_red:not(.btn-ten):not(.btn-checkin):hover::after,
a.button_yellow:not(.btn-ten):not(.btn-checkin):hover::after,
.button_yellow:not(.btn-ten):not(.btn-checkin):hover::after,
button.order_btn:not(.btn-ten):hover::after,
.order_btn:not(input):not(.btn-ten):not(.btn-checkin):hover::after {
  transform: translateX(3px);
}

input.order_btn[type="submit"],
.tx-powermail input[type="submit"],
form .submit_wrap input[type="submit"],
.femanager input[type="submit"] {
  padding-right: var(--ten-btn-pad-x) !important;
  justify-content: center;
  background-image: none !important;
  background-color: var(--ten-btn-red) !important;
}

input.order_btn[type="submit"]:hover,
input.order_btn[type="submit"]:focus-visible,
.tx-powermail input[type="submit"]:hover,
.tx-powermail input[type="submit"]:focus-visible,
form .submit_wrap input[type="submit"]:hover,
form .submit_wrap input[type="submit"]:focus-visible,
.femanager input[type="submit"]:hover,
.femanager input[type="submit"]:focus-visible {
  background-image: none !important;
  background-color: var(--ten-btn-red-hover) !important;
}

.button_red.button_small,
.button_yellow.button_small,
a.button_red.button_small,
a.button_yellow.button_small {
  min-height: 40px;
  padding: 9px 18px !important;
  font-size: 13px;
}

.button_red.button_small::after,
.button_yellow.button_small::after,
a.button_red.button_small::after,
a.button_yellow.button_small::after {
  width: auto;
  font-size: 1em;
}

.button_red.button_inactiv,
.button_yellow.button_inactiv,
a.button_red.button_inactiv,
a.button_yellow.button_inactiv,
.tx-courses .button_red.button_inactiv {
  pointer-events: none;
  opacity: 0.45;
  cursor: not-allowed;
}

.iconbutton a.button_red {
  gap: 10px;
  align-items: center;
}
.iconbutton a.button_red img {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 18px;
  height: auto;
  margin-right: 0;
  flex-shrink: 0;
}
.iconbutton a.button_red span {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding-left: 10px;
  margin-left: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  line-height: 1.2;
}

/* ------------------------------------------------------------------
   .button_arrow — desktop ghost CTA (no fat red disc)
   ------------------------------------------------------------------ */
a.button_arrow,
.button_arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 44px;
  margin-top: 12px;
  padding: 10px 0 !important;
  color: var(--ten-btn-ink) !important;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-decoration: none !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  white-space: nowrap;
  transition: color 0.25s var(--ten-btn-ease), transform 0.25s var(--ten-btn-ease);
}

a.button_arrow::before,
.button_arrow::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

a.button_arrow::after,
.button_arrow::after {
  content: "→" !important;
  position: static !important;
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  top: auto !important;
  right: auto !important;
  background: none !important;
  background-image: none !important;
  color: inherit !important;
  font-size: 1.05em;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.32s var(--ten-btn-ease);
}

a.button_arrow:hover,
.button_arrow:hover,
a.button_arrow:focus-visible,
.button_arrow:focus-visible {
  color: var(--ten-btn-red) !important;
}

a.button_arrow:hover::after,
.button_arrow:hover::after,
a.button_arrow:focus-visible::after,
.button_arrow:focus-visible::after {
  transform: translateX(4px);
}

a.button_arrow:focus-visible,
.button_arrow:focus-visible {
  outline: 2px solid var(--ten-btn-red);
  outline-offset: 4px;
}

/* On dark / image surfaces keep light ghost */
.text_on_image .button_arrow,
.infoflexiblebox .button_arrow {
  color: #fff !important;
}
.text_on_image .button_arrow:hover,
.infoflexiblebox .button_arrow:hover {
  color: #fff !important;
  opacity: 0.9;
}

/* ------------------------------------------------------------------
   Login / form chrome — quieter secondary
   ------------------------------------------------------------------ */
.loginform_wrap input[type="submit"],
.loginform_wrap button[type="submit"],
.tx-courses .registration_header .loginbutton_wrap a,
.tx-courses .registration_header .loginbutton_wrap .button_red {
  min-height: 44px;
  border-radius: var(--ten-btn-radius) !important;
}

/* Sibling CTA spacing (DE form pattern: cancel left, primary right) */
.tx-courses .submit_btn_wrap,
.tx-courses .newOrderForm_check .submit_btn_wrap,
.btn-row,
.checkout-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

/* Course list Check-in: keep compact but on-system */
.tx-courses TR.appointment TD.cell_btn A.btn-checkin,
.tx-courses .appointment .btn-checkin {
  min-height: 40px;
  padding: 9px 16px !important;
  font-size: 13px;
}

/* ------------------------------------------------------------------
   Mobile ≤1160 — hero-style text for secondary; primary stays solid but slim
   ------------------------------------------------------------------ */
@media screen and (max-width: 1160px) {
  a.btn-ten,
  .btn-ten,
  button.btn-ten,
  a.btn-checkin,
  .btn-checkin,
  button.btn-checkin {
    min-height: 44px;
    padding: 11px 18px !important;
    font-size: 14px;
    border-radius: var(--ten-btn-radius) !important;
  }

  /* Ghost / secondary → underline text links (hero language) */
  a.btn-ten.btn-ten--secondary,
  .btn-ten.btn-ten--secondary,
  button.btn-ten.btn-ten--secondary,
  a.btn-ten.btn-ten--ghost,
  .btn-ten.btn-ten--ghost,
  button.btn-ten.btn-ten--ghost,
  a.btn-ten.btn-ten--danger-ghost,
  .btn-ten.btn-ten--danger-ghost {
    min-height: 44px;
    padding: 10px 0 !important;
    color: #404040 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-weight: 500;
    font-size: 14px;
    transform: none !important;
  }

  a.btn-ten.btn-ten--secondary:hover,
  .btn-ten.btn-ten--secondary:hover,
  a.btn-ten.btn-ten--ghost:hover,
  .btn-ten.btn-ten--ghost:hover,
  a.btn-ten.btn-ten--danger-ghost:hover,
  .btn-ten.btn-ten--danger-ghost:hover {
    color: var(--ten-btn-red) !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  a.button_arrow,
  .button_arrow {
    min-height: 44px;
    font-size: 14px;
    font-weight: 500;
    color: #404040 !important;
  }
}

@media screen and (max-width: 768px) {
  .btn-checkin__label,
  .btn-ten__label {
    padding: 0 !important;
    font-size: inherit;
  }
  .btn-checkin__arrow,
  .btn-ten__arrow {
    flex-basis: auto;
    width: auto;
    font-size: 1.05em;
  }
}

/* ------------------------------------------------------------------
   Contact actions (mail / phone / whatsapp) — text-link, not chunky pills
   ------------------------------------------------------------------ */
a.mail,
a.phone,
a.whatsapp,
a.fax,
.mail a,
.phone a,
.whatsapp a {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 44px;
  padding: 8px 0;
  color: var(--ten-btn-ink);
  font-weight: 500;
  text-decoration: none;
  border-radius: 0;
  transition: color 0.22s var(--ten-btn-ease);
}
a.mail:hover,
a.phone:hover,
a.whatsapp:hover,
a.fax:hover,
.mail a:hover,
.phone a:hover,
.whatsapp a:hover {
  color: var(--ten-btn-red);
}

/* ------------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  a.btn-ten,
  .btn-ten,
  a.btn-checkin,
  .btn-checkin,
  a.button_red,
  .button_red,
  a.button_yellow,
  .button_yellow,
  a.button_arrow,
  .button_arrow,
  a.btn-myten {
    transition: none !important;
  }
  a.btn-ten:hover,
  .btn-ten:hover,
  a.btn-checkin:hover,
  .btn-checkin:hover,
  a.button_red:hover,
  .button_red:hover {
    transform: none !important;
  }
  a.btn-ten:hover .btn-ten__arrow,
  .btn-ten:hover .btn-ten__arrow,
  a.btn-checkin:hover .btn-checkin__arrow,
  .btn-checkin:hover .btn-checkin__arrow,
  a.button_arrow:hover::after,
  .button_arrow:hover::after {
    transform: none !important;
  }
}