/* ============================================================
   SF Demo Wizard – Abschnitt-Theme Override (Astra/Kubio safe)
   Ziel: dunkles UI wie dein Abschnitt, goldener Accent,
         alle Buttons/Inputs sauber lesbar, hohe Spezifität.
   ============================================================ */

.sf.sf-module .sf-demo-wizard-wrap,
.sf.sf-module .sf-demo-wizard-wrap *{
  box-sizing: border-box !important;
  font-family: inherit !important;
}

/* ---------- Trigger (falls er irgendwo sichtbar bleibt) ---------- */
.sf.sf-module .sf-demo-wizard-trigger,
.sf.sf-module .sf-demo-wizard-wrap a.sf-demo-wizard-trigger{
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  padding: 10px 14px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(202,162,74,.60) !important;
  background: linear-gradient(180deg, rgba(202,162,74,.95), rgba(202,162,74,.84)) !important;
  color: #121214 !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.38) !important;
  transition: transform .12s ease, filter .12s ease !important;
}

.sf.sf-module .sf-demo-wizard-trigger:hover,
.sf.sf-module .sf-demo-wizard-wrap a.sf-demo-wizard-trigger:hover{
  transform: translateY(-1px) !important;
  filter: saturate(1.05) brightness(1.02) !important;
}

/* ---------- Modal Layer ---------- */
.sf.sf-module .sf-demo-wizard-modal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important; /* über Astra/Kubio + über deinem Overlay */
  display: none !important;
}

.sf.sf-module .sf-demo-wizard-modal.is-open{
  display: block !important;
}

.sf.sf-module .sf-demo-wizard-backdrop{
  position: absolute !important;
  inset: 0 !important;
  background: rgba(10,10,12,.72) !important; /* wie dein Abschnitt-Overlay */
  backdrop-filter: blur(2px) !important;
}

/* ---------- Panel (das ist der Teil, der "zu weit oben" war) ---------- */
.sf.sf-module .sf-demo-wizard-panel{
  position: relative !important;
  width: min(980px, calc(100vw - 28px)) !important;

  /* ↓ HIER die Verschiebung nach unten */
  margin: 120px auto 20px auto !important;

  /* Höhe: genug Platz unten, damit Footer nicht abgeschnitten ist */
  max-height: calc(100vh - 160px) !important;

  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,.12) !important;

  background:
    radial-gradient(900px 360px at 30% 0%, rgba(202,162,74,.16), transparent 60%),
    rgba(0,0,0,.46) !important;

  color: #f3f5fb !important;
  box-shadow: 0 24px 54px rgba(0,0,0,.60) !important;

  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;

  outline: none !important; /* Fokus handling via JS */
}

/* Mobile: weniger Top-Abstand */
@media (max-width: 600px){
  .sf.sf-module .sf-demo-wizard-panel{
    margin-top: 80px !important;
    max-height: calc(100vh - 120px) !important;
  }
}

/* ---------- Header ---------- */
.sf.sf-module .sf-demo-wizard-header{
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;

  padding: 16px 18px !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

.sf.sf-module .sf-demo-wizard-title strong{
  display: block !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  color: #f7f9ff !important;
  letter-spacing: -.01em !important;
}

.sf.sf-module .sf-demo-wizard-subtitle{
  display: block !important;
  font-size: 12px !important;
  color: rgba(243,245,251,.72) !important;
  margin-top: 2px !important;
  line-height: 1.35 !important;
}

/* Header action buttons (Reset / Close) */
.sf.sf-module .sf-demo-wizard-actions{
  display: flex !important;
  gap: 8px !important;
}

.sf.sf-module .sf-demo-wizard-actions button,
.sf.sf-module button.sf-demo-wizard-reset,
.sf.sf-module button.sf-demo-wizard-close{
  appearance: none !important;
  -webkit-appearance: none !important;

  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.08) !important;
  color: rgba(243,245,251,.92) !important;

  border-radius: 14px !important;
  padding: 8px 10px !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  white-space: nowrap !important;

  box-shadow: none !important;
}

.sf.sf-module .sf-demo-wizard-actions button:hover{
  filter: brightness(1.06) !important;
}

/* ---------- Body ---------- */
.sf.sf-module .sf-demo-wizard-body{
  padding: 14px 18px 0 18px !important;
  overflow: auto !important;
  flex: 1 1 auto !important;
}

/* Progress */
.sf.sf-module .sf-demo-wizard-progress{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.sf.sf-module .sf-demo-wizard-progressbar{
  flex: 1 !important;
  height: 10px !important;
  background: rgba(255,255,255,.10) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

.sf.sf-module .sf-demo-wizard-progressbar span{
  display: block !important;
  height: 100% !important;
  width: 0% !important;

  background: linear-gradient(135deg, #caa24a, #e0c06a) !important;
  border-radius: 999px !important;
  transition: width .2s ease !important;
}

.sf.sf-module .sf-demo-wizard-steplabel{
  font-size: 12px !important;
  color: rgba(243,245,251,.72) !important;
  white-space: nowrap !important;
}

/* Cards / grid */
.sf.sf-module .sf-demo-wizard-viewport{ padding-bottom: 16px !important; }

.sf.sf-module .sf-demo-card{
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 16px !important;
  padding: 14px !important;
  background: rgba(0,0,0,.22) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.28) !important;
}

.sf.sf-module .sf-demo-grid{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

@media (max-width: 800px){
  .sf.sf-module .sf-demo-grid{ grid-template-columns: 1fr !important; }
}

/* Text */
.sf.sf-module .sf-demo-h1{
  font-size: 18px !important;
  margin: 0 0 6px 0 !important;
  color: #f7f9ff !important;
  font-weight: 950 !important;
  letter-spacing: -.01em !important;
}

.sf.sf-module .sf-demo-p{
  margin: 0 0 10px 0 !important;
  color: rgba(243,245,251,.86) !important;
  line-height: 1.45 !important;
}

.sf.sf-module .sf-demo-muted{
  color: rgba(243,245,251,.68) !important;
  font-size: 13px !important;
}

.sf.sf-module .sf-demo-badge{
  display: inline-block !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;

  border: 1px solid rgba(202,162,74,.40) !important;
  background: rgba(202,162,74,.10) !important;
  color: rgba(243,245,251,.88) !important;

  margin-right: 6px !important;
}

/* ---------- Buttons (alle!) ---------- */
.sf.sf-module .sf-demo-btn,
.sf.sf-module .sf-demo-wizard-prev,
.sf.sf-module .sf-demo-wizard-next{
  appearance: none !important;
  -webkit-appearance: none !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  padding: 10px 12px !important;
  border-radius: 14px !important;

  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  cursor: pointer !important;
  text-decoration: none !important;

  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.08) !important;
  color: rgba(243,245,251,.92) !important;

  box-shadow: none !important;
}

.sf.sf-module .sf-demo-btn:hover,
.sf.sf-module .sf-demo-wizard-prev:hover{
  filter: brightness(1.06) !important;
}

.sf.sf-module .sf-demo-btn.primary,
.sf.sf-module .sf-demo-wizard-next{
  border: 1px solid rgba(202,162,74,.60) !important;
  background: linear-gradient(180deg, rgba(202,162,74,.95), rgba(202,162,74,.84)) !important;
  color: #121214 !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.38) !important;
}

.sf.sf-module .sf-demo-btn.primary:hover,
.sf.sf-module .sf-demo-wizard-next:hover{
  transform: translateY(-1px) !important;
  filter: saturate(1.05) brightness(1.02) !important;
}

.sf.sf-module .sf-demo-btn:disabled,
.sf.sf-module .sf-demo-wizard-prev:disabled,
.sf.sf-module .sf-demo-wizard-next:disabled{
  opacity: .55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ---------- Table ---------- */
.sf.sf-module .sf-demo-table{
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
  color: rgba(243,245,251,.86) !important;
}

.sf.sf-module .sf-demo-table th,
.sf.sf-module .sf-demo-table td{
  border-top: 1px solid rgba(255,255,255,.10) !important;
  padding: 10px 8px !important;
  text-align: left !important;
}

.sf.sf-module .sf-demo-table th{
  color: rgba(243,245,251,.72) !important;
  font-weight: 800 !important;
}

/* ---------- Footer ---------- */
.sf.sf-module .sf-demo-wizard-footer{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 18px !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  gap: 12px !important;
}

.sf.sf-module .sf-demo-wizard-note{
  font-size: 12px !important;
  color: rgba(243,245,251,.68) !important;
}

.sf.sf-module .sf-demo-wizard-footer-right{
  display: flex !important;
  gap: 10px !important;
}

/* ---------- Fields ---------- */
.sf.sf-module .sf-demo-field{
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-top: 10px !important;
}

.sf.sf-module .sf-demo-field label{
  font-size: 12px !important;
  color: rgba(243,245,251,.72) !important;
  font-weight: 700 !important;
}

.sf.sf-module .sf-demo-field input,
.sf.sf-module .sf-demo-field select{
  appearance: none !important;
  -webkit-appearance: none !important;

  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(0,0,0,.22) !important;
  color: rgba(243,245,251,.92) !important;

  border-radius: 14px !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  outline: none !important;
}

.sf.sf-module .sf-demo-field input::placeholder{
  color: rgba(243,245,251,.55) !important;
}

.sf.sf-module .sf-demo-field input:focus,
.sf.sf-module .sf-demo-field select:focus{
  border-color: rgba(202,162,74,.70) !important;
  box-shadow: 0 0 0 4px rgba(202,162,74,.18) !important;
}

/* ---------- Toast ---------- */
.sf.sf-module .sf-demo-toast{
  position: fixed !important;
  left: 50% !important;
  bottom: 18px !important;
  transform: translateX(-50%) !important;

  background: rgba(17,24,39,.95) !important;
  color: #fff !important;

  padding: 10px 12px !important;
  border-radius: 999px !important;
  font-size: 13px !important;

  z-index: 100001 !important;
  display: none !important;

  border: 1px solid rgba(255,255,255,.12) !important;
}

.sf.sf-module .sf-demo-toast.is-show{ display: block !important; }