/* =====================================================================
   SDC Suite – Button-System v4 (Referenz: Ergebnismodul)
   EXAKT der Look der Klassen-Reiter und Ergebnis-Buttons:
   – Pill-Form
   – Sekundär (dunkler Grund): dezente helle Fläche + feine Umrandung
   – Primär (.p, „Jetzt nennen“ / aktiver Reiter): Orange-Verlauf mit
     weichem orangenem Schein
   – Heller Grund (.sdc-on-light): weiße Pille, dunkler Text
   – Mouse-over: oranges Aufleuchten (Rand + Glow)
   ===================================================================== */

:root{
  --sdc-orange:#ff6900;
  --sdc-orange-hell:#fcb900;
}

/* ---------- Basis: dezente Pille auf dunklem Grund ---------- */
.sdc-btn,
.sdcv-btn,
.sdcs-btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;
  padding:11px 20px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.07);
  color:#e4e4e4;
  font-family:inherit;font-size:13.5px;font-weight:600;letter-spacing:.03em;
  line-height:1.3;text-align:center;text-decoration:none;white-space:nowrap;
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,
             background-color .2s ease,color .2s ease,filter .2s ease;
}

/* Mouse-over: oranges Aufleuchten */
.sdc-btn:hover,.sdcv-btn:hover,.sdcs-btn:hover{
  transform:translateY(-1px);
  color:#fff;
  border-color:rgba(255,150,60,.75);
  background:rgba(255,105,0,.18);
  box-shadow:0 0 0 1px rgba(255,105,0,.30),0 0 16px rgba(255,105,0,.45);
}
.sdc-btn:active,.sdcv-btn:active,.sdcs-btn:active{
  transform:translateY(0);
  box-shadow:0 0 10px rgba(255,105,0,.30);
}
.sdc-btn:focus-visible,.sdcv-btn:focus-visible,.sdcs-btn:focus-visible{
  outline:2px solid #ffb066;outline-offset:3px;
}

/* ---------- Primär: Orange-Verlauf mit Schein (wie der aktive Reiter) ---------- */
.sdc-btn.p,.sdcv-btn.p,.sdcs-btn.p,
.sdc-btn--primary{
  background:linear-gradient(135deg,var(--sdc-orange-hell),var(--sdc-orange));
  border-color:transparent;
  color:#fff;
  box-shadow:0 6px 16px rgba(255,105,0,.40);
}
.sdc-btn.p:hover,.sdcv-btn.p:hover,.sdcs-btn.p:hover,
.sdc-btn--primary:hover{
  filter:brightness(1.06);
  background:linear-gradient(135deg,var(--sdc-orange-hell),var(--sdc-orange));
  border-color:transparent;
  box-shadow:0 0 22px rgba(255,105,0,.55),0 8px 20px rgba(255,105,0,.42);
}

/* ---------- Kompakt-Variante (Countdown, Werkzeugleisten) ---------- */
.sdc-btn.sm,.sdcv-btn.sm,.sdcs-btn.sm{
  width:auto;
  padding:8px 16px;
  font-size:13px;
  gap:6px;
}

/* ---------- Deaktiviert ---------- */
.sdc-btn.is-off,.sdcv-btn-off,.sdcs-btn.is-off{
  opacity:.55;cursor:default;pointer-events:none;
  border-style:dashed;
  background:rgba(255,255,255,.04);
  box-shadow:none;
}

/* ---------- Auf hellem Grund: weiße Pille, dunkler Text ---------- */
.sdc-on-light .sdc-btn,
.sdc-on-light .sdcs-btn{
  color:#2a2a2a;
  border-color:rgba(0,0,0,.12);
  background:linear-gradient(180deg,#fff,#f0f0f0);
  box-shadow:0 3px 10px rgba(0,0,0,.10);
}
.sdc-on-light .sdc-btn:hover,
.sdc-on-light .sdcs-btn:hover{
  color:#111;
  border-color:rgba(255,105,0,.55);
  box-shadow:0 0 0 1px rgba(255,105,0,.30),0 0 16px rgba(255,105,0,.35),0 5px 14px rgba(0,0,0,.12);
}

@media (prefers-reduced-motion:reduce){
  .sdc-btn,.sdcv-btn,.sdcs-btn{transition:none}
}