/* ============================================================================
   assets/css/cta.css - CTA system B1 "Fließende Insel" (2026-10-02, the owner's choice from the CTA
   prototype https://claude.ai/artifact/XuMRmVGZQzGA84wLwvnpYj). Restyles every
   .fill-btn (primary) and .outline-btn (on dark) at the source; sizes stay per context.
   - pill shape like the island header; the gradient keeps flowing on hover (0.6s)
   - coral stops are #c2411f (branding tokens coralInkOnLight, widened for buttons on
     2026-10-02): white label 5.16:1 at every point of the flow (was 3.87:1 on #e55a37)
   - the arrow sits in its own circle; on hover the circle turns white, the arrow navy
   - outline on dark: a glass pill with a hairline that fills with the gradient on hover;
     no glow shadow any more
   - states: hover, focus-visible (white + navy double ring, readable on light and dark),
     pressed, disabled; reduced motion turns the hover into an instant colour change
   ========================================================================== */
.fill-btn,
.outline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
}

.fill-btn {
  background-image: linear-gradient(to right, #c2411f 0%, #003996 33.333%, #003996 66.667%, #c2411f 100%);
  background-size: 300% 100%;
  background-position: 0 0;
  transition: background-position 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.12s ease, box-shadow 0.2s ease;
}

.fill-btn:hover {
  background-position: 100% 0;
  transition: background-position 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.12s ease, box-shadow 0.2s ease;
}

/* the arrow's circle: always there, white on hover */
.fill-btn svg,
.outline-btn svg {
  flex: none;
  width: 1.65em;
  height: 1.65em;
  margin: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  transition: background-color 0.3s ease, transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.fill-btn svg path,
.outline-btn svg path {
  transition: fill 0.3s ease;
}

.fill-btn:hover svg,
.outline-btn:hover svg,
.fill-btn:focus-visible svg,
.outline-btn:focus-visible svg {
  width: 1.65em;
  height: 1.65em;
  background: #ffffff;
  transform: translateX(3px);
}

.fill-btn:hover svg path,
.outline-btn:hover svg path,
.fill-btn:focus-visible svg path,
.outline-btn:focus-visible svg path {
  fill: #14213d;
}

/* Size (owner 2026-10-03: the long label looked cramped - the 39px button left 4px above
   and below the 30px arrow circle). In em, so it scales with each context's font size:
   2.75em high (~50px at 18px), the arrow circle the same distance from the top, bottom
   and right edge (0.55em), the label 1.3em from the left; without an arrow the same
   room on both sides. */
.fill-btn,
.outline-btn {
  min-height: 2.75em;
  padding: 0 0.55em 0 1.3em;
  gap: 0.6em;
}

.fill-btn:not(:has(svg)),
.outline-btn:not(:has(svg)) {
  padding: 0 1.3em;
}

.outline-btn.round-btn {
  padding: 0;
}

/* outline on dark: glass pill + hairline; the gradient fills it on hover */
.outline-btn {
  isolation: isolate;
  border: 0 !important;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: box-shadow 0.3s ease, transform 0.12s ease;
}

.outline-btn:hover {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0);
}

.outline-btn::before,
.outline-btn:hover::before {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(to right, #c2411f 0%, #003996 33.333%, #003996 66.667%, #c2411f 100%);
  background-size: 300% 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.outline-btn:hover::before,
.outline-btn:focus-visible::before {
  opacity: 1;
}

/* the icon-only round button keeps its plain arrow */
.outline-btn.round-btn svg,
.outline-btn.round-btn:hover svg {
  width: auto;
  height: auto;
  margin: 0;
  background: transparent;
  transform: none;
}

.outline-btn.round-btn:hover svg path {
  fill: #ffffff;
}

/* focus: a double ring that reads on light and dark grounds */
.fill-btn:focus-visible,
.outline-btn:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #14213d;
}

/* pressed */
.fill-btn:active,
.outline-btn:active {
  transform: scale(0.98);
}

.fill-btn:active {
  box-shadow: inset 0 0 0 999px rgba(7, 13, 19, 0.16);
}

/* disabled */
.fill-btn:disabled,
.fill-btn[aria-disabled="true"],
.fill-btn.disabled {
  background-image: none;
  background-color: rgba(20, 33, 61, 0.08);
  color: #7d8594;
  cursor: not-allowed;
  transform: none;
}

.fill-btn:disabled svg,
.fill-btn[aria-disabled="true"] svg,
.fill-btn.disabled svg {
  background: transparent;
  transform: none;
}

.fill-btn:disabled svg path,
.fill-btn[aria-disabled="true"] svg path,
.fill-btn.disabled svg path {
  fill: #7d8594;
}

@media (prefers-reduced-motion: reduce) {
  .fill-btn,
  .fill-btn:hover,
  .outline-btn,
  .outline-btn::before,
  .fill-btn svg,
  .outline-btn svg {
    transition-duration: 0s !important;
  }

  .fill-btn:hover svg,
  .outline-btn:hover svg,
  .fill-btn:active,
  .outline-btn:active {
    transform: none;
  }
}

/* The landing page /schnittstellen sizes its buttons in schnittstellen.css with fixed
   10-12px corners; the shape follows the system there too. */
.lp .fill-btn,
.lp .lp-cta-lg,
.lp .lp-header-cta,
.lp .lp-stickybar-cta,
.lp .lp-wiz-next {
  border-radius: 999px !important;
}

/* ... and its size: the large funnel buttons had fixed 17px/32px padding and a 24px
   arrow - the arrow sat 32px from the right but 17px from top and bottom. */
.lp .lp-cta-lg {
  min-height: 2.75em;
  padding: 0 0.55em 0 1.3em !important;
}

.lp .lp-cta-lg:not(:has(svg)),
.lp .lp-wiz-next:not(:has(svg)) {
  padding: 0 1.3em !important;
}

.lp .fill-btn svg {
  width: 1.65em;
  height: 1.65em;
}