/* ============================================================
   Buttons – zentrale Komponenten-SSOT
   Varianten bewusst klein halten: primary, secondary, ghost, outline.
   Designwerte kommen aus variables.css; Layout-Gruppen werden hier
   einheitlich zentriert/gestapelt, besonders auf Mobil.
   ============================================================ */

.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  min-height: var(--button-min-height);
  max-width: 100%;
  padding: var(--button-padding-y) var(--button-padding-x);
  border: var(--button-border-width) solid transparent;
  border-radius: var(--button-radius);
  background-clip: padding-box;
  box-shadow: var(--button-shadow);
  color: var(--color-text);
  cursor: pointer;
  font-family: var(--font-base);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
  text-align: center;
  text-decoration: none;
  white-space: normal;
  transition:
    transform var(--glow-speed) var(--glow-ease),
    box-shadow var(--glow-speed) var(--glow-ease),
    background var(--glow-speed) var(--glow-ease),
    border-color var(--glow-speed) var(--glow-ease),
    color var(--glow-speed) var(--glow-ease);
}

.btn > i {
  flex-shrink: 0;
}

.btn:is(:hover, :focus-visible) {
  transform: var(--button-hover-transform);
  box-shadow: var(--button-shadow-hover-soft);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--button-focus-shadow);
}

.btn:active {
  transform: var(--button-hover-transform);
}

.btn:is(:disabled, [aria-disabled="true"], .is-disabled) {
  cursor: not-allowed;
  opacity: 0.62;
  transform: none;
  box-shadow: none;
  pointer-events: none;
}

.btn-primary {
  background: var(--button-primary-bg);
  color: var(--color-text-inverse);
  border-color: var(--color-accent);
}

.btn-primary:is(:hover, :focus-visible) {
  box-shadow: var(--button-shadow-hover);
}

.btn-primary:focus-visible {
  box-shadow: var(--button-shadow-hover), var(--glow-focus-ring-strong);
}

.btn-secondary {
  background: var(--color-bg);
  color: var(--color-accent-text);
  border-color: var(--color-accent);
  box-shadow: none;
}

.btn-secondary:is(:hover, :focus-visible) {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  box-shadow: var(--button-shadow-hover-soft);
}

.btn-secondary:focus-visible {
  box-shadow: var(--button-shadow-hover-soft), var(--glow-focus-ring-strong);
}

:is(.dark-section, .karriere-banner) .btn-secondary {
  background: transparent;
  color: var(--color-text-inverse);
  border-color: var(--color-accent-light);
}

:is(.dark-section, .karriere-banner) .btn-secondary:is(:hover, :focus-visible) {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-inverse);
  box-shadow: var(--button-shadow-dark-hover);
}

:is(.dark-section, .karriere-banner) .btn-secondary:focus-visible {
  box-shadow: var(--button-shadow-dark-hover), var(--glow-focus-ring-strong);
}

.btn-ghost {
  background: var(--on-dark-surface-glass);
  color: var(--color-text-inverse);
  border-color: var(--on-dark-border-glass);
  backdrop-filter: blur(var(--blur-md));
  box-shadow: none;
}

.btn-ghost:is(:hover, :focus-visible) {
  background: var(--on-dark-surface-solid);
  box-shadow: var(--button-shadow-dark-hover);
}

.btn-ghost:focus-visible {
  box-shadow: var(--button-shadow-dark-hover), var(--glow-focus-ring-strong);
}

.btn--outline,
.btn-outline {
  background: var(--color-bg);
  color: var(--color-heading);
  border-color: var(--color-border);
  box-shadow: var(--button-shadow);
}

.btn--outline:is(:hover, :focus-visible),
.btn-outline:is(:hover, :focus-visible) {
  color: var(--color-accent-text);
  border-color: var(--color-accent);
  box-shadow: var(--button-shadow-hover);
}

.btn--outline:focus-visible,
.btn-outline:focus-visible {
  box-shadow: var(--button-shadow-hover), var(--glow-focus-ring-strong);
}

.btn-lg {
  min-height: var(--button-min-height-lg);
  padding: var(--button-padding-y-lg) var(--button-padding-x-lg);
  font-size: var(--text-lg);
}

.btn-sm {
  min-height: var(--button-min-height-sm);
  padding: var(--button-padding-y-sm) var(--button-padding-x-sm);
  font-size: var(--text-sm);
}

/* Card-internal reveal CTAs (service/job/story cards): one interaction model. */
.service-card > .service-card-link {
  margin-top: auto;
}

.service-card-link,
.job-card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: gap var(--transition-fast);
}

.service-card-link {
  color: var(--color-accent-text);
}

.job-card-link {
  color: var(--color-accent-text);
  margin-top: var(--space-5);
}

.dark-section .service-card-link {
  color: var(--color-accent-text);
}

.service-card-link:hover,
.job-card-link:hover,
.card-reveal-cta:focus-visible {
  gap: var(--space-3);
}

.service-card:has(a.service-card-link[href]:not(.service-card-link--disabled)):is(:hover, :focus-within) a.service-card-link {
  gap: var(--space-3);
}

.card-reveal-cta,
.story-card-cta,
.jobs-carousel .card-reveal-cta {
  --card-reveal-peek: 1em;
  white-space: nowrap;
}

.story-card-cta,
.jobs-carousel .card-reveal-cta {
  --card-reveal-peek: 1.05em;
  display: inline-flex;
  align-items: center;
  gap: 0;
  max-width: 100%;
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-text);
  text-shadow: none;
}

.card-reveal-wrap,
.story-card-cta .card-reveal-wrap,
.jobs-carousel .card-reveal-cta .card-reveal-wrap {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  vertical-align: top;
}

.card-reveal-track,
.story-card-cta .card-reveal-track,
.jobs-carousel .card-reveal-cta .card-reveal-track {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transform: translateX(0);
  transition: transform 520ms var(--glow-ease);
  will-change: transform;
}

.story-card-cta .card-reveal-track,
.jobs-carousel .card-reveal-cta .card-reveal-track {
  gap: 0.55rem;
  transform: translateX(calc(-100% + var(--card-reveal-peek)));
}

.card-reveal-inner {
  display: block;
}

.card-reveal-arrow,
.story-card-cta .card-reveal-arrow,
.jobs-carousel .card-reveal-cta .card-reveal-arrow {
  flex: 0 0 var(--card-reveal-peek);
  width: var(--card-reveal-peek);
  line-height: 1;
}

.card-reveal-cta > * {
  position: relative;
  z-index: 4;
}

@media (hover: hover) and (pointer: fine) {
  .card-reveal-cta .card-reveal-track {
    transform: translateX(calc(-100% + var(--card-reveal-peek)));
  }

  :is(.service-card, .job-card, .section-media--card, .mpk-recruit--card, .machinery-teaser__card):is(:hover, :focus-within) .card-reveal-track,
  .card-reveal-cta:is(:hover, :focus-visible) .card-reveal-track,
  .story-card:hover .story-card-cta .card-reveal-track,
  .story-card:focus-visible .story-card-cta .card-reveal-track,
  .jobs-carousel .job-card:hover .card-reveal-cta .card-reveal-track,
  .jobs-carousel .job-card:focus-visible .card-reveal-cta .card-reveal-track {
    transform: translateX(0);
  }
}

@media (hover: none), (pointer: coarse) {
  .story-card-cta .card-reveal-track,
  .jobs-carousel .card-reveal-cta .card-reveal-track {
    transform: none;
    transition: none;
    will-change: auto;
  }
}

:where(.section-cta, .cta-row, .two-col-actions, .mpk-recruit__actions, .proc-final__actions, .karriere-actions, .hero-actions, .page-hero-cta, .kontakt-hero-cta, .faq-cta, .bm-cc-actions, .consent-embed-overlay-actions) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--button-group-gap);
}

.section-cta {
  justify-content: center;
  margin-top: var(--space-12);
  text-align: center;
}

.cta-section .section-title {
  max-width: 24ch;
  margin-inline: auto;
}

.cta-trust {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}

.cta-row {
  justify-content: center;
  margin-top: var(--space-8);
}

.two-col-actions {
  justify-content: flex-start;
  margin-top: var(--space-8);
}

.mpk-recruit__actions {
  justify-content: flex-start;
  margin-top: var(--space-8);
}

.proc-final__actions {
  justify-content: center;
  margin-top: var(--space-8);
}

.karriere-actions {
  justify-content: flex-start;
}

.hero-actions,
.page-hero-cta,
.kontakt-hero-cta {
  justify-content: flex-start;
}

.hero-lead .hero-actions {
  margin-top: var(--space-1);
}

.page-hero-cta {
  margin-top: var(--space-6);
}

.kontakt-hero-cta,
.faq-cta,
.bm-cc-actions {
  gap: var(--button-group-gap-compact);
}

.faq-cta {
  margin: var(--space-8) 0 0;
}

.faq-cta .btn {
  min-height: var(--button-min-height-lg);
}

.cta-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--button-group-gap-compact);
  flex-shrink: 0;
}

.contact-cta {
  align-self: flex-start;
}

.form-submit {
  width: 100%;
  justify-content: center;
  margin-top: var(--space-2);
}

.consent-embed-overlay-actions {
  flex-direction: column;
  justify-content: center;
  width: 100%;
  margin-top: var(--space-1);
  gap: var(--space-2);
}

.consent-embed-overlay-actions .btn {
  width: 100%;
}

.bm-cc-actions {
  flex-shrink: 0;
}

.bm-cc-actions--detail {
  margin-top: var(--space-3);
}

.bm-cc-banner .btn--outline {
  box-shadow: none;
  border-color: var(--color-heading);  /* flippt: Navy im Hellen, hell im Dark (Rand bleibt sichtbar) */
}

.bm-cc-banner .btn--outline:is(:hover, :focus-visible) {
  box-shadow: var(--button-shadow-hover-soft);
}

.bm-ls-switch.btn {
  min-height: var(--button-min-height-sm);
  padding: var(--button-padding-y-sm) var(--button-padding-x-sm);
  font-size: var(--text-sm);
}

@media (max-width: 767px) {
  :where(.section-cta, .cta-row, .two-col-actions, .mpk-recruit__actions, .proc-final__actions, .karriere-actions, .hero-actions, .page-hero-cta, .kontakt-hero-cta, .faq-cta, .bm-cc-actions) {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  :where(.section-cta, .cta-row, .two-col-actions, .mpk-recruit__actions, .proc-final__actions, .karriere-actions, .hero-actions, .page-hero-cta, .kontakt-hero-cta, .faq-cta, .bm-cc-actions) > .btn {
    width: min(100%, var(--button-mobile-max));
  }

  :is(.section-cta, .cta-row, .two-col-actions, .mpk-recruit__actions, .proc-final__actions, .karriere-actions, .hero-actions, .page-hero-cta, .kontakt-hero-cta, .faq-cta, .bm-cc-actions).u-justify-start {
    justify-content: center;
  }

  .cta-stack,
  .karriere-banner .cta-stack {
    width: 100%;
    align-items: center;
  }

  .cta-stack .btn {
    width: min(100%, var(--button-mobile-max));
  }

  .contact-cta {
    align-self: center;
  }
}

@media (max-width: 767px) {
  .story-card-cta,
  .jobs-carousel .card-reveal-cta {
    font-size: var(--text-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .card-reveal-track,
  .story-card-cta .card-reveal-track,
  .jobs-carousel .card-reveal-cta .card-reveal-track {
    transition: none !important;
  }

  .card-reveal-track {
    transform: none;
  }

  .btn:is(:hover, :focus-within) {
    transform: none;
  }
}