/* ============================================================
   CTA-Banner — Letzter Call-to-Action vor Footer
   Wiederverwendbar auf jeder Unterseite (laut Workshop-Konzept).
   ============================================================ */

.cta-banner {
  --bg: var(--color-gruen);
  --next-bg: var(--color-anthrazit);
  background: var(--bg);
  color: var(--color-sand);
  padding: clamp(4rem, 8vw, 6rem) 0;
  position: relative;
  overflow: hidden;
}
.cta-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(197,164,145,0.18), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(124,4,2,0.22), transparent 50%);
  pointer-events: none;
}
.cta-banner-inner {
  position: relative;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
}
.cta-banner h2 {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  margin-bottom: var(--space-md);
  color: var(--color-sand);
}
.cta-banner h2 em {
  font-style: italic;
  color: var(--color-gold);
  font-weight: 400;
}
.cta-banner p {
  font-size: 1.15rem;
  line-height: 1.6;
  margin-bottom: var(--space-lg);
  color: rgba(234,228,211,0.85);
}
.cta-banner-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}
.cta-banner .btn-rot { background: var(--color-rot); color: var(--color-cream); }
.cta-banner .btn-rot:hover { background: var(--color-rot-dark); }
.cta-banner .btn-ghost {
  color: var(--color-sand);
  border-color: rgba(234,228,211,0.55);
}
.cta-banner .btn-ghost:hover {
  background: var(--color-sand);
  color: var(--color-gruen);
  border-color: var(--color-sand);
}

@media (max-width: 720px) {
  .cta-banner h2 { font-size: clamp(1.6rem, 6vw, 2.4rem); }
}