/*
 * VOMA Child Theme – buttons.css
 *
 * VOMA Primary, Secondary und Final CTA Button.
 *
 * Quellen:
 *   06_Standards/CI/COMPONENTS.md  – Zielwerte Buttons
 *   06_Standards/CI/COLORS.md      – Farbpalette
 *   06_Standards/DEVELOPMENT/CSS-TOKENS.md – Token-Register
 *
 * Spezifitäts-Hinweis (Sprint-Review „Runde 3", 01.07.2026):
 * GeneratePress' „Additional CSS" (Customizer, Post-ID 5009 – altes,
 * noch für nicht migrierte Seiten benötigtes Design-System) definiert
 * ebenfalls eine Basisklasse `.voma-btn{ padding: 9px 16px; ... }` und
 * lädt nach unserem Theme-CSS. Bei gleicher Spezifität (eine Klasse)
 * gewinnt die zuletzt geladene Regel – das hat u. a. das Padding
 * überschrieben. Diese Datei löst das über zusammengesetzte Selektoren
 * (`.voma-btn.voma-btn--primary` = zwei Klassen = höhere Spezifität),
 * statt die geteilte Alt-Datei anzufassen, die andere, noch nicht
 * umgebaute Seiten weiterhin benötigen.
 */

/* ============================================================
   BASE
   Nur Eigenschaften, die mit dem alten System nicht kollidieren
   (Layout-Grundverhalten, Übergänge). Alle optisch entscheidenden
   Werte stehen in den zusammengesetzten Selektoren weiter unten.
   ============================================================ */

.voma-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--voma-space-2);
  cursor: pointer;
  transition:
    background var(--voma-transition-base),
    border-color var(--voma-transition-base),
    box-shadow var(--voma-transition-base),
    transform var(--voma-transition-base);
}

.voma-btn:hover {
  transform: translateY(-2px);
}

.voma-btn:active {
  transform: translateY(0);
  transition-duration: 60ms;
}

/* ============================================================
   GEMEINSAME FORM (Primary + Secondary)
   Höhere Spezifität (zwei Klassen) als die Alt-Regel `.voma-btn`.
   ============================================================ */

.voma-btn.voma-btn--primary,
.voma-btn.voma-btn--secondary {
  min-height: 3rem;
  padding-block: var(--voma-space-2);
  padding-inline: var(--voma-space-6);
  border: 1.5px solid transparent;
  border-radius: var(--voma-radius-pill);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  /* Normal statt nowrap: lange Button-Texte (z. B. "Kostenlosen
     Vertragscheck starten") sollen auf schmalen Viewports umbrechen
     statt sichtbar über die Pill-Form hinauszulaufen (Mobile-Bugfix
     02.07.2026). Bei kurzen Labels, die ohnehin in eine Zeile passen,
     ändert das nichts am Erscheinungsbild. */
  white-space: normal;
}

/* ============================================================
   PRIMARY
   Quelle: COMPONENTS.md – #52b165, Hover #3f9a55
   ============================================================ */

.voma-btn.voma-btn--primary {
  background: var(--voma-green);
  color: #ffffff;
  border-color: var(--voma-green);
  box-shadow: var(--voma-shadow-btn);
}

.voma-btn.voma-btn--primary:hover,
.voma-btn.voma-btn--primary:focus-visible {
  background: var(--voma-green-dark);
  border-color: var(--voma-green-dark);
  color: #ffffff;
  box-shadow: var(--voma-shadow-btn-hover);
}

/* ============================================================
   SECONDARY
   Quelle: COMPONENTS.md – weiß, grüner Rahmen
   Rahmenfarbe im Ruhezustand dezenter, im Hover kräftiger –
   klarere Abstufung zu Primary.
   ============================================================ */

.voma-btn.voma-btn--secondary {
  background: #ffffff;
  color: var(--voma-green);
  border-color: rgba(82, 177, 101, .35);
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
}

.voma-btn.voma-btn--secondary:hover,
.voma-btn.voma-btn--secondary:focus-visible {
  background: rgba(82, 177, 101, .06);
  border-color: var(--voma-green);
  color: var(--voma-green-dark);
}

/* ============================================================
   FINAL CTA BUTTON
   Quelle: COMPONENTS.md – Radius 12px, Gewicht 800
   ============================================================ */

.voma-btn.voma-btn--cta {
  min-height: 3.25rem;
  padding-block: var(--voma-space-2);
  padding-inline: var(--voma-space-7);
  border: 1.5px solid var(--voma-green);
  border-radius: var(--voma-radius-btn);
  background: var(--voma-green);
  color: #ffffff;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  /* Normal statt nowrap – siehe Begründung bei .voma-btn--primary/--secondary. */
  white-space: normal;
  box-shadow: var(--voma-shadow-btn);
}

.voma-btn.voma-btn--cta:hover,
.voma-btn.voma-btn--cta:focus-visible {
  background: var(--voma-green-dark);
  border-color: var(--voma-green-dark);
  color: #ffffff;
  box-shadow: var(--voma-shadow-btn-hover);
}