/* ===== Classy Confidence — zentraler Button-Baustein (Variante A, 2026-09-01) =====
   EINE Quelle, drei Kopien in den Projekt-Wurzeln (gleiches Muster wie track.js).
   Regel: Hintergrund- und Hover-FARBEN bleiben im CSS der jeweiligen Seite.
   Hier liegen nur Form, Schrift, Schatten, Shine, Subline und Motion.
   Aenderungen immer in ALLEN drei Kopien nachziehen. */

/* --- Primaer-CTAs --- */
.btn:not(.nav__cta),
.cta-btn,
.umfrage-send,
.wa-form button,
.ccb-404{
  border-radius:12px;
  justify-content:center;
  text-align:center;
  font-family:'Public Sans',-apple-system,sans-serif;
  font-weight:800;
  letter-spacing:.005em;
  text-transform:none;
  position:relative;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(16,24,40,.16),0 2px 6px rgba(0,0,0,.08);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
}
.btn:not(.nav__cta):hover,
.cta-btn:hover,
.umfrage-send:hover,
.wa-form button:hover,
.ccb-404:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(16,24,40,.22),0 3px 8px rgba(0,0,0,.10);
}

/* Shine-Lichtstreifen */
.btn:not(.nav__cta)::after,
.cta-btn::after,
.umfrage-send::after,
.wa-form button::after,
.ccb-404::after{
  content:"";
  position:absolute;
  top:0;left:-60%;
  width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.33),transparent);
  animation:ccb-shine 2.6s infinite;
  pointer-events:none;
}
@keyframes ccb-shine{0%{left:-60%}55%{left:120%}100%{left:120%}}
/* Weisse/helle Buttons auf dunklen Sektionen: dunkler Lichtstreifen, sonst unsichtbar (Daniel 01.09.) */
.section--dark .btn:not(.nav__cta)::after{
  background:linear-gradient(100deg,transparent,rgba(0,0,0,.14),transparent);
}

/* Subline im Button (flex-wrap + flex-basis, weil die Website-Buttons Flex-Container sind) */
.btn{flex-wrap:wrap;row-gap:6px}
/* Schmale Screens: Pfeil ausblenden, wenn der Button eine Subline hat (sonst eigene Zeile) */
@media (max-width:640px){
  .btn:has(small) .arrow,
  .btn:has(small) .arw{display:none}
}
.btn small,
.cta-btn small{
  display:block;
  width:100%;
  flex-basis:100%;
  text-align:center;
  font-weight:500;
  font-size:12.5px;
  line-height:1.35;
  opacity:.9;
  margin-top:4px;
  letter-spacing:.01em;
  text-transform:none;
}

/* --- Sekundaer: Outline-Buttons ohne Schatten und Shine --- */
.btn--outline{box-shadow:none}
.btn--outline::after{display:none}
.btn--outline:hover{box-shadow:none}

/* --- Nav-CTA: nur die Rundung, sonst unangetastet --- */
.nav__cta{border-radius:12px}

/* --- Utility-Buttons: nur Rundung --- */
.cal-btn,.dl-card{border-radius:12px}

/* --- Reduzierte Bewegung: Shine und Anheben aus --- */
@media (prefers-reduced-motion:reduce){
  .btn:not(.nav__cta)::after,.cta-btn::after,.umfrage-send::after,.wa-form button::after,.ccb-404::after{animation:none;display:none}
  .btn:not(.nav__cta):hover,.cta-btn:hover,.umfrage-send:hover,.wa-form button:hover,.ccb-404:hover{transform:none}
}