/* Premium-Werbebanner (Ad-Free-Abo) — von inc/premium_promo.php gerendert.
   Nutzt die kanonischen --premium-* Tokens (Hell/Dunkel automatisch), damit der
   Banner exakt die Optik der Premium-Seite trägt. */

.pm-promo {
  display: flex; align-items: center; gap: 18px 24px; flex-wrap: wrap;
  padding: 16px 20px; border-radius: var(--radius);
  background: var(--premium-bg); background-image: var(--premium-pattern), var(--premium-bg);
  background-repeat: no-repeat; background-size: cover;
  border: 1px solid var(--premium-border);
  box-shadow: var(--premium-shadow);
  color: var(--premium-ink);
}
.pm-promo-body { flex: 1 1 340px; min-width: 0; }

.pm-promo-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 10.5px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .1em;
  color: var(--premium-ink);
}
.pm-promo-eyebrow svg { width: 14px; height: 14px; }
.pm-promo-head {
  margin: 7px 0 3px; font: 800 clamp(16px, 2.4vw, 20px)/1.2 var(--font-display);
  color: var(--premium-ink);
}
.pm-promo-sub {
  margin: 0; font: 500 13px/1.5 var(--font-sans); color: var(--premium-ink);
  opacity: .88; max-width: 60ch;
}

.pm-promo-cta {
  flex: 0 0 auto; align-self: center; white-space: nowrap;
  padding: 11px 20px; border-radius: var(--radius-pill, 999px);
  background: var(--premium-cta-bg); color: var(--premium-cta-ink);
  box-shadow: var(--premium-cta-shadow);
  font: 800 14px/1 var(--font-sans); letter-spacing: .01em; text-decoration: none;
  transition: filter .16s ease, transform .16s ease;
}
.pm-promo-cta:hover { filter: brightness(1.05); transform: translateY(-1px); text-decoration: none; }
.pm-promo-cta span { margin-left: 4px; }

@media (max-width: 560px) {
  .pm-promo { padding: 15px 16px; gap: 14px; }
  .pm-promo-cta { width: 100%; text-align: center; }
}