/* C25 · Button — design-system.md §4.4. Four variants, no more. */
@layer components {
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--tap);
    padding-inline: var(--space-4);
    padding-block: var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    letter-spacing: 0.01em;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
  }
  .btn:active { transform: translateY(1px); }

  /* Light surface */
  .btn--primary {
    background: var(--brand);
    color: var(--ink);
  }
  .btn--primary:hover { background: var(--brand-fill-alt); }

  .btn--secondary {
    background: transparent;
    color: var(--brand-ink);
    border: 1px solid var(--brand-ink);
  }

  .btn--ghost {
    background: transparent;
    color: var(--brand-ink);
  }

  .btn--link {
    background: transparent;
    color: var(--brand-ink);
    text-decoration: underline;
    padding: 0;
    min-height: auto;
  }
  .btn--link::after {
    content: "\00A0\203A";
    transition: transform var(--dur-fast) var(--ease);
  }
  .btn--link:hover::after { transform: translateX(3px); }
  @media (prefers-reduced-motion: reduce) {
    .btn--link:hover::after { transform: none; }
  }
  /* Das › ist die Weiter-Geste: "hier geht es zu einer anderen Seite". Ein
     tel:- oder mailto:-Link geht nirgendwo hin, er startet einen Anruf oder
     eine Mail — hinter der Telefonnummer im cta-band stand das Zeichen
     deshalb als Fremdkörper auf jeder Seite der Site (Daniel, 17.09.2026).
     Die Regel sitzt am href statt an einer eigenen Variante, damit sie auch
     dann noch greift, wenn irgendwann ein weiterer Anruf-Link dazukommt. */
  .btn--link[href^="tel:"]::after,
  .btn--link[href^="mailto:"]::after { content: none; }

  /* Dark surface — inside .section--deep, .cta-band, .site-footer */
  .section--deep .btn--primary,
  .cta-band .btn--primary {
    color: var(--deep);
  }
  .section--deep .btn--secondary,
  .cta-band .btn--secondary {
    color: var(--on-deep);
    border-color: var(--rule-on-deep);
  }
  .section--deep .btn--ghost,
  .cta-band .btn--ghost {
    color: var(--on-deep);
  }
  .btn[aria-disabled="true"] {
    background: var(--rule);
    color: var(--ink-subtle);
    cursor: not-allowed;
  }

  @media (max-width: 30rem) {
    .btn--block-mobile { width: 100%; }
  }
}