/* =============================================================================
   cta-band — zentrierte Sekundär-CTA-Sektion
   =============================================================================
   Schlanke, mittig gesetzte Handlungsaufforderung zum Wiederholen weiter unten
   auf einer Seite: Headline, zwei Sätze Fließtext, ein Primär-Button. Optional
   ein dezenter Puls-Ring um den Button, der die Aufmerksamkeit hält.

   TOKEN-PUR: ausschließlich Variablen aus _tokens/_base.css oder color-mix()
   daraus — kein hardgekodeter Marken-Wert. Siehe rules/lp-components-token-disziplin.md.
   Die --cb-* sind komponenten-lokale Layout-Konstanten (Inhalts-Breite, Mindest-
   Touch-Höhe, Puls-Ring-Stärke) — an keine Marke gekettet, laut Regel erlaubt.

   Lade-Reihenfolge: _tokens/_base.css → <brand>.css → diese Datei → cta-band.js
   (das JS ist optional — die Komponente funktioniert auch ganz ohne).
   ============================================================================ */

.cta-band {
  /* komponenten-lokale Konstanten (kein Marken-Bezug) */
  --cb-content-w:  640px;   /* max. Breite des zentrierten Inhalts */
  --cb-touch-min:  44px;    /* Mindest-Touch-Target (Button-Höhe) */
  --cb-ring:       2px;     /* Stärke des Puls-Rings */

  text-align: center;
  padding: var(--space-xxl) var(--space-m);
}

.cta-band__inner {
  max-width: var(--cb-content-w);
  margin-inline: auto;
}

.cta-band__title {
  font-family: var(--font-headline);
  font-size: var(--font-scale-h2);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-ink);
  margin: 0;
}

.cta-band__body {
  font-family: var(--font-body);
  font-size: var(--font-scale-body);
  line-height: 1.6;
  color: var(--color-ink-soft);
  margin: var(--space-m) auto 0;
  max-width: var(--cb-content-w);
}

/* Wrapper um den Button, damit der Puls-Ring relativ positioniert werden kann
   und nur so breit wie der Button selbst ist (inline-block). */
.cta-band__action {
  position: relative;
  display: inline-block;
  margin-top: var(--space-l);
}

.cta-band__btn {
  position: relative;
  z-index: 1;                       /* über dem Puls-Ring */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cb-touch-min);  /* Touch-Target ≥ 44px */
  padding: var(--space-s) var(--space-l);
  font-family: var(--font-body);
  font-size: var(--font-scale-body);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  color: var(--color-on-primary);
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-band__btn:hover,
.cta-band__btn:focus-visible {
  background: var(--color-primary-strong);
  transform: translateY(-2px);                 /* leichter Lift */
  box-shadow: var(--shadow-soft);
}

.cta-band__btn:focus-visible {
  outline: var(--cb-ring) solid var(--color-on-primary);
  outline-offset: var(--cb-ring);
}

/* Optionaler Puls-Ring: nur sichtbar, wenn das Action-Element data-pulse trägt.
   Liegt hinter dem Button, fängt keine Klicks ab und skaliert/verblasst sanft. */
.cta-band__action[data-pulse]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  border: var(--cb-ring) solid var(--color-primary);
  pointer-events: none;
  animation: cta-band-pulse 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes cta-band-pulse {
  0%   { transform: scale(1);    opacity: 0.55; }
  70%  { transform: scale(1.18); opacity: 0;    }
  100% { transform: scale(1.18); opacity: 0;    }
}

@media (max-width: 600px) {
  .cta-band {
    padding: var(--space-xl) var(--space-m);
  }
  /* Button auf schmalen Screens voll-breit, damit er gut greifbar ist. */
  .cta-band__action { display: block; }
  .cta-band__btn    { display: flex; width: 100%; }
}

/* Reduced-Motion: keinen Puls erzwingen, keinen Hover-Lift animieren. */
@media (prefers-reduced-motion: reduce) {
  .cta-band__action[data-pulse]::before { animation: none; }
  .cta-band__btn {
    transition: background 0.2s ease;
  }
  .cta-band__btn:hover,
  .cta-band__btn:focus-visible { transform: none; }
}