/* ============================================================
   AeraBloom & Friends — Komponenten
   Benoetigt: fonts.css + tokens.css
   ============================================================ */

/* --- Handschrift-Akzent (Headline oder einzelnes Wort) --- */
.ab-hand {
  font-family: var(--font-hand);
  font-weight: 400;
  background: var(--grad-script);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Glow-Dot (Aufzaehlungs-Akzent) --- */
.ab-glow-dot {
  display: inline-block;
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle, var(--ab-pink) 0%, rgba(255,45,123,.55) 45%, transparent 75%);
  filter: blur(.6px);
  flex-shrink: 0;
}
.ab-glow-dot--cyan {
  background: radial-gradient(circle, var(--ab-cyan) 0%, rgba(91,192,235,.55) 45%, transparent 75%);
}

/* --- Buttons --- */
.ab-btn {
  display: inline-block; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 14.5px; font-weight: 600;
  padding: 13px 28px; border-radius: var(--radius-btn);
  transition: transform .2s, box-shadow .2s;
  text-decoration: none;
}
.ab-btn--primary {
  background: var(--grad-brand); color: #fff;
  box-shadow: var(--shadow-glow-pink);
}
.ab-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(255,45,123,.4);
}
.ab-btn--secondary {
  background: #fff; color: var(--ab-petrol);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--n-200);
}
.ab-btn--secondary:hover { box-shadow: var(--shadow-md); }

/* --- Badge --- */
.ab-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  padding: 7px 15px; border-radius: 999px;
  background: #fff; box-shadow: var(--shadow-sm);
  color: var(--n-700);
}
.ab-badge .ab-glow-dot { width: 9px; height: 9px; }

/* --- Feature-Card mit Gradient-Schatten --- */
.ab-card {
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-grad);
  padding: 24px;
  transition: box-shadow .3s, transform .25s;
}
.ab-card:hover {
  box-shadow: var(--shadow-grad-hover);
  transform: translateY(-2px);
}

/* --- Schlichte Karte (nur neutraler Schatten) --- */
.ab-card--plain { box-shadow: var(--shadow-sm); }
.ab-card--plain:hover { box-shadow: var(--shadow-md); transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ab-btn, .ab-card { transition: none; }
}