/* JUNO · Göttinnen-Rauhnächte 2026 · Kaufknöpfe in Kartenpink (v1.1.4)
   Ersetzt das Dunkelrot aller Kaufknöpfe (Hero „ICH MÖCHTE DABEI SEIN“ und
   alle .purchase-btn) durch #E99BCA, die Grundfarbe der Orakelkarten.
   Schrift in JUNO-Grün #182A20 und Quicksand Bold (700), weil Weiß auf
   diesem Pink zu schwach wäre.
   Auf hellem Creme-Grund ein etwas kräftigeres Pink (#DD7DB6), damit der
   Knopf dort genauso auffällt wie auf Grün.
   Der Knopf im pinken Early-Bird-Abschnitt (#section-9) bleibt grün
   (eigene Regel in responsive.css mit höherer Gewichtung).
   Rückbau: diese Datei und ihre Zeile in index.html löschen. */

.title-area .cta,
.purchase-btn {
  background: #E99BCA;
  color: #182A20;
  font-family: Quicksand, Arial, sans-serif;
  font-weight: 700;
  transition: background-color .2s ease;
}
.title-area .cta:hover,
.purchase-btn:hover {
  background: #F2B5DA;
  color: #182A20;
}
.title-area .cta:focus-visible,
.purchase-btn:focus-visible {
  outline: 2px solid #E99BCA;
  outline-offset: 3px;
}

/* Creme-Grund: „Entdecke eine neue Perspektive …“ (Desktop und Mobile)
   und der Knopf nach „Hinter JUNO“ (nur Desktop, auf Mobile ist er grün) */
#section-5 .purchase-btn { background: #DD7DB6; }
#section-5 .purchase-btn:hover { background: #E99BCA; }
#section-5 .purchase-btn:focus-visible { outline-color: #DD7DB6; }
@media (orientation: landscape) {
  .hz-cta .purchase-btn { background: #DD7DB6; }
  .hz-cta .purchase-btn:hover { background: #E99BCA; }
  .hz-cta .purchase-btn:focus-visible { outline-color: #DD7DB6; }
}

/* v1.1.4 · Hero-Knopf „Schlank gefüllt“ (Variante A): flacher, kleinere Schrift,
   mehr Buchstabenabstand. Wirkt eleganter, bleibt klar als Knopf erkennbar. */
.title-area .cta { letter-spacing: .16em; border: 0; }
@media (orientation: portrait) {
  .title-area .cta { padding: 11px 22px; font-size: 11px; margin-top: 22px; letter-spacing: .13em; max-width: none; }
}
@media (orientation: landscape) {
  .title-area .cta {
    padding: calc(13px * var(--cta-boost, 1) * var(--t-scale, 1)) calc(34px * var(--cta-boost, 1) * var(--t-scale, 1));
    font-size: calc(14px * var(--cta-boost, 1) * var(--t-scale, 1));
  }
}