/* ===================================================================
   IF Call-to-Action – Darstellung
   Nutzt die Farbvariablen des Themes, bringt aber eigene Rückfallwerte
   mit, damit der Block auch ohne das Child-Theme sauber aussieht.
   =================================================================== */

.if-cta{
  --cta-navy:var(--navy,#0e223c);
  --cta-teal:var(--teal,#0f8f80);
  --cta-teal-600:var(--teal-600,#0c7d70);
  --cta-radius:var(--radius,16px);
  display:block;
  margin:3rem 0 1rem;
  border-radius:var(--cta-radius);
  overflow:hidden;
  clear:both;
}

.if-cta__inner{
  padding:clamp(1.9rem,4vw,2.9rem) clamp(1.5rem,4vw,3rem);
  text-align:center;
}

.if-cta__kicker{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:.9rem;
}
.if-cta__kicker::before{content:"";width:24px;height:2px;border-radius:2px;background:currentColor;opacity:.7}

/* Die Überschrift ist ein <h2>. Themes setzen Überschriftengrößen häufig
   über `.klasse h2` – das ist spezifischer als eine einzelne Klasse. Der
   Komponentenwurzel-Selektor davor sorgt dafür, dass diese Größe gilt. */
.if-cta .if-cta__titel{
  font-family:var(--font-display,Georgia,serif);
  font-size:clamp(1.35rem,2.4vw,1.8rem);
  line-height:1.22;
  margin:0 0 .7rem;
  letter-spacing:-.01em;
}

.if-cta__text{
  font-size:1.02rem;
  line-height:1.65;
  max-width:56ch;
  margin:0 auto 2.25rem;
}
.if-cta__text p{margin:0 0 .8em}
.if-cta__text p:last-child{margin-bottom:0}

.if-cta__buttons{
  display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;
}

.if-cta .if-cta__btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:600;font-size:1rem;line-height:1;
  padding:.95rem 1.7rem;border-radius:999px;
  border:1.5px solid transparent;
  text-decoration:none !important;
  transition:transform .15s,box-shadow .15s,background .15s,color .15s,border-color .15s;
}
.if-cta .if-cta__btn:hover{transform:translateY(-2px)}

.if-cta__hinweis{
  margin:1.75rem 0 0;
  font-size:.87rem;
  opacity:.8;
}


/* Wichtig: Das Theme faerbt Links ueber `.if-theme a:not(.btn)` – das ist
   spezifischer (0,2,1) als eine Variante plus Button-Klasse (0,2,0) und
   ueberschreibt sonst die Schriftfarbe der Buttons. Die Regeln unten
   nennen die Button-Klasse deshalb doppelt (0,3,0) und gewinnen damit. */
/* --- Dunkelblau (kräftig) ---------------------------------------- */
.if-cta--navy{
  background:linear-gradient(135deg,var(--cta-navy) 0%,var(--navy-600,#1e456f) 100%);
  color:#c9d5e5;
}
.if-cta--navy .if-cta__kicker{color:var(--cta-teal)}
.if-cta.if-cta--navy .if-cta__titel{color:#fff}
.if-cta--navy .if-cta__btn.if-cta__btn--primaer{
  background:var(--cta-teal);color:#fff;
  box-shadow:0 8px 20px -6px rgba(15,143,128,.55);
}
.if-cta--navy .if-cta__btn.if-cta__btn--primaer:hover{background:var(--cta-teal-600);color:#fff}
.if-cta--navy .if-cta__btn.if-cta__btn--zweit{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.35);
}
.if-cta--navy .if-cta__btn.if-cta__btn--zweit:hover{border-color:#fff;background:rgba(255,255,255,.09);color:#fff}

/* --- Hell (dezent) ----------------------------------------------- */
.if-cta--soft{
  background:var(--bg-soft,#f5f7fb);
  border:1px solid var(--line,#e6eaf1);
  color:var(--body,#3a4658);
}
.if-cta--soft .if-cta__kicker{color:var(--cta-teal-600)}
.if-cta.if-cta--soft .if-cta__titel{color:var(--cta-navy)}
.if-cta--soft .if-cta__btn.if-cta__btn--primaer{
  background:var(--cta-teal);color:#fff;
  box-shadow:0 8px 20px -6px rgba(15,143,128,.45);
}
.if-cta--soft .if-cta__btn.if-cta__btn--primaer:hover{background:var(--cta-teal-600);color:#fff}
.if-cta--soft .if-cta__btn.if-cta__btn--zweit{
  background:#fff;color:var(--cta-navy);border-color:rgba(14,34,60,.28);
}
.if-cta--soft .if-cta__btn.if-cta__btn--zweit:hover{border-color:var(--cta-navy);color:var(--cta-navy)}

/* --- Türkis (Akzent) --------------------------------------------- */
.if-cta--teal{
  background:linear-gradient(135deg,var(--cta-teal-600) 0%,var(--cta-teal) 100%);
  color:rgba(255,255,255,.9);
}
.if-cta--teal .if-cta__kicker{color:rgba(255,255,255,.85)}
.if-cta.if-cta--teal .if-cta__titel{color:#fff}
.if-cta--teal .if-cta__btn.if-cta__btn--primaer{
  background:#fff;color:var(--cta-navy);
  box-shadow:0 8px 20px -8px rgba(0,0,0,.35);
}
.if-cta--teal .if-cta__btn.if-cta__btn--primaer:hover{color:var(--cta-navy)}
.if-cta--teal .if-cta__btn.if-cta__btn--zweit{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.5);
}
.if-cta--teal .if-cta__btn.if-cta__btn--zweit:hover{border-color:#fff;background:rgba(255,255,255,.12);color:#fff}

/* Links im CTA-Text nicht wie Fließtextlinks unterstreichen */
.if-cta__text a{color:inherit;text-decoration:underline;text-underline-offset:2px}

@media (max-width:600px){
  .if-cta__buttons{flex-direction:column}
  .if-cta__btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .if-cta__btn{transition:none}
  .if-cta__btn:hover{transform:none}
}